/* ============================================================================
   RITENGER · SITE STYLESHEET  (landing · login · verify · legal)
   Editorial black · flat · RTL-first · mobile-first

   This file is written top-down in ONE pass:
     1 tokens → 2 base → 3 primitives → 4 header → 5 hero → 6 frames
     → 7 sections → 8 footer → 9 login/verify → 10 toasts → 11 legal
     → 12 motion → 13 responsive (every breakpoint, one place only)

   Rules of the house:
   · max-width queries live AFTER min-width queries in §13 and are never
     scattered through the file — that is how the old sheet broke itself.
   · no selector may be defined twice.
   ============================================================================ */

/* ---------- 1 · fonts ---------- */
@font-face{font-family:Vazirmatn;src:url(../app/vendor/fonts/Vazirmatn-Regular.woff2)  format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Vazirmatn;src:url(../app/vendor/fonts/Vazirmatn-Medium.woff2)   format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Vazirmatn;src:url(../app/vendor/fonts/Vazirmatn-SemiBold.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Vazirmatn;src:url(../app/vendor/fonts/Vazirmatn-Bold.woff2)     format('woff2');font-weight:700;font-display:swap}

/* ---------- 2 · tokens ---------- */
:root{
  /* surfaces */
  --bg:#08090a;
  --bg-2:#0b0c0d;
  --panel:#101113;
  --panel-2:#15161a;

  /* hairlines */
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.18);
  --line-3:rgba(255,255,255,.28);

  /* ink */
  --text:#f3f4f5;
  --muted:#989ca3;
  --faint:#61646a;
  --white:#fff;
  --danger:#ff5f6d;

  /* brand thread (accents only — the site stays black/white) */
  --grad:linear-gradient(135deg,#3390ec 0%,#2b82d9 55%,#1f6fc4 100%);

  /* geometry */
  --r:14px;
  --r-sm:10px;
  --max:1120px;
  --pad:24px;
  --nav-h:64px;

  /* type & motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --font:Vazirmatn,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}

/* ---------- 3 · base ---------- */
*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;overflow-x:clip}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font);font-size:14px;line-height:1.9;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input{font-family:inherit}
::selection{background:#fff;color:#000}

/* anchored sections must clear the floating pill */
section[id]{scroll-margin-top:88px}

/* ---------- 4 · primitives ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.center{text-align:center}

.sec{padding:88px 0;position:relative}
.sec.line{border-top:1px solid var(--line)}
.sec-head{max-width:640px}

.kicker{
  font-family:var(--mono);font-size:10px;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--faint);display:inline-flex;align-items:center;gap:8px;
}
[dir="rtl"] .kicker{font-family:var(--font);letter-spacing:.6px;font-size:11px}
.kicker .dot{width:4px;height:4px;border-radius:50%;background:var(--faint)}

.title{
  font-size:clamp(22px,3.4vw,34px);font-weight:500;line-height:1.4;
  letter-spacing:-.3px;margin:14px 0 0;
}
.lead{color:var(--muted);font-size:14px;line-height:2;margin:14px 0 0;max-width:620px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:42px;padding:0 20px;border-radius:999px;
  font-size:13px;font-weight:500;line-height:1;white-space:nowrap;
  transition:background .2s var(--ease),border-color .2s,color .2s,transform .2s var(--ease);
}
.btn:active{transform:scale(.975)}
.btn.primary{background:var(--white);color:#0a0b0c}
.btn.primary:hover{background:#e6e7e9}
.btn.ghost{border:1px solid var(--line-2);color:var(--text)}
.btn.ghost:hover{border-color:var(--line-3);background:rgba(255,255,255,.04)}
.btn.sm{height:34px;padding:0 14px;font-size:12px}
.btn.block{width:100%}
.btn svg{flex:0 0 auto}

/* solid CTA used on the login card */
.btn-primary{
  width:100%;height:44px;border-radius:10px;background:var(--white);color:#0a0b0c;
  font-size:13.5px;font-weight:500;display:flex;align-items:center;justify-content:center;gap:8px;
  transition:background .2s,opacity .2s;
}
.btn-primary:hover{background:#e6e7e9}
.btn-primary:disabled{opacity:.55;cursor:default}

/* ---------- 5 · header ---------- */
/* Invisible full-width bar at rest; on scroll it detaches into a floating
   glass pill: rounded, blurred, hairline border, slightly smaller. */
.nav{position:fixed;inset-inline:0;top:0;z-index:50}
.nav-in{
  max-width:var(--max);margin:0 auto;padding:0 var(--pad);height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;gap:14px;position:relative;
  border:1px solid transparent;border-radius:999px;
  transition:
    height .38s var(--ease),max-width .45s var(--ease),padding .38s var(--ease),
    background .38s var(--ease),border-color .38s var(--ease),
    box-shadow .38s var(--ease),backdrop-filter .38s var(--ease);
}
.nav.solid{padding-top:10px}
.nav.solid .nav-in{
  height:52px;max-width:min(920px,calc(100% - 20px));padding:0 12px;
  background:rgba(14,15,18,.60);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border-color:rgba(255,255,255,.11);
  box-shadow:0 20px 55px -28px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.07);
}

.brand{display:inline-flex;align-items:center;gap:9px;font-size:15px;font-weight:600;letter-spacing:-.1px}
.brand .mark{width:26px;height:26px;display:block;flex:0 0 auto;object-fit:contain}
.brand .chip{
  font-family:var(--mono);font-size:8px;letter-spacing:1.2px;font-weight:500;
  padding:3px 6px;border:1px solid var(--line-2);border-radius:4px;color:var(--muted);
  line-height:1;transform:translateY(-1px);
}

/* section links — desktop only (phones use the burger menu below) */
.nav-links{display:none;align-items:center;gap:26px;font-size:13px;color:var(--muted)}
.nav-links a{position:relative;transition:color .2s}
.nav-links a::after{
  content:"";position:absolute;inset-inline:0;bottom:-5px;height:1px;background:currentColor;
  opacity:.55;transform:scaleX(0);transition:transform .3s var(--ease);
}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-links a:hover{color:var(--text)}

.nav-actions{display:flex;align-items:center;gap:8px}
.nav-actions .nav-login{display:none}

/* language */
.lang-btn{
  display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;
  border:1px solid var(--line);border-radius:999px;font-size:12px;color:var(--muted);
  transition:border-color .2s,color .2s;
}
.lang-btn:hover{border-color:var(--line-2);color:var(--text)}
.lang-menu{
  position:absolute;top:calc(var(--nav-h) - 8px);inset-inline-end:var(--pad);
  min-width:148px;padding:5px;border-radius:12px;background:#111214;
  border:1px solid var(--line-2);box-shadow:0 24px 60px -20px rgba(0,0,0,.9);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:.18s var(--ease);z-index:60;
}
.lang-menu.on{opacity:1;visibility:visible;transform:none}
.nav.solid .lang-menu{top:calc(100% + 12px)}
.lang-menu button{
  display:flex;width:100%;align-items:center;justify-content:space-between;
  padding:9px 10px;border-radius:8px;font-size:12.5px;color:var(--muted);
}
.lang-menu button:hover{background:rgba(255,255,255,.05);color:var(--text)}
.lang-menu button.on{color:var(--text)}

/* burger + section dropdown — mobile only */
.menu-btn{
  display:none;align-items:center;justify-content:center;flex-direction:column;
  gap:4px;width:40px;height:38px;border-radius:12px;flex:0 0 auto;
  border:1px solid var(--line);transition:border-color .2s;
}
.menu-btn span{
  display:block;width:17px;height:1.8px;border-radius:2px;background:var(--text);
  transition:transform .3s var(--ease),opacity .2s;
}
.menu-btn:hover{border-color:var(--line-2)}
.menu-btn.on span:nth-child(1){transform:translateY(5.8px) rotate(45deg)}
.menu-btn.on span:nth-child(2){opacity:0}
.menu-btn.on span:nth-child(3){transform:translateY(-5.8px) rotate(-45deg)}

.nav-drop{
  position:fixed;top:76px;inset-inline:16px;z-index:70;
  display:none;flex-direction:column;gap:2px;
  padding:10px;border-radius:20px;background:#111214;
  border:1px solid var(--line-2);
  box-shadow:0 30px 70px -25px rgba(0,0,0,.95);
  opacity:0;visibility:hidden;transform:translateY(-12px) scale(.97);
  transition:.28s var(--ease);
}
.nav-drop.on{opacity:1;visibility:visible;transform:none}
.nav-drop a{
  display:block;padding:13px 15px;border-radius:12px;
  font-size:14px;color:var(--text);text-align:start;transition:background .16s;
}
.nav-drop a:hover{background:rgba(255,255,255,.06)}
.nav-drop .drop-sep{display:block;height:1px;background:var(--line);margin:7px 8px}
.nav-drop .drop-cta{
  margin-top:4px;text-align:center;background:var(--grad);
  color:#fff;font-weight:600;border-radius:13px;
}

/* ---------- 6 · hero ---------- */
.hero{padding:calc(var(--nav-h) + 68px) 0 84px;position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset-inline:0;top:-1px;height:520px;pointer-events:none;
  background:radial-gradient(680px 300px at 50% -8%,rgba(255,255,255,.075),transparent 70%);
}
.hero-in{position:relative;text-align:center;max-width:780px;margin:0 auto}
.hero .kicker{justify-content:center}
.hero h1{
  margin:20px 0 0;font-size:clamp(30px,6.2vw,54px);font-weight:500;
  line-height:1.28;letter-spacing:-.8px;
}
.hero h1 .dim{color:var(--faint)}
.hero .sub{margin:20px auto 0;max-width:540px;color:var(--muted);font-size:14.5px;line-height:2}
.hero-cta{margin-top:30px;display:flex;justify-content:center;align-items:center;gap:6px;flex-wrap:wrap}
.hero-link{
  display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 14px;
  font-size:12.5px;color:var(--muted);transition:color .2s;
}
.hero-link:hover{color:var(--text)}
.hero-link svg{opacity:.7}
.hero-note{margin-top:16px;font-size:11.5px;color:var(--faint)}

/* entrance */
@keyframes heroIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
html.anim .hero-in > *{animation:heroIn .9s var(--ease) both}
html.anim .hero-in > *:nth-child(1){animation-delay:.04s}
html.anim .hero-in > *:nth-child(2){animation-delay:.10s}
html.anim .hero-in > *:nth-child(3){animation-delay:.16s}
html.anim .hero-in > *:nth-child(4){animation-delay:.22s}
html.anim .hero-in > *:nth-child(5){animation-delay:.28s}
html.anim .frame{animation:heroIn 1.1s var(--ease) .34s both}

/* ---------- 7 · frames (hero artwork) ---------- */
/* desktop: browser window — hidden on phones */
.frame{
  margin-top:56px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--bg-2);box-shadow:0 60px 140px -60px rgba(0,0,0,.95),0 0 0 1px rgba(0,0,0,.4);
  position:relative;
}
.frame-bar{
  direction:ltr;height:38px;display:flex;align-items:center;gap:7px;padding:0 14px;
  border-bottom:1px solid var(--line);background:#0d0e10;
}
.frame-dot{width:9px;height:9px;border-radius:50%;background:#2b2d31;flex:0 0 auto}
.frame-url{
  flex:1;text-align:center;font-family:var(--mono);font-size:10px;color:var(--faint);
  letter-spacing:.2px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;direction:ltr;
}
.frame-body{background:#0a0b11}
.frame-body svg{display:block;width:100%;height:auto}

/* mobile: phone bezel — hidden on desktop */
.frame-phone{
  display:none;margin:44px auto 0;max-width:296px;padding:9px;border-radius:42px;
  background:linear-gradient(160deg,#26272d 0%,#15161a 38%,#0c0d0f 100%);
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 60px 130px -55px rgba(0,0,0,.98),0 0 0 1px rgba(0,0,0,.5),
             inset 0 1px 0 rgba(255,255,255,.10);
  position:relative;
}
.frame-phone::before{
  content:"";position:absolute;top:15px;left:50%;transform:translateX(-50%);
  width:76px;height:19px;border-radius:11px;background:#08090a;z-index:2;
}
.frame-phone::after{
  content:"";position:absolute;inset:0;border-radius:42px;pointer-events:none;
  background:linear-gradient(150deg,rgba(124,108,255,.15),transparent 45%,rgba(34,211,238,.10));
  mix-blend-mode:screen;opacity:.75;
}
.frame-phone .ph-screen{border-radius:34px;overflow:hidden;background:#0a0b11}
.frame-phone .ph-screen svg{display:block;width:100%;height:auto}

/* ---------- 8 · sections ---------- */
/* capabilities */
.caps{display:grid;grid-template-columns:1fr;margin-top:44px;border-top:1px solid var(--line)}
.cap{padding:30px 0;border-bottom:1px solid var(--line)}
.cap .n{font-family:var(--mono);font-size:11px;line-height:1;letter-spacing:1px;color:var(--muted);opacity:.7;display:block;margin-bottom:14px}
.cap h3{font-size:17px;font-weight:500;margin:0 0 8px;letter-spacing:-.1px}
.cap p{margin:0;color:var(--muted);font-size:13.5px;line-height:2}

/* subscription terms — sits directly above the plan grid */
.terms{
  display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:36px;padding:4px;
  border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.025);
}
.terms button{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  height:46px;border-radius:999px;color:var(--muted);transition:.2s var(--ease);
}
.terms button b{font-size:12.5px;font-weight:600}
.terms button i{font-size:8.5px;font-style:normal;letter-spacing:.2px;opacity:.75}
.terms button:hover{color:var(--text)}
.terms button.on{color:#0a0b0c;background:var(--white);
  box-shadow:0 10px 26px -14px rgba(255,255,255,.5)}
.terms button.on i{opacity:.62}
.terms-note{
  margin:10px 0 0;text-align:center;font-size:11.5px;color:var(--faint);line-height:1.8;
}
.plan .p-term{
  margin-top:4px;font-size:10.5px;color:var(--faint);letter-spacing:.2px;
}
.plan .p-sub{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  margin-top:7px;font-size:11px;color:var(--faint);
}
.p-save{
  font-size:9px;font-weight:700;letter-spacing:.2px;padding:2px 7px;border-radius:999px;
  color:#7ef0c0;background:rgba(52,227,154,.12);border:1px solid rgba(52,227,154,.28);
}

/* plans */
.plans{display:grid;grid-template-columns:1fr;margin-top:22px}
.plan{padding:26px 0;border-bottom:1px solid var(--line);position:relative}
.plan .p-top{display:flex;align-items:center;gap:8px;min-height:20px}
.plan h3{font-size:15px;font-weight:500;margin:0}
.plan .p-tag{font-size:11.5px;color:var(--faint);margin-top:2px}
.plan .flag{
  font-size:9.5px;letter-spacing:.4px;padding:2px 7px;border-radius:999px;
  border:1px solid var(--line-2);color:var(--text);background:rgba(255,255,255,.06);
}
.plan .price{font-size:26px;font-weight:500;letter-spacing:-.5px;margin-top:18px;line-height:1.2}
.plan .price small{font-size:11px;color:var(--faint);font-weight:400;margin-inline-start:5px;letter-spacing:0}
.plan ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:7px}
.plan li{font-size:12.5px;color:var(--muted);display:flex;align-items:flex-start;gap:8px;line-height:1.7}
.plan li svg{flex:0 0 auto;margin-top:5px;color:var(--muted)}
.plan li.off{color:var(--faint)}
.plan li.off svg{color:var(--faint);opacity:.7}
.plan .p-cta{margin-top:20px}
.plan.pop{background:linear-gradient(180deg,rgba(255,255,255,.035),transparent 55%)}
.plan.pop::before{content:"";position:absolute;inset-inline:0;top:-1px;height:1px;background:var(--line-3)}

/* chooser */
.choose{margin-top:36px;border-top:1px solid var(--line)}
.choose button{
  display:flex;width:100%;align-items:center;gap:14px;padding:18px 2px;
  border-bottom:1px solid var(--line);text-align:start;transition:background .2s;
}
.choose button:hover{background:rgba(255,255,255,.025)}
.choose .dot{
  width:15px;height:15px;border-radius:50%;border:1px solid var(--line-2);flex:0 0 auto;
  transition:.2s var(--ease);
}
.choose button.on .dot{border-color:var(--white);box-shadow:inset 0 0 0 4px var(--bg),inset 0 0 0 9px var(--white)}
.choose .txt{flex:1;min-width:0}
.choose b{display:block;font-size:13.5px;font-weight:500}
.choose small{display:block;font-size:11.5px;color:var(--faint);margin-top:2px}
.choose .go{font-size:11.5px;color:var(--faint);white-space:nowrap}
.choose button.on .go{color:var(--text)}
.reco{
  margin-top:18px;font-size:13px;color:var(--muted);
  opacity:0;transform:translateY(4px);transition:.3s var(--ease);
}
.reco.on{opacity:1;transform:none}
.reco b{color:var(--text);font-weight:500}

/* specs table */
.specs-wrap{margin-top:34px;overflow-x:auto;border-top:1px solid var(--line)}
.specs{width:100%;border-collapse:collapse;font-size:12.5px}
.specs th,.specs td{padding:13px 10px;border-bottom:1px solid var(--line);text-align:start}
.specs thead th{font-size:10.5px;font-weight:500;color:var(--faint);letter-spacing:.5px;padding-bottom:11px}
.specs tbody th{font-weight:400;color:var(--muted);white-space:nowrap}
.specs td{color:var(--text)}
.specs td.no{color:var(--faint)}
.specs th.pop,.specs td.pop{background:rgba(255,255,255,.028)}
.specs thead th.pop{color:var(--text)}

/* app-preview carousel */
.showcase{position:relative;margin-top:8px}
.sc-track{
  display:flex;gap:18px;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:10px 0 20px;scroll-padding-inline:0;
  scrollbar-width:none;-ms-overflow-style:none;
  cursor:grab;outline:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);
}
.sc-track::-webkit-scrollbar{display:none}
.sc-track.grabbing{cursor:grabbing}
.sc-track:focus-visible{outline:2px solid rgba(255,255,255,.35);outline-offset:6px;border-radius:20px}

.sc-card{
  flex:0 0 auto;width:min(64vw,244px);margin:0;scroll-snap-align:center;
  transition:transform .45s var(--ease),opacity .45s var(--ease);
}
.sc-phone{
  position:relative;padding:7px;border-radius:34px;
  background:linear-gradient(160deg,#2b3a49 0%,#18222d 38%,#0e1621 100%);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 34px 70px -34px rgba(0,0,0,.95),0 0 0 1px rgba(0,0,0,.6),
             0 0 60px -30px rgba(51,144,236,.55),
             inset 0 1px 0 rgba(255,255,255,.14);
}
.sc-phone::after{
  content:"";position:absolute;inset:0;border-radius:34px;pointer-events:none;
  background:linear-gradient(150deg,rgba(51,144,236,.20),transparent 42%,rgba(51,144,236,.10));
  mix-blend-mode:screen;opacity:.8;
}
.sc-phone img{display:block;width:100%;height:auto;border-radius:28px;background:#08090a}
.sc-notch{
  position:absolute;top:11px;left:50%;transform:translateX(-50%);
  width:52px;height:6px;border-radius:6px;background:#08090a;
  box-shadow:0 0 0 1px rgba(255,255,255,.06);z-index:2;
}
.sc-card figcaption{margin-top:13px;padding:0 6px;text-align:center;display:flex;flex-direction:column;gap:4px}
.sc-card figcaption b{font-size:13px;font-weight:600;letter-spacing:-.1px}
.sc-card figcaption span{font-size:11px;line-height:1.75;color:var(--muted)}

.sc-arrow{
  position:absolute;top:calc(50% - 34px);z-index:3;
  width:42px;height:42px;border-radius:50%;display:none;place-items:center;
  background:rgba(14,15,18,.78);color:var(--text);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  box-shadow:0 16px 34px -18px rgba(0,0,0,.95);
  transition:.18s var(--ease);
}
.sc-arrow:hover{background:rgba(30,31,36,.92);transform:scale(1.06)}
.sc-arrow:disabled{opacity:.28;pointer-events:none}
.sc-arrow.prev{inset-inline-start:-6px}
.sc-arrow.next{inset-inline-end:-6px}
.sc-arrow svg{pointer-events:none}

.sc-dots{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:2px}
.sc-dots button{
  width:7px;height:7px;border-radius:999px;background:rgba(255,255,255,.20);
  transition:width .3s var(--ease),background .3s var(--ease);
}
.sc-dots button.on{
  width:26px;background:linear-gradient(90deg,#3390ec,#2b82d9 60%,#1f6fc4);
  box-shadow:0 0 14px rgba(51,144,236,.5);
}

/* end block */
.end{padding:96px 0;border-top:1px solid var(--line);text-align:center}
.end h2{font-size:clamp(20px,3vw,28px);font-weight:500;margin:0 auto;max-width:620px;line-height:1.55;letter-spacing:-.2px}
.end p{color:var(--muted);font-size:13.5px;max-width:520px;margin:16px auto 0}
.end .row{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:26px}

/* ---------- 9 · footer ---------- */
footer{
  position:relative;border-top:1px solid var(--line);
  padding:64px 0 26px;font-size:12.5px;
  background:
    radial-gradient(900px 320px at 82% -30%, rgba(51,144,236,.16), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.018), transparent 45%);
}
footer::before{
  content:"";position:absolute;top:-1px;inset-inline:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(51,144,236,.6),transparent);
}
.foot-top{display:grid;grid-template-columns:1fr;gap:40px}
.foot-logo{display:inline-flex;align-items:center;gap:11px}
.mark-tile{
  width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
  background:linear-gradient(145deg,rgba(51,144,236,.30),rgba(51,144,236,.08));
  border:1px solid rgba(51,144,236,.35);
  box-shadow:0 12px 26px -16px rgba(51,144,236,.9),inset 0 1px 0 rgba(255,255,255,.18);
}
.mark-tile .mark{width:24px;height:24px}
.wordmark{font-size:20px;font-weight:700;letter-spacing:-.2px}
.foot-brand p{color:var(--muted);margin:14px 0 0;font-size:12.5px;line-height:2;max-width:330px}
.foot-cta{display:flex;gap:9px;margin-top:18px;flex-wrap:wrap}
.foot-cta .btn{height:38px;padding:0 16px;font-size:12.5px;border-radius:10px}
.foot-social{display:flex;align-items:center;gap:9px;margin-top:18px}
.foot-social a{
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  color:var(--muted);background:rgba(255,255,255,.045);border:1px solid var(--line);
  transition:color .2s,background .2s,border-color .2s,transform .2s;
}
.foot-social a:hover{color:#fff;background:rgba(51,144,236,.18);border-color:rgba(51,144,236,.4);transform:translateY(-1px)}
.foot-domain{font-family:var(--mono);direction:ltr;font-size:11px;color:var(--faint);margin-inline-start:4px}
.foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.foot-col{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.foot-col b{display:flex;align-items:center;gap:7px;font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--faint);font-weight:500;margin-bottom:12px}
[dir="rtl"] .foot-col b{letter-spacing:.4px;font-size:11px}
.foot-col a{display:inline-flex;align-items:center;gap:5px;width:fit-content;color:var(--muted);padding:4px 0;transition:color .2s,transform .2s}
.foot-col a:hover{color:var(--text);transform:translateX(-2px)}
[dir="ltr"] .foot-col a:hover{transform:translateX(2px)}
.foot-bot{
  margin-top:44px;padding-top:18px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font-size:11px;color:var(--faint);
}
.foot-made{font-family:var(--mono);font-size:10.5px;letter-spacing:.2px;color:var(--faint)}
.foot-top-btn{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  color:var(--muted);background:rgba(255,255,255,.04);border:1px solid var(--line);
  transition:color .2s,background .2s,border-color .2s;
}
.foot-top-btn:hover{color:#fff;background:rgba(51,144,236,.18);border-color:rgba(51,144,236,.4)}

/* ---------- 10 · login ---------- */
html.checking .auth-brand,
html.checking .auth-card{opacity:0}
html.checking::before{
  content:"";position:fixed;top:50%;left:50%;width:22px;height:22px;margin:-11px 0 0 -11px;
  border:1.5px solid rgba(255,255,255,.18);border-top-color:#fff;border-radius:50%;
  animation:spin .7s linear infinite;z-index:99;
}
@keyframes spin{to{transform:rotate(360deg)}}

.auth-page{
  min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:76px 20px 40px;position:relative;
}
.auth-brand{text-align:center;margin-bottom:26px}
.auth-brand .ring{width:64px;height:64px;display:block;margin:0 auto 14px}
.auth-brand .ring img{
  width:100%;height:100%;object-fit:contain;display:block;
  filter:drop-shadow(0 14px 30px rgba(79,140,255,.28));
}
.auth-brand h1{font-size:22px;font-weight:600;margin:0;letter-spacing:-.3px}
.auth-brand p{color:var(--faint);font-size:11.5px;margin:6px 0 0}
.auth-card{
  width:100%;max-width:376px;background:var(--panel);border:1px solid var(--line);
  border-radius:18px;padding:18px;
}

/* segmented control */
.seg{
  position:relative;display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:3px;
  background:rgba(255,255,255,.045);border-radius:10px;margin-bottom:18px;
}
.seg-ind{
  position:absolute;top:3px;bottom:3px;width:calc(50% - 4px);border-radius:8px;
  background:#26282c;transition:transform .26s var(--ease);inset-inline-start:3px;
}
.seg.code .seg-ind{transform:translateX(calc(-100% - 2px))}
[dir="ltr"] .seg.code .seg-ind{transform:translateX(calc(100% + 2px))}
.seg-btn{
  position:relative;z-index:1;height:32px;font-size:12.5px;color:var(--faint);
  border-radius:8px;transition:color .2s;
}
.seg-btn.on{color:var(--text)}
.auth-pane{display:none}
.auth-pane.on{display:block}

/* fields */
.field{margin-bottom:12px}
.field label{display:block;font-size:11px;color:var(--faint);margin-bottom:7px}
.field .wrap{
  display:flex;align-items:center;gap:9px;height:44px;padding:0 12px;
  background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:10px;
  transition:border-color .2s,background .2s;
}
.field .wrap:focus-within{border-color:var(--line-3);background:rgba(255,255,255,.06)}
.field .ico{display:grid;place-items:center;color:var(--faint);flex:0 0 auto}
.field input{
  flex:1;min-width:0;height:100%;background:none;border:0;outline:none;
  color:var(--text);font-size:13.5px;font-family:inherit;
}
.field input::placeholder{color:var(--faint)}
.field .eye{color:var(--faint);display:grid;place-items:center;padding:4px}
.err{font-size:11.5px;color:#ff8f98;min-height:16px;margin:2px 0 8px;line-height:1.5}
.auth-note{font-size:11px;color:var(--faint);line-height:1.85;margin:10px 0 0}

/* OTP */
.text-link{font-size:11px;color:var(--faint);text-decoration:underline;text-underline-offset:3px}
.text-link:hover{color:var(--text)}
.auth-foot{margin-top:16px;text-align:center;font-size:11px;color:var(--faint)}
.auth-foot a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.auth-legal{margin-top:22px;font-family:var(--mono);font-size:9px;letter-spacing:1.6px;color:var(--faint)}
.shake{animation:shakeX .42s cubic-bezier(.36,.07,.19,.97)}
@keyframes shakeX{10%,90%{transform:translateX(-2px)}30%,70%{transform:translateX(4px)}50%{transform:translateX(-6px)}}

/* verify (OTP landing) */
.verify-card{max-width:400px}
.verify-state{display:flex;flex-direction:column;align-items:center;text-align:center;padding:10px 0 4px}
.verify-glyph{
  position:relative;width:62px;height:62px;border-radius:50%;
  display:grid;place-items:center;margin-bottom:18px;
  border:1px solid var(--line-2);
  background:radial-gradient(60% 60% at 50% 40%,rgba(255,255,255,.06),transparent 70%);
  color:var(--faint);
  transition:border-color .3s,color .3s;
}
.verify-glyph svg{position:absolute;opacity:0;transform:scale(.6);transition:opacity .3s var(--ease),transform .45s var(--ease)}
.verify-glyph .v-spin{
  width:26px;height:26px;border-radius:50%;
  border:2px solid rgba(255,255,255,.16);border-top-color:#fff;
  animation:spin .8s linear infinite;
}
.verify-state[data-state="loading"] .v-ok,
.verify-state[data-state="loading"] .v-bad{opacity:0!important;transform:scale(.6)!important}
.verify-state[data-state="ok"] .verify-glyph{border-color:rgba(255,255,255,.55);color:var(--white)}
.verify-state[data-state="ok"] .verify-glyph .v-spin{display:none}
.verify-state[data-state="ok"] .v-ok{opacity:1;transform:none}
.verify-state[data-state="bad"] .verify-glyph{border-color:rgba(255,95,109,.45);color:var(--white)}
.verify-state[data-state="bad"] .verify-glyph .v-spin{display:none}
.verify-state[data-state="bad"] .v-bad{opacity:1;transform:none}
.verify-title{font-size:16px;font-weight:500;margin:0;color:var(--text)}
.verify-sub{font-size:12px;color:var(--faint);margin:6px 0 0;line-height:1.9}
.verify-fallback{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.verify-card .auth-foot{margin-top:18px}

/* ---------- 11 · toasts ---------- */
.toasts{
  position:fixed;top:16px;inset-inline:0;z-index:90;display:flex;flex-direction:column;
  align-items:center;gap:8px;pointer-events:none;
}
.toast{
  padding:9px 15px;border-radius:999px;font-size:12px;background:#15161a;
  border:1px solid var(--line-2);box-shadow:0 18px 40px -20px #000;
  animation:popIn .26s var(--ease);transition:opacity .4s,transform .4s;max-width:88vw;
}
.toast.ok{color:#c9f7dd;border-color:rgba(52,227,154,.32)}
.toast.bad{color:#ffb3b9;border-color:rgba(255,95,109,.32)}
@keyframes popIn{from{opacity:0;transform:translateY(-8px) scale(.97)}}

/* ---------- 12 · legal ---------- */
.legal{max-width:760px;margin:0 auto;padding:calc(var(--nav-h) + 56px) var(--pad) 80px;position:relative}
.legal h1{font-size:clamp(26px,4.6vw,36px);font-weight:500;letter-spacing:-.5px;margin:16px 0 0;line-height:1.35}
.legal .updated{font-size:11px;color:var(--faint);margin-top:10px}
.legal .lead{max-width:none;font-size:13px;line-height:2.05;margin-top:18px}
.legal .rc-grid{display:grid;gap:1px;margin:30px 0 8px;background:var(--line);
  border:1px solid var(--line);border-radius:12px;overflow:hidden}
.legal .rc{padding:18px;background:var(--bg)}
.legal .rc .ic{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;
  margin-bottom:12px;border:1px solid var(--line);color:var(--muted)}
.legal .rc h3{font-size:13px;font-weight:500;margin:0 0 6px}
.legal .rc p{font-size:12px;line-height:1.95;margin:0;color:var(--muted)}
.legal .toc{margin:30px 0 8px;padding:16px 18px;border:1px solid var(--line);border-radius:12px}
.legal .toc b{font-size:10px;letter-spacing:1.2px;color:var(--faint);display:block;margin-bottom:10px;font-weight:500;text-transform:uppercase}
[dir="rtl"] .legal .toc b{letter-spacing:.4px;font-size:11px}
.legal .toc a{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--muted);padding:5px 0}
.legal .toc a:hover{color:var(--text)}
.legal .toc a .tn{font-family:var(--mono);font-size:9.5px;color:var(--faint);width:16px;flex:0 0 auto}
.legal .sec-l{margin-top:32px;padding-top:26px;border-top:1px solid var(--line)}
.legal .sec-l:first-child{border-top:0;padding-top:0}
.legal h2{font-size:16px;font-weight:500;margin:0 0 10px;display:flex;align-items:center;gap:9px}
.legal h2 .n{font-family:var(--mono);font-size:10px;color:var(--faint);width:20px;flex:0 0 auto}
.legal p,.legal li{font-size:12.5px;color:var(--muted);line-height:2.05}
.legal p{margin:0 0 8px}
.legal ul{padding-inline-start:0;margin:10px 0 0;list-style:none}
.legal ul.tick li{display:flex;gap:9px;align-items:flex-start;color:var(--text);margin-bottom:6px}
.legal ul.tick li svg{flex:0 0 auto;margin-top:7px;color:var(--muted)}
.legal .box{
  padding:14px 16px;border-radius:12px;background:rgba(255,255,255,.03);
  border:1px solid var(--line);margin-top:26px;font-size:12px;color:var(--muted);line-height:2;
}
.legal .legal-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.legal a.inline{color:var(--text);text-decoration:underline;text-underline-offset:3px}

/* ---------- 13 · motion ---------- */
/* A block that is re-rendered while on screen must not stay invisible:
   `.reveal` without `.in` is opacity 0, so anything the page swaps in later
   (prices, language switch) is released immediately by the observer. */
html.anim .reveal{opacity:0;transform:translateY(14px)}
html.anim .reveal.in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}
html.anim .reveal.in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html.anim .reveal{opacity:1;transform:none}
}

/* ============================================================================
   13.5 · ICONOGRAPHY — the icon layer used across the whole page.
   One consistent chip: a soft tile, a hairline ring, and the stroke glyph.
   ============================================================================ */

/* --- trust strip: uptime · support · auto-translate --- */
.trust{padding-top:0}
.trust-grid{
  display:grid;grid-template-columns:1fr;gap:12px;
  border-top:1px solid var(--line);padding-top:34px;
}
.trust-card{
  display:flex;align-items:center;gap:14px;padding:18px 18px;
  border:1px solid var(--line);border-radius:18px;
  background:linear-gradient(160deg,rgba(255,255,255,.035),rgba(255,255,255,.008));
  transition:border-color .25s var(--ease),transform .25s var(--ease),background .25s var(--ease);
}
.trust-card:hover{
  border-color:rgba(255,255,255,.22);transform:translateY(-2px);
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
}
.tr-ic{
  width:44px;height:44px;flex:0 0 44px;border-radius:14px;display:grid;place-items:center;
  color:var(--white);border:1px solid rgba(255,255,255,.14);
  background:radial-gradient(120% 120% at 30% 20%,rgba(255,255,255,.16),rgba(255,255,255,.03));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.tr-txt{flex:1;min-width:0}
.tr-txt b{display:block;font-size:13.5px;font-weight:600;letter-spacing:-.1px}
.tr-txt span{display:block;font-size:11.5px;line-height:1.75;color:var(--faint);margin-top:3px}
.tr-val{
  font-family:var(--mono);font-size:12px;letter-spacing:.5px;color:var(--muted);
  white-space:nowrap;padding:5px 10px;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.03);
}

/* --- capability cards get a glyph above the number --- */
.cap-ic{
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  color:var(--white);margin-bottom:16px;
  border:1px solid rgba(255,255,255,.13);
  background:radial-gradient(120% 120% at 30% 20%,rgba(255,255,255,.15),rgba(255,255,255,.025));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
  transition:transform .3s var(--spring),border-color .3s var(--ease);
}
.cap:hover .cap-ic{transform:translateY(-3px) scale(1.04);border-color:rgba(255,255,255,.28)}

/* --- plan header icon --- */
.plan .p-ic{
  display:inline-grid;place-items:center;width:26px;height:26px;border-radius:9px;
  margin-inline-end:9px;vertical-align:-7px;color:var(--white);
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);
}
.plan.pop .p-ic{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.1)}
.plan .flag{display:inline-flex;align-items:center;gap:5px}

/* --- comparison table row glyph --- */
.specs .row-ic{
  display:inline-grid;place-items:center;width:22px;height:22px;border-radius:7px;
  margin-inline-end:9px;vertical-align:-6px;color:var(--muted);
  border:1px solid var(--line);background:rgba(255,255,255,.025);
}
.specs tbody th{display:flex;align-items:center}

/* --- recommender: icon replaces the radio dot --- */
.choose .ch-ic{
  width:34px;height:34px;flex:0 0 34px;border-radius:11px;display:grid;place-items:center;
  color:var(--muted);border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease);
}
.choose button.on .ch-ic{
  color:var(--white);border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.1);
}
.choose .go{display:inline-flex;align-items:center;gap:5px}

/* --- footer column glyph + external link mark --- */
.foot-col b{display:flex;align-items:center;gap:7px}
.foot-col .fc-ic{display:inline-grid;place-items:center;color:var(--faint)}
.foot-col a{display:inline-flex;align-items:center;gap:5px}
.foot-col a svg{opacity:.45;transition:opacity .2s var(--ease)}
.foot-col a:hover svg{opacity:.9}

/* --- showcase caption glyph --- */
.sc-card figcaption b{display:inline-flex;align-items:center;gap:6px}
.sc-card .sc-ic{display:inline-grid;place-items:center;color:var(--muted)}

/* --- nav links & drop menu carry a glyph --- */
.nav-links a{display:inline-flex;align-items:center;gap:6px}
.nav-links .nl-ic{opacity:.5;transition:opacity .2s var(--ease),transform .2s var(--ease)}
.nav-links a:hover .nl-ic{opacity:1;transform:translateY(-1px)}
.nav-drop a{display:flex;align-items:center;gap:9px}
.nav-drop .nl-ic{opacity:.55;flex:0 0 auto}
.nav-drop a:hover .nl-ic{opacity:1}

/* --- hero CTA arrow nudge --- */
.btn svg{transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(-2px)}
[dir="ltr"] .btn:hover svg{transform:translateX(2px)}

@media (prefers-reduced-motion:reduce){
  .trust-card,.cap-ic,.btn svg{transition:none!important}
  .trust-card:hover,.cap:hover .cap-ic{transform:none}
}

/* ============================================================================
   14 · RESPONSIVE — every breakpoint, one place, in order.
   min-width first (progressive enhancement), then max-width overrides.
   ============================================================================ */

/* ≥640 · small tablet */
@media (min-width:640px){
  :root{--pad:32px}
  .nav-actions .nav-login{display:inline-flex}
  .foot-top{grid-template-columns:minmax(240px,320px) 1fr}
  .legal .rc-grid{grid-template-columns:1fr 1fr}
  .hero-note{font-size:12px}
  /* the trust strip becomes three columns */
  .trust-grid{grid-template-columns:repeat(3,1fr);gap:14px}
  .trust-card{flex-direction:column;align-items:flex-start;gap:12px;padding:22px 20px}
  .tr-txt b{font-size:14px}
  .tr-val{margin-top:2px}
}
/* signed-in users never see the sign-in button, at any width */
html.authed .nav-actions .nav-login{display:none}

/* ≥720 · tablet — carousel arrows appear */
@media (min-width:720px){
  .sc-arrow{display:grid}
  .sc-card{width:286px}
  .sc-track{gap:22px;padding-inline:6px}
}

/* ≥900 · desktop */
@media (min-width:900px){
  :root{--nav-h:68px}
  .nav-links{display:flex}
  .sec{padding:110px 0}
  .hero{padding-top:calc(var(--nav-h) + 96px)}
  .hero h1{font-size:clamp(40px,4.2vw,56px)}
  .caps{grid-template-columns:1fr 1fr;column-gap:64px}
  .cap{padding:34px 0}
  .plans{grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}
  .plan{border-bottom:0;border-inline-start:1px solid var(--line);padding:30px 20px;
        display:flex;flex-direction:column}
  .plan:first-child{border-inline-start:0;padding-inline-start:0}
  .plan:last-child{padding-inline-end:0}
  .plan ul{flex:1}
  .plan .price{font-size:28px}
  .plan .p-cta{margin-top:24px}
  .end{padding:120px 0}
  .foot-top{grid-template-columns:minmax(260px,340px) 1fr}
}

/* ≥1000 · wide */
@media (min-width:1000px){
  .sc-card{width:310px}
}
@media (min-width:1100px){
  .frame{margin-top:64px}
}

/* ---------- max-width overrides (must stay after every min-width block) ---------- */

/* ≤768 · phone: performance + burger + device swap */
@media (max-width:768px){
  /* backdrop-filter is recomputed every scroll frame — the #1 jank source.
     Solid translucency instead; the desktop keeps the real glass. */
  *{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  html{scroll-behavior:auto}

  /* header: solid pill instead of glass */
  .nav.solid .nav-in{background:rgba(14,15,18,.90)}

  /* burger menu takes over from .nav-links */
  .menu-btn{display:inline-flex}
  .nav-drop.on{display:flex}

  /* hero shows the phone, not the desktop window */
  .frame-phone::after{opacity:.55}
  .sc-track{scroll-behavior:auto}
}

/* ≤719 · hero device swap (matches the JS mock breakpoints) */
@media (max-width:719px){
  .frame-desktop{display:none}
  .frame-phone{display:block;margin-top:38px}
}

/* ≤560 · the header CTA swaps to its short label (site.js) */

/* ≤520 · compact chrome & spacing */
@media (max-width:520px){
  :root{--pad:16px}

  /* header: the full CTA does not fit on a phone */
  .brand .chip{display:none}
  .lang-btn span{display:none}
  .lang-btn{padding:0 9px;gap:0}
  .nav-actions{gap:8px}
  .nav-actions .btn.primary{padding:0 16px}

  /* hero: tighter, phone-first */
  .hero{padding-top:calc(var(--nav-h) + 34px)}
  .hero-in{padding:0 2px}
  .hero .sub{font-size:13.5px;line-height:1.95}
  .hero-cta{margin-top:24px;gap:4px}
  .hero .btn{height:46px;padding:0 22px;font-size:13px}
  .hero-note{margin-top:13px}

  /* sections: less dead space */
  .sec{padding:60px 0}
  .cap{padding:24px 0}
  .cap h3{font-size:15.5px}
  .plan{padding:22px 0}
  .plan .price{font-size:23px;margin-top:14px}
  .end{padding:64px 0}
  .end .row{gap:8px}
  .end .btn{height:44px}

  /* footer: two columns instead of three cramped ones */
  footer{padding:42px 0 30px}
  .foot-cols{grid-template-columns:1fr 1fr;gap:16px}
  .foot-top{gap:26px}

  /* specs table stays readable */
  .specs{font-size:11px}
  .specs th,.specs td{padding:11px 5px}
  .specs tbody th{white-space:normal;line-height:1.5}
  .specs thead th{font-size:9.5px;letter-spacing:0}

  /* showcase */
  .showcase{margin-top:2px}
  .sc-track{padding:6px 0 12px}
  .sc-card figcaption b{font-size:12px}
}

/* ≤420 · showcase captions */
@media (max-width:420px){
  .sc-track{padding:6px 0 14px}
  .sc-card figcaption{margin-top:10px}
  .sc-card figcaption span{font-size:10.5px;line-height:1.7}
}

/* ≥769 · burger machinery must never exist on desktop */
@media (min-width:769px){
  .nav-drop{display:none}
}

/* ==========================================================================
   CINEMATIC LOGIN · body[data-page="login"]
   Pure-CSS intro: aurora backdrop → logo drop-in → card rise → staggered
   fields. No ids touched; every animation is entrance-only.
   ========================================================================== */
body[data-page="login"]{overflow-x:hidden}
body[data-page="login"] .auth-page{position:relative;isolation:isolate}

/* aurora backdrop */
body[data-page="login"] .auth-page::before{
  content:"";position:fixed;inset:-20%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(42% 38% at 24% 22%, rgba(124,108,255,.22), transparent 68%),
    radial-gradient(38% 34% at 78% 30%, rgba(64,140,255,.16), transparent 70%),
    radial-gradient(46% 42% at 55% 88%, rgba(160,86,255,.14), transparent 72%);
  filter:blur(30px);
  animation:auroraDrift 16s ease-in-out infinite alternate;
}
@keyframes auroraDrift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(2.5%,-2%,0) scale(1.06)}
  100%{transform:translate3d(-2%,2.5%,0) scale(1.02)}
}
/* starfield */
body[data-page="login"] .auth-page::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 24%, rgba(255,255,255,.55), transparent 100%),
    radial-gradient(1.2px 1.2px at 68% 12%, rgba(255,255,255,.4), transparent 100%),
    radial-gradient(1.6px 1.6px at 84% 62%, rgba(255,255,255,.5), transparent 100%),
    radial-gradient(1.1px 1.1px at 32% 74%, rgba(255,255,255,.38), transparent 100%),
    radial-gradient(1.3px 1.3px at 52% 44%, rgba(255,255,255,.3), transparent 100%),
    radial-gradient(1.5px 1.5px at 8% 58%, rgba(255,255,255,.45), transparent 100%),
    radial-gradient(1.1px 1.1px at 92% 30%, rgba(255,255,255,.35), transparent 100%),
    radial-gradient(1.2px 1.2px at 44% 92%, rgba(255,255,255,.4), transparent 100%);
  animation:twinkle 5s ease-in-out infinite alternate;
}
@keyframes twinkle{from{opacity:.32}to{opacity:.62}}
@media (prefers-reduced-motion:reduce){
  body[data-page="login"] .auth-page::before,
  body[data-page="login"] .auth-page::after{animation:none}
}

