*{
    background-color: black;
}
/* ─── RESET ─────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box;
 }
html { scroll-behavior:smooth; font-size:16px;
  }

/* ─── TOKENS ─────────────────────────────────────── */
:root {
  --ink:     #06111F;
  --ink2:    #0C1E35;
  --ink3:    #152D4A;
  --ink4:    #1E3D60;
  --jade:    #00C9A7;
  --jade2:   #00A389;
  --jade3:   rgba(0,201,167,.12);
  --jade4:   rgba(0,201,167,.06);
  --flame:   #FF5B36;
  --gold:    #F5A623;
  --rose:    #FF4D6D;
  --ice:     #E8F4FF;
  --mist:    #A8C4DC;
  --fog:     #546E87;
  --white:   #FFFFFF;
  --r:       12px;
  --r-lg:    20px;
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: var(--ink);
  color: var(--ice);
  overflow-x: hidden;
}

/* ─── GRID TEXTURE ───────────────────────────────── */
body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-color: black;
  /* background-image:
    linear-gradient(rgba(0,201,167,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,201,167,.018) 1px, transparent 1px); */
  background-size:52px 52px;
}

/* ─── SCROLLBAR ──────────────────────────────────── */
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-thumb { background:var(--ink4); border-radius:4px; }

/* ─── TYPOGRAPHY ─────────────────────────────────── */
.serif { font-family:'Instrument Serif', serif; }
.mono  { font-family:'JetBrains Mono', monospace; }

h1,h2,h3 { line-height:1.1; letter-spacing:-.02em; }

/* ─── NAV ────────────────────────────────────────── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:62px;
  display:flex; align-items:center;
  padding:0 clamp(16px,4vw,60px);
  background:rgba(6,17,31,.85);
  border-bottom:1px solid rgba(255,255,255,.06);
  backdrop-filter:blur(18px);
  gap:32px;
  background-color: black;
}

.nav-logo {
  display:flex; align-items:center; gap:10px;
  font-weight:800; font-size:16px; color:var(--white);
  text-decoration:none; letter-spacing:-.3px;
}

.nav-logo-box {
  width:32px; height:32px; border-radius:8px;
  background:var(--jade); display:flex;
  align-items:center; justify-content:center;
  font-weight:900; font-size:14px; color:var(--ink);
  box-shadow:0 0 16px rgba(0,201,167,.35);
}

.nav-logo span { color:var(--jade); }
.nav-links { display:flex; gap:28px; margin-left:20px; }
.nav-links a { font-size:13.5px; color:var(--mist); text-decoration:none; transition:color .2s; }
.nav-links a:hover { color:var(--white); }
.nav-right { margin-left:auto; display:flex; align-items:center; gap:12px; }

.btn-ghost {
  padding:8px 18px; border-radius:8px;
  border:1px solid rgba(255,255,255,.12);
  background:transparent;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:13px; font-weight:600; color:var(--mist);
  cursor:pointer; transition:all .2s; text-decoration:none;
  display:inline-flex; align-items:center;
}

.btn-ghost:hover { border-color:rgba(255,255,255,.28); color:var(--white); }

.btn-primary {
  padding:9px 22px; border-radius:8px;
  border:none; background:var(--jade);
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:13px; font-weight:700; color:var(--ink);
  cursor:pointer; transition:all .2s; text-decoration:none;
  display:inline-flex; align-items:center; gap:6px;
}

.btn-primary:hover { background:#00b896; transform:translateY(-1px); box-shadow:0 8px 24px rgba(0,201,167,.3); }

/* ─── HERO ───────────────────────────────────────── */
.hero {
  position:relative; z-index:1;
  min-height:100vh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:100px clamp(16px,5vw,60px) 60px;
  text-align:center;
  overflow:hidden;
 
}

.hero::before {
  content:''; position:absolute; inset:0; pointer-events:none;
   
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(0,201,167,.1) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 10% 80%, rgba(0,80,180,.06) 0%, transparent 60%);
}

.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  padding:5px 14px; border-radius:30px;
  background:var(--jade3);
  border:1px solid rgba(0,201,167,.22);
  font-size:12px; font-weight:600; color:var(--jade);
  letter-spacing:.5px; text-transform:uppercase;
  margin-bottom:28px; font-family:'JetBrains Mono',monospace;
}

.badge-dot { width:6px; height:6px; border-radius:50%; background:var(--jade); animation:pulse 2s infinite; }

