/* =========================================================
   DESIGN TOKENS — dark-throughout
   ========================================================= */
:root{
  /* Brand */
  --brand-cyan:    #0891B2;
  --brand-violet:  #7C3AED;
  --brand-magenta: #C026A0;
  --brand-emerald: #10B981;

  /* Gradients */
  --grad-brand: linear-gradient(135deg, #0891B2 0%, #7C3AED 50%, #C026A0 100%);
  --grad-cta:   linear-gradient(135deg, #7C3AED 0%, #A855F7 50%, #C026A0 100%);
  --grad-text:  linear-gradient(90deg, #A78BFA 0%, #E879CF 100%);

  /* Dark surface system (from PDF visual analysis) */
  --bg:            #0B0D14;
  --bg-alt:        #0E1119;
  --card:          #13151D;
  --card-hover:    #181B26;
  --card-elev:     #1A1D28;
  --border:        #1F2330;
  --border-strong: #2A2F3F;

  /* Text */
  --text:          #F5F7FA;
  --text-body:     #C7CDD8;
  --text-muted:    #8B93A7;
  --text-faint:    #6B7489;

  /* Functional accents (brief card sections) */
  --acc-green:     #10B981;
  --acc-blue:      #5B8DF6;
  --acc-amber:     #F59E0B;
  --acc-pink:      #F472B6;

  /* Containers — fluid for big screens */
  --container-sm:   min(88vw, 820px);
  --container:      min(92vw, 1280px);
  --container-wide: min(94vw, 1440px);

  /* Spacing */
  --space-section: clamp(80px, 9vh, 140px);
  --pad: 24px;

  /* Radius */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  /* Shadows */
  --shadow-card: 0 1px 2px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.02);
  --shadow-cta:  0 12px 30px rgba(124,58,237,.40), inset 0 1px 0 rgba(255,255,255,.16);
  --shadow-cta-h:0 18px 42px rgba(192,38,160,.48);
  --shadow-glow: 0 30px 70px rgba(124,58,237,.28), 0 12px 32px rgba(8,145,178,.20);
}

/* =========================================================
   BASE
   ========================================================= */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter','-apple-system','Segoe UI',Roboto,sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.6;
  font-size:15px;
}
img,svg{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font-family:inherit; cursor:pointer; border:none; background:none}
:focus-visible{outline:2px solid var(--brand-violet); outline-offset:3px; border-radius:6px}

.container     {max-width:var(--container);      margin:0 auto; padding:0 var(--pad)}
.container-sm  {max-width:var(--container-sm);   margin:0 auto; padding:0 var(--pad)}
.container-wide{max-width:var(--container-wide); margin:0 auto; padding:0 var(--pad)}

.section{padding:var(--space-section) 0}

/* =========================================================
   TYPOGRAPHY
   ========================================================= */
h1,h2,h3,h4{margin:0; color:var(--text); font-weight:700; letter-spacing:-.02em; line-height:1.15}
h1{font-size:clamp(40px, 4.6vw, 78px); line-height:1.05; letter-spacing:-.03em; font-weight:800}
h2{font-size:clamp(30px, 3vw, 48px); line-height:1.12}
h3{font-size:clamp(17px, 1.2vw, 20px)}
h4{font-size:14px; font-weight:600}
p{margin:0; color:var(--text-body)}
.lead{font-size:clamp(16px, 1.05vw, 18px); line-height:1.6; color:var(--text-muted)}

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px; border-radius:999px;
  background:rgba(124,58,237,.12);
  border:1px solid rgba(124,58,237,.25);
  color:#C4B5FD;
  font-size:11px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
}
.eyebrow::before{content:"+"; font-size:13px; opacity:.7}

