/* ══════════════════════════════════════════════════════════════════
   ECE — CORPORATE EXPERIENCES · design system
   Royal navy · electric signal blue · technical type.
   Nothing shared with the EWE wedding side.
   ══════════════════════════════════════════════════════════════════ */
:root{
  --navy-950:#03060E; --navy-900:#060B18; --navy-850:#0A1223;
  --navy-800:#0E1930; --navy-700:#152343;
  --line:rgba(120,160,225,.15); --line-hi:rgba(79,168,255,.45);
  --ink:#EAF1FF; --ink-soft:#A0B5D6; --ink-dim:#66799C;
  --blue:#4FA8FF; --blue-hi:#93D2FF; --violet:#8B6BFF; --mint:#57F2C8;
  --glow:0 0 34px rgba(79,168,255,.32);
  --f-disp:'Space Grotesk',system-ui,sans-serif;
  --f-body:'Inter',system-ui,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --pad:clamp(18px,3.6vw,48px);
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
html,body{margin:0; padding:0; max-width:100%; overflow-x:hidden;}
body{
  background:var(--navy-950); color:var(--ink);
  font-family:var(--f-body); font-size:16px; line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; height:auto; display:block;}
a{color:inherit; text-decoration:none;}
button,input,textarea{font:inherit; color:inherit;}
button{background:none; border:0; cursor:pointer;}
::selection{background:rgba(79,168,255,.34); color:#fff;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ── background stack ───────────────────────────────────────────── */
#tunnel{position:fixed; inset:0; z-index:0; display:block; pointer-events:none;}
#vign{position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(130% 100% at 50% 42%, rgba(14,32,66,.42) 0%, transparent 58%),
    radial-gradient(120% 92% at 50% 34%, transparent 34%, rgba(4,8,20,.60) 76%, #03060E 100%);}
#scan{position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.05;
  background:repeating-linear-gradient(0deg,rgba(150,195,255,.12) 0 1px,transparent 1px 3px);
  mix-blend-mode:overlay;}
#grain{position:fixed; inset:-120%; z-index:3; pointer-events:none; opacity:.045;
  background-image:url("noise.png");
  background-size:128px 128px;
  animation:grainShift 7s steps(6) infinite;}
@keyframes grainShift{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
main,header,footer{position:relative; z-index:5;}

/* ── layout + type ──────────────────────────────────────────────── */
.wrap{width:100%; max-width:1240px; margin-inline:auto; padding-inline:var(--pad);}
h1,h2,h3{font-family:var(--f-disp); font-weight:600; letter-spacing:-.022em; margin:0;
  line-height:1.05; overflow-wrap:break-word;}
h1{font-size:clamp(31px,5.6vw,78px);}
h2{font-size:clamp(25px,3.6vw,50px); line-height:1.1;}
h3{font-size:clamp(18px,1.6vw,24px); line-height:1.22; letter-spacing:-.012em;}
p{margin:0; color:var(--ink-soft);}
.lede{font-size:clamp(15px,1.25vw,19px); line-height:1.66; color:var(--ink-soft); max-width:60ch;}
.eyebrow{font-family:var(--f-mono); font-size:clamp(9px,.72vw,10.5px); letter-spacing:.3em;
  text-transform:uppercase; color:var(--blue); display:flex; align-items:center; gap:11px;}
.eyebrow::before{content:''; flex:none; width:24px; height:1px;
  background:linear-gradient(90deg,var(--blue),transparent);}
.eyebrow.mid{justify-content:center;}

/* ── topbar ─────────────────────────────────────────────────────── */
header#top{position:fixed; top:0; left:0; right:0; z-index:60; display:flex;
  align-items:center; justify-content:space-between; gap:14px;
  padding:20px var(--pad); pointer-events:none;
  transition:padding .5s var(--ease);}
header#top::before{content:''; position:absolute; inset:0; z-index:-1;
  opacity:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(4,8,18,.94) 0%,rgba(4,8,18,.78) 56%,transparent 100%);
  -webkit-backdrop-filter:blur(14px) saturate(1.1); backdrop-filter:blur(14px) saturate(1.1);
  mask-image:linear-gradient(180deg,#000 62%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 100%);
  transition:opacity .55s var(--ease);}
body.scrolled header#top::before{opacity:1;}
body.scrolled header#top{padding-top:14px; padding-bottom:14px;}
header#top::after{content:''; position:absolute; left:var(--pad); right:var(--pad); bottom:0;
  height:1px; z-index:-1; opacity:0;
  background:linear-gradient(90deg,transparent,rgba(120,175,245,.30),transparent);
  transition:opacity .6s var(--ease);}
body.scrolled header#top::after{opacity:1;}
#brand{pointer-events:auto; display:flex; align-items:baseline; gap:10px; min-width:0;}
#brand .bm{font-family:var(--f-disp); font-weight:700; font-size:clamp(17px,1.6vw,21px);
  letter-spacing:.2em; color:var(--ink); line-height:1;}
#brand .bs{font-family:var(--f-mono); font-size:8px; letter-spacing:.28em; color:var(--ink-dim);
  white-space:nowrap;}
@media(max-width:560px){#brand .bs{display:none;}}
.gwbtn{pointer-events:auto; flex:none; display:inline-flex; align-items:center; gap:8px;
  padding:9px 15px; border-radius:2px; border:1px solid var(--line);
  background:rgba(10,18,35,.55); backdrop-filter:blur(11px); white-space:nowrap;
  font-family:var(--f-mono); font-size:9px; letter-spacing:.22em; color:var(--ink-soft);
  transition:border-color .45s,color .45s,box-shadow .45s;}




/* ══ GATEWAY · glassy panel ═══════════════════════════════════════
   Gehre neele kaanch ka tukda: upar ki dhaar pe thandi roshni, neeche
   kaanch ki motai, aur ek dheemi neeli aabha jo saans leti hai.     */
.gwbtn{ position:relative; isolation:isolate; border-radius:4px;
  background:linear-gradient(180deg,rgba(38,60,104,.62) 0%,rgba(16,29,56,.70) 60%,rgba(9,17,36,.76) 100%);
  -webkit-backdrop-filter:blur(16px) saturate(1.4); backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid rgba(140,182,255,.26); color:var(--ink);
  box-shadow:
    inset 0 1.2px 0 rgba(178,212,255,.55),
    inset 0 -1.4px 0 rgba(120,168,255,.34),
    inset 0 -10px 16px -10px rgba(0,0,0,.7),
    inset 0 9px 18px -12px rgba(178,212,255,.5),
    0 8px 22px rgba(0,6,20,.5),
    0 1.5px 3px rgba(0,6,20,.4);
  transition:transform .5s ease,box-shadow .5s ease,background .5s ease,border-color .5s ease; }
.gwbtn::before{ content:''; display:block; position:absolute; inset:-12px; z-index:-1;
  border-radius:8px; pointer-events:none;
  background:radial-gradient(58% 74% at 50% 86%,rgba(79,168,255,.46),transparent 72%);
  filter:blur(8px); opacity:.5; animation:gwglow 5s ease-in-out infinite; }
.gwbtn::after{ content:''; display:block; position:absolute; inset:0; z-index:1;
  border-radius:inherit; pointer-events:none;
  background:linear-gradient(104deg,transparent 40%,rgba(198,226,255,.42) 50%,transparent 60%);
  background-size:260% 100%; background-position:145% 0;
  animation:gwsheen 6.5s cubic-bezier(.4,0,.2,1) infinite; }
.gwbtn svg,.gwbtn>*{ position:relative; z-index:2; }
.gwbtn:hover{ transform:translateY(-1.5px); border-color:rgba(150,196,255,.44);
  background:linear-gradient(180deg,rgba(46,72,124,.70) 0%,rgba(20,36,68,.76) 60%,rgba(11,21,44,.82) 100%);
  box-shadow:
    inset 0 1.2px 0 rgba(198,226,255,.7),
    inset 0 -1.4px 0 rgba(140,186,255,.42),
    inset 0 -11px 18px -10px rgba(0,0,0,.72),
    0 14px 32px rgba(0,8,26,.6),
    0 2px 4px rgba(0,6,20,.45); }
.gwbtn:hover::before{ opacity:.95; }
.gwbtn:active{ transform:translateY(0);
  box-shadow:inset 0 2px 7px rgba(0,4,16,.7),inset 0 -1px 0 rgba(140,186,255,.3),0 2px 6px rgba(0,6,20,.4); }
@keyframes gwglow{ 0%,100%{ opacity:.4; } 50%{ opacity:.8; } }
@keyframes gwsheen{ 0%,74%{ background-position:145% 0; } 92%,100%{ background-position:-65% 0; } }



.gwbtn svg{width:11px; height:11px; stroke:currentColor; fill:none; stroke-width:1.5; flex:none;}

/* ══ RADIAL MENU — floating pills ══════════════════════════════ */
#dialWrap{position:fixed; left:50%; bottom:calc(22px + clamp(29px,3.5vw,36px));
  transform:translateX(-50%); z-index:70; width:0; height:0; pointer-events:none;}
.ditem{position:absolute; left:0; top:0; z-index:2; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; gap:9px;
  width:96px; margin-left:-48px; text-align:center;
  transform:translate(0,0) scale(.4); opacity:0;
  transition:transform .62s cubic-bezier(.34,1.5,.5,1), opacity .34s ease;}
body.dial-open .ditem{pointer-events:auto; opacity:1;
  transform:translate(var(--x,0),var(--y,0)) scale(1);
  transition-delay:calc(var(--i) * 52ms);}