@keyframes pulse {
  0%,100%{ opacity:1; } 50%{ opacity:.4; }
}

.hero h1 {
  font-size:clamp(38px,6.5vw,78px);
  font-weight:800; color:var(--white);
  max-width:820px; margin-bottom:8px;
}

.hero h1 .accent {
  font-family:'Instrument Serif',serif;
  font-style:italic;
  color:var(--jade);
}

.hero-sub {
  font-size:clamp(15px,1.8vw,19px);
  color:var(--mist); max-width:560px;
  line-height:1.72; margin:18px auto 40px;
}

.hero-ctas {
  display:flex; gap:12px; flex-wrap:wrap;
  justify-content:center; margin-bottom:60px;
}

.btn-xl {
  padding:14px 32px; border-radius:10px;
  border:none; background:var(--jade);
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:15px; font-weight:700; color:var(--ink);
  cursor:pointer; transition:all .2s;
  display:inline-flex; align-items:center; gap:8px;
  box-shadow:0 4px 24px rgba(0,201,167,.25);
  text-decoration:none;
}

.btn-xl:hover { background:#00b896; transform:translateY(-2px); box-shadow:0 12px 32px rgba(0,201,167,.35); }

.btn-xl-ghost {
  padding:14px 32px; border-radius:10px;
  border:1.5px solid rgba(255,255,255,.14);
  background:transparent;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:15px; font-weight:600; color:var(--ice);
  cursor:pointer; transition:all .2s;
  display:inline-flex; align-items:center; gap:8px;
  text-decoration:none;
}

.btn-xl-ghost:hover { border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.04); }

.hero-stats {
  display:flex; gap:40px; flex-wrap:wrap;
  justify-content:center; margin-bottom:64px;
}

.stat { text-align:center; }

.stat-num {
  font-family:'Instrument Serif',serif;
  font-size:32px; font-weight:400;
  color:var(--white); line-height:1;
}

.stat-num span { color:var(--jade); }
.stat-label { font-size:12px; color:var(--fog); margin-top:5px; }

/* ─── LIVE DEMO CARD (Signature Element) ─────────── */
.demo-container {
  width:100%; max-width:960px;
  position:relative; z-index:2;
}

.demo-label {
  font-size:12px; font-weight:600;
  color:var(--fog); letter-spacing:1.5px;
  text-transform:uppercase; text-align:center;
  margin-bottom:16px;
  font-family:'JetBrains Mono',monospace;
}

.demo-card {
  background:rgba(12,30,53,.8);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:0 40px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(0,201,167,.06);
  backdrop-filter:blur(12px);
}

/* Demo tab bar */
.demo-tabs {
  display:flex; align-items:center;
  padding:0 20px;
  background:rgba(6,17,31,.6);
    background-color: black;
  border-bottom:1px solid rgba(255,255,255,.06);
  gap:0;
}

.demo-tab {
  padding:14px 20px;

  font-size:12.5px; font-weight:600;
  color:var(--fog); cursor:pointer;
  border-bottom:2px solid transparent;
  transition:all .2s; letter-spacing:.2px;
  white-space:nowrap;
}

.demo-tab.active { color:var(--jade); border-bottom-color:var(--jade); }
.demo-tab:hover:not(.active) { color:var(--mist); }

/* Demo tab circles */
.demo-dots {
  display:flex; gap:6px; margin-right:auto;
  padding:14px 0;
}

.demo-dot { width:10px; height:10px; border-radius:50%; }

/* Demo content */
.demo-body {
  display:grid; grid-template-columns:1fr 1fr;
}

.demo-side {
  padding:24px 26px;
}

.demo-side.left {
  border-right:1px solid rgba(255,255,255,.06);
  background:rgba(6,17,31,.4);
  background-color: black;
}

.demo-side-label {
  display:flex; align-items:center; gap:8px;
  font-size:10.5px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase;
  color:var(--fog); margin-bottom:16px;
  font-family:'JetBrains Mono',monospace;
}

.demo-side-label .dot { width:7px; height:7px; border-radius:50%; }

/* Raw data table */
.raw-table { width:100%; border-collapse:collapse; }

.raw-table tr { border-bottom:1px solid rgba(255,255,255,.04); }
.raw-table tr:last-child { border-bottom:none; }

.raw-table td {
  padding:9px 0; font-size:12.5px;
}

