/* SiteReply — Aurora theme. Dark hero + premium SaaS-vault rhythm.
   Reuses every class from sections.jsx; overrides via fresh token + section rules. */

:root{
  /* Dark ground */
  --bg-dark: #0E1428;
  --bg-dark-2: #141B33;
  --bg-dark-3: #1A2240;
  --on-dark: #EEF1F6;
  --on-dark-2: rgba(238,241,246,.78);
  --on-dark-3: rgba(238,241,246,.58);
  --on-dark-4: rgba(238,241,246,.40);
  --line-dark: rgba(255,255,255,.10);
  --line-dark-2: rgba(255,255,255,.06);

  /* Light ground */
  --bg-light: #F4F5FB;
  --bg-light-2: #FFFFFF;
  --bg-light-3: #ECEEF6;
  --on-light: #1A2236;
  --on-light-2: #2C3447;
  --on-light-3: #5B6478;
  --on-light-4: #9099AC;
  --line: rgba(26,34,54,.10);
  --line-2: rgba(26,34,54,.05);

  /* Aurora accents */
  --accent: #4F6EF7;
  --accent-2: #7C7AE6;
  --accent-glow: #A5B4FF;
  --accent-warm: #FFD1B8;
  --accent-soft: #EEF2FF;
  --accent-ink: #3B4FD9;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --maxw: 1280px;
  --gutter: 56px;
  --font-display: "Geist", "Inter", system-ui, sans-serif;
  --font-body: "Geist", "Inter", system-ui, sans-serif;
  --font-italic: "Instrument Serif", "Times New Roman", serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg-dark);color:var(--on-dark);
  font-family:var(--font-body);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font-family:inherit;color:inherit}
