/* ─── DESIGN SYSTEM ─────────────────────────────────────────────────────────── */
:root {
  --bg:      #060810;
  --bg1:     #0A0E1A;
  --bg2:     #0F1424;
  --surf:    #141A2E;
  --surf2:   #1A2238;
  --bd:      #1E2A40;
  --bd2:     #283650;

  --t0:      #F2F5FF;
  --t1:      #C8D4F0;
  --t2:      #7080A8;
  --t3:      #3A4A6A;

  --cx:      #00CFFF;
  --cx-dim:  rgba(0,207,255,.08);
  --cx2:     #00A8D6;
  --vi:      #7C3AED;
  --vi-dim:  rgba(124,58,237,.10);
  --gr:      #00D48A;
  --gr-dim:  rgba(0,212,138,.08);
  --am:      #F5A623;
  --re:      #FF3355;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg:#F4F6FB; --bg1:#EDF0F9; --bg2:#E7EAF6;
    --surf:#FFFFFF; --surf2:#F0F3FC;
    --bd:#D0D8EF; --bd2:#B8C5E4;
    --t0:#0A0D1C; --t1:#2A3460; --t2:#6070A0; --t3:#9AAAC8;
    --cx:#0088CC; --cx-dim:rgba(0,136,204,.08);
    --cx2:#006FAA; --vi:#5B21B6; --vi-dim:rgba(91,33,182,.08);
    --gr:#059669; --gr-dim:rgba(5,150,105,.08); --am:#B45309; --re:#DC2626;
    --scan-input-bg:rgba(240,243,252,0.9);
  }
}
:root[data-theme="light"] {
  --bg:#F4F6FB; --bg1:#EDF0F9; --bg2:#E7EAF6;
  --surf:#FFFFFF; --surf2:#F0F3FC;
  --bd:#D0D8EF; --bd2:#B8C5E4;
  --t0:#0A0D1C; --t1:#2A3460; --t2:#6070A0; --t3:#9AAAC8;
  --cx:#0088CC; --cx-dim:rgba(0,136,204,.08);
  --cx2:#006FAA; --vi:#5B21B6; --vi-dim:rgba(91,33,182,.08);
  --gr:#059669; --gr-dim:rgba(5,150,105,.08); --am:#B45309; --re:#DC2626;
  --scan-input-bg:rgba(240,243,252,0.9);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { font-size:16px; scroll-behavior:smooth; -webkit-font-smoothing:antialiased }
body {
  background:var(--bg);
  color:var(--t0);
  font-family:'Space Grotesk',system-ui,sans-serif;
  line-height:1.6;
  overflow-x:hidden;
}
@media (prefers-reduced-motion:reduce) { *{ animation:none!important; transition:none!important } }
a { color:var(--cx); text-decoration:none }
:focus-visible { outline:2px solid var(--cx); outline-offset:3px }
button { cursor:pointer; border:none; background:transparent; font-family:inherit }
img { max-width:100% }
.mono { font-family:'JetBrains Mono',monospace; font-variant-numeric:tabular-nums }

/* ─── NAV ────────────────────────────────────────────────────────────────────── */
.nav {
  position:sticky; top:0; z-index:200;
  display:flex; align-items:center;
  height:60px; padding:0 2rem;
  background:rgba(6,8,16,.88);
  backdrop-filter:blur(20px) saturate(1.4);
  border-bottom:1px solid var(--bd);
  gap:2.5rem;
}
@media (prefers-color-scheme:light) { :root:not([data-theme="dark"]) .nav { background:rgba(244,246,251,.92) } }
:root[data-theme="light"] .nav { background:rgba(244,246,251,.92) }

.nav-logo {
  font-family:'Space Grotesk',sans-serif; font-weight:900;
  font-size:1.0625rem; letter-spacing:.06em; color:var(--t0);
  margin-right:auto; display:flex; align-items:center; gap:.1em;
}
.nav-logo .gpto { color:var(--cx) }
.nav-links { display:flex; gap:2rem; list-style:none }
.nav-links a {
  font-size:.8125rem; font-weight:500; letter-spacing:.02em;
  color:var(--t2); transition:color .15s;
}
.nav-links a:hover { color:var(--t0) }
.nav-actions { display:flex; gap:.75rem; align-items:center }

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  font-family:'Space Grotesk',sans-serif; font-size:.8125rem; font-weight:600;
  letter-spacing:.01em; padding:.5rem 1.25rem;
  border-radius:0; cursor:pointer; border:1px solid transparent;
  transition:background .18s, color .18s, border-color .18s;
}
.btn-ghost { background:transparent; border-color:var(--bd2); color:var(--t2) }
.btn-ghost:hover { border-color:var(--cx); color:var(--cx) }
.btn-primary { background:var(--cx); color:#060810; border-color:var(--cx) }
.btn-primary:hover { background:#00EEFF }
.btn-vi { background:var(--vi); color:#fff; border-color:var(--vi) }
.btn-vi:hover { background:#6D28D9 }
.btn-lg { font-size:.9375rem; padding:.75rem 2rem }
.btn-xl { font-size:1rem; padding:1rem 2.25rem }
/* Pill CTAs (inspired by gpto.kr) */
.btn-pill {
  border-radius:9999px;
  padding:.875rem 2.25rem;
  font-size:1rem; font-weight:700;
}
.btn-pill-ghost {
  border-radius:9999px;
  padding:.875rem 2rem;
  font-size:1rem; font-weight:600;
  background:transparent; border:1px solid var(--bd2); color:var(--t1);
}
.btn-pill-ghost:hover { border-color:var(--cx); color:var(--cx) }

.theme-toggle {
  width:34px; height:34px; border-radius:0; border:1px solid var(--bd2);
  display:flex; align-items:center; justify-content:center;
  color:var(--t2); font-size:.875rem; transition:border-color .15s, color .15s;
}
.theme-toggle:hover { border-color:var(--cx); color:var(--cx) }

.hamburger {
  display:none; flex-direction:column; justify-content:center;
  gap:5px; width:34px; height:34px; padding:5px;
  border:1px solid var(--bd2); background:transparent; cursor:pointer;
  transition:border-color .15s;
}
.hamburger:hover { border-color:var(--cx) }
.hamburger span { display:block; height:1.5px; background:var(--t2); transition:all .2s }
.mobile-drawer {
  display:none; position:fixed; top:60px; left:0; right:0;
  background:var(--bg1); border-bottom:1px solid var(--bd);
  padding:1.25rem 2rem; z-index:199; flex-direction:column; gap:0;
}
.mobile-drawer.open { display:flex }
.mobile-drawer a {
  font-size:.875rem; font-weight:500; color:var(--t1);
  padding:.875rem 0; border-bottom:1px solid var(--bd);
  display:block;
}
.mobile-drawer a:last-child { border-bottom:none }
.mobile-drawer-actions { display:flex; gap:.75rem; padding-top:1rem }
@media (max-width:680px) {
  .nav-links { display:none }
  .nav-actions .btn-ghost { display:none }
  .hamburger { display:flex }
}

/* ─── HERO — CENTERED WITH STARFIELD ────────────────────────────────────────── */
.hero {
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:5rem 2rem 6rem;
  overflow:hidden;
}

#starCanvas {
  position:absolute;
  inset:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:0;
}

/* Radial glow behind hero text */
.hero-glow {
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-58%);
  width:900px; height:600px;
  background:radial-gradient(ellipse, rgba(0,207,255,.09) 0%, rgba(124,58,237,.06) 45%, transparent 75%);
  pointer-events:none;
  z-index:1;
}

.hero-inner {
  position:relative;
  z-index:2;
  max-width:820px;
  margin:0 auto;
}

.hero-eyebrow {
  display:inline-flex; align-items:center; gap:.625rem;
  font-family:'JetBrains Mono',monospace;
  font-size:.6875rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--cx);
  border:1px solid rgba(0,207,255,.25);
  background:rgba(0,207,255,.05);
  padding:.375rem 1rem;
  border-radius:9999px;
  margin-bottom:2.25rem;
}
.hero-eyebrow .dot {
  width:6px; height:6px; border-radius:50%; background:var(--gr);
  animation:pulse-anim 2s ease-in-out infinite;
}

.hero-h1 {
  font-family:'Space Grotesk',sans-serif; font-weight:900;
  font-size:clamp(2.75rem,6vw,5.5rem);
  line-height:1.02; letter-spacing:-.03em;
  color:var(--t0); text-wrap:balance;
  margin-bottom:1.75rem;
}
.hero-h1 .accent {
  background:linear-gradient(135deg, var(--cx) 0%, #7C3AED 55%, #C026D3 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}

.hero-sub {
  font-size:clamp(1rem,1.6vw,1.1875rem); font-weight:300;
  color:var(--t2); line-height:1.8; max-width:54ch;
  margin:0 auto 2.75rem;
}

.hero-cta {
  display:flex; gap:1rem; flex-wrap:wrap;
  align-items:center; justify-content:center;
  margin-bottom:4rem;
}

/* Hero stats row */
.hero-stats {
  display:flex; gap:0; flex-wrap:wrap;
  justify-content:center;
  border:1px solid var(--bd);
  background:rgba(10,14,26,.7);
  backdrop-filter:blur(12px);
  max-width:680px;
  margin:0 auto;
}
.hero-stat {
  flex:1; min-width:150px;
  padding:1.25rem 1.5rem;
  border-right:1px solid var(--bd);
  text-align:center;
}
.hero-stat:last-child { border-right:none }
.hero-stat-n {
  font-family:'JetBrains Mono',monospace;
  font-size:1.625rem; font-weight:700;
  color:var(--cx); display:block; line-height:1;
  margin-bottom:.3rem;
}
.hero-stat-l {
  font-size:.6875rem; text-transform:uppercase; letter-spacing:.1em;
  color:var(--t3); font-family:'JetBrains Mono',monospace;
}

/* ─── TICKER / LOGO MARQUEE ──────────────────────────────────────────────────── */
.ticker-section {
  padding:3rem 2rem;
  border-bottom:1px solid var(--bd);
  border-top:1px solid var(--bd);
}
.ticker-label {
  text-align:center;
  font-family:'JetBrains Mono',monospace;
  font-size:.625rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--t3); margin-bottom:1.5rem;
}
.ticker-wrap {
  position:relative; overflow:hidden;
}
.ticker-wrap::before,.ticker-wrap::after {
  content:''; position:absolute; top:0; bottom:0; width:120px; z-index:2; pointer-events:none;
}
.ticker-wrap::before { left:0; background:linear-gradient(90deg, var(--bg), transparent) }
.ticker-wrap::after { right:0; background:linear-gradient(-90deg, var(--bg), transparent) }
.ticker-track {
  display:flex; gap:0;
  animation:ticker 30s linear infinite;
  width:max-content;
}
@keyframes ticker { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.ticker-item {
  display:flex; align-items:center; gap:.5rem;
  font-family:'JetBrains Mono',monospace; font-size:.6875rem; font-weight:500;
  letter-spacing:.06em; padding:.5rem 1.75rem;
  white-space:nowrap; color:var(--t2);
  border-right:1px solid var(--bd);
}
.tick-dot { width:5px; height:5px; border-radius:50%; flex-shrink:0 }
.ticker-item.global .tick-dot { background:var(--cx) }
.ticker-item.search  .tick-dot { background:var(--gr) }
.ticker-item.chinese .tick-dot { background:var(--am) }

/* ─── TRUST BADGE CARDS ──────────────────────────────────────────────────────── */
.trust-section {
  padding:4.5rem 2rem;
  max-width:1100px; margin:0 auto;
}
.trust-eyebrow {
  text-align:center;
  font-family:'JetBrains Mono',monospace; font-size:.625rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--t3);
  margin-bottom:2rem;
}
.trust-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--bd);
  border:1px solid var(--bd);
}
.trust-card {
  background:var(--bg1);
  padding:2rem 1.75rem;
  transition:background .2s;
}
.trust-card:hover { background:var(--surf) }
.trust-card-icon {
  font-size:1.75rem; margin-bottom:1rem; display:block;
}
.trust-card-label {
  font-family:'JetBrains Mono',monospace; font-size:.5625rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--cx);
  margin-bottom:.5rem; display:block;
}
.trust-card-title {
  font-size:.9375rem; font-weight:700; color:var(--t0); line-height:1.3;
  margin-bottom:.375rem;
}
.trust-card-sub {
  font-size:.8125rem; color:var(--t2); line-height:1.5;
}
@media (max-width:760px) { .trust-grid { grid-template-columns:1fr 1fr } }
@media (max-width:440px) { .trust-grid { grid-template-columns:1fr } }

