/* The original landing, with a sharper visual field and a real 3D centrepiece. */
body::before{opacity:.018}
.nav.scrolled{backdrop-filter:none}
.nav-inner,.nav.open .nav-links{backdrop-filter:blur(10px)}
.heat{text-shadow:none}
.float-card{backdrop-filter:blur(5px);background:rgba(19,15,12,.9);box-shadow:0 10px 25px #0003}
.core-scene{isolation:isolate;touch-action:pan-y}
.core-reticle{opacity:.36}
.core{background:url('./assets/globe/globe-poster.webp') center/155% no-repeat;border-color:transparent;box-shadow:none;animation:none;cursor:grab}
.core:hover,.core:focus-visible{box-shadow:0 0 20px #ffb13a20,inset 0 0 3px #d49a49}
.core:active{cursor:grabbing}
.sphere-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:1;opacity:0;transition:opacity .65s}
.webgl-ready .sphere-canvas{opacity:1}
.webgl-ready .core-scene{transform:none;transform-style:flat}
.webgl-ready .core{width:66%;max-width:350px;position:relative;z-index:2;background:none;border:0;box-shadow:none;filter:none;animation:none;transition:transform .65s;transform:none}
.webgl-ready .core::before,.webgl-ready .core::after,.webgl-ready .orbit,.webgl-ready .core-pulse{display:none}
.webgl-ready .core:focus-visible{outline:2px solid #ffd6aa;outline-offset:7px;box-shadow:none}
/* Own gestures only on the globe; swipes beside it still scroll the page. */
.webgl-ready .core{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.webgl-ready[data-scene=devices] .core{transform:scale(.62)}
.core-scene .float-card{z-index:4;pointer-events:none;transition:opacity .35s,transform .55s}
.core-scene .float-card.a{left:-1%;top:5%}
.core-scene .float-card.b{right:0;bottom:5%}
.core-wrap[data-scene=devices] .float-card{opacity:0;transform:translateY(12px)}
.core-hint{min-height:3.1em;max-width:360px;text-align:center;line-height:1.55;color:#baaa9c;font-size:12px;padding-inline:8px}
.sphere-devices{position:absolute;inset:0;z-index:5;pointer-events:none;visibility:hidden;opacity:0;transition:opacity .35s,visibility .35s}
[data-scene=devices] .sphere-devices{visibility:visible;opacity:1}
.sphere-device{position:absolute;left:var(--device-x,20%);top:var(--device-y,28%);transform:translate(-50%,-50%);width:84px;min-height:76px;padding:10px 8px;display:flex;align-items:center;justify-content:center;gap:6px;flex-direction:column;border:1px solid #95725366;border-radius:18px;background:linear-gradient(145deg,#292017f7,#100e0cf7);box-shadow:0 8px 18px #0005,inset 0 1px #fff1;color:#dfd0c0;font-size:11px;font-weight:650;cursor:pointer;pointer-events:auto;transition:background .25s,border-color .25s,color .25s,box-shadow .25s}
.sphere-device svg{height:24px;width:24px;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sphere-device-android{--device-x:80%;--device-y:28%}
.sphere-device-windows{--device-x:20%;--device-y:75%}
.sphere-device-macos{--device-x:80%;--device-y:75%}
.sphere-device:hover,.sphere-device[aria-pressed=true]{border-color:#ffac66;color:#fff0da;background:linear-gradient(145deg,#55321c,#24170f);box-shadow:0 0 0 4px #ff8c2810,0 9px 25px #0005}
.sphere-device:focus-visible{outline:2px solid #ffe0bb;outline-offset:5px}
.sphere-device-detail{display:none;margin:0;min-height:3.1em;font-size:12px;line-height:1.55;color:#ffc492;text-underline-offset:5px;text-align:center}
.sphere-device-detail:hover{text-decoration:underline}
[data-scene=devices] .core-hint{display:none}
[data-scene=devices] .sphere-device-detail{display:block}
#device-detail{scroll-margin-top:120px}
.core-wrap:not(.webgl-ready)[data-scene=privacy] .core{transform:scale(.84);outline:1px solid #ffcf9b;outline-offset:22px}
.core-wrap:not(.webgl-ready)[data-scene=privacy] .core::after{inset:-29%;transform:rotateY(28deg) rotateZ(35deg);border-width:2px}
.core-wrap:not(.webgl-ready)[data-scene=devices] .core{transform:scale(.6)}
.core-wrap:not(.webgl-ready)[data-scene=devices] .orbit{opacity:.25}
@media(max-width:900px){.core-scene .float-card.a{left:0;top:4%}.core-scene .float-card.b{bottom:3%}.core-wrap{max-width:530px}}
@media(max-width:650px){.core-scene{height:clamp(310px,92vw,390px)}.core-scene .float-card.a{top:0;max-width:195px;padding:9px 11px}.core-scene .float-card.b{bottom:0;padding:9px 11px}.core-hint{font-size:11px;max-width:280px}.sphere-device{width:68px;min-height:66px;border-radius:15px;padding:8px 4px;font-size:10px}.sphere-device svg{width:22px;height:22px}.sphere-device-detail{font-size:11px}.webgl-ready .core{width:65%}}
@media(prefers-reduced-motion:reduce){.sphere-canvas,.sphere-devices,.sphere-device{transition:none}}
html[data-globe-variant=B] .core-wrap:not(.webgl-ready) .core{filter:saturate(1.7) hue-rotate(-13deg)}
/* Give the interactive globe equal weight to the headline on larger screens. */
@media(min-width:901px){
  .hero-grid{grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:20px}
  .hero h1{font-size:clamp(3.3rem,5.55vw,5.55rem);line-height:1.03}
  .core-wrap{min-height:680px}
  .core-scene{min-height:550px}
  .core-scene .float-card.a{left:0;top:4%}
  .core-scene .float-card.b{right:0;bottom:3%}
  .webgl-ready .core{width:78%;max-width:470px}
}
@media(min-width:901px) and (max-width:1100px){
  .hero-grid{gap:12px}
  .hero h1{font-size:clamp(3.2rem,5.5vw,4.5rem)}
  .core-wrap{min-height:600px}
  .core-scene{min-height:470px}
}