.grad-text{
  background:var(--grad-text);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.section-label{
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--text-faint); font-weight:600;
  display:block; text-align:center; margin-bottom:18px;
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 22px;
  border-radius:12px;
  font-weight:600; font-size:14.5px;
  border:1px solid transparent;
  transition:transform .18s cubic-bezier(.22,1,.36,1), box-shadow .2s ease, background .2s ease;
  white-space:nowrap;
  will-change:transform;
}
.btn-primary{
  background:var(--grad-cta);
  background-size:200% 100%;
  background-position:0 50%;
  color:#fff;
  box-shadow:var(--shadow-cta);
}
.btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:var(--shadow-cta-h);
  background-position:100% 50%;
}
.btn-primary:active{transform:translateY(0)}
.btn-primary.lg{padding:16px 26px; font-size:15.5px; border-radius:14px}
.btn-primary.xl{padding:20px 32px; font-size:16.5px; border-radius:16px}

.btn-ghost{
  background:transparent; color:var(--text);
  border-color:var(--border-strong);
}
.btn-ghost:hover{background:var(--card-hover); border-color:#3A3F50}

.chrome-mark{width:20px; height:20px; flex:none}
.btn-primary.lg .chrome-mark{width:22px; height:22px}
.btn-primary.xl .chrome-mark{width:24px; height:24px}

.btn-dot{
  width:8px; height:8px; border-radius:50%;
  background:rgba(255,255,255,.85);
  box-shadow:0 0 8px rgba(255,255,255,.5);
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(11,13,20,.78);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid rgba(255,255,255,.04);
}
.nav{
  max-width:var(--container-wide);
  margin:0 auto; padding:0 var(--pad);
  display:flex; align-items:center; justify-content:space-between;
  height:72px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-weight:700; font-size:17px;
  letter-spacing:-.01em;
  color:var(--text);
}
.brand-mark{width:26px; height:30px; flex:none}
.nav-links{display:flex; gap:4px}
.nav-links a{
  padding:9px 14px; border-radius:8px;
  color:var(--text-muted); font-weight:500; font-size:14px;
  transition:color .15s ease, background .15s ease;
}
.nav-links a:hover{color:var(--text); background:rgba(255,255,255,.04)}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  padding:clamp(56px, 7vh, 100px) 0 clamp(72px, 8vh, 120px);
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(60% 50% at 70% 30%, rgba(124,58,237,.20) 0%, transparent 60%),
    radial-gradient(50% 40% at 25% 75%, rgba(8,145,178,.13) 0%, transparent 60%),
    radial-gradient(40% 35% at 88% 85%, rgba(192,38,160,.13) 0%, transparent 60%);
  pointer-events:none; z-index:0;
}
.hero-grid{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1.18fr);
  gap:clamp(28px, 3vw, 56px);
  align-items:center;
}
.hero-text{max-width:580px}
.hero-text h1{margin:24px 0 22px}
.hero-text .lead{max-width:520px; line-height:1.6}
.hero-cta{margin-top:32px; display:flex; gap:14px; flex-wrap:wrap}
.hero-note{
  margin-top:18px; display:flex; align-items:center; gap:8px;
  font-size:13px; color:var(--text-faint);
}
.hero-note svg{width:14px; height:14px; opacity:.7}

/* Hero visual: crystal + brief card */
.hero-visual{
  position:relative;
  min-height:560px;
}
.crystal-wrap{
  position:absolute;
  left:-2%; top:50%;
  transform:translateY(-50%);
  width:62%;
  max-width:500px;
  aspect-ratio:1/1.3;
  animation:float 6s ease-in-out infinite;
  z-index:1;
}
.crystal-wrap img{
  width:100%; height:100%;
  object-fit:contain;
  /* Transparent PNG → no blend hacks needed. Just a layered drop-shadow
     stack to give the crystal a believable iridescent glow on the dark hero. */
  filter:
    drop-shadow(0 0 30px rgba(168,85,247,.45))
    drop-shadow(0 16px 36px rgba(124,58,237,.35))
    drop-shadow(0 28px 60px rgba(8,145,178,.20));
}
.crystal-halo{
  /* Crystal has no built-in ground glow — we paint one in CSS. */
  position:absolute; left:50%; top:62%;
  width:70%; height:50%;
  transform:translateX(-50%);
  background:
    radial-gradient(50% 50% at 50% 50%, rgba(168,85,247,.45) 0%, rgba(43,216,198,.18) 50%, transparent 75%),
    radial-gradient(60% 30% at 50% 90%, rgba(192,38,160,.4) 0%, transparent 70%);
  filter:blur(56px); opacity:.9; z-index:0; pointer-events:none;
  animation:halo 8s ease-in-out infinite;
}
@keyframes float{
  0%,100%{transform:translateY(-50%) rotate(-1deg)}
  50%{transform:translateY(calc(-50% - 14px)) rotate(1deg)}
}
@keyframes halo{
  0%,100%{opacity:.85; transform:scale(1)}
  50%{opacity:1; transform:scale(1.06)}
}

