/* Brand system: frame corners, city dots, one red dot, circuit trace. */

/* 1. Header logo: the frame starts alone in the centre, its dots merge into the red dot,
   then it glides left while the name slides out from behind it. Afterwards only the dot loop continues. */
.brand{position:relative}
.brand .bt{display:inline-block}
.brand.intro .lm-city{animation:biCity 1.9s cubic-bezier(.6,0,.3,1) both;animation-delay:calc(var(--i) * 60ms)}
@keyframes biCity{0%,10%{translate:var(--tx) var(--ty);scale:0;opacity:0}22%{opacity:1;scale:1.3}40%{translate:0 0;scale:1;opacity:1}62%{translate:0 0;opacity:1}86%,100%{translate:var(--tx) var(--ty);scale:.6;opacity:0}}
.brand.intro .lm-ln{animation:biLn 1.9s ease-in-out both}
@keyframes biLn{0%,36%{stroke-dashoffset:14;opacity:.5}56%,64%{stroke-dashoffset:0;opacity:.5}86%,100%{stroke-dashoffset:0;opacity:0}}
.brand.intro .lm-dot{animation:biDot 2.2s cubic-bezier(.2,.8,.2,1) both}
@keyframes biDot{0%,8%{scale:1}16%,78%{scale:0}88%{scale:1.3}100%{scale:1}}
.brand.intro .mark{animation:biMark .95s cubic-bezier(.65,0,.25,1) 2.05s both}
@keyframes biMark{from{translate:var(--mv, 150px) 0}to{translate:0 0}}
.brand.intro .bt{animation:biText .95s cubic-bezier(.65,0,.25,1) 2.05s both}
@keyframes biText{from{translate:calc(-2 * var(--mv, 150px)) 0;clip-path:inset(-30% -5% -30% calc(3 * var(--mv, 150px)))}to{translate:0 0;clip-path:inset(-30% -5% -30% 0)}}
.brand.loop .lm-city{animation-delay:calc(var(--i) * 70ms)}
.brand.loop .lm-ln,.brand.loop .lm-dot{animation-delay:0s}

/* 2. Section labels: several red dots converge into one red dot, then the label rises in beside it. Big, black. */
.eyebrow,.eyebrow.blue,.upsell .eyebrow{display:inline-flex;align-items:center;gap:.7em;padding:0;background:none;box-shadow:none;font-family:var(--mono);font-size:15px;font-weight:600;line-height:1.2;letter-spacing:.2em;text-transform:uppercase;color:var(--fg);white-space:nowrap}
.stage .eyebrow,.stage .eyebrow.blue{color:var(--stage-fg)}
@media (max-width:640px){.eyebrow,.eyebrow.blue,.upsell .eyebrow{white-space:normal;font-size:13px;letter-spacing:.16em}}
.eyebrow .dm{flex:none;display:block;width:22px;height:17px}
.eyebrow .dm svg{display:block;width:100%;height:100%;overflow:visible}
.dm *{transform-box:fill-box;transform-origin:center}
.dm .c{fill:var(--rec);opacity:0}
.dm .d{fill:var(--rec)}
.eyebrow .et{display:inline-block}
.eyebrow.armed .dm .d{scale:0}
.eyebrow.armed .et{opacity:0;translate:0 .25em}
.eyebrow.in .dm .c{animation:dmC 1.3s cubic-bezier(.6,0,.3,1) both;animation-delay:calc(var(--i) * 55ms)}
@keyframes dmC{0%{scale:0;opacity:0}18%{scale:1.35;opacity:1}30%,48%{scale:1;translate:0 0;opacity:1}80%{translate:var(--tx) var(--ty);scale:.8;opacity:1}88%,100%{translate:var(--tx) var(--ty);opacity:0}}
.eyebrow.in .dm .d{animation:dmD 1.5s cubic-bezier(.2,.8,.2,1) both}
@keyframes dmD{0%,62%{scale:0}74%{scale:1.35}84%,100%{scale:1}}
.eyebrow.armed.in .et{opacity:1;translate:0 0;transition:opacity .6s ease 1.05s,translate .7s cubic-bezier(.2,.8,.2,1) 1.05s}
@media (prefers-reduced-motion:reduce){.eyebrow .et{opacity:1!important;translate:none!important}.eyebrow .dm .d{scale:1!important}}

