:root {
  color-scheme:dark;
  --bg-primary:#101214;
  --bg-surface:#171a1d;
  --border-subtle:#30353b;
  --text-primary:#eef0f2;
  --text-secondary:#a4a9b0;
  --accent:#55b6ff;
  --font-sans:'Inter','Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
  --nav-height:76px
}

*,*::before,*::after {
  box-sizing:border-box
}
* {
  margin:0;
  padding:0
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:100px
}
body {
  font-family:var(--font-sans);
  background:var(--bg-primary);
  color:var(--text-primary);
  line-height:1.65;
  -webkit-font-smoothing:antialiased
}
a {
  color:inherit;
  text-decoration:none
}
button {
  font:inherit;
  color:inherit;
  cursor:pointer;
  background:none;
  border:0
}
img,svg {
  display:block;
  max-width:100%
}
::selection {
  background:#165482;
  color:#fff
}
h1:focus,#main-content:focus {
  outline:none
}
a:focus-visible,button:focus-visible,summary:focus-visible,video:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:5px
}
.container {
  width:min(1248px,100%);
  margin-inline:auto;
  padding-inline:40px
}
.mono,.eyebrow {
  font-family:var(--font-mono)
}
.eyebrow {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:10px;
  font-weight:500;
  letter-spacing:.12em;
  color:var(--accent);
  margin-bottom:23px
}
.status-dot {
  display:inline-block;
  flex-shrink:0;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#4bd697;
  box-shadow:0 0 12px #4bd69755
}
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:25px;
  padding:13px 21px;
  border-radius:6px;
  font-size:13px;
  font-weight:600;
  transition:background .18s,border-color .18s,transform .18s;
  border:1px solid transparent;
  min-height:46px
}
.btn:hover {
  transform:translateY(-2px)
}
.btn--primary {
  background:#0875c9;
  border-color:#168fe7;
  color:white;
  box-shadow:0 4px 24px #018af118
}
.btn--primary:hover {
  background:#0989e7
}
.btn--secondary {
  background:#171d25;
  border-color:#394450
}
.btn--secondary:hover {
  border-color:var(--accent)
}

.navbar {
  position:fixed;
  inset:0 0 auto;
  z-index:30;
  height:var(--nav-height);
  border-bottom:1px solid #ffffff0b;
  background:#101214e8;
  backdrop-filter:blur(18px)
}
.navbar--scrolled {
  border-color:#30353b
}
.navbar__container {
  display:flex;
  align-items:center;
  height:100%;
  gap:36px
}
.navbar__brand {
  display:flex;
  flex-shrink:0
}
.brand-wordmark {
  width:136px;
  height:30px
}
.navbar__links {
  display:flex;
  gap:28px;
  margin-left:auto;
  align-items:center
}
.nav-link {
  font-size:12px;
  color:#b4bac3
}
.nav-link:hover {
  color:white
}
.navbar__cta {
  font-size:12px;
  padding:9px 18px;
  min-height:38px
}
.navbar__mobile-toggle {
  display:none;
  width:42px;
  height:42px;
  align-items:center;
  justify-content:center
}
.navbar__hamburger {
  display:grid;
  gap:5px;
  width:20px
}
.navbar__hamburger>span {
  height:2px;
  background:#dbe5ee
}
.mobile-nav {
  display:none
}

.hero {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding-top:var(--nav-height);
  background:#0b0e12
}
.hero-grid {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  align-items:center;
  gap:40px;
  padding-top:103px;
  padding-bottom:96px
}
.hero-copy {
  position:relative;
  z-index:2
}
.hero h1 {
  font-size:clamp(46px,5.25vw,74px);
  letter-spacing:-.065em;
  font-weight:600;
  line-height:1.09;
  margin:0 0 25px
}
.hero h1>span {
  color:var(--accent)
}
.hero-lead {
  font-size:19px;
  letter-spacing:-.02em;
  color:#d0d6de;
  margin-bottom:13px
}
.hero-description {
  font-size:14px;
  color:#a4adb9;
  max-width:465px;
  line-height:1.9
}
.hero-description strong {
  font-weight:500;
  color:#e3e8ef
}
.hero-actions {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:30px
}
.hero-footnote {
  display:flex;
  gap:22px;
  font-size:10px;
  color:#8693a2;
  margin-top:25px
}
.hero-footnote span::before {
  content:'✓';
  color:#55b6ff;
  margin-right:7px
}
.hero-baseline {
  position:relative;
  display:flex;
  align-items:center;
  gap:28px;
  border-top:1px solid #ffffff13;
  padding-top:21px;
  padding-bottom:22px
}
.hero-baseline>span {
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:.1em;
  color:#8a98a9
}
.hero-baseline p {
  font-size:12px;
  color:#aab4c0
}
.hero-baseline a {
  margin-left:auto;
  color:var(--accent)
}

