/*! FundedCore Design System v2 — (c) 2026 FundedCore. All rights reserved. */

/* ============================================================
   1. FONTS
   ============================================================ */
@font-face{
  font-family:'Inter var';
  src:url('/assets/fonts/inter-var.woff2') format('woff2-variations');
  font-weight:100 900;font-style:normal;font-display:swap;
}

/* ============================================================
   2. TOKENS — one stylesheet, both themes
   ============================================================ */
:root{
  /* brand ramp */
  --brand-50:#e6fbfd; --brand-100:#c3f4f9; --brand-200:#8ce9f2;
  --brand-300:#4fd8e8; --brand-400:#1ec4d9; --brand-500:#07c6d7;
  --brand-600:#03abd5; --brand-700:#0288a8; --brand-800:#046a83;
  --brand-900:#06515f;
  --accent-500:#0072ff; --accent-600:#0059cc;
  --pos:#16c98d; --pos-soft:rgba(22,201,141,.12);
  --neg:#f0563a; --neg-soft:rgba(240,86,58,.12);
  --warn:#f5a623;

  /* geometry */
  --r-xs:6px; --r-sm:9px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-full:999px;
  --container:1220px;
  --nav-h:66px;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* type */
  --ff:'Inter var',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif;
  --ff-mono:ui-monospace,'SF Mono',SFMono-Regular,'JetBrains Mono','Roboto Mono',Menlo,Consolas,monospace;

  color-scheme:dark;
}

/* -------- DARK (default) -------- */
:root,[data-theme="dark"]{
  --bg:#05080d;
  --bg-elev:#0a0f18;
  --surface:#0c121d;
  --surface-2:#111827;
  --surface-3:#161f30;
  --line:#1a2434;
  --line-2:#26334a;
  --line-3:#334259;
  --ink:#f2f7fa;
  --ink-2:#c3cede;
  --body:#9fb0c4;
  --muted:#6b7c93;
  --faint:#4a5a70;
  --brand:var(--brand-500);
  --brand-ink:#7ff0fb;
  --link:var(--brand-300);
  --cta:linear-gradient(135deg,#04b6cd 0%,#0397bd 55%,#0272a0 100%);
  --cta-ink:#f2feff;
  --glow:0 0 0 1px rgba(7,198,215,.16),0 8px 28px -10px rgba(7,198,215,.34);
  --sh-sm:0 1px 2px rgba(0,0,0,.5);
  --sh-md:0 10px 30px -14px rgba(0,0,0,.85);
  --sh-lg:0 28px 70px -28px rgba(0,0,0,.95);
  --hairline:linear-gradient(90deg,transparent,rgba(7,198,215,.5) 25%,rgba(7,198,215,.7) 50%,rgba(7,198,215,.5) 75%,transparent);
  --grid-line:rgba(122,160,200,.055);
  --grid-hero:rgba(140,180,220,.075);
  --scrim:rgba(5,8,13,.86);
}
[data-theme="dark"]{color-scheme:dark}

/* Script-appropriate font stacks. Inter carries Latin; the browser falls back
   per-glyph to the script font for Arabic and Devanagari. */
html[lang="ar"]{--ff:'Inter var','Noto Sans Arabic','Segoe UI','Geeza Pro','Arabic Typesetting',Tahoma,system-ui,sans-serif}
html[lang="hi"]{--ff:'Inter var','Noto Sans Devanagari','Nirmala UI',Mangal,'Kohinoor Devanagari',system-ui,sans-serif}
[dir="rtl"]{letter-spacing:0}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] .num,[dir="rtl"] .size{letter-spacing:0}
html[lang="hi"] h1,html[lang="hi"] h2,html[lang="hi"] h3{letter-spacing:0;line-height:1.25}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3{line-height:1.28}
html[lang="ar"] .hero h1{font-size:clamp(38px,6.2vw,74px);max-width:18ch}
html[lang="hi"] .hero h1{font-size:clamp(36px,6vw,70px);max-width:18ch}

/* -------- LIGHT -------- */
[data-theme="light"]{
  --bg:#ffffff;
  --bg-elev:#f7fbfd;
  --surface:#ffffff;
  --surface-2:#f4f9fc;
  --surface-3:#eaf3f8;
  --line:#e2ecf3;
  --line-2:#cfdde8;
  --line-3:#b6c9d8;
  --ink:#08121c;
  --ink-2:#1b2c3d;
  --body:#48596c;
  --muted:#71849a;
  --faint:#93a4b7;
  --brand:#037e97;
  --brand-ink:#025e72;
  --link:#0270a0;
  --cta:linear-gradient(135deg,#0396bb 0%,#0279a0 55%,#04607f 100%);
  --cta-ink:#ffffff;
  --glow:0 0 0 1px rgba(3,150,187,.14),0 8px 26px -12px rgba(3,150,187,.3);
  --sh-sm:0 1px 2px rgba(16,42,66,.06);
  --sh-md:0 12px 34px -18px rgba(16,42,66,.28);
  --sh-lg:0 30px 70px -30px rgba(16,42,66,.34);
  --hairline:linear-gradient(90deg,transparent,rgba(3,150,187,.35) 25%,rgba(3,150,187,.6) 50%,rgba(3,150,187,.35) 75%,transparent);
  --grid-line:rgba(16,60,100,.05);
  --grid-hero:rgba(16,60,100,.07);
  --scrim:rgba(255,255,255,.9);
  color-scheme:light;
}

/* ============================================================
   3. RESET
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 20px);overflow-x:clip}
body{
  margin:0;background:var(--bg);color:var(--body);
  font-family:var(--ff);font-size:16px;line-height:1.65;
  font-feature-settings:'cv05' 1,'cv11' 1,'ss03' 1;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,h4,h5{color:var(--ink);margin:0;font-weight:680;letter-spacing:-.028em;line-height:1.08;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:inherit}
button{font:inherit;color:inherit}
ul,ol{margin:0;padding:0}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}
::selection{background:rgba(7,198,215,.28);color:var(--ink)}
hr{border:0;height:1px;background:var(--line);margin:0}

/* ============================================================
   4. LAYOUT
   ============================================================ */
.wrap{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:24px}
.wrap-sm{max-width:820px}
.wrap-xs{max-width:680px}
main{position:relative;z-index:1;display:block}
section{position:relative;padding-block:clamp(64px,7vw,104px)}
.sec-tight{padding-block:clamp(48px,5vw,72px)}
.stack>*+*{margin-top:var(--gap,18px)}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brand);margin-bottom:14px;
}
.eyebrow::before{content:'';width:22px;height:1px;background:currentColor;opacity:.55}
.sec-head{max-width:760px}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head.center .eyebrow::before{display:none}
h1,.h1{font-size:clamp(38px,5.1vw,64px);letter-spacing:-.038em}
h2,.h2{font-size:clamp(28px,3.6vw,44px);letter-spacing:-.032em}
h3,.h3{font-size:clamp(19px,1.6vw,23px);letter-spacing:-.02em}
.lead{font-size:clamp(16.5px,1.35vw,19px);line-height:1.6;color:var(--body);margin-top:18px}
.small{font-size:13.5px}
.tiny{font-size:12px;color:var(--muted);line-height:1.6}
.num{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1,'zero' 1;letter-spacing:-.01em}
.mono{font-family:var(--ff-mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.ink{color:var(--ink)}
.grad{
  background:linear-gradient(100deg,
    var(--brand-400) 0%,
    var(--brand-200) 26%,     /* punto de luz: el brillo que cruza la letra */
    var(--brand-500) 52%,
    var(--brand-600) 78%,
    var(--brand-800) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
[data-theme="light"] .grad{background:linear-gradient(102deg,#0396bb,#026a92 60%,#044e6b)
;-webkit-background-clip:text;background-clip:text;color:transparent}

/* ============================================================
   5. AMBIENT TEXTURE
   ============================================================ */
.bg-fx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg-fx::before{
  content:'';position:absolute;inset:0;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:64px 64px;
  /* Long, smooth fade: a short mask made the 64px grid read as a hard band
     directly under the nav on inner pages instead of ambient texture. */
  mask-image:radial-gradient(ellipse 100% 85% at 50% -10%,#000 0%,rgba(0,0,0,.42) 44%,transparent 90%);
  -webkit-mask-image:radial-gradient(ellipse 100% 85% at 50% -10%,#000 0%,rgba(0,0,0,.42) 44%,transparent 90%);
}
.bg-fx::after{
  content:'';position:absolute;inset:0;opacity:.55;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .028 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="light"] .bg-fx::after{opacity:.35}

/* Accessible skip link — never positioned off-canvas with negative offsets,
   which creates a 9999px scroll area (and breaks RTL layouts entirely). */
.skip-link{
  position:absolute;width:1px;height:1px;padding:0;margin:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.skip-link:focus{
  position:fixed;top:12px;inset-inline-start:12px;z-index:999;
  width:auto;height:auto;clip:auto;clip-path:none;padding:12px 20px;
}

/* ============================================================
   6. BUTTONS
   ============================================================ */
.btn{
  --h:50px;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:var(--h);padding-inline:26px;border-radius:var(--r-md);
  font-size:14.5px;font-weight:640;letter-spacing:-.005em;
  text-decoration:none;border:0;cursor:pointer;white-space:nowrap;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),background .2s,border-color .2s,color .2s;
}
.btn svg{flex-shrink:0}
.btn-lg{--h:56px;padding-inline:32px;font-size:15.5px}
.btn-sm{--h:40px;padding-inline:17px;font-size:13.5px;border-radius:var(--r-sm)}
.btn-primary{
  background:var(--cta);color:var(--cta-ink);
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 10px 26px -12px rgba(3,171,213,.75);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 18px 40px -14px rgba(3,171,213,.9)}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line-2);box-shadow:var(--sh-sm)}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-2px)}
.btn-quiet{background:transparent;color:var(--body);border:1px solid var(--line)}
.btn-quiet:hover{color:var(--ink);border-color:var(--line-3)}
.btn-block{display:flex;width:100%}
.link-arrow{
  display:inline-flex;align-items:center;gap:7px;color:var(--link);
  font-weight:640;font-size:14.5px;text-decoration:none;
}
.link-arrow::after{content:'→';transition:transform .22s var(--ease)}
.link-arrow:hover::after{transform:translateX(4px)}
.btn-row{display:flex;gap:13px;flex-wrap:wrap}
.btn-row.center{justify-content:center}

/* ============================================================
   7. CHIPS · BADGES · CARDS
   ============================================================ */
.chip{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--line);background:var(--surface);
  border-radius:var(--r-full);padding:8px 15px;
  font-size:13px;font-weight:550;color:var(--body);
}
.chip svg{color:var(--pos)}
.badge{
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  font-size:10px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 9px;border-radius:var(--r-full);
}
.badge-pos{color:var(--pos);background:var(--pos-soft)}
.badge-brand{color:var(--brand);background:rgba(7,198,215,.11)}
[data-theme="light"] .badge-brand{background:rgba(3,150,187,.1)}
.badge-warn{color:var(--warn);background:rgba(245,166,35,.12)}
.card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-md);
  position:relative;
}
.card-pad{padding:26px}
.card-hover{transition:transform .28s var(--ease),border-color .28s,box-shadow .28s}
.card-hover:hover{transform:translateY(-4px);border-color:var(--line-3);box-shadow:var(--sh-lg)}
.grid{display:grid;gap:16px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}

/* ============================================================
   8. HEADER / NAV
   ============================================================ */