body:not(.dial-open) .ditem{transition-delay:calc((3 - var(--i)) * 34ms);}
.ditem .dot{width:clamp(50px,5.6vw,62px); aspect-ratio:1; border-radius:50%;
  display:grid; place-items:center; position:relative;
  background:linear-gradient(158deg,#4C86E8,#2C56B4 62%,#1E3C86);
  box-shadow:0 10px 26px rgba(4,10,26,.66),
             0 0 0 1px rgba(160,205,255,.22) inset,
             0 0 26px rgba(79,168,255,.34);
  transition:transform .45s var(--ease), box-shadow .45s;}
.ditem .dot svg{width:46%; height:46%; stroke:#F2F8FF; stroke-width:1.7;}
.ditem:hover .dot{transform:translateY(-4px) scale(1.08);
  box-shadow:0 16px 34px rgba(4,10,26,.7), 0 0 0 1px rgba(200,230,255,.42) inset,
             0 0 40px rgba(120,190,255,.6);}
.ditem.cur .dot{background:linear-gradient(158deg,#8FD0FF,#4C86E8 60%,#2C56B4);}
.ditem .dtx{font-family:var(--f-mono); font-size:8.6px; letter-spacing:.2em;
  color:var(--ink-soft); white-space:nowrap; transition:color .35s;
  text-shadow:0 2px 10px rgba(3,6,14,.9);}
.ditem:hover .dtx,.ditem.cur .dtx{color:#fff;}

/* centre trigger */
#dialBtn{position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:72;
  width:clamp(58px,7vw,72px); aspect-ratio:1; border-radius:50%; pointer-events:auto;
  background:linear-gradient(160deg,#4C86E8,#22448F 66%,#12224A);
  border:0; display:grid; place-items:center;
  box-shadow:0 14px 34px rgba(4,10,26,.72), 0 0 0 1px rgba(160,205,255,.26) inset,
             0 0 34px rgba(79,168,255,.42);
  transition:transform .55s cubic-bezier(.34,1.5,.5,1), box-shadow .45s, background .5s;}
#dialBtn:hover{box-shadow:0 16px 40px rgba(4,10,26,.72), 0 0 0 1px rgba(200,230,255,.44) inset,
             0 0 46px rgba(120,190,255,.62);}
body.dial-open #dialBtn{transform:translateX(-50%) rotate(135deg);
  background:linear-gradient(160deg,#101B33,#070E1F);
  box-shadow:0 14px 34px rgba(4,10,26,.8), 0 0 0 1px rgba(150,195,255,.3) inset;}
#dialBtn .bars{position:relative; width:20px; height:20px;}
#dialBtn .bars i{position:absolute; left:50%; top:50%; background:#F2F8FF; border-radius:2px;
  transition:transform .5s var(--ease), opacity .3s;}
#dialBtn .bars i:nth-child(1){width:18px; height:1.7px; transform:translate(-50%,-50%);}
#dialBtn .bars i:nth-child(2){width:1.7px; height:18px; transform:translate(-50%,-50%);}
#dialBtn .bars i:nth-child(3){display:none;}
/* halka sa halo jab khula ho */
#dialBtn::after{content:''; position:absolute; inset:-10px; border-radius:50%;
  border:1px solid rgba(120,180,255,.24); opacity:0;
  transition:opacity .5s, transform .8s cubic-bezier(.34,1.5,.5,1);}
body.dial-open #dialBtn::after{opacity:1; transform:scale(1.12);}

#dialScrim{position:fixed; inset:0; z-index:65;
  background:radial-gradient(62% 54% at 50% 100%,rgba(12,26,54,.72),rgba(3,6,14,.9) 66%);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  opacity:0; pointer-events:none; transition:opacity .5s var(--ease);}
body.dial-open #dialScrim{opacity:1; pointer-events:auto;}
@media(max-width:560px){
  .ditem{width:84px; margin-left:-42px; gap:7px;}
  .ditem .dtx{font-size:7.4px; letter-spacing:.13em;}
  #dialBtn{bottom:16px;}
  #dialWrap{bottom:calc(16px + 29px);}
}

/* ── reveals ────────────────────────────────────────────────────── */
.rv{opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform 1s var(--ease);}
.rv.on{opacity:1; transform:none;}
.rv-d1{transition-delay:.09s;} .rv-d2{transition-delay:.18s;}
.rv-d3{transition-delay:.27s;} .rv-d4{transition-delay:.36s;}
/* sliced headline — each line wipes up behind its own mask */
.slice{display:block; overflow:hidden;}
.slice > span{display:block; transform:translateY(112%); transition:transform 1.15s var(--ease);
  padding-bottom:.14em; margin-bottom:-.14em;}
.slice.on > span{transform:none;}
.slice:nth-of-type(2) > span{transition-delay:.10s;}
.slice:nth-of-type(3) > span{transition-delay:.20s;}
.gl{background:linear-gradient(96deg,#EAF1FF 4%,var(--blue-hi) 44%,var(--violet) 92%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}

/* ── buttons ────────────────────────────────────────────────────── */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 25px; border-radius:2px; position:relative; overflow:hidden;
  font-family:var(--f-mono); font-size:9.6px; letter-spacing:.22em; text-transform:uppercase;
  border:1px solid var(--line); color:var(--ink-soft); white-space:nowrap;
  transition:color .4s, border-color .4s, box-shadow .4s;}
.btn > span{position:relative; z-index:2;}
.btn::before{content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(96deg,var(--blue),var(--violet));
  transform:translateX(-101%); transition:transform .65s var(--ease);}
.btn:hover{color:#03060E; border-color:transparent; box-shadow:var(--glow);}
.btn:hover::before{transform:none;}
.btn.ghost::before{background:rgba(79,168,255,.16);}
.btn.ghost:hover{color:var(--ink); border-color:var(--line-hi); box-shadow:none;}
.cta-row{margin-top:36px; display:flex; flex-wrap:wrap; gap:12px;}

/* ── hero ───────────────────────────────────────────────────────── */
.hero{min-height:100svh; display:flex; align-items:center; padding:130px 0 190px; position:relative;}
.hero.short{min-height:auto; padding:clamp(140px,20vh,210px) 0 clamp(20px,4vh,44px);}
.hero h1{max-width:17ch;}
.hero .lede{margin-top:22px;}
.scrollcue{position:absolute; left:50%; bottom:120px; transform:translateX(-50%);
  font-family:var(--f-mono); font-size:8px; letter-spacing:.32em; color:var(--ink-dim);
  display:flex; flex-direction:column; align-items:center; gap:9px;}
.scrollcue i{width:1px; height:36px; background:linear-gradient(var(--blue),transparent);
  display:block; animation:cueFall 2.1s cubic-bezier(.65,0,.35,1) infinite;}
@keyframes cueFall{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media(max-width:760px){.scrollcue{display:none;}}

/* ── sections ───────────────────────────────────────────────────── */
section{padding:clamp(66px,10vh,132px) 0; position:relative;}
.sec-head{display:flex; flex-direction:column; gap:18px; margin-bottom:clamp(34px,5vh,60px);}

/* ══ PROOF POINTS — no boxes, diagonal drift, hairline cross ═══ */
.pstats{position:relative; display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  row-gap:clamp(64px,11vh,132px); column-gap:clamp(24px,6vw,110px);
  padding:clamp(30px,5vh,66px) 0 clamp(40px,7vh,90px);}
/* hairline cross */
.cross-h,.cross-v{position:absolute; z-index:1; pointer-events:none;
  background:rgba(120,160,225,.16); opacity:0;
  transition:transform 1.5s var(--ease), opacity .8s ease;}
.cross-h{left:0; right:0; top:50%; height:1px; transform:scaleX(0);}
.cross-v{top:0; bottom:0; left:50%; width:1px; transform:scaleY(0);}
.pstats.on .cross-h{transform:scaleX(1); opacity:1;}
.pstats.on .cross-v{transform:scaleY(1); opacity:1; transition-delay:.18s;}

.pcell{position:relative; z-index:2; min-width:0;
  opacity:0; transform:translateY(24px);
  transition:opacity .95s var(--ease), transform 1.05s var(--ease);}
.pstats.on .pcell{opacity:1; transform:none;}
.pstats.on .p2{transition-delay:.12s;}
.pstats.on .p3{transition-delay:.24s;}
.pstats.on .p4{transition-delay:.36s;}
/* tirchha bahav — seedhi qatar nahi */
.p2{padding-top:clamp(30px,6vh,74px); padding-left:clamp(16px,5vw,86px);}
.p3{padding-right:clamp(16px,4vw,60px);}
.p4{padding-top:clamp(30px,6vh,74px); padding-left:clamp(16px,5vw,86px);}
.pcell .num{font-family:var(--f-disp); font-weight:700; line-height:.94;
  letter-spacing:-.04em; font-size:clamp(38px,6.4vw,90px);
  background:linear-gradient(178deg,#FFFFFF 4%,var(--blue-hi) 78%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.pcell .lb{margin-top:clamp(10px,1.4vh,18px); font-family:var(--f-mono);
  font-size:clamp(8.6px,.78vw,10px); letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-dim); line-height:1.7;}
@media(max-width:820px){
  .pstats{grid-template-columns:1fr; row-gap:0;
    padding:clamp(18px,3vh,30px) 0 clamp(24px,4vh,40px);}
  .cross-v{display:none;}
  .cross-h{top:auto; bottom:auto; position:static; height:1px; margin:0;
    transform:scaleX(0); transform-origin:left; grid-column:1;}
  .pcell{padding:clamp(20px,3.4vh,30px) 0; border-bottom:1px solid rgba(120,160,225,.10);}
  .pcell:last-of-type{border-bottom:0;}
  .p2,.p3,.p4{padding-left:0; padding-right:0; padding-top:clamp(20px,3.4vh,30px);}
  .pcell .num{font-size:clamp(40px,13vw,62px);}
  .pcell .lb{font-size:9px; letter-spacing:.2em;}
}

/* ── how we work — flowing current rail ────────────────────────── */
.steps{display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,2.2vw,32px); position:relative;}
.steps::before{content:''; position:absolute; left:0; right:0; top:19px; height:1px;
  background:rgba(120,160,225,.13);}
/* behti hui lehrein — line ke aar-paar */
.railwave{position:absolute; left:0; top:-41px; z-index:1; pointer-events:none;
  max-width:100%;}
/* energised core — charge ke peeche banti hai */
.stepline{position:absolute; left:0; top:19px; height:1px; width:0; z-index:2;
  background:linear-gradient(90deg,var(--blue),var(--blue-hi) 60%,var(--violet));
  box-shadow:0 0 8px rgba(79,168,255,.6), 0 0 20px rgba(79,168,255,.22);}
/* the travelling charge */
.charge{position:absolute; top:19px; left:0; width:0; height:0; z-index:5;
  pointer-events:none; opacity:0; transition:opacity .3s;}
.charge.live{opacity:1;}
.charge::before{content:''; position:absolute; left:-5px; top:-5px; width:10px; height:10px;
  border-radius:50%; background:#F4FBFF;
  box-shadow:0 0 6px 2px rgba(210,240,255,.98),
             0 0 16px 5px rgba(120,200,255,.8),
             0 0 40px 14px rgba(79,168,255,.4);}
.charge::after{content:''; position:absolute; right:0; top:-1.4px;
  width:clamp(70px,9vw,128px); height:2.8px; border-radius:3px; filter:blur(1px);
  background:linear-gradient(90deg,transparent,rgba(120,200,255,.10) 40%,rgba(198,236,255,.95));}
.charge.dim::before{box-shadow:0 0 4px 1px rgba(210,240,255,.6),
  0 0 11px 3px rgba(120,200,255,.36), 0 0 24px 8px rgba(79,168,255,.16);}
.charge.dim::after{opacity:.4;}

.step{position:relative; padding-top:50px; min-width:0; z-index:3;}
/* BUJHA HUA node — bas ek halka sa nishaan */
.step::before{content:''; position:absolute; left:1px; top:16px; width:7px; height:7px;
  border-radius:50%; background:transparent; border:1px solid rgba(110,150,205,.30);
  z-index:4; transform:none; opacity:1; box-shadow:none;
  transition:width .45s var(--ease), height .45s var(--ease), left .45s var(--ease),
             top .45s var(--ease), background .5s, border-color .5s, box-shadow .6s;}
/* JALA HUA node */
.step.lit::before{left:0; top:14px; width:11px; height:11px;
  background:radial-gradient(circle at 40% 34%,#FFFFFF,#A8DCFF 58%,#3A86D8);
  border-color:rgba(220,242,255,.95);
  box-shadow:0 0 10px 2px rgba(160,215,255,.85), 0 0 30px 9px rgba(79,168,255,.4);}
.step.zap::after{content:''; position:absolute; left:5.5px; top:19.5px; width:6px; height:6px;
  margin:-3px 0 0 -3px; border-radius:50%; z-index:3; pointer-events:none;
  border:1px solid rgba(180,228,255,.95); animation:zapRing .9s var(--ease) forwards;}
@keyframes zapRing{0%{transform:scale(.4); opacity:1}100%{transform:scale(8); opacity:0}}
.step .k{font-family:var(--f-mono); font-size:9.6px; letter-spacing:.2em; color:var(--ink-dim);
  transition:color .55s, text-shadow .55s;}
.step.lit .k{color:var(--blue-hi); text-shadow:0 0 18px rgba(79,168,255,.5);}
.step h3{margin-top:8px; color:rgba(234,241,255,.55); transition:color .6s, text-shadow .7s;}
.step.lit h3{color:var(--ink); text-shadow:0 0 24px rgba(79,168,255,.3);}
.step p{margin-top:10px; font-size:14px; line-height:1.6; opacity:.42; transition:opacity .8s ease .08s;}
.step.lit p{opacity:1;}

@media(max-width:900px){
  .steps{grid-template-columns:1fr; gap:0;}
  .steps::before{left:5px; right:auto; top:6px; bottom:6px; width:1px; height:auto;}
  .railwave{left:-38px; top:0; opacity:.75;}
  .stepline{left:5px; top:6px; width:1px; height:0;
    background:linear-gradient(180deg,var(--blue),var(--blue-hi) 60%,var(--violet));}
  .charge{left:5px; top:6px;}
  .charge::after{width:2.8px; height:clamp(58px,14vw,110px); right:auto; left:-1.4px; bottom:0; top:auto;
    background:linear-gradient(180deg,transparent,rgba(120,200,255,.10) 40%,rgba(198,236,255,.95));}
  .step{padding:0 0 30px 32px;}
  .step::before{left:1.5px; top:8px;}
  .step.lit::before{left:0; top:6px;}
  .step.zap::after{left:5.5px; top:11.5px;}
}

/* marquee */
.mq{overflow:hidden; border-block:1px solid var(--line); padding:24px 0;
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);}
.mq .lane{display:flex; gap:clamp(34px,5vw,80px); width:max-content; animation:mqRoll 38s linear infinite;}
.mq:hover .lane{animation-play-state:paused;}
@keyframes mqRoll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.mq .cl{font-family:var(--f-disp); font-weight:500; font-size:clamp(16px,1.8vw,25px);
  color:var(--ink-dim); white-space:nowrap; transition:color .35s, text-shadow .35s;}
.mq .cl:hover{color:var(--ink); text-shadow:0 0 22px rgba(79,168,255,.5);}

/* ── case tiles ─────────────────────────────────────────────────── */
.cases{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(14px,1.8vw,24px);}
@media(max-width:820px){.cases{grid-template-columns:1fr;}}
.case{position:relative; display:block; overflow:hidden; min-width:0;
  border:1px solid var(--line); background:var(--navy-850);
  transition:border-color .5s, transform .8s var(--ease), box-shadow .8s;}
.case:hover{border-color:var(--line-hi); transform:translateY(-5px);
  box-shadow:0 28px 66px rgba(0,0,0,.55), var(--glow);}
.case .ph{position:relative; aspect-ratio:16/10; overflow:hidden;
  background:linear-gradient(140deg,#0B1730 0%,#14264C 52%,#0A1327 100%);}
.case .ph img{width:100%; height:100%; object-fit:cover; opacity:.94;
  transform:none;                       /* aaram me poori tasveer — kahin se kati nahi */
  transition:transform 1.3s var(--ease), opacity .6s;}
.case:hover .ph img{transform:scale(1.06); opacity:1;}
/* screen power-on sweep */
.case .ph::before{content:''; position:absolute; left:0; right:0; top:50%; height:1px; z-index:3;
  background:linear-gradient(90deg,transparent,var(--blue-hi),transparent);
  transform:scaleX(0); opacity:0; transition:transform .8s var(--ease), opacity .5s;}
.case.on .ph::before{transform:scaleX(1); opacity:1;}
.case.on:hover .ph::before{opacity:0; transition-delay:0s;}
.case .ph::after{content:''; position:absolute; inset:0; z-index:2;
  background:linear-gradient(to top,rgba(3,6,14,.92) 3%,transparent 54%);}
.case .slot{position:absolute; inset:0; z-index:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:9px;
  font-family:var(--f-mono); font-size:8.6px; letter-spacing:.28em; color:rgba(150,180,225,.34);}
.case .slot svg{width:32px; height:32px; stroke:rgba(150,180,225,.3); fill:none; stroke-width:1;}
.case .body{position:relative; z-index:4; padding:20px clamp(16px,1.9vw,26px) 24px;}
.tag{display:inline-block; font-family:var(--f-mono); font-size:8.4px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--blue); border:1px solid rgba(79,168,255,.32);
  padding:5px 9px; border-radius:2px; line-height:1.4; white-space:normal;}
.case h3{margin-top:13px;}
.case .go{margin-top:13px; display:inline-flex; align-items:center; gap:8px;
  font-family:var(--f-mono); font-size:9px; letter-spacing:.22em; color:var(--ink-dim);
  transition:color .4s, gap .5s var(--ease);}
.case:hover .go{color:var(--blue-hi); gap:14px;}
.case .beam{position:absolute; inset:0; z-index:3; pointer-events:none; opacity:0;
  transition:opacity .55s;
  background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%),rgba(79,168,255,.16),transparent 62%);}
.case:hover .beam{opacity:1;}

/* ── pillars (what we do) ───────────────────────────────────────── */
.pillars{display:grid; gap:1px; background:var(--line); border:1px solid var(--line);}
.pillar{background:var(--navy-900); position:relative; overflow:hidden;
  display:grid; grid-template-columns:minmax(0,.44fr) minmax(0,.56fr);
  gap:clamp(18px,3vw,50px); align-items:start;
  padding:clamp(26px,3.6vw,52px) clamp(20px,2.8vw,48px); transition:background .5s;}
.pillar:hover{background:var(--navy-850);}
.pillar::before{content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg,var(--blue),var(--violet));
  transform:scaleY(0); transform-origin:top; transition:transform .9s var(--ease);}
.pillar.on::before{transform:none;}
/* scanning light bar that sweeps once on reveal */
.pillar::after{content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg,transparent 42%,rgba(79,168,255,.10) 50%,transparent 58%);
  transform:translateX(-120%);}