.raw-table td:first-child { color:var(--fog); }
.raw-table td:last-child {
  text-align:right;
  font-family:'JetBrains Mono',monospace;
  font-size:12px; font-weight:500; color:var(--ice);
}

.raw-table td.red { color:var(--rose); }
.raw-table td.gold { color:var(--gold); }
.raw-table td.jade { color:var(--jade); }

.raw-confused {
  margin-top:14px; padding:11px 14px;
  background:rgba(255,77,109,.07);
  border:1px solid rgba(255,77,109,.15);
  border-radius:8px;
  font-size:12px; color:#fc8fa0; font-style:italic; line-height:1.5;
}

/* Risk items */
.risk-block {
  margin-bottom:12px; border-radius:9px; overflow:hidden;
}

.risk-block:last-child { margin-bottom:0; }

.risk-head {
  display:flex; align-items:center; gap:10px;
  padding:11px 14px;
}

.risk-pill {
  font-size:9px; font-weight:700;
  padding:2px 8px; border-radius:20px;
  text-transform:uppercase; letter-spacing:.5px;
  white-space:nowrap;
}

.risk-pill.critical { background:rgba(255,77,109,.15); color:var(--rose); }
.risk-pill.important { background:rgba(245,166,35,.12); color:var(--gold); }
.risk-pill.safe { background:rgba(0,201,167,.1); color:var(--jade); }

.risk-block-title { font-size:13px; font-weight:700; color:var(--ice); }
.risk-block-body { padding:0 14px 12px; font-size:12px; color:var(--mist); line-height:1.65; }

.proof-tag {
  display:inline-flex; align-items:center; gap:5px;
  margin-top:8px; padding:4px 10px;
  background:rgba(255,255,255,.05);
  border-radius:5px;
  font-size:10.5px; color:var(--fog);
  font-family:'JetBrains Mono',monospace;
}

.demo-happy {
  margin-top:14px; padding:11px 14px;
   background-color: black;
  background:rgba(0,201,167,.07);
  border:1px solid rgba(0,201,167,.18);
  border-radius:8px;
  font-size:12px; color:#7fbeab; font-style:italic; line-height:1.5;
}

/* ─── SECTION BASE ───────────────────────────────── */
section { position:relative; z-index:1; }

.section-eyebrow {
  font-size:11px; font-weight:700;
  letter-spacing:2.5px; text-transform:uppercase;
  color:var(--jade); margin-bottom:12px;
  font-family:'JetBrains Mono',monospace;
}

/* ─── WHY SECTION ────────────────────────────────── */
.why-section {
  padding:100px clamp(16px,5vw,60px);
  max-width:1200px; margin:0 auto;
 
}
.why-card.reveal {

    background-color: black;
}
.why-header { text-align:center; margin-bottom:60px; }

.why-header h2 {
  font-size:clamp(30px,4.5vw,52px);
  font-weight:800; color:var(--white); margin-bottom:14px;
}

.why-header h2 em {
  font-family:'Instrument Serif',serif;
  font-style:italic; color:var(--jade);
  font-weight:400;
}

.why-header p { font-size:17px; color:var(--mist); max-width:560px; margin:0 auto; line-height:1.7; }

.why-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:20px;
   background-color: black;
}

.why-card {
  padding:28px 26px;
   background-color: black;
  background:rgba(12,30,53,.7);
  border:1px solid rgba(255,255,255,.07);
  border-radius:var(--r-lg);
  transition:border-color .25s, transform .25s;
  position:relative; overflow:hidden;
}

.why-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--card-accent, var(--jade)), transparent);
}

.why-card:hover { border-color:rgba(255,255,255,.15); transform:translateY(-3px); }

.why-icon {
  width:44px; height:44px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; margin-bottom:16px;
}

.why-card h3 { font-size:17px; font-weight:700; color:var(--white); margin-bottom:8px; }
.why-card p  { font-size:13.5px; color:var(--mist); line-height:1.7; }

/* ─── PROBLEM → SOLUTION ─────────────────────────── */
.problem-section {
    background-color: black;
  padding:80px clamp(16px,5vw,60px);
  
  /* background:rgba(6,17,31,.5); */
  border-top:1px solid rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.05);
}

.problem-inner { max-width:1100px; margin:0 auto; }

.problem-inner h2 {
  font-size:clamp(28px,4vw,46px);
  font-weight:800; color:var(--white);
  text-align:center; margin-bottom:50px;
}

