:root{
  --blue:#1E3C8C;
  --blue-deep:#122a68;
  --blue-electric:#3E6FE0;
  --blue-ice:#EAF0FF;
  --ink:#0B1220;
  --paper:#F7F9FE;
  --white:#ffffff;
  --gold:#F2B33D;
  --radius:22px;
  --shadow-soft:0 20px 60px rgba(18,42,104,.12);
  --shadow-deep:0 30px 80px rgba(11,18,32,.35);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Manrope',sans-serif;
  color:var(--ink);
  background:var(--paper);
  overflow-x:hidden;
  line-height:1.6;
}
h1,h2,h3,h4{font-family:'Sora',sans-serif;line-height:1.15}
.script{font-family:'Kaushan Script',cursive;color:var(--gold);font-weight:400}
.container{width:min(1180px,92%);margin:0 auto}
section{position:relative}

/* ============ NAV ============ */
nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  transition:background .35s ease, box-shadow .35s ease, padding .35s ease;
  padding:18px 0;
}
nav.scrolled{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px);
  box-shadow:0 8px 30px rgba(18,42,104,.10);
  padding:10px 0;
}
.nav-inner{display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo-mark{
  width:44px;height:44px;border-radius:50% 50% 50% 50% / 42% 42% 58% 58%;
  background:linear-gradient(135deg,var(--blue) 0%,var(--blue-electric) 100%);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 20px rgba(30,60,140,.35);
  transform-style:preserve-3d;
}
.logo-mark svg{width:22px;height:22px}
.logo-text{display:flex;flex-direction:column;line-height:1}
.logo-text .l1{font-family:'Sora',sans-serif;font-weight:800;font-size:1.25rem;letter-spacing:.06em;color:var(--blue)}
.logo-text .l1 em{font-family:'Kaushan Script',cursive;font-style:normal;font-weight:400;color:var(--ink);font-size:1.15rem;margin-left:2px}
.logo-text .l2{font-size:.6rem;letter-spacing:.24em;text-transform:lowercase;color:var(--ink);border-top:1.5px solid var(--ink);margin-top:3px;padding-top:2px}
nav.on-dark .logo-text .l1 em, nav.on-dark .logo-text .l2{color:#fff;border-color:#fff}
nav.on-dark .nav-links a{color:rgba(255,255,255,.85)}
nav.scrolled .logo-text .l1 em, nav.scrolled .logo-text .l2{color:var(--ink);border-color:var(--ink)}
nav.scrolled .nav-links a{color:var(--ink)}
.nav-links{display:flex;gap:32px;align-items:center;list-style:none}
.nav-links a{
  text-decoration:none;color:var(--ink);font-weight:600;font-size:.92rem;
  position:relative;padding:4px 0;transition:color .25s;
}
.nav-links a::after{
  content:'';position:absolute;left:0;bottom:-2px;width:0;height:2px;
  background:linear-gradient(90deg,var(--blue-electric),var(--gold));
  transition:width .3s ease;border-radius:2px;
}
.nav-links a:hover::after{width:100%}
.nav-cta{
  background:linear-gradient(135deg,var(--blue),var(--blue-electric));
  color:#fff !important;padding:11px 24px;border-radius:100px;
  box-shadow:0 10px 24px rgba(62,111,224,.35);
  transition:transform .25s, box-shadow .25s;
}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(62,111,224,.5)}
.nav-cta::after{display:none}
.hamburger{display:none;background:none;border:none;cursor:pointer;z-index:1100}
.hamburger span{display:block;width:26px;height:2.5px;background:#fff;margin:6px 0;border-radius:3px;transition:.3s}
nav.scrolled .hamburger span{background:var(--ink)}

/* ============ HERO ============ */
.hero{
  min-height:auto;
  background:radial-gradient(1200px 700px at 75% 20%, #24408f 0%, transparent 60%),
             radial-gradient(900px 600px at 15% 85%, #1a2f6e 0%, transparent 55%),
             linear-gradient(160deg,#0B1430 0%,#122a68 55%,#0B1430 100%);
  color:#fff;
  display:flex;align-items:center;
  perspective:1200px;
  overflow:hidden;
  padding:120px 0 70px;
}
.hero::before{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,black 30%,transparent 75%);
  transform:perspective(900px) rotateX(28deg) scale(1.4);
  transform-origin:top;
  pointer-events:none;
}
.hero-inner{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center;position:relative;z-index:2}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  padding:8px 18px;border-radius:100px;font-size:.82rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;backdrop-filter:blur(8px);margin-bottom:28px;
}
.hero-eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px var(--gold);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.hero h1{font-size:clamp(2.6rem,5.4vw,4.4rem);font-weight:800;letter-spacing:-.02em;margin-bottom:24px}
.hero h1 .script{font-size:clamp(2.8rem,5.8vw,4.8rem);display:inline-block;transform:rotate(-2deg)}
.hero p.lead{font-size:1.15rem;color:rgba(255,255,255,.78);max-width:540px;margin-bottom:40px}
.hero-btns{display:flex;gap:18px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Sora',sans-serif;font-weight:700;font-size:.95rem;
  padding:16px 34px;border-radius:100px;text-decoration:none;
  transition:transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s;
  cursor:pointer;border:none;
}
.btn-primary{
  background:linear-gradient(135deg,var(--gold),#ffce6b);color:var(--ink);
  box-shadow:0 14px 34px rgba(242,179,61,.4);
}
.btn-primary:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 20px 44px rgba(242,179,61,.55)}
.btn-ghost{
  background:rgba(255,255,255,.07);color:#fff;border:1px solid rgba(255,255,255,.25);
  backdrop-filter:blur(8px);
}
.btn-ghost:hover{background:rgba(255,255,255,.14);transform:translateY(-3px)}
.hero-stats{display:flex;gap:40px;margin-top:38px;flex-wrap:wrap}
.hstat .num{font-family:'Sora',sans-serif;font-size:2.1rem;font-weight:800;color:#fff}
.hstat .num span{color:var(--gold)}
.hstat .lbl{font-size:.82rem;color:rgba(255,255,255,.6);letter-spacing:.05em;text-transform:uppercase}

/* 3D floating stack */
.hero-visual{position:relative;height:560px;transform-style:preserve-3d}
.float-card{
  position:absolute;border-radius:18px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(16px);
  box-shadow:var(--shadow-deep);
  padding:18px 22px;
  width:min(250px,64%);
  transform-style:preserve-3d;
  transition:transform .15s ease-out;
  animation:floaty 7s ease-in-out infinite;
}
.float-card .fc-icon{font-size:1.5rem;margin-bottom:6px;display:block}
.fc-icon.fc-3d{width:52px;height:52px;margin-bottom:10px}
.fc-icon.fc-3d svg{width:100%;height:100%;filter:drop-shadow(0 10px 16px rgba(0,0,0,.45)) drop-shadow(0 0 14px rgba(62,111,224,.35));transition:transform .4s cubic-bezier(.22,1,.36,1)}
.float-card:hover .fc-icon.fc-3d svg{transform:translateY(-4px) scale(1.12) rotate(-3deg)}
.float-card .fc-title{font-family:'Sora',sans-serif;font-weight:700;font-size:.95rem;color:#fff}
.float-card .fc-sub{font-size:.75rem;color:rgba(255,255,255,.6)}
.fc-1{top:0;right:2%;animation-delay:0s;z-index:3}
.fc-2{top:34%;left:0;animation-delay:1.4s;z-index:2}
.fc-3{top:67%;right:6%;animation-delay:.7s;z-index:1}
.fc-badge{
  display:inline-block;background:rgba(242,179,61,.18);color:var(--gold);
  font-size:.68rem;font-weight:700;padding:3px 10px;border-radius:100px;margin-top:7px;letter-spacing:.05em;
}
@keyframes floaty{
  0%,100%{transform:translateY(0) rotateX(5deg) rotateY(-7deg)}
  50%{transform:translateY(-10px) rotateX(5deg) rotateY(-7deg)}
}
.hero-orb{
  position:absolute;border-radius:50%;filter:blur(2px);
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), rgba(62,111,224,.15) 60%, transparent);
  border:1px solid rgba(255,255,255,.12);
  animation:orbit 12s linear infinite;
}
@keyframes orbit{from{transform:rotate(0deg) translateX(14px) rotate(0)}to{transform:rotate(360deg) translateX(14px) rotate(-360deg)}}
.scroll-cue{
  position:absolute;bottom:28px;left:50%;transform:translateX(-50%);
  color:rgba(255,255,255,.55);font-size:.75rem;letter-spacing:.25em;text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:10px;z-index:2;
}
.scroll-cue .line{width:1.5px;height:44px;background:linear-gradient(to bottom,rgba(255,255,255,.6),transparent);animation:drip 1.8s ease-in-out infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ============ MARQUEE ============ */
.marquee{
  background:var(--ink);color:#fff;overflow:hidden;padding:14px 0;
  border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);
}
.marquee-track{display:flex;gap:64px;white-space:nowrap;animation:scrollx 55s linear infinite;width:max-content}
.marquee-track span{font-family:'Sora',sans-serif;font-weight:700;font-size:1rem;letter-spacing:.14em;text-transform:uppercase;display:flex;align-items:center;gap:64px}
.marquee-track .star{color:var(--gold)}
@keyframes scrollx{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============ SECTION SHARED ============ */
.section{padding:64px 0}
.sec-eyebrow{
  font-size:.78rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;
  color:var(--blue-electric);display:flex;align-items:center;gap:14px;margin-bottom:18px;
}
.sec-eyebrow::before{content:'';width:38px;height:2px;background:linear-gradient(90deg,var(--blue-electric),var(--gold));border-radius:2px}
.sec-title{font-size:clamp(1.9rem,3.6vw,2.9rem);font-weight:800;letter-spacing:-.015em;max-width:720px}
.sec-sub{color:#5a6478;max-width:640px;margin-top:16px;font-size:1.05rem}

/* reveal animation */
.reveal{opacity:0;transform:translateY(46px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.1s}.reveal.d2{transition-delay:.2s}.reveal.d3{transition-delay:.3s}.reveal.d4{transition-delay:.4s}.reveal.d5{transition-delay:.5s}

/* ============ SERVICES ============ */
.services{background:linear-gradient(180deg,var(--paper) 0%,var(--blue-ice) 100%)}
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;margin-top:40px;perspective:1400px}
.svc-card{
  border-radius:var(--radius);padding:28px 26px;
  background:
    radial-gradient(110% 80% at 100% 0%, rgba(242,179,61,.07), transparent 45%),
    linear-gradient(165deg,#ffffff 0%,#f6f9ff 100%) padding-box,
    linear-gradient(135deg, rgba(62,111,224,.35), rgba(30,60,140,.08) 45%, rgba(242,179,61,.35)) border-box;
  border:1.5px solid transparent;
  box-shadow:var(--shadow-soft), inset 0 1px 0 #fff;
  position:relative;overflow:hidden;
  transform-style:preserve-3d;transition:box-shadow .35s;
}
.svc-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:5px;
  background:linear-gradient(90deg,var(--blue),var(--blue-electric),var(--gold));
  transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.22,1,.36,1);
}
.svc-card:hover::before{transform:scaleX(1)}
.svc-card:hover{box-shadow:0 34px 80px rgba(18,42,104,.22)}
.icon-3d{
  width:78px;height:78px;margin-bottom:20px;transform:translateZ(42px);
}
.icon-3d svg{
  width:100%;height:100%;
  filter:drop-shadow(0 12px 18px rgba(6,13,38,.5)) drop-shadow(0 0 18px rgba(62,111,224,.28));
  transition:transform .45s cubic-bezier(.22,1,.36,1), filter .45s;
}
.atl-card:hover .icon-3d svg{transform:translateY(-5px) scale(1.1) rotate(-3deg);filter:drop-shadow(0 18px 26px rgba(6,13,38,.6)) drop-shadow(0 0 26px rgba(242,179,61,.4))}
.svc-card .icon-3d svg{filter:drop-shadow(0 12px 18px rgba(30,60,140,.22))}
.svc-card:hover .icon-3d svg{transform:translateY(-5px) scale(1.1) rotate(-3deg);filter:drop-shadow(0 16px 24px rgba(30,60,140,.3)) drop-shadow(0 0 20px rgba(62,111,224,.25))}
.svc-card h3{font-size:1.28rem;font-weight:700;margin-bottom:12px;transform:translateZ(30px)}
.svc-card p{color:#5a6478;font-size:.95rem;transform:translateZ(20px)}
.svc-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;transform:translateZ(25px)}
.svc-tags span{
  font-size:.72rem;font-weight:700;color:var(--blue);
  background:var(--blue-ice);padding:5px 12px;border-radius:100px;letter-spacing:.03em;
}

/* ============ ATL FLAGSHIP ============ */
.atl{background:var(--paper)}
.atl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;margin-top:40px;perspective:1400px}
.atl-card{
  border-radius:var(--radius);padding:32px 30px;color:#fff;position:relative;overflow:hidden;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(242,179,61,.16), transparent 42%),
    radial-gradient(130% 110% at 0% 100%, rgba(62,111,224,.35), transparent 52%),
    linear-gradient(#0e1c47,#0e1c47) padding-box,
    linear-gradient(135deg, rgba(242,179,61,.85), rgba(255,255,255,.14) 35%, rgba(62,111,224,.6) 70%, rgba(242,179,61,.5)) border-box;
  background-blend-mode:normal;
  border:1.5px solid transparent;
  box-shadow:0 30px 70px rgba(6,13,38,.5), inset 0 1px 0 rgba(255,255,255,.08);
  transform-style:preserve-3d;transition:box-shadow .35s;
}
.atl-card::after{
  content:'';position:absolute;width:240px;height:240px;border-radius:50%;
  border:1px solid rgba(242,179,61,.22);top:-90px;right:-80px;pointer-events:none;
  box-shadow:inset 0 0 60px rgba(242,179,61,.06);
}
.atl-card::before{
  content:'';position:absolute;top:0;left:-80%;width:55%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.09) 45%,rgba(255,255,255,.16) 50%,rgba(255,255,255,.09) 55%,transparent);
  transform:skewX(-18deg);transition:left .9s cubic-bezier(.22,1,.36,1);pointer-events:none;
}
.atl-card:hover::before{left:130%}
.atl-card:hover{box-shadow:0 42px 100px rgba(6,13,38,.65), 0 0 0 1px rgba(242,179,61,.25), inset 0 1px 0 rgba(255,255,255,.12)}
.atl-card .flag{
  display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  background:linear-gradient(135deg,rgba(242,179,61,.3),rgba(242,179,61,.08));color:#ffd97a;
  border:1px solid rgba(242,179,61,.55);text-shadow:0 0 12px rgba(242,179,61,.5);
  padding:5px 14px;border-radius:100px;margin-bottom:20px;transform:translateZ(30px);
}
.atl-card h3{font-size:1.32rem;font-weight:700;margin-bottom:12px;transform:translateZ(30px)}
.atl-card p{color:rgba(255,255,255,.75);font-size:.95rem;transform:translateZ(20px)}
.atl-card .svc-tags span{background:rgba(255,255,255,.12);color:#fff}
.partners{margin-top:50px}
.partners h3{font-size:1.15rem;font-weight:700;display:flex;align-items:center;gap:16px;color:var(--ink)}
.partners h3::after{content:'';flex:1;height:1.5px;background:linear-gradient(90deg,rgba(30,60,140,.25),transparent)}
.partners .p-sub{color:#5a6478;font-size:.92rem;margin-top:8px}
.network-strip{
  overflow:hidden;margin-top:34px;padding:10px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.network-track{display:flex;align-items:center;gap:40px;width:max-content;animation:lt-scroll-l 64s linear infinite}
.net-logo{height:84px;width:168px;object-fit:contain;flex:0 0 auto}
.network-strip + .network-strip{margin-top:6px}
.network-track.nt-rev{animation:lt-scroll-r 62s linear infinite}
.network-track.nt-radio{animation-duration:48s}
@media(max-width:600px){
  .network-track{gap:24px}
  .net-logo{height:60px;width:120px}
}
@keyframes lt-scroll-l{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============ INTERACTIVE SERVICES ============ */
.svc-stage{display:grid;grid-template-columns:.95fr 1.05fr;gap:56px;align-items:center;margin-top:52px}
.svc-menu{list-style:none;display:flex;flex-direction:column;gap:20px}
.svc-menu li{
  font-family:'Sora',sans-serif;font-weight:800;line-height:1.12;
  font-size:clamp(1.45rem,2.7vw,2.35rem);letter-spacing:-.015em;
  color:#c3cbdd;cursor:pointer;user-select:none;white-space:nowrap;
  transition:color .3s,transform .35s cubic-bezier(.22,1,.36,1);
}
.svc-menu li .w1{font-weight:600}
.svc-menu li:hover{color:#8f9ab5}
.svc-menu li.active{color:var(--ink);transform:translateX(10px)}
.svc-menu li.active:hover{color:var(--ink)}
.svc-menu li.active .w2{color:var(--blue-electric)}
.svc-panels{display:grid;position:relative}
.svc-panel{
  grid-area:1/1;border-radius:26px;padding:42px 40px;color:#fff;position:relative;overflow:hidden;
  border:1.5px solid transparent;
  box-shadow:0 34px 80px rgba(6,13,38,.45), inset 0 1px 0 rgba(255,255,255,.1);
  opacity:0;transform:translateY(26px) scale(.985);pointer-events:none;
  transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1);
}
.svc-panel.active{opacity:1;transform:none;pointer-events:auto}
.art-meta{background:radial-gradient(55% 50% at 80% 15%,rgba(124,58,237,.5),transparent 62%),radial-gradient(50% 45% at 12% 80%,rgba(62,111,224,.55),transparent 60%),radial-gradient(42% 40% at 85% 85%,rgba(225,29,72,.35),transparent 60%),linear-gradient(#0a0f24,#0a0f24) padding-box,linear-gradient(135deg,rgba(111,155,255,.8),rgba(255,255,255,.12) 40%,rgba(124,58,237,.6)) border-box}
.art-google{background:radial-gradient(55% 50% at 80% 15%,rgba(242,179,61,.5),transparent 62%),radial-gradient(50% 45% at 12% 80%,rgba(34,168,83,.4),transparent 60%),radial-gradient(45% 42% at 85% 85%,rgba(66,133,244,.5),transparent 60%),linear-gradient(#0a0f24,#0a0f24) padding-box,linear-gradient(135deg,rgba(242,179,61,.8),rgba(255,255,255,.12) 40%,rgba(66,133,244,.6)) border-box}
.art-smm{background:radial-gradient(55% 50% at 80% 15%,rgba(225,29,72,.5),transparent 62%),radial-gradient(50% 45% at 12% 80%,rgba(242,179,61,.45),transparent 60%),radial-gradient(45% 42% at 85% 85%,rgba(124,58,237,.45),transparent 60%),linear-gradient(#0d0a1c,#0d0a1c) padding-box,linear-gradient(135deg,rgba(255,143,163,.75),rgba(255,255,255,.12) 40%,rgba(242,179,61,.6)) border-box}
.art-wa{background:radial-gradient(55% 50% at 80% 15%,rgba(31,185,96,.5),transparent 62%),radial-gradient(50% 45% at 12% 80%,rgba(12,125,62,.55),transparent 60%),radial-gradient(45% 42% at 85% 85%,rgba(242,179,61,.28),transparent 60%),linear-gradient(#07160e,#07160e) padding-box,linear-gradient(135deg,rgba(79,224,138,.8),rgba(255,255,255,.12) 40%,rgba(31,185,96,.5)) border-box}
.art-email{background:radial-gradient(55% 50% at 80% 15%,rgba(62,111,224,.5),transparent 62%),radial-gradient(50% 45% at 12% 80%,rgba(242,179,61,.5),transparent 60%),radial-gradient(45% 42% at 85% 85%,rgba(45,212,191,.35),transparent 60%),linear-gradient(#0a0f24,#0a0f24) padding-box,linear-gradient(135deg,rgba(242,179,61,.8),rgba(255,255,255,.12) 40%,rgba(62,111,224,.6)) border-box}
.art-web{background:radial-gradient(55% 50% at 80% 15%,rgba(45,212,191,.42),transparent 62%),radial-gradient(50% 45% at 12% 80%,rgba(62,111,224,.55),transparent 60%),radial-gradient(45% 42% at 85% 85%,rgba(124,58,237,.35),transparent 60%),linear-gradient(#081426,#081426) padding-box,linear-gradient(135deg,rgba(94,234,212,.75),rgba(255,255,255,.12) 40%,rgba(62,111,224,.65)) border-box}
.art-design{background:radial-gradient(55% 50% at 80% 15%,rgba(225,29,72,.45),transparent 62%),radial-gradient(50% 45% at 12% 80%,rgba(45,212,191,.4),transparent 60%),radial-gradient(45% 42% at 85% 85%,rgba(242,179,61,.45),transparent 60%),radial-gradient(35% 35% at 40% 30%,rgba(124,58,237,.4),transparent 60%),linear-gradient(#120a20,#120a20) padding-box,linear-gradient(135deg,rgba(255,143,163,.8),rgba(255,255,255,.12) 40%,rgba(45,212,191,.6)) border-box}
.art-li{background:radial-gradient(55% 50% at 80% 15%,rgba(10,102,194,.6),transparent 62%),radial-gradient(50% 45% at 12% 80%,rgba(62,111,224,.5),transparent 60%),radial-gradient(45% 42% at 85% 85%,rgba(45,212,191,.3),transparent 60%),linear-gradient(#081226,#081226) padding-box,linear-gradient(135deg,rgba(88,166,255,.8),rgba(255,255,255,.12) 40%,rgba(10,102,194,.6)) border-box}
.svc-panel::before{
  content:'';position:absolute;top:0;left:-80%;width:55%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.08) 45%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.08) 55%,transparent);
  transform:skewX(-18deg);transition:left .9s cubic-bezier(.22,1,.36,1);pointer-events:none;
}
.svc-panel:hover::before{left:130%}
.sp-icon{position:absolute;top:24px;right:26px;width:84px;height:84px;animation:sp-float 5s ease-in-out infinite;z-index:1}
.sp-body{position:relative;z-index:2;padding-top:6px}
.sp-icon svg,.sp-icon img{width:100%;height:100%;filter:drop-shadow(0 14px 22px rgba(0,0,0,.5)) drop-shadow(0 0 20px rgba(255,255,255,.12))}
@keyframes sp-float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-9px) rotate(2deg)}}
.svc-panel h3{font-size:1.7rem;font-weight:800;margin-bottom:12px;padding-right:112px}
.svc-panel p{color:rgba(255,255,255,.78);font-size:.98rem;max-width:430px;margin-bottom:22px;padding-right:96px}
.sp-checks{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;margin-bottom:4px}
.sp-checks li{display:flex;align-items:center;gap:10px;font-weight:600;font-size:.92rem}
.sp-checks li::before{
  content:'✓';flex:0 0 auto;width:21px;height:21px;border-radius:50%;
  background:linear-gradient(135deg,#ffd97a,#F2B33D);color:#16295f;
  font-size:.72rem;font-weight:800;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 10px rgba(242,179,61,.4);
}
.sp-plats{display:flex;gap:14px 22px;margin-top:24px;flex-wrap:wrap;align-items:center}
.plat{
  display:flex;align-items:center;justify-content:center;
  width:164px;height:62px;
  transition:transform .3s cubic-bezier(.22,1,.36,1),filter .3s;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.45));
}
.plat.plat-wide{width:212px;height:66px}
.plat:hover{transform:translateY(-4px) scale(1.06)}
.plat img{width:100%;height:100%;object-fit:contain;display:block}
@media(max-width:940px){
  .svc-stage{grid-template-columns:1fr;gap:30px}
  .svc-menu{flex-direction:row;flex-wrap:wrap;gap:10px 18px}
  .svc-menu li{font-size:1.05rem;background:#fff;border:1.5px solid rgba(30,60,140,.15);padding:9px 16px;border-radius:100px;box-shadow:0 6px 16px rgba(18,42,104,.07)}
  .svc-menu li.active{transform:none;border-color:var(--blue-electric);box-shadow:0 10px 22px rgba(62,111,224,.2)}
  .svc-panel{padding:30px 24px}
  .sp-icon{width:64px;height:64px;top:20px;right:18px}
  .plat{width:132px;height:50px}
  .plat.plat-wide{width:170px;height:54px}
  .svc-panel h3{padding-right:72px;font-size:1.35rem}
  .svc-panel p{padding-right:0}
  .sp-checks{grid-template-columns:1fr}
}

/* ============ WHY US / COUNTERS ============ */
.why{background:var(--ink);color:#fff;overflow:hidden}
.why::before{
  content:'';position:absolute;width:640px;height:640px;border-radius:50%;
  background:radial-gradient(circle,rgba(62,111,224,.28),transparent 65%);
  top:-220px;right:-160px;pointer-events:none;
}
.why .sec-sub{color:rgba(255,255,255,.65)}
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;margin-top:40px}
.why-card{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius);padding:26px 24px;backdrop-filter:blur(10px);
  transition:transform .35s cubic-bezier(.22,1,.36,1),background .35s;
}
.why-card:hover{transform:translateY(-10px);background:rgba(255,255,255,.09)}
.why-card .big{font-family:'Sora',sans-serif;font-size:2.7rem;font-weight:800;color:var(--gold);line-height:1}
.why-card .big small{font-size:1.6rem}
.why-card h4{margin:14px 0 8px;font-size:1.05rem}
.why-card p{font-size:.88rem;color:rgba(255,255,255,.62)}
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-top:44px}
.pillar{display:flex;gap:18px;align-items:flex-start}
.pillar .pi{
  min-width:52px;height:52px;border-radius:14px;font-size:1.4rem;
  background:linear-gradient(135deg,var(--blue-electric),var(--blue));
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 26px rgba(62,111,224,.35);
}
.pillar h4{font-size:1.02rem;margin-bottom:4px}
.pillar p{font-size:.86rem;color:rgba(255,255,255,.6)}

/* ============ CLIENTS ============ */
.clients-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;margin-top:40px;perspective:1400px}
.client-card{
  background:#fff;border-radius:var(--radius);padding:26px 24px;text-decoration:none;color:var(--ink);
  box-shadow:var(--shadow-soft);border:1px solid rgba(30,60,140,.06);
  transform-style:preserve-3d;transition:box-shadow .35s;
  display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden;
}
.client-card:hover{box-shadow:0 32px 76px rgba(18,42,104,.2)}
.client-mono{
  font-family:'Sora',sans-serif;font-weight:800;font-size:1.5rem;
  width:64px;height:64px;border-radius:18px;display:flex;align-items:center;justify-content:center;
  color:#fff;transform:translateZ(36px);box-shadow:0 12px 26px rgba(18,42,104,.22);
}
.client-card h3{font-size:1.18rem;transform:translateZ(26px)}
.client-card .cat{font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-electric);transform:translateZ(22px)}
.client-card p{font-size:.9rem;color:#5a6478;transform:translateZ(18px)}
.client-link{
  margin-top:auto;font-weight:700;font-size:.88rem;color:var(--blue);
  display:flex;align-items:center;gap:8px;transform:translateZ(24px);
}
.client-link svg{transition:transform .3s}
.client-card:hover .client-link svg{transform:translateX(6px)}
.client-strip{margin-top:40px;text-align:center;color:#5a6478;font-size:.92rem}
.client-strip b{color:var(--blue)}

/* ============ LOGO CAROUSEL ============ */
.sector-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.sector-chip{
  font-size:.8rem;font-weight:700;letter-spacing:.04em;color:var(--blue);
  background:#fff;border:1.5px solid rgba(30,60,140,.18);
  padding:8px 18px;border-radius:100px;
  box-shadow:0 6px 16px rgba(18,42,104,.07);
}
.logo-carousel{margin-top:38px;display:flex;flex-direction:column;gap:34px}
.logo-row{
  overflow:hidden;padding:12px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.logo-track{display:flex;align-items:center;gap:44px;width:max-content}
.lt-right{animation:lt-scroll-r 42s linear infinite}
.lt-left{animation:lt-scroll-l 46s linear infinite}
@keyframes lt-scroll-l{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes lt-scroll-r{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.cl-logo{height:100px;width:200px;object-fit:contain;flex:0 0 auto}
@media(max-width:600px){
  .logo-track{gap:26px}
  .cl-logo{height:72px;width:144px}
  .sector-chip{font-size:.72rem;padding:6px 14px}
}

/* ============ CTA / CONTACT ============ */
.cta{
  position:relative;overflow:hidden;border-radius:34px;color:#fff;
  padding:60px 56px;
  background:
    radial-gradient(90% 70% at 88% 6%, rgba(242,179,61,.20), transparent 55%),
    radial-gradient(80% 80% at 4% 100%, rgba(62,111,224,.55), transparent 58%),
    linear-gradient(150deg,#0c1734 0%,#152a63 52%,#0c1734 100%) padding-box,
    linear-gradient(135deg, rgba(242,179,61,.85), rgba(255,255,255,.16) 38%, rgba(62,111,224,.6) 72%, rgba(242,179,61,.55)) border-box;
  border:1.5px solid transparent;
  box-shadow:0 40px 100px rgba(6,13,38,.5), inset 0 1px 0 rgba(255,255,255,.08);
}
.cta::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 30% 20%,#000,transparent 75%);
  mask-image:radial-gradient(ellipse 70% 70% at 30% 20%,#000,transparent 75%);
}
.cta::after{
  content:'';position:absolute;width:420px;height:420px;border-radius:50%;
  border:1px solid rgba(242,179,61,.20);top:-170px;right:-120px;pointer-events:none;
  box-shadow:inset 0 0 90px rgba(242,179,61,.05);
}
.cta-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.cta h2{font-size:clamp(1.9rem,3.4vw,2.8rem);font-weight:800;margin-bottom:18px;line-height:1.18}
.cta p{color:rgba(255,255,255,.76);margin-bottom:32px;max-width:480px}

.cta-panel{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(14px);
  border-radius:24px;padding:30px 28px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 20px 50px rgba(6,13,38,.35);
}
.ct-block{display:flex;gap:16px;align-items:flex-start;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.09)}
.ct-block:first-child{padding-top:2px}
.ct-ico{
  flex:0 0 auto;width:44px;height:44px;border-radius:13px;
  display:flex;align-items:center;justify-content:center;color:#0e1c47;
  background:linear-gradient(135deg,#ffd97a,#F2B33D);
  box-shadow:0 8px 20px rgba(242,179,61,.35);
}
.ct-ico svg{width:21px;height:21px}
.ct-body{min-width:0}
.ct-label{
  display:block;font-size:.68rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.45);margin-bottom:6px;
}
.ct-body address{font-style:normal;font-size:.98rem;line-height:1.5;color:#fff}
.ct-phones{display:flex;flex-direction:column;gap:5px}
.ct-phones a,.ct-mail{
  color:#fff;text-decoration:none;font-size:.98rem;font-weight:600;letter-spacing:.01em;
  transition:color .25s;width:fit-content;
}
.ct-phones a::before{content:'+91 ';color:rgba(255,255,255,.5);font-weight:500}
.ct-phones a:hover,.ct-mail:hover{color:var(--gold)}
.ct-mail{word-break:break-all}
.ct-wa{
  display:flex;align-items:center;gap:13px;margin-top:22px;
  text-decoration:none;color:#fff;font-weight:600;font-size:.94rem;
  background:linear-gradient(135deg,rgba(31,185,96,.22),rgba(31,185,96,.08));
  border:1px solid rgba(79,224,138,.45);
  padding:13px 18px;border-radius:15px;
  transition:transform .3s cubic-bezier(.22,1,.36,1),background .3s,box-shadow .3s;
}
.ct-wa:hover{transform:translateY(-3px);background:linear-gradient(135deg,rgba(31,185,96,.34),rgba(31,185,96,.14));box-shadow:0 14px 30px rgba(31,185,96,.25)}
.ct-wa-ico{
  flex:0 0 auto;width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#4fe08a,#1fb960);color:#06301a;box-shadow:0 6px 16px rgba(31,185,96,.4);
}
.ct-wa-ico svg{width:20px;height:20px}
@media(max-width:940px){
  .cta-inner{grid-template-columns:1fr;gap:34px}
}
@media(max-width:600px){
  .cta{padding:38px 22px;border-radius:26px}
  .cta-panel{padding:22px 18px}
}

/* ============ FOOTER ============ */
footer{background:var(--ink);color:rgba(255,255,255,.7);padding:56px 0 28px;margin-top:64px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:44px;margin-bottom:40px}
.footer-grid h4{color:#fff;font-size:.95rem;margin-bottom:20px;letter-spacing:.06em}
.footer-grid ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.footer-grid a{color:rgba(255,255,255,.65);text-decoration:none;font-size:.9rem;transition:color .25s}
.footer-grid a:hover{color:var(--gold)}
.footer-brand p{font-size:.9rem;margin-top:18px;max-width:340px}
.footer-shining{
  margin-top:26px;display:inline-flex;align-items:center;gap:12px;
  background:rgba(242,179,61,.1);border:1px solid rgba(242,179,61,.35);
  padding:12px 20px;border-radius:14px;text-decoration:none;color:var(--gold) !important;
  font-weight:700;font-size:.86rem;transition:background .3s,transform .3s;
}
.footer-shining:hover{background:rgba(242,179,61,.2);transform:translateY(-2px)}
.footer-shining .fs-icon{width:26px;height:26px;flex:0 0 26px;display:block}
.footer-shining .fs-icon svg{width:100%;height:100%;display:block;overflow:visible}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:28px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.82rem;color:rgba(255,255,255,.45)}

/* back to top */
#toTop{
  position:fixed;bottom:26px;right:26px;width:52px;height:52px;border-radius:50%;
  background:linear-gradient(135deg,var(--blue),var(--blue-electric));color:#fff;border:none;
  font-size:1.2rem;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .35s,transform .35s;
  box-shadow:0 14px 30px rgba(30,60,140,.4);z-index:900;
}
#toTop.show{opacity:1;pointer-events:auto}
#toTop:hover{transform:translateY(-4px)}

/* ============ RESPONSIVE ============ */
@media(max-width:980px){
  .hero-inner{grid-template-columns:1fr;gap:30px}
  .hero-visual{height:auto;margin-top:14px;display:flex;flex-direction:column;gap:14px}
  .float-card{position:static;width:100%;animation:none}
  .fc-icon.fc-3d{width:44px;height:44px}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:820px){
  .nav-links{
    position:fixed;inset:0;background:rgba(11,18,32,.97);backdrop-filter:blur(16px);
    flex-direction:column;justify-content:center;gap:34px;
    transform:translateX(100%);transition:transform .4s cubic-bezier(.22,1,.36,1);
  }
  .nav-links.open{transform:translateX(0)}
  .nav-links a{color:#fff !important;font-size:1.25rem}
  .hamburger{display:block}
  nav.scrolled .hamburger span{background:var(--ink)}
  .cta{padding:56px 28px}
}
@media(max-width:600px){
  .footer-grid{grid-template-columns:1fr}
  .hero-stats{gap:24px}
  .section{padding:48px 0}
}

/* ============ PERFORMANCE & MOBILE RENDERING ============
   Six infinite marquees plus a dozen blurred panels is more compositing than
   a phone GPU can hold a steady frame through. */

/* Off-screen CSS animations are NOT paused by the browser, so every strip kept
   costing GPU time even when scrolled far out of view. main.js toggles this
   class from an IntersectionObserver so only visible strips animate. */
.marquee-track.paused,
.network-track.paused,
.logo-track.paused{animation-play-state:paused}

/* will-change stays PUT. Toggling it alongside .paused made the compositor
   throw the layer away and rebuild it on every scroll past a strip, which is
   its own source of stutter — the cure was worse than the disease. */
.marquee-track,
.network-track,
.logo-track{will-change:transform;backface-visibility:hidden}

@media(max-width:940px){
  /* backdrop-filter is the most expensive property on a mobile GPU: each one
     forces the compositor to re-sample everything behind it, every frame.
     Where the fill is already near-opaque the blur was doing almost nothing
     visible, so it simply goes; where it did show, a slightly stronger fill
     stands in for it. Desktop keeps the glass. */
  nav.scrolled{backdrop-filter:none;background:rgba(255,255,255,.97)}
  .nav-links{backdrop-filter:none}
  .hero-eyebrow{backdrop-filter:none;background:rgba(255,255,255,.13)}
  .btn-ghost{backdrop-filter:none;background:rgba(255,255,255,.13)}
  .float-card{backdrop-filter:none;background:rgba(23,44,99,.78)}
  .why-card{backdrop-filter:none;background:rgba(255,255,255,.09)}
  .cta-panel{backdrop-filter:none;background:rgba(20,40,94,.78)}

  /* preserve-3d builds a 3D rendering context for every one of these cards.
     The tilt that needed it is desktop-only (pointer:fine), so on a phone it
     buys nothing and costs plane-sorting on each frame — which is what makes
     the 3D icons shimmer and flicker. Flatten them. */
  .hero-visual,.float-card,.atl-card,.svc-card,.why-card,.logo-mark{transform-style:flat}

  /* This icon floated forever while carrying a drop-shadow, so the shadow was
     re-rasterised every frame — the flicker on each BTL service card. Hold it
     still on mobile; the shadow then rasterises once. */
  .sp-icon{animation:none}

  /* one shadow pass instead of two stacked ones */
  .fc-icon.fc-3d svg{filter:drop-shadow(0 8px 14px rgba(0,0,0,.45))}
  .atl-card .icon-3d svg{filter:drop-shadow(0 10px 16px rgba(6,13,38,.5))}
  .svc-card .icon-3d svg{filter:drop-shadow(0 10px 16px rgba(30,60,140,.22))}
  .sp-icon svg,.sp-icon img{filter:drop-shadow(0 12px 18px rgba(0,0,0,.5))}

  /* The hero cards are 250px floating chips on desktop. Stretched to the full
     width of a phone they left the text stranded against a wide empty right
     side, so lay them out as a row: icon beside the title, detail beneath. */
  .float-card{
    display:flex;flex-wrap:wrap;align-items:center;
    column-gap:14px;row-gap:2px;padding:15px 17px;
  }
  .float-card>.fc-icon{flex:0 0 auto;margin-bottom:0}
  .float-card>.fc-title{flex:1 1 0;min-width:0;font-size:1rem}
  .float-card>.fc-sub{flex:1 1 100%;padding-left:58px}
  .float-card>.fc-badge{flex:0 0 auto;margin-left:58px;margin-top:7px}

  /* Three media strips sit on screen together, each a layer thousands of px
     wide. Trim the logo box and the gaps — tablet tier here, phone tier below. */
  .net-logo{height:72px;width:144px}
  .network-track{gap:30px}
  .cl-logo{height:86px;width:172px}
  .logo-track{gap:34px}

  /* The text marquee had no mobile sizing at all: 1rem type with 64px gaps
     built a 10,500px track — some 27 phone-widths of layer — which is why it
     was the worst-behaving strip. Tighten it to roughly half that. */
  .marquee{padding:11px 0}
  .marquee-track{gap:34px}
  .marquee-track span{font-size:.8rem;letter-spacing:.1em;gap:34px}
}

@media(max-width:600px){
  /* The stylesheet already had a 600px tier; these are tighter still, because
     the three media strips animate side by side on a phone. Kept large enough
     to stay legible — this section is a credibility signal, not decoration. */
  .net-logo{height:54px;width:104px}
  .network-track{gap:20px}
  .cl-logo{height:66px;width:132px}
  .logo-track{gap:24px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s !important;transition-duration:.001s !important}
  html{scroll-behavior:auto}
}