/* ============================================================
   Kronisys design system v3
   Black page canvas; sections are rounded "slabs" (dark/light)
   Accent: Kronisys blue. Type: Inter + JetBrains Mono.
   ============================================================ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --c:#0097ed;--c2:#3db1f7;--cd:#0077c2;
  --bg:#000;--s1:#0a0a0c;--s2:#101013;--s3:#15151a;
  --b:rgba(255,255,255,.07);--bh:rgba(255,255,255,.14);
  --w:#f2f1ef;--w2:#94918b;--w3:#5b5852;
  --lt:#f5f5f3;--lt2:#ececea;--ltb:rgba(0,0,0,.08);--ltt:#0d0d0d;--ltt2:#5f5e5a;--ltt3:#a3a29d;
  --f:'Inter',system-ui,sans-serif;--m:'JetBrains Mono',monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  --r:clamp(22px,2.6vw,34px);
  --gap:clamp(8px,.9vw,12px);
}
html{scroll-behavior:smooth}
.skip{position:fixed;top:-48px;left:16px;z-index:1000;background:var(--c);color:#fff;font-weight:600;font-size:13px;padding:10px 18px;border-radius:0 0 10px 10px;transition:top .3s var(--ease)}
.skip:focus{top:0}
:focus-visible{outline:2px solid var(--c);outline-offset:2px;border-radius:4px}
body{font-family:var(--f);background:var(--bg);color:var(--w);overflow-x:clip;overflow-y:auto;-webkit-font-smoothing:antialiased}
::selection{background:var(--c);color:#fff}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
body::after{content:'';position:fixed;inset:0;z-index:10000;pointer-events:none;opacity:.016;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:200px}

/* reveal on scroll — directional variants */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv-l{opacity:0;transform:translateX(-32px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv-r{opacity:0;transform:translateX(32px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv-s{opacity:0;transform:scale(.95);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.v,.rv-l.v,.rv-r.v,.rv-s.v{opacity:1;transform:none}
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}

/* ============ slabs — rounded section blocks on the black canvas ============ */
main{display:flex;flex-direction:column;gap:var(--gap);padding:0 var(--gap)}
.slab{border-radius:var(--r);overflow:clip;position:relative;background:var(--s1)}
.slab-light{background:var(--lt);color:var(--ltt)}
.wrap{max-width:1140px;margin:0 auto;padding:clamp(72px,9vh,120px) clamp(22px,4.5vw,56px)}
.wrap-tight{padding-block:clamp(48px,6vh,72px)}

/* mono kicker */
.kicker{font-family:var(--f);font-size:12px;font-weight:600;letter-spacing:.4px;color:var(--c);display:flex;align-items:center;gap:10px;margin-bottom:20px}
.kicker::before{content:'';width:20px;height:1px;background:var(--c);opacity:.6}
.slab-light .kicker{color:var(--cd)}
.slab-light .kicker::before{background:var(--cd)}

/* section headings */
.hd{margin-bottom:clamp(40px,5.5vh,64px)}
.hd h2{font-size:clamp(30px,4vw,52px);font-weight:700;letter-spacing:-1.8px;line-height:1.05}
.hd h2 b{color:var(--c);font-weight:700}
.hd .hd-sub{margin-top:14px;font-size:15px;line-height:1.6;color:var(--w2);max-width:480px}
.slab-light .hd .hd-sub{color:var(--ltt2)}

/* oversized statement */
.quote{font-size:clamp(24px,3.2vw,42px);font-weight:600;letter-spacing:-1.2px;line-height:1.22;max-width:880px}
.quote b{color:var(--c);font-weight:600}
.slab-light .quote b{color:var(--cd)}

/* ============ buttons ============ */
.btn{display:inline-flex;align-items:center;gap:9px;padding:13px 26px;font-family:var(--f);font-size:14px;font-weight:600;border-radius:12px;border:none;cursor:pointer;letter-spacing:-.2px;position:relative;transition:all .35s var(--ease)}
.btn svg{width:15px;height:15px;transition:transform .35s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn:active{transform:scale(.97)}
.btn-p{background:var(--c);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.15) inset,0 6px 24px rgba(0,151,237,.22)}
.btn-p:hover{background:var(--c2);transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 10px 32px rgba(0,151,237,.35)}
.btn-g{background:rgba(255,255,255,.05);color:var(--w);border:1px solid var(--b)}
.btn-g:hover{background:rgba(255,255,255,.09);border-color:var(--bh);transform:translateY(-2px)}
.slab-light .btn-g{background:rgba(0,0,0,.04);color:var(--ltt);border-color:var(--ltb)}
.slab-light .btn-g:hover{background:rgba(0,0,0,.07)}

/* ============ nav — floating glass dock ============ */
nav{position:fixed;top:calc(var(--gap) + 4px);left:50%;transform:translateX(-50%);z-index:300;width:min(1140px,calc(100% - 2*var(--gap) - 8px));transition:top .4s var(--ease)}
.nav-bar{position:relative;display:flex;align-items:center;height:62px;padding:0 10px 0 22px;border-radius:17px;background:rgba(8,8,10,.55);border:1px solid transparent;backdrop-filter:blur(28px) saturate(1.8);-webkit-backdrop-filter:blur(28px) saturate(1.8);box-shadow:0 2px 20px rgba(0,0,0,.25);transition:height .45s var(--ease),background .4s var(--ease),box-shadow .4s var(--ease)}
.nav-bar::before{content:'';position:absolute;inset:-1px;border-radius:17px;padding:1px;background:linear-gradient(120deg,rgba(0,151,237,.28),rgba(255,255,255,.1) 30%,rgba(255,255,255,.07) 70%,rgba(0,151,237,.16));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
nav.scrolled .nav-bar{height:52px;background:rgba(8,8,10,.84);box-shadow:0 12px 44px rgba(0,0,0,.5)}
.n-l{display:inline-flex;align-items:center;padding:6px 0}
.n-l img{height:26px;width:auto;transition:height .45s var(--ease)}
nav.scrolled .n-l img{height:22px}
.nav-mid{display:flex;align-items:center;gap:2px;list-style:none;position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap}
.nav-mid li{flex-shrink:0}
.nav-mcta{display:none}
.nav-pill{position:absolute;left:0;top:50%;margin-top:-16px;height:32px;width:0;border-radius:10px;background:rgba(255,255,255,.08);opacity:0;transition:transform .35s var(--ease),width .35s var(--ease),opacity .3s var(--ease);pointer-events:none}
.nav-mid a{position:relative;z-index:1;font-size:13.5px;font-weight:500;color:rgba(255,255,255,.5);padding:8px 14px;border-radius:10px;transition:color .25s var(--ease);display:block;width:max-content}
.nav-home{display:none}
.nav-mid a:hover{color:#fff}
.nav-mid a.active{color:#fff}
.nav-mid a[target="_blank"]::after{content:'\2197';font-size:10px;margin-left:5px;opacity:.5;transition:opacity .25s}
.nav-mid a[target="_blank"]:hover::after{opacity:.9}
.nav-cta{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:#fff;background:var(--c);padding:9px 18px;border-radius:11px;margin-left:auto;transition:all .35s var(--ease);box-shadow:0 1px 0 rgba(255,255,255,.2) inset}
.nav-cta:hover{background:var(--c2);transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 6px 20px rgba(0,151,237,.3)}
.nav-cta:active{transform:scale(.97)}
.nav-cta svg{width:13px;height:13px;transition:transform .3s var(--ease)}
.nav-cta:hover svg{transform:translateX(2px)}
.n-t{display:none;background:none;border:none;cursor:pointer;padding:0;margin-left:auto;flex-direction:column;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px}
.n-t span{display:block;width:18px;height:1.6px;background:var(--w);border-radius:2px;transition:all .4s var(--ease)}
.n-t span:nth-child(1){margin-bottom:5px}
.n-t span:nth-child(2){width:13px;margin-bottom:5px}
.n-t span:nth-child(3){width:16px}
.n-t.active span:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
.n-t.active span:nth-child(2){opacity:0;transform:scaleX(0)}
.n-t.active span:nth-child(3){width:18px;transform:translateY(-6.6px) rotate(-45deg)}

/* ============ hero — left-aligned, image inside the rounded slab ============ */
.hero{position:relative;min-height:min(92vh,880px);display:flex;align-items:flex-end}
.hero::before{content:'';position:absolute;inset:-12% 0 0;z-index:0;background-image:var(--hero-img,none);background-size:cover;background-position:center;opacity:.85;transform:translateY(var(--py,0));will-change:transform}
.hero::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(115deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,.28) 42%,rgba(0,0,0,0) 68%),linear-gradient(180deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,0) 26%,rgba(0,0,0,0) 62%,rgba(5,5,7,.82) 100%)}
.hero .wrap{position:relative;z-index:2;width:100%;padding-top:clamp(140px,18vh,200px);padding-bottom:clamp(48px,7vh,84px)}
.hero h1{font-size:clamp(42px,6.5vw,82px);font-weight:800;line-height:.98;letter-spacing:-.03em;max-width:13ch;text-shadow:0 2px 28px rgba(0,0,0,.5);opacity:0;animation:fadeUp .9s var(--ease) .1s forwards}
.hero h1 b{font-weight:800;color:var(--c)}
.hero .sub{margin-top:clamp(18px,2.2vw,26px);font-size:clamp(15px,1.4vw,17.5px);color:rgba(255,255,255,.72);line-height:1.6;letter-spacing:-.1px;max-width:520px;opacity:0;animation:fadeUp .9s var(--ease) .28s forwards}
.hero .acts{margin-top:clamp(26px,3vw,38px);display:flex;gap:12px;flex-wrap:wrap;opacity:0;animation:fadeUp .9s var(--ease) .46s forwards}
.hero-meta{margin-top:clamp(40px,6vh,64px);padding-top:22px;border-top:1px solid rgba(255,255,255,.12);display:flex;gap:clamp(20px,3.5vw,44px);flex-wrap:wrap;opacity:0;animation:fadeUp .9s var(--ease) .6s forwards}
.hero-meta span{font-family:var(--f);font-size:12px;font-weight:500;letter-spacing:.2px;color:rgba(255,255,255,.55)}
.hero-meta b{color:var(--c);font-weight:500}
/* short hero for subpages */
.hero-s{min-height:min(62vh,560px)}

/* ============ editorial index rows (services list) ============ */
.idx{list-style:none;border-top:1px solid var(--b)}
.slab-light .idx{border-color:var(--ltb)}
.idx-row{display:grid;grid-template-columns:64px 1.05fr 1.5fr 28px;gap:clamp(18px,3vw,44px);align-items:start;padding:clamp(26px,3.6vh,40px) 8px;border-bottom:1px solid var(--b);border-radius:14px;transition:background .35s var(--ease),padding .35s var(--ease)}
.slab-light .idx-row{border-color:var(--ltb)}
.idx-row:hover{background:rgba(255,255,255,.025)}
.slab-light .idx-row:hover{background:rgba(0,0,0,.025)}
.idx-num{font-family:var(--f);font-size:12.5px;font-weight:600;letter-spacing:.3px;color:var(--c);padding-top:7px}
.slab-light .idx-num{color:var(--cd)}
.idx-row h3{font-size:clamp(19px,2.2vw,26px);font-weight:700;letter-spacing:-.6px;line-height:1.15}
.idx-body p{font-size:14.5px;line-height:1.65;color:var(--w2);letter-spacing:-.1px}
.slab-light .idx-body p{color:var(--ltt2)}
.idx-arrow{padding-top:7px;color:var(--w3);transition:color .3s,transform .3s var(--ease)}
.slab-light .idx-arrow{color:var(--ltt3)}
.idx-row:hover .idx-arrow{color:var(--c);transform:translate(3px,-3px)}
.idx-arrow svg{width:18px;height:18px}

/* ============ divider grid (domains / specializations) ============ */
.dgrid{display:grid;gap:1px;background:var(--b);border:1px solid var(--b);border-radius:18px;overflow:clip}
.slab-light .dgrid{background:var(--ltb);border-color:var(--ltb)}
.dgrid-2{grid-template-columns:1fr 1fr}
.dgrid-3{grid-template-columns:1fr 1fr 1fr}
.dgrid>div{background:var(--s1);padding:clamp(26px,3.2vw,42px);transition:background .35s var(--ease)}
.slab-light .dgrid>div{background:var(--lt)}
.dgrid>div:hover{background:var(--s2)}
.slab-light .dgrid>div:hover{background:var(--lt2)}
.dgrid h3{font-size:clamp(17px,1.8vw,21px);font-weight:700;letter-spacing:-.4px;margin:14px 0 10px}
.dgrid p{font-size:14px;line-height:1.65;color:var(--w2)}
.slab-light .dgrid p{color:var(--ltt2)}
.dgrid .idx-num{padding:0}

/* ============ vertical timeline (process) — scroll-linked progress line ============ */
.tline{position:relative;max-width:780px}
.tline::before{content:'';position:absolute;left:10px;top:14px;bottom:14px;width:1px;background:var(--b)}
.tline::after{content:'';position:absolute;left:10px;top:14px;width:1px;height:calc(var(--tp,0) * 1%);max-height:calc(100% - 28px);background:linear-gradient(180deg,var(--c2),var(--c));box-shadow:0 0 12px rgba(0,151,237,.5)}
.tl-step{position:relative;padding:0 0 clamp(36px,5vh,52px) 52px}
.tl-step:last-child{padding-bottom:0}
.tl-step::before{content:'';position:absolute;left:6px;top:8px;width:9px;height:9px;border-radius:50%;background:var(--c);box-shadow:0 0 0 4px rgba(0,151,237,.15)}
.tl-step h3{font-size:clamp(18px,2vw,23px);font-weight:700;letter-spacing:-.5px;margin-bottom:10px}
.tl-num{font-family:var(--f);font-size:12px;font-weight:600;letter-spacing:.4px;color:var(--c);display:block;margin-bottom:8px}
.tl-step p{font-size:14.5px;line-height:1.65;color:var(--w2)}

/* ============ browser frame — live product preview ============ */
.bframe{border-radius:16px;border:1px solid var(--bh);background:var(--s2);overflow:clip;box-shadow:0 40px 100px rgba(0,0,0,.55),0 0 0 1px rgba(0,151,237,.06),0 0 80px rgba(0,151,237,.08);opacity:0;transform:perspective(1400px) rotateX(9deg) rotateY(-7deg) translateY(28px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease),box-shadow .5s var(--ease)}
.bframe.v{opacity:1;transform:perspective(1400px) rotateX(0deg) rotateY(0deg) translateY(0)}
.bframe:hover{box-shadow:0 48px 110px rgba(0,0,0,.6),0 0 0 1px rgba(0,151,237,.14),0 0 110px rgba(0,151,237,.14)}
.bframe>img{width:100%;height:auto}

/* ghost outline display text */
.ghost{-webkit-text-stroke:1px rgba(255,255,255,.13);color:transparent;font-weight:800;user-select:none;pointer-events:none}
.slab-light .ghost{-webkit-text-stroke:1px rgba(0,0,0,.1)}

/* ============ stat strip ============ */
.strip{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,56px)}
.strip>div{flex:1;min-width:150px}
.strip-num{font-size:clamp(40px,5vw,64px);font-weight:800;letter-spacing:-2.5px;line-height:1}
.strip-num b{color:var(--c);font-weight:800}
.slab-light .strip-num b{color:var(--cd)}
.strip-lab{font-family:var(--f);font-size:12.5px;font-weight:500;letter-spacing:.2px;color:var(--w3);margin-top:10px;display:block}
.slab-light .strip-lab{color:var(--ltt3)}

/* ============ split layout ============ */
.split{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(36px,6vw,90px);align-items:start}
.split-copy p{font-size:15px;line-height:1.75;letter-spacing:-.1px;color:var(--w2)}
.slab-light .split-copy p{color:var(--ltt2)}
.split-copy p+p{margin-top:18px}

/* ============ CTA slab ============ */
.cta .wrap{text-align:center;padding-block:clamp(90px,13vh,150px)}
.cta h2{font-size:clamp(36px,5.2vw,68px);font-weight:800;letter-spacing:-2.6px;line-height:1.02}
.cta h2 b{color:var(--c);font-weight:800}
.slab-light .cta h2 b,.cta.slab-light h2 b{color:var(--cd)}
.cta p{margin-top:18px;font-size:15.5px;color:var(--w2)}
.slab-light .cta p,.cta.slab-light p{color:var(--ltt2)}
.cta .acts{margin-top:38px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ============ forms ============ */
.field label{display:block;font-size:12.5px;font-weight:600;letter-spacing:.2px;color:var(--w2);margin-bottom:8px}
.field input,.field select,.field textarea{width:100%;font-family:var(--f);font-size:14px;color:var(--w);background:rgba(255,255,255,.03);border:1px solid var(--b);border-radius:12px;padding:13px 16px;outline:none;transition:border-color .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease);-webkit-appearance:none;appearance:none}
.field textarea{min-height:140px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--w3)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:rgba(0,151,237,.55);background:rgba(255,255,255,.05);box-shadow:0 0 0 3px rgba(0,151,237,.12)}
.field select{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%235b5852' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 14px center;background-size:16px}
.field select option{background:var(--s2);color:var(--w)}
.field .err{display:none;font-size:11.5px;color:#e0705e;margin-top:6px}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:rgba(224,112,94,.55)}
.field.invalid .err{display:block}
/* light slab variant */
.slab-light .field label{color:var(--ltt2)}
.slab-light .field input,.slab-light .field select,.slab-light .field textarea{background:#fff;border-color:rgba(0,0,0,.12);color:var(--ltt)}
.slab-light .field input::placeholder,.slab-light .field textarea::placeholder{color:var(--ltt3)}
.slab-light .field input:focus,.slab-light .field select:focus,.slab-light .field textarea:focus{border-color:rgba(0,151,237,.6);box-shadow:0 0 0 3px rgba(0,151,237,.12)}
.slab-light .field select option{background:#fff;color:var(--ltt)}

/* ============ footer — on the black canvas ============ */
footer{position:relative;overflow:hidden;padding:clamp(56px,8vh,88px) calc(var(--gap) + clamp(14px,3vw,44px)) clamp(28px,4vh,44px)}
footer::before{content:'';position:absolute;inset:0;z-index:0;background-image:url("../assets/footer-bg.webp"),url("../assets/footer-bg.jpg"),url("../assets/footer-bg.png");background-size:cover;background-position:center;opacity:.45}
footer::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,var(--bg) 0%,rgba(0,0,0,.35) 40%,rgba(0,0,0,.15) 100%)}
footer .f-inner{position:relative;z-index:3;max-width:1140px;margin:0 auto}
.f-ghost{position:absolute;left:clamp(10px,3vw,40px);bottom:clamp(4px,1.2vh,14px);z-index:2;width:clamp(320px,44vw,620px);height:auto;pointer-events:none;user-select:none}
/* mask trick: black fill knocks out Inter's interior overlap edges, leaving only the outer silhouette ring */
.f-ghost mask text{font-family:var(--f);font-weight:800;font-size:96px;letter-spacing:-2px;fill:#000;stroke:#fff;stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round;paint-order:stroke}
.f-ghost>rect{fill:rgba(255,255,255,.14)}
footer .f-top{display:flex;align-items:flex-start;justify-content:space-between;gap:40px;padding-bottom:clamp(36px,5vh,52px);border-bottom:1px solid var(--b)}
footer .f-brand{display:flex;flex-direction:column;gap:14px}
footer .f-logo img{height:20px;width:auto}
footer .f-tagline{font-size:13px;color:var(--w3);max-width:250px;line-height:1.6}
footer .f-cols{display:flex;gap:clamp(44px,6vw,84px)}
footer .f-col h5{font-family:var(--f);font-size:12px;font-weight:600;letter-spacing:.3px;color:var(--w3);margin-bottom:16px}
footer .f-col ul{list-style:none;display:flex;flex-direction:column;gap:11px}
footer .f-col a{font-size:13.5px;color:var(--w2);transition:color .2s}
footer .f-col a:hover{color:var(--w)}
footer .f-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:clamp(24px,3vh,32px)}
footer .f-copy{font-size:11.5px;color:var(--w3)}
footer .f-legal{display:flex;gap:20px}
footer .f-legal a{font-size:11.5px;color:var(--w3);transition:color .2s}
footer .f-legal a:hover{color:var(--w2)}

/* ============ responsive ============ */
@media(max-width:960px){
  .split{grid-template-columns:1fr;gap:36px}
  .dgrid-3{grid-template-columns:1fr 1fr}
  .idx-row{grid-template-columns:44px 1fr 28px;grid-template-rows:auto auto}
  .idx-body{grid-column:2/3}
  .idx-arrow{grid-row:1}
}
@media(max-width:768px){
  .nav-mid{display:none}
  .nav-cta{display:none}
  .n-t{display:flex}
  .nav-mid.open{display:flex;flex-direction:column;position:fixed;top:74px;left:auto;right:12px;width:50%;transform:none;background:rgba(8,8,10,.97);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);padding:10px;gap:2px;border-radius:18px;border:1px solid rgba(255,255,255,.08);box-shadow:0 24px 64px rgba(0,0,0,.6);animation:menuIn .25s var(--ease);margin:0}
  .nav-mid.open a{font-size:15px;font-weight:500;color:var(--w2);padding:14px 18px;border-radius:12px}
  .nav-mid.open a:hover,.nav-mid.open a.active{color:var(--w);background:rgba(255,255,255,.06)}
  .nav-mid.open .nav-home{display:block}
  .nav-mid.open .nav-mcta{display:block;margin-top:8px;padding-top:10px;border-top:1px solid var(--b)}
  .nav-mid.open .nav-mcta a{background:var(--c);color:#fff;text-align:center;font-weight:600}
  .nav-mid.open .nav-mcta a:hover{background:var(--c2)}
  .hero{min-height:min(86vh,720px)}
  .hero-s{min-height:440px}
  .hero-meta{gap:14px 22px}
  .dgrid-2,.dgrid-3{grid-template-columns:1fr}
  .idx-row{grid-template-columns:36px 1fr;gap:14px;padding-inline:2px}
  .idx-arrow{display:none}
  .idx-body{grid-column:2/3}
  .strip{gap:28px}
  .strip>div{min-width:120px}
  footer .f-top{flex-direction:column;gap:32px}
  footer .f-cols{display:grid;grid-template-columns:1fr 1fr;gap:32px 40px;width:100%}
  footer .f-bottom{flex-direction:column;gap:12px;text-align:center}
  footer .f-legal{justify-content:center;flex-wrap:wrap;align-items:center}
  /* the ghost gets its own band below the content instead of painting over it */
  footer{display:flex;flex-direction:column;padding-bottom:18px}
  /* the beam's bright zone lands on the legal row at phone widths — deepen the scrim */
  footer::after{background:linear-gradient(180deg,var(--bg) 0%,rgba(0,0,0,.5) 35%,rgba(5,5,7,.74) 100%)}
  footer .f-inner{width:100%}
  .f-ghost{position:static;order:2;width:min(300px,84%);margin:30px auto 0}
}
@keyframes menuIn{from{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}
  .hero h1,.hero .sub,.hero .acts,.hero-meta{opacity:1;animation:none}
  .rv,.rv-l,.rv-r,.rv-s,.bframe{opacity:1;transform:none}
  .hero::before{transform:none}
  .tline::after{height:100%;max-height:calc(100% - 28px)}
}

/* linkedin icon — footer bottom row, brand color on hover */
.li-link{display:inline-flex;align-items:center}
.li-link svg{width:17px;height:17px;color:var(--w3);transition:color .25s var(--ease),transform .25s var(--ease)}
.li-link:hover svg{color:#0A66C2;transform:translateY(-1px)}

/* ============ cookie banner ============ */
.cookie{position:fixed;left:50%;bottom:18px;transform:translate(-50%,calc(100% + 26px));z-index:9000;width:min(560px,calc(100% - 28px));display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:16px 20px;border-radius:16px;background:rgba(10,10,13,.88);border:1px solid rgba(255,255,255,.09);backdrop-filter:blur(24px) saturate(1.6);-webkit-backdrop-filter:blur(24px) saturate(1.6);box-shadow:0 18px 56px rgba(0,0,0,.5);transition:transform .55s var(--ease)}
.cookie.show{transform:translate(-50%,0)}
.cookie p{flex:1;min-width:220px;font-size:12.5px;line-height:1.55;color:var(--w2);margin:0}
.cookie p a{color:var(--c);border-bottom:1px solid rgba(0,151,237,.3);transition:border-color .25s}
.cookie p a:hover{border-color:var(--c)}
.cookie-btns{display:flex;gap:8px;flex-shrink:0}
.ck{font-family:var(--f);font-size:12.5px;font-weight:600;padding:9px 18px;border-radius:10px;border:none;cursor:pointer;transition:all .3s var(--ease)}
.ck-yes{background:var(--c);color:#fff}
.ck-yes:hover{background:var(--c2);transform:translateY(-1px)}
.ck-no{background:transparent;color:var(--w3);border:1px solid var(--b)}
.ck-no:hover{color:var(--w2);border-color:var(--bh)}