.problem-inner h2 em { font-family:'Instrument Serif',serif; font-style:italic; color:var(--rose); font-weight:400; }

.vs-grid {
  display:grid; grid-template-columns:1fr auto 1fr;
  gap:0; align-items:stretch;
}

.vs-col { border-radius:var(--r-lg); overflow:hidden; }

.vs-col.bad  { background:rgba(255,77,109,.05);  border:1px solid rgba(255,77,109,.15); }
.vs-col.good { background:rgba(0,201,167,.04); border:1px solid rgba(0,201,167,.15); }

.vs-col-head {
  padding:14px 22px;
  display:flex; align-items:center; gap:8px;
  font-size:11px; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.vs-col.bad  .vs-col-head { color:var(--rose); }
.vs-col.good .vs-col-head { color:var(--jade); }

.vs-body { padding:20px 22px; }
.vs-body li {
  font-size:13.5px; color:var(--mist);
  line-height:1.75; padding:4px 0;
  padding-left:18px; position:relative;
  list-style:none;
}

.vs-body li::before { content:attr(data-bullet); position:absolute; left:0; }
.vs-col.bad  .vs-body li::before { color:var(--rose); }
.vs-col.good .vs-body li::before { color:var(--jade); }

.vs-divider {
  display:flex; align-items:center; justify-content:center;
  width:56px; flex-shrink:0;
}

.vs-badge {
  width:44px; height:44px; border-radius:50%;
  background:var(--ink2);
  border:2px solid rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:13px; color:var(--mist);
}

/* ─── SBI LIVE EXAMPLE ───────────────────────────── */
.example-section {
  padding:100px clamp(16px,5vw,60px);
  max-width:1100px; margin:0 auto;
}

.example-header { text-align:center; margin-bottom:16px; }

.example-header h2 {
  font-size:clamp(28px,4vw,48px);
  font-weight:800; color:var(--white); margin-bottom:12px;
}

.example-header p { font-size:16px; color:var(--mist); max-width:520px; margin:0 auto; }

/* Stock identity bar */
.stock-bar {
  display:flex; align-items:center; gap:16px;
  padding:16px 24px;
  background-color: black;
  /* background:rgba(12,30,53,.8); */
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  border-bottom:none;
  margin-top:40px;
}

.stock-logo {
  width:46px; height:46px; border-radius:10px;
  background-color: black;
  /* background:linear-gradient(135deg,#1a3560,#0d2040); */
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:14px; color:var(--jade);
  border:1px solid rgba(0,201,167,.2); flex-shrink:0;
}

.stock-name-big { font-size:18px; font-weight:700; color:var(--white); }
.stock-meta-row { display:flex; gap:12px; align-items:center; margin-top:3px; }

.stag {
  font-family:'JetBrains Mono',monospace;
  font-size:11px; color:var(--fog);
  background:rgba(255,255,255,.05);
  padding:2px 9px; border-radius:4px;
}

.s-price { font-size:22px; font-weight:700; color:var(--white); margin-left:auto; }
.s-chg   { font-size:12.5px; font-weight:600; color:var(--jade); margin-top:2px; text-align:right; }

/* Full analysis card */
.analysis-card {
  background:rgba(10,26,46,.9);
  border:1px solid rgba(255,255,255,.08);
  border-radius:0 0 var(--r-lg) var(--r-lg);
  overflow:hidden;
}

/* Risk tabs inside analysis */
.risk-tabs-row {
  display:flex; gap:8px; padding:18px 24px;
  border-bottom:1px solid rgba(255,255,255,.06);
  background-color: black;
  /* background:rgba(0, 0, 0, 0.5); flex-wrap:wrap; */
}

.rtab {
  padding:6px 14px; border-radius:20px;
  font-size:12px; font-weight:600;
  cursor:pointer; transition:all .2s;
  border:1px solid rgba(255,255,255,.08);
  color:var(--fog);
}

.rtab.active { background:var(--jade3); border-color:rgba(0,201,167,.3); color:var(--jade); }
.rtab:hover:not(.active) { color:var(--mist); }

/* Analysis body */
.analysis-body {
  display:grid; grid-template-columns:1fr 320px;
}

.analysis-main { padding:24px; border-right:1px solid rgba(255,255,255,.06); }

/* Each risk entry */
.ra-item {
  padding:18px 20px; border-radius:10px;
  margin-bottom:12px;
  border:1px solid rgba(255,255,255,.05);
  transition:border-color .2s;
  display:none;
}

.ra-item.active { display:block; }
.ra-item:hover { border-color:rgba(255,255,255,.1); }

.ra-item.critical { background:rgba(255,77,109,.04); border-color:rgba(255,77,109,.12); }
.ra-item.important { background:rgba(245,166,35,.03); border-color:rgba(245,166,35,.1); }
.ra-item.safe      { background:rgba(0,201,167,.03); border-color:rgba(0,201,167,.1); }

.ra-top { display:flex; align-items:flex-start; gap:10px; margin-bottom:10px; }
.ra-icon { font-size:18px; margin-top:2px; flex-shrink:0; }

.ra-title-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ra-title { font-size:14.5px; font-weight:700; color:var(--white); }

.verdict-text {
  font-size:13.5px; color:var(--mist);
  line-height:1.72; margin-bottom:12px;
  padding:12px 14px;
  background:rgba(255,255,255,.03);
  border-radius:7px;
  border-left:3px solid var(--item-border, rgba(255,255,255,.1));
}

.ra-item.critical .verdict-text { --item-border: var(--rose); }
.ra-item.important .verdict-text { --item-border: var(--gold); }
.ra-item.safe .verdict-text { --item-border: var(--jade); }

/* Proof mini table */
.proof-section { margin-top:8px; }

.proof-toggle {
  display:inline-flex; align-items:center; gap:5px;
  font-size:11.5px; color:var(--jade);
  cursor:pointer; background:none; border:none;
  font-family:'Plus Jakarta Sans',sans-serif;
  padding:0; transition:opacity .2s;
}

.proof-toggle:hover { opacity:.7; }
.proof-toggle span { font-size:9px; transition:transform .25s; display:inline-block; }
.proof-toggle.open span { transform:rotate(180deg); }

.proof-rows { display:none; margin-top:10px; border-radius:7px; overflow:hidden; border:1px solid rgba(255,255,255,.06); }
.proof-rows.show { display:block; }

.pr-head {
  display:grid; grid-template-columns:2fr 1fr 1.2fr;
  padding:6px 12px;
  background:rgba(0,0,0,.3);
  font-size:9.5px; font-weight:700;
  color:var(--fog); letter-spacing:1px;
  text-transform:uppercase;
  font-family:'JetBrains Mono',monospace;
}

.pr-row {
  display:grid; grid-template-columns:2fr 1fr 1.2fr;
  padding:8px 12px;
  font-size:12px;
  border-top:1px solid rgba(255,255,255,.04);
}

.pr-row:nth-child(even) { background:rgba(255,255,255,.02); }
.pr-row span:first-child { color:var(--mist); }
.pr-row span.v { font-family:'JetBrains Mono',monospace; font-weight:600; font-size:12px; }
.pr-row span.v.r { color:var(--rose); }
.pr-row span.v.g { color:var(--jade); }
.pr-row span.v.y { color:var(--gold); }
.pr-row span:last-child { color:var(--fog); font-size:11px; }

.trigger-rule {
  padding:7px 12px;
  background:rgba(0,0,0,.3);
  font-family:'JetBrains Mono',monospace;
  font-size:10px; color:var(--fog);
  border-top:1px solid rgba(255,255,255,.06);
  font-style:italic;
}

/* Right panel */
.analysis-side { padding:22px; }

.side-block { margin-bottom:22px; }

.side-label {
  font-size:10px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase;
  color:var(--fog); margin-bottom:12px;
  font-family:'JetBrains Mono',monospace;
}

.verdict-box {
  padding:14px; border-radius:9px;
  background:rgba(255,107,54,.06);
  border:1px solid rgba(255,107,54,.15);
  font-size:13px; color:var(--ice); line-height:1.65;
}

.verdict-box strong { color:var(--white); }

.mini-ratio { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid rgba(255,255,255,.04); }
.mini-ratio:last-child { border-bottom:none; }
.mini-ratio-name { font-size:12px; color:var(--fog); }
.mini-ratio-right { text-align:right; }
.mini-ratio-val { font-family:'JetBrains Mono',monospace; font-size:12.5px; font-weight:600; }
.mini-ratio-explain { font-size:10px; color:var(--fog); max-width:130px; line-height:1.3; margin-top:2px; }

.safety-row { display:flex; gap:8px; padding:7px 0; border-bottom:1px solid rgba(255,255,255,.04); font-size:12px; }
.safety-row:last-child { border-bottom:none; }
.safety-row .chk { color:var(--jade); flex-shrink:0; margin-top:1px; }
.safety-row .st  { color:var(--mist); line-height:1.5; }

/* ─── HOW IT WORKS ───────────────────────────────── */
.how-section {
  padding:100px clamp(16px,5vw,60px);
  background-color: black;
  /* background:rgba(6,17,31,.6); */
  border-top:1px solid rgba(255,255,255,.05);
}

.how-inner { max-width:900px; margin:0 auto; }

.how-inner h2 {
  font-size:clamp(28px,4vw,48px);
  font-weight:800; color:var(--white);
  text-align:center; margin-bottom:12px;
}

.how-sub { font-size:16px; color:var(--mist); text-align:center; margin-bottom:56px; }

.steps { display:flex; flex-direction:column; gap:0; }

.step {
  display:grid; grid-template-columns:60px 1fr;
  gap:0; position:relative;
}

.step:not(:last-child) .step-line {
  position:absolute; left:29px; top:60px; bottom:0; width:2px;
  background:linear-gradient(to bottom, rgba(0,201,167,.3), rgba(0,201,167,.05));
}

.step-num-col { display:flex; flex-direction:column; align-items:center; padding-top:8px; }

.step-num {
  width:42px; height:42px; border-radius:50%;
  background:var(--jade3);
  border:2px solid rgba(0,201,167,.3);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:15px; color:var(--jade);
  flex-shrink:0; z-index:1;
  font-family:'JetBrains Mono',monospace;
}

.step-body { padding:6px 0 40px 20px; }
.step-body h3 { font-size:18px; font-weight:700; color:var(--white); margin-bottom:6px; }
.step-body p  { font-size:14px; color:var(--mist); line-height:1.7; max-width:560px; }

/* ─── PRICING ────────────────────────────────────── */
.pricing-section {
  padding:100px clamp(16px,5vw,60px);
  max-width:1000px; margin:0 auto;
}

.pricing-header { text-align:center; margin-bottom:50px; }

.pricing-header h2 {
  font-size:clamp(28px,4vw,48px);
  font-weight:800; color:var(--white); margin-bottom:10px;
}

.pricing-header p { font-size:16px; color:var(--mist); }

.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }

.price-card {
  background:rgba(12,30,53,.7);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-lg); overflow:hidden;
  transition:transform .25s, border-color .25s;
}

.price-card:hover { transform:translateY(-4px); }
.price-card.featured {
  border-color:rgba(0,201,167,.4);
  background:rgba(0,201,167,.04);
  box-shadow:0 0 0 1px rgba(0,201,167,.1), 0 24px 50px rgba(0,0,0,.4);
}

.price-head {
  padding:24px 26px 20px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.price-tier {
  font-size:10px; font-weight:700;
  letter-spacing:2.5px; text-transform:uppercase;
  margin-bottom:10px; font-family:'JetBrains Mono',monospace;
}

.price-tier.free { color:var(--fog); }
.price-tier.pro  { color:var(--jade); }
.price-tier.ent  { color:var(--gold); }

.price-num {
  font-family:'Instrument Serif',serif;
  font-size:42px; color:var(--white); line-height:1;
}

.price-num sub { font-size:16px; font-family:'Plus Jakarta Sans',sans-serif; font-weight:600; vertical-align:baseline; }
.price-num sup { font-size:18px; font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; }
.price-period { font-size:12.5px; color:var(--fog); margin-top:6px; }

.price-body { padding:22px 26px; }
.price-body li {
  list-style:none; font-size:13.5px; color:var(--mist);
  padding:6px 0; padding-left:20px; position:relative;
  border-bottom:1px solid rgba(255,255,255,.04);
}

.price-body li:last-child { border-bottom:none; }
.price-body li::before { content:'✓'; position:absolute; left:0; color:var(--jade); font-weight:700; }
.price-body li.dim::before { content:'–'; color:var(--fog); }
.price-body li.dim { color:var(--fog); }

.price-footer { padding:0 26px 24px; }
.price-cta { width:100%; padding:12px; border-radius:9px; font-size:14px; font-weight:700; cursor:pointer; transition:all .2s; font-family:'Plus Jakarta Sans',sans-serif; border:none; }
.price-cta.outlined { background:transparent; border:1.5px solid rgba(255,255,255,.15); color:var(--mist); }
.price-cta.outlined:hover { border-color:rgba(255,255,255,.3); color:var(--white); }
.price-cta.filled  { background:var(--jade); color:var(--ink); }
.price-cta.filled:hover  { background:#00b896; }
.price-cta.gold-o { background:transparent; border:1.5px solid rgba(245,166,35,.3); color:var(--gold); }
.price-cta.gold-o:hover { background:rgba(245,166,35,.06); }

/* ─── TESTIMONIALS ───────────────────────────────── */
.testimonials {
  padding:80px clamp(16px,5vw,60px);
  background-color: black;
  /* background:rgba(6,17,31,.5); */
  border-top:1px solid rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.05);
}
.tcard.reveal.visible{
    background-color: black;
}
.testimonials h2 { font-size:clamp(24px,3.5vw,40px); font-weight:800; color:var(--white); text-align:center; margin-bottom:40px; }

.tcard-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:1100px; margin:0 auto; }

