*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
.hr-pk,.hr-eqb,.hc1-b,.hc3-bar,.orb-ring,.mq-t{will-change:transform;transform:translateZ(0);}

:root {
  --bg:#F9F7F3;
  --bg2:#F2EFE9;
  --bg3:#EBE7E0;

  --card:#FFFFFF;
  --card2:#F7F5F0;

  --ink:#1A1620;
  --ink70:rgba(26,22,32,.72);
  --ink55:rgba(26,22,32,.58);
  --ink35:rgba(26,22,32,.38);
  --ink22:rgba(26,22,32,.22);
  --ink10:rgba(26,22,32,.10);
  --ink06:rgba(26,22,32,.06);

  --v:#7C3AED;
  --v2:#6D28D9;
  --b:#0284C7;
  --gold:#B45309;
  --green:#15803D;

  --vl:rgba(124,58,237,.08);
  --vb:rgba(124,58,237,.22);

  --brd:rgba(26,22,32,.10);
  --brd2:rgba(26,22,32,.18);

  --fd:'Playfair Display',serif;
  --fs:'Syne',sans-serif;
  --fm:'DM Mono',monospace;
}

html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;}

body{font-family:var(--fs);background:var(--bg);color:var(--ink);overflow-x:hidden;cursor:none;animation:pgIn .4s ease both;}

::-webkit-scrollbar{width:4px;}

::-webkit-scrollbar-track{background:var(--bg);}

::-webkit-scrollbar-thumb{background:linear-gradient(var(--v),var(--b));border-radius:10px;}

@keyframes pgIn{from{opacity:0}to{opacity:1}}

/* CURSOR */

.c-dot{position:fixed;width:9px;height:9px;border-radius:50%;background:var(--v);transform:translate(-50%,-50%);pointer-events:none;z-index:99999;transition:width .2s,height .2s,background .2s;box-shadow:0 0 18px rgba(139,92,246,.7);}

.c-ring{position:fixed;width:34px;height:34px;border-radius:50%;border:1.5px solid rgba(185,163,255,.36);transform:translate(-50%,-50%);pointer-events:none;z-index:99998;transition:opacity .2s,width .2s,height .2s;}

body.hov .c-dot{width:44px;height:44px;background:rgba(139,92,246,.12);box-shadow:none;}

body.hov .c-ring{opacity:0;}

@media(pointer:coarse){body{cursor:auto;}.c-dot,.c-ring{display:none;}}

/* NAV */

#nav{position:fixed;top:0;left:0;right:0;z-index:9000;height:66px;display:flex;align-items:center;padding:0 3rem;background:rgba(249,247,243,.88);backdrop-filter:blur(22px);border-bottom:1px solid var(--brd);transition:box-shadow .3s;overflow:hidden;}
#nav::after{content:'';position:absolute;inset:0;z-index:0;background:linear-gradient(105deg,transparent 20%,rgba(185,163,255,.06) 38%,rgba(56,189,248,.04) 52%,transparent 68%);transform:translateX(-100%);animation:navShimmer 6s ease-in-out infinite;pointer-events:none;}
#nav > *{position:relative;z-index:1;}
@keyframes navShimmer{0%,40%{transform:translateX(-100%);}65%,100%{transform:translateX(100%);}}

#nav.sd{box-shadow:0 12px 45px rgba(0,0,0,.3);}

.nlogo{display:flex;align-items:center;gap:11px;text-decoration:none;flex-shrink:0;}

.nlogo-m{
  width:42px;
  height:42px;
  border-radius:14px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 25% 20%,rgba(255,255,255,.35),transparent 28%),
    linear-gradient(135deg,#17172b,#07070D 55%,#111827);
  border:1px solid rgba(185,163,255,.36);
  box-shadow:
    0 0 28px rgba(139,92,246,.36),
    inset 0 1px 0 rgba(255,255,255,.18);
  display:block;
}

.nlogo-m::before{
  content:'';
  position:absolute;
  inset:-40%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.22),transparent);
  transform:rotate(25deg);
  animation:logoShine 4s ease-in-out infinite;
}

.logo-i{
  position:absolute;
  top:12px;
  bottom:10px;
  width:4px;
  border-radius:999px;
  background:linear-gradient(180deg,#fff,var(--v2),var(--b));
  box-shadow:0 0 12px rgba(139,92,246,.8);
}

.logo-i.left{left:11px;}
.logo-i.right{right:11px;}

.logo-s{
  position:absolute;
  left:14px;
  top:12px;
  width:14px;
  height:18px;
  border-radius:999px;
  border-top:4px solid var(--v2);
  border-bottom:4px solid var(--b);
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  transform:rotate(-18deg);
  filter:drop-shadow(0 0 8px rgba(56,189,248,.7));
}

.logo-t{
  position:absolute;
  left:10px;
  right:10px;
  top:8px;
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--v2),#fff,var(--b));
  box-shadow:0 0 14px rgba(185,163,255,.7);
}

@keyframes logoShine{
  0%,45%{transform:translateX(-120%) rotate(25deg);opacity:0;}
  60%{opacity:1;}
  100%{transform:translateX(120%) rotate(25deg);opacity:0;}
}

.nlogo-t{font-size:18px;font-weight:800;color:var(--ink);letter-spacing:-.5px;}

.nlogo-t em{color:var(--v2);font-style:normal;}

.nc{flex:1;display:flex;justify-content:center;gap:2px;}

.nl{font-family:var(--fm);font-size:10px;letter-spacing:2px;color:var(--ink35);text-decoration:none;text-transform:uppercase;padding:9px 15px;border-radius:999px;transition:color .2s,background .2s;}

.nl{position:relative;}
.nl::after{content:'';position:absolute;bottom:4px;left:12px;right:12px;height:1.5px;background:linear-gradient(90deg,var(--v2),var(--b));border-radius:999px;transform:scaleX(0);transform-origin:left;transition:transform .25s ease;}
.nl:hover{color:var(--ink);background:var(--ink06);}
.nl:hover::after{transform:scaleX(1);}

.n-pill{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;border:1px solid var(--vb);background:var(--vl);}

.n-dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:pdot 2s infinite;}

@keyframes pdot{
  0%{box-shadow:0 0 0 0 rgba(34,197,94,.6),0 0 0 0 rgba(34,197,94,.3);}
  50%{box-shadow:0 0 0 5px rgba(34,197,94,0),0 0 0 9px rgba(34,197,94,0);}
  100%{box-shadow:0 0 0 0 rgba(34,197,94,.6),0 0 0 0 rgba(34,197,94,.3);}
}

.n-dtxt{font-family:var(--fm);font-size:8px;letter-spacing:2px;color:var(--v2);text-transform:uppercase;}

.n-cta{display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border-radius:999px;background:linear-gradient(135deg,#fff,var(--v2));color:#090914;font-size:12px;font-weight:800;text-decoration:none;border:none;cursor:none;margin-left:10px;transition:transform .15s,box-shadow .2s;}

.n-cta:hover{transform:translateY(-1px);box-shadow:0 10px 28px rgba(139,92,246,.35);}

.n-ham{display:none;background:none;border:none;cursor:none;padding:6px;flex-direction:column;gap:5px;}

.n-ham span{display:block;width:21px;height:1.5px;background:var(--ink);border-radius:1px;transition:.25s;}

.n-ham.op span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}

.n-ham.op span:nth-child(2){opacity:0;}

.n-ham.op span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

.mnav{position:fixed;inset:0;z-index:8500;background:rgba(7,7,13,.98);display:flex;flex-direction:column;justify-content:center;padding:5rem 2.5rem;opacity:0;pointer-events:none;transition:opacity .3s;}

.mnav.op{opacity:1;pointer-events:all;}

.mnav.op .mna{animation:mnaSlide .4s cubic-bezier(.16,1,.3,1) both;}
.mnav.op .mna:nth-child(1){animation-delay:.05s;}
.mnav.op .mna:nth-child(2){animation-delay:.10s;}
.mnav.op .mna:nth-child(3){animation-delay:.15s;}
.mnav.op .mna:nth-child(4){animation-delay:.20s;}
.mnav.op .mna:nth-child(5){animation-delay:.25s;}
.mnav.op .mna:nth-child(6){animation-delay:.30s;}
.mnav.op .mna:nth-child(7){animation-delay:.35s;}
.mnav.op .mna:nth-child(8){animation-delay:.40s;}
@keyframes mnaSlide{from{opacity:0;transform:translateX(-18px);}to{opacity:1;transform:none;}}

.mna:hover{padding-left:.5rem;}

.mna-n{font-family:var(--fm);font-size:9px;color:var(--ink35);letter-spacing:2px;}

.mna-l{font-family:var(--fd);font-size:clamp(30px,8vw,54px);font-style:italic;color:var(--ink);}

.mna:hover .mna-l{color:var(--v2);}

.mna-cta{margin-top:2rem;display:inline-flex;align-items:center;gap:8px;padding:14px 24px;background:var(--ink);color:#090914;font-weight:800;border-radius:999px;text-decoration:none;font-size:13px;}

/* HERO */

.hero{min-height:100vh;display:grid;grid-template-columns:54fr 46fr;padding-top:66px;position:relative;overflow:hidden;background:var(--bg);isolation:isolate;}



.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 65% 60% at 18% 25%,rgba(124,58,237,.10),transparent 62%),radial-gradient(ellipse 50% 50% at 88% 40%,rgba(2,132,199,.07),transparent 64%),linear-gradient(180deg,var(--bg),var(--bg2));pointer-events:none;z-index:0;}

.hero-dots{position:absolute;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:80px 80px;mask-image:radial-gradient(ellipse 70% 80% at 30% 50%,black,transparent);}

.h-left{padding:5rem 4rem 4rem 5.5rem;display:flex;flex-direction:column;justify-content:center;gap:2rem;position:relative;z-index:3;}

@keyframes fU{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

@keyframes sU{to{opacity:1;transform:translateY(0)}}

.ey{display:inline-flex;align-items:center;gap:10px;font-family:var(--fm);font-size:9px;letter-spacing:3.5px;color:var(--ink35);text-transform:uppercase;opacity:0;animation:fU .6s ease .1s forwards;}

.ey-ln{width:20px;height:1.5px;background:var(--v2);}

.ey-p{padding:3px 9px;border:1px solid var(--vb);border-radius:999px;background:var(--vl);color:var(--v2);font-size:8px;letter-spacing:2px;}

.h-head{font-family:var(--fd);font-size:clamp(3.6rem,6vw,8rem);font-weight:800;line-height:1.02 !important;letter-spacing:-1px;display:flex;flex-direction:column;gap:.09em;}

.h-row{
  overflow:visible !important;
  padding-bottom:.22em !important;
  margin-bottom:-.10em !important;
}
.h-word{
  display:inline-block;
  opacity:0;
  transform:translateY(110%);
  padding-bottom:.08em;
}

.h-row:nth-child(1) .h-word{animation:sU .9s cubic-bezier(.16,1,.3,1) .05s forwards;}

.h-row:nth-child(2) .h-word{animation:sU .9s cubic-bezier(.16,1,.3,1) .18s forwards;}

.h-row:nth-child(3) .h-word{animation:sU .9s cubic-bezier(.16,1,.3,1) .30s forwards;}

.tw-vi{color:transparent;background:linear-gradient(110deg,#fff 0%,var(--v2) 40%,var(--b) 70%,#fff 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;animation:tShine 5s ease-in-out infinite;}

@keyframes tShine{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

.tw-it{font-style:italic;}

.tw-gh{color:transparent;-webkit-text-stroke:1.6px rgba(255,255,255,.18);}

.h-sub{font-size:15px;line-height:1.9;color:var(--ink70);max-width:490px;padding-left:1.2rem;border-left:3px solid var(--vb);opacity:0;animation:fU .7s ease .7s forwards;}

.h-btns{display:flex;align-items:center;gap:10px;flex-wrap:wrap;opacity:0;animation:fU .7s ease .86s forwards;}

.bp{display:inline-flex;align-items:center;gap:8px;padding:15px 30px;border-radius:999px;background:linear-gradient(135deg,#fff,var(--v2),var(--b));color:#090914;font-size:13px;font-weight:800;border:none;cursor:none;transition:transform .15s,box-shadow .2s;}

.bp:hover{transform:translateY(-2px);box-shadow:0 18px 45px rgba(139,92,246,.35);}

.bo{display:inline-flex;align-items:center;gap:8px;padding:14px 24px;border-radius:999px;background:rgba(255,255,255,.04);color:var(--ink70);font-size:13px;font-weight:700;border:1px solid var(--brd2);cursor:none;transition:all .22s;}

.bo:hover{border-color:var(--v);color:var(--v2);background:var(--vl);}

.h-trust{display:flex;align-items:center;gap:14px;opacity:0;animation:fU .7s ease 1s forwards;}

.t-avs{display:flex;}

.t-av{width:31px;height:31px;border-radius:50%;border:2px solid var(--bg);margin-left:-8px;background:var(--card2);display:flex;align-items:center;justify-content:center;font-family:var(--fm);font-size:8px;color:var(--v2);}

.t-av:first-child{margin-left:0;}

.t-txt{font-size:12px;color:var(--ink35);}

.t-txt strong{color:var(--ink);font-weight:800;}

.h-right{position:relative;z-index:3;border-left:1px solid var(--brd);overflow:hidden;background:linear-gradient(160deg,#0D0D1E 0%,#0A0A18 60%,#080812 100%);}

.hr-glow1,
.hr-glow2{
  display:none !important;
}
@keyframes glP{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.25);opacity:1}}

.hr-scan{position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(139,92,246,.55),rgba(56,189,248,.4),transparent);z-index:20;pointer-events:none;animation:scanDn 5s linear infinite;}

@keyframes scanDn{0%{top:-2px;opacity:0}8%{opacity:.8}92%{opacity:.3}100%{top:100%;opacity:0}}

.hr-piano{position:absolute;top:0;left:0;right:0;height:6px;display:flex;z-index:15;gap:2px;padding:0 2px;}

.hr-pk{flex:1;border-radius:0 0 3px 3px;animation:pkP var(--d,2s) ease-in-out var(--dd,0s) infinite;}

@keyframes pkP{0%,78%,100%{transform:scaleY(1);opacity:.35}85%{transform:scaleY(5);opacity:1}}

.hr-eq{position:absolute;right:10px;top:50%;transform:translateY(-50%);display:flex;align-items:flex-end;gap:3px;height:88px;z-index:15;}

.hr-eqb{width:3px;border-radius:2px;animation:eqA var(--d,.9s) ease-in-out var(--dd,0s) infinite alternate;}

@keyframes eqA{from{height:5px;opacity:.2}to{height:var(--h,40px);opacity:1}}

.hr-grid{
  position:absolute;
  inset:0;
  padding:42px 18px 24px 18px;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  grid-template-rows:1.12fr 1fr .92fr;
  gap:14px;
}
.hc{border-radius:14px;border:1px solid rgba(255,255,255,.09);position:relative;overflow:hidden;box-shadow:0 10px 28px rgba(0,0,0,.35);}

.hc::before{content:'';position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,transparent 38%,rgba(7,7,13,.72) 100%);pointer-events:none;}

.hc::after{content:'';position:absolute;inset:0;z-index:3;background:linear-gradient(130deg,rgba(255,255,255,.09) 0%,transparent 55%);animation:sheen 4.5s ease-in-out infinite;pointer-events:none;}

@keyframes sheen{0%,100%{opacity:.3}50%{opacity:1}}

.hc1{
  background:linear-gradient(
    155deg,
    #111827,
    #0b1220 55%,
    #0f172a
  ) !important;
}


.hc2{
  grid-row:1;
  grid-column:2;
  background:linear-gradient(145deg,#0e1a2e,#0a1220);
  animation:cf2 5s ease-in-out .8s infinite;
}

.hc3{
  grid-row:2;
  grid-column:2;
  background:linear-gradient(145deg,#0e2018,#0a1810);
  animation:cf3 7s ease-in-out 1.5s infinite;
}

.hc4{
  background:linear-gradient(
    145deg,
    #111827,
    #0b1220
  ) !important;
}

.hc5{
  grid-row:3;
  grid-column:2;
  background:linear-gradient(145deg,#0e1e2e,#08141e);
  animation:cf5 6.2s ease-in-out 1.2s infinite;
}

@keyframes cf1{0%,100%{transform:translateY(0) rotate(-.4deg)}50%{transform:translateY(-12px) rotate(.4deg)}}

@keyframes cf2{0%,100%{transform:translateY(0) rotate(.3deg)}50%{transform:translateY(-9px) rotate(-.4deg)}}

@keyframes cf3{0%,100%{transform:scale(1)}50%{transform:scale(1.015) translateY(-6px)}}

@keyframes cf4{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px) skewX(.3deg)}}

@keyframes cf5{0%,100%{transform:translateY(0) rotate(.2deg)}50%{transform:translateY(-10px) rotate(-.4deg)}}

.hc-lbl{position:absolute;bottom:9px;left:11px;z-index:6;font-family:var(--fm);font-size:7.5px;letter-spacing:1.8px;color:rgba(255,255,255,.78);text-transform:uppercase;background:rgba(7,7,13,.65);backdrop-filter:blur(8px);padding:3px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.10);}

.hc-icon{position:absolute;top:12px;left:12px;z-index:6;width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;}

.hc-icon svg{width:17px;height:17px;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}

.hc-top-right{position:absolute;top:10px;right:10px;z-index:6;font-family:var(--fm);font-size:10px;font-weight:700;}

.orb-ring{position:absolute;border-radius:50%;border:1px solid;top:42%;left:50%;transform:translate(-50%,-50%);animation:orbRot var(--d,10s) linear infinite;}

@keyframes orbRot{to{transform:translate(-50%,-50%) rotate(360deg)}}

.orb-dot{position:absolute;top:-4px;left:50%;width:6px;height:6px;border-radius:50%;transform:translateX(-50%);}

.hc1-bars{position:absolute;bottom:28px;left:14px;display:flex;align-items:flex-end;gap:4px;z-index:5;}

.hc1-b{width:4px;border-radius:2px 2px 0 0;animation:hcbA var(--d,.9s) ease-in-out var(--dd,0s) infinite alternate;}

@keyframes hcbA{from{height:var(--mn,4px);opacity:.3}to{height:var(--mx,24px);opacity:1}}

.hc3-chart{position:absolute;bottom:26px;left:10px;right:28px;height:44px;display:flex;align-items:flex-end;gap:4px;z-index:5;}

.hc3-bar{flex:1;border-radius:2px 2px 0 0;background:linear-gradient(180deg,var(--green),rgba(34,197,94,.25));animation:barA var(--d,1.5s) ease-in-out var(--dd,0s) infinite alternate;}

@keyframes barA{from{height:20%}to{height:100%}}

.hc4-sw{position:absolute;top:50%;left:50%;transform:translate(-50%,-62%);z-index:5;display:flex;gap:7px;}

.hc4-sw span{width:18px;height:18px;border-radius:50%;animation:swA 2.2s ease-in-out var(--dd,0s) infinite;}

@keyframes swA{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(-6px);opacity:1}}

.hc5-rank{position:absolute;top:46%;left:50%;transform:translate(-50%,-60%);z-index:5;font-family:var(--fd);font-size:2rem;font-weight:800;color:var(--gold);animation:rankA 3s ease-in-out infinite;}

@keyframes rankA{0%,100%{opacity:.5;transform:translate(-50%,-60%) scale(.9)}50%{opacity:1;transform:translate(-50%,-70%) scale(1.05)}}

.hc2-node{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--b);animation:nodeA 3s ease-in-out var(--dd,0s) infinite;z-index:5;}

@keyframes nodeA{0%,100%{opacity:.2;transform:scale(1)}50%{opacity:.8;transform:scale(1.6)}}

.hc2-lines{position:absolute;bottom:24px;left:10px;right:10px;z-index:5;display:flex;flex-direction:column;gap:4px;}

.hc2-line{height:2px;border-radius:1px;background:rgba(56,189,248,.3);animation:lineA var(--d,2s) ease-in-out var(--dd,0s) infinite;}

@keyframes lineA{0%,100%{width:35%;opacity:.25}50%{width:90%;opacity:.85}}

.hr-badge{position:absolute;z-index:22;background:rgba(14,14,28,.92);backdrop-filter:blur(20px);border:1px solid var(--brd2);border-radius:14px;padding:.82rem 1rem;box-shadow:0 16px 40px rgba(0,0,0,.4);}

.hrb1{bottom:20px;left:6px;max-width:188px;animation:bdgF1 6s ease-in-out infinite;}

@keyframes bdgF1{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-10px) rotate(.5deg)}}

.hrb2{top:62px;right:6px;animation:bdgF2 7s ease-in-out 1s infinite;}

@keyframes bdgF2{0%,100%{transform:translateY(0) rotate(1.5deg)}50%{transform:translateY(-12px) rotate(.4deg)}}

.hrb-stars{color:var(--gold);font-size:10px;letter-spacing:2px;margin-bottom:.32rem;}

.hrb-txt{font-family:var(--fd);font-style:italic;font-size:11px;color:var(--ink70);line-height:1.6;margin-bottom:.38rem;}

.hrb-by{font-family:var(--fm);font-size:7.5px;color:var(--ink35);letter-spacing:1px;}

.hrb2-lbl{font-family:var(--fm);font-size:8px;letter-spacing:2px;color:var(--v2);text-transform:uppercase;margin-bottom:.3rem;}

.hrb2-val{font-family:var(--fd);font-size:1.6rem;font-weight:700;color:var(--ink);letter-spacing:-1px;line-height:1;}

.hrb2-sub{font-family:var(--fm);font-size:8px;color:var(--ink35);margin-top:2px;}

.hr-ft{position:absolute;top:0;left:0;right:0;height:72px;background:linear-gradient(180deg,#0D0D1E,transparent);z-index:10;pointer-events:none;}

.hr-fb{position:absolute;bottom:0;left:0;right:0;height:72px;background:linear-gradient(0deg,#080812,transparent);z-index:10;pointer-events:none;}

/* STATS + COMMON */

.sbar{display:grid;grid-template-columns:repeat(4,1fr);background:var(--bg2);border-top:1px solid var(--brd);border-bottom:1px solid var(--brd);}

.sbc{padding:1.9rem 2.5rem;border-right:1px solid var(--brd);position:relative;overflow:hidden;transition:background .2s;}

.sbc:last-child{border-right:none;}

.sbc:hover{background:var(--bg3);}

.sbc::after{content:'';position:absolute;bottom:0;left:0;height:3px;background:linear-gradient(90deg,var(--v),var(--b));width:0;transition:width 1.3s ease;border-radius:2px;}

.sbc.lit::after{width:100%;}

.sn{font-family:var(--fd);font-size:clamp(2rem,3.2vw,3rem);font-weight:700;color:var(--ink);letter-spacing:-1.5px;line-height:1;}

.sn em{color:var(--v2);font-style:normal;}

.sl{font-family:var(--fm);font-size:9px;letter-spacing:2.5px;color:var(--ink35);text-transform:uppercase;margin-top:.4rem;}

.mq{overflow:hidden;background:#05050A;padding:.68rem 0;border-bottom:1px solid var(--brd);}

.mq-t{display:flex;white-space:nowrap;animation:mqR 36s linear infinite;}

.mq-t:hover{animation-play-state:paused;}

.mq-i{font-family:var(--fm);font-size:9.5px;letter-spacing:3px;color:rgba(255,255,255,.3);text-transform:uppercase;padding:0 2.2rem;display:inline-flex;align-items:center;gap:2rem;}

.mq-s{color:var(--v2);font-size:8px;opacity:.75;}

@keyframes mqR{to{transform:translateX(-50%)}}

.lbl{display:inline-flex;align-items:center;gap:10px;font-family:var(--fm);font-size:9px;letter-spacing:4px;color:var(--v2);text-transform:uppercase;margin-bottom:1rem;}

.lbl::before{content:'';width:14px;height:1.5px;background:var(--v2);}

.sh{font-family:var(--fd);font-size:clamp(2.7rem,4.8vw,6rem);font-weight:800;letter-spacing:-1.5px;line-height:.87;color:var(--ink);}

.sh em{font-style:italic;color:var(--v2);}

.sh .gh{color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.15);}

.rv{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s cubic-bezier(.16,1,.3,1);}

.rv.on{opacity:1;transform:none;}

.rv-l{opacity:0;transform:translateX(-22px);transition:opacity .8s ease,transform .8s cubic-bezier(.16,1,.3,1);}

.rv-l.on{opacity:1;transform:none;}

/* SERVICES - 10 DIFFERENT VISUAL SYSTEMS */

#services{padding:9rem 5rem;background:radial-gradient(ellipse 45% 35% at 85% 10%,rgba(139,92,246,.10),transparent 65%),var(--bg);position:relative;overflow:hidden;}

#services::before{content:'';position:absolute;top:0;left:5%;right:5%;height:1px;background:var(--brd);}

.svc-section{margin-top:4rem;}

.svc-ch{display:grid;grid-template-columns:300px 1fr;border-top:1px solid var(--brd);padding:3.5rem 0;gap:5rem;align-items:start;opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.16,1,.3,1);}

.svc-ch.on{opacity:1;transform:none;}

.svc-ch:last-child{border-bottom:1px solid var(--brd);}

.svc-ch-meta{position:sticky;top:84px;}

.svc-ch-num{font-family:var(--fm);font-size:9px;letter-spacing:3px;color:var(--v2);margin-bottom:.8rem;}

.svc-ch-title{font-family:var(--fd);font-size:clamp(1.7rem,2.3vw,2.3rem);font-weight:800;color:var(--ink);letter-spacing:-1px;line-height:1.05;margin-bottom:.9rem;}

.svc-ch-title em{font-style:italic;color:var(--v2);}

.svc-ch-desc{font-size:13px;color:var(--ink70);line-height:1.82;margin-bottom:1.2rem;}

.svc-ch-tags{display:flex;flex-wrap:wrap;gap:5px;}

.stag{font-family:var(--fm);font-size:8px;letter-spacing:.8px;color:var(--ink35);padding:5px 10px;border-radius:999px;border:1px solid var(--brd2);background:var(--ink06);transition:all .2s;cursor:default;}

.svc-ch:hover .stag{border-color:var(--vb);color:var(--v2);background:var(--vl);}

.svc-visual{height:285px;border-radius:18px;position:relative;overflow:hidden;border:1px solid var(--brd);background:linear-gradient(145deg,rgba(255,255,255,.04),rgba(255,255,255,.02));box-shadow:0 22px 70px rgba(0,0,0,.22);}

.svc-visual::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 20% 20%,rgba(139,92,246,.18),transparent 35%),radial-gradient(circle at 80% 70%,rgba(56,189,248,.12),transparent 35%);pointer-events:none;z-index:1;}

.svc-visual::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(7,7,13,.62));pointer-events:none;z-index:3;}

.svc-card{position:absolute;overflow:hidden;border-radius:14px;border:1px solid rgba(255,255,255,.12);box-shadow:0 20px 45px rgba(0,0,0,.34);background:var(--card);z-index:2;transition:filter .3s,box-shadow .3s,transform .3s;}

.svc-card img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.72) saturate(.86);transition:filter .35s,transform .55s;}

.svc-card:hover{z-index:20;box-shadow:0 30px 80px rgba(0,0,0,.48),0 0 36px rgba(139,92,246,.18);}

.svc-card:hover img{filter:brightness(.98) saturate(1.08);transform:scale(1.06);}

.svc-cap{position:absolute;bottom:10px;left:11px;right:11px;z-index:5;font-family:var(--fm);font-size:7.8px;letter-spacing:1.5px;color:rgba(255,255,255,.82);text-transform:uppercase;background:rgba(7,7,13,.62);border:1px solid rgba(255,255,255,.10);border-radius:999px;padding:4px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.svc-ui{position:absolute;z-index:5;font-family:var(--fm);font-size:8px;letter-spacing:1.5px;color:var(--v2);text-transform:uppercase;background:rgba(7,7,13,.66);border:1px solid var(--vb);border-radius:999px;padding:5px 9px;backdrop-filter:blur(10px);}

.svc-line{position:absolute;z-index:4;background:linear-gradient(90deg,transparent,var(--v2),var(--b),transparent);opacity:.48;}



/* 01 Website - original browser scroll preview */
.lay-website{
  background:linear-gradient(145deg,#0d0d20,#080810);
  overflow:hidden;
}

/* browser top bar */
.lay-website .browser-chrome{
  position:absolute;
  top:14px;
  left:16px;
  right:16px;
  height:26px;
  border-radius:10px 10px 0 0;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.11);
  border-bottom:none;
  z-index:8;
  display:flex;
  align-items:center;
  padding:0 10px;
  gap:6px;
}

.lay-website .browser-chrome::before{
  content:'';
  width:7px;
  height:7px;
  border-radius:50%;
  background:#ef4444;
  box-shadow:12px 0 #f59e0b,24px 0 #22c55e;
}

.lay-website .url-bar{
  margin-left:38px;
  flex:1;
  height:14px;
  background:rgba(255,255,255,.08);
  border-radius:999px;
  font-family:var(--fm);
  font-size:7px;
  letter-spacing:1px;
  color:rgba(255,255,255,.35);
  display:flex;
  align-items:center;
  padding:0 8px;
}

/* scrolling website screenshots */
.lay-website .web-track{
  position:absolute;
  top:42px;
  bottom:14px;
  left:16px;
  right:16px;
  display:flex;
  align-items:stretch;
  gap:10px;
  width:max-content;
  max-height:calc(100% - 56px);
  animation:webScroll 28s linear infinite;
  z-index:4;
}

.lay-website:hover .web-track{
  animation-play-state:paused;
}

@keyframes webScroll{
  to{
    transform:translateX(-50%);
  }
}

.lay-website .web-frame{
  position:relative;
  width:190px;
  height:100%;
  flex-shrink:0;
  overflow:hidden;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.035);
}

.lay-website .web-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:brightness(.75) saturate(.9);
  transition:filter .35s,transform .55s;
}

.lay-website .web-frame:hover img{
  filter:brightness(.96) saturate(1.05);
  transform:scale(1.05);
}

.lay-website .frame-lbl{
  position:absolute;
  bottom:8px;
  left:9px;
  right:9px;
  z-index:6;
  font-family:var(--fm);
  font-size:7px;
  letter-spacing:1px;
  color:rgba(255,255,255,.75);
  background:rgba(7,7,13,.65);
  padding:3px 8px;
  border-radius:999px;
  text-align:center;
  text-transform:uppercase;
  backdrop-filter:blur(8px);
}

/* hide old website cards if old CSS still affects */
.lay-website .svc-track,
.lay-website .svc-card{
  display:none !important;
}

/* 03 Marketing - analytics pulse grid */

.lay-analytics .svc-card{width:30%;height:92px;animation:analyticsPulse 4s ease-in-out infinite;}

.lay-analytics .svc-card:nth-child(1){left:5%;top:30px;}

.lay-analytics .svc-card:nth-child(2){left:37%;top:58px;animation-delay:-.8s;}

.lay-analytics .svc-card:nth-child(3){left:69%;top:34px;animation-delay:-1.6s;}

.lay-analytics .svc-card:nth-child(4){left:14%;top:158px;animation-delay:-2.4s;}

.lay-analytics .svc-card:nth-child(5){left:49%;top:151px;animation-delay:-3.2s;}

.lay-analytics .metric-bars{position:absolute;left:7%;right:7%;bottom:22px;height:56px;display:flex;align-items:end;gap:8px;z-index:5;}

.lay-analytics .metric-bars span{flex:1;border-radius:5px 5px 0 0;background:linear-gradient(180deg,var(--green),rgba(34,197,94,.15));animation:mbar 1.8s ease-in-out infinite alternate;}

.lay-analytics .metric-bars span:nth-child(2n){background:linear-gradient(180deg,var(--b),rgba(56,189,248,.12));animation-delay:.2s;}

@keyframes analyticsPulse{0%,100%{transform:scale(1);filter:saturate(.9)}50%{transform:scale(1.035);filter:saturate(1.2)}}

@keyframes mbar{from{height:18%}to{height:var(--h)}}

/* 04 Branding - board shuffle */

.lay-brand .svc-card{animation:brandShuffle 7.2s ease-in-out infinite;transform-origin:center;}

.lay-brand .svc-card:nth-child(1){width:190px;height:155px;left:8%;top:30px;transform:rotate(-7deg);animation-delay:0s;}

.lay-brand .svc-card:nth-child(2){width:210px;height:120px;left:42%;top:22px;transform:rotate(4deg);animation-delay:-1.4s;}

.lay-brand .svc-card:nth-child(3){width:150px;height:150px;left:66%;top:104px;transform:rotate(-10deg);animation-delay:-2.8s;}

.lay-brand .svc-card:nth-child(4){width:170px;height:118px;left:22%;top:148px;transform:rotate(8deg);animation-delay:-4.2s;}

.lay-brand .svc-card:nth-child(5){width:120px;height:120px;left:54%;top:147px;border-radius:50%;animation-delay:-5.6s;}

.lay-brand .swatch-row{position:absolute;left:18px;bottom:18px;display:flex;gap:8px;z-index:7;}

.lay-brand .swatch-row span{width:20px;height:20px;border-radius:50%;border:1px solid rgba(255,255,255,.18);animation:swA 2.2s ease-in-out infinite;}

@keyframes brandShuffle{0%,100%{margin-top:0;margin-left:0}35%{margin-top:-10px;margin-left:8px}70%{margin-top:5px;margin-left:-7px}}

/* 05 SEO - diagonal ranking climb */

.lay-seo .rank-path{position:absolute;left:8%;right:8%;top:42px;bottom:42px;z-index:2;}

.lay-seo .rank-path::before{content:'';position:absolute;left:0;right:0;top:64%;height:2px;background:linear-gradient(90deg,rgba(139,92,246,.1),var(--v2),var(--b));transform:rotate(-14deg);transform-origin:left;}

.lay-seo .svc-card{width:138px;height:98px;animation:seoClimb 6s ease-in-out infinite;}

.lay-seo .svc-card:nth-child(1){left:6%;top:162px;animation-delay:0s;}

.lay-seo .svc-card:nth-child(2){left:24%;top:126px;animation-delay:-1.2s;}

.lay-seo .svc-card:nth-child(3){left:43%;top:91px;animation-delay:-2.4s;}

.lay-seo .svc-card:nth-child(4){left:62%;top:57px;animation-delay:-3.6s;}

.lay-seo .svc-card:nth-child(5){left:78%;top:30px;animation-delay:-4.8s;}

.lay-seo .rank-badge{position:absolute;right:18px;bottom:18px;z-index:8;font-family:var(--fd);font-size:3rem;color:var(--gold);font-weight:800;animation:rankA 3s ease-in-out infinite;}

@keyframes seoClimb{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-14px) scale(1.03)}}

/* 06 Social - vertical reels */

.lay-reels .reel-phone{position:absolute;left:50%;top:18px;bottom:18px;width:170px;transform:translateX(-50%);border-radius:30px;border:1px solid rgba(255,255,255,.18);background:#05050A;overflow:hidden;z-index:5;box-shadow:0 20px 60px rgba(0,0,0,.45);}

.lay-reels .reel-feed{position:absolute;left:0;top:0;width:100%;animation:reelScroll 13s linear infinite;}

.lay-reels:hover .reel-feed{animation-play-state:paused;}

.lay-reels .reel-card{position:relative;width:100%;height:249px;overflow:hidden;}

.lay-reels .reel-card img{width:100%;height:100%;object-fit:cover;filter:brightness(.78) saturate(.9);}

.lay-reels .side-heart{position:absolute;right:22px;top:75px;z-index:9;display:flex;flex-direction:column;gap:14px;font-size:20px;color:#fff;animation:heartPop 2.4s ease-in-out infinite;}

@keyframes reelScroll{to{transform:translateY(-50%)}}

@keyframes heartPop{0%,100%{transform:scale(1);opacity:.65}50%{transform:scale(1.18);opacity:1}}



/* 07 ECOMMERCE — premium shopping carousel with controls */
.lay-commerce{
  background:
    radial-gradient(circle at 22% 70%,rgba(247,199,106,.13),transparent 30%),
    radial-gradient(circle at 78% 28%,rgba(139,92,246,.14),transparent 32%),
    linear-gradient(145deg,#130f12,#07070d);
  overflow:hidden;
}

.lay-commerce .shop-window{
  position:absolute;
  inset:34px 64px 34px 64px;
  z-index:4;
  overflow:hidden;
  border-radius:22px;
}

.lay-commerce .shop-track{
  display:flex;
  gap:14px;
  height:100%;
  transition:transform .55s cubic-bezier(.16,1,.3,1);
  will-change:transform;
}

.lay-commerce .shop-card{
  position:relative;
  min-width:205px;
  height:100%;
  overflow:hidden;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.12);
  background:#08080f;
  box-shadow:0 20px 55px rgba(0,0,0,.42);
  flex-shrink:0;
}

.lay-commerce .shop-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:brightness(.78) saturate(.92);
  transition:filter .35s,transform .55s;
}

.lay-commerce .shop-card:hover img{
  filter:brightness(1) saturate(1.08);
  transform:scale(1.06);
}

.lay-commerce .shop-card::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:2;
  background:
    linear-gradient(180deg,transparent 42%,rgba(7,7,13,.74) 100%),
    linear-gradient(120deg,rgba(255,255,255,.08),transparent 45%);
  pointer-events:none;
}

.lay-commerce .shop-label{
  position:absolute;
  left:11px;
  right:11px;
  bottom:11px;
  z-index:5;
  font-family:var(--fm);
  font-size:7.8px;
  letter-spacing:1.5px;
  color:rgba(255,255,255,.84);
  text-transform:uppercase;
  background:rgba(7,7,13,.66);
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  padding:4px 8px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:center;
  backdrop-filter:blur(8px);
}

.lay-commerce .shop-cart-pill{
  position:absolute;
  left:18px;
  bottom:18px;
  z-index:12;
  font-family:var(--fm);
  font-size:8px;
  letter-spacing:1.8px;
  color:var(--gold);
  text-transform:uppercase;
  background:rgba(7,7,13,.72);
  border:1px solid rgba(247,199,106,.24);
  border-radius:999px;
  padding:7px 11px;
  backdrop-filter:blur(10px);
}

.lay-commerce .shop-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:20;
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(7,7,13,.72);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  backdrop-filter:blur(12px);
  transition:transform .2s,background .2s,border-color .2s;
}

.lay-commerce .shop-btn:hover{
  transform:translateY(-50%) scale(1.08);
  background:rgba(255,255,255,.12);
  border-color:rgba(247,199,106,.35);
}

.lay-commerce .shop-prev{
  left:16px;
}

.lay-commerce .shop-next{
  right:16px;
}

.lay-commerce .shop-btn svg{
  width:18px;
  height:18px;
  stroke:currentColor;
  fill:none;
  stroke-width:2.3;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.lay-commerce .price-tag{
  display:none !important;
}

.lay-commerce .shelf{
  display:none !important;
}

/* 07 E-COMMERCE — agency carousel with 4-card animated next */
.lay-commerce{
  background:
    radial-gradient(circle at 22% 70%,rgba(247,199,106,.13),transparent 30%),
    radial-gradient(circle at 78% 24%,rgba(139,92,246,.16),transparent 34%),
    linear-gradient(145deg,#FDF6E8,#FFF0F8);
  overflow:hidden;
}

.lay-commerce .commerce-window{
  position:absolute;
  left:52px;
  right:52px;
  top:48px;
  bottom:38px;
  overflow:hidden;
  z-index:5;
}

.lay-commerce .commerce-track{
  height:100%;
  display:flex;
  gap:14px;
  transition:transform .75s cubic-bezier(.16,1,.3,1);
  will-change:transform;
}

.lay-commerce .commerce-card{
  position:relative;
  width:calc((100% - 42px) / 4);
  height:100%;
  flex:0 0 calc((100% - 42px) / 4);
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:#08080f;
  box-shadow:0 22px 58px rgba(0,0,0,.42);
}

.lay-commerce .commerce-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:brightness(.78) saturate(.92);
  transition:filter .35s,transform .55s;
}

.lay-commerce .commerce-card:hover img{
  filter:brightness(1) saturate(1.08);
  transform:scale(1.05);
}

.lay-commerce .commerce-card::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:2;
  background:
    linear-gradient(180deg,transparent 42%,rgba(7,7,13,.76)),
    linear-gradient(120deg,rgba(255,255,255,.08),transparent 48%);
  pointer-events:none;
}