/* 3. Frame corners lock on when a card is hovered or focused */
.city,.tier,.step,.tile{position:relative}
.city::before,.tier::before,.step::before,.tile::before{content:"";position:absolute;inset:-8px;z-index:2;pointer-events:none;border-radius:4px;--c:currentColor;--L:22px;--T:2px;
  background:
    linear-gradient(var(--c),var(--c)) top left/var(--L) var(--T) no-repeat,linear-gradient(var(--c),var(--c)) top left/var(--T) var(--L) no-repeat,
    linear-gradient(var(--c),var(--c)) top right/var(--L) var(--T) no-repeat,linear-gradient(var(--c),var(--c)) top right/var(--T) var(--L) no-repeat,
    linear-gradient(var(--c),var(--c)) bottom left/var(--L) var(--T) no-repeat,linear-gradient(var(--c),var(--c)) bottom left/var(--T) var(--L) no-repeat,
    linear-gradient(var(--c),var(--c)) bottom right/var(--L) var(--T) no-repeat,linear-gradient(var(--c),var(--c)) bottom right/var(--T) var(--L) no-repeat;
  opacity:0;scale:1.06;transition:opacity .25s,scale .4s cubic-bezier(.2,.8,.2,1)}
.city:hover::before,.city:focus-visible::before,.tier:hover::before,.step:hover::before,.tile:hover::before{opacity:1;scale:1}
.tile::before{inset:18px;--c:rgba(255,255,255,.9);--L:30px}

