/* =========================================================
   dumka.tech — v3 · "шлях думки в систему"
   layers: world (lab + flow) → hero stage → content → fly-by → UI
   ========================================================= */
:root{
  --bg:#03060a;--bg2:#08101a;--ink:#e6f4f8;--mute:#8fa9b5;--faint:#4d6470;
  --cy:#2ee6f2;--cy2:#1aa9c4;--cyg:rgba(46,230,242,.35);
  --hot:#ff6a2b;--hotg:rgba(255,106,43,.45);
  --panel:linear-gradient(165deg,rgba(13,26,35,.93),rgba(6,12,18,.9));   /* denser glass: text stays readable over the bright tank */
  --edge:rgba(120,220,255,.16);
  --r:18px;--mono:'JetBrains Mono',ui-monospace,Consolas,monospace;--sans:'Space Grotesk',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
/* no page scrollbar at all: it used to vanish during the intro (Lenis stop) and come back → the whole page, the photo too, jumped ~17px sideways on Windows.
   Navigation is the wheel/keys/▲▼/panel anyway */
html{scrollbar-width:none}html::-webkit-scrollbar{display:none;width:0;height:0}
body{background:var(--bg);color:var(--ink);font:16px/1.6 var(--sans);overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block;max-width:100%;height:auto}
.mono{font-family:var(--mono)}
.tag{font:600 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--cy)}
h1,h2,h3,h4{font-weight:700;letter-spacing:-.02em;line-height:1.08}
h2{font-size:clamp(30px,4.2vw,54px);margin:14px 0 18px}
.lead{color:var(--mute);max-width:600px;font-size:17px;text-shadow:0 1px 14px rgba(3,6,10,.95),0 0 2px rgba(3,6,10,.8)}
.sec-head h2{text-shadow:0 2px 24px rgba(3,6,10,.85)}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px;position:relative;z-index:1}
section{position:relative}
.node{display:inline-flex;align-items:center;gap:10px}
.node b{font:600 11px var(--mono);color:#001417;background:var(--cy);padding:3px 7px;border-radius:5px;letter-spacing:.06em;box-shadow:0 0 16px var(--cyg)}

/* panels: no backdrop-filter (the world animates behind) → fast */
.glass{background:var(--panel);border:1px solid var(--edge);border-radius:var(--r);
  box-shadow:0 24px 60px -30px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.07);transition:border-color .35s,box-shadow .35s}

