/* Arctic Support — сайт.
   Две раскладки:
   • компьютер (широкое окно): живая сцена на весь экран, текст и кнопки слева поверх неё, всё в один экран;
   • телефон и планшет: сцена сверху с медленной панорамой, под ней заголовок, кнопки и преимущества. */
:root{
  --bg:#02060d;
  --ink:#eef7ff;
  --soft:#cfe0ef;
  --muted:#93abc2;
  --accent:#4cb6ff;
  --accent-2:#9adcff;
  --neon:#39a7ff;
  --font:"Manrope","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --font-display:"Montserrat","Arial Black","Segoe UI",sans-serif;
  --font-hand:"Caveat","Segoe Print","Comic Sans MS",cursive;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --vh:1vh;
  --gx:clamp(16px,4.8vw,34px);
  color-scheme:dark;
}
@supports (height:1svh){:root{--vh:1svh}}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--bg);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font:500 16px/1.5 var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;-webkit-tap-highlight-color:transparent}
img,svg,canvas{display:block}
a{color:inherit}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.no-scroll body{overflow:hidden}
.hl{color:var(--accent)}

/* ═════════ hero / scene ═════════ */
.hero{position:relative;isolation:isolate}
.scene{position:relative;height:clamp(360px,calc(var(--vh) * 60),780px);overflow:hidden;background:#050b16;touch-action:pan-y;user-select:none;-webkit-user-select:none}
#gl{position:absolute;inset:0;width:100%;height:100%}
.stage{position:absolute;left:0;top:0;width:1672px;height:941px;transform-origin:0 0;will-change:transform}
.fb{position:absolute;display:none;pointer-events:none;user-select:none}
.fb-base{left:0;top:0;width:1672px;height:941px}
.fb-aurora{mix-blend-mode:screen;animation:fbAur 9s ease-in-out infinite alternate}
@keyframes fbAur{from{opacity:.65;transform:translateX(-4px)}to{opacity:1;transform:translateX(5px) scaleY(1.04)}}
.fb-heli{animation:fbHeli 7s ease-in-out infinite alternate}
@keyframes fbHeli{from{transform:translate(-6px,1px) rotate(.6deg)}to{transform:translate(7px,-2px) rotate(-.8deg)}}
.nogl .fb{display:block}
.nogl #gl{display:none}
.scene-shade{position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(180deg,rgba(2,6,13,.62) 0%,rgba(2,6,13,0) 20%,rgba(2,6,13,0) 58%,rgba(2,6,13,.78) 84%,var(--bg) 100%)}

/* hotspots, bubbles, z's live in picture coordinates (inside .stage) */
.hot{position:absolute;background:transparent;border:0;padding:0;margin:0;cursor:pointer;border-radius:40%;outline:none;-webkit-appearance:none;appearance:none}
.zzz{position:absolute;left:912px;top:566px;width:70px;height:90px;pointer-events:none;opacity:0;transition:opacity 1s}
.live .zzz{opacity:1}
.zzz span{position:absolute;left:0;bottom:0;font:800 19px/1 var(--font-display);color:#b8e6ff;text-shadow:0 0 6px rgba(90,190,255,.95),0 0 14px rgba(60,150,255,.6);opacity:0;animation:zz 4.5s ease-in-out infinite}
.zzz span:nth-child(2){animation-delay:1.5s;font-size:15px}
.zzz span:nth-child(3){animation-delay:3s;font-size:12px}
@keyframes zz{0%{opacity:0;transform:translate(0,0) rotate(-10deg) scale(.5)}18%{opacity:.9}100%{opacity:0;transform:translate(38px,-78px) rotate(14deg) scale(1.2)}}
.bubble{position:absolute;z-index:3;padding:.6em .95em;border-radius:.95em;font:600 calc(15px / var(--s,1))/1.25 var(--font);white-space:nowrap;letter-spacing:.01em;color:#e9f7ff;
  background:rgba(5,13,27,.84);border:1px solid rgba(110,195,255,.42);box-shadow:0 0 22px rgba(60,160,255,.28),inset 0 0 12px rgba(80,170,255,.12);
  pointer-events:none;transform:translate(-50%,-100%);animation:bub 2.8s var(--ease-out) forwards}
.bubble::after{content:"";position:absolute;left:50%;bottom:-.4em;width:.7em;height:.7em;margin-left:-.35em;background:inherit;border-right:1px solid rgba(110,195,255,.42);border-bottom:1px solid rgba(110,195,255,.42);transform:rotate(45deg)}
@keyframes bub{0%{opacity:0;transform:translate(-50%,-80%) scale(.85)}12%{opacity:1;transform:translate(-50%,-100%) scale(1)}80%{opacity:1;transform:translate(-50%,-104%)}100%{opacity:0;transform:translate(-50%,-112%)}}
.heart{position:absolute;font-size:calc(18px / var(--s,1));pointer-events:none;color:#7fd0ff;text-shadow:0 0 8px rgba(80,180,255,.9);animation:heart 1.6s ease-out forwards}
@keyframes heart{0%{opacity:0;transform:translate(-50%,0) scale(.4)}20%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx,0px)),-70px) scale(1.2)}}