/* 4. Where we shoot: every city wired to one red desk, inside frame corners */
.net{margin-top:48px}
.net svg{display:block;width:100%;height:auto;overflow:visible}
.net .fc{fill:none;stroke:var(--fg);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.net .wire{stroke:var(--line);stroke-width:1;fill:none;transition:stroke .3s,opacity .3s}
.net .wire.on{stroke:var(--fg-3);stroke-dasharray:var(--len) var(--len);stroke-dashoffset:var(--len);animation:netDraw 1.1s cubic-bezier(.6,0,.3,1) forwards;animation-delay:calc(var(--k) * 70ms)}
@keyframes netDraw{to{stroke-dashoffset:0}}
.net .cd{fill:var(--fg-3);transition:fill .3s}
.net .cd.on{fill:var(--fg)}
.net .cd.hot{fill:var(--rec)}
.net .ring,.net .deskring{transform-box:fill-box;transform-origin:center;vector-effect:non-scaling-stroke}
.net .ring{fill:none;stroke:var(--rec);stroke-width:1.5;opacity:0}
.net .ring.hot{animation:netRing 1.2s ease-out infinite}
@keyframes netRing{0%{scale:1;opacity:.9}100%{scale:4;opacity:0}}
.net .desk{fill:var(--rec)}
.net .deskring{fill:none;stroke:var(--rec);stroke-width:1.2;animation:netRing2 2.4s ease-out infinite}
@keyframes netRing2{0%{scale:1;opacity:.7}100%{scale:3.2;opacity:0}}
.net .pk{fill:var(--rec)}
.net text{font-family:var(--mono);font-size:11px;fill:var(--fg-2);letter-spacing:.06em}
.net text.dl{fill:var(--rec);font-weight:600}
@media (max-width:640px){.net text{font-size:20px}}

/* Hero headline: first line stays on one line; a highlighter sweep draws behind "on Earth." */
.hero .h-hero{font-size:clamp(40px,7.2vw,100px)}
.hero .l1{white-space:nowrap}
@media (max-width:640px){.hero .l1{white-space:normal}}
.hero .hl{position:relative;isolation:isolate;white-space:nowrap}
.hero .hl::before{content:"";position:absolute;z-index:-1;left:-.07em;right:-.07em;top:.14em;bottom:.04em;border-radius:.07em;background:rgba(0,113,227,.2);transform-origin:left;scale:0 1;animation:hlSweep 1.2s cubic-bezier(.65,0,.25,1) 1.1s forwards}
@keyframes hlSweep{to{scale:1 1}}
@media (prefers-reduced-motion:reduce){.hero .hl::before{scale:1 1}}

/* Header menu as glass: each row blurs the page itself (so no blur on .nav, backdrop filters do not nest); the menu row is a frosted strip with a slow light sheen */
.nav{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:0}
.nav-row.nav-top{background:rgba(255,255,255,.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
.nav-row:not(.nav-top){max-width:none;position:relative;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.68),rgba(255,255,255,.54));
  -webkit-backdrop-filter:saturate(200%) blur(26px);backdrop-filter:saturate(200%) blur(26px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(0,0,0,.07),0 10px 30px -18px rgba(0,0,0,.35)}
.nav-row:not(.nav-top)::before{content:"";position:absolute;top:0;bottom:0;left:0;width:26%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);transform:translateX(-130%) skewX(-18deg);animation:glassSheen 9s ease-in-out 2s infinite}
@keyframes glassSheen{0%,55%{transform:translateX(-130%) skewX(-18deg)}100%{transform:translateX(480%) skewX(-18deg)}}
.nav-links{position:relative;z-index:1;border-top:0}

/* Comparison card labels: subtle grey chips (they had inherited the dark HUD tag style from the image tiles) */
.col .tag{display:inline-flex;align-self:flex-start;padding:5px 10px;border-radius:4px;background:rgba(255,255,255,.07);-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--stage-mute);font-size:12px;font-weight:600;letter-spacing:.02em}
.col.us .tag{background:#eef0f4;color:var(--accent-ink)}

/* How it works: a thumbnail fills the top quarter of each step card instead of an icon */
.step{padding:0;gap:0;overflow:hidden}
.step .thumb{position:relative;flex:none;aspect-ratio:16/5;background:#0d0f13;overflow:hidden}
.step .thumb canvas{position:absolute;inset:0;width:100%;height:100%;display:block;animation:kb 26s ease-in-out infinite alternate;transform-origin:60% 40%}
.step:nth-child(even) .thumb canvas{animation-delay:-9s}
.step .sn{position:absolute;left:12px;top:10px;z-index:1;font-size:10px;letter-spacing:.14em;color:#fff;background:rgba(0,0,0,.42);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:4px 8px;border-radius:4px}
.step .body{display:flex;flex-direction:column;gap:12px;flex:1;padding:20px 24px 26px}
.step::before{display:none}
.step .thumb::after{content:"";position:absolute;inset:8px;z-index:1;pointer-events:none;--c:#fff;--L:18px;--T:2px;
  background:linear-gradient(var(--c),var(--c)) top left/var(--L) var(--T) no-repeat,linear-gradient(var(--c),var(--c)) top left/var(--T) var(--L) no-repeat,
    linear-gradient(var(--c),var(--c)) top right/var(--L) var(--T) no-repeat,linear-gradient(var(--c),var(--c)) top right/var(--T) var(--L) no-repeat,
    linear-gradient(var(--c),var(--c)) bottom left/var(--L) var(--T) no-repeat,linear-gradient(var(--c),var(--c)) bottom left/var(--T) var(--L) no-repeat,
    linear-gradient(var(--c),var(--c)) bottom right/var(--L) var(--T) no-repeat,linear-gradient(var(--c),var(--c)) bottom right/var(--T) var(--L) no-repeat;
  opacity:0;scale:1.05;transition:opacity .25s,scale .4s cubic-bezier(.2,.8,.2,1)}
.step:hover .thumb::after{opacity:1;scale:1}

/* Network hover: grow, light the wire, show the city label, run signals to the desk */
.net .hit{fill:transparent;cursor:pointer;pointer-events:all}
.net a:focus-visible{outline:none}
.net a:focus-visible .hit{stroke:var(--accent);stroke-width:2}
.net .hl{stroke:var(--rec);stroke-width:2;stroke-linecap:round;fill:none;stroke-dasharray:var(--len) var(--len);stroke-dashoffset:var(--len);opacity:0;pointer-events:none}
.net .hl.show{opacity:1;animation:netDraw .6s cubic-bezier(.6,0,.3,1) forwards}
.net .cd{transform-box:fill-box;transform-origin:center;transition:transform .25s cubic-bezier(.2,.8,.2,1),fill .3s}
.net .cd.hot{transform:scale(1.9)}
.net .pk2{fill:var(--rec);pointer-events:none}
.net .tip{opacity:0;transition:opacity .2s;pointer-events:none}
.net .tip .tbg{fill:var(--bg);stroke:var(--line)}
.net .tip .t1{font-family:var(--display);font-size:15px;font-weight:700;fill:var(--fg);letter-spacing:-.02em}
.net .tip .t2{font-size:11px;fill:var(--fg-2);letter-spacing:.04em}
.net:hover .deskring{animation-duration:1.4s}
@media (max-width:640px){.net .tip .t1{font-size:26px}.net .tip .t2{font-size:19px}}

/* Comparison cards as subtle glass: frosted, with a soft glow of colour behind so the glass has something to blur */
.compare{isolation:isolate}
.compare::before{content:"";position:absolute;inset:-6px -30px -50px;z-index:-1;pointer-events:none;filter:blur(46px);opacity:.8;
  background:radial-gradient(32% 52% at 17% 42%,rgba(0,113,227,.5),transparent 72%),radial-gradient(30% 48% at 50% 72%,rgba(255,59,48,.28),transparent 72%),radial-gradient(32% 52% at 84% 38%,rgba(48,209,150,.34),transparent 72%)}
.col:not(.us){background:rgba(26,26,30,.78);-webkit-backdrop-filter:blur(26px) saturate(170%);backdrop-filter:blur(26px) saturate(170%);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(255,255,255,.07),0 26px 50px -30px rgba(0,0,0,.5)}
.col:not(.us) .tag{color:#c7c7cc}
.col.us{background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(26px) saturate(170%);backdrop-filter:blur(26px) saturate(170%)}
.compare.has-ring .col.us{box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.7),0 26px 50px -30px rgba(0,0,0,.25)}