/* Original server login packet animation. */
.data-field {
  position:absolute;
  inset:0;
  z-index:-1;
  overflow:hidden;
  pointer-events:none;
  background:radial-gradient(ellipse at 75% 48%,#102c4350,transparent 58%),#0b0e12
}
.data-field::before {
  content:'';
  position:absolute;
  inset:0;
  background-image:linear-gradient(#49698612 1px,transparent 1px),linear-gradient(90deg,#49698612 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse at center,black,transparent 78%)
}
.data-field::after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#0b0e12d9,transparent 85%)
}
.data-field svg {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:.72
}
.trace {
  fill:none;
  stroke:#23425a;
  stroke-width:1;
  vector-effect:non-scaling-stroke
}
.packet {
  fill:none;
  stroke:#45acff;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-dasharray:28 972;
  vector-effect:non-scaling-stroke;
  animation:transfer 9s linear infinite;
  filter:drop-shadow(0 0 4px #018af180)
}
.packet.slow {
  animation-duration:13s;
  animation-delay:-7s;
  stroke:#2377b8
}
.packet.offset {
  animation-delay:-4.5s
}
.packet.late {
  animation-delay:-2s;
  animation-duration:11s
}
.flow-node {
  fill:#0c1520;
  stroke:#396380;
  stroke-width:1
}
@keyframes transfer {
  from {
  stroke-dashoffset:1000
}
to {
  stroke-dashoffset:0
}

}

.network-scene {
  position:relative;
  height:470px;
  max-width:520px;
  width:100%;
  margin:auto;
  background:radial-gradient(ellipse at center,#018af110,transparent 70%);
  border:1px solid #5a8ebc28;
  border-radius:12px;
  box-shadow:0 25px 70px #0003;
  overflow:hidden
}
.scene-header,.scene-footer {
  position:absolute;
  inset:20px 20px auto;
  display:flex;
  justify-content:space-between;
  gap:8px;
  font-size:9px;
  color:#90a6ba;
  letter-spacing:.06em;
  z-index:2
}
.scene-label {
  font-family:var(--font-sans);
  color:#8191a1;
  letter-spacing:0
}
.scene-footer {
  inset:auto 20px 18px;
  font-size:8px
}
.orbit {
  position:absolute;
  width:330px;
  height:330px;
  border:1px solid #3889bf12;
  border-radius:50%;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%)
}
.orbit-two {
  width:420px;
  height:420px
}
.network-wires {
  position:absolute;
  width:100%;
  height:100%;
  stroke:#325979;
  stroke-width:1;
  inset:0
}
.network-wires .wire-pulse {
  stroke:#55b6ff;
  stroke-width:2;
  stroke-dasharray:20 550;
  animation:transfer 9s linear infinite
}
.node {
  position:absolute;
  top:17%;
  width:32%;
  height:95px;
  border:1px solid #344553;
  background:linear-gradient(140deg,#1b2732,#131a22);
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  box-shadow:0 10px 28px #0004
}
.node svg {
  color:#73b6e8;
  margin-bottom:6px
}
.node strong {
  font-size:12px;
  font-weight:500
}
.node span {
  font:8px var(--font-mono);
  letter-spacing:.09em;
  color:#8395a5;
  margin-top:5px
}
.node-desktop {
  left:5%
}
.node-laptop {
  right:5%
}
.server-core {
  position:absolute;
  left:50%;
  top:44%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:14px;
  background:linear-gradient(130deg,#15344b,#152431);
  border:1px solid #397dad;
  border-radius:9px;
  padding:20px 22px;
  white-space:nowrap;
  box-shadow:0 0 50px #018af117
}
.core-symbol {
  font-size:39px;
  color:#55b6ff;
  line-height:1
}
.server-core div {
  display:grid
}
.server-core div span {
  font:8px var(--font-mono);
  color:#82afcd;
  letter-spacing:.15em;
  margin-bottom:5px
}
.server-core strong {
  font-size:17px;
  font-weight:500
}
.workspace-node {
  position:absolute;
  top:75%;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:12px;
  width:245px;
  background:#171d24;
  border:1px solid #415161;
  border-radius:7px;
  padding:14px 18px
}
.workspace-mark {
  color:var(--accent);
  font:22px var(--font-mono)
}
.workspace-node div {
  display:grid
}
.workspace-node strong {
  font-size:13px
}
.workspace-node div span {
  font-size:9px;
  color:#92a0ae
}
.workspace-node>.status-dot {
  margin-left:auto
}

.section {
  padding:105px 0;
  border-bottom:1px solid #ffffff09;
  scroll-margin-top:10px
}
.section-heading {
  margin-bottom:46px
}
.section-heading h2,.control-grid h2,.closing-card h2 {
  font-size:clamp(32px,3.5vw,47px);
  line-height:1.18;
  letter-spacing:-.045em;
  font-weight:550
}
.section-heading em,.control-grid em,.closing-card em {
  font-style:normal;
  color:#8597a9
}
.section-heading p {
  color:#a4a9b0;
  font-size:14px;
  margin-top:22px;
  line-height:1.85
}
.split-heading {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:70px;
  align-items:end
}
.split-heading>p {
  max-width:395px;
  padding-bottom:4px
}
.server-layout {
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:55px;
  align-items:stretch
}
.hardware-panel {
  background:radial-gradient(ellipse at 50% 45%,#12355166,transparent 65%),#14191f;
  border:1px solid #303c48;
  border-radius:10px;
  display:flex;
  flex-direction:column;
  min-height:380px;
  overflow:hidden
}
.panel-top {
  display:flex;
  gap:10px;
  align-items:center;
  padding:18px 21px;
  border-bottom:1px solid #ffffff0a;
  font-size:9px;
  color:#91a6b9
}
.panel-top svg {
  margin-left:auto;
  color:#5f91b6
}
.hardware-drawing {
  position:relative;
  flex:1;
  min-height:245px
}
.desktop-tower {
  position:absolute;
  width:100px;
  height:155px;
  top:44px;
  left:28%;
  border:1px solid #5681a3;
  border-radius:8px;
  background:linear-gradient(120deg,#23313f,#0e1720);
  transform:skewY(-6deg);
  box-shadow:12px 10px 0 #080e14;
  z-index:2;
  padding:18px
}
.desktop-tower div {
  width:47px;
  height:47px;
  border:1px solid #3375a2;
  border-radius:50%;
  margin:0 auto 10px;
  box-shadow:inset 0 0 15px #018af12b
}
.desktop-tower div::after {
  content:'';
  display:block;
  border-radius:50%;
  width:19px;
  height:19px;
  background:#1d4562;
  border:1px solid #448cbd;
  margin:13px
}
.desktop-tower i {
  position:absolute;
  right:8px;
  top:15px;
  width:3px;
  height:110px;
  background:#55b6ff;
  box-shadow:0 0 9px #018af1
}
.laptop-drawing {
  position:absolute;
  width:150px;
  top:115px;
  left:47%;
  z-index:3;
  transform:skewY(-6deg)
}
.laptop-drawing>div {
  height:92px;
  border:2px solid #54718c;
  background:#0c1722;
  border-radius:6px;
  display:grid;
  place-items:center;
  color:#55b6ff;
  font:28px var(--font-mono)
}
.laptop-drawing i {
  display:block;
  height:11px;
  background:linear-gradient(#5c7388,#253645);
  margin:0 -15px;
  clip-path:polygon(8% 0,92% 0,100% 100%,0 100%)
}
.hardware-orbit {
  position:absolute;
  width:260px;
  height:80px;
  border:1px solid #3180b440;
  left:22%;
  bottom:7px;
  transform:rotate(-8deg);
  border-radius:50%
}
.hardware-caption {
  padding:22px 25px;
  background:#11171dab;
  border-top:1px solid #ffffff08;
  display:grid;
  gap:4px
}
.hardware-caption strong {
  font-size:13px;
  font-weight:500
}
.hardware-caption span {
  color:#94a0ad;
  font-size:11px
}
.server-details article {
  display:flex;
  gap:20px;
  padding:22px 0;
  border-bottom:1px solid #30353b
}
.server-details article:first-child {
  padding-top:5px
}
.detail-index {
  font:11px var(--font-mono);
  color:#559ccc;
  line-height:25px
}
.server-details h3 {
  font-size:17px;
  font-weight:500;
  margin-bottom:7px;
  letter-spacing:-.02em
}
.server-details p {
  font-size:13px;
  color:#a4a9b0;
  line-height:1.85
}
.compatibility-note {
  font-size:10px;
  line-height:1.8;
  color:#8a97a4;
  margin-top:18px;
  display:flex;
  gap:10px
}
.compatibility-note>span {
  color:#55b6ff
}
.server-capabilities,.workspace-highlights {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:35px;
  margin-top:40px
}
.server-capabilities article {
  border-top:1px solid #30353b;
  padding-top:20px
}
.server-capabilities .mono,.workspace-highlights .mono {
  font-size:9px;
  letter-spacing:.1em;
  color:#70a3c9
}
.server-capabilities h3,.workspace-highlights h3 {
  font-weight:500;
  font-size:16px;
  margin:9px 0
}
.server-capabilities p,.workspace-highlights p {
  font-size:12px;
  color:#a4a9b0;
  line-height:1.85
}

.workspace-section {
  background:#0d1013
}
.workspace-section>.container>.section-heading {
  text-align:center
}
.workspace-section .eyebrow {
  justify-content:center
}
.product-window {
  border:1px solid #384653;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 25px 90px #0005
}
.window-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:15px 22px;
  background:#1b2026;
  font-size:10px;
  color:#92a0af
}
.window-brand {
  color:#7bbcef;
  display:flex;
  gap:9px;
  align-items:center;
  font-size:20px
}
.window-brand strong {
  color:#e0e6ed;
  font-size:12px;
  font-weight:500
}
.window-bar .mono {
  font-size:9px;
  letter-spacing:.12em
}
.window-indicator {
  font-size:9px
}
.product-window video {
  display:block;
  width:100%;
  aspect-ratio:16/9;
  background:#131619;
  object-fit:contain
}
.window-bottom {
  display:flex;
  gap:15px;
  justify-content:space-between;
  padding:12px 20px;
  background:#171c22;
  color:#899dad;
  font:9px var(--font-mono)
}
.window-bottom .status-dot {
  margin-right:7px
}
.window-bottom b {
  color:#387aae;
  margin:0 6px
}
.workspace-highlights article {
  padding-right:12px
}
.feature-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px
}
.feature-tile {
  background:linear-gradient(135deg,#1a2027,#15191e);
  border:1px solid #303b46;
  border-radius:8px;
  padding:28px;
  transition:border-color .2s,transform .2s
}
.feature-tile:hover {
  border-color:#446783;
  transform:translateY(-3px)
}
.feature-icon {
  color:#55b6ff;
  margin-bottom:25px
}
.feature-tile h3 {
  font-size:16px;
  font-weight:550;
  letter-spacing:-.02em;
  margin-bottom:10px
}
.feature-tile p {
  font-size:12px;
  line-height:1.85;
  color:#a4a9b0
}
.workflow-section {
  background:#11171d
}
.workflow-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:25px
}
.workflow-grid article {
  border-top:1px solid #3a556d;
  padding-top:23px;
  position:relative
}
.workflow-grid article::before {
  content:'';
  position:absolute;
  top:-3px;
  left:0;
  width:5px;
  height:5px;
  background:#55b6ff;
  border-radius:50%
}
.workflow-grid article>span {
  font:9px var(--font-mono);
  letter-spacing:.12em;
  color:#679cc5
}
.workflow-grid h3 {
  font-size:17px;
  font-weight:500;
  margin:17px 0 9px
}
.workflow-grid p {
  font-size:12px;
  color:#a4a9b0;
  line-height:1.85
}
.control-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px;
  align-items:center
}
.control-copy p {
  font-size:14px;
  color:#a4a9b0;
  line-height:1.9;
  margin-bottom:19px
}
.control-copy .large-copy {
  font-size:23px;
  color:#dbe2e9;
  line-height:1.4;
  letter-spacing:-.03em
}
.text-link {
  color:#55b6ff;
  font-size:12px;
  display:inline-flex;
  gap:20px;
  padding:8px 0
}
.text-link:hover {
  color:#9fd7ff
}
.cta-section {
  padding-top:0;
  border-bottom:0
}
.closing-card {
  text-align:center;
  background:radial-gradient(ellipse at 50% 0,#15375380,transparent 65%),#141a20;
  border:1px solid #33495c;
  border-radius:12px;
  padding:67px 25px;
  position:relative
}
.closing-card::before {
  content:'';
  position:absolute;
  top:-1px;
  height:1px;
  left:25%;
  right:25%;
  background:linear-gradient(90deg,transparent,#55b6ff,transparent)
}
.closing-card .eyebrow {
  justify-content:center
}
.closing-card h2 em {
  color:#55b6ff
}
.closing-card p {
  color:#a4a9b0;
  font-size:14px;
  margin:20px 0 26px
}
.commercial-note {
  display:block;
  font-size:10px;
  color:#8393a2;
  margin-top:18px
}

.footer {
  border-top:1px solid #30353b;
  background:#0c0f12;
  padding:55px 0 23px
}
.footer__grid {
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:40px
}
.footer__brand-logo {
  display:flex;
  align-items:center;
  gap:10px
}
.footer__tagline {
  font-size:12px;
  color:#8996a4;
  max-width:310px;
  margin-top:18px
}
.footer__heading {
  font-weight:500;
  font-size:12px;
  margin:5px 0 16px
}
.footer__links {
  list-style:none;
  display:grid;
  gap:9px;
  font-size:11px;
  color:#94a0ac
}
.footer__link:hover {
  color:#55b6ff
}
.footer__bottom {
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:10px;
  color:#7f8a95;
  border-top:1px solid #272c31;
  margin-top:42px;
  padding-top:22px
}
.scroll-to-top {
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:20;
  width:40px;
  height:40px;
  border:1px solid #3b5368;
  background:#17232e;
  border-radius:7px;
  display:grid;
  place-items:center;
  color:#80b8e1
}
.skip-link {
  position:fixed;
  top:10px;
  left:10px;
  z-index:100;
  background:#173c59;
  color:white;
  padding:10px;
  transform:translateY(-150%)
}
.skip-link:focus {
  transform:none
}

@media(min-width:1500px) {
  .hero-grid {
  padding-top:125px;
  padding-bottom:115px
}

}

@media(max-width:1000px) {
  .container {
  padding-inline:28px
}
.hero-grid {
  gap:25px;
  padding-top:80px;
  padding-bottom:65px
}
.hero h1 {
  font-size:54px
}
.network-scene {
  height:425px
}
.navbar__links {
  gap:17px
}
.navbar__container {
  gap:22px
}
.hero-lead {
  font-size:16px
}
.hero-description {
  font-size:13px
}
.server-layout {
  gap:30px
}
.split-heading {
  gap:35px
}
.feature-tile {
  padding:23px
}
.control-grid {
  gap:45px
}

}

@media(max-width:760px) {
  :root {
  --nav-height:66px
}
.container {
  padding-inline:22px
}
.navbar__links,.navbar__cta {
  display:none
}
.navbar__mobile-toggle {
  display:flex;
  margin-left:auto
}
.mobile-nav--open {
  display:flex;
  position:absolute;
  top:66px;
  left:0;
  right:0;
  padding:25px;
  flex-direction:column;
  gap:22px;
  background:#141b23;
  border-bottom:1px solid #354454;
  box-shadow:0 20px 40px #0008
}
.nav-link--mobile {
  font-size:15px
}
.mobile-nav__cta {
  align-self:flex-start
}
.hero-grid {
  grid-template-columns:1fr;
  padding-top:55px;
  padding-bottom:35px;
  gap:42px
}
.hero h1 {
  font-size:clamp(44px,9vw,68px)
}
.hero-copy {
  max-width:550px
}
.hero-description {
  max-width:500px
}
.hero .eyebrow {
  font-size:8px;
  letter-spacing:.1em
}
.hero-lead {
  font-size:18px
}
.network-scene {
  height:440px;
  max-width:520px
}
.hero-baseline {
  gap:13px;
  flex-wrap:wrap
}
.hero-baseline>span {
  font-size:8px
}
.hero-baseline p {
  font-size:10px
}
.hero-baseline a {
  display:none
}
.section {
  padding:65px 0
}
.section-heading {
  margin-bottom:32px
}
.split-heading,.server-layout,.control-grid {
  grid-template-columns:1fr;
  gap:25px
}
.split-heading>p {
  margin-top:0;
  max-width:500px
}
.server-details article:first-child {
  padding-top:0
}
.hardware-panel {
  min-height:360px
}
.hardware-drawing {
  max-width:420px;
  width:100%;
  align-self:center
}
.feature-grid {
  grid-template-columns:repeat(2,1fr)
}
.server-capabilities,.workspace-highlights {
  gap:22px
}
.workflow-grid {
  grid-template-columns:repeat(2,1fr);
  gap:30px
}
.section-heading h2,.control-grid h2,.closing-card h2 {
  font-size:37px
}
.window-indicator {
  display:none
}
.window-bar {
  padding:12px
}
.window-bottom {
  font-size:7px;
  padding:10px
}
.cta-section {
  padding-top:0
}
.footer__grid {
  grid-template-columns:repeat(3,1fr);
  gap:30px
}
.footer__brand {
  grid-column:1/-1
}
.footer__tagline {
  max-width:400px
}
.footer__bottom {
  flex-wrap:wrap;
  gap:5px
}
.control-copy .large-copy {
  font-size:21px
}

}

@media(max-width:440px) {
  .network-scene {
  height:370px
}
.scene-header {
  font-size:8px;
  inset:16px 14px auto
}
.scene-label {
  font-size:8px
}
.node {
  height:84px
}
.node strong {
  font-size:11px
}
.node span {
  font-size:7px
}
.server-core {
  padding:16px 18px
}
.server-core strong {
  font-size:15px
}
.workspace-node {
  width:218px;
  padding:12px
}
.scene-footer {
  font-size:7px;
  inset:auto 14px 14px
}
.feature-grid,.server-capabilities,.workspace-highlights {
  grid-template-columns:1fr
}
.feature-tile {
  padding:24px
}
.feature-icon {
  margin-bottom:17px
}
.workspace-highlights article {
  border-top:1px solid #30353b;
  padding-top:18px
}
.hero-actions {
  gap:9px
}
.hero-actions .btn {
  font-size:11px;
  padding:12px 14px;
  gap:12px
}
.hero-footnote {
  gap:15px;
  font-size:9px
}
.hero-lead {
  font-size:16px
}
.hero-baseline {
  display:block
}
.hero-baseline p {
  margin-top:5px
}
.window-bar .mono {
  font-size:7px
}
.window-bottom {
  flex-wrap:wrap
}
.footer__grid {
  gap:18px
}
.footer__heading {
  font-size:11px
}
.footer__links {
  font-size:10px
}
.eyebrow {
  font-size:9px
}
.closing-card {
  padding:45px 18px
}
.section-heading h2,.control-grid h2,.closing-card h2 {
  font-size:33px
}

}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto
}
*,*::before,*::after {
  animation:none!important;
  transition:none!important
}
.packet {
  stroke-dasharray:none;
  opacity:.15;
  filter:none
}
.wire-pulse {
  display:none
}

}


.scroll-to-top {
  visibility:hidden;
  opacity:0;
  pointer-events:none
}
.scroll-to-top--visible {
  visibility:visible;
  opacity:1;
  pointer-events:auto
}



/* Native Apple Silicon inference announcement. */
.mlx-highlight {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 40px;
  align-items: center;
  margin-top: 32px;
  padding: 30px;
  border: 1px solid #355774;
  border-radius: 10px;
  background: linear-gradient(120deg, #142a3c, #141b22);
}
.mlx-highlight .eyebrow { margin-bottom: 12px; }
.mlx-highlight h3 { font-size: 25px; font-weight: 550; letter-spacing: -.03em; line-height: 1.25; }
.mlx-highlight p { color: var(--text-secondary); font-size: 13px; line-height: 1.85; }
.mlx-highlight p + p { margin-top: 12px; }
@media (max-width: 760px) {
  .mlx-highlight { grid-template-columns: 1fr; gap: 20px; padding: 24px; }
}

/* ===================== 2026 refresh: tour, Plan mode, what's new, toolbelt ===================== */
.btn--play { gap: 12px; }
.play-dot { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #55b6ff22; border: 1px solid #55b6ff66; color: var(--accent); }
.play-dot svg { fill: currentColor; stroke: none; margin-left: 2px; }

/* Tour */
.tour-section { position: relative; background: radial-gradient(ellipse at 50% 0%, #0f2a40aa, transparent 62%), #0b0e12; }
.tour-heading { text-align: center; max-width: 780px; margin-inline: auto; }
.tour-heading .eyebrow { justify-content: center; }
.tour-player { display: grid; grid-template-columns: minmax(0, 2.35fr) minmax(250px, 1fr); gap: 22px; align-items: stretch; }
.tour-frame { position: relative; padding: 10px; border-radius: 14px; border: 1px solid #2f4a63; background: linear-gradient(160deg, #13202c, #0c1117);
  box-shadow: 0 30px 90px #0008, 0 0 70px #018af11a; }
.tour-frame video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; background: #05070a; object-fit: cover; }
.tour-corner { position: absolute; width: 22px; height: 22px; border: 0 solid #55b6ffaa; pointer-events: none; }
.tour-corner.tl { left: -1px; top: -1px; border-top-width: 2px; border-left-width: 2px; border-top-left-radius: 14px; }
.tour-corner.tr { right: -1px; top: -1px; border-top-width: 2px; border-right-width: 2px; border-top-right-radius: 14px; }
.tour-corner.bl { left: -1px; bottom: -1px; border-bottom-width: 2px; border-left-width: 2px; border-bottom-left-radius: 14px; }
.tour-corner.br { right: -1px; bottom: -1px; border-bottom-width: 2px; border-right-width: 2px; border-bottom-right-radius: 14px; }
.tour-chapters { display: flex; flex-direction: column; border: 1px solid #2a3947; border-radius: 12px; background: #11171d; padding: 16px 10px 10px; }
.tour-chapters-title { font-size: 9px; letter-spacing: .16em; color: #7f9cb5; padding: 0 10px 10px; border-bottom: 1px solid #ffffff0b; margin-bottom: 6px; }
.tour-chapters ol { list-style: none; display: grid; gap: 2px; }
.tour-chapters button { width: 100%; display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 7px; text-align: left; transition: background .15s; }
.tour-chapters button:hover { background: #55b6ff14; }
.chapter-num { font-size: 10px; color: var(--accent); }
.chapter-title { font-size: 12.5px; color: #d7dee6; }
.chapter-time { font-size: 10px; color: #7f8c99; }

/* Plan mode */
.plan-section { background: #0c1014; }
.plan-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.plan-steps article { border: 1px solid #2f3b46; border-radius: 10px; padding: 26px; background: linear-gradient(150deg, #171f28, #12171d); }
.plan-step-top { display: flex; align-items: center; justify-content: space-between; color: var(--accent); margin-bottom: 20px; }
.plan-step-top .mono { font-size: 9px; letter-spacing: .14em; color: #6fa6d2; }
.plan-steps h3 { font-size: 18px; font-weight: 550; letter-spacing: -.02em; margin-bottom: 10px; }
.plan-steps p { font-size: 12.5px; line-height: 1.85; color: #a4a9b0; }
.plan-visual { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; margin-top: 16px; }
.research-card, .phase-card { border: 1px solid #33506a; border-radius: 12px; overflow: hidden; background: #0f151c; box-shadow: 0 20px 60px #0006; }
.research-bar { display: flex; gap: 10px; align-items: center; padding: 12px 18px; border-bottom: 1px solid #22303d; background: #121a23; font-size: 10px; color: #a9bfd2; letter-spacing: .03em; }
.research-bar span { color: var(--accent); }
.research-body { padding: 16px 20px 20px; }
.research-row { display: grid; grid-template-columns: 1.4fr .8fr .9fr; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid #1d2833; font-size: 13px; }
.research-row b { font-weight: 550; }
.research-row .mono { font-size: 11px; color: #9fb0c0; }
.research-head { font-size: 9px; letter-spacing: .14em; color: #6d8195; padding-top: 0; }
.decision { justify-self: start; padding: 4px 10px; border-radius: 10px; font: 700 9px var(--font-mono); letter-spacing: .1em; }
.decision.adopt { color: #4bd697; background: #4bd6971a; border: 1px solid #4bd69755; }
.decision.consider { color: #e8b85a; background: #e8b85a1a; border: 1px solid #e8b85a55; }
.decision.reject { color: #ef6f7c; background: #ef6f7c1a; border: 1px solid #ef6f7c55; }
.research-note { margin-top: 14px; padding: 10px 12px; border-radius: 8px; background: #e8b85a12; border: 1px solid #e8b85a40; font-size: 12px; color: #e3d2ac; }
.research-note b { color: #e8b85a; font-weight: 600; }
.research-src { margin-top: 10px; font-size: 10px; color: #6d8195; }
.phase-track { list-style: none; padding: 18px 22px 22px; display: grid; gap: 4px; }
.phase-track li { display: flex; align-items: center; gap: 14px; }
.phase-track li > div { display: grid; }
.phase-track b { font-size: 14px; font-weight: 550; }
.phase-track li > div span { font-size: 11px; color: #8d9aa7; }
.phase-dot { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 600 13px var(--font-mono); border: 2px solid #3a4a5a; color: #8d9aa7; background: #0e141a; }
.phase-track li.is-approved .phase-dot { border-color: #4bd697; color: #4bd697; box-shadow: 0 0 16px #4bd69755; }
.phase-track li.is-active .phase-dot { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 16px #55b6ff66; }
.phase-track li.phase-gate-row { padding-left: 9px; height: 30px; gap: 20px; }
.phase-gate-mark { width: 14px; height: 14px; transform: rotate(45deg); border: 2px solid #e8b85a; border-radius: 3px; background: #231c0e; box-shadow: 0 0 10px #e8b85a55; }
.phase-gate-row .mono { font-size: 9px; letter-spacing: .16em; color: #e8b85a; }
.plan-footnote { margin-top: 22px; font-size: 12px; line-height: 1.9; color: #8d9aa7; }
.plan-footnote > span { margin-right: 8px; color: #559ccc; }
.plan-footnote code { font-family: var(--font-mono); font-size: 11px; color: #cfe3f3; background: #ffffff0d; padding: 1px 6px; border-radius: 4px; }

/* What's new + toolbelt */
.new-band { display: grid; grid-template-columns: .75fr 2fr; gap: 50px; align-items: start; padding: 34px; margin-bottom: 90px; border: 1px solid #2b4257; border-radius: 14px;
  background: radial-gradient(ellipse at 0% 0%, #15375366, transparent 60%), #10161c; scroll-margin-top: 110px; }
.new-band-head h2 { font-size: clamp(28px, 3vw, 38px); line-height: 1.15; letter-spacing: -.045em; font-weight: 550; }
.new-band-head em { font-style: normal; color: var(--accent); }
.new-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 22px; }
.new-tile { display: flex; gap: 14px; padding: 12px 4px; border-bottom: 1px solid #ffffff0a; }
.new-tile > svg { flex: none; color: var(--accent); margin-top: 3px; }
.new-tile h3 { font-size: 14px; font-weight: 550; margin-bottom: 4px; letter-spacing: -.01em; }
.new-tile p { font-size: 12px; color: #9ea8b3; line-height: 1.7; }
.feature-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 25px; }
.feature-top .feature-icon { margin-bottom: 0; }
.feature-tag { font-size: 8.5px; letter-spacing: .16em; color: #6f8fa9; border: 1px solid #2c3d4d; border-radius: 10px; padding: 3px 8px; }

/* Control + closing */
.control-points { list-style: none; display: grid; gap: 12px; margin: 4px 0 22px; }
.control-points li { font-size: 13px; color: #a4a9b0; line-height: 1.75; padding-left: 20px; position: relative; }
.control-points li::before { content: ''; position: absolute; left: 0; top: .72em; width: 7px; height: 7px; border-radius: 50%; background: #4bd697; box-shadow: 0 0 10px #4bd69788; }
.control-points b { color: #e3e8ef; font-weight: 550; }
.closing-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 1000px) {
  .tour-player { grid-template-columns: 1fr; }
  .tour-chapters ol { grid-template-columns: repeat(2, 1fr); }
  .plan-steps, .plan-visual { grid-template-columns: 1fr; }
  .new-band { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 760px) {
  .tour-chapters ol, .new-grid { grid-template-columns: 1fr; }
  .new-band { padding: 22px; margin-bottom: 60px; }
  .research-row { grid-template-columns: 1.2fr .8fr 1fr; font-size: 12px; }
  .tour-frame { padding: 6px; }
}