*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --bg: #0a0e17; --bg-card: #111827; --bg-card-hover: #1a2332;
  --surface: #1e293b; --border: #1e293b; --border-light: #2d3a4d;
  --text: #e2e8f0; --text-dim: #94a3b8; --text-muted: #64748b;
  --accent: #38bdf8; --accent-glow: rgba(56,189,248,0.15);
  --accent2: #a78bfa; --accent2-glow: rgba(167,139,250,0.15);
  --green: #34d399; --green-glow: rgba(52,211,153,0.12);
  --red: #f87171; --orange: #fb923c;
  --radius: 16px; --radius-sm: 10px;
}
html { scroll-behavior: smooth; }
body { font-family:'Outfit',sans-serif; background:var(--bg); color:var(--text); line-height:1.6; overflow-x:hidden; }
body::before { content:''; position:fixed; inset:0; background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); pointer-events:none; z-index:9999; }
.container { max-width:1140px; margin:0 auto; padding:0 24px; }

nav { position:fixed; top:0; left:0; right:0; z-index:100; padding:16px 0; background:rgba(10,14,23,0.85); backdrop-filter:blur(20px); border-bottom:1px solid rgba(30,41,59,0.5); }
nav .container { display:flex; justify-content:space-between; align-items:center; }
.logo { font-weight:700; font-size:1.2rem; letter-spacing:-0.02em; color:var(--accent); display:flex; align-items:center; gap:10px; text-decoration:none; }
.logo-icon { width:32px; height:32px; border-radius:8px; background:linear-gradient(135deg,var(--accent),var(--accent2)); display:flex; align-items:center; justify-content:center; font-size:16px; color:#fff; font-weight:800; }
.nav-links { display:flex; gap:28px; list-style:none; }
.nav-links a { color:var(--text-dim); text-decoration:none; font-size:0.88rem; font-weight:500; transition:color 0.2s; }
.nav-links a:hover { color:var(--text); }
.nav-cta { background:var(--accent)!important; color:var(--bg)!important; padding:8px 20px!important; border-radius:8px; font-weight:600!important; }
.nav-cta:hover { opacity:0.85; }

.hero { padding:160px 0 100px; position:relative; text-align:center; }
.hero::before { content:''; position:absolute; top:-200px; left:50%; transform:translateX(-50%); width:900px; height:900px; background:radial-gradient(circle,rgba(56,189,248,0.07) 0%,rgba(167,139,250,0.04) 40%,transparent 65%); pointer-events:none; }
.hero-badge { display:inline-flex; align-items:center; gap:8px; padding:6px 16px; border-radius:100px; background:var(--accent-glow); border:1px solid rgba(56,189,248,0.2); color:var(--accent); font-size:0.8rem; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; margin-bottom:28px; animation:fadeUp 0.6s ease both; }
.hero-badge::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--green); animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1}50%{opacity:0.4} }
h1 { font-size:clamp(2.4rem,5.5vw,3.8rem); font-weight:800; line-height:1.12; letter-spacing:-0.03em; margin-bottom:24px; animation:fadeUp 0.6s ease 0.1s both; }
h1 .gradient { background:linear-gradient(135deg,var(--accent),var(--accent2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero-sub { font-size:1.15rem; color:var(--text-dim); max-width:620px; margin:0 auto 40px; line-height:1.7; animation:fadeUp 0.6s ease 0.2s both; }
.hero-actions { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; animation:fadeUp 0.6s ease 0.3s both; }
.btn { display:inline-flex; align-items:center; gap:8px; padding:14px 28px; border-radius:var(--radius-sm); font-family:inherit; font-size:0.95rem; font-weight:600; text-decoration:none; border:none; cursor:pointer; transition:all 0.25s ease; }
.btn-primary { background:var(--accent); color:var(--bg); box-shadow:0 0 24px var(--accent-glow); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 4px 32px rgba(56,189,248,0.3); }
.btn-ghost { background:transparent; color:var(--text); border:1px solid var(--border); }
.btn-ghost:hover { background:var(--surface); border-color:var(--text-muted); }
@keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

.stats-bar { padding:56px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:32px; text-align:center; }
.stat-num { font-size:2rem; font-weight:700; color:var(--accent); font-family:'JetBrains Mono',monospace; }
.stat-label { font-size:0.82rem; color:var(--text-muted); margin-top:4px; line-height:1.4; }

section { padding:100px 0; }
.section-label { font-size:0.72rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent); margin-bottom:12px; }
.section-title { font-size:clamp(1.7rem,3.5vw,2.4rem); font-weight:700; letter-spacing:-0.02em; margin-bottom:16px; line-height:1.2; }
.section-desc { color:var(--text-dim); max-width:580px; font-size:1.05rem; line-height:1.7; }
.section-center { text-align:center; }
.section-center .section-desc { margin:0 auto; }

.pains-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:48px; }
.pain-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:32px 28px; transition:all 0.3s; }
.pain-card:hover { background:var(--bg-card-hover); border-color:var(--border-light); transform:translateY(-3px); }
.pain-num { font-family:'JetBrains Mono',monospace; font-size:2.8rem; font-weight:700; line-height:1; margin-bottom:8px; }
.pain-num.red { color:var(--red); }
.pain-num.orange { color:var(--orange); }
.pain-unit { font-size:0.75rem; color:var(--text-muted); font-weight:600; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:16px; }
.pain-card h3 { font-size:1rem; font-weight:600; margin-bottom:8px; }
.pain-card p { font-size:0.85rem; color:var(--text-dim); line-height:1.6; }