.pillar.on::after{animation:pScan 1.5s var(--ease) .25s 1 forwards;}
@keyframes pScan{to{transform:translateX(120%);}}
.pillar .pn{font-family:var(--f-mono); font-size:9.6px; letter-spacing:.24em; color:var(--blue); margin-bottom:12px;}
.pillar .plist{margin-top:15px; display:flex; flex-wrap:wrap; gap:7px;}
.pillar .plist span{font-family:var(--f-mono); font-size:9px; letter-spacing:.1em; color:var(--ink-dim);
  border:1px solid var(--line); padding:6px 10px; border-radius:2px; line-height:1.4;
  transition:border-color .4s,color .4s;}
.pillar:hover .plist span{border-color:rgba(79,168,255,.3); color:var(--ink-soft);}
.pillar .quote{font-family:var(--f-disp); font-weight:400; color:var(--ink);
  font-size:clamp(15px,1.45vw,20px); line-height:1.5;}
@media(max-width:860px){.pillar{grid-template-columns:1fr; gap:16px;}}

/* ── contact ────────────────────────────────────────────────────── */
.cwrap{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(28px,5vw,76px); align-items:start;}
@media(max-width:900px){.cwrap{grid-template-columns:1fr;}}
.cinfo .row{padding:17px 0; border-bottom:1px solid var(--line);}
.cinfo .k{font-family:var(--f-mono); font-size:8.6px; letter-spacing:.24em;
  color:var(--ink-dim); text-transform:uppercase;}