img{max-width:100%;display:block}
::selection{background:var(--accent);color:#fff}

/* ── Reusable aurora layer ──────────────────────────────── */
.aurora-bg{position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(900px 500px at 15% 10%, rgba(124,122,230,.32), transparent 60%),
    radial-gradient(700px 500px at 85% -5%, rgba(79,110,247,.28), transparent 60%),
    radial-gradient(800px 600px at 50% 100%, rgba(91,164,214,.18), transparent 60%)}
.aurora-grid{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse at center, #000 35%, transparent 80%);
          mask-image:radial-gradient(ellipse at center, #000 35%, transparent 80%)}

/* ── Buttons ────────────────────────────────────────────── */
.ce-btn{display:inline-flex;align-items:center;gap:8px;
  padding:10px 16px;border-radius:8px;border:1px solid transparent;
  font-weight:500;font-size:14px;letter-spacing:.005em;cursor:default;white-space:nowrap;
  transition:transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease}
.ce-btn-sm{padding:8px 12px;font-size:13px;border-radius:7px}
.ce-btn-xs{padding:5px 9px;font-size:12px;border-radius:5px}
.ce-btn-lg{padding:13px 22px;font-size:14.5px;border-radius:10px}
.ce-btn-block{width:100%;justify-content:center}
.ce-btn-primary{background:#fff;color:var(--bg-dark);border-color:#fff;
  box-shadow:0 8px 32px -10px rgba(255,255,255,.5), 0 1px 0 rgba(255,255,255,.6) inset}
.ce-btn-primary:hover{background:var(--accent);border-color:var(--accent);color:#fff;
  box-shadow:0 8px 32px -10px rgba(79,110,247,.6), 0 1px 0 rgba(255,255,255,.15) inset}
.ce-btn-ghost{background:rgba(255,255,255,.06);color:var(--on-dark);
  border-color:rgba(255,255,255,.14);backdrop-filter:blur(12px)}
.ce-btn-ghost:hover{background:rgba(255,255,255,.10)}
.ce-btn-outline{background:transparent;color:var(--on-light);border-color:var(--on-light)}
.ce-btn-outline:hover{background:var(--on-light);color:#fff}
.ce-btn-light{background:rgba(255,255,255,.10);color:var(--on-dark);border-color:rgba(255,255,255,.18);
  backdrop-filter:blur(12px)}
.ce-btn-light:hover{background:rgba(255,255,255,.16)}

/* ── Atoms ──────────────────────────────────────────────── */
.ce-eyebrow{display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:11.5px;text-transform:uppercase;
  letter-spacing:.1em;color:var(--on-dark-2);
  padding:5px 11px;border:1px solid rgba(255,255,255,.14);border-radius:999px;
  background:rgba(255,255,255,.05);backdrop-filter:blur(12px)}
.ce-eyebrow-light{color:var(--on-dark);border-color:rgba(255,255,255,.20)}
.ce-dot{width:7px;height:7px;border-radius:50%;background:var(--on-dark-3);display:inline-block}
.ce-dot-live{background:var(--accent-glow);box-shadow:0 0 10px var(--accent-glow)}
.ce-mono{font-family:var(--font-mono);font-size:12.5px}

.ce-seclabel{font-family:var(--font-mono);font-size:11.5px;
  text-transform:uppercase;letter-spacing:.12em;color:var(--on-dark-3);
  margin-bottom:28px;display:inline-flex;align-items:center;gap:10px}

/* ── Headings ───────────────────────────────────────────── */
.ce-h1{font-family:var(--font-display);font-weight:500;font-size:clamp(40px,5vw,72px);
  line-height:1.04;letter-spacing:-.025em;margin:22px 0 22px;
  text-wrap:balance;color:var(--on-dark)}
.ce-h1 span{display:block}
.ce-h1-em{display:block;font-family:var(--font-italic);font-style:italic;font-weight:400;
  background:linear-gradient(120deg, var(--accent-glow) 0%, #C9C4FF 50%, var(--accent-warm) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-size:1.08em;letter-spacing:-.01em;padding-bottom:.05em}
.ce-h2{font-family:var(--font-display);font-weight:500;font-size:clamp(32px,3.2vw,48px);
  line-height:1.06;letter-spacing:-.02em;margin:0 0 14px;text-wrap:balance;color:var(--on-dark)}
.ce-h2-wide{max-width:780px}
.ce-lead{font-size:17px;line-height:1.55;color:var(--on-dark-2);max-width:54ch;margin:0}

/* ── Shell ──────────────────────────────────────────────── */
.ce-section{max-width:var(--maxw);margin:0 auto;padding:104px var(--gutter);position:relative;z-index:1}

/* ── Nav (glass on dark) ────────────────────────────────── */
.ce-nav{position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:32px;padding:16px var(--gutter);
  background:rgba(14,20,40,.7);backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border-bottom:1px solid var(--line-dark-2)}
.ce-brand{display:inline-flex;align-items:center;gap:10px;font-weight:600;letter-spacing:-.005em;color:var(--on-dark)}
.ce-logo{width:22px;height:22px;border-radius:6px;
  background:linear-gradient(135deg, var(--accent-2), var(--accent));
  display:inline-grid;place-items:center;position:relative;
  box-shadow:0 0 16px rgba(124,122,230,.5)}
.ce-logo::before{content:"";position:absolute;inset:auto 4px 4px auto;
  width:7px;height:7px;background:#fff;border-radius:50%;opacity:.85}
.ce-logo-dot{display:none}
.ce-brand-name{font-size:15.5px}
.ce-navlinks{display:flex;gap:26px;font-size:14px;color:var(--on-dark-2);margin-left:8px;white-space:nowrap}
.ce-navlinks a:hover{color:var(--on-dark)}
.ce-navright{margin-left:auto;display:flex;align-items:center;gap:14px}
.ce-navsignin{font-size:14px;color:var(--on-dark-2)}
.ce-navsignin:hover{color:var(--on-dark)}
.ce-langtog{display:inline-flex;border:1px solid var(--line-dark);border-radius:999px;
  padding:2px;background:rgba(255,255,255,.04)}
.ce-langtog button{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;
  background:transparent;border:0;padding:5px 10px;border-radius:999px;color:var(--on-dark-3);cursor:default;
  transition:background .15s ease, color .15s ease}
.ce-langtog button:hover{background:var(--accent);color:#fff}
.ce-langtog button.on{background:#fff;color:var(--bg-dark)}
.ce-langtog button.on:hover{background:var(--accent);color:#fff}

/* ── HERO (dark + aurora) ───────────────────────────────── */
.ce-hero{max-width:var(--maxw);margin:0 auto;padding:80px var(--gutter) 80px;position:relative;z-index:1}
.ce-hero::before{content:"";position:absolute;inset:-40px -200px -40px -200px;z-index:-1;
  background:
    radial-gradient(800px 400px at 12% 30%, rgba(124,122,230,.32), transparent 60%),
    radial-gradient(700px 400px at 88% 10%, rgba(79,110,247,.28), transparent 60%),
    radial-gradient(900px 500px at 55% 110%, rgba(91,164,214,.18), transparent 65%)}
.ce-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center}
.ce-hero-copy{padding-right:12px}
.ce-hero-sub{font-size:18px;line-height:1.55;color:var(--on-dark-2);max-width:46ch;margin:0 0 30px}
.ce-hero-ctas{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:36px}
.ce-prooflist{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;
  border-top:1px solid var(--line-dark);padding-top:22px;max-width:520px}
.ce-prooflist li{display:flex;align-items:baseline;gap:14px;font-size:14.5px;color:var(--on-dark-2)}
.ce-proofnum{font-family:var(--font-mono);font-size:11px;color:var(--on-dark-4);letter-spacing:.06em;min-width:22px}

.ce-hero-visual{position:relative;display:flex;justify-content:center}
.ce-hero-visual::before{content:"";position:absolute;inset:-30px;z-index:0;
  background:radial-gradient(closest-side, rgba(124,122,230,.45), transparent 70%);
  filter:blur(20px)}

.ce-trust{display:flex;align-items:center;gap:18px;justify-content:center;
  padding:32px 0 0;color:var(--on-dark-3);font-size:13.5px;position:relative;z-index:1}
.ce-trust-line{flex:1;max-width:140px;height:1px;background:var(--line-dark)}
.ce-trust-text{font-family:var(--font-mono);font-size:11.5px;text-transform:uppercase;
  letter-spacing:.12em;text-align:center}

/* ── Widget mock (glassmorphic on dark, white on light) ─ */
.ce-widget{width:100%;max-width:400px;border-radius:22px;overflow:hidden;
  position:relative;z-index:1;
  display:flex;flex-direction:column;min-height:480px;
  background:rgba(20,28,52,.65);color:var(--on-dark);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  box-shadow:0 1px 0 rgba(255,255,255,.10) inset,
             0 40px 80px -30px rgba(0,0,0,.7),
             0 8px 24px -10px rgba(0,0,0,.4)}
.ce-widget-compact{min-height:460px}
.ce-widget-head{display:flex;align-items:center;gap:12px;padding:14px 14px 12px;
  border-bottom:1px solid var(--line-dark);background:rgba(255,255,255,.03)}
.ce-widget-avatar{width:34px;height:34px;border-radius:50%;
  background:rgba(165,180,255,.15);display:grid;place-items:center;position:relative;flex-shrink:0;
  border:1px solid rgba(165,180,255,.4)}
.ce-widget-avatar span{width:10px;height:10px;border-radius:50%;background:var(--accent-glow);
  box-shadow:0 0 10px var(--accent-glow)}
.ce-widget-meta{flex:1;min-width:0}
.ce-widget-title{font-weight:600;font-size:14px;line-height:1.2;color:var(--on-dark)}
.ce-widget-sub{font-size:12px;color:var(--on-dark-3);display:flex;align-items:center;gap:6px;margin-top:2px}
.ce-widget-x{width:28px;height:28px;border-radius:50%;border:0;
  background:transparent;color:var(--on-dark-3);font-size:18px;line-height:1;cursor:default}
.ce-widget-x:hover{background:rgba(255,255,255,.08);color:var(--on-dark)}
.ce-widget-body{flex:1;padding:18px 14px;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.ce-bubble{max-width:84%;padding:10px 14px;border-radius:14px;font-size:14px;line-height:1.45;
  animation:bubbleIn .35s ease both}
.ce-bubble-bot{align-self:flex-start;background:rgba(255,255,255,.07);color:var(--on-dark);
  border:1px solid rgba(255,255,255,.06);
  border-bottom-left-radius:4px}
.ce-bubble-user{align-self:flex-end;background:var(--accent);color:#fff;
  border-bottom-right-radius:4px;
  box-shadow:0 6px 20px -6px rgba(79,110,247,.6)}
.ce-bubble-typing{display:inline-flex;gap:4px;padding:14px;width:auto}
.ce-bubble-typing span{width:6px;height:6px;border-radius:50%;background:var(--on-dark-3);
  animation:typing 1.1s infinite ease}
.ce-bubble-typing span:nth-child(2){animation-delay:.15s}
.ce-bubble-typing span:nth-child(3){animation-delay:.3s}
.ce-cite{margin-top:6px;font-family:var(--font-mono);font-size:11px;
  color:var(--accent-glow);letter-spacing:.02em}
.ce-cursor{display:inline-block;width:7px;height:1em;background:var(--accent-glow);
  margin-left:2px;vertical-align:-2px;animation:blink 1s steps(2) infinite}
@keyframes bubbleIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes typing{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-3px);opacity:1}}
@keyframes blink{50%{opacity:0}}
.ce-widget-input{display:flex;align-items:center;gap:8px;padding:10px 10px 12px;
  border-top:1px solid var(--line-dark);background:rgba(255,255,255,.02)}
.ce-widget-input input{flex:1;border:1px solid var(--line-dark);background:rgba(255,255,255,.06);
  border-radius:999px;padding:9px 14px;font:inherit;font-size:13.5px;color:var(--on-dark);outline:0}
.ce-widget-input input::placeholder{color:var(--on-dark-3)}
.ce-widget-input button{width:34px;height:34px;border-radius:50%;border:0;
  background:var(--accent);color:#fff;display:grid;place-items:center;cursor:default;
  box-shadow:0 6px 16px -4px rgba(79,110,247,.6)}
.ce-widget-input button:hover{background:var(--accent-glow);color:var(--bg-dark)}

/* ─── Sections that are LIGHT ─────────────────────────── */
/* (We invert the section by giving it a class via parent, but since
   sections.jsx doesn't expose that, we target by section class.) */

/* Problem: LIGHT */
.ce-problem{background:var(--bg-light);color:var(--on-light);
  box-shadow:0 0 0 100vmax var(--bg-light);clip-path:inset(0 -100vmax);border-top:0}
.ce-problem .ce-seclabel{color:var(--on-light-3)}
.ce-problem .ce-h2{color:var(--on-light)}
.ce-problem .ce-lead{color:var(--on-light-2)}
.ce-problem-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.ce-outcomes{list-style:none;padding:0;margin:0;display:flex;flex-direction:column}
.ce-outcomes li{padding:18px 0;border-top:1px solid var(--line-2);
  display:grid;grid-template-columns:160px 1fr;gap:24px;align-items:baseline}
.ce-outcomes li:last-child{border-bottom:1px solid var(--line-2)}
.ce-outcomes strong{font-family:var(--font-italic);font-style:italic;font-weight:400;
  font-size:26px;color:var(--accent);letter-spacing:-.005em}
.ce-outcomes span{color:var(--on-light-2);font-size:15.5px;line-height:1.5}

/* Demo: DARK + soft aurora — the widget glows beautifully here */
.ce-demo{background:transparent;position:relative;overflow:hidden}
.ce-demo::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(700px 400px at 90% 10%, rgba(124,122,230,.20), transparent 60%),
    radial-gradient(600px 400px at 10% 90%, rgba(79,110,247,.16), transparent 60%)}
.ce-demo-head{margin-bottom:48px;max-width:780px;position:relative;z-index:1}
.ce-demo-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center;position:relative;z-index:1}
.ce-dash{background:rgba(20,28,52,.6);border:1px solid var(--line-dark);border-radius:var(--radius-xl);
  overflow:hidden;backdrop-filter:blur(20px) saturate(180%);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.06) inset}
.ce-dash-bar{display:flex;align-items:center;gap:6px;padding:12px 14px;
  border-bottom:1px solid var(--line-dark);background:rgba(255,255,255,.02)}
.ce-dash-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.15)}
.ce-dash-dot:nth-child(1){background:#FF6B6B}
.ce-dash-dot:nth-child(2){background:#FFC94B}
.ce-dash-dot:nth-child(3){background:#7BD4A4}
.ce-dash-title{margin-left:14px;font-family:var(--font-mono);font-size:11.5px;
  color:var(--on-dark-3);letter-spacing:.06em}
.ce-dash-body{padding:18px}
.ce-dash-tabs{display:flex;gap:18px;border-bottom:1px solid var(--line-dark);
  padding-bottom:12px;margin-bottom:14px;font-size:13px;color:var(--on-dark-3)}
.ce-dash-tabs span{padding-bottom:6px;position:relative;cursor:default}
.ce-dash-tabs span.on{color:var(--on-dark);font-weight:500}
.ce-dash-tabs span.on::after{content:"";position:absolute;left:0;right:0;bottom:-13px;
  height:2px;background:var(--accent-glow);border-radius:1px;box-shadow:0 0 8px var(--accent-glow)}
.ce-dash-table{width:100%;border-collapse:collapse;font-size:13.5px}
.ce-dash-table th{text-align:left;font-weight:500;color:var(--on-dark-3);font-size:11.5px;
  text-transform:uppercase;letter-spacing:.08em;padding:8px 4px;font-family:var(--font-mono)}
.ce-dash-table td{padding:10px 4px;border-top:1px solid var(--line-dark);vertical-align:middle;color:var(--on-dark-2)}
.ce-pill{display:inline-block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;
  padding:3px 8px;border-radius:999px;background:rgba(165,180,255,.12);color:var(--accent-glow);
  border:1px solid rgba(165,180,255,.18);text-transform:uppercase}
.ce-state{display:inline-flex;align-items:center;gap:6px;color:var(--accent-glow);font-size:12.5px}
.ce-embed-box{margin-top:16px;display:flex;align-items:center;gap:10px;
  padding:11px 14px;background:rgba(0,0,0,.35);color:var(--on-dark);
  border:1px solid var(--line-dark);border-radius:10px;overflow:hidden}
.ce-embed-box .ce-mono{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:12px}
.ce-embed-box .ce-btn-ghost{border-color:rgba(255,255,255,.16);color:var(--on-dark);background:transparent;padding:4px 10px;font-size:11.5px}
.ce-embed-box .ce-btn-ghost:hover{background:rgba(255,255,255,.08)}

/* Features: LIGHT — breathing room between two dark sections */
.ce-features{background:var(--bg-light);color:var(--on-light);
  box-shadow:0 0 0 100vmax var(--bg-light);clip-path:inset(0 -100vmax);border-top:0}
.ce-features .ce-seclabel{color:var(--on-light-3)}
.ce-features .ce-h2{color:var(--on-light);margin-bottom:48px}
.ce-feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ce-feat{padding:28px 26px;display:flex;flex-direction:column;gap:8px;
  background:var(--bg-light-2);border:1px solid var(--line-2);border-radius:var(--radius-lg);
  transition:transform .2s ease, box-shadow .2s ease}
.ce-feat:hover{transform:translateY(-2px);box-shadow:0 16px 40px -20px rgba(26,34,54,.18)}
.ce-feat-n{font-family:var(--font-mono);font-size:11px;color:var(--accent);letter-spacing:.08em;margin-bottom:18px;
  display:inline-flex;align-items:center;gap:6px}
.ce-feat-n::before{content:"";width:18px;height:1px;background:var(--accent)}
.ce-feat h3{font-family:var(--font-display);font-weight:600;font-size:19px;letter-spacing:-.01em;margin:0;color:var(--on-light)}
.ce-feat p{margin:0;font-size:14.5px;color:var(--on-light-2);line-height:1.55}

/* How: LIGHT, vertical aurora connector */
.ce-how{background:var(--bg-light);color:var(--on-light);
  box-shadow:0 0 0 100vmax var(--bg-light);clip-path:inset(0 -100vmax);border-top:0}
.ce-how .ce-seclabel{color:var(--on-light-3)}
.ce-how .ce-h2{color:var(--on-light);margin-bottom:56px}
.ce-steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:32px;position:relative}
.ce-steps li{padding:32px 26px;display:flex;flex-direction:column;gap:14px;align-items:flex-start;
  background:var(--bg-light-2);border:1px solid var(--line-2);border-radius:var(--radius-lg);position:relative}
.ce-step-n{font-family:var(--font-mono);font-size:14px;color:#fff;
  width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(135deg, var(--accent-2), var(--accent));
  box-shadow:0 8px 20px -6px rgba(79,110,247,.55)}
.ce-steps h3{font-family:var(--font-display);font-weight:600;font-size:20px;letter-spacing:-.01em;margin:0;color:var(--on-light)}
.ce-steps p{margin:0;font-size:14.5px;color:var(--on-light-2);line-height:1.55;max-width:34ch}

/* Security: DARK + aurora — premium controls panel */
.ce-sec{background:var(--bg-dark-2);color:var(--on-dark);
  box-shadow:0 0 0 100vmax var(--bg-dark-2);clip-path:inset(0 -100vmax);border-top:0;
  position:relative;overflow:visible}
.ce-sec::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(700px 400px at 85% 50%, rgba(124,122,230,.28), transparent 60%),
    radial-gradient(600px 400px at 15% 50%, rgba(79,110,247,.18), transparent 60%)}
.ce-sec-grid{position:relative;z-index:1;
  display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:center}
.ce-sec .ce-seclabel{color:var(--on-dark-3)}
.ce-sec .ce-h2{color:var(--on-dark)}
.ce-sec .ce-lead{color:var(--on-dark-2)}
.ce-sec-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column}
.ce-sec-list li{padding:18px 0;border-top:1px solid var(--line-dark);
  display:flex;align-items:center;gap:14px;font-size:15.5px;color:var(--on-dark)}
.ce-sec-list li:last-child{border-bottom:1px solid var(--line-dark)}
.ce-sec-list svg{color:var(--accent-glow);flex-shrink:0;filter:drop-shadow(0 0 6px rgba(165,180,255,.5))}

/* Uses: LIGHT */
.ce-uses{background:var(--bg-light);color:var(--on-light);
  box-shadow:0 0 0 100vmax var(--bg-light);clip-path:inset(0 -100vmax);border-top:0}
.ce-uses .ce-seclabel{color:var(--on-light-3)}
.ce-uses .ce-h2{color:var(--on-light);margin-bottom:48px}
.ce-uses-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ce-use{padding:30px;border:1px solid var(--line-2);border-radius:var(--radius-xl);background:var(--bg-light-2);
  display:flex;flex-direction:column;gap:10px;transition:transform .2s ease, box-shadow .2s ease;position:relative;overflow:hidden}
.ce-use::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;
  background:linear-gradient(90deg, var(--accent-2), var(--accent), var(--accent-glow));opacity:.0;
  transition:opacity .2s ease}
.ce-use:hover{transform:translateY(-2px);box-shadow:0 18px 44px -22px rgba(26,34,54,.20)}
.ce-use:hover::before{opacity:1}
.ce-use-tag{display:inline-block;align-self:flex-start;font-family:var(--font-mono);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--accent);
  padding:5px 10px;background:var(--accent-soft);border-radius:999px;margin-bottom:8px}
.ce-use h3{font-family:var(--font-display);font-weight:600;font-size:21px;letter-spacing:-.01em;margin:0;line-height:1.2;color:var(--on-light)}
.ce-use p{margin:0;font-size:14.5px;color:var(--on-light-2);line-height:1.55}

/* Pricing: LIGHT, with the "recommended" plan as glass dark with aurora */
.ce-pricing{background:var(--bg-light);color:var(--on-light);
  box-shadow:0 0 0 100vmax var(--bg-light);clip-path:inset(0 -100vmax);border-top:0}
.ce-pricing .ce-seclabel{color:var(--on-light-3)}
.ce-pricing .ce-h2{color:var(--on-light)}
.ce-pricing-head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:32px;margin-bottom:40px;flex-wrap:wrap}
.ce-billtog{display:inline-flex;border:1px solid var(--line);border-radius:999px;
  padding:3px;background:var(--bg-light-2);flex-shrink:0}