/* ─── FREE SCAN / URL DIAGNOSTIC ────────────────────────────────────────────── */
.scan-section {
  position:relative;
  padding:6rem 2rem;
  text-align:center;
  overflow:hidden;
}
.scan-aurora {
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 120% 80% at 50% 0%, rgba(124,58,237,.18) 0%, transparent 65%),
    radial-gradient(ellipse 80% 60% at 20% 100%, rgba(0,207,255,.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 50%, rgba(0,212,138,.07) 0%, transparent 60%);
}
.scan-inner {
  position:relative; z-index:1;
  max-width:740px; margin:0 auto;
}
.scan-eyebrow {
  display:inline-block;
  font-family:'JetBrains Mono',monospace; font-size:.625rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--vi); background:rgba(124,58,237,.12);
  border:1px solid rgba(124,58,237,.3);
  padding:.375rem 1rem; border-radius:9999px;
  margin-bottom:2rem;
}
.scan-h {
  font-size:clamp(2rem,4vw,3.25rem); font-weight:900;
  letter-spacing:-.025em; color:var(--t0); text-wrap:balance;
  margin-bottom:1rem; line-height:1.08;
}
.scan-sub {
  font-size:1.0625rem; color:var(--t2); font-weight:300;
  margin-bottom:2.75rem; line-height:1.7;
}
.scan-form {
  display:flex; gap:.75rem; align-items:center;
  max-width:560px; margin:0 auto 1.5rem;
}
.scan-input {
  flex:1; padding:.9375rem 1.25rem;
  background:var(--scan-input-bg, rgba(10,14,26,.8)); border:1px solid var(--bd2);
  color:var(--t0); font-family:'Space Grotesk',sans-serif; font-size:.9375rem;
  border-radius:0; outline:none; transition:border-color .15s;
  backdrop-filter:blur(8px);
}
.scan-input:focus { border-color:var(--cx) }
.scan-input::placeholder { color:var(--t3) }
.scan-btn {
  padding:.9375rem 1.875rem;
  background:var(--cx); color:#060810;
  font-family:'Space Grotesk',sans-serif; font-size:.9375rem; font-weight:700;
  border:none; cursor:pointer; white-space:nowrap;
  transition:background .15s; border-radius:0;
  flex-shrink:0;
}
.scan-btn:hover { background:#00EEFF }
.scan-note {
  font-family:'JetBrains Mono',monospace; font-size:.6875rem;
  color:var(--t3); letter-spacing:.04em;
}

/* ─── STATS COUNTER SECTION ──────────────────────────────────────────────────── */
.counter-section {
  background:var(--bg1);
  border-top:1px solid var(--bd);
  border-bottom:1px solid var(--bd);
}
.counter-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  max-width:900px; margin:0 auto;
}
.counter-cell {
  padding:3rem 2.5rem; text-align:center;
  border-right:1px solid var(--bd);
}
.counter-cell:last-child { border-right:none }
.counter-n {
  font-family:'JetBrains Mono',monospace; font-size:2.5rem; font-weight:700;
  color:var(--cx); display:block; line-height:1; margin-bottom:.5rem;
}
.counter-l { font-size:.8125rem; color:var(--t2); font-weight:400 }
.counter-sub {
  display:block;
  font-family:'JetBrains Mono',monospace; font-size:.5625rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--t3);
  margin-top:.25rem;
}
@media (max-width:600px) {
  .counter-grid { grid-template-columns:1fr }
  .counter-cell { border-right:none; border-bottom:1px solid var(--bd) }
  .counter-cell:last-child { border-bottom:none }
}

