:root {
  --bg: #040814;
  --bg-2: #0a1327;
  --surface: rgba(17, 28, 56, 0.55);
  --line: rgba(150, 190, 255, 0.25);
  --text: #f4f8ff;
  --muted: #b7c6e5;
  --brand: #6db4ff;
  --brand-2: #9fd0ff;
  --max: 1180px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: var(--text);
  line-height: 1.65;
  letter-spacing: -0.01em;
  background:
    radial-gradient(1000px 600px at 5% -10%, rgba(81, 143, 255, 0.25), transparent 55%),
    radial-gradient(900px 600px at 100% 0%, rgba(75, 116, 216, 0.25), transparent 52%),
    linear-gradient(180deg, var(--bg), var(--bg-2) 60%, var(--bg));
}

a { color: inherit; text-decoration: none; }
.container { width: min(var(--max), 100% - 42px); margin-inline: auto; }

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(12px);
  background: rgba(4, 8, 20, 0.75);
  border-bottom: 1px solid var(--line);
}
.header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 74px;
  gap: 18px;
}
.brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 700; }
.brand__dot {
  width: 11px;
  height: 11px;
  border-radius: 100px;
  background: linear-gradient(180deg, var(--brand-2), var(--brand));
  box-shadow: 0 0 20px rgba(109, 180, 255, 0.8);
}
.brand__name { font-size: 15px; }

.nav { display: none; gap: 18px; align-items: center; }
.nav a { color: var(--muted); font-size: 14px; }
.nav a:hover { color: var(--text); }
@media (min-width: 980px) { .nav { display: flex; } }

.menuBtn {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  padding: 8px 10px;
}
.mobileNav { display: none; flex-direction: column; gap: 10px; padding: 0 0 14px; }
.mobileNav a { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: rgba(18, 30, 61, 0.75); }
@media (min-width: 980px) { .menuBtn, .mobileNav { display: none !important; } }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  padding: 11px 18px;
  font-size: 14px;
  border: 1px solid transparent;
  transition: transform .2s ease, opacity .2s ease;
}
.btn--primary {
  background: linear-gradient(180deg, var(--brand-2), var(--brand));
  color: #071024;
  font-weight: 700;
}
.btn--secondary {
  border-color: var(--line);
  color: var(--text);
  background: rgba(255,255,255,0.02);
}
.btn:hover { transform: translateY(-1px); }

.hero {
  padding: 100px 0 74px;
}
.hero__grid {
  display: grid;
  align-items: center;
  gap: 36px;
}
@media (min-width: 980px) { .hero__grid { grid-template-columns: 1.08fr .92fr; } }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 6px 12px;
  font-size: 12px;
  color: var(--muted);
  background: rgba(255,255,255,0.02);
}
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 100px; background: var(--brand); }