.cinfo .v{margin-top:6px; font-family:var(--f-disp); font-size:clamp(15px,1.4vw,19px); color:var(--ink);}
.cinfo .v a{transition:color .35s;} .cinfo .v a:hover{color:var(--blue-hi);}
form#brief{display:block;}
.field{position:relative; margin-bottom:24px;}
.field input,.field textarea{display:block; width:100%; background:transparent; border:0;
  border-bottom:1px solid var(--line); border-radius:0;
  padding:16px 2px 11px; font-family:var(--f-body); font-size:15px; color:var(--ink);
  outline:none; transition:border-color .45s;}
.field textarea{resize:vertical; min-height:112px; line-height:1.6;}
.field label{position:absolute; left:2px; top:16px; pointer-events:none; z-index:1;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.18em; color:var(--ink-dim);
  text-transform:uppercase;
  transition:transform .45s var(--ease), font-size .35s, color .35s;}
.field input:focus + label,.field textarea:focus + label,
.field input:not(:placeholder-shown) + label,.field textarea:not(:placeholder-shown) + label{
  transform:translateY(-18px); font-size:8.4px; color:var(--blue);}
.field .ul{position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:linear-gradient(90deg,var(--blue),var(--violet));
  transform:scaleX(0); transform-origin:left; transition:transform .65s var(--ease);}
.field input:focus ~ .ul,.field textarea:focus ~ .ul{transform:none;}
/* send button gets a slow orbiting signal ring */
.sendwrap{position:relative; display:inline-block; margin-top:6px;}
.sendwrap::before{content:''; position:absolute; inset:-7px; border-radius:3px;
  border:1px solid rgba(79,168,255,.22); opacity:0; transition:opacity .5s, transform .8s var(--ease);}
.sendwrap:hover::before{opacity:1; transform:scale(1.03);}
#sent{margin-top:20px; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.1em;
  line-height:1.7; color:var(--mint); opacity:0; transform:translateY(8px);
  transition:opacity .55s, transform .65s var(--ease);}
#sent.on{opacity:1; transform:none;}

/* ── closing cta + footer ───────────────────────────────────────── */
.close-cta{text-align:center; padding:clamp(72px,12vh,150px) 0 clamp(160px,19vh,220px);}
.close-cta h2{max-width:19ch; margin-inline:auto;}
.close-cta .btn{margin-top:30px;}
footer{border-top:1px solid var(--line); padding:30px 0 clamp(120px,15vh,150px);}
footer .fw{display:flex; flex-wrap:wrap; gap:16px 26px; justify-content:space-between; align-items:center;}
footer .fl{display:flex; flex-wrap:wrap; gap:18px 24px;}
footer a,footer .cp{font-family:var(--f-mono); font-size:8.6px; letter-spacing:.2em;
  color:var(--ink-dim); transition:color .35s;}
footer a:hover{color:var(--blue-hi);}

/* ── cursor ─────────────────────────────────────────────────────── */
#cur{position:fixed; z-index:200; width:6px; height:6px; border-radius:50%;
  background:var(--blue-hi); pointer-events:none; mix-blend-mode:screen; left:0; top:0;}
#curR{position:fixed; z-index:199; width:32px; height:32px; border-radius:50%; left:0; top:0;
  border:1px solid rgba(120,175,245,.4); pointer-events:none;
  transition:width .35s var(--ease),height .35s var(--ease),border-color .35s,background .35s;}