/* ─── PROBLEM / MARKET SHIFT (aurora bg) ─────────────────────────────────────── */
.problem {
  position:relative;
  padding:7rem 2rem;
  overflow:hidden;
}
.problem-nebula {
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 100% 70% at 80% 50%, rgba(124,58,237,.14) 0%, transparent 60%),
    radial-gradient(ellipse 60% 60% at 10% 30%, rgba(0,207,255,.07) 0%, transparent 55%);
}
.container { max-width:1100px; margin:0 auto }

.sec-ey {
  font-family:'JetBrains Mono',monospace; font-size:.625rem;
  font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--cx); margin-bottom:1.25rem;
  opacity:0; transform:translateY(16px); transition:opacity .5s,transform .5s;
}
.sec-ey.visible { opacity:1; transform:none }

.sec-title {
  font-size:clamp(1.875rem,4vw,3rem); font-weight:900;
  letter-spacing:-.025em; line-height:1.1;
  color:var(--t0); text-wrap:balance; margin-bottom:1.125rem;
  opacity:0; transform:translateY(16px); transition:opacity .5s .08s,transform .5s .08s;
}
.sec-title.visible { opacity:1; transform:none }

.sec-sub {
  font-size:1.0625rem; color:var(--t2); font-weight:300;
  max-width:56ch; line-height:1.75; margin-bottom:3.5rem;
  opacity:0; transform:translateY(12px); transition:opacity .5s .16s,transform .5s .16s;
}
.sec-sub.visible { opacity:1; transform:none }

