:root {
  color-scheme: dark;
  --bg: #070a12;
  --panel: rgba(17, 24, 39, 0.72);
  --line: rgba(148, 163, 184, 0.2);
  --muted: #a9b4c7;
  --text: #f7f9fc;
  --cyan: #4de3ff;
  --violet: #9b7cff;
  --green: #67e8a5;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--text);
  background:
    radial-gradient(circle at 15% -10%, rgba(77, 227, 255, 0.14), transparent 30rem),
    radial-gradient(circle at 90% 10%, rgba(155, 124, 255, 0.17), transparent 32rem),
    var(--bg);
  font: 16px/1.6 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a { color: inherit; text-decoration: none; }
.wrap { width: min(1160px, calc(100% - 40px)); margin: 0 auto; }

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--line);
  background: rgba(7, 10, 18, 0.82);
  backdrop-filter: blur(18px);
}
.nav-inner { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 12px; font-size: 20px; font-weight: 750; letter-spacing: -0.02em; }
.brand-mark {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid rgba(77, 227, 255, 0.5);
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(77, 227, 255, 0.18), rgba(155, 124, 255, 0.22));
  color: var(--cyan);
  box-shadow: 0 0 30px rgba(77, 227, 255, 0.18);
}
.nav-links { display: flex; align-items: center; gap: 28px; color: var(--muted); font-size: 14px; }
.nav-links a:hover { color: var(--text); }

.hero { padding: 112px 0 90px; text-align: center; }
.eyebrow {
  display: inline-flex;
  padding: 7px 13px;
  border: 1px solid rgba(77, 227, 255, 0.25);
  border-radius: 999px;
  color: var(--cyan);
  background: rgba(77, 227, 255, 0.07);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
h1 {
  max-width: 900px;
  margin: 28px auto 22px;
  font-size: clamp(44px, 7vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.055em;
}
.gradient { color: transparent; background: linear-gradient(90deg, var(--cyan), #8dc5ff 46%, var(--violet)); background-clip: text; }
.lead { max-width: 740px; margin: 0 auto; color: var(--muted); font-size: clamp(18px, 2vw, 22px); }
.actions { display: flex; justify-content: center; gap: 14px; margin-top: 38px; flex-wrap: wrap; }
.button {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255,255,255,.04);
  font-weight: 650;
}
.button.primary { border: 0; color: #071018; background: linear-gradient(100deg, var(--cyan), #a7f3d0); }

section { padding: 88px 0; }
.section-head { max-width: 760px; margin-bottom: 38px; }
.kicker { margin: 0 0 8px; color: var(--cyan); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
h2 { margin: 0; font-size: clamp(32px, 4vw, 52px); line-height: 1.12; letter-spacing: -.035em; }
.section-head p { margin: 18px 0 0; color: var(--muted); font-size: 18px; }

.problem {
  border-block: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,.035));
}
.statement { max-width: 930px; font-size: clamp(25px, 3.4vw, 42px); line-height: 1.25; letter-spacing: -.025em; }
.statement strong { color: var(--cyan); }
.checks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 34px; }
.check, .card, .step, .feature {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--panel);
  box-shadow: 0 20px 70px rgba(0,0,0,.18);
}
.check { padding: 20px; color: #dce5f2; }
.check::before { content: "✓"; margin-right: 10px; color: var(--green); font-weight: 800; }

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.card { padding: 26px; transition: transform .2s ease, border-color .2s ease; }
.card:hover { transform: translateY(-4px); border-color: rgba(77, 227, 255, .42); }
.icon { font-size: 30px; }
.card h3 { margin: 17px 0 8px; font-size: 21px; }
.card p { margin: 0; color: var(--muted); }
.card small { display: block; margin-top: 18px; color: var(--cyan); }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: step; }
.step { position: relative; padding: 25px; counter-increment: step; }
.step::before { content: "0" counter(step); display: block; margin-bottom: 32px; color: var(--violet); font: 700 13px/1 ui-monospace, monospace; }
.step h3 { margin: 0 0 9px; font-size: 18px; }
.step p { margin: 0; color: var(--muted); font-size: 14px; }

.features { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.feature { padding: 20px; }
.feature h3 { margin: 12px 0 7px; font-size: 16px; }
.feature p { margin: 0; color: var(--muted); font-size: 13px; }

.architecture { border-block: 1px solid var(--line); }
.diagram { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; margin-top: 34px; }
.plane { padding: 30px; border: 1px solid var(--line); border-radius: 22px; background: rgba(255,255,255,.025); }
.plane strong { display: block; margin-bottom: 10px; font-size: 23px; }
.plane span { color: var(--muted); }
.arrow { color: var(--cyan); font-size: 30px; }

.cta { padding-bottom: 120px; text-align: center; }
.cta-box { padding: 64px 30px; border: 1px solid rgba(77,227,255,.28); border-radius: 28px; background: linear-gradient(135deg, rgba(77,227,255,.09), rgba(155,124,255,.11)); }
.cta-box p { max-width: 680px; margin: 18px auto 0; color: var(--muted); }
footer { padding: 30px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.footer-inner { display: flex; justify-content: space-between; gap: 24px; }

@media (max-width: 900px) {
  .grid, .checks { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .features { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .wrap { width: min(100% - 28px, 1160px); }
  .nav-links a:not(:first-child) { display: none; }
  .hero { padding-top: 78px; }
  section { padding: 68px 0; }
  .grid, .checks, .steps, .features { grid-template-columns: 1fr; }
  .diagram { grid-template-columns: 1fr; }
  .arrow { transform: rotate(90deg); text-align: center; }
  .footer-inner { flex-direction: column; }
}