/* logo: drop-in + glow settle */
body[data-page="login"] .auth-brand{animation:brandIn 1s cubic-bezier(.2,.9,.25,1.2) both}
body[data-page="login"] .auth-brand .ring{
  animation:ringGlow 3.2s ease-in-out infinite alternate;
  box-shadow:0 0 0 1px rgba(124,108,255,.35),0 0 42px rgba(124,108,255,.28);
}
@keyframes brandIn{
  0%{opacity:0;transform:translateY(-26px) scale(.86);filter:blur(10px)}
  100%{opacity:1;transform:none;filter:blur(0)}
}
@keyframes ringGlow{
  from{box-shadow:0 0 0 1px rgba(124,108,255,.3),0 0 26px rgba(124,108,255,.2)}
  to{box-shadow:0 0 0 1px rgba(124,108,255,.55),0 0 60px rgba(124,108,255,.4)}
}

/* card: cinematic rise */
body[data-page="login"] .auth-card{
  animation:cardIn .9s .25s cubic-bezier(.16,.84,.28,1) both;
  box-shadow:0 24px 80px rgba(0,0,0,.5),0 0 0 1px rgba(124,108,255,.16),
             0 0 90px rgba(124,108,255,.1);
}
@keyframes cardIn{
  0%{opacity:0;transform:translateY(44px) perspective(900px) rotateX(9deg) scale(.96);filter:blur(6px)}
  100%{opacity:1;transform:none;filter:blur(0)}
}