.reveal {
  opacity:0; transform:translateY(20px);
  transition:opacity .55s ease, transform .55s ease;
}
.reveal.visible { opacity:1; transform:none }
.reveal-delay-1 { transition-delay:.12s }
.reveal-delay-2 { transition-delay:.22s }
.reveal-delay-3 { transition-delay:.32s }

.problem-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--bd); border:1px solid var(--bd);
}
.prob-cell {
  background:var(--bg1); padding:2.5rem 2.25rem;
  opacity:0; transform:translateY(20px); transition:opacity .55s,transform .55s;
}
.prob-cell.visible { opacity:1; transform:none }
.prob-cell:hover { background:var(--surf) }
.prob-n {
  font-family:'JetBrains Mono',monospace; font-size:.5625rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--cx);
  display:block; margin-bottom:1rem;
}
.prob-h { font-size:1.0625rem; font-weight:700; color:var(--t0); margin-bottom:.75rem; line-height:1.3 }
.prob-p { font-size:.875rem; color:var(--t2); line-height:1.7 }
@media (max-width:640px) { .problem-grid { grid-template-columns:1fr } }

/* ─── STEP CARDS (gpto.kr style) ────────────────────────────────────────────── */
.steps-section {
  padding:7rem 2rem;
  background:var(--bg1);
}
.steps-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--bd); border:1px solid var(--bd);
  margin-top:3.5rem;
}
.step-card {
  background:var(--bg); padding:2.25rem 1.875rem;
  position:relative; overflow:hidden;
  opacity:0; transform:translateY(20px); transition:opacity .55s,transform .55s;
}
.step-card.visible { opacity:1; transform:none }
.step-card:hover { background:var(--bg1) }
.step-card-num {
  font-family:'JetBrains Mono',monospace; font-size:.5625rem;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--t3); margin-bottom:.875rem; display:block;
}
.step-card-icon {
  font-size:2rem; margin-bottom:1.125rem; display:block;
  line-height:1;
}
.step-card-h {
  font-size:1rem; font-weight:700; color:var(--t0);
  margin-bottom:.625rem; line-height:1.3;
}
.step-card-p { font-size:.8125rem; color:var(--t2); line-height:1.65 }
.step-card-accent {
  position:absolute; bottom:0; left:0; right:0;
  height:2px;
}
.step-card:nth-child(1) .step-card-accent { background:var(--cx) }
.step-card:nth-child(2) .step-card-accent { background:var(--vi) }
.step-card:nth-child(3) .step-card-accent { background:var(--gr) }
.step-card:nth-child(4) .step-card-accent { background:var(--am) }
@media (max-width:760px) { .steps-grid { grid-template-columns:1fr 1fr } }
@media (max-width:480px) { .steps-grid { grid-template-columns:1fr } }