.compare-grid { display:grid; grid-template-columns:1fr 60px 1fr; gap:0; margin-top:48px; align-items:start; }
.compare-col { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:36px 32px; }
.compare-col.before { border-color:rgba(248,113,113,0.2); }
.compare-col.after { border-color:rgba(52,211,153,0.2); }
.compare-divider { display:flex; align-items:center; justify-content:center; padding-top:140px; }
.compare-arrow { font-size:28px; color:var(--text-muted); }
.compare-label { font-size:0.72rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:24px; display:flex; align-items:center; gap:8px; }
.compare-label.red { color:var(--red); }
.compare-label.green { color:var(--green); }
.compare-label-dot { width:8px; height:8px; border-radius:50%; }
.compare-label.red .compare-label-dot { background:var(--red); }
.compare-label.green .compare-label-dot { background:var(--green); }
.compare-item { padding:14px 0; border-bottom:1px solid var(--border); }
.compare-item:last-child { border-bottom:none; }
.compare-item-title { font-size:0.9rem; font-weight:600; margin-bottom:4px; }
.compare-item-desc { font-size:0.8rem; color:var(--text-dim); line-height:1.5; }

.flow-cols { display:grid; grid-template-columns:1fr 1fr; gap:80px; margin-top:60px; }
.flow-col-header { display:flex; align-items:center; gap:14px; margin-bottom:36px; }
.flow-col-icon { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:22px; }
.flow-col-icon.user { background:var(--accent-glow); border:1px solid rgba(56,189,248,0.2); }
.flow-col-icon.spec { background:var(--accent2-glow); border:1px solid rgba(167,139,250,0.2); }
.flow-col-title { font-size:1.15rem; font-weight:600; }
.flow-col-subtitle { font-size:0.78rem; color:var(--text-muted); }
.flow-steps { display:flex; flex-direction:column; }
.flow-step { display:flex; gap:20px; padding-bottom:28px; }
.flow-step:last-child { padding-bottom:0; }
.step-line { display:flex; flex-direction:column; align-items:center; flex-shrink:0; width:40px; }
.step-dot { width:14px; height:14px; border-radius:50%; border:2px solid var(--accent); background:var(--bg); flex-shrink:0; z-index:1; }
.flow-col:nth-child(2) .step-dot { border-color:var(--accent2); }
.step-connector { width:2px; flex:1; background:var(--border); margin-top:4px; }
.flow-step:last-child .step-connector { display:none; }
.step-num { font-family:'JetBrains Mono',monospace; font-size:0.68rem; color:var(--text-muted); margin-bottom:3px; }
.step-title { font-weight:600; font-size:0.92rem; margin-bottom:4px; }
.step-desc { font-size:0.83rem; color:var(--text-dim); line-height:1.55; }

