:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #111216;
  --ink: #111216;
  --muted: #626772;
  --line: #e3e5e9;
  --accent: #d33a1e;
  --accent-dark: #a92c15;
  --accent-soft: #fff0eb;
  --lime: #d7ff68;
  --wrap: 1200px;
  --radius: 26px;
  --shadow: 0 24px 70px rgba(18, 20, 28, .12);
  --sans: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--bg); font-family: var(--sans); line-height: 1.55; }
body.locked { overflow: hidden; }
img { max-width: 100%; }
a { color: inherit; }
button, input, textarea { font: inherit; }
[hidden] { display: none !important; }
.wrap { width: min(calc(100% - 40px), var(--wrap)); margin-inline: auto; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 100; background: var(--surface); padding: 12px 18px; border-radius: 12px; }
.skip-link:focus { top: 16px; }

.topbar { position: sticky; top: 0; z-index: 30; background: rgba(246,247,249,.88); backdrop-filter: blur(18px); border-bottom: 1px solid rgba(17,18,22,.08); }
.topbar-in { min-height: 74px; display: flex; align-items: center; gap: 28px; }
.brand { text-decoration: none; font-weight: 800; line-height: 1.05; }
.brand small { display: block; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.nav { margin-left: auto; display: flex; align-items: center; gap: 24px; }
.nav a { text-decoration: none; font-size: 14px; font-weight: 650; }
.nav a:hover { color: var(--accent); }
.burger { display: none; width: 44px; height: 44px; padding: 11px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.burger span { display: block; height: 2px; background: var(--ink); margin: 4px 0; }

.btn { display: inline-flex; justify-content: center; align-items: center; gap: 10px; min-height: 52px; padding: 0 22px; border: 1px solid transparent; border-radius: 14px; font-weight: 800; text-decoration: none; cursor: pointer; transition: transform .2s, box-shadow .2s, background .2s; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-dark)); box-shadow: 0 12px 28px rgba(211,58,30,.25); }
.btn-primary:hover { box-shadow: 0 16px 34px rgba(211,58,30,.34); }
.btn-secondary { background: var(--surface); border-color: var(--line); }
.btn-dark { color: #fff; background: #18191e; }

.hero { position:relative; min-height:calc(100svh - 74px); display:flex; align-items:center; padding:clamp(54px,6vw,92px) 0 64px; overflow:hidden; color:#fff; background:radial-gradient(circle at 78% 45%,rgba(211,58,30,.2),transparent 32%),linear-gradient(135deg,#090a0d,#151820); isolation:isolate; }
.hero::before { content:""; position:absolute; inset:0; z-index:0; opacity:.48; background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:54px 54px; mask-image:linear-gradient(90deg,transparent,#000 34%,#000); }
.hero::after { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg,rgba(9,10,13,.98) 0%,rgba(9,10,13,.94) 42%,rgba(9,10,13,.38) 67%,rgba(9,10,13,.04) 100%); pointer-events:none; }
.hero-intro { position:relative; min-height:min(66vh,580px); display:flex; align-items:center; }
.hero-copy { position:relative; z-index:4; max-width:680px; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; color: var(--accent-dark); font: 700 12px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--accent); }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width:680px; margin-bottom:24px; font-size:clamp(54px,5.4vw,86px); line-height:.94; letter-spacing:-.058em; }
h1 span { color: var(--accent); }
.hero .eyebrow { color:var(--lime); }
.hero-lead { max-width:610px; margin-bottom:30px; font-size:clamp(20px,1.6vw,25px); line-height:1.45; color:#c5c9d1; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.microproof { display:flex; flex-wrap:wrap; gap:8px 18px; margin:26px 0 0; padding:0; list-style:none; color:#979da8; font-size:12px; }
.microproof li::before { content:"✓"; color:var(--lime); font-weight:900; margin-right:7px; }

.hero-visual { position:absolute; z-index:2; right:-3vw; top:50%; width:min(52vw,680px); height:100%; min-height:540px; perspective:1200px; transform:translateY(-50%); pointer-events:none; }
.hero-glow { position:absolute; left:54%; top:49%; width:92%; aspect-ratio:1; border:1px solid rgba(224,66,31,.14); border-radius:50%; background:radial-gradient(circle,rgba(224,66,31,.22),rgba(224,66,31,.05) 46%,transparent 70%); box-shadow:0 0 0 70px rgba(224,66,31,.025),0 0 0 140px rgba(224,66,31,.018); filter:blur(.2px); transform:translate(-50%,-50%); }
.hero-site-card { position:absolute; z-index:3; left:54%; top:50%; width:72%; aspect-ratio:.94; color:#fff; transform:translate(-50%,-50%) rotateY(-6deg) rotateX(2deg); transform-style:preserve-3d; }
.hero-site-card::before { content:""; position:absolute; inset:10%; border:1px solid rgba(255,255,255,.1); border-radius:50%; box-shadow:0 0 0 42px rgba(255,255,255,.018),0 0 50px rgba(211,58,30,.12); }
.hero-site-chrome { display:none; }
.hero-site-chrome i { width:7px; height:7px; border:1px solid rgba(255,255,255,.42); border-radius:50%; }
.hero-site-chrome span { margin-left:8px; color:#838995; font:700 9px var(--mono); letter-spacing:.03em; }
.hero-site-content { position:relative; z-index:2; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; height:100%; padding:clamp(32px,4vw,56px); border:1px solid rgba(255,255,255,.15); border-radius:30px; background:linear-gradient(145deg,rgba(38,41,49,.82),rgba(10,12,16,.72)); box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 38px 90px rgba(0,0,0,.48),0 0 58px rgba(211,58,30,.12); backdrop-filter:blur(10px); overflow:hidden; }
.hero-site-content::before { content:""; position:absolute; inset:0; background:linear-gradient(115deg,transparent 22%,rgba(255,255,255,.08) 46%,transparent 63%); transform:translateX(-72%); animation:hero-sheen 7s ease-in-out infinite; }
.hero-site-content > small { margin-bottom:18px; color:var(--lime); font:700 9px var(--mono); letter-spacing:.12em; text-transform:uppercase; }
.hero-site-content > strong { max-width:330px; font-size:clamp(27px,2.4vw,38px); line-height:.98; letter-spacing:-.05em; }
.hero-site-content > span { margin-top:18px; color:#9ba1ad; font-size:12px; }
.hero-result { display:flex; align-items:flex-end; gap:16px; width:100%; margin-top:26px; padding:14px 16px; border:1px solid rgba(255,255,255,.13); border-radius:14px; background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.025)); box-shadow:inset 0 1px 0 rgba(255,255,255,.08); }
.hero-growth { display:flex; align-items:flex-end; gap:4px; width:70px; height:42px; }
.hero-growth i { flex:1; min-width:0; border-radius:3px 3px 1px 1px; background:linear-gradient(#ff7a50,#c62d16); box-shadow:0 0 12px rgba(224,66,31,.2); }
.hero-growth i:nth-child(1) { height:28%; }.hero-growth i:nth-child(2) { height:40%; }.hero-growth i:nth-child(3) { height:54%; }.hero-growth i:nth-child(4) { height:72%; }.hero-growth i:nth-child(5) { height:100%; }
.hero-result div:last-child { display:flex; flex-direction:column; }
.hero-result small { color:#8f96a3; font:700 7px var(--mono); letter-spacing:.09em; text-transform:uppercase; }
.hero-result b { margin-top:4px; font-size:14px; }
.hero-site-pages { display:none; }
.hero-site-pages i { position:absolute; inset:5% -5% -5% 5%; border:1px solid rgba(211,58,30,.24); border-radius:28px; background:rgba(211,58,30,.045); }
.hero-site-pages i:nth-child(2) { inset:9% -9% -9% 9%; opacity:.62; }
.hero-site-pages i:nth-child(3) { inset:13% -13% -13% 13%; opacity:.34; }
.hero-signal { position:absolute; z-index:5; min-width:145px; padding:13px 16px; border:1px solid rgba(255,255,255,.15); border-radius:15px; color:#fff; background:rgba(20,22,27,.82); box-shadow:0 18px 42px rgba(0,0,0,.34); backdrop-filter:blur(16px); }
.hero-signal::after { content:""; position:absolute; top:50%; width:46px; height:1px; background:linear-gradient(90deg,var(--accent),transparent); }
.hero-signal small { display:block; margin-bottom:4px; color:#f28969; font:700 8px var(--mono); letter-spacing:.1em; }
.hero-signal b { font-size:12px; }
.signal-search { left:1%; top:24%; transform:rotate(-2deg); }
.signal-search::after { left:100%; }
.signal-ads { right:0; bottom:20%; transform:rotate(2deg); }
.signal-ads::after { right:100%; transform:rotate(180deg); }
@keyframes hero-sheen { 0%,62%,100% { transform:translateX(-72%); } 78% { transform:translateX(72%); } }

.story { --converge:0; --assemble:0; --window:0; --focus-exit:0; --pages:0; --traffic:0; --lead:0; position:relative; height:500vh; color:#fff; background:#090a0d; }
.story-sticky { position:sticky; top:74px; height:calc(100svh - 74px); min-height:620px; overflow:hidden; background:radial-gradient(circle at 76% 45%,rgba(211,58,30,.12),transparent 29%),linear-gradient(145deg,#090a0d,#12151b); isolation:isolate; }
.story-noise { position:absolute; inset:-60px 0; z-index:0; opacity:.48; background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:54px 54px; mask-image:linear-gradient(90deg,transparent,#000 20%,#000); transform:translateY(calc(var(--story-progress,0) * -42px)); }
.story-copy { position:absolute; z-index:5; left:max(24px,calc((100vw - var(--wrap))/2)); top:50%; width:min(30vw,410px); transform:translateY(-50%); }
.story-kicker { margin-bottom:34px; color:var(--lime); font:700 11px var(--mono); letter-spacing:.12em; text-transform:uppercase; }
.story-steps { position:relative; min-height:330px; }
.story-step { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; opacity:0; transform:translateY(28px); transition:opacity .38s ease,transform .55s cubic-bezier(.2,.75,.25,1); pointer-events:none; }
.story-step.is-active { opacity:1; transform:translateY(0); }
.story-step h2 { margin:0; font-size:clamp(32px,3.25vw,52px); line-height:1.02; letter-spacing:-.045em; }
.story-progress { width:min(280px,70%); height:2px; margin-top:24px; background:rgba(255,255,255,.15); overflow:hidden; }
.story-progress i { display:block; width:100%; height:100%; background:var(--accent); transform:scaleX(var(--story-progress,0)); transform-origin:left; }
.story-scene { position:absolute; z-index:2; right:max(20px,calc((100vw - var(--wrap))/2 - 40px)); top:50%; width:min(61vw,860px); height:min(78vh,760px); transform:translateY(-50%) scale(calc(.98 + var(--story-progress,0)*.02)); perspective:1300px; }
.story-scene::before { content:""; position:absolute; inset:4%; border:1px solid rgba(255,255,255,.055); border-radius:34px; background:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px); background-size:42px 42px; mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.story-scene::after { content:""; position:absolute; left:50%; top:50%; width:44%; height:38%; border-radius:50%; background:rgba(224,68,31,.16); filter:blur(80px); opacity:calc(var(--window)*.7); transform:translate(-50%,-50%); }
.direction-field { position:absolute; inset:0; z-index:4; opacity:calc(1 - var(--window)); transform:scale(calc(1 - var(--window)*.06)); }
.direction-module { position:absolute; display:flex; flex-direction:column; justify-content:center; width:clamp(185px,26%,224px); min-height:92px; padding:18px 22px; border:1px solid rgba(255,255,255,.17); border-radius:18px; color:#f5f5f7; background:linear-gradient(145deg,#24272e,#111318 62%,#090b0e); box-shadow:inset 0 1px 0 rgba(255,255,255,.17),inset 0 -14px 28px rgba(0,0,0,.3),0 22px 46px rgba(0,0,0,.42); transform:translate(-50%,-50%) perspective(760px) rotateX(4deg); overflow:hidden; }
.direction-module::before { content:""; position:absolute; inset:0; background:linear-gradient(112deg,transparent 22%,rgba(255,255,255,.11) 46%,transparent 64%); transform:translateX(-72%); opacity:.55; }
.direction-module::after { content:""; position:absolute; left:0; top:15px; bottom:15px; width:2px; background:linear-gradient(transparent,#f36a3d,transparent); box-shadow:0 0 14px rgba(243,106,61,.5); }
.direction-module strong { font-size:17px; letter-spacing:-.02em; }
.module-l1 { left:14%; top:22%; }.module-l2 { left:14%; top:50%; }.module-l3 { left:14%; top:78%; }
.module-r1 { left:86%; top:22%; }.module-r2 { left:86%; top:50%; }.module-r3 { left:86%; top:78%; }
.story-connections { position:absolute; inset:0; z-index:3; width:100%; height:100%; overflow:visible; pointer-events:none; }
.story-connections path { fill:none; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.cluster-line { stroke:#d65a34; stroke-width:1.35; stroke-dasharray:1; stroke-dashoffset:calc(1 - var(--converge)); opacity:calc(var(--converge)*(1 - var(--window))); filter:drop-shadow(0 0 3px rgba(214,90,52,.45)); }
.traffic-line { stroke:var(--lime); stroke-width:1.8; stroke-dasharray:1; stroke-dashoffset:calc(1 - var(--traffic)); opacity:calc(var(--traffic)*(1 - var(--lead))); filter:drop-shadow(0 0 5px rgba(215,255,104,.45)); }
.lead-line { stroke:#f25a32; stroke-width:1.8; stroke-dasharray:1; stroke-dashoffset:calc(1 - var(--lead)); opacity:var(--lead); filter:drop-shadow(0 0 5px rgba(242,90,50,.48)); }
.assembly-core { position:absolute; z-index:6; left:50%; top:50%; width:150px; height:150px; opacity:calc(var(--assemble)*(1 - var(--window))); transform:translate(-50%,-50%); }
.core-point { position:absolute; left:50%; top:50%; width:9px; height:9px; background:#fff; box-shadow:0 0 10px #fff,0 0 32px #f05b32,0 0 72px rgba(240,91,50,.7); transform:translate(-50%,-50%) rotate(45deg) scale(calc(.2 + var(--assemble)*1.2)); }
.core-ring { position:absolute; inset:26px; border:1px solid rgba(255,149,111,.75); border-radius:50%; opacity:calc(1 - var(--window)); transform:scale(calc(.08 + var(--assemble)*1.3)); }
.core-axis { position:absolute; left:50%; top:50%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.62),transparent); transform:translate(-50%,-50%) scaleX(var(--assemble)); }
.axis-x { width:150px; height:1px; }.axis-y { width:1px; height:150px; background:linear-gradient(transparent,rgba(255,255,255,.62),transparent); transform:translate(-50%,-50%) scaleY(var(--assemble)); }
.data-field { position:absolute; inset:0; z-index:3; width:100%; height:100%; pointer-events:none; }
.site-window { position:absolute; z-index:7; left:50%; top:49%; width:min(66%,590px); height:min(62%,450px); border:1px solid rgba(255,255,255,.3); border-radius:24px; background:linear-gradient(145deg,rgba(34,37,44,.98),rgba(10,12,16,.99)); box-shadow:inset 0 1px 0 rgba(255,255,255,.17),0 30px 80px rgba(0,0,0,.52),0 0 60px rgba(220,65,29,.14); opacity:var(--window); clip-path:inset(calc((1 - var(--window))*49%) round 24px); transform:translate(-50%,-50%) perspective(1000px) rotateX(calc((1 - var(--window))*8deg)) scale(calc(.86 + var(--window)*.14)); overflow:hidden; }
.window-chrome { display:flex; align-items:center; gap:7px; height:46px; padding:0 16px; border-bottom:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04); }
.window-chrome span { width:7px; height:7px; border:1px solid rgba(255,255,255,.35); border-radius:50%; }
.window-chrome b { margin-left:8px; color:#8f96a3; font:700 9px var(--mono); letter-spacing:.04em; }
.window-chrome i { margin-left:auto; color:var(--lime); font:700 8px var(--mono); font-style:normal; letter-spacing:.08em; }
.window-stage { position:relative; height:calc(100% - 46px); padding:clamp(20px,4vw,38px); }
.window-focus { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; opacity:calc(var(--window)*(1 - var(--focus-exit))); transform:scale(calc(1 - var(--focus-exit)*.08)); }
.window-focus small { margin-bottom:18px; color:#f29273; font:700 9px var(--mono); letter-spacing:.12em; text-transform:uppercase; }
.window-focus strong { max-width:440px; font-size:clamp(29px,3.2vw,46px); line-height:.95; letter-spacing:-.05em; }
.window-focus span { margin-top:18px; color:#8f96a3; font-size:13px; }
.page-system { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; height:100%; opacity:var(--pages); transform:translateY(calc((1 - var(--pages))*24px)); }
.page-system article { position:relative; display:flex; flex-direction:column; justify-content:flex-end; min-width:0; padding:15px; border:1px solid rgba(255,255,255,.13); border-radius:14px; background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.025)); box-shadow:inset 0 1px 0 rgba(255,255,255,.08); overflow:hidden; }
.page-system article::before { content:""; position:absolute; left:0; top:0; width:100%; height:2px; background:linear-gradient(90deg,#f05b32,transparent); transform:scaleX(var(--pages)); transform-origin:left; }
.page-system article:first-child { border-color:rgba(242,90,50,calc(.13 + var(--lead)*.7)); box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 28px rgba(242,90,50,calc(var(--lead)*.18)); }
.page-system small { position:absolute; left:15px; top:13px; color:var(--lime); font:700 9px var(--mono); }
.page-system strong { font-size:13px; line-height:1.2; }
.page-system span { margin-top:5px; color:#858c98; font-size:10px; }
.traffic-source { position:absolute; z-index:9; top:49%; width:118px; padding:13px 14px; border:1px solid rgba(215,255,104,.42); border-radius:13px; background:#111713; box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 40px rgba(0,0,0,.42); opacity:calc(var(--traffic)*(1 - var(--lead))); transform:translateY(-50%) scale(calc(.9 + var(--traffic)*.1)); }
.traffic-source small { display:block; color:#879086; font:700 7px var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.traffic-source b { display:block; margin-top:5px; font-size:12px; }
.traffic-search { left:0; }.traffic-ads { right:0; }
.lead-result { position:absolute; z-index:10; left:50%; bottom:1.5%; display:flex; align-items:center; gap:14px; min-width:220px; padding:14px 18px; border:1px solid rgba(255,255,255,.25); border-radius:14px; background:linear-gradient(145deg,#e44928,#8e210e); box-shadow:0 20px 48px rgba(0,0,0,.48); opacity:var(--lead); transform:translate(-50%,calc((1 - var(--lead))*20px)) scale(calc(.92 + var(--lead)*.08)); }
.lead-result small { color:#ffc6b5; font:700 7px var(--mono); letter-spacing:.09em; text-transform:uppercase; }.lead-result strong { font-size:18px; }.lead-result i { width:8px; height:8px; margin-left:auto; border-radius:50%; background:var(--lime); box-shadow:0 0 12px rgba(215,255,104,.65); }
.motion-ready .reveal { opacity:0; transform:translateY(28px); transition:opacity .72s ease,transform .72s cubic-bezier(.2,.75,.25,1); }
.motion-ready .reveal.is-visible { opacity:1; transform:translateY(0); }
.motion-ready .reveal[data-delay="1"] { transition-delay:.08s; }
.motion-ready .reveal[data-delay="2"] { transition-delay:.16s; }
.motion-ready .reveal[data-delay="3"] { transition-delay:.24s; }

.section { padding: clamp(72px, 9vw, 118px) 0; }
.section-white { background: var(--surface); }
.section-dark { color: #fff; background: var(--surface-2); }
.section-dark .eyebrow, .lead-section .eyebrow { color: var(--lime); }
.section-head { max-width: 790px; margin-bottom: 44px; }
.section h2 { margin-bottom: 18px; font-size: clamp(34px, 4.4vw, 60px); line-height: 1.04; letter-spacing: -.045em; }
.section-lead { max-width: 730px; color: var(--muted); font-size: 19px; }
.section-dark .section-lead { color: #aeb2bd; }

.contrast-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.contrast-card { padding: clamp(24px, 4vw, 44px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.contrast-card.bad { color: #555b66; background: #f1f2f4; }
.contrast-card.good { color: #fff; background: #17181d; border-color: #17181d; box-shadow: var(--shadow); }
.contrast-card .num { display: block; margin-bottom: 28px; color: var(--accent); font: 700 12px var(--mono); }
.contrast-card h3 { margin-bottom: 14px; font-size: 27px; letter-spacing: -.03em; }
.contrast-card ul { margin: 20px 0 0; padding: 0; list-style: none; }
.contrast-card li { padding: 10px 0; border-top: 1px solid currentColor; border-color: rgba(128,128,128,.23); }
.contrast-card.good li::before { content: "→"; color: var(--lime); margin-right: 10px; }

.journey { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; counter-reset: step; }
.journey article { min-height: 220px; padding: 24px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); counter-increment: step; }
.journey article::before { content: "0" counter(step); display: block; margin-bottom: 34px; color: var(--accent); font: 700 13px var(--mono); }
.journey h3 { margin-bottom: 10px; font-size: 20px; }
.journey p { color: var(--muted); font-size: 14px; }

.plans { display: grid; grid-template-columns: .86fr 1.14fr; gap: 18px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; padding: clamp(28px,4vw,46px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.plan.featured { color: #fff; background: linear-gradient(150deg,#191a20,#2a1c18); border-color: transparent; box-shadow: var(--shadow); }
.plan-tag { align-self: flex-start; margin-bottom: 42px; padding: 7px 10px; border-radius: 999px; color: var(--accent-dark); background: var(--accent-soft); font: 700 11px var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.featured .plan-tag { color: #101114; background: var(--lime); }
.plan h3 { margin-bottom: 10px; font-size: clamp(28px,3vw,42px); letter-spacing: -.04em; }
.price { margin: 4px 0 20px; font-size: 34px; font-weight: 900; letter-spacing: -.03em; }
.plan > p { color: var(--muted); }
.featured > p { color: #b9bdc7; }
.plan ul { margin: 24px 0 30px; padding: 0; list-style: none; }
.plan li { padding: 12px 0; border-top: 1px solid var(--line); }
.featured li { border-color: rgba(255,255,255,.12); }
.plan li::before { content: "✓"; color: var(--accent); font-weight: 900; margin-right: 9px; }
.featured li::before { color: var(--lime); }
.plan .btn { margin-top: auto; }
.plan-note { margin-top: 18px; font-size: 13px; }

.demo { display: grid; grid-template-columns: .85fr 1.15fr; gap: 30px; align-items: center; }
.demo-copy { max-width: 500px; }
.demo-copy .label { color: var(--accent); font: 700 12px var(--mono); text-transform: uppercase; }
.demo-copy h2 { margin-top: 14px; }
.demo-copy p { color: #b9bdc7; }
.demo-note { padding: 13px 15px; border-left: 3px solid var(--lime); color: #d8dbe1 !important; background: rgba(255,255,255,.05); }
.demo-map { position: relative; display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; padding: 20px; border: 1px solid rgba(255,255,255,.12); border-radius: 28px; background: #0b0c0f; }
.demo-page { min-height: 150px; padding: 18px; border: 1px solid rgba(255,255,255,.11); border-radius: 18px; background: linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.025)); }
.demo-page:first-child { grid-column: 1/-1; color: #111216; background: linear-gradient(135deg,var(--lime),#f0ffad); }
.demo-page span { display: block; margin-bottom: 32px; font: 700 11px var(--mono); opacity: .65; }
.demo-page b { display: block; font-size: 18px; }
.demo-page small { display: block; margin-top: 7px; color: #aeb2bd; }
.demo-page:first-child small { color: #373a40; }

.process { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.process article { padding: 25px; border-top: 2px solid var(--ink); }
.process b { display: block; margin-bottom: 16px; color: var(--accent); font: 700 12px var(--mono); }
.process h3 { font-size: 21px; }
.process p { color: var(--muted); font-size: 14px; }

.faq { display: grid; gap: 10px; }
.faq details { border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.faq summary { display: flex; justify-content: space-between; gap: 20px; padding: 22px 24px; cursor: pointer; font-weight: 800; list-style: none; }
.faq summary::after { content: "+"; color: var(--accent); font-size: 24px; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq p { max-width: 800px; padding: 0 24px 24px; margin: 0; color: var(--muted); }

.lead-section { color: #fff; background: radial-gradient(circle at 85% 0,rgba(211,58,30,.42),transparent 34%),#111216; }
.lead-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px,6vw,80px); align-items: start; }
.lead-grid h2 { font-size: clamp(38px,5vw,68px); }
.lead-grid .section-lead { color: #bdc1ca; }
.lead-form { padding: clamp(24px,4vw,42px); border: 1px solid rgba(255,255,255,.13); border-radius: 26px; background: rgba(255,255,255,.07); backdrop-filter: blur(14px); }
.field { display: grid; gap: 8px; margin-bottom: 18px; }
.field label { color: #e9ebef; font-size: 13px; font-weight: 750; }
.field input, .field textarea { width: 100%; color: #fff; background: rgba(5,6,8,.42); border: 1px solid rgba(255,255,255,.19); border-radius: 13px; padding: 14px 15px; outline: none; }
.field textarea { min-height: 102px; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--lime); box-shadow: 0 0 0 3px rgba(215,255,104,.13); }
.consent { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 20px; color: #bfc3cc; font-size: 12px; }
.consent input { margin-top: 3px; accent-color: var(--lime); }
.consent a { color: #fff; }
.form-status { margin: 15px 0 0; color: var(--lime); font-weight: 700; }
.hp { position: absolute; left: -9999px; }
.form-foot { margin: 16px 0 0; color: #9ea3ae; font-size: 12px; }

.footer { padding: 34px 0; color: var(--muted); background: var(--surface); border-top: 1px solid var(--line); }
.footer-in { display: flex; justify-content: space-between; gap: 20px; font-size: 13px; }
.footer a { text-underline-offset: 3px; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
@media (max-width: 1120px) {
  .hero-intro { min-height:520px; }
  h1 { font-size:clamp(43px,5.5vw,64px); }
  .hero-visual { right:-10vw; width:min(58vw,620px); min-height:500px; }
  .hero-signal { min-width:132px; padding:11px 13px; }
}
@media (max-width: 900px) {
  .demo, .lead-grid { grid-template-columns:1fr; }
  .hero-copy { max-width:620px; }
  h1 { max-width:620px; }
  .hero-visual { right:-24vw; width:min(78vw,620px); height:100%; min-height:500px; margin:0; opacity:.56; }
  .hero-site-card { width:72%; }
  .signal-search { left:2%; }
  .signal-ads { right:1%; }
  .story-copy { left:24px; top:7%; width:min(620px,calc(100% - 48px)); transform:none; }
  .story-kicker { margin-bottom:16px; }
  .story-steps { min-height:190px; }
  .story-step { justify-content:flex-start; }
  .story-step h2 { max-width:650px; font-size:clamp(28px,5.2vw,42px); }
  .story-progress { margin-top:12px; }
  .story-scene { left:50%; right:auto; top:65%; width:min(94vw,760px); height:56vh; min-height:380px; transform:translate(-50%,-50%) scale(calc(.98 + var(--story-progress,0)*.02)); }
  .journey { grid-template-columns: repeat(2,1fr); }
  .plans { grid-template-columns: 1fr; }
  .process { grid-template-columns: 1fr 1fr; }
  .nav { display: none; position: absolute; inset: 74px 0 auto; padding: 18px 20px 24px; background: var(--surface); border-bottom: 1px solid var(--line); }
  .nav.open { display: grid; }
  .burger { display: block; margin-left: auto; }
  .topbar .btn { min-height: 44px; padding: 0 14px; font-size: 13px; }
}
@media (max-width: 620px) {
  .wrap { width: min(calc(100% - 24px), var(--wrap)); }
  .topbar-in { min-height: 66px; gap: 10px; }
  .brand { font-size: 13px; }
  .brand small { font-size: 9px; }
  .topbar .btn { display: none; }
  .hero { min-height:calc(100svh - 66px); padding:54px 0; }
  .hero::after { background:linear-gradient(90deg,rgba(9,10,13,.98),rgba(9,10,13,.88) 72%,rgba(9,10,13,.5)); }
  .hero-intro { min-height:500px; }
  h1 { font-size: clamp(36px,10vw,44px); line-height: 1.02; }
  .hero-lead { font-size:16px; }
  .hero-visual { right:-64%; width:125vw; height:100%; min-height:0; margin:0; opacity:.32; }
  .hero-site-card { width:70%; border-radius:22px; }
  .hero-site-chrome { height:38px; padding:0 13px; }
  .hero-site-chrome span { font-size:7px; }
  .hero-site-content { height:calc(100% - 38px); padding:24px; }
  .hero-site-content > small { margin-bottom:12px; font-size:7px; }
  .hero-site-content > strong { font-size:clamp(22px,7vw,30px); }
  .hero-site-content > span { margin-top:12px; font-size:10px; }
  .hero-result { gap:10px; margin-top:16px; padding:10px; }
  .hero-growth { width:54px; height:34px; }
  .hero-result b { font-size:11px; }
  .hero-signal { display:none; }
  .hero-signal small { font-size:7px; }
  .hero-signal b { font-size:10px; }
  .signal-search { left:0; top:20%; }
  .signal-ads { right:0; bottom:17%; }
  .cta-row .btn { width: 100%; }
  .story { height:520vh; }
  .story-sticky { top:66px; height:calc(100svh - 66px); min-height:650px; }
  .story-copy { left:14px; top:24px; width:calc(100% - 28px); }
  .story-kicker { font-size:9px; }
  .story-steps { min-height:165px; }
  .story-step h2 { font-size:clamp(26px,7.5vw,32px); }
  .story-scene { top:65%; width:100vw; height:51%; min-height:340px; }
  .story-scene::before { inset:2%; border-radius:22px; background-size:28px 28px; }
  .direction-module { width:112px; min-height:58px; padding:10px 12px; border-radius:12px; }
  .direction-module strong { font-size:11px; }
  .module-l1,.module-l2,.module-l3 { left:20%; }
  .module-r1,.module-r2,.module-r3 { left:80%; }
  .site-window { top:51%; width:90%; height:64%; border-radius:18px; }
  .window-chrome { height:34px; padding:0 10px; }
  .window-chrome span { width:5px; height:5px; }
  .window-chrome b { font-size:7px; }
  .window-stage { height:calc(100% - 34px); padding:12px; }
  .window-focus small { margin-bottom:10px; font-size:7px; }
  .window-focus strong { max-width:260px; font-size:24px; }
  .window-focus span { margin-top:10px; font-size:9px; }
  .page-system { gap:7px; }
  .page-system article { padding:9px; border-radius:10px; }
  .page-system small { left:9px; top:8px; font-size:7px; }
  .page-system strong { font-size:10px; }
  .page-system span { font-size:8px; }
  .traffic-source { top:4%; width:43%; padding:9px 11px; transform:scale(calc(.9 + var(--traffic)*.1)); }
  .traffic-source b { font-size:10px; }
  .traffic-search { left:4%; }.traffic-ads { right:4%; }
  .lead-result { bottom:0; min-width:178px; padding:10px 12px; }
  .lead-result strong { font-size:14px; }
  .contrast-grid, .journey, .process, .demo-map { grid-template-columns: 1fr; }
  .demo-page:first-child { grid-column: auto; }
  .journey article { min-height: 0; }
  .footer-in { display: grid; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *,*::before,*::after { animation: none !important; transition: none !important; } .motion-ready .reveal { opacity:1; transform:none; } .story { --converge:0;--assemble:0;--window:1;--focus-exit:1;--pages:1;--traffic:1;--lead:1;height:auto; }.story-sticky { position:relative;top:0;min-height:760px; }.story-step { display:none; }.story-step:last-child { display:flex;opacity:1;transform:none; }.data-field,.assembly-core,.direction-field { display:none; } }