.ce-billtog button{background:transparent;border:0;font-size:13px;padding:8px 16px;
  border-radius:999px;color:var(--on-light-3);cursor:default;display:inline-flex;align-items:center;gap:8px;
  white-space:nowrap}
.ce-billtog button.on{background:var(--accent);color:#fff;
  box-shadow:0 4px 14px -4px rgba(79,110,247,.5)}
.ce-save{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;
  color:var(--accent);background:var(--accent-soft);padding:2px 6px;border-radius:4px}
.ce-billtog button.on .ce-save{background:rgba(255,255,255,.22);color:#fff}

.ce-plans{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.ce-plan{padding:28px 22px;background:var(--bg-light-2);border:1px solid var(--line-2);
  border-radius:var(--radius-lg);display:flex;flex-direction:column;gap:8px;position:relative}
.ce-plan-pop{background:var(--bg-dark-2);color:var(--on-dark);border:1px solid var(--line-dark);
  overflow:hidden}
.ce-plan-pop::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side at 50% 0%, rgba(124,122,230,.45), transparent 70%)}
.ce-plan-pop > *{position:relative;z-index:1}
.ce-plan-pop .ce-plan-for,.ce-plan-pop .ce-plan-per,.ce-plan-pop .ce-plan-bill{color:var(--on-dark-3)}
.ce-plan-pop .ce-plan-name,.ce-plan-pop .ce-plan-amt{color:var(--on-dark)}
.ce-plan-badge{position:absolute;top:14px;right:14px;font-family:var(--font-mono);
  font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  background:var(--accent);color:#fff;padding:3px 8px;border-radius:4px;
  box-shadow:0 6px 16px -6px rgba(79,110,247,.6)}