body.hot #curR{width:56px; height:56px; border-color:rgba(79,168,255,.85); background:rgba(79,168,255,.08);}
@media(hover:none){#cur,#curR{display:none;}}

@media(prefers-reduced-motion:reduce){
  *{animation:none !important; transition-duration:.01s !important;}
  .rv{opacity:1; transform:none;} .slice > span{transform:none;}
}

/* ══ NETWORK BOARD ═════════════════════════════════════════════ */
.board{position:relative; width:100%; aspect-ratio:16/9; max-height:74vh;
  display:grid; place-items:center;}
@media(max-width:760px){.board{aspect-ratio:3/4;}}
.traces{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1;}
/* central core */
.core{--cw:clamp(96px,11vw,138px);
  position:relative; z-index:3; width:var(--cw); aspect-ratio:1;
  border-radius:16px; display:grid; place-items:center;
  background:linear-gradient(155deg,#132A4E,#070E1F 72%);
  border:1px solid rgba(130,180,245,.34);
  box-shadow:0 20px 52px rgba(0,0,0,.6), inset 0 1px 0 rgba(180,220,255,.16);
  transition:box-shadow .45s, border-color .45s;}
.core.hit{border-color:rgba(147,210,255,.85);
  box-shadow:0 20px 52px rgba(0,0,0,.6), 0 0 44px rgba(79,168,255,.5),
             inset 0 1px 0 rgba(180,220,255,.3);}
.core .cn{font-family:var(--f-disp); font-weight:700; font-size:clamp(17px,2vw,25px);
  letter-spacing:.16em; color:var(--ink); transition:text-shadow .4s;}
.core.hit .cn{text-shadow:0 0 22px rgba(147,210,255,.9);}
.core::before{content:''; position:absolute; inset:7px; border-radius:10px;
  border:1px solid rgba(120,170,235,.16);
  /* upar ki dhaar pe roshni, neeche gehra — package ubhra hua lage */
  box-shadow:inset 0 1px 0 rgba(198,228,255,.22), inset 0 -10px 18px -10px rgba(0,0,0,.85);
  background:linear-gradient(163deg,rgba(255,255,255,.045) 0%,transparent 42%);}
.core .pins{position:absolute; left:50%; bottom:-14px; transform:translateX(-50%);
  width:66%; height:14px;
  background:repeating-linear-gradient(90deg,rgba(120,175,240,.55) 0 2px,transparent 2px 9px);
  opacity:.55; transition:opacity .4s, filter .4s;}
/* asli QFP package ki tarah chaaron taraf leads */
.core .pins::before{content:''; position:absolute; left:0; right:0; height:14px;
  bottom:calc(100% + var(--cw)); background:inherit;}
.core::after{content:''; position:absolute; top:17%; bottom:17%; left:-14px; right:-14px;
  pointer-events:none; opacity:.55; transition:opacity .4s, filter .4s;
  background:
    repeating-linear-gradient(0deg,rgba(120,175,240,.55) 0 2px,transparent 2px 9px) left  center/14px 100% no-repeat,
    repeating-linear-gradient(0deg,rgba(120,175,240,.55) 0 2px,transparent 2px 9px) right center/14px 100% no-repeat;}
.core.hit .pins,.core.hit::after{opacity:1; filter:drop-shadow(0 0 7px rgba(79,168,255,.9));}
/* pin-1 ka dot — har asli IC pe hota hai */
.core .cn::before{content:''; position:absolute; left:11px; top:11px;
  width:5px; height:5px; border-radius:50%; background:rgba(140,192,250,.55);
  box-shadow:0 0 8px rgba(79,168,255,.5); transition:background .4s,box-shadow .4s;}
.core.hit .cn::before{background:#DCEEFF; box-shadow:0 0 12px rgba(147,210,255,.95);}
/* package ke neeche silicon die ki dheemi saans */
.core .cn::after{content:''; position:absolute; inset:22%; border-radius:8px; z-index:-1;
  background:radial-gradient(60% 60% at 50% 45%,rgba(79,168,255,.30),transparent 72%);
  animation:dieBreathe 4.2s ease-in-out infinite;}
@keyframes dieBreathe{0%,100%{opacity:.35;}50%{opacity:.85;}}
/* outer chips */
.chip{position:absolute; z-index:2; min-width:clamp(70px,8vw,104px);
  padding:11px 13px; border-radius:6px; text-align:center;
  box-shadow:inset 0 1px 0 rgba(186,222,255,.14), inset 0 -8px 14px -9px rgba(0,0,0,.8),
             0 8px 20px rgba(0,4,14,.5);
  background:linear-gradient(155deg,rgba(16,30,58,.95),rgba(7,14,31,.95));
  border:1px solid rgba(120,165,230,.20);
  box-shadow:0 12px 30px rgba(0,0,0,.5);
  opacity:0; transform:scale(.82);
  transition:opacity .7s var(--ease), transform .8s var(--ease),
             border-color .45s, box-shadow .45s;}
.board.on .chip{opacity:1; transform:none;}
.board.on .chip[data-side="l"][style*="--r:1"],
.board.on .chip[data-side="r"][style*="--r:1"]{transition-delay:.1s;}
.board.on .chip[data-side="l"][style*="--r:2"],
.board.on .chip[data-side="r"][style*="--r:2"]{transition-delay:.2s;}
.chip span{font-family:var(--f-mono); font-size:clamp(8.4px,.82vw,10px);
  letter-spacing:.2em; color:var(--ink-soft); transition:color .4s;}
.chip.fire{border-color:rgba(147,210,255,.75);
  box-shadow:0 12px 30px rgba(0,0,0,.5), 0 0 30px rgba(79,168,255,.42);}
.chip.fire span{color:#fff; text-shadow:0 0 16px rgba(147,210,255,.8);}

/* ══ FEATURED CASE STUDIES — rising light floor ════════════════ */
#featured{position:relative; overflow:hidden;}
#featured .floorglow{position:absolute; left:50%; bottom:-6%; z-index:0;
  width:120%; height:52%; transform:translateX(-50%) scaleY(.2);
  transform-origin:bottom; opacity:0; pointer-events:none;
  background:radial-gradient(58% 100% at 50% 100%,
    rgba(79,168,255,.30) 0%, rgba(102,90,235,.16) 38%, transparent 72%);
  transition:transform 1.6s var(--ease), opacity 1.2s ease;}
#featured.lit .floorglow{transform:translateX(-50%) scaleY(1); opacity:1;}
#featured .plane{position:absolute; left:50%; bottom:2%; z-index:0;
  width:min(1180px,96%); transform:translateX(-50%) translateY(26px);
  opacity:0; pointer-events:none;
  transition:transform 1.5s var(--ease) .12s, opacity 1.1s ease .12s;}
#featured.lit .plane{transform:translateX(-50%); opacity:1;}
#featured .plane path,#featured .plane line{fill:none; stroke:rgba(130,175,240,.20); stroke-width:1;}
#featured .wrap{position:relative; z-index:2;}
.cases .case{opacity:0; transform:translateY(38px) scale(.985);
  transition:opacity .95s var(--ease), transform 1.05s var(--ease),
             border-color .5s, box-shadow .8s;}
.cases .case.on{opacity:1; transform:none;}

/* proof grid canvas — section ke peeche */
#proof{position:relative; overflow:hidden;}
.pgrid{position:absolute; inset:0; z-index:0; pointer-events:none; display:block;}
#proof .wrap{position:relative; z-index:2;}
.stats{position:relative; z-index:2;}

/* ══ RESPONSIVE HARDENING — har screen pe fit, kuch cut nahi ═════ */
html,body{overflow-x:clip;}
img,svg,canvas,video{max-width:100%;}
.wrap{max-width:min(1240px,100%);}
section,main,footer,header{max-width:100vw;}
h1,h2,h3,p,.lede,.eyebrow,.tag{overflow-wrap:anywhere;}

/* tablet */
@media(max-width:1024px){
  .hero{padding:120px 0 170px;}
  .board{aspect-ratio:4/3;}
}
/* phone */
@media(max-width:760px){
  :root{--pad:18px;}
  header#top{padding:14px var(--pad);}
  .gwbtn{padding:8px 12px; font-size:8.2px; letter-spacing:.16em;}
  .gwbtn svg{width:10px;height:10px;}
  #brand .bm{font-size:16px; letter-spacing:.16em;}
  .hero{min-height:auto; padding:112px 0 130px;}
  .hero.short{padding:112px 0 20px;}
  h1{font-size:clamp(28px,8.6vw,42px);}
  h2{font-size:clamp(22px,6.6vw,32px);}
  .lede{font-size:15px;}
  .cta-row{margin-top:26px; gap:10px;}
  .btn{padding:13px 18px; font-size:9px; letter-spacing:.16em;}
  section{padding:clamp(52px,8vh,80px) 0;}
  .sec-head{margin-bottom:26px; gap:14px;}
  .cases{gap:14px;}
  .case .body{padding:16px 16px 20px;}
  .case h3{font-size:19px;}
  .tag{font-size:8px; letter-spacing:.16em; padding:4px 8px;}
  .pillar{padding:24px 18px; gap:14px;}
  .pillar .quote{font-size:15.5px;}
  .pillar .plist span{font-size:8.4px; padding:5px 8px;}
  .cwrap{gap:26px;}
  .field input,.field textarea{font-size:16px;}   /* iOS zoom rok */
  .close-cta{padding:64px 0 clamp(140px,20vh,170px);}
  .close-cta h2{max-width:16ch;}
  footer{padding:26px 0 clamp(112px,16vh,132px);}
  footer .fw{gap:12px 18px;}
  footer .fl{gap:12px 16px;}
  /* network board */
  .board{aspect-ratio:auto; min-height:520px;}
  .core{width:clamp(84px,26vw,110px); border-radius:13px;}
  .chip{min-width:clamp(62px,22vw,88px); padding:9px 10px;}
  .chip span{font-size:8px; letter-spacing:.14em;}
}
@media(max-width:400px){
  :root{--pad:15px;}
  h1{font-size:clamp(25px,8.4vw,34px);}
  .pcell .num{font-size:clamp(36px,12.5vw,52px);}
  .board{min-height:470px;}
}
/* landscape phone — hero ko poori height mat do */
@media(max-height:520px) and (orientation:landscape){
  .hero{min-height:auto; padding:96px 0 84px;}
  #dialBtn{width:50px; bottom:10px;}
  #dialWrap{width:150vw;}
}

/* ══ FINAL FIT PASS — kuch bhi cut ya overlap nahi ══════════════ */
/* 1 · dial hamesha content ke upar rahe, kabhi text na dhake */
main{padding-bottom:clamp(96px,14vh,150px);}
/* 2 · footer aur dial ki takkar rokna */
footer .fw{padding-bottom:clamp(10px,2vh,20px);}
/* 3 · network board — chhoti screens pe chips kabhi overlap na karein */
@media(max-width:900px){
  .board{min-height:560px;}
  .chip{white-space:nowrap;}
}
@media(max-width:520px){
  .board{min-height:500px;}
  .core{width:78px;}
  .chip{min-width:58px; padding:8px 8px;}
  .chip span{font-size:7.4px; letter-spacing:.1em;}
}
/* 4 · dial labels chhoti screens pe wedge se bahar na nikle */
@media(max-width:520px){
  .dial-lbl{width:clamp(66px,20vw,92px);}
  .dial-lbl .tx{font-size:7px; letter-spacing:.12em;}
  .dial-lbl .ico{width:18px; height:18px; margin-bottom:5px;}
  .dial-lbl .ix{font-size:6.6px; margin-bottom:3px;}
}
/* 5 · rail phone pe — wave kabhi text ke upar na aaye */
@media(max-width:900px){
  .steps{overflow:visible;}
  .railwave{z-index:0;}
  .step{background:transparent;}
  .step h3,.step p,.step .k{position:relative; z-index:2;}
}
/* 6 · long words / emails kabhi frame na todein */
.cinfo .v,.field input,.field textarea,footer a{overflow-wrap:anywhere;}
/* 7 · hero ka scroll cue chhoti height pe hide */
@media(max-height:680px){.scrollcue{display:none;}}
/* 8 · tablet portrait — pillars aur cases ko saans do */
@media(min-width:761px) and (max-width:1024px){
  .cases{grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px;}
  .pillar{padding:30px 26px;}
  .steps{gap:18px;}
  .step p{font-size:13px;}
}
/* 9 · bade monitors pe bhi content bandha rahe */
@media(min-width:1700px){
  .wrap{max-width:1360px;}
  h1{font-size:82px;} h2{font-size:52px;}
}

/* ══ FEATURED — curved lit wall ════════════════════════════════ */
#featured .wrap{perspective:none;}
/* perspective SEEDHE grid par — tab hi har card apna 3D context banata hai
   aur z-index/hit-test normal rehta hai. preserve-3d z-index ko marta tha. */
.cases{grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,1.8vw,26px);
  perspective:1500px; perspective-origin:50% 42%;}
/* deewaar ka mod — beech se mirror */
.cases .case:nth-child(1){--ry:6deg;   --tz:-26px; z-index:1;}
.cases .case:nth-child(2){--ry:2.1deg; --tz:-4px;  z-index:2;}
.cases .case:nth-child(3){--ry:-2.1deg;--tz:-4px;  z-index:2;}
.cases .case:nth-child(4){--ry:-6deg;  --tz:-26px; z-index:1;}
.case{will-change:transform; pointer-events:auto;
  transform:rotateY(var(--ry,0deg)) translateZ(var(--tz,0px));
  transition:transform .8s var(--ease), border-color .5s, box-shadow .7s, opacity .95s var(--ease);}
.cases .case.on{transform:rotateY(var(--ry,0deg)) translateZ(var(--tz,0px));}
.case:hover,.case.tilting{z-index:9;}
/* upar se girti volumetric cone */
#featured .cone{position:absolute; left:50%; top:2%; z-index:1; pointer-events:none;
  width:min(760px,86%); height:118%;
  transform:translateX(-50%) scaleY(.4); transform-origin:top center;
  opacity:0; mix-blend-mode:screen; filter:blur(28px);
  background:
    radial-gradient(58% 46% at 50% 0%, rgba(120,180,255,.42), transparent 70%),
    conic-gradient(from 180deg at 50% 0%,
      transparent 0deg, transparent 74deg,
      rgba(96,150,255,.30) 84deg, rgba(140,120,255,.24) 90deg,
      rgba(96,150,255,.30) 96deg,
      transparent 106deg, transparent 360deg);
  transition:transform 1.6s var(--ease), opacity 1.3s ease;}
#featured.lit .cone{transform:translateX(-50%) scaleY(1); opacity:.9;}
/* card ka chhota HUD */
.case .cno{position:absolute; left:clamp(14px,1.5vw,20px); top:clamp(12px,1.3vw,17px); z-index:6;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.16em; color:rgba(210,232,255,.9);
  text-shadow:0 2px 10px rgba(0,0,0,.8);}
.case .carr{position:absolute; right:clamp(12px,1.4vw,18px); top:clamp(10px,1.2vw,15px); z-index:6;
  width:20px; height:20px; transition:transform .55s var(--ease);}
.case .carr svg{width:100%; height:100%; fill:none; stroke:rgba(210,232,255,.9);
  stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.8));}
.case:hover .carr{transform:translate(3px,-3px);}
@media(max-width:1180px){
  .cases{grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(12px,1.6vw,20px);}
  .cases .case:nth-child(1),.cases .case:nth-child(3){--ry:4deg; --tz:-12px;}
  .cases .case:nth-child(2),.cases .case:nth-child(4){--ry:-4deg;--tz:-12px;}
}
@media(max-width:700px){
  .cases{perspective:none;}
  .cases{grid-template-columns:1fr;}
  .cases .case{--ry:0deg; --tz:0px; transform:none !important;}
  #featured .cone{width:120%; filter:blur(34px);}
}
@media(hover:none){.cases .case{transform:none !important;}}

/* ══ PERF — smooth tilt, no transition fight ═══════════════════ */
.case.tilting{transition:border-color .4s, box-shadow .5s !important;}
.case{backface-visibility:hidden;}
.case .ph img{will-change:transform;}
.railwave,.pgrid,.traces,#tunnel{will-change:transform;}
/* mehnge blur sirf wahin jahan zaroori */
#featured .cone{will-change:transform,opacity;}
@media(max-width:900px){
  #featured .cone{filter:blur(22px);}
  /* phone pe blur mehnga hai — kaanch ka roop rehta hai, blur nahi */
  .gwbtn{-webkit-backdrop-filter:none; backdrop-filter:none;
    background:linear-gradient(180deg,rgba(30,50,90,.94),rgba(10,20,42,.96));}
  .gwbtn::after{ animation:none; opacity:0; }
}