.announce{
  position:relative;z-index:70;
  background:linear-gradient(90deg,transparent,rgba(7,198,215,.14) 25%,rgba(7,198,215,.2) 50%,rgba(7,198,215,.14) 75%,transparent),var(--bg-elev);
  border-bottom:1px solid var(--line);
  color:var(--ink);text-align:center;font-size:12.8px;font-weight:550;
  padding:9px 16px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
}
.announce b{color:var(--brand-ink)}
[data-theme="light"] .announce b{color:var(--brand-ink)}
.announce a{color:var(--brand);font-weight:700;text-decoration:none;border-bottom:1px solid currentColor}
.announce .code{
  font-family:var(--ff-mono);font-size:11.5px;font-weight:700;letter-spacing:.06em;
  border:1px dashed var(--brand);border-radius:5px;padding:2px 7px;color:var(--brand);
}
.nav{
  position:sticky;top:0;z-index:60;height:var(--nav-h);
  background:var(--scrim);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line);
}
.nav::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--hairline);opacity:.7}
.nav-bar{
  max-width:1300px;margin-inline:auto;height:100%;padding-inline:24px;
  display:flex;align-items:center;gap:14px;
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:720;font-size:15.5px;letter-spacing:-.02em;flex-shrink:0}
.brand img{width:30px;height:30px;border-radius:7px}
[data-theme="dark"] .brand img{filter:drop-shadow(0 0 8px rgba(7,198,215,.4))}
.nav-links{display:flex;gap:1px;margin-inline-start:16px}
.nav-links>a,.nav-drop>button{
  display:inline-flex;align-items:center;gap:5px;
  padding:8px 13px;border-radius:var(--r-sm);
  font-size:14px;font-weight:560;color:var(--body);text-decoration:none;
  background:none;border:0;cursor:pointer;transition:color .18s,background .18s;
}
.nav-links>a:hover,.nav-drop>button:hover{color:var(--ink);background:var(--surface-2)}
.nav-links>a[aria-current]{color:var(--brand)}
.nav-drop{position:relative}
.nav-drop>button::after{content:'';width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.6}
.nav-menu{
  position:absolute;top:calc(100% + 10px);inset-inline-start:0;min-width:290px;
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);padding:8px;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:all .2s var(--ease);
}
.nav-drop:hover .nav-menu,.nav-drop:focus-within .nav-menu{opacity:1;visibility:visible;transform:none}
.nav-menu a{display:block;padding:10px 12px;border-radius:var(--r-sm);text-decoration:none;color:var(--ink);font-size:14px;font-weight:600}
.nav-menu a span{display:block;font-size:12.3px;color:var(--muted);font-weight:450;margin-top:1px;line-height:1.45}
.nav-menu a:hover{background:var(--surface-2)}
.nav-right{margin-inline-start:auto;display:flex;align-items:center;gap:9px}
.icon-btn{
  width:38px;height:38px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--r-sm);border:1px solid var(--line-2);background:transparent;
  color:var(--body);cursor:pointer;transition:all .18s;
}
.icon-btn:hover{color:var(--brand);border-color:var(--brand)}
[data-theme="dark"] .icon-btn .i-sun,[data-theme="dark"] .mnav-tt .i-sun{display:block}
[data-theme="dark"] .icon-btn .i-moon,[data-theme="dark"] .mnav-tt .i-moon{display:none}
[data-theme="light"] .icon-btn .i-sun,[data-theme="light"] .mnav-tt .i-sun{display:none}
[data-theme="light"] .icon-btn .i-moon,[data-theme="light"] .mnav-tt .i-moon{display:block}
.lang{position:relative}
.lang>button{
  display:inline-flex;align-items:center;gap:6px;height:38px;padding-inline:12px;
  border:1px solid var(--line-2);border-radius:var(--r-sm);background:transparent;
  font-size:13px;font-weight:640;color:var(--body);cursor:pointer;
}
.lang>button:hover{color:var(--brand);border-color:var(--brand)}
.lang-menu{
  position:absolute;top:calc(100% + 8px);inset-inline-end:0;min-width:212px;z-index:80;
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-md);
  box-shadow:var(--sh-lg);padding:6px;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:all .2s var(--ease);max-height:60vh;overflow:auto;
}
.lang:hover .lang-menu,.lang:focus-within .lang-menu{opacity:1;visibility:visible;transform:none}
.lang-menu a{
  display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:var(--r-xs);
  text-decoration:none;color:var(--ink);font-size:13.5px;font-weight:560;
}
.lang-menu a:hover{background:var(--surface-2)}
.lang-menu a[aria-current]{color:var(--brand);background:var(--surface-2)}
.lang-menu .lc{
  flex-shrink:0;min-width:26px;padding:2px 5px;border-radius:5px;
  background:var(--surface-3);border:1px solid var(--line);
  font-size:10px;font-weight:730;letter-spacing:.06em;text-align:center;color:var(--muted);
}
.lang-menu a[aria-current] .lc{color:var(--brand);border-color:var(--brand)}
.burger{display:none}
/* ---- mobile drawer ----------------------------------------------------
   A real panel: scrim, slide-in sheet, tight 50px rows, and a footer block
   that keeps the CTA, sign-in and the proof line anchored at the bottom. */
.mnav{position:fixed;inset:0;z-index:80;display:none}
.mnav[hidden]{display:none}
.mnav.open{display:block}
.mnav-scrim{
  position:absolute;inset:0;background:rgba(3,6,11,.62);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  opacity:0;transition:opacity .26s var(--ease);
}
[data-theme="light"] .mnav-scrim{background:rgba(12,20,32,.42)}
.mnav.open .mnav-scrim{opacity:1}
.mnav-panel{
  position:absolute;inset-block:0;inset-inline-end:0;
  width:min(360px,86vw);display:flex;flex-direction:column;
  background:var(--surface);border-inline-start:1px solid var(--line-2);
  box-shadow:-24px 0 60px -20px rgba(0,0,0,.55);
  transform:translateX(100%);transition:transform .3s var(--ease);
  overscroll-behavior:contain;
}
[dir="rtl"] .mnav-panel{transform:translateX(-100%)}
.mnav.open .mnav-panel{transform:none}
@media (prefers-reduced-motion:reduce){
  .mnav-panel,.mnav-scrim{transition:none}
}

.mnav-top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px 14px 18px;border-bottom:1px solid var(--line);flex-shrink:0;
}
.mnav-top .brand{font-size:15.5px;gap:9px}
.mnav-x{
  display:grid;place-items:center;width:36px;height:36px;flex-shrink:0;
  border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:var(--surface-2);color:var(--body);cursor:pointer;transition:all .17s;
}
.mnav-x:hover{color:var(--ink);border-color:var(--line-3)}

/* One scroll region for links + proof + settings, so no nav item can ever be
   stranded below the fold on a short screen; only the CTA footer is pinned. */
.mnav-body{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column}
.mnav-links{padding:8px 10px;flex-shrink:0}
.mnav-links a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:0 12px;height:48px;border-radius:var(--r-md);
  font-size:15.5px;font-weight:600;letter-spacing:-.011em;
  color:var(--ink);text-decoration:none;transition:background .16s,color .16s;
}
.mnav-links a svg{color:var(--line-3);flex-shrink:0;transition:transform .18s,color .18s}
[dir="rtl"] .mnav-links a svg{transform:scaleX(-1)}
.mnav-links a:hover{background:var(--surface-2)}
.mnav-links a:hover svg{color:var(--muted);transform:translateX(2px)}
[dir="rtl"] .mnav-links a:hover svg{transform:scaleX(-1) translateX(2px)}
.mnav-links a[aria-current="page"]{color:var(--brand);background:rgba(7,198,215,.08)}
.mnav-links a[aria-current="page"] svg{color:var(--brand)}

/* Proof block absorbs the empty middle of a tall phone screen with something
   worth reading instead of leaving the drawer looking half-built. */
.mnav-proof{
  margin-top:auto;flex-shrink:0;display:flex;flex-direction:column;gap:9px;
  padding:16px 22px;border-top:1px solid var(--line);
  font-size:12.6px;color:var(--muted);line-height:1.45;
}
.mnav-proof>*{display:flex;align-items:center;gap:8px;text-decoration:none;color:inherit}
.mnav-proof b{color:var(--ink);font-weight:680;font-variant-numeric:tabular-nums}
.mnav-proof .stars{color:#00b67a;font-size:11.5px;letter-spacing:.5px}
.mnav-proof .dot{width:5px;height:5px;border-radius:50%;background:var(--brand);flex-shrink:0}

.mnav-set{border-top:1px solid var(--line);padding:6px 22px 10px;flex-shrink:0}
.mnav-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}
.mnav-row .k{font-size:12.5px;font-weight:640;color:var(--muted);letter-spacing:.01em}
.mnav-tt{
  display:grid;place-items:center;width:34px;height:34px;
  border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:var(--surface-2);color:var(--body);cursor:pointer;transition:all .17s;
}
.mnav-tt:hover{color:var(--ink)}
.mnav-row.stack{display:block;padding-block:10px 4px}
.mnav-row.stack .k{display:block;margin-bottom:9px}
.mnav-lang{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}
.mnav-lang a{
  min-width:34px;text-align:center;padding:5px 8px;border-radius:var(--r-sm);
  border:1px solid transparent;background:var(--surface-2);
  font-size:11.5px;font-weight:700;letter-spacing:.05em;
  color:var(--muted);text-decoration:none;transition:all .16s;
}
.mnav-lang a:hover{color:var(--ink)}
.mnav-lang a[aria-current="true"]{color:var(--brand);border-color:rgba(7,198,215,.4);background:rgba(7,198,215,.09)}

.mnav-foot{
  border-top:1px solid var(--line);background:var(--surface-2);flex-shrink:0;
  padding:16px 22px calc(16px + env(safe-area-inset-bottom));
}
.mnav-sign{
  display:block;text-align:center;margin-top:11px;
  font-size:13.6px;font-weight:600;color:var(--body);text-decoration:none;
}
.mnav-sign:hover{color:var(--brand)}
.mnav-note{
  margin-top:14px;padding-top:13px;border-top:1px solid var(--line);
  font-size:11.6px;color:var(--muted);line-height:1.5;text-align:center;
}
.mnav-note b{display:block;color:var(--ink-2);font-size:12.4px;font-weight:660;margin-bottom:2px}
/* Short viewports shed the least important things first: the footer note,
   then the proof block — never a nav item or the CTA. */
@media (max-height:820px){
  .mnav-links a{height:45px;font-size:15px}
  .mnav-proof{padding-block:12px;gap:7px}
  .mnav-foot{padding-block:14px}
  .mnav-note{display:none}
}
@media (max-height:700px){
  .mnav-proof{display:none}
  .mnav-links a{height:43px}
}

/* ============================================================
   9. HERO
   ============================================================ */
.hero{
  position:relative;isolation:isolate;text-align:center;
  padding-block:clamp(40px,5.5vw,80px) clamp(36px,4vw,60px);
  overflow:clip;
}
.hero::before{
  content:'';position:absolute;inset:0;z-index:-3;pointer-events:none;
  background-image:linear-gradient(var(--grid-hero) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid-hero) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 70% 70% at 50% 42%,#000 0%,transparent 76%);
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 42%,#000 0%,transparent 76%);
}
.hero::after{
  content:'';position:absolute;inset-inline:0;top:-14%;height:82%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 42% 56% at 50% 46%,rgba(7,198,215,.14),transparent 68%);
}
[data-theme="light"] .hero::after{background:radial-gradient(ellipse 42% 56% at 50% 46%,rgba(7,198,215,.12),transparent 68%)}
.hero .wrap{position:relative;z-index:2}

/* --- aurora: three slow-drifting light fields, no boxes --- */
.aurora{position:absolute;inset:-40% -15% auto;height:180%;z-index:-2;pointer-events:none;filter:blur(78px);opacity:.9}
.aurora i{position:absolute;display:block;border-radius:50%}
.aurora .a1{width:56vw;height:40vw;inset-block-start:6%;inset-inline-start:2%;background:radial-gradient(circle at 50% 50%,rgba(7,198,215,.5),transparent 64%)}
.aurora .a2{width:50vw;height:38vw;inset-block-start:0;inset-inline-end:0;background:radial-gradient(circle at 50% 50%,rgba(0,114,255,.5),transparent 64%)}
.aurora .a3{width:44vw;height:30vw;inset-block-start:22%;inset-inline-start:30%;background:radial-gradient(circle at 50% 50%,rgba(79,216,232,.42),transparent 64%)}
[data-theme="light"] .aurora{opacity:.5;filter:blur(90px)}
[data-theme="light"] .aurora .a1{background:radial-gradient(circle at 50% 50%,rgba(7,198,215,.5),transparent 66%)}
[data-theme="light"] .aurora .a2{background:radial-gradient(circle at 50% 50%,rgba(0,114,255,.26),transparent 66%)}
@media (prefers-reduced-motion:no-preference){
  .aurora .a1{animation:drift1 34s ease-in-out infinite}
  .aurora .a2{animation:drift2 42s ease-in-out infinite}
  .aurora .a3{animation:drift3 38s ease-in-out infinite}
}
@keyframes drift1{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(6%,7%,0) scale(1.12)}}
@keyframes drift2{0%,100%{transform:translate3d(0,0,0) scale(1.06)}50%{transform:translate3d(-7%,5%,0) scale(.94)}}
@keyframes drift3{0%,100%{transform:translate3d(0,0,0) scale(.96)}50%{transform:translate3d(4%,-6%,0) scale(1.1)}}

/* --- horizon: a single luminous line closing the hero --- */
.hero-horizon{
  position:absolute;inset-inline:0;bottom:0;height:1px;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(7,198,215,.55) 22%,rgba(127,240,251,.9) 50%,rgba(7,198,215,.55) 78%,transparent);
}
.hero-horizon::after{
  content:'';position:absolute;inset-inline:20%;bottom:0;height:130px;
  background:radial-gradient(ellipse 60% 100% at 50% 100%,rgba(7,198,215,.16),transparent 70%);
}
[data-theme="light"] .hero-horizon{background:linear-gradient(90deg,transparent,rgba(3,150,187,.35) 22%,rgba(3,150,187,.6) 50%,rgba(3,150,187,.35) 78%,transparent)}

/* --- proof pill --- */
.hero-pill{
  display:inline-flex;align-items:center;gap:9px;
  padding:7px 8px 7px 14px;border-radius:var(--r-full);
  background:color-mix(in srgb,var(--surface) 78%,transparent);
  border:1px solid var(--line-2);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  font-size:13px;font-weight:560;color:var(--body);text-decoration:none;
  box-shadow:var(--sh-md);transition:border-color .22s,transform .22s var(--ease),color .22s;
}
.hero-pill:hover{border-color:var(--brand);color:var(--ink);transform:translateY(-1px)}
.hero-pill b{color:var(--ink);font-weight:680;font-variant-numeric:tabular-nums}
.hero-pill .go{
  width:22px;height:22px;border-radius:50%;flex-shrink:0;
  background:var(--surface-3);color:var(--brand);
  display:inline-flex;align-items:center;justify-content:center;font-size:11px;
}
.hero-pill .live-dot{
  width:7px;height:7px;border-radius:50%;background:var(--pos);flex-shrink:0;
  box-shadow:0 0 0 0 rgba(22,201,141,.6);
}
@media (prefers-reduced-motion:no-preference){.hero-pill .live-dot{animation:pulse 2.6s infinite}}

