:root {
  --bg: #050a12;
  --bg-2: #07111f;
  --text: #f5f8ff;
  --muted: #99abc1;
  --muted-2: #71859d;
  --blue: #77c6ff;
  --blue-2: #00a8ff;
  --cyan: #3ff2ff;
  --mint: #71ffd1;
  --green: #67ff5f;
  --line: rgba(140,190,255,.16);
  --line-2: rgba(140,190,255,.3);
  --panel: rgba(7,17,31,.72);
  --panel-2: rgba(9,22,38,.82);
  --shadow: 0 36px 110px rgba(0,0,0,.5);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(1000px 720px at 82% 8%, rgba(0,130,255,.12), transparent 65%),
    radial-gradient(980px 680px at 14% 58%, rgba(38,255,180,.07), transparent 64%),
    linear-gradient(180deg, #040811 0%, #06101d 42%, #040910 100%);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
::selection { background: rgba(113,255,209,.26); color: #fff; }

#ambientCanvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .28; z-index: 0; }
.page-noise { position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: .045; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 120; background: transparent; }
.scroll-progress span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--blue-2), var(--cyan), var(--green)); box-shadow: 0 0 18px rgba(63,242,255,.7); }

.global-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 66px; border-bottom: 1px solid rgba(255,255,255,.06); background: rgba(2,7,14,.7); backdrop-filter: blur(22px) saturate(140%); }
.global-header__inner { max-width: 1240px; height: 100%; margin: auto; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand img { width: 120px; height: auto; display: block; }
.global-nav { display: flex; align-items: center; gap: 28px; font-size: 13px; font-weight: 600; color: #c8d5e5; }
.global-nav a { transition: color .25s ease, opacity .25s ease; }
.global-nav a:hover { color: #fff; }
.nav-buy { padding: 9px 16px; border: 1px solid rgba(113,255,209,.42); border-radius: 999px; color: #dcfff4 !important; background: rgba(113,255,209,.06); }
.menu-button { display: none; width: 42px; height: 42px; background: transparent; border: 0; padding: 0; position: relative; }
.menu-button span { position: absolute; left: 10px; right: 10px; height: 1px; background: #fff; transition: transform .25s ease; }
.menu-button span:first-child { top: 17px; } .menu-button span:last-child { top: 24px; }

.product-nav { position: fixed; z-index: 90; top: 66px; left: 0; right: 0; height: 50px; background: rgba(4,10,18,.76); border-bottom: 1px solid rgba(255,255,255,.055); backdrop-filter: blur(20px); transition: transform .35s ease; }
.product-nav__inner { max-width: 1240px; margin: auto; height: 100%; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; }
.product-name { font-size: 14px; font-weight: 700; letter-spacing: -.02em; }
.product-name strong { color: var(--mint); }
.product-nav__links { display: flex; align-items: center; gap: 22px; color: #a9b8ca; font-size: 12px; font-weight: 600; }
.product-nav__links a:hover { color: #fff; }
.product-nav__cta { background: #f4f8ff; color: #07111f !important; padding: 7px 13px; border-radius: 999px; }

main, footer { position: relative; z-index: 2; }
.section-full { position: relative; min-height: 100svh; padding: 156px max(28px, calc((100vw - 1240px)/2)) 110px; display: grid; align-items: center; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,.055); }
.eyebrow { margin: 0 0 18px; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #89a2bc; }
.gradient-text { color: transparent; background: linear-gradient(94deg, #84d5ff 0%, #56e9ff 42%, #79ff9b 100%); -webkit-background-clip: text; background-clip: text; text-shadow: 0 0 36px rgba(80,220,255,.08); }
.reveal { opacity: 0; transform: translateY(30px); filter: blur(8px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1), filter .9s ease; }
.reveal[data-reveal="scale"] { transform: scale(.94) translateY(12px); }
.reveal.is-visible { opacity: 1; transform: none; filter: none; }

.hero { grid-template-columns: minmax(0, .88fr) minmax(420px, 1.12fr); gap: clamp(20px, 5vw, 80px); background: radial-gradient(ellipse at 70% 48%, rgba(0,124,255,.14), transparent 42%); }
.hero::before { content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 70%, rgba(0,0,0,.28)); pointer-events:none; }
.hero-copy { position: relative; z-index: 3; max-width: 650px; }
.hero h1 { margin: 0; font-size: clamp(60px, 7.6vw, 118px); line-height: .86; letter-spacing: -.065em; font-weight: 800; }
.hero h1 span { display: inline-block; margin-top: .12em; color: transparent; background: linear-gradient(94deg, #dff7ff 0%, #77d8ff 46%, #7aff79 105%); -webkit-background-clip:text; background-clip:text; }
.hero-lead { max-width: 560px; margin: 30px 0 0; font-size: clamp(21px, 2.3vw, 34px); line-height: 1.25; letter-spacing: -.035em; color: #c3d1e2; }
.hero-status { margin: 24px 0 0; color: var(--mint); font-size: 16px; font-weight: 700; }
.hero-product { position: relative; z-index: 2; display: grid; place-items: center; perspective: 1200px; }
.product-icon { width: min(560px, 46vw); border-radius: 22.5%; box-shadow: 0 56px 140px rgba(0,66,145,.32), 0 0 70px rgba(0,205,255,.16); transform-style: preserve-3d; transition: transform .18s ease-out; will-change: transform; }
.icon-aura { position: absolute; width: 72%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(0,182,255,.25), rgba(113,255,209,.06) 40%, transparent 70%); filter: blur(22px); animation: breathe 5s ease-in-out infinite; }
.hero-caption { position: absolute; right: max(28px, calc((100vw - 1240px)/2)); bottom: 56px; display: flex; gap: 20px; flex-wrap: wrap; color: #7e94ac; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }
.hero-caption span::after { content:"·"; margin-left:20px; color:#35516d; }.hero-caption span:last-child::after{display:none}
.hero-orbit { position:absolute; border:1px solid rgba(74,205,255,.15); border-radius:50%; pointer-events:none; }
.hero-orbit--one { width: 900px; height: 250px; right:-180px; bottom:90px; transform: rotate(-10deg); box-shadow: inset 0 0 35px rgba(0,190,255,.05); }
.hero-orbit--two { width: 1100px; height: 300px; right:-280px; bottom:50px; transform: rotate(7deg); border-color:rgba(113,255,209,.08); }
.scroll-cue { position:absolute; left:50%; bottom:28px; width:30px; height:46px; border:1px solid rgba(255,255,255,.16); border-radius:999px; transform:translateX(-50%); }
.scroll-cue span { position:absolute; width:4px; height:4px; border-radius:50%; background:#fff; left:12px; top:10px; animation: scrollCue 1.8s ease-in-out infinite; }

.ui-section {
  grid-template-columns: .75fr 1.25fr;
  gap: 80px;
  background:
    radial-gradient(circle at 75% 45%, rgba(0, 138, 255, .10), transparent 38%),
    radial-gradient(circle at 22% 70%, rgba(113, 255, 209, .045), transparent 34%);
}
.ui-copy { max-width: 650px; }
.ui-copy h2 {
  margin: 0;
  font-size: clamp(64px, 7.2vw, 112px);
  line-height: .9;
  letter-spacing: -.065em;
}
.ui-lead {
  margin: 30px 0 0;
  font-size: clamp(20px, 2.1vw, 31px);
  line-height: 1.38;
  letter-spacing: -.025em;
  color: #d4e1ef;
}
.ui-body {
  margin: 20px 0 0;
  max-width: 620px;
  color: #91a5ba;
  font-size: 17px;
  line-height: 1.55;
}
.ui-priority {
  margin-top: 38px;
  display: grid;
  gap: 8px;
}
.ui-priority span {
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #71859d;
}
.ui-priority strong {
  font-size: clamp(30px, 3.4vw, 52px);
  line-height: 1.02;
  letter-spacing: -.05em;
}
.ui-priority strong:nth-of-type(1) { color: #cceeff; }
.ui-priority strong:nth-of-type(2) { color: var(--mint); }
.ui-priority b {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #9fb2c5;
}

.statement-section { grid-template-columns: .78fr 1.22fr; gap: clamp(30px,6vw,100px); }
.statement-wrap { position:relative; z-index:3; max-width:600px; }
.mega-title { margin:0; font-size:clamp(72px,8.5vw,138px); line-height:.88; letter-spacing:-.07em; font-weight:800; }
.statement-copy { margin:32px 0 0; font-size:clamp(20px,2.1vw,30px); line-height:1.35; letter-spacing:-.025em; color:#afc0d3; }

.can-bridge-copy {
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid rgba(140,190,255,.14);
  max-width: 560px;
}
.can-bridge-kicker {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #7f96ad;
}
.can-bridge-copy h3 {
  margin: 0;
  font-size: clamp(34px, 4vw, 58px);
  line-height: .98;
  letter-spacing: -.055em;
}
.can-bridge-copy h3 span { color: var(--mint); }
.can-bridge-copy > p:last-child {
  margin: 18px 0 0;
  max-width: 540px;
  color: #91a7bd;
  font-size: 16px;
  line-height: 1.58;
}

.section-glow { position:absolute; width:700px; aspect-ratio:1; border-radius:50%; filter:blur(80px); opacity:.16; pointer-events:none; }
.section-glow--blue { right:-190px; top:10%; background:#006eff; }
.can-console { position:relative; overflow:hidden; border:1px solid rgba(128,205,255,.18); border-radius:28px; background:linear-gradient(180deg, rgba(8,21,37,.94), rgba(4,12,22,.9)); box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.045); }
.can-console::before { content:""; position:absolute; inset:-1px; background:linear-gradient(100deg, rgba(0,175,255,.18), transparent 38%, rgba(113,255,209,.10)); pointer-events:none; mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; padding:1px; border-radius:28px; }
.can-console__bar { height:54px; padding:0 18px; display:flex; align-items:center; border-bottom:1px solid rgba(255,255,255,.055); gap:18px; color:#8298af; font-size:11px; text-transform:uppercase; letter-spacing:.1em; }
.traffic-lights { display:flex; gap:6px; }.traffic-lights i{width:8px;height:8px;border-radius:50%;background:#203347}.traffic-lights i:first-child{background:#32e17b;box-shadow:0 0 12px rgba(50,225,123,.5)}
.console-tabs { display:flex; gap:8px; margin-right:auto; }.console-tabs span{padding:7px 12px;border-radius:8px}.console-tabs .active{background:rgba(0,169,255,.12);color:#a9e7ff;border:1px solid rgba(0,180,255,.18)}
.bus-state{display:flex;align-items:center;gap:7px}.bus-state i{width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 10px rgba(113,255,209,.8)}
.scope { height:280px; position:relative; overflow:hidden; background:linear-gradient(180deg,rgba(0,27,49,.28),rgba(0,0,0,.08)); }
.scope-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(62,140,195,.08) 1px, transparent 1px),linear-gradient(90deg,rgba(62,140,195,.08) 1px,transparent 1px); background-size:48px 48px; mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.scope svg { position:absolute; inset:20px 0 0; width:100%; height:240px; overflow:visible; }
.wave { fill:none; stroke-width:4; stroke-linejoin:round; vector-effect:non-scaling-stroke; stroke-dasharray: 120 10; animation: signalFlow 4s linear infinite; filter:drop-shadow(0 0 9px currentColor); }
.wave-blue { stroke:#11b9ff; color:#11b9ff; }.wave-green{stroke:#5dff79;color:#5dff79;animation-duration:5.3s}
.data-table { padding:6px 18px 18px; font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; font-size:11px; color:#7fa7c8; }
.data-row { display:grid; grid-template-columns:80px 70px 60px 1fr; min-height:28px; align-items:center; border-bottom:1px solid rgba(255,255,255,.035); }.data-row span:last-child{color:#42d8ff}.data-row--head{color:#b8c8d9;font-size:9px;letter-spacing:.13em}

.interfaces-section { grid-template-columns:.8fr 1.2fr; gap:70px; }
.interfaces-copy { display:grid; gap:44px; align-content:center; }
.copy-beat p,.copy-beat span { display:block; margin:0; font-size:clamp(31px,4vw,61px); line-height:1.05; letter-spacing:-.055em; }
.copy-beat span { margin-top:8px; color:#8ea1b8; font-weight:500; }.copy-beat b{color:var(--cyan)}.copy-beat strong{color:#fff}
.interfaces-end { margin:10px 0 0; font-size:20px; line-height:1.4; color:#8ea1b8; }.interfaces-end strong{color:#e8f2ff}
.hardware-stage { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; align-items:stretch; }
.hardware-card { min-height:460px; padding:20px 20px 22px; border-radius:30px; border:1px solid rgba(255,255,255,.08); background:linear-gradient(180deg,rgba(14,31,50,.78),rgba(5,14,25,.84)); box-shadow:0 24px 70px rgba(0,0,0,.28); display:flex; flex-direction:column; justify-content:flex-end; position:relative; overflow:hidden; }
.hardware-card::before { content:"";position:absolute;inset:auto -20% 48%;height:210px;filter:blur(48px);opacity:.2;border-radius:50%;background:#009dff}.hardware-card--cyan::before{background:#40eaff}
.hardware-card h3{margin:20px 0 6px;font-size:clamp(18px,1.7vw,24px);letter-spacing:-.03em}.hardware-card p{margin:0;color:#93a7bd;font-size:13px;line-height:1.45}.hardware-card__figure{position:relative;display:grid;place-items:center;flex:1;min-height:300px;margin:0;padding:18px 10px 0;z-index:1}.hardware-card__figure img{max-width:100%;max-height:300px;width:auto;height:auto;display:block;object-fit:contain;filter:drop-shadow(0 18px 34px rgba(0,0,0,.48))}


/* Lab Workbench --------------------------------------------------------------- */
.workbench-section {
  grid-template-columns: .75fr 1.25fr;
  gap: 80px;
  background:
    radial-gradient(circle at 75% 45%, rgba(0, 138, 255, .10), transparent 38%),
    radial-gradient(circle at 84% 72%, rgba(113, 255, 209, .05), transparent 30%);
}
.workbench-copy { max-width: 650px; }
.workbench-copy h2 {
  margin: 0;
  font-size: clamp(64px, 7.2vw, 112px);
  line-height: .9;
  letter-spacing: -.065em;
}
.workbench-kicker {
  margin: 30px 0 0;
  font-size: clamp(20px, 2.1vw, 31px);
  line-height: 1.38;
  letter-spacing: -.025em;
  font-weight: 500;
  color: #d4e1ef;
}
.workbench-copy h3 {
  margin: 38px 0 12px;
  font-size: clamp(30px, 3.4vw, 52px);
  line-height: 1.02;
  letter-spacing: -.05em;
}
.workbench-copy h3 span { color: var(--cyan); }
.workbench-body {
  max-width: 620px;
  margin: 0;
  color: #91a5ba;
  font-size: 17px;
  line-height: 1.55;
}
.workbench-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 28px;
}
.workbench-steps span {
  padding: 9px 13px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  color: #9fb1c3;
  font-size: 12px;
  background: rgba(255,255,255,.025);
}
.workbench-foot {
  margin: 28px 0 0;
  color: #71859d;
  font-size: 14px;
  line-height: 1.55;
}
.workbench-foot strong { color: var(--mint); }
.lab-stage {
  position: relative;
  min-height: 610px;
  display: grid;
  place-items: center;
  perspective: 1400px;
}
.lab-stage::before {
  content: "";
  position: absolute;
  width: 82%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56,198,255,.17), rgba(113,255,209,.07) 38%, transparent 68%);
  filter: blur(34px);
  opacity: .95;
}
.lab-window {
  position: relative;
  z-index: 2;
  width: min(760px, 100%);
  overflow: hidden;
  border: 1px solid rgba(151,218,255,.19);
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(13,24,38,.96), rgba(4,10,18,.96));
  box-shadow: 0 55px 120px rgba(0,0,0,.5), 0 0 80px rgba(35,183,255,.08), inset 0 1px 0 rgba(255,255,255,.05);
  transform: rotateY(-5deg) rotateX(2deg);
  transition: transform .45s ease, box-shadow .45s ease;
}
.lab-window:hover {
  transform: rotateY(-1deg) rotateX(0deg) translateY(-3px);
  box-shadow: 0 65px 140px rgba(0,0,0,.56), 0 0 95px rgba(35,183,255,.12), inset 0 1px 0 rgba(255,255,255,.06);
}
.lab-window.is-transmitting { box-shadow: 0 65px 140px rgba(0,0,0,.56), 0 0 110px rgba(113,255,209,.20), inset 0 1px 0 rgba(255,255,255,.06); }
.lab-window__topbar {
  min-height: 58px;
  padding: 0 20px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.025);
}
.lab-window__topbar > span { font-size: 13px; font-weight: 700; color: #dce9f5; }
.lab-window__topbar > small { color: #657b91; font-size: 10px; }
.lab-window__lights { display: flex; gap: 6px; }
.lab-window__lights i { width: 8px; height: 8px; border-radius: 50%; background: #3a4b5d; }
.lab-window__lights i:nth-child(1){background:#ff6b66}.lab-window__lights i:nth-child(2){background:#f5c04e}.lab-window__lights i:nth-child(3){background:#62cf70}
.lab-window__content { padding: 24px; display: grid; gap: 14px; }
.lab-command-card {
  padding: 18px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.012));
}
.lab-label-row { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.lab-label-row span { color:#71879d; font-size:11px; text-transform:uppercase; letter-spacing:.13em; }
.lab-label-row b { color:#dce9f5; font-size:14px; }
.lab-segmented {
  margin-top: 16px;
  padding: 4px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  background: rgba(0,0,0,.20);
}
.lab-choice {
  min-height: 42px;
  border: 0;
  border-radius: 10px;
  color: #8196ab;
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: color .2s ease, background .2s ease, box-shadow .2s ease;
}
.lab-choice.is-active {
  color: #06131d;
  background: linear-gradient(105deg, #67d8ff, #73ffd0);
  box-shadow: 0 9px 26px rgba(56,220,255,.16);
}
.lab-range-wrap { display:block; margin-top:20px; }
.lab-range-wrap input {
  width: 100%;
  accent-color: #65e7d5;
  cursor: pointer;
}
.lab-range-scale { display:flex; justify-content:space-between; margin-top:7px; color:#51667d; font-size:9px; }
.lab-preview {
  min-height: 74px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border: 1px solid rgba(76,204,255,.12);
  border-radius: 18px;
  background: linear-gradient(90deg, rgba(0,135,255,.055), rgba(87,255,184,.035));
}
.lab-preview div { display:grid; gap:5px; }
.lab-preview span { color:#61788f; font-size:10px; text-transform:uppercase; letter-spacing:.14em; }
.lab-preview strong { color:#c9d9e8; font-size:12px; font-weight:600; }
.lab-preview i { width:9px; height:9px; flex:0 0 auto; border-radius:50%; background:var(--cyan); box-shadow:0 0 16px var(--cyan); }
.lab-transmit {
  min-height: 54px;
  padding: 0 18px 0 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border:0;
  border-radius:16px;
  color:#041018;
  background:linear-gradient(100deg,#67d8ff,#73ffd0);
  font:inherit;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 16px 44px rgba(50,217,255,.13);
  transition:transform .2s ease, box-shadow .2s ease;
}
.lab-transmit:hover { transform:translateY(-1px); box-shadow:0 18px 50px rgba(50,217,255,.21); }
.lab-transmit b { font-size:20px; }
.lab-status { display:flex; align-items:center; gap:9px; color:#6d8399; font-size:10px; padding:0 4px 2px; }
.lab-status i { width:7px; height:7px; border-radius:50%; background:#68d7ff; box-shadow:0 0 10px rgba(104,215,255,.65); }
.lab-status.is-live { color:#97dcbf; }
.lab-status.is-live i { background:var(--mint); box-shadow:0 0 14px rgba(113,255,209,.8); }
.lab-stage__tagline {
  position:absolute;
  z-index:3;
  right:4%;
  bottom:2%;
  margin:0;
  color:#71869b;
  font-size:clamp(18px,2vw,27px);
  letter-spacing:-.035em;
}
.lab-stage__tagline strong { color:#fff; }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }

.api-section { grid-template-columns:.75fr 1.25fr; gap:80px; }
.api-copy h2,.beanbox-copy h2,.mac-copy h2,.timeline-copy h2 { margin:0; font-size:clamp(64px,7.2vw,112px); line-height:.9; letter-spacing:-.065em; }
.api-copy>p:last-child,.timeline-copy>p { margin:30px 0 0; font-size:clamp(20px,2vw,30px); line-height:1.38; color:#aebdd0; letter-spacing:-.025em; }
.api-map { position:relative; min-height:600px; display:grid; place-items:center; }
.api-core{position:relative;z-index:4;width:170px;aspect-ratio:1;border:1px solid rgba(78,232,255,.4);border-radius:38px;background:linear-gradient(145deg,rgba(6,38,62,.92),rgba(5,17,29,.88));box-shadow:0 0 70px rgba(0,177,255,.16),inset 0 0 35px rgba(68,222,255,.08);display:grid;place-content:center;text-align:center}.api-core span{font-size:48px;font-weight:800;letter-spacing:-.05em}.api-core small{font-size:12px;letter-spacing:.15em;color:var(--mint)}
.api-ring{position:absolute;border:1px solid rgba(49,196,255,.12);border-radius:50%;animation:spinSlow 22s linear infinite}.api-ring--one{width:420px;aspect-ratio:1}.api-ring--two{width:600px;aspect-ratio:1;border-color:rgba(113,255,209,.08);animation-direction:reverse;animation-duration:28s}
.api-node{position:absolute;z-index:3;width:120px;padding:16px 12px;border:1px solid rgba(255,255,255,.09);border-radius:18px;background:rgba(7,20,34,.82);backdrop-filter:blur(16px);display:grid;gap:7px;text-align:center;box-shadow:0 16px 55px rgba(0,0,0,.3)}.api-node b{font-size:25px;color:#b9ecff}.api-node span{font-size:11px;color:#91a7bd}.api-node--1{left:5%;top:15%}.api-node--2{left:7%;bottom:18%}.api-node--3{left:38%;bottom:2%}.api-node--4{right:4%;top:15%}.api-node--5{right:8%;bottom:18%}
.api-link{position:absolute;height:1px;z-index:1;left:50%;top:50%;width:38%;transform-origin:left;background:linear-gradient(90deg,rgba(69,220,255,.8),transparent);box-shadow:0 0 12px rgba(69,220,255,.55)}.api-link--1{transform:rotate(-150deg)}.api-link--2{transform:rotate(150deg)}.api-link--3{width:28%;transform:rotate(90deg)}.api-link--4{transform:rotate(-28deg);background:linear-gradient(90deg,rgba(113,255,209,.8),transparent)}.api-link--5{transform:rotate(30deg);background:linear-gradient(90deg,rgba(113,255,209,.8),transparent)}

.beanbox-section { grid-template-columns:.88fr 1.12fr; gap:80px; background:radial-gradient(circle at 72% 50%,rgba(43,255,173,.08),transparent 38%); }
.beanbox-lead{margin:34px 0 22px!important;color:#d8e7f7!important}.beanbox-copy>p{font-size:19px;line-height:1.55;color:#9cafc3;max-width:680px}.beanbox-copy strong{color:#fff}.text-link{display:inline-flex;align-items:center;gap:10px;margin-top:18px;color:var(--mint);font-weight:700;font-size:14px;border-bottom:1px solid rgba(113,255,209,.3);padding-bottom:4px}.text-link span{transition:transform .2s ease}.text-link:hover span{transform:translate(3px,-3px)}
.beanbox-stage { min-height:520px; display:grid; place-items:center; position:relative; perspective:1200px; }.beanbox-halo{position:absolute;width:75%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(113,255,209,.14),rgba(0,164,255,.08) 42%,transparent 68%);filter:blur(20px)}
.beanbox-device{position:relative;z-index:2;width:min(540px,88%);height:250px;transform:rotateX(58deg) rotateZ(-10deg);transform-style:preserve-3d;border-radius:32px;background:linear-gradient(145deg,#172735,#05090f 62%,#142330);border:1px solid rgba(143,222,255,.25);box-shadow:0 70px 90px rgba(0,0,0,.6),0 0 50px rgba(0,180,255,.12),inset 0 1px 0 rgba(255,255,255,.14)}
.beanbox-device__top{position:absolute;inset:0;padding:38px;display:flex;flex-direction:column;justify-content:space-between}.beanbox-device__top span{font-size:11px;letter-spacing:.22em;color:#6f97b4}.beanbox-device__top b{font-size:44px;letter-spacing:-.05em;color:#c7f4ff}.beanbox-device__front{position:absolute;height:42px;left:24px;right:24px;bottom:-26px;border-radius:0 0 18px 18px;background:#020508;border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:10px;padding:0 16px;transform:rotateX(-1deg);transform-origin:top}.led{width:6px;height:6px;border-radius:50%;background:#24a8ff;box-shadow:0 0 10px #24a8ff}.led--green{background:#61ff79;box-shadow:0 0 10px #61ff79}.port{margin-left:auto;width:33px;height:18px;border:1px solid #314354;background:#04070a}.port--small{margin-left:0;width:23px}
.beanbox-caption{position:absolute;bottom:20px;display:flex;gap:18px;align-items:center;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:#83a2bb}.beanbox-caption i{font-style:normal;color:var(--mint)}

.timeline-section { grid-template-columns:.72fr 1.28fr; gap:80px; }.feature-phrases{display:flex;flex-wrap:wrap;gap:9px;margin-top:28px}.feature-phrases span{padding:9px 13px;border:1px solid rgba(255,255,255,.08);border-radius:999px;color:#9fb1c3;font-size:12px;background:rgba(255,255,255,.025)}
.timeline-player{border:1px solid rgba(255,255,255,.09);border-radius:30px;padding:28px;background:linear-gradient(180deg,rgba(11,26,44,.86),rgba(5,13,23,.86));box-shadow:var(--shadow)}.timeline-player__top{display:flex;justify-content:space-between;color:#8097af;font-size:12px}.timeline-player__top b{color:#c6d8e8}.timeline-track{height:160px;margin-top:28px;position:relative;display:flex;align-items:flex-end;gap:4px;border-bottom:1px solid rgba(255,255,255,.1);overflow:hidden;background:linear-gradient(180deg,rgba(0,131,255,.04),transparent)}.timeline-segment{display:block;flex:1;background:linear-gradient(180deg,#36c5ff,#0063ff);border-radius:4px 4px 0 0;opacity:.58}.timeline-segment--1{height:30%}.timeline-segment--2{height:72%}.timeline-segment--3{height:46%}.timeline-segment--4{height:88%;background:linear-gradient(180deg,#72ffc1,#23b77c)}.timeline-segment--5{height:57%}.timeline-track i{position:absolute;top:0;bottom:0;left:44%;width:2px;background:#fff;box-shadow:0 0 16px #fff;transition:left .12s linear}.timeline-track i::before{content:"";position:absolute;top:0;left:50%;width:9px;height:9px;border-radius:50%;background:#fff;transform:translateX(-50%)}.timeline-controls{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:22px}.timeline-controls button{width:38px;height:38px;border:1px solid rgba(255,255,255,.1);border-radius:50%;color:#c7d8e8;background:rgba(255,255,255,.035);cursor:pointer}.timeline-controls .play{width:50px;height:50px;background:#f4f8ff;color:#07111f}.timeline-controls span{font-size:11px;color:#6f849b;padding:7px}.timeline-controls .active{color:#fff}

.graphs-section {
  grid-template-columns: .75fr 1.25fr;
  gap: 80px;
  background: radial-gradient(circle at 75% 45%, rgba(0, 138, 255, .10), transparent 38%);
}
.graphs-copy { max-width: 650px; }
.graphs-copy h2 {
  margin: 0;
  font-size: clamp(64px, 7.2vw, 112px);
  line-height: .9;
  letter-spacing: -.065em;
}
.graphs-kicker {
  margin: 30px 0 0;
  font-size: clamp(20px, 2.1vw, 31px);
  line-height: 1.38;
  letter-spacing: -.025em;
  font-weight: 500;
  color: #d4e1ef;
}
.graphs-body {
  margin: 20px 0 0;
  max-width: 620px;
  color: #91a5ba;
  font-size: 17px;
  line-height: 1.55;
}
.graphs-foot {
  margin: 28px 0 0;
  max-width: 620px;
  color: #71859d;
  font-size: 14px;
  line-height: 1.55;
}



/* AI Skills ------------------------------------------------------------------ */
.ai-skills-section {
  grid-template-columns: .75fr 1.25fr;
  gap: 80px;
  background:
    radial-gradient(circle at 76% 46%, rgba(85, 132, 255, .10), transparent 36%),
    radial-gradient(circle at 84% 68%, rgba(113, 255, 209, .055), transparent 30%);
}
.ai-skills-copy { max-width: 650px; }
.ai-skills-copy h2 {
  margin: 0;
  font-size: clamp(64px, 7.2vw, 112px);
  line-height: .9;
  letter-spacing: -.065em;
}
.ai-skills-lead {
  margin: 30px 0 0;
  font-size: clamp(20px, 2.1vw, 31px);
  line-height: 1.38;
  letter-spacing: -.025em;
  color: #d4e1ef;
}
.ai-skills-body {
  margin: 20px 0 0;
  max-width: 620px;
  color: #91a5ba;
  font-size: 17px;
  line-height: 1.55;
}
.ai-skills-beats {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 28px;
}
.ai-skills-beats span {
  padding: 9px 13px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 999px;
  color: #dbe9f7;
  font-size: 12px;
  background: rgba(255,255,255,.03);
}
.ai-skills-foot {
  margin: 28px 0 0;
  color: #71859d;
  font-size: 14px;
  line-height: 1.55;
}
.ai-skills-stage {
  position: relative;
  min-height: 610px;
  isolation: isolate;
}
.ai-skills-halo {
  position: absolute;
  inset: 13% 17%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(100, 167, 255, .15), rgba(113,255,209,.055) 46%, transparent 72%);
  filter: blur(30px);
}
.ai-skills-core {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  width: 220px;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(127, 192, 255, .24);
  border-radius: 52px;
  background: linear-gradient(145deg, rgba(11, 29, 51, .97), rgba(5, 12, 22, .96));
  box-shadow: 0 34px 85px rgba(0,0,0,.42), 0 0 70px rgba(75,153,255,.10), inset 0 1px 0 rgba(255,255,255,.06);
  display: grid;
  place-content: center;
  text-align: center;
}
.ai-skills-core > span {
  color: #8297ae;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .17em;
}
.ai-skills-core strong {
  margin-top: 5px;
  font-size: 42px;
  line-height: .95;
  letter-spacing: -.06em;
  color: transparent;
  background: linear-gradient(100deg, #d3efff, #79bdff 48%, #78ffb2);
  -webkit-background-clip: text;
  background-clip: text;
}
.ai-skills-core small {
  margin-top: 12px;
  color: var(--mint);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .17em;
}
.ai-skill-card {
  position: absolute;
  z-index: 3;
  width: min(245px, 36%);
  padding: 18px 19px;
  border: 1px solid rgba(255,255,255,.085);
  border-radius: 20px;
  background: rgba(8, 21, 35, .84);
  backdrop-filter: blur(15px);
  box-shadow: 0 18px 58px rgba(0,0,0,.32);
}
.ai-skill-card > span {
  display: block;
  margin-bottom: 8px;
  color: #81bdff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.ai-skill-card strong {
  display: block;
  color: #e2edf8;
  font-size: 17px;
  letter-spacing: -.025em;
}
.ai-skill-card small {
  display: block;
  margin-top: 7px;
  color: #71879d;
  font-size: 11px;
  line-height: 1.4;
}
.ai-skill-card--functions { top: 8%; left: 2%; }
.ai-skill-card--decode { top: 10%; right: 0; }
.ai-skill-card--dbc { bottom: 8%; left: 7%; }
.ai-skill-card--bridge { bottom: 10%; right: 2%; }
.ai-skill-card--dbc > span,
.ai-skill-card--bridge > span { color: var(--mint); }


/* BEAN-DBC Hub --------------------------------------------------------------- */
.hub-section {
  grid-template-columns: .75fr 1.25fr;
  gap: 80px;
  background:
    radial-gradient(circle at 76% 48%, rgba(0, 155, 255, .09), transparent 36%),
    radial-gradient(circle at 82% 66%, rgba(113, 255, 209, .055), transparent 28%);
}
.hub-copy { max-width: 650px; }
.hub-copy h2 {
  margin: 0;
  font-size: clamp(64px, 7.2vw, 112px);
  line-height: .9;
  letter-spacing: -.065em;
}
.hub-lead {
  margin: 30px 0 0;
  font-size: clamp(20px, 2.1vw, 31px);
  line-height: 1.38;
  letter-spacing: -.025em;
  color: #d4e1ef;
}
.hub-body {
  margin: 20px 0 0;
  max-width: 620px;
  color: #91a5ba;
  font-size: 17px;
  line-height: 1.55;
}
.hub-beats {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 28px;
}
.hub-beats span {
  padding: 9px 13px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 999px;
  color: #dbe9f7;
  font-size: 12px;
  background: rgba(255,255,255,.03);
}
.hub-link { margin-top: 30px; }
.hub-stage {
  position: relative;
  min-height: 610px;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.hub-stage__halo {
  position: absolute;
  width: 68%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(57, 202, 255, .16), rgba(113, 255, 209, .055) 44%, transparent 70%);
  filter: blur(34px);
  z-index: -1;
}
.hub-core {
  position: relative;
  z-index: 4;
  width: 210px;
  aspect-ratio: 1;
  border: 1px solid rgba(100, 218, 255, .26);
  border-radius: 48px;
  background: linear-gradient(145deg, rgba(8, 32, 52, .96), rgba(4, 12, 21, .94));
  box-shadow: 0 34px 85px rgba(0,0,0,.42), 0 0 65px rgba(0,174,255,.10), inset 0 1px 0 rgba(255,255,255,.06);
  display: grid;
  place-content: center;
  text-align: center;
  gap: 2px;
}
.hub-core > span {
  color: #8ba3ba;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .17em;
}
.hub-core strong {
  font-size: 58px;
  line-height: .95;
  letter-spacing: -.07em;
  color: transparent;
  background: linear-gradient(100deg, #bfeeff, #62dcff 48%, #78ffb2);
  -webkit-background-clip: text;
  background-clip: text;
}
.hub-core small {
  margin-top: 10px;
  color: #6e859b;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .13em;
}
.hub-card {
  position: absolute;
  z-index: 3;
  width: min(230px, 34%);
  padding: 18px 19px;
  border: 1px solid rgba(255,255,255,.085);
  border-radius: 20px;
  background: rgba(8, 21, 35, .84);
  backdrop-filter: blur(15px);
  box-shadow: 0 18px 58px rgba(0,0,0,.32);
}
.hub-card > span {
  display: block;
  margin-bottom: 8px;
  color: #75d8ff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.hub-card strong {
  display: block;
  color: #e2edf8;
  font-size: 17px;
  letter-spacing: -.025em;
}
.hub-card small {
  display: block;
  margin-top: 7px;
  color: #71879d;
  font-size: 11px;
  line-height: 1.4;
}
.hub-card--discoveries { top: 11%; left: 5%; }
.hub-card--database { top: 17%; right: 1%; }
.hub-card--docs { left: 15%; bottom: 9%; }
.hub-card--database > span { color: var(--mint); }
.hub-card--docs > span { color: #a9caff; }
.hub-link-line {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: 34%;
  height: 1px;
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(86, 215, 255, .55), rgba(86, 215, 255, .04));
  box-shadow: 0 0 10px rgba(86,215,255,.22);
}
.hub-link-line--one { transform: rotate(-150deg); }
.hub-link-line--two { transform: rotate(-29deg); }
.hub-link-line--three { transform: rotate(142deg); background: linear-gradient(90deg, rgba(113,255,209,.50), rgba(113,255,209,.03)); }

.mac-section { grid-template-columns:.9fr 1.1fr; gap:70px; background:radial-gradient(circle at 75% 45%,rgba(0,138,255,.1),transparent 38%); }.mac-lead{font-size:clamp(20px,2.1vw,31px)!important;color:#d4e1ef!important}.mac-copy h3{margin:38px 0 12px;font-size:clamp(30px,3.4vw,52px);line-height:1.02;letter-spacing:-.05em}.mac-copy h3 span{color:#a6bdd2}.mac-copy>p{color:#91a5ba;font-size:17px;line-height:1.45}.chip-stage{display:flex;align-items:center;justify-content:center;gap:22px;min-height:480px}.chip{width:250px;aspect-ratio:1;border-radius:42px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(145deg,rgba(22,43,66,.92),rgba(4,11,20,.95));box-shadow:0 34px 80px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.08);display:grid;place-content:center;text-align:center}.chip span{font-size:88px;font-weight:800;letter-spacing:-.08em}.chip small{margin-top:16px;color:#748ba1;font-size:11px;text-transform:uppercase;letter-spacing:.15em}.chip--m{box-shadow:0 34px 80px rgba(0,0,0,.4),0 0 70px rgba(0,139,255,.14),inset 0 1px 0 rgba(255,255,255,.08)}.chip--m span{color:transparent;background:linear-gradient(135deg,#fff,#66dcff 52%,#58ff98);-webkit-background-clip:text;background-clip:text}.chip--intel span{font-size:48px;color:#c6d2df}.chip-bridge{width:90px;display:flex;gap:8px}.chip-bridge i{height:1px;flex:1;background:linear-gradient(90deg,#34bfff,#62ff93);box-shadow:0 0 8px rgba(55,221,255,.6)}

.refine-section { place-items:center; text-align:center; background:radial-gradient(circle at 50% 45%,rgba(50,144,255,.06),transparent 35%); }.refine-stack{display:grid;gap:90px}.refine-line p{margin:0;color:#6f859c;font-size:clamp(28px,3vw,46px);letter-spacing:-.04em}.refine-line h2{margin:0;font-size:clamp(64px,8vw,130px);line-height:.94;letter-spacing:-.07em}.refine-line:nth-child(2) h2{color:var(--cyan)}.refine-line:nth-child(3) h2{color:var(--mint)}.refine-caption{margin:90px 0 0;max-width:720px;color:#8498ad;font-size:16px;line-height:1.55}

.buy-section { grid-template-columns:1fr 1fr; gap:80px; min-height:100svh; background:radial-gradient(circle at 25% 50%,rgba(0,127,255,.11),transparent 34%),radial-gradient(circle at 80% 48%,rgba(82,255,151,.07),transparent 34%); }.buy-glow{position:absolute;inset:0;background:linear-gradient(115deg,transparent 15%,rgba(51,187,255,.04) 48%,rgba(99,255,143,.04) 72%,transparent);pointer-events:none}.buy-icon{display:grid;place-items:center}.buy-icon img{width:min(520px,80%);border-radius:22.5%;box-shadow:0 55px 130px rgba(0,0,0,.5),0 0 80px rgba(0,185,255,.12)}.buy-copy h2{margin:0;font-size:clamp(62px,7.2vw,112px);line-height:.91;letter-spacing:-.07em}.buy-copy h2 span{color:#9eeeff}.buy-copy h3{margin:12px 0 26px;font-size:clamp(42px,5.2vw,78px);line-height:.95;letter-spacing:-.06em;color:var(--mint)}.buy-copy p{color:#aabacf;font-size:20px;line-height:1.5}.buy-copy small{color:#667d93;font-size:13px}.buy-button{display:inline-flex;align-items:center;justify-content:center;gap:30px;margin-top:20px;padding:17px 24px;border-radius:999px;background:linear-gradient(100deg,#67d8ff,#73ffd0);color:#04101a;font-weight:800;font-size:14px;box-shadow:0 15px 50px rgba(65,225,255,.18);transition:transform .25s ease,box-shadow .25s ease}.buy-button:hover{transform:translateY(-2px);box-shadow:0 19px 60px rgba(65,225,255,.26)}.microcopy{font-size:12px!important;color:#677e94!important;margin-top:16px!important}
.platform-availability{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin-top:18px;color:#71869b;font-size:11px;line-height:1.4}.platform-availability span{font-size:9px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#5f748a}.platform-availability strong{font-weight:700;color:#9fb2c5}.platform-availability i{font-style:normal;color:#3e5368}
.system-requirements{display:flex;align-items:center;flex-wrap:wrap;gap:8px 11px;margin-top:16px;color:#73879c;font-size:11px;line-height:1.4}.system-requirements__label{width:100%;font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#5f748a}.system-requirements__item{display:inline-flex;align-items:center;gap:4px}.system-requirements__item b{font-weight:700;color:#96a9bb}.system-requirements i{font-style:normal;color:#3e5368}

.site-footer{min-height:180px;padding:50px max(28px,calc((100vw - 1240px)/2));display:flex;align-items:center;gap:30px;color:#6e8196;font-size:12px;background:#03070d}.site-footer img{width:110px;opacity:.7}.site-footer p{margin-right:auto}.site-footer a:hover{color:#fff}

@keyframes breathe{0%,100%{transform:scale(.96);opacity:.7}50%{transform:scale(1.08);opacity:1}}
@keyframes scrollCue{0%{transform:translateY(0);opacity:0}25%{opacity:1}70%{opacity:1}100%{transform:translateY(21px);opacity:0}}
@keyframes signalFlow{to{stroke-dashoffset:-260}}
@keyframes spinSlow{to{transform:rotate(360deg)}}

@media (max-width: 980px){
  .global-nav{display:none}.menu-button{display:block}.global-nav.is-open{display:flex;position:absolute;top:66px;left:0;right:0;padding:24px 28px;flex-direction:column;align-items:flex-start;background:rgba(3,9,16,.97);border-bottom:1px solid rgba(255,255,255,.08)}
  .product-nav__links a:not(.product-nav__cta){display:none}
  .section-full{min-height:auto;padding-top:150px;padding-bottom:100px}
  .hero,.ui-section,.statement-section,.interfaces-section,.workbench-section,.api-section,.beanbox-section,.timeline-section,.graphs-section,.ai-skills-section,.hub-section,.mac-section,.buy-section{grid-template-columns:1fr;gap:58px}
  .hero{text-align:center;padding-top:190px}.hero-copy{max-width:800px;margin:auto}.hero-product{order:-1}.product-icon{width:min(460px,74vw)}.hero-caption{position:static;justify-content:center;margin-top:20px;grid-column:1}.scroll-cue{display:none}
  .can-console{max-width:820px;width:100%;margin:auto}.hardware-stage{max-width:1100px;width:100%;margin:auto}.api-map{min-height:540px}.beanbox-stage{min-height:480px}.chip-stage{min-height:360px}.buy-icon{order:-1}
}

@media (max-width: 1024px){
  .hardware-stage{grid-template-columns:1fr;max-width:760px}
  .hardware-card{min-height:380px}
  .hardware-card__figure{min-height:240px}
}

@media (max-width: 640px){
  .global-header__inner,.product-nav__inner{padding-left:18px;padding-right:18px}.brand img{width:96px}.product-nav{top:66px}.section-full{padding-left:20px;padding-right:20px;padding-top:138px;padding-bottom:80px}
  .hero h1{font-size:clamp(52px,16vw,78px)}.hero-lead{font-size:21px}.hero-caption{gap:10px;font-size:9px}.hero-caption span::after{margin-left:10px}
  .mega-title,.ui-copy h2,.api-copy h2,.beanbox-copy h2,.mac-copy h2,.timeline-copy h2,.workbench-copy h2,.graphs-copy h2,.ai-skills-copy h2,.hub-copy h2{font-size:clamp(52px,15vw,84px)}

  .can-bridge-copy{margin-top:34px;padding-top:22px}.can-bridge-copy h3{font-size:clamp(32px,10vw,48px)}.can-bridge-copy>p:last-child{font-size:15px}
  .scope{height:220px}.scope svg{height:190px}.data-row{grid-template-columns:60px 50px 42px 1fr;font-size:9px}.data-table{overflow:hidden}.can-console__bar{gap:8px}.console-tabs{gap:3px}.console-tabs span{padding:6px 8px}.bus-state{display:none}
  .hardware-stage{grid-template-columns:1fr}.hardware-card{min-height:360px}.hardware-card__figure{min-height:220px;padding-top:8px}.hardware-card__figure img{max-height:220px}
  .workbench-media{gap:16px}.workbench-copy h3{margin-top:34px}.ui-priority{margin-top:32px}.ui-priority strong{font-size:clamp(28px,9vw,44px)}.graphs-kicker,.workbench-kicker,.ui-lead{font-size:21px}
  .copy-beat p,.copy-beat span{font-size:clamp(28px,9vw,44px)}.ai-skill-card{width:min(230px,43%)}.ai-skills-core{width:190px}.ai-skills-core strong{font-size:36px}.hub-card{width:min(220px,42%)}.hub-core{width:180px}.hub-core strong{font-size:50px}
  .api-map{min-height:500px;transform:scale(.92)}.hub-stage{min-height:520px}.api-ring--two{width:460px}.api-ring--one{width:330px}.api-node{width:95px;padding:12px 8px}.api-node--3{left:39%}
  .beanbox-device{width:92%;height:190px}.beanbox-device__top{padding:26px}.beanbox-device__top b{font-size:34px}.beanbox-caption{font-size:9px;gap:8px}
  
  .chip-stage{flex-direction:column}.chip{width:210px}.chip-bridge{transform:rotate(90deg)}
  .refine-stack{gap:62px}.refine-caption{margin-top:62px}
  .buy-copy h2{font-size:clamp(54px,15vw,80px)}.buy-copy h3{font-size:clamp(39px,11vw,58px)}.buy-copy p{font-size:17px}.buy-icon img{width:min(390px,86vw)}.platform-availability{font-size:10px;gap:6px}.platform-availability span{font-size:8px}.system-requirements{font-size:10px;gap:6px 9px}.system-requirements__label{font-size:8px}
  .ai-skills-stage{min-height:auto;display:flex;flex-direction:column;justify-content:center;gap:12px}.ai-skills-core{position:relative;left:auto;top:auto;transform:none;order:-1;margin:0 auto 12px}.ai-skill-card{position:relative;inset:auto!important;width:100%;max-width:340px;margin:0 auto}.ai-skills-halo{inset:8% 5%}.hub-stage{min-height:470px}.hub-card{position:relative;inset:auto!important;width:100%;max-width:330px}.hub-stage{display:flex;flex-direction:column;justify-content:center;gap:12px}.hub-core{order:-1;margin-bottom:12px}.hub-link-line{display:none}.hub-stage__halo{width:90%}.site-footer{flex-direction:column;align-items:flex-start}.site-footer p{margin:0}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}.reveal{opacity:1;transform:none;filter:none;transition:none}.icon-aura,.wave,.api-ring,.scroll-cue span{animation:none!important}.product-icon{transition:none}
}


/* UltraPro 5 real product media ------------------------------------------------ */
.feature-media {
  position: relative;
  width: min(100%, 980px);
  margin: 0 auto;
  isolation: isolate;
}
.feature-media__glow {
  position: absolute;
  inset: 8% 6%;
  z-index: -1;
  border-radius: 36px;
  background:
    radial-gradient(circle at 28% 35%, rgba(0, 181, 255, .20), transparent 46%),
    radial-gradient(circle at 76% 68%, rgba(113, 255, 209, .16), transparent 48%);
  filter: blur(42px);
  transform: scale(1.06);
  opacity: .95;
}
.feature-media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  -webkit-user-drag: none;
  user-select: none;
}
.feature-media--screen,
.feature-media--can {
  border: 1px solid rgba(128, 205, 255, .18);
  border-radius: 30px;
  overflow: hidden;
  background: rgba(4, 10, 18, .72);
  box-shadow:
    0 34px 100px rgba(0, 0, 0, .52),
    0 0 0 1px rgba(255, 255, 255, .025) inset,
    0 0 70px rgba(0, 157, 255, .07);
}
.feature-media--screen img,
.feature-media--can img {
  border-radius: inherit;
}
.feature-media--ui,
.feature-media--workbench,
.feature-media--timeline,
.feature-media--graphs { width: min(1040px, 100%); }
.ui-copy,
.workbench-copy,
.graphs-copy {
  position: relative;
  z-index: 3;
  align-self: center;
}
.ui-section .feature-media,
.workbench-section .feature-media,
.graphs-section .feature-media {
  align-self: center;
}

.workbench-media { display: grid; gap: 22px; align-items: center; }
.media-tagline {
  margin: 0;
  text-align: center;
  font-size: clamp(22px, 2.5vw, 34px);
  letter-spacing: -.04em;
  color: #dce9f5;
}
.media-tagline strong { color: var(--mint); }
.feature-media--mac {
  width: min(1120px, 100%);
  filter: drop-shadow(0 34px 48px rgba(0, 0, 0, .42));
}
.feature-media--mac .feature-media__glow {
  inset: 18% 8% 12%;
  filter: blur(54px);
}
@media (max-width: 980px) {
  .feature-media--can, .feature-media--screen { max-width: 860px; }
  .feature-media--mac { max-width: 900px; }
}
@media (max-width: 640px) {
  .feature-media--can, .feature-media--screen { border-radius: 18px; }
  .feature-media__glow { filter: blur(28px); }
  .media-tagline { font-size: 24px; }
}


/* AIRFLEX BEANbox real product media ------------------------------------------ */
.beanbox-stage{min-height:560px;display:grid;place-items:center;position:relative;perspective:none}
.beanbox-halo{position:absolute;width:78%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(113,255,209,.14),rgba(0,164,255,.08) 42%,transparent 68%);filter:blur(24px)}
.beanbox-product{position:relative;z-index:2;width:min(610px,92%);margin:0;display:grid;place-items:center}
.beanbox-product img{display:block;width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 42px 54px rgba(0,0,0,.58)) drop-shadow(0 0 34px rgba(113,255,209,.06));transform:translateY(-10px);-webkit-user-drag:none;user-select:none}
.beanbox-caption{position:absolute;z-index:3;bottom:18px;display:flex;gap:18px;align-items:center;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:#83a2bb}
.beanbox-caption i{font-style:normal;color:var(--mint)}
@media (max-width:640px){.beanbox-product{width:min(520px,96%)}.beanbox-product img{transform:none}.beanbox-caption{position:static;margin-top:10px;font-size:9px;gap:8px;flex-wrap:wrap;justify-content:center}}

/* Timeline compositor stability ------------------------------------------------
   Keep the animated WebP on an isolated paint/compositor layer. This avoids
   Chromium/WebKit invalidating the full section when a WebP frame changes. */
.timeline-section {
  isolation: isolate;
  contain: paint;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.feature-media--timeline {
  isolation: isolate;
  contain: layout paint;
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: auto;
  /* Avoid clipping + transformed animated-image compositor glitches. */
  overflow: clip;
}
/* Do not animate blur/scale on the container that owns the animated WebP. */
.feature-media--timeline.reveal,
.feature-media--timeline.reveal[data-reveal="timeline"] {
  filter: none;
  transform: translateY(18px);
  transition: opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1);
}
.feature-media--timeline.reveal.is-visible {
  filter: none;
  transform: translateZ(0);
}
.timeline-preview-image {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  contain: paint;
}
/* The generic blurred media glow is visually subtle but expensive to repaint
   behind an animated bitmap. Timeline uses a static gradient halo instead. */
.feature-media--timeline .timeline-media-glow {
  filter: none;
  inset: 5%;
  opacity: .55;
  transform: none;
  background:
    radial-gradient(circle at 28% 35%, rgba(0,181,255,.14), transparent 48%),
    radial-gradient(circle at 76% 68%, rgba(113,255,209,.10), transparent 50%);
}
@media (prefers-reduced-motion: reduce) {
  .feature-media--timeline.reveal,
  .feature-media--timeline.reveal[data-reveal="timeline"] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Optional BEANbox collaboration gate */
[data-beanbox-gated][hidden] { display: none !important; }


/* Return to AE&D -------------------------------------------------------------- */
.header-left,
.product-nav__identity {
  display: flex;
  align-items: center;
  min-width: 0;
}
.header-left { gap: 18px; }
.return-aend {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  color: #9fb0c3;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
  transition: color .22s ease, transform .22s ease;
}
.return-aend:hover {
  color: #fff;
  transform: translateX(-2px);
}
.return-aend-icon {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.return-aend-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}
.header-divider,
.product-nav__divider {
  width: 1px;
  height: 22px;
  flex: 0 0 auto;
  background: rgba(255,255,255,.12);
}
.product-nav__identity { gap: 12px; }
.return-aend--compact {
  min-height: 28px;
  font-size: 11px;
  color: #8194a9;
}
.return-aend--compact .return-aend-icon {
  width: 18px;
  height: 18px;
}

@media (max-width: 760px) {
  .header-left { gap: 10px; }
  .header-divider { height: 18px; }
  .return-aend > span:last-child { display: none; }
  .return-aend { gap: 0; min-width: 32px; justify-content: center; }
  .product-nav__identity { gap: 9px; }
  .product-nav__divider { height: 16px; }
  .return-aend--compact { min-width: 26px; }
}