.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:999px;font-weight:700;letter-spacing:.02em;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,background .25s,border-color .25s;will-change:transform}
.btn-hot{background:var(--hot);color:#140600;box-shadow:0 0 0 1px rgba(255,160,120,.4),0 10px 40px -8px var(--hotg)}
.btn-hot:hover{box-shadow:0 0 0 1px rgba(255,180,140,.7),0 14px 50px -6px var(--hotg),0 0 0 6px rgba(255,106,43,.12)}
.btn-ghost{border:1px solid var(--edge);background:rgba(10,20,28,.6)}
.btn-ghost:hover{border-color:var(--cy);box-shadow:0 0 24px -6px var(--cyg)}
.btn:active{transform:translateY(1px) scale(.97)!important}

/* reveal + word split */
.reveal{opacity:0;transform:translateY(46px) scale(.98);transition:opacity .9s ease var(--dl,0s),transform 1s cubic-bezier(.16,.8,.2,1) var(--dl,0s)}
.reveal.in{opacity:1;transform:none}
.wsplit .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.wsplit .w>span{display:inline-block;transform:translateY(105%);transition:transform .9s cubic-bezier(.16,.8,.2,1);transition-delay:calc(var(--wi)*55ms)}
.wsplit.in .w>span{transform:none}

/* =========================================================
   WORLD — one lab from top to bottom + living workflow
   ========================================================= */
#world{position:fixed;inset:0;z-index:0;pointer-events:none;background:#03060a;overflow:hidden}
.w-lab{position:absolute;left:0;top:0;width:100%;background:url(../img/world-tall.webp) 50% 0/cover no-repeat;will-change:transform}
.w-shade{position:absolute;inset:0;will-change:transform;background:
  radial-gradient(ellipse 75% 85% at 62% 50%,transparent 30%,rgba(3,6,10,.55)),
  linear-gradient(90deg,rgba(3,6,10,.72),rgba(3,6,10,.32) 50%,rgba(3,6,10,.28))}
#flow{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
/* AI core (sits on the robot in the tank, moves with the lab) */
.w-core{position:absolute;width:var(--cs,80px);height:var(--cs,80px);margin:calc(var(--cs,80px)/-2) 0 0 calc(var(--cs,80px)/-2)}
.w-core .ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(200,252,255,.9);box-shadow:0 0 0 1px rgba(3,6,10,.55),0 0 20px rgba(46,230,242,.65),inset 0 0 14px rgba(46,230,242,.45)}
.w-core .r1{animation:spin 9s linear infinite;border-style:dashed}
.w-core .r2{inset:-42%;border-width:1.5px;border-color:rgba(46,230,242,.45);animation:corePulse 3.2s ease-in-out infinite}
.w-core::before,.w-core::after{content:"";position:absolute;inset:-70%;border:2px solid rgba(200,252,255,.8);border-radius:6px;-webkit-mask:linear-gradient(#000 0 0) top left/22% 22% no-repeat,linear-gradient(#000 0 0) top right/22% 22% no-repeat,linear-gradient(#000 0 0) bottom left/22% 22% no-repeat,linear-gradient(#000 0 0) bottom right/22% 22% no-repeat;mask:linear-gradient(#000 0 0) top left/22% 22% no-repeat,linear-gradient(#000 0 0) top right/22% 22% no-repeat,linear-gradient(#000 0 0) bottom left/22% 22% no-repeat,linear-gradient(#000 0 0) bottom right/22% 22% no-repeat;filter:drop-shadow(0 0 6px rgba(46,230,242,.8));transition:inset .5s cubic-bezier(.2,.8,.2,1)}
.w-core::after{inset:-70%;border:0;background:linear-gradient(transparent 48%,rgba(46,230,242,.5) 50%,transparent 52%);-webkit-mask:none;mask:none;filter:none;opacity:0;animation:coreScan 3.6s ease-in-out infinite}
.w-core.hot::before{inset:-55%}
.w-core.hot::after{opacity:1}
@keyframes coreScan{0%{transform:translateY(-40%)}50%{transform:translateY(40%)}100%{transform:translateY(-40%)}}
.w-core .eye{position:absolute;left:50%;top:50%;width:26%;height:12%;margin:-6% 0 0 -13%;border-radius:40%;background:radial-gradient(ellipse,#e8feff,rgba(46,230,242,.9) 40%,transparent 72%);filter:blur(1px);box-shadow:0 0 22px 6px rgba(46,230,242,.55);animation:eye 4s ease-in-out infinite;transform:translate(var(--ex,0px),var(--ey,0px))}
.w-core .chip{position:absolute;left:190%;top:-40%;opacity:.8;transition:opacity .4s,color .4s;white-space:nowrap;font:600 10px var(--mono);letter-spacing:.16em;color:var(--cy);padding:5px 8px;border:1px solid rgba(46,230,242,.35);border-radius:6px;background:rgba(3,10,14,.7)}
.w-core .chip::before{content:"";position:absolute;right:100%;top:50%;width:42px;height:1px;background:rgba(46,230,242,.6)}
.w-core.hot .chip{opacity:1;color:#fff;border-color:var(--cy);box-shadow:0 0 18px -2px var(--cyg)}
.w-core.hot .ring{border-color:#bff;box-shadow:0 0 34px rgba(46,230,242,.8),inset 0 0 20px rgba(46,230,242,.5)}
.w-core.hot .eye{box-shadow:0 0 40px 14px rgba(46,230,242,.8)}
@keyframes corePulse{50%{transform:scale(1.12);opacity:.4}}
@keyframes eye{0%,100%{opacity:.85}50%{opacity:1}92%{opacity:.85}94%{opacity:.2}96%{opacity:.9}}
.w-tank{position:absolute;overflow:hidden;border-radius:40% 40% 8% 8%;background:radial-gradient(ellipse 60% 55% at 50% 45%,rgba(46,230,242,.17),transparent 70%);animation:tank 5s ease-in-out infinite}
.w-tank i{position:absolute;bottom:-10px;width:5px;height:5px;border-radius:50%;background:rgba(190,250,255,.8);box-shadow:0 0 8px rgba(46,230,242,.9);animation:bubble linear infinite}
.w-tank i:nth-child(1){left:18%;animation-duration:7s}.w-tank i:nth-child(2){left:30%;animation-duration:9s;animation-delay:-3s;width:3px;height:3px}
.w-tank i:nth-child(3){left:44%;animation-duration:6s;animation-delay:-1s}.w-tank i:nth-child(4){left:58%;animation-duration:10s;animation-delay:-6s;width:4px;height:4px}
.w-tank i:nth-child(5){left:70%;animation-duration:8s;animation-delay:-2s;width:3px;height:3px}.w-tank i:nth-child(6){left:82%;animation-duration:7.5s;animation-delay:-5s}
.w-tank i:nth-child(7){left:24%;animation-duration:11s;animation-delay:-8s;width:2px;height:2px}.w-tank i:nth-child(8){left:64%;animation-duration:6.5s;animation-delay:-4s;width:2px;height:2px}
@keyframes bubble{from{transform:translateY(0)}to{transform:translateY(calc(-1 * var(--th,400px)))}}
@keyframes tank{50%{opacity:.65}}

/* fly-by layer (mid: behind the workflow and the content) */
#fly{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
#fly .fb{position:absolute;left:0;top:0;will-change:transform}
#fly .fb img{width:100%;height:100%;object-fit:fill}
#dust{position:fixed;inset:0;z-index:7;pointer-events:none;width:100%;height:100%}

/* =========================================================
   INTRO
   ========================================================= */
#intro{position:fixed;inset:0;z-index:200;background:rgba(1,3,6,.996);display:grid;place-items:center;overflow:hidden;cursor:pointer}   /* .996, not opaque: the hero under it gets rastered before the eye starts (no hitch at the end) */
#intro.gone{opacity:0;visibility:hidden;transition:opacity .7s ease,visibility 0s .7s}
#intro .eye{position:absolute;inset:0;background:url(../img/eye.webp) 50% 50%/cover;opacity:0;transform:scale(1.08);transition:opacity .8s ease,transform 1.6s cubic-bezier(.6,0,.9,.4)}
#intro.s1 .eye{opacity:1;transform:scale(1.22)}
#intro.s2 .eye{opacity:0;transform:scale(9);transition:opacity .7s ease .35s,transform 1.1s cubic-bezier(.7,0,.9,.5)}
#intro svg{position:relative;width:min(62vmin,520px);height:auto;overflow:visible;opacity:0;transition:opacity .4s}
#intro.s1 svg,#intro.s2 svg{opacity:1}
#intro circle,#intro path{fill:none;stroke:#2ee6f2;stroke-linecap:round}
#intro .ring{stroke-dasharray:var(--l);stroke-dashoffset:var(--l);transition:stroke-dashoffset 1.3s cubic-bezier(.3,.7,.2,1)}
#intro.s1 .ring{stroke-dashoffset:0}
#intro .ring.b{transition-delay:.15s}#intro .ring.c{transition-delay:.3s}#intro .ring.d{transition-delay:.45s}
#intro .spin{transform-origin:200px 200px;animation:spin 6s linear infinite}
#intro .spin.r{animation-direction:reverse;animation-duration:4s}
#intro.s3 svg{transform:scale(7);opacity:0;transition:transform .9s cubic-bezier(.7,0,.8,.3),opacity .8s ease .15s}
#intro .ilabel{position:absolute;left:50%;bottom:12vh;transform:translateX(-50%);font:600 12px var(--mono);letter-spacing:.25em;color:#2ee6f2;text-transform:uppercase;white-space:nowrap;opacity:0;transition:opacity .4s}
#intro.s1 .ilabel{opacity:1}#intro.s3 .ilabel{opacity:0}
#intro .skip{position:absolute;right:20px;top:18px;font:11px var(--mono);color:#4d6470;letter-spacing:.15em}
#intro .dot{position:absolute;width:6px;height:6px;border-radius:50%;background:#bff;box-shadow:0 0 20px #2ee6f2,0 0 40px #2ee6f2;animation:blink 1s ease-in-out infinite}
#intro.s1 .dot{opacity:0;transition:opacity .4s}
@keyframes blink{50%{opacity:.3}}
@keyframes spin{to{transform:rotate(360deg)}}
body.intro-on{overflow:hidden}

/* =========================================================
   HERO — portal dive
   ========================================================= */
.hero{height:330vh;position:relative;z-index:2}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#03060a;--mw:clamp(270px,21vw,330px);--cw:clamp(420px,34vw,500px)}
/* after the dive the stage is only faded out (opacity 0 via JS), never visibility:hidden:
   hidden layers get thrown away and re-created on the way back at the camera's 7× zoom → seconds of raster */
.stage.gone{pointer-events:none}
.h-far,.h-warp,.rig,.h-fly,.h-fg,.h-ui,.h-flash{position:absolute}
.h-far{inset:-6% -4%;will-change:transform,opacity}
.h-far img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.h-far::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,6,10,.9) 0%,rgba(3,6,10,.35) 42%,transparent 70%),radial-gradient(ellipse 60% 55% at 70% 45%,transparent,rgba(3,6,10,.55))}
.h-warp{inset:0;width:100%;height:100%;z-index:4;pointer-events:none}
/* the picture never runs under the copy: its size is what is left after menu + copy */
.rig{right:1.5vw;bottom:0;height:min(96vh,980px,calc((98.5vw - var(--mw) - var(--cw) - 24px)*1.5));aspect-ratio:1024/1536}
.h-portal{position:absolute;left:50%;top:-6%;width:148%;aspect-ratio:1;margin-left:-74%;will-change:transform}
.h-portal img{width:100%;height:100%;object-fit:contain;animation:spin 90s linear infinite}
.h-portal .core{position:absolute;inset:22%;border-radius:50%;background:radial-gradient(circle closest-side,rgba(210,252,255,.72),rgba(46,230,242,.3) 40%,rgba(46,230,242,.09) 66%,transparent);opacity:var(--glow,.55);will-change:transform,opacity}
.h-me{position:absolute;inset:0;cursor:pointer;will-change:transform,opacity;outline:none}
/* glow lives on the wrapper: a mask on the same element used to cut the glow into a hard box edge */
.me-img{position:absolute;inset:0}
.h-me img{position:relative;width:100%;height:100%;object-fit:contain;object-position:bottom}   /* positioned → drawn above the glow layers (they come first in the markup) */
/* the hologram rings: drawn in 3D over the photo's core (js · HOLOGRAM ORBITS); box set from data-orb on #rig */
.me-orb{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none}
/* PERF: the glow and the shadow around the photo are ready-made pictures (bottom fade baked in too).
   States switch by opacity only → the GPU does it; filters on this big picture were re-rendered every frame */
.me-img>i{position:absolute;left:-18.75%;right:-18.75%;top:-12.5%;bottom:-12.5%;background-size:100% 100%;background-repeat:no-repeat;pointer-events:none;will-change:opacity;transition:opacity .45s,transform .45s}
.me-sh{background-image:url(../img/hero-shade.webp)}
.me-gl{background-image:url(../img/hero-glow.webp);opacity:.32}
.me-go{background-image:url(../img/hero-glow-o.webp);opacity:0}
.h-me:hover .me-gl,.h-me:focus-visible .me-gl,.stage[data-hov="about"] .me-gl{opacity:1}
.h-me:hover .me-sh,.h-me:focus-visible .me-sh,.stage[data-hov="about"] .me-sh{opacity:0}
.stage[data-hov="brief"] .me-gl{opacity:0}.stage[data-hov="brief"] .me-go{opacity:1}
.me-frame{position:absolute;left:39%;right:25%;top:2%;height:33%;pointer-events:none;opacity:0;transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1);transform:scale(1.08);will-change:opacity,transform}
.me-frame i{position:absolute;width:26px;height:26px;border:2px solid var(--cy);filter:drop-shadow(0 0 6px var(--cy))}
.me-frame i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0}.me-frame i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0}
.me-frame i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0}.me-frame i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0}
.me-tip{position:absolute;left:47%;top:76%;font:700 12px var(--mono);letter-spacing:.1em;color:#001417;background:var(--cy);padding:8px 12px;border-radius:9px;box-shadow:0 0 26px var(--cyg);opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s;white-space:nowrap;will-change:opacity,transform}
.h-me:hover .me-frame,.h-me:focus-visible .me-frame{opacity:1;transform:none}
.h-me:hover .me-tip,.h-me:focus-visible .me-tip{opacity:1;transform:none}
.h-fly{inset:0;pointer-events:none}
/* drones: the glow is in the picture (padding .35 × size each side), no filters */
.drone{position:absolute;width:calc(var(--s)*1.7);max-width:none;height:auto;margin:calc(var(--s)*-.35) 0 0 calc(var(--s)*-.35);animation:hover 6s ease-in-out infinite;transition:scale .4s}
.d3{opacity:.8}
@keyframes hover{0%,100%{translate:0 0;rotate:-3deg}50%{translate:6px -18px;rotate:3deg}}
@keyframes float{50%{translate:0 -14px}}
.holo{position:absolute;padding:10px 14px;font:600 12px/1.3 var(--mono);color:var(--ink);display:flex;gap:9px;align-items:center;white-space:nowrap;animation:float 7s ease-in-out infinite;
  background:var(--panel);border:1px solid var(--edge);border-radius:12px;box-shadow:0 10px 30px -12px #000}
.holo i{width:9px;height:9px;border-radius:50%;background:var(--cy);box-shadow:0 0 12px var(--cy)}
.holo i.h{background:var(--hot);box-shadow:0 0 12px var(--hot)}
.holo span{transition:opacity .2s}.holo.sw span{opacity:0}   /* the chips are a live feed: the text swaps every few seconds */
.h-fg{left:-4%;right:-4%;bottom:-8%;height:62%;pointer-events:none;will-change:transform}
.h-fg img{width:100%;height:100%;object-fit:cover;object-position:50% 100%}
.h-ui{inset:0;z-index:5;pointer-events:none;will-change:transform,opacity}
.h-ui .menu,.h-ui .hero-copy{pointer-events:auto}
/* the dive: his name lights up inside the portal ring and flies at you (JS moves it with the portal centre) */
.h-name{position:absolute;left:0;top:0;z-index:7;display:grid;justify-items:center;gap:8px;pointer-events:none;opacity:0;visibility:hidden;white-space:nowrap;will-change:transform,opacity}
.h-name b{font:700 clamp(26px,3.6vw,54px)/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#effdff;text-shadow:0 0 28px rgba(46,230,242,.75),0 2px 14px rgba(0,0,0,.85)}
.h-name::before{content:"";position:absolute;left:50%;top:50%;width:140%;height:300%;transform:translate(-50%,-50%);z-index:-1;background:radial-gradient(closest-side,rgba(2,8,14,.66),rgba(2,8,14,.34) 58%,transparent)}   /* a dark lens: the ring's centre is bright */
.h-name span{font:600 clamp(11px,1vw,15px)/1 var(--mono);letter-spacing:.42em;margin-right:-.42em;text-transform:uppercase;color:#a6f7fb;text-shadow:0 0 12px rgba(46,230,242,.7),0 1px 8px rgba(0,0,0,.95)}
.h-name i{width:clamp(60px,7vw,110px);height:2px;background:linear-gradient(90deg,transparent,var(--cy),transparent);box-shadow:0 0 12px var(--cy);order:1}
.h-name span{order:2}
.h-flash{inset:0;z-index:8;pointer-events:none;opacity:0;background:radial-gradient(circle at var(--fx,50%) var(--fy,50%),#f2feff 0,rgba(160,250,255,.9) 18%,rgba(46,230,242,.45) 45%,rgba(3,6,10,0) 80%)}

.menu{position:absolute;left:0;top:0;bottom:0;width:var(--mw);padding:34px 30px 30px 34px;display:flex;flex-direction:column}
.logo{font:700 20px var(--mono);letter-spacing:.02em;display:flex;align-items:center;gap:10px}
.logo span{color:var(--cy)}
.logo svg{width:30px;height:30px}
.menu nav{margin:auto 0;display:flex;flex-direction:column;gap:2px}
.menu nav a{position:relative;display:flex;align-items:center;gap:14px;padding:13px 16px;font:700 17px var(--sans);letter-spacing:.14em;color:var(--mute);border-radius:12px;transition:color .25s,background .25s,padding .25s}
.menu nav a small{font:500 11px var(--mono);letter-spacing:.1em;color:var(--faint);transition:color .25s}
.menu nav a::before{content:"";width:7px;height:7px;border-radius:50%;border:1px solid var(--faint);transition:.25s}
.menu nav a:hover{color:var(--ink);background:linear-gradient(90deg,rgba(46,230,242,.14),transparent);padding-left:24px}
.menu nav a:hover::before{background:var(--cy);border-color:var(--cy);box-shadow:0 0 12px var(--cy)}
.menu nav a:hover small{color:var(--cy)}
.menu nav a.start{color:var(--hot)}
.menu nav a.start::before{border-color:var(--hot)}
.menu nav a.start:hover{background:linear-gradient(90deg,rgba(255,106,43,.18),transparent)}
.menu nav a.start:hover::before{background:var(--hot);box-shadow:0 0 12px var(--hot)}
.menu .meta{font:12px var(--mono);color:var(--faint);display:flex;gap:14px}
.menu .meta a:hover{color:var(--cy)}
.hero-copy{position:absolute;left:var(--mw);bottom:12vh;max-width:var(--cw)}
.hero-copy::before{content:"";position:absolute;z-index:-1;inset:-70px -80px -60px -90px;pointer-events:none;background:radial-gradient(closest-side,rgba(3,6,10,.72),rgba(3,6,10,.4) 62%,transparent)}
.hero-copy h1{font-size:clamp(36px,4.1vw,62px);margin:16px 0 18px;text-shadow:0 0 40px rgba(4,7,11,.9)}
.hero-copy h1 em{font-style:normal;color:var(--cy);text-shadow:0 0 30px var(--cyg)}
.stats{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 26px}
.stat{padding:8px 12px;border-radius:10px;font:600 12px var(--mono);display:flex;gap:8px;align-items:center;background:var(--panel);border:1px solid var(--edge);transition:.25s}
.stat:hover{transform:translateY(-3px);border-color:var(--cy);box-shadow:0 0 20px -4px var(--cyg)}
.stat b{color:var(--cy)}
.hero-copy .btn{margin:0 6px 8px 0}
.scrollhint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);font:11px var(--mono);letter-spacing:.2em;color:var(--faint);z-index:6;text-align:center;cursor:pointer;padding:6px 10px;border-radius:10px;transition:color .25s,background .25s}
.scrollhint:hover{color:var(--ink);background:rgba(46,230,242,.08)}
.scrollhint span{display:block;font-size:9.5px;letter-spacing:.14em;margin-top:4px;color:rgba(46,230,242,.55)}
.scrollhint::after{content:"";display:block;width:1px;height:34px;margin:8px auto 0;background:linear-gradient(var(--cy),transparent);transform-origin:top;animation:drip 1.8s ease-in-out infinite}
@keyframes drip{0%{transform:translateY(0) scaleY(0)}50%{transform:translateY(0) scaleY(1)}100%{transform:translateY(34px) scaleY(0)}}

/* entrance after intro */
body.pre .rig,body.pre .h-far,body.pre .menu nav a,body.pre .hero-copy>*,body.pre .h-fly,body.pre .logo{opacity:.002}   /* not 0: the browser rasters them while the entrance waits for decode → the first animated frame is cheap */
body.go .rig{animation:rigIn 1.2s cubic-bezier(.2,.8,.2,1) backwards}
body.go .h-far img{animation:farIn 2s ease backwards}
body.go .menu nav a{animation:slideIn .7s cubic-bezier(.2,.8,.2,1) backwards}
body.go .menu nav a:nth-child(2){animation-delay:.08s}body.go .menu nav a:nth-child(3){animation-delay:.16s}body.go .menu nav a:nth-child(4){animation-delay:.24s}body.go .menu nav a:nth-child(5){animation-delay:.32s}body.go .menu nav a:nth-child(6){animation-delay:.4s}
body.go .hero-copy>*{animation:upIn .8s cubic-bezier(.2,.8,.2,1) backwards}
body.go .hero-copy>*:nth-child(2){animation-delay:.12s}body.go .hero-copy>*:nth-child(3){animation-delay:.24s}body.go .hero-copy>*:nth-child(4){animation-delay:.36s}body.go .hero-copy>*:nth-child(5){animation-delay:.46s}body.go .hero-copy>*:nth-child(6){animation-delay:.52s}
body.go .h-fly{animation:flyIn 1.4s cubic-bezier(.2,.8,.2,1) backwards .4s}
@keyframes rigIn{0%{opacity:0}38%{opacity:.9}46%{opacity:.4}54%{opacity:1}100%{opacity:1}}   /* a power-on flicker, no movement: nothing «jumps» after load */
@keyframes farIn{from{opacity:0;transform:scale(1.15)}to{opacity:1;transform:none}}
@keyframes slideIn{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:none}}
@keyframes upIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes flyIn{from{scale:.3;opacity:0}to{scale:1;opacity:1}}   /* no blur: a blur filter on a full-stage layer cost frames during the entrance */

/* =========================================================
   CONTENT (over the world)
   ========================================================= */
.content{position:relative;z-index:3;margin-top:-48vh;overflow-x:clip}
.sec-head{margin-bottom:34px}
.sec-head.center{text-align:center}.sec-head.center .lead{margin:0 auto}

/* ---- 02 APPROACH ---- */
.appr{padding:150px 0 120px}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pillar{padding:26px 24px 24px;position:relative;overflow:hidden}
.pillar svg{width:44px;height:44px;fill:none;stroke:var(--cy);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 8px var(--cyg));margin-bottom:14px;transition:transform .6s cubic-bezier(.2,.8,.2,1)}

.pillar h3{font-size:21px;margin-bottom:8px}
.pillar p{color:var(--mute);font-size:15px}
.proc{margin:46px 0 0;position:relative;padding:30px 18px 26px;border-radius:var(--r);background:linear-gradient(165deg,rgba(12,24,34,.78),rgba(4,9,14,.74));border:1px solid var(--edge);box-shadow:0 24px 60px -30px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.06)}
.proc-line{position:absolute;left:10%;right:10%;top:54px;height:2px;background:var(--edge);border-radius:2px}
.proc-line i{position:absolute;left:0;top:0;bottom:0;width:var(--pf,0%);background:linear-gradient(90deg,var(--cy2),var(--cy));box-shadow:0 0 12px var(--cyg);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.proc ol{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:14px;position:relative}
.proc li{text-align:center;padding:0 6px;cursor:default}
.proc li b{display:grid;place-items:center;width:50px;height:50px;margin:0 auto 14px;border-radius:50%;font:700 13px var(--mono);color:var(--mute);background:#07111a;border:2px solid var(--edge);box-shadow:inset 0 2px 6px rgba(0,0,0,.6);transition:.35s}
.proc li h4{font-size:17px;margin-bottom:6px;transition:color .3s}
.proc li p{font-size:13.5px;color:var(--mute);transition:color .3s}
.proc li.on b,.proc li:hover b{color:#001417;background:var(--cy);border-color:var(--cy);box-shadow:0 0 0 5px rgba(46,230,242,.12),0 0 26px var(--cyg);transform:scale(1.08)}
.proc li.on h4,.proc li:hover h4{color:var(--cy)}
.proc li.on p,.proc li:hover p{color:var(--ink)}
.inside{margin-top:46px;text-align:center}
.more{display:inline-flex;align-items:center;gap:12px;padding:14px 22px 14px 14px;border-radius:999px;border:1px solid rgba(46,230,242,.35);background:rgba(8,18,26,.75);font:600 14.5px var(--sans);color:var(--ink);transition:.3s}
.more:hover{border-color:var(--cy);box-shadow:0 0 30px -6px var(--cyg)}
.more-ic{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--cy);color:#001417;font:700 18px/1 var(--mono);transition:transform .4s}
.more[aria-expanded="true"] .more-ic{transform:rotate(45deg)}
.inside-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .8s cubic-bezier(.2,.8,.2,1);text-align:left}
.inside-wrap.open{grid-template-rows:1fr}
.inside-in{overflow:hidden;display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:center}
.inside-wrap.open .inside-in{padding-top:34px}
.inside-txt h3{font-size:28px;margin-bottom:12px}
.inside-txt p{color:var(--mute);margin-bottom:10px}
.inside-txt .note{font:12px var(--mono);color:var(--faint)}
.inside-wrap .panel{opacity:0;transform:translateY(30px);transition:opacity .6s .2s,transform .8s .2s cubic-bezier(.2,.8,.2,1)}
.inside-wrap.open .panel{opacity:1;transform:none}

/* live log panel */
.panel{padding:8px 8px 18px}
.panel-top{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--edge);font:12px var(--mono);color:var(--mute)}
.panel-top .dots{display:flex;gap:6px}.panel-top .dots i{width:9px;height:9px;border-radius:50%;background:var(--faint)}
.rows{padding:8px 6px}
.row{display:flex;align-items:center;gap:12px;padding:11px 10px;border-radius:10px;font:13px var(--mono);color:var(--faint);transition:color .3s,background .3s}
.row:hover{background:rgba(46,230,242,.06)}
.row .ic{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;border:1px solid var(--edge);flex:none;transition:.3s}
.row .t{margin-left:auto;font-size:11px;opacity:0;transition:.3s}
.row.on{color:var(--ink)}
.row.on .ic{border-color:var(--cy);box-shadow:0 0 16px -2px var(--cyg);background:rgba(46,230,242,.12)}
.row.on .t{opacity:.6}
.row.fin{background:rgba(46,230,242,.08);border:1px solid rgba(46,230,242,.35)}
.row.fin .ic{background:var(--cy);color:#001417}
.panel-foot{display:flex;justify-content:space-between;align-items:center;padding:6px 16px 0;font:12px var(--mono);color:var(--faint)}
.panel-foot button{color:var(--mute)}.panel-foot button:hover{color:var(--cy)}
.stepper{display:flex;align-items:flex-start;margin:30px 0 0}
.st{flex:1;text-align:center;font:11px var(--mono);color:var(--faint);position:relative}
.st::before{content:"";display:block;width:34px;height:34px;margin:0 auto 10px;border-radius:50%;border:1px solid var(--edge);background:var(--bg2);transition:.35s;position:relative;z-index:1}
.st::after{content:"";position:absolute;top:17px;left:calc(50% + 17px);right:calc(-50% + 17px);height:2px;background:var(--edge);transition:.35s}
.st:last-child::after{display:none}
.st.on{color:var(--ink)}
.st.on::before{border-color:var(--cy);background:radial-gradient(circle,var(--cy) 0 30%,rgba(46,230,242,.15) 32%);box-shadow:0 0 22px var(--cyg)}
.st.on::after{background:var(--cy);box-shadow:0 0 10px var(--cyg)}

/* ---- 03 SERVICES ---- */
.svc{padding:120px 0}
.svc-top{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:14px 28px;margin-bottom:28px}   /* the switch sits on the title row: the cards get that height */
.svc-top .sec-head{margin:0}
.toggle{display:inline-flex;padding:5px;border-radius:999px;margin:0 0 34px;position:relative;background:var(--panel);border:1px solid var(--edge)}
.svc-top .toggle{margin:0 0 4px}
.toggle button{position:relative;z-index:1;padding:10px 20px;border-radius:999px;font-weight:700;font-size:14px;color:var(--mute);transition:color .25s}
.toggle button:hover{color:var(--ink)}
.toggle button.on{color:#001417}
.toggle .pill{position:absolute;top:5px;bottom:5px;left:5px;border-radius:999px;background:var(--cy);box-shadow:0 0 24px var(--cyg);transition:left .35s cubic-bezier(.3,.8,.3,1),width .35s}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{padding:22px;display:flex;flex-direction:column;overflow:hidden}
.card h3{font-size:21px;margin:10px 0 12px}
/* the picture («Просто») and the live diagram («Технічно») share one box, and both texts share one cell:
   switching only cross-fades — nothing on the page changes size or moves */
.card .cv{display:grid;margin:-22px -22px 16px;aspect-ratio:16/9;position:relative;overflow:hidden;background:#061018;border-bottom:1px solid var(--edge)}
.card .cv>*,.card .cb>*{grid-area:1/1;min-width:0;min-height:0}
.card .cb{display:grid}
.card .cb>ul{align-content:start}
.card-img{overflow:hidden;position:relative}
.card-img img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);transition:filter .5s;will-change:transform}
.card:hover .card-img img{filter:brightness(1.15) saturate(1.1)}
.card-img::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(8,16,26,.95))}
.card .card-img,.card .mini,.card .cb>ul{transition:opacity .45s ease,visibility 0s}
body:not(.tech) .card .mini,body.tech .card .card-img,body:not(.tech) .card .v-tech,body.tech .card .v-simple{opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s .3s}
body:not(.tech) .card .mini *{animation-play-state:paused}   /* the hidden diagram does not burn frames */
.card .cv::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:3;background:#e4fdff;box-shadow:0 0 12px var(--cy),0 0 30px var(--cyg);opacity:0;pointer-events:none}
body.sw .card .cv::after{animation:beamLine .6s cubic-bezier(.6,0,.2,1)}   /* a scan line sweeps the box on every switch */
.card ul{list-style:none;display:grid;gap:8px;font-size:14.5px;color:var(--mute);margin-bottom:18px}
.card li b{color:var(--ink);font-weight:600}
.card .v-tech li{font:13px var(--mono);color:var(--mute)}
.card .v-tech li::before{content:"› ";color:var(--cy)}
.card .v-tech .out{margin-top:6px;padding-top:10px;border-top:1px dashed var(--edge);font:12.5px/1.5 var(--sans);color:var(--ink)}
.card .v-tech .out::before{content:none}
.card .v-tech .out b{color:var(--cy);font-weight:600}
.card .mini{border:0;border-radius:0}
.mini{position:relative;overflow:hidden;border-radius:12px;border:1px solid var(--edge)}
/* live diagrams: n8n workflow · GHL workflow + contact · AI-agent architecture (all loop) */
.dg{--nb:#0b1721;--ns:rgba(120,220,255,.3);--lc:rgba(46,230,242,.2);--ls:#2ee6f2;--hc:rgba(255,106,43,.22);--hs:#ff6a2b;
  background:radial-gradient(rgba(143,169,181,.2) .9px,transparent 1.3px) 0 0/12px 12px,linear-gradient(170deg,#061019,#03080d)}
.dg svg{display:block;width:100%;height:100%}
.dg-bg{fill:transparent}
.dg text{font-family:var(--mono)}
.dg .nd rect{fill:var(--nb);stroke:var(--ns);stroke-width:1.2}
.dg .nd path,.dg .nd ellipse{fill:none;stroke:#9fe9f0;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.dg .lb{font-size:8.5px;font-weight:600;fill:#8fa9b5;text-anchor:middle;letter-spacing:.03em}
.dg-lk path{fill:none;stroke:rgba(120,220,255,.4);stroke-width:1.4;stroke-dasharray:4 4;animation:dgFlow .9s linear infinite}
.dg-lk .dg-err{stroke:rgba(255,106,43,.55)}
.dg-lk .dg-back{stroke:rgba(255,160,110,.45);stroke-dasharray:2 4}
@keyframes dgFlow{to{stroke-dashoffset:-8}}
.dg-ew{fill:rgba(255,106,43,.035);stroke:rgba(255,106,43,.32);stroke-dasharray:3 4}
.dg-cap{font-size:7.5px;font-weight:600;fill:rgba(255,150,100,.85);letter-spacing:.14em;text-transform:uppercase}
.dg-t{font-size:7.5px;fill:rgba(46,230,242,.75)}
.dg-s0{font-size:8px;fill:#56707c;letter-spacing:.05em}
.dg-s{font-size:9px;font-weight:600;fill:var(--cy);opacity:0}
.dg-e{font-size:7px;fill:#56707c}
.dg-h{font-family:var(--sans)!important;font-size:10.5px;font-weight:700;fill:#e6f4f8}
.dg-m{font-size:7.5px;fill:#56707c;letter-spacing:.12em}
/* n8n: success run, then HTTP 503 → error workflow → retry → success (8s) */
.dga .k1 rect{animation:ka1 8s infinite}.dga .k2 rect{animation:ka2 8s infinite}.dga .k3 rect{animation:ka3 8s infinite}.dga .k4 rect{animation:ka4 8s infinite}.dga .k5 rect{animation:ka5 8s infinite}
.dga .e1 rect{animation:ke1 8s infinite}.dga .e2 rect{animation:ke2 8s infinite}.dga .e3 rect{animation:ke3 8s infinite}
.dga .e1 path,.dga .e2 path,.dga .e3 path{stroke:#ffb58c}
.dga .st1{animation:ks1 8s infinite}.dga .st2{animation:ks2 8s infinite;fill:var(--hot)}.dga .st3{animation:ks3 8s infinite}
@keyframes ka1{0%,10%{fill:var(--lc);stroke:var(--ls)}13%,48%{fill:var(--nb);stroke:var(--ns)}50%,60%{fill:var(--lc);stroke:var(--ls)}63%,100%{fill:var(--nb);stroke:var(--ns)}}
@keyframes ka2{0%,5%{fill:var(--nb);stroke:var(--ns)}7%,16%{fill:var(--lc);stroke:var(--ls)}19%,55%{fill:var(--nb);stroke:var(--ns)}57%,66%{fill:var(--lc);stroke:var(--ls)}69%,100%{fill:var(--nb);stroke:var(--ns)}}
@keyframes ka3{0%,11%{fill:var(--nb);stroke:var(--ns)}13%,22%{fill:var(--lc);stroke:var(--ls)}25%,61%{fill:var(--nb);stroke:var(--ns)}63%,70%{fill:var(--hc);stroke:var(--hs)}72%,79%{fill:var(--nb);stroke:var(--ns)}81%,90%{fill:var(--lc);stroke:var(--ls)}92%,100%{fill:var(--nb);stroke:var(--ns)}}
@keyframes ka4{0%,17%{fill:var(--nb);stroke:var(--ns)}19%,28%{fill:var(--lc);stroke:var(--ls)}31%,85%{fill:var(--nb);stroke:var(--ns)}87%,95%{fill:var(--lc);stroke:var(--ls)}97%,100%{fill:var(--nb);stroke:var(--ns)}}
@keyframes ka5{0%,24%{fill:var(--nb);stroke:var(--ns)}26%,40%{fill:var(--lc);stroke:var(--ls)}43%,90%{fill:var(--nb);stroke:var(--ns)}92%,99%{fill:var(--lc);stroke:var(--ls)}100%{fill:var(--nb);stroke:var(--ns)}}
@keyframes ke1{0%,66%{fill:var(--nb);stroke:var(--ns)}68%,76%{fill:var(--hc);stroke:var(--hs)}79%,100%{fill:var(--nb);stroke:var(--ns)}}
@keyframes ke2{0%,71%{fill:var(--nb);stroke:var(--ns)}73%,82%{fill:var(--hc);stroke:var(--hs)}85%,100%{fill:var(--nb);stroke:var(--ns)}}
@keyframes ke3{0%,74%{fill:var(--nb);stroke:var(--ns)}76%,84%{fill:var(--hc);stroke:var(--hs)}87%,100%{fill:var(--nb);stroke:var(--ns)}}
@keyframes ks1{0%,27%{opacity:0}30%,46%{opacity:1}49%,100%{opacity:0}}
@keyframes ks2{0%,62%{opacity:0}64%,78%{opacity:1}80%,100%{opacity:0}}
@keyframes ks3{0%,88%{opacity:0}90%,99%{opacity:1}100%{opacity:0}}
/* GHL: workflow on the left, the contact changes on the right (6s) */
.dgb .dg-rail{fill:none;stroke:rgba(120,220,255,.3);stroke-width:1.4;stroke-dasharray:3 5;animation:dgFlow 1s linear infinite}
.dgb .rw circle{fill:var(--nb);stroke:rgba(120,220,255,.5);stroke-width:1.4}
.dgb .rw rect{fill:var(--nb);stroke:rgba(120,220,255,.22)}
.dgb .rw text{font-size:9px;fill:#9fb6c1}
.dgb .rw .k{font-weight:700;fill:#8fe9f0}
.dgb .r1 .k{fill:var(--hot)}
.dgb .r1 rect{animation:gr1 6s infinite}.dgb .r2 rect{animation:gr2 6s infinite}.dgb .r3 rect{animation:gr3 6s infinite}.dgb .r4 rect{animation:gr4 6s infinite}.dgb .r5 rect{animation:gr5 6s infinite}.dgb .r6 rect{animation:gr6 6s infinite}
@keyframes gr1{0%,13%{fill:var(--hc);stroke:var(--hs)}15%,100%{fill:var(--nb);stroke:rgba(120,220,255,.22)}}
@keyframes gr2{0%,13%{fill:var(--nb);stroke:rgba(120,220,255,.22)}14%,27%{fill:var(--lc);stroke:var(--ls)}29%,100%{fill:var(--nb);stroke:rgba(120,220,255,.22)}}
@keyframes gr3{0%,27%{fill:var(--nb);stroke:rgba(120,220,255,.22)}28%,41%{fill:var(--lc);stroke:var(--ls)}43%,100%{fill:var(--nb);stroke:rgba(120,220,255,.22)}}
@keyframes gr4{0%,41%{fill:var(--nb);stroke:rgba(120,220,255,.22)}42%,55%{fill:var(--lc);stroke:var(--ls)}57%,100%{fill:var(--nb);stroke:rgba(120,220,255,.22)}}
@keyframes gr5{0%,55%{fill:var(--nb);stroke:rgba(120,220,255,.22)}56%,69%{fill:var(--lc);stroke:var(--ls)}71%,100%{fill:var(--nb);stroke:rgba(120,220,255,.22)}}
@keyframes gr6{0%,69%{fill:var(--nb);stroke:rgba(120,220,255,.22)}70%,92%{fill:var(--lc);stroke:var(--ls)}95%,100%{fill:var(--nb);stroke:rgba(120,220,255,.22)}}
.dgb .dg-dot{fill:#e9fdff;filter:drop-shadow(0 0 4px #2ee6f2);animation:gDot 6s infinite}
@keyframes gDot{0%{transform:translateY(0);opacity:1}70%,90%{transform:translateY(140px);opacity:1}96%,100%{transform:translateY(140px);opacity:0}}
.dgb .dg-card{fill:#08131b;stroke:rgba(120,220,255,.2)}
.dgb .dg-av{fill:rgba(46,230,242,.14);stroke:var(--cy);stroke-width:1.2}
.dgb .dg-avt{font-size:11px;font-weight:700;fill:var(--cy);text-anchor:middle}
.dgb .dg-v{font-size:11px;font-weight:700;opacity:0}
.dgb .v1{fill:var(--hot);animation:gv1 6s infinite}.dgb .v2{fill:#9fe9f0;animation:gv2 6s infinite}.dgb .v3{fill:#9fe9f0;animation:gv3 6s infinite}.dgb .v4,.dgb .v5{fill:var(--cy);animation:gv4 6s infinite}
@keyframes gv1{0%,26%{opacity:1}28%,100%{opacity:0}}
@keyframes gv2{0%,27%{opacity:0}28%,55%{opacity:1}57%,100%{opacity:0}}
@keyframes gv3{0%,55%{opacity:0}56%,69%{opacity:1}71%,100%{opacity:0}}
@keyframes gv4{0%,69%{opacity:0}71%,94%{opacity:1}97%,100%{opacity:0}}
.dgb .tg rect{fill:rgba(46,230,242,.14);stroke:var(--cy)}
.dgb .tg text{font-size:8px;fill:#e6f4f8;text-anchor:middle}
.dgb .t1 rect{fill:rgba(255,106,43,.16);stroke:var(--hot)}
.dgb .t1{animation:gt1 6s infinite}.dgb .t2{animation:gt2 6s infinite}.dgb .t3{animation:gt3 6s infinite}.dgb .t4{animation:gt4 6s infinite}
@keyframes gt1{0%{opacity:.2}3%,94%{opacity:1}97%,100%{opacity:.2}}
@keyframes gt2{0%,29%{opacity:.2}31%,94%{opacity:1}97%,100%{opacity:.2}}
@keyframes gt3{0%,57%{opacity:.2}59%,94%{opacity:1}97%,100%{opacity:.2}}
@keyframes gt4{0%,71%{opacity:.2}73%,94%{opacity:1}97%,100%{opacity:.2}}
/* AI agent: message in → think → RAG → calendar → CRM → memory → reply (6s) */
.dgc .ch rect{fill:var(--nb);stroke:var(--ns)}
.dgc .ch text{font-size:8.5px;fill:#9fb6c1;text-anchor:middle}
.dgc .c1 rect{animation:cc1 6s infinite}
.dgc .a0 rect{animation:ca0 6s infinite}.dgc .ag rect{animation:cag 6s infinite}.dgc .a1 rect{animation:ca1 6s infinite}.dgc .a2 rect{animation:ca2 6s infinite}.dgc .a3 rect{animation:ca3 6s infinite}.dgc .a4 rect{animation:ca4 6s infinite}
@keyframes cc1{0%,10%{fill:var(--lc);stroke:var(--ls)}12%,69%{fill:var(--nb);stroke:var(--ns)}70%,82%{fill:var(--lc);stroke:var(--ls)}84%,100%{fill:var(--nb);stroke:var(--ns)}}
@keyframes cag{0%,8%{fill:var(--nb);stroke:var(--ns)}10%,72%{fill:rgba(46,230,242,.12);stroke:var(--ls)}75%,100%{fill:var(--nb);stroke:var(--ns)}}
@keyframes ca0{0%,11%{fill:var(--nb);stroke:var(--ns)}12%,24%{fill:var(--lc);stroke:var(--ls)}26%,100%{fill:var(--nb);stroke:var(--ns)}}
@keyframes ca1{0%,23%{fill:var(--nb);stroke:var(--ns)}24%,36%{fill:var(--lc);stroke:var(--ls)}38%,100%{fill:var(--nb);stroke:var(--ns)}}
@keyframes ca2{0%,35%{fill:var(--nb);stroke:var(--ns)}36%,48%{fill:var(--lc);stroke:var(--ls)}50%,100%{fill:var(--nb);stroke:var(--ns)}}
@keyframes ca3{0%,47%{fill:var(--nb);stroke:var(--ns)}48%,60%{fill:var(--hc);stroke:var(--hs)}62%,100%{fill:var(--nb);stroke:var(--ns)}}
@keyframes ca4{0%,59%{fill:var(--nb);stroke:var(--ns)}60%,70%{fill:var(--lc);stroke:var(--ls)}72%,100%{fill:var(--nb);stroke:var(--ns)}}
.dgc .pk{fill:#e9fdff;opacity:0;filter:drop-shadow(0 0 4px #2ee6f2)}
.dgc .p1{animation:pk1 6s infinite}.dgc .p2{animation:pk2 6s infinite}.dgc .p3{animation:pk3 6s infinite}.dgc .p4{animation:pk4 6s infinite}.dgc .p5{animation:pk5 6s infinite}.dgc .p6{animation:pk6 6s infinite}.dgc .p7{animation:pk7 6s infinite}
@keyframes pk1{0%{opacity:1;transform:none}10%{opacity:1;transform:translate(42px,35px)}11%,100%{opacity:0;transform:translate(42px,35px)}}
@keyframes pk2{0%,11%{opacity:0;transform:none}12%{opacity:1;transform:none}18%{opacity:1;transform:translate(0,-36px)}24%{opacity:1;transform:none}25%,100%{opacity:0;transform:none}}
@keyframes pk3{0%,23%{opacity:0;transform:none}24%{opacity:1;transform:none}30%{opacity:1;transform:translate(36px,-58px)}36%{opacity:1;transform:none}37%,100%{opacity:0;transform:none}}
@keyframes pk4{0%,35%{opacity:0;transform:none}36%{opacity:1;transform:none}42%{opacity:1;transform:translate(36px,-26px)}48%{opacity:1;transform:none}49%,100%{opacity:0;transform:none}}
@keyframes pk5{0%,47%{opacity:0;transform:none}48%{opacity:1;transform:none}54%{opacity:1;transform:translate(36px,6px)}60%{opacity:1;transform:none}61%,100%{opacity:0;transform:none}}
@keyframes pk6{0%,59%{opacity:0;transform:none}60%{opacity:1;transform:none}65%{opacity:1;transform:translate(36px,38px)}70%{opacity:1;transform:none}71%,100%{opacity:0;transform:none}}
@keyframes pk7{0%,69%{opacity:0;transform:none}70%{opacity:1;transform:none}80%{opacity:1;transform:translate(-42px,-35px)}81%,100%{opacity:0;transform:translate(-42px,-35px)}}
.dgc .q1{fill:#9fe9f0;animation:cq1 6s infinite}.dgc .q2{fill:var(--cy);animation:cq2 6s infinite}
@keyframes cq1{0%,38%{opacity:1}41%,100%{opacity:0}}
@keyframes cq2{0%,72%{opacity:0}75%,97%{opacity:1}100%{opacity:0}}

/* tapes: two crossing marquee tapes (as on coach-holinei) */
/* the crossing tapes open a section (Services, FAQ), so they are on screen when you land there */
.tapes{position:relative;height:150px;overflow:hidden;z-index:4;pointer-events:none;margin:0 0 14px}
.svc,.faq{padding-top:0}
.tape{position:absolute;left:-6%;width:112%;overflow:hidden;display:flex;padding:13px 0;box-shadow:0 18px 50px -12px rgba(0,0,0,.75)}
.tape.a{top:52px;transform:rotate(-2.1deg);background:linear-gradient(180deg,#9df8fd,var(--cy));z-index:2;box-shadow:0 18px 50px -12px rgba(0,0,0,.75),0 0 40px -10px var(--cyg)}
.tape.b{top:52px;transform:rotate(1.7deg);background:#0b141c;z-index:1;border-top:1px solid rgba(120,220,255,.14);border-bottom:1px solid rgba(120,220,255,.14)}
.tapes.t2 .tape.a{transform:rotate(2.1deg)}.tapes.t2 .tape.b{transform:rotate(-1.7deg)}
.tk{display:flex;flex-shrink:0;animation:mq 80s linear infinite}   /* ~60–70 px/s: calm, readable (was ~210) */
.tape.b .tk{animation-duration:92s;animation-direction:reverse}
.tape span{font:600 16px var(--sans);letter-spacing:.24em;color:#001417;text-transform:uppercase;padding:0 16px;white-space:nowrap}
.tape span::after{content:"✦";margin-left:32px;font-size:13px}
.tape.b span{color:#6d8894}
.tape.b span::after{color:var(--cy)}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-100%)}}

/* ---- 04 CASES ---- */
.cases{padding:70px 0 110px}
.cases::before{content:"";position:absolute;left:50%;top:-6%;width:900px;max-width:100%;height:700px;transform:translateX(-50%);background:conic-gradient(from 180deg at 50% 0,transparent 160deg,rgba(46,230,242,.14) 175deg,rgba(160,250,255,.2) 180deg,rgba(46,230,242,.14) 185deg,transparent 200deg);filter:blur(18px);pointer-events:none}
.qgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.q{padding:22px;display:grid;gap:12px;align-content:start}
.q-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.q h3{font-size:22px}
.q-thumb{border-radius:12px;border:1px solid var(--edge);aspect-ratio:16/8;object-fit:cover;object-position:top;width:100%}
.lvl{font:600 11px var(--mono);color:var(--cy);white-space:nowrap;padding:6px 10px;border:1px solid rgba(46,230,242,.35);border-radius:999px}
.bar{height:6px;border-radius:6px;background:rgba(255,255,255,.06);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cy2),var(--cy));box-shadow:0 0 14px var(--cyg);transition:width 1.4s cubic-bezier(.2,.7,.2,1)}
.q.in .bar i,.q-feat2.in .bar i{width:var(--p)}
.stages{list-style:none;display:grid;gap:6px;font:12.5px var(--mono)}
.stages li{display:flex;gap:10px;align-items:center;color:var(--faint);transition:transform .25s,color .25s}
.stages li:hover{transform:translateX(6px);color:var(--ink)}
.stages li::before{content:"";width:14px;height:14px;border-radius:4px;border:1px solid var(--faint);flex:none}
.stages li.d{color:var(--ink)}
.stages li.d::before{background:var(--cy);border-color:var(--cy);box-shadow:0 0 10px var(--cyg)}
.stages li.p{color:var(--mute)}
.stages li.p::before{border-color:var(--hot);box-shadow:inset 0 0 0 3px var(--bg),inset 0 0 0 10px var(--hot)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips span{font:11px var(--mono);padding:4px 9px;border-radius:6px;background:rgba(255,255,255,.05);color:var(--mute);transition:.25s}
.chips span:hover{background:rgba(46,230,242,.18);color:var(--ink);transform:translateY(-2px)}
.fact{font:12px var(--mono);color:var(--mute)}.fact b{color:var(--cy)}

/* elite work cards (from coach-holinei card) */
.q-feat2{grid-column:1/-1;display:grid;grid-template-columns:.9fr 1.4fr;gap:40px;align-items:center;padding:10px 0 30px}
.qf-info{display:grid;gap:14px}
.qf-info h3{font-size:28px}
.wc-row{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.wcard-wrap{position:relative;perspective:1250px}
.wcard-wrap:nth-child(2){margin-top:46px}
.wtilt{position:relative;transform-style:preserve-3d;will-change:transform}
.waura{position:absolute;left:50%;top:-30%;width:170%;height:130%;transform:translateX(-50%) translateZ(-30px);pointer-events:none;background:radial-gradient(50% 46% at 50% 52%,rgba(46,230,242,.22),rgba(46,230,242,.08) 45%,rgba(46,230,242,.02) 68%,transparent 82%)}
.waura.hot{background:radial-gradient(46% 42% at 50% 52%,rgba(255,106,43,.22),rgba(255,106,43,.07) 45%,transparent 75%),radial-gradient(30% 34% at 62% 40%,rgba(46,230,242,.14),transparent 70%)}
.wcard{position:relative;border-radius:20px;overflow:hidden;background:rgba(8,14,20,.9);transform-style:preserve-3d;border:1px solid rgba(255,255,255,.14);
  box-shadow:0 60px 150px -30px rgba(0,0,0,.95),0 26px 60px -18px rgba(0,0,0,.8),0 0 40px -6px rgba(46,230,242,.18),inset 0 1.5px 0 rgba(255,255,255,.45),inset 0 0 0 9px rgba(255,255,255,.04),inset 0 10px 26px -8px rgba(255,255,255,.16)}
.wcard::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:20px;background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.08) 47%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.08) 53%,transparent 62%);background-size:280% 280%;background-position:var(--sx,20%) var(--sy,20%)}
.wimg{height:230px;position:relative;overflow:hidden;background:#061018}
.wimg img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.wcard-wrap:hover .wimg img{transform:scale(1.06)}
.wimg::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,14,20,.97) 4%,transparent 55%),radial-gradient(70% 60% at 50% 28%,rgba(46,230,242,.12),transparent 70%)}
.wneon{position:absolute;inset:0;border-radius:20px;z-index:6;pointer-events:none;border:2.5px solid transparent;
  background:linear-gradient(158deg,rgba(200,250,255,.95) 0%,rgba(46,230,242,.85) 16%,rgba(46,230,242,.3) 32%,rgba(255,255,255,.12) 48%,rgba(255,106,43,.3) 66%,rgba(255,150,90,.85) 84%,rgba(255,210,170,.95) 100%) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);mask-composite:exclude;
  filter:drop-shadow(0 0 7px rgba(46,230,242,.5)) drop-shadow(0 0 14px rgba(255,106,43,.25))}
.wframe{position:absolute;inset:7px;border-radius:14px;z-index:6;pointer-events:none;border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.wframe::before{content:"";position:absolute;left:12%;right:12%;top:-1px;height:2px;border-radius:99px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent)}
.wplate{position:relative;z-index:2;margin-top:-40px;padding:0 20px 20px}
.wkind{font:600 10.5px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--cy)}
.wplate h4{font:700 24px/1.1 var(--sans);text-transform:uppercase;letter-spacing:.02em;margin:4px 0 2px}
.wplate h4 em{font-style:normal;color:var(--cy)}
.wcls{font-size:12.5px;color:var(--mute);margin:0 0 14px}
.wattr{display:flex;align-items:center;gap:12px;margin:0 0 10px}
.wattr span{flex:0 0 92px;font:500 10.5px var(--mono);letter-spacing:.14em;color:var(--mute);text-transform:uppercase}
.wattr b{font:600 13px var(--mono);min-width:48px;text-align:right}
.wbar{position:relative;flex:1;height:10px;border-radius:99px;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.09);box-shadow:inset 0 2px 5px rgba(0,0,0,.65)}
.wbar i{position:relative;display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(180deg,#9ff6ff,var(--cy) 55%,#0d8aa0);box-shadow:0 0 14px rgba(46,230,242,.55),inset 0 1px 0 rgba(255,255,255,.45);transition:width 1.4s cubic-bezier(.2,.7,.3,1)}
.wbar i::after{content:"";position:absolute;right:-7px;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%;background:radial-gradient(circle at 34% 28%,#fff,#d8fbff 42%,#6fe3ee);border:1px solid rgba(255,255,255,.75);box-shadow:0 3px 8px rgba(0,0,0,.7),0 0 16px rgba(46,230,242,.65);opacity:0;transition:opacity .5s .9s}
.wattr:nth-child(5) .wbar i{transition-delay:.15s}.wattr:nth-child(6) .wbar i{transition-delay:.3s}.wattr:nth-child(7) .wbar i{transition-delay:.45s}
.q-feat2.in .wbar i{width:var(--w)}.q-feat2.in .wbar i::after{opacity:1}
.wcard-wrap:nth-child(2) .wbar i{background:linear-gradient(180deg,#ffc9a8,var(--hot) 55%,#b8420f);box-shadow:0 0 14px rgba(255,106,43,.55),inset 0 1px 0 rgba(255,255,255,.45)}
.wcard-wrap:nth-child(2) .wkind,.wcard-wrap:nth-child(2) h4 em{color:var(--hot)}

/* ---- 05 FIT + FAQ ---- */
.faq{padding:110px 0 90px}
/* FAQ: «кому підходить / ні» on the left, questions on the right (one open at a time) */
.faq-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:18px;align-items:start}
.fit-grid{display:grid;gap:14px}
.fit-grid .glass{padding:20px 22px}
.fit-grid h3{display:flex;align-items:center;gap:10px;font-size:19px;margin-bottom:12px}
.fit-grid h3 i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;font:700 14px var(--sans);font-style:normal;color:#001417;background:var(--cy);box-shadow:0 0 16px -2px var(--cyg)}
.fit-grid .no h3 i{background:var(--hot);box-shadow:0 0 16px -2px rgba(255,106,43,.6)}
.fit-grid ul{list-style:none;display:grid;gap:8px;color:var(--mute);font-size:14.5px;line-height:1.45}
.fit-grid li{position:relative;padding-left:18px}
.fit-grid li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:2px;background:var(--cy);box-shadow:0 0 8px var(--cyg)}
.fit-grid .no li::before{background:var(--hot);box-shadow:0 0 8px rgba(255,106,43,.6)}
.faq-list details{margin-bottom:10px;border-radius:14px}
.faq-list summary{list-style:none;cursor:pointer;padding:15px 20px;font-weight:600;font-size:16px;display:flex;align-items:center;gap:14px;transition:color .25s}
.faq-list summary i{flex:none;font:600 11px var(--mono);font-style:normal;letter-spacing:.08em;color:var(--cy);padding:4px 7px;border-radius:7px;border:1px solid rgba(46,230,242,.3);background:rgba(46,230,242,.06);transition:background .25s,color .25s}
.faq-list summary:hover{color:var(--cy)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";margin-left:auto;font:400 22px/1 var(--mono);color:var(--cy);transition:transform .25s}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list details[open] summary i{background:var(--cy);color:#001417}
.faq-list .fa p{padding:0 20px 18px 66px;color:var(--mute);line-height:1.55}
.faq-list details[open] .fa{animation:msg .35s ease}
.faq-more{margin-top:4px;padding-left:4px;font:13px var(--mono);color:var(--faint)}
.faq-more a{color:var(--cy);text-decoration:underline dotted;text-underline-offset:4px}.faq-more a:hover{color:#fff}

/* ---- 06 BRIEF: one screen; the form itself opens as a window ---- */
.brief{padding:clamp(56px,11vh,110px) 0 clamp(36px,7vh,80px)}
.brief .sec-head .lead{max-width:760px}
.brief-go{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;margin:clamp(20px,4vh,34px) auto 0;max-width:980px}
.brief-go .btn{padding:16px 26px;font-size:15.5px}
.bg-tg svg,.bw-tg svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;flex:none}
.brief-note{flex-basis:100%;text-align:center;font:12.5px/1.5 var(--mono);color:var(--mute)}
.brief-note span{display:inline-block;padding:6px 14px;border-radius:999px;background:rgba(3,8,12,.82);border:1px solid var(--edge)}
/* the brief window: a chat with the digital me (left) + the brief assembling live (right) */
.bmodal{position:fixed;inset:0;z-index:118;display:flex;align-items:center;justify-content:center;padding:14px;background:rgba(3,6,10,.9);opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
.bmodal.open{opacity:1;visibility:visible;transition:opacity .3s}
.bw-card{position:relative;width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden;border-radius:24px;padding:clamp(16px,2.4vh,26px) clamp(18px,2.2vw,28px);
  background:linear-gradient(170deg,rgba(10,20,28,.99),rgba(4,9,14,.99));box-shadow:0 60px 150px -30px #000,0 0 60px -10px rgba(46,230,242,.2),inset 0 1.5px 0 rgba(255,255,255,.3);
  transform:translateY(18px) scale(.98);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.bmodal.open .bw-card{transform:none}
.bw-card>.wneon{border-radius:24px;z-index:8}.bw-card>.wframe{border-radius:17px;z-index:8}
/* the plant behind the chat (v3.9): a generated render that comes alive — js «the plant» draws light over it,
   the camera drifts (CSS, compositor only); holo tags mark the machines that hurt */
.bw-scene{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;border-radius:inherit;background:radial-gradient(120% 90% at 55% 45%,#0a1a24,#03070b 70%)}
.bw-cam{position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:53% 44%}
.bw-scene.run .bw-cam{animation:bwDrift 46s ease-in-out infinite alternate}
@keyframes bwDrift{from{transform:scale(1) translate3d(0,0,0)}to{transform:scale(1.045) translate3d(-1.1%,-.7%,0)}}
.bw-img{position:absolute;inset:0;background:0 0/100% 100% no-repeat;opacity:0;transition:opacity 1s ease}
.bw-scene.ok .bw-img{opacity:1}
.bw-fx{position:absolute;inset:0;width:100%;height:100%;display:block;mix-blend-mode:screen}
.bw-vig{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(3,7,11,.8),rgba(3,7,11,.35) 34%,rgba(3,7,11,0) 46%,rgba(3,7,11,0) 70%,rgba(3,7,11,.4) 80%,rgba(3,7,11,.8)),
    linear-gradient(rgba(3,7,11,.82),rgba(3,7,11,.2) 18%,transparent 30%,transparent 78%,rgba(3,7,11,.55))}
.bw-tags{position:absolute;inset:0}
.bw-tag{position:absolute;width:0;height:0;transition:opacity .4s}
.bw-tag.off{opacity:0}
.bw-tag span{position:absolute;left:var(--dx,0px);bottom:22px;transform:translateX(-50%);display:grid;gap:1px;padding:6px 10px 7px;white-space:nowrap;border-radius:3px;
  border:1px solid rgba(46,230,242,.6);background:rgba(3,10,14,.86);box-shadow:0 0 22px -6px var(--cyg);animation:tagIn .6s steps(1) both,tagUp .5s cubic-bezier(.2,.8,.2,1) both}
.bw-tag b{font:700 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#e9fdff}
.bw-tag small{font:500 9.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--hot)}
.bw-tag::before{content:"";position:absolute;left:-.5px;bottom:0;width:1px;height:22px;background:linear-gradient(rgba(46,230,242,.9),rgba(46,230,242,.2))}
.bw-tag::after{content:"";position:absolute;left:-4px;top:-4px;width:8px;height:8px;transform:rotate(45deg);border:1.5px solid var(--cy);background:rgba(46,230,242,.35);box-shadow:0 0 10px var(--cy)}
.bw-tag.dn span{bottom:auto;top:22px}.bw-tag.dn::before{bottom:auto;top:0;background:linear-gradient(rgba(46,230,242,.2),rgba(46,230,242,.9))}
@keyframes tagIn{0%{opacity:0}15%{opacity:1}25%{opacity:.3}40%{opacity:1}}
@keyframes tagUp{from{translate:0 8px}}
.bw-cap{margin-left:auto;max-width:390px;text-align:right;font:11.5px/1.5 var(--mono);color:var(--mute);letter-spacing:.02em}
.bw-grid>.bw-chat{grid-column:1}.bw-grid>.bw-out{grid-column:3}   /* the middle column stays empty: the plant shows through it */
.bw-sum.got{animation:sumGot .8s ease}
@keyframes sumGot{30%{border-color:var(--cy);box-shadow:0 0 0 3px rgba(46,230,242,.28),0 0 40px -8px var(--cyg)}}
.bw-x{position:absolute;right:16px;top:16px;z-index:9;display:flex;align-items:center;gap:8px;height:34px;padding:0 10px;border-radius:4px;border:1px solid rgba(255,255,255,.14);background:rgba(3,8,12,.8);color:var(--mute);transition:color .2s,border-color .2s,background .2s}
.bw-x kbd{font:600 9.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:2px 5px;border-radius:3px;border:1px solid rgba(255,255,255,.16);color:var(--faint)}
.bw-x svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
.bw-x:hover{color:var(--hot);border-color:rgba(255,106,43,.6);background:rgba(255,106,43,.1)}
.bw-head{position:relative;z-index:7;display:flex;align-items:center;gap:14px;margin:0 96px clamp(10px,1.8vh,16px) 0;flex:none}
.bw-eye{font:600 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--cy)}
.bw-head h2{font-size:clamp(22px,3.4vh,30px);line-height:1.1;margin:2px 0 2px}
.bw-head h2 em{font-style:normal;color:var(--cy)}
.bw-sub{font:500 14px/1.4 var(--sans);color:var(--mute)}
.bw-grid{position:relative;z-index:7;flex:1;min-height:0;display:grid;grid-template-columns:minmax(380px,620px) minmax(0,1fr) minmax(290px,350px);gap:clamp(14px,1.8vw,24px)}
/* chat */
.bw-chat{position:relative;display:flex;flex-direction:column;min-height:0;border-radius:6px;border:1px solid rgba(46,230,242,.22);background:linear-gradient(172deg,rgba(8,18,26,.95),rgba(3,8,12,.95) 55%);box-shadow:0 30px 80px -30px #000,inset 0 1px 0 rgba(255,255,255,.05)}
/* corner brackets — the same HUD frame as the guide's comms panel */
.bw-chat::after,.bw-sum::after{content:"";position:absolute;inset:-1px;pointer-events:none;z-index:3;
  background:linear-gradient(var(--cy),var(--cy)) 0 0/14px 2px,linear-gradient(var(--cy),var(--cy)) 0 0/2px 14px,
    linear-gradient(var(--cy),var(--cy)) 100% 0/14px 2px,linear-gradient(var(--cy),var(--cy)) 100% 0/2px 14px,
    linear-gradient(var(--cy),var(--cy)) 0 100%/14px 2px,linear-gradient(var(--cy),var(--cy)) 0 100%/2px 14px,
    linear-gradient(var(--cy),var(--cy)) 100% 100%/14px 2px,linear-gradient(var(--cy),var(--cy)) 100% 100%/2px 14px;background-repeat:no-repeat}
.bc-head{flex:none;display:flex;align-items:center;gap:12px;padding:9px 14px;border-bottom:1px solid rgba(46,230,242,.14);border-radius:6px 6px 0 0;
  background:repeating-linear-gradient(-45deg,rgba(46,230,242,.05) 0 6px,transparent 6px 12px),linear-gradient(90deg,rgba(46,230,242,.1),transparent 70%)}
.bc-who{font:600 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.bc-who em{font-style:normal;color:var(--cy);margin-left:4px}.bc-who em::before{content:"· "}
.bc-head .hw-vox{margin:0 0 0 auto;height:16px}
.bc-head .hw-ch,.bc-who{white-space:nowrap}
@media (max-width:560px){.bc-head .hw-ch{font-size:0;letter-spacing:0;gap:0}}   /* phone: the live dot stays, «Цифровий Дмитро · онлайн» says the rest */
.bc-log{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(46,230,242,.3) transparent;display:flex;flex-direction:column;gap:5px;padding:14px 18px 12px;mask-image:linear-gradient(transparent,#000 18px);-webkit-mask-image:linear-gradient(transparent,#000 18px)}
.bc-log>:first-child{margin-top:auto}   /* few messages sit down by the field, like in a messenger */
.bc-log .msg{max-width:100%;padding:0;border:0;border-radius:0;background:none;font-size:14.5px;line-height:1.55;overflow-wrap:anywhere;white-space:pre-line;animation:lnIn .35s cubic-bezier(.2,.8,.2,1)}
.bc-log .msg.b{color:var(--ink);padding:0;border:0;border-radius:0;background:none}
.bc-log .msg.u{align-self:stretch;color:#c9d6dc;padding:1px 0 1px 11px;border:0;border-left:2px solid rgba(255,106,43,.6);border-radius:0;background:none}
/* the speaker's name opens each turn (game-transcript style) */
.bc-log .msg.b:first-child::before,.bc-log .msg.u+.msg.b::before,.bc-log .msg.b+.msg.u::before,.bc-log .msg.u:first-child::before{display:block;margin:0 0 3px;font:600 9.5px/1.4 var(--mono);letter-spacing:.18em;text-transform:uppercase}
.bc-log .msg.b:first-child::before,.bc-log .msg.u+.msg.b::before{content:"◆  Дмитро";color:var(--cy)}
.bc-log .msg.b+.msg.u::before,.bc-log .msg.u:first-child::before{content:"◇  Ти";color:var(--hot);margin-left:-11px}
.bc-log .msg.u+.msg.b,.bc-log .msg.b+.msg.u{margin-top:12px}
.bc-log .msg.u.skip{color:var(--faint);font-size:13px;border-left-style:dashed;background:none}
.bc-log .msg.b.note{padding:7px 10px;border:1px solid rgba(255,106,43,.5);border-radius:4px;background:rgba(255,106,43,.07);font-size:13.5px}
.bc-log .msg.b.typing{display:flex;gap:4px;align-items:center;padding:6px 0}
.bc-log .msg.typing i{width:5px;height:5px;border-radius:1px}
.bc-log .msg.note.flash{animation:msg .35s ease}
.bc-log .msg.old{animation:none}
.bc-dock{flex:none;padding:12px 14px;border-top:1px solid rgba(46,230,242,.14);border-radius:0 0 6px 6px;background:linear-gradient(180deg,rgba(46,230,242,.04),rgba(5,11,16,.6) 40%)}
.bc-chips{display:flex;flex-wrap:wrap;gap:6px}
.bc-chips:not(:empty){margin-bottom:10px}
.bc-chip{padding:7px 12px;border-radius:3px;font:600 13px/1.25 var(--sans);color:var(--ink);border:1px solid rgba(46,230,242,.3);background:linear-gradient(180deg,rgba(46,230,242,.09),rgba(46,230,242,.03));transition:border-color .2s,background .2s,color .2s,transform .2s}
.bc-chip:hover{border-color:var(--cy);color:#fff;transform:translateY(-1px)}
.bc-chip:focus-visible{outline:2px solid var(--cy);outline-offset:2px}
.bc-chip.m::before{content:"+";display:inline-block;width:.8em;margin-right:5px;color:var(--cy);font-weight:700}
.bc-chip.m.on{background:var(--cy);border-color:var(--cy);color:#001417;box-shadow:0 0 16px -4px var(--cyg)}
.bc-chip.m.on::before{content:"✓";color:#001417}
.bc-ask.in .bc-chip{animation:msg .35s ease both}
.bc-ask.in .bc-chip:nth-child(2){animation-delay:.04s}.bc-ask.in .bc-chip:nth-child(3){animation-delay:.08s}.bc-ask.in .bc-chip:nth-child(4){animation-delay:.12s}.bc-ask.in .bc-chip:nth-child(5){animation-delay:.16s}.bc-ask.in .bc-chip:nth-child(6){animation-delay:.2s}
.bc-comp{position:relative;display:flex;align-items:flex-end;gap:8px;padding:5px 5px 5px 30px;border-radius:4px;border:1px solid rgba(255,255,255,.16);background:rgba(2,7,10,.7);transition:border-color .2s,box-shadow .2s}
.bc-comp::before{content:"›";position:absolute;left:12px;bottom:12px;font:700 16px/1 var(--mono);color:var(--hot)}
.bc-comp:focus-within{border-color:var(--cy);box-shadow:0 0 0 3px rgba(46,230,242,.14)}
.bc-in{flex:1;min-width:0;height:40px;min-height:40px;max-height:132px;padding:9px 0;resize:none;border:0;background:none;outline:none;color:var(--ink);font:15px/1.45 var(--sans);box-sizing:border-box;scrollbar-width:thin}
.bc-in::placeholder{color:var(--faint)}
.bc-send{flex:none;width:40px;height:40px;border-radius:3px;display:grid;place-items:center;background:var(--cy);color:#001417;box-shadow:0 0 18px -4px var(--cyg);transition:background .2s,color .2s,box-shadow .2s,transform .2s}
.bc-send svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.bc-send:not(:disabled):hover{transform:translateX(2px)}
.bc-send:disabled{background:rgba(255,255,255,.07);color:var(--faint);box-shadow:none;cursor:default}
.bc-ask.wait .bc-comp{opacity:.6}
.bc-ask.wait .bc-send{pointer-events:none}
.bc-row{display:flex;align-items:center;gap:12px;min-height:18px;margin-top:7px;font:11px var(--mono);color:var(--faint)}
.bc-kbd{flex:1;text-align:center;letter-spacing:.04em}
.bc-link{font:600 12px var(--mono);color:var(--cy);text-decoration:underline dotted;text-underline-offset:4px}
.bc-link:hover{color:#fff}
.bc-jump{margin-left:auto;color:var(--hot)}
@media not all and (hover:hover){.bc-kbd{visibility:hidden}}
/* the way out */
.bw-act{animation:msg .35s}
.bw-tg{width:100%;justify-content:center;padding:15px 20px;font-size:15.5px}
.bo-note{margin:8px 2px 0;font:11.5px/1.45 var(--sans);color:var(--faint);text-align:center}
.bw-or{display:block;margin:8px auto 0;font:600 12.5px var(--mono);color:var(--cy);text-decoration:underline dotted;text-underline-offset:4px}
.bw-or:hover{color:#fff}
.bw-contact{display:none}
.bw-act.manual .bw-tgbox{display:none}
.bw-act.manual .bw-contact{display:block;animation:msg .35s}
.bw-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bw-row .inp{margin:0;padding:12px 14px;font-size:14.5px}
.bw-contact .consent{margin:10px 0;font-size:12.5px}
.bw-row2{display:flex;justify-content:space-between;align-items:center;gap:10px}
.bw-row2 .bw-or{margin:0}
.bw-send{padding:13px 24px}
.inp.err{border-color:var(--hot);box-shadow:0 0 0 3px rgba(255,106,43,.18)}
.consent.err{color:var(--hot)}
.bw-done{padding:2px 2px 0;animation:msg .4s}
.bw-done h3{display:flex;align-items:center;gap:10px;font-size:19px;margin:0 0 2px}
.bw-done .big{font-size:26px;line-height:1;color:var(--cy);text-shadow:0 0 20px var(--cyg)}
.bw-done .fq{color:var(--mute);font-size:13.5px}
.bw-done .next3{margin-top:10px;gap:6px}
.bw-done .next3 div{padding:8px 12px;font-size:13.5px}
/* the brief assembling on the right */
.bw-out{display:flex;flex-direction:column;gap:10px;min-height:0;overflow-y:auto;scrollbar-width:thin}
.bw-sum{position:relative;padding:clamp(12px,2vh,18px);border-radius:6px;border:1px solid rgba(46,230,242,.26);background:linear-gradient(172deg,rgba(12,28,38,.95),rgba(4,10,15,.94) 60%);box-shadow:0 30px 80px -30px #000}
.bo-lab{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font:600 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--cy)}
.bo-lab b{font-weight:600;letter-spacing:.06em;color:var(--ink);white-space:nowrap}
.bo-prog{position:relative;height:6px;margin:9px 0 clamp(8px,1.6vh,14px);background:rgba(255,255,255,.09)}
.bo-prog i{display:block;height:100%;width:0;background:var(--cy);box-shadow:0 0 10px var(--cyg);transition:width .5s cubic-bezier(.2,.8,.2,1)}
.bo-prog s{position:absolute;top:0;bottom:0;width:3px;background:#07121a}   /* 5 segments */
.bo-prog s:nth-of-type(1){left:calc(20% - 1.5px)}.bo-prog s:nth-of-type(2){left:calc(40% - 1.5px)}.bo-prog s:nth-of-type(3){left:calc(60% - 1.5px)}.bo-prog s:nth-of-type(4){left:calc(80% - 1.5px)}
.bo-big{display:flex;align-items:flex-end;gap:10px;margin:0 0 2px}
.bo-big b{font:700 clamp(32px,5.4vh,50px)/1 var(--mono);color:#fff;text-shadow:0 0 26px rgba(46,230,242,.55);white-space:nowrap}
.bo-big b.nil{color:var(--faint);text-shadow:none}
.bo-big span{font:600 10.5px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);padding-bottom:4px}
.bo-sub{font:12.5px/1.4 var(--sans);color:var(--faint)}
.bo-list{list-style:none;display:grid;gap:7px;margin-top:clamp(8px,1.4vh,12px);padding-top:clamp(8px,1.4vh,12px);border-top:1px solid var(--edge)}
.bo-list li{display:grid;grid-template-columns:74px minmax(0,1fr);gap:10px;font:12.5px/1.4 var(--mono)}
.bo-list i{font-style:normal;color:var(--faint)}
.bo-list i::before{content:"◇ ";color:var(--faint)}
.bo-list li.ok i::before{content:"◆ ";color:var(--cy)}
.bo-list b{color:var(--mute);font-weight:500;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.bo-list li.ok i{color:var(--cy)}
.bo-list li.ok b{color:var(--ink);font-weight:600}
.bo-next{padding:12px 14px;border-radius:6px;border:1px solid var(--edge);background:rgba(4,10,15,.9)}
.bo-next ol{position:relative;list-style:none;display:grid;gap:8px;margin-top:10px}
.bo-next ol::before{content:"";position:absolute;left:4px;top:6px;bottom:6px;width:1px;background:linear-gradient(var(--cy),rgba(46,230,242,.1))}
.bo-next li{position:relative;display:grid;grid-template-columns:62px minmax(0,1fr);gap:10px;padding-left:18px;font:13px/1.4 var(--sans);color:var(--mute)}
.bo-next li::before{content:"";position:absolute;left:1px;top:5px;width:7px;height:7px;transform:rotate(45deg);border:1px solid var(--cy);background:#061018}
.bo-next li:first-child::before{background:var(--cy);box-shadow:0 0 8px var(--cyg)}
.bo-next b{font:600 11.5px/1.5 var(--mono);color:var(--cy)}
.bw-reset{margin:0 auto;padding:5px 10px;border-radius:8px;background:rgba(3,8,12,.8);font-size:11.5px;color:var(--faint)}
/* first step: where to talk — big buttons; Telegram is the orange one (no typing at all) */
.bc-ch{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bc-ch[hidden]{display:none}
.bc-chan{display:flex;align-items:center;gap:12px;text-align:left;padding:14px 16px;border-radius:4px;border:1px solid rgba(46,230,242,.35);background:linear-gradient(180deg,rgba(46,230,242,.1),rgba(46,230,242,.03));transition:border-color .2s,transform .2s,box-shadow .2s}
.bc-chan svg{width:30px;height:30px;flex:none;fill:none;stroke:var(--cy);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.bc-chan b{display:block;font:700 15.5px/1.2 var(--sans);color:#fff}
.bc-chan small{display:block;margin-top:3px;font:12.5px/1.35 var(--sans);color:var(--mute)}
.bc-chan:hover{border-color:var(--cy);transform:translateY(-2px);box-shadow:0 0 26px -8px var(--cyg)}
.bc-chan:focus-visible{outline:2px solid var(--cy);outline-offset:2px}
.bc-chan[data-ch="tg"]{border-color:rgba(255,106,43,.55);background:linear-gradient(180deg,rgba(255,106,43,.16),rgba(255,106,43,.04))}
.bc-chan[data-ch="tg"] svg{stroke:var(--hot)}
.bc-chan[data-ch="tg"]:hover{border-color:var(--hot);box-shadow:0 0 26px -8px rgba(255,106,43,.6)}
.bc-ch.in .bc-chan{animation:msg .35s ease both}.bc-ch.in .bc-chan:nth-child(2){animation-delay:.07s}.bc-ch.in .bc-chan:nth-child(3){animation-delay:.14s}
@media (min-width:861px){.bw-done .next3{display:none}}
@media (min-width:861px) and (max-height:780px){.bo-sub{display:none}.bo-next li{font-size:12.5px}.bo-next ol{gap:5px}.bw-head .gl-av{width:38px;height:38px}.bo-list{gap:4px}.bo-list b{-webkit-line-clamp:2}}
@media (min-width:861px) and (max-height:640px){.bo-next{display:none}}
@media (min-width:861px) and (max-height:700px){.bw-sub{display:none}.bw-head h2{font-size:22px}.bw-card{padding:14px 20px}.bw-head{margin-bottom:8px}.bc-log{padding:12px}.bc-dock{padding:10px}.bc-chip{padding:6px 11px}.bo-note{display:none}.bw-done .next3{display:none}}
@media (min-width:861px) and (max-width:1180px){.bw-grid{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}.bw-grid>.bw-out{grid-column:2}.bw-cap{display:none}}
@media (min-width:861px) and (max-width:1100px){.bc-kbd{display:none}}
/* phone: its own full screen — header, a thin brief strip, the chat, the field at the bottom */
@media (max-width:860px){
  .bmodal{padding:0;align-items:stretch}
  .bw-card{width:100%;height:100%;border-radius:0;padding:calc(10px + env(safe-area-inset-top)) 12px calc(10px + env(safe-area-inset-bottom));transform:translateY(24px)}
  .bw-card>.wneon,.bw-card>.wframe{display:none}
  .bw-head{margin:0 44px 8px 0;gap:10px}.bw-head .gl-av{width:34px;height:34px}
  .bw-head h2{font-size:20px}.bw-eye{font-size:9.5px}.bw-sub{font-size:12px}
  .bw-x{right:10px;top:calc(10px + env(safe-area-inset-top));width:34px;height:34px;padding:0;justify-content:center}.bw-x kbd{display:none}
  .bw-grid{display:flex;flex-direction:column;gap:8px}
  .bw-out{order:-1;flex:none;flex-direction:row;align-items:center;overflow:visible}
  .bw-sum{flex:1;display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:12px;padding:8px 12px;border-radius:12px}
  .bo-lab{font-size:9.5px;letter-spacing:.12em}.bo-lt{display:none}
  .bo-prog{grid-column:1;margin:6px 0 0}
  .bo-big{grid-column:2;grid-row:1/3;margin:0}.bo-big b{font-size:22px}.bo-big span{display:none}
  .bo-sub,.bo-list,.bo-next{display:none}
  .bw-reset{flex:none;margin:0;width:36px;height:36px;border-radius:10px;border:1px solid var(--edge);text-decoration:none;font-size:16px}
  .bw-reset span{display:none}
  .bw-chat{flex:1;border-radius:14px;background:rgba(3,8,12,.8)}
  .bw-scene{opacity:.55}.bw-tags{display:none}.bw-cap{display:none}
  .bc-ch{grid-template-columns:1fr;gap:8px}
  .bc-chan{padding:11px 14px}.bc-chan svg{width:26px;height:26px}.bc-chan b{font-size:15px}.bc-chan small{font-size:12px}
  .bc-log{padding:12px 10px 10px}
  .bc-log .msg{max-width:90%}
  .bc-dock{padding:10px}
  .bc-chips{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);grid-auto-columns:max-content;justify-content:start;justify-items:start;overflow-x:auto;scrollbar-width:none;margin-left:-10px;margin-right:-10px;padding:0 10px}
  .bc-chips::-webkit-scrollbar{display:none}
  .bc-chips:not(:empty){margin-bottom:8px}
  .bc-chip{padding:8px 11px}
  .bc-in{font-size:16px}   /* 16px: iOS doesn't zoom into the field */
  .bc-kbd{display:none}
  .bw-row{grid-template-columns:1fr}
  .bw-tg{padding:14px 16px}
  .bw-row2 .bw-or{white-space:nowrap;font-size:12px}
  .bw-row2 .bw-send{padding:12px 18px;white-space:nowrap}
}
@media (max-width:380px){.bw-head h2{font-size:18.5px}}
@media (max-width:860px) and (max-height:700px){
  .bw-sub,.bo-note{display:none}
  .bc-chips{grid-template-rows:auto}
  .bw-done .next3{display:none}
}
.next{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 auto;max-width:980px}
.next .glass{padding:20px}
.next b{font:700 30px var(--mono);color:var(--cy);display:block;margin-bottom:8px;text-shadow:0 0 20px var(--cyg)}
.next h3{font-size:17px;margin-bottom:6px}
.next p{color:var(--mute);font-size:14.5px}
.gl-av{position:relative;width:46px;height:46px;border-radius:50%;flex:none;background:url(../img/holo-face.webp) center/cover;box-shadow:0 0 0 2px var(--cy),0 0 22px var(--cyg)}
.gl-av::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 2px var(--cy),0 0 34px rgba(46,230,242,.6);opacity:0;pointer-events:none;animation:glow 3s ease-in-out infinite}
@keyframes glow{50%{opacity:1}}
.inp{width:100%;padding:16px 18px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.45);color:var(--ink);font:16px var(--sans);margin-bottom:10px;outline:none;transition:.2s}
.inp:focus{border-color:var(--cy);box-shadow:0 0 0 3px rgba(46,230,242,.15)}
textarea.inp{min-height:110px;resize:vertical}
.consent{display:flex;gap:10px;font-size:13px;color:var(--mute);margin-top:6px}
.consent input{accent-color:var(--cy);margin-top:4px}
.next3{text-align:left;display:grid;gap:10px;margin:22px 0 0}
.next3 div{display:flex;gap:12px;padding:12px 14px;border-radius:12px;border:1px solid var(--edge);font-size:14.5px;color:var(--mute)}
.next3 b{font:600 12px var(--mono);color:var(--cy);min-width:70px}
@keyframes msg{from{opacity:0;transform:translateY(8px)}}

footer{padding:40px 24px 120px;color:var(--faint);font:13px var(--mono);background:linear-gradient(transparent,rgba(3,6,10,.94) 30%)}
.foot-in{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,.9fr);gap:22px;align-items:start;padding:22px 24px;border-radius:20px;border:1px solid var(--edge);background:rgba(5,11,16,.86)}
.foot-me .logo{display:inline-flex;align-items:center;gap:8px;font:700 16px var(--mono);color:#fff}.foot-me .logo svg{width:24px;height:24px}.foot-me .logo span{color:var(--cy)}
.foot-me p{margin-top:10px;line-height:1.6;color:var(--mute);font-size:12.5px}
.foot-links{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.foot-links a{display:block;padding:10px 12px;border-radius:12px;border:1px solid var(--edge);background:rgba(255,255,255,.02);transition:border-color .2s,background .2s,transform .2s}
.foot-links a:hover{border-color:var(--cy);background:rgba(46,230,242,.07);transform:translateY(-2px)}
.foot-links b{display:block;font:700 14px var(--sans);color:var(--ink)}
.foot-links small{display:block;margin-top:2px;font:11.5px var(--mono);color:var(--faint)}
.foot-map{display:grid;gap:8px;justify-items:start}
.foot-map a{color:var(--mute);transition:color .2s}.foot-map a:hover{color:var(--cy)}
.foot-map a::before{content:"› ";color:var(--cy)}
.foot-bar{max-width:1100px;margin:14px auto 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 20px;padding:0 6px;font-size:12px}
.foot-bar .done-line{margin:0}
.done-line{color:var(--cy);margin-bottom:8px;transition:color .6s,text-shadow .6s}
.wf-done .done-line{color:#fff;text-shadow:0 0 18px var(--cy),0 0 40px rgba(46,230,242,.5)}
.wf-done .hn>a i{background:var(--cy);border-color:var(--cy);box-shadow:0 0 10px var(--cyg)}

/* =========================================================
   3D tilt + spotlight (all cards)
   ========================================================= */
.t3d{position:relative;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .9s ease var(--dl,0s),filter .9s ease var(--dl,0s),border-color .4s}
.t3d.tilting{will-change:transform;transition:opacity .9s,filter .9s,border-color .4s}
/* glass thickness: a solid bevelled edge behind every card (rim · teal body · dark base).
   It rests as a thin slab under the card and slides toward whichever side tilts to you. */
.t3d,.wcard{--th:6px;--ex:0px;--ey:var(--th)}
/* services: the same glass as the character cards in «Кейси» — neon edge, inner frame, a 9px band of glass all round,
   a lit top edge and a thin slab below (was a 12px stack at the bottom only) */
.glass.card{--th:6px}
.glass.card.t3d{background-image:linear-gradient(180deg,rgba(255,255,255,.05),transparent 30%),linear-gradient(170deg,rgba(12,22,30,.96),rgba(6,11,16,.95))}
.glass.card>.wneon{border-radius:var(--r)}.glass.card>.wframe{border-radius:calc(var(--r) - 7px)}
.glass.card{box-shadow:calc(var(--ex)*.2) calc(var(--ey)*.2) 0 0 rgba(150,240,250,.34),calc(var(--ex)*.4) calc(var(--ey)*.4) 0 0 rgba(34,108,124,.97),calc(var(--ex)*.6) calc(var(--ey)*.6) 0 0 rgba(20,72,86,.98),calc(var(--ex)*.8) calc(var(--ey)*.8) 0 0 rgba(12,46,57,1),var(--ex) var(--ey) 0 0 rgba(6,24,31,1),
    0 60px 150px -30px rgba(0,0,0,.95),0 26px 60px -18px rgba(0,0,0,.8),0 0 40px -6px rgba(46,230,242,.18),inset 0 1.5px 0 rgba(255,255,255,.45),inset 0 0 0 9px rgba(255,255,255,.04),inset 0 10px 26px -8px rgba(255,255,255,.16)}
.glass.card:hover,.glass.card.lit{box-shadow:calc(var(--ex)*.2) calc(var(--ey)*.2) 0 0 rgba(170,248,255,.55),calc(var(--ex)*.4) calc(var(--ey)*.4) 0 0 rgba(40,124,142,.97),calc(var(--ex)*.6) calc(var(--ey)*.6) 0 0 rgba(26,88,104,.98),calc(var(--ex)*.8) calc(var(--ey)*.8) 0 0 rgba(15,56,69,1),var(--ex) var(--ey) 0 0 rgba(9,34,43,1),
    0 60px 150px -30px rgba(0,0,0,.95),0 30px 64px -22px rgba(0,0,0,.95),0 0 50px -6px var(--cyg),inset 0 1.5px 0 rgba(255,255,255,.5),inset 0 0 0 9px rgba(255,255,255,.05),inset 0 10px 26px -8px rgba(255,255,255,.2)}
.glass.q,.q-feat2{--th:8px}
/* five steps from the lit rim to the dark base, so a thick edge reads as solid glass, not a line */
/* the top sheen goes ON TOP of the card's own glass (it used to replace it → cards turned see-through) */
.glass.t3d{background-image:linear-gradient(180deg,rgba(255,255,255,.045),transparent 34%),var(--panel)}
.t3d{
  box-shadow:calc(var(--ex)*.2) calc(var(--ey)*.2) 0 0 rgba(150,240,250,.34),calc(var(--ex)*.4) calc(var(--ey)*.4) 0 0 rgba(34,108,124,.97),calc(var(--ex)*.6) calc(var(--ey)*.6) 0 0 rgba(20,72,86,.98),calc(var(--ex)*.8) calc(var(--ey)*.8) 0 0 rgba(12,46,57,1),var(--ex) var(--ey) 0 0 rgba(6,24,31,1),
    calc(var(--ex)*1.5) calc(var(--ey)*1.5 + 20px) 46px -16px rgba(0,0,0,.92),inset 0 1px 0 rgba(255,255,255,.14),inset 1px 0 0 rgba(255,255,255,.05),inset 0 -1px 0 rgba(0,0,0,.4)}
.wcard{box-shadow:calc(var(--ex)*.2) calc(var(--ey)*.2) 0 0 rgba(150,240,250,.34),calc(var(--ex)*.4) calc(var(--ey)*.4) 0 0 rgba(34,108,124,.97),calc(var(--ex)*.6) calc(var(--ey)*.6) 0 0 rgba(20,72,86,.98),calc(var(--ex)*.8) calc(var(--ey)*.8) 0 0 rgba(12,46,57,1),var(--ex) var(--ey) 0 0 rgba(6,24,31,1),
    calc(var(--ex)*1.5) calc(var(--ey)*1.5 + 26px) 56px -18px rgba(0,0,0,.92)}
.t3d::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:4;opacity:0;transition:opacity .4s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(46,230,242,.16),transparent 45%),linear-gradient(115deg,transparent 40%,rgba(255,255,255,.07) 50%,transparent 60%) var(--sx,0) 0/260% 100%}
.t3d:hover::before,.t3d.tilting::before,.t3d.lit::before{opacity:1}
.t3d:hover,.t3d.lit{border-color:rgba(46,230,242,.45);
  box-shadow:calc(var(--ex)*.2) calc(var(--ey)*.2) 0 0 rgba(170,248,255,.55),calc(var(--ex)*.4) calc(var(--ey)*.4) 0 0 rgba(40,124,142,.97),calc(var(--ex)*.6) calc(var(--ey)*.6) 0 0 rgba(26,88,104,.98),calc(var(--ex)*.8) calc(var(--ey)*.8) 0 0 rgba(15,56,69,1),var(--ex) var(--ey) 0 0 rgba(9,34,43,1),
    calc(var(--ex)*1.6) calc(var(--ey)*1.6 + 30px) 64px -22px rgba(0,0,0,.95),0 0 44px -12px var(--cyg),inset 0 1px 0 rgba(255,255,255,.18),inset 1px 0 0 rgba(255,255,255,.06),inset 0 -1px 0 rgba(0,0,0,.4)}
.t3d .tag,.t3d h3,.t3d svg{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.t3d .tag{display:table}.t3d h3{display:block}   /* block-level (transformable), tag always above the title */
.t3d:hover .tag,.t3d:hover h3{transform:translateZ(30px)}

/* =========================================================
   RAIL · CURSOR · MODAL · COMPANION · MOBILE BAR
   ========================================================= */
/* HUD panel (desktop ≥1101): the hero menu docks here after the dive */
:root{--hudw:236px}
.hud{position:fixed;left:14px;top:14px;bottom:14px;width:var(--hudw);z-index:36;display:none;flex-direction:column;gap:12px;padding:14px 12px 12px;border-radius:18px;
  background:linear-gradient(170deg,rgba(9,18,26,.985),rgba(4,9,14,.975));border:1px solid rgba(120,220,255,.14);box-shadow:0 30px 80px -30px #000,inset 0 1px 0 rgba(255,255,255,.06);
  opacity:0;transform:translateX(-34px);pointer-events:none;transition:opacity .5s,transform .7s cubic-bezier(.2,.8,.2,1),width .45s cubic-bezier(.2,.8,.2,1)}
.hud.show{opacity:1;transform:none;pointer-events:auto}
.hud::after{content:"";position:absolute;right:-1px;top:18%;bottom:18%;width:2px;border-radius:2px;background:linear-gradient(transparent,var(--cy),transparent);animation:hudEdge 4s ease-in-out infinite}
@keyframes hudEdge{50%{opacity:.2}}
.hud.plug::after{background:linear-gradient(transparent,var(--hot),transparent);animation-duration:1s}
.hud-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.hud .logo{font-size:15px;gap:8px;white-space:nowrap}.hud .logo svg{width:24px;height:24px;flex:none;animation:spin 16s linear infinite}
.hud-min{width:26px;height:26px;flex:none;border-radius:8px;border:1px solid var(--edge);display:grid;place-items:center;color:var(--mute);transition:.25s}
.hud-min i{width:7px;height:7px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-left:3px;transition:transform .4s}
.hud-min:hover{color:var(--cy);border-color:var(--cy)}
.hud-prog{display:grid;grid-template-columns:1fr auto;gap:6px;font:600 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.hud-prog b{color:var(--cy)}
.hud-prog i{grid-column:1/-1;height:3px;border-radius:3px;background:rgba(255,255,255,.07);overflow:hidden}
.hud-prog s{position:relative;display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cy2),var(--cy));box-shadow:0 0 10px var(--cyg);transition:width .3s}
.hud-nav{position:relative;display:flex;flex-direction:column;gap:1px;flex:0 0 auto;overflow:hidden}
.hud-nav::before{content:"";position:absolute;left:12px;top:16px;bottom:16px;width:2px;background:var(--edge)}
.hud-nav::after{content:"";position:absolute;left:12px;top:16px;width:2px;height:var(--hf,0px);background:var(--cy);box-shadow:0 0 10px var(--cy);transition:height .5s cubic-bezier(.2,.8,.2,1)}
.hn>a{position:relative;display:flex;align-items:center;gap:10px;padding:8px 8px 8px 6px;border-radius:10px;font:700 12.5px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);transition:color .25s,background .25s,padding .25s}
.hn>a i{position:relative;z-index:1;width:14px;height:14px;flex:none;transform:rotate(45deg);border:1px solid var(--faint);background:#060d13;border-radius:3px;transition:.3s}
.hn>a b{font:600 10px var(--mono);color:var(--faint);letter-spacing:.06em;transition:color .25s}
.hn>a:hover{color:var(--ink);background:linear-gradient(90deg,rgba(46,230,242,.12),transparent);padding-left:10px}
.hn.done>a i{border-color:var(--cy);background:rgba(46,230,242,.3)}
.hn.now>a{color:var(--ink);background:linear-gradient(90deg,rgba(46,230,242,.16),transparent)}
.hn.now>a i{background:var(--cy);border-color:var(--cy);box-shadow:0 0 14px var(--cy)}
.hn>a i::after{content:"";position:absolute;inset:-1px;border-radius:3px;border:1px solid rgba(46,230,242,.55);opacity:0;pointer-events:none}
.hn.now>a i::after{animation:hnPulse 2s ease-out infinite}
.hn.now>a b{color:var(--cy)}
@keyframes hnPulse{0%{opacity:.9;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.9)}}
.hn-sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.8,.2,1)}
.hn-sub>div{overflow:hidden}
.hn.now .hn-sub,.hn.open .hn-sub{grid-template-rows:1fr}
.hn-sub a,.hn-sub button{position:relative;display:block;width:100%;text-align:left;padding:5px 8px 5px 34px;font:500 12.5px var(--sans);letter-spacing:.01em;color:var(--mute);border-radius:8px;transition:color .2s,background .2s,padding .2s}
.hn-sub a::before,.hn-sub button::before{content:"";position:absolute;left:19px;top:50%;width:8px;height:1px;background:var(--faint);transition:.25s}
.hn-sub a:hover,.hn-sub button:hover{color:var(--cy);background:rgba(46,230,242,.07);padding-left:38px}
.hn-sub a:hover::before,.hn-sub button:hover::before{background:var(--cy);width:12px}
.hn-sub a.on{color:var(--ink)}.hn-sub a.on::before{background:var(--cy);width:12px;box-shadow:0 0 8px var(--cy)}
.hn-sub button{color:var(--hot)}.hn-sub button::before{background:var(--hot)}
.hud-info{position:relative;flex:0 1 auto;min-height:124px;overflow:hidden;padding:10px 12px 12px;border-radius:12px;border:1px solid rgba(46,230,242,.22);background:linear-gradient(170deg,rgba(46,230,242,.07),rgba(46,230,242,.015))}
.hud-info::before{content:"";position:absolute;left:0;right:0;top:0;height:100%;background:linear-gradient(transparent 40%,rgba(46,230,242,.13) 50%,transparent 60%);transform:translateY(-62%);animation:scanI 3.4s linear infinite;pointer-events:none}
@keyframes scanI{to{transform:translateY(62%)}}
.hud-info small{display:block;font:600 9.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:6px}
.hud-info b{display:block;font:700 13.5px/1.25 var(--sans);color:var(--cy);margin-bottom:5px}
.hud-info p{font:13px/1.45 var(--sans);color:var(--ink);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:7;overflow:hidden}
.hud-info p::after{content:"▍";color:var(--cy);margin-left:2px;animation:blink 1s steps(2) infinite}
.hud-info.hot{border-color:rgba(255,106,43,.4)}.hud-info.hot b{color:var(--hot)}
/* cursor tooltip: the same hints when the side panel is folded (or the screen is 861–1100px) */
.tipc{position:fixed;left:0;top:0;z-index:95;max-width:250px;padding:9px 12px 10px;border-radius:12px;pointer-events:none;opacity:0;transition:opacity .18s;will-change:transform;
  background:linear-gradient(170deg,rgba(10,22,31,.96),rgba(4,9,14,.95));border:1px solid rgba(46,230,242,.32);box-shadow:0 18px 40px -16px #000,0 0 22px -8px rgba(46,230,242,.35)}
.tipc.on{opacity:1}
.tipc::before{content:"";position:absolute;left:12px;top:-1px;width:30px;height:2px;border-radius:2px;background:var(--cy);box-shadow:0 0 8px var(--cy)}
.tipc b{display:block;font:700 12.5px/1.3 var(--sans);color:var(--cy);margin-bottom:3px}
.tipc p{font:12.5px/1.45 var(--sans);color:var(--ink)}
.tipc p:empty{display:none}
.tipc.hot{border-color:rgba(255,106,43,.45)}.tipc.hot b{color:var(--hot)}.tipc.hot::before{background:var(--hot);box-shadow:0 0 8px var(--hot)}
@media (hover:none){.tipc{display:none}}
.hud-log{position:relative;flex:1 1 0;min-height:0;overflow:hidden;padding:2px 2px 0}
.hud-log::after{content:"";position:absolute;left:0;right:0;bottom:0;height:40%;background:linear-gradient(rgba(5,11,16,0),#05090e);pointer-events:none}
.hud-log small{display:block;font:600 9.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin:0 0 6px 2px}
.hud-log ol{list-style:none;display:grid;gap:3px}
.hud-log li{display:flex;gap:7px;font:500 10.5px/1.45 var(--mono);color:var(--mute);white-space:nowrap;overflow:hidden;animation:logIn .45s cubic-bezier(.2,.8,.2,1)}
.hud-log li time{color:var(--faint)}.hud-log li b{color:var(--cy);font-weight:600}.hud-log li.h b{color:var(--hot)}
@keyframes logIn{from{opacity:0;transform:translateY(-6px);color:#fff}}
.hud.mini .hud-log{display:none}
.hud-go{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 10px;border-radius:12px;font:700 13.5px var(--sans);color:#140600;background:var(--hot);box-shadow:0 0 0 1px rgba(255,160,120,.4),0 10px 30px -10px var(--hotg);transition:transform .25s,box-shadow .25s;position:relative}
.hud-go::after{content:"";position:absolute;inset:-7px;border-radius:17px;border:7px solid rgba(255,106,43,.1);opacity:0;pointer-events:none;animation:goPulse 3s ease-in-out infinite}
.hud-go:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(255,180,140,.7),0 14px 40px -6px var(--hotg),0 0 0 5px rgba(255,106,43,.12)}
@keyframes goPulse{50%{opacity:1}}
.hud-go .hud-ic{display:none}
/* collapsed: the mini rail, still clickable */
.hud.mini{width:62px}
.hud.mini .hud-txt,.hud.mini .hn-sub,.hud.mini .hud-info,.hud.mini .hud-prog span,.hud.mini .hud-prog b,.hud.mini .hn>a b{display:none}
.hud.mini .hud-head{flex-direction:column}
.hud.mini .hud-min i{transform:rotate(-135deg);margin-left:-3px}
.hud.mini .hn>a{justify-content:center;padding:9px 0}
.hud.mini .hud-nav::before,.hud.mini .hud-nav::after{left:50%;margin-left:-1px}
.hud.mini .hud-go{padding:12px 0}.hud.mini .hud-go .hud-ic{display:block}
@media (min-width:1101px){
  .hud{display:flex}
  body{--hudpad:calc(var(--hudw) + 44px);--budpad:118px}
  body.hud-mini{--hudpad:92px}
  /* HUD | content | guide rail: text never runs under the panel or under the guide */
  .content{padding-left:var(--hudpad);padding-right:var(--budpad)}
  .content .wrap{max-width:1100px}
  .tapes{margin-left:calc(-1*var(--hudpad));margin-right:calc(-1*var(--budpad));width:auto}
  .buddy{right:12px;width:clamp(88px,6.6vw,112px)}
  .hud-top{display:none!important}
  /* paging: Підхід fits one screen with its "Детальніше" button */
  .proc{margin-top:30px;padding:24px 18px 20px}.proc-line{top:48px}.inside{margin-top:24px}
}
/* Підхід = one screen on any laptop: its spacing follows the screen height */
@media (min-width:1101px) and (max-height:879px){
  .appr .sec-head{margin-bottom:22px}
  .appr h2{font-size:clamp(30px,5.2vh,46px);margin:10px 0 12px}
  .appr .lead{max-width:780px;font-size:16px;line-height:1.55}
  .pillar{padding:18px 20px}
  .pillar svg{width:34px;height:34px;margin-bottom:8px}
  .pillar h3{font-size:18.5px;margin-bottom:6px}
  .pillar p{font-size:14px;line-height:1.5}
  .proc{margin-top:18px;padding:16px 16px 14px}.proc-line{top:37px}
  .proc li b{width:42px;height:42px;margin-bottom:9px}
  .proc li h4{font-size:15.5px;margin-bottom:4px}
  .proc li p{font-size:12.8px;line-height:1.42}
  .inside{margin-top:14px}
  .more{padding:10px 18px 10px 10px}
}
@media (min-width:1101px) and (max-height:879px){
  .svc .sec-head,.faq .sec-head{margin-bottom:14px}
  .svc h2,.faq h2{font-size:clamp(30px,5.2vh,46px);margin:8px 0 10px}
  .tapes{margin-bottom:16px}
  .toggle{margin-bottom:16px}.toggle button{padding:8px 18px}
  .card{padding:18px}.card .cv{margin:-18px -18px 12px;aspect-ratio:16/8.4}
  .svc-top{margin-bottom:18px}
  .card h3{font-size:19px;margin:6px 0 8px}
  .card ul{gap:6px;font-size:14px;margin-bottom:8px}
  .fit-grid{gap:10px}.fit-grid .glass{padding:14px 18px}
  .fit-grid h3{font-size:17px;margin-bottom:8px}.fit-grid h3 i{width:24px;height:24px;font-size:12px}.fit-grid ul{gap:5px;font-size:14px}
  .faq-list details{margin-bottom:7px}.faq-list summary{padding:11px 18px;font-size:15px}.faq-list .fa p{padding-bottom:12px;font-size:14.5px}
}
@media (min-width:1101px) and (max-height:739px){
  .appr h2{font-size:clamp(28px,5vh,36px)}
  .appr .lead{font-size:15px;line-height:1.5}
  .pillar{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;padding:14px 16px}
  .pillar svg{margin:0;width:30px;height:30px}
  .pillar h3{margin:0;font-size:17px}
  .pillar p{grid-column:1/-1;margin-top:8px;font-size:13.5px}
  .proc{padding:14px 14px 12px}.proc-line{top:33px}
  .proc li b{width:38px;height:38px;margin-bottom:7px}
  .proc li p{font-size:12.3px}
}
@media (min-width:1101px) and (max-height:739px){
  .tapes{height:128px}.tape.a{top:42px}.tape.b{top:42px}
  .svc h2,.faq h2{font-size:clamp(28px,5vh,36px)}
  .card .cv{aspect-ratio:16/7.6}
  .card ul{font-size:13.5px}
  .fit-grid ul{font-size:14px}
}
/* a 1366×768 / 1280×800 laptop with the browser's bars: ~620–690 px of page */
@media (min-width:1101px) and (max-height:689px){
  .tapes{height:104px;margin-bottom:10px}.tape.a,.tape.b{top:29px}   /* the tapes give the cards their height back */
  .card .cv{aspect-ratio:16/7.4}
  .card h3{font-size:19px;margin:4px 0 8px}
  .card ul{font-size:13px}
  .card .v-tech li{font-size:12px}
  .card{padding-bottom:14px}
}
@media (min-width:1101px) and (max-height:629px){.card .cv{aspect-ratio:16/5.6}}
@media (min-width:861px){   /* the guide's bubble stays inside its own rail: above his head, not over the content
     (.buddy .b-tip: the base .b-tip rule comes later in the file and used to win — the pill sat squashed over the cards' text) */
  .buddy .b-tip{right:50%;top:auto;bottom:100%;margin:0 -52px 10px 0;width:max-content;max-width:104px;white-space:normal;text-align:center;line-height:1.35;transform:translateY(8px)}
  .buddy .b-tip::after{right:50%;top:100%;margin:0 -6px 0 0;border:6px solid transparent;border-bottom:0;border-top-color:var(--cy)}
}
@media (min-width:861px) and (max-width:1100px){   /* no side panel here, but the guide still gets its own rail */
  body{--budpad:92px}
  .content{padding-right:var(--budpad)}
  .tapes{margin-right:calc(-1*var(--budpad))}
  .buddy{right:6px;width:84px}
  .buddy .b-tip{margin-right:-44px;max-width:88px;padding:7px 8px;font-size:11px}
}
@media (min-width:1101px) and (max-height:760px){.hud{gap:8px}.hn>a{padding:6px 8px 6px 6px}.hud-info{min-height:70px}}
.topbar{display:none}

.cur,.cur-dot{position:fixed;left:0;top:0;pointer-events:none;z-index:150;border-radius:50%;display:none}
@media (hover:hover) and (pointer:fine){.cur,.cur-dot{display:block}}
.cur{width:34px;height:34px;margin:-17px 0 0 -17px;border:1px solid rgba(46,230,242,.7);box-shadow:0 0 14px rgba(46,230,242,.35);transition:width .25s,height .25s,margin .25s,border-color .25s,background .25s}
.cur::before,.cur::after{content:"";position:absolute;background:#2ee6f2}
.cur::before{left:50%;top:-6px;width:1px;height:5px}.cur::after{top:50%;left:-6px;height:1px;width:5px}
.cur.hov{width:58px;height:58px;margin:-29px 0 0 -29px;border-color:#ff6a2b;background:rgba(255,106,43,.08)}
.cur-dot{width:4px;height:4px;margin:-2px 0 0 -2px;background:#bff}

.amodal{position:fixed;inset:0;z-index:120;overflow:auto;background:rgba(3,6,10,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);opacity:0;visibility:hidden;transition:opacity .45s,visibility 0s .45s}
.amodal::before{content:"";position:fixed;inset:0;background:url(../img/bg-about.webp) 50% 50%/cover;opacity:.5;z-index:-1}
.amodal.open{opacity:1;visibility:visible;transition:opacity .45s}
/* «Про мене» = one screen, no scrolling: sizes follow the screen height */
.about{min-height:100%;display:grid;align-items:center;padding:clamp(16px,4.5vh,64px) 0}
.about-grid{display:grid;grid-template-columns:clamp(300px,29vw,420px) 1fr;gap:clamp(24px,3.4vw,48px);align-items:center}
.cc{position:relative;overflow:hidden;border-radius:24px;background:var(--panel);border:1px solid var(--edge);transform:translateY(40px);opacity:0;transition:transform .8s cubic-bezier(.16,.8,.2,1) .1s,opacity .6s .1s}
.story{transform:translateY(40px);opacity:0;transition:transform .8s cubic-bezier(.16,.8,.2,1) .22s,opacity .6s .22s}
.amodal.open .cc,.amodal.open .story{transform:none;opacity:1}
.cc-img{height:clamp(190px,44vh,440px);position:relative;overflow:hidden;background:#07111a}
.cc-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.cc-img .scan{position:absolute;left:0;right:0;height:60px;top:-60px;background:linear-gradient(transparent,rgba(46,230,242,.22),transparent);border-bottom:1px solid rgba(46,230,242,.6);animation:scan 4.5s ease-in-out infinite;z-index:1;mix-blend-mode:screen}
@keyframes scan{0%{top:-60px}60%,100%{top:100%}}
.cc-img::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(transparent,rgba(6,12,18,.95))}
.cc-badge{position:absolute;top:16px;left:16px;z-index:2;font:600 11px var(--mono);padding:6px 10px;border-radius:8px;background:rgba(4,7,11,.7);border:1px solid var(--edge);color:var(--cy)}
.cc-body{padding:4px 22px 22px;margin-top:-54px;position:relative;z-index:2}
.cc-body h3{font-size:28px}
.cc-body .cls{font:12px var(--mono);color:var(--cy);margin:4px 0 16px}
.statl{display:grid;gap:clamp(5px,1vh,9px);font:13px var(--mono)}
.statl div{display:flex;justify-content:space-between;gap:12px;padding-bottom:clamp(5px,1vh,9px);border-bottom:1px dashed var(--edge);color:var(--mute);transition:.25s}
.statl div:hover{padding-left:6px;color:var(--ink);border-bottom-color:rgba(46,230,242,.5)}
.statl b{color:var(--ink);font-weight:600;text-align:right}
.story h2{font-size:clamp(28px,5.4vh,52px)}
.story p{color:var(--mute);font-size:clamp(15px,1.95vh,17px);margin-bottom:clamp(10px,1.8vh,16px);max-width:620px}
.story p b{color:var(--ink)}
.path{display:flex;margin:clamp(14px,2.8vh,26px) 0 clamp(14px,2.4vh,22px);flex-wrap:wrap}
.path div{flex:1;min-width:150px;padding:14px 16px;border:1px solid var(--edge);margin-right:-1px;font-size:14px;color:var(--mute)}
.path div:first-child{border-radius:14px 0 0 14px}.path div:last-child{border-radius:0 14px 14px 0;border-color:var(--cy);color:var(--ink);background:rgba(46,230,242,.07)}
.path b{display:block;font:600 11px var(--mono);color:var(--cy);letter-spacing:.1em;margin-bottom:4px}
/* About: «Для бізнесу ⇄ Технічно» — both panes share one cell, switching only cross-fades (nothing jumps) */
.ab-top{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;margin-bottom:clamp(10px,1.6vh,16px)}
.ab-top .tag{margin:0}
.ab-tg{margin:0}
.ab-panes{display:grid}
.ab-pane{grid-area:1/1;min-width:0;transition:opacity .4s ease,visibility 0s}
.story:not(.tech) .ab-tech,.story.tech .ab-biz{opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s .25s}
.ab-wins{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:clamp(10px,1.8vh,16px) 0 0;max-width:760px}
.ab-wins li{padding:12px 14px;border-radius:14px;border:1px solid var(--edge);background:rgba(6,14,20,.78);font-size:13.5px;line-height:1.45;color:var(--mute)}
.ab-wins b{display:block;margin-bottom:4px;font-size:15px;color:var(--ink)}
.ab-lead code{display:block;margin-bottom:4px;font:600 12px var(--mono);color:var(--cy)}
.ab-stack{display:grid;gap:8px;margin:clamp(8px,1.6vh,14px) 0;max-width:760px}
.ab-stack div{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ab-stack i{flex:0 0 150px;font:600 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-style:normal}
.ab-stack span{padding:5px 10px;border-radius:8px;border:1px solid rgba(46,230,242,.25);background:rgba(46,230,242,.06);font:600 12.5px var(--mono);color:var(--ink)}
.ab-pat{list-style:none;display:grid;gap:6px;margin:0 0 12px;max-width:760px}
.ab-pat li{font:13px/1.45 var(--mono);color:var(--mute)}
.ab-pat li::before{content:"› ";color:var(--cy)}
.story .ab-certs{font-size:14px;margin-bottom:10px}
.ab-links{display:flex;flex-wrap:wrap;gap:10px}
.ab-links a{padding:9px 14px;border-radius:10px;border:1px solid var(--edge);background:rgba(6,14,20,.75);font:600 13px var(--mono);color:var(--cy);transition:border-color .2s,color .2s}
.ab-links a:hover{border-color:var(--cy);color:#fff}
.story>.btn{margin-top:clamp(12px,2vh,20px)}
@media (min-width:861px) and (max-height:1000px){
  .story h2{font-size:clamp(26px,4.6vh,44px)}
  .story .path{display:none}   /* the 3 steps repeat «Підхід» — on a laptop the four results matter more */
}
@media (min-width:861px) and (max-height:800px){
  .story p{font-size:14.5px;margin-bottom:8px}
  .ab-wins{gap:8px}.ab-wins li{padding:9px 12px;font-size:12.8px}.ab-wins b{font-size:14px;margin-bottom:2px}
  .ab-stack{gap:5px}.ab-stack span{padding:3px 8px;font-size:11.5px}.ab-stack i{flex-basis:130px}
  .ab-pat{gap:3px;margin-bottom:8px}.ab-pat li{font-size:12px}
  .statl{font-size:12px}
}
@media (min-width:861px) and (max-height:690px){.about{padding:10px 0}.story h2{margin-bottom:6px}.ab-top{margin-bottom:6px}.story>.btn{margin-top:10px;padding:12px 20px}}
.aclose{position:fixed;right:22px;top:20px;z-index:2;font:12px var(--mono);letter-spacing:.12em;color:var(--mute);padding:10px 14px;border:1px solid var(--edge);border-radius:10px;background:rgba(4,7,11,.6)}
.aclose:hover{color:var(--hot);border-color:var(--hot)}

/* AI companion */
.buddy{position:fixed;right:clamp(10px,2vw,34px);bottom:2.5vh;width:clamp(100px,8.6vw,146px);aspect-ratio:2/3;z-index:45;cursor:pointer;opacity:0;transform:translateY(-120vh);pointer-events:none}
.buddy.on{opacity:1;pointer-events:auto;animation:bDrop 1.3s cubic-bezier(.3,1.4,.5,1) both}
@keyframes bDrop{from{transform:translateY(-110vh)}to{transform:none}}
.buddy .b-me,.buddy .b-chains{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:filter .3s,transform .3s}
.buddy .b-me{animation:bFloat 5s ease-in-out infinite;filter:drop-shadow(0 0 12px rgba(46,230,242,.35)) drop-shadow(0 20px 20px rgba(0,0,0,.6))}
.buddy .b-chains{animation:bFloat 5s ease-in-out infinite;filter:drop-shadow(0 0 8px rgba(46,230,242,.6));transform-origin:50% 45%}
@keyframes bFloat{50%{translate:0 -12px}}
.b-halo{position:absolute;left:50%;bottom:-6%;width:120%;height:26%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(46,230,242,.42),rgba(46,230,242,.14) 55%,transparent);animation:halo 5s ease-in-out infinite}
@keyframes halo{50%{opacity:.5;transform:translateX(-50%) scale(.85)}}
.b-tip{position:absolute;right:100%;top:30%;margin-right:10px;white-space:nowrap;font:700 12px var(--mono);letter-spacing:.08em;color:#001417;background:var(--cy);padding:8px 12px;border-radius:10px;box-shadow:0 0 24px var(--cyg);opacity:0;transform:translateX(10px);transition:.3s}
.b-tip::after{content:"";position:absolute;right:-6px;top:50%;margin-top:-6px;border:6px solid transparent;border-right:0;border-left-color:var(--cy)}
.buddy:hover .b-me,.buddy:focus-visible .b-me{filter:drop-shadow(0 0 22px rgba(46,230,242,.9)) brightness(1.15)}
.buddy:hover .b-chains,.buddy:focus-visible .b-chains{filter:drop-shadow(0 0 16px #2ee6f2) brightness(1.5);animation:bFloat 5s ease-in-out infinite,shake .35s linear infinite}
@keyframes shake{25%{rotate:1.5deg}75%{rotate:-1.5deg}}
.buddy:hover .b-tip,.buddy.hint .b-tip{opacity:1;transform:none}
.buddy.free .b-chains{animation:none;transform:translateY(70vh) rotate(18deg);opacity:0;transition:transform 1s cubic-bezier(.5,0,.9,.4),opacity .8s .2s,filter .1s;filter:drop-shadow(0 0 20px #fff) brightness(2)}
.buddy.free .b-me{animation:beamOut .9s cubic-bezier(.55,0,.3,1) .12s forwards;transition:none}
.buddy.free .b-scan,.buddy.back .b-scan{animation:beamLine .9s cubic-bezier(.55,0,.3,1) .12s both}
.buddy.back .b-me{animation:beamIn .85s cubic-bezier(.3,0,.2,1) both,bFloat 5s ease-in-out .9s infinite}
.buddy.back .b-chains{animation:chainsIn .6s .5s both}
.buddy.back .b-scan{animation-delay:0s;animation-duration:.85s}
/* the guide leaves as a scan: a bright line wipes him out top→bottom (and draws him back in) */
.b-scan{position:absolute;left:-12%;right:-12%;top:0;height:3px;border-radius:3px;background:#e4fdff;box-shadow:0 0 10px #2ee6f2,0 0 30px #2ee6f2,0 0 60px rgba(46,230,242,.6);opacity:0;pointer-events:none;z-index:3}
@keyframes beamOut{0%{clip-path:inset(0 -30% 0 -30%);filter:brightness(1)}14%{filter:brightness(2.4) drop-shadow(0 0 16px #2ee6f2)}100%{clip-path:inset(100% -30% 0 -30%);filter:brightness(1.8) drop-shadow(0 0 16px #2ee6f2)}}
@keyframes beamIn{0%{clip-path:inset(0 -30% 100% -30%);filter:brightness(2.2) drop-shadow(0 0 16px #2ee6f2)}100%{clip-path:inset(0 -30% 0 -30%);filter:brightness(1)}}
@keyframes beamLine{0%{top:0;opacity:0}8%{opacity:1}90%{opacity:1}100%{top:100%;opacity:0}}
@keyframes chainsIn{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
.buddy.free .b-tip,.buddy.free .b-halo{opacity:0}
.buddy.free{pointer-events:none}
@keyframes flick{0%,46%,100%{opacity:.95}47%{opacity:.4}48%{opacity:.9}49%{opacity:.5}50%{opacity:.95}}
/* =========================================================
   THE GUIDE'S COMMS PANEL (v3.9) — a game dialogue, not a chat widget:
   header strip · hologram portrait + name plate + voice meter · transcript · numbered choices (keys 1–9)
   desktop: a panel in the corner · phones: its own full screen
   ========================================================= */
.holo-w{position:fixed;right:14px;bottom:14px;z-index:46;pointer-events:none}
.holo-w.on{pointer-events:auto}
.hw-card{position:relative;width:min(404px,calc(100vw - 28px));height:min(520px,calc(100vh - 28px));display:flex;flex-direction:column;border-radius:6px;
  border:1px solid rgba(46,230,242,.24);background:linear-gradient(172deg,rgba(9,20,29,.975),rgba(3,8,12,.975) 60%);
  box-shadow:0 34px 80px -24px #000,0 0 60px -26px var(--cyg),inset 0 1px 0 rgba(255,255,255,.06);
  clip-path:inset(0 0 100% 0);opacity:0;transition:clip-path .55s cubic-bezier(.6,0,.2,1),opacity .2s}
.holo-w.on .hw-card{clip-path:inset(-2px -2px -2px -2px);opacity:1}
/* corner brackets */
.hw-card::before{content:"";position:absolute;inset:-1px;pointer-events:none;z-index:3;opacity:.9;
  background:linear-gradient(var(--cy),var(--cy)) 0 0/14px 2px,linear-gradient(var(--cy),var(--cy)) 0 0/2px 14px,
    linear-gradient(var(--cy),var(--cy)) 100% 0/14px 2px,linear-gradient(var(--cy),var(--cy)) 100% 0/2px 14px,
    linear-gradient(var(--cy),var(--cy)) 0 100%/14px 2px,linear-gradient(var(--cy),var(--cy)) 0 100%/2px 14px,
    linear-gradient(var(--cy),var(--cy)) 100% 100%/14px 2px,linear-gradient(var(--cy),var(--cy)) 100% 100%/2px 14px;background-repeat:no-repeat}
.hw-card::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:#e4fdff;box-shadow:0 0 14px var(--cy),0 0 36px var(--cyg);opacity:0;pointer-events:none;z-index:4}
.holo-w.on .hw-card::after{animation:beamLine .6s cubic-bezier(.6,0,.2,1)}
/* header strip */
.hw-head{display:flex;align-items:center;gap:10px;padding:7px 8px 7px 14px;border-bottom:1px solid rgba(46,230,242,.14);
  background:repeating-linear-gradient(-45deg,rgba(46,230,242,.05) 0 6px,transparent 6px 12px),linear-gradient(90deg,rgba(46,230,242,.1),transparent 70%)}
.hw-ch{display:flex;align-items:center;gap:8px;font:600 10px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--cy)}
.hw-ch i{width:7px;height:7px;border-radius:50%;background:var(--cy);box-shadow:0 0 8px var(--cy);animation:hwLive 1.6s ease-in-out infinite}
@keyframes hwLive{50%{opacity:.25}}
.hw-x{margin-left:auto;display:flex;align-items:center;gap:7px;height:26px;padding:0 8px;border-radius:4px;border:1px solid rgba(255,255,255,.1);font:600 11px var(--mono);color:var(--mute);transition:color .2s,border-color .2s,background .2s}
.hw-x kbd{font:600 9px var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:2px 4px;border-radius:3px;border:1px solid rgba(255,255,255,.14);color:var(--faint)}
.hw-x:hover{color:var(--hot);border-color:rgba(255,106,43,.6);background:rgba(255,106,43,.08)}
/* who's talking */
.hw-id{display:flex;gap:14px;align-items:center;padding:12px 14px 10px}
.hw-port{position:relative;flex:none;width:82px;height:98px;overflow:hidden;border:1px solid rgba(46,230,242,.35);border-radius:3px;
  background:radial-gradient(120% 70% at 50% 100%,rgba(46,230,242,.3),transparent 70%),repeating-linear-gradient(0deg,transparent 0 11px,rgba(46,230,242,.07) 11px 12px),#04121a;
  box-shadow:inset 0 0 18px rgba(46,230,242,.22),0 0 18px -6px var(--cyg)}
.hw-fig{position:absolute;left:50%;top:-6%;width:360%;max-width:none;transform:translateX(-50%);filter:brightness(1.35) contrast(1.08) drop-shadow(0 0 10px rgba(46,230,242,.55));animation:flick 3.4s infinite}
.hw-scan{position:absolute;inset:0;background:repeating-linear-gradient(transparent 0 2px,rgba(3,10,14,.35) 2px 3px);pointer-events:none}
.hw-band{position:absolute;left:0;right:0;top:0;height:30%;background:linear-gradient(transparent,rgba(160,250,255,.16),transparent);animation:hwBand 3.2s linear infinite;pointer-events:none}
@keyframes hwBand{from{transform:translateY(-100%)}to{transform:translateY(340%)}}
.hw-who{min-width:0;display:flex;flex-direction:column;gap:3px}
.hw-who b{font:700 16px/1.15 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--ink)}
.hw-who small{font:500 11px var(--mono);letter-spacing:.06em;color:var(--mute)}
.hw-who small em{font-style:normal;color:var(--cy)}
.hw-vox{display:flex;align-items:center;gap:2px;height:18px;margin-top:6px}
.hw-vox i{width:2px;height:3px;border-radius:1px;background:var(--cy);opacity:.45;transition:height .2s,opacity .2s}
.talk .hw-vox i{opacity:.95;animation:vox .5s ease-in-out infinite alternate}
.talk .hw-vox i:nth-child(3n){animation-duration:.38s}.talk .hw-vox i:nth-child(3n+1){animation-duration:.62s;animation-delay:-.2s}
.talk .hw-vox i:nth-child(4n){animation-duration:.45s;animation-delay:-.33s}.talk .hw-vox i:nth-child(5n){animation-duration:.7s;animation-delay:-.1s}
@keyframes vox{from{height:3px}to{height:17px}}
/* transcript */
.hc-body{flex:1 1 auto;min-height:80px;overflow:auto;padding:4px 14px 12px;display:flex;flex-direction:column;gap:12px;scrollbar-width:thin;overscroll-behavior:contain;
  border-top:1px solid rgba(46,230,242,.1);mask-image:linear-gradient(transparent,#000 14px);-webkit-mask-image:linear-gradient(transparent,#000 14px)}
.ln{display:grid;gap:3px;animation:lnIn .35s cubic-bezier(.2,.8,.2,1)}
.ln:first-child{margin-top:10px}
@keyframes lnIn{from{opacity:0;transform:translateY(6px)}}
.ln b{font:600 9.5px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--cy)}
.ln b::before{content:"◆";margin-right:6px;font-size:8px}
.ln p{font:14px/1.55 var(--sans);color:var(--ink);white-space:pre-line;overflow-wrap:anywhere}
.ln.old p{color:#9cb4bf}
.ln.u b{color:var(--hot)}.ln.u b::before{content:"◇"}
.ln.u p{color:var(--mute);padding-left:10px;border-left:2px solid rgba(255,106,43,.5)}
.ln.typing p::after,.ln.run p::after{content:"▍";color:var(--cy);margin-left:1px;animation:blink 1s steps(2) infinite}
/* choices */
.opts{display:grid;gap:2px;padding:8px 8px 10px;border-top:1px solid rgba(46,230,242,.14);background:linear-gradient(180deg,rgba(46,230,242,.04),transparent 60%)}
.opts:empty{display:none}
.opts button{position:relative;display:flex;align-items:center;gap:11px;width:100%;min-height:36px;padding:7px 12px 7px 8px;border-radius:3px;text-align:left;
  font:500 13.5px/1.3 var(--sans);color:var(--ink);border:1px solid transparent;background:transparent;animation:optIn .4s cubic-bezier(.2,.8,.2,1) backwards;transition:background .2s,border-color .2s,color .2s}
.opts button:nth-child(2){animation-delay:.05s}.opts button:nth-child(3){animation-delay:.1s}.opts button:nth-child(4){animation-delay:.15s}.opts button:nth-child(5){animation-delay:.2s}
@keyframes optIn{from{opacity:0;transform:translateX(-10px)}}
.opts kbd{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:3px;border:1px solid rgba(46,230,242,.4);font:700 11px var(--mono);color:var(--cy);transition:background .2s,color .2s,box-shadow .2s}
.opts button::after{content:"›";margin-left:auto;font:700 16px var(--mono);color:var(--faint);transition:transform .2s,color .2s}
.opts button:hover,.opts button:focus-visible{outline:none;border-color:rgba(46,230,242,.35);background:linear-gradient(90deg,rgba(46,230,242,.16),rgba(46,230,242,.03) 70%)}
.opts button:hover kbd,.opts button:focus-visible kbd{background:var(--cy);color:#001417;box-shadow:0 0 12px var(--cyg)}
.opts button:hover::after,.opts button:focus-visible::after{transform:translateX(3px);color:var(--cy)}
.opts button.hot kbd{border-color:rgba(255,106,43,.6);color:var(--hot)}
.opts button.hot::after{content:"▶";font-size:10px;color:var(--hot)}
.opts button.hot:hover,.opts button.hot:focus-visible{border-color:rgba(255,106,43,.5);background:linear-gradient(90deg,rgba(255,106,43,.18),rgba(255,106,43,.03) 70%)}
.opts button.hot:hover kbd,.opts button.hot:focus-visible kbd{background:var(--hot);color:#140600;box-shadow:0 0 12px var(--hotg)}
.opts button.pick{border-color:rgba(46,230,242,.6);background:rgba(46,230,242,.2)}
@media (max-width:860px){
  .holo-w{inset:0;background:#03070b;opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s}
  .holo-w.on{opacity:1;visibility:visible;transition:opacity .35s}
  .hw-card{width:100%;height:100%;max-height:none;border:0;border-radius:0;clip-path:none;opacity:1;box-shadow:none;background:linear-gradient(180deg,#07121a,#03070b)}
  .holo-w.on .hw-card{clip-path:none}
  .hw-card::before{inset:8px}
  .hw-head{position:absolute;left:0;right:0;top:0;z-index:2;padding:calc(10px + env(safe-area-inset-top)) 12px 10px 18px;border:0;background:linear-gradient(rgba(3,7,11,.85),transparent)}
  .hw-x{height:34px;padding:0 12px;font-size:13px;background:rgba(3,7,11,.6)}
  .hw-x kbd{display:none}
  .hw-id{position:relative;display:block;padding:0;height:36vh;height:36svh;flex:none;border-bottom:1px solid rgba(46,230,242,.2)}
  .hw-port{width:100%;height:100%;border:0;border-radius:0;box-shadow:none}
  .hw-fig{width:auto;height:290%;top:2%;filter:drop-shadow(0 0 12px rgba(46,230,242,.55))}
  .hw-who{position:absolute;left:0;right:0;bottom:0;padding:26px 18px 12px;background:linear-gradient(transparent,rgba(3,7,11,.92) 60%)}
  .hw-who b{font-size:18px}
  .hc-body{height:auto;min-height:0;padding:4px 18px 14px}
  .ln p{font-size:15px}
  .opts{padding:8px 10px calc(12px + env(safe-area-inset-bottom))}
  .opts button{min-height:46px;font-size:15px}
  .opts kbd{width:26px;height:26px;font-size:12px}
}
.msg{max-width:88%;padding:10px 13px;border-radius:14px;font-size:14.5px;line-height:1.45;animation:msg .35s ease}
.msg.b{background:rgba(46,230,242,.1);border:1px solid rgba(46,230,242,.28);border-top-left-radius:4px}
.msg.u{align-self:flex-end;background:rgba(255,255,255,.08);border-top-right-radius:4px}

.bbar{display:none}
.sheet{position:fixed;inset:0;z-index:50;background:rgba(3,6,10,.97);display:flex;flex-direction:column;justify-content:center;padding:30px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s,visibility 0s .3s}
.sheet.open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .3s}
.sheet a{font:700 30px var(--sans);letter-spacing:.1em;padding:10px 0;color:var(--mute);transform:translateX(-20px);opacity:0;transition:.4s}
.sheet.open a{transform:none;opacity:1}
.sheet.open a:nth-of-type(2){transition-delay:.04s}.sheet.open a:nth-of-type(3){transition-delay:.08s}.sheet.open a:nth-of-type(4){transition-delay:.12s}.sheet.open a:nth-of-type(5){transition-delay:.16s}.sheet.open a:nth-of-type(6){transition-delay:.2s}.sheet.open a:nth-of-type(7){transition-delay:.24s}
.sheet a:hover{color:var(--cy)}
.sheet .x{position:absolute;right:22px;top:22px;font:14px var(--mono);color:var(--mute)}
.sheet .mono{color:var(--faint);margin-top:24px}
.dots{display:none}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1100px) and (min-width:861px){.me-tip{font-size:10.5px;padding:6px 9px;left:44%}.stage{--mw:240px;--cw:clamp(360px,38vw,420px)}.rig{right:1vw;height:min(92vh,calc((99vw - var(--mw) - var(--cw) - 20px)*1.5))}.hero-copy h1{font-size:clamp(32px,3.9vw,42px)}.menu{padding:30px 18px 30px 22px}.menu nav a{font-size:15px;white-space:nowrap}.menu nav a small{display:none}}
@media (min-width:1101px) and (max-width:1560px){.menu nav a small{display:none}}
@media (min-width:1101px) and (max-width:1360px){.menu nav a{font-size:15.5px;padding:12px 12px}}
@media (max-width:1100px){.topbar{display:block;position:fixed;left:0;top:0;height:2px;width:0;background:var(--cy);box-shadow:0 0 10px var(--cy);z-index:60}}
@media (max-width:980px){
  /* phone: profile card on the left of its stats, story below — all on one screen */
  .amodal{overflow:auto}   /* the About grew (business + technical views): it scrolls on phones */
  .about{min-height:100%;padding:62px 0 24px;align-items:start}
  .ab-wins{grid-template-columns:1fr;gap:8px}.ab-wins li{padding:10px 12px;font-size:13px}.ab-wins b{font-size:14px}
  .ab-stack i{flex-basis:100%}.ab-stack span{font-size:11.5px;padding:4px 8px}
  .ab-pat li{font-size:12px}.ab-links a{font-size:12px}
  .about-grid{grid-template-columns:1fr;gap:clamp(10px,1.8vh,16px)}
  .cc{max-width:none;display:grid;grid-template-columns:38% 1fr;border-radius:18px}
  .cc-img{height:auto;min-height:clamp(150px,24vh,210px)}
  .cc-img::after{height:30%}
  .cc-badge{top:8px;left:8px;font-size:9.5px;padding:4px 7px}
  .cc-body{margin:0;padding:12px 12px 10px}
  .cc-body h3{font-size:19px}.cc-body .cls{font-size:10.5px;margin:2px 0 8px}
  .statl{font-size:10.5px;gap:4px}.statl div{flex-direction:column;gap:1px;padding-bottom:4px}.statl b{text-align:left}
  .story .tag{display:none}
  .story h2{font-size:clamp(21px,3.1vh,26px);margin:0 0 8px}
  .story p{font-size:clamp(13px,1.78vh,14.5px);line-height:1.5;margin-bottom:8px}
  .path{margin:10px 0 12px;flex-wrap:nowrap}.path div{min-width:0;padding:8px 9px;font-size:11.5px}.path b{font-size:9.5px;margin-bottom:2px}
  .story .btn{padding:11px 16px;font-size:14px}
  .aclose{top:12px;right:12px}
  .next,.pillars,.fit-grid,.qgrid,.q-feat2,.inside-in,.faq-grid{grid-template-columns:1fr}
  .faq-list .fa p{padding-left:20px}
  .cards{grid-template-columns:1fr}
  .proc ol{grid-template-columns:1fr;gap:6px}
  .proc-line{left:42px;right:auto;top:52px;bottom:52px;width:2px;height:auto}
  .proc-line i{width:auto;right:0;height:var(--pf,0%)}
  .proc li{display:grid;grid-template-columns:50px 1fr;column-gap:16px;text-align:left;padding:8px 0}
  .proc li b{grid-row:span 2;margin:0}
  .proc li h4{align-self:end}
}
@media (max-width:860px){
  .hero{height:270vh}
  .content{margin-top:-40vh}
  .drone.hide-m,.holo.hide-m{display:none}
  .drone.d1{--s:60px!important}
  .drone.d2{--s:46px!important}
  .holo{font-size:10.5px;padding:7px 10px;gap:7px}
  .menu{display:none}
  .rig{right:50%;margin-right:-51vw;height:64vh;top:3vh;bottom:auto}
  .h-ui::before{content:"";position:absolute;left:0;right:0;bottom:0;height:62%;background:linear-gradient(transparent,rgba(3,6,10,.92) 34%,#03060a);pointer-events:none}
  .h-fg{height:34%;bottom:-2%}
  .me-sh{background-image:url(../img/hero-shade-m.webp)}.me-gl{background-image:url(../img/hero-glow-m.webp)}
  .me-tip{left:auto;right:4%;top:auto;bottom:44%;font-size:10.5px;padding:6px 9px}
  .me-frame{display:none}
  .h-far img{object-position:60% 30%}
  .hero-copy{left:18px;right:18px;bottom:calc(92px + env(safe-area-inset-bottom));max-width:none}
  .hero-copy h1{font-size:clamp(32px,8.6vw,44px);margin:10px 0 8px}
  .hero-copy .lead{font-size:15px}
  .stats{margin:12px 0 14px}
  .hero-copy .btn-ghost{display:none}
  .scrollhint{display:none}
  .wrap{padding:0 16px}
  .appr{padding:90px 0 80px}.svc,.cases,.brief,.faq{padding:80px 0}.svc,.faq{padding-top:0}
  h2{font-size:clamp(28px,8vw,36px)}
  .lead{font-size:15.5px}
  .tapes{height:96px;margin:0 0 16px}.tape{padding:10px 0}.tape.a{top:30px}.tape.b{top:30px}.tape span{font-size:13px;letter-spacing:.2em;padding:0 12px}.tape span::after{margin-left:24px}
  /* app-like carousels */
  .cards,.qgrid,.next{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin-left:-16px;margin-right:-16px;padding:6px 16px 18px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .cards::-webkit-scrollbar,.qgrid::-webkit-scrollbar,.next::-webkit-scrollbar{display:none}
  .cards>*,.next>*{flex:0 0 84%;scroll-snap-align:center}
  .qgrid>.q{flex:0 0 86%;scroll-snap-align:center}
  .qgrid>.q-feat2{flex:0 0 100%;scroll-snap-align:center}
  .dots{display:flex;justify-content:center;gap:7px;margin-top:4px}
  .dots i{width:7px;height:7px;border-radius:9px;background:rgba(255,255,255,.2);transition:.3s}
  .dots i.on{width:22px;background:var(--cy);box-shadow:0 0 10px var(--cyg)}
  .wc-row{grid-template-columns:1fr;gap:28px}.wcard-wrap:nth-child(2){margin-top:0}.wimg{height:200px}
  .t3d:hover{transform:none}
  /* companion */
  .buddy{bottom:calc(92px + env(safe-area-inset-bottom));width:60px;right:2px}
  .buddy.on.scr{opacity:.3}
  .b-tip{font-size:10.5px;padding:6px 9px}
  /* the bubble sits above his head, right-aligned — at his side it covered the text of the section */
  .buddy .b-tip{right:0;top:auto;bottom:100%;margin:0 0 9px;transform:translateY(6px)}
  .buddy .b-tip::after{right:22px;top:100%;margin:0;border:6px solid transparent;border-bottom:0;border-top-color:var(--cy)}
  .msg{font-size:13.5px}
  /* tab bar */
  .bbar{display:flex;position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:40;padding:6px 6px 7px;border-radius:22px;gap:4px;
    background:linear-gradient(160deg,rgba(14,26,36,.94),rgba(6,12,18,.94));border:1px solid var(--edge);box-shadow:0 20px 50px -10px #000,inset 0 1px 0 rgba(255,255,255,.08);transition:transform .35s}
  .bbar.hide{transform:translateY(140%)}
  .bbar a,.bbar button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 2px 5px;border-radius:14px;font:600 10.5px var(--sans);letter-spacing:.04em;color:var(--mute);position:relative;transition:color .2s,transform .15s}
  .bbar a:active,.bbar button:active{transform:scale(.92)}
  .bbar svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}
  .bbar a.now{color:var(--cy)}
  .bbar a.now::after{content:"";position:absolute;top:0;left:30%;right:30%;height:2px;border-radius:2px;background:var(--cy);box-shadow:0 0 10px var(--cy)}
  .bbar .go{flex:1.15;margin-top:-22px}
  .bbar .go svg{width:54px;height:54px;padding:15px;border-radius:50%;background:var(--hot);fill:#140600;stroke:none;box-shadow:0 0 0 5px #070d13,0 8px 30px -4px var(--hotg);animation:pulse 2.6s ease-in-out infinite}
  .bbar .go span{color:var(--hot);font-weight:700}
  .bbar .go.now::after{display:none}
  @keyframes pulse{50%{box-shadow:0 0 0 5px #070d13,0 0 0 11px rgba(255,106,43,.18),0 8px 30px -4px var(--hotg)}}
  footer{padding-bottom:150px}
  .foot-in{grid-template-columns:1fr;padding:18px}
  .foot-map{display:flex;flex-wrap:wrap;gap:8px 16px}
  .foot-bar{flex-direction:column;align-items:flex-start}
}
/* hero menu = game menu: hovering an item changes the scene */
.menu-desc{min-height:58px;margin:0 0 18px;padding:10px 12px;border-left:2px solid var(--cy);font:500 12px/1.5 var(--mono);color:var(--cy);background:linear-gradient(90deg,rgba(46,230,242,.08),transparent);opacity:0;transform:translateX(-8px);transition:opacity .3s,transform .3s}
.menu-desc.on{opacity:1;transform:none}
.menu-desc::after{content:"▍";margin-left:2px;animation:blink 1s steps(2) infinite}
.menu-desc.hot{color:var(--hot);border-color:var(--hot);background:linear-gradient(90deg,rgba(255,106,43,.1),transparent)}
.h-portal::before,.h-portal::after{content:"";position:absolute;border-radius:50%;pointer-events:none;opacity:0;transition:opacity .4s}
.h-portal::before{inset:4%;border:2px dashed rgba(190,250,255,.75);box-shadow:0 0 16px rgba(46,230,242,.45),inset 0 0 16px rgba(46,230,242,.3);animation:spin 18s linear infinite reverse}
/* radar sweep: a ready-made ring picture that spins (was conic + mask + blend + blur, re-rendered every frame) */
.h-portal::after{inset:-2%;background:url(../img/portal-sweep.webp) 50%/100% 100% no-repeat;animation:spin 2.6s linear infinite}
.stage[data-hov] .h-portal::before,.stage[data-hov] .h-portal::after{opacity:1}
.stage[data-hov] .h-portal .core{opacity:1}
.stage[data-hov="brief"] .h-portal::after{background-image:url(../img/portal-sweep-o.webp)}
.stage[data-hov="brief"] .h-portal::before{border-color:rgba(255,190,150,.8);box-shadow:0 0 16px rgba(255,106,43,.45),inset 0 0 16px rgba(255,106,43,.3)}
.stage[data-hov="about"] .me-frame{opacity:1;transform:none}
.stage[data-hov="services"] .holo,.stage[data-hov="cases"] .holo{border-color:var(--cy);box-shadow:0 0 24px -4px var(--cyg),0 10px 30px -12px #000}
.stage[data-hov="services"] .drone,.stage[data-hov="guide"] .drone{scale:1.14}

/* «Сайт у розробці»: top centre, above the page and the HUD, under the windows (z 90 < 118/120); × hides it for the visit */
.wip{position:fixed;top:calc(10px + env(safe-area-inset-top));left:50%;z-index:90;display:flex;align-items:center;gap:8px;max-width:calc(100vw - 24px);padding:5px 5px 5px 12px;border-radius:999px;
  font:700 10.5px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);white-space:nowrap;
  background:rgba(4,8,12,.74);border:1px solid rgba(255,106,43,.38);box-shadow:0 8px 24px -10px #000,0 0 18px -8px var(--hotg);
  transform:translateX(-50%);transition:opacity .35s,transform .35s}
.wip i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--hot);box-shadow:0 0 10px var(--hot);animation:wipPulse 1.8s ease-in-out infinite}
.wip span{color:var(--mute);font-weight:600}
.wip button{flex:none;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;border:0;background:rgba(255,255,255,.06);color:var(--mute);font:600 14px/1 var(--sans);cursor:pointer}
.wip button:hover,.wip button:focus-visible{color:var(--ink);background:rgba(255,106,43,.22)}
.wip.off,.wip.dive{opacity:0;transform:translate(-50%,-12px);pointer-events:none}
body.pre .wip{opacity:0}
@keyframes wipPulse{50%{opacity:.3}}
@media (max-width:1100px){.wip span{display:none}}
@media (prefers-reduced-motion:reduce){.wip i{animation:none}}
/* HUD top bar (desktop, after the dive) */
.hud-top{position:fixed;left:0;right:0;top:0;z-index:35;display:flex;justify-content:space-between;align-items:center;padding:16px 24px;pointer-events:none;opacity:0;transform:translateY(-12px);transition:opacity .4s,transform .4s}
.hud-top.show{opacity:1;transform:none}
.hud-top a{pointer-events:auto}
.hud-top .logo{font-size:16px;padding:8px 12px 8px 8px;border-radius:12px;background:rgba(4,8,12,.55);border:1px solid rgba(120,220,255,.1)}
.hud-top .logo svg{width:24px;height:24px}
.hud-cta{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;font:700 13.5px var(--sans);letter-spacing:.02em;color:#140600;background:var(--hot);box-shadow:0 0 0 1px rgba(255,160,120,.4),0 10px 30px -8px var(--hotg);transition:transform .25s,box-shadow .25s}
.hud-cta:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(255,180,140,.7),0 14px 40px -6px var(--hotg),0 0 0 5px rgba(255,106,43,.12)}
.hud-top.away .hud-cta{opacity:0;pointer-events:none;transform:translateY(-6px)}
@media (max-width:860px){.hud-top{display:none}}

/* =========================================================
   JS HOOKS (v3)
   ========================================================= */
.h-cap{position:absolute;left:50%;bottom:9vh;z-index:6;transform:translateX(-50%);display:flex;align-items:center;gap:12px;font:600 12px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--cy);opacity:0;pointer-events:none;white-space:nowrap;text-shadow:0 0 12px rgba(46,230,242,.6)}
.h-cap i{position:relative;width:160px;height:2px;background:rgba(46,230,242,.18);overflow:hidden}
.h-cap s{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--cy);box-shadow:0 0 10px var(--cy)}
.h-cap span{min-width:38px;text-align:right;color:var(--ink)}
.w-drone{position:absolute;left:0;top:0;height:auto;visibility:hidden;will-change:transform;pointer-events:none}
.h-me.zap .me-gl{opacity:1;transform:scale(1.06);transition-duration:.1s}.h-me.zap .me-sh{opacity:0}
.h-me.zap img{filter:brightness(1.45);transition:filter .1s}
.h-me.zap .me-frame{opacity:1;transform:scale(.94)}
.stage.diving .me-tip,.stage.diving .me-frame{opacity:0!important;animation:none}
.buddy.on{transition:opacity .4s}
.buddy.on.away{opacity:0;pointer-events:none}
.msg.typing{display:flex;gap:5px;align-items:center;padding:13px 14px}
.msg.typing i{width:6px;height:6px;border-radius:50%;background:var(--cy);opacity:.35;animation:tdot 1s ease-in-out infinite}
.msg.typing i:nth-child(2){animation-delay:.15s}.msg.typing i:nth-child(3){animation-delay:.3s}
@keyframes tdot{40%{opacity:1;transform:translateY(-3px)}}
.consent.err{color:var(--hot)}
.inp.err{border-color:var(--hot);box-shadow:0 0 0 3px rgba(255,106,43,.16)}
@media (max-width:860px){
  .me-tip{opacity:1;transform:none;animation:tipPulse 2.4s ease-in-out infinite}
  .h-cap{bottom:calc(104px + env(safe-area-inset-bottom));font-size:10px;letter-spacing:.16em}.h-cap i{width:90px}
}
@keyframes tipPulse{50%{box-shadow:0 0 0 6px rgba(46,230,242,.14),0 0 26px var(--cyg)}}
/* =========================================================
   CYCLIC LIFE — nothing plays once and dies
   ========================================================= */
.node b{position:relative}
.node b::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 4px rgba(46,230,242,.14),0 0 26px var(--cyg);opacity:0;pointer-events:none;animation:nodeB 3.2s ease-in-out infinite}
@keyframes nodeB{50%{opacity:1}}
.pillar svg{animation:pFloat 5s ease-in-out infinite}
.pillar:nth-child(1) svg{animation:spin 16s linear infinite}
.pillar:nth-child(2) svg path:last-child{stroke-dasharray:42;animation:beat 2.4s linear infinite}
.pillar:nth-child(3) svg circle{animation:look 4.5s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes pFloat{50%{transform:translateY(-5px)}}
@keyframes beat{from{stroke-dashoffset:84}to{stroke-dashoffset:0}}
@keyframes look{0%,40%,100%{transform:translateX(0)}50%,60%{transform:translateX(-4px)}70%,80%{transform:translateX(4px)}}
.pillar:hover svg{filter:drop-shadow(0 0 14px rgba(46,230,242,.9))}
.bar i{position:relative}
.bar i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-100%);animation:shine 2.8s ease-in-out infinite}
@keyframes shine{65%,100%{transform:translateX(100%)}}
.wbar i s{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.wbar i s::before{content:"";position:absolute;top:0;bottom:0;left:0;width:60%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5) 50%,transparent);transform:translateX(-100%);animation:wshine 3.2s linear infinite}
@keyframes wshine{from{transform:translateX(-100%)}to{transform:translateX(240%)}}
.lvl{position:relative}
.lvl::after{content:"";position:absolute;inset:-1px;border-radius:inherit;border:1px solid var(--cy);box-shadow:0 0 18px -4px var(--cyg);opacity:0;pointer-events:none;animation:lvlP 3s ease-in-out infinite}
@keyframes lvlP{50%{opacity:1}}
.stages li.p{position:relative}
.stages li.p::after{content:"";position:absolute;left:0;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:4px;box-shadow:0 0 12px var(--hotg);opacity:0;pointer-events:none;animation:pStage 1.6s ease-in-out infinite}
@keyframes pStage{50%{opacity:1}}
.waura{animation:aura 5s ease-in-out infinite}
@keyframes aura{50%{opacity:.55}}
.next{counter-reset:nx}.next b{position:relative;counter-increment:nx}
.next b::after{content:"0" counter(nx);position:absolute;left:0;top:0;color:#bff;text-shadow:0 0 34px rgba(46,230,242,.95);opacity:0;pointer-events:none;animation:numG 3.2s ease-in-out infinite}
.next .glass:nth-child(2) b{animation-delay:1s}.next .glass:nth-child(3) b{animation-delay:2s}
@keyframes numG{50%{opacity:1}}
.more-ic{position:relative}
.more-ic::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(46,230,242,.5);opacity:0;pointer-events:none;animation:moreP 2.4s ease-out infinite}
@keyframes moreP{0%{opacity:.9;transform:scale(1)}60%,100%{opacity:0;transform:scale(1.65)}}
.done-line{animation:dlP 3s ease-in-out infinite}
@keyframes dlP{50%{text-shadow:0 0 16px var(--cyg)}}
.stat{position:relative;overflow:hidden}
.stat::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(46,230,242,.22) 50%,transparent 65%);transform:translateX(-120%);animation:statS 5s ease-in-out infinite}
.stat:nth-child(2)::after{animation-delay:.4s}.stat:nth-child(3)::after{animation-delay:.8s}
@keyframes statS{55%,100%{transform:translateX(120%)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none;filter:none}
}
/* very short phones: «Про мене» still fits one screen */
@media (max-width:860px) and (max-height:720px){.path{display:none}.cc-img{min-height:clamp(130px,22vh,170px)}.statl div:nth-child(2){display:none}}
/* ▲▼ section switch (desktop) — for people who don't guess to scroll.
   v3.9: a small pager in the top-right corner, not in the middle of the right rail:
   the rail belongs to the workflow bus and its labels (they used to collide) */
.snav{position:fixed;right:12px;top:14px;z-index:37;display:none;flex-direction:row;align-items:center;gap:2px;padding:5px;border-radius:999px;
  background:linear-gradient(180deg,rgba(9,18,26,.92),rgba(4,9,14,.9));border:1px solid rgba(120,220,255,.16);box-shadow:0 18px 40px -18px #000,inset 0 1px 0 rgba(255,255,255,.06)}
.sn-b{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--cy);border:1px solid rgba(46,230,242,.25);background:rgba(46,230,242,.05);transition:background .25s,box-shadow .25s,transform .25s,opacity .25s}
.sn-b svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.sn-b:hover{background:rgba(46,230,242,.16);box-shadow:0 0 22px -4px var(--cyg)}
.sn-up:hover{transform:translateY(-2px)}.sn-dn:hover{transform:translateY(2px)}
.sn-b[disabled]{opacity:.25;pointer-events:none}
.sn-dn.nudge{animation:snNudge 1.8s ease-in-out infinite}
@keyframes snNudge{0%,100%{transform:none}50%{transform:translateY(3px)}}
.sn-k{min-width:42px;font:600 10px/1 var(--mono);letter-spacing:.04em;color:var(--mute);text-align:center;white-space:nowrap}
.sn-k b{font-size:13px;color:var(--ink)}.sn-k i{font-style:normal;color:var(--faint)}
@media (min-width:861px){.snav{display:flex;opacity:0;pointer-events:none;transition:opacity .5s}.snav.show{opacity:1;pointer-events:auto}}
/* 861–1100: no side panel — the pager joins the top bar, right after the logo (JS puts it there; centred titles stay clear) */
@media (min-width:861px) and (max-width:1100px){.snav{top:16px;right:auto;left:196px}}

/* =========================================================
   PERF: nothing animates where nobody can see it
   (hero after the dive · sections off screen · behind an open modal · closed chat)
   ========================================================= */
.stage.gone *,.stage.gone *::before,.stage.gone *::after,
.zz *,.zz *::before,.zz *::after,
.still #world *,.still #world *::before,.still #world *::after,
.still .content *,.still .content *::before,.still .content *::after,
.still .hud *,.still .hud *::before,.still .hud *::after,
.amodal:not(.open) *,.amodal:not(.open) *::before,.amodal:not(.open) *::after{animation-play-state:paused!important}
.holo-w:not(.on) .hw-fig,.holo-w:not(.on) .hw-band,.holo-w:not(.on) .hw-ch i{animation:none}