/* ==========================================================================
   VEX theme tokens (VEXREBRAND 2026-11-10)
   Mode   : html[data-theme="dark"|"light"]   (existing toggle; dark = default)
   Palette: html[data-palette="..."]           (future user picker; default = violet)
   Violet Edge is the default palette. Future palettes (gold, neon) only need to
   redefine the --vex-* tokens below inside [data-palette="gold"] etc.
   ========================================================================== */
@font-face{font-family:"Clash Display";src:url(/static/vex/fonts/ClashDisplay-Semibold.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Clash Display";src:url(/static/vex/fonts/ClashDisplay-Bold.woff2) format("woff2");font-weight:700 800;font-style:normal;font-display:swap}
@font-face{font-family:"Clash Display";src:url(/static/vex/fonts/ClashDisplay-Medium.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(/static/vex/fonts/InterVariable.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

/* ---- Violet Edge · dark (main) ---- */
:root,html[data-theme="dark"]{
  --vex-bg:#000000; --vex-bg-2:#07060B; --vex-panel:#0D0B12; --vex-panel-2:#14111C; --vex-raise:#1B1726;
  --vex-line:rgba(196,170,255,.14); --vex-line-2:rgba(196,170,255,.08); --vex-line-accent:rgba(153,69,255,.38);
  --vex-text:#F5F5F7; --vex-muted:rgba(245,245,247,.68); --vex-muted-2:rgba(245,245,247,.46);
  --vex-accent:#9945FF; --vex-accent-2:#FF3CAC; --vex-accent-ink:#B57BFF; --vex-on-accent:#FFFFFF;
  --vex-grad:linear-gradient(120deg,#9945FF 0%,#C13CF0 50%,#FF3CAC 100%);
  --vex-glow:rgba(153,69,255,.40); --vex-glow-2:rgba(255,60,172,.28);
  --vex-up:#2EE6A6; --vex-down:#FF4D7A; --vex-warn:#FFC24B;
  --vex-header:rgba(0,0,0,.72);
  --vex-font-display:"Clash Display","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --vex-font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --vex-radius:16px;
  color-scheme:dark;
}
/* ---- Violet Edge · light ---- */
html[data-theme="light"]{
  --vex-bg:#FFFFFF; --vex-bg-2:#F4F2FA; --vex-panel:#FFFFFF; --vex-panel-2:#F4F2FA; --vex-raise:#FFFFFF;
  --vex-line:rgba(18,16,24,.10); --vex-line-2:rgba(18,16,24,.06); --vex-line-accent:rgba(153,69,255,.32);
  --vex-text:#121018; --vex-muted:rgba(18,16,24,.70); --vex-muted-2:rgba(18,16,24,.50);
  --vex-accent:#9945FF; --vex-accent-2:#FF3CAC; --vex-accent-ink:#7B2FE0; --vex-on-accent:#FFFFFF;
  --vex-grad:linear-gradient(120deg,#9945FF 0%,#C13CF0 50%,#FF3CAC 100%);
  --vex-glow:rgba(153,69,255,.22); --vex-glow-2:rgba(255,60,172,.16);
  --vex-up:#0F9F6E; --vex-down:#D92D4F; --vex-warn:#B77900;
  --vex-header:rgba(255,255,255,.82);
  color-scheme:light;
}
/* ---- Future palettes (placeholders; values come with the theme picker) ----
html[data-palette="gold"][data-theme="dark"]{ --vex-accent:#D4AF37; --vex-accent-2:#F5D77A; ... }
html[data-palette="gold"][data-theme="light"]{ ... }
html[data-palette="neon"][data-theme="dark"]{ --vex-accent:#39FF88; ... }
html[data-palette="neon"][data-theme="light"]{ ... }
*/

/* ===== VEX landing (VEXREBRAND 2026-11-10) — consumes --vex-* tokens only ===== */
:root{--bg:var(--vex-bg);--bg2:var(--vex-bg-2);--txt:var(--vex-text);--mut:var(--vex-muted);--rz:var(--vex-accent-ink);--line:var(--vex-line);--glass:var(--vex-panel);--pri:var(--vex-accent);--pri-txt:var(--vex-on-accent);--radius:var(--vex-radius);--font:var(--vex-font-body)}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:var(--vex-font-body);background:var(--vex-bg);color:var(--vex-text);line-height:1.55;-webkit-font-smoothing:antialiased}
body{min-height:100vh;background:
  radial-gradient(70% 55% at 88% -8%,var(--vex-glow-2),transparent 60%),
  radial-gradient(80% 60% at 0% -10%,var(--vex-glow),transparent 58%),
  var(--vex-bg);background-attachment:fixed}
html[data-theme="light"] body{background:radial-gradient(70% 55% at 88% -8%,var(--vex-glow-2),transparent 60%),radial-gradient(80% 60% at 0% -10%,var(--vex-glow),transparent 58%),linear-gradient(180deg,var(--vex-bg) 0%,var(--vex-bg-2) 100%);background-attachment:fixed}
a{color:var(--vex-accent-ink);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,.price-amt,.brand{font-family:var(--vex-font-display)}
.skip{position:absolute;left:-999px;top:auto}
.skip:focus{left:12px;top:12px;z-index:99;background:#fff;color:#000;padding:8px 12px}

/* header */
.top{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:18px;padding:12px 24px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);background:var(--vex-header);border-bottom:1px solid var(--vex-line)}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--vex-text);text-decoration:none}
.brand:hover{text-decoration:none}
.brand .vexlogo{display:block;height:34px;width:auto;color:var(--vex-text)}
.brand.sm .vexlogo{height:28px}
.tnav{display:flex;gap:18px;margin-left:14px;flex-wrap:wrap}
.tnav a{color:var(--vex-muted);font-size:14px;font-weight:600}
.tnav a:hover{color:var(--vex-text);text-decoration:none}
.tactions{margin-left:auto;display:flex;gap:8px;align-items:center}

/* buttons */
.btn,button.ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;padding:10px 16px;font:700 14px/1.2 var(--vex-font-body);border:1px solid var(--vex-line);background:transparent;color:var(--vex-text);cursor:pointer;text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .15s}
.btn:hover,button.ghost:hover{text-decoration:none;border-color:var(--vex-line-accent)}
.ghost{background:rgba(255,255,255,.03)}
html[data-theme="light"] .ghost{background:#fff}
.btn.pri{background:var(--vex-grad);color:var(--vex-on-accent);border:0;box-shadow:0 12px 28px -12px var(--vex-glow),0 6px 20px -14px var(--vex-glow-2)}
.btn.pri:hover{transform:translateY(-1px);box-shadow:0 16px 34px -12px var(--vex-glow),0 8px 24px -12px var(--vex-glow-2)}
.btn.lg{padding:14px 22px;font-size:15px;font-weight:800;border-radius:12px}
.btn.block{width:100%}

/* hero */
.hero{display:grid;grid-template-columns:1.2fr .9fr;gap:32px;padding:64px 24px 28px;max-width:1120px;margin:0 auto;align-items:center}
.eyebrow{display:inline-block;margin:0 0 12px;font:700 12px/1 var(--vex-font-body);letter-spacing:.18em;text-transform:uppercase;background:var(--vex-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero h1{font-size:clamp(36px,5.4vw,60px);line-height:1.02;font-weight:700;letter-spacing:-.01em;margin:0 0 16px}
.hero h1 span{background:var(--vex-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{color:var(--vex-muted);font-size:17px;line-height:1.6;max-width:36em;margin:0 0 20px}
.cta-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:10px}
.fine{color:var(--vex-muted);font-size:13px;margin:8px 0 0}
.fine.center{text-align:center}

/* panels */
.glass{background:var(--vex-panel);border:1px solid var(--vex-line);border-radius:var(--vex-radius);box-shadow:0 24px 48px -28px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.03)}
html[data-theme="light"] .glass{box-shadow:0 18px 40px -26px rgba(60,30,120,.25)}
.hero-card{padding:20px;position:relative;overflow:hidden}
.hero-card::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--vex-grad)}
.hc-top{display:flex;align-items:center;gap:8px;font-weight:700;margin-bottom:16px}
.dot{width:8px;height:8px;border-radius:50%;background:#6b6577}
.dot.on{background:var(--vex-up);box-shadow:0 0 10px var(--vex-up)}
.hc-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hc-grid>div{background:var(--vex-panel-2);border:1px solid var(--vex-line-2);border-radius:12px;padding:10px 12px}
.hc-grid small{display:block;color:var(--vex-muted);font-size:12px}
.hc-grid b{font-size:15px}
.hc-note{margin:14px 0 0;color:var(--vex-muted-2);font-size:12px}

/* sections */
.sec{max-width:1120px;margin:0 auto;padding:40px 24px}
.sec h2{margin:0 0 10px;font-size:clamp(26px,3.4vw,34px);font-weight:600;letter-spacing:-.005em}
.sec-lede{color:var(--vex-muted);margin:0 0 20px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.card{padding:20px}
.card h3{margin:0 0 8px;font-size:19px;font-weight:600}
.card p{margin:0;color:var(--vex-muted)}
.eng-table{overflow:hidden}
.eng-row{display:grid;grid-template-columns:1fr 1fr 2fr;gap:12px;padding:13px 18px;border-top:1px solid var(--vex-line-2);align-items:center}
.eng-row.head{border-top:0;color:var(--vex-muted);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--vex-panel-2)}
.tag{display:inline-block;width:max-content;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;border:1px solid var(--vex-line)}
.tag.base{color:var(--vex-up);border-color:currentColor}
.tag.prem{color:var(--vex-accent-ink);border-color:var(--vex-line-accent);background:rgba(153,69,255,.08)}
.price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.price{padding:22px;display:flex;flex-direction:column;gap:6px}
.price h3{margin:0;font-size:20px;font-weight:600}
.price.featured{border-color:transparent;background:linear-gradient(var(--vex-panel),var(--vex-panel)) padding-box,var(--vex-grad) border-box;border:1px solid transparent;box-shadow:0 24px 60px -30px var(--vex-glow)}
.badge{display:inline-block;width:max-content;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:800;background:var(--vex-grad);color:#fff}
.price-amt{margin:4px 0 6px;font-size:36px;font-weight:700}
.price-amt small{font:600 14px var(--vex-font-body);color:var(--vex-muted);margin-left:4px}
.was{color:var(--vex-muted);text-decoration:line-through;font-size:13px}
.price ul{margin:0 0 14px;padding-left:18px;color:var(--vex-muted);font-size:14px;flex:1}
.price ul li{margin:4px 0}
.faq{display:grid;gap:10px}
.faq details{padding:14px 18px}
.faq summary{cursor:pointer;font-weight:700}
.faq summary::marker{color:var(--vex-accent)}
.faq p{color:var(--vex-muted);margin:10px 0 0}

/* footer */
.foot{max-width:1120px;margin:20px auto 0;padding:28px 24px 48px;border-top:1px solid var(--vex-line);display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;color:var(--vex-muted);font-size:13px}
.foot p{margin:0}
.flinks{margin-left:auto;display:flex;gap:16px}
.flinks a{color:var(--vex-muted);font-weight:600}
.flinks a:hover{color:var(--vex-text)}
.foot .tagline{width:100%;font:600 11px var(--vex-font-body);letter-spacing:.28em;text-transform:uppercase;color:var(--vex-muted-2)}

@media (max-width:960px){.price-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:860px){
  .hero,.grid3{grid-template-columns:1fr}
  .tnav{display:none}
  .eng-row{grid-template-columns:1fr 1fr}
  .eng-row span:last-child{grid-column:1/-1;color:var(--vex-muted);font-size:13px}
}
@media (max-width:520px){
  .top{padding:10px 14px;gap:8px}
  .brand .vexlogo{height:28px}
  .tactions{gap:6px}
  #themeToggle{padding:8px 10px}
  .btn{padding:9px 12px;font-size:13px}
  .hero{padding:32px 16px 18px;gap:20px}
  .hero h1{font-size:34px}
  .lede{font-size:15px}
  .cta-row{flex-direction:column;align-items:stretch}
  .cta-row .btn{width:100%}
  .sec{padding:28px 16px}
  .price-grid{grid-template-columns:1fr}
  .price-amt{font-size:30px}
  .foot{padding:22px 16px 40px}
  .flinks{margin-left:0}
}