.ce-plan-top{margin-bottom:8px}
.ce-plan-name{font-family:var(--font-display);font-weight:600;font-size:18px;letter-spacing:-.005em;color:var(--on-light)}
.ce-plan-for{font-size:12.5px;color:var(--on-light-3)}
.ce-plan-price{display:flex;align-items:baseline;gap:2px;margin-top:10px;min-height:48px}
.ce-plan-cur{font-size:18px;color:var(--on-light-3);margin-right:2px}
.ce-plan-amt{font-family:var(--font-display);font-weight:600;font-size:40px;line-height:1;letter-spacing:-.02em;color:var(--on-light)}
.ce-plan-per{font-size:13px;color:var(--on-light-3);margin-left:4px}
.ce-plan-custom{font-family:var(--font-italic);font-style:italic;font-size:32px;letter-spacing:-.01em;color:var(--on-light)}
.ce-plan-bill{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--on-light-3);min-height:16px;margin-bottom:14px}
.ce-plan .ce-btn-outline{background:transparent;color:var(--on-light);border-color:var(--line)}
.ce-plan .ce-btn-outline:hover{background:var(--accent);color:#fff;border-color:var(--accent);
  box-shadow:0 8px 24px -10px rgba(79,110,247,.55)}
.ce-plan-pop .ce-btn-primary{background:#fff;color:var(--bg-dark);border-color:#fff;
  box-shadow:0 8px 24px -8px rgba(255,255,255,.4)}