.lay-commerce .commerce-cap{
  position:absolute;
  left:10px;
  right:10px;
  bottom:10px;
  z-index:4;
  font-family:var(--fm);
  font-size:7.5px;
  letter-spacing:1.3px;
  color:rgba(255,255,255,.84);
  text-transform:uppercase;
  background:rgba(7,7,13,.66);
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  padding:4px 8px;
  text-align:center;
  backdrop-filter:blur(8px);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.lay-commerce .commerce-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:12;
  width:34px;
  height:34px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(7,7,13,.72);
  color:rgba(255,255,255,.82);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  cursor:pointer;
  backdrop-filter:blur(12px);
  transition:background .2s,transform .2s,border-color .2s;
}

.lay-commerce .commerce-arrow:hover{
  background:rgba(255,255,255,.10);
  border-color:rgba(185,163,255,.36);
  transform:translateY(-50%) scale(1.06);
}

.lay-commerce .commerce-prev{left:14px;}
.lay-commerce .commerce-next{right:14px;}

.lay-commerce .commerce-pill{
  position:absolute;
  right:18px;
  bottom:16px;
  z-index:12;
  font-family:var(--fm);
  font-size:8px;
  letter-spacing:1.8px;
  color:var(--gold);
  text-transform:uppercase;
  background:rgba(7,7,13,.72);
  border:1px solid rgba(247,199,106,.24);
  border-radius:999px;
  padding:7px 11px;
  backdrop-filter:blur(10px);
}




.lay-monitor .monitor-frame{position:absolute;left:5%;right:5%;top:32px;bottom:32px;border-radius:18px;border:1px solid rgba(34,197,94,.24);background:rgba(0,0,0,.25);z-index:3;overflow:hidden;box-shadow:inset 0 0 30px rgba(34,197,94,.05);}

.lay-monitor .monitor-frame::before{content:'';position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--green),var(--b),transparent);animation:monitorScan 3.2s linear infinite;z-index:8;}

.lay-monitor .svc-card{width:26%;height:72px;animation:glitchCard 4s steps(1,end) infinite;}

.lay-monitor .svc-card:nth-child(1){left:8%;top:52px;animation-delay:0s;}

.lay-monitor .svc-card:nth-child(2){left:38%;top:52px;animation-delay:-1s;}

.lay-monitor .svc-card:nth-child(3){left:68%;top:52px;animation-delay:-2s;}

.lay-monitor .svc-card:nth-child(4){left:13%;top:152px;width:34%;animation-delay:-3s;}

.lay-monitor .svc-card:nth-child(5){left:52%;top:152px;width:34%;animation-delay:-1.8s;}

.lay-monitor .sys-lines{position:absolute;left:28px;right:28px;bottom:24px;z-index:9;display:grid;gap:6px;}

.lay-monitor .sys-lines span{height:3px;border-radius:10px;background:rgba(34,197,94,.35);animation:sysLine 2s ease-in-out infinite;}

.lay-monitor .sys-lines span:nth-child(2){width:70%;animation-delay:.3s}

.lay-monitor .sys-lines span:nth-child(3){width:45%;animation-delay:.6s}

@keyframes monitorScan{0%{top:-2px;opacity:0}10%{opacity:.9}100%{top:100%;opacity:0}}

@keyframes glitchCard{0%,88%,100%{filter:none;transform:translate(0,0)}89%{filter:hue-rotate(40deg);transform:translate(2px,-1px)}90%{filter:none;transform:translate(-1px,1px)}}

@keyframes sysLine{0%,100%{opacity:.25;width:40%}50%{opacity:.95;width:100%}}


/* ===== FINAL FIX: SERVICE VISUAL REFINEMENTS ===== */

/* overall service visual darker + less empty */
.svc-visual{
  background:linear-gradient(145deg,#101020,#090914);
}

/* CONTENT CREATION: keep moving, never stop */
.lay-film .film-strip{
  animation:filmMove 13s linear infinite !important;
}
.lay-film:hover .film-strip{
  animation-play-state:running !important;
}



/* DIGITAL MARKETING: better ad dashboard */
.lay-analytics{
  background:
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    radial-gradient(circle at 78% 25%,rgba(34,197,94,.16),transparent 32%),
    linear-gradient(145deg,#08120f,#090914);
  background-size:34px 34px,34px 34px,auto,auto;
}
.lay-analytics .svc-card{
  width:145px;
  height:92px;
  border-radius:16px;
  animation:adCardPop 5.2s ease-in-out infinite;
}
.lay-analytics .svc-card:nth-child(1){left:6%;top:35px;}
.lay-analytics .svc-card:nth-child(2){left:27%;top:142px;animation-delay:-1s;}
.lay-analytics .svc-card:nth-child(3){left:48%;top:35px;animation-delay:-2s;}
.lay-analytics .svc-card:nth-child(4){left:69%;top:142px;animation-delay:-3s;}
.lay-analytics .svc-card:nth-child(5){display:none;}

.lay-analytics .metric-bars{
  left:auto;
  right:24px;
  bottom:30px;
  width:190px;
  height:82px;
  gap:6px;
}
.lay-analytics .ad-kpi{
  position:absolute;
  left:22px;
  bottom:28px;
  z-index:8;
  background:rgba(7,7,13,.68);
  border:1px solid rgba(34,197,94,.25);
  border-radius:16px;
  padding:14px 16px;
  backdrop-filter:blur(12px);
}
.lay-analytics .ad-kpi strong{
  display:block;
  font-family:var(--fd);
  font-size:2.1rem;
  line-height:1;
  color:var(--green);
}
.lay-analytics .ad-kpi span{
  font-family:var(--fm);
  font-size:8px;
  letter-spacing:2px;
  color:var(--ink35);
  text-transform:uppercase;
}
@keyframes adCardPop{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-8px) scale(1.025)}
}

/* BRAND IDENTITY: proper designer canvas */
.lay-brand{
  background:
    radial-gradient(circle at 18% 75%,rgba(247,199,106,.12),transparent 28%),
    radial-gradient(circle at 80% 25%,rgba(139,92,246,.18),transparent 35%),
    linear-gradient(145deg,#120b18,#07070d);
}
.lay-brand .brand-board{
  position:absolute;
  left:5%;
  right:5%;
  top:28px;
  bottom:28px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.035);
  z-index:1;
  box-shadow:inset 0 0 40px rgba(255,255,255,.035);
}
.lay-brand .svc-card{
  animation:brandBoardFloat 6.6s ease-in-out infinite;
}
.lay-brand .svc-card:nth-child(1){width:168px;height:118px;left:9%;top:44px;transform:rotate(-3deg);}
.lay-brand .svc-card:nth-child(2){width:145px;height:145px;left:36%;top:72px;transform:rotate(4deg);animation-delay:-1.4s;}
.lay-brand .svc-card:nth-child(3){width:190px;height:105px;left:62%;top:38px;transform:rotate(-2deg);animation-delay:-2.8s;}
.lay-brand .svc-card:nth-child(4){width:160px;height:104px;left:18%;top:168px;transform:rotate(3deg);animation-delay:-4.2s;}
.lay-brand .svc-card:nth-child(5){width:150px;height:95px;left:58%;top:168px;border-radius:16px;animation-delay:-5.6s;}

.lay-brand .swatch-row{
  right:24px;
  left:auto;
  bottom:24px;
  background:rgba(7,7,13,.6);
  padding:8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.1);
}
@keyframes brandBoardFloat{
  0%,100%{margin-top:0;margin-left:0}
  50%{margin-top:-9px;margin-left:5px}
}

/* SEO: search ranking dashboard */
.lay-seo{
  background:
    linear-gradient(90deg,rgba(56,189,248,.05) 1px,transparent 1px),
    linear-gradient(rgba(56,189,248,.04) 1px,transparent 1px),
    linear-gradient(145deg,#06111d,#07070d);
  background-size:38px 38px,38px 38px,auto;
}
.lay-seo .search-bar{
  position:absolute;
  left:24px;
  right:24px;
  top:24px;
  height:44px;
  border-radius:999px;
  background:rgba(255,255,255,.075);
  border:1px solid rgba(255,255,255,.12);
  z-index:8;
}
.lay-seo .search-bar::before{
  content:'SEO ranking growth';
  position:absolute;
  left:20px;
  top:50%;
  transform:translateY(-50%);
  font-family:var(--fm);
  font-size:9px;
  letter-spacing:1.6px;
  color:rgba(255,255,255,.5);
  text-transform:uppercase;
}
.lay-seo .svc-card{
  width:125px;
  height:82px;
  border-radius:14px;
  animation:seoClimb 5.4s ease-in-out infinite;
}
.lay-seo .svc-card:nth-child(1){left:7%;top:178px;}
.lay-seo .svc-card:nth-child(2){left:26%;top:145px;}
.lay-seo .svc-card:nth-child(3){left:45%;top:112px;}
.lay-seo .svc-card:nth-child(4){left:64%;top:83px;}
.lay-seo .svc-card:nth-child(5){left:79%;top:112px;}
.lay-seo .rank-path::before{
  top:68%;
  height:3px;
  opacity:.8;
}
.lay-seo .rank-badge{
  right:30px;
  bottom:22px;
  font-size:2.5rem;
}

/* SOCIAL MEDIA: 3 smaller reel phones */
.lay-reels{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  background:linear-gradient(145deg,#160b20,#07070d);
}
.lay-reels .reel-phone{
  position:relative;
  left:auto;
  top:auto;
  bottom:auto;
  transform:none;
  width:128px;
  height:236px;
  border-radius:24px;
  flex-shrink:0;
}
.lay-reels .reel-phone:nth-child(2){
  margin-top:26px;
  opacity:.82;
  transform:scale(.92);
}
.lay-reels .reel-phone:nth-child(3){
  margin-top:-18px;
  opacity:.9;
  transform:scale(.96);
}
.lay-reels .side-heart{
  right:34px;
  top:78px;
  font-size:17px;
}
.lay-reels .reel-card{
  height:236px;
}



/* MAINTENANCE: coding/devops feel */
.lay-monitor{
  background:
    linear-gradient(rgba(34,197,94,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(34,197,94,.04) 1px,transparent 1px),
    linear-gradient(145deg,#06110b,#07070d);
  background-size:30px 30px,30px 30px,auto;
}
.lay-monitor .svc-card{
  height:82px;
}
.lay-monitor .code-window{
  position:absolute;
  left:26px;
  right:26px;
  top:28px;
  bottom:28px;
  z-index:2;
  border-radius:18px;
  border:1px solid rgba(34,197,94,.22);
  background:rgba(0,0,0,.22);
  overflow:hidden;
}
.lay-monitor .code-window::before{
  content:'';
  position:absolute;
  left:16px;
  top:14px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#ef4444;
  box-shadow:14px 0 #f59e0b,28px 0 #22c55e;
}
.lay-monitor .code-text{
  position:absolute;
  left:42px;
  right:42px;
  top:58px;
  z-index:8;
  display:grid;
  gap:8px;
}
.lay-monitor .code-text span{
  height:4px;
  border-radius:999px;
  background:rgba(34,197,94,.38);
  animation:sysLine 2.4s ease-in-out infinite;
}
.lay-monitor .code-text span:nth-child(2){width:70%;animation-delay:.25s;}
.lay-monitor .code-text span:nth-child(3){width:86%;animation-delay:.5s;}
.lay-monitor .code-text span:nth-child(4){width:54%;animation-delay:.75s;}
.lay-monitor .sys-lines{
  display:none;
}
/* ===== FINAL SERVICES FIX V2 ===== */

/* common */
.svc-visual{background:linear-gradient(145deg,#101020,#080812);}
.svc-card img{filter:brightness(.78) saturate(.9);}
.svc-card:hover img{filter:brightness(1) saturate(1.08);}



/* 03 DIGITAL MARKETING — piano carousel, center card big */
.lay-analytics{
  background:
    radial-gradient(circle at 50% 50%,rgba(34,197,94,.12),transparent 36%),
    linear-gradient(145deg,#08120f,#07070d);
}
.lay-analytics .metric-bars,
.lay-analytics .ad-kpi{display:none;}

.lay-analytics .market-stage{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  overflow:hidden;
  z-index:4;
}
.lay-analytics .market-track{
  display:flex;
  gap:14px;
  width:max-content;
  animation:marketPiano 18s linear infinite;
}
.lay-analytics:hover .market-track{
  animation-play-state:paused;
}
.lay-analytics .market-card{
  width:155px;
  height:105px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:var(--card);
  box-shadow:0 18px 45px rgba(0,0,0,.35);
  animation:marketFocus 4.5s ease-in-out infinite;
  flex-shrink:0;
  position:relative;
}
.lay-analytics .market-card:nth-child(3n){
  width:215px;
  height:145px;
  transform:scale(1.08);
  box-shadow:0 26px 75px rgba(34,197,94,.22);
}
.lay-analytics .market-card img{
  width:100%;
  height:100%;
  object-fit:cover;
}
@keyframes marketPiano{
  to{transform:translateX(-50%)}
}
@keyframes marketFocus{
  0%,100%{filter:brightness(.72);transform:scale(.94)}
  50%{filter:brightness(1);transform:scale(1.04)}
}

/* 04 BRAND IDENTITY — moving brand film reel */
.lay-brand{
  background:
    radial-gradient(circle at 20% 70%,rgba(247,199,106,.13),transparent 30%),
    radial-gradient(circle at 82% 24%,rgba(139,92,246,.18),transparent 34%),
    linear-gradient(145deg,#140d1d,#07070d);
  overflow:hidden;
}

.lay-brand .brand-reel{
  position:absolute;
  top:0;
  left:-35px;
  bottom:0;
  display:flex;
  width:max-content;
  animation:brandReelMove 18s linear infinite;
  z-index:4;
}

.lay-brand:hover .brand-reel{
  animation-play-state:paused;
}

.lay-brand .brand-frame{
  position:relative;
  flex-shrink:0;
  width:185px;
  height:285px;
  overflow:hidden;
  border-right:6px solid rgba(0,0,0,.78);
  background:#08080f;
}

.lay-brand .brand-frame::before{
  content:'';
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  width:14px;
  z-index:6;
  background:repeating-linear-gradient(
    0deg,
    rgba(0,0,0,.85) 0px,
    rgba(0,0,0,.85) 4px,
    transparent 4px,
    transparent 28px
  );
}

.lay-brand .brand-frame::after{
  content:'';
  position:absolute;
  top:0;
  bottom:0;
  right:0;
  width:14px;
  z-index:6;
  background:repeating-linear-gradient(
    0deg,
    rgba(0,0,0,.85) 0px,
    rgba(0,0,0,.85) 4px,
    transparent 4px,
    transparent 28px
  );
}

.lay-brand .brand-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:brightness(.68) saturate(.82);
  display:block;
}

.lay-brand .brand-frame-overlay{
  position:absolute;
  inset:0;
  z-index:7;
  pointer-events:none;
  background:
    linear-gradient(0deg,rgba(7,7,13,.68) 0%,transparent 45%,transparent 62%,rgba(7,7,13,.38) 100%),
    linear-gradient(90deg,rgba(139,92,246,.18),transparent 35%,transparent 65%,rgba(247,199,106,.12));
}

.lay-brand .brand-frame-label{
  position:absolute;
  bottom:9px;
  left:50%;
  transform:translateX(-50%);
  z-index:9;
  font-family:var(--fm);
  font-size:7px;
  letter-spacing:1.5px;
  color:rgba(255,255,255,.82);
  background:rgba(7,7,13,.68);
  border:1px solid rgba(255,255,255,.10);
  padding:3px 9px;
  border-radius:999px;
  white-space:nowrap;
  text-transform:uppercase;
  backdrop-filter:blur(8px);
}





.lay-brand .brand-type-tag{
  position:absolute;
  right:18px;
  bottom:18px;
  z-index:16;
  font-family:var(--fm);
  font-size:7px;
  letter-spacing:1.8px;
  color:var(--gold);
  text-transform:uppercase;
  background:rgba(7,7,13,.72);
  border:1px solid rgba(247,199,106,.24);
  border-radius:999px;
  padding:7px 10px;
  backdrop-filter:blur(12px);
}

@keyframes brandReelMove{
  to{transform:translateX(-50%)}
}



/* 05 SEO — bigger SEO cards + rising graph line */
/* 05 SEO — clean SEO image wall, no graph */
.lay-seo{
  background:
    linear-gradient(90deg,rgba(56,189,248,.035) 1px,transparent 1px),
    linear-gradient(rgba(56,189,248,.03) 1px,transparent 1px),
    radial-gradient(circle at 72% 100%,rgba(56,189,248,.12),transparent 34%),
    radial-gradient(circle at 80% 50%,rgba(100,197,94,.100),transparent 36%),
    linear-gradient(145deg,#EDFAF3,#F0FFF7);  background-size:34px 34px,34px 34px,auto,auto,auto;
}

.lay-seo .search-bar,
.lay-seo .rank-badge,
.lay-seo .rank-path,
.lay-seo .rank-path::before,
.lay-seo .rank-path::after,
.lay-seo .seo-graph,
.lay-seo .seo-graph svg,
.lay-seo .seo-graph .graph-line,
.lay-seo .seo-graph .graph-glow,
.lay-seo .seo-graph .graph-dot{
  display:none !important;
}

/* images taller + proper premium gap */
.lay-seo .svc-card{
  width:18.2% !important;
  height:190px !important;
  top:52px !important;
  border-radius:18px !important;
  animation:none !important;
  z-index:5 !important;
  box-shadow:0 22px 58px rgba(0,0,0,.42) !important;
}

/* 5 images with visible gap */
.lay-seo .svc-card:nth-child(1){left:3% !important;}
.lay-seo .svc-card:nth-child(2){left:22.3% !important;}
.lay-seo .svc-card:nth-child(3){left:41.6% !important;}
.lay-seo .svc-card:nth-child(4){left:60.9% !important;}
.lay-seo .svc-card:nth-child(5){left:80.2% !important;}

.lay-seo .svc-card img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  filter:brightness(.84) saturate(.96) !important;
}

.lay-seo .svc-card:hover img{
  filter:brightness(1) saturate(1.08) !important;
  transform:scale(1.05) !important;
}

.lay-seo .seo-rank-pill{
  position:absolute;
  right:22px;
  bottom:18px;
  z-index:11;
  font-family:var(--fm);
  font-size:8px;
  letter-spacing:1.8px;
  color:rgba(255,255,255,.72);
  text-transform:uppercase;
  background:rgba(7,7,13,.72);
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  padding:6px 11px;
  backdrop-filter:blur(10px);
}

/* 06 SOCIAL — vertical parallel reels */
.lay-reels{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  background:linear-gradient(145deg,#160b20,#07070d);
}
.lay-reels .reel-phone{
  position:relative;
  left:auto;
  top:auto;
  bottom:auto;
  transform:none;
  width:128px;
  height:236px;
  border-radius:24px;
  flex-shrink:0;
}
.lay-reels .reel-phone:nth-child(2){
  margin-top:26px;
  opacity:.82;
  transform:scale(.92);
}
.lay-reels .reel-phone:nth-child(3){
  margin-top:-18px;
  opacity:.9;
  transform:scale(.96);
}
.lay-reels .reel-feed{
  animation:reelScroll 12s linear infinite;
}
.lay-reels .reel-card{
  height:236px;
}
.lay-reels:hover .reel-feed{
  animation-play-state:running;
}
.lay-reels .side-heart{
  right:34px;
  top:78px;
  font-size:17px;
}

/* 07 ECOMMERCE — product shelf remains */
.lay-commerce .price-tag{
  animation:none;
}



/* ===== SOCIAL MEDIA + CONTENT CREATION — SIMPLE STRAIGHT SCROLL ===== */
.lay-socialcontent{
  background:
    radial-gradient(circle at 22% 70%,rgba(139,92,246,.14),transparent 30%),
    radial-gradient(circle at 78% 28%,rgba(56,189,248,.11),transparent 32%),
    linear-gradient(145deg,#14081e,#07070d);
  overflow:hidden;
}

/* straight horizontal reel — no bottom/up movement */
.lay-socialcontent .content-reel{
  position:absolute;
  left:0;
  top:66px;
  display:flex;
  gap:10px;
  width:max-content;
  animation:socialStraightScroll 24s linear infinite;
  z-index:4;
  background:rgba(0,0,0,.25);
  padding:16px 10px;
  border-top:8px dotted rgba(255,255,255,.18);
  border-bottom:8px dotted rgba(255,255,255,.18);
}

.lay-socialcontent:hover .content-reel{
  animation-play-state:running;
}

.lay-socialcontent .content-frame{
  position:relative;
  width:185px;
  height:118px;
  border-radius:8px;
  flex-shrink:0;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:#08080f;
  box-shadow:0 20px 45px rgba(0,0,0,.34);
  animation:socialContentZoom 4s ease-in-out infinite;
}

.lay-socialcontent .content-frame:nth-child(even){
  animation-delay:-2s;
}

.lay-socialcontent .content-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:brightness(.78) saturate(.9);
  transition:filter .35s,transform .55s;
}

.lay-socialcontent .content-frame:hover img{
  filter:brightness(1) saturate(1.08);
  transform:scale(1.06);
}

.lay-socialcontent .content-frame::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:2;
  background:linear-gradient(180deg,transparent 45%,rgba(7,7,13,.68));
  pointer-events:none;
}

.lay-socialcontent .content-label{
  position:absolute;
  bottom:10px;
  left:11px;
  right:11px;
  z-index:5;
  font-family:var(--fm);
  font-size:7.8px;
  letter-spacing:1.5px;
  color:rgba(255,255,255,.82);
  text-transform:uppercase;
  background:rgba(7,7,13,.62);
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  padding:4px 8px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:center;
}

.lay-socialcontent .content-rec{
  position:absolute;
  top:20px;
  right:22px;
  z-index:8;
  font-family:var(--fm);
  font-size:9px;
  color:#fff;
  display:flex;
  align-items:center;
  gap:6px;
  letter-spacing:1.4px;
}

.lay-socialcontent .content-rec::before{
  content:'';
  width:8px;
  height:8px;
  border-radius:50%;
  background:#ef4444;
  animation:pdot 1.5s infinite;
}

.lay-socialcontent .content-pill{
  position:absolute;
  left:18px;
  bottom:18px;
  z-index:12;
  font-family:var(--fm);
  font-size:8px;
  letter-spacing:1.8px;
  color:var(--v2);
  text-transform:uppercase;
  background:rgba(7,7,13,.72);
  border:1px solid var(--vb);
  border-radius:999px;
  padding:7px 11px;
  backdrop-filter:blur(10px);
}

@keyframes socialStraightScroll{
  to{
    transform:translateX(-50%);
  }
}

@keyframes socialContentZoom{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.04);}
}


/* ===== MOBILE APP FINAL POLISH: TEXT LEFT + IMAGES RIGHT ===== */

/* Hide outside left text only for Mobile App row */
.svc-ch.mobile-row .svc-ch-meta{
  display:none !important;
}

.svc-ch.mobile-row{
  grid-template-columns:1fr !important;
  padding:3.2rem 0 !important;
}

.svc-ch.mobile-row .svc-visual{
  height:355px !important;
}

/* Main mobile visual layout */
.lay-phone{
  display:grid !important;
grid-template-columns:30% 70% !important;  align-items:center !important;
  gap:8px !important;
  padding:26px 28px 26px 32px !important;
  background:
    radial-gradient(circle at 72% 28%,rgba(56,189,248,.17),transparent 30%),
    radial-gradient(circle at 16% 72%,rgba(139,92,246,.18),transparent 34%),
    linear-gradient(145deg,#07101f,#07070d) !important;
  perspective:none !important;
}

/* Left text inside card */
.lay-phone .phone-inside-text{
  position:relative !important;
  z-index:8 !important;
  padding-left:0 !important;
  max-width:270px !important;
}

.lay-phone .phone-num{
  font-family:var(--fm) !important;
  font-size:8px !important;
  letter-spacing:2.8px !important;
  color:var(--v2) !important;
  text-transform:uppercase !important;
  margin-bottom:12px !important;
}

.lay-phone .phone-title{
  font-family:var(--fd) !important;
  font-size:clamp(2.05rem,3.2vw,3.25rem) !important;
  line-height:.88 !important;
  letter-spacing:-1.2px !important;
  color:var(--ink) !important;
  margin-bottom:14px !important;
}

.lay-phone .phone-title em{
  color:var(--v2) !important;
  font-style:italic !important;
}

.lay-phone .phone-desc{
  font-size:12.5px !important;
  line-height:1.72 !important;
  color:var(--ink60, rgba(247,245,255,.60)) !important;
  max-width:265px !important;
  margin-bottom:14px !important;
}

.lay-phone .phone-tags{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:6px !important;
  max-width:275px !important;
}

.lay-phone .phone-tags span{
  font-family:var(--fm) !important;
  font-size:7.5px !important;
  letter-spacing:.7px !important;
  color:var(--ink35) !important;
  padding:5px 9px !important;
  border-radius:999px !important;
  border:1px solid var(--brd2) !important;
  background:rgba(255,255,255,.045) !important;
}

/* hide old mobile styles */
.lay-phone .phone-text,
.lay-phone .app-ui-frame,
.lay-phone .app-icons,
.lay-phone > .svc-card{
  display:none !important;
}

/* Right image scroll area */
.lay-phone .phone-scroll{
  width:100% !important;
  height:285px !important;
  display:flex !important;
  align-items:center !important;
gap:16px !important;
justify-content:flex-end !important;  overflow:hidden !important;
  position:relative !important;
  z-index:6 !important;
  padding-left:4px !important;
}

/* subtle divider between text and images */
.lay-phone .phone-scroll::before{
  content:'' !important;
  position:absolute !important;
  left:0 !important;
  top:28px !important;
  bottom:28px !important;
  width:1px !important;
  background:linear-gradient(180deg,transparent,rgba(185,163,255,.22),transparent) !important;
  z-index:1 !important;
}

.lay-phone .app-col{
  width:158px !important;
height:270px !important;
  border-radius:26px !important;
  border:1px solid rgba(255,255,255,.14) !important;
  background:#05050A !important;
  overflow:hidden !important;
  position:relative !important;
  flex-shrink:0 !important;
  box-shadow:0 20px 55px rgba(0,0,0,.42) !important;
}

.lay-phone .app-col:nth-child(1){
  margin-top:0 !important;
}

.lay-phone .app-col:nth-child(2){
  margin-top:24px !important;
  transform:scale(.94) !important;
  opacity:.9 !important;
}

.lay-phone .app-col:nth-child(3){
  margin-top:-18px !important;
  transform:scale(.96) !important;
  opacity:.92 !important;
}

.lay-phone .app-feed{
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  width:100% !important;
  animation:appVerticalScroll 30s linear infinite !important;
}

.lay-phone .app-shot{
  position:relative !important;
height:270px !important;
  overflow:hidden !important;
}

.lay-phone .app-shot img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  filter:brightness(.84) saturate(.98) !important;
}

.lay-phone .svc-cap{
  bottom:10px !important;
  left:10px !important;
  right:10px !important;
  z-index:8 !important;
  font-size:7.3px !important;
  padding:4px 7px !important;
}

/* soft shine on whole box */
.lay-phone::after{
  content:'' !important;
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(120deg,rgba(255,255,255,.055),transparent 38%,rgba(56,189,248,.045)) !important;
  pointer-events:none !important;
  z-index:3 !important;
}

/* make inner content stay above shine */
.lay-phone .phone-inside-text,
.lay-phone .phone-scroll{
  position:relative !important;
  z-index:7 !important;
}

@keyframes appVerticalScroll{
  to{transform:translateY(-50%);}
}
@media(max-width:900px){
  .lay-phone{
    grid-template-columns:30% 70% !important;
  }
}

@media(max-width:768px){

  .lay-phone{
    grid-template-columns:1fr !important;
    padding:24px !important;
    gap:18px !important;
  }


  .lay-phone .phone-scroll::before{
    display:none !important;
  }

  .svc-ch.mobile-row .svc-visual{
    height:560px !important;
  }
}
.lay-phone .phone-scroll{
  gap:16px !important;
  justify-content:flex-end !important;
}

.lay-phone .app-col{
  width:158px !important;
  height:270px !important;
}

.lay-phone .app-shot{
  height:270px !important;
}


  .lay-phone .phone-inside-text{
    max-width:100% !important;
  }

  .lay-phone .phone-desc{
    max-width:520px !important;
  }


  .lay-phone .phone-scroll::before{
    display:none !important;
  }


@media(max-width:520px){
  .lay-phone .app-col{
    width:112px !important;
    height:225px !important;
  }

  .lay-phone .app-shot{
    height:225px !important;
  }

  .lay-phone .app-col:nth-child(3){
    display:none !important;
  }
}




/* WORK */

#work{padding:9rem 5rem;background:linear-gradient(180deg,var(--bg),var(--bg2));border-top:1px solid var(--brd);}

.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}

.work-card{background:linear-gradient(180deg,var(--card),var(--bg3));border:1px solid var(--brd);border-radius:24px;overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.22);transition:transform .35s,box-shadow .35s,border-color .25s;position:relative;}

.work-card:hover{transform:translateY(-10px);box-shadow:0 35px 90px rgba(0,0,0,.4),0 0 40px rgba(139,92,246,.13);border-color:var(--vb);}

.work-card img{width:100%;height:250px;object-fit:cover;display:block;filter:brightness(.7) saturate(.9);transition:transform .7s,filter .5s;}

.work-card:hover img{transform:scale(1.06);filter:brightness(.94) saturate(1.05);}

.work-info{padding:1.5rem;}

.work-tag{display:inline-flex;font-family:var(--fm);font-size:8px;letter-spacing:2px;color:var(--v2);background:var(--vl);border:1px solid var(--vb);border-radius:999px;padding:4px 10px;text-transform:uppercase;margin-bottom:.9rem;}

.work-info h3{font-size:17px;line-height:1.25;letter-spacing:-.5px;color:var(--ink);margin-bottom:.7rem;}

.work-info p{font-size:12px;color:var(--ink55);line-height:1.72;margin-bottom:1rem;}

.work-metrics{display:flex;flex-wrap:wrap;gap:6px;}

.work-metrics span{font-family:var(--fm);font-size:8px;letter-spacing:1px;color:var(--ink70);background:var(--ink06);border:1px solid var(--brd2);border-radius:999px;padding:5px 9px;}



/* TEAM */

#team{padding:9rem 5rem;border-top:1px solid var(--brd);background:var(--bg2);}



.tm:hover{border-color:var(--vb);transform:translateY(-5px);box-shadow:0 25px 65px rgba(0,0,0,.32);}


.tmbdg{position:absolute;top:1rem;right:1.2rem;font-family:var(--fm);font-size:8px;letter-spacing:2.5px;color:var(--v2);border:1px solid var(--vb);padding:3px 9px;border-radius:999px;text-transform:uppercase;background:var(--vl);}

.tm-avw{position:relative;flex-shrink:0;}



.tm:not(.tmf) .tm-av{width:64px;height:64px;}

.tm-av img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;}

.tmonl{position:absolute;bottom:2px;right:2px;width:13px;height:13px;border-radius:50%;background:var(--green);border:2.5px solid var(--bg);box-shadow:0 0 8px rgba(34,197,94,.5);}

.tmrole{display:inline-flex;font-family:var(--fm);font-size:8px;letter-spacing:2px;color:var(--v2);text-transform:uppercase;padding:3px 9px;border-radius:999px;background:var(--vl);border:1px solid var(--vb);margin-bottom:.4rem;}








.tm:hover .tsk{border-color:var(--vb);color:var(--v2);background:var(--vl);}
.team-title{
  line-height:.95 !important;
  padding-bottom:.16em !important;
}

.team-title em{
  color:transparent !important;
  background:linear-gradient(110deg,#fff,var(--v2),var(--b),#fff) !important;
  background-size:220% 100% !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  animation:teamGlow 5s ease-in-out infinite !important;
}

.team-sub{
  max-width:640px;
  margin-top:1.4rem;
  color:var(--ink55);
  font-size:15px;
  line-height:1.85;
}

@keyframes teamGlow{
  0%,100%{
    background-position:0% 50%;
    filter:drop-shadow(0 0 0 rgba(139,92,246,0));
  }
  50%{
    background-position:100% 50%;
    filter:drop-shadow(0 0 20px rgba(139,92,246,.22));
  }
}

.tm-av{
  position:relative;
}

.tm-av::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:50%;
  background:linear-gradient(135deg,rgba(255,255,255,.12),transparent 45%,rgba(139,92,246,.18));
  pointer-events:none;
}


.tm:hover .tm-av img{
  filter:brightness(1.05) saturate(1.05) contrast(1.05);
  transform:scale(1.04);
}

.tm-av img{
  transition:filter .35s ease, transform .45s ease;
}

/* CTA */

#cta{padding:0;text-align:center;position:relative;overflow:hidden;background:#05050A;border-top:1px solid var(--brd);}

.cta-imgrow{position:relative;height:340px;overflow:hidden;display:flex;}

.cta-imgrow img{flex:1;object-fit:cover;height:100%;filter:brightness(.44) saturate(.65);transition:transform 14s ease;}

.cta-imgrow:hover img{transform:scale(1.04);}

.cta-imgrow img:nth-child(1){flex:1.3;}

.cta-imgrow img:nth-child(2){flex:1.6;}

.cta-imgrow img:nth-child(3){flex:1;}

.cta-imgrow::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,5,10,.15) 0%,rgba(5,5,10,.88) 88%,#05050A 100%),linear-gradient(90deg,rgba(5,5,10,.5) 0%,transparent 18%,transparent 82%,rgba(5,5,10,.5) 100%);z-index:3;pointer-events:none;}

.cta-call{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:10;background:rgba(14,14,28,.92);backdrop-filter:blur(22px);border:1px solid rgba(185,163,255,.22);border-radius:20px;padding:1.1rem 1.6rem;display:flex;align-items:center;gap:1.2rem;box-shadow:0 20px 55px rgba(0,0,0,.5),0 0 32px rgba(139,92,246,.12);animation:callBob 5s ease-in-out infinite;white-space:nowrap;}

@keyframes callBob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-8px)}}

.cta-ph{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--v),var(--b));display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 0 28px rgba(139,92,246,.4);animation:phRing 2.8s ease-in-out infinite;}

@keyframes phRing{0%,65%,100%{transform:rotate(0)}15%{transform:rotate(-22deg)}25%{transform:rotate(20deg)}35%{transform:rotate(-14deg)}45%{transform:rotate(10deg)}55%{transform:rotate(-5deg)}}

.cta-ph svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}

.cta-call-lbl{font-family:var(--fm);font-size:8px;letter-spacing:2.5px;color:var(--v2);text-transform:uppercase;margin-bottom:.25rem;}

.cta-call-title{font-size:15px;font-weight:800;color:var(--ink);letter-spacing:-.3px;}

.cta-call-sub{font-family:var(--fm);font-size:8.5px;color:var(--ink35);margin-top:2px;}

.cta-body{padding:4rem 5rem 7rem;position:relative;z-index:4;}

#cta::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 50% 80%,rgba(139,92,246,.18),rgba(56,189,248,.07) 55%,transparent 80%);pointer-events:none;z-index:1;}

.cta-orb{position:absolute;border-radius:50%;pointer-events:none;z-index:2;animation:orbF 15s ease-in-out infinite;}

.cta-orb1{width:280px;height:280px;bottom:0;left:8%;background:radial-gradient(circle,rgba(139,92,246,.15),transparent 65%);}

.cta-orb2{width:240px;height:240px;bottom:40px;right:10%;background:radial-gradient(circle,rgba(56,189,248,.11),transparent 65%);animation-delay:3s;animation-duration:12s;}

@keyframes orbF{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-28px) scale(1.07)}}

.cta-bdg{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;border-radius:999px;border:1px solid var(--vb);background:var(--vl);font-family:var(--fm);font-size:9px;letter-spacing:3px;color:var(--v2);text-transform:uppercase;margin-bottom:2rem;position:relative;z-index:5;}

.cta-bdg-dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:pdot 2s infinite;}