/* fields + footer: staggered reveal */
body[data-page="login"] .auth-card .field,
body[data-page="login"] .auth-card .auth-note,
body[data-page="login"] .auth-card .seg,
body[data-page="login"] .auth-card .err,
body[data-page="login"] .auth-card .auth-foot{
  animation:fieldIn .6s cubic-bezier(.2,.8,.3,1) both;
}
body[data-page="login"] .auth-card .seg{animation-delay:.45s}
body[data-page="login"] .auth-card .field:nth-of-type(1){animation-delay:.55s}
body[data-page="login"] .auth-card .field:nth-of-type(2){animation-delay:.65s}
body[data-page="login"] .auth-card .auth-note{animation-delay:.7s}
body[data-page="login"] .auth-card .auth-foot{animation-delay:.85s}
@keyframes fieldIn{
  0%{opacity:0;transform:translateY(14px)}
  100%{opacity:1;transform:none}
}

/* primary button: moving sheen */
body[data-page="login"] .btn-primary{
  position:relative;overflow:hidden;animation:fieldIn .6s .75s cubic-bezier(.2,.8,.3,1) both;
}
body[data-page="login"] .btn-primary::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);
  transform:translateX(-130%);
  animation:sheen 3.4s 1.6s ease-in-out infinite;
}
@keyframes sheen{0%{transform:translateX(-130%)}55%,100%{transform:translateX(130%)}}
@media (prefers-reduced-motion:reduce){
  body[data-page="login"] .auth-brand,body[data-page="login"] .auth-card,
  body[data-page="login"] .auth-card .field,body[data-page="login"] .btn-primary{animation:none}
  body[data-page="login"] .btn-primary::after{display:none}
}

