/* ============================================================
   Vionix — main stylesheet (design system)
   Cinematic video streaming. DARK-first. Neon pink/violet. 2026.
   theme-dark.css is the primary theme; tokens here are the base.
   ============================================================ */

/* ---------- @font-face: Inter (with system fallback) ---------- */
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("/static/fonts/inter-v12.woff2") format("woff2");
}

/* ---------- Design tokens (DARK is the default theme) ---------- */
:root{
  /* brand / neon accent */
  --brand-500:#ff3d7f;
  --brand-600:#e62e6c;
  --brand-700:#c41f56;
  --accent-500:#7b5bff;
  --accent-600:#6344e8;
  --grad-brand:linear-gradient(135deg,#ff3d7f 0%,#7b5bff 100%);
  --grad-brand-soft:linear-gradient(135deg,#2a1322 0%,#1a1530 100%);

  /* neutrals (dark cinematic base) */
  --bg:#07080e;
  --bg-elevated:#0d0f18;
  --surface:#111321;
  --surface-muted:#171a2b;
  --surface-hover:#1e2236;
  --border:#222641;
  --border-strong:#333a5c;
  --text:#eef0f8;
  --text-muted:#a3a9c2;
  --text-faint:#6d7393;
  --text-invert:#07080e;

  /* status */
  --success:#2bd47a;
  --warning:#f0b429;
  --danger:#ff5a52;
  --danger-bg:#2a1416;
  --danger-border:#5a2a2c;
  --info:#7b5bff;

  /* radius */
  --r-xs:6px;
  --r-sm:9px;
  --r-md:13px;
  --r-lg:18px;
  --r-xl:26px;
  --r-pill:999px;

  /* spacing scale */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;--sp-12:48px;--sp-16:64px;--sp-20:80px;--sp-24:96px;

  /* shadows (deep, for dark) */
  --shadow-xs:0 1px 2px rgba(0,0,0,.5);
  --shadow-sm:0 2px 8px rgba(0,0,0,.55);
  --shadow-md:0 10px 30px rgba(0,0,0,.6);
  --shadow-lg:0 22px 60px rgba(0,0,0,.72);
  --ring:0 0 0 4px rgba(123,91,255,.32);
  --glow:0 0 40px rgba(255,61,127,.35);

  /* typography */
  --font:"Inter","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --fz-xs:12px;--fz-sm:13px;--fz-base:15px;--fz-md:16px;--fz-lg:18px;--fz-xl:22px;--fz-2xl:28px;--fz-3xl:36px;--fz-4xl:46px;--fz-5xl:60px;

  --header-h:68px;
  --maxw:1200px;
  --transition:.18s cubic-bezier(.4,0,.2,1);
}

/* ---------- base ---------- */
html{scroll-behavior:smooth}
body{
  font-family:var(--font);
  font-size:var(--fz-base);
  line-height:1.6;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:24px}
a{color:var(--accent-500);transition:color var(--transition)}
a:hover{color:var(--brand-500)}
::selection{background:rgba(255,61,127,.3)}

/* headings & text helpers */
h1,h2,h3,h4{line-height:1.2;letter-spacing:-.02em;color:var(--text);font-weight:800}
h1{font-size:var(--fz-4xl)}
h2{font-size:var(--fz-3xl)}
h3{font-size:var(--fz-xl)}
h4{font-size:var(--fz-lg)}
.lead{font-size:var(--fz-lg);color:var(--text-muted);line-height:1.65}
.muted{color:var(--text-muted)}
.faint{color:var(--text-faint)}
.eyebrow{display:inline-block;font-size:var(--fz-xs);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-500)}
.text-gradient{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.section{padding-block:var(--sp-20)}
.section-sm{padding-block:var(--sp-12)}
.section-head{max-width:700px;margin-inline:auto;text-align:center;margin-bottom:var(--sp-12)}
.section-head .lead{margin-top:var(--sp-3)}

/* ---------- header / nav ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  height:var(--header-h);
  background:rgba(8,9,16,.72);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--border);
}
.site-header__inner{height:var(--header-h);display:flex;align-items:center;gap:var(--sp-6)}
.brand{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto}
.brand img{height:30px;width:auto;display:block}
.nav{display:flex;align-items:center;gap:2px;margin-left:8px}
.nav a{
  display:inline-flex;align-items:center;padding:8px 13px;border-radius:var(--r-sm);
  color:var(--text-muted);font-weight:600;font-size:var(--fz-sm);
  transition:background var(--transition),color var(--transition);
}
.nav a:hover{background:var(--surface-hover);color:var(--text)}
.nav a.is-active{color:var(--text);background:var(--surface-muted)}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:var(--sp-3)}

/* language + theme toggles */
.lang-switch{display:inline-flex;border:1px solid var(--border);border-radius:var(--r-pill);overflow:hidden;background:var(--surface)}
.lang-switch button{padding:5px 11px;font-size:var(--fz-xs);font-weight:800;color:var(--text-muted);background:transparent;border:0}
.lang-switch button.is-active{background:var(--grad-brand);color:#fff}
.theme-toggle{
  width:36px;height:36px;display:inline-grid;place-items:center;border-radius:var(--r-pill);
  border:1px solid var(--border);background:var(--surface);color:var(--text-muted);font-size:16px;
  transition:background var(--transition),color var(--transition),border-color var(--transition);
}
.theme-toggle:hover{background:var(--surface-hover);color:var(--text)}
.nav-burger{display:none;width:38px;height:38px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface);color:var(--text);font-size:18px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font);font-weight:700;font-size:var(--fz-sm);line-height:1;
  padding:11px 18px;border-radius:var(--r-sm);border:1px solid transparent;
  cursor:pointer;white-space:nowrap;text-decoration:none;
  transition:transform var(--transition),box-shadow var(--transition),background var(--transition),color var(--transition),border-color var(--transition);
}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{box-shadow:var(--ring)}
.btn--primary{background:var(--grad-brand);color:#fff;box-shadow:var(--shadow-sm)}
.btn--primary:hover{color:#fff;box-shadow:var(--shadow-md),var(--glow);filter:brightness(1.05)}
.btn--ghost{background:var(--surface);color:var(--text);border-color:var(--border-strong)}
.btn--ghost:hover{background:var(--surface-hover);color:var(--text)}
.btn--subtle{background:var(--surface-muted);color:var(--text)}
.btn--subtle:hover{background:var(--surface-hover)}
.btn--link{background:transparent;color:var(--accent-500);padding-inline:6px}
.btn--link:hover{color:var(--brand-500);text-decoration:underline}
.btn--lg{padding:14px 26px;font-size:var(--fz-md);border-radius:var(--r-md)}
.btn--sm{padding:8px 13px;font-size:var(--fz-xs)}
.btn--block{width:100%}
.btn--play::before{content:"▶";font-size:11px;margin-right:2px}
.btn[disabled],.btn.is-loading{opacity:.7;cursor:not-allowed;pointer-events:none}

/* ---------- badges / pills ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:var(--fz-xs);font-weight:800;padding:4px 10px;border-radius:var(--r-pill);background:var(--surface-muted);color:var(--text-muted)}
.badge--brand{background:rgba(255,61,127,.16);color:var(--brand-500)}
.badge--accent{background:rgba(123,91,255,.16);color:var(--accent-500)}
.badge--success{background:rgba(43,212,122,.14);color:var(--success)}
.badge--warning{background:rgba(240,180,41,.16);color:var(--warning)}
.badge--hd{background:rgba(123,91,255,.16);color:var(--accent-500);letter-spacing:.04em}
.badge--dot::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}

/* ---------- cards ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-6);box-shadow:var(--shadow-xs)}
.card--hover{transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition)}
.card--hover:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--border-strong)}
.card--pad-lg{padding:var(--sp-8)}
.card__icon{width:46px;height:46px;border-radius:var(--r-md);display:grid;place-items:center;font-size:22px;background:var(--grad-brand-soft);color:var(--brand-500);margin-bottom:var(--sp-4)}
.card__title{font-size:var(--fz-lg);font-weight:700;margin-bottom:6px}
.card__text{color:var(--text-muted);font-size:var(--fz-base)}

/* ---------- grid helpers ---------- */
.grid{display:grid;gap:var(--sp-6)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-auto{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

/* ---------- hero (cinematic) ---------- */
.hero{position:relative;padding-block:var(--sp-20) var(--sp-16);overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(1000px 480px at 80% -10%,rgba(255,61,127,.22),transparent 60%),
    radial-gradient(820px 420px at 6% 8%,rgba(123,91,255,.22),transparent 60%);
}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--sp-12);align-items:center}
.hero h1{font-size:clamp(34px,5vw,var(--fz-5xl));line-height:1.05}
.hero .lead{margin-top:var(--sp-5);max-width:540px}
.hero__cta{display:flex;gap:var(--sp-3);margin-top:var(--sp-8);flex-wrap:wrap}
.hero__note{margin-top:var(--sp-4);font-size:var(--fz-sm);color:var(--text-faint);display:flex;align-items:center;gap:8px}

/* cinematic player mock built with CSS */
.hero__visual{position:relative}
.player-mock{
  border-radius:var(--r-xl);background:var(--surface);border:1px solid var(--border);
  box-shadow:var(--shadow-lg);overflow:hidden;
}
.player-mock__screen{
  position:relative;aspect-ratio:16/9;
  background:
    radial-gradient(420px 220px at 30% 20%,rgba(123,91,255,.45),transparent 60%),
    radial-gradient(420px 220px at 80% 80%,rgba(255,61,127,.42),transparent 60%),
    linear-gradient(160deg,#1a1430,#0a0b14);
  display:grid;place-items:center;
}
.player-mock__play{
  width:72px;height:72px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.12);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.28);
  color:#fff;font-size:26px;box-shadow:var(--glow);
}
.player-mock__play::after{content:"▶";margin-left:4px}
.player-mock__bar{position:absolute;left:16px;right:16px;bottom:16px;height:6px;border-radius:var(--r-pill);background:rgba(255,255,255,.18);overflow:hidden}
.player-mock__bar::before{content:"";position:absolute;inset:0;width:38%;background:var(--grad-brand);border-radius:var(--r-pill)}
.player-mock__meta{display:flex;align-items:center;gap:10px;padding:14px 16px;border-top:1px solid var(--border);background:var(--surface-muted);font-size:var(--fz-sm)}
.player-mock__meta .dot{width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 0 4px rgba(43,212,122,.18)}
.float-chip{position:absolute;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-md);border-radius:var(--r-md);padding:10px 14px;font-size:var(--fz-sm);font-weight:700;display:flex;align-items:center;gap:9px;color:var(--text)}
.float-chip i{width:9px;height:9px;border-radius:50%;background:var(--brand-500);box-shadow:0 0 0 4px rgba(255,61,127,.18)}
.float-chip--tl{top:-18px;left:-22px}
.float-chip--br{bottom:-16px;right:-18px}

/* ---------- live watch player (watch.html, driven by app.js) ---------- */
.player{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow-lg);background:#000}
.player__screen{
  position:relative;aspect-ratio:16/9;display:grid;place-items:center;
  background:
    radial-gradient(520px 280px at 28% 18%,rgba(123,91,255,.40),transparent 60%),
    radial-gradient(520px 280px at 80% 82%,rgba(255,61,127,.38),transparent 60%),
    linear-gradient(160deg,#14112a,#06070d);
}
.player__play{
  width:84px;height:84px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:rgba(255,255,255,.14);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.30);
  color:#fff;font-size:30px;box-shadow:var(--glow);transition:transform var(--transition)}
.player__play::after{content:"▶";margin-left:5px}
.player__play:hover{transform:scale(1.06)}
/* buffering: a sweeping spinner ring over the screen */
.player__status{position:absolute;bottom:18px;left:18px;display:inline-flex;align-items:center;gap:9px;font-size:var(--fz-sm);font-weight:600;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.7)}
.player__status::before{content:"";width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .7s linear infinite}
.player.is-buffering .player__screen{filter:saturate(.7) brightness(.8)}
/* error overlay */
.player-error{position:absolute;inset:0;display:grid;place-items:center;background:rgba(6,7,13,.86);backdrop-filter:blur(4px);padding:24px;z-index:2}
.player-error__inner{max-width:460px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.player-error__icon{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--danger);color:#fff;font-size:24px;font-weight:800}
.player-error__title{font-size:var(--fz-xl);font-weight:800;color:#fff}
.player-error__text{font-size:var(--fz-base);color:var(--text-muted);line-height:1.55}

/* ---------- poster cards / catalog rows ---------- */
.poster{
  position:relative;aspect-ratio:2/3;border-radius:var(--r-md);overflow:hidden;
  border:1px solid var(--border);box-shadow:var(--shadow-xs);
  transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);
}
.poster::before{content:"";position:absolute;inset:0;background:linear-gradient(160deg,var(--p-a,#2a1430),var(--p-b,#101427))}
.poster::after{content:"";position:absolute;inset:0;background:radial-gradient(220px 120px at 60% 15%,rgba(255,255,255,.10),transparent 60%)}
.poster:hover{transform:translateY(-4px) scale(1.02);box-shadow:var(--shadow-md);border-color:var(--border-strong)}
.poster__label{position:absolute;left:10px;right:10px;bottom:10px;z-index:1}
.poster__title{font-weight:800;font-size:var(--fz-sm);color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.poster__meta{font-size:var(--fz-xs);color:rgba(255,255,255,.78);margin-top:2px}
.poster__top{position:absolute;top:8px;left:8px;z-index:1}
.poster-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--sp-4)}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,1fr);gap:var(--sp-4);overflow-x:auto;padding-bottom:var(--sp-3);scroll-snap-type:x mandatory}
.rail .poster{scroll-snap-align:start}
.rail::-webkit-scrollbar{height:8px}
.rail::-webkit-scrollbar-thumb{background:var(--surface-hover);border-radius:var(--r-pill)}
.row-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:var(--sp-4)}
.row-head h3{font-size:var(--fz-xl)}
.row-head a{font-size:var(--fz-sm);font-weight:700;color:var(--accent-500)}

/* ---------- logo strip ---------- */
.logo-strip{display:flex;align-items:center;justify-content:center;gap:var(--sp-10);flex-wrap:wrap;opacity:.6}
.logo-strip span{font-weight:800;font-size:var(--fz-lg);color:var(--text-faint);letter-spacing:.02em}

/* ---------- steps / how it works ---------- */
.step{position:relative;padding-left:var(--sp-12)}
.step__num{position:absolute;left:0;top:0;width:38px;height:38px;border-radius:var(--r-pill);display:grid;place-items:center;font-weight:800;background:var(--grad-brand);color:#fff;box-shadow:var(--shadow-sm)}
.step h3{font-size:var(--fz-lg);margin-bottom:6px}

/* ---------- pricing table ---------- */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6);align-items:stretch}
.price-card{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-8);box-shadow:var(--shadow-xs)}
.price-card--featured{border-color:transparent;box-shadow:var(--shadow-lg);outline:2px solid var(--brand-500)}
.price-card__tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--grad-brand);color:#fff;font-size:var(--fz-xs);font-weight:800;padding:5px 14px;border-radius:var(--r-pill)}
.price-card__name{font-size:var(--fz-lg);font-weight:700}
.price-card__price{display:flex;align-items:flex-end;gap:6px;margin-block:var(--sp-4)}
.price-card__amount{font-size:var(--fz-4xl);font-weight:800;letter-spacing:-.03em}
.price-card__per{color:var(--text-faint);font-size:var(--fz-sm);padding-bottom:9px}
.price-features{list-style:none;padding:0;margin:var(--sp-5) 0;display:flex;flex-direction:column;gap:var(--sp-3);flex:1}
.price-features li{display:flex;align-items:flex-start;gap:10px;font-size:var(--fz-base);color:var(--text-muted)}
.price-features li::before{content:"";flex:0 0 auto;margin-top:3px;width:18px;height:18px;border-radius:50%;background:rgba(43,212,122,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232bd47a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat}
.price-features li.is-off{color:var(--text-faint)}
.price-features li.is-off::before{background:var(--surface-muted) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d7393' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='6' y1='12' x2='18' y2='12'/%3E%3C/svg%3E") center/11px no-repeat}

/* ---------- forms ---------- */
.form{display:flex;flex-direction:column;gap:var(--sp-4)}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:var(--fz-sm);font-weight:600;color:var(--text)}
.field .hint{font-size:var(--fz-xs);color:var(--text-faint)}
.input,.textarea,.select{
  width:100%;font-family:var(--font);font-size:var(--fz-base);color:var(--text);
  background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:var(--r-sm);
  padding:11px 13px;transition:border-color var(--transition),box-shadow var(--transition),background var(--transition);
}
.input::placeholder,.textarea::placeholder{color:var(--text-faint)}
.input:focus,.textarea:focus,.select:focus{outline:none;border-color:var(--accent-500);box-shadow:var(--ring)}
.input[aria-invalid="true"]{border-color:var(--danger);box-shadow:0 0 0 4px rgba(255,90,82,.18)}
.textarea{min-height:120px;resize:vertical}
.input-group{display:flex;gap:var(--sp-3)}

/* OTP / code inputs */
.otp{display:flex;gap:10px;justify-content:center}
.otp input{width:46px;height:54px;text-align:center;font-size:var(--fz-xl);font-weight:800;border:1px solid var(--border-strong);border-radius:var(--r-md);background:var(--bg-elevated);color:var(--text)}
.otp input:focus{outline:none;border-color:var(--accent-500);box-shadow:var(--ring)}

/* inline form alert (the "almost worked" error) */
.form-alert{
  display:none;align-items:flex-start;gap:10px;
  background:var(--danger-bg);border:1px solid var(--danger-border);color:#f3b3ad;
  border-radius:var(--r-sm);padding:11px 13px;font-size:var(--fz-sm);line-height:1.45;
  animation:vcFade .25s ease both;
}
.form-alert.is-shown{display:flex}
.form-alert::before{content:"!";flex:0 0 auto;width:18px;height:18px;border-radius:50%;background:var(--danger);color:#fff;font-weight:800;font-size:12px;display:grid;place-items:center;margin-top:1px}
.form-alert--info{background:rgba(123,91,255,.12);border-color:rgba(123,91,255,.32);color:#c9bdff}
.form-alert--info::before{content:"i";background:var(--info)}
.form-success{display:none;align-items:flex-start;gap:10px;background:rgba(43,212,122,.12);border:1px solid rgba(43,212,122,.32);color:#9beecb;border-radius:var(--r-sm);padding:11px 13px;font-size:var(--fz-sm)}
.form-success.is-shown{display:flex}

/* auth card layout */
.auth-wrap{min-height:calc(100vh - var(--header-h) - 240px);display:grid;place-items:center;padding-block:var(--sp-16)}
.auth-card{width:100%;max-width:430px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-md);padding:var(--sp-10)}
.auth-card h1{font-size:var(--fz-2xl);text-align:center}
.auth-card .sub{text-align:center;color:var(--text-muted);margin-top:6px;margin-bottom:var(--sp-6)}
.auth-foot{text-align:center;margin-top:var(--sp-5);font-size:var(--fz-sm);color:var(--text-muted)}
.auth-divider{display:flex;align-items:center;gap:12px;color:var(--text-faint);font-size:var(--fz-xs);margin-block:var(--sp-5)}
.auth-divider::before,.auth-divider::after{content:"";height:1px;flex:1;background:var(--border)}
.step-pane[hidden]{display:none}

/* spinner */
.spinner{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
.spinner--dark{border-color:rgba(123,91,255,.3);border-top-color:var(--accent-500)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- testimonials ---------- */
.quote-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-6);box-shadow:var(--shadow-xs);display:flex;flex-direction:column;gap:var(--sp-4)}
.quote-card p{color:var(--text);font-size:var(--fz-md);line-height:1.6}
.quote-author{display:flex;align-items:center;gap:12px}
.quote-author img,.avatar{width:42px;height:42px;border-radius:50%;object-fit:cover;background:var(--grad-brand)}
.quote-author b{display:block;font-size:var(--fz-sm)}
.quote-author span{font-size:var(--fz-xs);color:var(--text-faint)}
.stars{color:#f0b429;font-size:14px;letter-spacing:2px}

/* ---------- stats band ---------- */
.stat{ text-align:center }
.stat__num{font-size:var(--fz-3xl);font-weight:800;letter-spacing:-.02em;background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat__label{font-size:var(--fz-sm);color:var(--text-muted);margin-top:4px}

/* ---------- CTA band ---------- */
.cta-band{position:relative;border-radius:var(--r-xl);overflow:hidden;background:var(--grad-brand);color:#fff;padding:var(--sp-16);text-align:center}
.cta-band::after{content:"";position:absolute;inset:0;background:radial-gradient(600px 300px at 80% 120%,rgba(255,255,255,.2),transparent 60%);pointer-events:none}
.cta-band h2{color:#fff}
.cta-band .lead{color:rgba(255,255,255,.92)}
.cta-band .btn--ghost{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4);color:#fff}
.cta-band .btn--ghost:hover{background:rgba(255,255,255,.24);color:#fff}

/* ---------- FAQ accordion ---------- */
.faq{max-width:760px;margin-inline:auto;display:flex;flex-direction:column;gap:var(--sp-3)}
.faq-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden}
.faq-item__q{width:100%;text-align:left;background:transparent;border:0;padding:18px 20px;font-weight:600;font-size:var(--fz-md);color:var(--text);display:flex;align-items:center;justify-content:space-between;gap:16px}
.faq-item__q::after{content:"+";font-size:22px;font-weight:400;color:var(--text-faint);transition:transform var(--transition)}
.faq-item.is-open .faq-item__q::after{transform:rotate(45deg)}
.faq-item__a{max-height:0;overflow:hidden;transition:max-height .28s ease;color:var(--text-muted)}
.faq-item__a > div{padding:0 20px 18px}
.faq-item.is-open .faq-item__a{max-height:340px}

/* ---------- article / blog ---------- */
.article-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-xs);transition:transform var(--transition),box-shadow var(--transition)}
.article-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.article-card__cover{aspect-ratio:16/9;background:var(--grad-brand-soft);position:relative}
.article-card__cover::after{content:"";position:absolute;inset:0;background:radial-gradient(300px 160px at 70% 20%,rgba(255,61,127,.22),transparent 60%)}
.article-card__body{padding:var(--sp-5);display:flex;flex-direction:column;gap:10px}
.article-card__meta{display:flex;gap:10px;font-size:var(--fz-xs);color:var(--text-faint)}
.article-card h3{font-size:var(--fz-lg)}
.prose{max-width:720px;margin-inline:auto}
.prose h2{font-size:var(--fz-2xl);margin-top:var(--sp-10);margin-bottom:var(--sp-4)}
.prose h3{font-size:var(--fz-xl);margin-top:var(--sp-8);margin-bottom:var(--sp-3)}
.prose p{margin-bottom:var(--sp-4);color:var(--text)}
.prose ul,.prose ol{margin:0 0 var(--sp-4) 1.2em;color:var(--text-muted)}
.prose li{margin-bottom:8px}
.prose blockquote{border-left:3px solid var(--brand-500);padding-left:var(--sp-4);color:var(--text-muted);font-style:italic;margin:var(--sp-6) 0}

/* legal page */
.legal{max-width:780px;margin-inline:auto}
.legal h2{font-size:var(--fz-xl);margin-top:var(--sp-8);margin-bottom:var(--sp-3)}
.legal p,.legal li{color:var(--text-muted)}
.legal .updated{font-size:var(--fz-sm);color:var(--text-faint);margin-bottom:var(--sp-8)}

/* ---------- dashboard skeleton (app.html) ---------- */
.app-shell{display:grid;grid-template-columns:230px 1fr;min-height:calc(100vh - var(--header-h))}
.app-side{border-right:1px solid var(--border);background:var(--surface);padding:var(--sp-5)}
.app-side a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--r-sm);color:var(--text-muted);font-weight:600;font-size:var(--fz-sm)}
.app-side a.is-active,.app-side a:hover{background:var(--surface-muted);color:var(--text)}
.app-main{padding:var(--sp-8)}
.skel{background:linear-gradient(90deg,var(--surface-muted) 25%,var(--surface-hover) 37%,var(--surface-muted) 63%);background-size:400% 100%;animation:skel 1.4s ease infinite;border-radius:var(--r-sm)}
@keyframes skel{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* ---------- toasts ---------- */
.toast-host{position:fixed;right:20px;bottom:20px;z-index:100;display:flex;flex-direction:column;gap:10px;max-width:360px}
.toast{display:flex;align-items:flex-start;gap:10px;background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--accent-500);box-shadow:var(--shadow-md);border-radius:var(--r-md);padding:13px 15px;font-size:var(--fz-sm);animation:vcFade .25s ease both}
.toast--error{border-left-color:var(--danger)}
.toast--success{border-left-color:var(--success)}
.toast__title{font-weight:700;margin-bottom:2px}
.toast__close{margin-left:auto;background:transparent;border:0;color:var(--text-faint);font-size:16px;cursor:pointer}

/* ---------- modal ---------- */
.modal-backdrop{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.6);backdrop-filter:blur(3px);display:none;place-items:center;padding:20px}
.modal-backdrop.is-open{display:grid}
.modal{width:100%;max-width:460px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-lg);padding:var(--sp-8);animation:vcFade .2s ease both}
.modal h3{margin-bottom:8px}
.modal__foot{display:flex;justify-content:flex-end;gap:10px;margin-top:var(--sp-6)}

/* ---------- cookie banner ---------- */
.cookie-bar{position:fixed;left:20px;right:20px;bottom:20px;z-index:80;max-width:760px;margin-inline:auto;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-lg);border-radius:var(--r-lg);padding:16px 20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.cookie-bar p{font-size:var(--fz-sm);color:var(--text-muted);flex:1;min-width:240px}
.cookie-bar .actions{display:flex;gap:10px;margin-left:auto}

/* ---------- footer ---------- */
.site-footer{background:var(--bg-elevated);border-top:1px solid var(--border);padding-block:var(--sp-16) var(--sp-8);margin-top:var(--sp-20)}
.footer-grid{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:var(--sp-8)}
.footer-brand p{color:var(--text-muted);font-size:var(--fz-sm);margin-top:var(--sp-3);max-width:280px}
.footer-col h4{font-size:var(--fz-xs);text-transform:uppercase;letter-spacing:.1em;color:var(--text-faint);margin-bottom:var(--sp-4)}
.footer-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.footer-col a{color:var(--text-muted);font-size:var(--fz-sm)}
.footer-col a:hover{color:var(--text)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:var(--sp-12);padding-top:var(--sp-6);border-top:1px solid var(--border);color:var(--text-faint);font-size:var(--fz-sm)}
.footer-social{display:flex;gap:10px}
.footer-social a{width:34px;height:34px;border-radius:var(--r-sm);background:var(--surface-muted);display:grid;place-items:center;color:var(--text-muted)}
.footer-social a:hover{background:var(--surface-hover);color:var(--text)}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .poster-grid{grid-template-columns:repeat(4,1fr)}
  .hero__grid{grid-template-columns:1fr;gap:var(--sp-10)}
  .hero__visual{order:-1}
}
@media (max-width:760px){
  :root{--fz-4xl:38px;--fz-3xl:30px}
  .nav,.header-actions .btn--ghost,.header-actions .lang-switch{display:none}
  .nav-burger{display:inline-grid;place-items:center}
  .nav.is-open{display:flex;position:absolute;top:var(--header-h);left:0;right:0;flex-direction:column;align-items:stretch;background:var(--surface);border-bottom:1px solid var(--border);padding:12px;gap:4px;box-shadow:var(--shadow-md)}
  .pricing-grid{grid-template-columns:1fr}
  .grid-3,.grid-2{grid-template-columns:1fr}
  .poster-grid{grid-template-columns:repeat(3,1fr)}
  .section{padding-block:var(--sp-12)}
  .app-shell{grid-template-columns:1fr}
  .app-side{display:none}
  .footer-grid{grid-template-columns:1fr}
}