.tcard {
  padding:24px; border-radius:var(--r-lg);
  background:rgba(12,30,53,.7);
  border:1px solid rgba(255,255,255,.07);
}

.tcard-quote { font-size:14px; color:var(--mist); line-height:1.75; margin-bottom:16px; font-style:italic; }
.tcard-quote strong { color:var(--jade); font-style:normal; }
.tcard-author { font-size:12.5px; font-weight:600; color:var(--white); }
.tcard-role   { font-size:11.5px; color:var(--fog); margin-top:2px; }

/* ─── CTA BANNER ─────────────────────────────────── */
.cta-banner {
  padding:100px clamp(16px,5vw,60px);
  text-align:center; position:relative; overflow:hidden;
}

.cta-banner::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 70% 70% at 50% 50%, rgba(0,201,167,.07), transparent);
  pointer-events:none;
}

.cta-banner h2 {
  font-size:clamp(30px,5vw,60px);
  font-weight:800; color:var(--white);
  max-width:720px; margin:0 auto 16px;
}

.cta-banner h2 em { font-family:'Instrument Serif',serif; font-style:italic; color:var(--jade); font-weight:400; }
.cta-banner p { font-size:17px; color:var(--mist); margin-bottom:36px; }
.cta-fine { font-size:12px; color:var(--fog); margin-top:14px; }