/* --- headline --- */
.hero h1{
  font-size:clamp(42px,7.6vw,96px);
  letter-spacing:-.048em;line-height:.96;font-weight:650;
  margin-top:24px;max-width:15ch;margin-inline:auto;
}
.hero h1 .grad{position:relative;display:inline-block}
.hero h1 .grad::after{
  content:'';position:absolute;inset:12% -6% 6%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 60% 100% at 50% 50%,rgba(7,198,215,.22),transparent 70%);
  filter:blur(26px);
}
.hero .lead{max-width:54ch;margin-inline:auto;margin-top:22px;font-size:clamp(16.5px,1.45vw,19.5px)}
.hero .btn-row{justify-content:center;margin-top:30px}

/* --- trust strip under the CTAs --- */
.trust-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 26px;margin-top:26px;font-size:13.3px;color:var(--muted)}
.trust-row a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:7px}
.trust-row a:hover strong{color:var(--brand)}
.trust-row .sep{width:1px;height:14px;background:var(--line-2)}
.trust-row .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--pos);box-shadow:0 0 0 3px var(--pos-soft);margin-inline-end:4px;vertical-align:middle}

/* --- spec rail: numbers on hairlines, no cards --- */
.spec-rail{
  display:grid;grid-template-columns:repeat(4,1fr);
  margin-top:clamp(42px,5vw,64px);
}
.spec{position:relative;padding:6px 18px;text-align:center;min-width:0}
.spec+.spec::before{
  content:'';position:absolute;inset-block:6px;inset-inline-start:0;width:1px;
  background:linear-gradient(180deg,transparent,var(--line-2) 22%,var(--line-2) 78%,transparent);
}
.spec .v{
  display:block;font-size:clamp(30px,4vw,48px);font-weight:680;color:var(--ink);
  letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums;
}
.spec .v em{font-style:normal;background:linear-gradient(180deg,var(--ink) 30%,color-mix(in srgb,var(--ink) 58%,transparent));-webkit-background-clip:text;background-clip:text;color:transparent}
[data-theme="light"] .spec .v em{background:linear-gradient(180deg,var(--ink) 30%,color-mix(in srgb,var(--ink) 62%,transparent));-webkit-background-clip:text;background-clip:text;color:transparent}
.spec:first-child .v em{background:linear-gradient(180deg,var(--brand-200),var(--brand-500));-webkit-background-clip:text;background-clip:text;color:transparent}
[data-theme="light"] .spec:first-child .v em{background:linear-gradient(180deg,#0396bb,#04607f);-webkit-background-clip:text;background-clip:text;color:transparent}
.spec .k{display:block;margin-top:10px;font-size:11.5px;font-weight:620;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);line-height:1.4}
.stars{color:#f5a623;letter-spacing:1px;font-size:12.5px}

/* Nota de Trustpilot: estrellas rellenadas en proporción a la puntuación real.
   .rating-fg se recorta al porcentaje que calcula lib.mjs, así que un 4.3 se ve
   como 4,3 estrellas. inset-inline-start hace que en árabe el recorte empiece
   por la derecha sin reglas aparte. No tocar .stars: lo usan los testimonios,
   que sí llevan cinco estrellas enteras. */
.rating{position:relative;display:inline-block;white-space:nowrap;vertical-align:middle;
  letter-spacing:1px;font-size:12.5px;line-height:1}
.rating-bg{color:var(--line,rgba(140,150,165,.34))}
.rating-fg{position:absolute;inset-block-start:0;inset-inline-start:0;
  overflow:hidden;color:#f5a623;width:0}
.rating-n{color:var(--muted);font-weight:500}
@media (forced-colors:active){.rating-fg{color:Highlight}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(22,201,141,.55)}70%{box-shadow:0 0 0 7px rgba(22,201,141,0)}100%{box-shadow:0 0 0 0 rgba(22,201,141,0)}}

/* stat strip (About page) */
.stat-strip{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  margin-top:46px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
}
.stat{background:var(--surface);padding:20px 22px;display:flex;flex-direction:column;gap:2px}
.stat .v{font-size:clamp(23px,2.4vw,30px);font-weight:700;color:var(--ink);letter-spacing:-.035em;line-height:1.1}
.stat .v em{font-style:normal;color:var(--brand)}
.stat .k{font-size:12.3px;color:var(--muted);font-weight:520}

/* data list inside cards */
.dl{margin:0}
.dl .row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:7.5px 0;border-bottom:1px dashed var(--line-2)}
.dl .row:last-child{border-bottom:0}
.dl dt{color:var(--muted);font-size:12.5px}
.dl dd{margin:0;color:var(--ink);font-size:12.8px;font-weight:640;font-variant-numeric:tabular-nums}
.dl.lg dt,.dl.lg dd{font-size:13.5px}

/* ============================================================
   10. LOGO / TRUST BAR
   ============================================================ */
.trustbar{border-block:1px solid var(--line);background:var(--bg-elev);padding-block:20px}
.trustbar-in{display:flex;align-items:center;justify-content:center;gap:14px 44px;flex-wrap:wrap}
.trustbar span{font-size:12.5px;color:var(--muted);display:inline-flex;align-items:center;gap:8px;font-weight:540}
.trustbar svg{color:var(--brand);flex-shrink:0}

/* ============================================================
   11. PRICING
   ============================================================ */
.tabs{
  display:inline-flex;gap:4px;padding:5px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--sh-sm);
}
.tabs button{
  position:relative;border:0;background:none;border-radius:var(--r-sm);
  padding:9px 20px;cursor:pointer;color:var(--body);
  font-size:13.8px;font-weight:640;line-height:1.25;transition:all .2s;
}
.tabs button small{display:block;font-size:11px;font-weight:480;opacity:.72;margin-top:1px}
.tabs button[aria-selected="true"]{background:var(--cta);color:var(--cta-ink);box-shadow:0 6px 16px -6px rgba(3,171,213,.6)}
.tabs .pop{
  position:absolute;top:-8px;inset-inline-end:-5px;
  background:var(--pos);color:#03210f;font-size:8.5px;font-weight:800;
  text-transform:uppercase;letter-spacing:.05em;padding:2.5px 7px;border-radius:var(--r-full);
}
.seg{display:inline-flex;padding:4px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm)}
.seg button{border:0;background:none;border-radius:var(--r-xs);padding:7px 14px;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer;transition:all .18s}
.seg button[aria-pressed="true"]{background:var(--surface-3);color:var(--brand)}
.toggle-chips{display:inline-flex;gap:8px;flex-wrap:wrap}
.toggle-chips button{
  border:1px solid var(--line-2);background:var(--surface);border-radius:var(--r-full);
  padding:8px 15px;font-size:12.5px;font-weight:600;color:var(--body);cursor:pointer;transition:all .2s;
}
.toggle-chips button[aria-pressed="true"]{border-color:var(--brand);color:var(--brand);background:rgba(7,198,215,.09)}
.price-controls{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:18px}

.price-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:40px}
.pcard{
  position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;
  transition:transform .28s var(--ease),box-shadow .28s,border-color .28s;
  display:flex;flex-direction:column;
}
.pcard::before{content:'';display:block;height:3px;background:linear-gradient(90deg,var(--brand-300),var(--brand-600))}
.pcard:hover{transform:translateY(-5px);box-shadow:var(--sh-lg);border-color:var(--line-3)}
.pcard.featured{border-color:var(--brand-800);box-shadow:var(--glow)}
[data-theme="light"] .pcard.featured{border-color:var(--brand-300)}
.pcard.featured::before{background:var(--pos)}
/* La etiqueta de la tarjeta destacada empujaba su contenido 21px hacia abajo
   (padding-top 40 frente a 19), así que ninguna de sus filas alineaba con las
   otras cuatro: tamaño, precio, botón y specs iban todos descolocados en la
   única tarjeta que más se mira. Ahora la etiqueta es una cinta en el borde
   superior y las cinco tarjetas reservan esa misma banda, alineen o no. */
.pcard-in{padding:34px 19px 19px;display:flex;flex-direction:column;flex:1}
.pcard .flag{
  position:absolute;inset-block-start:3px;inset-inline:0;   /* bajo la barra de acento */
  display:flex;align-items:center;justify-content:center;
  height:25px;border-radius:0;
  font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
}
.pcard .k{font-size:10.5px;font-weight:730;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pcard .size{font-size:29px;font-weight:750;color:var(--ink);letter-spacing:-.035em;line-height:1.15;margin-top:2px}
.pcard .price{display:flex;align-items:baseline;gap:7px;margin-top:6px;flex-wrap:wrap}
.pcard .price b{font-size:22px;font-weight:730;color:var(--brand);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.pcard .price s{font-size:13px;color:var(--faint);text-decoration-thickness:1.5px}
.pcard .price em{font-style:normal;font-size:11.5px;color:var(--muted);font-weight:560}
.pcard .btn{margin-top:14px}
.pcard .dl{margin-top:15px;flex:1}
.price-note{text-align:center;font-size:12.3px;color:var(--muted);margin-top:24px;line-height:1.7}

/* comparison table */
.table-scroll{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);box-shadow:var(--sh-md);
  /* Scroll shadows: without an affordance, a table that overflows on a phone
     reads as a table with a missing column. The edge shading only appears
     while there is more to scroll to. */
  background-image:
    linear-gradient(to right,var(--surface),rgba(0,0,0,0)),
    linear-gradient(to left,var(--surface),rgba(0,0,0,0)),
    radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.20),rgba(0,0,0,0)),
    radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.20),rgba(0,0,0,0));
  background-position:0 0,100% 0,0 0,100% 0;
  background-repeat:no-repeat;
  background-size:36px 100%,36px 100%,15px 100%,15px 100%;
  background-attachment:local,local,scroll,scroll;
}
table.dt{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}
table.dt caption{text-align:start;padding:18px 20px 0;color:var(--muted);font-size:12.5px}
table.dt th,table.dt td{padding:14px 18px;text-align:start;border-bottom:1px solid var(--line)}
table.dt thead th{
  background:var(--surface-2);color:var(--ink);font-weight:680;font-size:12.5px;
  letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;position:sticky;top:0;
}
table.dt tbody th{color:var(--ink);font-weight:620;white-space:nowrap}
table.dt td{color:var(--body);font-variant-numeric:tabular-nums}
table.dt tbody tr:last-child th,table.dt tbody tr:last-child td{border-bottom:0}
table.dt tbody tr:hover{background:var(--surface-2)}
table.dt .own{color:var(--brand);font-weight:660}
table.dt col.own-col,table.dt .own-col{background:rgba(7,198,215,.05)}

/* Narrow article tables (<=3 columns) fit the viewport instead of scrolling. */
@media (max-width:660px){
  table.dt.dt-fit{min-width:0;font-size:13px}
  table.dt.dt-fit caption{padding:14px 13px 0;font-size:11.8px;line-height:1.45}
  table.dt.dt-fit th,table.dt.dt-fit td{padding:11px 11px;overflow-wrap:anywhere}
  table.dt.dt-fit thead th{font-size:10.6px;letter-spacing:.03em;white-space:normal;line-height:1.3}
  table.dt.dt-fit tbody th{white-space:normal;font-size:12.4px;line-height:1.35}
}

/* Head-to-head tables are only three columns, so on a phone they should fit
   the viewport rather than scroll — the competitor column is the whole point. */
@media (max-width:660px){
  table.dt.dt-cmp{min-width:0;font-size:12.8px;table-layout:fixed}
  table.dt.dt-cmp caption{padding:14px 13px 0;font-size:11.8px;line-height:1.45}
  table.dt.dt-cmp th,table.dt.dt-cmp td{padding:11px 10px;word-break:normal;overflow-wrap:anywhere;hyphens:auto}
  table.dt.dt-cmp thead th{font-size:10.6px;letter-spacing:.03em;white-space:normal;line-height:1.3}
  table.dt.dt-cmp tbody th{white-space:normal;font-size:12.2px;line-height:1.35;width:31%}
  table.dt.dt-cmp tbody td{line-height:1.4}
}
.yes{color:var(--pos);font-weight:700}
.no{color:var(--neg);font-weight:700}

/* ============================================================
   12. CALCULATOR
   ============================================================ */