.cta-h{font-family:var(--fd);font-size:clamp(3.5rem,8.5vw,10rem);font-weight:800;letter-spacing:-2px;line-height:.82;margin-bottom:1.8rem;position:relative;z-index:5;color:#fff;}

.cta-h em{font-style:italic;color:transparent;background:linear-gradient(135deg,#fff,var(--v2),var(--b));-webkit-background-clip:text;background-clip:text;}

.cta-h .gh{
  color:transparent !important;
  -webkit-text-stroke:1.7px rgba(255,255,255,.42) !important;
  text-shadow:
    0 0 18px rgba(185,163,255,.28),
    0 10px 38px rgba(0,0,0,.70) !important;
  filter:drop-shadow(0 0 14px rgba(139,92,246,.22)) !important;
}

.cta-sub{font-size:16px;color:rgba(255,255,255,.44);max-width:420px;margin:0 auto 2.8rem;line-height:1.85;position:relative;z-index:5;}

.cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;position:relative;z-index:5;}

.cta-b1{display:inline-flex;align-items:center;gap:9px;padding:16px 34px;border-radius:999px;background:#fff;color:#090914;font-size:14px;font-weight:800;border:none;cursor:none;transition:all .22s;box-shadow:0 0 28px rgba(255,255,255,.09);}

.cta-b1:hover{transform:translateY(-2px);box-shadow:0 0 52px rgba(185,163,255,.22);}

.cta-b2{display:inline-flex;align-items:center;gap:9px;padding:15px 26px;border-radius:999px;background:transparent;color:rgba(255,255,255,.48);font-size:14px;font-weight:700;cursor:none;border:1px solid rgba(255,255,255,.14);transition:all .2s;}

.cta-b2:hover{border-color:rgba(139,92,246,.5);color:var(--v2);}

.cta-note{margin-top:1.6rem;font-family:var(--fm);font-size:9px;letter-spacing:3px;color:rgba(255,255,255,.16);position:relative;z-index:5;}

.cta-stats{display:flex;justify-content:center;align-items:center;gap:2.5rem;margin-top:3rem;position:relative;z-index:5;flex-wrap:wrap;}

.cta-stat{text-align:center;}

.cta-stat-n{font-family:var(--fd);font-size:2.2rem;font-weight:700;color:var(--ink);letter-spacing:-1.5px;line-height:1;}

.cta-stat-n em{color:var(--v2);font-style:normal;}

.cta-stat-l{font-family:var(--fm);font-size:8px;letter-spacing:2px;color:var(--ink35);text-transform:uppercase;margin-top:.2rem;}

.cta-stat-sep{width:1px;height:36px;background:var(--brd);}




/* FOOTER */

footer{background:var(--bg2);border-top:1px solid var(--brd);padding:5rem 5rem 2.5rem;}

.ftg{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:3rem;margin-bottom:4rem;}

.ft-logo{display:flex;align-items:center;gap:10px;text-decoration:none;margin-bottom:1.1rem;}

.ft-lm{width:34px;height:34px;border-radius:11px;background:linear-gradient(135deg,var(--v),var(--b));display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#fff;}

.ft-lt{font-size:17px;font-weight:800;color:var(--ink);}

.ft-d{font-size:13px;color:var(--ink35);line-height:1.78;max-width:240px;margin-bottom:1.2rem;}

.ft-op{display:inline-flex;align-items:center;gap:6px;font-family:var(--fm);font-size:8px;letter-spacing:2px;color:var(--ink35);padding:5px 10px;border-radius:999px;border:1px solid var(--brd2);}

.ft-od{width:5px;height:5px;border-radius:50%;background:var(--green);}

.ftcol h4{font-family:var(--fm);font-size:9px;letter-spacing:3px;color:var(--ink35);text-transform:uppercase;margin-bottom:1.2rem;}

.ftcol a{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ink35);text-decoration:none;margin-bottom:.6rem;transition:color .2s,transform .2s;}

.ftcol a::before{content:'→';font-size:9px;color:var(--ink22);transition:color .2s;}

.ftcol a:hover{color:var(--v2);transform:translateX(3px);}

.ftcol a:hover::before{color:var(--v2);}

.ft-btm{border-top:1px solid var(--brd);padding-top:2rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;}

.ft-c{font-family:var(--fm);font-size:9px;letter-spacing:1.5px;color:var(--ink35);}

.ft-socs{display:flex;gap:6px;}

.ft-soc{width:34px;height:34px;border-radius:10px;border:1px solid var(--brd2);display:flex;align-items:center;justify-content:center;font-family:var(--fm);font-size:10px;color:var(--ink35);text-decoration:none;transition:all .2s;background:var(--ink06);}

.ft-soc:hover{border-color:var(--v);color:var(--v2);background:var(--vl);}

/* RESPONSIVE */

@media(max-width:1200px){

  .hero{grid-template-columns:1fr;}.h-right{display:none;}

  .svc-ch{grid-template-columns:1fr;}.svc-ch-meta{position:relative;top:auto;}

  .tgrid{grid-template-columns:1fr 1fr;}.tmf{flex-direction:column;align-items:flex-start;}

  #services,#work,#proof,#why,#team,footer{padding-left:3rem;padding-right:3rem;}.cta-body{padding-left:3rem;padding-right:3rem;}

}

@media(max-width:900px){

  .bento{grid-template-columns:repeat(3,1fr);}.bc.c4{grid-column:span 3;}

  .wg{grid-template-columns:1fr;gap:3rem;}.ftg{grid-template-columns:1fr 1fr;}

  .sbar{grid-template-columns:repeat(2,1fr);}.work-grid{grid-template-columns:1fr;}

  .cta-imgrow{height:260px;}.cta-call{white-space:normal;min-width:280px;}

  .svc-visual{height:320px;}

}

@media(max-width:768px){

  #nav{padding:0 1.2rem;}.nc,.n-cta,.n-pill{display:none;}.n-ham{display:flex;}

  .h-left{padding:4rem 1.5rem 3rem;}.h-head{font-size:clamp(3.2rem,18vw,5rem);}

  .bento{grid-template-columns:1fr 1fr;}.bc.c2,.bc.c3,.bc.c4{grid-column:span 2;}.bc.r2{grid-row:span 1;}

  .tgrid{grid-template-columns:1fr;}#services,#work,#proof,#why,#team,footer{padding-left:1.5rem;padding-right:1.5rem;}.cta-body{padding-left:1.5rem;padding-right:1.5rem;}

  .ftg{grid-template-columns:1fr;}

  .lay-phone .svc-card{width:105px;height:205px;}

  .lay-phone .svc-card:nth-child(5){display:none;}

  .lay-analytics .svc-card{width:42%;}

  .lay-analytics .svc-card:nth-child(3){display:none;}

  .lay-seo .svc-card{width:120px;}

}

@media(max-width:480px){

  .sbar{grid-template-columns:1fr 1fr;}.sbc{padding:1.4rem 1.1rem;}

  .h-btns{flex-direction:column;}.bp,.bo{justify-content:center;}

  .cta-b1,.cta-b2{width:100%;justify-content:center;}.cta-stat-sep{display:none;}

  .cta-imgrow img:nth-child(3){display:none;}.cta-call{flex-direction:column;text-align:center;}

  .svc-visual{height:300px;}

  .lay-brand .svc-card:nth-child(2),.lay-brand .svc-card:nth-child(5),.lay-chat .svc-card:nth-child(3),.lay-chat .svc-card:nth-child(5){display:none;}

}




/* ===== AUDIENCE FLOWER — STRAIGHT CARDS + FIT IMAGES ===== */

.svc-ch:has(.lay-chat){
  padding:6rem 0 7rem !important;
  overflow:visible !important;
}

.lay-chat{
  height:560px !important;
  overflow:visible !important;
  border:none !important;
  box-shadow:none !important;
  background:transparent !important;
}

.lay-chat::before,
.lay-chat::after,
.lay-chat .svc-ui,
.lay-chat .eng-review,
.lay-chat .chat-screen,
.lay-chat .svc-card{
  display:none !important;
}

.lay-chat .eng-flower-wrap{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
 width:640px !important;
height:640px !important;
  transform:translate(-50%,-50%) !important;
  overflow:visible !important;
  z-index:20 !important;
}

.lay-chat .eng-flower{
  position:absolute !important;
  inset:0 !important;
  transform-origin:center center !important;
  overflow:visible !important;
  border-radius:50% !important;
  will-change:transform !important;
}

.lay-chat .eng-flower-card{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:185px !important;
height:148px !important;
margin-left:-92.5px !important;
margin-top:-74px !important;
  border-radius:26px !important;
  overflow:hidden !important;
  border:1px solid rgba(255,255,255,.14) !important;
  background:#08080f !important;
  box-shadow:0 24px 65px rgba(0,0,0,.45) !important;
  z-index:30 !important;
  transition:box-shadow .35s ease, z-index .2s ease !important;
  will-change:transform !important;
}

/* card positions only — JS will keep them straight */
.lay-chat .eng-petal-1{--angle:0deg;}
.lay-chat .eng-petal-2{--angle:51.4deg;}
.lay-chat .eng-petal-3{--angle:102.8deg;}
.lay-chat .eng-petal-4{--angle:154.2deg;}
.lay-chat .eng-petal-5{--angle:205.6deg;}
.lay-chat .eng-petal-6{--angle:257deg;}
.lay-chat .eng-petal-7{--angle:308.4deg;}

.lay-chat .eng-petal-8,
.lay-chat .eng-petal-9,
.lay-chat .eng-petal-10{
  display:none !important;
}

.lay-chat .eng-card-inner{
  width:100% !important;
  height:100% !important;
  position:relative !important;
  overflow:hidden !important;
  border-radius:24px !important;
  transform:none !important;
  animation:none !important;
}

.lay-chat .eng-card-inner img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  display:block !important;
  filter:brightness(.86) saturate(.98) !important;
  transition:filter .35s ease, transform .45s ease !important;
}

/* image card vich fit rahe, rotate na hove */
.lay-chat .eng-flower-card:hover{
  z-index:100 !important;
  box-shadow:0 38px 100px rgba(0,0,0,.68),0 0 42px rgba(139,92,246,.28) !important;
}

.lay-chat .eng-flower-card:hover .eng-card-inner img{
  filter:brightness(1) saturate(1.1) !important;
  transform:scale(1.08) !important;
}

.lay-chat .eng-label{
  position:absolute !important;
  left:10px !important;
  right:10px !important;
  bottom:10px !important;
  z-index:5 !important;
  font-family:var(--fm) !important;
  font-size:7px !important;
  letter-spacing:1.2px !important;
  color:rgba(255,255,255,.84) !important;
  text-transform:uppercase !important;
  background:rgba(7,7,13,.68) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:999px !important;
  padding:4px 7px !important;
  text-align:center !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  backdrop-filter:blur(8px) !important;
}



.lay-monitor{
  height:360px !important;
  overflow:hidden !important;
  background:
    radial-gradient(circle at 22% 22%,rgba(139,92,246,.16),transparent 34%),
    radial-gradient(circle at 78% 72%,rgba(56,189,248,.10),transparent 34%),
    linear-gradient(145deg,#101020,#080812) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow:0 22px 70px rgba(0,0,0,.28) !important;
}


/* hide old maintenance design */
.lay-monitor .monitor-frame,
.lay-monitor .svc-card,
.lay-monitor .code-window,
.lay-monitor .code-text,
.lay-monitor .sys-lines{
  display:none !important;
}

.lay-monitor::before{
  content:'' !important;
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  background:
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px) !important;
  background-size:34px 34px !important;
  pointer-events:none !important;
}

.before-after-box{
  position:absolute;
  left:28px;
  right:28px;
  top:26px;
  height:245px;
  z-index:5;
  overflow:hidden;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.13);
  background:#08080f;
  box-shadow:0 24px 70px rgba(0,0,0,.48);
}

.ba-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  display:block;
  background:#08080f;
}

.ba-before{
  filter:brightness(.62) contrast(.96) saturate(.95) !important;
}

.ba-after-wrap{
  position:absolute;
  inset:0;
  width:100%;
  overflow:hidden;
  animation:baRevealClip 8.5s ease-in-out infinite;
  z-index:3;
  clip-path:inset(0 100% 0 0);
}

.ba-after{
  width:100%;
  height:100%;
  filter:brightness(1) saturate(1.08);
}

.ba-after{
  filter:brightness(.78) contrast(1.04) saturate(1.12) !important;
}

/* important: image same size rahe */
.before-after-box .ba-after{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
}

.ba-slider{
  position:absolute;
  top:0;
  bottom:0;
  left:0%;
  width:3px;
  background:linear-gradient(180deg,transparent,var(--v2),var(--green),transparent);
  z-index:6;
  animation:baSliderMove 8.5s ease-in-out infinite;
  box-shadow:0 0 24px rgba(185,163,255,.55);
}

.ba-slider span{
  position:absolute;
  top:50%;
  left:50%;
  width:42px;
  height:42px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(7,7,13,.82);
  border:1px solid rgba(185,163,255,.30);
  color:var(--v2);
  font-size:17px;
  box-shadow:0 0 32px rgba(139,92,246,.28);
}

.ba-tag{
  position:absolute;
  top:14px;
  z-index:8;
  font-family:var(--fm);
  font-size:8px;
  letter-spacing:1.8px;
  text-transform:uppercase;
  padding:6px 10px;
  border-radius:999px;
  backdrop-filter:blur(10px);
}

.ba-old{
  left:14px;
  color:#ffffff;
  background:rgba(7,7,13,.68);
  border:1px solid rgba(255,255,255,.16);
  animation:beforeIsItText 5.5s ease-in-out infinite;
}

.ba-new{
  right:14px;
  color:#bbf7d0;
  background:rgba(34,197,94,.20);
  border:1px solid rgba(34,197,94,.34);
}

.ba-caption{
  position:absolute;
  left:50%;
  bottom:14px;
  transform:translateX(-50%);
  z-index:8;
  font-family:var(--fm);
  font-size:8px;
  letter-spacing:1.7px;
  color:rgba(255,255,255,.84);
  text-transform:uppercase;
  background:rgba(7,7,13,.70);
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  padding:6px 12px;
  white-space:nowrap;
  backdrop-filter:blur(10px);
}

.ba-mini-row{
  position:absolute;
  left:28px;
  right:28px;
  bottom:18px;
  height:68px;
  z-index:6;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}

.ba-mini{
  position:relative;
  overflow:hidden;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.11);
  background:#08080f;
  box-shadow:0 14px 36px rgba(0,0,0,.34);
}

.ba-mini img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:brightness(.74) saturate(.9);
  transition:filter .3s ease, transform .45s ease;
}

.ba-mini:hover img{
  filter:brightness(1) saturate(1.08);
  transform:scale(1.06);
}

.ba-mini span{
  position:absolute;
  left:8px;
  right:8px;
  bottom:7px;
  z-index:8;
  font-family:var(--fm);
  font-size:6.8px;
  letter-spacing:1px;
  color:rgba(255,255,255,.82);
  background:rgba(7,7,13,.66);
  border-radius:999px;
  padding:3px 6px;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

@keyframes baRevealClip{
  0%{clip-path:inset(0 100% 0 0);}
  15%{clip-path:inset(0 100% 0 0);}
  55%{clip-path:inset(0 0% 0 0);}
  78%{clip-path:inset(0 0% 0 0);}
  100%{clip-path:inset(0 100% 0 0);}
}
@keyframes baSliderMove{
  0%{left:0%;}
  15%{left:0%;}
  55%{left:100%;}
  78%{left:100%;}
  100%{left:0%;}
}
/* BEFORE image = old / outdated website feel */
.ba-before{
  filter:brightness(.78) contrast(.95) saturate(.95) !important;
}

.before-after-box::before{
  display:none !important;
}

/* AFTER image = modern website feel */
.ba-after{
  filter:brightness(1.05) contrast(1.06) saturate(1.18) !important;
}

.ba-after-wrap::after{
  content:'IsIt Upgrade';
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) scale(.96);
  z-index:30;
  font-family:var(--fm);
  font-size:12px;
  font-weight:500;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:#fff;
  background:rgba(7,7,13,.74);
  border:1px solid rgba(185,163,255,.26);
  padding:8px 16px;
  border-radius:999px;
  text-shadow:0 2px 12px rgba(0,0,0,.9);
  backdrop-filter:blur(12px);
  opacity:0;
  animation:afterIsItMagic 8.5s ease-in-out infinite;
  pointer-events:none;
  white-space:nowrap;
}


@keyframes isitMagicText{
  0%,18%{
    opacity:0;
    transform:translate(-50%,-50%) scale(.82);
    filter:blur(8px);
  }
  38%,62%{
    opacity:1;
    transform:translate(-50%,-50%) scale(1);
    filter:blur(0);
  }
  82%,100%{
    opacity:0;
    transform:translate(-50%,-50%) scale(1.12);
    filter:blur(6px);
  }
}


.before-after-box .before-isit-text{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:25;
  font-family:var(--fm);
  font-size:12px;
  font-weight:500;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:#fff;
  background:rgba(7,7,13,.72);
  border:1px solid rgba(255,255,255,.16);
  padding:8px 16px;
  border-radius:999px;
  text-shadow:0 2px 12px rgba(0,0,0,.85);
  backdrop-filter:blur(12px);
  animation:beforeIsItText 8.5s ease-in-out infinite;
  pointer-events:none;
  white-space:nowrap;
}


@keyframes beforeIsItText{
  0%,24%{opacity:1;}
  36%,100%{opacity:0;}
}

@keyframes afterIsItMagic{
  0%,34%{
    opacity:0;
    transform:translate(-50%,-50%) scale(.86);
    filter:blur(8px);
  }
  48%,72%{
    opacity:1;
    transform:translate(-50%,-50%) scale(1);
    filter:blur(0);
  }
  88%,100%{
    opacity:0;
    transform:translate(-50%,-50%) scale(1.1);
    filter:blur(6px);
  }
}

.lay-chat:has(.eng-flower-card:hover) .eng-flower{
  animation-play-state:paused !important;
}

.lay-chat .eng-flower-card:hover .eng-card-inner{
  animation-play-state:paused !important;
}





/* ===== PREMIUM HERO CLOUDS — ABOVE TEXT ===== */

.hero{
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate !important;
}

/* text normal rahe, cloud usde upar lightly pass hove */
.h-left{
  position:relative !important;
  z-index:8 !important;
}

/* cloud layer text ton upper */
.hero-clouds{
  position:absolute !important;
  inset:66px 0 0 0 !important;
  z-index:12 !important;
  pointer-events:none !important;
  overflow:hidden !important;
}

/* important: buttons clickable rehange */
.hero-clouds *{
  pointer-events:none !important;
}

.c1{
  left:-460px !important;
  top:110px !important;
  animation:cloudAcrossOne 24s linear infinite !important;
}

.c2{
  left:-520px !important;
  top:250px !important;
  width:560px !important;
  height:180px !important;
  opacity:.26 !important;
  animation:cloudAcrossTwo 32s linear infinite !important;
  animation-delay:-9s !important;
}

.c3{
  left:-380px !important;
  top:390px !important;
  width:390px !important;
  height:130px !important;
  opacity:.22 !important;
  animation:cloudAcrossThree 28s linear infinite !important;
  animation-delay:-16s !important;
}

.c4{
  right:-520px !important;
  top:175px !important;
  width:520px !important;
  height:165px !important;
  opacity:.25 !important;
  animation:cloudBack 34s linear infinite !important;
}

/* thin mist layer over headline */
.mist{
  position:absolute !important;
  display:block !important;
  left:-30% !important;
  width:160% !important;
  height:120px !important;
  opacity:.18 !important;
  filter:blur(24px) !important;
  mix-blend-mode:screen !important;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.38),
    rgba(185,163,255,.24),
    rgba(56,189,248,.18),
    transparent
  ) !important;
}

.m1{
  top:210px !important;
  animation:mistSlide 14s ease-in-out infinite alternate !important;
}

.m2{
  top:335px !important;
  opacity:.13 !important;
  animation:mistSlideReverse 18s ease-in-out infinite alternate !important;
}

/* keep text readable even when clouds cross */
.h-head,
.h-sub,
.h-btns,
.ey{
  position:relative !important;
  z-index:9 !important;
}

/* cloud is above text but transparent */
.hero-clouds{
  opacity:1 !important;
}

@keyframes cloudAcrossOne{
  0%{transform:translateX(0) translateY(0) scale(1);}
  50%{transform:translateX(58vw) translateY(-20px) scale(1.08);}
  100%{transform:translateX(125vw) translateY(8px) scale(1);}
}

@keyframes cloudAcrossTwo{
  0%{transform:translateX(0) translateY(0) scale(1);}
  50%{transform:translateX(62vw) translateY(18px) scale(1.05);}
  100%{transform:translateX(128vw) translateY(-10px) scale(1);}
}

@keyframes cloudAcrossThree{
  0%{transform:translateX(0) translateY(0) scale(.92);}
  50%{transform:translateX(66vw) translateY(-12px) scale(1.03);}
  100%{transform:translateX(130vw) translateY(0) scale(.96);}
}

@keyframes cloudBack{
  0%{transform:translateX(0) translateY(0) scale(1);}
  50%{transform:translateX(-55vw) translateY(20px) scale(1.05);}
  100%{transform:translateX(-125vw) translateY(-8px) scale(1);}
}

@keyframes mistSlide{
  from{transform:translateX(-8%) rotate(-2deg);}
  to{transform:translateX(8%) rotate(2deg);}
}


@keyframes mistSlideReverse{
  from{transform:translateX(8%) rotate(2deg);}
  to{transform:translateX(-8%) rotate(-2deg);}
}

@media(max-width:900px){
  .hero-clouds{
    inset:66px 0 0 0 !important;
    z-index:10 !important;
  }

  .cloud{
    width:330px !important;
    height:120px !important;
    opacity:.22 !important;
    filter:blur(20px) !important;
  }

  .c1{top:120px !important;}
  .c2{top:245px !important;}
  .c3{display:none !important;}
  .c4{display:none !important;}

  .mist{
    opacity:.10 !important;
  }
}


/* ===== FORCE VISIBLE HERO CLOUDS FIX ===== */

.hero-clouds{
  position:absolute !important;
  inset:66px 0 0 0 !important;
  z-index:50 !important;
  pointer-events:none !important;
  overflow:hidden !important;
  opacity:1 !important;
}

/* make text below clouds but still readable */
.h-left{
  z-index:20 !important;
}



@keyframes cloudFloat1{
  from{transform:translateX(-40px) translateY(0) scale(1);}
  to{transform:translateX(90px) translateY(-25px) scale(1.08);}
}

@keyframes cloudFloat2{
  from{transform:translateX(70px) translateY(0) scale(1);}
  to{transform:translateX(-120px) translateY(28px) scale(1.05);}
}

@keyframes cloudFloat3{
  from{transform:translateX(0) translateY(0) scale(.95);}
  to{transform:translateX(150px) translateY(-16px) scale(1.05);}
}

@keyframes cloudFloat4{
  from{transform:translateX(30px) translateY(0) scale(1);}
  to{transform:translateX(-110px) translateY(22px) scale(1.07);}
}

@keyframes mistMove1{
  from{transform:translateX(-4%);}
  to{transform:translateX(5%);}
}

@keyframes mistMove2{
  from{transform:translateX(5%);}
  to{transform:translateX(-5%);}
}

/* 4) Digital word fully visible */
.h-row{
  overflow:visible !important;
  padding-bottom:.08em !important;
}


.h-word{
  padding-bottom:.06em !important;
}

.tw-vi{
  display:inline-block !important;
  padding-right:.04em !important;
}

/* 5) Start Project button premium animated */
.n-cta,
.bp,
.cta-b1{
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate !important;
  background:linear-gradient(135deg,#ffffff 0%,#d8ccff 38%,#8bdfff 100%) !important;
  color:#07070D !important;
  box-shadow:
    0 10px 34px rgba(139,92,246,.28),
    inset 0 1px 0 rgba(255,255,255,.75) !important;
  border:1px solid rgba(255,255,255,.45) !important;
  transform:translateZ(0) !important;
}

.n-cta::before,
.bp::before,
.cta-b1::before{
  content:'' !important;
  position:absolute !important;
  inset:-2px !important;
  z-index:-1 !important;
  background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.75) 35%,transparent 70%) !important;
  transform:translateX(-130%) skewX(-18deg) !important;
  animation:btnShine 2.8s ease-in-out infinite !important;
}

.n-cta::after,
.bp::after,
.cta-b1::after{
  content:'' !important;
  position:absolute !important;
  inset:0 !important;
  z-index:-2 !important;
  border-radius:999px !important;
  background:linear-gradient(135deg,var(--v),var(--b)) !important;
  opacity:.0 !important;
  filter:blur(18px) !important;
  transition:opacity .25s ease !important;
}

.n-cta:hover,
.bp:hover,
.cta-b1:hover{
  transform:translateY(-3px) scale(1.025) !important;
  box-shadow:
    0 18px 48px rgba(139,92,246,.42),
    0 0 34px rgba(56,189,248,.18),
    inset 0 1px 0 rgba(255,255,255,.85) !important;
}

.n-cta:hover::after,
.bp:hover::after,
.cta-b1:hover::after{
  opacity:.50 !important;
}

@keyframes btnShine{
  0%,35%{transform:translateX(-130%) skewX(-18deg);}
  65%,100%{transform:translateX(130%) skewX(-18deg);}
}


/* ===== FINAL FIX: DIGITAL G CUT ISSUE ===== */

.h-head{
  line-height:1.12 !important;
  gap:0 !important;
  overflow:visible !important;
}

.h-row{
  overflow:visible !important;
  line-height:1.12 !important;
  padding-bottom:.18em !important;
  margin-bottom:-.18em !important;
}

.h-word{
  display:inline-block !important;
  line-height:1.12 !important;
  padding-bottom:.16em !important;
  overflow:visible !important;
}

.tw-vi{
  display:inline-block !important;
  padding-bottom:.18em !important;
  margin-bottom:-.18em !important;
  -webkit-box-decoration-break:clone !important;
  box-decoration-break:clone !important;
}




/* ===== TRACK RECORD FINAL CLEAN VERSION ===== */

#proof{
  padding:7.5rem 5rem !important;
  background:
    radial-gradient(circle at 18% 18%,rgba(139,92,246,.13),transparent 34%),
    radial-gradient(circle at 84% 72%,rgba(56,189,248,.09),transparent 34%),
    linear-gradient(180deg,#080812,#0B0B14) !important;
  border-top:1px solid rgba(255,255,255,.10) !important;
  overflow:hidden !important;
}

.proof-head{
  margin-bottom:2.8rem !important;
}

#proof .sh{
  line-height:.95 !important;
  padding-bottom:.12em !important;
}

.proof-grid{
  display:grid !important;
  grid-template-columns:repeat(12,1fr) !important;
  gap:16px !important;
}

.proof-card{
  position:relative !important;
  min-height:210px !important;
  border-radius:26px !important;
  padding:1.65rem !important;
  overflow:hidden !important;
  background:
    linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025)) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:0 20px 60px rgba(0,0,0,.28) !important;
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease !important;
}

.proof-card::before{
  content:'' !important;
  position:absolute !important;
  inset:0 !important;
  background:
    radial-gradient(circle at 20% 18%,rgba(139,92,246,.18),transparent 38%),
    radial-gradient(circle at 92% 82%,rgba(56,189,248,.10),transparent 38%) !important;
  pointer-events:none !important;
}

.proof-card > *{
  position:relative !important;
  z-index:2 !important;
}

.proof-card:hover{
  transform:translateY(-6px) !important;
  border-color:rgba(185,163,255,.32) !important;
  box-shadow:
    0 34px 90px rgba(0,0,0,.42),
    0 0 42px rgba(139,92,246,.13) !important;
}

/* layout */
.proof-card.stat{grid-column:span 3 !important;}
.proof-card.quote{grid-column:span 6 !important;}
.proof-card.image{grid-column:span 4 !important; padding:0 !important;}
.proof-card.process{grid-column:span 8 !important;}
.proof-card.tech{grid-column:span 12 !important; min-height:170px !important;}

/* stat cards */
.proof-num{
  font-family:var(--fd) !important;
  font-size:clamp(3.4rem,5vw,5.4rem) !important;
  font-weight:700 !important;
  line-height:.9 !important;
  letter-spacing:-2px !important;
  color:var(--ink) !important;
}

.proof-num em{
  color:var(--v2) !important;
  font-style:normal !important;
}

.proof-label{
  margin-top:.9rem !important;
  font-family:var(--fm) !important;
  font-size:9px !important;
  letter-spacing:2.4px !important;
  color:rgba(247,245,255,.45) !important;
  text-transform:uppercase !important;
}

.proof-bar{
  height:5px !important;
  margin-top:1.5rem !important;
  background:rgba(255,255,255,.08) !important;
  border-radius:999px !important;
  overflow:hidden !important;
}

.proof-bar span{
  display:block !important;
  height:100% !important;
  width:0;
  border-radius:999px !important;
  background:linear-gradient(90deg,var(--v),var(--b)) !important;
  box-shadow:0 0 18px rgba(139,92,246,.38) !important;
  transition:width 1.4s cubic-bezier(.16,1,.3,1) !important;
}

/* quote */
.proof-card.quote{
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  background:
    linear-gradient(145deg,rgba(139,92,246,.20),rgba(255,255,255,.035)) !important;
}

.proof-card.quote p{
  font-family:var(--fd) !important;
  font-style:italic !important;
  font-size:21px !important;
  line-height:1.45 !important;
  color:rgba(247,245,255,.82) !important;
  max-width:680px !important;
}

.proof-card.quote span{
  margin-top:1.2rem !important;
  font-family:var(--fm) !important;
  font-size:9px !important;
  letter-spacing:1.8px !important;
  color:rgba(247,245,255,.42) !important;
  text-transform:uppercase !important;
}

/* image */
.proof-card.image img{
  width:100% !important;
  height:100% !important;
  min-height:250px !important;
  object-fit:cover !important;
  display:block !important;
  filter:brightness(.78) saturate(.92) !important;
  transition:transform .6s ease, filter .4s ease !important;
}

.proof-card.image:hover img{
  transform:scale(1.06) !important;
  filter:brightness(1) saturate(1.08) !important;
}

.proof-card.image div{
  position:absolute !important;
  left:16px !important;
  bottom:16px !important;
  z-index:4 !important;
  font-family:var(--fm) !important;
  font-size:8px !important;
  letter-spacing:2px !important;
  color:rgba(255,255,255,.82) !important;
  text-transform:uppercase !important;
  background:rgba(7,7,13,.68) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:999px !important;
  padding:6px 11px !important;
  backdrop-filter:blur(10px) !important;
}

/* process */
.mini-lbl{
  font-family:var(--fm) !important;
  font-size:9px !important;
  letter-spacing:3px !important;
  color:var(--v2) !important;
  text-transform:uppercase !important;
  margin-bottom:1.2rem !important;
}

.process-list{
  display:grid !important;
  grid-template-columns:repeat(2,1fr) !important;
  gap:12px !important;
}

.process-list div{
  padding:1rem !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.045) !important;
  border:1px solid rgba(255,255,255,.08) !important;
}

.process-list b{
  display:inline-flex !important;
  width:27px !important;
  height:27px !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:9px !important;
  background:var(--vl) !important;
  border:1px solid var(--vb) !important;
  color:var(--v2) !important;
  font-family:var(--fm) !important;
  font-size:9px !important;
  margin-bottom:.7rem !important;
}

.process-list span{
  display:block !important;
  font-size:13px !important;
  font-weight:800 !important;
  color:var(--ink) !important;
  margin-bottom:.25rem !important;
}

.process-list small{
  display:block !important;
  font-size:11.5px !important;
  line-height:1.55 !important;
  color:rgba(247,245,255,.46) !important;
}

/* tech */
.tech-cloud{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
}

.tech-cloud span{
  font-family:var(--fm) !important;
  font-size:9px !important;
  color:rgba(247,245,255,.55) !important;
  padding:8px 13px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.055) !important;
  border:1px solid rgba(255,255,255,.11) !important;
}

/* reveal fix */
#proof .rv{
  opacity:0;
  transform:translateY(18px) !important;
}

#proof .rv.on{
  opacity:1 !important;
  transform:none !important;
}

/* mobile */
@media(max-width:1000px){
  #proof{
    padding:6rem 1.5rem !important;
  }

  .proof-grid{
    grid-template-columns:repeat(2,1fr) !important;
  }

  .proof-card.stat,
  .proof-card.quote,
  .proof-card.image,
  .proof-card.process,
  .proof-card.tech{
    grid-column:span 2 !important;
  }
}

@media(max-width:560px){
  .proof-grid{
    grid-template-columns:1fr !important;
  }

  .proof-card.stat,
  .proof-card.quote,
  .proof-card.image,
  .proof-card.process,
  .proof-card.tech{
    grid-column:span 1 !important;
  }

  .process-list{
    grid-template-columns:1fr !important;
  }

  .proof-card.quote p{
    font-size:17px !important;
  }

  .proof-num{
    font-size:3.5rem !important;
  }
}

/* ===== EMERGENCY FIX: SHOW TRACK RECORD ===== */

#proof,
#proof *{
  visibility:visible !important;
}

#proof .rv,
#proof .proof-card,
#proof .proof-head{
  opacity:1 !important;
  transform:none !important;
}

#proof .proof-bar span[data-w="92"]{
  width:92% !important;
}

#proof .proof-bar span[data-w="98"]{
  width:98% !important;
}

/* ===== WHY SECTION RESTORE ===== */

#why{
  padding:9rem 5rem;
  border-top:1px solid var(--brd);
  background:var(--bg);
}

.wg{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7rem;
  align-items:start;
  margin-top:4rem;
}

.wsub{
  font-size:15.5px;
  color:var(--ink70);
  line-height:1.9;
  max-width:400px;
  margin-bottom:3rem;
  padding-left:1.2rem;
  border-left:3px solid var(--vb);
}

.wlist{
  display:flex;
  flex-direction:column;
}

.wi{
  display:flex;
  gap:14px;
  padding:1.2rem;
  border:1px solid transparent;
  border-bottom-color:var(--brd);
  transition:all .22s;
}

.wi:hover{
  background:var(--ink06);
  border-color:var(--brd2);
  border-radius:16px;
}

.wi-ic{
  width:40px;
  height:40px;
  border-radius:12px;
  flex-shrink:0;
  background:var(--vl);
  border:1px solid var(--vb);
  display:flex;
  align-items:center;
  justify-content:center;
}

.wi-ic svg{
  stroke:var(--v2);
  opacity:.82;
  width:16px;
  height:16px;
  fill:none;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.wi-t{
  font-size:13.5px;
  font-weight:800;
  color:var(--ink);
  margin-bottom:3px;
}

.wi-d{
  font-size:12px;
  color:var(--ink35);
  line-height:1.65;
}

.revs{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.rev{
  padding:1.55rem;
  border:1px solid var(--brd);
  border-radius:18px;
  background:linear-gradient(180deg,var(--card),var(--bg3));
}

.revst{
  color:var(--gold);
  font-size:11px;
  letter-spacing:2px;
  margin-bottom:.6rem;
}

.revt{
  color:var(--ink70);
  line-height:1.82;
  font-style:italic;
  margin-bottom:1rem;
  font-family:var(--fd);
  font-size:14px;
}

.revby{
  display:flex;
  align-items:center;
  gap:9px;
}

.revav{
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--vl);
  border:1px solid var(--vb);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--fm);
  font-size:9px;
  color:var(--v2);
}

.revn{
  font-size:12px;
  font-weight:800;
  color:var(--ink);
}

.revr{
  font-size:11px;
  color:var(--ink35);
}

@media(max-width:900px){
  .wg{
    grid-template-columns:1fr;
    gap:3rem;
  }
}
/* WHY SECTION — premium revenue animation */
.why-title .rev-glow{
  display:inline-block !important;
  position:relative !important;
  color:transparent !important;
  background:linear-gradient(110deg,#fff,var(--v2),var(--b),#fff) !important;
  background-size:220% 100% !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  animation:revTextGlow 4.5s ease-in-out infinite !important;
}

.why-title .rev-glow::after{
  content:'' !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:-6px !important;
  height:3px !important;
  border-radius:999px !important;
  background:linear-gradient(90deg,var(--v),var(--b),transparent) !important;
  transform-origin:left !important;
  animation:revUnderline 2.8s ease-in-out infinite !important;
  box-shadow:0 0 18px rgba(139,92,246,.45) !important;
}

@keyframes revTextGlow{
  0%,100%{background-position:0% 50%; filter:drop-shadow(0 0 0 rgba(139,92,246,0));}
  50%{background-position:100% 50%; filter:drop-shadow(0 0 18px rgba(139,92,246,.28));}
}

@keyframes revUnderline{
  0%,100%{transform:scaleX(.25); opacity:.35;}
  50%{transform:scaleX(1); opacity:1;}
}



/* ===== BOOK CALL FORM POPUP ===== */
.form-modal{
  position:fixed;
  inset:0;
  z-index:999999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:1.5rem;
  background:rgba(7,7,13,.78);
  backdrop-filter:blur(18px);
}

.form-modal.open{
  display:flex;
}

.form-box{
  width:min(520px,100%);
  position:relative;
  border-radius:28px;
  padding:2rem;
  background:linear-gradient(145deg,rgba(17,17,32,.98),rgba(10,10,20,.98));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 35px 100px rgba(0,0,0,.55),0 0 45px rgba(139,92,246,.16);
}

.form-close{
  position:absolute;
  top:16px;
  right:16px;
  width:34px;
  height:34px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:#fff;
  font-size:20px;
  cursor:pointer;
}

.form-kicker{
  font-family:var(--fm);
  font-size:8px;
  letter-spacing:2.5px;
  color:var(--v2);
  text-transform:uppercase;
  margin-bottom:.7rem;
}

.form-box h3{
  font-family:var(--fd);
  font-size:2.4rem;
  line-height:.95;
  margin-bottom:.8rem;
}

.form-box h3 em{
  color:var(--v2);
  font-style:italic;
}

.form-box p{
  color:var(--ink55);
  font-size:13px;
  line-height:1.7;
  margin-bottom:1.4rem;
}

.call-form{
  display:grid;
  gap:10px;
}

.call-form input,
.call-form textarea,
.call-form select{
  width:100%;
  border:none;
  outline:none;
  border-radius:14px;
  padding:13px 14px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.11);
  color:#fff;
  font-family:var(--fs);
  font-size:13px;
}

.call-form input::placeholder,
.call-form textarea::placeholder{
  color:rgba(247,245,255,.35);
}

.call-form textarea{
  min-height:105px;
  resize:vertical;
}

.call-form button{
  margin-top:4px;
  border:none;
  border-radius:999px;
  padding:15px 24px;
  cursor:pointer;
  font-weight:800;
  color:#07070D;
  background:linear-gradient(135deg,#fff,#d8ccff,#8bdfff);
  box-shadow:0 12px 34px rgba(139,92,246,.28);
}

.form-note{
  margin-top:12px;
  font-family:var(--fm);
  font-size:8px;
  letter-spacing:1.5px;
  color:rgba(247,245,255,.28);
  text-transform:uppercase;
}


/* Founder image — no side blank, face better positioned */
.founder-card .tm-av img{
  object-fit:cover !important;
  object-position:center 18% !important;
  padding:0 !important;
  background:#0B0B14 !important;
}

/* TEAM FINAL FIX — alignment + round images */
.tgrid{
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  gap:12px !important;
  align-items:stretch !important;
}

.tm{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
}

.tm-avw{
  position:relative !important;
  flex-shrink:0 !important;
}

.tm-av{
  width:64px !important;
  height:64px !important;
  border-radius:50% !important;
  overflow:hidden !important;
}

.tm-av img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  padding:0 !important;
  border-radius:50% !important;
  display:block !important;
  background:#0B0B14 !important;
}

/* Founder image position */
.founder-card .tm-av img{
  object-fit:cover !important;
  object-position:center 18% !important;
}



/* ===== TEAM SECTION PREMIUM UPGRADE ===== */

#team{
  position:relative !important;
  overflow:hidden !important;
  padding:10rem 5rem !important;
  background:
    radial-gradient(circle at 18% 18%,rgba(139,92,246,.18),transparent 34%),
    radial-gradient(circle at 82% 75%,rgba(56,189,248,.12),transparent 35%),
    linear-gradient(180deg,#0B0B14,#07070D) !important;
}

#team::before{
  content:'' !important;
  position:absolute !important;
  inset:0 !important;
  background:
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.024) 1px,transparent 1px) !important;
  background-size:42px 42px !important;
  pointer-events:none !important;
}

#team > *{
  position:relative !important;
  z-index:2 !important;
}

.tgrid{
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  gap:20px !important;
  margin-top:4rem !important;
  align-items:stretch !important;
}

.tm{
  min-height:400px !important;
  padding:1rem !important;
  border-radius:30px !important;
  background:
    linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025)) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:0 24px 70px rgba(0,0,0,.32) !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:1rem !important;
  overflow:hidden !important;
  position:relative !important;
  isolation:isolate !important;
  transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease !important;
}

.tm::before{
  content:'' !important;
  position:absolute !important;
  inset:-1px !important;
  z-index:-2 !important;
  background:
    radial-gradient(circle at 20% 15%,rgba(139,92,246,.28),transparent 34%),
    radial-gradient(circle at 88% 80%,rgba(56,189,248,.18),transparent 36%) !important;
  opacity:.65 !important;
}

.tm::after{
  content:'' !important;
  position:absolute !important;
  top:-120% !important;
  left:-60% !important;
  width:80% !important;
  height:260% !important;
  z-index:-1 !important;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent) !important;
  transform:rotate(22deg) !important;
  animation:teamCardShine 5.5s ease-in-out infinite !important;
}

.tm:hover{
  transform:translateY(-12px) scale(1.025) !important;
  border-color:rgba(185,163,255,.42) !important;
  box-shadow:
    0 38px 100px rgba(0,0,0,.50),
    0 0 55px rgba(139,92,246,.18) !important;
}

@keyframes teamCardShine{
  0%,45%{left:-85%;opacity:0;}
  58%{opacity:1;}
  78%,100%{left:120%;opacity:0;}
}

.tm-avw{
  position:relative !important;
  flex-shrink:0 !important;
}

.tm-av{
  width:150px !important;
  height:150px !important;
  border-radius:28px !important;
  overflow:hidden !important;
  border:1px solid rgba(185,163,255,.38) !important;
  background:#0B0B14 !important;
  box-shadow:
    0 20px 46px rgba(0,0,0,.38),
    0 0 30px rgba(139,92,246,.22) !important;
  position:relative !important;
}

.tm-av::after{
  content:'' !important;
  position:absolute !important;
  inset:0 !important;
  border-radius:28px !important;
  background:linear-gradient(135deg,rgba(255,255,255,.14),transparent 45%,rgba(139,92,246,.20)) !important;
  pointer-events:none !important;
}

