/* ============================================================
   SignalCard™ — LANDING PAGE STYLES
   ============================================================ */

/* ---------- NAV ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background .3s ease, backdrop-filter .3s ease, border-color .3s ease;
  border-bottom: 1px solid transparent;
}
.nav.locked {
  background: rgba(5,5,15,0.92);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom-color: var(--glass-border);
}
.nav-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 18px 28px;
  display: flex; align-items: center; justify-content: space-between;
}
.logo {
  font-family: var(--f-display); font-weight: 700; font-size: 21px;
  letter-spacing: -0.02em; color: #fff; display: flex; align-items: center; gap: 10px;
}
.logo .mark {
  width: 26px; height: 26px; position: relative; display: inline-grid; place-items: center;
}
.logo .mark svg { width: 26px; height: 26px; }
.logo sup { font-size: 10px; color: var(--gold); font-weight: 600; }

.nav-links { display: flex; align-items: center; gap: 8px; }
.nav-links a.nav-link {
  font-size: 14px; font-weight: 600; color: var(--t-2); padding: 9px 14px;
  border-radius: 999px; transition: color .2s, background .2s;
}
.nav-links a.nav-link:hover { color: var(--t-1); background: rgba(255,255,255,0.05); }

.hamburger { display: none; width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--glass-border-2); align-items: center; justify-content: center; }
.hamburger span { display:block; width: 18px; height: 2px; background: #fff; position: relative; }
.hamburger span::before, .hamburger span::after { content:''; position:absolute; left:0; width:18px; height:2px; background:#fff; }
.hamburger span::before { top: -6px; } .hamburger span::after { top: 6px; }

/* ---------- HERO (shared) ---------- */
.hero {
  position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center;
  text-align: center; overflow: hidden; padding: 120px 28px 80px;
}
.hero-inner { position: relative; z-index: 3; max-width: 920px; }
.hero h1 {
  font-family: var(--f-display); font-weight: 700; color: #fff;
  font-size: clamp(40px, 7vw, 86px); line-height: 0.98; letter-spacing: -0.04em;
  margin: 22px 0 0; text-wrap: balance;
}
.hero h1 .grad {
  background: linear-gradient(120deg, var(--gold-soft), var(--gold) 55%, var(--gold-deep));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero .sub {
  font-size: clamp(17px, 2.1vw, 21px); color: var(--t-2); max-width: 620px; margin: 26px auto 0;
  line-height: 1.5; text-wrap: pretty;
}
.hero-cta { display: flex; gap: 14px; justify-content: center; margin-top: 38px; flex-wrap: wrap; }

.hero-stats {
  display: flex; align-items: stretch; justify-content: center; gap: 0; margin-top: 60px;
  border: 1px solid var(--glass-border); border-radius: 16px; overflow: hidden;
  background: rgba(255,255,255,0.018); backdrop-filter: blur(10px); max-width: 720px; margin-left: auto; margin-right: auto;
}
.hero-stat { flex: 1; padding: 20px 22px; position: relative; }
.hero-stat + .hero-stat { border-left: 1px solid rgba(240,165,0,0.22); }
.hero-stat .num { font-family: var(--f-display); font-weight: 700; font-size: 26px; color: #fff; letter-spacing: -0.02em; }
.hero-stat .num .live-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background: var(--green); margin-right:7px; box-shadow:0 0 0 0 rgba(52,211,153,.6); animation: livePulse 1.8s infinite; vertical-align: middle; }
.hero-stat .lbl { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--t-3); margin-top: 5px; }
@keyframes livePulse { 0%{box-shadow:0 0 0 0 rgba(52,211,153,.5);} 70%{box-shadow:0 0 0 7px rgba(52,211,153,0);} 100%{box-shadow:0 0 0 0 rgba(52,211,153,0);} }