/* ─── FEATURES ───────────────────────────────────────────────────────────────── */
#features { padding:7rem 2rem }
.feat-list { display:flex; flex-direction:column; gap:1px; background:var(--bd); border:1px solid var(--bd); margin-top:3.5rem }
.feat-row {
  display:flex; align-items:flex-start; gap:2rem;
  padding:2.25rem 2rem; background:var(--bg1);
  opacity:0; transform:translateY(16px); transition:opacity .5s,transform .5s;
}
.feat-row.visible { opacity:1; transform:none }
.feat-row:hover { background:var(--surf) }
.feat-num {
  font-family:'JetBrains Mono',monospace; font-size:.625rem;
  color:var(--t3); letter-spacing:.12em; margin-top:.2rem;
  flex-shrink:0; width:2.5rem;
}
.feat-body { flex:1 }
.feat-tag {
  display:inline-block; font-family:'JetBrains Mono',monospace;
  font-size:.5625rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.2rem .6rem; margin-bottom:.75rem;
}
.feat-tag.cx { background:var(--cx-dim); color:var(--cx); border:1px solid rgba(0,207,255,.2) }
.feat-tag.gr { background:var(--gr-dim); color:var(--gr); border:1px solid rgba(0,212,138,.2) }
.feat-tag.vi { background:var(--vi-dim); color:var(--vi); border:1px solid rgba(124,58,237,.2) }
.feat-tag.am { background:rgba(245,166,35,.08); color:var(--am); border:1px solid rgba(245,166,35,.2) }
.feat-h { font-size:1.0625rem; font-weight:700; color:var(--t0); margin-bottom:.625rem; line-height:1.3 }
.feat-p { font-size:.875rem; color:var(--t2); line-height:1.7 }