/* Brief card (the hero showcase) */
.brief-card{
  position:absolute;
  right:0; top:8px;
  width:min(420px, 56%);
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  padding:22px 22px 20px;
  box-shadow:var(--shadow-glow);
  z-index:3;
}
.brief-head{display:flex; align-items:center; justify-content:space-between; gap:10px}
.brief-brand{display:flex; align-items:center; gap:8px; font-weight:600; font-size:13px; color:var(--text-body)}
.brief-brand .brand-mark{width:18px; height:21px}
.brief-action{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11.5px; font-weight:600; color:#A78BFA;
  padding:4px 10px; border-radius:6px;
  background:rgba(167,139,250,.1);
}
.brief-action svg{width:11px; height:11px}

.brief-title{
  font-size:22px; font-weight:700;
  margin:16px 0 4px;
  letter-spacing:-.01em;
  color:var(--text);
}
.brief-meta{font-size:12px; color:var(--text-faint); margin-bottom:14px}

.brief-section{
  margin-bottom:12px;
}
.brief-section:last-child{margin-bottom:0}
.brief-label{
  display:flex; align-items:center; gap:8px;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
  margin-bottom:6px;
}
.brief-label svg{width:14px; height:14px; flex:none}
.brief-body{font-size:12.5px; color:var(--text-body); line-height:1.5}
.brief-due{
  display:inline-flex; align-items:center; gap:5px;
  margin-top:5px; font-size:11.5px; color:var(--text-faint);
}
.brief-due svg{width:11px; height:11px}
.brief-list{margin:4px 0 0; padding-left:18px}
.brief-list li{font-size:12.5px; color:var(--text-body); line-height:1.5; margin-bottom:3px}

.c-goal     .brief-label{color:var(--acc-green)}
.c-next     .brief-label{color:var(--acc-blue)}
.c-insight  .brief-label{color:var(--acc-amber)}
.c-obstacle .brief-label{color:var(--acc-pink)}

.brief-foot{
  margin-top:14px; padding-top:14px;
  border-top:1px solid rgba(255,255,255,.05);
  font-size:11.5px; color:var(--text-faint);
}

/* =========================================================
   PLATFORMS STRIP
   ========================================================= */
.platforms{padding:48px 0 64px; border-top:1px solid rgba(255,255,255,.04)}
.platforms-row{
  display:flex; justify-content:center; align-items:center;
  gap:clamp(20px, 3vw, 56px); flex-wrap:wrap;
  margin-top:28px;
}
.platform{
  display:inline-flex; align-items:center; gap:10px;
  color:var(--text-body); font-weight:600; font-size:16px;
  letter-spacing:-.01em; opacity:.7;
  transition:opacity .2s ease;
}
.platform:hover{opacity:1}
.platform-dot{
  width:9px; height:9px; border-radius:50%;
  background:var(--grad-brand);
}

/* =========================================================
   FEATURES (4-card grid like PDF)
   ========================================================= */
.features{padding:clamp(60px, 7vh, 100px) 0}
.features-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px;
}
.feature-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:28px 22px;
  text-align:center;
  transition:transform .22s cubic-bezier(.22,1,.36,1), border-color .22s ease, background .22s ease;
}
.feature-card:hover{
  transform:translateY(-3px);
  border-color:var(--border-strong);
  background:var(--card-hover);
}
.feature-icon{
  width:54px; height:54px; border-radius:14px;
  display:grid; place-items:center;
  margin:0 auto 16px;
  border:1px solid;
}
.feature-icon svg{width:24px; height:24px}
.feature-card h3{font-size:16px; margin-bottom:6px; font-weight:700}
.feature-card p{font-size:13.5px; color:var(--text-muted); line-height:1.55}

