:root {
  --ink: #101820;
  --night: #0c1722;
  --slate: #36516d;
  --blue: #155ea8;
  --cyan: #62d8e8;
  --paper: #f5f7f9;
  --line: #d7dfe6;
  --muted: #687784;
  --white: #fff;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); }
a { color: inherit; }
.section-shell { width: min(1160px, calc(100% - 48px)); margin-inline: auto; }

.site-header {
  width: min(1240px, calc(100% - 48px));
  height: 76px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.brand { font-size: 1.15rem; font-weight: 900; letter-spacing: .14em; text-decoration: none; }
nav { display: flex; align-items: center; gap: 28px; font-size: .85rem; font-weight: 650; }
nav a { text-decoration: none; }
.nav-cta { padding: 10px 16px; border: 1px solid #9aa8b4; border-radius: 4px; }

.hero { min-height: 650px; display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 70px; padding-block: 80px; }
.eyebrow { margin: 0 0 22px; color: var(--slate); font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow span { display: inline-block; width: 22px; height: 2px; margin: 0 8px 3px 0; background: var(--blue); }
h1 { max-width: 720px; margin: 0; font-size: clamp(3.3rem, 7vw, 6.8rem); line-height: .91; letter-spacing: -.065em; }
.lede { max-width: 660px; margin: 30px 0; color: #4d5e6c; font-size: 1.18rem; line-height: 1.65; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 54px; }
.button { padding: 16px 24px; border-radius: 4px; font-size: .9rem; font-weight: 750; text-decoration: none; }
.button.primary { color: var(--white); background: var(--blue); }
.button.secondary { border: 1px solid #9aa8b4; }
.proof { display: flex; gap: 38px; margin: 0; padding: 0; list-style: none; }
.proof li { display: grid; gap: 4px; }
.proof strong { font-size: .95rem; }
.proof span { color: var(--muted); font-size: .73rem; }
.hero-mark { position: relative; }
.hero-mark::before { content: ""; position: absolute; inset: 9% -5% -7% 11%; background: var(--cyan); opacity: .2; transform: rotate(-3deg); }
.hero-mark img { position: relative; display: block; width: 100%; border: 1px solid var(--line); mix-blend-mode: multiply; }

.signal-strip { overflow: hidden; color: #c5d2dc; background: var(--night); }
.packet-path { min-height: 94px; display: flex; align-items: center; justify-content: center; gap: clamp(14px, 3vw, 42px); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; white-space: nowrap; }
.packet-path i { color: #5f7385; font-style: normal; }
.packet-path strong { display: flex; align-items: center; gap: 10px; color: var(--white); }
.packet-path small { padding: 5px 7px; border-radius: 3px; color: var(--night); background: var(--cyan); font-size: .58rem; letter-spacing: .08em; }

.how { padding-block: 120px; }
.section-heading { max-width: 710px; margin-bottom: 54px; }
h2 { margin: 0 0 18px; font-size: clamp(2.4rem, 5vw, 4.5rem); line-height: 1; letter-spacing: -.05em; }
.section-heading > p:last-child, .limits > p:last-child { color: var(--muted); font-size: 1.05rem; line-height: 1.65; }
.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.feature-card { min-height: 400px; padding: 42px; border: 1px solid var(--line); background: var(--white); }
.feature-card.featured { color: var(--white); border-color: var(--slate); background: var(--slate); }
.card-number { font: 700 .68rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; opacity: .65; }
.feature-card h3 { margin: 78px 0 16px; font-size: 1.65rem; }
.feature-card > p:not(.card-number) { max-width: 510px; min-height: 76px; line-height: 1.55; opacity: .82; }
.feature-card ul { margin: 26px 0 0; padding: 22px 0 0; border-top: 1px solid currentColor; list-style: none; opacity: .8; }
.feature-card li { margin: 9px 0; font-size: .86rem; }
.feature-card li::before { content: "✓"; margin-right: 9px; color: var(--cyan); font-weight: 900; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.why { padding-block: 120px; color: var(--white); background: var(--night); }
.why .eyebrow { color: var(--cyan); }
.why-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 90px; }
.reasons article { display: grid; grid-template-columns: 54px 1fr; gap: 16px; padding: 29px 0; border-top: 1px solid #31404e; }
.reasons b { color: var(--cyan); font: 700 .72rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.reasons h3 { margin: 0 0 8px; font-size: 1.25rem; }
.reasons p { max-width: 580px; margin: 0; color: #aab8c4; line-height: 1.55; }

.install { padding-block: 120px; }
.terminal { overflow: hidden; border-radius: 7px; color: #e5edf3; background: #101b25; box-shadow: 0 24px 70px rgba(19, 36, 51, .14); }
.terminal-bar { height: 46px; display: flex; align-items: center; gap: 7px; padding: 0 17px; background: #192735; }
.terminal-bar span { width: 9px; height: 9px; border-radius: 50%; background: #546574; }
.terminal-bar em { margin-left: auto; color: #7f919f; font: normal .68rem ui-monospace, SFMono-Regular, Menlo, monospace; }
pre { overflow-x: auto; margin: 0; padding: 34px; font-size: .87rem; line-height: 1.85; }
.comment { color: #718797; }
.install-note { color: var(--muted); font-size: .86rem; }
.install-note a { color: var(--blue); font-weight: 700; }

.limits { padding-block: 60px 120px; }
.limits h2 { max-width: 650px; }
.limit-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 36px 0 22px; }
.limit-list span { padding: 9px 12px; border: 1px solid #b8c3cc; border-radius: 3px; color: #546674; font-size: .78rem; }

footer { padding-block: 50px; border-top: 1px solid var(--line); }
.footer-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 30px; }
.footer-inner strong { letter-spacing: .12em; }
.footer-inner p { margin: 5px 0 0; color: var(--muted); font-size: .72rem; }
.footer-links { display: flex; gap: 22px; font-size: .78rem; }
.copyright { text-align: right; }

@media (max-width: 780px) {
  .section-shell, .site-header { width: min(100% - 30px, 1160px); }
  .site-header { height: 66px; }
  nav a:not(.nav-cta) { display: none; }
  .hero { min-height: auto; grid-template-columns: 1fr; gap: 50px; padding-block: 64px; }
  .hero-mark { width: min(420px, 88%); margin-inline: auto; }
  .proof { gap: 20px; justify-content: space-between; }
  .packet-path { justify-content: flex-start; overflow-x: auto; }
  .how, .why, .install { padding-block: 82px; }
  .feature-grid, .why-grid { grid-template-columns: 1fr; gap: 28px; }
  .feature-card { min-height: 0; padding: 30px; }
  .feature-card h3 { margin-top: 46px; }
  .footer-inner { grid-template-columns: 1fr; align-items: start; }
  .copyright { text-align: left; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }