:root {
  --ink: #080b0a;
  --ink-soft: #101512;
  --panel: #141a16;
  --panel-2: #1a211c;
  --line: rgba(229, 255, 237, 0.12);
  --line-strong: rgba(229, 255, 237, 0.2);
  --text: #f3f7f4;
  --muted: #98a69c;
  --paper: #eef2ec;
  --paper-text: #111512;
  --green: #b7f34a;
  --green-bright: #c9ff61;
  --green-dark: #263c12;
  --amber: #f2ba49;
  --blue: #77bbff;
  --shell: min(1240px, calc(100vw - 48px));
  --radius: 12px;
  --font: "Manrope", system-ui, sans-serif;
  --mono: "DM Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
img { display: block; max-width: 100%; }
.shell { width: var(--shell); margin-inline: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 1000; padding: 10px 16px;
  background: var(--green); color: var(--ink); transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: fixed; inset: 0 0 auto; z-index: 100; height: 78px;
  border-bottom: 1px solid transparent; transition: 180ms ease;
}
.site-header.scrolled {
  height: 66px; background: rgba(8, 11, 10, 0.9); border-color: var(--line);
  backdrop-filter: blur(18px);
}
.nav-wrap { height: 100%; display: flex; align-items: center; gap: 40px; }
.brand img { width: 172px; height: auto; }
.site-nav { display: flex; gap: 30px; margin-left: auto; }
.site-nav a, .footer-links a {
  color: var(--muted); font-size: 13px; font-weight: 700; transition: color 150ms;
}
.site-nav a:hover, .footer-links a:hover { color: var(--text); }
.nav-cta { margin-left: 4px; }
.menu-button { display: none; }

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 22px;
  min-height: 52px; padding: 0 23px; border: 1px solid transparent;
  border-radius: 4px; font-size: 13px; font-weight: 800; letter-spacing: .01em;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}
.button:hover { transform: translateY(-2px); }
.button-small { min-height: 39px; padding-inline: 16px; }
.button-primary { background: var(--green); color: var(--ink); }
.button-primary:hover { background: var(--green-bright); }
.button-outline { border-color: var(--line-strong); }
.button-outline:hover { border-color: var(--green); }
.button-ghost { color: var(--muted); }
.button-ghost:hover { color: var(--text); }
.button-dark { background: var(--ink); color: var(--text); }
.button-light-ghost { border-color: rgba(8, 11, 10, .35); color: var(--ink); }