.scroll-chevron {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--t-3);
}
.scroll-chevron .label { font-family: var(--f-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; }
.scroll-chevron .chev { width: 20px; height: 20px; border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(45deg); animation: chevBob 1.8s ease-in-out infinite; }
@keyframes chevBob { 0%,100%{ transform: rotate(45deg) translate(0,0); opacity:.4;} 50%{ transform: rotate(45deg) translate(4px,4px); opacity:1;} }

/* ---- Hero backgrounds (variant-specific) ---- */
.hero-bg { position: absolute; inset: 0; z-index: 1; }
.hero-veil { position:absolute; inset:0; z-index:2; background: radial-gradient(ellipse 70% 60% at 50% 40%, transparent 40%, rgba(5,5,15,0.55) 100%), linear-gradient(180deg, transparent 60%, var(--bg) 100%); pointer-events:none; }

/* Variant A — Radiating grid */
.hv-grid .orb1 { width: 560px; height: 560px; top: -120px; left: 50%; margin-left: -280px; animation: orbPulse 9s ease-in-out infinite; }
.hv-grid .orb2 { width: 380px; height: 380px; bottom: -80px; left: 8%; animation: orbPulse 11s ease-in-out infinite 1s; }
.hv-grid .orb3 { width: 340px; height: 340px; top: 20%; right: 6%; animation: orbPulse 13s ease-in-out infinite 2s; }
.hv-grid .rays { position:absolute; inset:0; background:
  repeating-conic-gradient(from 0deg at 50% 44%, rgba(240,165,0,0.05) 0deg 1deg, transparent 1deg 16deg);
  mask-image: radial-gradient(circle at 50% 44%, #000 0%, transparent 60%);
  -webkit-mask-image: radial-gradient(circle at 50% 44%, #000 0%, transparent 60%); }

/* Variant B — AI network constellation */
.hv-network .orb1 { width: 480px; height: 480px; top: 6%; left: 14%; animation: orbPulse 10s ease-in-out infinite; }
.hv-network .orb2 { width: 420px; height: 420px; bottom: 2%; right: 12%; animation: orbPulse 12s ease-in-out infinite 1.5s; }
.hv-network svg.net { position: absolute; inset: 0; width: 100%; height: 100%; }
.hv-network .net line { stroke: rgba(240,165,0,0.16); stroke-width: 1; }
.hv-network .net .vline { stroke: rgba(124,58,237,0.18); }
.hv-network .net circle { fill: var(--gold); }
.hv-network .net circle.v { fill: var(--violet-soft); }
.net-node { animation: nodeFloat 6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes nodeFloat { 0%,100%{ opacity:.5; r:2.2px;} 50%{ opacity:1; r:3.4px;} }

/* Variant C — Signal sweep / radar rings */
.hv-signal { }
.hv-signal .ring { position:absolute; top:44%; left:50%; border-radius:50%; border:1px solid rgba(240,165,0,0.18); transform: translate(-50%,-50%); }
.hv-signal .ring.r1{ width:320px; height:320px; } .hv-signal .ring.r2{ width:620px; height:620px; border-color: rgba(240,165,0,0.12);} .hv-signal .ring.r3{ width:980px; height:980px; border-color: rgba(124,58,237,0.10);} .hv-signal .ring.r4{ width:1380px; height:1380px; border-color: rgba(255,255,255,0.04);}
.hv-signal .sweep { position:absolute; top:44%; left:50%; width:980px; height:980px; transform: translate(-50%,-50%); border-radius:50%;
  background: conic-gradient(from 0deg, rgba(240,165,0,0.22), transparent 28%);
  mask-image: radial-gradient(circle, transparent 0%, #000 12%, #000 50%, transparent 51%);
  -webkit-mask-image: radial-gradient(circle, transparent 0%, #000 12%, #000 50%, transparent 51%);
  animation: sweepRot 8s linear infinite; }
@keyframes sweepRot { to { transform: translate(-50%,-50%) rotate(360deg); } }
.hv-signal .pingdot { position:absolute; width:9px; height:9px; border-radius:50%; background: var(--gold); box-shadow: 0 0 14px var(--gold); }
.hv-signal .orb1 { width: 420px; height: 420px; top: 18%; right: 16%; animation: orbPulse 12s ease-in-out infinite; }

/* Hero variant switcher (floating) */
.hero-switch {
  position: absolute; z-index: 6; bottom: 28px; right: 28px;
  display: flex; align-items: center; gap: 6px; padding: 7px 9px;
  background: rgba(5,5,15,0.7); border: 1px solid var(--glass-border-2); border-radius: 999px;
  backdrop-filter: blur(12px);
}
.hero-switch .hs-label { font-family: var(--f-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--t-3); padding-left: 6px; }
.hero-switch button {
  width: 26px; height: 26px; border-radius: 50%; font-family: var(--f-mono); font-size: 12px; font-weight: 600;
  color: var(--t-2); border: 1px solid transparent; transition: all .2s;
}
.hero-switch button:hover { color: #fff; background: rgba(255,255,255,0.07); }
.hero-switch button.on { color: #160d00; background: var(--gold); border-color: var(--gold); }

/* ---------- SECTION HEADERS ---------- */
.sec-head { text-align: center; max-width: 680px; margin: 0 auto 64px; }
.sec-head h2 { font-family: var(--f-display); font-weight: 700; font-size: clamp(30px, 4.4vw, 52px); letter-spacing: -0.035em; line-height: 1.04; margin-top: 16px; color: #fff; text-wrap: balance; }
.sec-head p { color: var(--t-2); font-size: 18px; margin-top: 16px; text-wrap: pretty; }
.sec-head.left { text-align: left; margin-left: 0; }

/* ---------- SECTION 2 — THREE-IMAGE STORY ---------- */
.story-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.story-card {
  border-radius: var(--r-xl); padding: 30px; min-height: 380px; position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid var(--glass-border);
}
.story-card .sc-tag { font-family: var(--f-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.story-card h3 { font-family: var(--f-display); font-weight: 700; font-size: 27px; letter-spacing: -0.02em; margin: 10px 0 8px; color:#fff; }
.story-card p { color: var(--t-2); font-size: 15px; }
.story-card .viz { position: absolute; inset: 0; z-index: 0; opacity: .9; }
.story-card > * { position: relative; z-index: 1; }

.story-1 { background: linear-gradient(165deg, rgba(13,40,42,0.6), rgba(8,8,20,0.4)); }
.story-1 .sc-tag { color: #6b8e90; }
.story-2 { background: linear-gradient(165deg, rgba(40,30,0,0.55), rgba(8,8,20,0.4)); }
.story-2 .sc-tag { color: var(--gold); }
.story-2.pulse-border::after {
  content:''; position:absolute; inset:0; border-radius: var(--r-xl); border: 1.5px solid var(--gold); z-index: 2;
  animation: scPulse 2.4s ease-in-out infinite; pointer-events: none;
}
@keyframes scPulse { 0%,100%{ box-shadow: 0 0 0 0 rgba(240,165,0,0.0); border-color: rgba(240,165,0,0.35);} 50%{ box-shadow: 0 0 36px -4px rgba(240,165,0,0.5); border-color: rgba(240,165,0,0.9);} }
.story-3 { background: linear-gradient(165deg, rgba(46,20,70,0.6), rgba(8,8,20,0.4)); }
.story-3 .sc-tag { color: var(--violet-soft); }

/* mini viz building blocks (CSS drawn) */
.viz-compass, .viz-card, .viz-choice { position:absolute; inset:0; display:grid; place-items:center; }
.viz-broken { width:90px; height:90px; border:2px dashed rgba(120,150,150,0.45); border-radius:50%; position:relative; }
.viz-broken::after { content:''; position:absolute; top:50%; left:50%; width:46px; height:2px; background:rgba(120,150,150,0.6); transform:translate(-50%,-50%) rotate(28deg); }
.viz-signalcard { width:120px; height:160px; border-radius:14px; background: linear-gradient(160deg, rgba(240,165,0,0.18), rgba(240,165,0,0.04)); border:1px solid rgba(240,165,0,0.4); box-shadow: 0 12px 40px -10px rgba(240,165,0,0.4); position:relative; }
.viz-signalcard::before { content:''; position:absolute; top:16px; left:16px; right:16px; height:8px; border-radius:4px; background: rgba(240,165,0,0.5); box-shadow: 0 16px 0 rgba(255,255,255,0.12), 0 30px 0 rgba(255,255,255,0.08); }
.viz-tap { width:64px; height:64px; border-radius:50%; border:2px solid var(--violet-soft); position:relative; box-shadow:0 0 30px -6px var(--violet); }
.viz-tap::after { content:''; position:absolute; inset:-14px; border-radius:50%; border:2px solid rgba(160,107,255,0.35); animation: scPulse 2s ease-in-out infinite; }

/* ---------- SECTION 3 — HOW IT WORKS ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.step { padding: 32px; }
.step .scircle {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--f-display); font-weight: 700; font-size: 22px; color: var(--gold);
  border: 1.5px solid rgba(240,165,0,0.4); background: rgba(240,165,0,0.06); margin-bottom: 22px;
}
.step h3 { font-family: var(--f-display); font-weight: 700; font-size: 23px; letter-spacing: -0.02em; color:#fff; margin-bottom: 8px; }
.step p { color: var(--t-2); font-size: 15px; }
.step .connector { display: none; }

/* ---------- SECTION 4 — FEATURE GRID ---------- */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; margin-bottom: 110px; }
.feature:last-child { margin-bottom: 0; }
.feature.flip .f-visual { order: 2; }
.feature.flip .f-text { order: 1; }
.f-text .eyebrow { margin-bottom: 14px; display: block; }
.f-text h3 { font-family: var(--f-display); font-weight: 700; font-size: clamp(26px, 3.4vw, 38px); letter-spacing: -0.03em; line-height: 1.06; color:#fff; }
.f-text p { color: var(--t-2); font-size: 18px; margin-top: 16px; max-width: 440px; text-wrap: pretty; }
.f-text .f-points { margin-top: 22px; display: flex; flex-direction: column; gap: 11px; }
.f-text .f-points li { list-style: none; display: flex; align-items: center; gap: 11px; color: var(--t-2); font-size: 15px; }
.f-text .f-points li::before { content:''; width:18px; height:18px; flex:none; border-radius:50%; background: rgba(240,165,0,0.14); border:1px solid rgba(240,165,0,0.5); position:relative; }
.f-visual {
  border-radius: var(--r-xl); min-height: 360px; padding: 28px; position: relative; overflow: hidden;
  background: linear-gradient(165deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border: 1px solid var(--glass-border); display: flex; align-items: center; justify-content: center;
}
.f-visual .fv-glow { position:absolute; width:260px; height:260px; border-radius:50%; filter: blur(40px); }

/* Mock UI — phone parallax */
.mock-phone { width: 190px; height: 320px; border-radius: 30px; border: 1px solid var(--glass-border-2); background: linear-gradient(160deg, #0c0c1e, #07071a); position: relative; box-shadow: 0 30px 70px -20px rgba(0,0,0,0.7); overflow: hidden; }
.mock-phone .notch { position:absolute; top:10px; left:50%; transform:translateX(-50%); width:54px; height:6px; border-radius:6px; background: rgba(255,255,255,0.14); }
.mp-layer { position:absolute; border-radius: 12px; transition: transform .15s ease-out; }
.mp-l1 { inset: 26px 18px 160px; background: linear-gradient(160deg, rgba(240,165,0,0.3), rgba(240,165,0,0.05)); border:1px solid rgba(240,165,0,0.3); }
.mp-l2 { left:18px; right:18px; bottom:96px; height:36px; background: rgba(255,255,255,0.07); }
.mp-l3 { left:18px; right:80px; bottom:54px; height:14px; border-radius:7px; background: rgba(255,255,255,0.12); }
.mp-l4 { left:18px; right:18px; bottom:18px; height:30px; border-radius:10px; background: linear-gradient(180deg, var(--gold-soft), var(--gold)); }

/* Mock UI — share prompt */
.mock-share { width: 100%; max-width: 300px; }
.share-toast { background: rgba(255,255,255,0.05); border:1px solid var(--glass-border-2); border-radius: 16px; padding: 18px; position: relative; }
.share-toast .st-head { display:flex; align-items:center; gap:10px; }
.share-timer { width:34px; height:34px; border-radius:50%; background: conic-gradient(var(--gold) 0deg 220deg, rgba(255,255,255,0.1) 220deg 360deg); display:grid; place-items:center; font-family:var(--f-mono); font-size:11px; color:#fff; }
.share-timer span { width:26px; height:26px; border-radius:50%; background:#0a0a1c; display:grid; place-items:center; }
.share-btns { display:flex; gap:8px; margin-top:14px; }
.share-btns .sb { flex:1; text-align:center; padding:9px; border-radius:10px; font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; background: rgba(240,165,0,0.14); color: var(--gold); border:1px solid rgba(240,165,0,0.3); }

/* Mock UI — three image arc */
.mock-arc { display:flex; gap:12px; align-items:flex-end; }
.arc-img { width: 74px; border-radius: 12px; border:1px solid var(--glass-border-2); position:relative; overflow:hidden; }
.arc-img .lbl { position:absolute; bottom:0; left:0; right:0; padding:6px; font-family:var(--f-mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; text-align:center; background: linear-gradient(transparent, rgba(0,0,0,0.7)); color: var(--t-2); }
.arc-1 { height: 120px; background: linear-gradient(160deg, rgba(45,212,191,0.3), rgba(8,8,20,0.5)); }
.arc-2 { height: 150px; background: linear-gradient(160deg, rgba(240,165,0,0.3), rgba(8,8,20,0.5)); }
.arc-3 { height: 130px; background: linear-gradient(160deg, rgba(124,58,237,0.3), rgba(8,8,20,0.5)); }

/* Mock UI — analytics */
.mock-analytics { width:100%; max-width:300px; }
.ma-row { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.ma-row .k { font-family:var(--f-mono); font-size:11px; color:var(--t-3); width:54px; text-transform:uppercase; letter-spacing:.06em; }
.ma-bar { flex:1; height:10px; border-radius:6px; background: rgba(255,255,255,0.06); overflow:hidden; }
.ma-bar i { display:block; height:100%; border-radius:6px; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); }
.ma-row .v { font-family:var(--f-mono); font-size:12px; color:#fff; width:38px; text-align:right; }

/* ---------- SECTION 5 — INDUSTRIES ---------- */
.ind-grid { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; max-width: 860px; margin: 0 auto; }
.ind-pill {
  display:flex; align-items:center; gap:10px; padding:13px 20px; border-radius:999px;
  border:1px solid rgba(240,165,0,0.3); background: rgba(240,165,0,0.03); color: var(--t-1);
  font-weight:600; font-size:15px; transition: all .25s; cursor: default;
}
.ind-pill .idot { width:8px; height:8px; border-radius:50%; background: var(--gold); transition: background .25s; }
.ind-pill:hover { background: var(--gold); color:#160d00; border-color: var(--gold); transform: translateY(-3px); box-shadow: 0 12px 30px -10px rgba(240,165,0,0.6); }
.ind-pill:hover .idot { background:#160d00; }

/* ---------- SECTION 6 — SIGNAL TICKER ---------- */
.ticker { position:relative; overflow:hidden; padding: 26px 0; border-top:1px solid var(--glass-border); border-bottom:1px solid var(--glass-border); background: rgba(255,255,255,0.012); }
.ticker::before, .ticker::after { content:''; position:absolute; top:0; bottom:0; width:140px; z-index:2; pointer-events:none; }
.ticker::before { left:0; background: linear-gradient(90deg, var(--bg), transparent); }
.ticker::after { right:0; background: linear-gradient(270deg, var(--bg), transparent); }
.ticker-track { display:flex; gap:0; width:max-content; animation: tickerScroll 42s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes tickerScroll { from { transform: translateX(0);} to { transform: translateX(-50%);} }
.ticker-item { display:flex; align-items:center; gap:18px; padding: 0 26px; white-space:nowrap; }
.ticker-item .ti-text { font-family: var(--f-mono); font-size: 13px; color: var(--t-3); letter-spacing: .02em; }
.ticker-item .ti-text b { color: var(--t-2); font-weight: 600; }
.ticker-sep { width:6px; height:6px; border-radius:50%; background: var(--gold); flex:none; }

/* ---------- SECTION 7 — PRICING ---------- */
.price-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 22px; max-width: 1040px; margin: 0 auto; align-items: stretch; }
.price-card { position:relative; border-radius: var(--r-xl); padding: 34px 30px; display:flex; flex-direction:column; border:1px solid var(--glass-border); background: var(--surface); backdrop-filter: blur(18px); overflow:hidden; }
.price-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity:.6; }
.price-card.featured { border-color: rgba(240,165,0,0.4); background: rgba(240,165,0,0.04); box-shadow: 0 30px 80px -30px rgba(240,165,0,0.5); transform: translateY(-8px); }
.price-card.featured::before { opacity:1; height:4px; }
.price-badge { position:absolute; top:18px; right:18px; }
.price-name { font-family: var(--f-mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color: var(--gold); }
.price-amt { font-family: var(--f-display); font-weight:700; font-size: 46px; letter-spacing:-0.03em; color:#fff; margin: 14px 0 2px; }
.price-amt span { font-family: var(--f-body); font-size: 16px; color: var(--t-3); font-weight: 600; }
.price-desc { color: var(--t-3); font-size: 14px; min-height: 40px; }
.price-feats { list-style:none; margin: 22px 0; display:flex; flex-direction:column; gap:13px; flex:1; }
.price-feats li { display:flex; align-items:flex-start; gap:11px; color: var(--t-2); font-size:14.5px; }
.price-feats li .ck { width:18px; height:18px; flex:none; border-radius:50%; background: rgba(240,165,0,0.16); border:1px solid rgba(240,165,0,0.4); display:grid; place-items:center; margin-top:1px; }
.price-feats li .ck svg { width:10px; height:10px; }

/* ---------- SECTION 8 — CTA / FOOTER ---------- */
.cta { position:relative; text-align:center; padding: 130px 28px; overflow:hidden; }
.cta-inner { position:relative; z-index:3; max-width: 760px; margin:0 auto; }
.cta h2 { font-family:var(--f-display); font-weight:700; font-size: clamp(34px, 5.5vw, 66px); letter-spacing:-0.04em; line-height:1.02; color:#fff; text-wrap:balance; }
.cta p { color: var(--t-2); font-size: 20px; margin: 20px 0 36px; }
.cta .orb1 { width:600px; height:600px; top:-160px; left:50%; margin-left:-300px; animation: orbPulse 10s ease-in-out infinite; }

.footer { border-top:1px solid var(--glass-border); padding: 40px 28px; }
.footer-inner { max-width: var(--maxw); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap: 20px; flex-wrap:wrap; }
.footer-links { display:flex; gap:24px; flex-wrap:wrap; }
.footer-links a { font-size:14px; color: var(--t-3); transition: color .2s; }
.footer-links a:hover { color: var(--t-1); }
.footer .copy { font-family: var(--f-mono); font-size:12px; color: var(--t-4); letter-spacing:.04em; }

/* ---------- LOGIN MODAL ---------- */
.modal-veil { position:fixed; inset:0; z-index:200; background: rgba(3,3,10,0.78); backdrop-filter: blur(8px); display:none; align-items:center; justify-content:center; padding:24px; opacity:0; transition: opacity .3s; }
.modal-veil.open { display:flex; opacity:1; }
.login-card { width:100%; max-width: 420px; border-radius: var(--r-xl); padding: 38px 34px; background: linear-gradient(165deg, rgba(20,20,40,0.9), rgba(8,8,20,0.95)); border:1px solid var(--glass-border-2); box-shadow: 0 40px 100px -30px rgba(0,0,0,0.8); transform: translateY(16px) scale(.98); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.modal-veil.open .login-card { transform: none; }
.login-card h3 { font-family: var(--f-display); font-weight:700; font-size: 26px; letter-spacing:-0.02em; color:#fff; }
.login-card .lc-sub { color: var(--t-3); font-size: 14px; margin-top: 6px; }
.login-card .demo-hint { font-family: var(--f-mono); font-size: 11px; color: var(--gold); background: rgba(240,165,0,0.08); border:1px dashed rgba(240,165,0,0.4); border-radius:10px; padding:10px 12px; margin: 20px 0; line-height: 1.6; }
.field { margin-bottom: 14px; }
.field label { font-family: var(--f-mono); font-size: 11px; letter-spacing:.14em; text-transform:uppercase; color: var(--t-3); display:block; margin-bottom: 7px; }
.field input { width:100%; padding: 13px 15px; border-radius: 12px; background: rgba(255,255,255,0.04); border:1px solid var(--glass-border-2); color:#fff; font-size:15px; transition: border-color .2s, background .2s; }
.field input:focus { outline:none; border-color: var(--gold); background: rgba(255,255,255,0.06); }
.login-err { color: var(--red); font-size: 13px; margin-bottom: 12px; display:none; }
.login-err.show { display:block; }
.modal-close { position:absolute; top:20px; right:20px; width:34px; height:34px; border-radius:50%; border:1px solid var(--glass-border); color: var(--t-2); display:grid; place-items:center; }
.modal-close:hover { background: rgba(255,255,255,0.06); color:#fff; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
  .story-grid, .steps, .price-grid { grid-template-columns: 1fr; }
  .feature { grid-template-columns: 1fr; gap: 28px; margin-bottom: 72px; }
  .feature.flip .f-visual, .feature.flip .f-text { order: 0; }
  .price-card.featured { transform: none; }
  .reveal.from-left, .reveal.from-right { transform: translateY(32px); }
  .reveal.from-left.in, .reveal.from-right.in { transform: none; }
}
@media (max-width: 720px) {
  .nav-links { display: none; }
  .nav-links.mobile-open { display: flex; position: absolute; top: 70px; left: 16px; right: 16px; flex-direction: column; align-items: stretch; padding: 16px; background: rgba(10,10,24,0.98); border:1px solid var(--glass-border); border-radius: 18px; backdrop-filter: blur(20px); }
  .nav-links.mobile-open a.nav-link { padding: 13px; }
  .hamburger { display: flex; }
  .hero-stats { flex-direction: column; }
  .hero-stat + .hero-stat { border-left: none; border-top: 1px solid rgba(240,165,0,0.22); }
  .hero-switch { bottom: 84px; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
}