.tm-av img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  padding:0 !important;
  border-radius:28px !important;
  display:block !important;
  background:#0B0B14 !important;
  filter:brightness(.95) saturate(.98) contrast(1.03) !important;
  transition:transform .55s ease, filter .35s ease !important;
}

.tm:hover .tm-av img{
  transform:scale(1.08) !important;
  filter:brightness(1.08) saturate(1.08) contrast(1.05) !important;
}

/* Ikjot image exact old good setting */
.founder-card .tm-av img{
  object-fit:cover !important;
  object-position:center 18% !important;
}

.tmrole{
  margin-top:.2rem !important;
  font-size:8px !important;
  letter-spacing:2.2px !important;
  padding:5px 11px !important;
}

.tmname{
  font-size:clamp(21px,2vw,27px) !important;
  line-height:1.15 !important;
  padding-bottom:4px !important;
  overflow:visible !important;
}

.tmdsc{
  font-size:13.2px !important;
  line-height:1.75 !important;
  color:rgba(247,245,255,.62) !important;
}

.tmsk{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:6px !important;
  margin-top:auto !important;
}

.tsk{
  font-size:8px !important;
  letter-spacing:.8px !important;
  padding:6px 10px !important;
  border-radius:999px !important;
  color:rgba(247,245,255,.52) !important;
  background:rgba(255,255,255,.055) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  transition:all .22s ease !important;
}

.tm:hover .tsk{
  color:var(--v2) !important;
  background:rgba(139,92,246,.14) !important;
  border-color:rgba(185,163,255,.34) !important;
}

/* floating team feel */
.tm:nth-child(1){animation:teamFloat 6s ease-in-out infinite;}
.tm:nth-child(2){animation:teamFloat 6.5s ease-in-out .7s infinite;}
.tm:nth-child(3){animation:teamFloat 7s ease-in-out 1.1s infinite;}
.tm:nth-child(4){animation:teamFloat 6.8s ease-in-out .4s infinite;}

@keyframes teamFloat{
  0%,100%{translate:0 0;}
  50%{translate:0 -8px;}
}

@media(max-width:1200px){
  .tgrid{
    grid-template-columns:repeat(2,1fr) !important;
  }
}

@media(max-width:768px){
  #team{
    padding:7rem 1.5rem !important;
  }

  .tgrid{
    grid-template-columns:1fr !important;
  }

  .tm{
    min-height:auto !important;
  }

  .tm-av{
    width:100px !important;
    height:100px !important;
  }
}


/* Fix Ikjot Singh name G cutting */
.founder-card .tmname{
  line-height:1.35 !important;
  padding-bottom:8px !important;
  margin-bottom:.15rem !important;
  overflow:visible !important;
}

.tmname,
.founder-card .tmname{
  font-family:var(--fd) !important;
  font-size:clamp(30px,2.9vw,42px) !important;
  font-weight:800 !important;
  line-height:1.08 !important;
  letter-spacing:.6px !important;
  padding-top:0 !important;
  padding-bottom:6px !important;
  margin-top:-4px !important;
  margin-bottom:-2px !important;
  overflow:visible !important;
  transform:none !important;
}


/* ===== NAV LOGO CLEAN WORDMARK ===== */

.nlogo{
  gap:0 !important;
}

.nlogo-m{
  display:none !important;
}

.nlogo-t{
  font-family:var(--fd) !important;
  font-size:30px !important;
  font-weight:800 !important;
  letter-spacing:-1.2px !important;
  line-height:1 !important;
  color:#fff !important;
  position:relative !important;
}

.nlogo-t em{
  font-style:normal !important;
  color:#fff !important;
  background:none !important;
  -webkit-background-clip:initial !important;
  background-clip:initial !important;
  animation:none !important;
}
.logo-dot{
  color:var(--v2) !important;
}

.nlogo-t::after{
  content:'' !important;
  position:absolute !important;
  left:2px !important;
  right:-4px !important;
  bottom:-8px !important;
  height:2px !important;
  border-radius:999px !important;
  background:linear-gradient(90deg,var(--v2),var(--b),transparent) !important;
  opacity:.65 !important;
}

@keyframes logoTextGlow{
  0%,100%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
}



/* ===== TEAM — PREMIUM 3D COVERFLOW SCROLL ===== */

#team{
  position:relative !important;
  overflow:hidden !important;
  padding:7rem 5rem 7.5rem !important;
  background:
    radial-gradient(circle at 18% 18%,rgba(139,92,246,.20),transparent 34%),
    radial-gradient(circle at 82% 74%,rgba(56,189,248,.13),transparent 36%),
    linear-gradient(180deg,#090914,#05050A) !important;
  isolation:isolate !important;
}

#team::before{
  content:'' !important;
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  background:
    linear-gradient(90deg,rgba(185,163,255,.05) 1px,transparent 1px),
    linear-gradient(rgba(56,189,248,.04) 1px,transparent 1px) !important;
  background-size:52px 52px !important;
  animation:teamGridDrift 18s linear infinite !important;
  mask-image:radial-gradient(ellipse 80% 75% at 50% 48%,black,transparent 84%) !important;
  pointer-events:none !important;
}

@keyframes teamGridDrift{
  from{background-position:0 0,0 0;}
  to{background-position:104px 52px,52px 104px;}
}

#team > *{
  position:relative !important;
  z-index:3 !important;
}

.team-head{
  max-width:760px !important;
  margin-bottom:2.3rem !important;
}

.team-title{
  line-height:.92 !important;
  text-shadow:0 14px 45px rgba(0,0,0,.55) !important;
}

.team-title em{
  color:transparent !important;
  background:linear-gradient(110deg,#fff,var(--v2),var(--b),#fff) !important;
  background-size:240% 100% !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  animation:teamTitleFlow 5s ease-in-out infinite !important;
}

@keyframes teamTitleFlow{
  0%,100%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
}

.team-sub{
  max-width:780px !important;
  margin-top:1.2rem !important;
  color:rgba(247,245,255,.62) !important;
  font-family:var(--fd) !important;
  font-size:21px !important;
  line-height:1.45 !important;
  letter-spacing:-.25px !important;
}

/* stage compact — no huge blank */
.team-cinema{
  position:relative !important;
  height:580px !important;
  overflow:hidden !important;
  perspective:1300px !important;
  transform-style:preserve-3d !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:34px !important;
  background:
    radial-gradient(circle at 50% 45%,rgba(139,92,246,.14),transparent 38%),
    linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.01)) !important;
  border:1px solid rgba(255,255,255,.09) !important;
  box-shadow:0 28px 90px rgba(0,0,0,.30) !important;
}

/* futuristic floor */
.team-floor{
  position:absolute !important;
  left:6% !important;
  right:6% !important;
  bottom:28px !important;
  height:160px !important;
  z-index:0 !important;
  transform:rotateX(70deg) !important;
  transform-origin:center bottom !important;
  background:
    linear-gradient(90deg,rgba(185,163,255,.11) 1px,transparent 1px),
    linear-gradient(rgba(56,189,248,.09) 1px,transparent 1px) !important;
  background-size:46px 46px !important;
  mask-image:linear-gradient(90deg,transparent,black 18%,black 82%,transparent) !important;
  opacity:.40 !important;
  animation:teamFloorMove 3.5s linear infinite !important;
}

@keyframes teamFloorMove{
  to{background-position:0 46px,46px 0;}
}

.team-holo-ring{
  position:absolute !important;
  width:440px !important;
  height:440px !important;
  border-radius:50% !important;
  border:1px solid rgba(185,163,255,.14) !important;
  box-shadow:0 0 70px rgba(139,92,246,.12), inset 0 0 55px rgba(56,189,248,.06) !important;
  animation:teamRingRotate 18s linear infinite !important;
  z-index:0 !important;
}

.team-holo-ring::before{
  content:'' !important;
  position:absolute !important;
  inset:70px !important;
  border-radius:50% !important;
  border:1px dashed rgba(56,189,248,.18) !important;
}

@keyframes teamRingRotate{
  to{transform:rotate(360deg);}
}

/* cards all visible */
.team-card{
  position:absolute !important;
  width:345px !important;
  height:455px !important;
  transform-style:preserve-3d !important;
  pointer-events:auto !important;
  opacity:1 !important;
  transition:
    transform .9s cubic-bezier(.16,1,.3,1),
    opacity .9s cubic-bezier(.16,1,.3,1),
    filter .9s cubic-bezier(.16,1,.3,1) !important;
  cursor:pointer !important;
}

.team-card-inner{
  position:relative !important;
  width:100% !important;
  height:100% !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
  border-radius:28px !important;
  padding:16px !important;
  background:
    linear-gradient(145deg,rgba(255,255,255,.105),rgba(255,255,255,.035)) !important;
  border:1px solid rgba(185,163,255,.22) !important;
  box-shadow:
    0 30px 80px rgba(0,0,0,.42),
    0 0 42px rgba(139,92,246,.12),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
  backdrop-filter:blur(18px) saturate(1.18) !important;
}

.team-card-inner::before{
  content:'' !important;
  position:absolute !important;
  inset:0 !important;
  background:
    radial-gradient(circle at 20% 16%,rgba(139,92,246,.28),transparent 36%),
    radial-gradient(circle at 88% 82%,rgba(56,189,248,.16),transparent 38%) !important;
  pointer-events:none !important;
}

.team-scan{
  position:absolute !important;
  left:-30% !important;
  right:-30% !important;
  top:-50% !important;
  height:100px !important;
  z-index:9 !important;
  background:linear-gradient(180deg,transparent,rgba(185,163,255,.18),rgba(56,189,248,.10),transparent) !important;
  transform:rotate(12deg) translateY(-160%) !important;
  animation:teamCardScan 5s ease-in-out infinite !important;
  pointer-events:none !important;
}

@keyframes teamCardScan{
  0%,42%{transform:rotate(12deg) translateY(-180%);opacity:0;}
  55%{opacity:1;}
  86%,100%{transform:rotate(12deg) translateY(600%);opacity:0;}
}

.team-photo-wrap{
  width:100% !important;
  height:195px !important;
  border-radius:22px !important;
  overflow:hidden !important;
  background:#05050A !important;
  border:1px solid rgba(255,255,255,.14) !important;
  box-shadow:0 18px 48px rgba(0,0,0,.42) !important;
  position:relative !important;
  z-index:2 !important;
  flex-shrink:0 !important;
}

.team-photo-wrap::after{
  content:'' !important;
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(135deg,rgba(255,255,255,.16),transparent 45%,rgba(56,189,248,.14)) !important;
  pointer-events:none !important;
}

.team-photo-wrap img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center 12% !important;
  display:block !important;
  filter:brightness(.94) saturate(.98) contrast(1.04) !important;
  transition:transform .6s ease, filter .35s ease !important;
}

.team-card[data-index="0"] .team-photo-wrap img{
  object-position:center 8% !important;
}

.team-info{
  position:relative !important;
  z-index:2 !important;
  padding:13px 4px 2px !important;
}

.team-node{
  font-family:var(--fm) !important;
  font-size:7px !important;
  letter-spacing:2px !important;
  color:rgba(185,163,255,.70) !important;
  text-transform:uppercase !important;
  margin-bottom:7px !important;
}

.team-role{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  font-family:var(--fm) !important;
  font-size:7px !important;
  letter-spacing:1.5px !important;
  color:var(--v2) !important;
  text-transform:uppercase !important;
  padding:5px 9px !important;
  border-radius:999px !important;
  background:rgba(139,92,246,.14) !important;
  border:1px solid rgba(185,163,255,.28) !important;
  margin-bottom:10px !important;
}

.team-role::before{
  content:'' !important;
  width:5px !important;
  height:5px !important;
  border-radius:50% !important;
  background:var(--green) !important;
  box-shadow:0 0 10px rgba(34,197,94,.85) !important;
}

.team-info h3{
  font-family:var(--fd) !important;
  font-size:32px !important;
  line-height:1 !important;
  letter-spacing:-.8px !important;
  color:#fff !important;
  margin-bottom:8px !important;
  text-shadow:0 10px 30px rgba(0,0,0,.45) !important;
}

.team-info p{
  font-size:10.6px !important;
  line-height:1.42 !important;
  color:rgba(247,245,255,.60) !important;
  margin-bottom:10px !important;
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
}

.team-skills{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:4px !important;
  max-height:82px !important;
  overflow:hidden !important;
  align-content:flex-start !important;
}

.team-skills span{
  font-family:var(--fm) !important;
  font-size:6.1px !important;
  letter-spacing:.45px !important;
  color:rgba(247,245,255,.62) !important;
  padding:4px 6px !important;
border-radius:999px !important;
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.11) !important;
  white-space:nowrap !important;
}

/* 4 visible positions */
.team-card.active{
transform:translateX(0) translateY(-18px) translateZ(170px) rotateY(0deg) scale(1.06) !important;
  filter:blur(0) brightness(1.08) !important;
  z-index:8 !important;
}

.team-card.prev{
  transform:translateX(-345px) translateY(8px) translateZ(0) rotateY(28deg) scale(.84) !important;
  filter:blur(.4px) brightness(.78) saturate(.88) !important;
  opacity:.78 !important;
  z-index:5 !important;
}

.team-card.next{
  transform:translateX(345px) translateY(8px) translateZ(0) rotateY(-28deg) scale(.84) !important;
  filter:blur(.4px) brightness(.78) saturate(.88) !important;
  opacity:.78 !important;
  z-index:5 !important;
}

.team-card.back{
  transform:translateY(54px) translateZ(-210px) rotateY(0deg) scale(.68) !important;  filter:blur(2.4px) brightness(.55) saturate(.75) !important;
  opacity:.48 !important;
  z-index:2 !important;
}

/* active glow */
.team-card.active .team-card-inner{
  border-color:rgba(185,163,255,.48) !important;
  box-shadow:
    0 42px 115px rgba(0,0,0,.58),
    0 0 70px rgba(139,92,246,.25),
    0 0 38px rgba(56,189,248,.12),
    inset 0 1px 0 rgba(255,255,255,.14) !important;
}

.team-card.active .team-photo-wrap img{
  transform:scale(1.07) !important;
  filter:brightness(1.08) saturate(1.08) contrast(1.06) !important;
}

/* controls */
.team-nav{
  position:absolute !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  z-index:20 !important;
  width:44px !important;
  height:44px !important;
  border-radius:50% !important;
  border:1px solid rgba(255,255,255,.16) !important;
  background:rgba(7,7,13,.72) !important;
  color:#fff !important;
  font-size:28px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
  backdrop-filter:blur(12px) !important;
}

.team-prev{left:22px !important;}
.team-next{right:22px !important;}

.team-nav:hover{
  background:rgba(255,255,255,.10) !important;
  border-color:rgba(185,163,255,.36) !important;
}

.team-dots{
  position:absolute !important;
  left:50% !important;
  bottom:18px !important;
  transform:translateX(-50%) !important;
  display:flex !important;
  gap:8px !important;
  z-index:20 !important;
}

.team-dots button{
  width:8px !important;
  height:8px !important;
  border-radius:999px !important;
  border:none !important;
  background:rgba(255,255,255,.24) !important;
  cursor:pointer !important;
  transition:width .25s ease, background .25s ease !important;
}

.team-dots button.active{
  width:30px !important;
  background:linear-gradient(90deg,var(--v2),var(--b)) !important;
  box-shadow:0 0 18px rgba(139,92,246,.45) !important;
}

/* mobile: show one main + small side hints */
@media(max-width:900px){
  #team{
    padding:6rem 1.5rem 6.5rem !important;
  }

  .team-head{
    margin-bottom:1.8rem !important;
  }

  .team-cinema{
    height:520px !important;
  }

  .team-card{
    width:310px !important;
    height:500px !important;
  }

  .team-card.active{
    transform:translateX(0) translateZ(120px) scale(1.02) !important;
  }

  .team-card.prev{
    transform:translateX(-210px) translateZ(-90px) rotateY(24deg) scale(.74) !important;
    opacity:.42 !important;
  }

  .team-card.next{
    transform:translateX(210px) translateZ(-90px) rotateY(-24deg) scale(.74) !important;
    opacity:.42 !important;
  }

  .team-card.back{
    opacity:.18 !important;
  }

  .team-nav{
    width:40px !important;
    height:40px !important;
  }

  .team-prev{left:8px !important;}
  .team-next{right:8px !important;}
}

@media(max-width:520px){
  .team-cinema{
    height:500px !important;
    overflow:hidden !important;
  }

  .team-card{
    width:292px !important;
    height:500px !important;
  }

  .team-card.prev,
  .team-card.next{
    opacity:.25 !important;
  }

  .team-card.back{
    opacity:0 !important;
  }

  .team-photo-wrap{
    height:210px !important;
  }

  .team-info h3{
    font-size:29px !important;
  }
}


/* ===== FINAL TEAM SECTION FIX — NO OVERLAP + FULL IMAGES ===== */

/* section nu proper height + CTA ton distance */
#team{
  padding:7rem 5rem 8.5rem !important;
  overflow:hidden !important;
  position:relative !important;
}

/* heading always above cards */
.team-head{
  position:relative !important;
  z-index:50 !important;
  max-width:100% !important;
  margin-bottom:2.4rem !important;
}

.team-title{
  white-space:nowrap !important;
  font-size:clamp(3rem,5vw,6rem) !important;
  line-height:1.05 !important;
  padding-bottom:.12em !important;
}

.team-sub{
  font-family:var(--fd) !important;
  max-width:780px !important;
  font-size:20px !important;
  line-height:1.45 !important;
  color:rgba(247,245,255,.62) !important;
}

/* main stage fixed height so CTA never mixes */
.team-cinema{
  position:relative !important;
  height:590px !important;
  overflow:hidden !important;
  z-index:5 !important;
  margin-top:1rem !important;
}

/* cards slightly lower, not behind heading */
.team-card{
  width:345px !important;
  height:465px !important;
}

/* image box bigger and clean */
.team-photo-wrap{
  height:220px !important;
  background:#05050A !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
}

/* full image visible — no head/bottom cut */
.team-photo-wrap img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  transform:none !important;
  padding:0 !important;
}

/* stop zoom from cutting image on active card */
.team-card.active .team-photo-wrap img,
.team-card:hover .team-photo-wrap img{
  transform:none !important;
  object-fit:contain !important;
  object-position:center center !important;
}

/* active card position */
.team-card.active{
  transform:translateX(0) translateY(8px) translateZ(150px) rotateY(0deg) scale(1.03) !important;
}

/* side cards controlled inside section */
.team-card.prev{
  transform:translateX(-345px) translateY(30px) translateZ(0) rotateY(28deg) scale(.82) !important;
}

.team-card.next{
  transform:translateX(345px) translateY(30px) translateZ(0) rotateY(-28deg) scale(.82) !important;
}

.team-card.back{
  transform:translateY(78px) translateZ(-220px) rotateY(0deg) scale(.66) !important;
}

/* text compact so bottom empty space na bane */
.team-info{
  padding:11px 4px 2px !important;
}

.team-info h3{
  font-size:30px !important;
  line-height:1.08 !important;
  margin-bottom:6px !important;
}

.team-info p{
  font-size:10.5px !important;
  line-height:1.42 !important;
  margin-bottom:8px !important;
  -webkit-line-clamp:2 !important;
}

.team-skills{
  gap:4px !important;
  max-height:74px !important;
  overflow:hidden !important;
}

.team-skills span{
  font-size:6px !important;
  padding:4px 6px !important;
}

/* dots bottom safe */
.team-dots{
  bottom:20px !important;
}

/* mobile safety */
@media(max-width:900px){
  #team{
    padding:6rem 1.5rem 7rem !important;
  }

  .team-title{
    white-space:normal !important;
    font-size:clamp(2.8rem,12vw,4.4rem) !important;
  }

  .team-cinema{
    height:560px !important;
    overflow:hidden !important;
  }

  .team-card{
    width:310px !important;
    height:475px !important;
  }

  .team-photo-wrap{
    height:215px !important;
  }
}




/* ===== FINAL TEAM FIX — FULL IMAGE, 75% PHOTO, NO HEAD CUT ===== */

#team{
  padding:7rem 5rem 8rem !important;
  overflow:hidden !important;
  position:relative !important;
}

.team-head{
  position:relative !important;
  z-index:50 !important;
  margin-bottom:1.4rem !important;
}

.team-title{
  white-space:nowrap !important;
  font-size:clamp(3rem,5vw,6rem) !important;
  line-height:1.05 !important;
  padding-bottom:.12em !important;
}

.team-sub{
  font-family:var(--fd) !important;
  max-width:780px !important;
  font-size:20px !important;
  line-height:1.45 !important;
  color:rgba(247,245,255,.62) !important;
}

/* stage enough height, but not mixing with CTA */
.team-cinema{
  height:650px !important;
  overflow:hidden !important;
  margin-top:.8rem !important;
  margin-bottom:0 !important;
  align-items:center !important;
}

/* card taller because photo must take 75% */
.team-card{
  width:350px !important;
  height:540px !important;
}

/* card internal padding small so image gets more space */
.team-card-inner{
  padding:12px !important;
  border-radius:28px !important;
}

/* image = around 75% of card height */
.team-photo-wrap{
  height:405px !important;
  width:100% !important;
  border-radius:22px !important;
  overflow:hidden !important;
  background:#05050A !important;
  flex-shrink:0 !important;
}

/* show full person/image: no head cut */
.team-photo-wrap img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  padding:0 !important;
  transform:none !important;
  background:#05050A !important;
}

/* no zoom, zoom was cutting head */
.team-card.active .team-photo-wrap img,
.team-card:hover .team-photo-wrap img{
  transform:none !important;
  object-fit:contain !important;
  object-position:center center !important;
}

/* text compact because image is bigger */
.team-info{
  padding:9px 3px 0 !important;
}

.team-node{
  font-size:6.5px !important;
  margin-bottom:5px !important;
}

.team-role{
  font-size:6.5px !important;
  padding:4px 8px !important;
  margin-bottom:6px !important;
}

.team-info h3{
  font-size:27px !important;
  line-height:1.05 !important;
  margin-bottom:4px !important;
}

.team-info p{
  display:none !important;
}

.team-skills{
  max-height:48px !important;
  overflow:hidden !important;
  gap:3px !important;
}

.team-skills span{
  font-size:5.8px !important;
  padding:3px 5px !important;
}

/* positions: lower enough so top doesn't cut */
.team-card.active{
  transform:translateX(0) translateY(20px) translateZ(150px) rotateY(0deg) scale(1.01) !important;
}

.team-card.prev{
  transform:translateX(-350px) translateY(44px) translateZ(0) rotateY(28deg) scale(.80) !important;
}

.team-card.next{
  transform:translateX(350px) translateY(44px) translateZ(0) rotateY(-28deg) scale(.80) !important;
}

.team-card.back{
  transform:translateY(96px) translateZ(-220px) rotateY(0deg) scale(.64) !important;
}

/* dots safe inside */
.team-dots{
  bottom:18px !important;
}

/* mobile */
@media(max-width:900px){
  #team{
    padding:6rem 1.5rem 7rem !important;
  }

  .team-title{
    white-space:normal !important;
    font-size:clamp(2.8rem,12vw,4.4rem) !important;
  }

  .team-cinema{
    height:630px !important;
    overflow:hidden !important;
  }

  .team-card{
    width:310px !important;
    height:520px !important;
  }

  .team-photo-wrap{
    height:385px !important;
  }

  .team-card.active{
    transform:translateX(0) translateY(18px) translateZ(120px) scale(1) !important;
  }

  .team-card.prev{
    transform:translateX(-210px) translateY(42px) translateZ(-90px) rotateY(24deg) scale(.72) !important;
  }

  .team-card.next{
    transform:translateX(210px) translateY(42px) translateZ(-90px) rotateY(-24deg) scale(.72) !important;
  }
}



/* ===== TEAM CARD 25% SMALLER — SAME IMAGE FEEL, NO LANGUAGE CUT ===== */

#team{
  padding:7rem 5rem 8.5rem !important;
}

/* stage thoda compact */
.team-cinema{
  height:560px !important;
  overflow:hidden !important;
  margin-top:1rem !important;
}

/* card 25% chota */
.team-card{
  width:265px !important;
  height:430px !important;
}

/* inner padding choti */
.team-card-inner{
  padding:10px !important;
  border-radius:24px !important;
}

/* image still main area rahe, but card size de hisab naal */
.team-photo-wrap{
  height:275px !important;
  border-radius:20px !important;
}

/* image setting same: no blank sides, head safe */
.team-photo-wrap img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center 12% !important;
  transform:none !important;
  padding:0 !important;
}

/* per-image small adjustment */
.team-card[data-index="0"] .team-photo-wrap img{
  object-position:center 8% !important;
}

.team-card[data-index="1"] .team-photo-wrap img{
  object-position:center 10% !important;
}

.team-card[data-index="2"] .team-photo-wrap img{
  object-position:center 13% !important;
}

.team-card[data-index="3"] .team-photo-wrap img{
  object-position:center 12% !important;
}

/* zoom off, otherwise cut hovega */
.team-card.active .team-photo-wrap img,
.team-card:hover .team-photo-wrap img{
  transform:none !important;
}

/* text compact */
.team-info{
  padding:8px 3px 0 !important;
}

.team-node{
  font-size:5.6px !important;
  letter-spacing:1.4px !important;
  margin-bottom:4px !important;
}

.team-role{
  font-size:5.7px !important;
  letter-spacing:1.1px !important;
  padding:3px 7px !important;
  margin-bottom:5px !important;
}

.team-role::before{
  width:4px !important;
  height:4px !important;
}

.team-info h3{
  font-size:22px !important;
  line-height:1.05 !important;
  margin-bottom:4px !important;
}

.team-info p{
  font-size:8.6px !important;
  line-height:1.28 !important;
  margin-bottom:5px !important;
  -webkit-line-clamp:2 !important;
}

/* languages/tags cut na hon */
.team-skills{
  max-height:54px !important;
  overflow:hidden !important;
  gap:3px !important;
}

.team-skills span{
  font-size:4.9px !important;
  padding:3px 4.5px !important;
  letter-spacing:.25px !important;
}

/* positions adjust according to smaller card */
.team-card.active{
  transform:translateX(0) translateY(18px) translateZ(135px) rotateY(0deg) scale(1) !important;
}

.team-card.prev{
  transform:translateX(-280px) translateY(42px) translateZ(0) rotateY(28deg) scale(.82) !important;
}

.team-card.next{
  transform:translateX(280px) translateY(42px) translateZ(0) rotateY(-28deg) scale(.82) !important;
}

.team-card.back{
  transform:translateY(82px) translateZ(-200px) rotateY(0deg) scale(.62) !important;
}

/* arrows closer because cards smaller */
.team-prev{
  left:18px !important;
}

.team-next{
  right:18px !important;
}

.team-dots{
  bottom:18px !important;
}

/* mobile */
@media(max-width:900px){
  .team-cinema{
    height:535px !important;
  }

  .team-card{
    width:255px !important;
    height:420px !important;
  }

  .team-photo-wrap{
    height:270px !important;
  }

  .team-card.active{
    transform:translateX(0) translateY(18px) translateZ(110px) scale(1) !important;
  }

  .team-card.prev{
    transform:translateX(-175px) translateY(40px) translateZ(-80px) rotateY(24deg) scale(.72) !important;
  }

  .team-card.next{
    transform:translateX(175px) translateY(40px) translateZ(-80px) rotateY(-24deg) scale(.72) !important;
  }
}


/* ===== FINAL TEAM IMAGE FIX — NO BLACK BLANK + HEAD SAFE ===== */

/* stage safe */
.team-cinema{
  height:560px !important;
  overflow:hidden !important;
  margin-top:1rem !important;
}

/* card 25% smaller */
.team-card{
  width:265px !important;
  height:430px !important;
}

.team-card-inner{
  padding:10px !important;
  border-radius:24px !important;
  overflow:hidden !important;
}

/* photo area large, but not too tall */
.team-photo-wrap{
  width:100% !important;
  height:292px !important;
  border-radius:20px !important;
  overflow:hidden !important;
  background:#05050A !important;
  display:block !important;
  flex-shrink:0 !important;
}

/* IMPORTANT: cover = no black blank */
.team-photo-wrap img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center 18% !important;
  display:block !important;
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
  transform:none !important;
}

/* per-image face/head adjustment */
.team-card[data-index="0"] .team-photo-wrap img{
  object-position:center 10% !important;
}

.team-card[data-index="1"] .team-photo-wrap img{
  object-position:center 16% !important;
}

.team-card[data-index="2"] .team-photo-wrap img{
  object-position:center 18% !important;
}

.team-card[data-index="3"] .team-photo-wrap img{
  object-position:center 14% !important;
}

/* no zoom, otherwise crop bad ho jandi */
.team-card.active .team-photo-wrap img,
.team-card:hover .team-photo-wrap img{
  object-fit:cover !important;
  transform:none !important;
}

/* text compact */
.team-info{
  padding:8px 3px 0 !important;
}

.team-node{
  font-size:5.4px !important;
  letter-spacing:1.3px !important;
  margin-bottom:4px !important;
}

.team-role{
  font-size:5.6px !important;
  letter-spacing:1px !important;
  padding:3px 7px !important;
  margin-bottom:5px !important;
}

.team-role::before{
  width:4px !important;
  height:4px !important;
}

.team-info h3{
  font-size:22px !important;
  line-height:1.05 !important;
  margin-bottom:4px !important;
}

.team-info p{
  font-size:8.4px !important;
  line-height:1.25 !important;
  margin-bottom:5px !important;
  -webkit-line-clamp:2 !important;
}

.team-skills{
  max-height:50px !important;
  overflow:hidden !important;
  gap:3px !important;
}

.team-skills span{
  font-size:4.8px !important;
  padding:3px 4.5px !important;
  letter-spacing:.2px !important;
}

/* smaller card positions */
.team-card.active{
  transform:translateX(0) translateY(18px) translateZ(135px) rotateY(0deg) scale(1) !important;
}

.team-card.prev{
  transform:translateX(-280px) translateY(42px) translateZ(0) rotateY(28deg) scale(.82) !important;
}

.team-card.next{
  transform:translateX(280px) translateY(42px) translateZ(0) rotateY(-28deg) scale(.82) !important;
}

.team-card.back{
  transform:translateY(82px) translateZ(-200px) rotateY(0deg) scale(.62) !important;
}

.team-dots{
  bottom:18px !important;
}

/* mobile */
@media(max-width:900px){
  .team-cinema{
    height:535px !important;
  }

  .team-card{
    width:255px !important;
    height:420px !important;
  }

  .team-photo-wrap{
    height:285px !important;
  }

  .team-card.active{
    transform:translateX(0) translateY(18px) translateZ(110px) scale(1) !important;
  }

  .team-card.prev{
    transform:translateX(-175px) translateY(40px) translateZ(-80px) rotateY(24deg) scale(.72) !important;
  }

  .team-card.next{
    transform:translateX(175px) translateY(40px) translateZ(-80px) rotateY(-24deg) scale(.72) !important;
  }
}

/* ===== TEAM DETAIL POPUP + NODE REMOVE ===== */

.team-node{
  display:none !important;
}

.team-detail-modal{
  position:fixed;
  inset:0;
  z-index:999999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:1.5rem;
  background:rgba(5,5,10,.78);
  backdrop-filter:blur(22px);
}

.team-detail-modal.open{
  display:flex;
}

.team-detail-box{
  width:min(720px,100%);
  position:relative;
  overflow:hidden;
  border-radius:32px;
  padding:1.4rem;
  background:
    radial-gradient(circle at 18% 20%,rgba(139,92,246,.28),transparent 34%),
    radial-gradient(circle at 86% 78%,rgba(56,189,248,.20),transparent 34%),
    linear-gradient(145deg,rgba(17,17,32,.98),rgba(7,7,13,.98));
  border:1px solid rgba(185,163,255,.28);
  box-shadow:
    0 45px 120px rgba(0,0,0,.68),
    0 0 70px rgba(139,92,246,.20);
}

.team-detail-box::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:34px 34px;
  pointer-events:none;
  opacity:.7;
}

.team-detail-box::after{
  content:'';
  position:absolute;
  top:-80%;
  left:-60%;
  width:60%;
  height:240%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);
  transform:rotate(22deg);
  animation:teamModalScan 4.8s ease-in-out infinite;
  pointer-events:none;
}

@keyframes teamModalScan{
  0%,45%{left:-75%;opacity:0;}
  58%{opacity:1;}
  82%,100%{left:125%;opacity:0;}
}

.team-detail-close{
  position:absolute;
  top:18px;
  right:18px;
  z-index:8;
  width:38px;
  height:38px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.07);
  color:#fff;
  font-size:22px;
  cursor:pointer;
  backdrop-filter:blur(10px);
}

.team-detail-content{
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:230px 1fr;
  gap:1.3rem;
  align-items:start;
}

.team-detail-img{
  height:330px;
  border-radius:24px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.15);
  background:#05050A;
  box-shadow:0 24px 70px rgba(0,0,0,.46);
}

.team-detail-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 14%;
  display:block;
}

.team-detail-kicker{
  font-family:var(--fm);
  font-size:8px;
  letter-spacing:2.6px;
  color:var(--v2);
  text-transform:uppercase;
  margin-bottom:.6rem;
}

.team-detail-name{
  font-family:var(--fd);
  font-size:clamp(2.2rem,4vw,3.6rem);
  line-height:.95;
  color:#fff;
  margin-bottom:.6rem;
}

.team-detail-role{
  display:inline-flex;
  font-family:var(--fm);
  font-size:8px;
  letter-spacing:1.7px;
  color:var(--b);
  text-transform:uppercase;
  padding:6px 11px;
  border-radius:999px;
  background:rgba(56,189,248,.10);
  border:1px solid rgba(56,189,248,.24);
  margin-bottom:1rem;
}

.team-detail-desc{
  font-size:13px;
  line-height:1.75;
  color:rgba(247,245,255,.68);
  margin-bottom:1rem;
}

.team-detail-skills{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.team-detail-skills span{
  font-family:var(--fm);
  font-size:8px;
  letter-spacing:.6px;
  color:rgba(247,245,255,.70);
  padding:6px 9px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
}

@media(max-width:650px){
  .team-detail-content{
    grid-template-columns:1fr;
  }

  .team-detail-img{
    height:300px;
  }
}

/* ===== FIX: BEFORE / AFTER LABEL TIMING SYNC ===== */

/* same timing for everything */
.ba-after-wrap,
.ba-slider,
.before-after-box .before-isit-text,
.ba-old,
.ba-new,
.ba-after-wrap::after{
  animation-duration:11s !important;
}

/* after image reveal timing */
.ba-after-wrap{
  animation-name:baRevealClipFixed !important;
}

/* slider timing */
.ba-slider{
  animation-name:baSliderMoveFixed !important;
}

/* BEFORE text/tag only visible before reveal starts */
.before-after-box .before-isit-text,
.ba-old{
  animation-name:beforeLabelFixed !important;
}

/* AFTER tag/text only visible when after image is showing */
.ba-new,
.ba-after-wrap::after{
  animation-name:afterLabelFixed !important;
}

/* before image full visible */
@keyframes baRevealClipFixed{
  0%,18%{
    clip-path:inset(0 100% 0 0);
  }

  52%,78%{
    clip-path:inset(0 0 0 0);
  }

  100%{
    clip-path:inset(0 100% 0 0);
  }
}

@keyframes baSliderMoveFixed{
  0%,18%{
    left:0%;
  }

  52%,78%{
    left:100%;
  }

  100%{
    left:0%;
  }
}

@keyframes beforeLabelFixed{
  0%,20%{
    opacity:1;
    visibility:visible;
  }

  26%,100%{
    opacity:0;
    visibility:hidden;
  }
}

@keyframes afterLabelFixed{
  0%,36%{
    opacity:0;
    visibility:hidden;
  }

  48%,76%{
    opacity:1;
    visibility:visible;
  }

  86%,100%{
    opacity:0;
    visibility:hidden;
  }
}

/* ===== FIX: BOTTOM MINI IMAGES ALIGN + BIGGER ===== */

.lay-monitor{
  height:390px !important;
}

/* before-after main box thoda upar, mini images lai space */
.before-after-box{
  top:24px !important;
  height:235px !important;
}

/* bottom images bigger + centered */
.ba-mini-row{
  left:28px !important;
  right:28px !important;
  bottom:22px !important;
  height:88px !important;
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  gap:14px !important;
  align-items:center !important;
}

/* mini cards bigger and clean */
.ba-mini{
  height:88px !important;
  border-radius:18px !important;
  overflow:hidden !important;
  background:#08080f !important;
  border:1px solid rgba(255,255,255,.13) !important;
  box-shadow:0 16px 42px rgba(0,0,0,.38) !important;
}

/* image fit better */
.ba-mini img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  filter:brightness(.82) saturate(.96) !important;
}

/* label thoda readable */
.ba-mini span{
  left:9px !important;
  right:9px !important;
  bottom:8px !important;
  font-size:7.2px !important;
  padding:4px 7px !important;
  background:rgba(7,7,13,.72) !important;
}

/* hover clean */
.ba-mini:hover img{
  filter:brightness(1) saturate(1.08) !important;
  transform:scale(1.05) !important;
}


/* ===== FOOTER LOGO + FONT UPGRADE ===== */

.ft-logo{
  align-items:center !important;
  gap:13px !important;
  text-decoration:none !important;
}

.ft-lm{
  width:44px !important;
  height:44px !important;
  border-radius:15px !important;
  position:relative !important;
  overflow:hidden !important;
  background:
    radial-gradient(circle at 25% 20%,rgba(255,255,255,.32),transparent 30%),
    linear-gradient(135deg,#17172b,#07070D 55%,#111827) !important;
  border:1px solid rgba(185,163,255,.36) !important;
  box-shadow:
    0 0 28px rgba(139,92,246,.28),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px !important;
  color:#fff !important;
  font-family:var(--fd) !important;
  font-size:20px !important;
  font-weight:800 !important;
  letter-spacing:-1px !important;
}

.ft-lm::before{
  content:'' !important;
  position:absolute !important;
  inset:-45% !important;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.24),transparent) !important;
  transform:translateX(-120%) rotate(25deg) !important;
  animation:footerLogoShine 4s ease-in-out infinite !important;
}