h1 {
  margin: 14px 0 0;
  font-size: clamp(38px, 7vw, 68px);
  line-height: 1.03;
  letter-spacing: -0.035em;
  max-width: 16ch;
}
.lead {
  margin: 16px 0 0;
  font-size: clamp(17px, 2.4vw, 22px);
  color: var(--muted);
  max-width: 60ch;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.checks { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; color: var(--muted); }
.checks li::before { content: "✓"; margin-right: 8px; color: var(--brand); font-weight: 700; }

.visualCard {
  border: 1px solid var(--line);
  border-radius: 30px;
  overflow: hidden;
  background: linear-gradient(165deg, rgba(144, 193, 255, 0.16), rgba(255,255,255,0.01));
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.32);
}
.visualCard img { display: block; width: 100%; height: auto; }
.metricGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; }
.metric {
  padding: 14px;
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
.metric:nth-child(2n) { border-right: 0; }
.metric strong { display: block; font-size: 19px; }
.metric span { color: var(--muted); font-size: 13px; }

.section {
  padding: 96px 0;
}
.section + .section { border-top: 1px solid rgba(150, 190, 255, 0.14); }
.section--soft { background: rgba(12, 20, 42, 0.45); }
.section h2 {
  font-size: clamp(30px, 5vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0 0 10px;
}
.intro { color: var(--muted); max-width: 78ch; margin: 0 0 26px; }

.split { display: grid; gap: 22px; align-items: center; }
@media (min-width: 940px) { .split { grid-template-columns: 1fr 1fr; } }

.story {
  font-size: 18px;
  color: var(--muted);
  max-width: 58ch;
}

.grid2, .grid3 { display: grid; gap: 14px; }
@media (min-width: 860px) { .grid2 { grid-template-columns: repeat(2, 1fr); } .grid3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(16, 28, 56, 0.72), rgba(12, 22, 44, 0.72));
  padding: 22px;
}
.card h3 { margin: 0 0 8px; font-size: 22px; }
.card p { margin: 0; color: var(--muted); }
.list { margin: 10px 0 0; color: var(--muted); padding-left: 18px; }
.list li { margin: 7px 0; }

.featureRow {
  display: grid;
  gap: 24px;
  align-items: center;
  margin-top: 26px;
}
@media (min-width: 980px) { .featureRow { grid-template-columns: 1fr 1fr; } }
.featureMedia img {
  width: 100%;
  display: block;
  border-radius: 24px;
  border: 1px solid var(--line);
}

.pill {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 11px;
  color: var(--brand-2);
  background: rgba(109, 180, 255, 0.12);
}

.flow { display: grid; gap: 12px; }
.flowStep {
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
  background: rgba(14, 26, 52, 0.62);
}
.flowStep b {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: rgba(109, 180, 255, 0.15);
  color: var(--brand);
}

.ctaBand {
  margin-top: 28px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(120deg, rgba(109,180,255,.25), rgba(255,255,255,.03));
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.small { color: var(--muted); font-size: 12px; }

.form { display: grid; gap: 10px; }
.input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(8, 17, 36, 0.85);
  color: var(--text);
  padding: 12px 14px;
}

.footer { padding: 30px 0; border-top: 1px solid var(--line); }
.footer__inner {
  color: var(--muted);
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
:root{
  --bg:#060b17;
  --surface:#0d1730;
  --surface-2:#132143;
  --text:#eef4ff;
  --muted:#b5c3df;
  --line:rgba(149,188,255,.26);
  --brand:#58a6ff;
  --brand-2:#8cc4ff;
  --max:1180px;
  --radius:20px;
  --shadow:0 18px 40px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--text);
  background:
    radial-gradient(circle at 5% 10%, rgba(88,166,255,.18), transparent 34%),
    radial-gradient(circle at 95% 8%, rgba(70,123,233,.2), transparent 30%),
    radial-gradient(circle at 65% 90%, rgba(38,82,170,.18), transparent 36%),
    var(--bg);
  line-height:1.55;
}
a{color:inherit;text-decoration:none}
.container{max-width:var(--max);padding:0 18px;margin:0 auto}

.header{position:sticky;top:0;z-index:60;border-bottom:1px solid var(--line);backdrop-filter:blur(12px);background:rgba(6,11,23,.78)}
.header__inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:14px}
.brand{display:flex;align-items:center;gap:12px;font-weight:700}
.brand__dot{width:12px;height:12px;border-radius:50%;background:var(--brand);box-shadow:0 0 16px rgba(88,166,255,.72)}
.brand__name{letter-spacing:.2px}
.nav{display:none;align-items:center;gap:18px}
.nav a{font-size:14px;color:var(--muted)}
.nav a:hover{color:var(--text)}
.menuBtn{border:1px solid var(--line);background:transparent;color:var(--text);padding:8px 10px;border-radius:12px}
.mobileNav{display:none;flex-direction:column;gap:10px;padding:0 0 12px}
.mobileNav a{border:1px solid var(--line);padding:10px 12px;border-radius:12px;background:var(--surface)}
@media(min-width:980px){.nav{display:flex}.menuBtn,.mobileNav{display:none!important}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;padding:12px 16px;font-size:14px;border:1px solid transparent;transition:.2s ease}
.btn--primary{background:linear-gradient(180deg,var(--brand-2),var(--brand));color:#081226;font-weight:700}
.btn--primary:hover{transform:translateY(-1px)}
.btn--secondary{border-color:var(--line);background:rgba(255,255,255,.03);color:var(--text)}

.hero{padding:74px 0 52px}
.hero__grid{display:grid;gap:26px;align-items:center}
@media(min-width:980px){.hero__grid{grid-template-columns:1.08fr .92fr;gap:36px}}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);border:1px solid var(--line);padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.02)}
.eyebrow::before{content:"";width:7px;height:7px;background:var(--brand);border-radius:50%}
h1{font-size:clamp(34px,6vw,58px);line-height:1.05;letter-spacing:-.03em;margin:14px 0 0}
.lead{font-size:18px;color:var(--muted);max-width:65ch;margin:16px 0 0}
.hero__actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.checks{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:9px;color:var(--muted)}
.checks li::before{content:"✓";color:var(--brand);font-weight:700;margin-right:9px}