/* ═════════ content (phones first) ═════════ */
.ui{position:static}
.hero-copy,.panel-wrap{z-index:3}
.topbar{position:absolute;z-index:5;top:max(14px,env(safe-area-inset-top,0px));left:max(var(--gx),env(safe-area-inset-left,0px));pointer-events:none}
.logo{display:inline-flex;align-items:center;gap:.55em;text-decoration:none;color:#fff;pointer-events:auto;font-size:clamp(15px,4.4vw,19px)}
.logo-ico{position:relative;width:2.6em;flex:none;aspect-ratio:var(--iar,1.19)}
.logo-ico img{position:absolute;inset:0;width:100%;height:100%}
.logo-ico .glow{inset:auto}
.logo-txt{display:grid;line-height:.92}
.logo-main{font:900 italic 1.45em/1 var(--font-display);letter-spacing:.01em;text-transform:uppercase;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.logo-sub{font:700 .56em/1.2 var(--font-display);letter-spacing:.52em;text-transform:uppercase;margin-top:.32em;color:#e6f3ff}

.hero-copy{position:relative;width:min(100%,600px);margin:-62px auto 0;padding:0 var(--gx);display:flex;flex-direction:column;align-items:flex-start}
.tagline{position:relative;z-index:2;margin:0 0 -.18em .1em;font:700 clamp(25px,7.4vw,36px)/1.05 var(--font-hand);color:#fff;transform:rotate(-5deg);transform-origin:0 100%;text-shadow:0 0 14px rgba(40,140,255,.35);white-space:nowrap}
.tagline .hl{color:var(--accent);text-shadow:0 0 12px rgba(60,170,255,.75)}
.crown{display:inline-block;width:.9em;height:.7em;margin-left:.22em;vertical-align:.12em;overflow:visible}
.crown path{fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linejoin:round;filter:drop-shadow(0 0 3px rgba(80,180,255,.9))}

.headline{position:relative;margin:0;width:min(100%,470px)}
.hl-img{position:relative;display:block;width:100%;aspect-ratio:var(--har,2.0)}
.hl-img .it{position:absolute}
.hl-img img,.hl-img .glow,.hl-img .shine{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;user-select:none;-webkit-user-drag:none}
.headline.is-text .hl-img{display:none}
.hl-text{display:none;font-family:var(--font-display);font-weight:900;font-style:italic;text-transform:uppercase;line-height:.9;letter-spacing:-.01em;padding:.06em .12em .02em 0}
.hl-text .ht{filter:url(#brushy)}
.headline.is-text .hl-text{display:grid}
.ht{display:block;white-space:nowrap;width:max-content;max-width:none}
.ht1{font-size:clamp(54px,17.6vw,88px);color:#fff;text-shadow:0 4px 0 rgba(0,0,0,.25),0 0 22px rgba(255,255,255,.18)}
.ht2{font-size:clamp(48px,15vw,76px);color:var(--accent);margin-top:-.04em;padding-left:.06em;text-shadow:0 0 18px rgba(60,160,255,.75),0 0 46px rgba(40,120,255,.45)}
.glow{opacity:0}
.shine{overflow:hidden;opacity:0;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.shine i{position:absolute;top:-20%;bottom:-20%;left:0;width:34%;background:linear-gradient(90deg,rgba(210,240,255,0) 0%,rgba(225,246,255,.55) 38%,rgba(255,255,255,.98) 50%,rgba(225,246,255,.55) 62%,rgba(210,240,255,0) 100%);transform:translateX(-140%) skewX(-20deg)}

.subtitle{margin:.25em 0 0;font:800 clamp(16px,4.9vw,22px)/1.2 var(--font-display);text-transform:uppercase;letter-spacing:.005em;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.subtitle .hl{text-shadow:0 0 14px rgba(60,170,255,.65)}
.lead{margin:.7em 0 0;max-width:34em;font:500 clamp(14.5px,4.1vw,17px)/1.55 var(--font);color:var(--soft)}

.tiles{list-style:none;margin:1.25em 0 0;padding:0;display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:clamp(10px,3.4vw,22px);width:100%;--ts:clamp(56px,16.4vw,78px)}
.tiles li{display:flex;justify-content:center;min-width:0}
.tile{--c:#39a7ff;position:relative;display:flex;flex-direction:column;align-items:center;gap:.5em;min-width:0;text-decoration:none;color:#fff;outline:none;cursor:pointer;
  transform:perspective(520px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px)) scale(var(--sc,1));transition:transform .45s var(--ease-out)}
.tile-box{position:relative;isolation:isolate;display:grid;place-items:center;width:var(--ts);aspect-ratio:1;border-radius:24%;overflow:hidden;color:#fff;
  background:radial-gradient(120% 95% at 50% 0%,color-mix(in srgb,var(--c) 62%,#fff) 0%,var(--c) 46%,color-mix(in srgb,var(--c) 52%,#000) 100%);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--c) 52%,#fff),0 0 calc(var(--ts) * .34) color-mix(in srgb,var(--c) 70%,transparent),0 calc(var(--ts) * .12) calc(var(--ts) * .3) -.1em rgba(0,0,0,.7),inset 0 2px 0 rgba(255,255,255,.4),inset 0 calc(var(--ts) * -.1) calc(var(--ts) * .2) rgba(0,0,0,.22);
  transition:box-shadow .35s ease,filter .35s ease}
.tile.ig-grad .tile-box{background:radial-gradient(circle at 28% 108%,#ffe082 0%,#ffcb57 9%,#ff6a3d 32%,#e2307f 56%,#b236c4 74%,#5a55e6 100%)}
.tile-box svg{position:relative;z-index:1;width:52%;height:52%;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
.tile-box::before{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0) 52%)}
.tile-box::after{content:"";position:absolute;top:-30%;bottom:-30%;left:-80%;width:46%;z-index:2;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);opacity:0}
.live .tile-box::after{animation:tileShine 7s ease-in-out infinite;animation-delay:calc(1.2s + var(--k,0) * .55s)}
@keyframes tileShine{0%,70%{left:-80%;opacity:0}72%{opacity:1}86%,100%{left:140%;opacity:1}}
.tile-label{max-width:100%;font:600 clamp(12px,3.4vw,14.5px)/1.15 var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 6px rgba(0,0,0,.7)}
.live .tile .bob{animation:bob var(--bd,4.2s) ease-in-out var(--bdl,0s) infinite}
.tile .rvw,.tile .bob{display:flex;flex-direction:column;align-items:center;gap:.5em;min-width:0;max-width:100%}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media (hover:hover){.tile:hover{--ty:-6px;--sc:1.07}.tile:hover .tile-box{box-shadow:0 0 0 2px color-mix(in srgb,var(--c) 40%,#fff),0 0 calc(var(--ts) * .6) var(--c),0 calc(var(--ts) * .16) calc(var(--ts) * .34) -.1em rgba(0,0,0,.7),inset 0 2px 0 rgba(255,255,255,.45)}}
.tile:focus-visible{--ty:-6px;--sc:1.07}
.tile:focus-visible .tile-box{box-shadow:0 0 0 3px #fff,0 0 calc(var(--ts) * .6) var(--c)}
.tile:active{--sc:.96}
.tile[aria-disabled=true]{cursor:default}
.ripple{position:absolute;z-index:3;left:0;top:0;width:12px;height:12px;margin:-6px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.75),rgba(255,255,255,.15) 60%,transparent 70%);animation:rip .7s ease-out forwards;pointer-events:none}
@keyframes rip{to{transform:scale(16);opacity:0}}

/* features: cards on phones, glass panel on computers */
.panel-wrap{position:relative;width:min(100%,600px);margin:28px auto 0;padding:0 var(--gx) calc(30px + env(safe-area-inset-bottom,0px))}
.panel{position:relative}
.feats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.feat{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:9px;min-width:0;padding:14px 14px 15px;border-radius:16px;
  background:linear-gradient(160deg,rgba(18,36,62,.72),rgba(6,13,26,.72));border:1px solid rgba(110,185,255,.2);box-shadow:inset 0 1px 0 rgba(150,210,255,.08),0 14px 30px -20px rgba(0,0,0,.9)}
.feat-ico{flex:none;display:grid;place-items:center;width:30px;height:30px;color:var(--neon);filter:drop-shadow(0 0 5px rgba(70,170,255,.85)) drop-shadow(0 0 12px rgba(40,140,255,.5))}
.feat-ico svg{width:100%;height:100%;overflow:visible}
.feat-txt{min-width:0;max-width:100%;overflow-wrap:anywhere}
.feat h3{margin:0;font:700 clamp(13.5px,3.7vw,15.5px)/1.2 var(--font);color:#fff}
.feat p{margin:.25em 0 0;font:500 clamp(11.5px,3.1vw,13px)/1.3 var(--font);color:var(--muted)}
.panel-run{display:none}

/* icon life */
.live .i-gear{animation:spin 9s linear infinite;transform-origin:50% 50%}
@keyframes spin{to{transform:rotate(360deg)}}
.live .i-bolt{animation:zap 4.8s linear infinite}
@keyframes zap{0%,80%,100%{opacity:1}82%{opacity:.25}84%{opacity:1}86%{opacity:.35}90%{opacity:1}}
.live .i-people .p2{animation:breathe 3.2s ease-in-out infinite;transform-origin:15px 20px}
.live .i-people .p1{animation:breathe 3.2s ease-in-out .5s infinite;transform-origin:7px 19px}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.live .sh-shine{animation:shieldShine 5.5s ease-in-out infinite}
@keyframes shieldShine{0%,70%{opacity:0;transform:skewX(-20deg) translateX(-14px)}75%{opacity:.85}90%,100%{opacity:0;transform:skewX(-20deg) translateX(22px)}}
.live .i-heart{animation:beat 1.6s ease-in-out infinite;transform-origin:50% 60%}
@keyframes beat{0%,100%{transform:scale(1)}15%{transform:scale(1.14)}30%{transform:scale(1)}45%{transform:scale(1.08)}}
.live .st-star{animation:twinkle 3.2s ease-in-out infinite;transform-origin:50% 50%}
@keyframes twinkle{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.1) rotate(10deg)}}
.live .i-snow{animation:spin 14s linear infinite;transform-origin:50% 50%}
.live .st-hand{animation:spin 6s linear infinite;transform-origin:12px 13px}

/* sparkle on the tagline crown */
.sparkle{position:absolute;width:1.1em;aspect-ratio:1;pointer-events:none;opacity:0;
  background:radial-gradient(circle,#fff 0 6%,rgba(160,225,255,.9) 9%,transparent 26%),linear-gradient(90deg,transparent 46%,rgba(200,240,255,.95) 50%,transparent 54%),linear-gradient(0deg,transparent 46%,rgba(200,240,255,.95) 50%,transparent 54%);
  -webkit-mask:radial-gradient(circle,#000 30%,transparent 70%);mask:radial-gradient(circle,#000 30%,transparent 70%)}
.live .sparkle{animation:sparkle 5.5s ease-in-out 1s infinite}
@keyframes sparkle{0%,70%,100%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(0)}78%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(45deg)}88%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(90deg)}}

/* idle glow/shine on the brush title and logo */
@keyframes pulse{0%,100%{opacity:var(--g0,.2)}50%{opacity:var(--g1,.75)}}
@keyframes shineK{0%{transform:translateX(-140%) skewX(-20deg)}24%,100%{transform:translateX(330%) skewX(-20deg)}}
.live .shine{opacity:1}
.live .shine i{animation:shineK var(--sd,8s) cubic-bezier(.45,0,.25,1) var(--sdl,0s) infinite}
.it-arctic .shine{--sd:7.5s;--sdl:.4s}
.it-support .shine{--sd:7.5s;--sdl:.75s}
.live .it-support .glow{--g0:.15;--g1:.6;animation:pulse 3.8s ease-in-out infinite}
.live .it-arctic .glow{--g0:0;--g1:.28;animation:pulse 6s ease-in-out infinite}
.live .logo-ico .glow{--g0:.25;--g1:.85;animation:pulse 3.4s ease-in-out infinite}
.live .ht2{animation:neonHum 5s ease-in-out infinite}
@keyframes neonHum{0%,100%{opacity:1}92%{opacity:1}93%{opacity:.55}94%{opacity:1}96%{opacity:.7}97%{opacity:1}}

/* ═════════ entrance ═════════ */
.js-anim .rv{opacity:0}
.go .rv{animation:var(--an,fadeUp) var(--du,.9s) var(--ease-out) var(--d,0s) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes logoIn{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:none}}
@keyframes writeIn{0%{opacity:0;clip-path:inset(-20% 100% -20% 0)}15%{opacity:1}100%{opacity:1;clip-path:inset(-20% -10% -20% 0)}}
@keyframes brushIn{0%{opacity:0;-webkit-mask-position:100% 0;mask-position:100% 0;transform:translateX(-26px) skewX(-8deg);filter:blur(5px)}25%{opacity:1}100%{opacity:1;-webkit-mask-position:0 0;mask-position:0 0;transform:none;filter:blur(0)}}
@keyframes neonIn{0%{opacity:0}8%{opacity:.85}11%{opacity:.05}19%{opacity:.95}22%{opacity:.25}30%{opacity:1}52%{opacity:.7}55%{opacity:1}100%{opacity:1}}
@keyframes popIn{0%{opacity:0;transform:translateY(18px) scale(.55)}55%{opacity:1;transform:translateY(-3px) scale(1.07)}100%{opacity:1;transform:none}}
@keyframes panelIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.brush{-webkit-mask-image:linear-gradient(100deg,#000 42%,transparent 58%);mask-image:linear-gradient(100deg,#000 42%,transparent 58%);-webkit-mask-size:280% 100%;mask-size:280% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.brush.done{-webkit-mask-image:none;mask-image:none}

/* ═════════ snow, loader ═════════ */
#snow{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:40}
.loader{position:fixed;inset:0;z-index:100;display:grid;place-items:center;overflow:hidden;background:radial-gradient(120% 90% at 50% 38%,#0b1c37 0%,#050c1a 52%,#01040a 100%)}
.loader.gone{display:none}
.ld-aur{position:absolute;left:-15%;right:-15%;top:-25%;height:75%;filter:blur(46px);opacity:.8;pointer-events:none}
.ld-aur i{position:absolute;width:58%;height:60%;border-radius:50%;background:radial-gradient(closest-side,rgba(43,240,180,.5),transparent);animation:ldA 10s ease-in-out infinite alternate}
.ld-aur i:nth-child(2){left:36%;top:6%;background:radial-gradient(closest-side,rgba(54,194,255,.45),transparent);animation-duration:12s;animation-delay:-3s}
.ld-aur i:nth-child(3){left:12%;top:22%;width:46%;background:radial-gradient(closest-side,rgba(138,92,255,.32),transparent);animation-duration:14s;animation-delay:-6s}
@keyframes ldA{from{transform:translate(-12%,0) scale(1)}to{transform:translate(14%,10%) scale(1.3)}}
.ld-flake{position:absolute;top:-12px;left:var(--x);width:var(--sz);height:var(--sz);border-radius:50%;background:#fff;opacity:var(--o);filter:blur(var(--b));animation:ldF var(--t) linear var(--dl) infinite}
@keyframes ldF{to{transform:translate(var(--dx),112vh)}}
.ld-core{position:relative;display:flex;flex-direction:column;align-items:center;gap:20px;transform:translateY(-1vh)}
.ld-emblem{position:relative;width:clamp(150px,30vmin,210px);aspect-ratio:1}
.ld-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.ld-ring .trk{fill:none;stroke:rgba(120,190,255,.13);stroke-width:1.5}
.ld-ring .arc{fill:none;stroke:url(#ldg);stroke-width:3;stroke-linecap:round;filter:url(#ldglow)}
.ld-ring .tick{fill:none;stroke:rgba(140,210,255,.22);stroke-width:1;stroke-dasharray:.6 4.4}
.ld-spin{position:absolute;inset:-7%;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 78%,rgba(120,220,255,0) 80%,rgba(140,230,255,.5) 96%,transparent 100%);
  -webkit-mask:radial-gradient(closest-side,transparent 92%,#000 93%,#000 97%,transparent 98%);mask:radial-gradient(closest-side,transparent 92%,#000 93%,#000 97%,transparent 98%);animation:spin 2.4s linear infinite;opacity:.8}
.ld-icon{position:absolute;left:50%;top:50%;width:56%;aspect-ratio:var(--iar,1.19);transform:translate(-50%,-55%)}
.ld-icon .msk{position:absolute;inset:0;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.ld-icon .ic-dim{background:rgba(130,175,215,.22)}
.ld-icon .ic-fill{background:linear-gradient(to top,#2bf0b4 0%,#36c2ff 45%,#dff7ff 100%);clip-path:inset(calc(100% - var(--p,0%)) 0 0 0);filter:drop-shadow(0 0 4px rgba(80,210,255,.9))}
.ld-icon .ic-glow{position:absolute;opacity:calc(.15 + var(--pp,0) * .85)}
.ld-word{display:grid;justify-items:center;line-height:.95;color:#fff;opacity:0;animation:ldW 1.3s .2s var(--ease-out) both}
.ld-word b{font:900 italic clamp(30px,6.2vmin,46px)/1 var(--font-display);letter-spacing:.01em;text-transform:uppercase}
.ld-word span{font:700 clamp(10px,2vmin,14px)/1.3 var(--font-display);letter-spacing:.55em;text-transform:uppercase;margin:.35em -.55em 0 0;color:#e2f1ff}
@keyframes ldW{from{opacity:0;transform:translateY(10px);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
.ld-line{width:clamp(160px,30vmin,230px);height:2px;border-radius:2px;background:rgba(120,190,255,.12);overflow:hidden;margin-top:-6px}
.ld-line i{display:block;height:100%;width:var(--p,0%);background:linear-gradient(90deg,#8a5cff,#36c2ff,#2bf0b4);box-shadow:0 0 10px rgba(90,220,255,.9)}
.ld-status{display:flex;gap:14px;align-items:baseline;justify-content:center;min-width:260px;font-size:13px;letter-spacing:.05em;color:rgba(195,228,255,.72)}
.ld-msg{transition:opacity .3s,transform .3s}
.ld-msg.sw{opacity:0;transform:translateY(4px)}
.ld-pct{font-variant-numeric:tabular-nums;font-weight:700;color:#c7ecff;min-width:3em;text-align:right;text-shadow:0 0 10px rgba(80,190,255,.6)}
.loader.done .ld-core{animation:ldOut .75s cubic-bezier(.6,0,.2,1) forwards}
@keyframes ldOut{0%{transform:translateY(-1vh) scale(1)}30%{transform:translateY(-1vh) scale(1.04);filter:brightness(1.8)}100%{transform:translateY(-1vh) scale(1.18);opacity:0;filter:blur(8px) brightness(2)}}
.ld-shock{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px;border-radius:50%;border:2px solid rgba(150,230,255,.9);box-shadow:0 0 30px rgba(80,200,255,.8),inset 0 0 20px rgba(80,200,255,.5);opacity:0;pointer-events:none}
.loader.done .ld-shock{animation:shock 1s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes shock{0%{opacity:.95;width:40px;height:40px;margin:-20px}100%{opacity:0;width:240vmax;height:240vmax;margin:-120vmax}}

/* ═════════ tablets: a little more room ═════════ */
@media (min-width:700px){
  .scene{height:clamp(420px,calc(var(--vh) * 62),820px)}
  .hero-copy{margin-top:-84px}
  .feats{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .feat{flex-direction:row;align-items:center;gap:12px}
  .feat-ico{width:34px;height:34px}
}
/* phones in landscape: picture almost full screen, content below */
@media (orientation:landscape) and (max-height:520px){
  .scene{height:max(300px,calc(var(--vh) * 88))}
  .hero-copy{margin-top:-70px}
  .tiles{--ts:clamp(52px,9vw,70px)}
}
/* very small phones */
@media (max-width:359px){
  .tiles{gap:8px;--ts:54px}
  .feat{padding:12px 11px 13px;gap:8px}
  .feat-ico{width:26px;height:26px}
}

/* ═════════ computers: scene on the whole screen, text on top of it ═════════ */
@media (min-width:1100px) and (min-height:540px) and (min-aspect-ratio:7/5){
  :root{--u:min(calc(100vw / 1672),calc(var(--vh) * 100 / 941),1.75px);--gx:max(22px,calc(var(--u) * 44))}
  body{overflow:hidden}
  .hero{height:calc(var(--vh) * 100);min-height:540px;overflow:hidden}
  .scene{position:absolute;inset:0;height:auto}
  .scene-shade{background:
    linear-gradient(90deg,rgba(2,6,13,calc(.35 + var(--scrim,0) * .45)) 0%,rgba(2,6,13,calc(.18 + var(--scrim,0) * .4)) 24%,rgba(2,6,13,calc(var(--scrim,0) * .22)) 40%,rgba(2,6,13,0) 54%),
    linear-gradient(0deg,rgba(2,6,13,.55) 0%,rgba(2,6,13,0) 26%),
    linear-gradient(180deg,rgba(2,6,13,.35) 0%,rgba(2,6,13,0) 14%)}
  .ui{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:flex-start;pointer-events:none;
    padding:max(12px,calc(var(--u) * 16)) var(--gx) max(14px,calc(var(--u) * 34)) max(var(--gx),env(safe-area-inset-left,0px))}
  .ui>*{pointer-events:auto}
  .topbar{position:relative;top:auto;left:auto;flex:none}
  .logo{font-size:max(15px,calc(var(--u) * 23))}
  .hero-copy{flex:1;width:max(330px,calc(var(--u) * 600));margin:0;padding:max(8px,calc(var(--u) * 26)) 0 max(10px,calc(var(--u) * 30));justify-content:center}
  .tagline{font-size:max(22px,calc(var(--u) * 46));margin-left:max(14px,calc(var(--u) * 40))}
  .headline{width:max(300px,calc(var(--u) * 526))}
  .ht1{font-size:max(58px,calc(var(--u) * 134))}
  .ht2{font-size:max(50px,calc(var(--u) * 112))}
  .subtitle{font-size:max(14px,calc(var(--u) * 24.5));letter-spacing:-.005em;margin-top:max(2px,calc(var(--u) * 4))}
  .lead{font-size:max(13.5px,calc(var(--u) * 19.5));margin-top:max(8px,calc(var(--u) * 12));max-width:none}
  .tiles{display:flex;flex-wrap:wrap;width:auto;gap:max(14px,calc(var(--u) * 40));margin-top:max(14px,calc(var(--u) * 26));--ts:max(52px,calc(var(--u) * 78))}
  .tiles li{flex:none}
  .tile-label{font-size:max(11.5px,calc(var(--u) * 15.5))}
  .panel-wrap{flex:none;width:min(max(560px,calc(var(--u) * 716)),calc(100vw - 2 * var(--gx)),58vw);margin:0;padding:0}
  .panel{border-radius:max(12px,calc(var(--u) * 16));background:linear-gradient(180deg,rgba(9,20,38,.74),rgba(3,9,19,.82));border:1px solid rgba(120,190,255,.22);
    box-shadow:0 24px 60px -24px rgba(0,0,0,.95),inset 0 1px 0 rgba(160,215,255,.12);-webkit-backdrop-filter:blur(10px) saturate(1.25);backdrop-filter:blur(10px) saturate(1.25);
    padding:max(10px,calc(var(--u) * 18)) max(6px,calc(var(--u) * 8))}
  .feats{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,max-content);grid-template-columns:none;justify-content:space-between;gap:0}
  .feat{flex-direction:row;align-items:center;padding:0 max(7px,calc(var(--u) * 12));border-radius:0;background:none;border:0;border-left:1px solid rgba(120,190,255,.16);box-shadow:none;gap:max(7px,calc(var(--u) * 11))}
  .feat:first-child{border-left:0}
  .feat-ico{width:max(22px,calc(var(--u) * 36));height:max(22px,calc(var(--u) * 36))}
  .feat h3{font-size:max(12px,calc(var(--u) * 15));max-width:7.4em;font-weight:600}
  .feat p{font-size:max(10px,calc(var(--u) * 11.4));margin-top:max(4px,calc(var(--u) * 9))}
  .feat-txt{overflow-wrap:normal;min-width:0}
  .panel-run{display:block;position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
  .panel-run rect{fill:none;stroke:url(#runG);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:9 41;filter:drop-shadow(0 0 4px rgba(90,190,255,.9))}
  .live .panel-run rect{animation:run 7s linear infinite}
  .zzz{display:block}
}
@keyframes run{to{stroke-dashoffset:-100}}
@media (prefers-reduced-motion:reduce){
  .live .shine i,.live .tile .bob,.live .i-gear,.live .i-snow,.live .i-people .p1,.live .i-people .p2,.live .tile-box::after,.ld-flake,.ld-spin,.zzz span,.live .panel-run rect,.live .ht2,.live .i-bolt{animation:none!important}
}