.ft-lm span{
  position:relative !important;
  z-index:2 !important;
  color:transparent !important;
  background:linear-gradient(180deg,#fff,var(--v2),var(--b)) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  text-shadow:0 0 16px rgba(139,92,246,.45) !important;
}

.ft-lt{
  font-family:var(--fd) !important;
  font-size:30px !important;
  font-weight:800 !important;
  letter-spacing:-1.2px !important;
  line-height:1 !important;
  color:#fff !important;
}

.ft-lt span{
  color:#fff !important;
  font-style:normal !important;
}

@keyframes footerLogoShine{
  0%,45%{
    transform:translateX(-120%) rotate(25deg);
    opacity:0;
  }
  60%{
    opacity:1;
  }
  100%{
    transform:translateX(120%) rotate(25deg);
    opacity:0;
  }
}


.join-kicker{
  font-family:var(--fm);
  font-size:7px;
  letter-spacing:2px;
  color:var(--v2);
  text-transform:uppercase;
  margin-bottom:.45rem;
}

.join-team h2{
  font-family:var(--fd);
  font-size:clamp(1.8rem,3vw,3rem);
  line-height:.95;
  color:#fff;
  margin-bottom:.55rem;
}

.join-team h2 em{
  color:var(--v2);
  font-style:italic;
}

.join-team p{
  max-width:500px;
  color:rgba(247,245,255,.58);
  font-size:12.5px;
  line-height:1.6;
}

.join-btn{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 22px;
  border-radius:999px;
  background:linear-gradient(135deg,#fff,#d8ccff,#8bdfff);
  color:#07070D !important;
  font-weight:800;
  font-size:12px;
  box-shadow:0 10px 28px rgba(139,92,246,.25);
}

@media(max-width:768px){
  .join-team{
    padding:0 1.5rem 3.5rem !important;
  }

  .join-team-box{
    flex-direction:column;
    align-items:flex-start;
    padding:1.2rem;
    border-radius:20px;
  }

  .join-btn{
    width:100%;
  }
}

/* ===== JOIN OUR TEAM — CTA MINI CARD ===== */



.join-team-mini-left{
  max-width:520px;
}

.join-kicker{
  font-family:var(--fm);
  font-size:7px;
  letter-spacing:2.3px;
  color:var(--v2);
  text-transform:uppercase;
  margin-bottom:.55rem;
}

.join-team-mini h3{
  font-family:var(--fd);
  font-size:clamp(2rem,3.3vw,3.4rem);
  line-height:.9;
  color:#fff;
  margin-bottom:.75rem;
}

.join-team-mini h3 em{
  color:var(--v2);
  font-style:italic;
}

.join-team-mini p{
  color:rgba(247,245,255,.56);
  font-size:12.5px;
  line-height:1.65;
  max-width:470px;
}

.join-btn-mini{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:13px 24px;
  border-radius:999px;
  background:linear-gradient(135deg,#fff,#d8ccff,#8bdfff);
  color:#07070D !important;
  font-weight:800;
  font-size:12px;
  box-shadow:0 12px 32px rgba(139,92,246,.28);
  border:1px solid rgba(255,255,255,.42);
}

/* CTA section spacing */
#cta .cta-sub{
  margin-bottom:2.2rem !important;
}

#cta .cta-note{
  margin-top:2.4rem !important;
}

#cta .cta-stats{
  margin-top:2.8rem !important;
}

/* overall section gaps */
#services,
#work,
#proof,
#why,
#team{
  margin-bottom:1.5rem !important;
}

@media(max-width:768px){
  .join-team-mini{
    min-height:auto;
    margin-top:2.2rem;
    padding:1.25rem;
    flex-direction:column;
    align-items:flex-start;
    border-radius:22px;
  }

  .join-btn-mini{
    width:100%;
  }
}


/* ===== FORCE SHOW JOIN TEAM INSIDE CTA ===== */

.join-team-mini{
  display:flex !important;
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  width:min(680px,100%) !important;
  min-height:255px !important;
  margin:2.6rem auto 0 !important;
  padding:1.35rem 1.45rem !important;
  border-radius:22px !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:1.2rem !important;
  text-align:left !important;
  position:relative !important;
  z-index:20 !important;
  background:
    radial-gradient(circle at 18% 20%,rgba(139,92,246,.14),transparent 34%),
    linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.02)) !important;
  border:1px solid rgba(255,255,255,.11) !important;
  box-shadow:0 18px 55px rgba(0,0,0,.32) !important;
}

.join-team-mini h3{
  font-family:var(--fd) !important;
  font-size:clamp(1.8rem,2.8vw,2.7rem) !important;
  line-height:.92 !important;
  color:#fff !important;
  margin-bottom:.65rem !important;
}

.join-team-mini h3 em{
  color:var(--v2) !important;
  font-style:normal !important;
}

.join-team-mini p{
  color:rgba(247,245,255,.56) !important;
  font-size:12px !important;
  line-height:1.6 !important;
  max-width:440px !important;
}

.join-btn-mini{
  display:inline-flex !important;
  flex-shrink:0 !important;
  align-items:center !important;
  justify-content:center !important;
  padding:12px 22px !important;
  border-radius:999px !important;
  background:linear-gradient(135deg,#fff,#d8ccff,#8bdfff) !important;
  color:#07070D !important;
  font-weight:800 !important;
  font-size:12px !important;
}

@media(max-width:768px){
  .join-team-mini{
    flex-direction:column !important;
    align-items:flex-start !important;
    min-height:auto !important;
    width:100% !important;
  }

  .join-btn-mini{
    width:100% !important;
  }
}




.join-after-left{
  max-width:680px !important;
}

.join-after-box p{
  max-width:620px !important;
}
/* ===== JOIN TEAM BUTTON — PREMIUM NO BLUE ===== */

.join-btn-mini,
.join-after-btn{
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate !important;
  padding:13px 26px !important;
  border-radius:999px !important;
  font-family:var(--fs) !important;
  font-size:12px !important;
  font-weight:900 !important;
  letter-spacing:.2px !important;
  color:#090914 !important;
  background:
    linear-gradient(135deg,#ffffff 0%,#efe8ff 45%,#f7c76a 100%) !important;
  border:1px solid rgba(255,255,255,.58) !important;
  box-shadow:
    0 14px 34px rgba(139,92,246,.28),
    0 8px 22px rgba(247,199,106,.16),
    inset 0 1px 0 rgba(255,255,255,.85) !important;
  text-decoration:none !important;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    filter .22s ease !important;
}

.join-btn-mini::before,
.join-after-btn::before{
  content:'' !important;
  position:absolute !important;
  inset:-2px !important;
  z-index:-1 !important;
  background:
    linear-gradient(
      120deg,
      transparent 0%,
      rgba(255,255,255,.85) 38%,
      transparent 72%
    ) !important;
  transform:translateX(-135%) skewX(-18deg) !important;
  animation:joinBtnShine 3s ease-in-out infinite !important;
}

.join-btn-mini::after,
.join-after-btn::after{
  content:'✦' !important;
  margin-left:8px !important;
  font-size:11px !important;
  color:#8B5CF6 !important;
}

.join-btn-mini:hover,
.join-after-btn:hover{
  transform:translateY(-3px) scale(1.035) !important;
  filter:brightness(1.04) !important;
  box-shadow:
    0 20px 48px rgba(139,92,246,.38),
    0 12px 28px rgba(247,199,106,.24),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
}

@keyframes joinBtnShine{
  0%,35%{
    transform:translateX(-135%) skewX(-18deg);
  }
  65%,100%{
    transform:translateX(135%) skewX(-18deg);
  }
}
/* ===== JOIN TEAM FINAL — FULL WIDTH + 70% SMALLER ===== */

.join-after-section{
  padding:1.2rem 0 1.4rem !important;
  background:#05050A !important;
  border-top:1px solid rgba(255,255,255,.08) !important;
  display:block !important;
}

.join-after-box{
  width:100% !important;
  min-height:78px !important;
  padding:.75rem 5rem !important;
  border-radius:0 !important;
  text-align:left !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:1.2rem !important;
  background:
    radial-gradient(circle at 18% 20%,rgba(139,92,246,.14),transparent 34%),
    linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.02)) !important;
  border-top:1px solid rgba(255,255,255,.11) !important;
  border-bottom:1px solid rgba(255,255,255,.11) !important;
  border-left:none !important;
  border-right:none !important;
  box-shadow:0 12px 34px rgba(0,0,0,.26) !important;
}

.join-after-kicker{
  font-family:var(--fm) !important;
  font-size:6px !important;
  letter-spacing:2px !important;
  color:var(--gold) !important;
  text-transform:uppercase !important;
  margin-bottom:.28rem !important;
}

.join-after-box h3{
  font-family:var(--fd) !important;
  font-size:clamp(1.25rem,2vw,1.8rem) !important;
  font-weight:800 !important;
  line-height:.95 !important;
  letter-spacing:-.5px !important;
  color:#fff !important;
  margin-bottom:.25rem !important;
}

.join-after-box h3 em{
  font-style:italic !important;
  color:transparent !important;
  background:linear-gradient(110deg,#fff,var(--v2),var(--gold)) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
}

.join-after-box p{
  max-width:520px !important;
  margin:0 !important;
  color:rgba(247,245,255,.58) !important;
  font-size:10.5px !important;
  line-height:1.45 !important;
}

.join-after-btn{
  flex-shrink:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:9px 18px !important;
  border-radius:999px !important;
  font-family:var(--fs) !important;
  font-size:10.5px !important;
  font-weight:900 !important;
  color:#090914 !important;
  background:linear-gradient(135deg,#ffffff 0%,#efe8ff 48%,#f7c76a 100%) !important;
  border:1px solid rgba(255,255,255,.55) !important;
  box-shadow:
    0 10px 26px rgba(139,92,246,.22),
    0 6px 18px rgba(247,199,106,.14) !important;
  text-decoration:none !important;
}

.join-after-btn:hover{
  transform:translateY(-2px) scale(1.02) !important;
}

@media(max-width:768px){
  .join-after-box{
    padding:1rem 1.5rem !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    min-height:auto !important;
  }

  .join-after-btn{
    width:100% !important;
  }
}


.join-after-box h3{
  font-family:var(--fd) !important;
  font-size:clamp(1.35rem,2.1vw,1.9rem) !important;
  font-weight:800 !important;
  line-height:1.05 !important;
  letter-spacing:-.6px !important;
  color:#fff !important;
  margin-bottom:.25rem !important;
  white-space:nowrap !important;
}

.join-after-kicker{
  font-family:var(--fm) !important;
  font-size:6.5px !important;
  letter-spacing:2.2px !important;
  color:var(--gold) !important;
  text-transform:uppercase !important;
  margin-bottom:.32rem !important;
}@media(max-width:768px){
  .join-after-box h3{
    white-space:normal !important;
  }
}


/* ===== JOIN TEAM FINAL FIX — CLEAN FULL WIDTH BAR ===== */

.join-after-section{
  width:100% !important;
  padding:0 !important;
  margin:0 !important;
  background:#05050A !important;
  border-top:1px solid rgba(255,255,255,.08) !important;
}

.join-after-box{
  width:100% !important;
  min-height:76px !important;
  padding:.8rem 5rem !important;
  border-radius:0 !important;

  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:2rem !important;

  background:
    radial-gradient(circle at 18% 50%,rgba(139,92,246,.16),transparent 32%),
    linear-gradient(90deg,rgba(255,255,255,.055),rgba(255,255,255,.018)) !important;

  border-top:1px solid rgba(255,255,255,.10) !important;
  border-bottom:1px solid rgba(255,255,255,.10) !important;
  border-left:none !important;
  border-right:none !important;
  box-shadow:none !important;
}


.join-after-kicker{
  font-family:var(--fm) !important;
  font-size:6.5px !important;
  line-height:1.5 !important;
  letter-spacing:2.4px !important;
  color:var(--gold) !important;
  text-transform:uppercase !important;
  margin:0 !important;
}


.join-after-box h3{
  font-family:var(--fd) !important;
  font-size:clamp(1.45rem,2.1vw,2rem) !important;
  font-weight:800 !important;
  line-height:1 !important;
  letter-spacing:-.7px !important;
  color:#fff !important;
  margin:0 !important;
  white-space:nowrap !important;
}

.join-after-box h3 em{
  font-style:italic !important;
  color:var(--v2) !important;
  background:none !important;
  -webkit-background-clip:initial !important;
  background-clip:initial !important;
}

.join-after-box p{
  max-width:620px !important;
  margin:0 !important;
  color:rgba(247,245,255,.56) !important;
  font-size:10.8px !important;
  line-height:1.45 !important;
  text-align:left !important;
}

.join-after-btn{
  flex-shrink:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  padding:10px 22px !important;
  border-radius:999px !important;

  font-family:var(--fs) !important;
  font-size:11px !important;
  font-weight:900 !important;
  letter-spacing:.1px !important;

  color:#090914 !important;
  background:linear-gradient(135deg,#ffffff 0%,#f1eaff 48%,#f7c76a 100%) !important;
  border:1px solid rgba(255,255,255,.58) !important;

  box-shadow:
    0 10px 26px rgba(139,92,246,.22),
    0 6px 18px rgba(247,199,106,.14),
    inset 0 1px 0 rgba(255,255,255,.85) !important;

  text-decoration:none !important;
  white-space:nowrap !important;
}

.join-after-btn::after{
  content:'✦' !important;
  margin-left:8px !important;
  font-size:10px !important;
  color:var(--v) !important;
}

.join-after-btn:hover{
  transform:translateY(-2px) scale(1.025) !important;
  box-shadow:
    0 16px 38px rgba(139,92,246,.32),
    0 8px 22px rgba(247,199,106,.22) !important;
}

@media(max-width:1000px){
  .join-after-box{
    padding:.9rem 2rem !important;
  }

  .join-after-content{
    grid-template-columns:1fr !important;
    gap:.35rem !important;
  }

  .join-after-main{
    grid-template-columns:1fr !important;
    gap:.35rem !important;
  }
}

@media(max-width:768px){
  .join-after-box{
    padding:1rem 1.5rem !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:.8rem !important;
  }

  .join-after-box h3{
    white-space:normal !important;
  }

  .join-after-btn{
    width:100% !important;
  }
}


/* ===== JOIN TEAM FINAL — STRAIGHT ISIT + TEXT STACKED ===== */

.join-after-section{
  width:100% !important;
  padding:0 !important;
  margin:0 !important;
  background:#05050A !important;
  border-top:1px solid rgba(255,255,255,.08) !important;
}

.join-after-box{
  width:100% !important;
  min-height:82px !important;
  padding:.85rem 5rem !important;
  border-radius:0 !important;

  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:2rem !important;

  background:
    radial-gradient(circle at 18% 50%,rgba(139,92,246,.16),transparent 34%),
    linear-gradient(90deg,rgba(255,255,255,.055),rgba(255,255,255,.018)) !important;

  border-top:1px solid rgba(255,255,255,.10) !important;
  border-bottom:1px solid rgba(255,255,255,.10) !important;
  border-left:none !important;
  border-right:none !important;
  box-shadow:none !important;
}

.join-after-left{
  flex:1 !important;
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
}

.join-after-kicker{
  font-family:var(--fm) !important;
  font-size:6.8px !important;
  line-height:1 !important;
  letter-spacing:2.4px !important;
  color:var(--gold) !important;
  text-transform:uppercase !important;
  margin:0 0 .38rem 0 !important;
}

.join-after-box h3{
  font-family:var(--fd) !important;
  font-size:clamp(1.45rem,2.1vw,2rem) !important;
  font-weight:800 !important;
  line-height:1.05 !important;
  letter-spacing:-.7px !important;
  color:#fff !important;
  margin:0 0 .32rem 0 !important;
  white-space:nowrap !important;
}

/* IsIt normal / straight */
.join-after-box h3 em{
  font-style:normal !important;
  color:var(--v2) !important;
  background:none !important;
  -webkit-background-clip:initial !important;
  background-clip:initial !important;
}

.join-after-box p{
  max-width:650px !important;
  margin:0 !important;
  color:rgba(247,245,255,.56) !important;
  font-size:10.8px !important;
  line-height:1.45 !important;
  text-align:left !important;
}

.join-after-btn{
  flex-shrink:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:10px 22px !important;
  border-radius:999px !important;

  font-family:var(--fs) !important;
  font-size:11px !important;
  font-weight:900 !important;
  color:#090914 !important;

  background:linear-gradient(135deg,#ffffff 0%,#f1eaff 48%,#f7c76a 100%) !important;
  border:1px solid rgba(255,255,255,.58) !important;
  box-shadow:
    0 10px 26px rgba(139,92,246,.22),
    0 6px 18px rgba(247,199,106,.14),
    inset 0 1px 0 rgba(255,255,255,.85) !important;

  text-decoration:none !important;
  white-space:nowrap !important;
}

.join-after-btn::after{
  content:'✦' !important;
  margin-left:8px !important;
  font-size:10px !important;
  color:var(--v) !important;
}

@media(max-width:768px){
  .join-after-box{
    padding:1rem 1.5rem !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:.8rem !important;
  }

  .join-after-box h3{
    white-space:normal !important;
  }

  .join-after-btn{
    width:100% !important;
  }
}


/* ===== CAREER APPLICATION FORM ===== */

.career-modal{
  position:fixed;
  inset:0;
  z-index:999999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:1.5rem;
  background:rgba(5,5,10,.78);
  backdrop-filter:blur(22px);
}

.career-modal.open{
  display:flex;
}

.career-box{
  width:min(560px,100%);
  position:relative;
  overflow:hidden;
  border-radius:30px;
  padding:2rem;
  background:
    radial-gradient(circle at 18% 20%,rgba(139,92,246,.25),transparent 34%),
    radial-gradient(circle at 86% 78%,rgba(247,199,106,.16),transparent 34%),
    linear-gradient(145deg,rgba(17,17,32,.98),rgba(7,7,13,.98));
  border:1px solid rgba(255,255,255,.15);
  box-shadow:
    0 45px 120px rgba(0,0,0,.68),
    0 0 65px rgba(139,92,246,.18);
}

.career-close{
  position:absolute;
  top:16px;
  right:16px;
  width:36px;
  height:36px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.07);
  color:#fff;
  font-size:22px;
  cursor:pointer;
}

.career-kicker{
  font-family:var(--fm);
  font-size:8px;
  letter-spacing:2.6px;
  color:var(--gold);
  text-transform:uppercase;
  margin-bottom:.7rem;
}

.career-box h3{
  font-family:var(--fd);
  font-size:clamp(2.2rem,4vw,3.4rem);
  line-height:.95;
  color:#fff;
  margin-bottom:.8rem;
}

.career-box h3 em{
  color:var(--v2);
  font-style:italic;
}

.career-box p{
  color:rgba(247,245,255,.58);
  font-size:13px;
  line-height:1.7;
  margin-bottom:1.3rem;
}

.career-form{
  display:grid;
  gap:10px;
}

.career-form input,
.career-form textarea,
.career-form select{
  width:100%;
  border:none;
  outline:none;
  border-radius:14px;
  padding:13px 14px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.11);
  color:#fff;
  font-family:var(--fs);
  font-size:13px;
}

.career-form input::placeholder,
.career-form textarea::placeholder{
  color:rgba(247,245,255,.35);
}

.career-form select option{
  background:#0B0B14;
  color:#fff;
}

.career-form textarea{
  min-height:100px;
  resize:vertical;
}

.resume-drop{
  min-height:105px;
  border-radius:18px;
  border:1px dashed rgba(247,199,106,.42);
  background:rgba(247,199,106,.06);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  cursor:pointer;
  text-align:center;
  transition:all .22s ease;
}

.resume-drop:hover{
  background:rgba(247,199,106,.10);
  border-color:rgba(247,199,106,.65);
}

.resume-drop input{
  display:none;
}

.resume-icon{
  width:34px;
  height:34px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#fff,#efe8ff,#f7c76a);
  color:#090914;
  font-weight:900;
  margin-bottom:4px;
}

.resume-drop strong{
  font-size:13px;
  color:#fff;
}

.resume-drop small{
  font-family:var(--fm);
  font-size:8px;
  letter-spacing:1.2px;
  color:rgba(247,245,255,.42);
  text-transform:uppercase;
}

.career-form button{
  margin-top:4px;
  border:none;
  border-radius:999px;
  padding:15px 24px;
  cursor:pointer;
  font-weight:900;
  color:#07070D;
  background:linear-gradient(135deg,#ffffff 0%,#efe8ff 48%,#f7c76a 100%);
  box-shadow:
    0 14px 34px rgba(139,92,246,.28),
    0 8px 22px rgba(247,199,106,.16);
}

.career-note{
  margin-top:12px;
  font-family:var(--fm);
  font-size:8px;
  letter-spacing:1.5px;
  color:rgba(247,245,255,.30);
  text-transform:uppercase;
}

.join-after-btn{
  border:none !important;
  cursor:pointer !important;
}


.career-upload{
  display:block !important;
  border:1px dashed rgba(255,255,255,.18) !important;
  background:rgba(255,255,255,.045) !important;
  border-radius:16px !important;
  padding:14px !important;
  cursor:pointer !important;
}

.career-upload input{
  display:none !important;
}

.career-upload span{
  display:block !important;
  color:#fff !important;
  font-weight:800 !important;
  font-size:13px !important;
  margin-bottom:4px !important;
}

.career-upload small{
  display:block !important;
  color:rgba(247,245,255,.42) !important;
  font-size:11px !important;
}

.file-preview{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  margin-top:8px !important;
}

.file-chip{
  display:flex !important;
  align-items:center !important;
  gap:7px !important;
  padding:7px 10px !important;
  border-radius:999px !important;
  background:rgba(139,92,246,.14) !important;
  border:1px solid rgba(185,163,255,.28) !important;
  color:rgba(247,245,255,.82) !important;
  font-size:11px !important;
  max-width:100% !important;
}

.file-chip img{
  width:22px !important;
  height:22px !important;
  border-radius:50% !important;
  object-fit:cover !important;
}

.file-chip span{
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  max-width:180px !important;
}

.file-empty{
  font-family:var(--fm) !important;
  font-size:9px !important;
  letter-spacing:1.2px !important;
  color:rgba(247,245,255,.38) !important;
  padding:6px 0 !important;
}


/* ===== CTA HANDSHAKE ANIMATION ===== */

#cta{
  position:relative !important;
  overflow:hidden !important;
}

.handshake-scene{
  position:absolute;
  left:0;
  right:0;
  top:90px;
  height:260px;
  z-index:6;
  pointer-events:none;
  overflow:hidden;
}

.hand-img{
  position:absolute;
  top:50%;
  width:360px;
  max-width:42vw;
  transform:translateY(-50%);
  filter:
    drop-shadow(0 22px 45px rgba(0,0,0,.45))
    drop-shadow(0 0 26px rgba(139,92,246,.18));
  opacity:.96;
}

.hand-left{
  left:-380px;
  animation:handLeftMeet 5.5s ease-in-out infinite;
}

.hand-right{
  right:-380px;
  animation:handRightMeet 5.5s ease-in-out infinite;
}

@keyframes handLeftMeet{
  0%,18%{
    left:-380px;
    transform:translateY(-50%) rotate(0deg);
  }

  42%,68%{
    left:calc(50% - 350px);
    transform:translateY(-50%) rotate(1deg);
  }

  76%{
    left:calc(50% - 350px);
    transform:translateY(-50%) rotate(-1.5deg);
  }

  100%{
    left:-380px;
    transform:translateY(-50%) rotate(0deg);
  }
}

@keyframes handRightMeet{
  0%,18%{
    right:-380px;
    transform:translateY(-50%) rotate(0deg);
  }

  42%,68%{
    right:calc(50% - 350px);
    transform:translateY(-50%) rotate(-1deg);
  }

  76%{
    right:calc(50% - 350px);
    transform:translateY(-50%) rotate(1.5deg);
  }

  100%{
    right:-380px;
    transform:translateY(-50%) rotate(0deg);
  }
}

.handshake-scene::after{
  content:'';
  position:absolute;
  left:50%;
  top:50%;
  width:120px;
  height:120px;
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(185,163,255,.34),transparent 65%);
  opacity:0;
  animation:handGlow 5.5s ease-in-out infinite;
}

@keyframes handGlow{
  0%,35%,85%,100%{
    opacity:0;
    transform:translate(-50%,-50%) scale(.7);
  }

  48%,70%{
    opacity:1;
    transform:translate(-50%,-50%) scale(1.2);
  }
}

@media(max-width:768px){
  .handshake-scene{
    top:70px;
    height:210px;
  }

  .hand-img{
    width:250px;
    max-width:50vw;
  }

  .hand-left{
    left:-270px;
  }

  .hand-right{
    right:-270px;
  }

  @keyframes handLeftMeet{
    0%,18%{left:-270px;transform:translateY(-50%) rotate(0deg);}
    42%,68%{left:calc(50% - 240px);transform:translateY(-50%) rotate(1deg);}
    76%{left:calc(50% - 240px);transform:translateY(-50%) rotate(-1.5deg);}
    100%{left:-270px;transform:translateY(-50%) rotate(0deg);}
  }

  @keyframes handRightMeet{
    0%,18%{right:-270px;transform:translateY(-50%) rotate(0deg);}
    42%,68%{right:calc(50% - 240px);transform:translateY(-50%) rotate(-1deg);}
    76%{right:calc(50% - 240px);transform:translateY(-50%) rotate(1.5deg);}
    100%{right:-270px;transform:translateY(-50%) rotate(0deg);}
  }
}

/* ===== PHONE COUNTRY CODE + SUCCESS SPLASH ===== */

.phone-row{
  display:grid;
  grid-template-columns:116px 1fr;
  gap:8px;
}

.phone-code-wrap{
  position:relative;
}

.phone-code{
  width:100%;
  height:100%;
  min-height:48px;
  appearance:none;
  cursor:pointer;
  padding:13px 30px 13px 13px !important;
  border-radius:14px !important;
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.11) !important;
  color:#fff !important;
  font-family:var(--fs) !important;
  font-size:13px !important;
}

.phone-code-wrap::after{
  content:'⌄';
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-55%);
  color:rgba(247,245,255,.55);
  pointer-events:none;
  font-size:14px;
}

.phone-code option{
  background:#0B0B14;
  color:#fff;
}

@media(max-width:520px){
  .phone-row{
    grid-template-columns:108px 1fr;
  }
}

.success-splash{
  position:fixed;
  inset:0;
  z-index:9999999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:1.5rem;
  background:rgba(5,5,10,.86);
  backdrop-filter:blur(24px);
}

.success-splash.open{
  display:flex;
}

.success-card{
  width:min(460px,100%);
  text-align:center;
  border-radius:30px;
  padding:2.4rem 2rem;
  background:
    radial-gradient(circle at 20% 18%,rgba(139,92,246,.28),transparent 36%),
    radial-gradient(circle at 85% 78%,rgba(56,189,248,.18),transparent 36%),
    linear-gradient(145deg,rgba(17,17,32,.98),rgba(7,7,13,.98));
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 45px 120px rgba(0,0,0,.65),0 0 70px rgba(139,92,246,.20);
  animation:successPop .45s ease both;
}

.success-icon{
  width:64px;
  height:64px;
  margin:0 auto 1.1rem;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#fff,#d8ccff,#8bdfff);
  color:#07070D;
  font-size:30px;
  font-weight:900;
  box-shadow:0 0 36px rgba(139,92,246,.35);
}

.success-card h3{
  font-family:var(--fd);
  font-size:clamp(2rem,4vw,3.2rem);
  line-height:.95;
  color:#fff;
  margin-bottom:.8rem;
}

.success-card h3 em{
  color:var(--v2);
  font-style:italic;
}

.success-card p{
  color:rgba(247,245,255,.62);
  font-size:13.5px;
  line-height:1.7;
}

.success-loader{
  width:100%;
  height:4px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  overflow:hidden;
  margin-top:1.5rem;
}

.success-loader span{
  display:block;
  height:100%;
  width:100%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--v),var(--b));
  animation:successTimer 5s linear forwards;
}

@keyframes successPop{
  from{opacity:0;transform:translateY(18px) scale(.96);}
  to{opacity:1;transform:none;}
}

@keyframes successTimer{
  from{width:100%;}
  to{width:0%;}
}


/* ===== CTA HANDSHAKE BACKGROUND ===== */

.cta-body{
  position:relative !important;
  overflow:hidden !important;
}

.handshake-bg{
  position:absolute !important;
  left:50% !important;
  top:38% !important;
  transform:translate(-50%,-50%) !important;
  width:min(900px,100%) !important;
  height:360px !important;
  z-index:3 !important;
  pointer-events:none !important;
  opacity:.72 !important;
}

.hand-bg{
  position:absolute !important;
  top:50% !important;
  width:430px !important;
  max-width:48vw !important;
  object-fit:contain !important;
  filter:
    drop-shadow(0 28px 42px rgba(0,0,0,.55))
    drop-shadow(0 0 28px rgba(139,92,246,.18))
    brightness(.86)
    saturate(.88) !important;
  opacity:.58 !important;
}

.hand-bg-left{
  left:-40px !important;
  transform:translateY(-50%) rotate(2deg) !important;
  animation:leftHandshake 2.8s ease-in-out infinite !important;
}

.hand-bg-right{
  right:-40px !important;
  transform:translateY(-50%) rotate(-2deg) !important;
  animation:rightHandshake 2.8s ease-in-out infinite !important;
}

@keyframes leftHandshake{
  0%,100%{
    transform:translateY(-50%) translateX(0) rotate(2deg);
  }
  45%,55%{
    transform:translateY(-50%) translateX(42px) rotate(0deg);
  }
}

@keyframes rightHandshake{
  0%,100%{
    transform:translateY(-50%) translateX(0) rotate(-2deg);
  }
  45%,55%{
    transform:translateY(-50%) translateX(-42px) rotate(0deg);
  }
}

.cta-h,
.cta-sub,
.cta-btns,
.cta-note,
.cta-stats,
.cta-bdg{
  position:relative !important;
  z-index:8 !important;
}

.cta-h{
  text-shadow:
    0 16px 45px rgba(0,0,0,.75),
    0 0 28px rgba(139,92,246,.18) !important;
}

@media(max-width:768px){
  .handshake-bg{
    top:34% !important;
    height:260px !important;
    opacity:.55 !important;
  }

  .hand-bg{
    width:300px !important;
    max-width:58vw !important;
    opacity:.45 !important;
  }

  .hand-bg-left{
    left:-70px !important;
  }

  .hand-bg-right{
    right:-70px !important;
  }
}



/* ===== FINAL WORKING HANDSHAKE FIX ===== */

.handshake-bg{
  position:absolute !important;
  left:50% !important;
  top:40% !important;
  transform:translate(-50%,-50%) !important;
  width:min(980px,100%) !important;
  height:360px !important;
  z-index:4 !important;
  pointer-events:none !important;
  opacity:.72 !important;
  overflow:visible !important;
}

.hand-bg{
  position:absolute !important;
  top:50% !important;
  width:470px !important;
  max-width:none !important;
  object-fit:contain !important;
  opacity:.58 !important;
  filter:
    drop-shadow(0 24px 38px rgba(0,0,0,.55))
    drop-shadow(0 0 22px rgba(139,92,246,.18))
    brightness(.86)
    saturate(.88) !important;
  will-change:transform !important;
}

/* left side hand */
.hand-bg-left{
  left:50% !important;
  right:auto !important;
  animation:handLeftWorking 3.4s ease-in-out infinite !important;
}

/* right side hand */
.hand-bg-right{
  right:50% !important;
  left:auto !important;
  animation:handRightWorking 3.4s ease-in-out infinite !important;
}

@keyframes handLeftWorking{
  0%,18%,100%{
    transform:translate(-130%,-50%) translateX(-170px) rotate(3deg);
  }

  42%,68%{
    transform:translate(-96%,-50%) translateX(0) rotate(0deg);
  }

  76%{
    transform:translate(-94%,-50%) translateX(0) rotate(-2deg);
  }
}

@keyframes handRightWorking{
  0%,18%,100%{
    transform:translate(130%,-50%) translateX(170px) rotate(-3deg);
  }

  42%,68%{
    transform:translate(96%,-50%) translateX(0) rotate(0deg);
  }

  76%{
    transform:translate(94%,-50%) translateX(0) rotate(2deg);
  }
}

.handshake-bg::after{
  content:'' !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:150px !important;
  height:150px !important;
  border-radius:50% !important;
  transform:translate(-50%,-50%) !important;
  background:radial-gradient(circle,rgba(185,163,255,.34),transparent 68%) !important;
  opacity:0 !important;
  animation:handMeetGlowWorking 3.4s ease-in-out infinite !important;
}

@keyframes handMeetGlowWorking{
  0%,34%,82%,100%{
    opacity:0;
    transform:translate(-50%,-50%) scale(.7);
  }

  45%,70%{
    opacity:1;
    transform:translate(-50%,-50%) scale(1.15);
  }
}

@media(max-width:768px){
  .handshake-bg{
    top:36% !important;
    height:260px !important;
    opacity:.55 !important;
  }

  .hand-bg{
    width:310px !important;
  }

  @keyframes handLeftWorking{
    0%,18%,100%{
      transform:translate(-130%,-50%) translateX(-105px) rotate(3deg);
    }

    42%,68%{
      transform:translate(-96%,-50%) translateX(0) rotate(0deg);
    }

    76%{
      transform:translate(-94%,-50%) translateX(0) rotate(-2deg);
    }
  }

  @keyframes handRightWorking{
    0%,18%,100%{
      transform:translate(130%,-50%) translateX(105px) rotate(-3deg);
    }

    42%,68%{
      transform:translate(96%,-50%) translateX(0) rotate(0deg);
    }

    76%{
      transform:translate(94%,-50%) translateX(0) rotate(2deg);
    }
  }
}
/* ===== REAL FINAL HANDSHAKE ANIMATION OVERRIDE ===== */

.handshake-bg{
  position:absolute !important;
  left:50% !important;
  top:40% !important;
  transform:translate(-50%,-50%) !important;
  width:1000px !important;
  max-width:100% !important;
  height:360px !important;
  z-index:4 !important;
  pointer-events:none !important;
  overflow:visible !important;
  opacity:.72 !important;
}

.hand-bg{
  position:absolute !important;
  top:50% !important;
  width:470px !important;
  max-width:none !important;
  object-fit:contain !important;
  opacity:.55 !important;
  will-change:transform !important;
  filter:
    drop-shadow(0 24px 38px rgba(0,0,0,.55))
    drop-shadow(0 0 22px rgba(139,92,246,.18))
    brightness(.86)
    saturate(.88) !important;
}

/* left image starts far left, moves center */
.hand-bg-left{
  left:50% !important;
  right:auto !important;
  animation:realLeftHandMove 4.8s ease-in-out infinite !important;
}

/* right image starts far right, moves center */
.hand-bg-right{
  right:50% !important;
  left:auto !important;
  animation:realRightHandMove 4.8s ease-in-out infinite !important;
}

@keyframes realLeftHandMove{
  0%,18%{
    transform:translate(-185%,-50%) rotate(4deg);
  }

  42%{
    transform:translate(-96%,-50%) rotate(0deg);
  }

  50%{
    transform:translate(-94%,-50%) rotate(-2deg);
  }

  56%{
    transform:translate(-98%,-50%) rotate(2deg);
  }

  62%{
    transform:translate(-94%,-50%) rotate(-1.5deg);
  }

  68%{
    transform:translate(-96%,-50%) rotate(1deg);
  }

  78%{
    transform:translate(-96%,-50%) rotate(0deg);
  }

  100%{
    transform:translate(-185%,-50%) rotate(4deg);
  }
}

@keyframes realRightHandMove{
  0%,18%{
    transform:translate(185%,-50%) rotate(-4deg);
  }

  42%{
    transform:translate(96%,-50%) rotate(0deg);
  }

  50%{
    transform:translate(94%,-50%) rotate(2deg);
  }

  56%{
    transform:translate(98%,-50%) rotate(-2deg);
  }

  62%{
    transform:translate(94%,-50%) rotate(1.5deg);
  }

  68%{
    transform:translate(96%,-50%) rotate(-1deg);
  }

  78%{
    transform:translate(96%,-50%) rotate(0deg);
  }

  100%{
    transform:translate(185%,-50%) rotate(-4deg);
  }
}
/* glow only when hands meet */
.handshake-bg::after{
  content:'' !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:150px !important;
  height:150px !important;
  border-radius:50% !important;
  background:radial-gradient(circle,rgba(185,163,255,.36),transparent 68%) !important;
  opacity:0 !important;
  transform:translate(-50%,-50%) scale(.7) !important;
  animation:realHandGlow 4.8s ease-in-out infinite !important;
}

@keyframes realHandGlow{
  0%,45%,88%,100%{
    opacity:0;
    transform:translate(-50%,-50%) scale(.7);
  }

  58%,76%{
    opacity:1;
    transform:translate(-50%,-50%) scale(1.15);
  }
}

@media(max-width:768px){
  .handshake-bg{
    top:36% !important;
    height:260px !important;
    opacity:.55 !important;
  }

  .hand-bg{
    width:310px !important;
  }

  @keyframes realLeftHandMove{
    0%,35%,100%{
      transform:translate(-180%,-50%) rotate(4deg);
    }

    58%,72%{
      transform:translate(-92%,-50%) rotate(0deg);
    }
  }

  @keyframes realRightHandMove{
    0%,35%,100%{
      transform:translate(180%,-50%) rotate(-4deg);
    }

    58%,72%{
      transform:translate(92%,-50%) rotate(0deg);
    }
  }
}

.cta-h .gh{
  background:linear-gradient(110deg,rgba(255,255,255,.92),rgba(185,163,255,.48),rgba(56,189,248,.35)) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
}




/* ===== FIX: SHOW NORMAL CURSOR INSIDE POPUPS ===== */

.team-detail-modal,
.team-detail-modal *,
.form-modal,
.form-modal *,
.career-modal,
.career-modal *,
.success-splash,
.success-splash *{
  cursor:auto !important;
}

/* close buttons clear pointer */
.team-detail-close,
.form-close,
.career-close,
.team-detail-modal button,
.form-modal button,
.career-modal button{
  cursor:pointer !important;
}

/* ===== JOIN — FLOATING GHOST IMAGES ===== */

.join-after-section {
  background: #05050A;
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 0;
}

.join-premium-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  min-height: 500px;
  overflow: hidden;
}

/* LEFT */
.join-premium-left {
  padding: 5rem 4rem 5rem 5rem;
  background:
    radial-gradient(circle at 10% 80%, rgba(139,92,246,.16), transparent 40%),
    linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border-right: 1px solid rgba(255,255,255,.07);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.join-premium-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fm);
  font-size: 8px;
  letter-spacing: 2.8px;
  color: var(--gold);
  text-transform: uppercase;
}

.join-kicker-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 10px rgba(34,197,94,.7);
  animation: pdot 2s infinite;
  flex-shrink: 0;
}

.join-premium-title {
  font-family: var(--fd);
  font-size: clamp(2.8rem, 4vw, 5rem);
  font-weight: 800;
  line-height: .88;
  letter-spacing: -1.8px;
  color: #fff;
  margin: 0;
}

.join-premium-title em {
  font-style: italic;
  color: transparent;
  background: linear-gradient(110deg, #fff, var(--v2), var(--b));
  -webkit-background-clip: text;
  background-clip: text;
}

.join-premium-desc {
  font-size: 14px;
  line-height: 1.80;
  color: rgba(247,245,255,.60);
  max-width: 400px;
  margin: 0;
}

.join-premium-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: .2rem;
}

.join-premium-tags span {
  font-family: var(--fm);
  font-size: 8px;
  letter-spacing: 1px;
  color: rgba(247,245,255,.58);
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
}

.join-premium-btn {
  margin-top: .5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 14px 30px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-family: var(--fs);
  font-size: 13px;
  font-weight: 900;
  color: #090914;
  background: linear-gradient(135deg, #ffffff 0%, #efe8ff 50%, #f7c76a 100%);
  box-shadow:
    0 14px 38px rgba(139,92,246,.28),
    0 6px 18px rgba(247,199,106,.16),
    inset 0 1px 0 rgba(255,255,255,.85);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform .22s, box-shadow .22s;
}

.join-premium-btn::before {
  content: '';
  position: absolute;
  inset: -2px;
  z-index: -1;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.75), transparent);
  transform: translateX(-135%) skewX(-18deg);
  animation: btnShine 3s ease-in-out infinite;
}

.join-premium-btn:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 22px 55px rgba(139,92,246,.38), 0 10px 28px rgba(247,199,106,.22);
}

.join-premium-note {
  font-family: var(--fm);
  font-size: 8px;
  letter-spacing: 1.5px;
  color: rgba(247,245,255,.28);
  text-transform: uppercase;
}

/* RIGHT — FLOATING GHOST CARDS */
.join-premium-right {
  position: relative;
  height: 500px;
  background:
    radial-gradient(circle at 75% 25%, rgba(56,189,248,.10), transparent 40%),
    radial-gradient(circle at 25% 75%, rgba(139,92,246,.12), transparent 40%),
    linear-gradient(145deg, #08080f, #05050a);
  overflow: hidden;
}

/* subtle grid */
.join-premium-right::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.024) 1px, transparent 1px);
  background-size: 38px 38px;
  pointer-events: none;
  opacity: .6;
}