.visualCard{border:1px solid var(--line);border-radius:24px;padding:16px;background:linear-gradient(165deg,rgba(140,196,255,.14),rgba(255,255,255,.01));box-shadow:var(--shadow)}
.visualCard img{width:100%;height:auto;border-radius:14px;display:block}
.metricGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:10px}
.metric{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:11px}
.metric strong{display:block;font-size:19px}
.metric span{font-size:12px;color:var(--muted)}

.section{padding:64px 0;border-top:1px solid var(--line)}
.section h2{font-size:clamp(27px,4.2vw,42px);margin:0 0 8px;letter-spacing:-.02em}
.section .intro{color:var(--muted);max-width:74ch;margin:0 0 20px}

.grid3,.grid2,.grid4{display:grid;gap:14px}
.grid3,.grid2,.grid4{grid-template-columns:1fr}
@media(min-width:860px){.grid2{grid-template-columns:repeat(2,1fr)}.grid3{grid-template-columns:repeat(3,1fr)}.grid4{grid-template-columns:repeat(4,1fr)}}
.card{border:1px solid var(--line);background:var(--surface);border-radius:var(--radius);padding:20px}
.card h3{margin:0 0 8px;font-size:20px}
.card p{color:var(--muted);margin:0}
.list{margin:10px 0 0;padding-left:18px;color:var(--muted)}
.list li{margin:6px 0}

.toolCard{display:flex;flex-direction:column;gap:10px}
.toolCard img{width:100%;border-radius:12px;border:1px solid var(--line)}
.pill{display:inline-flex;font-size:11px;padding:5px 8px;border:1px solid var(--line);border-radius:999px;color:var(--brand-2);background:rgba(88,166,255,.1)}

.flow{display:grid;gap:12px}
.flowStep{display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:flex-start;border:1px solid var(--line);padding:14px;border-radius:14px;background:rgba(255,255,255,.02)}
.flowStep b{display:flex;align-items:center;justify-content:center;height:36px;width:36px;border-radius:10px;background:var(--surface-2);color:var(--brand)}

.mediaRow{display:grid;gap:14px}
@media(min-width:860px){.mediaRow{grid-template-columns:1fr 1fr}}
.mediaRow img{width:100%;border-radius:16px;border:1px solid var(--line)}
.logoStrip{display:flex;flex-wrap:wrap;gap:12px}
.logoPill{padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--muted);font-size:14px}

.kpi{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
@media(min-width:860px){.kpi{grid-template-columns:repeat(4,1fr)}}
.kpi .card strong{font-size:32px;color:var(--brand);line-height:1}

.ctaBand{margin-top:18px;padding:18px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(150deg, rgba(88,166,255,.2), rgba(255,255,255,.02));display:flex;justify-content:space-between;gap:14px;align-items:center;flex-wrap:wrap}

.footer{padding:24px 0;border-top:1px solid var(--line)}
.footer__inner{display:flex;gap:10px;justify-content:space-between;flex-wrap:wrap;color:var(--muted);font-size:14px}

.form{display:grid;gap:10px}
.input{width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--line);background:#0a1530;color:var(--text)}
.small{font-size:12px;color:var(--muted)}