.calc{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;background:var(--surface);box-shadow:var(--sh-lg)}
.calc-l{padding:clamp(24px,3vw,36px)}
.calc-r{padding:clamp(24px,3vw,36px);background:var(--surface-2);border-inline-start:1px solid var(--line)}
.field-label{font-size:11px;font-weight:730;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:11px;display:block}
.pill-row{display:flex;flex-wrap:wrap;gap:7px}
.pill{
  border:1px solid var(--line-2);background:var(--surface);color:var(--body);
  border-radius:var(--r-full);padding:8px 16px;font-size:13.5px;font-weight:600;
  cursor:pointer;font-variant-numeric:tabular-nums;transition:all .16s;
}
.pill[aria-pressed="true"]{border-color:var(--brand);background:rgba(7,198,215,.09);color:var(--brand)}
input[type=range]{width:100%;accent-color:var(--brand);margin-top:12px;height:22px;cursor:pointer}
.calc-out{font-size:clamp(38px,4.8vw,54px);font-weight:730;color:var(--brand);letter-spacing:-.04em;line-height:1.05;font-variant-numeric:tabular-nums}
.splitbar{height:10px;border-radius:var(--r-full);background:var(--surface-3);border:1px solid var(--line);overflow:hidden;margin-top:18px}
.splitbar i{display:block;height:100%;background:var(--cta);transition:width .4s var(--ease)}
.switch{
  display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;
  border:1px solid var(--line-2);background:var(--surface);border-radius:var(--r-md);
  padding:13px 15px;cursor:pointer;font-size:14px;font-weight:560;color:var(--body);
  text-align:start;transition:all .2s;
}
.switch[aria-pressed="true"]{border-color:var(--brand);background:rgba(7,198,215,.08);color:var(--ink)}
.switch .track{position:relative;width:42px;height:23px;border-radius:var(--r-full);background:var(--surface-3);border:1px solid var(--line-2);flex-shrink:0;transition:all .2s}
.switch[aria-pressed="true"] .track{background:var(--cta);border-color:transparent}
.switch .track::after{content:'';position:absolute;top:2px;inset-inline-start:2px;width:17px;height:17px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:translate .2s var(--ease)}
.switch[aria-pressed="true"] .track::after{translate:19px 0}

/* ============================================================
   13. STEPS
   ============================================================ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:52px;position:relative}
.steps::before{content:'';position:absolute;top:24px;inset-inline:12.5%;height:1px;background:linear-gradient(90deg,transparent,var(--brand-600),var(--brand-300),var(--brand-600),transparent);opacity:.5}
.step{text-align:center;position:relative;padding-inline:10px}
.step .n{
  width:48px;height:48px;border-radius:50%;background:var(--cta);color:var(--cta-ink);
  font-weight:760;font-size:15px;display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 8px 22px -8px rgba(3,171,213,.7);position:relative;z-index:2;
  border:4px solid var(--bg);
}
.step h3{font-size:17px;margin-top:15px}
.step p{font-size:13.5px;margin-top:7px;color:var(--body)}
.step .t{display:inline-block;margin-top:11px;font-size:11.5px;font-weight:700;color:var(--brand);background:rgba(7,198,215,.1);border-radius:var(--r-full);padding:4px 12px}

/* ============================================================
   14. RULEBOOK EXPLORER
   ============================================================ */
.split-2{display:grid;grid-template-columns:.86fr 1.14fr;gap:clamp(32px,4vw,56px);align-items:center}
.explorer{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-lg)}
.explorer-tabs{display:flex;border-bottom:1px solid var(--line);background:var(--surface-2)}
.explorer-tabs button{
  flex:1;border:0;background:none;padding:14px 8px;cursor:pointer;
  font-size:13px;font-weight:640;color:var(--muted);border-bottom:2px solid transparent;transition:all .2s;
}
.explorer-tabs button[aria-selected="true"]{color:var(--brand);border-color:var(--brand);background:var(--surface)}
.explorer-body{padding:6px 22px 16px;min-height:286px}
.explorer-item{padding:14px 0;border-bottom:1px dashed var(--line-2)}
.explorer-item:last-child{border-bottom:0}
.explorer-item b{display:block;color:var(--ink);font-size:14px;font-weight:650}
.explorer-item span{display:block;font-size:13px;line-height:1.6;margin-top:4px;color:var(--body)}
.explorer-foot{padding:14px 22px;border-top:1px solid var(--line);background:var(--surface-2)}

/* ============================================================
   15. PAYOUT TICKER + CERTIFICATES
   ============================================================ */
.ticker{position:relative;overflow:hidden;contain:paint;border-block:1px solid var(--line);background:var(--bg-elev);padding-block:13px}
.ticker-hero{border-top:0;background:transparent;padding-block:18px}
.ticker-hero::before{inset-inline-start:0;background:linear-gradient(90deg,var(--bg),transparent)}
.ticker-hero::after{inset-inline-end:0;background:linear-gradient(-90deg,var(--bg),transparent)}
.ticker::before,.ticker::after{content:'';position:absolute;top:0;bottom:0;width:90px;z-index:3;pointer-events:none}
.ticker::before{inset-inline-start:0;background:linear-gradient(90deg,var(--bg-elev),transparent)}
.ticker::after{inset-inline-end:0;background:linear-gradient(-90deg,var(--bg-elev),transparent)}
.ticker-track{display:flex;gap:32px;width:max-content;animation:marquee 60s linear infinite}
.ticker-item{display:inline-flex;align-items:center;gap:9px;font-size:13px;color:var(--body);white-space:nowrap}
.ticker-item b{color:var(--ink);font-weight:620}
.ticker-item .amt{color:var(--pos);font-weight:700;font-variant-numeric:tabular-nums}
.ticker-item .sep{color:var(--faint)}
@keyframes marquee{to{transform:translateX(-50%)}}
[dir="rtl"] .ticker-track{animation-name:marquee-rtl}
@keyframes marquee-rtl{to{transform:translateX(50%)}}

.certs{position:relative;overflow:hidden;contain:paint;margin-top:44px}
.certs::before,.certs::after{content:'';position:absolute;top:0;bottom:0;width:110px;z-index:3;pointer-events:none}
.certs::before{inset-inline-start:0;background:linear-gradient(90deg,var(--bg),transparent)}
.certs::after{inset-inline-end:0;background:linear-gradient(-90deg,var(--bg),transparent)}
.certs-track{display:flex;gap:18px;width:max-content;animation:marquee 70s linear infinite}
.certs-track:hover{animation-play-state:paused}
.cert{
  width:318px;flex-shrink:0;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);overflow:hidden;box-shadow:var(--sh-md);
  transition:transform .25s var(--ease),border-color .25s;
}
.cert:hover{transform:translateY(-4px);border-color:var(--line-3)}
.cert img{width:100%;aspect-ratio:1752/1200;object-fit:cover;background:var(--surface-2)}
.cert-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 15px}
.cert-meta .who{font-size:13px;font-weight:660;color:var(--ink);line-height:1.35}
.cert-meta .when{font-size:11.5px;color:var(--muted)}

/* ============================================================
   16. PLATFORMS
   ============================================================ */
.plat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
.plat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;text-align:center;box-shadow:var(--sh-md);transition:transform .25s var(--ease),border-color .25s}
.plat:hover{transform:translateY(-4px);border-color:var(--line-3)}
.plat-logo{
  display:flex;align-items:center;justify-content:center;height:84px;border-radius:var(--r-md);
  margin-bottom:16px;background:radial-gradient(120% 130% at 30% 20%,#13203a 0%,#070d1c 75%);
  box-shadow:inset 0 0 0 1px rgba(72,192,240,.2);
}
.plat-logo img{max-height:50px;max-width:78%;object-fit:contain;width:auto}
.plat h3{font-size:18px}
.plat p{font-size:13.5px;margin-top:7px}
.cond-rows{max-width:880px;margin:32px auto 0;display:flex;flex-direction:column;gap:11px}
.cond-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center}
.cond-row .t{font-size:11.5px;font-weight:730;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);min-width:104px;text-align:end}

/* ============================================================
   17. TESTIMONIALS
   ============================================================ */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.quote{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:24px;font-size:14.8px;line-height:1.6;color:var(--ink);font-weight:520;
  display:flex;flex-direction:column;box-shadow:var(--sh-md);
}
.quote .stars{margin-bottom:12px}
.quote blockquote{margin:0;flex:1}
.quote footer{display:flex;align-items:center;gap:11px;margin-top:18px;padding-top:15px;border-top:1px solid var(--line)}
.avatar{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;
  background:var(--cta);color:var(--cta-ink);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:730;
}
.quote cite{font-style:normal;font-size:13.3px;font-weight:640;color:var(--ink);display:block}
.quote .meta{font-size:11.8px;color:var(--muted)}

/* ============================================================
   18. FAQ
   ============================================================ */
.faq{margin-top:38px}
.faq details{
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);
  margin-bottom:9px;overflow:hidden;transition:border-color .2s;
}
.faq details[open]{border-color:var(--brand)}
.faq summary{
  cursor:pointer;padding:17px 20px;color:var(--ink);font-weight:620;font-size:15.2px;
  list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;line-height:1.45;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';flex-shrink:0;width:11px;height:11px;position:relative;background:
  linear-gradient(var(--brand),var(--brand)) center/11px 1.6px no-repeat,
  linear-gradient(var(--brand),var(--brand)) center/1.6px 11px no-repeat;
  transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq .a{padding:0 20px 18px;font-size:14.4px;line-height:1.68;color:var(--body);white-space:pre-line}
.faq .a strong{color:var(--ink)}

.search-bar{
  display:flex;align-items:center;gap:10px;border:1px solid var(--line-2);background:var(--surface);
  border-radius:var(--r-md);padding:0 15px;height:48px;margin-top:16px;
}
.search-bar svg{color:var(--muted);flex-shrink:0}
.search-bar input{flex:1;border:0;background:none;font:inherit;font-size:14.5px;color:var(--ink);height:100%;outline:none;min-width:0}
.cats{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.cats button{
  border:1px solid var(--line-2);background:var(--surface);border-radius:var(--r-full);
  padding:7px 14px;font-size:12.8px;font-weight:600;color:var(--body);cursor:pointer;transition:all .18s;
}
.cats button[aria-pressed="true"]{border-color:var(--brand);color:var(--brand);background:rgba(7,198,215,.09)}

/* ============================================================
   19. DOC LAYOUT (guideline / legal / article)
   ============================================================ */
/* minmax(0,…) rather than a bare track size: grid items default to
   min-width:auto, so the 640px min-width on article tables was forcing the
   whole column wider than a phone viewport and dragging the TOC with it. */
.doc{display:grid;grid-template-columns:minmax(0,236px) minmax(0,1fr);gap:52px;align-items:start}
.doc>*{min-width:0}
.table-scroll{min-width:0;max-width:100%}
.toc{position:sticky;top:calc(var(--nav-h) + 22px);font-size:13.5px}
.toc p{font-size:10.8px;font-weight:740;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.toc a{
  display:block;padding:7px 12px;border-inline-start:2px solid var(--line);
  color:var(--body);text-decoration:none;transition:all .18s;line-height:1.45;
}
.toc a:hover{color:var(--ink);border-color:var(--line-3)}
.toc a[aria-current]{color:var(--brand);border-color:var(--brand);background:rgba(7,198,215,.06)}
.doc-block{margin-bottom:52px;scroll-margin-top:calc(var(--nav-h) + 24px)}
.doc-block>h2{
  display:flex;align-items:center;gap:14px;font-size:clamp(22px,2.4vw,29px);
  padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid var(--line);
}
.doc-block>h2 .n{
  width:34px;height:34px;flex-shrink:0;border-radius:var(--r-sm);
  background:var(--surface-2);border:1px solid var(--line-2);color:var(--brand);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:730;font-variant-numeric:tabular-nums;
}
/* ---- rulebook accordion: the doc-block <details> had no styling at all,
        so summaries rendered with the browser's default disclosure triangle
        and the same colour as body text. This is the real component. ---- */
.rules{border-top:1px solid var(--line)}
.rules details{
  border-bottom:1px solid var(--line);
  transition:background .2s var(--ease);
}
.rules details[open]{background:var(--surface-2)}
[data-theme="light"] .rules details[open]{background:var(--surface-2)}
.rules summary{
  position:relative;list-style:none;cursor:pointer;
  display:flex;align-items:center;gap:14px;
  padding:16px 52px 16px 18px;
  color:var(--ink);font-size:15.5px;font-weight:620;line-height:1.4;
  letter-spacing:-.012em;transition:color .18s;
}
.rules summary::-webkit-details-marker{display:none}
.rules summary::before{
  content:'';flex-shrink:0;width:6px;height:6px;border-radius:50%;
  background:var(--line-3);transition:background .2s,box-shadow .2s;
}
.rules summary::after{
  content:'';position:absolute;inset-inline-end:18px;top:50%;
  width:10px;height:10px;margin-top:-5px;
  background:
    linear-gradient(var(--muted),var(--muted)) center/10px 1.6px no-repeat,
    linear-gradient(var(--muted),var(--muted)) center/1.6px 10px no-repeat;
  transition:transform .28s var(--ease),background-image .2s;
}
.rules summary:hover{color:var(--brand)}
.rules summary:hover::before{background:var(--brand)}
.rules details[open] summary{color:var(--brand)}
.rules details[open] summary::before{background:var(--brand);box-shadow:0 0 0 4px rgba(7,198,215,.14)}
.rules details[open] summary::after{
  transform:rotate(135deg);
  background:
    linear-gradient(var(--brand),var(--brand)) center/10px 1.6px no-repeat,
    linear-gradient(var(--brand),var(--brand)) center/1.6px 10px no-repeat;
}
.rules .a{
  padding:0 52px 20px 38px;
  font-size:14.8px;line-height:1.72;color:var(--body);
  border-inline-start:2px solid var(--brand);
  margin-inline-start:20px;margin-bottom:4px;
}
/* worked examples inside a rule read as a distinct block */
.rules .a .ex{
  display:block;margin-top:14px;padding:14px 16px;
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-md);
  font-size:14.2px;color:var(--ink-2);
}
.rules .a .ex b{
  display:block;margin-bottom:6px;color:var(--brand);
  font-size:10.5px;font-weight:740;letter-spacing:.12em;text-transform:uppercase;
}
.rules .a .ex .num,.rules .a .ex strong{color:var(--ink);font-weight:640}
@media (prefers-reduced-motion:no-preference){
  .rules details[open] .a{animation:ruleIn .32s var(--ease-out)}
}
@keyframes ruleIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* expand / collapse all */
.rules-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:2px}
.rules-bar .count{font-size:12.5px;color:var(--muted)}
.rules-toggle{
  border:1px solid var(--line-2);background:var(--surface);border-radius:var(--r-sm);
  padding:7px 13px;font-size:12.5px;font-weight:620;color:var(--body);cursor:pointer;transition:all .18s;
}
.rules-toggle:hover{border-color:var(--brand);color:var(--brand)}

.prose{font-size:15.6px;line-height:1.75;color:var(--body)}
.prose>*+*{margin-top:18px}
.prose h2{font-size:clamp(23px,2.4vw,30px);margin-top:44px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.prose h3{font-size:19.5px;margin-top:32px}
.prose ul,.prose ol{padding-inline-start:22px}
.prose li+li{margin-top:8px}
.prose li::marker{color:var(--brand)}
.prose a{color:var(--link);text-underline-offset:3px}
.prose strong{color:var(--ink);font-weight:640}
.prose blockquote{
  border-inline-start:3px solid var(--brand);padding:4px 0 4px 18px;
  color:var(--ink);font-size:16.5px;font-style:italic;
}
.callout{
  border:1px solid var(--line-2);border-inline-start:3px solid var(--brand);
  background:var(--surface-2);border-radius:var(--r-md);padding:18px 20px;font-size:14.5px;
}
.callout b{color:var(--ink);display:block;margin-bottom:5px}
.summary-table{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.summary-table .row{display:grid;grid-template-columns:1fr 1.6fr;gap:16px;padding:14px 18px;border-bottom:1px solid var(--line);font-size:14px}
.summary-table .row:last-child{border-bottom:0}
.summary-table .row:nth-child(odd){background:var(--surface-2)}
.summary-table b{color:var(--ink);font-weight:620}

/* ============================================================
   20. BLOG / CARDS INDEX
   ============================================================ */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.post{
  display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:24px;text-decoration:none;box-shadow:var(--sh-md);
  transition:transform .25s var(--ease),border-color .25s,box-shadow .25s;
}
.post:hover{transform:translateY(-4px);border-color:var(--line-3);box-shadow:var(--sh-lg)}
.post .cat{font-size:10.5px;font-weight:740;letter-spacing:.1em;text-transform:uppercase;color:var(--brand)}
.post h3{font-size:18.5px;margin-top:11px;line-height:1.28}
.post p{font-size:14px;margin-top:10px;flex:1;color:var(--body)}
.post .foot{display:flex;align-items:center;gap:9px;margin-top:18px;font-size:12.3px;color:var(--muted)}
.breadcrumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12.8px;color:var(--muted);margin-bottom:20px}
.breadcrumb a{color:inherit;text-decoration:none}
.breadcrumb a:hover{color:var(--brand)}
.breadcrumb li{list-style:none;display:inline-flex;align-items:center;gap:8px}
.breadcrumb li+li::before{content:'/';color:var(--faint)}
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0;padding:0}

/* ============================================================
   21. CTA + FOOTER
   ============================================================ */
.cta-final{
  position:relative;text-align:center;overflow:hidden;
  padding-block:clamp(72px,8vw,110px);
  border-top:1px solid var(--line);
}
.cta-final::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 55% 100% at 50% 100%,rgba(7,198,215,.22),transparent 68%);
}
.cta-final .wrap{position:relative;z-index:1}
.cta-final h2{font-size:clamp(30px,4.4vw,52px)}