/* ─── COVERAGE ───────────────────────────────────────────────────────────────── */
#coverage { padding:7rem 2rem }
.engines-layout { display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; margin-top:3.5rem }
@media (max-width:760px) { .engines-layout { grid-template-columns:1fr } }
.engines-table { border:1px solid var(--bd) }
.eng-head { display:grid; grid-template-columns:1fr 2fr 3rem; padding:.75rem 1rem; background:var(--surf); border-bottom:1px solid var(--bd); font-family:'JetBrains Mono',monospace; font-size:.5625rem; letter-spacing:.1em; text-transform:uppercase; color:var(--t3) }
.eng-line { display:grid; grid-template-columns:1fr 2fr 3rem; align-items:center; padding:.6875rem 1rem; border-bottom:1px solid var(--bd); transition:background .12s }
.eng-line:hover { background:var(--surf) }
.eng-line:last-child { border-bottom:none }
.eng-name { font-size:.8125rem; color:var(--t1) }
.eng-track { height:4px; background:var(--bd2) }
.eng-fill { height:100%; background:var(--cx); width:0%; transition:width 1s cubic-bezier(.23,1,.32,1) }
.eng-fill.gr { background:var(--gr) }
.eng-fill.am { background:var(--am) }
.eng-pct-val { font-family:'JetBrains Mono',monospace; font-size:.625rem; color:var(--t2); text-align:right }

