/* VoxBox | Build your own communication infrastructure.
   Campaign page styles. Aqua palette and gel treatments from BSI voxbox.css, modernized.
   Copyright (C) 1977-2026 Binary Systems, Inc. */
@font-face{font-family:"VB Display";src:url("fonts/SourceSans3-VF.woff2") format("woff2");font-weight:200 900;font-style:normal;font-display:swap}
:root{
  --aqua-ink:#08315c; --aqua-night:#061e39; --aqua-deep:#0c4d8c; --aqua:#2d78c8; --gel-mid:#165eaa;
  --gel-light:#6aafec; --sky:#9dcef8; --ice:#eef6ff; --panel:#d4e7f8; --link:#005fa5;
  --fiber:#6fce9f; --fiber-teal:#53b0ac;
  --graphite:#333; --muted:#6c6c6c; --rule:#ccc; --stripe-a:#ffffff; --stripe-b:#f2f4f7;
  --aqua-gel:linear-gradient(180deg,#f7fbff 0%,#9dcef8 7%,#4f97e0 20%,#2d78c8 48%,#165eaa 52%,#2a7ed4 78%,#6aafec 100%);
  --aqua-gel-hover:linear-gradient(180deg,#fff 0%,#c5e4ff 8%,#6aafef 22%,#3d8ad4 48%,#1d6ab8 52%,#3a90e0 80%,#8ec4f5 100%);
  --aqua-soft:linear-gradient(180deg,#fff 0%,#eef6ff 40%,#d4e7f8 50%,#f3f9ff 100%);
  --bsi-menu:linear-gradient(180deg,#9d9d9d 0%,#767676 26%,#525252 42%,#2b2b2b 62%,#000 82%);
  --pinstripe:repeating-linear-gradient(180deg,var(--stripe-a) 0 2px,var(--stripe-b) 2px 4px);
  --body:"Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
  --display:"VB Display","Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  --wrap:1160px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);color:var(--graphite);background:var(--pinstripe);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--link)}
a:hover{color:#003d6b}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.skip{position:absolute;left:-999px;top:8px;background:#fff;color:#000;padding:8px 12px;z-index:100;border-radius:6px}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--fiber);outline-offset:3px}
code,.mono{font-family:var(--mono)}

/* ---------- Nav: BSI menu-bar graphite, as on binary-systems.com ---------- */
.nav{position:sticky;top:0;z-index:50;background:var(--bsi-menu);border-bottom:1px solid #000;box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 4px 16px rgba(0,0,0,.35)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:60px;gap:16px}
.brand-cube{width:52px;height:52px;max-width:none;margin:-9px -4px -9px -10px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#ccc}
.brand small{font:600 11px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:#ccc}
.nav ul{display:flex;list-style:none;margin:0;padding:0;gap:4px;align-items:center}
.nav li a{display:block;padding:8px 12px;color:#ccc;text-decoration:none;font-size:13px;letter-spacing:.02em;border-radius:6px}
.nav li a:hover{color:#fff;background:rgba(255,255,255,.08)}
.nav li a.gel{color:#fff;padding:8px 18px}

/* ---------- Aqua gel button ---------- */
.gel,.glass{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 28px;border-radius:999px;font:700 16px/1 var(--body);text-decoration:none;overflow:hidden;isolation:isolate;transition:transform .15s ease,box-shadow .15s ease}
.gel{color:#fff;background:var(--aqua-gel);border:1px solid var(--aqua-deep);text-shadow:0 -1px 0 rgba(8,49,92,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 6px rgba(157,206,248,.55),0 2px 4px rgba(8,49,92,.35),0 10px 24px rgba(45,120,200,.35)}
.gel::before,.glass::before{content:"";position:absolute;left:7%;right:7%;top:1px;height:44%;border-radius:999px 999px 60% 60% / 999px 999px 40% 40%;background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.04));z-index:-1;pointer-events:none}
.gel::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-18deg);z-index:-1}
.gel:hover{color:#fff;background:var(--aqua-gel-hover);transform:translateY(-1px)}
.gel:hover::after{animation:shine .9s ease}
.gel:active{transform:translateY(1px);filter:brightness(.95)}
.nav li a.gel{min-height:36px;padding:8px 18px;font-size:13px}
.glass{color:var(--aqua-ink);background:var(--aqua-soft);border:1px solid #6aa0d4;box-shadow:inset 0 1px 0 #fff,0 2px 4px rgba(8,49,92,.18),0 8px 18px rgba(8,49,92,.12)}
.glass:hover{color:var(--aqua-ink);transform:translateY(-1px);border-color:#3d8ad4}
.dark .glass{color:#fff;background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.08) 50%,rgba(255,255,255,.02) 51%,rgba(255,255,255,.12));border-color:rgba(157,206,248,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 20px rgba(0,0,0,.25)}
.dark .glass::before{opacity:.35}
@keyframes shine{to{left:120%}}

/* ---------- Type ---------- */
.eyebrow{display:flex;align-items:center;gap:12px;font:700 12px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--aqua);margin:0 0 20px}
.eyebrow::before{content:"";width:32px;height:3px;border-radius:2px;background:var(--aqua-gel)}
.dark .eyebrow,.hero .eyebrow{color:var(--sky)}
h1,h2,h3{font-family:var(--display);line-height:1.02;margin:0;letter-spacing:-.015em}
h2{font-size:clamp(36px,4.6vw,64px);font-weight:900;color:var(--aqua-ink)}
.dark h2{color:#fff}
h3{font-size:24px;font-weight:800;color:var(--aqua-ink);letter-spacing:-.005em}
.lede{font-size:clamp(17px,1.6vw,20px);line-height:1.6;max-width:760px;margin:22px 0 0}
.gel-text{background:linear-gradient(180deg,#ffffff 0%,#c9e6ff 30%,#7fbcf2 62%,#4f97e0 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.ink-gel-text{background:linear-gradient(180deg,#3d8ad4 0%,#165eaa 55%,#0c4d8c 100%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- Hero ---------- */
.hero{padding:0;position:relative;overflow:hidden;color:#dbe9f7;background:
  radial-gradient(900px 520px at 76% 42%,rgba(45,120,200,.45),transparent 70%),
  radial-gradient(700px 400px at 10% 110%,rgba(111,206,159,.14),transparent 70%),
  linear-gradient(180deg,#061e39 0%,#08315c 70%,#0b3e72 100%)}
.hero::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(180deg,rgba(255,255,255,.035) 0 2px,transparent 2px 4px);pointer-events:none}
.hero .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:52px;align-items:center;padding-top:72px;padding-bottom:84px}
.hero h1{font-size:clamp(44px,5.2vw,76px);font-weight:900;color:#fff;letter-spacing:-.025em;line-height:.98}
.hero h1 .l2{display:block;padding-bottom:.06em}
.hero h1 .rule{display:block;height:6px;width:min(100%,560px);margin-top:18px;border-radius:6px;background:linear-gradient(90deg,var(--fiber-teal),var(--fiber) 40%,var(--gel-light));box-shadow:0 0 18px rgba(111,206,159,.55);transform-origin:left center}
.hero .lede{color:#cfe0f2;max-width:600px}
.hero .lede b{color:#fff}
.cta-row{display:flex;flex-wrap:wrap;gap:16px;margin-top:32px}
.fine{margin-top:22px;font:12px/1.5 var(--mono);color:#8fb3d6;letter-spacing:.02em}
.fine b{color:var(--fiber);font-weight:600}

/* Aqua window */
.window{border-radius:12px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.35),0 30px 60px rgba(0,0,0,.45),0 0 80px rgba(45,120,200,.35);overflow:hidden}
.titlebar{position:relative;display:flex;align-items:center;height:30px;padding:0 12px;background:linear-gradient(180deg,#f1f1f1,#d5d5d5 52%,#c9c9c9 53%,#dcdcdc);border-bottom:1px solid #9c9c9c;font:600 12.5px/1 var(--body);color:#4a4a4a}
.titlebar .t{position:absolute;left:0;right:0;text-align:center;pointer-events:none;text-shadow:0 1px 0 #fff}
.lights{display:flex;gap:8px;position:relative;z-index:1}
.lights i{width:13px;height:13px;border-radius:50%;display:block;box-shadow:inset 0 1px 1px rgba(255,255,255,.8),inset 0 -2px 3px rgba(0,0,0,.18),0 0 0 .5px rgba(0,0,0,.45)}
.lights i:nth-child(1){background:radial-gradient(circle at 50% 30%,#ffb0a8,#e2463a 60%,#b8281d)}
.lights i:nth-child(2){background:radial-gradient(circle at 50% 30%,#ffe4a0,#f0a81c 60%,#c07a08)}
.lights i:nth-child(3){background:radial-gradient(circle at 50% 30%,#c4f2a8,#4cb63a 60%,#2b8a1d)}
.window .body{position:relative;background:var(--pinstripe)}
.window .body img{width:100%}

/* Hero stage */
.stage-wrap{position:relative}
.stage .body{aspect-ratio:560/380}
.stage svg.scene{position:absolute;inset:0;width:100%;height:100%}
.scene .wall{fill:rgba(45,120,200,.05);stroke:#2d78c8;stroke-width:4}
.scene .wall-glow{fill:none;stroke:#9dcef8;stroke-width:12;opacity:.45;filter:blur(4px)}
.scene .lbl{font:700 11px var(--mono);letter-spacing:.14em;fill:#0c4d8c}
.scene .lbl.out{fill:#8a96a3}
.scene .cloud{fill:#e9edf2;stroke:#a9b4bf;stroke-width:2}
.scene .strike{stroke:#c0392b;stroke-width:5;stroke-linecap:round}
.scene .path-out{fill:none;stroke:#a9b4bf;stroke-width:4;stroke-linecap:round;stroke-dasharray:1}
.scene .comet{fill:none;stroke:#eafff4;stroke-width:9;stroke-linecap:round;stroke-dasharray:.035 2;stroke-dashoffset:-1.2;filter:drop-shadow(0 0 6px #6fce9f) drop-shadow(0 0 3px #6fce9f);opacity:0}
.scene .path-in{fill:none;stroke:url(#fiberGrad);stroke-width:7;stroke-linecap:round}
.scene .node{fill:#fff;stroke:#0c4d8c;stroke-width:3}
.scene .node-ic{fill:#0c4d8c}
.scene .hub-ring{fill:rgba(157,206,248,.18);stroke:#9dcef8;stroke-width:3;opacity:0}
.scene .hub,.scene .hub-ring,.scene .hub-cube{transform-box:fill-box;transform-origin:center}
.plate-wrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;pointer-events:none}
.hero-cube{position:relative;width:25%;max-width:150px;aspect-ratio:1;margin-bottom:-4px}
.hero-cube img{position:relative;width:100%;height:100%;filter:drop-shadow(0 12px 16px rgba(8,49,92,.38))}
.hero-cube .halo{position:absolute;inset:-22%;border-radius:50%;background:radial-gradient(closest-side,rgba(157,206,248,.85),rgba(157,206,248,.35) 55%,rgba(157,206,248,0));opacity:.55}
.logo-plate{width:62%;padding:14px 22px 10px;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(244,250,255,.96) 50%,rgba(228,240,252,.96) 51%,rgba(248,252,255,.98));border:1px solid #9cc3e8;box-shadow:inset 0 1px 0 #fff,0 14px 34px rgba(8,49,92,.28),0 0 0 6px rgba(157,206,248,.25)}
.logo-plate img{width:100%}
.plate-cap{font:700 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#0c4d8c;background:rgba(255,255,255,.85);padding:7px 12px;border-radius:999px;border:1px solid #cfe2f5}
.status{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin:20px 0 0;padding:0;list-style:none;font:600 11px/1 var(--mono);letter-spacing:.16em;color:#8fb3d6;text-transform:uppercase}
.status li{display:flex;align-items:center;gap:7px}
.status li::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--aqua-gel);box-shadow:0 0 0 1px rgba(157,206,248,.5)}
.status li.ok{color:var(--fiber)}
.status li.ok::before{background:radial-gradient(circle at 50% 35%,#d8ffe9,#6fce9f 60%,#3e9c74)}
.replay{position:absolute;right:10px;top:4px;z-index:3;display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 10px;border-radius:999px;border:1px solid #8aa;background:linear-gradient(180deg,#fff,#e4e4e4 50%,#d8d8d8 51%,#efefef);font:600 11px/1 var(--body);color:#333;cursor:pointer}
.replay:hover{border-color:#2d78c8;color:#0c4d8c}

/* ---------- Intro animation (base = final state; keyframes start from the intro state) ---------- */
.play .window.stage{animation:winIn .6s cubic-bezier(.2,.8,.2,1) both}
.play .wall{stroke-dasharray:1;stroke-dashoffset:0;animation:draw .8s .3s ease-out backwards,wallLock .4s 2.1s ease-out backwards}
.play .wall-glow{animation:fadeIn .4s 2.1s ease-out backwards}
.scene .cloud-g,.scene .path-out,.scene .strike-g{opacity:0}
.play .cloud-g{animation:cloud 1.25s .5s ease-in-out both}
.play .path-out{stroke-dashoffset:0;animation:outCall 1.1s .7s ease-in-out both}
.play .strike-g{animation:strike .55s 1.2s ease-out both}
.play .path-in{stroke-dasharray:1;animation:draw .75s 1.5s ease-in-out backwards}
.play .comet{animation:comet 1s 1.5s ease-in-out both}
.play .hub-cube{animation:hubPop .5s 1.9s cubic-bezier(.3,1.6,.5,1) backwards,hubLift .5s 2.4s ease-in forwards}
.play .hub-ring{animation:ring .9s 2.0s ease-out backwards}
.play .scene-dim{animation:undim .5s 2.5s ease-in backwards}
.scene-dim{opacity:.2}
.play .hero-cube img{animation:cubeIn .85s 2.45s cubic-bezier(.2,.9,.25,1) backwards}
.play .hero-cube .halo{animation:halo 1.2s 2.6s ease-out backwards}
.play .logo-plate{animation:plateIn .6s 2.95s cubic-bezier(.2,.9,.25,1.1) backwards}
.play .plate-cap{animation:fadeUp .5s 3.25s ease-out backwards}
.play .status li:nth-child(1){animation:lamp .3s .75s backwards}
.play .status li:nth-child(2){animation:lamp .3s 1.5s backwards}
.play .status li:nth-child(3){animation:lamp .3s 2.1s backwards}
.play .status li:nth-child(4){animation:lampOk .3s 2.7s backwards}
.play .hero h1 .rule{animation:rule .9s 1.6s cubic-bezier(.2,.8,.2,1) backwards}
@keyframes winIn{from{opacity:0;transform:translateY(18px) scale(.965);filter:blur(6px)}}
@keyframes draw{from{stroke-dashoffset:1}}
@keyframes wallLock{from{stroke:#9aa7b4;stroke-width:3}}
@keyframes fadeIn{from{opacity:0}}
@keyframes cloud{0%{opacity:0;transform:translateY(-8px)}20%,70%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-6px) scale(.92)}}
@keyframes outCall{0%{opacity:1;stroke-dashoffset:1}45%{opacity:1;stroke-dashoffset:0}75%{opacity:1;stroke-dashoffset:0}100%{opacity:0;stroke-dashoffset:0}}
@keyframes strike{0%{opacity:0;transform:scale(.4)}30%,75%{opacity:1;transform:scale(1)}100%{opacity:0}}
@keyframes comet{0%{opacity:0;stroke-dashoffset:.035}10%{opacity:1}85%{opacity:1}100%{opacity:0;stroke-dashoffset:-1}}
@keyframes hubPop{from{transform:scale(.2) rotate(-20deg);opacity:0}}
@keyframes hubLift{to{opacity:0;transform:translateY(-34px) scale(1.5)}}
@keyframes ring{0%{transform:scale(.5);opacity:0}25%{opacity:1}100%{transform:scale(1.7);opacity:0}}
@keyframes cubeIn{0%{opacity:0;transform:translateY(40%) scale(.3) rotate(-16deg);filter:blur(6px)}60%{opacity:1;transform:translateY(-5%) scale(1.07) rotate(2deg);filter:blur(0)}100%{transform:none}}
@keyframes halo{0%{opacity:0;transform:scale(.4)}35%{opacity:1}100%{opacity:.55;transform:scale(1)}}
@keyframes undim{from{opacity:1}}
@keyframes plateIn{from{opacity:0;transform:scale(.86) translateY(14px);filter:blur(5px)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}}
@keyframes lamp{from{color:#4a6a8a}}
@keyframes lampOk{from{color:#8fb3d6}}
@keyframes rule{from{transform:scaleX(0)}}
.scene .strike-g,.scene .cloud-g{transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:reduce){
  .play *,.play{animation:none !important}
  .gel::after,.progress span{animation:none !important}
  html{scroll-behavior:auto}
  .replay{display:none}
}

/* ---------- Sections ---------- */
section{position:relative;padding:112px 0}
.hero.play,.hero{padding:0}
.light{background:var(--pinstripe)}
.white{background:#fff}
.dark{color:#cfe0f2;background:radial-gradient(800px 420px at 85% 0%,rgba(45,120,200,.35),transparent 70%),linear-gradient(180deg,#08315c,#061e39)}
.dark::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(180deg,rgba(255,255,255,.03) 0 2px,transparent 2px 4px);pointer-events:none}
.dark .wrap{position:relative}
.secnum{font:700 12px/1 var(--mono);letter-spacing:.2em;color:var(--muted)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.card{position:relative;padding:30px 28px 28px;border-radius:16px;background:#fff;border:1px solid #d3dbe4;box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(0,0,0,.06),0 14px 30px rgba(8,49,92,.08)}
.card p{margin:12px 0 0}
.card .tag{display:inline-block;font:700 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;padding:6px 10px;border-radius:999px;margin-bottom:16px}
.rented .tag{color:#7b8794;background:#eef1f4;border:1px solid #d5dbe2}
.rented h3{color:#3a4654}
.kicker{margin:44px 0 0;font:italic 400 clamp(19px,2vw,24px)/1.45 var(--body);color:var(--aqua-ink);border-left:4px solid var(--aqua);padding-left:20px;max-width:820px}

.promise h2{font-size:clamp(44px,6.4vw,92px)}
.owns{display:flex;flex-wrap:wrap;gap:10px 14px;margin:30px 0 0;padding:0;list-style:none}
.owns li{font:800 clamp(18px,2vw,24px)/1 var(--display);color:#fff;padding:12px 18px 12px 14px;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.04) 50%,rgba(255,255,255,0) 51%,rgba(255,255,255,.07));border:1px solid rgba(157,206,248,.35);display:flex;align-items:center;gap:10px}
.owns li::before{content:"";width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 50% 35%,#d8ffe9,#6fce9f 60%,#3e9c74);box-shadow:0 0 10px rgba(111,206,159,.7)}
.pillar{padding:30px 28px;border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03));border:1px solid rgba(157,206,248,.25);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.pillar h3{color:#fff;display:flex;align-items:center;gap:12px}
.pillar h3 .ico{width:38px;height:38px;flex:none;border-radius:11px;background:var(--aqua-gel);border:1px solid #0c4d8c;box-shadow:inset 0 1px 0 rgba(255,255,255,.6);display:grid;place-items:center}
.pillar p{margin:14px 0 0;color:#cfe0f2}
blockquote.orig{margin:56px 0 0;padding:28px 32px;border-radius:16px;background:rgba(0,0,0,.18);border:1px solid rgba(157,206,248,.2);font:400 clamp(18px,1.8vw,22px)/1.5 var(--body);color:#fff;max-width:900px}
blockquote.orig cite{display:block;margin-top:12px;font:600 12px/1.4 var(--mono);letter-spacing:.08em;color:var(--sky);font-style:normal;text-transform:uppercase}

.what .feat{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px}
.feat .card h3{font-size:20px;display:flex;gap:12px;align-items:center}
.feat .card h3 .dot{width:30px;height:30px;flex:none;border-radius:9px;background:var(--aqua-gel);border:1px solid #0c4d8c;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 2px 6px rgba(45,120,200,.35)}
.feat .card p{font-size:15px;color:#4a4a4a}
.what-top{display:grid;grid-template-columns:1.7fr .5fr;gap:56px;align-items:end}
.cube{justify-self:center;width:220px;filter:drop-shadow(0 24px 30px rgba(8,49,92,.3))}

/* screens */
.shots{display:grid;grid-template-columns:repeat(12,1fr);gap:28px;margin-top:56px;align-items:start}
.shots figure{margin:0}
.shots .big{grid-column:1 / span 9}
.shots .half{grid-column:span 6}
.shots .third{grid-column:span 4}
.shots-grid{margin-top:36px;row-gap:36px}
.shots .phone-fig{grid-column:span 3;justify-self:center;align-self:center}
.shots figcaption{margin-top:14px;font-size:14px;color:#4a4a4a;line-height:1.5}
.shots figcaption b{color:var(--aqua-ink)}
.window.shot{box-shadow:0 0 0 1px rgba(0,0,0,.25),0 24px 50px rgba(8,49,92,.22)}
.phone{width:min(230px,100%);padding:10px;border-radius:34px;background:linear-gradient(145deg,#3a3a3a,#0b0b0b);box-shadow:inset 0 0 0 2px #555,0 24px 44px rgba(8,49,92,.3)}
.phone img{border-radius:25px}
.redact-note{margin-top:28px;font:12px/1.5 var(--mono);color:var(--muted)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:64px;position:relative}
.progress{height:16px;border-radius:999px;margin-top:56px;border:1px solid #0c4d8c;overflow:hidden;background:#cfe0f2;box-shadow:inset 0 1px 3px rgba(0,0,0,.25)}
.progress span{display:block;height:100%;width:100%;background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,.15) 50%,rgba(0,0,0,0) 51%,rgba(255,255,255,.2)),repeating-linear-gradient(-45deg,#2d78c8 0 12px,#6aafec 12px 24px);background-size:100% 100%,34px 34px;animation:barber 1.2s linear infinite}
@keyframes barber{to{background-position:0 0,34px 0}}
.step .num{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;font:900 20px/1 var(--display);color:#fff;background:var(--aqua-gel);border:1px solid #0c4d8c;text-shadow:0 -1px 0 rgba(8,49,92,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 6px 14px rgba(45,120,200,.35);margin-bottom:16px}
.step p{margin:10px 0 0;font-size:15px;color:#4a4a4a}

/* heritage */
.timeline{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.timeline li{padding:20px 18px;border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.03));border:1px solid rgba(157,206,248,.25)}
.timeline b{display:block;font:900 26px/1 var(--display);color:#fff;margin-bottom:10px}
.timeline span{font-size:14px;color:#cfe0f2;line-height:1.5}
.timeline li.now{border-color:var(--fiber);box-shadow:0 0 0 1px rgba(111,206,159,.35),0 0 30px rgba(111,206,159,.15)}
.timeline li.now b{color:var(--fiber)}

/* CTA */
.cta{text-align:center}
.cta h2{font-size:clamp(40px,5.6vw,80px)}
.cta .lede{margin:22px auto 0}
.cta .cta-row{justify-content:center}
.cta .mark{width:120px;margin:0 auto 22px;filter:drop-shadow(0 14px 18px rgba(8,49,92,.28))}

footer{background:linear-gradient(180deg,#2b2b2b,#000 70%);color:#bbb;font-size:13px;padding:34px 0;border-top:1px solid #000}
footer .wrap{display:flex;flex-wrap:wrap;gap:18px 40px;justify-content:space-between;align-items:center}
footer a{color:#ddd}
footer p{margin:4px 0}
footer .tm{font-size:12px;color:#999;max-width:620px}
footer .foot-logo{flex:0 0 100%;max-width:100%}
footer .si-mark{display:inline-block;max-width:100%;line-height:0;border-radius:2px}
footer .si-mark:focus-visible{outline:2px solid #9dcef8;outline-offset:6px}
footer .si-mark img{display:block;max-width:100%;height:auto}

/* ---------- Responsive ---------- */
@media (max-width:1020px){
  .hero .wrap{grid-template-columns:1fr;min-height:0;padding-top:56px;gap:44px}
  .stage-wrap{max-width:620px}
  .grid3,.what .feat{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .timeline{grid-template-columns:1fr 1fr}
  .what-top{grid-template-columns:1fr}
  .cube{justify-self:start;width:150px}
  .shots .big{grid-column:1 / span 12}
  .shots .phone-fig{grid-column:1 / span 12}
  .shots .third{grid-column:span 6}
  .nav .hide-md{display:none}
}
@media (max-width:640px){
  section{padding:76px 0}
  .wrap{padding:0 20px}
  .nav ul li:not(.keep){display:none}
  .brand small{display:none}
  .hero .wrap{padding-top:40px;padding-bottom:64px}
  .hero h1{font-size:clamp(40px,11.4vw,56px)}
  .grid3,.what .feat,.steps,.timeline{grid-template-columns:1fr}
  .shots{gap:24px}
  .shots .half,.shots .third{grid-column:1 / span 12}
  .gel,.glass{width:100%}
  .status{gap:10px 14px}
  .titlebar .t{display:none}
}
@media (max-width:640px){
  .plate-cap{font-size:9px;letter-spacing:.08em;padding:5px 9px}
  .logo-plate{width:72%;padding:10px 14px 6px}
  .hero-cube{width:22%}
  .plate-wrap{gap:6px}
}

.window.shot .body a{display:block;cursor:zoom-in}
.window.shot .body a:focus-visible{outline-offset:-3px}

/* Get the source (GitHub download) */
.source{margin-top:48px;padding:28px 32px;border:1px solid rgba(0,0,0,.08);border-radius:16px;background:rgba(0,0,0,.025)}
.source h3{margin:0 0 8px}
.source p{margin:0}
.source .cta-row{margin-top:20px}
.source .clone{margin-top:18px;overflow-x:auto}
.source .clone code{display:inline-block;padding:8px 12px;border-radius:8px;background:rgba(0,0,0,.06);font-size:14px;white-space:nowrap}
.source p a{color:var(--aqua-deep);font-weight:700}
.source .formats{margin-top:10px;font-size:13px;color:#5a6b80}.source .formats a{color:var(--aqua-deep);font-weight:700}