.site-footer{border-top:1px solid var(--line);background:var(--bg-elev);padding-block:56px 32px;font-size:14px;position:relative;z-index:1}
.foot-grid{display:grid;grid-template-columns:2.1fr 1fr 1fr 1fr 1fr;gap:36px}
.site-footer h4{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:15px;font-weight:740}
.site-footer ul{list-style:none}
.site-footer li{margin-bottom:9px}
.site-footer a{color:var(--body);text-decoration:none;font-size:13.8px}
.site-footer a:hover{color:var(--brand)}
.foot-legal{border-top:1px solid var(--line);margin-top:40px;padding-top:26px;font-size:12px;color:var(--muted);line-height:1.75}
.foot-bottom{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:20px}
.foot-langs{display:flex;flex-wrap:wrap;gap:6px 12px}
.foot-langs a{font-size:12.3px;color:var(--muted);text-decoration:none}
.foot-langs a:hover{color:var(--brand)}
.social{display:flex;gap:8px;margin-top:16px}
.social a{
  width:34px;height:34px;border-radius:var(--r-sm);border:1px solid var(--line-2);
  display:inline-flex;align-items:center;justify-content:center;color:var(--body);transition:all .18s;
}
.social a:hover{color:var(--brand);border-color:var(--brand);transform:translateY(-2px)}

/* ============================================================
   22. STICKY MOBILE CTA
   ============================================================ */
.sticky-cta{
  position:fixed;inset-inline:0;bottom:0;z-index:55;display:none;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:var(--scrim);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-top:1px solid var(--line);
  align-items:center;gap:12px;
}
.sticky-cta .txt{flex:1;min-width:0}
.sticky-cta .txt b{display:block;font-size:13px;color:var(--ink);font-weight:660;line-height:1.3}
.sticky-cta .txt span{font-size:11.5px;color:var(--muted)}
.sticky-cta .btn{flex-shrink:0}

/* ============================================================
   23. FORMS
   ============================================================ */
.form-grid{display:grid;gap:16px}
.input,textarea.input,select.input{
  width:100%;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);
  border-radius:var(--r-md);padding:13px 15px;font:inherit;font-size:14.5px;
  transition:border-color .18s,box-shadow .18s;
}
.input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(7,198,215,.16)}
.input::placeholder{color:var(--faint)}
label.lbl{display:block;font-size:12.5px;font-weight:640;color:var(--ink);margin-bottom:7px}
textarea.input{resize:vertical;min-height:130px;line-height:1.6}

/* ============================================================
   24. REVEAL
   ============================================================ */
/* Only hide when JS is available to reveal it again — never hide content from
   a crawler, a reader-mode parser, or a browser with scripting disabled. */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .65s var(--ease-out),transform .65s var(--ease-out)}
.js .reveal.in{opacity:1;transform:none}

/* ============================================================
   25. RTL
   ============================================================ */
[dir="rtl"] .eyebrow::before{transform:scaleX(-1)}
[dir="rtl"] .link-arrow::after{content:'←'}
[dir="rtl"] .link-arrow:hover::after{transform:translateX(-4px)}
[dir="rtl"] .fan-1{transform:rotate(6.5deg)}
[dir="rtl"] .fan-3{transform:rotate(-6.5deg)}
[dir="rtl"] .cond-row .t{text-align:start}

/* ============================================================
   26. RESPONSIVE
   ============================================================ */
/* ---------- Laptop ---------- */
@media (max-width:1240px){
  .price-grid{grid-template-columns:repeat(3,1fr)}
  .foot-grid{grid-template-columns:1.6fr 1fr 1fr 1fr}
  .nav-links>a{padding-inline:10px;font-size:13.5px}
}

/* ---------- Tablet landscape / small laptop ---------- */
@media (max-width:1080px){
  .nav-links{display:none}
  .burger{display:inline-flex}
  .btn-navhide{display:none}
  .split-2,.calc,.doc{grid-template-columns:minmax(0,1fr)}
  .doc{gap:26px}
  .toc{position:static;border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px;background:var(--surface)}
  .toc a{border-inline-start:0;padding:6px 0}
  .toc a[aria-current]{background:none;padding-inline-start:8px}
  .calc-r{border-inline-start:0;border-top:1px solid var(--line)}
  .price-grid{grid-template-columns:repeat(2,1fr)}
  .plat-grid,.quotes,.post-grid,.g-4,.g-3{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr);gap:34px 24px}
  .steps::before{display:none}
  .stat-strip{grid-template-columns:repeat(2,1fr)}
  .sticky-cta{display:flex}
  body{padding-bottom:76px}
}

/* ---------- Tablet portrait ---------- */
@media (max-width:820px){
  .wrap{padding-inline:22px}
  .hero{padding-block:clamp(36px,5vw,56px) 40px}
  .spec-rail{grid-template-columns:repeat(2,1fr);gap:30px 0}
  .spec+.spec::before{inset-block:0}
  .spec:nth-child(odd)::before{display:none}
  .spec:nth-child(even)::before{display:block}
  .spec:nth-child(3),.spec:nth-child(4){padding-top:26px;border-top:1px solid var(--line)}
  .foot-grid{grid-template-columns:repeat(2,1fr);gap:30px}
  .foot-grid>div:first-child{grid-column:1 / -1}
  .announce .sec{display:none}
  .certs::before,.certs::after,.ticker::before,.ticker::after{width:56px}
  .cert{width:270px}
}

/* ---------- Large phone ---------- */
@media (max-width:680px){
  .wrap{padding-inline:18px}
  section{padding-block:clamp(46px,9vw,60px)}
  .sec-tight{padding-block:clamp(38px,7vw,52px)}
  .price-grid,.steps,.plat-grid,.quotes,.post-grid,.g-4,.g-3,.g-2{grid-template-columns:1fr}
  .steps{gap:26px}
  .step{padding-inline:0}
  .cond-row{justify-content:flex-start}
  .cond-row .t{min-width:0;text-align:start;width:100%;margin-bottom:2px}
  .price-controls{flex-direction:column;align-items:stretch;gap:10px}
  .price-controls>*{width:100%;justify-content:center}
  .seg,.toggle-chips{display:flex}
  .seg button,.toggle-chips button{flex:1}
  .tabs{width:100%}
  .tabs button{flex:1;padding-inline:8px;font-size:13px}
  .btn-row .btn{width:100%}
  .btn-lg{--h:52px;font-size:15px}
  table.dt th,table.dt td{padding:12px 14px}
  .summary-table .row{grid-template-columns:1fr;gap:4px}
  .doc-block>h2{font-size:22px;gap:11px}
  .doc-block>h2 .n{width:30px;height:30px;font-size:12px}
  .prose{font-size:15.2px}
  .quote{padding:20px}
  .card-pad{padding:22px}
  .calc-l,.calc-r{padding:22px}
  .calc-out{font-size:clamp(34px,10vw,44px)}
  .faq summary{padding:15px 17px;font-size:14.6px}
  .faq .a{padding:0 17px 16px;font-size:14px}
  .search-bar{height:46px}
  .breadcrumb{font-size:12px}
}

/* ---------- Phone ---------- */
@media (max-width:560px){
  /* the sticky bottom bar carries the CTA on small screens */
  .nav-right .btn-primary{display:none}
  .nav-right{gap:7px}
  .lang>button span{display:none}
  .lang>button{padding-inline:9px}
  .announce{gap:7px;font-size:11.8px;padding:8px 14px;line-height:1.45}
  .announce .sec{display:none}
  .hero-pill{font-size:12px;padding:6px 7px 6px 12px;gap:7px}
  .hero-pill .go{width:19px;height:19px;font-size:10px}
  .trust-row{gap:8px 14px;font-size:12.5px}
  .hero h1{font-size:clamp(29px,8.6vw,40px);letter-spacing:-.04em;max-width:13ch}
  html[lang="ar"] .hero h1{font-size:clamp(28px,8vw,38px);max-width:15ch}
  html[lang="hi"] .hero h1{font-size:clamp(27px,7.6vw,36px);max-width:15ch}
  .hero .lead{font-size:15.6px;max-width:34ch}
  .hero-pill{max-width:100%;text-align:center}
  .trust-row .sep{display:none}
  .spec .v{font-size:clamp(28px,9vw,36px)}
  .spec .k{font-size:10.5px;letter-spacing:.07em;overflow-wrap:anywhere}
  .spec{padding-inline:8px}
  .cert{width:236px}
  .ticker-item{font-size:12px}
  .foot-grid{grid-template-columns:1fr;gap:26px}
  .foot-grid>div:first-child{grid-column:auto}
  .foot-bottom{flex-direction:column;gap:12px}
  .sticky-cta .txt b{font-size:12.5px}
  .sticky-cta .txt span{font-size:11px}
  .form-grid{gap:14px}
}

/* ---------- Small phone ---------- */
@media (max-width:380px){
  .wrap{padding-inline:15px}
  .brand{font-size:14.5px}
  .brand img{width:26px;height:26px}
  .hero h1{font-size:clamp(26px,8.4vw,32px);letter-spacing:-.036em}
  html[lang="ar"] .hero h1{font-size:clamp(25px,7.8vw,31px)}
  html[lang="hi"] .hero h1{font-size:clamp(24px,7.4vw,30px)}
  .hero .lead{font-size:14.8px;max-width:26ch}
  .hero-pill{font-size:10.6px;padding:5px 5px 5px 9px;gap:6px}
  .spec .k{font-size:9.6px;letter-spacing:.05em}
  .sticky-cta{padding-inline:12px;gap:9px}
  .sticky-cta .txt span{display:none}
}

/* ---------- Landscape phone: keep the hero from eating the screen ---------- */
@media (max-height:520px) and (orientation:landscape){
  .hero{padding-block:28px 24px}
  .hero h1{font-size:clamp(34px,5.4vw,48px)}
  .spec-rail{margin-top:28px}
  .sticky-cta{display:none}
  body{padding-bottom:0}
}