/* ══ GATE · locked case studies ═══════════════════════════════════
   Pehla card khula, baaki poore ke poore dhundhle — tasveer, naam,
   tag, number sab. Email dene par chaaron ek saath saaf hote hain. */
.case.lok{cursor:pointer;}
.case.lok > *:not(.lokbadge){filter:blur(13px) saturate(.55) brightness(.72);
  transform:scale(1.03); transition:filter .95s cubic-bezier(.4,0,.2,1),
  transform .95s cubic-bezier(.4,0,.2,1), opacity .7s;}
.case.lok .beam{opacity:0;}
.case.lok:hover{transform:translateY(-3px);}
.case.lok .carr{opacity:0 !important;}
.case.lok::after{content:''; position:absolute; inset:0; z-index:6; pointer-events:none;
  background:radial-gradient(72% 60% at 50% 46%,rgba(6,12,26,.30),rgba(3,6,14,.72));}
.lokbadge{position:absolute; inset:0; z-index:7; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:11px; pointer-events:none;
  opacity:0; transform:translateY(8px); transition:opacity .7s var(--ease),transform .7s var(--ease);}
.case.lok .lokbadge{opacity:1; transform:none;}
.lokbadge i{width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  border:1px solid rgba(150,196,250,.42); background:rgba(9,18,38,.62);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:0 0 26px rgba(79,168,255,.28), inset 0 1px 0 rgba(190,225,255,.24);}
.lokbadge svg{width:16px; height:16px; stroke:rgba(198,226,255,.92); fill:none; stroke-width:1.5;}
.lokbadge b{font-family:var(--f-mono); font-weight:400; font-size:8.2px; letter-spacing:.3em;
  color:rgba(190,222,255,.86); text-shadow:0 2px 10px rgba(0,0,0,.8);}
.case.lok:hover .lokbadge i{border-color:rgba(150,196,250,.75);
  box-shadow:0 0 36px rgba(79,168,255,.5), inset 0 1px 0 rgba(190,225,255,.34);}

/* ── modal ── */
#gate{position:fixed; inset:0; z-index:120; display:none; align-items:center;
  justify-content:center; padding:22px;}
#gate.on{display:flex;}
#gate .gbd{position:absolute; inset:0; background:rgba(2,5,12,.80);
  -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px);
  opacity:0; transition:opacity .45s var(--ease);}
#gate.in .gbd{opacity:1;}
#gate .gbx{position:relative; width:min(100%,452px); border-radius:6px; padding:clamp(28px,4vw,42px);
  background:linear-gradient(168deg,rgba(20,36,68,.94),rgba(6,13,29,.97));
  border:1px solid rgba(140,182,255,.24);
  box-shadow:0 40px 110px rgba(0,4,16,.75), inset 0 1px 0 rgba(178,212,255,.20);
  opacity:0; transform:translateY(20px) scale(.97);
  transition:opacity .5s var(--ease),transform .6s cubic-bezier(.22,1,.32,1);}
#gate.in .gbx{opacity:1; transform:none;}
#gate .gk{font-family:var(--f-mono); font-size:8.4px; letter-spacing:.34em; color:var(--blue);}
#gate h4{margin:14px 0 0; font-family:var(--f-disp); font-weight:600;
  font-size:clamp(19px,2.2vw,26px); line-height:1.25; color:var(--ink); letter-spacing:-.01em;}
#gate p{margin:11px 0 0; font-size:12.5px; line-height:1.7; color:var(--ink-soft);}
#gate .grow{display:flex; gap:9px; margin-top:22px; margin-bottom:0;}
#gate input{flex:1; min-width:0; padding:12px 14px; border-radius:3px;
  background:rgba(4,10,24,.8); border:1px solid rgba(140,182,255,.26);
  color:var(--ink); font-family:var(--f-body); font-size:13px; outline:none;
  transition:border-color .35s, box-shadow .35s;}
#gate input:focus{border-color:rgba(79,168,255,.7); box-shadow:0 0 0 3px rgba(79,168,255,.14);}
#gate input::placeholder{color:rgba(150,180,225,.45);}
#gate button.go{flex:none; padding:12px 20px; border-radius:3px; border:0; cursor:pointer;
  background:linear-gradient(180deg,#4FA8FF,#2C6FD6); color:#04101F;
  font-family:var(--f-mono); font-size:9.4px; letter-spacing:.2em; font-weight:500;
  transition:filter .35s, transform .35s;}
#gate button.go:hover{filter:brightness(1.12); transform:translateY(-1px);}
#gate button.go[disabled]{opacity:.55; cursor:default; transform:none;}
#gate .gerr{margin-top:10px; font-size:11px; color:#FF8F9E; min-height:14px;
  opacity:0; transition:opacity .3s;}
#gate .gerr.on{opacity:1;}
#gate .gfine{margin-top:16px; font-size:10px; line-height:1.6; color:rgba(150,180,225,.55);}
#gate .gx{position:absolute; top:12px; right:12px; width:28px; height:28px; padding:0;
  border:0; background:transparent; color:rgba(160,195,240,.6); cursor:pointer; font-size:17px;
  transition:color .3s;}
#gate .gx:hover{color:var(--ink);}

/* ── admin badge (sirf unlock owner ko) ── */
#adm{position:fixed; left:14px; bottom:14px; z-index:110; display:none;
  align-items:center; gap:8px; padding:7px 11px; border-radius:3px;
  background:rgba(8,16,34,.86); border:1px solid rgba(140,182,255,.26);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  font-family:var(--f-mono); font-size:8px; letter-spacing:.2em; color:rgba(180,212,255,.8);}
#adm.on{display:flex;}
#adm button{padding:0; border:0; background:transparent; cursor:pointer;
  font:inherit; color:var(--blue); letter-spacing:.2em; transition:color .3s;}
#adm button:hover{color:var(--ink);}
#adm s{opacity:.34; text-decoration:none;}
@media(max-width:560px){
  #gate .grow{flex-direction:column;}
  #gate button.go{width:100%;}
  .lokbadge i{width:38px;height:38px;} .lokbadge svg{width:14px;height:14px;}
}

/* ── admin: leads panel (sirf owner ko) ── */
#lp{position:fixed; inset:0; z-index:130; display:none; align-items:center;
  justify-content:center; padding:20px;}
#lp.on{display:flex;}
#lp .lbd{position:absolute; inset:0; background:rgba(2,5,12,.82);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);}
#lp .lbx{position:relative; width:min(100%,760px); max-height:82vh; overflow:auto;
  border-radius:6px; padding:26px;
  background:linear-gradient(168deg,rgba(20,36,68,.96),rgba(6,13,29,.98));
  border:1px solid rgba(140,182,255,.24); box-shadow:0 40px 110px rgba(0,4,16,.75);}
#lp h5{margin:0; font-family:var(--f-disp); font-weight:600; font-size:17px; color:var(--ink);}
#lp .lsub{margin-top:6px; font-family:var(--f-mono); font-size:9px; letter-spacing:.2em;
  color:rgba(150,190,240,.6);}
#lp table{width:100%; border-collapse:collapse; margin-top:18px; font-size:11.5px;}
#lp th{text-align:left; font-family:var(--f-mono); font-size:8.4px; letter-spacing:.2em;
  color:var(--blue); padding:8px 10px; border-bottom:1px solid rgba(140,182,255,.22);
  position:sticky; top:0; background:#0A1730;}
#lp td{padding:9px 10px; color:var(--ink-soft); border-bottom:1px solid rgba(140,182,255,.08);
  word-break:break-word;}
#lp tr:hover td{background:rgba(79,168,255,.06);}
#lp .lact{display:flex; gap:9px; margin-top:18px; flex-wrap:wrap;}
#lp .lact button{padding:9px 15px; border-radius:3px; cursor:pointer;
  font-family:var(--f-mono); font-size:9px; letter-spacing:.18em;
  border:1px solid rgba(140,182,255,.3); background:rgba(8,18,38,.8); color:var(--ink-soft);
  transition:border-color .3s,color .3s,background .3s;}
#lp .lact button:hover{border-color:var(--blue); color:var(--ink); background:rgba(79,168,255,.12);}
#lp .lact button.dz{border-color:rgba(255,120,140,.3); color:#FF9AA8;}
#lp .lact button.dz:hover{border-color:#FF7A8C; background:rgba(255,120,140,.12);}
#lp .lempty{margin-top:22px; padding:26px; text-align:center; border-radius:4px;
  border:1px dashed rgba(140,182,255,.22); color:rgba(150,190,240,.6); font-size:12px;}


