/* ─────────────────────────────────────────────────
   GROXIA Package Pages — package-pages.css
   Plus  → ultraviolet/black  theme
   Premium → dark gold theme
───────────────────────────────────────────────── */

/* ── Reset / Base ── */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin-top:0}
[id]{scroll-margin-top:96px}

/* ── CSS Variables — Plus (ultraviolet / black) ── */
body.theme-plus{
  --bg:#000000;
  --ink:#f4f0ff;
  --muted:#9d8fc8;
  --line:rgba(148,82,255,.22);
  --line-strong:rgba(172,110,255,.58);
  --panel:rgba(0,0,0,.92);
  --glass:rgba(148,82,255,.055);
  --accent:#9b4dff;
  --accent-dim:rgba(128,42,255,.28);
  --accent-glow:rgba(160,80,255,.42);
  --uv-bright:#bf7fff;
  --chrome:linear-gradient(112deg,#e8d8ff 0%,#c07eff 22%,#ffffff 44%,#a64eff 60%,#cc99ff 80%,#f0e0ff 100%);
}

/* ── CSS Variables — Premium (dark gold) ── */
body.theme-premium{
  --bg:#000000;
  --ink:#faf6ea;
  --muted:#b0924e;
  --line:rgba(226,184,80,.22);
  --line-strong:rgba(240,205,120,.52);
  --panel:rgba(0,0,0,.92);
  --glass:rgba(226,184,80,.055);
  --accent:#d4a92a;
  --accent-dim:rgba(190,138,30,.28);
  --accent-glow:rgba(210,165,40,.42);
  --chrome:linear-gradient(112deg,#fff 0%,#d7c28b 22%,#fff1b6 44%,#8e6b25 60%,#2a1705 80%,#f4dda0 100%);
}

/* ── Scrollbars ── */
body.theme-plus::-webkit-scrollbar{width:6px}
body.theme-plus::-webkit-scrollbar-track{background:#000000}
body.theme-plus::-webkit-scrollbar-thumb{background:rgba(148,82,255,.4);border-radius:3px}
body.theme-premium::-webkit-scrollbar{width:6px}
body.theme-premium::-webkit-scrollbar-track{background:#000000}
body.theme-premium::-webkit-scrollbar-thumb{background:rgba(226,184,80,.4);border-radius:3px}

/* ── Body backgrounds ── */
body.theme-plus{
  margin:0;min-height:100vh;
  color:var(--ink);
  font-family:Rajdhani,"Barlow Condensed",Bahnschrift,"Arial Narrow","Segoe UI",Arial,sans-serif;
  background:
    linear-gradient(115deg,rgba(148,82,255,.08),transparent 26% 74%,rgba(255,255,255,.035)),
    linear-gradient(180deg,#030005 0%,#000 48%,#030007 100%);
  overflow-x:hidden;
}
body.theme-premium{
  margin:0;min-height:100vh;
  color:var(--ink);
  font-family:Rajdhani,"Barlow Condensed",Bahnschrift,"Arial Narrow","Segoe UI",Arial,sans-serif;
  background:
    linear-gradient(115deg,rgba(226,184,80,.075),transparent 26% 74%,rgba(255,255,255,.032)),
    linear-gradient(180deg,#050301 0%,#000 48%,#050301 100%);
  overflow-x:hidden;
}

/* ── Grain overlay ── */
body.theme-plus::before,
body.theme-premium::before{
  position:fixed;inset:0;z-index:-1;content:"";pointer-events:none;
  opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size:200px 200px;
}

/* ── Ambient animated overlay ── */
body.theme-plus::after{
  position:fixed;inset:0;z-index:-2;content:"";pointer-events:none;
  will-change:transform;
  background:
    conic-gradient(from 210deg at 20% 28%,transparent 0 20%,rgba(130,50,255,.08) 22%,transparent 28% 100%),
    conic-gradient(from 40deg at 84% 22%,transparent 0 22%,rgba(80,10,200,.06) 25%,transparent 32% 100%),
    linear-gradient(28deg,transparent 0 36%,rgba(255,255,255,.035) 36.3%,transparent 37.2% 100%),
    linear-gradient(148deg,transparent 0 58%,rgba(170,90,255,.04) 58.3%,transparent 59.2% 100%);
  animation:ambientShift 20s ease-in-out infinite alternate;
}
body.theme-premium::after{
  position:fixed;inset:0;z-index:-2;content:"";pointer-events:none;
  will-change:transform;
  background:
    conic-gradient(from 210deg at 20% 28%,transparent 0 20%,rgba(200,150,30,.06) 22%,transparent 28% 100%),
    conic-gradient(from 40deg at 84% 22%,transparent 0 22%,rgba(140,90,15,.06) 25%,transparent 32% 100%),
    linear-gradient(28deg,transparent 0 36%,rgba(255,232,170,.032) 36.3%,transparent 37.2% 100%),
    linear-gradient(148deg,transparent 0 58%,rgba(226,184,80,.038) 58.3%,transparent 59.2% 100%);
  animation:ambientShift 26s ease-in-out infinite alternate;
}

/* ── Shell ── */
.shell{
  width:min(1140px,calc(100% - 32px));
  margin:0 auto;
}

/* ═══════════════════════════════════
   TOPBAR
═══════════════════════════════════ */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:20;
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(24px) saturate(1.4);
  box-shadow:0 18px 48px rgba(0,0,0,.38);
  animation:topbarIn .8s cubic-bezier(.19,1,.22,1) both;
}
body.theme-plus .topbar{
  background:linear-gradient(180deg,rgba(0,0,0,.95),rgba(0,0,0,.7));
}
body.theme-premium .topbar{
  background:linear-gradient(180deg,rgba(0,0,0,.95),rgba(0,0,0,.7));
}
.topbar__inner{
  min-height:76px;
  display:flex;align-items:center;justify-content:space-between;gap:22px;
}

/* ═══════════════════════════════════
   BRAND — logo fixed width, no resize on translate
═══════════════════════════════════ */
.brand{
  display:inline-flex;align-items:center;gap:14px;
  text-decoration:none;
  flex-shrink:0;
}
.brand::before,
.brand::after{
  display:none !important;
  content:none !important;
}
.brand__mark{
  display:flex;align-items:center;
  flex-shrink:0;
  border:none !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.brand__mark::before,
.brand__mark::after{
  display:none !important;
  content:none !important;
}
.brand__mark img{
  width:160px;height:auto;
  object-fit:contain;object-position:center;
  border:none !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  padding:0;display:block;
  color:transparent;font-size:0;
}
body.theme-plus .brand__mark img{
  filter:brightness(1.1) contrast(1.05);
}
body.theme-premium .brand__mark img{
  filter:brightness(1.1) contrast(1.05);
}

/* ── Legal page brand: direct img + span inside .brand ── */
.brand>img{
  width:140px;height:auto;
  object-fit:contain;object-position:center;
  display:block;padding:0;
  border:none !important;background:transparent !important;box-shadow:none !important;
}
.brand>span{display:grid;gap:3px;text-transform:uppercase}
.brand>span strong{font-size:.82rem;letter-spacing:.32em;color:rgba(255,255,255,.9)}
.brand>span span{font-size:.58rem;letter-spacing:.38em;color:rgba(255,255,255,.5)}

/* ── Legal page topbar: use a safe dark background even without theme class ── */
.legal-page .topbar{
  background:linear-gradient(180deg,rgba(0,0,0,.95),rgba(0,0,0,.7)) !important;
}

/* Brand text — fixed width so translate never changes its size */
.brand__text{
  display:grid;gap:3px;text-transform:uppercase;
  min-width:130px; /* prevents layout shift on language change */
}
.brand__text strong{
  font-size:.82rem;letter-spacing:.32em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:var(--chrome);background-size:240% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:chromeFlow 7s linear infinite;
}
.brand__text span{
  color:rgba(255,255,255,.5);font-size:.58rem;letter-spacing:.38em;white-space:nowrap;
}

/* ── Nav ── */
.topbar__actions{display:flex;align-items:center;gap:14px}
.nav{display:flex;align-items:center;gap:4px}
.nav a{
  min-height:36px;display:inline-flex;align-items:center;padding:0 12px;
  border:1px solid transparent;border-radius:4px;
  color:rgba(255,255,255,.68);font-size:.68rem;font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;
  transition:color .2s ease,border-color .2s ease,background .2s ease;
}
.nav a:hover{
  color:#fff;border-color:var(--line);background:rgba(255,255,255,.055);
}

/* ── Language switcher ── */
.language-switcher{position:relative;display:inline-flex;align-items:center}
.language-toggle{
  display:inline-grid;width:42px;height:42px;place-items:center;
  border:1px solid var(--line);border-radius:4px;color:#fff;
  background:rgba(255,255,255,.045);cursor:pointer;backdrop-filter:blur(12px);
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.language-toggle:hover,
.language-switcher.is-open .language-toggle{
  border-color:var(--line-strong);
  box-shadow:0 0 22px var(--accent-dim);
  transform:translateY(-1px);
}
.language-toggle svg{
  width:19px;height:19px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.language-menu{
  position:absolute;top:calc(100% + 10px);right:0;
  display:grid;gap:5px;min-width:170px;padding:7px;
  border:1px solid var(--line);border-radius:6px;
  background:rgba(0,0,0,.9);box-shadow:0 22px 60px rgba(0,0,0,.54);
  backdrop-filter:blur(18px);
  opacity:0;pointer-events:none;transform:translateY(-6px);
  transition:opacity .2s ease,transform .2s ease;
}
.language-switcher.is-open .language-menu{
  opacity:1;pointer-events:auto;transform:translateY(0);
}
.language-option{
  display:flex;width:100%;min-height:38px;align-items:center;gap:10px;
  padding:0 10px;border:1px solid transparent;border-radius:4px;
  color:rgba(255,255,255,.75);background:transparent;
  font:inherit;font-size:.7rem;font-weight:900;letter-spacing:.16em;
  text-align:left;text-transform:uppercase;cursor:pointer;
  transition:color .18s ease,border-color .18s ease,background .18s ease;
}
.language-option:hover,.language-option.is-active{
  color:#fff;border-color:var(--line);background:rgba(255,255,255,.07);
}
.language-option__flag{font-size:1rem;letter-spacing:0}

/* ═══════════════════════════════════
   HERO
═══════════════════════════════════ */
.hero{
  position:relative;
  display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:40px;
  padding:140px 0 100px;min-height:100vh;
  isolation:isolate;
}
.hero::after{
  position:absolute;left:0;right:0;bottom:0;height:1px;content:"";
  background:linear-gradient(90deg,transparent,var(--accent-glow),transparent);
}
.hero__copy{
  position:relative;z-index:2;
  animation:heroInLeft 1s cubic-bezier(.19,1,.22,1) both;
}

.eyebrow{
  margin:0 0 16px;
  color:var(--accent);
  font-size:.72rem;font-weight:800;letter-spacing:.58em;text-transform:uppercase;
  opacity:.9;
}
h1{
  margin:0 0 20px;
  font-size:clamp(1.6rem,2.6vw,3rem);line-height:.94;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  background:var(--chrome);background-size:240% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.1);
  filter:drop-shadow(0 20px 36px rgba(0,0,0,.9));
  animation:titleIn 1s cubic-bezier(.19,1,.22,1) both,chromeFlow 8s linear infinite;
}
.lead{
  margin:0 0 32px;
  color:rgba(240,235,255,.72);
  font-family:"Segoe UI",Arial,sans-serif;
  font-size:clamp(.9rem,1.3vw,1rem);line-height:1.74;
}
body.theme-premium .lead{color:rgba(248,240,220,.72)}

.hero__actions{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  animation:heroInLeft 1s .15s cubic-bezier(.19,1,.22,1) both;
}

/* Metric strip */
.metric-strip{
  display:flex;gap:28px;flex-wrap:wrap;
  margin-top:36px;padding-top:28px;
  border-top:1px solid var(--line);
  animation:heroInLeft 1s .28s cubic-bezier(.19,1,.22,1) both;
}
.metric-strip--full{
  grid-column:1 / -1;
  margin-top:0;
  padding-top:32px;
  gap:0;
  justify-content:space-between;
  animation:heroInLeft 1s .28s cubic-bezier(.19,1,.22,1) both;
}
.metric-strip--full .metric{
  flex:1;
  padding:0 32px;
  border-right:1px solid var(--line);
}
.metric-strip--full .metric:first-child{ padding-left:0; }
.metric-strip--full .metric:last-child{ border-right:none; padding-right:0; }
.metric{display:grid;gap:4px}
.metric strong{
  font-size:1.5rem;line-height:1;font-weight:900;
  background:var(--chrome);background-size:240% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:chromeFlow 7s 1s linear infinite;
}
.metric-strip--full .metric strong{
  font-size:clamp(2.4rem,4vw,3.8rem);
}
.metric span{
  color:var(--muted);font-size:.68rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  max-width:120px;line-height:1.4;
}
.metric-strip--full .metric span{
  max-width:200px;
  font-size:.72rem;
  margin-top:6px;
}

/* ═══════════════════════════════════
   HERO VISUAL — big animated logo
═══════════════════════════════════ */
.hero__visual{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  align-self:start;
  margin-top:-50px;
  margin-left:110px;
  gap:0;
  z-index:1;
  animation:heroInRight 1s .1s cubic-bezier(.19,1,.22,1) both;
}

/* Glow orb — removed (rendered as visible square) */
.hero__visual::before{
  display:none !important;
  content:none !important;
}

/* The logo */
.hero__package-logo{
  position:relative;
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  gap:0;
  border:none !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible;z-index:2;
  will-change:transform;
  transform:translateZ(0);
  animation:packageLogoFloat 5.2s ease-in-out infinite;
}

/* GROXIA wordmark image */
.hero__wordmark-img{
  display:block;
  width:min(520px,38vw);
  height:auto;
  user-select:none;
  will-change:filter,transform;
}
body.theme-plus .hero__wordmark-img{
  animation:uvWordmarkGlow 4.8s ease-in-out infinite;
}
body.theme-premium .hero__wordmark-img{
  animation:goldWordmarkGlow 5.4s ease-in-out infinite;
}

/* Inner glow — removed */
.hero__package-logo::before{
  display:none !important;
  content:none !important;
}

/* Sweep shimmer — removed */
.hero__package-logo::after{
  display:none !important;
  content:none !important;
}

/* Visual label — PLUS / PREMIUM under GROXIA */
.hero__visual-label{
  display:block;
  font-size:clamp(1.4rem,3vw,2.2rem);
  font-weight:900;
  letter-spacing:.45em;
  text-transform:uppercase;
  line-height:1;
  margin-top:-18%;
  padding:.14em .45em 0;
  pointer-events:none;user-select:none;
  border-top:1px solid var(--line-strong);
  width:100%;
  text-align:center;
  filter:drop-shadow(0 0 18px var(--accent-dim));
  animation:labelPulse 3.6s ease-in-out infinite;
}
body.theme-plus .hero__visual-label{
  background:var(--chrome);background-size:240% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:chromeFlow 6s linear infinite,labelPulse 3.6s ease-in-out infinite;
  -webkit-text-stroke:.5px rgba(180,120,255,.4);
}
body.theme-premium .hero__visual-label{
  background:var(--chrome);background-size:240% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:chromeFlow 7s linear infinite,labelPulse 3.8s ease-in-out infinite;
  -webkit-text-stroke:.5px rgba(220,180,60,.4);
}

/* ═══════════════════════════════════
   BUTTONS
═══════════════════════════════════ */
.button{
  position:relative;display:inline-flex;min-height:50px;
  align-items:center;justify-content:center;padding:0 26px;
  overflow:hidden;border:1px solid var(--line);border-radius:4px;
  color:#fff;font-size:.74rem;font-weight:900;letter-spacing:.22em;text-transform:uppercase;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
  backdrop-filter:blur(12px);background:rgba(255,255,255,.055);cursor:pointer;
}
.button::before{
  position:absolute;inset:0;content:"";
  background:linear-gradient(112deg,transparent,rgba(255,255,255,.26),transparent);
  transform:translateX(-120%);pointer-events:none;
}
.button:hover{
  border-color:var(--line-strong);
  box-shadow:0 14px 38px rgba(0,0,0,.42),0 0 28px var(--accent-dim);
  transform:translateY(-2px);
}
.button:hover::before{animation:sweepOnce .6s cubic-bezier(.19,1,.22,1) forwards}

body.theme-plus .button--primary{
  color:#fff;
  background:linear-gradient(112deg,#12003a 0%,#7a2aff 42%,#4a0bb0 72%,#0a0018 100%);
  border-color:rgba(168,110,255,.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 16px 46px rgba(100,40,200,.3);
}
body.theme-plus .button--primary:hover{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 20px 56px rgba(120,50,230,.42),0 0 38px rgba(150,80,255,.28);
}
body.theme-premium .button--primary{
  color:#070402;
  background:linear-gradient(112deg,#f9e8b0 0%,#d4940e 38%,#7a5000 68%,#2a1705 100%);
  border-color:rgba(240,208,120,.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38),0 16px 46px rgba(160,110,20,.26);
}
body.theme-premium .button--primary:hover{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.44),0 20px 56px rgba(180,130,30,.36),0 0 36px rgba(210,165,40,.24);
}

/* ═══════════════════════════════════
   SECTIONS
═══════════════════════════════════ */
main{padding-top:0}
.section{
  padding:88px 0;border-top:1px solid var(--line);
  content-visibility:auto;
  contain-intrinsic-size:1px 720px;
}
.section>div:first-child{margin-bottom:44px}
.section h2{
  margin:0 0 14px;
  font-size:clamp(2rem,4vw,4rem);line-height:.92;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
}

/* ═══════════════════════════════════
   FEATURE GRID
═══════════════════════════════════ */
.feature-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;border:1px solid var(--line);background:var(--line);
}
.feature{
  position:relative;padding:28px 22px;background:var(--panel);
  overflow:hidden;
  border-left:2px solid transparent;
  transition:border-color .22s ease,background .22s ease,transform .22s ease,box-shadow .22s ease;
}
.feature::before{
  position:absolute;inset:0;content:"";
  background:linear-gradient(112deg,transparent,rgba(255,255,255,.12),transparent);
  transform:translateX(-120%);pointer-events:none;
}
.feature:hover{
  transform:translateY(-2px);
  box-shadow:0 20px 54px rgba(0,0,0,.4),0 0 24px var(--accent-dim);
  background:rgba(255,255,255,.045);
}
.feature:hover::before{animation:sweepOnce .62s cubic-bezier(.19,1,.22,1) forwards}
body.theme-plus .feature:hover{border-left-color:rgba(150,70,255,.6)}
body.theme-premium .feature:hover{border-left-color:rgba(210,165,50,.6)}
.feature strong{
  display:block;margin-bottom:10px;
  font-size:.88rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);
}
.feature p{
  margin:0;color:rgba(220,215,235,.68);
  font-family:"Segoe UI",Arial,sans-serif;font-size:.94rem;line-height:1.62;
}
body.theme-premium .feature p{color:rgba(240,225,195,.68)}

/* ═══════════════════════════════════
   PROCESS GRID
═══════════════════════════════════ */
.process-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;border:1px solid var(--line);background:var(--line);
}
.process{
  position:relative;padding:28px 22px;background:var(--panel);
  overflow:hidden;
  transition:background .22s ease,transform .22s ease;
}
.process:hover{background:rgba(255,255,255,.04);transform:translateY(-2px)}
.process span{
  display:block;margin-bottom:12px;
  font-size:2.2rem;font-weight:900;line-height:1;
  background:var(--chrome);background-size:240% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:chromeFlow 8s linear infinite;
}
.process h3{margin:0 0 10px;font-size:.86rem;letter-spacing:.18em;text-transform:uppercase}
.process p{
  margin:0;color:rgba(220,215,235,.68);
  font-family:"Segoe UI",Arial,sans-serif;font-size:.9rem;line-height:1.6;
}
body.theme-premium .process p{color:rgba(240,225,195,.68)}

/* ═══════════════════════════════════
   REVIEW GRID
═══════════════════════════════════ */
.review-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:1px;border:1px solid var(--line);background:var(--line);
}
.review{
  position:relative;padding:28px 24px;background:var(--panel);
  display:grid;gap:14px;align-content:start;
  overflow:hidden;
  border-left:2px solid transparent;
  transition:border-color .22s ease,background .22s ease,transform .22s ease,box-shadow .22s ease;
}
.review::before{
  position:absolute;inset:0;content:"";
  background:linear-gradient(112deg,transparent,rgba(255,255,255,.12),transparent);
  transform:translateX(-120%);pointer-events:none;
}
.review:hover{
  transform:translateY(-2px);
  box-shadow:0 20px 54px rgba(0,0,0,.4),0 0 24px var(--accent-dim);
  background:rgba(255,255,255,.045);
}
.review:hover::before{animation:sweepOnce .62s cubic-bezier(.19,1,.22,1) forwards}
body.theme-plus .review:hover{border-left-color:rgba(150,70,255,.6)}
body.theme-premium .review:hover{border-left-color:rgba(210,165,50,.6)}
.review__stars{
  color:#e2c876;font-size:.84rem;letter-spacing:.12em;
}
body.theme-plus .review__stars{color:#c07eff}
.review p{
  margin:0;color:rgba(220,215,235,.74);
  font-family:"Segoe UI",Arial,sans-serif;font-size:.96rem;line-height:1.64;
}
body.theme-premium .review p{color:rgba(240,225,195,.74)}
.review__author{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.review__author strong{
  font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
}
.review__author span{
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5);
}
body.theme-premium .review__author span{color:rgba(240,225,195,.5)}
@media (max-width:720px){
  .review-grid{grid-template-columns:1fr}
}

/* ═══════════════════════════════════
   PRICE BAND
═══════════════════════════════════ */
.price-band{border-bottom:1px solid var(--line);padding-bottom:88px}
.price-band h2{margin:0 0 14px}
.price-band .lead{margin-bottom:0}
.price-box{
  display:grid;gap:16px;padding:32px;
  border:1px solid var(--line);border-radius:6px;
  background:var(--panel);margin-top:32px;
  position:relative;overflow:hidden;
  transition:box-shadow .22s ease,transform .22s ease;
}
.price-box::before{
  position:absolute;inset:0;content:"";pointer-events:none;
}
body.theme-plus .price-box::before{
  background:
    radial-gradient(ellipse at 90% 0%,rgba(130,50,255,.28),transparent 20rem),
    radial-gradient(ellipse at 0% 100%,rgba(80,10,200,.18),transparent 16rem);
}
body.theme-premium .price-box::before{
  background:
    radial-gradient(ellipse at 90% 0%,rgba(200,150,40,.24),transparent 20rem),
    radial-gradient(ellipse at 0% 100%,rgba(100,65,10,.2),transparent 16rem);
}
.price-box:hover{
  transform:translateY(-2px);
  box-shadow:0 22px 62px rgba(0,0,0,.5),0 0 32px var(--accent-dim);
}
.price-box strong{
  position:relative;
  font-size:clamp(2.4rem,5vw,4.8rem);line-height:.9;font-weight:900;text-transform:uppercase;
  background:var(--chrome);background-size:240% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:chromeFlow 7s linear infinite;
}
.price-box span{
  position:relative;
  color:rgba(220,215,235,.74);
  font-family:"Segoe UI",Arial,sans-serif;font-size:.98rem;line-height:1.65;max-width:680px;
}
body.theme-premium .price-box span{color:rgba(240,225,195,.74)}
.price-box .button--primary{align-self:flex-start;position:relative}

/* ═══════════════════════════════════
   FOOTER
═══════════════════════════════════ */
.footer{
  padding:40px 0 32px;border-top:1px solid var(--line);
  color:rgba(255,255,255,.52);font-family:"Segoe UI",Arial,sans-serif;
}
.footer__inner{
  display:flex;justify-content:space-between;align-items:center;
  gap:22px;flex-wrap:wrap;font-size:.86rem;
}
.footer__links{display:flex;gap:14px;flex-wrap:wrap}
.footer__links a{
  color:rgba(255,255,255,.55);font-size:.74rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;transition:color .2s ease;
}
.footer__links a:hover{color:#fff}

/* ═══════════════════════════════════
   CURSOR GLOW
═══════════════════════════════════ */
.cursor-glow{
  position:fixed;width:420px;height:420px;
  border-radius:50%;pointer-events:none;z-index:0;
  transform:translate(-50%,-50%);opacity:0;
  transition:opacity .6s ease;
}
body.theme-plus .cursor-glow{
  background:radial-gradient(ellipse at center,rgba(148,60,255,.12) 0%,transparent 68%);
}
body.theme-premium .cursor-glow{
  background:radial-gradient(ellipse at center,rgba(200,155,40,.1) 0%,transparent 68%);
}

/* ═══════════════════════════════════
   KEYFRAMES
═══════════════════════════════════ */
@keyframes ambientShift{
  from{transform:translate3d(-1%,-.6%,0);opacity:.85}
  to{transform:translate3d(1%,.6%,0);opacity:1}
}
@keyframes heroIn{
  from{opacity:0;transform:translateY(22px);filter:blur(6px)}
  to{opacity:1;transform:translateY(0);filter:blur(0)}
}
@keyframes titleIn{
  from{opacity:0;transform:translateX(-16px) scale(.98)}
  to{opacity:1;transform:none}
}
@keyframes chromeFlow{to{background-position:240% 0}}
@keyframes sweepOnce{
  from{transform:translateX(-120%)}
  to{transform:translateX(120%)}
}

@keyframes uvLogoPulse{
  0%,100%{filter:contrast(1.04) brightness(1.08)}
  50%{filter:contrast(1.06) brightness(1.13)}
}
@keyframes goldLogoPulse{
  0%,100%{filter:contrast(1.05) brightness(1.08)}
  50%{filter:contrast(1.07) brightness(1.14)}
}

@keyframes uvOrbPulse{
  0%,100%{opacity:.82;transform:scale(1)}
  50%{opacity:1;transform:scale(1.12)}
}
@keyframes goldOrbPulse{
  0%,100%{opacity:.78;transform:scale(1)}
  50%{opacity:1;transform:scale(1.1)}
}

/* Combined float+glow — no filter conflict */
@keyframes uvLogoFloatGlow{
  0%,100%{
    transform:translateY(0) scale(1);
    filter:contrast(1.04) brightness(1.08);
  }
  50%{
    transform:translateY(-14px) scale(1.014);
    filter:contrast(1.06) brightness(1.13);
  }
}
@keyframes goldLogoFloatGlow{
  0%,100%{
    transform:translateY(0) scale(1);
    filter:contrast(1.05) brightness(1.08);
  }
  50%{
    transform:translateY(-12px) scale(1.012);
    filter:contrast(1.07) brightness(1.14);
  }
}

@keyframes uvLogoSweep{
  0%,55%{transform:translateX(-110%) rotate(8deg);opacity:0}
  60%{opacity:1}
  82%,100%{transform:translateX(110%) rotate(8deg);opacity:0}
}
@keyframes goldLogoSweep{
  0%,58%{transform:translateX(-110%) rotate(8deg);opacity:0}
  63%{opacity:1}
  84%,100%{transform:translateX(110%) rotate(8deg);opacity:0}
}

/* Entry animations */
@keyframes topbarIn{
  from{opacity:0;transform:translateY(-100%)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes heroInLeft{
  from{opacity:0;transform:translateX(-28px)}
  to{opacity:1;transform:translateX(0)}
}
@keyframes heroInRight{
  from{opacity:0;transform:translateX(28px)}
  to{opacity:1;transform:translateX(0)}
}

/* Logo float */
@keyframes packageLogoFloat{
  0%,100%{transform:translate3d(0,0,0) scale(var(--package-logo-scale,1))}
  50%{transform:translate3d(0,-14px,0) scale(var(--package-logo-scale,1.012))}
}

/* UV (Plus) wordmark glow pulse */
@keyframes uvWordmarkGlow{
  0%,100%{filter:brightness(1.08) contrast(1.04)}
  50%{filter:brightness(1.13) contrast(1.06)}
}

/* Gold (Premium) wordmark glow pulse */
@keyframes goldWordmarkGlow{
  0%,100%{filter:brightness(1.08) contrast(1.05)}
  50%{filter:brightness(1.14) contrast(1.07)}
}

/* Inner glow pulse */
@keyframes packageGlowPulse{
  0%,100%{opacity:.3;transform:scale(.9)}
  50%{opacity:.7;transform:scale(1.08)}
}

/* Label breathe */
@keyframes labelPulse{
  0%,100%{opacity:.7}
  50%{opacity:1}
}


/* ═══════════════════════════════════
   HERO LOGO — entry + enhanced glow
═══════════════════════════════════ */

/* Entry: logo slides in from right + fades */
.hero__wordmark-img {
  animation-fill-mode: both;
}
body.theme-plus .hero__wordmark-img {
  animation:
    logoEntry .9s .1s cubic-bezier(.19,1,.22,1) both,
    uvWordmarkGlow 4.8s 1s ease-in-out infinite;
}
body.theme-premium .hero__wordmark-img {
  animation:
    logoEntry .9s .1s cubic-bezier(.19,1,.22,1) both,
    goldWordmarkGlow 5.4s 1s ease-in-out infinite;
}

@keyframes logoEntry {
  from {
    opacity: 0;
    transform: translateX(32px) scale(.96);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
  }
}

/* Float: already on .hero__package-logo — enhance it */
.hero__package-logo {
  animation: packageLogoFloat 5.2s ease-in-out infinite !important;
}

/* Label entry */
.hero__visual-label {
  animation-fill-mode: both;
}
body.theme-plus .hero__visual-label {
  animation:
    labelEntry .8s .4s cubic-bezier(.19,1,.22,1) both,
    chromeFlow 6s 1.2s linear infinite,
    labelPulse 3.6s 1.2s ease-in-out infinite;
}
body.theme-premium .hero__visual-label {
  animation:
    labelEntry .8s .4s cubic-bezier(.19,1,.22,1) both,
    chromeFlow 7s 1.2s linear infinite,
    labelPulse 3.8s 1.2s ease-in-out infinite;
}

@keyframes labelEntry {
  from { opacity: 0; transform: translateY(10px) scaleX(.9); letter-spacing: .2em; }
  to   { opacity: 1; transform: translateY(0) scaleX(1); }
}



/* ═══════════════════════════════════
   SCROLL-REVEAL — classes baked into HTML
   JS only adds .is-visible when element enters viewport
═══════════════════════════════════ */

/* ── reveal (fade up) ── */
.reveal{
  opacity:0;
  transform:translateY(32px);
  transition:opacity .7s cubic-bezier(.19,1,.22,1),
             transform .7s cubic-bezier(.19,1,.22,1);
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* ── reveal--scale (scale up) ── */
.reveal--scale{
  opacity:0;
  transform:translateY(20px) scale(.97);
  transition:opacity .7s cubic-bezier(.19,1,.22,1),
             transform .7s cubic-bezier(.19,1,.22,1);
}
.reveal--scale.is-visible{
  opacity:1;
  transform:translateY(0) scale(1);
}

/* ── section heading reveal ── */
.section-head-reveal{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .65s cubic-bezier(.19,1,.22,1),
             transform .65s cubic-bezier(.19,1,.22,1);
}
.section-head-reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* ── stagger delays for children ── */
.stagger>.reveal:nth-child(1){transition-delay:.06s}
.stagger>.reveal:nth-child(2){transition-delay:.14s}
.stagger>.reveal:nth-child(3){transition-delay:.22s}
.stagger>.reveal:nth-child(4){transition-delay:.30s}
.stagger>.reveal:nth-child(5){transition-delay:.38s}
.stagger>.reveal:nth-child(6){transition-delay:.46s}

/* ── metric item pop ── */
.metric-strip.stagger>.reveal:nth-child(1){transition-delay:.08s}
.metric-strip.stagger>.reveal:nth-child(2){transition-delay:.20s}
.metric-strip.stagger>.reveal:nth-child(3){transition-delay:.32s}

/* ── process step number pop on reveal ── */
.process.is-visible span{
  animation:chromeFlow 8s linear infinite, stepPop .5s cubic-bezier(.19,1,.22,1) both;
}
@keyframes stepPop{
  0%{opacity:0;transform:scale(.6) translateY(8px)}
  65%{transform:scale(1.1) translateY(-2px)}
  100%{opacity:1;transform:scale(1) translateY(0)}
}

/* ── prefers-reduced-motion: skip animations ── */
@media(prefers-reduced-motion:reduce){
  .reveal,.reveal--scale,.section-head-reveal{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}

/* ═══════════════════════════════════
   RESPONSIVE
═══════════════════════════════════ */
@media(max-width:1024px){
  h1{font-size:clamp(1.5rem,3.2vw,2.6rem)}
}
@media(max-width:900px){
  .hero{grid-template-columns:1fr;min-height:auto;padding:100px 0 64px;gap:32px}
  .hero__visual{order:-1;margin-top:0}
  .hero__package-logo{width:min(320px,72%)}
  .hero__visual-label{font-size:clamp(1.2rem,5vw,1.8rem)}
  h1{font-size:clamp(1.8rem,6vw,3rem);line-height:.96}
  .feature-grid{grid-template-columns:1fr 1fr}
  .process-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .shell{width:min(100% - 22px,1140px)}
  .topbar__inner{min-height:62px;gap:8px}
  .brand__mark{width:110px;height:auto}
  .brand__text{min-width:90px}
  .brand__text strong{font-size:.7rem;letter-spacing:.2em}
  .brand__text span{font-size:.5rem;letter-spacing:.26em}
  .nav{display:none}
  .language-toggle{width:40px;height:40px}
  .hero{padding:82px 0 48px;gap:20px}
  h1{font-size:clamp(1.8rem,8.5vw,2.6rem);line-height:1.02;word-break:break-word;overflow-wrap:break-word}
  .lead{font-size:.92rem;line-height:1.62}
  .hero__visual{order:-1;margin-top:0}
  .hero__package-logo{width:min(240px,68%)}
  .hero__visual-label{font-size:clamp(1.1rem,7vw,1.6rem);letter-spacing:.35em;margin-top:-14%}
  .hero__actions{flex-direction:column;align-items:stretch;gap:10px}
  .hero__actions .button{width:100%;justify-content:center;min-height:52px;font-size:.72rem}
  .metric-strip{gap:14px;padding-top:20px;margin-top:24px}
  .metric strong{font-size:1.25rem}
  .metric span{font-size:.6rem;max-width:110px}
  .section{padding:52px 0}
  .section>div:first-child{margin-bottom:24px}
  .section h2{font-size:clamp(1.5rem,7.5vw,2.6rem)}
  .eyebrow{font-size:.63rem;letter-spacing:.44em}
  .feature-grid{grid-template-columns:1fr}
  .feature{padding:20px 16px}
  .feature strong{font-size:.82rem}
  .process-grid{grid-template-columns:1fr 1fr}
  .process{padding:18px 14px}
  .process span{font-size:1.7rem}
  .process h3{font-size:.8rem}
  .price-band{padding-bottom:52px}
  .price-box{padding:20px 16px;gap:12px}
  .price-box strong{font-size:clamp(1.9rem,11vw,3.4rem)}
  .price-box span{font-size:.88rem}
  .price-box .button--primary{width:100%;justify-content:center;min-height:52px}
  .footer{padding:26px 0 22px}
  .footer__inner{flex-direction:column;align-items:flex-start;gap:12px}
  .footer__links{gap:10px;flex-wrap:wrap}
  .footer__links a{font-size:.66rem}
}
@media(max-width:420px){
  h1{font-size:clamp(1.6rem,9.5vw,2.2rem);word-break:break-word;overflow-wrap:break-word}
  .hero__package-logo{width:min(200px,72%)}
  .hero__visual-label{font-size:clamp(1rem,7.5vw,1.4rem);letter-spacing:.28em}
  .process-grid{grid-template-columns:1fr}
  .metric-strip{flex-direction:column;gap:12px}
  .metric span{max-width:100%}
  .topbar__package-label{display:none}
}

@media(max-width:600px), (prefers-reduced-motion:reduce){
  .cursor-glow{display:none}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   LEGAL PAGES — dark/light theme via [data-theme] on <html>
   Used by: privacy-policy.html, terms-of-use.html, cookie-policy.html
═══════════════════════════════════════════════════════════════ */

/* ── Token defaults (dark — matches rest of site) ── */
:root {
  --legal-bg:        #07050d;
  --legal-bg2:       #0c0916;
  --legal-ink:       rgba(244,240,255,.88);
  --legal-muted:     rgba(200,190,230,.52);
  --legal-line:      rgba(148,82,255,.18);
  --legal-line2:     rgba(148,82,255,.10);
  --legal-panel:     rgba(255,255,255,.038);
  --legal-panel-hov: rgba(255,255,255,.058);
  --legal-accent:    #9b4dff;
  --legal-accent2:   rgba(148,82,255,.55);
  --legal-aside-act: rgba(148,82,255,.15);
  --legal-aside-ink: rgba(200,190,230,.60);
  --legal-chrome:    linear-gradient(112deg,#e8d8ff 0%,#c07eff 22%,#fff 44%,#a64eff 60%,#cc99ff 80%,#f0e0ff 100%);
  --legal-radius:    8px;
}

/* ── Light overrides ── */
html[data-theme="light"] {
  --legal-bg:        #f7f5fb;
  --legal-bg2:       #f0edf8;
  --legal-ink:       #1a1228;
  --legal-muted:     rgba(60,40,100,.52);
  --legal-line:      rgba(148,82,255,.15);
  --legal-line2:     rgba(148,82,255,.08);
  --legal-panel:     #ffffff;
  --legal-panel-hov: rgba(148,82,255,.04);
  --legal-accent:    #7a28e0;
  --legal-accent2:   rgba(122,40,224,.55);
  --legal-aside-act: rgba(148,82,255,.12);
  --legal-aside-ink: rgba(60,40,100,.55);
  --legal-chrome:    linear-gradient(112deg,#6b1fe8 0%,#9b4dff 40%,#5218b5 70%,#7a28e0 100%);
}

/* ── Legal page body ── */
body.legal-page {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(ellipse 80% 50% at 10% 0%, rgba(100,40,220,.10), transparent),
    radial-gradient(ellipse 60% 40% at 90% 100%, rgba(80,10,180,.07), transparent),
    var(--legal-bg);
  color: var(--legal-ink);
  font-family: "Segoe UI", Arial, sans-serif;
  transition: background .28s ease, color .2s ease;
}

html[data-theme="light"] body.legal-page {
  background:
    radial-gradient(ellipse 80% 50% at 10% 0%, rgba(148,82,255,.06), transparent),
    radial-gradient(ellipse 60% 40% at 90% 100%, rgba(100,40,200,.04), transparent),
    var(--legal-bg);
}

/* grain overlay — dark only */
body.legal-page::before {
  position: fixed; inset: 0; z-index: -1; content: "";
  pointer-events: none; opacity: .018;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}
html[data-theme="light"] body.legal-page::before { opacity: 0; }

/* ── Scrollbar ── */
body.legal-page::-webkit-scrollbar { width: 5px; }
body.legal-page::-webkit-scrollbar-track { background: transparent; }
body.legal-page::-webkit-scrollbar-thumb {
  background: rgba(148,82,255,.28); border-radius: 3px;
}
html[data-theme="light"] body.legal-page::-webkit-scrollbar-thumb {
  background: rgba(148,82,255,.22);
}

/* ── Legal topbar: override generic + add light ── */
html[data-theme="light"] body.legal-page .topbar {
  background: linear-gradient(180deg,rgba(247,245,251,.98),rgba(247,245,251,.80)) !important;
  border-bottom: 1px solid rgba(148,82,255,.14) !important;
}
html[data-theme="light"] body.legal-page .nav a {
  color: rgba(26,18,40,.62);
}
html[data-theme="light"] body.legal-page .nav a:hover {
  color: #1a1228;
  background: rgba(148,82,255,.07);
  border-color: rgba(148,82,255,.18);
}
html[data-theme="light"] body.legal-page .language-toggle {
  color: #1a1228;
  border-color: rgba(148,82,255,.18);
  background: rgba(148,82,255,.04);
}
html[data-theme="light"] body.legal-page .language-toggle:hover {
  border-color: rgba(148,82,255,.35);
  box-shadow: 0 0 16px rgba(148,82,255,.12);
}
html[data-theme="light"] body.legal-page .language-menu {
  background: rgba(247,245,251,.97);
  border-color: rgba(148,82,255,.16);
  box-shadow: 0 16px 48px rgba(60,20,120,.12);
}
html[data-theme="light"] body.legal-page .language-option {
  color: rgba(26,18,40,.72);
}
html[data-theme="light"] body.legal-page .language-option:hover,
html[data-theme="light"] body.legal-page .language-option.is-active {
  color: #1a1228;
  background: rgba(148,82,255,.08);
  border-color: rgba(148,82,255,.18);
}

/* brand sub-label on legal pages */
html[data-theme="light"] body.legal-page .brand > span > span {
  color: rgba(26,18,40,.45);
}
html[data-theme="light"] body.legal-page .brand > span > strong {
  color: rgba(26,18,40,.88);
}

/* ── Legal layout: aside + content ── */
.legal-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 40px;
  padding-top: 120px;
  padding-bottom: 80px;
  align-items: start;
}

/* ── Aside nav ── */
.legal-aside {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 16px;
  border: 1px solid var(--legal-line);
  border-radius: var(--legal-radius);
  background: var(--legal-panel);
}

.legal-aside a {
  display: block;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 5px;
  color: var(--legal-aside-ink);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color .18s, background .18s, border-color .18s;
}

.legal-aside a:hover {
  color: var(--legal-ink);
  background: var(--legal-panel-hov);
  border-color: var(--legal-line);
}

/* Active page highlight */
body[data-page="privacy"] .legal-aside a[href="privacy-policy.html"],
body[data-page="terms"]   .legal-aside a[href="terms-of-use.html"],
body[data-page="cookies"] .legal-aside a[href="cookie-policy.html"] {
  color: var(--legal-accent);
  background: var(--legal-aside-act);
  border-color: var(--legal-line);
}

/* ── Card stack ── */
.legal-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Individual cards ── */
.legal-card {
  padding: 32px 36px;
  border: 1px solid var(--legal-line);
  border-radius: var(--legal-radius);
  background: var(--legal-panel);
  transition: background .2s, border-color .2s;
}

.legal-card:hover {
  background: var(--legal-panel-hov);
  border-color: rgba(148,82,255,.26);
}

html[data-theme="light"] .legal-card {
  box-shadow: 0 2px 16px rgba(60,20,120,.06);
}
html[data-theme="light"] .legal-card:hover {
  box-shadow: 0 4px 24px rgba(60,20,120,.10);
}

/* First card — hero style */
.legal-card:first-child {
  border-color: var(--legal-line2);
  background: linear-gradient(135deg, var(--legal-panel), rgba(148,82,255,.04));
}

/* eyebrow */
.legal-card .eyebrow {
  margin: 0 0 12px;
  color: var(--legal-accent);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .55em;
  text-transform: uppercase;
  opacity: .85;
}

/* h1 inside card */
.legal-card h1 {
  margin: 0 0 18px;
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  font-weight: 900;
  line-height: .96;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--legal-chrome);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: chromeFlow 8s linear infinite;
}

html[data-theme="light"] .legal-card h1 {
  -webkit-text-stroke: 0;
  filter: none;
}

/* h2 inside card */
.legal-card h2 {
  margin: 0 0 14px;
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--legal-ink);
}

/* body text */
.legal-card p {
  margin: 0 0 12px;
  font-size: .96rem;
  line-height: 1.74;
  color: var(--legal-ink);
  opacity: .82;
}
.legal-card p:last-child { margin-bottom: 0; }

/* lists */
.legal-card ul {
  margin: 0;
  padding-left: 1.3em;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.legal-card ul li {
  font-size: .94rem;
  line-height: 1.70;
  color: var(--legal-ink);
  opacity: .80;
}

.legal-card ul li::marker {
  color: var(--legal-accent);
  font-size: .8em;
}

/* ── Legal footer ── */
body.legal-page .footer {
  background: transparent;
  border-top: 1px solid var(--legal-line);
  color: var(--legal-muted);
}

html[data-theme="light"] body.legal-page .footer {
  color: rgba(60,40,100,.48);
}

/* ── Responsive ── */
@media (max-width: 860px) {
  .legal-layout {
    grid-template-columns: 1fr;
    padding-top: 96px;
    gap: 24px;
  }
  .legal-aside {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 16px;
  }
  .legal-aside a {
    font-size: .66rem;
    padding: 7px 11px;
  }
}

@media (max-width: 600px) {
  .legal-card {
    padding: 22px 18px;
  }
  .legal-card h1 {
    font-size: clamp(1.4rem, 8vw, 2rem);
  }
  .legal-card h2 {
    font-size: .95rem;
  }
  .legal-card p,
  .legal-card ul li {
    font-size: .88rem;
  }
}

/* ── Legal page theme-toggle button icon states ── */
body.legal-page [data-theme-toggle] { flex-shrink: 0; }

/* dark → show sun, hide moon */
html[data-theme="dark"] body.legal-page [data-theme-toggle] .theme-toggle__moon,
body.legal-page [data-theme-toggle] .theme-toggle__moon { display: none; }
html[data-theme="dark"] body.legal-page [data-theme-toggle] .theme-toggle__sun { display: block; }

/* light → show moon, hide sun */
html[data-theme="light"] body.legal-page [data-theme-toggle] .theme-toggle__sun { display: none; }
html[data-theme="light"] body.legal-page [data-theme-toggle] .theme-toggle__moon {
  display: block !important;
}