/* ---------- Coarse pointers: bigger hit areas ---------- */
@media (pointer:coarse){
  /* the language menu opens on tap via :focus-within — never hide it here */
  .pill,.cats button,.toggle-chips button,.seg button{padding-block:10px}
  .faq summary{padding-block:17px}
  .site-footer a{display:inline-block;padding-block:3px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}
@media print{
  .nav,.announce,.sticky-cta,.certs,.ticker,.cta-final,.bg-fx{display:none!important}
  body{background:#fff;color:#000}
}

/* ============================================================
   16. ELEVACIÓN — capa de refinamiento
   ------------------------------------------------------------
   Cinco cosas que separan "plantilla muy buena" de "encargo caro":
   óptica tipográfica real, luz direccional, grano, coreografía de
   entrada y tratamiento de cifras. Todo con lógica RTL y sin una
   sola dependencia nueva.
   ============================================================ */

:root{
  /* Curvas propias. La diferencia entre un ease genérico y uno con
     carácter es lo que hace que una interfaz "se sienta" cara. */
  --e-smooth:cubic-bezier(.33,1,.5,1);      /* entradas: sale rápido, frena largo */
  --e-spring:cubic-bezier(.34,1.42,.42,1);  /* micro-interacción con un punto de rebote */
  --e-exit:cubic-bezier(.4,0,.68,.06);      /* salidas: arranca lento, se va rápido */
  --t-fast:160ms; --t-base:280ms; --t-slow:560ms; --t-vslow:900ms;

  /* Sombras teñidas de marca en vez de negro puro: el negro apaga,
     el color tiñe y da sensación de material. */
  --sh-sm:0 1px 2px rgba(2,10,18,.28), 0 2px 8px rgba(3,70,86,.10);
  --sh-md:0 2px 4px rgba(2,10,18,.30), 0 8px 24px rgba(3,70,86,.14);
  --sh-lg:0 4px 8px rgba(2,10,18,.32), 0 18px 56px rgba(3,70,86,.20);
  --sh-glow:0 0 0 1px rgba(7,198,215,.14), 0 10px 44px rgba(7,198,215,.16);
}

/* ---------- 16.1 Óptica tipográfica -------------------------------------
   Inter trae un eje opsz (14→32) que la hoja no estaba usando: a tamaño
   grande el corte Display cierra aperturas y afina uniones. Y el tracking
   debe encoger según crece el cuerpo — a 72px el espaciado que funciona a
   16px parece un cartel de aeropuerto. */

html{font-optical-sizing:auto}

h1,h2,.display{
  font-variation-settings:'opsz' 32;
  font-feature-settings:'cv05' 1,'cv11' 1,'ss03' 1,'calt' 1;
}
h3,h4,h5{font-variation-settings:'opsz' 24}

/* Escala de tracking óptico */
h1{letter-spacing:-.044em;font-weight:660}
h2{letter-spacing:-.036em;font-weight:660}
h3{letter-spacing:-.026em}
h4,h5{letter-spacing:-.018em}
.lead,.hero .lead{letter-spacing:-.011em}
body{letter-spacing:-.005em}

/* Las mayúsculas pequeñas de los eyebrow piden lo contrario: aire. */
.eyebrow,.kicker,.cap,.spec .k,.lozenge .k{
  font-variation-settings:'opsz' 14;
  font-weight:620;
}

/* ---------- 16.2 Cifras ------------------------------------------------
   Media web de trading llena de números. Que todos tengan el mismo ancho
   y no bailen al animarse es de las cosas que más "producto serio" dan. */
.num,.stat b,.spec .v,.price,.price-main,table td,table th,time{
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:'tnum' 1,'lnum' 1,'ss03' 1;
}
.num,.spec .v{letter-spacing:-.022em}

/* ---------- 16.3 Grano -------------------------------------------------
   Una capa de ruido fijísima sobre todo. Rompe la planitud del degradado
   y es la firma visual más reconocible del trabajo caro. SVG en línea:
   cero peticiones, ~300 bytes. */
body::after{
  content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;
  opacity:.030;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}
[data-theme="light"] body::after{opacity:.022;mix-blend-mode:multiply}

/* ---------- 16.4 Luz direccional ---------------------------------------
   Las superficies planas con borde de 1px uniforme se leen como cajas.
   Un filo superior más claro simula luz cenital y las convierte en material. */
.card,.panel,.quote,.plan,.spec-card,.dt-wrap,.rules details,.pv-table,
.aff-tiers>*,.compare-card,.tabs,.lozenge{
  position:relative;
}
.card::before,.panel::before,.quote::before,.plan::before,
.rules details::before,.tabs::before{
  content:'';position:absolute;inset-inline:0;inset-block-start:0;height:1px;
  background:linear-gradient(90deg,
    transparent,
    color-mix(in srgb,var(--brand-200) 36%,transparent) 22%,
    color-mix(in srgb,var(--brand-100) 46%,transparent) 50%,
    color-mix(in srgb,var(--brand-200) 36%,transparent) 78%,
    transparent);
  opacity:.5;pointer-events:none;border-radius:inherit;
}
[data-theme="light"] .card::before,[data-theme="light"] .panel::before,
[data-theme="light"] .quote::before,[data-theme="light"] .plan::before{opacity:.34}

/* Elevación al pasar por encima: sube, se aclara el filo y tiñe la sombra. */
.card,.plan,.quote{transition:transform var(--t-base) var(--e-smooth),
                             box-shadow var(--t-base) var(--e-smooth),
                             border-color var(--t-base) var(--e-smooth)}
@media (hover:hover){
  .card:hover,.plan:hover,.quote:hover{
    transform:translateY(-3px);
    box-shadow:var(--sh-lg);
    border-color:color-mix(in srgb,var(--brand-500) 26%,var(--line));
  }
  .card:hover::before,.plan:hover::before,.quote:hover::before{opacity:.9}
}

/* ---------- 16.5 Atmósfera ---------------------------------------------
   El fondo plano es lo que más delata a una plantilla. Un degradado
   vertical larguísimo más una vignette dan profundidad sin ruido visual. */
/* La aurora del hero ya aporta la luz. Aquí solo una caída vertical casi
   imperceptible que evita que el resto de la página sea negro plano —
   si se añade un radial encima, las dos luces se pelean y salen manchas. */
body{
  background-image:linear-gradient(180deg,
    color-mix(in srgb,var(--brand-900) 7%,transparent) 0%,
    transparent 26%);
  background-attachment:fixed;background-repeat:no-repeat;
}
[data-theme="light"] body{
  background-image:linear-gradient(180deg,
    color-mix(in srgb,var(--brand-100) 34%,transparent) 0%, transparent 24%);
}

/* ---------- 16.6 Coreografía de entrada --------------------------------
   Los elementos no aparecen a la vez: entran escalonados. El retardo se
   pasa por --i desde el marcado y el navegador hace el resto. */
@media (prefers-reduced-motion:no-preference){
  .reveal{
    opacity:0;transform:translateY(18px) scale(.994);
    transition:opacity var(--t-slow) var(--e-smooth),
               transform var(--t-slow) var(--e-smooth);
    transition-delay:calc(var(--i,0) * 70ms);
    will-change:opacity,transform;
  }
  .reveal.in{opacity:1;transform:none;will-change:auto}

  /* Las cifras del hero entran con un punto de muelle: llaman la atención
     justo donde interesa. */
  .spec .v,.stat b{transition:transform var(--t-slow) var(--e-spring)}
}

/* ---------- 16.7 Detalle fino ------------------------------------------
   Nada de esto se "ve". Todo se nota. */

/* Selección en color de marca */
::selection{background:color-mix(in srgb,var(--brand-500) 30%,transparent);color:var(--ink)}

/* Anillo de foco de dos capas: visible sobre cualquier fondo */
:focus-visible{
  outline:2px solid var(--brand-400);outline-offset:3px;
  box-shadow:0 0 0 6px color-mix(in srgb,var(--brand-500) 16%,transparent);
  border-radius:6px;
}

/* Barra de desplazamiento a juego */
*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--brand-700) 60%,transparent) transparent}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:color-mix(in srgb,var(--brand-700) 52%,transparent);
  border-radius:99px;border:3px solid transparent;background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--brand-500) 62%,transparent);background-clip:content-box}

/* Subrayado que crece desde el origen de lectura — funciona igual en árabe */
.prose a,a.link-arrow,.foot-col a{
  text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size var(--t-base) var(--e-smooth);
}
[dir="rtl"] .prose a,[dir="rtl"] a.link-arrow,[dir="rtl"] .foot-col a{background-position:100% 100%}
@media (hover:hover){.prose a:hover,a.link-arrow:hover,.foot-col a:hover{background-size:100% 1px}}

/* La flecha de los enlaces avanza en la dirección de lectura */
a.link-arrow .go,a.link-arrow svg{transition:transform var(--t-base) var(--e-spring)}
@media (hover:hover){
  a.link-arrow:hover .go,a.link-arrow:hover svg{transform:translateX(4px)}
  [dir="rtl"] a.link-arrow:hover .go,[dir="rtl"] a.link-arrow:hover svg{transform:translateX(-4px)}
}

/* Botón primario: brillo que barre al pasar por encima */
.btn-primary{position:relative;overflow:hidden;isolation:isolate}
.btn-primary::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.26) 50%,transparent 62%);
  transform:translateX(-120%);
}
@media (hover:hover){
  .btn-primary:hover::after{transform:translateX(120%);transition:transform 720ms var(--e-smooth)}
}

/* Tipografía del árabe y el hindi: Inter no trae esos alfabetos, así que
   se encadenan las mejores fuentes de sistema en vez de caer en la de
   defecto del navegador, que es lo que pasaba hasta ahora. */
[lang="ar"],[lang="ar"] body,[dir="rtl"]{
  font-family:'Inter var',-apple-system,'SF Arabic','Geeza Pro','Segoe UI',
              'Noto Sans Arabic','Dubai','Tahoma',sans-serif;
}
[lang="hi"],[lang="hi"] body{
  font-family:'Inter var',-apple-system,'Nirmala UI','Noto Sans Devanagari',
              'Kohinoor Devanagari','Mangal',sans-serif;
}
[lang="ar"] h1,[lang="ar"] h2,[lang="hi"] h1,[lang="hi"] h2{letter-spacing:-.012em}

/* ============================================================
   17. COMPOSICIÓN — sistema editorial de capítulos (solo home)
   ------------------------------------------------------------
   El problema no era el estilo, era la forma: seis de las siete
   secciones de la home tenían exactamente la misma silueta —
   wrap, eyebrow centrado, h2, contenido. Esa repetición es lo que
   hace que una página se lea como generada en vez de diseñada.

   La solución no es desordenar, es imponer una espina editorial:
   cada sección es un capítulo numerado que se abre con un filo de
   luz, y la densidad alterna para que el scroll tenga respiración
   en lugar de ser una cinta continua.

   Todo con contadores CSS: ni una palabra de contenido cambia y
   funciona solo en los seis idiomas.
   ============================================================ */

.home{counter-reset:chapter}
.home > section{counter-increment:chapter;position:relative}

/* --- el filo que abre cada capítulo ---------------------------------
   Una hairline a todo el ancho que se apaga en los extremos. Marca
   dónde empieza un capítulo sin meter una caja. */
.home > section::before{
  content:'';position:absolute;inset-block-start:0;inset-inline:0;height:1px;
  background:linear-gradient(90deg,
    transparent,
    color-mix(in srgb,var(--brand-500) 22%,var(--line)) 18%,
    color-mix(in srgb,var(--brand-300) 30%,var(--line)) 50%,
    color-mix(in srgb,var(--brand-500) 22%,var(--line)) 82%,
    transparent);
  opacity:.52;
}

/* --- alternancia de densidad ----------------------------------------
   Los capítulos pares llevan un lavado casi imperceptible. Al scrollear
   el ojo percibe pliegos distintos en vez de una sola tira. */
.home > section:nth-of-type(even){
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--surface) 46%,transparent),
    transparent 62%);
}

/* --- la cabecera de capítulo ----------------------------------------
   El número en grande, apagado, con filetes a los lados. Es el recurso
   editorial de toda la vida y es lo que más "diseñado" se lee. */
.home .sec-head{position:relative}

.home .sec-head .eyebrow{
  display:flex;align-items:center;gap:14px;
  justify-content:flex-start;
}
.home .sec-head.center .eyebrow{justify-content:center}

/* El número del capítulo */
.home .sec-head .eyebrow::before{
  content:counter(chapter,decimal-leading-zero);
  display:block;width:auto;height:auto;background:none;opacity:1;
  font-size:12.5px;font-weight:700;letter-spacing:.14em;
  color:color-mix(in srgb,var(--brand-400) 78%,transparent);
  font-variant-numeric:tabular-nums;
  padding-inline-end:12px;
  border-inline-end:1px solid color-mix(in srgb,var(--brand-500) 26%,var(--line));
  flex-shrink:0;
}
/* La regla de .center estaba ocultando el ::before; ahora lleva número. */
.home .sec-head.center .eyebrow::before{display:block}

/* Filete que se aleja del texto hacia el margen */
.home .sec-head .eyebrow::after{
  content:'';height:1px;flex:1;max-width:120px;
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--brand-500) 34%,var(--line)), transparent);
}
[dir="rtl"] .home .sec-head .eyebrow::after{
  background:linear-gradient(270deg,
    color-mix(in srgb,var(--brand-500) 34%,var(--line)), transparent);
}