.hero {
  position: relative; min-height: 900px; padding: 170px 0 46px; overflow: hidden;
  background:
    radial-gradient(circle at 72% 31%, rgba(183, 243, 74, .08), transparent 29%),
    var(--ink);
}
.hero-grid {
  position: absolute; inset: 0; opacity: .45; pointer-events: none;
  background-image:
    linear-gradient(rgba(183,243,74,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(183,243,74,.045) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(to bottom, black, transparent 82%);
}
.hero-layout {
  position: relative; display: grid; grid-template-columns: .9fr 1.25fr;
  align-items: center; gap: 62px;
}
.eyebrow, .kicker, .feature-index {
  color: var(--green); font-family: var(--mono); font-size: 11px;
  font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
}
.eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 6px rgba(183,243,74,.09); }
h1, h2, h3, p { margin-top: 0; }
h1 {
  margin-bottom: 26px; font-size: clamp(56px, 6.1vw, 92px); line-height: .97;
  letter-spacing: -.065em; font-weight: 700;
}
h1 span { color: var(--green); }
.hero-lead { max-width: 600px; color: #b7c2ba; font-size: 18px; line-height: 1.72; }
.hero-actions { display: flex; align-items: center; gap: 10px; margin-top: 34px; }
.platform-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 36px;
  color: #7d8b81; font-family: var(--mono); font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase;
}
.platform-divider { width: 1px; height: 16px; background: var(--line-strong); }

.product-window {
  position: relative; width: 760px; border: 1px solid rgba(183,243,74,.22);
  border-radius: var(--radius); background: #0b0e0c; overflow: hidden;
  transform: perspective(1400px) rotateY(-3deg) rotateX(1deg);
}
.product-window::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit; box-shadow: inset 0 0 80px rgba(183,243,74,.03);
}
.window-bar {
  height: 42px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 14px; border-bottom: 1px solid var(--line); color: #748078;
  font-family: var(--mono); font-size: 9px; letter-spacing: .05em;
}
.window-controls { display: flex; gap: 6px; }
.window-controls i { width: 7px; height: 7px; border-radius: 50%; background: #303832; }
.window-status { justify-self: end; display: flex; align-items: center; gap: 6px; color: var(--green); }
.window-status i, .capture-pill i { width: 5px; height: 5px; background: var(--green); border-radius: 50%; }
.app-frame { min-height: 532px; display: flex; }
.app-nav {
  width: 56px; flex: 0 0 56px; border-right: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 0;
}
.app-nav img { width: 27px; margin-bottom: 14px; }
.app-nav-item {
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 6px;
  color: #69736c; font-family: var(--mono); font-size: 15px;
}
.app-nav-item.active { color: var(--green); background: rgba(183,243,74,.1); }
.app-main { min-width: 0; flex: 1; padding: 21px; }
.app-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.app-heading div:first-child { display: flex; flex-direction: column; }
.app-heading small, .detail-grid small {
  color: #626c65; font-family: var(--mono); font-size: 8px; letter-spacing: .08em;
}
.app-heading strong { margin-top: 3px; font-size: 15px; }
.capture-pill {
  display: flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 20px;
  background: rgba(183,243,74,.08); color: var(--green); font-family: var(--mono); font-size: 8px;
}
.filter-bar {
  height: 35px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 12px; border: 1px solid var(--line); border-radius: 5px; color: #59635c;
  font-size: 9px;
}
.filter-bar b { color: #87928a; font-weight: 500; }
.traffic-table { margin-top: 12px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.traffic-row {
  display: grid; grid-template-columns: 68px 1fr 65px 55px 55px; align-items: center;
  min-height: 42px; padding: 0 10px; border-bottom: 1px solid rgba(229,255,237,.07);
  color: #9aa59d; font-family: var(--mono); font-size: 8px;
}
.traffic-row:last-child { border-bottom: 0; }
.traffic-row.selected { background: rgba(183,243,74,.07); color: #d7e0d9; box-shadow: inset 2px 0 var(--green); }
.table-head { min-height: 28px; background: #111612; color: #59635c; text-transform: uppercase; letter-spacing: .06em; }
.method { font-weight: 600; }
.method.get, .ok { color: var(--green); }
.method.post, .switch { color: var(--blue); }
.method.ws, .warn { color: var(--amber); }
.detail-panel { margin-top: 12px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.detail-tabs { height: 34px; display: flex; align-items: center; gap: 22px; padding: 0 12px; border-bottom: 1px solid var(--line); color: #646e67; font-size: 8px; }
.detail-tabs b { color: var(--green); }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; padding: 15px; gap: 20px; }
.detail-grid div { display: flex; flex-direction: column; gap: 3px; }
.detail-grid strong { font-family: var(--mono); font-size: 9px; color: #bec8c0; }
.detail-grid span { color: #657068; font-size: 8px; }
.proof-strip {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  margin-top: 88px; padding-top: 30px; border-top: 1px solid var(--line); color: #717c74;
  font-size: 12px;
}
.proof-strip strong { color: #aab5ad; font-family: var(--mono); font-size: 10px; font-weight: 400; text-transform: uppercase; letter-spacing: .06em; }

.section { padding: 128px 0; }
.capabilities { background: var(--paper); color: var(--paper-text); }
.section-intro {
  display: grid; grid-template-columns: 1.2fr .8fr; align-items: end; gap: 80px;
  margin-bottom: 64px;
}
.section-intro h2, .principles h2, .download h2 {
  margin: 14px 0 0; font-size: clamp(40px, 4.5vw, 65px); line-height: 1.07;
  letter-spacing: -.052em; font-weight: 700;
}
.section-intro p { max-width: 490px; margin-bottom: 4px; color: #5c675f; font-size: 16px; }
.capabilities .kicker, .capabilities .feature-index { color: #557c17; }
.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.feature {
  position: relative; min-height: 430px; padding: 34px; border: 1px solid #cbd2ca;
  border-radius: var(--radius); overflow: hidden; background: #f6f8f3;
}
.feature-wide { grid-column: span 2; min-height: 370px; }
.feature h3 { max-width: 580px; margin: 56px 0 16px; font-size: clamp(28px, 3vw, 42px); line-height: 1.1; letter-spacing: -.035em; }
.feature p { max-width: 600px; color: #647067; }
.protocol-viz {
  position: absolute; right: 32px; bottom: 35px; width: 49%; display: flex;
  align-items: center; gap: 8px; padding: 28px; background: var(--ink-soft);
  border-radius: 8px; color: var(--text);
}
.protocol-viz div { min-width: 135px; display: flex; flex-direction: column; }
.protocol-viz span, .protocol-viz em { color: #728077; font-family: var(--mono); font-size: 8px; font-style: normal; }
.protocol-viz b { margin-top: 6px; font-family: var(--mono); font-size: 9px; font-weight: 400; }
.protocol-viz i { flex: 1; height: 1px; background: #415039; position: relative; }
.protocol-viz i::after { content: ""; position: absolute; right: 0; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: var(--green); }
.protocol-viz em { color: var(--green); text-align: center; }
.dns-list, .meter-list { position: absolute; inset: auto 34px 34px; display: grid; gap: 8px; }
.dns-list span {
  display: flex; align-items: center; gap: 9px; padding: 12px; border: 1px solid #d9dfd7;
  border-radius: 5px; background: #fff; color: #526057; font-family: var(--mono); font-size: 9px;
}
.dns-list span b { margin-left: auto; color: #354239; font-weight: 500; }
.dns-list i { width: 6px; height: 6px; border-radius: 50%; }
.dns-list .green { background: #74a927; }
.dns-list .amber { background: #c48725; }
.meter-list span { display: grid; grid-template-columns: 70px 1fr 48px; align-items: center; gap: 10px; font-family: var(--mono); font-size: 9px; color: #68746b; }
.meter-list b { font-weight: 500; }
.meter-list i { position: relative; height: 5px; background: #dce1db; border-radius: 4px; overflow: hidden; }
.meter-list i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--fill); background: #729c32; }
.meter-list em { font-style: normal; text-align: right; }
.feature-portal { display: grid; grid-template-columns: 1fr 420px; align-items: center; gap: 60px; background: #e7ecd9; }
.feature-portal h3 { margin-top: 56px; }
.portal-card { padding: 25px; border: 1px solid #bcc5b3; border-radius: 10px; background: #f8faf5; }
.portal-top { display: flex; justify-content: space-between; color: #7a857c; font-family: var(--mono); font-size: 8px; letter-spacing: .06em; }
.portal-top i { color: #5d8d18; font-style: normal; }
.portal-card > strong { display: block; margin-top: 42px; font-size: 24px; }
.portal-card p { margin: 6px 0 28px; font-size: 13px; }
.portal-button { display: block; padding: 11px; border-radius: 4px; background: #172016; color: var(--green); font-size: 11px; text-align: center; }

.workflow { background: var(--ink); }
.workflow-layout { display: grid; grid-template-columns: .75fr 1.25fr; gap: 90px; }
.workflow-copy { position: sticky; top: 110px; align-self: start; }
.workflow-copy h2 { margin: 16px 0 24px; font-size: clamp(39px, 4vw, 58px); line-height: 1.08; letter-spacing: -.05em; }
.workflow-copy > p { color: var(--muted); }
.step-nav { margin-top: 48px; border-top: 1px solid var(--line); }
.step-nav button {
  width: 100%; display: flex; gap: 22px; padding: 18px 0; border: 0; border-bottom: 1px solid var(--line);
  background: transparent; color: #667168; cursor: pointer; text-align: left;
}
.step-nav button b { color: #465048; font-family: var(--mono); font-size: 10px; font-weight: 400; }
.step-nav button.active { color: var(--text); }
.step-nav button.active b { color: var(--green); }
.workflow-stage {
  position: relative; min-height: 600px; padding: 56px; border: 1px solid var(--line-strong);
  border-radius: var(--radius); background: var(--panel); overflow: hidden;
}
.stage-number {
  position: absolute; right: 28px; top: -30px; color: rgba(183,243,74,.05);
  font-size: 180px; line-height: 1; font-weight: 800; letter-spacing: -.08em;
}
.stage-content { position: relative; max-width: 540px; margin-top: 190px; }
.stage-content small { color: var(--green); font-family: var(--mono); font-size: 9px; letter-spacing: .1em; }
.stage-content h3 { margin: 14px 0; font-size: 38px; line-height: 1.1; letter-spacing: -.04em; }
.stage-content p { color: var(--muted); }
.mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 30px; }
.mode-grid span { display: flex; align-items: center; gap: 12px; padding: 15px; border: 1px solid var(--line); border-radius: 5px; color: #7f8b82; font-size: 11px; }
.mode-grid span.active { color: var(--text); border-color: rgba(183,243,74,.35); background: rgba(183,243,74,.07); }
.mode-grid i { color: var(--green); font-family: var(--mono); font-style: normal; }

.compare { background: #101411; }
.compare-intro p { color: var(--muted); }
.compare-controls { display: flex; gap: 7px; margin-bottom: 18px; }
.compare-controls button {
  padding: 9px 13px; border: 1px solid var(--line); border-radius: 3px; background: transparent;
  color: #78837b; font-size: 10px; font-weight: 700; cursor: pointer;
}
.compare-controls button.active { border-color: var(--green); background: rgba(183,243,74,.09); color: var(--green); }
.comparison-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
.comparison-table { width: 100%; min-width: 990px; border-collapse: collapse; font-size: 11px; }
.comparison-table th, .comparison-table td { height: 55px; padding: 0 16px; border-bottom: 1px solid var(--line); text-align: left; }
.comparison-table tr:last-child th, .comparison-table tr:last-child td { border-bottom: 0; }
.comparison-table thead th { height: 62px; color: #727e75; font-family: var(--mono); font-size: 9px; font-weight: 400; text-transform: uppercase; letter-spacing: .05em; }
.comparison-table tbody th { width: 220px; color: #bdc6bf; font-weight: 600; }
.comparison-table tbody td { color: #7e8981; font-family: var(--mono); font-size: 9px; }
.comparison-table .pr0xy-col { background: rgba(183,243,74,.045); border-left: 1px solid rgba(183,243,74,.15); border-right: 1px solid rgba(183,243,74,.15); }
.comparison-table thead .pr0xy-col { color: var(--text); }
.comparison-table thead img { display: inline-block; width: 20px; vertical-align: middle; margin-right: 7px; }
.comparison-table td.strong { color: var(--green); }
.comparison-table td.partial { color: var(--amber); }
.comparison-table td.different { color: var(--blue); }
.comparison-table td.na { color: #4b554e; }
.comparison-table tr.hidden { display: none; }
.comparison-note { margin: 14px 0 0; color: #59635b; font-size: 10px; }

.principles { background: var(--paper); color: var(--paper-text); }
.principles-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 110px; }
.principles-heading { position: sticky; top: 110px; align-self: start; }
.principles-heading .kicker { color: #557c17; }
.principle-list article { display: grid; grid-template-columns: 50px 1fr; gap: 24px; padding: 35px 0; border-top: 1px solid #ccd3cb; }
.principle-list article:last-child { border-bottom: 1px solid #ccd3cb; }
.principle-list article > b { color: #758078; font-family: var(--mono); font-size: 10px; font-weight: 400; }
.principle-list h3 { margin-bottom: 8px; font-size: 24px; letter-spacing: -.025em; }
.principle-list p { margin-bottom: 0; color: #647067; }

.download {
  position: relative; padding: 150px 0; background: var(--green); color: var(--ink);
  text-align: center; overflow: hidden;
}
.download-lines {
  position: absolute; inset: 0; opacity: .18;
  background-image: linear-gradient(rgba(8,11,10,.25) 1px, transparent 1px), linear-gradient(90deg, rgba(8,11,10,.25) 1px, transparent 1px);
  background-size: 54px 54px; mask-image: radial-gradient(circle at center, black, transparent 65%);
}
.download-inner { position: relative; display: flex; flex-direction: column; align-items: center; }
.download-inner > img {
  width: 92px; margin-bottom: 28px; border-radius: 10px;
  padding: 8px; background: var(--ink);
  outline: 1px solid rgba(8, 11, 10, .25);
}
.download .kicker { color: #3c5615; }
.download h2 { max-width: 840px; margin-top: 20px; }
.download p { margin: 20px 0 0; font-size: 19px; }
.download .hero-actions { justify-content: center; }
.download small { margin-top: 26px; font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }

footer { padding: 46px 0; background: #080a09; }
.footer-grid { display: grid; grid-template-columns: 210px 1fr auto auto; align-items: center; gap: 42px; }
.footer-brand img { width: 160px; }
.footer-grid p, .footer-grid > span { margin: 0; color: #68736b; font-size: 11px; }
.footer-links { display: flex; gap: 20px; }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity 650ms ease, transform 650ms ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay { transition-delay: 120ms; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .button { transition: none; }
}

@media (max-width: 1100px) {
  .hero { min-height: auto; }
  .hero-layout { grid-template-columns: 1fr; }
  .hero-copy { max-width: 750px; }
  .product-window { width: 100%; transform: none; }
  .proof-strip { gap: 20px; overflow-x: auto; }
  .feature-portal { grid-template-columns: 1fr 350px; }
  .workflow-layout { gap: 45px; }
}

@media (max-width: 820px) {
  :root { --shell: min(100% - 32px, 680px); }
  .site-header, .site-header.scrolled { height: 64px; }
  .brand img { width: 145px; }
  .nav-cta { display: none; }
  .menu-button {
    display: flex; width: 42px; height: 42px; margin-left: auto; padding: 12px;
    border: 1px solid var(--line); border-radius: 4px; background: transparent;
    flex-direction: column; justify-content: center; gap: 6px;
  }
  .menu-button span:not(.sr-only) { width: 100%; height: 1px; background: var(--text); }
  .site-nav {
    position: fixed; inset: 64px 0 auto; display: none; padding: 26px 24px 36px;
    background: rgba(8,11,10,.98); border-bottom: 1px solid var(--line); flex-direction: column;
  }
  .menu-open .site-nav { display: flex; }
  .site-nav a { font-size: 18px; }
  .hero { padding-top: 130px; }
  h1 { font-size: clamp(49px, 14vw, 72px); }
  .app-frame { min-height: 450px; }
  .traffic-row { grid-template-columns: 60px 1fr 48px 45px; }
  .traffic-row span:last-child { display: none; }
  .proof-strip { justify-content: flex-start; white-space: nowrap; }
  .section { padding: 90px 0; }
  .section-intro, .principles-grid, .workflow-layout { grid-template-columns: 1fr; gap: 35px; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature, .feature-wide { grid-column: auto; min-height: 430px; }
  .protocol-viz { left: 30px; right: 30px; width: auto; }
  .feature-portal { grid-template-columns: 1fr; }
  .workflow-copy, .principles-heading { position: static; }
  .workflow-stage { min-height: 550px; }
  .stage-content { margin-top: 150px; }
  .footer-grid { grid-template-columns: 1fr; gap: 22px; }
}

@media (max-width: 540px) {
  .hero-actions { align-items: stretch; flex-direction: column; }
  .hero-actions .button { width: 100%; }
  .platform-divider { display: none; }
  .product-window { border-radius: 7px; }
  .window-status { display: none; }
  .window-bar { grid-template-columns: 1fr auto; }
  .app-nav { display: none; }
  .app-main { padding: 13px; }
  .detail-grid { grid-template-columns: 1fr; gap: 13px; }
  .feature { padding: 25px; }
  .protocol-viz { left: 20px; right: 20px; padding: 18px; }
  .protocol-viz div { min-width: 90px; }
  .protocol-viz em { display: none; }
  .dns-list, .meter-list { inset-inline: 25px; }
  .workflow-stage { min-height: 520px; padding: 28px; }
  .stage-content { margin-top: 150px; }
  .mode-grid { grid-template-columns: 1fr; }
  .compare-controls { overflow-x: auto; }
  .compare-controls button { flex: 0 0 auto; }
}