/* center glow */
.jf-orb {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(139,92,246,.18), rgba(56,189,248,.08) 50%, transparent 72%);
  animation: jfOrbPulse 5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes jfOrbPulse {
  0%, 100% { transform: translate(-50%,-50%) scale(1); opacity: .7; }
  50%       { transform: translate(-50%,-50%) scale(1.18); opacity: 1; }
}

/* each floating card */
.jf-card {
  position: absolute;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 22px 60px rgba(0,0,0,.45);
  background: #08080f;
}

.jf-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(.70) saturate(.82);
}

.jf-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(7,7,13,.75));
  pointer-events: none;
}

.jf-label {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 5;
  font-family: var(--fm);
  font-size: 7px;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,.80);
  text-transform: uppercase;
  background: rgba(7,7,13,.65);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  padding: 4px 8px;
  backdrop-filter: blur(8px);
}

/* === CARD POSITIONS + INDIVIDUAL FLOAT ANIMATIONS === */

.jf-1 {
  width: 185px; height: 135px;
  top: 42px; left: 38px;
  animation: jfFloat1 7s ease-in-out infinite;
}

.jf-2 {
  width: 148px; height: 148px;
  top: 28px; right: 42px;
  border-radius: 50%;          /* circle card */
  animation: jfFloat2 8.5s ease-in-out 1s infinite;
}

.jf-2 img { border-radius: 50%; }
.jf-2::after { border-radius: 50%; }
.jf-2 .jf-label { display: none; }

.jf-3 {
  width: 162px; height: 118px;
  bottom: 55px; left: 26px;
  animation: jfFloat3 9s ease-in-out 2.2s infinite;
}

.jf-4 {
  width: 130px; height: 130px;
  bottom: 38px; right: 58px;
  border-radius: 26px;
  animation: jfFloat4 7.5s ease-in-out .5s infinite;
}

.jf-5 {
  width: 110px; height: 82px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 16px;
  animation: jfFloat5 6.5s ease-in-out 1.8s infinite;
}

/* each card fades in/out + floats — "ਹਵਾ ਵਿੱਚ ਗਾਇਬ" effect */

@keyframes jfFloat1 {
  0%   { transform: translateY(0px) rotate(-3deg);   opacity: .22; }
  25%  { opacity: .90; }
  55%  { transform: translateY(-18px) rotate(-1deg); opacity: .95; }
  80%  { opacity: .60; }
  100% { transform: translateY(0px) rotate(-3deg);   opacity: .22; }
}

@keyframes jfFloat2 {
  0%   { transform: translateY(0px) scale(1);    opacity: .18; }
  30%  { opacity: .88; }
  60%  { transform: translateY(-22px) scale(1.04); opacity: .92; }
  85%  { opacity: .40; }
  100% { transform: translateY(0px) scale(1);    opacity: .18; }
}

@keyframes jfFloat3 {
  0%   { transform: translateY(0px) rotate(4deg);  opacity: .20; }
  35%  { opacity: .85; }
  65%  { transform: translateY(-14px) rotate(2deg); opacity: .94; }
  88%  { opacity: .35; }
  100% { transform: translateY(0px) rotate(4deg);  opacity: .20; }
}

@keyframes jfFloat4 {
  0%   { transform: translateY(0px) rotate(-5deg);  opacity: .16; }
  28%  { opacity: .82; }
  58%  { transform: translateY(-20px) rotate(-2deg); opacity: .90; }
  82%  { opacity: .38; }
  100% { transform: translateY(0px) rotate(-5deg);  opacity: .16; }
}

@keyframes jfFloat5 {
  0%   { transform: translate(-50%,-50%) translateY(0) rotate(2deg);  opacity: .12; }
  22%  { opacity: .78; }
  52%  { transform: translate(-50%,-50%) translateY(-16px) rotate(0deg); opacity: .88; }
  80%  { opacity: .28; }
  100% { transform: translate(-50%,-50%) translateY(0) rotate(2deg);  opacity: .12; }
}

/* RESPONSIVE */
@media (max-width: 1000px) {
  .join-premium-box { grid-template-columns: 1fr; }
  .join-premium-left {
    padding: 4rem 2.5rem;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .join-premium-right { height: 340px; }
}

@media (max-width: 600px) {
  .join-premium-left { padding: 3rem 1.5rem; }
  .join-premium-right { height: 280px; }
  .jf-1 { width: 140px; height: 100px; top: 24px; left: 18px; }
  .jf-2 { width: 108px; height: 108px; top: 18px; right: 18px; }
  .jf-3 { width: 122px; height: 90px; bottom: 32px; left: 14px; }
  .jf-4 { width: 100px; height: 100px; bottom: 22px; right: 28px; }
}

/* ===== TOP NAV + HERO TEXT + BUTTON FINAL FIX ===== */

/* 1) Top IsIt logo dark */
.nlogo-t,
.nlogo-t em{
  color:#1A1620 !important;
}

/* 2) Hero heading visible on light background */
.h-head .tw-blk,
.h-head .tw-it,
.h-head .tw-gh{
  color:#1A1620 !important;
  -webkit-text-stroke:0 !important;
  text-shadow:none !important;
}

.tw-vi{
  color:#1A1620 !important;
  background:none !important;
  -webkit-background-clip:initial !important;
  background-clip:initial !important;
}

/* Smart word thoda premium purple */
.h-head .tw-it{
  color:#6D28D9 !important;
}

/* 4) Start Project + Contact Us Now buttons dark premium */
.n-cta,
.bp,
.cta-b1{
  background:linear-gradient(135deg,#1A1620 0%,#3B0764 55%,#111827 100%) !important;
  color:#ffffff !important;
  border:1px solid rgba(185,163,255,.38) !important;
  box-shadow:
    0 14px 36px rgba(26,22,32,.35),
    0 0 26px rgba(124,58,237,.22) !important;
}

.n-cta:hover,
.bp:hover,
.cta-b1:hover{
  background:linear-gradient(135deg,#111827 0%,#6D28D9 55%,#0284C7 100%) !important;
  color:#ffffff !important;
  transform:translateY(-3px) scale(1.025) !important;
}
/* Solutions transparent with light outline */

.h-head .tw-gh{
  color:transparent !important;
  -webkit-text-stroke:1.5px rgba(26,22,32,.25) !important;
  text-shadow:none !important;
  opacity:1 !important;
}
/* ===== SERVICES HEADING + WEBSITE/MOBILE VISUAL BACKGROUND FIX ===== */

/* 1) Complete Digital Growth Studio line gap fix */
#services .sh{
  line-height:1.02 !important;
  padding-bottom:.12em !important;
}

#services .sh em{
  display:inline-block !important;
  padding-top:.12em !important;
}



/* 3) Mobile visual background premium but light */
.lay-phone{
  background:
    radial-gradient(circle at 72% 28%,rgba(56,189,248,.15),transparent 30%),
    radial-gradient(circle at 16% 72%,rgba(139,92,246,.20),transparent 34%),
    linear-gradient(145deg,#0D0D1E,#080812) !important;
}

.lay-phone .phone-title,
.lay-phone .phone-desc,
.lay-phone .phone-num{
  color:#1A1620 !important;
}

.lay-phone .phone-title em{
  color:#0284C7 !important;
}

.lay-phone .phone-tags span{
  color:rgba(26,22,32,.58) !important;
  background:rgba(255,255,255,.72) !important;
  border:1px solid rgba(26,22,32,.12) !important;
}

.lay-phone .app-col{
  background:#FFFFFF !important;
  border:1px solid rgba(26,22,32,.12) !important;
  box-shadow:0 20px 55px rgba(26,22,32,.16) !important;
}
/* ===== MOBILE APP SECTION SAME AS WEBSITE STYLE ===== */

.svc-ch.mobile-row .svc-ch-meta{
  display:block !important;
  position:relative !important;
  top:auto !important;
  margin-bottom:1.4rem !important;
}

.svc-ch.mobile-row{
  display:grid !important;
  grid-template-columns:300px 1fr !important;
  gap:5rem !important;
  align-items:start !important;
  padding:3.5rem 0 !important;
}

.svc-ch.mobile-row .svc-visual{
  height:355px !important;
}




/* mobile app visuals centered */
.lay-phone .phone-scroll{
  width:100% !important;
  height:100% !important;
  padding:34px 28px !important;
  justify-content:center !important;
  align-items:center !important;
  gap:18px !important;
}

.lay-phone .phone-scroll::before{
  display:none !important;
}

.lay-phone .app-col{
  width:170px !important;
  height:290px !important;
  border-radius:28px !important;
  background:#fff !important;
  border:1px solid rgba(26,22,32,.12) !important;
  box-shadow:0 20px 55px rgba(26,22,32,.16) !important;
}

.lay-phone .app-shot{
  height:290px !important;
}

@media(max-width:1200px){
  .svc-ch.mobile-row{
    grid-template-columns:1fr !important;
    gap:1.6rem !important;
  }
}

@media(max-width:520px){
  .lay-phone .app-col{
    width:112px !important;
    height:225px !important;
  }

  .lay-phone .app-shot{
    height:225px !important;
  }
}

/* ===== MOBILE VISUAL FINAL FIX ===== */



/* left text inside visual */
.lay-phone .phone-inside-text{
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  height:100% !important;
  max-width:320px !important;
}

.lay-phone .phone-num{
  display:none !important;
}

.lay-phone .phone-title{
  font-size:2.5rem !important;
  line-height:.95 !important;
  color:#1A1620 !important;
}

.lay-phone .phone-desc{
  font-size:13px !important;
  line-height:1.75 !important;
  color:rgba(26,22,32,.70) !important;
  max-width:300px !important;
}

.lay-phone .phone-tags{
  display:none !important;
}

/* right phones back to corner, not middle */
.lay-phone .phone-scroll{
  height:100% !important;
  padding:0 !important;
  justify-content:flex-end !important;
  align-items:center !important;
  gap:14px !important;
  overflow:hidden !important;
}

.lay-phone .app-col{
  width:150px !important;
  height:285px !important;
  flex-shrink:0 !important;
}

.lay-phone .app-shot{
  height:285px !important;
}

.lay-phone .app-col:nth-child(2){
  margin-top:26px !important;
}

.lay-phone .app-col:nth-child(3){
  margin-top:-22px !important;
}

/* ===== MOBILE APP SEPARATE PREMIUM TEXT ===== */



.lay-phone .phone-inside-text{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  height:100% !important;
  max-width:380px !important;
  padding-right:8px !important;
}

.lay-phone .phone-title,
.lay-phone .phone-desc,
.lay-phone .phone-tags,
.lay-phone .phone-num{
  display:none !important;
}

.phone-wave-text{
  display:flex !important;
  flex-wrap:wrap !important;
  column-gap:7px !important;
  row-gap:4px !important;
  max-width:370px !important;
  font-family:var(--fd) !important;
  font-size:clamp(1.55rem,2.45vw,2.65rem) !important;
  line-height:1.08 !important;
  font-weight:800 !important;
  color:#1A1620 !important;
}

.phone-wave-text span{
  display:inline-block !important;
  opacity:1 !important;
  animation:phoneWordStep .75s ease-out both !important;
  animation-delay:calc(var(--i) * .18s) !important;
}

.phone-wave-text span.purple{
  color:#6D28D9 !important;
  font-style:italic !important;
}

/* ===== MOBILE TEXT GAP + SMOOTH WORD FLOW FIX ===== */


.lay-phone .phone-inside-text{
  max-width:470px !important;
  padding-right:0 !important;
  align-items:flex-start !important;
}

.phone-wave-text{
  max-width:455px !important;
  column-gap:7px !important;
  row-gap:5px !important;
  font-size:clamp(1.45rem,2.15vw,2.35rem) !important;
}

/* phones slightly closer */
.lay-phone .phone-scroll{
  justify-content:flex-start !important;
  gap:9px !important;
  padding-left:4px !important;
}

/* smoother one-time word flow */
.phone-wave-text span{
  display:inline-block !important;
  opacity:0 !important;
  transform:translateY(10px) !important;
  animation:phoneWordPremium .9s cubic-bezier(.16,1,.3,1) both !important;
  animation-delay:calc(var(--i) * .24s) !important;
}

@keyframes phoneWordPremium{
  0%{
    opacity:0;
    transform:translateY(10px);
  }

  55%{
    opacity:1;
    transform:translateY(-7px);
  }

  100%{
    opacity:1;
    transform:translateY(0);
  }
}


/* ===== FIX: MOBILE TEXT SHOW + CLOSE GAP ===== */


.lay-phone .phone-inside-text{
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
  height:100% !important;
  max-width:500px !important;
  align-items:center !important;
  justify-content:flex-start !important;
  position:relative !important;
  z-index:10 !important;
}

.phone-wave-text{
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
  flex-wrap:wrap !important;
  max-width:500px !important;
  color:#1A1620 !important;
  font-size:clamp(1.35rem,2vw,2.15rem) !important;
  line-height:1.12 !important;
}

.phone-wave-text span{
  opacity:1 !important;
  transform:none !important;
  animation:none !important;
}

.lay-phone .phone-scroll{
  justify-content:flex-start !important;
  padding-left:0 !important;
  gap:8px !important;
  position:relative !important;
  z-index:5 !important;
}

/* ===== FINAL FINAL MOBILE APP TEXT FIX ===== */

.lay-phone{
  display:grid !important;
  grid-template-columns:56% 44% !important;
  padding:30px 10px 30px 36px !important;
  gap:0 !important;
  overflow:hidden !important;
}

.lay-phone .phone-inside-text{
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
  height:100% !important;
  width:100% !important;
  max-width:none !important;
  align-items:center !important;
  justify-content:flex-start !important;
  position:relative !important;
  z-index:50 !important;
}

.phone-wave-text{
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
  flex-wrap:wrap !important;
  max-width:530px !important;
  column-gap:7px !important;
  row-gap:5px !important;
  font-family:var(--fd) !important;
  font-size:clamp(1.3rem,1.9vw,2.05rem) !important;
  line-height:1.12 !important;
  font-weight:800 !important;
  color:#1A1620 !important;
  position:relative !important;
  z-index:60 !important;
}

.phone-wave-text span{
  display:inline-block !important;
  opacity:1 !important;
  transform:none !important;
  animation:phoneWordPremiumFinal .85s cubic-bezier(.16,1,.3,1) 1 !important;
  animation-delay:calc(var(--i) * .20s) !important;
}

.phone-wave-text span.purple{
  color:#6D28D9 !important;
  font-style:italic !important;
}



@keyframes phoneWordPremiumFinal{
  0%{
    transform:translateY(8px);
  }
  55%{
    transform:translateY(-6px);
  }
  100%{
    transform:translateY(0);
  }
}
.lay-phone .phone-scroll{
  height:100% !important;
  justify-content:flex-start !important;
  align-items:center !important;
  gap:8px !important;
  padding-left:0 !important;
  position:relative !important;
  z-index:10 !important;
}

.lay-phone .app-col{
  width:145px !important;
  height:285px !important;
}

.lay-phone .app-shot{
  height:285px !important;
}
.phone-wave-text{
  display:flex !important;
  flex-wrap:wrap !important;
  align-content:center !important;
  max-width:540px !important;
  min-height:260px !important;
  column-gap:7px !important;
  row-gap:8px !important;
  font-family:var(--fd) !important;
font-size:clamp(1.45rem,2.05vw,2.25rem) !important;  line-height:1.14 !important;
  font-weight:800 !important;
  color:#1A1620 !important;
}

.phone-wave-text span{
  display:inline-block !important;
  opacity:1 !important;
  animation:phoneWordPremiumFinal 1.1s cubic-bezier(.16,1,.3,1) both !important;
  animation-delay:calc(var(--i) * .16s) !important;
}

@keyframes phoneWordPremiumFinal{
  0%{
    transform:translateY(14px);
    filter:blur(3px);
  }

  55%{
    transform:translateY(-8px);
    filter:blur(0);
  }

  100%{
    transform:translateY(0);
    filter:blur(0);
  }
}


/* G LETTER FIX */

#services .sh,
.svc-h,
.svc-title{
  line-height:1.15 !important;
  overflow:visible !important;
  padding-bottom:.18em !important;
}

#services .sh em,
#services .sh span{
  padding-bottom:.08em !important;
}

/* BRAND IDENTITY — light reel connector lines */
.lay-brand .brand-frame{
  border-right:6px solid rgba(255,255,255,.38) !important;
}

.lay-brand .brand-frame::before,
.lay-brand .brand-frame::after{
  background:repeating-linear-gradient(
    0deg,
    rgba(255,255,255,.42) 0px,
    rgba(255,255,255,.42) 4px,
    transparent 4px,
    transparent 28px
  ) !important;
}
/* BRAND IDENTITY — top label light */
.lay-brand .svc-ui{
  color:rgba(255,255,255,.82) !important;
  border-color:rgba(255,255,255,.20) !important;
  background:rgba(7,7,13,.55) !important;
}
/* SERVICE TITLE — fix g/y/p cutting */
.svc-ch-title{
  line-height:1.18 !important;
  padding-bottom:.18em !important;
  overflow:visible !important;
}

.svc-ch-title em{
  display:inline-block !important;
  line-height:1.18 !important;
  padding-bottom:.18em !important;
}
/* Service descriptions */
.svc-ch-desc{
  font-family:'Inter', sans-serif !important;
  font-size:15px !important;
  line-height:1.9 !important;
  color:rgba(26,22,32,.72) !important;
  max-width:620px !important;
}
/* SEO section spacing + premium light background */
.svc-ch:has(.lay-seo){
  gap:3rem !important;
}

.lay-seo{
  background:
    radial-gradient(circle at 20% 20%,rgba(124,58,237,.08),transparent 32%),
    radial-gradient(circle at 82% 78%,rgba(34,197,94,.08),transparent 34%),
    linear-gradient(145deg,#F8FAFC,#EEF4F1) !important;
}

.lay-seo .svc-ui,
.lay-seo .seo-rank-pill{
  background:rgba(255,255,255,.78) !important;
  color:#1A1620 !important;
  border:1px solid rgba(26,22,32,.12) !important;
  box-shadow:0 10px 28px rgba(26,22,32,.10) !important;
}
/* Service text closer to visual without ruining text spacing */
.svc-ch{
  grid-template-columns:280px 1fr !important;
  gap:2.2rem !important;
}

.svc-ch-meta{
  width:280px !important;
}

@media(max-width:1200px){
  .svc-ch{
    grid-template-columns:1fr !important;
    gap:1.4rem !important;
  }

  .svc-ch-meta{
    width:100% !important;
  }
}
/* Audience Engagement spacing same as other services */
.svc-ch:has(.lay-chat){
  padding:3.5rem 0 !important;
}

/* Audience flower animation smoother + premium */
.lay-chat .eng-flower-card{
  box-shadow:
    0 24px 65px rgba(0,0,0,.38),
    0 0 26px rgba(124,58,237,.12) !important;
  transition:transform .35s ease, box-shadow .35s ease !important;
}

.lay-chat .eng-flower-card:hover{
  transform:scale(1.08) !important;
  box-shadow:
    0 38px 95px rgba(0,0,0,.58),
    0 0 42px rgba(124,58,237,.28) !important;
}

.lay-chat .eng-card-inner img{
  filter:brightness(.92) saturate(1.04) contrast(1.03) !important;
}

.lay-chat .eng-label{
  background:rgba(255,255,255,.78) !important;
  color:#1A1620 !important;
  border:1px solid rgba(26,22,32,.12) !important;
}
/* Audience flower: lighter, more space, no cutting */
.lay-chat{
  height:620px !important;
}

.lay-chat .eng-flower-wrap{
  width:700px !important;
  height:700px !important;
}

.lay-chat .eng-flower-card{
  width:170px !important;
  height:136px !important;
  margin-left:-85px !important;
  margin-top:-68px !important;
  opacity:.92 !important;
}

.lay-chat .eng-card-inner img{
  filter:brightness(1) saturate(.96) contrast(1) !important;
}



/* Before / After area light premium */

.before-after-box{
  background:linear-gradient(145deg,#FFFFFF,#F8FAFC) !important;
}

.ba-old,
.ba-new,
.ba-after-wrap{
  background:
    radial-gradient(circle at 20% 20%,rgba(124,58,237,.06),transparent 35%),
    radial-gradient(circle at 80% 80%,rgba(2,132,199,.06),transparent 35%),
    linear-gradient(145deg,#FFFFFF,#F4F7FA) !important;
}

/* subtle premium overlay */
.ba-old::before,
.ba-new::before{
  content:'' !important;
  position:absolute !important;
  inset:0 !important;
  background:
    linear-gradient(135deg,
      rgba(255,255,255,.55),
      transparent 35%,
      transparent 65%,
      rgba(255,255,255,.35)
    ) !important;
  pointer-events:none !important;
}
.ba-old img,
.ba-new img{
  filter:brightness(1.05) saturate(1.02) !important;
}
/* FINAL: remove black background from before/after animation */
.before-after-box,
.before-after-box *,
.ba-img,
.ba-before,
.ba-after,
.ba-after-wrap,
.ba-mini{
  background:transparent !important;
}

.before-after-box{
  background:linear-gradient(145deg,#FFFFFF,#F3F6FA) !important;
}

/* Keep full image visible */
.ba-before,
.ba-after{
  object-fit:contain !important;
  background:#F8FAFC !important;
}
/* BEFORE / AFTER text premium */

.ba-tag,
.ba-caption,
.before-after-box .before-isit-text,
.ba-after-wrap::after{
  background:rgba(255,255,255,.92) !important;
  color:#111827 !important;
  border:1px solid rgba(17,24,39,.12) !important;
  font-weight:700 !important;
  letter-spacing:.3px !important;
  box-shadow:0 10px 30px rgba(17,24,39,.10) !important;
}

/* BEFORE label */
.ba-old .ba-tag{
  color:#374151 !important;
}

/* AFTER label */
.ba-new .ba-tag{
  color:#5B21B6 !important;
}

/* PREMIUM slider line */

.ba-slider{
  width:3px !important;
  background:linear-gradient(
    180deg,
    #111827 0%,
    #6D28D9 50%,
    #111827 100%
  ) !important;
  box-shadow:
    0 0 20px rgba(109,40,217,.35),
    0 0 40px rgba(17,24,39,.15) !important;
}

/* slider handle */

.ba-slider span{
  width:42px !important;
  height:42px !important;
  border-radius:50% !important;
  background:linear-gradient(
    145deg,
    #111827,
    #6D28D9
  ) !important;
  color:#fff !important;
  border:2px solid rgba(255,255,255,.9) !important;
  box-shadow:
    0 12px 35px rgba(17,24,39,.30),
    0 0 22px rgba(109,40,217,.35) !important;
}



/* ===== BEFORE / AFTER LABELS PREMIUM ===== */

.ba-tag,
.before-after-box .before-isit-text,
.ba-after-wrap::after{

  background:rgba(255,255,255,.72) !important;
  backdrop-filter:blur(18px) !important;
  -webkit-backdrop-filter:blur(18px) !important;

  color:#1A1620 !important;

  border:1px solid rgba(255,255,255,.18) !important;

  box-shadow:
    0 12px 30px rgba(17,24,39,.08),
    inset 0 1px 0 rgba(255,255,255,.25) !important;
}


.ba-slider span{
  width:48px !important;
  height:48px !important;

  background:
    linear-gradient(
      135deg,
      #111827,
      #6D28D9
    ) !important;

  border:2px solid rgba(255,255,255,.75) !important;

  box-shadow:
    0 18px 40px rgba(17,24,39,.28),
    0 0 22px rgba(109,40,217,.28) !important;
}




/* ===== FIX: BEFORE DOUBLE TEXT + CUT ISSUE ===== */

/* duplicate Before text remove */
.before-after-box .before-isit-text{
  display:none !important;
}

/* only one Before label */
.ba-old{
  display:block !important;
  left:14px !important;
  top:14px !important;
  bottom:auto !important;
}

/* After label corner */
.ba-new{
  right:14px !important;
  left:auto !important;
  top:14px !important;
  bottom:auto !important;
}

/* stop label cutting */
.ba-tag{
  z-index:20 !important;
  overflow:visible !important;
  white-space:nowrap !important;
}

/* ===== BEFORE / AFTER LABEL CLEAN FIX ===== */

.ba-tag{
  background:rgba(255,255,255,.88) !important;
  color:#1A1620 !important;
  border:1px solid rgba(26,22,32,.14) !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  border-radius:999px !important;
}

/* remove dark square/glass layer behind before */
.ba-old::before,
.ba-old::after,
.ba-new::before,
.ba-new::after{
  display:none !important;
  content:none !important;
}

/* clean only one before/after */
.before-after-box .before-isit-text{
  display:none !important;
}
/* ===== WORK SECTION TOP GAP + DIVIDER FIX ===== */

#work{
  padding-top:6.2rem !important;
  border-top:1px solid rgba(26,22,32,.10) !important;
}

#services{
  margin-bottom:0 !important;
}

#work .rv{
  margin-bottom:2rem !important;
}/* remove extra divider above work section */

.mq{
  border-bottom:0 !important;
}

#services{
  border-bottom:0 !important;
}

#work{
  border-top:1px solid rgba(26,22,32,.10) !important;
}
/* ===== WORK SECTION MOVE UP ===== */

/* FINAL GAP BALANCE */

#services{
  padding-bottom:2.5rem !important;
}

#work{
  padding-top:3rem !important;
}


/* ===== TRACK RECORD LIGHT + GLASS CRACK HOVER ===== */

#proof{
  background:
    radial-gradient(circle at 20% 18%,rgba(2,132,199,.07),transparent 34%),
    radial-gradient(circle at 82% 75%,rgba(180,83,9,.04),transparent 35%),
    linear-gradient(180deg,#F9F7F3,#EEF3F7) !important;
  border-top:1px solid rgba(26,22,32,.10) !important;
}

#proof .sh,
.proof-num,
.process-list span{
  color:#1A1620 !important;
}

#proof .sh em,
.mini-lbl{
  color:#6D28D9 !important;
}

.proof-label,
.process-list small,
.tech-cloud span,
.proof-card.quote span{
  color:rgba(26,22,32,.55) !important;
}

.proof-card{
  background:rgba(255,255,255,.72) !important;
  border:1px solid rgba(26,22,32,.10) !important;
  box-shadow:0 18px 45px rgba(26,22,32,.10) !important;
  backdrop-filter:blur(14px) !important;
}

.proof-card::before{
  background:linear-gradient(135deg,rgba(255,255,255,.55),transparent 55%) !important;
}

.proof-card.quote p{
  color:rgba(26,22,32,.78) !important;
}

.process-list div,
.tech-cloud span{
  background:rgba(255,255,255,.65) !important;
  border:1px solid rgba(26,22,32,.10) !important;
}

/* glass crack effect */
.proof-card::after{
  content:'' !important;
  position:absolute !important;
  inset:0 !important;
  z-index:6 !important;
  opacity:0 !important;
  pointer-events:none !important;
  background:
    linear-gradient(118deg,transparent 0 47%,rgba(26,22,32,.35) 47.3% 47.8%,transparent 48%),
    linear-gradient(36deg,transparent 0 52%,rgba(26,22,32,.22) 52.2% 52.6%,transparent 53%),
    linear-gradient(152deg,transparent 0 58%,rgba(26,22,32,.18) 58.2% 58.6%,transparent 59%),
    radial-gradient(circle at 50% 50%,rgba(255,255,255,.65),transparent 18%) !important;
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%) !important;
}

.proof-card:hover::after{
  opacity:1 !important;
  animation:glassCrack .55s ease both !important;
}

.proof-card:hover{
  transform:translateY(-8px) scale(1.015) !important;
  border-color:rgba(26,22,32,.22) !important;
  box-shadow:0 28px 70px rgba(26,22,32,.18) !important;
}

.proof-card.image:hover img{
  transform:scale(1.08) rotate(.6deg) !important;
  filter:brightness(.96) saturate(1.05) contrast(1.05) !important;
}

@keyframes glassCrack{
  0%{
    opacity:0;
    transform:scale(.96);
    filter:blur(4px);
  }
  45%{
    opacity:1;
    transform:scale(1.01);
    filter:blur(0);
  }
  100%{
    opacity:.9;
    transform:scale(1);
  }
}


/* ===== REMOVE CRACK EFFECT — CLEAN PREMIUM TRACK RECORD ===== */

.proof-card:hover::before{
  background:
    radial-gradient(circle at 20% 18%,rgba(20,20,28,.07),transparent 38%),
    radial-gradient(circle at 92% 82%,rgba(2,132,199,.08),transparent 38%) !important;
  animation:none !important;
}

.proof-card::after{
  display:none !important;
}

.proof-card:hover{
  transform:translateY(-7px) !important;
  animation:none !important;
}

.revst{
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
  color:#F7C76A !important;
}

.proof-review-head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:16px;
}

.proof-review-head img{
  width:52px;
  height:52px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid rgba(255,255,255,.8);
  box-shadow:0 8px 20px rgba(0,0,0,.10);
}

.proof-review-name{
  font-weight:700;
  color:#1A1620;
  font-size:15px;
}

.proof-review-role{
  font-size:12px;
  color:rgba(26,22,32,.55);
}

.proof-stars{
  margin-top:18px;
  color:#F7C76A;
  font-size:1rem;
  letter-spacing:3px;
}

/* ===== WHY SECTION PREMIUM FIX ===== */

/* D / heading visibility fix */
#why .why-title,
#why .why-title em,
#why .why-title .gh{
  color:#1A1620 !important;
  -webkit-text-stroke:0 !important;
  text-shadow:none !important;
  overflow:visible !important;
}

#why .why-title{
  line-height:1.08 !important;
  padding-bottom:.16em !important;
}

#why .why-title .rev-glow{
  color:#1A1620 !important;
  background:none !important;
  -webkit-background-clip:initial !important;
  background-clip:initial !important;
  animation:none !important;
}

#why .why-title .rev-glow::after{
  background:linear-gradient(90deg,#6D28D9,rgba(109,40,217,.25),transparent) !important;
}

/* section background premium light */
#why{
  position:relative !important;
  overflow:hidden !important;
  background:
    radial-gradient(circle at 14% 18%,rgba(109,40,217,.08),transparent 30%),
    radial-gradient(circle at 88% 70%,rgba(26,22,32,.06),transparent 34%),
    linear-gradient(180deg,#F8FAFC,#EEF2F6) !important;
}

/* animated soft grid */
#why::before{
  content:'' !important;
  position:absolute !important;
  inset:0 !important;
  background:
    linear-gradient(90deg,rgba(26,22,32,.045) 1px,transparent 1px),
    linear-gradient(rgba(26,22,32,.035) 1px,transparent 1px) !important;
  background-size:46px 46px !important;
  opacity:.55 !important;
  animation:whyGridMove 18s linear infinite !important;
  pointer-events:none !important;
}

@keyframes whyGridMove{
  from{background-position:0 0,0 0;}
  to{background-position:92px 46px,46px 92px;}
}

#why > *{
  position:relative !important;
  z-index:2 !important;
}

/* left text card */
#why .wsub{
  color:rgba(26,22,32,.72) !important;
  background:rgba(255,255,255,.62) !important;
  border-left:3px solid #6D28D9 !important;
  border-radius:0 18px 18px 0 !important;
  padding:1rem 1.2rem !important;
  box-shadow:0 18px 45px rgba(26,22,32,.08) !important;
}

/* why list cards premium */
#why .wi{
  background:rgba(255,255,255,.55) !important;
  border:1px solid rgba(26,22,32,.08) !important;
  border-radius:18px !important;
  margin-bottom:12px !important;
  box-shadow:0 14px 35px rgba(26,22,32,.07) !important;
  transform:translateY(0) !important;
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease !important;
}

#why .wi:hover{
  transform:translateY(-6px) !important;
  border-color:rgba(109,40,217,.28) !important;
  box-shadow:
    0 24px 60px rgba(26,22,32,.12),
    0 0 28px rgba(109,40,217,.10) !important;
}

#why .wi-t{
  color:#1A1620 !important;
}

#why .wi-d{
  color:rgba(26,22,32,.58) !important;
}

/* icons animated */
#why .wi-ic{
  background:rgba(109,40,217,.09) !important;
  border:1px solid rgba(109,40,217,.22) !important;
  animation:whyIconPulse 3.2s ease-in-out infinite !important;
}

@keyframes whyIconPulse{
  0%,100%{box-shadow:0 0 0 rgba(109,40,217,0);}
  50%{box-shadow:0 0 24px rgba(109,40,217,.18);}
}

/* review cards premium light */
#why .rev{
  background:rgba(255,255,255,.68) !important;
  border:1px solid rgba(26,22,32,.09) !important;
  box-shadow:0 18px 50px rgba(26,22,32,.09) !important;
  transition:transform .28s ease, box-shadow .28s ease !important;
}

#why .rev:hover{
  transform:translateY(-6px) scale(1.015) !important;
  box-shadow:0 28px 70px rgba(26,22,32,.14) !important;
}

#why .revt{
  color:rgba(26,22,32,.70) !important;
}

#why .revn{
  color:#1A1620 !important;
}

#why .revr{
  color:rgba(26,22,32,.48) !important;
}
/* ===== WHY GAP + PURPLE TITLE + GOOGLE STYLE REVIEWS ===== */

#why{
  padding:6.5rem 5rem 6rem !important;
}

#why .wg{
  margin-top:2.4rem !important;
  gap:4rem !important;
}

#why .why-title .rev-glow,
#why .why-title .gh{
  color:#6D28D9 !important;
  background:none !important;
  -webkit-background-clip:initial !important;
  background-clip:initial !important;
  text-shadow:0 0 22px rgba(109,40,217,.14) !important;
}

/* reviews like clean Google card style */
#why .rev{
  position:relative !important;
  padding:1.35rem 1.45rem !important;
  border-radius:18px !important;
  background:#fff !important;
  border:1px solid rgba(26,22,32,.10) !important;
  box-shadow:0 14px 38px rgba(26,22,32,.10) !important;
}

#why .revst{
  color:#fbbc04 !important;
  font-size:13px !important;
  letter-spacing:1px !important;
  margin-bottom:.7rem !important;
}

#why .rev::after{
  content:'G' !important;
  position:absolute !important;
  top:16px !important;
  right:16px !important;
  width:26px !important;
  height:26px !important;
  border-radius:50% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-weight:900 !important;
  font-family:Arial,sans-serif !important;
  font-size:14px !important;
  color:#4285F4 !important;
  background:#fff !important;
  border:1px solid rgba(26,22,32,.10) !important;
  box-shadow:0 6px 18px rgba(26,22,32,.10) !important;
}

#why .revav{
  background:#6D28D9 !important;
  color:#fff !important;
  border:none !important;
}

/* ===== AUTO SCROLL REVIEWS ===== */

.review-scroll-box{
  height:520px !important;
  overflow:hidden !important;
  position:relative !important;
}

.review-track{
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
  animation:reviewAutoScroll 24s linear infinite !important;
}

.review-scroll-box:hover .review-track{
  animation-play-state:running !important;
}

.revimg{
  width:32px !important;
  height:32px !important;
  border-radius:50% !important;
  object-fit:cover !important;
}

@keyframes reviewAutoScroll{
  0%{transform:translateY(0);}
  100%{transform:translateY(-50%);}
}


/* ===== WHY REVIEWS ALIGN FIX ===== */

#why .revs,
#why .review-scroll-box{
  width:100% !important;
  max-width:100% !important;
}

#why .review-scroll-box{
  height:520px !important;
  padding-right:0 !important;
}

#why .review-track{
  width:100% !important;
}

#why .rev{
  width:100% !important;
  box-sizing:border-box !important;
}
/* ===== REVIEWS FINAL SIZE + REMOVE GOOGLE SIGN ===== */

#why .rev::after{
  display:none !important;
}

#why .wg{
  grid-template-columns:0.9fr 1.1fr !important;
  gap:3.5rem !important;
}

#why .review-scroll-box{
  height:650px !important;
  width:100% !important;
}

#why .review-track{
  gap:12px !important;
  animation:reviewAutoScroll 34s linear infinite !important;
}

#why .rev{
  width:100% !important;
  padding:1.25rem 1.35rem !important;
}

/* REMOVE WHITE GAP BETWEEN TRACK RECORD & WHY */

#proof{
  margin-bottom:0 !important;
  padding-bottom:4rem !important;
}

#why{
  margin-top:0 !important;
  padding-top:4rem !important;
}
/* FINAL: ONLY TRUST PURPLE */

#why .why-title span.gh{
  color:#1A1620 !important;
  background:none !important;
  background-image:none !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
  -webkit-text-fill-color:#1A1620 !important;
}



/* ===== TEAM CLASSY GLASS FIX ===== */

.team-card-inner{
  background:
    linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.045)) !important;
  border:1px solid rgba(255,255,255,.20) !important;
  backdrop-filter:blur(22px) saturate(1.35) !important;
}

.team-photo-wrap{
  border:1px solid rgba(255,255,255,.22) !important;
  box-shadow:
    0 22px 55px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
}

.team-photo-wrap::after{
  background:
    linear-gradient(135deg,rgba(255,255,255,.18),transparent 42%,rgba(185,163,255,.16)) !important;
}

.team-info h3{
  color:#ffffff !important;
  text-shadow:0 8px 24px rgba(0,0,0,.75) !important;
}

.team-info p{
  color:rgba(255,255,255,.78) !important;
}

.team-role{
  color:#ffffff !important;
  background:rgba(109,40,217,.45) !important;
  border:1px solid rgba(255,255,255,.22) !important;
}

.team-skills span{
  color:rgba(255,255,255,.82) !important;
  background:rgba(255,255,255,.10) !important;
  border:1px solid rgba(255,255,255,.16) !important;
}

.team-card.active .team-card-inner{
  background:
    linear-gradient(145deg,rgba(255,255,255,.20),rgba(255,255,255,.055)) !important;
}
/* ===== TEAM FINAL PREMIUM GLASS + TEXT FIX ===== */

/* Meet The Tech Crew dark/blank fix */
#team .team-title,
#team .team-title em{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  background:none !important;
  text-shadow:0 14px 45px rgba(0,0,0,.75) !important;
}

#team .team-title em{
  color:#B9A3FF !important;
  -webkit-text-fill-color:#B9A3FF !important;
}

/* cards more premium glass */
.team-card-inner{
  background:
    radial-gradient(circle at 20% 10%,rgba(255,255,255,.20),transparent 34%),
    linear-gradient(145deg,rgba(255,255,255,.18),rgba(255,255,255,.045)) !important;
  border:1px solid rgba(255,255,255,.28) !important;
  backdrop-filter:blur(28px) saturate(1.55) !important;
  box-shadow:
    0 38px 110px rgba(0,0,0,.58),
    inset 0 1px 0 rgba(255,255,255,.22),
    0 0 45px rgba(185,163,255,.16) !important;
}

/* dark text readable */
.team-info h3,
.team-info p,
.team-role,
.team-skills span{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}

.team-info p{
  color:rgba(255,255,255,.76) !important;
}

/* popup profile light/premium */
.team-detail-box{
  background:
    radial-gradient(circle at 18% 20%,rgba(139,92,246,.12),transparent 34%),
    linear-gradient(145deg,#F8FAFC,#EEF2F6) !important;
  border:1px solid rgba(26,22,32,.12) !important;
}

.team-detail-kicker,
.team-detail-name,
.team-detail-desc,
.team-detail-meta,
.team-detail-role,
.team-detail-skills span{
  color:#1A1620 !important;
  -webkit-text-fill-color:#1A1620 !important;
}

.team-detail-role{
  background:rgba(109,40,217,.10) !important;
  border:1px solid rgba(109,40,217,.22) !important;
  color:#6D28D9 !important;
}

.team-detail-skills span{
  background:rgba(255,255,255,.70) !important;
  border:1px solid rgba(26,22,32,.10) !important;
}

.team-detail-close{
  color:#1A1620 !important;
  background:rgba(255,255,255,.70) !important;
}
/* ===== TEAM PREMIUM COLOR + IKJOT ACTIVE CLASS ===== */

#team .team-title{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}

#team .team-title em{
  color:#B9A3FF !important;
  -webkit-text-fill-color:#B9A3FF !important;
  text-shadow:0 0 28px rgba(185,163,255,.35) !important;
}