.ce-plan-pop .ce-btn-primary:hover{background:var(--accent);color:#fff;border-color:var(--accent);
  box-shadow:0 8px 24px -8px rgba(79,110,247,.6)}

.ce-compare{margin-top:56px;border:1px solid var(--line-2);border-radius:var(--radius-lg);
  overflow:hidden;background:var(--bg-light-2)}
.ce-compare-head{padding:14px 22px;border-bottom:1px solid var(--line-2);
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--on-light-3);background:var(--bg-light)}
.ce-compare-table{display:flex;flex-direction:column}
.ce-compare-row{display:grid;grid-template-columns:2fr repeat(5, 1fr);
  border-bottom:1px solid var(--line-2);font-size:13.5px}
.ce-compare-row:last-child{border-bottom:0}
.ce-compare-row>div{padding:14px 18px;display:flex;align-items:center;color:var(--on-light-2)}
.ce-compare-row>div:not(:first-child){justify-content:center;text-align:center;border-left:1px solid var(--line-2)}
.ce-compare-hdr>div{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--on-light-3);background:var(--bg-light)}
.ce-compare-v svg{color:var(--accent)}
.ce-compare-v .ce-dash{opacity:.3;color:var(--on-light-4)}

/* FAQ: LIGHT */
.ce-faq{background:var(--bg-light);color:var(--on-light);
  box-shadow:0 0 0 100vmax var(--bg-light);clip-path:inset(0 -100vmax);border-top:0}
