@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root { color-scheme: dark; --bg: #070b11; --panel: #0c141d; --line: #1d2c38; --text: #edf5fa; --muted: #8294a2; --cyan: #69e8f7; --blue: #497cff; --green: #56e6a1; --mono: 'Space Mono', monospace; --sans: 'Inter', sans-serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: var(--bg); color: var(--text); font-family: var(--sans); }
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; opacity: .18; background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px); background-size: 80px 80px; mask-image: linear-gradient(to bottom, #000, transparent 34%); }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.ambient { position: fixed; z-index: -1; width: 520px; height: 520px; border-radius: 50%; filter: blur(120px); opacity: .09; pointer-events: none; }
.ambient-one { top: 0; right: -180px; background: var(--cyan); }.ambient-two { top: 52vh; left: -250px; background: var(--blue); }
.site-header { position: relative; z-index: 10; width: min(1400px, calc(100% - 56px)); height: 78px; margin: auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 11px; width: max-content; font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: .17em; }.brand img { width: 27px; height: 27px; border-radius: 7px; }
nav { display: flex; gap: 36px; } nav a { color: #8ea0ad; font: 700 10px var(--mono); letter-spacing: .12em; transition: color .2s; } nav a:hover, nav a:focus-visible { color: var(--cyan); }
.availability { justify-self: end; display: flex; align-items: center; gap: 8px; color: #9eb0bc; font: 700 9px var(--mono); letter-spacing: .13em; }.availability i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); }
main { width: min(1400px, calc(100% - 56px)); margin: auto; }
.hero { min-height: 780px; padding: 94px 0 110px; display: grid; grid-template-columns: .82fr 1.18fr; gap: 70px; align-items: center; }
.eyebrow { margin: 0 0 24px; color: var(--cyan); font: 700 10px var(--mono); letter-spacing: .16em; }.eyebrow span { margin-right: 12px; padding: 6px 8px; border: 1px solid #2a5260; border-radius: 4px; background: #10232a; }
h1, h2, h3, p { text-wrap: pretty; }
h1 { margin: 0; font-size: clamp(52px, 5.4vw, 86px); font-weight: 500; line-height: .99; letter-spacing: -.055em; } h1 em, .closing-section h2 em { color: var(--cyan); font-style: normal; }
.hero-intro { max-width: 610px; margin: 30px 0 0; color: #91a4b2; font-size: 16px; line-height: 1.72; }
.hero-actions { margin-top: 38px; display: flex; gap: 12px; flex-wrap: wrap; }.button { min-height: 48px; padding: 0 19px; border: 1px solid var(--line); border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; gap: 34px; font: 700 10px var(--mono); letter-spacing: .09em; transition: transform .2s, border-color .2s, background .2s; }.button:hover { transform: translateY(-2px); }.button-primary { border-color: #56d8e8; background: var(--cyan); color: #061015; }.button-quiet { background: #0b121a; color: #9eb0bd; }
.protocol-list { margin: 34px 0 0; padding: 0; display: flex; gap: 20px; flex-wrap: wrap; list-style: none; }.protocol-list li { color: #607583; font: 700 9px var(--mono); letter-spacing: .1em; }.protocol-list li::before { content: '/'; margin-right: 7px; color: #315261; }
.product-frame { position: relative; min-width: 680px; border: 1px solid #2d414e; border-radius: 10px; background: #081018; box-shadow: 0 42px 100px #000a, 0 0 80px #2bdaf00b; overflow: hidden; transform: perspective(1500px) rotateY(-3deg) rotateX(1deg); }
.product-frame::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 1px #ffffff0a; }
.frame-topbar { height: 45px; padding: 0 13px; border-bottom: 1px solid #20303c; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }.mini-brand { display: flex; align-items: center; gap: 7px; color: #cddce6; font: 700 7px var(--mono); letter-spacing: .15em; }.mini-brand img { width: 18px; height: 18px; border-radius: 5px; }.frame-tabs { display: flex; gap: 22px; color: #4e6373; font: 700 6px var(--mono); letter-spacing: .1em; }.frame-tabs b { color: var(--cyan); }.frame-status { justify-self: end; display: flex; align-items: center; gap: 7px; }.frame-status i { width: 5px; height: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 7px var(--green); }.frame-status i:nth-child(2) { border: 1px solid var(--cyan); background: transparent; box-shadow: none; }.frame-status button { margin-left: 4px; padding: 7px 8px; border: 1px solid #3a966e; border-radius: 4px; background: #0d211a; color: #58dd9b; font: 700 6px var(--mono); letter-spacing: .08em; }
.frame-workspace { min-height: 395px; display: grid; grid-template-columns: 180px 1fr; }.frame-sidebar { padding: 18px 13px; border-right: 1px solid #1d2c37; background: #0a121a; }.micro-label { color: #537080; font: 700 6px var(--mono); letter-spacing: .13em; }.frame-sidebar > strong { display: block; margin-top: 5px; font-size: 12px; }.metric-grid { margin: 14px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }.metric-grid span { padding: 8px; border: 1px solid #1e303c; border-radius: 4px; color: #506777; font: 700 5px var(--mono); }.metric-grid b { display: block; color: #d9e6ee; font: 600 13px var(--sans); }.layer-card { margin-top: 5px; padding: 9px; border: 1px solid #1e303c; border-radius: 4px; display: grid; grid-template-columns: 5px 1fr auto; gap: 8px; align-items: center; }.layer-card.active { border-color: #2f6c78; background: #0f2229; }.layer-card > i { width: 5px; height: 25px; border-radius: 3px; background: linear-gradient(#69e8f7, #456eff); }.layer-card span { display: grid; gap: 2px; }.layer-card b { font-size: 7px; }.layer-card small { color: #526978; font-size: 5px; }.layer-card em { color: #78dcec; font: normal 6px var(--mono); }
.stage-canvas { position: relative; min-height: 395px; overflow: hidden; background: radial-gradient(circle at 60% 48%, #14293a 0, #09111a 48%, #060b11 78%); }.stage-grid { position: absolute; width: 160%; height: 115%; left: -30%; top: 25%; background-image: linear-gradient(#183044 1px, transparent 1px), linear-gradient(90deg, #183044 1px, transparent 1px); background-size: 36px 36px; transform: perspective(380px) rotateX(62deg); opacity: .6; }.tube { position: absolute; width: 10px; height: 125px; border-radius: 9px; background: linear-gradient(#70ecfa, #72a7ff 42%, #9d72ff); box-shadow: 0 0 12px #69e8f799, 0 0 30px #5a88ff44; transform: rotate(6deg); }.tube-1 { left: 23%; top: 34%; }.tube-2 { left: 33%; top: 30%; }.tube-3 { left: 43%; top: 27%; }.tube-4 { left: 53%; top: 25%; }.tube-5 { left: 63%; top: 27%; }.tube-6 { left: 73%; top: 30%; }.tube-7 { left: 83%; top: 35%; }.tube-8 { left: 93%; top: 41%; }.axis-label { position: absolute; right: 13px; bottom: 12px; color: #446173; font: 700 6px var(--mono); letter-spacing: .12em; }
.frame-controls { min-height: 82px; padding: 13px 16px; border-top: 1px solid #21313c; display: grid; grid-template-columns: 90px 100px 90px 1fr 1fr; gap: 18px; align-items: center; background: #0b141c; }.frame-controls > strong { font-size: 9px; }.palette { display: flex; }.palette i { width: 19px; height: 19px; margin-left: -3px; border: 2px solid #0b141c; border-radius: 50%; }.palette i:nth-child(1) { background: #69e8f7; }.palette i:nth-child(2) { background: #4984ff; }.palette i:nth-child(3) { background: #975eff; }.palette i:nth-child(4) { background: #ff63be; }.control { display: grid; grid-template-columns: auto 1fr auto; gap: 7px; align-items: center; color: #627787; font: 700 5px var(--mono); }.control > b { height: 3px; border-radius: 2px; background: #1f303b; overflow: hidden; }.control > b i { height: 100%; display: block; background: var(--cyan); }.control em { color: #92a7b4; font-style: normal; }
section:not(.hero) { padding: 120px 0; border-top: 1px solid var(--line); }.section-heading { display: grid; grid-template-columns: .65fr 1fr .8fr; gap: 45px; align-items: start; }.section-heading h2, .workflow-heading h2, .network-copy h2 { margin: 0; font-size: clamp(38px, 4.4vw, 64px); font-weight: 500; line-height: 1.05; letter-spacing: -.045em; }.section-heading > p:last-child, .workflow-heading > p, .network-copy > p:not(.eyebrow) { margin: 8px 0 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.feature-grid { margin-top: 70px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.feature-card { position: relative; min-height: 390px; padding: 30px; border: 1px solid var(--line); border-radius: 7px; background: linear-gradient(145deg, #0d161f, #090f16); overflow: hidden; }.feature-wide { grid-column: 1 / -1; min-height: 340px; display: grid; grid-template-columns: 60px .85fr 1.15fr; gap: 25px; align-items: center; }.feature-number { color: #425a6a; font: 700 9px var(--mono); }.feature-card p { margin: 0 0 16px; color: var(--cyan); font: 700 8px var(--mono); letter-spacing: .14em; }.feature-card h3 { max-width: 430px; margin: 0 0 15px; font-size: 27px; font-weight: 500; letter-spacing: -.03em; }.feature-card div > span, .feature-card > span:not(.feature-number) { max-width: 520px; color: var(--muted); font-size: 13px; line-height: 1.65; }.coordinate-visual { position: relative; justify-self: end; width: 90%; height: 250px; border: 1px solid #1c3342; border-radius: 50%; background: radial-gradient(circle, #244c6266, transparent 58%); transform: rotateX(64deg) rotateZ(-22deg); }.coordinate-visual::before, .coordinate-visual::after { content: ''; position: absolute; inset: 50% 0 auto; height: 1px; background: #39738a; }.coordinate-visual::after { transform: rotate(90deg); }.coordinate-visual i { position: absolute; width: 7px; height: 80px; border-radius: 5px; background: var(--cyan); box-shadow: 0 0 18px var(--cyan); transform: rotateX(-64deg); }.coordinate-visual i:nth-child(1) { left: 28%; top: 20%; }.coordinate-visual i:nth-child(2) { left: 52%; top: 34%; background: #718cff; }.coordinate-visual i:nth-child(3) { left: 72%; top: 14%; }.coordinate-visual b { position: absolute; color: #456c7c; font: 700 8px var(--mono); }.coordinate-visual b:nth-of-type(1) { right: 8px; top: 48%; }.coordinate-visual b:nth-of-type(2) { left: 50%; top: 7px; }.coordinate-visual b:nth-of-type(3) { left: 8px; top: 48%; }
.effect-strips { position: absolute; inset: auto 30px 28px; display: grid; gap: 7px; }.effect-strips i { height: 18px; border-radius: 3px; background: linear-gradient(90deg, #14232e, #69e8f7, #3d6eff, #14232e); }.effect-strips i:nth-child(2) { background: repeating-linear-gradient(90deg, #152630 0 20px, #8e62ff 21px 24px); }.effect-strips i:nth-child(3) { background: linear-gradient(90deg, #ff5b96, #ffcd68, #69e8f7); filter: blur(2px); opacity: .8; }
.device-row { position: absolute; right: 30px; bottom: 30px; left: 30px; height: 92px; display: flex; align-items: end; justify-content: center; gap: 18px; }.device-row i { border: 1px solid #315063; background: #0a1118; box-shadow: inset 0 0 18px #3dcbe911; }.device-row i:nth-child(1) { width: 120px; height: 76px; border-radius: 5px; }.device-row i:nth-child(2) { width: 48px; height: 66px; border-radius: 6px; }.device-row i:nth-child(3) { width: 70px; height: 88px; border-radius: 7px; }
.workflow-heading { display: grid; grid-template-columns: 1.2fr .8fr; gap: 80px; }.workflow-list { margin: 70px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }.workflow-list li { min-height: 118px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 80px .5fr 1fr; gap: 25px; align-items: center; transition: background .2s, padding .2s; }.workflow-list li:hover { padding: 0 18px; background: #0b141c; }.workflow-list span { color: #486274; font: 700 9px var(--mono); }.workflow-list b { font: 700 12px var(--mono); letter-spacing: .13em; }.workflow-list p { max-width: 580px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.network-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: 100px; align-items: center; }.network-badges { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 7px; }.network-badges span { padding: 7px 9px; border: 1px solid #29404f; border-radius: 4px; color: #7290a0; font: 700 7px var(--mono); letter-spacing: .1em; }.network-panel { padding: 23px; border: 1px solid #29404f; border-radius: 8px; background: #0a121a; box-shadow: 0 30px 80px #0007; }.network-panel-head { padding-bottom: 18px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; color: #688092; font: 700 8px var(--mono); letter-spacing: .1em; }.network-panel-head b { color: var(--green); }.network-panel-head i { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }.network-route { margin-top: 22px; padding: 14px; border: 1px solid #243945; border-radius: 5px; display: grid; grid-template-columns: 9px 1fr auto; gap: 12px; align-items: center; }.network-route div { display: grid; gap: 3px; }.network-route b { font-size: 11px; }.network-route small { color: #5f7787; font: 7px var(--mono); }.network-route em { color: #668493; font: normal 7px var(--mono); }.node-light { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }.controller .node-light { background: var(--green); box-shadow: 0 0 10px var(--green); }.controller em { color: var(--green); }.route-line { height: 66px; display: flex; align-items: center; justify-content: space-around; background: linear-gradient(90deg, transparent 8%, #234351 8% 92%, transparent 92%) center/100% 1px no-repeat; }.route-line i { width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }.health-stats { margin-top: 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }.health-stats span { padding: 12px; border: 1px solid #20333f; border-radius: 4px; color: #526b7b; font: 700 6px var(--mono); }.health-stats b { display: block; margin-bottom: 2px; color: #e0ecf3; font: 500 18px var(--sans); }
.closing-section { position: relative; min-height: 610px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }.closing-section h2 { margin: 0; font-size: clamp(43px, 5.7vw, 80px); font-weight: 500; line-height: 1.04; letter-spacing: -.055em; }.closing-section > p:not(.eyebrow) { margin: 26px 0 32px; color: var(--muted); }.closing-beam { position: absolute; z-index: -1; width: 620px; height: 620px; border-radius: 50%; border: 1px solid #1f3946; box-shadow: 0 0 100px #33dff215, inset 0 0 100px #326cf012; }.closing-beam::after { content: ''; position: absolute; width: 8px; height: 420px; left: 50%; top: 100px; border-radius: 10px; background: linear-gradient(var(--cyan), #795dff); box-shadow: 0 0 30px var(--cyan); transform: rotate(61deg); }
footer { width: min(1400px, calc(100% - 56px)); min-height: 100px; margin: auto; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }.footer .brand { justify-self: start; } footer p { color: #4c6272; font: 700 7px var(--mono); letter-spacing: .12em; } footer p:last-child { justify-self: end; }
*:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
@media (prefers-reduced-motion: no-preference) { .tube { animation: tube-pulse 4s ease-in-out infinite alternate; }.tube:nth-of-type(even) { animation-delay: -2s; } @keyframes tube-pulse { to { filter: hue-rotate(55deg); opacity: .78; } } }
@media (max-width: 1100px) { .hero { grid-template-columns: 1fr; }.product-frame { min-width: 0; transform: none; }.section-heading { grid-template-columns: 1fr 1fr; }.section-heading > p:last-child { grid-column: 2; }.network-section { gap: 45px; } }
@media (max-width: 760px) { .site-header, main, footer { width: min(100% - 30px, 1400px); }.site-header { grid-template-columns: 1fr auto; }.site-header nav { display: none; }.hero { min-height: auto; padding: 70px 0 80px; gap: 50px; }.hero-actions { align-items: stretch; flex-direction: column; }.button { width: 100%; }.product-frame { overflow: hidden; }.frame-tabs, .frame-status i { display: none; }.frame-topbar { grid-template-columns: 1fr auto; }.frame-workspace { grid-template-columns: 1fr; }.frame-sidebar { display: none; }.stage-canvas { min-height: 290px; }.tube { width: 8px; height: 90px; }.frame-controls { grid-template-columns: 1fr 1fr; }.frame-controls > :nth-child(-n+3) { display: none; } section:not(.hero) { padding: 80px 0; }.section-heading, .workflow-heading, .network-section { grid-template-columns: 1fr; gap: 26px; }.section-heading > p:last-child { grid-column: auto; }.feature-grid { grid-template-columns: 1fr; margin-top: 45px; }.feature-wide { grid-column: auto; min-height: 500px; grid-template-columns: 1fr; align-content: start; }.coordinate-visual { position: absolute; right: -30px; bottom: 0; width: 105%; }.feature-card { min-height: 380px; }.workflow-list li { padding: 22px 0; grid-template-columns: 45px 1fr; }.workflow-list li p { grid-column: 2; margin: 0; }.workflow-list li:hover { padding: 22px 10px; }.network-section { gap: 48px; }.network-panel { padding: 14px; }.closing-section { min-height: 540px; } footer { padding: 30px 0; grid-template-columns: 1fr; gap: 15px; } footer p, footer p:last-child { justify-self: start; margin: 0; } }
.download-section { display: grid; grid-template-columns: 1fr .9fr; gap: 80px; align-items: center; }
.download-copy h2 { margin: 0; font-size: clamp(38px, 4.4vw, 64px); font-weight: 500; line-height: 1.05; letter-spacing: -.045em; }
.download-copy > p:not(.eyebrow):not(.download-note) { margin: 14px 0 0; max-width: 480px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.download-facts { margin: 28px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.download-facts li { color: #7f95a4; font: 700 9px var(--mono); letter-spacing: .1em; }
.download-facts b { display: inline-block; min-width: 78px; color: var(--cyan); }
.download-note { margin: 26px 0 0; max-width: 460px; color: #7a8c99; font-size: 12px; line-height: 1.6; }
.download-form { padding: 30px; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(160deg, #0d161f, #090f16); }
.download-form label { display: block; color: #6d8797; font: 700 9px var(--mono); letter-spacing: .13em; }
.download-form input { width: 100%; margin-top: 9px; padding: 14px; border: 1px solid #23384a; border-radius: 5px; background: #060c12; color: var(--text); font: 15px var(--sans); }
.download-form input:focus-visible { border-color: var(--cyan); outline: none; }
.download-form button { width: 100%; margin-top: 14px; min-height: 50px; padding: 0 18px; border: 1px solid #56d8e8; border-radius: 5px; background: var(--cyan); color: #061015; font: 700 10px var(--mono); letter-spacing: .1em; display: inline-flex; align-items: center; justify-content: center; gap: 12px; cursor: pointer; transition: transform .2s, opacity .2s; }
.download-form button:hover:not(:disabled) { transform: translateY(-2px); }
.download-form button:disabled { opacity: .55; cursor: progress; }
/* Off-screen rather than display:none — some bots skip hidden fields. */
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { min-height: 18px; margin: 12px 0 0; font: 700 10px var(--mono); letter-spacing: .06em; }
.form-status.pending { color: #8fa3b1; } .form-status.ok { color: var(--green); } .form-status.error { color: #ff8f6b; }
.form-fine { margin: 10px 0 0; color: #5d7280; font-size: 11px; line-height: 1.55; }
@media (max-width: 1100px) { .download-section { grid-template-columns: 1fr; gap: 44px; } }
@media (max-width: 760px) { .download-form { padding: 20px; } .site-header nav { display: none; } }

/* Three-dimensional ring.
   Real perspective from CSS transforms rather than a WebGL bundle — the site
   has no build step and this keeps it that way. Scroll drives rotation and a
   blackout at each edge, so the rig fades up out of darkness and back into it. */
/* Full bleed: main is capped at 1400px, so break out to the viewport edges.
   The rig should feel like a room, not a panel. */
.ring-section { position: relative; min-height: 190dvh; width: 100vw; margin-left: calc(50% - 50vw);
  border-top: 1px solid var(--line); }
.ring-stage { position: sticky; top: 0; height: 100dvh; display: grid; place-items: center; overflow: hidden;
  /* Only a few degrees off axis. The eye sits just above the ring's plane, so
     it reads as a rig hanging at head height rather than a plan view. */
  perspective: 900px; perspective-origin: 50% 47%;
  background: radial-gradient(ellipse at 50% 52%, #0d1a26 0, #070d14 45%, #05080d 75%); }
/* Screen-filling wash, so the rig lights the room rather than sitting in it. */
.ring-glow { position: absolute; inset: -20%; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at 46% 46%, #2ec8e64d 0, #4a6bff26 32%, transparent 64%);
  transition: opacity .18s linear; }
.ring-floor { position: absolute; width: 200%; height: 150%; top: 52%; left: -50%;
  background-image: linear-gradient(#12283a 1px, transparent 1px), linear-gradient(90deg, #12283a 1px, transparent 1px);
  background-size: 64px 64px; transform: rotateX(74deg); transform-origin: 50% 0;
  mask-image: radial-gradient(ellipse at 50% 12%, #000 0, transparent 62%); opacity: .5; }
.ring { position: relative; width: 1px; height: 1px; transform-style: preserve-3d;
  /* Set from script: --spin, --tilt, --lift, --glow. */
  transform: translateX(var(--shift, 0px)) translateY(var(--lift, 0px)) scale(var(--scale, 1))
             rotateX(var(--tilt, 24deg)) rotateY(var(--spin, 0deg)); }
/* Height and vertical centring are set per tube from the arc it occupies. */
.ring b { position: absolute; display: block; width: 10px; margin-left: -5px; border-radius: 6px;
  background: linear-gradient(var(--tube-a, #70ecfa), var(--tube-b, #7b6bff));
  box-shadow: 0 0 14px var(--tube-a, #70ecfa), 0 0 42px color-mix(in srgb, var(--tube-b, #7b6bff) 55%, transparent);
  opacity: var(--glow, 1); transition: opacity .12s linear; }
/* The copy rises into place against the rig rather than sitting still — the
   two moving at different rates is what sells the depth. */
.ring-copy { position: absolute; z-index: 2; left: 50%; bottom: 9dvh;
  transform: translateX(-50%) translateY(var(--copy-y, 0px));
  opacity: var(--copy-o, 1); width: min(620px, calc(100% - 56px)); text-align: center;
  /* The rig passes behind the words, so give them something to sit on. */
  text-shadow: 0 2px 26px #05080dcc; will-change: transform, opacity; }
.ring-copy h2 { margin: 0; font-size: clamp(32px, 3.8vw, 54px); font-weight: 500; line-height: 1.06; letter-spacing: -.045em; }
.ring-copy h2 em { color: var(--cyan); font-style: normal; }
.ring-copy > p:not(.eyebrow) { margin: 16px 0 0; color: var(--muted); font-size: 14px; line-height: 1.7; }

@media (max-width: 760px) {
  .ring-section { min-height: 165dvh; }
  .ring b { width: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .ring-section { min-height: auto; }
  .ring-stage { position: relative; height: 78dvh; }
  .ring b { opacity: .9 !important; }
}
.download-ready { padding: 30px; border: 1px solid #2c6f78; border-radius: 8px; background: linear-gradient(160deg, #0d1c22, #090f16); display: grid; gap: 10px; }
.download-ready .eyebrow { margin: 0 0 4px; }
.download-ready .button { width: 100%; }
.download-ready .form-fine { margin-top: 6px; }

/* Timelines — looping sequences, and the scheduler windows that run them. */
.timeline-section { display: grid; grid-template-columns: 1fr .95fr; gap: 90px; align-items: center; }
.timeline-copy h2 { margin: 0; font-size: clamp(38px, 4.4vw, 64px); font-weight: 500; line-height: 1.05; letter-spacing: -.045em; }
.timeline-copy h2 em { color: var(--cyan); font-style: normal; }
.timeline-copy > p:not(.eyebrow) { max-width: 560px; margin: 22px 0 0; color: var(--muted); font-size: 14px; line-height: 1.72; }
.timeline-window { margin-top: 32px; padding: 20px 22px; border: 1px solid #2a404f; border-left: 2px solid var(--cyan); border-radius: 6px; background: #0a131b; }
.timeline-window b { display: block; margin-bottom: 9px; color: var(--cyan); font: 700 8px var(--mono); letter-spacing: .14em; }
.timeline-window span { color: #8ea2b0; font-size: 13px; line-height: 1.65; }
.timeline-window em { color: #cfe0ea; font-style: normal; }
.timeline-visual { padding: 22px; border: 1px solid #29404f; border-radius: 8px; background: #0a121a; box-shadow: 0 30px 80px #0007; }
.timeline-head { padding-bottom: 16px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; color: #688092; font: 700 8px var(--mono); letter-spacing: .1em; }
.timeline-head b { color: var(--cyan); }
.timeline-steps { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.timeline-steps li { padding: 13px; border: 1px solid #223743; border-radius: 5px; display: grid; grid-template-columns: 5px 1fr auto; gap: 12px; align-items: center; }
.timeline-steps li > i { width: 5px; height: 30px; border-radius: 3px; background: linear-gradient(#69e8f7, #456eff); }
.timeline-steps li:nth-child(2) > i { background: linear-gradient(#4984ff, #975eff); }
.timeline-steps li:nth-child(3) > i { background: linear-gradient(#ffcd68, #ff5b96); }
.timeline-steps li:nth-child(4) > i { background: linear-gradient(#ffffff, #69e8f7); }
.timeline-steps span { display: grid; gap: 3px; }
.timeline-steps b { font-size: 11px; }
.timeline-steps small { color: #5f7787; font: 7px var(--mono); letter-spacing: .06em; }
.timeline-steps em { color: #5a7382; font: normal 7px var(--mono); letter-spacing: .1em; }
.timeline-steps li.running { border-color: #2f6c78; background: #0f2229; }
.timeline-steps li.running em { color: var(--cyan); }
.timeline-track { height: 3px; margin-top: 16px; border-radius: 2px; background: #1b2b36; overflow: hidden; }
.timeline-track i { display: block; width: 22%; height: 100%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.timeline-foot { margin-top: 10px; display: flex; justify-content: space-between; color: #4c6272; font: 700 6px var(--mono); letter-spacing: .12em; }

/* Show control — the operator view. */
.playback-visual { justify-self: end; width: 100%; max-width: 340px; padding: 18px; border: 1px solid #29404f; border-radius: 9px; background: #0a121a; display: grid; gap: 12px; }
.playback-head { display: flex; justify-content: space-between; color: #587184; font: 700 6px var(--mono); letter-spacing: .13em; }
.playback-head b { color: #cddce6; }
.playback-looks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.playback-looks i { height: 42px; border: 1px solid #223743; border-radius: 5px; background: #0d1720; }
.playback-looks i.on { border-color: #2f6c78; background: linear-gradient(140deg, #17303a, #0f2229); box-shadow: inset 0 0 18px #3dcbe920; }
.playback-run { padding: 11px; border: 1px solid #223743; border-radius: 5px; display: flex; justify-content: space-between; align-items: center; color: #6b8496; font: 700 6px var(--mono); letter-spacing: .1em; }
.playback-run b { color: var(--cyan); }
.playback-fader { display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: center; color: #587184; font: 700 6px var(--mono); letter-spacing: .1em; }
.playback-fader > b { height: 5px; border-radius: 3px; background: #1b2b36; overflow: hidden; }
.playback-fader > b i { display: block; width: 74%; height: 100%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.playback-blackout { padding: 11px; border: 1px solid #4b2830; border-radius: 5px; background: #170f13; color: #bd6974; font: 700 7px var(--mono); letter-spacing: .13em; text-align: center; }

/* Network additions. */
.network-points { margin: 26px 0 0; padding: 0; list-style: none; display: grid; gap: 13px; }
.network-points li { max-width: 520px; color: var(--muted); font-size: 13px; line-height: 1.65; }
.network-points b { color: #cfe0ea; font-weight: 600; }
.network-open { margin-top: 14px; padding: 15px; border: 1px solid #243945; border-radius: 5px; display: grid; gap: 8px; }
.network-open > span { color: #587184; font: 700 6px var(--mono); letter-spacing: .13em; }
.network-open b { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 11px; border: 1px solid #1f313d; border-radius: 4px; background: #060c12; color: #9fbecc; font: 400 9px var(--mono); }
.network-open i { color: var(--cyan); font: 700 6px var(--mono); font-style: normal; letter-spacing: .12em; }

@media (max-width: 1100px) { .timeline-section { gap: 45px; } }
@media (max-width: 760px) { .timeline-section { grid-template-columns: 1fr; gap: 34px; } .playback-visual { justify-self: stretch; max-width: none; } }

/* Scroll behaviour — the timeline and the panels that play as they pass. */
.timeline-visual { transform: translate3d(0, var(--tl-y, 0px), 0); will-change: transform; }
.timeline-steps li { transform: translate3d(0, var(--step-y, 0px), 0); transition: opacity .3s, border-color .3s, background .3s; }
.timeline-steps li.done { opacity: .45; }
.timeline-steps li.done em { color: #43596a; }
.timeline-track i { width: var(--play, 22%); transition: none; }
.playback-looks i, .route-line i { transition: border-color .3s, background .3s; }

/* Sections arrive. Short, quick, once — and only when scripting is on. */
.js .reveal { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .3, 1); }
.js .reveal.in { opacity: 1; transform: none; }
/* The timeline panel owns its own transform, so it fades without moving. */
.js .timeline-visual.reveal { transform: translate3d(0, var(--tl-y, 0px), 0); }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .timeline-visual, .timeline-steps li { transform: none; }
}