.f-violet{background:rgba(124,58,237,.12); border-color:rgba(124,58,237,.3); color:#A78BFA}
.f-blue  {background:rgba(91,141,246,.12); border-color:rgba(91,141,246,.3); color:#93C5FD}
.f-green {background:rgba(16,185,129,.12); border-color:rgba(16,185,129,.3); color:#6EE7B7}
.f-amber {background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.3); color:#FCD34D}

/* =========================================================
   HOW IT WORKS (3 steps with arrows like PDF)
   ========================================================= */
.how{padding:clamp(80px, 9vh, 120px) 0}
.how-header{text-align:center; margin-bottom:64px}
.how-header h2{font-size:clamp(28px, 2.8vw, 42px)}
.how-header p{margin-top:14px; color:var(--text-muted)}

.steps{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr;
  align-items:start; gap:12px;
  max-width:1100px; margin:0 auto;
}
.step{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:0 12px; max-width:320px; justify-self:center;
}
.step-circle{
  position:relative;
  width:78px; height:78px; border-radius:50%;
  background:var(--card);
  border:1px solid var(--border-strong);
  display:grid; place-items:center;
  margin-bottom:18px;
}
.step-circle svg{width:34px; height:34px}
.step-badge{
  position:absolute; top:-6px; right:-6px;
  width:26px; height:26px; border-radius:50%;
  color:#fff; font-weight:700; font-size:13px;
  display:grid; place-items:center;
  box-shadow:0 4px 12px rgba(0,0,0,.4);
}
.step h3{font-size:17px; margin-bottom:8px; font-weight:700}
.step p{font-size:14px; color:var(--text-muted); line-height:1.6; max-width:240px}

.s1 .step-circle{color:#A78BFA} .s1 .step-badge{background:var(--brand-violet)}
.s2 .step-circle{color:#5DADE2} .s2 .step-badge{background:var(--acc-blue)}
.s3 .step-circle{color:#6EE7B7} .s3 .step-badge{background:var(--brand-emerald)}

.arrow{align-self:center; color:var(--text-faint); padding-top:30px; opacity:.4}
.arrow svg{width:42px; height:14px}

/* =========================================================
   PRESETS (4-card grid)
   ========================================================= */
.presets{padding:clamp(60px, 7vh, 100px) 0; background:var(--bg-alt)}
.presets-header{text-align:center; margin-bottom:56px}
.presets-header h2{margin-top:14px}
.presets-header p{margin-top:14px; color:var(--text-muted); max-width:560px; margin-left:auto; margin-right:auto}

.presets-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px;
}
.preset-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:26px 22px;
  position:relative;
  transition:transform .22s cubic-bezier(.22,1,.36,1), border-color .22s ease;
}
.preset-card:hover{transform:translateY(-3px); border-color:var(--border-strong)}
.preset-mark{
  width:48px; height:48px; border-radius:14px;
  display:grid; place-items:center;
  font-size:24px; font-weight:700;
  margin-bottom:18px;
}
.p-universal .preset-mark{background:rgba(16,185,129,.12); color:#6EE7B7}
.p-technical .preset-mark{background:rgba(124,58,237,.12); color:#A78BFA}
.p-brain     .preset-mark{background:rgba(192,38,160,.12); color:#F0ABDD}
.p-summary   .preset-mark{background:rgba(8,145,178,.12);  color:#67E8F9}

.preset-card h3{font-size:18px; margin-bottom:6px; display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.preset-tier{
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
  padding:3px 9px; border-radius:999px;
}
.tier-free{background:rgba(16,185,129,.15); color:#6EE7B7}
.tier-pro {background:var(--grad-brand); color:#fff}

.preset-card .tag{font-size:12px; color:var(--text-faint); margin-bottom:12px; letter-spacing:.02em}
.preset-card p{font-size:13.5px; color:var(--text-muted); line-height:1.55}

/* =========================================================
   PRICING
   ========================================================= */
.pricing{padding:clamp(80px, 9vh, 120px) 0}
.pricing-header{text-align:center; margin-bottom:56px}
.pricing-header h2{margin-top:14px}
.pricing-header p{margin-top:14px; color:var(--text-muted)}

.pricing-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:20px;
  max-width:980px; margin:0 auto;
}
.plan{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:24px;
  padding:32px;
  display:flex; flex-direction:column; gap:22px;
  position:relative;
}
.plan-pro{
  background:linear-gradient(180deg, var(--card) 0%, rgba(124,58,237,.06) 100%);
  border:1.5px solid transparent;
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    var(--grad-brand) border-box;
}
.plan-head{display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap}
.plan-name{
  font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text);
}
.plan-trial{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px; border-radius:999px;
  background:rgba(16,185,129,.12); color:#6EE7B7;
  font-size:11px; font-weight:600; letter-spacing:.06em;
}
.plan-price{display:flex; align-items:baseline; gap:8px}
.plan-amount{font-size:clamp(40px, 3.6vw, 60px); font-weight:800; letter-spacing:-.03em; line-height:1}
.plan-period{font-size:15px; color:var(--text-muted)}
.plan ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px}
.plan li{display:flex; gap:11px; font-size:14.5px; color:var(--text-body); line-height:1.5}
.plan li svg{width:18px; height:18px; flex:none; color:var(--brand-violet); margin-top:1px}
.plan-free li svg{color:var(--text-faint)}
.plan .btn{justify-content:center; margin-top:auto}

.pricing-aside{
  margin:32px auto 0; max-width:980px;
  padding:18px 22px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap;
  font-size:14px; color:var(--text-muted);
}
.pricing-aside b{color:var(--text); font-weight:600}

/* =========================================================
   CTA BAND (PDF-style: quote + stats + CTA)
   ========================================================= */
.cta-band-wrap{padding:clamp(56px, 6vh, 88px) 0}
.cta-band{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  padding:32px;
  display:grid;
  grid-template-columns:1.2fr auto 1fr;
  gap:28px;
  align-items:center;
  position:relative;
  overflow:hidden;
}
.cta-band::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(60% 80% at 50% 50%, rgba(124,58,237,.08) 0%, transparent 65%);
  pointer-events:none;
}
.cta-quote{position:relative; padding-left:34px; z-index:1}
.cta-quote .mark{
  position:absolute; left:0; top:-8px;
  font-family:Georgia,serif; font-size:54px;
  color:var(--brand-violet); line-height:1; font-weight:700;
}
.cta-quote .line{font-size:17px; line-height:1.45; font-weight:500; color:var(--text); margin-bottom:6px}
.cta-quote .who{font-size:13px; color:var(--text-faint)}

.cta-stats{text-align:center; position:relative; z-index:1}
.cta-stats-num{font-size:30px; font-weight:800; letter-spacing:-.02em; line-height:1}
.cta-stats-num.gradient{background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent}
.cta-stats-lbl{font-size:13px; color:var(--text-muted); margin-top:6px}

.cta-right{display:flex; flex-direction:column; align-items:flex-end; gap:8px; position:relative; z-index:1}
.cta-right .sub{font-size:12.5px; color:var(--text-faint); text-align:right}

/* =========================================================
   TRUST STRIP (3 columns at the bottom, like PDF)
   ========================================================= */
.trust-strip{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:20px;
  padding:36px 0 56px;
  border-top:1px solid rgba(255,255,255,.04);
  margin-top:36px;
}
.ts-item{display:flex; align-items:flex-start; gap:14px}
.ts-icon{
  width:38px; height:38px; border-radius:10px;
  background:rgba(124,58,237,.10);
  border:1px solid rgba(124,58,237,.22);
  display:grid; place-items:center;
  color:#A78BFA; flex:none;
}
.ts-icon svg{width:18px; height:18px}
.ts-item h4{font-size:14px; color:var(--text); margin:2px 0 3px; font-weight:600}
.ts-item p{font-size:13px; color:var(--text-muted); line-height:1.45}

/* =========================================================
   FAQ
   ========================================================= */
.faq{padding:clamp(80px, 9vh, 120px) 0; background:var(--bg-alt)}
.faq-header{text-align:center; margin-bottom:48px}
.faq-list{max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:10px}
.faq-item{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  transition:border-color .2s ease;
}
.faq-item[open]{border-color:rgba(124,58,237,.4)}
.faq-item summary{
  cursor:pointer;
  list-style:none;
  padding:20px 22px;
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  font-size:15.5px; font-weight:600;
  color:var(--text);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:""; width:14px; height:14px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%238B93A7' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M1 4.5l6 5 6-5'/%3E%3C/svg%3E");
  background-size:contain; background-repeat:no-repeat;
  transition:transform .2s ease;
  flex:none;
}
.faq-item[open] summary::after{transform:rotate(180deg)}
.faq-item .answer{
  padding:0 22px 20px;
  font-size:14.5px; line-height:1.65; color:var(--text-muted);
}
.faq-group-label{
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--text-faint); font-weight:600;
  margin:24px 0 10px; padding-left:6px;
}
.faq-group-label:first-child{margin-top:0}

/* =========================================================
   FOOTER
   ========================================================= */
footer.site-foot{
  padding:48px 0 32px;
  border-top:1px solid var(--border);
  font-size:13px;
  color:var(--text-muted);
}
.foot-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:40px;
  margin-bottom:32px;
}
.foot-col h4{
  color:var(--text); font-size:12px;
  letter-spacing:.12em; text-transform:uppercase; font-weight:700;
  margin-bottom:14px;
}
.foot-col a{display:block; padding:5px 0; color:var(--text-muted); transition:color .15s ease}
.foot-col a:hover{color:var(--text)}
.foot-brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:17px; color:var(--text); margin-bottom:14px}
.foot-tag{color:var(--text-muted); max-width:340px; line-height:1.6}
.foot-bottom{
  padding-top:24px; border-top:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  font-size:12px; color:var(--text-faint);
}

/* =========================================================
   SCROLL REVEAL
   ========================================================= */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1)}
.reveal.is-visible{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  .crystal-wrap, .crystal-halo{animation:none !important}
  .reveal{opacity:1 !important; transform:none !important; transition:none !important}
  *{transition-duration:0.01ms !important; animation-duration:0.01ms !important}
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1100px){
  .hero-grid{grid-template-columns:1fr; gap:60px}
  .hero-visual{min-height:480px; max-width:520px; margin:0 auto}
  .crystal-wrap{left:0; width:55%}
  .brief-card{width:min(380px, 56%)}
  .features-grid{grid-template-columns:repeat(2, 1fr)}
  .presets-grid{grid-template-columns:repeat(2, 1fr)}
  .steps{grid-template-columns:1fr; gap:36px}
  .arrow{display:none}
  .pricing-grid{grid-template-columns:1fr}
  .cta-band{grid-template-columns:1fr; text-align:center}
  .cta-quote{padding-left:0}
  .cta-quote .mark{position:static; display:block; margin-bottom:8px}
  .cta-right{align-items:center}
  .cta-right .sub{text-align:center}
  .trust-strip{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr; gap:32px}
}
@media (max-width:680px){
  .nav-links{display:none}
  .nav .btn-primary{padding:9px 14px; font-size:13.5px}
  .hero{padding:40px 0 56px}
  .hero-cta{flex-direction:column; align-items:stretch}
  .hero-cta .btn{justify-content:center}
  .hero-visual{min-height:420px}
  .crystal-wrap{position:relative; left:auto; top:auto; transform:none; width:100%; max-width:300px; animation:none; margin:0 auto}
  .brief-card{position:relative; right:auto; top:auto; width:100%; margin-top:-30px}
  .features-grid{grid-template-columns:1fr}
  .presets-grid{grid-template-columns:1fr}
  .cta-band{padding:24px}
  .foot-grid{grid-template-columns:1fr}
}

/* Language switcher */
.nav-actions{display:flex; align-items:center; gap:14px}
.lang-switch{display:flex; gap:2px; background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:8px; padding:2px}
.lang-switch a{padding:6px 10px; border-radius:6px; font-size:13px; font-weight:600; color:var(--text-muted); transition:color .15s ease, background .15s ease; text-decoration:none}
.lang-switch a.active{background:var(--card-hover); color:var(--text)}
.lang-switch a:hover{color:var(--text)}