.ce-faq .ce-seclabel{color:var(--on-light-3)}
.ce-faq-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:64px;align-items:start}
.ce-faq .ce-h2{color:var(--on-light)}
.ce-faq-list{list-style:none;padding:0;margin:0;border-top:1px solid var(--line-2)}
.ce-faq-list li{border-bottom:1px solid var(--line-2)}
.ce-faq-list button{width:100%;display:flex;align-items:center;justify-content:space-between;
  background:transparent;border:0;padding:22px 0;font-size:17px;text-align:left;
  font-family:inherit;color:var(--on-light);cursor:default;gap:24px;font-weight:500}
.ce-faq-list button:hover{color:var(--accent)}
.ce-faq-plus{font-size:22px;color:var(--on-light-3);font-weight:300;line-height:1;width:20px;text-align:center}
.ce-faq-list li.open .ce-faq-plus{color:var(--accent)}
.ce-faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.ce-faq-list li.open .ce-faq-a{max-height:300px}
.ce-faq-a p{margin:0;padding:0 60px 22px 0;font-size:15px;color:var(--on-light-2);line-height:1.6;max-width:60ch}

/* Final CTA: DARK + heavy aurora */
.ce-finalcta{background:var(--bg-dark);color:var(--on-dark);padding:140px var(--gutter);
  position:relative;overflow:hidden;border-top:1px solid var(--line-dark-2);
  box-shadow:0 0 0 100vmax var(--bg-dark);clip-path:inset(0 -100vmax)}