/* blue-tick benefit callout (pricing) */
.tick-note{
  display:flex;gap:12px;align-items:flex-start;margin-top:18px;padding:16px 18px;border-radius:16px;
  background:linear-gradient(135deg,rgba(51,144,236,.12),rgba(51,144,236,.04));
  border:1px solid rgba(51,144,236,.25);
}
.tn-ic{
  width:28px;height:28px;flex:0 0 28px;border-radius:50%;display:grid;place-items:center;
  background:#3390ec;color:#fff;font-weight:700;font-size:15px;
}
.tick-note p{margin:0;font-size:14px;line-height:1.9;color:var(--text)}

/* ============================================================================
   PREMIUM LAYER — depth · aurora · glass · glow
   A purely visual upgrade appended last so it wins the cascade. It changes
   no class names or DOM contracts that assets/site.js relies on.
   ============================================================================ */

/* 1 · ambient aurora behind the whole page */
body{
  background:
    radial-gradient(1100px 620px at 84% -12%,rgba(124,108,255,.16),transparent 60%),
    radial-gradient(900px 540px at 6% 6%,rgba(34,211,238,.08),transparent 55%),
    radial-gradient(760px 520px at 50% 108%,rgba(51,144,236,.07),transparent 60%),
    var(--bg);
  background-attachment:fixed;
}

