:root {
  --bg: #07111f;
  --bg-soft: #0b1728;
  --panel: rgba(13, 27, 46, 0.82);
  --panel-solid: #0d1b2e;
  --border: rgba(148, 163, 184, 0.16);
  --text: #f7fbff;
  --muted: #9fb0c5;
  --muted-2: #718096;
  --blue: #68a8ff;
  --blue-2: #2d7df4;
  --cyan: #75e7ff;
  --green: #4ee0a0;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.34);
  --radius: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 80% -10%, rgba(45, 125, 244, 0.16), transparent 30rem),
    linear-gradient(180deg, #07111f 0%, #07111f 42%, #081421 100%);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }

.container { width: min(1160px, calc(100% - 40px)); margin-inline: auto; }

.ambient {
  position: fixed;
  z-index: -2;
  filter: blur(90px);
  border-radius: 999px;
  pointer-events: none;
  opacity: .35;
}
.ambient-one { width: 440px; height: 440px; background: #164b9d; top: -160px; right: 6vw; }
.ambient-two { width: 360px; height: 360px; background: #0b7d74; top: 38vh; left: -190px; opacity: .16; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid rgba(148, 163, 184, .09);
  background: rgba(7, 17, 31, .76);
  backdrop-filter: blur(18px);
}
.nav-wrap { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 760; letter-spacing: -.02em; font-size: 1.07rem; }
.brand-mark { display: inline-flex; align-items: flex-end; gap: 3px; width: 24px; height: 20px; }
.brand-mark span { width: 5px; border-radius: 5px; background: linear-gradient(180deg, var(--cyan), var(--blue-2)); box-shadow: 0 0 14px rgba(104, 168, 255, .25); }
.brand-mark span:nth-child(1) { height: 8px; }
.brand-mark span:nth-child(2) { height: 14px; }
.brand-mark span:nth-child(3) { height: 20px; }
.nav { display: flex; align-items: center; gap: 28px; color: #b9c6d6; font-size: .92rem; }
.nav a { transition: color .18s ease, border-color .18s ease, background .18s ease; }
.nav a:hover { color: #fff; }
.nav-cta { padding: 9px 14px; border: 1px solid var(--border); border-radius: 10px; background: rgba(255,255,255,.025); }
.nav-cta:hover { border-color: rgba(117, 231, 255, .32); background: rgba(117, 231, 255, .06); }

.hero { padding: 104px 0 92px; display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: 70px; min-height: 720px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid rgba(117, 231, 255, .16); border-radius: 999px; background: rgba(117, 231, 255, .045); color: #b9c8d8; font-size: .82rem; letter-spacing: .015em; }
.pulse { width: 7px; height: 7px; border-radius: 999px; background: var(--green); box-shadow: 0 0 0 5px rgba(78, 224, 160, .08); }
.hero h1 { margin: 26px 0 24px; max-width: 760px; font-size: clamp(3.25rem, 7vw, 6.15rem); line-height: .98; letter-spacing: -.062em; font-weight: 760; }
.hero h1 span { color: #8fa3ba; }
.hero-lead { max-width: 680px; margin: 0; color: #a9b8c9; font-size: clamp(1.05rem, 1.7vw, 1.23rem); line-height: 1.7; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 0 18px; border-radius: 11px; font-weight: 680; font-size: .92rem; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease; }
.button:hover { transform: translateY(-2px); }
.button.primary { background: linear-gradient(135deg, #eff7ff, #bcdcff); color: #07111f; box-shadow: 0 10px 35px rgba(104, 168, 255, .15); }
.button.primary:hover { box-shadow: 0 14px 42px rgba(104, 168, 255, .23); }
.button.secondary { border: 1px solid var(--border); background: rgba(255,255,255,.026); color: #d8e5f1; }
.button.secondary:hover { border-color: rgba(104, 168, 255, .35); }
.hero-meta { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 20px; color: #75879b; font-size: .78rem; text-transform: uppercase; letter-spacing: .11em; }
.hero-meta span { display: inline-flex; align-items: center; gap: 10px; }
.hero-meta span:not(:first-child)::before { content: ""; width: 3px; height: 3px; border-radius: 999px; background: #3d526a; }

.hero-panel { border: 1px solid var(--border); border-radius: 22px; background: linear-gradient(180deg, rgba(14, 31, 53, .83), rgba(8, 21, 36, .86)); box-shadow: var(--shadow); overflow: hidden; position: relative; }
.hero-panel::after { content: ""; position: absolute; inset: auto -90px -120px auto; width: 250px; height: 250px; background: radial-gradient(circle, rgba(45,125,244,.12), transparent 67%); pointer-events: none; }
.terminal-bar { height: 46px; padding: 0 16px; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--border); color: #6f8195; font: 600 .72rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.terminal-dots { display: flex; gap: 6px; }
.terminal-dots span { width: 7px; height: 7px; border-radius: 999px; background: #425268; }
.diagram { padding: 30px; font: 500 .77rem/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #93a5b8; }
.diagram-label { text-align: center; color: #7890a8; }
.arrow { text-align: center; margin: 10px 0; color: #496077; }
.node { border: 1px solid rgba(133, 158, 187, .16); background: rgba(255,255,255,.018); border-radius: 12px; padding: 15px 12px; display: flex; flex-direction: column; gap: 6px; text-align: center; }
.node strong { color: #d9e7f3; font-size: .82rem; }
.node small { color: #61758b; font-size: .65rem; }
.control-node { width: 76%; margin: 0 auto; border-color: rgba(104,168,255,.25); box-shadow: inset 0 0 30px rgba(45,125,244,.045), 0 12px 35px rgba(0,0,0,.13); }
.control-node strong { font-size: 1.05rem; color: #eaf5ff; }
.node-kicker { color: var(--cyan); font-size: .57rem; letter-spacing: .16em; }
.connector-row { height: 34px; width: 72%; margin: 0 auto; display: grid; grid-template-columns: repeat(3,1fr); align-items: stretch; position: relative; }
.connector-row::before { content: ""; position: absolute; top: 17px; left: 16.66%; right: 16.66%; border-top: 1px solid #273b50; }
.connector-row span { justify-self: center; width: 1px; height: 34px; background: #273b50; }
.node-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.muted-node { opacity: .72; }
.carrier-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.carrier-row span { border: 1px dashed rgba(133,158,187,.15); border-radius: 9px; padding: 10px 6px; text-align: center; color: #627990; font-size: .64rem; }

.proof-strip { border-top: 1px solid rgba(148,163,184,.08); border-bottom: 1px solid rgba(148,163,184,.08); background: rgba(255,255,255,.012); }
.proof-items { min-height: 72px; display: grid; grid-template-columns: repeat(6,1fr); align-items: center; text-align: center; color: #63798f; font-size: .79rem; letter-spacing: .04em; }
.proof-items span:not(:last-child) { border-right: 1px solid rgba(148,163,184,.08); }

.section { padding: 120px 0; }
.section-heading { max-width: 760px; margin-bottom: 46px; }
.overline { margin: 0 0 13px; color: var(--cyan); font-size: .72rem; letter-spacing: .18em; font-weight: 760; }
.section-heading h2, .architecture-copy h2, .cta-card h2 { margin: 0; font-size: clamp(2rem, 4vw, 3.6rem); line-height: 1.05; letter-spacing: -.045em; }
.section-heading > p:last-child, .architecture-copy > p { max-width: 700px; margin: 20px 0 0; color: #91a3b7; font-size: 1rem; line-height: 1.72; }

.feature-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
.feature-card { min-height: 300px; padding: 28px; border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(180deg, rgba(14,29,49,.7), rgba(8,20,35,.7)); transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.feature-card:hover { transform: translateY(-3px); border-color: rgba(104,168,255,.25); background: linear-gradient(180deg, rgba(16,34,58,.82), rgba(8,20,35,.82)); }
.feature-card.featured { background: radial-gradient(circle at 100% 0%, rgba(45,125,244,.12), transparent 13rem), linear-gradient(180deg, rgba(14,29,49,.82), rgba(8,20,35,.72)); }
.feature-card h3 { margin: 16px 0 11px; font-size: 1.35rem; letter-spacing: -.025em; }
.feature-card p:last-child { margin: 0; max-width: 500px; color: #8799ad; font-size: .93rem; line-height: 1.72; }
.card-label { margin: 22px 0 0; color: #647c94; font: 650 .66rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .12em; }
.icon { width: 42px; height: 42px; border: 1px solid rgba(117,231,255,.16); border-radius: 11px; background: rgba(117,231,255,.045); color: #9fdcff; display: grid; place-items: center; font: 700 .76rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; position: relative; }
.icon-route::before, .icon-route::after { content: ""; position: absolute; border-radius: 999px; background: #8dc7ff; }
.icon-route::before { width: 5px; height: 5px; left: 9px; top: 18px; box-shadow: 18px -8px 0 #75e7ff, 18px 8px 0 #75e7ff; }
.icon-route::after { width: 17px; height: 1px; left: 13px; top: 20px; transform: rotate(-22deg); box-shadow: 0 7px 0 rgba(141,199,255,.8); }
.icon-stack::before { content: ""; width: 19px; height: 5px; border: 1px solid #8dc7ff; border-radius: 3px; box-shadow: 0 7px 0 -1px #0d1b2e, 0 7px 0 0 #8dc7ff, 0 14px 0 -1px #0d1b2e, 0 14px 0 0 #8dc7ff; }
.icon-shield::before { content: ""; width: 16px; height: 19px; border: 1px solid #8dc7ff; border-radius: 8px 8px 10px 10px; clip-path: polygon(50% 0,100% 18%,88% 72%,50% 100%,12% 72%,0 18%); }

.architecture-section { border-top: 1px solid rgba(148,163,184,.07); border-bottom: 1px solid rgba(148,163,184,.07); background: rgba(255,255,255,.011); }
.architecture-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 76px; align-items: center; }
.principle-list { list-style: none; padding: 0; margin: 36px 0 0; display: grid; gap: 18px; }
.principle-list li { display: grid; grid-template-columns: 38px 1fr; gap: 15px; padding-top: 18px; border-top: 1px solid rgba(148,163,184,.1); }
.principle-list li > span { color: #58728b; font: 650 .67rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.principle-list strong { display: block; color: #d7e3ef; font-size: .92rem; }
.principle-list small { display: block; margin-top: 5px; color: #71859a; font-size: .82rem; }
.stack-card { padding: 24px; border: 1px solid var(--border); border-radius: 24px; background: #091727; box-shadow: var(--shadow); }
.stack-layer { min-height: 68px; padding: 14px 16px; border: 1px solid rgba(148,163,184,.13); border-radius: 12px; background: rgba(255,255,255,.018); display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.stack-layer span { font-size: .83rem; color: #cfe0ef; font-weight: 680; }
.stack-layer small { color: #61778d; font-size: .7rem; }
.app-layer { text-align: center; }
.leamout-layer { text-align: center; border-color: rgba(104,168,255,.28); background: rgba(45,125,244,.065); }
.leamout-layer span { color: #e7f4ff; }
.carrier-layer { text-align: center; border-style: dashed; }
.stack-line { width: 1px; height: 22px; background: #293e53; margin: 0 auto; }
.stack-line.split { height: 22px; width: 68%; border-left: 1px solid #293e53; border-right: 1px solid #293e53; border-top: 1px solid #293e53; background: transparent; margin-top: 12px; }
.stack-columns { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.stack-columns .stack-layer { min-height: 62px; text-align: center; padding-inline: 8px; }
.telecom-stack .stack-layer { border-color: rgba(117,231,255,.12); }

.road-heading { max-width: 800px; }
.roadmap-grid { border-top: 1px solid rgba(148,163,184,.13); }
.road-item { display: grid; grid-template-columns: 90px 1fr; gap: 20px; padding: 30px 0; border-bottom: 1px solid rgba(148,163,184,.11); }
.road-number { color: #496279; font: 650 .78rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.road-item > div { display: grid; grid-template-columns: 130px minmax(230px,.7fr) 1fr; gap: 30px; align-items: start; }
.status { color: #607b94; font: 700 .64rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .11em; }
.road-item.current .status { color: var(--green); }
.road-item h3 { margin: -3px 0 0; font-size: 1.16rem; letter-spacing: -.02em; }
.road-item p { margin: -2px 0 0; color: #74889d; font-size: .88rem; line-height: 1.65; }

.cta-section { padding-top: 30px; padding-bottom: 120px; }
.cta-card { min-height: 280px; padding: 50px; border-radius: 26px; background: linear-gradient(135deg, #e8f4ff 0%, #b9d9ff 58%, #9ac7ff 100%); color: #07111f; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; box-shadow: 0 30px 80px rgba(3,11,22,.3); }
.cta-card .overline { color: #215a96; }
.cta-card > div:first-child { max-width: 700px; }
.cta-card p:last-child { color: #41617f; max-width: 620px; }
.cta-actions { min-width: 200px; display: flex; flex-direction: column; gap: 15px; align-items: flex-start; }
.button.light { background: #07111f; color: #fff; }
.contact-link { color: #204e79; font-size: .86rem; border-bottom: 1px solid rgba(32,78,121,.25); }

.footer { border-top: 1px solid rgba(148,163,184,.09); }
.footer-wrap { min-height: 110px; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; color: #5f758b; font-size: .79rem; }
.footer-brand { color: #b6c8d8; }
.footer-wrap p { text-align: center; }
.footer-links { justify-self: end; display: flex; gap: 20px; }
.footer-links a:hover { color: #d5e4ef; }

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; gap: 52px; padding-top: 80px; min-height: 0; }
  .hero-copy { max-width: 820px; }
  .hero-panel { max-width: 720px; width: 100%; }
  .architecture-grid { grid-template-columns: 1fr; gap: 50px; }
  .architecture-copy { max-width: 760px; }
  .road-item > div { grid-template-columns: 120px 1fr; }
  .road-item p { grid-column: 2; }
}

@media (max-width: 760px) {
  .container { width: min(100% - 28px, 1160px); }
  .site-header { position: relative; }
  .nav-wrap { min-height: 66px; }
  .nav a:not(.nav-cta) { display: none; }
  .nav { gap: 10px; }
  .hero { padding: 70px 0 65px; }
  .hero h1 { font-size: clamp(3rem, 15vw, 4.4rem); }
  .hero-meta { gap: 12px; }
  .hero-meta span:not(:first-child)::before { display: none; }
  .diagram { padding: 22px 14px; }
  .control-node { width: 90%; }
  .node-row, .carrier-row { gap: 6px; }
  .node { padding-inline: 5px; }
  .proof-items { grid-template-columns: repeat(3,1fr); min-height: 120px; }
  .proof-items span { border-right: 0 !important; }
  .section { padding: 82px 0; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-card { min-height: 250px; }
  .stack-card { padding: 16px; }
  .stack-columns { gap: 6px; }
  .stack-layer span { font-size: .72rem; }
  .stack-layer small { font-size: .62rem; }
  .road-item { grid-template-columns: 48px 1fr; gap: 8px; }
  .road-item > div { grid-template-columns: 1fr; gap: 8px; }
  .road-item p { grid-column: auto; }
  .status { margin-bottom: 4px; }
  .cta-card { padding: 34px 26px; flex-direction: column; align-items: flex-start; }
  .footer-wrap { grid-template-columns: 1fr; gap: 12px; padding: 28px 0; }
  .footer-wrap p { text-align: left; margin: 0; }
  .footer-links { justify-self: start; }
}