.ce-finalcta::before{content:"";position:absolute;inset:0;
  background:
    radial-gradient(700px 500px at 30% 30%, rgba(124,122,230,.45), transparent 60%),
    radial-gradient(700px 500px at 70% 60%, rgba(79,110,247,.35), transparent 60%),
    radial-gradient(500px 300px at 80% 20%, rgba(255,209,184,.18), transparent 60%);
  pointer-events:none}
.ce-finalcta::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse at center, #000 30%, transparent 75%);
          mask-image:radial-gradient(ellipse at center, #000 30%, transparent 75%)}
.ce-finalcta-inner{max-width:780px;margin:0 auto;text-align:center;position:relative;z-index:1}
.ce-finalcta-h{font-family:var(--font-display);font-weight:500;
  font-size:clamp(40px,5vw,72px);line-height:1.04;letter-spacing:-.025em;
  margin:22px 0 20px;text-wrap:balance;color:var(--on-dark)}
.ce-finalcta-sub{font-size:18px;color:var(--on-dark-2);margin:0 0 32px;max-width:48ch;margin-inline:auto}
.ce-finalcta .ce-hero-ctas{justify-content:center}

/* Footer: DARK */
.ce-footer{background:var(--bg-dark);color:var(--on-dark);
  max-width:var(--maxw);margin:0 auto;padding:64px var(--gutter) 32px;
  border-top:1px solid var(--line-dark-2);
  box-shadow:0 0 0 100vmax var(--bg-dark);clip-path:inset(0 -100vmax)}
.ce-footer .ce-brand{color:var(--on-dark)}
.ce-footer-top{display:grid;grid-template-columns:1fr 1.4fr;gap:64px;
  border-bottom:1px solid var(--line-dark-2);padding-bottom:48px}
.ce-footer-tag{margin:14px 0 0;font-size:14px;color:var(--on-dark-3);max-width:36ch}
.ce-footer-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.ce-footer-h{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--on-dark-3);margin-bottom:14px}
.ce-footer-cols ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.ce-footer-cols a{font-size:14px;color:var(--on-dark-2)}
.ce-footer-cols a:hover{color:var(--on-dark)}
.ce-footer-bot{display:flex;justify-content:space-between;align-items:center;
  padding-top:24px;font-size:12.5px;color:var(--on-dark-4);white-space:nowrap;gap:16px}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width:1100px){
  :root{--gutter:32px}
  .ce-hero-grid,.ce-problem-grid,.ce-demo-grid,.ce-sec-grid,.ce-faq-grid{
    grid-template-columns:1fr;gap:48px}
  .ce-hero-copy{padding-right:0}
  .ce-feat-grid,.ce-uses-grid{grid-template-columns:repeat(2,1fr)}
  .ce-steps{grid-template-columns:1fr;gap:14px}
  .ce-plans{grid-template-columns:1fr 1fr}
  .ce-compare{display:none}
  .ce-footer-top{grid-template-columns:1fr}
}
@media (max-width:680px){
  .ce-navlinks{display:none}
  .ce-feat-grid,.ce-uses-grid{grid-template-columns:1fr}
  .ce-plans{grid-template-columns:1fr}
  .ce-outcomes li{grid-template-columns:1fr;gap:6px}
  .ce-footer-cols{grid-template-columns:1fr 1fr}
}