/* role badge classy */
.team-role{
  color:#EDE9FE !important;
  -webkit-text-fill-color:#EDE9FE !important;
  background:linear-gradient(135deg,rgba(109,40,217,.55),rgba(185,163,255,.18)) !important;
  border:1px solid rgba(185,163,255,.34) !important;
}

/* name premium */
.team-info h3{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  text-shadow:0 10px 34px rgba(0,0,0,.70) !important;
}

/* description readable */
.team-info p{
  color:rgba(255,255,255,.72) !important;
  -webkit-text-fill-color:rgba(255,255,255,.72) !important;
}

/* skills not plain black-white */
.team-skills span{
  color:#EDE9FE !important;
  -webkit-text-fill-color:#EDE9FE !important;
  background:rgba(109,40,217,.22) !important;
  border:1px solid rgba(185,163,255,.24) !important;
}

/* ===== TEAM SECTION COMPACT ===== */

#team{
  padding:4rem 4rem 4.5rem !important;
}

.team-head{
  margin-bottom:.5rem !important;
}

.team-title{
  margin-bottom:.4rem !important;
}

.team-sub{
  max-width:720px !important;
  margin-top:.6rem !important;
}

/* main container */
.team-cinema{
  height:450px !important;
  margin-top:.5rem !important;
}

/* background rings etc */
.team-holo-ring{
  transform:scale(.88) !important;
}

.team-floor{
  transform:scale(.8) !important;
}

/* cards */
.team-card{
  zoom:.92;
}

/* navigation */
.team-nav{
  width:42px !important;
  height:42px !important;
}

.team-dots{
  bottom:12px !important;
}

/* remove extra bottom space */
#team .team-cinema{
  margin-bottom:0 !important;
}

#team .team-head .lbl{

  color:rgba(255,255,255,.72) !important;


}
/* TEAM SECTION GAP REMOVE */

#team{
  margin-top:0 !important;
  margin-bottom:0 !important;
  padding-top:3rem !important;
  padding-bottom:3rem !important;
}

#why{
  margin-bottom:0 !important;
  padding-bottom:3rem !important;
}

#career{
  margin-top:0 !important;
  padding-top:3rem !important;
}
/* WHY US HEADING ALIGN FIX */
/* BUILT FOR REAL GROWTH ALIGN FIX */

#team .team-head,
#team .team-head *{
  text-align:center !important;
}

#team .team-head{
  max-width:820px !important;
  margin:0 auto 1.2rem auto !important;
  display:block !important;
}

#team .team-head .lbl{
  display:block !important;
  width:100% !important;
  margin:0 auto .7rem auto !important;
  text-align:center !important;
}


/* WORK HEADING ALIGN FIX */
#work .work-head{
  text-align:left !important;
  margin-bottom:2.5rem !important;
}

#work .work-head .lbl,
#work .work-head .sh{
  text-align:left !important;
}
#services{
  border-bottom:1px solid rgba(255,255,255,.08) !important;
}

#work{
  border-top:none !important;
}
#work{
  margin-bottom:0 !important;
  padding-bottom:0 !important;
}

#proof{
  margin-top:0 !important;
}
/* READY TO DOMINATE - LIGHT PREMIUM */

#cta{
  background:
    radial-gradient(circle at 18% 20%,rgba(2,132,199,.05),transparent 34%),
    radial-gradient(circle at 82% 78%,rgba(26,22,32,.04),transparent 36%),
    linear-gradient(180deg,#F8FAFC,#EEF2F6) !important;
}

/* purple glow remove */
#cta::before,
#cta::after{
  display:none !important;
}
.cta-body{
  background:transparent !important;
}
.cta-h,
.cta-sub{
  color:#1A1620 !important;
}

.cta-sub{
  color:rgba(26,22,32,.68) !important;
}
.handshake-bg::after{
  background:radial-gradient(
    circle,
    rgba(2,132,199,.12),
    transparent 70%
  ) !important;
}


/* ===== CTA LIGHT PREMIUM FINAL FIX ===== */

#cta{
  background:var(--bg2) !important;
  padding-top:6rem !important;
  padding-bottom:6rem !important;
}

/* top image row + quick call card light */
.cta-imgrow{
  background:var(--bg) !important;
  border:1px solid var(--brd) !important;
  box-shadow:0 22px 60px rgba(26,22,32,.10) !important;
}

.cta-imgrow img{
  filter:brightness(.96) saturate(.92) !important;
}

.cta-call{
  background:rgba(255,255,255,.78) !important;
  border:1px solid var(--brd) !important;
  box-shadow:0 16px 40px rgba(26,22,32,.10) !important;
}

.cta-call-title{
  color:var(--ink) !important;
}

.cta-call-sub,
.cta-call-lbl{
  color:var(--ink55) !important;
}

/* main CTA body */
.cta-body{
  background:var(--bg) !important;
  border:1px solid var(--brd) !important;
  box-shadow:0 28px 80px rgba(26,22,32,.10) !important;
  padding-top:5rem !important;
  padding-bottom:5rem !important;
}

.cta-h{
  color:var(--ink) !important;
  text-shadow:none !important;
}

.cta-h em{
  color:var(--v2) !important;
}

.cta-h .gh{
  color:var(--ink) !important;
  background:none !important;
  -webkit-text-fill-color:var(--ink) !important;
}

.cta-sub,
.cta-note,
.cta-stat-l{
  color:var(--ink55) !important;
}

.cta-stat-n{
  color:var(--ink) !important;
}

/* handshake visible, not transparent */
.handshake-bg{
  opacity:.20 !important;
}

.hand-bg{
  opacity:.78 !important;
  filter:
    drop-shadow(0 18px 35px rgba(26,22,32,.18))
    brightness(.95)
    saturate(.95) !important;
}

/* View Services button visible */
.cta-b2{
  color:var(--ink) !important;
  background:rgba(255,255,255,.82) !important;
  border:1px solid var(--brd2) !important;
  box-shadow:0 12px 30px rgba(26,22,32,.10) !important;
}

.cta-b2:hover{
  background:#fff !important;
  transform:translateY(-2px) !important;
}

/* badge light */
.cta-bdg{
  color:var(--ink70) !important;
  background:rgba(255,255,255,.75) !important;
  border:1px solid var(--brd) !important;
}

/* ===== READY TO DOMINATE FINAL FIX ===== */

/* same background as Designed To Drive Growth + Numbers Don't Lie */
#cta,
.cta-body{
  background:var(--bg) !important;
}

/* YOUR MARKET word darker */
.cta-h em{
  color:var(--ink) !important;
  opacity:.82 !important;
}

/* heading line spacing */
.cta-h{
  line-height:1.18 !important;
  padding:.15em 0 !important;
}

.cta-h br{
  display:block !important;
  margin-top:.18em !important;
}

/* top + bottom touching fix */
.cta-bdg{
  margin-bottom:1.2rem !important;
}

.cta-btns{
  margin-top:1.8rem !important;
}

.cta-note{
  margin-top:1.4rem !important;
}

/* handshake much more visible */
.handshake-bg{
  opacity:.55 !important;
}

.hand-bg{
  opacity:1 !important;
  filter:
    brightness(1.05)
    contrast(1.05)
    saturate(1)
    drop-shadow(0 20px 40px rgba(26,22,32,.12)) !important;
}

/* if still faded */
.hand-bg img,
.hand-bg-left,
.hand-bg-right{
  opacity:1 !important;
}

/* stats breathing room */
.cta-stats{
  margin-top:2rem !important;
  padding-top:1rem !important;
}
.hand-bg{
  opacity:1 !important;
  mix-blend-mode:normal !important;
}


/* ===== CTA HEADING PROFESSIONAL WORD ANIMATION ===== */

.cta-h{
  display:flex !important;
  flex-direction:column !important;
  gap:.18em !important;
  line-height:.95 !important;
}

.cta-line{
  display:block !important;
  opacity:0;
  transform:translateY(22px);
  animation:ctaLineReveal .9s cubic-bezier(.16,1,.3,1) forwards;
}

.cta-l1{animation-delay:.15s;}
.cta-l2{animation-delay:.42s;}
.cta-l3{animation-delay:.70s;}

.cta-l1,
.cta-l2{
  color:var(--ink) !important;
  -webkit-text-fill-color:var(--ink) !important;
}

.cta-l3{
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
  -webkit-text-stroke:1.6px rgba(26,22,32,.70) !important;
  text-shadow:none !important;
}

@keyframes ctaLineReveal{
  0%{
    opacity:0;
    transform:translateY(22px);
    filter:blur(6px);
  }

  100%{
    opacity:1;
    transform:translateY(0);
    filter:blur(0);
  }
}
/* GET IN TOUCH = FAQ BACKGROUND */

#contact,
#get-in-touch,
.contact-section{
  background:var(--bg2) !important;
}
/* ===== ISIT TECHNOLOGIES DARK LOGO ===== */

.nlogo-t,
.nlogo-t em,
.ft-logo,
.footer-logo,
.brand-logo{
  color:#1A1620 !important;
  -webkit-text-fill-color:#1A1620 !important;
}

/* ===== DESIGNED TO DRIVE GROWTH ===== */

#why{
  background:var(--bg2) !important;
}

/* ===== NUMBERS DON'T LIE ===== */

#proof{
  background:var(--bg2) !important;
}

/* ===== REMOVE DIFFERENT SHADES ===== */

#why::before{
  display:none !important;
}

#proof::before,
#proof::after{
  display:none !important;
}

/* same FAQ style clean warm background */
#why,
#proof{
  background:
    linear-gradient(
      180deg,
      var(--bg2),
      var(--bg2)
    ) !important;
}

/* ===== FAQ TOP & BOTTOM GAP REMOVE ===== */

#faq{
  padding-top:3rem !important;
  padding-bottom:3rem !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
}

#faq .faq-head{
  margin-bottom:1.5rem !important;
}

#faq .faq-wrap{
  margin-top:0 !important;
}

/* ===== GET IN TOUCH GAP REMOVE ===== */

#contact,
#get-in-touch{
  padding-top:3rem !important;
  padding-bottom:3rem !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
}

#contact .contact-head{
  margin-bottom:1.5rem !important;
}

/* ===== FOOTER TOP & BOTTOM BLANK SPACE REMOVE ===== */

footer{
  margin-top:0 !important;
  padding-top:2rem !important;
  padding-bottom:.8rem !important;
}

.footer-wrap,
.footer-inner{
  margin-bottom:0 !important;
  padding-bottom:0 !important;
}

/* remove extra space after copyright */
footer p:last-child,
footer .copyright,
footer .footer-bottom{
  margin-bottom:0 !important;
  padding-bottom:0 !important;
}
#faq,
#contact,
footer{
  overflow:hidden !important;
}
/* ISIT logo - II highlight */

.nlogo-t em,
.ft-logo em,
.logo em{
  color:#7C3AED !important;
  -webkit-text-fill-color:#7C3AED !important;
  opacity:1 !important;
}
/* FOOTER END GAP KILL */

html,
body{
  margin:0 !important;
  padding:0 !important;
}

footer{
  margin-bottom:0 !important;
  padding-bottom:0 !important;
}

footer > *:last-child{
  margin-bottom:0 !important;
}

.footer-bottom,
.copyright{
  margin-bottom:0 !important;
  padding-bottom:0 !important;
}

body::after{
  display:none !important;
}

/* FOOTER END SPACE FINAL */

footer{
  padding-bottom:0 !important;
  margin-bottom:0 !important;
}

.ftg{
  padding-bottom:1.5rem !important;
  margin-bottom:0 !important;
}

.ft-btm{
  padding:1rem 0 0 !important;
  margin-bottom:0 !important;
}

.ft-c,
.ft-socs{
  margin-bottom:0 !important;
  padding-bottom:0 !important;
}

body{
  padding-bottom:0 !important;
  margin-bottom:0 !important;
  background:#05050A !important;
}
/* FOOTER II LOGO LIGHT */

.ft-lm span{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  background:none !important;
  text-shadow:0 0 16px rgba(255,255,255,.35) !important;
}
html,
body{
  margin:0 !important;
  padding:0 !important;
  min-height:auto !important;
  background:var(--bg2) !important;
}

footer{
  margin:0 !important;
  padding:3rem 5rem 0 !important;
  background:var(--bg2) !important;
}

.ftg{
  margin-bottom:2rem !important;
}

.ft-btm{
  margin:0 !important;
  padding:1.2rem 0 !important;
}

.ft-c,
.ft-socs{
  margin:0 !important;
  padding:0 !important;
}

footer *:last-child{
  margin-bottom:0 !important;
}
#cta,
#cta *{
  margin-bottom:0 !important;
}

#cta{
  padding-bottom:0 !important;
}

#cta .cta-body{
  margin-bottom:0 !important;
}

#cta .cta-imgrow{
  margin-bottom:0 !important;
}

#cta + section{
  margin-top:0 !important;
  padding-top:0 !important;
}


/* ===== REPLACE PURPLE TEXT WITH READABLE GOLD ===== */

:root{
  --v:#B45309 !important;
  --v2:#92400E !important;
  --vl:rgba(180,83,9,.10) !important;
  --vb:rgba(180,83,9,.26) !important;
}

/* common purple text */
em,
.lbl,
.nlogo-t em,
.sh em,
.svc-ch-title em,
.phone-wave-text span.purple,
.cta-h em,
.team-title em,
.join-premium-title em,
.form-box h3 em,
.success-card h3 em{
  color:#92400E !important;
  -webkit-text-fill-color:#92400E !important;
}

/* small labels/buttons/pills */
.svc-ui,
.stag:hover,
.cta-bdg,
.n-dtxt,
.work-tag,
.mini-lbl,
.team-role{
  color:#92400E !important;
  border-color:rgba(180,83,9,.30) !important;
  background:rgba(180,83,9,.10) !important;
}

/* mobile app text: Tap / Open / Welcome etc */
.lay-phone *,
.phone-wave-text,
.phone-wave-text span{
  color:rgba(255,255,255,.92) !important;
  -webkit-text-fill-color:rgba(255,255,255,.92) !important;
}

.phone-wave-text span.purple{
  color:#F7C76A !important;
  -webkit-text-fill-color:#F7C76A !important;
}

.nlogo-t,
.nlogo-t span{
  color:#1A1620 !important;
  -webkit-text-fill-color:#1A1620 !important;
}
.h-head .tw-it{
  color:#B45309 !important;
  -webkit-text-fill-color:#B45309 !important;
}

.ba-slider{
  background:linear-gradient(
    180deg,
    #111827 0%,
    #B45309 50%,
    #111827 100%
  ) !important;
}

.ba-slider span{
  background:linear-gradient(
    145deg,
    #111827,
    #B45309
  ) !important;
}
.trust-purple{
  color:#B45309 !important;
  -webkit-text-fill-color:#B45309 !important;
}
#team .team-title em{
  color:#F7C76A !important;
  -webkit-text-fill-color:#F7C76A !important;
  text-shadow:0 0 22px rgba(247,199,106,.35) !important;
}

.lay-shop .phone-wave-text span.purple,
.lay-shop em{
  background:linear-gradient(
    135deg,
    #B45309,
    #F7C76A
  ) !important;

  -webkit-background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
}
.lay-social em,
.social-title em{
  background:linear-gradient(
    135deg,
    #B45309,
    #F7C76A
  ) !important;

  -webkit-background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
}
.social-tags span,
.phone-tags span{
  background:rgba(247,199,106,.14) !important;
  border:1px solid rgba(180,83,9,.28) !important;
  color:#B45309 !important;
}


.h-word.tw-vi.tw-it{
  color:#92400E !important;
  -webkit-text-fill-color:#92400E !important;
  background:none !important;
  background-image:none !important;
}
.nlogo-t,
.nlogo-t span,
.nlogo-t em{
  color:#1A1620 !important;
  -webkit-text-fill-color:#1A1620 !important;
}


#why .why-title .trust-purple{
  color:#92400E !important;
  -webkit-text-fill-color:#92400E !important;
  background:none !important;
  background-image:none !important;
}

#team .lbl{
  color:#E5E7EB !important;
  -webkit-text-fill-color:#E5E7EB !important;
}

.lay-commerce .commerce-pill{
  color:#E5E7EB !important;
  -webkit-text-fill-color:#E5E7EB !important;
  background:rgba(255,255,255,.10) !important;
  border:1px solid rgba(255,255,255,.18) !important;
}

.lay-commerce .svc-ui{
  color:#E5E7EB !important;
  -webkit-text-fill-color:#E5E7EB !important;
  background:rgba(255,255,255,.10) !important;
  border:1px solid rgba(255,255,255,.18) !important;
}


.lay-socialcontent .content-pill{
  color:#E5E7EB !important;
  -webkit-text-fill-color:#E5E7EB !important;
  background:rgba(255,255,255,.10) !important;
  border:1px solid rgba(255,255,255,.18) !important;
}

.lay-socialcontent .svc-ui{
  color:#E5E7EB !important;
  -webkit-text-fill-color:#E5E7EB !important;
  background:rgba(255,255,255,.10) !important;
  border:1px solid rgba(255,255,255,.18) !important;
}
.lay-seo{
  background:
    radial-gradient(circle at 72% 28%,rgba(56,189,248,.15),transparent 30%),
    radial-gradient(circle at 16% 72%,rgba(139,92,246,.20),transparent 34%),
    linear-gradient(145deg,#0D0D1E,#080812) !important;
}

.lay-seo .svc-card{
  background:#05050A !important;
  border:1px solid rgba(255,255,255,.14) !important;
  box-shadow:0 20px 55px rgba(0,0,0,.42) !important;
}

.lay-seo .seo-rank-pill{
  color:#E5E7EB !important;
  background:rgba(255,255,255,.10) !important;
  border:1px solid rgba(255,255,255,.18) !important;
}


/* WEBSITE: dark background, light browser, images stay inside */
.lay-website{
  background:
    radial-gradient(circle at 72% 28%,rgba(56,189,248,.15),transparent 30%),
    radial-gradient(circle at 16% 72%,rgba(139,92,246,.18),transparent 34%),
    linear-gradient(145deg,#0D0D1E,#080812) !important;
  padding:46px 16px 16px !important;
  overflow:hidden !important;
}

.lay-website .browser-chrome{
  top:14px !important;
  left:16px !important;
  right:16px !important;
  background:#F8FAFC !important;
  border:1px solid rgba(255,255,255,.35) !important;
  z-index:20 !important;
}

.lay-website .url-bar{
  background:#E5E7EB !important;
  color:#6B7280 !important;
}

.lay-website .web-track{
  position:absolute !important;
  top:44px !important;
  left:16px !important;
  right:16px !important;
  bottom:16px !important;
  width:max-content !important;
  max-height:none !important;
  overflow:visible !important;
  display:flex !important;
  gap:10px !important;
  animation:webScroll 28s linear infinite !important;
  z-index:4 !important;
}

.lay-website .web-frame{
  width:190px !important;
  height:100% !important;
  flex-shrink:0 !important;
  overflow:hidden !important;
  border-radius:12px !important;
  background:#05050A !important;
  border:1px solid rgba(255,255,255,.14) !important;
}

.lay-website .web-frame img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}
.lay-website .svc-ui{
  color:#E5E7EB !important;
  -webkit-text-fill-color:#E5E7EB !important;
  background:rgba(255,255,255,.10) !important;
  border:1px solid rgba(255,255,255,.18) !important;
}
/* WEBSITE CHROME CLIP FINAL FIX */
.lay-website{
  overflow:hidden !important;
}

.lay-website .browser-window{
  position:absolute !important;
  top:14px !important;
  left:16px !important;
  right:16px !important;
  bottom:14px !important;
  border-radius:12px !important;
  overflow:hidden !important;
  background:#fff !important;
  border:1px solid rgba(26,22,32,.10) !important;
  z-index:4 !important;
}

.lay-website .browser-chrome{
  position:relative !important;
  top:auto !important;
  left:auto !important;
  right:auto !important;
  height:28px !important;
  z-index:8 !important;
}

.lay-website .web-track{
  position:absolute !important;
  top:28px !important;
  left:0 !important;
  right:auto !important;
  bottom:0 !important;
  height:calc(100% - 28px) !important;
  max-height:none !important;
  width:max-content !important;
  overflow:visible !important;
  z-index:5 !important;
}

.lay-website .web-frame{
  height:100% !important;
}

/* WE ALWAYS WELCOME - LIGHT BACKGROUND */

.join-premium-right{
  background:
    radial-gradient(circle at 75% 25%, rgba(56,189,248,.08), transparent 40%),
    radial-gradient(circle at 25% 75%, rgba(180,83,9,.08), transparent 40%),
    linear-gradient(145deg,#F8F6F2,#EFEAE2) !important;
}/* WE ALWAYS WELCOME - FULL SECTION LIGHT */

.join-after-section,
#career{
  background:#F8F6F2 !important;
}

.join-premium-box{
  background:#F8F6F2 !important;
}

.join-premium-left{
  background:#F8F6F2 !important;
  border-right:1px solid rgba(26,22,32,.08) !important;
}

.join-premium-right{
  background:#F8F6F2 !important;
}
/* WE ALWAYS WELCOME - TEXT DARK */

.join-premium-title{
  color:#1A1620 !important;
}

.join-premium-title em{
  color:#B45309 !important;
  -webkit-text-fill-color:#B45309 !important;
  background:none !important;
}

.join-premium-desc{
  color:rgba(26,22,32,.72) !important;
}

.join-premium-note{
  color:rgba(26,22,32,.55) !important;
}

.join-premium-tags span{
  color:#1A1620 !important;
  background:rgba(255,255,255,.75) !important;
  border:1px solid rgba(26,22,32,.10) !important;
}

.join-premium-kicker{
  color:#B45309 !important;
}

/* RESTORE WELCOME IMAGES */

.jf-card{
  opacity:1 !important;
  visibility:visible !important;
  display:block !important;
  animation:none !important;
}

.jf-1{width:185px !important;height:135px !important;top:42px !important;left:38px !important;}
.jf-2{width:148px !important;height:148px !important;top:28px !important;right:42px !important;left:auto !important;}
.jf-3{width:162px !important;height:118px !important;bottom:55px !important;left:26px !important;top:auto !important;}
.jf-4{width:130px !important;height:130px !important;bottom:38px !important;right:58px !important;left:auto !important;top:auto !important;}
.jf-5{width:110px !important;height:82px !important;top:50% !important;left:50% !important;transform:translate(-50%,-50%) !important;}



.welcome-hero-image{
  position:absolute;
  left:50%;
  top:50%;
  width:320px;
  height:220px;
  transform:translate(-50%,-50%);
  border-radius:24px;
  overflow:hidden;
  z-index:50;
  box-shadow:0 24px 70px rgba(0,0,0,.18);
}

.welcome-hero-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* HIDE OLD FLOATING CARDS */

.jf-orb,
.jf-card{
  display:none !important;
}

/* WELCOME IMAGE SMOOTH CHANGE */

.welcome-hero-image img{
  transition:opacity .45s ease, transform .55s ease, filter .55s ease !important;
}

.welcome-hero-image img.welcome-changing{
  opacity:0 !important;
  transform:scale(1.12) !important;
  filter:blur(5px) brightness(.9) !important;
}



/* WELCOME IMAGE BIGGER */

.welcome-hero-image{
  width:100% !important;
  height:520px !important;   /* pehla jo vi aa us ton vaddi */
}

#welcomeHeroImg{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  transform:scale(1.1) !important;   /* 50% bigger */
  transform-origin:center center !important;
}


.join-premium-desc{
  font-family:var(--fd) !important;
  font-size:15px !important;
  line-height:1.8 !important;
  color:var(--ink70) !important;
}
.join-premium-btn{
  background:linear-gradient(135deg,#B45309,#D97706) !important;
  color:#fff !important;
  border:none !important;
  box-shadow:0 12px 30px rgba(180,83,9,.35) !important;
}

.join-premium-btn:hover{
  transform:translateY(-2px) !important;
  box-shadow:0 18px 40px rgba(180,83,9,.45) !important;
}
/* FAQ ANSWERS FONT */
#faq .faq-trigger span{
  font-family:var(--fd) !important;
}
#faq .faq-body{
  font-family:var(--fd) !important;
  font-size:12px !important;
  line-height:1.8 !important;
  color:var(--ink70) !important;
  letter-spacing:0 !important;
}

/* REMOVE PURPLE BEHIND WE ENGINEER ONLY */

.hero::before{
  background:
    radial-gradient(ellipse 60% 55% at 18% 25%, rgba(255,255,255,.10), transparent 62%),
    radial-gradient(ellipse 50% 50% at 88% 40%, rgba(2,132,199,.06), transparent 64%),
    linear-gradient(180deg,var(--bg),var(--bg2)) !important;
}

.bp,
.bo,
.bp:hover,
.bo:hover,
.bp:focus,
.bo:focus,
.bp:active,
.bo:active{
  text-decoration:none !important;
}

.bp *,
.bo *,
.bp::before,
.bp::after,
.bo::before,
.bo::after{
  text-decoration:none !important;
}

.bp::after,
.bo::after{
  display:none !important;
  content:none !important;
}


/* MARQUEE TEXT BRIGHTER */

.mq-i{
  color:rgba(255,255,255,.96) !important;
  font-weight:100 !important;
  text-shadow:0 0 12px rgba(255,255,255,.18) !important;
}

.mq-s{
  color:#F7C76A !important;
  opacity:1 !important;
}

/* MAINTENANCE BEFORE/AFTER BOX SMALLER */
.lay-monitor .before-after-box{
  left:50% !important;
  right:auto !important;
  width:430px !important;
  max-width:90% !important;
  height:235px !important;
  transform:translateX(-50%) !important;
}
/* TEAM SECTION BLACK BACKGROUND */

#team{
  background:#05050A !important;
}

#team::before,
#team::after{
  display:none !important;
}

.team-bg-orb,
.team-bg-orb-1,
.team-bg-orb-2{
  opacity:.15 !important;
}

.team-bg-orb,
.team-bg-orb-1,
.team-bg-orb-2{
  display:none !important;
}

/* CONTACT ADDRESS DETAILS FONT FIX */

.seo-home-text{
  padding:4rem 5rem;
  background:var(--bg2);
  border-top:1px solid var(--brd);
}

.seo-home-text h2{
  font-family:var(--fd);
  font-size:clamp(2rem,4vw,4rem);
  line-height:1.05;
  color:var(--ink);
  max-width:900px;
  margin-bottom:1.2rem;
}

.seo-home-text p{
  max-width:960px;
  font-size:15px;
  line-height:1.9;
  color:var(--ink70);
  margin-bottom:1rem;
}
/* ===== SPLASH OVERLAY — LIGHT PREMIUM SAME OLD STYLE ===== */

#splashOverlay{
  position:fixed;
  inset:0;
  z-index:999999;
  overflow:hidden;
  pointer-events:none;
  pointer-events:none;
    background:
    radial-gradient(circle at 18% 25%,rgba(180,83,9,.08),transparent 36%),
    radial-gradient(circle at 78% 35%,rgba(2,132,199,.06),transparent 34%),
    radial-gradient(circle at 50% 95%,rgba(26,22,32,.04),transparent 42%),
    linear-gradient(180deg,#F9F7F3,#F2EFE9 60%,#EBE7E0);
  transition:opacity .8s ease, visibility .8s ease;
}

#splashOverlay::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.42;
  background-image:
    linear-gradient(rgba(26,22,32,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(26,22,32,.04) 1px,transparent 1px);
  background-size:76px 76px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black,transparent 78%);
}

#splashOverlay.hide{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.splash-fog{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}

.splash-fog span{
  position:absolute;
  width:720px;
  height:260px;
  border-radius:999px;
  filter:blur(58px) brightness(1.08) saturate(.9);
  opacity:.55;
  mix-blend-mode:multiply;
  background:
    radial-gradient(ellipse at 20% 50%,rgba(255,255,255,.65),transparent 38%),
    radial-gradient(ellipse at 48% 45%,rgba(180,83,9,.16),transparent 45%),
    radial-gradient(ellipse at 78% 55%,rgba(2,132,199,.08),transparent 42%);
}

.splash-fog span:first-child{
  left:-740px;
  top:28%;
  animation:splashFogOne 9s linear infinite;
}

.splash-fog span:last-child{
  right:-740px;
  top:48%;
  opacity:.35;
  animation:splashFogTwo 12s linear infinite;
}

@keyframes splashFogOne{
  to{transform:translateX(calc(100vw + 900px));}
}

@keyframes splashFogTwo{
  to{transform:translateX(calc(-100vw - 900px));}
}

.splash-top-brand{
  position:absolute;
  top:28px;
  left:50%;
  transform:translateX(-50%);
  z-index:5;
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--fm);
  font-size:9px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:rgba(26,22,32,.52);
  white-space:nowrap;
}

.splash-top-brand span{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#15803D;
  box-shadow:0 0 12px rgba(21,128,61,.45);
  animation:splashPulse 1.6s ease-in-out infinite;
}

@keyframes splashPulse{
  0%,100%{transform:scale(1);opacity:1;}
  50%{transform:scale(1.6);opacity:.45;}
}
.splash-word,
.splash-logo-screen{
position:absolute;
inset:0;
z-index:4;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
opacity:0;
transform:translateY(22px) scale(.96);
filter:blur(10px);
transition:opacity .45s ease, transform .65s cubic-bezier(.16,1,.3,1), filter .45s ease;
}


/* Digital + Brands side by side */
#sw2.splash-active ~ #sw3.splash-active,
#sw3.splash-active {
  /* sw3 ko sw2 ke saath row mein laao */
}

body.splash-duo #splashOverlay {
  display: flex;
  align-items: center;
  justify-content: center;
}

body.splash-duo .splash-word.splash-active {
  position: relative;
  inset: auto;
}

body.splash-duo #splashOverlay > .splash-word.splash-active {
  display: flex;
}

.splash-word.splash-active,
.splash-logo-screen.splash-active{
  opacity:1;
  transform:translateY(0) scale(1);
  filter:blur(0);
}

.splash-kicker{
  font-family:var(--fm);
  font-size:9px;
  letter-spacing:3.5px;
  text-transform:uppercase;
  color:#92400E;
  margin-bottom:1.2rem;
  padding:6px 13px;
  border-radius:999px;
  border:1px solid rgba(180,83,9,.22);
  background:rgba(180,83,9,.08);
}

.splash-big{
  font-family:var(--fd);
  font-size:clamp(3rem,9vw,7.5rem);
  font-weight:800;
  line-height:.88;
  letter-spacing:-3px;
  text-align:center;
  color:#1A1620;
  padding-bottom:.12em;
  display:inline;
}

.splash-brown{
  color:#B45309;
  font-style:normal;
  margin-left:0.28em;
}

.splash-outline{
  color:transparent;
  -webkit-text-stroke:1.8px rgba(26,22,32,.55);
}

.splash-sub{
  margin-top:1rem;
  font-family:var(--fm);
  font-size:9px;
  letter-spacing:4px;
  text-transform:uppercase;
  color:rgba(26,22,32,.46);
  text-align:center;
}

.splash-logo-wrap{
  position:relative;
  text-align:center;
}



.splash-ring{
  position:absolute;
  left:50%;
  top:50%;

  width:414px !important;
  height:414px !important;

  transform:translate(-50%,-50%);
  border-radius:50%;
  border:1px solid rgba(180,83,9,.18);

  box-shadow:
    0 0 55px rgba(180,83,9,.10),
    inset 0 0 35px rgba(255,255,255,.45);

  animation:splashRingSpin 14s linear infinite;
}
.splash-ring::after{
  content:'';
  position:absolute;
  top:-4px;
  left:50%;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#B45309;
  box-shadow:0 0 18px rgba(180,83,9,.45);
}

@keyframes splashRingSpin{
  from{transform:translate(-50%,-50%) rotate(0deg);}
  to{transform:translate(-50%,-50%) rotate(360deg);}
}

.splash-logo{
  position:relative;
  z-index:2;
  font-family:var(--fd);
  font-size:clamp(6rem,18vw,15rem);
  font-weight:800;
  letter-spacing:-6px;
  line-height:.82;
  color:#1A1620;
}

.splash-logo em{
  color:#B45309;
  font-style:italic;
}

.splash-logo::after{
  content:'';
  position:absolute;
  left:5px;
  right:5px;
  bottom:-14px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,#1A1620,#B45309,#0284C7);
  box-shadow:0 0 18px rgba(180,83,9,.25);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .8s cubic-bezier(.16,1,.3,1) .25s;
}

.splash-logo-screen.splash-active .splash-logo::after{
  transform:scaleX(1);
}

.splash-tech{
  margin-top:2.5rem;
  font-family:var(--fm);
  font-size:clamp(10px,1.5vw,15px);
  letter-spacing:8px;
  color:rgba(26,22,32,.58);
  text-transform:uppercase;
  position:relative;
  z-index:2;
}

.splash-tagline{
  margin-top:1.4rem;
  font-family:var(--fm);
  font-size:9px;
  letter-spacing:3.4px;
  text-transform:uppercase;
  color:rgba(26,22,32,.42);
  position:relative;
  z-index:2;
}

.h-sub{
  font-family:'Inter',sans-serif;
}
.form-kicker{
  color:#fff !important;
  background:transparent !important;
  border:none !important;
}
.form-box h3{
  color:#fff;
}

/* ===== FIX 1: HERO CENTER ALIGN ON CHROME / DESKTOP ===== */
.hero{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  align-items:center !important;
  gap:3rem !important;
}

.h-left{
  max-width:680px !important;
  justify-self:start !important;
}

.h-head{
  text-align:left !important;
}



/* ===== FIX 2: SEO TEXT SECTION WIDTH / EMPTY RIGHT SPACE ===== */
.seo-home-text{
  max-width:1050px !important;
  margin:0 auto !important;
  padding:4rem 5rem 2rem !important;
  text-align:left !important;
}

.seo-home-text h2{
  font-size:clamp(2rem,4vw,3.8rem) !important;
  line-height:1.05 !important;
  max-width:900px !important;
  margin-bottom:1.2rem !important;
}

.seo-home-text p{
  max-width:980px !important;
  font-size:15.5px !important;
  line-height:1.85 !important;
  color:var(--ink70) !important;
  margin-bottom:1rem !important;
}


/* ===== FIX 3: SERVICES — TEXT TOP, ANIMATION BELOW ===== */
.svc-ch{
  display:flex !important;
  flex-direction:column !important;
  gap:2rem !important;
  align-items:stretch !important;
}

.svc-ch-meta{
  width:100% !important;
  max-width:950px !important;
}

.svc-visual{
  width:100% !important;
  min-height:460px !important;
}


/* ===== MOBILE FIX ===== */
@media(max-width:900px){
  .hero{
    grid-template-columns:1fr !important;
    text-align:left !important;
    padding-left:1.4rem !important;
    padding-right:1.4rem !important;
  }

  .h-left{
    justify-self:center !important;
    width:100% !important;
  }



  .seo-home-text{
    padding:3rem 1.4rem 1.5rem !important;
  }

  .svc-visual{
    min-height:380px !important;
  }
}

/* ===== HERO TEXT CENTER + ANIMATION FIX ===== */

.hero{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}

.h-left{
  width:100% !important;
  max-width:900px !important;
  margin:0 auto !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  z-index:5 !important;
}

.ey{
  justify-content:center !important;
  margin:0 auto 1.3rem !important;
}

.h-head{
  text-align:center !important;
  margin:0 auto !important;
}

.h-row{
  justify-content:center !important;
  text-align:center !important;
}





.h-btns{
  justify-content:center !important;
  margin-top:2rem !important;
}

/* animation */
.ey,
.h-row,
.h-sub,
.h-btns{
  opacity:0;
  transform:translateY(24px);
  animation:heroFadeUp .85s ease forwards;
}

.ey{animation-delay:.2s;}
.h-row:nth-child(1){animation-delay:.35s;}
.h-row:nth-child(2){animation-delay:.5s;}
.h-row:nth-child(3){animation-delay:.65s;}
.h-sub{animation-delay:.85s;}
.h-btns{animation-delay:1.05s;}

@keyframes heroFadeUp{
  to{
    opacity:1;
    transform:translateY(0);
  }
}


.h-sub{
  max-width:1500px !important;
  width:100%;
  margin:1.5rem auto 0;
  text-align:center;
  line-height:1.8;
}
.h-sub{
  max-width:1500 !important;
}
.ey,
.h-head,
.h-sub,
.h-btns{
  animation:fadeUp .8s ease forwards;
}

