/* ===================================================================
   Remembly landing — shared design system.
   Loaded by every page so the header, footer and core components stay
   identical across the site. Page-specific styles live in each page.
   =================================================================== */

:root{
  --ink:#191c30;
  --body:#20233a;
  --muted:#565b76;
  --soft:#6b6f86;
  --faint:#9aa0b8;
  --brand:#2400ff;
  --brand-2:#007eff;
  --gold:#ffbf00;
  --line:#e9ecf7;
  --line-soft:#eef1f9;
  --bg-soft:#f6f8ff;
  --shadow-card:0 12px 30px rgba(20,30,80,.06);
  --shadow-pop:0 18px 44px rgba(20,30,80,.12);
}

*{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{ margin:0; background:#fff; color:var(--body); font-family:'Outfit',system-ui,-apple-system,sans-serif; }
a{ color:inherit }
img{ max-width:100% }

/* ---- layout ---- */
.container{ width:min(1200px, 100%); margin:0 auto; padding-left:clamp(18px, 4vw, 40px); padding-right:clamp(18px, 4vw, 40px); }
.section{ padding:clamp(40px, 7vw, 78px) 0 0; }

/* ---- app icon ---- */
.ic{ position:relative; width:54px; height:54px; border-radius:16px; flex:none; overflow:hidden;
     background:linear-gradient(140deg,#2400ff,#0a73ff); box-shadow:0 10px 22px rgba(36,0,255,.36); display:inline-block; }
.ic-b{ position:absolute; left:24%; top:22%; width:41%; height:52%; border-radius:5px; background:var(--gold); transform:rotate(-12deg); }
.ic-f{ position:absolute; left:31%; top:24%; width:41%; height:52%; border-radius:5px; background:#fff; transform:rotate(7deg);
       display:flex; flex-direction:column; justify-content:center; gap:9%; padding:0 16%; box-shadow:0 2px 6px rgba(0,0,0,.12); }
.ic-f i{ display:block; height:9%; border-radius:2px; }
.ic-f i:nth-child(1){ width:100%; background:#2400ff; }
.ic-f i:nth-child(2){ width:66%; background:#9db4ff; }
.ic-f i:nth-child(3){ width:83%; background:#9db4ff; }

/* ---- type helpers ---- */
.grad{ background:linear-gradient(120deg,var(--brand),var(--brand-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.kicker{ display:block; font-size:13px; font-weight:800; letter-spacing:1.6px; text-transform:uppercase; color:var(--brand); }
.sec-h{ font-size:clamp(26px, 3.4vw, 34px); font-weight:800; letter-spacing:-.9px; color:var(--ink); margin:12px 0 0; }
.sec-sub{ font-size:clamp(15px, 1.6vw, 16.5px); line-height:1.6; color:var(--muted); margin:14px 0 0; max-width:620px; }

/* ---- buttons & links ---- */
.nl{ font-size:15px; font-weight:500; color:var(--soft); text-decoration:none; transition:color .15s; }
.nl:hover{ color:var(--brand); }
.cta{ display:inline-flex; align-items:center; justify-content:center; gap:8px; background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff;
      font-weight:600; font-size:15px; padding:10px 20px; border-radius:999px; text-decoration:none; min-height:44px;
      box-shadow:0 10px 24px rgba(36,0,255,.3); transition:transform .15s, box-shadow .15s; }
.cta:hover{ transform:translateY(-1px); box-shadow:0 14px 30px rgba(36,0,255,.4); }
.ghost{ display:inline-flex; align-items:center; justify-content:center; background:#fff; border:1px solid #e6e9f5; color:var(--body);
        font-weight:600; font-size:15px; padding:11px 22px; border-radius:999px; text-decoration:none; min-height:44px;
        box-shadow:0 6px 18px rgba(20,30,80,.06); transition:transform .15s, box-shadow .15s; }
.ghost:hover{ transform:translateY(-1px); box-shadow:0 12px 26px rgba(20,30,80,.1); }
.lift{ transition:transform .18s, box-shadow .18s; }
.lift:hover{ transform:translateY(-4px); box-shadow:0 22px 46px rgba(20,30,80,.12); }

/* ---- cards & chips ---- */
.card{ background:#fff; border:1px solid #eaedf7; border-radius:20px; padding:24px; box-shadow:var(--shadow-card); }
.chip{ display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line); border-radius:999px;
       padding:9px 16px; font-size:14px; font-weight:600; color:var(--body); box-shadow:0 6px 16px rgba(20,30,80,.05); }
.chip .dot{ width:7px; height:7px; border-radius:50%; background:var(--gold); flex:none; }
.chip.alt .dot{ background:var(--brand-2); }

/* ---- header ---- */
.site-header{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:clamp(18px, 3vw, 30px) 0 0; }
.site-header .brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--body); min-width:0; }
.site-header .brand .ic{ width:46px; height:46px; border-radius:14px; }
.site-header .brand-name{ font-size:clamp(22px, 3vw, 29px); font-weight:800; letter-spacing:-.8px; white-space:nowrap; }
.site-header .brand-tag{ font-size:13px; font-weight:600; color:var(--faint); border-left:1px solid #e4e8f6; padding-left:12px; margin-left:2px; white-space:nowrap; }
.site-header .navlinks{ display:flex; align-items:center; gap:clamp(12px, 2.4vw, 24px); }
.site-header .cta{ padding:9px 18px; }

/* ---- footer ---- */
.site-footer{ margin-top:clamp(48px, 7vw, 80px); border-top:1px solid var(--line-soft); background:#fff; }
.site-footer .foot-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:36px 28px; padding:clamp(30px, 5vw, 48px) 0 0; }
.site-footer .foot-brand-row{ display:flex; align-items:center; gap:12px; }
.site-footer .foot-brand-row .ic{ width:46px; height:46px; border-radius:14px; }
.site-footer .foot-brand-row .name{ font-size:24px; font-weight:800; letter-spacing:-.7px; color:var(--body); }
.site-footer .foot-tagline{ font-size:14px; line-height:1.55; color:var(--soft); margin:14px 0 0; max-width:260px; }
.site-footer .foot-qr{ display:flex; align-items:center; gap:13px; margin-top:18px; background:var(--bg-soft); border:1px solid var(--line);
                       border-radius:14px; padding:10px 14px 10px 10px; width:fit-content; }
.site-footer .foot-qr .qrbox{ width:54px; height:54px; border-radius:8px; overflow:hidden; background:#fff; border:1px solid #eef0f8; padding:3px; flex:none; }
.site-footer .fcol-title{ font-size:13px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--faint); }
.site-footer .fcol-links{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; margin-top:16px; }
.fl{ font-size:15px; color:#42475f; text-decoration:none; font-weight:500; transition:color .15s; }
.fl:hover{ color:var(--brand); }
.fl-disabled{ display:inline-flex; align-items:center; gap:8px; font-size:15px; color:#b6bacb; font-weight:500; cursor:default; }
.fl-disabled .soon{ font-size:10.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--faint);
                    background:#f3f5fc; border:1px solid var(--line); border-radius:999px; padding:2px 8px; }
.site-footer .foot-bottom{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px;
                           margin-top:34px; padding:20px 0 28px; border-top:1px solid var(--line-soft); }
.site-footer .foot-copy{ font-size:13.5px; color:var(--faint); }
.site-footer .foot-social{ display:flex; align-items:center; gap:14px; }
.site-footer .foot-social > a{ width:36px; height:36px; border-radius:50%; background:#f3f5fc; display:flex; align-items:center; justify-content:center; text-decoration:none; transition:background .15s; }
.site-footer .foot-social > a:hover{ background:#e9edfb; }

/* ---- language switcher (footer only) ---- */
.langsel{ appearance:none; -webkit-appearance:none; background:#f3f5fc; border:1px solid var(--line); border-radius:10px;
          padding:8px 30px 8px 34px; font-family:inherit; font-size:14px; font-weight:600; color:#42475f; cursor:pointer;
          background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235b6079' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
          background-repeat:no-repeat; background-position:right 10px center; transition:border-color .15s, color .15s; }
.langsel:hover{ border-color:#c9d0ee; color:var(--brand); }
.langwrap{ position:relative; display:inline-flex; align-items:center; }
.langwrap > svg{ position:absolute; left:11px; pointer-events:none; }

/* ---- stats strip ---- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); margin-top:clamp(36px, 5vw, 52px); background:#fff; border:1px solid #e9ecf7;
        border-radius:20px; box-shadow:0 18px 50px rgba(20,30,80,.08); overflow:hidden; }
.stats > div{ padding:24px 28px; border-right:1px solid #eef1f9; }
.stats > div:last-child{ border-right:none; }
.stat-n{ font-size:32px; font-weight:800; letter-spacing:-1px; color:#2400ff; }
.stat-l{ font-size:14px; color:#6b6f86; margin-top:3px; }
@media (max-width: 900px){
  .stats{ grid-template-columns:repeat(2,1fr); }
  .stats > div{ border-bottom:1px solid #eef1f9; }
  .stats > div:nth-child(2n){ border-right:none; }
  .stats > div:nth-child(n+3){ border-bottom:none; }
}
@media (max-width: 420px){
  .stats{ grid-template-columns:1fr; }
  .stats > div{ border-right:none !important; border-bottom:1px solid #eef1f9 !important; }
  .stats > div:last-child{ border-bottom:none !important; }
}

/* ---- FAQ accordion (shared look with the help center) ---- */
.faq-item{ background:#fff; border:1px solid var(--line-soft); border-radius:16px; box-shadow:0 8px 22px rgba(20,30,80,.04); overflow:hidden; transition:border-color .16s ease; }
.faq-item.open{ border-color:#c9d6ff; }
.faq-item > button{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; text-align:left;
                    cursor:pointer; border:none; background:transparent; font-family:'Outfit',sans-serif; padding:19px 22px; }
.faq-item .q{ font-size:16px; font-weight:600; color:var(--body); }
.faq-item .chev{ width:28px; height:28px; flex:none; border-radius:9px; background:#f3f5fc; display:flex; align-items:center; justify-content:center;
                 transition:background .16s ease, transform .2s ease; }
.faq-item.open .chev{ background:#eef3ff; transform:rotate(180deg); }
.faq-item .a{ padding:0 22px 20px; font-size:14.5px; line-height:1.6; color:#5b6079; display:none; }
.faq-item.open .a{ display:block; }

/* ---- footer responsive ---- */
@media (max-width: 900px){
  .site-footer .foot-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 560px){
  .site-footer .foot-grid{ grid-template-columns:1fr; gap:28px; }
  .site-header .brand-tag{ display:none; }
  .site-footer .foot-bottom{ flex-direction:column; align-items:flex-start; }
}
@media (max-width: 540px){
  .site-header{ flex-wrap:wrap; gap:14px 12px; padding-top:20px; }
  .site-header .navlinks{ width:100%; justify-content:space-between; gap:10px; }
  .site-header .navlinks .nl{ white-space:nowrap; }
  .site-header .cta{ white-space:nowrap; }
}