/* ══ PHONE PERFORMANCE ═════════════════════════════════════════════ */
@media(max-width:900px),(hover:none){
  *{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
  #cur,#curR{ display:none !important; }
  #grain,#scan{ display:none !important; }
  .case:hover{ transform:none !important; }
  .awcard,.case{ box-shadow:0 10px 26px rgba(0,4,14,.4) !important; }
  #gw::after,.gwbtn::after{ display:none !important; }

  /* ── har frame REPAINT karane wali cheezein — phone pe static ──
     Dikhne me farak na ke barabar, par smoothness me zameen-aasman.  */
  /* blur(8px) + 5s infinite glow: blur har frame dobara banta tha */
  .gwbtn::before{ animation:none !important; filter:none !important; opacity:.34 !important; }
  /* conic-gradient + mask-composite ka ghoomta border (case pages pe 5x) */
  .dcar .edge{ animation:none !important; opacity:.34 !important; }
  /* silicon die ki saans — gradient pseudo pe opacity loop */
  .core .cn::after{ animation:none !important; opacity:.58 !important; }
}

/* ══ CASE PAGE · department carousels ══════════════════════════════
   Left me images ka carousel, right me us department ka content.
   Gaming vibe: scanline glitch, circuit trace, HUD counter.        */
.cs-head{max-width:820px;}
.cs-head .lede{margin-top:18px; font-size:clamp(14px,1.25vw,17px); line-height:1.8; color:var(--ink-soft);}
.dept{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(28px,4.4vw,70px); align-items:center;
  padding:clamp(46px,7vh,90px) 0; border-top:1px solid var(--line);}
.dept:first-of-type{border-top:0;}
@media(max-width:900px){ .dept{grid-template-columns:1fr; gap:26px; padding:34px 0;} }

/* ── carousel ── */
.dcar{position:relative; aspect-ratio:16/10; border-radius:6px; overflow:hidden;
  background:#050A16; touch-action:pan-y; cursor:grab;
  box-shadow:0 26px 64px rgba(0,4,16,.55), 0 0 0 1px rgba(140,182,255,.18) inset;}
.dcar.grab{cursor:grabbing;}
.dcar .sl{position:absolute; inset:0; opacity:0; transform:scale(1.06);
  transition:opacity .7s cubic-bezier(.4,0,.2,1), transform 1.4s cubic-bezier(.22,1,.32,1);}
.dcar .sl.on{opacity:1; transform:scale(1);}
.dcar .sl img{width:100%; height:100%; object-fit:cover; display:block;}
.dcar .sl::after{content:''; position:absolute; inset:0;
  background:linear-gradient(to top,rgba(3,6,14,.72) 2%,transparent 46%);}
/* power-on scan */
.dcar::before{content:''; position:absolute; left:0; right:0; height:2px; top:0; z-index:4;
  background:linear-gradient(90deg,transparent,var(--blue-hi,#93D2FF),transparent);
  box-shadow:0 0 18px 3px rgba(79,168,255,.6); opacity:0;}
.dcar.flip::before{animation:dscan .7s cubic-bezier(.5,0,.3,1);}
@keyframes dscan{0%{transform:translate3d(0,0,0);opacity:0}12%{opacity:1}
  88%{opacity:1}100%{transform:translate3d(0,var(--ch,320px),0);opacity:0}}
/* kinare pe daudti circuit trace */
.dcar .edge{position:absolute; inset:0; z-index:5; pointer-events:none; border-radius:6px;
  background:conic-gradient(from var(--eang,0deg),transparent 0deg,
    rgba(79,168,255,0) 6deg,rgba(147,210,255,.95) 16deg,rgba(79,168,255,0) 30deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; padding:1.4px;
  animation:espin 5.5s linear infinite; opacity:.75;}
@property --eang{syntax:'<angle>'; initial-value:0deg; inherits:false;}
@keyframes espin{to{--eang:360deg;}}
/* HUD */
.dcar .hud{position:absolute; left:14px; bottom:12px; z-index:6;
  font-family:var(--f-mono); font-size:9px; letter-spacing:.24em; color:rgba(198,226,255,.9);
  text-shadow:0 1px 6px rgba(0,4,16,.9);}
.dcar .hud b{color:var(--blue-hi,#93D2FF); font-weight:500;}
.dcar .bars{position:absolute; right:14px; bottom:14px; z-index:6; display:flex; gap:5px;}
.dcar .bars i{width:16px; height:2px; background:rgba(198,226,255,.26); cursor:pointer;
  transition:width .4s cubic-bezier(.22,1,.32,1),background .4s;}
.dcar .bars i.on{width:30px; background:var(--blue-hi,#93D2FF);
  box-shadow:0 0 10px rgba(79,168,255,.8);}

/* ── right content ── */
.dtx .k{font-family:var(--f-mono); font-size:8.6px; letter-spacing:.34em; color:var(--blue);}
.dtx h3{margin:14px 0 0; font-family:var(--f-disp); font-weight:600;
  font-size:clamp(21px,2.5vw,32px); line-height:1.2; color:var(--ink); letter-spacing:-.01em;}
.dtx .rl{width:44px; height:1px; margin:16px 0 0; background:rgba(79,168,255,.6);}
.dtx p{margin:16px 0 0; font-size:clamp(12.5px,1.05vw,14.5px); line-height:1.85;
  color:var(--ink-soft); max-width:46ch;}
.dtx .mt{display:flex; gap:22px; flex-wrap:wrap; margin-top:22px;}
.dtx .mt div{font-family:var(--f-mono); font-size:8.6px; letter-spacing:.2em;
  color:rgba(150,190,240,.7);}
.dtx .mt b{display:block; margin-top:6px; font-family:var(--f-disp); font-weight:600;
  font-size:16px; letter-spacing:0; color:var(--ink);}
@media(max-width:900px){ .dtx p{max-width:none;} }

/* ══ MOMENTS — bina ruke chalti patti (EWE ke couple page jaisi) ═══ */
.mom{padding:clamp(50px,8vh,96px) 0 clamp(56px,9vh,110px); border-top:1px solid var(--line);}
.mom .lab{font-family:var(--f-mono); font-size:8.6px; letter-spacing:.34em;
  color:var(--blue); text-align:center;}
.momstrip{margin-top:clamp(26px,3.6vh,40px); overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);}
.momlane{display:flex; gap:clamp(12px,1.4vw,20px); width:max-content;
  animation:momRoll 54s linear infinite; will-change:transform;}
.momstrip:hover .momlane{animation-play-state:paused;}
@keyframes momRoll{from{transform:translate3d(0,0,0);} to{transform:translate3d(-50%,0,0);}}
.momlane figure{position:relative; margin:0; flex:none;
  width:clamp(190px,22vw,320px); aspect-ratio:4/3; border-radius:5px; overflow:hidden;
  background:#050A16; box-shadow:0 16px 40px rgba(0,4,16,.45), 0 0 0 1px rgba(140,182,255,.16) inset;
  transition:transform .6s cubic-bezier(.22,1,.32,1), box-shadow .5s;}
.momlane figure img{width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.94); transition:filter .6s, transform 1.2s cubic-bezier(.22,1,.32,1);}
.momlane figure::after{content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(3,6,14,.55));}
.momlane figure:hover{transform:translateY(-6px);
  box-shadow:0 26px 60px rgba(0,4,16,.6), 0 0 0 1px rgba(79,168,255,.5) inset;}
.momlane figure:hover img{filter:saturate(1.06); transform:scale(1.05);}
@media(max-width:760px){ .momlane{animation-duration:38s;} .momlane figure{width:min(58vw,240px);} }

/* ── carousel: smoother crossfade + prev/next controls ───────────── */
.dcar .sl{ transition:opacity .82s cubic-bezier(.22,1,.36,1),transform 1.5s cubic-bezier(.22,1,.36,1); will-change:opacity,transform; }
.dcar .sl img{ backface-visibility:hidden; transform:translateZ(0); }
.dcar .bars i{ transition:width .5s cubic-bezier(.22,1,.36,1),background .5s; }
.dcar .dnav{ position:absolute; top:50%; z-index:7; width:38px; height:38px; margin-top:-19px;
  display:flex; align-items:center; justify-content:center; padding:0; cursor:pointer;
  border:1px solid rgba(198,226,255,.24); border-radius:50%;
  background:rgba(8,16,28,.42); -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
  color:#C6E2FF; opacity:0; transform:translateX(0) scale(.9);
  transition:opacity .45s cubic-bezier(.22,1,.36,1),transform .45s cubic-bezier(.22,1,.36,1),
             background .35s,border-color .35s; }
.dcar .dnav svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round; }
.dcar .dnav.p{ left:12px; } .dcar .dnav.n{ right:12px; }
.dcar:hover .dnav,.dcar:focus-within .dnav{ opacity:1; transform:translateX(0) scale(1); }
.dcar .dnav:hover{ background:rgba(18,40,66,.72); border-color:rgba(147,210,255,.6); }
.dcar .dnav:active{ transform:scale(.93); }
.dcar .dnav:focus-visible{ outline:1px solid var(--blue-hi,#93D2FF); outline-offset:2px; }
@media (hover:none){ .dcar .dnav{ opacity:1; transform:none; width:34px; height:34px; margin-top:-17px;
  -webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(8,16,28,.55); } }

/* ── launch perf pass · mobile smoothness ─────────────────────────── */
@media (max-width:900px),(hover:none){
  *{ -webkit-tap-highlight-color:transparent; }
  .dcar .sl{ transition:opacity .6s cubic-bezier(.22,1,.36,1); transform:none !important; }
  .dcar::before{ animation:none !important; }
  .beam,.case .beam{ display:none; }
  [style*="backdrop-filter"],.glass,.pill{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
}
.dept,.case,.sc,.momstrip figure{ contain:layout paint; }
.momlane{ will-change:transform; transform:translateZ(0); backface-visibility:hidden; }
@media (prefers-reduced-motion:reduce){
  .momlane{ animation:none !important; }
  .dcar .sl{ transition:none !important; }
}

/* ── OUR CLIENTELE — vertical marquee columns ─────────────────── */
#clients{ padding:clamp(38px,5.5vh,80px) 0 clamp(48px,7vh,92px); }
.clogos{ --g:clamp(10px,1.3vw,20px);
  display:grid; grid-template-columns:repeat(6,1fr); gap:var(--g);
  margin-top:clamp(24px,3.6vh,42px); }
.ccol{ position:relative; overflow:hidden; height:clamp(255px,26vw,340px);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 11%,#000 89%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 11%,#000 89%,transparent 100%); }
.ctrack{ display:block; will-change:transform;
  animation:cup var(--d,22s) linear infinite; }
.ccol:nth-child(even) .ctrack{ animation-name:cdown; }
@keyframes cup{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(0,-50%,0); } }
@keyframes cdown{ from{ transform:translate3d(0,-50%,0); } to{ transform:translate3d(0,0,0); } }
.clogos:hover .ctrack{ animation-play-state:paused; }
.clogo{ display:flex; align-items:center; justify-content:center;
  height:clamp(66px,7vw,92px); margin-bottom:var(--g);
  padding:clamp(10px,1.4vw,18px) clamp(9px,1.2vw,16px);
  border:1px solid rgba(255,255,255,.16); border-radius:8px;
  background:linear-gradient(158deg,#FCFCFA 0%,#F2F2EE 58%,#E9E9E4 100%);
  box-shadow:0 12px 32px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.9);
  transition:box-shadow .5s var(--ease),border-color .45s var(--ease);
  contain:layout paint; }
.clogo img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;
  display:block; transition:transform .5s var(--ease); }
.clogo:hover{ border-color:rgba(147,210,255,.55);
  box-shadow:0 18px 44px rgba(0,0,0,.45),0 0 0 1px rgba(147,210,255,.25),inset 0 1px 0 rgba(255,255,255,.95); }
.clogo:hover img{ transform:scale(1.05); }
@media (max-width:1000px){ .clogos{ grid-template-columns:repeat(3,1fr); }
  .ccol{ height:clamp(230px,42vw,300px); } }
@media (max-width:600px){ .clogos{ grid-template-columns:repeat(2,1fr); }
  .ccol{ height:clamp(210px,58vw,270px); } }
@media (prefers-reduced-motion:reduce){ .ctrack{ animation:none; } }

/* ══ BRAND LOGO LOCKUP ══════════════════════════════════════════ */
#brand{align-items:center; gap:11px;}
#brand .blogo{height:clamp(21px,2.35vw,30px); width:auto; display:block;
  filter:drop-shadow(0 0 16px rgba(201,171,119,.20));
  transition:filter .55s cubic-bezier(.2,.7,.2,1), transform .55s cubic-bezier(.2,.7,.2,1);}
#brand:hover .blogo{filter:drop-shadow(0 0 22px rgba(201,171,119,.46)); transform:translateY(-1px);}
#brand .bs{font-family:var(--f-mono); font-size:8px; letter-spacing:.26em; line-height:1.15;
  color:#C9AB77; opacity:.66; white-space:nowrap; text-transform:uppercase;
  padding-left:11px; border-left:1px solid rgba(201,171,119,.26);
  transition:opacity .5s;}
#brand:hover .bs{opacity:.92;}
@media(max-width:620px){#brand .bs{display:none;}}
@media(max-width:900px){#brand .blogo{height:24px;}}

/* ══ CLIENTELE · PHONE ═ horizontal ticker wall ═════════════════ */
@media (max-width:600px){
  #clients{ padding:clamp(30px,4.4vh,54px) 0 clamp(34px,5vh,62px); }
  #clients .sec-head h2{ font-size:clamp(21px,6.3vw,27px); line-height:1.2; letter-spacing:-.01em; }
  .clogos{ display:flex; flex-direction:column; gap:5px;
    margin-top:clamp(14px,2.2vh,20px);
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%); }
  .ccol{ height:auto; overflow:hidden;
    -webkit-mask-image:none; mask-image:none; }
  .ctrack{ display:flex; width:max-content; animation-name:cleft; }
  .ccol:nth-child(even) .ctrack{ animation-name:cright; }
  .clogo{ flex:0 0 auto; width:106px; height:36px; margin:0 5px 0 0;
    padding:5px 8px; border-radius:5px;
    border-color:rgba(255,255,255,.11);
    background:linear-gradient(158deg,#FDFDFC 0%,#F4F4F1 60%,#EAEAE6 100%);
    box-shadow:0 4px 12px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.92); }
}
@media (max-width:380px){
  .clogo{ width:96px; height:33px; margin-right:5px; padding:4px 7px; }
  .clogos{ gap:4px; }
}
@keyframes cleft{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }
@keyframes cright{ from{ transform:translate3d(-50%,0,0); } to{ transform:translate3d(0,0,0); } }
@media (hover:none){ .clogos:hover .ctrack{ animation-play-state:running; } }

/* ══ NETWORK CHIPS · category labels (multi-line safe) ══════════ */
.chip{ display:flex; align-items:center; justify-content:center;
  width:clamp(120px,12.8vw,160px); min-width:0;
  min-height:clamp(48px,4.8vw,58px); padding:10px 12px;
  white-space:normal !important; }
.chip span{ display:block; width:100%; line-height:1.55;
  font-family:var(--f-mono); font-size:clamp(8.2px,.8vw,9.6px);
  letter-spacing:.16em; text-transform:uppercase; word-break:normal;
  hyphens:none; }
@media(max-width:900px){
  .chip{ width:clamp(104px,29vw,134px); min-height:46px; padding:9px 10px;
    white-space:normal !important; }
  .chip span{ font-size:8px; letter-spacing:.11em; line-height:1.5; }
}
@media(max-width:520px){
  .chip{ width:clamp(94px,30vw,116px); min-height:42px; padding:8px 8px; }
  .chip span{ font-size:7.2px; letter-spacing:.08em; line-height:1.48; }
  .board{ min-height:400px; }
}
@media(max-width:400px){ .board{ min-height:380px; } }
@media(max-width:900px) and (min-width:521px){ .board{ min-height:440px; } }

/* ══ HERO · arena backdrop (full-bleed, no blur, no dimming) ════ */
.hero{ isolation:isolate; }
.heroshot{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.heroshot img{ width:100%; height:100%; display:block; opacity:1;
  object-fit:cover; object-position:center 46%; }
.hero > .wrap, .hero .scrollcue{ position:relative; z-index:2; }
.hero .eyebrow, .hero .lede{
  text-shadow:0 0 3px rgba(2,5,12,.92), 0 2px 14px rgba(2,5,12,.94), 0 2px 34px rgba(2,5,12,.9); }
.hero h1{ text-shadow:none;
  filter:drop-shadow(0 0 2px rgba(2,5,12,.96)) drop-shadow(0 0 9px rgba(2,5,12,.92))
         drop-shadow(0 2px 28px rgba(2,5,12,.9)); }
.hero h1 .gl{ background:linear-gradient(96deg,#FFFFFF 2%,#E4F0FF 40%,#CFC2FF 96%);
  -webkit-background-clip:text; background-clip:text; filter:none; }
.hero .cta-row .btn{ backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  background:rgba(6,11,24,.34); }
@media(max-width:760px){ .heroshot img{ object-position:center 44%; } }

/* ══ DISCLAIMER ════════════════════════════════════════════════ */
.disc{ padding:clamp(10px,2vh,20px) 0 clamp(28px,4.5vh,50px); }
.discx{ border-top:1px solid rgba(255,255,255,.10); padding-top:clamp(18px,2.4vh,24px); }
.discx summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:12px;
  font-size:9.4px; letter-spacing:.30em; text-transform:uppercase; font-weight:500;
  color:rgba(255,255,255,.46); transition:color .45s ease; -webkit-tap-highlight-color:transparent; }
.discx summary::-webkit-details-marker{ display:none; }
.discx summary::marker{ content:''; }
.discx summary:hover{ color:rgba(255,255,255,.86); }
.discx .dc{ width:8px; height:8px; flex:0 0 auto; margin-left:2px;
  border-right:1px solid currentColor; border-bottom:1px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px); transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.discx[open] .dc{ transform:rotate(-135deg) translate(-2px,-2px); }
.discx .dbody{ max-width:80ch; margin-top:clamp(16px,2.2vh,22px);
  animation:discIn .7s cubic-bezier(.2,.7,.2,1); }
@keyframes discIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.discx h4{ margin:22px 0 9px; font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  font-weight:500; color:rgba(255,255,255,.74); }
.discx h4:first-child{ margin-top:0; }
.discx p{ margin:0 0 11px; font-size:12.5px; line-height:1.9; letter-spacing:.005em;
  color:rgba(255,255,255,.44); }
.discx p strong{ color:rgba(255,255,255,.66); font-weight:500; }
.discx a{ color:rgba(255,255,255,.62); text-decoration:none; border-bottom:1px solid rgba(255,255,255,.22); }
.discx a:hover{ color:#fff; border-color:rgba(255,255,255,.6); }
.discx .dend{ margin-top:20px; padding-top:14px; border-top:1px solid rgba(255,255,255,.07);
  font-size:9.4px; letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.3); }
@media(max-width:600px){ .discx p{ font-size:12px; line-height:1.82; } .discx .dbody{ max-width:none; } }

/* ══ CONTACT FORM · validation + send states ════════════════════ */
.field.err input,.field.err textarea{ color:#FFD2D2; }
.field.err label{ color:rgba(255,158,158,.9); }
.field.err .ul{ transform:none; background:rgba(255,120,120,.8); }
.btn.busy{ opacity:.55; pointer-events:none; }
.btn.busy span{ opacity:.8; }
#ferr{ margin-top:16px; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.1em;
  line-height:1.8; color:rgba(255,158,158,.92); opacity:0; transform:translateY(6px);
  pointer-events:none; transition:opacity .5s var(--ease), transform .5s var(--ease); }
#ferr.on{ opacity:1; transform:none; pointer-events:auto; }
#ferr a{ color:inherit; border-bottom:1px solid rgba(255,158,158,.45); text-decoration:none; }
#ferr a:hover{ color:#fff; border-color:rgba(255,255,255,.6); }

/* ══ A11Y · skip link + keyboard focus ═════════════════════════ */
.skiplink{position:absolute;left:-9999px;top:0;z-index:99999;padding:12px 18px;
  background:#060B18;color:#93D2FF;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;border:1px solid rgba(147,210,255,.6);border-radius:3px;}
.skiplink:focus{left:12px;top:12px;}
:focus-visible{outline:2px solid rgba(147,210,255,.9);outline-offset:3px;}

/* picture wrapper must not create a layout box */
picture{display:contents;}

/* ══ NETWORK BOARD · phone breathing room ═══════════════════════ */
@media(max-width:600px){
  .board{ min-height:470px; }
  .core{ width:64px !important; border-radius:11px; }
  .core .cn{ font-size:14px; letter-spacing:.1em; }
  .core::after{ left:-10px; right:-10px; }
  .chip{ width:clamp(84px,25.5vw,102px); min-height:40px; padding:7px 6px; }
  .chip span{ font-size:6.9px; letter-spacing:.06em; line-height:1.45; }
}
@media(max-width:380px){
  .board{ min-height:440px; }
  .chip{ width:clamp(78px,25vw,92px); min-height:37px; }
  .chip span{ font-size:6.5px; }
  .core{ width:58px !important; }
}