/* --- aire del titular ------------------------------------------------
   Un capítulo necesita separación entre su marca y su título. Esto es
   lo que diferencia una cabecera de una etiqueta pegada a un texto. */
.home .sec-head h2{margin-top:22px}
.home .sec-head .lead{margin-top:20px;max-width:62ch}
.home .sec-head.center .lead{margin-inline:auto}

/* --- ritmo vertical --------------------------------------------------
   Los capítulos impares respiran más. La alternancia de altura es lo
   que convierte el scroll en cadencia. */
.home > section{padding-block:clamp(76px,7.4vw,124px)}
.home > section:nth-of-type(odd){padding-block:clamp(88px,8.6vw,146px)}

/* --- cierre ----------------------------------------------------------
   La última sección no necesita filo inferior ni lavado: cierra contra
   el pie y debe fundirse, no cortarse. */
.home > section:last-of-type{background:none}

@media (max-width:680px){
  .home .sec-head .eyebrow::after{max-width:48px}
  .home > section,.home > section:nth-of-type(odd){padding-block:clamp(56px,11vw,82px)}
}

/* --- alternancia de alineación ---------------------------------------
   Un filete que cuelga de un solo lado en una cabecera centrada se lee
   como error. O va simétrico, o la cabecera se alinea al margen y el
   filete corre hacia fuera: eso ya es decisión, no descuido.

   Capítulos impares al margen, pares centrados. La alternancia es lo
   que rompe la cinta sin convertir la página en un desorden. */
.home > section:nth-of-type(odd) .sec-head.center{
  margin-inline:0;text-align:start;max-width:860px;
}
.home > section:nth-of-type(odd) .sec-head.center .eyebrow{justify-content:flex-start}
.home > section:nth-of-type(odd) .sec-head.center .lead{margin-inline:0}
.home > section:nth-of-type(odd) .sec-head.center .eyebrow::after{max-width:none;flex:1}

/* En las centradas el filete sobra: sin él la cabecera queda equilibrada. */
.home > section:nth-of-type(even) .sec-head.center .eyebrow::after{display:none}

/* Por debajo de tablet todo vuelve al margen: en pantalla estrecha la
   alternancia no se percibe y el texto centrado se lee peor. */
@media (max-width:860px){
  .home .sec-head.center{margin-inline:0;text-align:start}
  .home .sec-head.center .eyebrow{justify-content:flex-start}
  .home .sec-head.center .lead{margin-inline:0}
  .home .sec-head.center .eyebrow::after{display:none}
}

/* ============================================================
   18. CIERRE DE MARCA
   ------------------------------------------------------------
   Lo último antes del pie. El logotipo se dibuja solo, se enciende
   y detrás entra la declaración. No es decoración: es el momento en
   que la marca tiene que parecer grande.
   ============================================================ */

.finale{
  position:relative;overflow:hidden;isolation:isolate;
  min-height:min(96vh,880px);
  display:flex;align-items:center;justify-content:center;
  padding-block:clamp(90px,11vw,160px);
  text-align:center;
  border-block-start:1px solid var(--line);
}
.home > section.finale::before{display:none}   /* tiene su propio filo */

/* --- campo de luz: tres focos que respiran, más lentos que la aurora --- */
.finale-field{position:absolute;inset:-30% -10%;z-index:-2;pointer-events:none;filter:blur(90px);opacity:.75}
.finale-field i{position:absolute;display:block;border-radius:50%}
.finale-field i:nth-child(1){width:52vw;height:38vw;inset-block-start:4%;inset-inline-start:8%;
  background:radial-gradient(circle,color-mix(in srgb,var(--brand-500) 46%,transparent),transparent 65%)}
.finale-field i:nth-child(2){width:44vw;height:34vw;inset-block-end:2%;inset-inline-end:6%;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent-500) 34%,transparent),transparent 66%)}
.finale-field i:nth-child(3){width:38vw;height:28vw;inset-block-start:34%;inset-inline-start:36%;
  background:radial-gradient(circle,color-mix(in srgb,var(--brand-300) 36%,transparent),transparent 66%)}
@media (prefers-reduced-motion:no-preference){
  .finale-field i:nth-child(1){animation:fdrift 26s var(--e-smooth) infinite}
  .finale-field i:nth-child(2){animation:fdrift 32s var(--e-smooth) infinite reverse}
  .finale-field i:nth-child(3){animation:fdrift 38s var(--e-smooth) infinite}
}
@keyframes fdrift{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(5%,-6%,0) scale(1.14)}}

/* --- la escena del núcleo -------------------------------------------
   Aquí había un PNG de marca. Un logotipo quieto al final de la página es
   un sello, no un cierre: no pasa nada y no se gana nada. En su lugar va
   un lienzo donde los puntos del campo llegan de fuera, convergen en tres
   anillos y se enlazan —el mismo lenguaje del hero, llevado a su
   conclusión. La animación vive en JS; aquí sólo se reserva el espacio. */
.finale-stage{
  position:relative;margin-inline:auto;
  width:min(780px,100%);
  height:clamp(190px,24vw,300px);
}
.finale-stage canvas{display:block;width:100%;height:100%}

/* --- texto: entra después del logotipo, escalonado -------------------- */
.finale-h2{font-size:clamp(34px,5.4vw,68px);line-height:1.04;margin-top:clamp(30px,3.6vw,48px)}
.finale-sub{max-width:560px;margin-inline:auto;margin-top:20px}
.finale-cta{margin-top:clamp(26px,3vw,38px)}
.finale-rule{height:1px;width:min(420px,70%);margin:clamp(40px,5vw,70px) auto 0;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--brand-400) 60%,transparent),transparent)}
.finale-sig{margin-top:20px;font-size:12px;font-weight:700;
  letter-spacing:.42em;text-transform:uppercase;color:var(--muted)}
[dir="rtl"] .finale-sig{letter-spacing:.2em}

@media (prefers-reduced-motion:no-preference){
  .finale-h2,.finale-sub,.finale-cta,.finale-rule,.finale-sig{
    opacity:0;transform:translateY(16px);
    transition:opacity 760ms var(--e-smooth),transform 760ms var(--e-smooth);
  }
  .finale.lit .finale-h2  {opacity:1;transform:none;transition-delay:1250ms}
  .finale.lit .finale-sub {opacity:1;transform:none;transition-delay:1400ms}
  .finale.lit .finale-cta {opacity:1;transform:none;transition-delay:1540ms}
  .finale.lit .finale-rule{opacity:1;transform:none;transition-delay:1700ms}
  .finale.lit .finale-sig {opacity:1;transform:none;transition-delay:1820ms}
}

/* ============================================================
   19. HERO VIVO
   ------------------------------------------------------------
   Un lienzo detrás del hero con un campo de puntos que deriva y
   se conecta. Lee como profundidad de mercado sin ser un gráfico
   literal. Se pausa fuera de pantalla y respeta reduced-motion.
   ============================================================ */
.hero-canvas{
  position:absolute;inset:0;z-index:-1;width:100%;height:100%;
  pointer-events:none;opacity:.5;
  mask-image:radial-gradient(130% 92% at 50% 42%,#000 38%,transparent 78%);
  -webkit-mask-image:radial-gradient(130% 92% at 50% 42%,#000 38%,transparent 78%);
}
[data-theme="light"] .hero-canvas{opacity:.26}
@media (prefers-reduced-motion:reduce){.hero-canvas{display:none}}

/* ============================================================
   20. PANEL DE PRUEBA
   ------------------------------------------------------------
   Un solo objeto con tres registros —cifras, cinta de payouts,
   características— donde antes había tres franjas sueltas a todo
   el ancho. La consolidación es lo que hace que una marca parezca
   grande: pocos gestos seguros en vez de muchos pequeños.
   ============================================================ */

.proof{
  margin-top:clamp(40px,5vw,66px);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--surface) 72%,transparent),color-mix(in srgb,var(--bg-elev) 50%,transparent));
  box-shadow:var(--sh-md);
  overflow:hidden;position:relative;
}
/* Filo de luz superior: el mismo recurso que el resto de superficies. */
.proof::before{
  content:'';position:absolute;inset-inline:0;inset-block-start:0;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent,
    color-mix(in srgb,var(--brand-200) 42%,transparent) 26%,
    color-mix(in srgb,var(--brand-100) 54%,transparent) 50%,
    color-mix(in srgb,var(--brand-200) 42%,transparent) 74%,transparent);
  opacity:.62;pointer-events:none;
}

/* --- registro 1: las cifras ------------------------------------------- */
.proof-nums{
  display:grid;grid-template-columns:repeat(4,1fr);
  padding:clamp(24px,3vw,38px) 10px;
}
.proof-nums .spec{position:relative;padding:4px 16px;text-align:center;min-width:0}
.proof-nums .spec+.spec::before{
  content:'';position:absolute;inset-block:2px;inset-inline-start:0;width:1px;
  background:linear-gradient(180deg,transparent,var(--line-2) 24%,var(--line-2) 76%,transparent);
}

/* --- registro 2: la cinta de payouts ----------------------------------
   Era texto gris de 12px corriendo en una línea. El importe es el dato que
   convence, así que pasa a monoespaciada tabular y al verde de positivo;
   el nombre al color de tinta. Así se lee como un extracto, no como un aviso. */
.proof-tape{
  position:relative;overflow:hidden;contain:paint;
  border-block-start:1px solid var(--line);
  background:linear-gradient(180deg,color-mix(in srgb,var(--brand-900) 16%,transparent),transparent);
  padding-block:15px;
}
.proof-tape::before,.proof-tape::after{
  content:'';position:absolute;top:0;bottom:0;width:110px;z-index:3;pointer-events:none;
}
.proof-tape::before{inset-inline-start:0;background:linear-gradient(90deg,var(--surface),transparent)}
.proof-tape::after{inset-inline-end:0;background:linear-gradient(-90deg,var(--surface),transparent)}
.proof-tape .ticker-track{gap:0}
.proof-tape .tick,.proof-tape .ticker-item{
  padding-inline:26px;border-inline-end:1px solid var(--line);
}
/* Solo el importe va en monoespaciada y en verde. El nombre se queda en la
   tipografía de texto y en color de tinta: si los dos van igual, el ojo no
   sabe cuál es el dato y la cinta deja de convencer. */
.proof-tape .amt{
  font-family:var(--ff-mono);font-variant-numeric:tabular-nums;
  color:var(--pos);font-weight:700;letter-spacing:-.012em;font-size:13.4px;
}
.proof-tape .ticker-item b{color:var(--ink);font-weight:600}
.proof-tape .ticker-item{color:var(--muted);font-size:12.6px}
.proof-tape .ticker-item .sep{color:color-mix(in srgb,var(--brand-500) 40%,transparent)}

/* --- registro 3: las características ----------------------------------- */
.proof-feats{
  display:flex;align-items:center;justify-content:center;gap:12px 38px;flex-wrap:wrap;
  padding:16px 22px;
  border-block-start:1px solid var(--line);
  background:color-mix(in srgb,var(--bg) 42%,transparent);
}
.proof-feats span{
  font-size:12.3px;color:var(--muted);display:inline-flex;align-items:center;gap:8px;font-weight:540;
}
.proof-feats svg{color:var(--brand);flex-shrink:0}

@media (max-width:860px){
  .proof-nums{grid-template-columns:repeat(2,1fr);gap:4px 0;padding-block:24px}
  .proof-nums .spec:nth-child(3)::before{display:none}
  .proof-nums .spec:nth-child(-n+2){padding-bottom:20px}
  .proof-nums .spec:nth-child(n+3){padding-top:20px;border-top:1px solid var(--line)}
}
@media (max-width:560px){
  .proof-feats{gap:10px 22px;padding:14px 16px}
  .proof-feats span{font-size:11.6px}
}

/* ============================================================
   21. BARRA DE ANUNCIO — volumen bajo
   ------------------------------------------------------------
   Un cupón a pantalla completa encima del logotipo es señal de
   tienda de descuento, no de marca seria. Se mantiene porque hace
   vender, pero deja de gritar: sin degradado de color, tipografía
   menor, y el código como pieza discreta en vez de etiqueta
   troquelada.
   ============================================================ */
.announce{
  background:var(--bg);
  border-bottom:1px solid var(--line);
  color:var(--muted);font-size:11.8px;font-weight:500;
  padding:8px 16px;letter-spacing:.004em;
}
.announce .sec{color:var(--dim,var(--muted));opacity:.8}
.announce b,.announce strong{color:var(--body);font-weight:600}
.announce .code{
  font-family:var(--ff-mono);font-size:11px;font-weight:650;letter-spacing:.06em;
  color:var(--brand);background:transparent;
  border:1px solid color-mix(in srgb,var(--brand-500) 34%,var(--line));
  border-radius:3px;padding:2px 8px;cursor:pointer;
  transition:border-color var(--t-fast) var(--e-smooth),background var(--t-fast) var(--e-smooth);
}
@media (hover:hover){.announce .code:hover{
  border-color:var(--brand);background:color-mix(in srgb,var(--brand-500) 10%,transparent);}}

/* ============================================================
   22. CORRECCIONES
   ============================================================ */