/* ─── FOOTER ─────────────────────────────────────── */
footer {
  padding:36px clamp(16px,5vw,60px);
  border-top:1px solid rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:16px;
  background-color: white;
}

.footer-logo { font-weight:700; font-size:15px; color:var(--white); }
.footer-logo span { color:var(--jade); }
.footer-note { font-size:12px; color:var(--fog); max-width:440px; line-height:1.6; }
.footer-links { display:flex; gap:22px; }
.footer-links a { font-size:12.5px; color:var(--fog); text-decoration:none; transition:color .2s; }
.footer-links a:hover { color:var(--mist); }
.footer-disc { font-size:11px; color:var(--fog); max-width:100%; opacity:.7; line-height:1.6; margin-top:16px; padding-top:16px; border-top:1px solid rgba(255,255,255,.05); width:100%; }

/* ─── RESPONSIVE ─────────────────────────────────── */
@media (max-width:860px) {
  .demo-body, .analysis-body { grid-template-columns:1fr; }
  .demo-side.left { border-right:none; border-bottom:1px solid rgba(255,255,255,.06); }
  .analysis-side { border-top:1px solid rgba(255,255,255,.06); }
  .why-grid, .vs-grid { grid-template-columns:1fr; }
  .vs-divider { display:none; }
  .tcard-grid, .pricing-grid { grid-template-columns:1fr; }
  .nav-links { display:none; }
  .step { grid-template-columns:46px 1fr; }
}

@media (max-width:560px) {
  .hero-ctas { flex-direction:column; align-items:center; }
  .btn-xl, .btn-xl-ghost { width:100%; justify-content:center; }
  .hero-stats { gap:24px; }
  .stock-bar { flex-wrap:wrap; }
  .s-price { margin-left:0; }
}

/* ─── REVEAL ANIMATION ───────────────────────────── */
.reveal { opacity:0; transform:translateY(24px); transition:opacity .55s ease, transform .55s ease; }
.reveal.visible { opacity:1; transform:none; }