.engines-legend { display:flex; flex-direction:column; gap:1.5rem; justify-content:center }
.legend-title { font-family:'JetBrains Mono',monospace; font-size:.5625rem; letter-spacing:.12em; text-transform:uppercase; color:var(--t3); margin-bottom:.5rem }
.legend-entry { display:flex; gap:1rem; align-items:flex-start }
.le-indicator { width:3px; height:100%; min-height:40px; flex-shrink:0; margin-top:.2rem }
.le-name { font-weight:700; color:var(--t1); font-size:.875rem; margin-bottom:.25rem }
.le-desc { font-size:.8125rem; color:var(--t2); line-height:1.6 }

/* ─── QUOTE ──────────────────────────────────────────────────────────────────── */
.quote {
  background:var(--bg1); border-top:1px solid var(--bd); border-bottom:1px solid var(--bd);
  padding:5rem 2rem; text-align:center;
}
.quote-mark { font-size:5rem; line-height:1; color:var(--cx); opacity:.2; display:block; margin-bottom:-.5rem; font-family:Georgia,serif }
.quote-text { font-size:clamp(1.125rem,2.5vw,1.5rem); font-weight:300; color:var(--t1); line-height:1.65; max-width:680px; margin:0 auto 1.5rem }
.quote-byline { font-family:'JetBrains Mono',monospace; font-size:.6875rem; letter-spacing:.06em; color:var(--t3) }

/* ─── PRICING ────────────────────────────────────────────────────────────────── */
#pricing { padding:7rem 2rem }
.pricing-table { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--bd); border:1px solid var(--bd); margin-top:3.5rem }
@media (max-width:780px) { .pricing-table { grid-template-columns:1fr } }
.plan { background:var(--bg1); padding:2.5rem 2rem; display:flex; flex-direction:column; gap:.875rem }
.plan:hover { background:var(--surf) }
.plan.featured { background:var(--surf); border:2px solid var(--vi); position:relative; margin:-1px }
.plan-badge {
  display:inline-block; font-family:'JetBrains Mono',monospace; font-size:.5rem;
  letter-spacing:.14em; text-transform:uppercase; color:#fff; background:var(--vi);
  padding:.25rem .625rem; margin-bottom:.25rem; align-self:flex-start;
}
.plan-name { font-size:1.125rem; font-weight:700; color:var(--t0) }
.plan-price { font-family:'JetBrains Mono',monospace; font-size:2.5rem; font-weight:700; color:var(--t0); line-height:1 }
.plan-price-note { font-size:.75rem; color:var(--t3); font-family:'JetBrains Mono',monospace }
.plan-line { height:1px; background:var(--bd); margin:.25rem 0 }
.plan-features { list-style:none; display:flex; flex-direction:column; gap:.5rem; flex:1 }
.plan-features li { font-size:.875rem; color:var(--t2); padding-left:1.25rem; position:relative }
.plan-features li::before { content:'→'; position:absolute; left:0; color:var(--cx); font-size:.75rem }
.plan-note { font-family:'JetBrains Mono',monospace; font-size:.5625rem; letter-spacing:.06em; color:var(--t3); margin-top:.5rem }

/* ─── CTA ────────────────────────────────────────────────────────────────────── */
.cta {
  position:relative; overflow:hidden;
  padding:8rem 2rem; text-align:center;
}
.cta-bg {
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 90% 80% at 50% 50%, rgba(0,207,255,.07) 0%, transparent 65%),
    radial-gradient(ellipse 60% 50% at 70% 30%, rgba(124,58,237,.08) 0%, transparent 55%);
}
.cta-inner { position:relative; z-index:1; max-width:700px; margin:0 auto }
.cta-h {
  font-size:clamp(2.25rem,5vw,4rem); font-weight:900;
  letter-spacing:-.03em; color:var(--t0); text-wrap:balance;
  margin-bottom:1.25rem; line-height:1.06;
}
.cta-h em { font-style:normal; color:var(--cx) }
.cta-p { font-size:1.0625rem; color:var(--t2); font-weight:300; margin-bottom:2.75rem; line-height:1.7 }
.cta-btns { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap }

/* ─── FOOTER ─────────────────────────────────────────────────────────────────── */
footer {
  border-top:1px solid var(--bd);
  padding:2rem;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem;
}
.foot-logo {
  font-family:'Space Grotesk',sans-serif; font-weight:900;
  font-size:.9375rem; letter-spacing:.06em; color:var(--t0);
}
.foot-logo .gpto { color:var(--cx) }
.foot-copy {
  font-family:'JetBrains Mono',monospace; font-size:.5625rem;
  letter-spacing:.08em; color:var(--t3);
}

@keyframes pulse-anim {
  0%,100% { opacity:1; transform:scale(1) }
  50% { opacity:.4; transform:scale(.7) }
}

/* Scrollbar */
::-webkit-scrollbar { width:6px }
::-webkit-scrollbar-track { background:var(--bg) }
::-webkit-scrollbar-thumb { background:var(--bd2); border-radius:0 }

/* About and Blog pages: long-form reading layout in the home page's design system */
.doc-main { padding:5rem 1.25rem 6rem; position:relative }
.doc-main::before { content:""; position:absolute; inset:0 0 auto; height:420px; z-index:-1; pointer-events:none;
  background:radial-gradient(60% 70% at 50% 0%, color-mix(in oklab, var(--cx) 12%, transparent), transparent 70%) }
.doc { max-width:720px; margin:0 auto; color:var(--t1); font-size:1.0625rem; line-height:1.75 }
.doc-ey { font-family:'JetBrains Mono',monospace; font-size:.75rem; letter-spacing:.12em; color:var(--cx); margin-bottom:1rem }
.doc h1 { font-size:clamp(2rem, 1.4rem + 2.6vw, 3rem); line-height:1.08; letter-spacing:-.035em; color:var(--t0); margin-bottom:1.25rem; text-wrap:balance }
.doc h2 { font-size:1.375rem; letter-spacing:-.02em; color:var(--t0); margin:2.5rem 0 .75rem }
.doc p, .doc ul, .doc ol, .doc pre { margin-bottom:1.1rem }
.doc ul, .doc ol { padding-left:1.25rem } .doc li { margin-bottom:.5rem } .doc li::marker { color:var(--cx) }
.doc b { color:var(--t0) } .doc a { text-decoration:underline; text-underline-offset:3px; text-decoration-color:color-mix(in oklab, var(--cx) 45%, transparent) }
.doc code { font-family:'JetBrains Mono',monospace; font-size:.875em; background:var(--surf2); border:1px solid var(--bd); border-radius:6px; padding:.1em .35em }
.doc pre { background:var(--bg1); border:1px solid var(--bd); border-radius:12px; padding:1rem 1.25rem; overflow-x:auto }
.doc pre code { background:none; border:0; padding:0 }
.doc-lead { font-size:1.2rem; color:var(--t1); line-height:1.65 }
.doc-cta { display:flex; gap:1rem; flex-wrap:wrap; margin-top:2.5rem }
.doc-cta a { text-decoration:none }
.doc-posts { list-style:none; padding:0 !important; display:grid; gap:14px; margin-top:2rem }
.doc-post a { display:grid; gap:.35rem; padding:1.5rem; border:1px solid var(--bd); border-radius:14px; text-decoration:none;
  background:linear-gradient(180deg, color-mix(in oklab, var(--surf) 92%, transparent), color-mix(in oklab, var(--bg1) 92%, transparent)); transition:transform .3s, border-color .3s }
.doc-post a:hover { transform:translateY(-2px); border-color:color-mix(in oklab, var(--cx) 45%, var(--bd)) }
.doc-date { font-family:'JetBrains Mono',monospace; font-size:.75rem; color:var(--t2) }
.doc-post-t { font-size:1.2rem; font-weight:600; color:var(--t0); letter-spacing:-.015em }
.doc-post-d { color:var(--t2); font-size:.95rem }
.doc-back { max-width:720px; margin:3rem auto 0 }