@keyframes fadeUp{
  from{
    opacity:0;
    transform:translateY(30px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}
.h-left{
  max-width:none !important;
  width:100% !important;
  padding:0 3rem !important;
}
.h-sub{
  max-width:900px !important;
  width:100% !important;
  margin:1.5rem auto 0 !important;
  text-align:center !important;
  line-height:1.75 !important;
  font-size:17px !important;
  white-space:normal !important;
}


.h-sub{
  max-width:1100px !important;
  width:100% !important;
  margin:1.5rem auto 0 !important;
  text-align:center !important;
  line-height:1.7 !important;

  white-space:normal !important;

  font-size:18px !important;
  font-weight:500 !important;
}


@media(max-width:900px){
  .h-sub{
    white-space:normal !important;
    max-width:92vw !important;
  }
}

/* ===== SEO INTRO PREMIUM ===== */
.seo-home-text{
  max-width:100%;
  width:100%;
  padding:5rem 2rem;
  margin:0 auto;

  display:flex;
  flex-direction:column;
  align-items:flex-start;

  position:relative;

  /* REMOVE THIS */
  /* border-left:4px solid #92400E; */

  padding-left:3rem;
}

.seo-home-text h2{
  font-size:clamp(2.2rem,4vw,3.8rem);
  line-height:1.1;
  margin-bottom:1.5rem;

  color:#111;
  font-weight:800;

  max-width:100%;
  text-align:left;
}

.seo-home-text p{
  max-width:100%;
  width:100%;

  font-size:17px;
  line-height:1.9;

  color:#444;
  text-align:left;

  margin-bottom:1.2rem;
}

/* subtle animation */
.seo-home-text h2{
  animation:slideTitle .9s ease;
}

.seo-home-text p:nth-of-type(1){
  animation:slideText .9s ease .15s both;
}

.seo-home-text p:nth-of-type(2){
  animation:slideText .9s ease .3s both;
}

@keyframes slideTitle{
  from{
    opacity:0;
    transform:translateX(-40px);
  }
  to{
    opacity:1;
    transform:translateX(0);
  }
}

@keyframes slideText{
  from{
    opacity:0;
    transform:translateX(-25px);
  }
  to{
    opacity:1;
    transform:translateX(0);
  }
}


.seo-home-text{
  width:100%;
  max-width:1400px !important;

  margin-left:2rem !important;   /* <-- gap from left side */
  margin-right:2rem !important;

  border-left:4px solid #92400E;

  padding-top:4.5rem;
  padding-bottom:4.5rem;

  padding-left:2rem !important;
  padding-right:2rem !important;
}
.seo-home-text h2{
  max-width:1350px !important;
  width:100% !important;
  font-size:clamp(2.3rem,4vw,3.9rem) !important;
  line-height:1.08 !important;
  font-weight:900 !important;
  color:#111 !important;
  margin-bottom:1.4rem !important;
}
.seo-home-text p{
  font-family:'Syne', sans-serif !important;

  max-width:1600px !important;
  width:100% !important;

  font-size:18px !important;
  line-height:1.9 !important;

  font-weight:500 !important;
  color:#333 !important;

  margin-bottom:1rem !important;
}


.seo-home-text p{
  padding-bottom:10px !important;
  display:block !important;
  height:auto !important;
  min-height:auto !important;
}

.seo-home-text p{
  font-family:Arial, sans-serif !important;
  line-height:2 !important;
}


/* ===== SERVICES HEIGHT FIX ===== */
/* ===== SERVICES HEIGHT FIX ===== */

.svc-ch{
  min-height:auto !important;
  padding:3.2rem 0 !important;
}

.svc-visual{
  min-height:360px !important;
  height:360px !important;
}

.svc-ch-meta{
  padding-top:0 !important;
}

.svc-ch-title{
  margin-bottom:1rem !important;
}

/* Mobile App row also same layout */
.svc-ch.mobile-row{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:2rem !important;
}

.svc-ch.mobile-row .svc-ch-meta{
  order:1 !important;
  text-align:left !important;
}

.svc-ch.mobile-row .svc-visual{
  order:2 !important;
}
.svc-card,
.app-shot,
.web-frame,
.content-frame,
.commerce-card{
  border-radius:18px !important;
  overflow:hidden !important;
  box-shadow:0 18px 45px rgba(26,22,32,.14) !important;
}

.svc-card img,
.app-shot img,
.web-frame img,
.content-frame img,
.commerce-card img{
  height:100% !important;
  object-fit:cover !important;
}



/* ===== BRAND IMAGE CUT FIX ===== */

.lay-brand{
  height:340px !important;
  min-height:340px !important;
  max-height:340px !important;
  padding:1.2rem 0 !important;
  overflow:hidden !important;
}

.brand-reel{
  height:100% !important;
  align-items:center !important;
}

/* SEO images vertically center */


.lay-seo{
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
  align-items:center !important;
  height:100% !important;
}

/* ===== SERVICES BOTTOM SPACE FIX ===== */

.svc-ch{
  min-height:auto !important;
  height:auto !important;
  padding:2.2rem 0 !important;
  margin-bottom:0 !important;
}

.svc-visual{
  height:300px !important;
  min-height:300px !important;
  max-height:300px !important;
  margin-bottom:0 !important;
}

.svc-section{
  gap:2.2rem !important;
}

.svc-ch-meta{
  margin-bottom:0 !important;
}


/* ===== AUDIENCE FLOWER MORE SPACING ===== */

.lay-chat .eng-flower{
  transform-origin:center center !important;
}

.lay-chat .eng-flower-card{
  width:180px !important;
  height:180px !important;
}


/* ===== AUDIENCE LABEL FIX ===== */

.eng-label{
  position:absolute !important;
  left:50% !important;
  bottom:12px !important;
  transform:translateX(-50%) !important;

  background:rgba(17,17,17,.85) !important;
  backdrop-filter:blur(8px) !important;

  color:#fff !important;
  font-size:13px !important;
  font-weight:600 !important;

  padding:8px 14px !important;
  border-radius:999px !important;

  white-space:nowrap !important;
  z-index:20 !important;
}

.eng-label{
  background:rgba(146,64,14,.92) !important;
  border:1px solid rgba(255,255,255,.15) !important;
  box-shadow:0 8px 25px rgba(0,0,0,.25) !important;
}




/* ===== AUDIENCE ENGAGEMENT CIRCLE FIX ===== */

.svc-ch:has(.lay-chat){
  min-height:760px !important;
  height:auto !important;
  padding-bottom:5rem !important;
  overflow:visible !important;
}

.svc-ch:has(.lay-chat) .svc-ch-meta{
  position:relative !important;
  z-index:5 !important;
  background:#F9F7F3 !important;
  padding-bottom:2rem !important;
}

.lay-chat{
  height:520px !important;
  min-height:520px !important;
  max-height:none !important;
  margin-top:2rem !important;
  overflow:visible !important;
  position:relative !important;
  z-index:1 !important;
}

.eng-flower-wrap{
  margin-top:70px !important;
}


.eng-label{
  background:rgba(255,255,255,.92) !important;
  color:#111 !important;
  border:1px solid rgba(146,64,14,.25) !important;
  box-shadow:0 8px 22px rgba(26,22,32,.16) !important;
  padding:7px 13px !important;
  border-radius:999px !important;
  font-size:10px !important;
  font-weight:800 !important;
  letter-spacing:1px !important;
  white-space:nowrap !important;
}

/* Audience flower upar shift */
.lay-chat{
  transform:translateY(-70px) !important;
}

/* Audience section bigger */
.svc-ch:has(.lay-chat){
  min-height:900px !important;
  padding-bottom:5rem !important;
}

.lay-chat{
  height:700px !important;
  min-height:700px !important;
  max-height:none !important;
  overflow:visible !important;
}

.eng-flower-wrap{
  margin-top:40px !important;
}
.eng-flower-wrap{
  scale:0.85 !important;
  transform-origin:center center !important;
  margin-top:80px !important;
}


.lay-chat{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  overflow:visible !important;
}

.eng-flower-wrap{
  margin-top:0 !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
}
/* ===== MAINTENANCE & SCALING SIZE FIX ===== */

.svc-ch:has(.lay-monitor){
  min-height:720px !important;
  padding-bottom:4rem !important;
}

.lay-monitor{
  height:520px !important;
  min-height:520px !important;
  max-height:none !important;
  overflow:visible !important;
}

.before-after-box{
  height:360px !important;
  min-height:360px !important;
}

.ba-mini-row{
  margin-top:1.5rem !important;
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  gap:1rem !important;
}

/* ===== FAQ BIGGER & PREMIUM ===== */

#faqAccordion .faq-trigger span:first-child{
  font-size:18px !important;
  font-weight:700 !important;
  line-height:1.5 !important;
  color:#111 !important;
}

#faqAccordion .faq-body{
  font-size:16px !important;
  line-height:1.9 !important;
  color:#444 !important;
  padding-right:1rem !important;
}

#faqAccordion .faq-plus{
  width:34px !important;
  height:34px !important;
  font-size:22px !important;
}

#faqAccordion .faq-trigger{
  padding:1.4rem 0 !important;
}

.nc{
  display:flex;
  align-items:center;

  margin-left:40px !important;  /* logo ton gap */
  justify-content:flex-start !important;

  flex:1;
}

/* normal state */
.tech-cloud span{
  transition:all .35s ease;
  cursor:pointer;
}

/* hover only */
.tech-cloud span:hover{
  transform:translateY(-8px) scale(1.08);
  color:#B45309;
  text-shadow:0 0 18px rgba(180,83,9,.35);
}
.tech-cloud span:hover{
  animation:techRun .8s ease infinite alternate;
}

@keyframes techRun{
  from{
    transform:translateX(0);
  }
  to{
    transform:translateX(12px);
  }
}
.proof-card.tech{
  min-height:auto !important;
  height:auto !important;
  padding:1.2rem !important;
}

/* ===== OVERALL SMOOTHNESS FIX ===== */

*{
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

html{
  scroll-behavior:smooth;
}

img{
  max-width:100%;
  display:block;
}

.svc-card,
.work-card,
.proof-card,
.hc,
.team-card,
.rev,
.eng-flower-card,
.brand-frame{
  will-change:transform;
  transform:translateZ(0);
  backface-visibility:hidden;
}

@media(max-width:768px){
  .c-dot,
  .c-ring{
    display:none !important;
  }

  .hr-piano,
  .hr-eq,
  .orb-ring,
  .review-track,
  .eng-flower{
    animation-duration:18s !important;
  }
}
.brand-frame img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.brand-reel{
  will-change:transform;
}
.svc-visual,
.team-card,
.work-card,
.proof-card,
.brand-frame,
.content-frame,
.commerce-card,
.eng-flower-card{
  transform:translateZ(0);
  will-change:transform;
  backface-visibility:hidden;
}
@media(max-width:900px){
  .c-dot,
  .c-ring{
    display:none !important;
  }
}
/* Brand Identity continuous reel fix - no image gap */
.brand-reel{
  display:flex !important;
  gap:0 !important;
  width:max-content !important;
  animation:brandReelMove 18s linear infinite !important;
}

.brand-frame{
  margin:0 !important;
  flex:0 0 auto !important;
  border-radius:0 !important;
}

.brand-frame img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}

@keyframes brandReelMove{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
/* ===== MOBILE NAV FIX ONLY ===== */
@media(max-width:768px){

  #nav{
    padding:14px 18px !important;
  }

  .nc,
  .n-pill,
  .n-cta{
    display:none !important;
  }

  .n-ham{
    display:flex !important;
  }

  .mnav{
    display:flex !important;
  }
}
/* ===== FORCE MOBILE HAMBURGER NAV ===== */
@media(max-width:900px){

  #nav .nc,
  #nav .n-pill,
  #nav .n-cta{
    display:none !important;
  }

  #nav .n-ham{
    display:flex !important;
    flex-direction:column !important;
    gap:5px !important;
    width:42px !important;
    height:42px !important;
    align-items:center !important;
    justify-content:center !important;
    position:relative !important;
    z-index:100001 !important;
    background:#fff !important;
    border:1px solid rgba(0,0,0,.12) !important;
    border-radius:12px !important;
  }

  #nav .n-ham span{
    display:block !important;
    width:22px !important;
    height:2px !important;
    background:#1A1620 !important;
    border-radius:99px !important;
  }

  .mnav{
    display:flex !important;
    position:fixed !important;
    inset:0 !important;
    z-index:100000 !important;
  }
}

/* ===== PREMIUM MOBILE MENU FIX ===== */
@media(max-width:900px){

  #nav{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
  }

  #nav .nlogo{
    margin-right:auto !important;
  }

  #nav .n-ham{
    margin-left:auto !important;
    position:absolute !important;
    right:18px !important;
    top:50% !important;
    transform:translateY(-50%) !important;

    width:46px !important;
    height:46px !important;
    border-radius:16px !important;

    background:linear-gradient(135deg,#fff,#f8efe6) !important;
    border:1px solid rgba(146,64,14,.18) !important;
    box-shadow:0 10px 28px rgba(26,22,32,.12) !important;
  }

  #nav .n-ham span{
    width:22px !important;
    height:2px !important;
    background:#92400E !important;
    border-radius:99px !important;
    transition:.3s ease !important;
  }

  #nav .n-ham.op span:nth-child(1){
    transform:translateY(7px) rotate(45deg) !important;
  }

  #nav .n-ham.op span:nth-child(2){
    opacity:0 !important;
  }

  #nav .n-ham.op span:nth-child(3){
    transform:translateY(-7px) rotate(-45deg) !important;
  }

  .mnav{
    background:rgba(249,247,243,.96) !important;
    backdrop-filter:blur(18px) !important;
    color:#1A1620 !important;
    padding:7rem 1.4rem 2rem !important;
  }

  .mnav .mna{
    background:rgba(255,255,255,.75) !important;
    border:1px solid rgba(146,64,14,.16) !important;
    border-radius:18px !important;
    padding:1rem 1.1rem !important;
    margin-bottom:.75rem !important;
    color:#1A1620 !important;
    box-shadow:0 12px 30px rgba(26,22,32,.07) !important;
  }

  .mna-n{
    color:#92400E !important;
  }

  

/* ===== MOBILE MENU CLEAN PROFESSIONAL FIX ===== */

@media(max-width:900px){

  .ey{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    gap:10px !important;
    flex-wrap:nowrap !important;
    white-space:nowrap !important;
  }

}
@media(max-width:900px){

  .h-head{
    width:100% !important;
    text-align:center !important;
    margin:0 auto !important;
  }

  .h-sub{
    width:100% !important;
    max-width:100% !important;
    text-align:center !important;
    margin:1rem auto 0 !important;
    white-space:normal !important;
    padding:0 12px !important;
    font-size:14px !important;
    line-height:1.7 !important;
  }

}
@media (max-width:1200px){

   .ey{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  gap:2px !important;
  margin-left:-30px !important;
  letter-spacing:0.5px !important;
}

  .ey-ln{
    width:8px !important;
    min-width:8px !important;
    height:2px !important;
    margin-right:4px !important;
  }

  .ey-p{
    display:inline-block !important;
    margin-left:2px !important;
    margin-top:0 !important;
    position:relative !important;
    top:0 !important;
    white-space:nowrap !important;
  }
}
@media (max-width:1200px){

  .ey{
    font-size:9px !important;
  }

  .ey-p{
    font-size:9px !important;
  }

}



/* ===== MOBILE HERO FINAL CLEAN ===== */
@media(max-width:900px){

  .h-left,
  .h-head,
  .h-row{
    width:100% !important;
    max-width:100% !important;
  }

  .h-head{
    transform:translateX(-6%) !important;
    text-align:center !important;
    margin:0 auto !important;
  }

  .tw-it{
    position:relative !important;
    left:4% !important;
  }

  .h-sub{
    width:104% !important;
    max-width:104% !important;
    margin:1.2rem 0 0 -8px !important;

    padding-left:.55rem !important;
    padding-right:0 !important;

    border-left:2px solid var(--vb) !important;
    text-align:left !important;

    white-space:normal !important;
    font-size:12.8px !important;
    line-height:1.35 !important;
  }

}

/* ===== MOBILE HERO DESC FIX ===== */
@media(max-width:900px){

  html,
  body{
    overflow-x:hidden !important;
    max-width:100% !important;
  }

  .hero,
  .h-left{
    overflow-x:hidden !important;
    max-width:100% !important;
  }

  .h-left{
    padding-left:.45rem !important;
    padding-right:.45rem !important;
  }

  .h-sub{
    width:calc(100vw - 1.2rem) !important;
    max-width:calc(100vw - 1.2rem) !important;

    margin:1.2rem 0 0 0 !important;

    padding-left:1rem !important;   /* line te wording gap */
    padding-right:.2rem !important;

    border-left:2px solid var(--vb) !important;

    text-align:left !important;
    font-size:13.5px !important;
    line-height:1.38 !important;
    white-space:normal !important;
  }
}


/* ===== MOBILE CUT FIX ===== */
@media(max-width:900px){

  html,
  body{
    overflow-x:hidden !important;
    max-width:100% !important;
  }

  .h-left{
    padding-left:1.1rem !important;
    padding-right:1.1rem !important;
    overflow:visible !important;
  }

  .ey{
    margin-left:0 !important;
    padding-left:0 !important;
    overflow:visible !important;
  }

  .ey-ln{
    margin-left:0 !important;
    flex-shrink:0 !important;
  }

  .h-sub{
    width:100% !important;
    max-width:100% !important;

    margin:1.2rem 0 0 0 !important;

    padding-left:1rem !important;
    padding-right:0 !important;

    border-left:2px solid var(--vb) !important;

    text-align:left !important;
    font-size:13.5px !important;
    line-height:1.42 !important;
    white-space:normal !important;
  }
}

@media(max-width:900px){

  /* 1) app bar ton gap */
  .hero{
    padding-top:5.5rem !important;
  }

  .ey{
    margin-top:1rem !important;
  }

  /* 2) description line + text wider */
  .h-left{
    padding-left:.65rem !important;
    padding-right:.65rem !important;
  }

  .h-sub{
    width:100% !important;
    max-width:100% !important;
    margin:1.2rem 0 0 0 !important;

    padding-left:.75rem !important;
    border-left:2px solid var(--vb) !important;

    text-align:left !important;
    font-size:14.2px !important;
    line-height:1.3 !important;
  }

  /* 3) buttons gap from divider */
  .h-btns{
    margin-top:1.8rem !important;
    margin-bottom:3rem !important;
    gap:.8rem !important;
  }

  .sbar{
    margin-top:2.2rem !important;
  }
}
@media(max-width:900px){

  .h-sub{
    width:112% !important;
    max-width:112% !important;

    margin:1.2rem 0 0 -30px !important;

    padding-left:.5rem !important;
    padding-right:0 !important;

    text-align:left !important;
  }

}

/* ===== SEO SECTION TECH PREMIUM ANIMATION ===== */

.seo-home-text{
  position:relative !important;
  overflow:hidden !important;
  background:
    radial-gradient(circle at 8% 20%, rgba(146,64,14,.08), transparent 28%),
    radial-gradient(circle at 90% 70%, rgba(139,92,246,.08), transparent 30%),
    linear-gradient(180deg, #F9F7F3, #F4EFE8) !important;
}

.seo-home-text::after{
  content:"ISIT";
  position:absolute;

  left:50%;
  top:50%;
  transform:translate(-50%,-50%);

  font-family:var(--fd);
  font-size:clamp(5rem,14vw,12rem);
  font-weight:900;
  letter-spacing:-4px;

background:linear-gradient(
  90deg,
  rgba(146,64,14,.04),
  rgba(91,33,182,.04)
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
  pointer-events:none;
  z-index:0;

  animation:isitFloat 6s ease-in-out infinite;
}

.seo-home-text h2{
  position:relative;
  z-index:2;
  animation:seoTitleIn .9s ease both;
}

.seo-home-text p{
  position:relative;
  z-index:2;
  animation:seoTextIn .9s ease both;
}

.seo-home-text p:nth-of-type(1){
  animation-delay:.15s;
}

.seo-home-text p:nth-of-type(2){
  animation-delay:.3s;
}


@keyframes isitFloat{
  0%,100%{
    transform:translate(-50%,-50%) translateY(0);
  }
  50%{
    transform:translate(-50%,-50%) translateY(-12px);
  }
}

@keyframes seoTitleIn{
  from{
    opacity:0;
    transform:translateY(28px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes seoTextIn{
  from{
    opacity:0;
    transform:translateX(-22px);
  }
  to{
    opacity:1;
    transform:translateX(0);
  }
}

@keyframes codeFloat{
  0%,100%{
    transform:translateY(0) rotate(-4deg);
  }
  50%{
    transform:translateY(-18px) rotate(4deg);
  }
}

@media(max-width:900px){

  .seo-home-text::after{
    content:"ISIT";

    left:40% !important;
    font-size:clamp(9rem,42vw,15rem) !important;

    background:linear-gradient(
      90deg,
      rgba(146,64,14,.04),
      rgba(91,33,182,.04)
    ) !important;

    -webkit-background-clip:text !important;
    -webkit-text-fill-color:transparent !important;

    text-shadow:none !important;
    -webkit-text-stroke:0 !important;

    animation:isitFloatMobile 6s ease-in-out infinite !important;
  }

  @keyframes isitFloatMobile{
    0%,100%{
      transform:translate(-45%,-50%) translateY(0);
    }
    50%{
      transform:translate(-45%,-50%) translateY(-12px);
    }
  }

}


@media(max-width:900px){

  .seo-home-text::after{
    background:linear-gradient(
      90deg,
      rgba(146,64,14,.11),
      rgba(91,33,182,.10)
    ) !important;

    -webkit-background-clip:text !important;
    -webkit-text-fill-color:transparent !important;

    animation:isitDropLoop 6s linear infinite !important;
  }

  @keyframes isitDropLoop{
    0%{
      transform:translate(-45%,-70%);
      opacity:.40;
    }

    75%{
      transform:translate(-45%,-35%);
      opacity:.50;
    }

    100%{
      transform:translate(-45%,-70%);
      opacity:.40;
    }
  }
}
@media(max-width:900px){

  .phone-inside-text{
    padding:1rem .8rem !important;
  }

  .phone-wave-text{
    font-size:11px !important;
    line-height:1.45 !important;
    letter-spacing:.2px !important;

    max-width:88% !important;
    margin:0 auto !important;
  }

  .phone-wave-text span{
    margin-right:3px !important;
  }

  .phone-scroll{
    margin-top:1rem !important;
  }

}




/* ===== MOBILE APP SECTION FINAL 3 MOCKUPS FIX ===== */
@media(max-width:900px){

  .lay-phone{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:18px !important;
    padding:24px 14px !important;
    min-height:auto !important;
    overflow:hidden !important;
  }

  .lay-phone .phone-inside-text{
    width:100% !important;
    max-width:100% !important;
    min-height:auto !important;
    height:auto !important;
    padding:0 !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
  }

  .phone-wave-text{
    max-width:100% !important;
    min-height:auto !important;
    justify-content:center !important;
    font-size:clamp(1rem, 5vw, 1.45rem) !important;
    line-height:1.18 !important;
    column-gap:5px !important;
    row-gap:4px !important;
  }

  .lay-phone .phone-scroll{
    width:100% !important;
    height:240px !important;
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    gap:6px !important;
    padding:0 !important;
    overflow:hidden !important;
  }

  .lay-phone .app-col{
    display:block !important;
    width:31.5% !important;
    height:220px !important;
    flex:0 0 31.5% !important;
    border-radius:20px !important;
    margin-top:0 !important;
    transform:none !important;
    opacity:1 !important;
  }

  .lay-phone .app-col:nth-child(2){
    margin-top:14px !important;
  }

  .lay-phone .app-col:nth-child(3){
    display:block !important;
    margin-top:-14px !important;
  }

  .lay-phone .app-shot{
    height:220px !important;
  }

  .lay-phone .svc-cap{
    font-size:6.5px !important;
    padding:4px 5px !important;
  }
}
/* ===== MOBILE APP BOX HEIGHT FIX ===== */
@media(max-width:900px){

  .svc-ch.mobile-row .svc-visual,
  .lay-phone{
    min-height:450px !important;
    height:auto !important;
    overflow:visible !important;
  }

  .lay-phone{
    padding-top:28px !important;
    padding-bottom:34px !important;
  }

  .lay-phone .phone-scroll{
    height:270px !important;
    overflow:visible !important;
    margin-top:10px !important;
  }

  .lay-phone .app-col{
    height:245px !important;
  }

  .lay-phone .app-shot{
    height:245px !important;
  }
}


/* ===== BRAND IDENTITY SEAMLESS CONTINUOUS REEL ===== */

.lay-brand{
  overflow:hidden !important;
  position:relative !important;
}

.brand-reel{
  display:flex !important;
  flex-wrap:nowrap !important;
  gap:0 !important;
  width:max-content !important;
  min-width:max-content !important;
  animation:brandReelMove 22s linear infinite !important;
  will-change:transform !important;
}

.brand-frame{
  flex:0 0 220px !important;
  width:220px !important;
  height:260px !important;
  margin:0 !important;
  border-radius:0 !important;
  overflow:hidden !important;
}

.brand-frame img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}

@keyframes brandReelMove{
  0%{
    transform:translateX(0);
  }
  100%{
    transform:translateX(-1100px);
  }
}

@media(max-width:900px){
  .brand-frame{
    flex-basis:180px !important;
    width:180px !important;
    height:230px !important;
  }

  @keyframes brandReelMove{
    0%{
      transform:translateX(0);
    }
    100%{
      transform:translateX(-900px);
    }
  }
}
/* ===== DESKTOP BRAND CUT FIX ONLY ===== */
@media(min-width:901px){

  .lay-brand{
    height:360px !important;
    overflow:hidden !important;
  }

  .brand-reel{
    align-items:center !important;
  }

  .brand-frame{
    width:240px !important;
    flex-basis:240px !important;
    height:300px !important;
    border-radius:18px !important;
  }

  @keyframes brandReelMove{
    0%{
      transform:translateX(0);
    }
    100%{
      transform:translateX(-1200px);
    }
  }
}
/* ===== MOBILE SEO + ECOMMERCE IMAGE SIZE FIX ===== */
@media(max-width:900px){

  /* SEO & Organic Growth cards bigger */
  .lay-seo{
    display:flex !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    gap:14px !important;
    padding:24px 14px !important;
    scroll-snap-type:x mandatory !important;
  }

  .lay-seo .svc-card{
    flex:0 0 72% !important;
    width:72% !important;
    height:260px !important;
    scroll-snap-align:center !important;
  }

  .lay-seo .svc-card img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }

  /* E-commerce cards bigger */
  .lay-commerce{
    min-height:330px !important;
    padding:24px 12px !important;
  }

  .commerce-window{
    overflow:hidden !important;
    width:100% !important;
  }

  .commerce-track{
    display:flex !important;
    gap:14px !important;
  }

  .commerce-card{
    flex:0 0 78% !important;
    width:78% !important;
    height:260px !important;
  }

  .commerce-card img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }
}


/* ===== SEO CARD TAP ZOOM ===== */
.lay-seo .svc-card{
  cursor:pointer !important;
  transition:transform .35s ease, box-shadow .35s ease, z-index .35s ease !important;
}

.lay-seo .svc-card.zoomed{
  transform:scale(1.18) !important;
  z-index:50 !important;
  box-shadow:0 28px 70px rgba(26,22,32,.28) !important;
}

@media(max-width:900px){
  .lay-seo{
    overflow:visible !important;
  }

  .lay-seo .svc-card.zoomed{
    transform:scale(1.28) !important;
  }
}

/* ===== AUDIENCE ENGAGEMENT CIRCLE SIZE FIX ===== */
@media(max-width:900px){

  .lay-chat{
    overflow:hidden !important;
    min-height:360px !important;
  }

  .eng-flower-wrap{
    transform:scale(.20) !important;
    transform-origin:center center !important;
  }

}
@media(max-width:900px){

  .lay-chat .eng-flower-card{
    width:110px !important;
    height:140px !important;
  }

  .lay-chat .eng-card-inner img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }

}


/* ===== AUDIENCE ENGAGEMENT MOBILE FIT FINAL ===== */
@media(max-width:900px){

  .svc-ch:has(.lay-chat){
    padding:2.5rem 0 !important;
  }

  .lay-chat{
    height:390px !important;
    overflow:hidden !important;
  }

  .lay-chat .eng-flower-wrap{
    width:360px !important;
    height:360px !important;
    left:50% !important;
    top:50% !important;
    transform:translate(-50%,-50%) !important;
  }

  .lay-chat .eng-flower-card{
    width:96px !important;
    height:96px !important;
    margin-left:-48px !important;
    margin-top:-48px !important;
    border-radius:18px !important;
  }

  .lay-chat .eng-card-inner{
    border-radius:16px !important;
  }

  .lay-chat .eng-label{
    font-size:5.5px !important;
    padding:3px 5px !important;
    left:6px !important;
    right:6px !important;
    bottom:6px !important;
  }
  
}
@media(max-width:900px){

  /* circle 20% left */
  .lay-chat .eng-flower-wrap{
    left:44% !important;
  }

  /* images/cards 10% bigger */
  .lay-chat .eng-flower-card{
    width:110px !important;
    height:107px !important;

    margin-left:-53px !important;
    margin-top:-53px !important;
  }


}
/* ===== AUDIENCE MOBILE FINAL SPACING/CLEANUP ===== */
@media(max-width:900px){

  /* top space 10% less, bottom space 30% less */
  .svc-ch:has(.lay-chat){
    padding-top:2.2rem !important;
    padding-bottom:1.7rem !important;
  }

  .lay-chat{
    height:380px !important;
    min-height:380px !important;
    overflow:hidden !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  /* black/square shadow background remove */
  .lay-chat .eng-flower-wrap,
  .lay-chat .eng-flower{
    background:transparent !important;
    box-shadow:none !important;
    border:none !important;
  }

  .lay-chat .eng-flower-wrap{
    left:45% !important;
    top:48% !important;
  }

  /* name label center */
  .lay-chat .eng-label{
    left:50% !important;
    right:auto !important;
    bottom:7px !important;
    transform:translateX(-50%) !important;

    width:82% !important;
    text-align:center !important;
    justify-content:center !important;
  }

  /* remove heavy black card shadow */
  .lay-chat .eng-flower-card{
    box-shadow:none !important;
    background:transparent !important;
    border:1px solid rgba(255,255,255,.10) !important;
  }

  .lay-chat .eng-card-inner{
    background:transparent !important;
    box-shadow:none !important;
  }
}
@media(max-width:900px){

  .lay-chat .eng-flower-wrap{
    left:41.5% !important;
  }

  .lay-chat .eng-flower-card{
    width:98px !important;
    height:98px !important;
    margin-left:-49px !important;
    margin-top:-49px !important;
  }

}
@media(max-width:900px){

  .svc-ch:has(.lay-chat){
    margin-bottom:-75px !important;
    padding-bottom:0 !important;
  }

}

/* ===== FOOTER MOBILE FINAL LEFT FIX ===== */
@media(max-width:900px){

  footer,
  footer *{
    text-align:left !important;
  }

  footer{
    padding:3rem 1.5rem 0 !important;
  }

  .ftg{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:2rem !important;
    justify-items:start !important;
    align-items:start !important;
  }

  .ftg > div,
  .ftcol{
    width:100% !important;
    max-width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
  }

  .ft-logo,
  .ft-op,
  .ft-socs{
    justify-content:flex-start !important;
    align-items:center !important;
    margin-left:0 !important;
    margin-right:auto !important;
  }

  .ft-d{
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  .ftcol h4,
  .ftcol a{
    width:100% !important;
    justify-content:flex-start !important;
    margin-left:0 !important;
  }

  .ft-btm{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
  }
}
/* ===== CONTACT MOBILE LEFT ALIGN + MAP FIX ===== */
@media(max-width:900px){

  #contact{
    padding:4.5rem 1.2rem !important;
    text-align:left !important;
  }

  #contact .rv{
    text-align:left !important;
    margin-bottom:2rem !important;
  }

  #contact .lbl{
    display:inline-flex !important;
    margin-left:0 !important;
    margin-right:auto !important;
  }

  #contact .sh{
    display:block !important;
    text-align:left !important;
    margin:0 !important;
    width:100% !important;
  }

  /* contact grid one column */
  #contact > div:last-child{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:1.4rem !important;
    align-items:start !important;
  }

  #contact iframe{
    display:block !important;
    width:100% !important;
    min-height:320px !important;
    height:320px !important;
  }

  #contact iframe + *{
    text-align:left !important;
  }

  #contact div[style*="min-height:410px"]{
    height:320px !important;
    min-height:320px !important;
    display:block !important;
  }
}
/* ===== FAQ MOBILE FIX ===== */
@media(max-width:900px){

  #faq{
    padding:4.5rem 1.2rem !important;
  }

  #faq .rv{
    text-align:left !important;
    margin-bottom:2rem !important;
  }

  #faq .lbl{
    display:inline-flex !important;
    margin-left:0 !important;
    margin-right:auto !important;
  }

  #faq .sh{
    display:block !important;
    text-align:left !important;
    margin:0 !important;
  }

  #faqAccordion{
    max-width:100% !important;
    margin:0 !important;
  }
}
/* ===== TEAM MOBILE FULL ALIGN FIX ===== */
@media(max-width:900px){

  #team{
    padding-left:1.2rem !important;
    padding-right:1.2rem !important;
    text-align:left !important;
  }

  #team .rv,
  #team .team-head,
  #team .team-wrap,
  #team .team-cinema,
  #team #teamCinema{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    text-align:left !important;
  }

  #team .team-stage,
  #team .team-cards,
  #team .team-slider{
    justify-content:flex-start !important;
    align-items:flex-start !important;
    margin-left:0 !important;
  }

  #team .team-card{
    margin-left:0 !important;
  }

  #team .team-dots,
  #team .team-controls{
    justify-content:flex-start !important;
  }
}
/* ===== WHY SECTION MOBILE LEFT ALIGN FINAL ===== */
@media(max-width:900px){

  #why{
    padding:4.5rem 1.2rem 4rem !important;
  }

  #why .rv,
  #why .rv-l{
    display:block !important;
    text-align:left !important;
    align-items:flex-start !important;
  }

  #why .lbl{
    display:inline-flex !important;
    margin-left:0 !important;
    margin-right:auto !important;
    text-align:left !important;
  }

  #why .sh,
  #why .why-title{
    text-align:left !important;
    margin-left:0 !important;
    margin-right:0 !important;
    width:100% !important;
  }

  #why .why-title br{
    display:block !important;
  }

  #why .wg{
    grid-template-columns:1fr !important;
    gap:2rem !important;
    margin-top:2rem !important;
  }

  #why .wsub{
    max-width:100% !important;
    width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    text-align:left !important;
  }

  #why .wlist{
    width:100% !important;
    align-items:stretch !important;
  }

  #why .wi{
    text-align:left !important;
    justify-content:flex-start !important;
    align-items:flex-start !important;
  }

  #why .wi-t,
  #why .wi-d{
    text-align:left !important;
  }
}



@media(max-width:900px){

  /* menu item */
  .mnav .mna{
    display:flex !important;
    align-items:center !important;
    gap:12px !important;   /* number te text vich gap */
    padding:.45rem .8rem !important;
  }

  /* number */
  .mna-n{
    display:block !important;
    min-width:22px !important;
    font-size:10px !important;
    font-weight:600 !important;
    color:rgba(0,0,0,.35) !important;
    letter-spacing:1px !important;
  }

  /* text */
  

  /* hover/tap feel */
  .mnav .mna:hover{
    background:rgba(0,0,0,.04) !important;
    border-radius:12px !important;
  }

  /* CTA */
  
}

/* ===== MOBILE MENU FIX: HIDDEN UNTIL OPEN ===== */
.mnav{
  display:none;
}

@media(max-width:900px){

  .mnav{
    display:none !important;
  }

  .mnav.op{
    display:flex !important;
    position:fixed !important;
    inset:0 !important;
    z-index:99999 !important;

    height:100dvh !important;
    max-height:100dvh !important;
    overflow:hidden !important;

    background:#fff !important;
    opacity:1 !important;

    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;

    padding:1rem 1.15rem 1.4rem !important;
    gap:.35rem !important;
  }

  .mnav a,
  .mnav a:hover,
  .mnav a:focus,
  .mnav a:active{
    text-decoration:none !important;
  }

  .mnav .mna{
    display:flex !important;
    align-items:center !important;
    gap:14px !important;

    padding:.62rem .9rem !important;
    margin:0 !important;

    border-radius:14px !important;
    background:rgba(246,242,238,.75) !important;
    border:1px solid rgba(146,64,14,.10) !important;
  }

  .mna-n{
    display:block !important;
    min-width:26px !important;
    font-size:10px !important;
    font-weight:800 !important;
    letter-spacing:1.4px !important;
    color:#92400E !important;
  }

  

  
  .mnav-home{
    order:999 !important;
    margin-top:auto !important;
    align-self:center !important;

    font-family:Arial, Helvetica, sans-serif !important;
    font-size:26px !important;
    font-weight:900 !important;
    letter-spacing:5px !important;

    color:#111 !important;
    text-decoration:none !important;
  }
}
/* keep old design, only fix background flash */
@media(max-width:900px){

  .mnav{
    overscroll-behavior:contain !important;
    -webkit-overflow-scrolling:auto !important;
    background:#F9F7F3 !important;
  }

  .mnav.op{
    background:#F9F7F3 !important;
  }

  body:has(.mnav.op){
    overflow:hidden !important;
    position:fixed !important;
    width:100% !important;
  }
}

@media(max-width:900px){

  /* 1) no italic anywhere in mobile menu */
  .mnav,
  .mnav *{
    font-style:normal !important;
  }

  

  /* 4) ISIT bold + tighter + underline */
  .mnav-home{
    font-size:30px !important;
    font-weight:1000 !important;
    letter-spacing:1px !important;
    position:relative !important;
    padding-bottom:8px !important;
  }

  .mnav-home::after{
    content:"" !important;
    position:absolute !important;
    left:50% !important;
    bottom:0 !important;
    transform:translateX(-50%) !important;
    width:80px !important;
    height:4px !important;
    border-radius:999px !important;
    background:#111 !important;
  }
}

.tw-it{
  font-style:italic;
}.tw-it{
  font-style:normal !important;
}
.mnav-home{
  font-size:32px !important;
  font-weight:900 !important;
  letter-spacing:.01px !important;
  color:#111 !important;
  position:relative !important;
}

.mna-cta{
  background:linear-gradient(135deg,#7C3AED,#5B21B6) !important;
  color:#fff !important;
  font-size:18px !important;
  font-weight:800 !important;
}
}
.mnav-home{
  order:999 !important;
  margin-top:auto !important;
  align-self:center !important;

  font-family:var(--fd) !important; /* same family as headings */
  font-size:42px !important;
  font-weight:900 !important;
  letter-spacing:0 !important;

  color:#111 !important;
  text-transform:uppercase !important;
  line-height:1 !important;

  position:relative !important;
}

@media(max-width:900px){

  .mna-cta{
    background:linear-gradient(135deg,#1A1620 0%,#3B0764 55%,#111827 100%) !important;
    color:#ffffff !important;

    font-size:15px !important;   /* ADD THIS */
    font-weight:800 !important;  /* ADD THIS */

    border:1px solid rgba(185,163,255,.38) !important;

    box-shadow:
      0 14px 36px rgba(26,22,32,.35),
      0 0 26px rgba(124,58,237,.22) !important;
  }

}

.mna-l{
  font-family:"Inter", Arial, sans-serif !important;
  font-size:21px !important;
  font-weight:700 !important;
  letter-spacing:-0.5px !important;
  color:#111 !important;
}
/* ===== BRAND IDENTITY SEAMLESS CONTINUOUS REEL ===== */

.lay-brand{
  overflow:hidden !important;
  position:relative !important;
}

.brand-reel{
  display:flex !important;
  flex-wrap:nowrap !important;
  gap:0 !important;
  width:max-content !important;
  min-width:max-content !important;
  animation:brandReelMove 22s linear infinite !important;
  will-change:transform !important;
}

.brand-frame{
  flex:0 0 220px !important;
  width:220px !important;
  height:260px !important;
  margin:0 !important;
  border-radius:0 !important;
  overflow:hidden !important;
}

.brand-frame img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}

@keyframes brandReelMove{
  0%{
    transform:translateX(0);
  }
  100%{
    transform:translateX(-1100px);
  }
}

@media(max-width:900px){
  .brand-frame{
    flex-basis:180px !important;
    width:180px !important;
    height:230px !important;
  }

  @keyframes brandReelMove{
    0%{
      transform:translateX(0);
    }
    100%{
      transform:translateX(-900px);
    }
  }
}/* ===== DESKTOP BRAND CUT FIX ONLY ===== */
@media(min-width:901px){

  .lay-brand{
    height:360px !important;
    overflow:hidden !important;
  }

  .brand-reel{
    align-items:center !important;
  }

  .brand-frame{
    width:240px !important;
    flex-basis:240px !important;
    height:300px !important;
    border-radius:18px !important;
  }

  @keyframes brandReelMove{
    0%{
      transform:translateX(0);
    }
    100%{
      transform:translateX(-1200px);
    }
  }
}
/* ===== ACCESSIBILITY CONTRAST FIX ===== */
#contact div,
#contact p,
#contact a,
footer,
footer p,
footer a,
footer h4,
.ft-d,
.ft-op,
.ftcol h4,
.ftcol a,
.ft-c,
.ft-soc{
  color:rgba(26,22,32,.78) !important;
}

#contact .lbl,
footer h4,
.ftcol h4{
  color:rgba(26,22,32,.72) !important;
}

#contact [style*="color:var(--ink35)"],
#contact [style*="color:var(--ink55)"]{
  color:rgba(26,22,32,.72) !important;
}

/* ===== TEAM DOT TOUCH TARGET FIX ===== */
.team-dots button{
  width:44px !important;
  height:44px !important;
  min-width:44px !important;
  min-height:44px !important;
  padding:0 !important;
  position:relative !important;
}

.team-dots button::after{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:10px !important;
  height:10px !important;
  border-radius:50% !important;
  transform:translate(-50%,-50%) !important;
  background:currentColor !important;
}
.ft-heading{
  font-family:var(--fm) !important;
  font-size:9px !important;
  letter-spacing:3px !important;
  color:rgba(26,22,32,.72) !important;
  text-transform:uppercase !important;
  margin-bottom:1.2rem !important;
  font-weight:800 !important;
}

/* ===== JOIN NOTE CONTRAST FIX ===== */
.join-premium-note{
  color:rgba(26,22,32,.78) !important;
}