.features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:48px; }
.feature-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:32px 28px; transition:all 0.3s; position:relative; overflow:hidden; }
.feature-card:hover { background:var(--bg-card-hover); border-color:var(--border-light); transform:translateY(-4px); }
.feature-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--accent),var(--accent2)); opacity:0; transition:opacity 0.3s; }
.feature-card:hover::before { opacity:1; }
.feature-icon { width:44px; height:44px; border-radius:10px; background:var(--surface); display:flex; align-items:center; justify-content:center; font-size:20px; margin-bottom:20px; }
.feature-card h3 { font-size:1.02rem; font-weight:600; margin-bottom:8px; }
.feature-card p { font-size:0.85rem; color:var(--text-dim); line-height:1.6; }

.audience-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:48px; }
.audience-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:28px 22px; text-align:center; transition:all 0.3s; }
.audience-card:hover { border-color:var(--border-light); transform:translateY(-3px); }
.audience-icon { font-size:32px; margin-bottom:14px; }
.audience-title { font-size:0.92rem; font-weight:600; margin-bottom:6px; }
.audience-desc { font-size:0.78rem; color:var(--text-dim); line-height:1.5; }

.trust-row { display:flex; justify-content:center; gap:48px; margin-top:48px; flex-wrap:wrap; }
.trust-item { display:flex; align-items:center; gap:12px; }
.trust-icon { font-size:24px; }
.trust-text { font-size:0.88rem; color:var(--text-dim); }
.trust-text strong { color:var(--text); font-weight:600; }

.cta-section { text-align:center; padding:80px 0 100px; }
.cta-box { background:linear-gradient(135deg,rgba(56,189,248,0.08),rgba(167,139,250,0.08)); border:1px solid rgba(56,189,248,0.15); border-radius:24px; padding:64px 40px; position:relative; overflow:hidden; }
.cta-box::before { content:''; position:absolute; top:-100px; right:-100px; width:300px; height:300px; background:radial-gradient(circle,rgba(167,139,250,0.1) 0%,transparent 60%); pointer-events:none; }
.cta-box h2 { font-size:2rem; font-weight:700; margin-bottom:12px; letter-spacing:-0.02em; }
.cta-box p { color:var(--text-dim); font-size:1.05rem; margin-bottom:32px; max-width:520px; margin-left:auto; margin-right:auto; }

footer { border-top:1px solid var(--border); padding:40px 0; }
footer .container { display:flex; justify-content:space-between; align-items:center; }
.footer-copy { color:var(--text-muted); font-size:0.82rem; }
.footer-links { display:flex; gap:24px; list-style:none; }
.footer-links a { color:var(--text-muted); text-decoration:none; font-size:0.82rem; transition:color 0.2s; }
.footer-links a:hover { color:var(--text); }

@media(max-width:900px) {
  .flow-cols{grid-template-columns:1fr;gap:48px}
  .features-grid,.pains-grid{grid-template-columns:1fr 1fr}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:24px}
  .compare-grid{grid-template-columns:1fr;gap:16px}
  .compare-divider{padding-top:0;transform:rotate(90deg)}
  .audience-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px) {
  .nav-links{display:none}
  .features-grid,.pains-grid{grid-template-columns:1fr}
  .audience-grid{grid-template-columns:1fr}
  footer .container{flex-direction:column;gap:16px;text-align:center}
  .cta-box{padding:40px 24px}
  .trust-row{gap:24px}
}