/* 2 · hero */
.hero::before{
  height:660px;
  background:
    radial-gradient(600px 340px at 50% -6%,rgba(124,108,255,.24),transparent 70%),
    radial-gradient(440px 250px at 16% 8%,rgba(34,211,238,.10),transparent 70%);
}
.hero h1{
  font-weight:600;letter-spacing:-1.4px;
  /* gray → white gradient text, per request */
  background:linear-gradient(180deg,#ffffff 10%,#d4d8dc 46%,#8d959d 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero h1 .dim{color:transparent}
.hero .sub{font-size:15px;max-width:580px}
.hero .kicker{
  padding:7px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:var(--text);
}
.hero .kicker .dot{background:#7c6cff;box-shadow:0 0 10px #7c6cff}
.frame{
  box-shadow:0 70px 150px -60px rgba(0,0,0,.98),0 0 130px -52px rgba(124,108,255,.55),0 0 0 1px rgba(0,0,0,.4);
}

/* 3 · buttons */
.btn.primary{
  background:linear-gradient(135deg,#3390ec 0%,#7c6cff 100%);
  color:#fff;
  box-shadow:0 16px 36px -16px rgba(96,110,255,.85),inset 0 1px 0 rgba(255,255,255,.35);
}
.btn.primary:hover{filter:brightness(1.07);box-shadow:0 20px 44px -16px rgba(96,110,255,.95),inset 0 1px 0 rgba(255,255,255,.4)}
.btn.ghost{background:rgba(255,255,255,.03);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* 4 · section heads + gradient hairline dividers */
.title{font-weight:600;letter-spacing:-.6px}
.sec.line{border-top:0;position:relative}
.sec.line::before{
  content:"";position:absolute;inset-inline:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);
}

/* 5 · capabilities → glass cards */
.caps{gap:14px;border-top:0;margin-top:40px}
.caps .cap{
  padding:24px 22px;border:1px solid var(--line);border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  transition:transform .22s var(--ease),border-color .22s,box-shadow .22s;
}
.caps .cap:hover{
  transform:translateY(-3px);border-color:rgba(124,108,255,.42);
  box-shadow:0 26px 54px -30px rgba(124,108,255,.55);
}
.caps .cap .n{color:#a99cff;opacity:1}

/* 6 · plans → glass cards */
.plans{gap:14px;border-bottom:0}
.plans .plan{
  border:1px solid var(--line);border-radius:18px;padding:24px 20px;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  transition:transform .22s var(--ease),border-color .22s,box-shadow .22s;
}
.plans .plan:first-child,.plans .plan:last-child{padding:24px 20px}
.plans .plan:hover{transform:translateY(-3px);border-color:var(--line-2);box-shadow:0 26px 56px -30px rgba(0,0,0,.9)}
.plans .plan.pop{
  border-color:rgba(124,108,255,.5);
  background:linear-gradient(180deg,rgba(124,108,255,.14),rgba(255,255,255,.02));
  box-shadow:0 28px 64px -30px rgba(124,108,255,.6);
}
.plans .plan.pop::before{display:none}
.plans .plan .price{font-size:28px;font-weight:600}

/* 7 · trust cards glow */
.trust-card:hover{box-shadow:0 22px 46px -30px rgba(124,108,255,.5)}

/* 8 · end / cta */
.end{position:relative;border-top:0}
.end::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(600px 300px at 50% 0,rgba(124,108,255,.16),transparent 70%);
}
.end h2{font-weight:600;position:relative}

/* 9 · footer top hairline */
footer{border-top:1px solid var(--line);position:relative}
footer::before{
  content:"";position:absolute;inset-inline:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(124,108,255,.5),transparent);
}

/* 10 · tick-note stronger */
.tick-note{
  background:linear-gradient(135deg,rgba(51,144,236,.16),rgba(124,108,255,.06));
  border-color:rgba(96,140,255,.35);
}

/* 11 · collapsible ticks box (pricing) — blue & gold explained */
.foot-sitemap-link{color:var(--muted,#8e96a4);font-size:11.5px;text-decoration:none;
  transition:color var(--fast)}
.foot-sitemap-link:hover{color:var(--accent,#7cb7ff)}
.tick-box{
  margin-top:18px;border-radius:16px;overflow:hidden;
  background:linear-gradient(135deg,rgba(51,144,236,.14),rgba(124,108,255,.06));
  border:1px solid rgba(96,140,255,.35);
}
.tick-box summary{
  display:flex;align-items:center;gap:12px;padding:15px 18px;cursor:pointer;
  list-style:none;user-select:none;font-size:14px;color:var(--text);
  transition:background var(--fast);
}
.tick-box summary::-webkit-details-marker{display:none}
.tick-box summary:hover{background:rgba(255,255,255,.04)}
.tick-box .tn-ic{
  width:30px;height:30px;flex:0 0 30px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(145deg,#3390ec,#1e6fd9);color:#fff;font-weight:700;font-size:14px;
}
.tick-box summary b{flex:1;min-width:0}
.tick-box .tb-chev{
  flex:0 0 auto;color:var(--muted);display:grid;place-items:center;
  transition:transform .28s var(--ease, ease);
}
.tick-box[open] .tb-chev{transform:rotate(180deg)}
.tick-box .tb-body{
  padding:2px 18px 16px;display:flex;flex-direction:column;gap:12px;
  border-top:1px solid rgba(96,140,255,.22);
  animation:tbOpen .3s ease;
}
@keyframes tbOpen{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.tick-box .tb-item h4{
  margin:12px 0 6px;font-size:13.5px;display:flex;align-items:center;gap:8px;color:var(--text);
}
.tick-box .tb-badge{
  width:22px;height:22px;border-radius:7px;display:grid;place-items:center;
  font-size:12px;font-weight:800;flex:0 0 auto;
}
.tick-box .tb-badge.blue{background:var(--accent,#3390ec);color:#fff}
.tick-box .tb-badge.gold{
  background:linear-gradient(145deg,#f4c430,#e0a400);color:#5a3d00;
}
.tick-box .tb-item p{
  margin:0;font-size:12.5px;line-height:2.05;color:var(--muted,#98a0aa);
}

/* 11 · reduced motion */
@media (prefers-reduced-motion:reduce){
  .caps .cap,.plans .plan,.trust-card{transition:none}
}