/* --- 22.1 El enlace de salto robaba 50px arriba ----------------------
   .skip-link se declara antes que .btn y lleva las clases de botón en el
   marcado, así que .btn —misma especificidad, más abajo en la hoja— le
   ganaba la altura y lo devolvía al flujo. Resultado: una franja vacía de
   50px sobre la barra de anuncio, en todas las páginas.
   Se sube la especificidad para que gane el ocultamiento, y el botón solo
   vuelve a existir cuando recibe el foco por teclado. */
a.skip-link:not(:focus){
  position:absolute !important;
  width:1px;height:1px;padding:0;margin:-1px;border:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}
a.skip-link:focus{
  position:fixed;top:12px;inset-inline-start:12px;z-index:999;
  width:auto;height:var(--h,50px);clip-path:none;padding:12px 20px;
}

/* --- 22.2 Navegación en tres zonas -----------------------------------
   Los enlaces se apelotonaban contra el logotipo y dejaban medio canal
   vacío hasta los controles de la derecha. Con el logotipo a un lado, los
   enlaces al centro y los controles al otro, la barra queda equilibrada —
   que es lo que distingue una cabecera cuidada de una por defecto. */
@media (min-width:1081px){
  .nav-bar{display:grid;grid-template-columns:1fr auto 1fr;gap:18px}
  .nav-bar>.brand{justify-self:start}
  .nav-links{margin-inline-start:0;justify-self:center}
  .nav-bar>.nav-right,.nav-bar>:last-child{justify-self:end}
}

/* --- 22.3 Precios: una composición centrada ---------------------------
   Las tarjetas de precio son cinco columnas simétricas, así que la cabecera
   y los controles alineados al margen rompían el eje. Esta sección se salta
   la alternancia de capítulos y va centrada entera. */
.home > section#pricing .sec-head.center{
  margin-inline:auto;text-align:center;max-width:760px;
}
.home > section#pricing .sec-head.center .eyebrow{justify-content:center}
.home > section#pricing .sec-head.center .eyebrow::after{display:none}
.home > section#pricing .sec-head.center .lead{margin-inline:auto}

/* Las pestañas de plan viven dentro de la cabecera: se centran y se separan. */
section#pricing .tabs{
  display:flex;justify-content:center;flex-wrap:wrap;
  margin-inline:auto;width:fit-content;max-width:100%;
}
section#pricing .price-controls{justify-content:center;width:100%}

@media (max-width:860px){
  .home > section#pricing .sec-head.center{text-align:center}
  section#pricing .tabs{width:100%}
  section#pricing .tabs button{flex:1 1 auto;min-width:0}
}

/* ============================================================
   23. MODO DÍA: CAMPO Y CIERRE
   ------------------------------------------------------------
   Dos cosas estaban pensadas sólo para fondo oscuro:

   1) El campo de puntos del hero se pintaba en cian claro sobre
      blanco —invisible— y además el lienzo bajaba a opacidad .26.
      Los colores ahora salen de variables por tema: en claro son
      teal profundo sobre blanco, que es el mismo gesto leído al
      derecho.

   2) El cierre de marca sumaba tres focos difuminados, un
      drop-shadow fuerte y una floración radial. Sobre oscuro eso
      es luz; sobre blanco es una nube sucia alrededor del
      logotipo. En claro se baja el campo, la sombra pasa a ser
      una proyección sobria y la floración desaparece: la marca
      se sostiene por contraste, no por resplandor.
   ============================================================ */

/* --- 23.1 Tokens del campo de puntos --- */
:root,[data-theme="dark"]{
  --fx-link:7,198,215;            /* trazo entre puntos (RGB; la alfa la pone el canvas) */
  --fx-dot:rgba(140,233,242,.5);  /* el punto */
  --fx-a:1;                       /* multiplicador de alfa del trazo */
  --fx-core:.3;                   /* resplandor del núcleo del cierre */
}
/* Sobre blanco una línea fina pierde muchísimo contraste: no basta con
   oscurecer el color, hay que subir también la alfa. De ahí el
   multiplicador, que el canvas aplica al trazo y al resplandor. */
[data-theme="light"]{
  --fx-link:4,104,134;
  --fx-dot:rgba(3,84,110,.9);
  --fx-a:2.2;
  /* Sobre blanco un "resplandor" oscuro es una mancha, no luz: el núcleo
     se queda en un tinte mínimo y la malla hace todo el trabajo. */
  --fx-core:.05;
}
[data-theme="light"] .hero-canvas{opacity:.72}

/* --- 23.2 El cierre en claro --- */
[data-theme="light"] .finale-field{opacity:.3;filter:blur(110px)}
[data-theme="light"] .finale-rule{
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--brand-500) 48%,transparent),transparent);
}

/* ============================================================
   24. MODAL DE CAMPAÑA
   ------------------------------------------------------------
   El creativo de Halloween, reconstruido con el sistema del sitio
   en vez de incrustado como imagen. Así el texto es texto —se
   traduce a los seis idiomas, se lee en voz alta, se selecciona y
   se copia—, se adapta a cualquier pantalla y pesa kilobytes en
   lugar de megas.

   Los dos acentos de temporada (ámbar y cian) viven sólo aquí: no
   tocan los tokens de marca, así que cuando la campaña termine se
   borra esta sección entera sin dejar rastro.
   ============================================================ */

.promo-scrim{
  position:fixed;inset:0;z-index:300;
  display:grid;place-items:center;padding:20px;
  background:rgba(2,5,9,.78);
  -webkit-backdrop-filter:blur(7px) saturate(.9);backdrop-filter:blur(7px) saturate(.9);
  opacity:0;transition:opacity 240ms var(--e-smooth);
  overflow-y:auto;overscroll-behavior:contain;
}
.promo-scrim.on{opacity:1}
.promo-scrim[hidden]{display:none}

.promo-win{
  --warm:#ff9d4d; --warm-2:#ff7a18; --cool:#5fe3f2;
  position:relative;width:min(560px,100%);
  margin:auto;padding:30px clamp(20px,4.4vw,40px) 22px;
  border:1px solid #1d2636;border-radius:22px;
  background:
    radial-gradient(120% 70% at 50% -8%,rgba(7,198,215,.16),transparent 58%),
    linear-gradient(180deg,#080c13,#05080d 62%);
  box-shadow:0 40px 120px rgba(0,0,0,.72),0 0 0 1px rgba(255,255,255,.03) inset;
  transform:translateY(14px) scale(.985);
  transition:transform 320ms var(--e-spring);
  text-align:center;
}
.promo-scrim.on .promo-win{transform:none}

/* el marco de esquinas del creativo, sin imagen */
.promo-win::before{
  content:'';position:absolute;inset:11px;pointer-events:none;border-radius:14px;
  background:
    linear-gradient(var(--line-2),var(--line-2)) 0 0/1px 26px no-repeat,
    linear-gradient(var(--line-2),var(--line-2)) 0 0/26px 1px no-repeat,
    linear-gradient(var(--line-2),var(--line-2)) 100% 0/1px 26px no-repeat,
    linear-gradient(var(--line-2),var(--line-2)) 100% 0/26px 1px no-repeat,
    linear-gradient(var(--line-2),var(--line-2)) 0 100%/1px 26px no-repeat,
    linear-gradient(var(--line-2),var(--line-2)) 0 100%/26px 1px no-repeat,
    linear-gradient(var(--line-2),var(--line-2)) 100% 100%/1px 26px no-repeat,
    linear-gradient(var(--line-2),var(--line-2)) 100% 100%/26px 1px no-repeat;
  opacity:.75;
}

.promo-x{
  position:absolute;inset-block-start:12px;inset-inline-end:12px;z-index:2;
  width:34px;height:34px;display:grid;place-items:center;
  border:1px solid var(--line-2);border-radius:50%;
  background:rgba(12,18,29,.8);color:var(--muted);cursor:pointer;
  transition:color 160ms,border-color 160ms,background 160ms;
}
.promo-x:hover{color:#fff;border-color:var(--line-3);background:var(--surface-2)}

.promo-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-inline:auto;max-width:430px;
}
.promo-eyebrow{
  font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;
}
.promo-brand{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:14px}
.promo-brand img{display:block}

.promo-t{
  margin-block:22px 4px;font-size:clamp(34px,8vw,54px);line-height:1.02;
  font-weight:600;letter-spacing:-.03em;font-variation-settings:'opsz' 32;
  background:linear-gradient(180deg,#fff 34%,#9fb0c4);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-wrap:balance;
}
.promo-t em{font-style:italic;font-weight:400;margin-inline:.1em}
.promo-win:focus{outline:none}

.promo-offers{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  margin-block:22px 20px;
}
.po{
  position:relative;padding:18px 10px 16px;border-radius:14px;
  border:1px solid var(--line);background:rgba(10,15,24,.6);
}
.po-warm{background:radial-gradient(100% 76% at 50% 40%,rgba(255,122,24,.14),transparent 70%),rgba(10,15,24,.6)}
.po-cool{background:radial-gradient(100% 76% at 50% 40%,rgba(7,198,215,.14),transparent 70%),rgba(10,15,24,.6)}
.po + .po{border-inline-start:1px solid var(--line)}

.po-tag{
  display:block;font-size:9px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;margin-block-end:10px;
  /* "1-step y 2-step" mezcla latino y árabe: con plaintext la dirección la
     marca el primer carácter fuerte de cada cadena, que es lo que evita que
     en árabe salga "step-2 و step-1" con el orden dado la vuelta. */
  unicode-bidi:plaintext;
}
.po-warm .po-tag{color:var(--warm)}
.po-cool .po-tag{color:var(--cool)}

.po-pct{
  display:block;font-size:clamp(42px,11vw,62px);line-height:1;font-weight:800;
  letter-spacing:-.04em;font-variation-settings:'opsz' 32;
}
.po-pct span{font-size:.62em;margin-inline-start:.02em}
.po-warm .po-pct{color:var(--warm);text-shadow:0 0 38px rgba(255,122,24,.45)}
.po-cool .po-pct{color:var(--cool);text-shadow:0 0 38px rgba(7,198,215,.45)}

.po-sub{
  display:block;margin-block:10px 14px;font-size:13px;color:var(--muted);
  font-style:italic;text-wrap:balance;unicode-bidi:plaintext;
}

.po-code{
  display:inline-flex;flex-direction:column;align-items:center;gap:2px;
  min-width:116px;padding:9px 16px;cursor:pointer;
  border-radius:10px;border:1px dashed var(--line-3);
  background:rgba(5,8,13,.55);color:#fff;
  transition:border-color 160ms,background 160ms,transform 160ms var(--e-spring);
}
.po-code:hover{transform:translateY(-1px)}
.po-warm .po-code:hover{border-color:var(--warm);background:rgba(255,122,24,.1)}
.po-cool .po-code:hover{border-color:var(--cool);background:rgba(7,198,215,.1)}
.po-code-hint{font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.po-code-v{font-size:16px;font-weight:800;letter-spacing:.16em}

.promo-foot{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  text-align:start;
}
.promo-tagline{margin:0;font-size:17px;font-style:italic;line-height:1.3}
.promo-tagline span{color:var(--warm)}

.promo-cta{
  flex:0 0 auto;padding:13px 22px;border-radius:11px;text-decoration:none;
  font-weight:700;font-size:15px;color:#190a00;
  background:linear-gradient(180deg,var(--warm),var(--warm-2));
  box-shadow:0 10px 30px rgba(255,122,24,.32);
  transition:transform 180ms var(--e-spring),box-shadow 180ms;
}
.promo-cta:hover{transform:translateY(-2px);box-shadow:0 14px 38px rgba(255,122,24,.45)}

.promo-legal{
  margin-block-start:18px;font-size:10px;line-height:1.5;color:var(--muted);
  opacity:.72;text-wrap:pretty;
}

/* --- la barra superior durante la campaña --- */
.announce-promo{
  background:linear-gradient(90deg,rgba(255,122,24,.16),rgba(7,198,215,.14));
  border-block-end:1px solid rgba(255,157,77,.2);
}
.announce-promo .code{border-color:rgba(255,157,77,.5);color:#ffd2ab}
/* Sobre fondo claro el ámbar pálido casi no se lee: el código del cupón es
   justo lo que el cliente tiene que poder copiar de un vistazo. */
[data-theme="light"] .announce-promo{
  background:linear-gradient(90deg,rgba(255,122,24,.1),rgba(7,198,215,.08));
  border-block-end-color:rgba(255,122,24,.24);
}
[data-theme="light"] .announce-promo .code{border-color:rgba(199,86,0,.45);color:#8a3d00}

@media (max-width:520px){
  .promo-win{padding-inline:16px;border-radius:18px}
  /* El nombre de marca es un nodo de texto suelto dentro de .promo-brand,
     así que no se puede ocultar por separado: lo que sobra en móvil son el
     antetítulo y las fechas (que ya están en el pie). Queda la marca sola,
     con hueco reservado para que nunca se meta debajo del aspa. */
  .promo-head{max-width:none;justify-content:center;padding-inline-end:34px}
  .promo-eyebrow{display:none}
  .promo-offers{gap:8px}
  .po{padding-inline:6px}
  .promo-foot{flex-direction:column;align-items:stretch;text-align:center;gap:14px}
  .promo-cta{text-align:center}
}

@media (prefers-reduced-motion:reduce){
  .promo-scrim,.promo-win,.po-code,.promo-cta{transition:none}
  .promo-win{transform:none}
}