/* =============================================
   ZOOMTECH v3 — Futuristic modern
   Navy lightened: #1a2f6a
   Sky: #2B9FE8 | Accent: #5BBCF5
   Font: Nunito
   ============================================= */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --navy:   #1a2f6a;
  --navy-d: #14255a;
  --navy-dd:#0e1c47;
  --mid:    #1A5FA8;
  --sky:    #2B9FE8;
  --sky-l:  #5BBCF5;
  --white:  #FFFFFF;
  --off:    #f0f5fc;
  --text:   #1a2f6a;
  --muted:  #2b3a5c;
  --border: #d6e4f3;
  --r:      14px;
  --rl:     22px;
  --ease:   cubic-bezier(0.4,0,0.2,1);
  --spring: cubic-bezier(0.34,1.56,0.64,1);
  --t:      0.38s var(--ease);
  --sh:     0 4px 28px rgba(20,40,100,.1);
  --sh-lg:  0 16px 60px rgba(20,40,100,.18);
}

html{scroll-behavior:smooth}
body{font-family:'Nunito',system-ui,sans-serif;color:var(--text);background:var(--white);line-height:1.65;width:100%;max-width:100%;position:relative;overflow-x:clip}
/* Prevent background scroll while mobile menu is open */
body.menu-open{overflow:hidden}

/* ── UTILS ── */
.container{max-width:1160px;margin:0 auto;padding:0 28px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--sky);background:rgba(43,159,232,.1);border:1px solid rgba(43,159,232,.22);padding:5px 14px;border-radius:50px;margin-bottom:18px}
.eyebrow::before{content:'';width:6px;height:6px;background:var(--sky);border-radius:50%}
.h2{font-size:clamp(2rem,4vw,3rem);font-weight:900;line-height:1.1;color:var(--navy);margin-bottom:16px}
.h2 em{font-style:normal;color:var(--sky)}
.body-copy{font-size:1.05rem;color:var(--muted);max-width:540px;line-height:1.8}
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 28px;border-radius:50px;font-family:'Nunito',sans-serif;font-weight:700;font-size:.95rem;cursor:pointer;text-decoration:none;transition:var(--t);border:none;outline:none}
.btn-primary{background:var(--sky);color:#fff;box-shadow:0 4px 22px rgba(43,159,232,.4)}
.btn-primary:hover{background:var(--sky-l);transform:translateY(-2px);box-shadow:0 8px 32px rgba(43,159,232,.55)}
.btn-ghost{background:rgba(255,255,255,.1);color:#fff;border:1.5px solid rgba(255,255,255,.32);backdrop-filter:blur(8px)}
.btn-ghost:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.7)}
.btn-navy{background:var(--navy);color:#fff;box-shadow:0 4px 22px rgba(26,47,106,.3)}
.btn-navy:hover{background:var(--navy-d);transform:translateY(-2px)}

/* ══════════════════════════════
   NAVIGATION
══════════════════════════════ */
#navbar{position:fixed;top:0;left:0;right:0;z-index:1000;padding:14px 0;transition:var(--t)}
#navbar.scrolled{background:rgba(14,28,71,.96);backdrop-filter:blur(20px) saturate(180%);padding:10px 0;box-shadow:0 1px 0 rgba(255,255,255,.06),0 4px 32px rgba(0,0,0,.32)}
.nav-inner{display:flex;align-items:center;justify-content:space-between}

/* Logo — solid white pill, bigger */
.nav-logo{display:flex;align-items:center;background:#ffffff;border-radius:50px;padding:7px 20px 7px 8px;text-decoration:none;transition:var(--t);box-shadow:0 2px 20px rgba(26,47,106,.22)}
.nav-logo:hover{transform:scale(1.03);box-shadow:0 4px 28px rgba(26,47,106,.3)}
.nav-logo img{height:52px;width:auto;display:block}

.nav-links{display:flex;gap:28px;list-style:none}
.nav-links a{color:rgba(255,255,255,.92);text-decoration:none;font-size:.92rem;font-weight:700;transition:var(--t);position:relative}
.nav-links a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:var(--sky);transition:var(--t);border-radius:2px}
.nav-links a:hover{color:#fff}
.nav-links a:hover::after{width:100%}
.nav-actions{display:flex;align-items:center;gap:10px}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px;background:none;border:none}
.hamburger span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;transition:var(--t)}
.mobile-menu{display:none;position:fixed;inset:0;background:var(--navy-dd);z-index:1100;flex-direction:column;align-items:center;justify-content:center;gap:28px}
.mobile-menu.open{display:flex}
.mobile-menu a{font-size:1.8rem;font-weight:800;color:#fff;text-decoration:none;transition:var(--t)}
.mobile-menu a:hover{color:var(--sky)}
.mobile-close{position:absolute;top:18px;right:20px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:50%;color:#fff;font-size:1.6rem;cursor:pointer;line-height:1;z-index:1101;-webkit-tap-highlight-color:transparent}
.mobile-close:active{background:rgba(255,255,255,.18)}

/* ══════════════════════════════
   HERO
══════════════════════════════ */
#hero{min-height:100vh;background:radial-gradient(ellipse at 68% 38%,#1e3b82 0%,var(--navy-dd) 65%);display:flex;align-items:center;position:relative;overflow:hidden;padding:130px 0 100px}

/* Animated mesh grid */
.hero-mesh{position:absolute;inset:-60px;background-image:linear-gradient(rgba(43,159,232,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(43,159,232,.055) 1px,transparent 1px);background-size:60px 60px;animation:meshDrift 24s linear infinite;pointer-events:none;will-change:transform}
.hero-bg-image{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.35;pointer-events:none;z-index:0}
@keyframes meshDrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(60px,60px,0)}}

/* Glowing scanline */
.scan-line{position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(43,159,232,.7) 50%,transparent 100%);animation:scanDown 7s ease-in-out infinite;pointer-events:none;will-change:transform}
@keyframes scanDown{0%{transform:translateY(0);opacity:0}8%{opacity:1}92%{opacity:.6}100%{transform:translateY(100vh);opacity:0}}

/* Single hero orbital */
.hero-content{will-change:transform}
.hero-orb{position:absolute;right:-80px;top:50%;transform:translateY(-50%);width:580px;height:580px;pointer-events:none;will-change:transform}
.hero-orb .ring{position:absolute;border-radius:50%;border:1px solid rgba(43,159,232,.2);top:50%;left:50%;transform:translate(-50%,-50%);animation:spin linear infinite}
.hero-orb .ring::after{content:'';position:absolute;width:9px;height:9px;background:var(--sky);border-radius:50%;box-shadow:0 0 12px var(--sky),0 0 24px rgba(43,159,232,.6);top:-4.5px;left:50%;transform:translateX(-50%)}
.hero-orb .ring:nth-child(1){width:100%;height:100%;animation-duration:32s}
.hero-orb .ring:nth-child(2){width:73%;height:73%;animation-duration:20s;animation-direction:reverse;border-color:rgba(43,159,232,.32)}
.hero-orb .ring:nth-child(3){width:48%;height:48%;animation-duration:13s}
.hero-orb .ring:nth-child(4){width:26%;height:26%;animation-duration:8s;animation-direction:reverse;border-color:rgba(91,188,245,.55)}
.hero-orb .core{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(43,159,232,.28) 0%,transparent 70%)}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}

.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.h1{font-size:clamp(2.8rem,5.5vw,4.4rem);font-weight:900;color:#fff;line-height:1.08;margin-bottom:22px;letter-spacing:-.02em}
.h1 em{font-style:normal;color:var(--sky)}
.hero-sub{font-size:1.12rem;color:rgba(255,255,255,.88);max-width:460px;line-height:1.8;margin-bottom:36px}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:52px}
.hero-stats{display:flex;gap:36px;border-top:1px solid rgba(255,255,255,.1);padding-top:36px}
.stat-n{font-size:2.2rem;font-weight:900;color:#fff;line-height:1}
.stat-n em{color:var(--sky);font-style:normal}
.stat-l{font-size:.8rem;color:rgba(255,255,255,.75);font-weight:700;margin-top:4px;letter-spacing:.04em}

/* HERO CARDS — larger */
.hero-visual{position:relative;display:flex;justify-content:center;align-items:center}
.hero-cards{position:relative;width:540px;height:580px}
.hcard{position:absolute;background:rgba(34,52,104,.6);border:1px solid rgba(255,255,255,.18);border-radius:24px;padding:30px 34px;display:flex;align-items:center;gap:22px;transition:var(--t);box-shadow:0 12px 40px rgba(8,16,40,.35)}
.hcard:nth-child(1){top:0;left:0;width:390px}
.hcard:nth-child(2){top:130px;right:0;width:355px;animation:fl1 4.2s ease-in-out infinite}
.hcard:nth-child(3){bottom:130px;left:18px;width:370px;animation:fl2 5.1s ease-in-out infinite}
.hcard:nth-child(4){bottom:8px;right:8px;width:310px;animation:fl3 3.8s ease-in-out infinite}
@keyframes fl1{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
@keyframes fl2{0%,100%{transform:translateY(0)}50%{transform:translateY(9px)}}
@keyframes fl3{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.hcard:hover{background:rgba(255,255,255,.14);border-color:rgba(43,159,232,.5);transform:scale(1.03) !important}
.hcard-ico{width:68px;height:68px;border-radius:17px;display:flex;align-items:center;justify-content:center;font-size:2.1rem;flex-shrink:0}
/* per-card coloured icon tiles */
.hcard:nth-child(1) .hcard-ico{background:linear-gradient(135deg,rgba(43,159,232,.4),rgba(43,159,232,.15));border:1px solid rgba(43,159,232,.5);box-shadow:0 4px 18px rgba(43,159,232,.35)}
.hcard:nth-child(2) .hcard-ico{background:linear-gradient(135deg,rgba(34,197,94,.4),rgba(34,197,94,.15));border:1px solid rgba(34,197,94,.5);box-shadow:0 4px 18px rgba(34,197,94,.35)}
.hcard:nth-child(3) .hcard-ico{background:linear-gradient(135deg,rgba(168,85,247,.4),rgba(168,85,247,.15));border:1px solid rgba(168,85,247,.5);box-shadow:0 4px 18px rgba(168,85,247,.35)}
.hcard:nth-child(4) .hcard-ico{background:linear-gradient(135deg,rgba(249,115,22,.4),rgba(249,115,22,.15));border:1px solid rgba(249,115,22,.5);box-shadow:0 4px 18px rgba(249,115,22,.35)}
.hcard-t{font-size:1.15rem;font-weight:800;color:#fff}
.hcard-s{font-size:.9rem;color:rgba(255,255,255,.82);margin-top:4px}

/* ══════════════════════════════
   MANAGED SERVICES — white bg
══════════════════════════════ */
#services{padding:0;background:var(--white)}
.ms-hero{background:var(--white);padding:150px 0 130px;position:relative;overflow:hidden;border-bottom:1px solid var(--border)}

/* Data-stream lines on right side */
.data-streams{position:absolute;right:0;top:0;bottom:0;width:48%;overflow:hidden;pointer-events:none}
.ds-line{position:absolute;top:0;bottom:0;width:1px;background:linear-gradient(to bottom,transparent,rgba(43,159,232,.12),transparent)}
.ds-pulse{position:absolute;left:0;width:1px;height:90px;background:linear-gradient(to bottom,transparent,var(--sky),transparent);animation:dsPulse linear infinite}
.ds-line:nth-child(1){left:12%} .ds-line:nth-child(1) .ds-pulse{animation-duration:3.2s;animation-delay:0s}
.ds-line:nth-child(2){left:28%} .ds-line:nth-child(2) .ds-pulse{animation-duration:4.1s;animation-delay:-.8s}
.ds-line:nth-child(3){left:46%} .ds-line:nth-child(3) .ds-pulse{animation-duration:3.7s;animation-delay:-1.5s}
.ds-line:nth-child(4){left:64%} .ds-line:nth-child(4) .ds-pulse{animation-duration:5s;animation-delay:-2.2s}
.ds-line:nth-child(5){left:82%} .ds-line:nth-child(5) .ds-pulse{animation-duration:3.5s;animation-delay:-3s}
@keyframes dsPulse{0%{top:-90px}100%{top:100%}}

.ms-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;position:relative;z-index:1}
.ms-content .h2{color:var(--navy)}
.ms-content .body-copy{color:var(--muted)}
.ms-features{display:flex;flex-direction:column;gap:12px;margin-top:28px}
.ms-feat{display:flex;align-items:center;gap:14px;background:var(--off);border:1px solid var(--border);border-radius:var(--r);padding:16px 20px;transition:var(--t)}
.ms-feat:hover{background:rgba(43,159,232,.07);border-color:rgba(43,159,232,.3);transform:translateX(6px)}
.ms-feat-ico{font-size:1.4rem;flex-shrink:0}
.ms-feat-txt h4{font-size:.93rem;font-weight:800;color:var(--navy)}
.ms-feat-txt p{font-size:.82rem;color:var(--muted);margin-top:2px}

/* MS right panel — navy card on white */
.ms-panel{background:linear-gradient(160deg,#15295e 0%,var(--navy) 55%,var(--navy-dd) 100%);border-radius:var(--rl);padding:32px;box-shadow:var(--sh-lg);border:1px solid rgba(43,159,232,.25);position:relative;overflow:hidden}
/* faint moving grid inside the panel */
.ms-panel::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(43,159,232,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(43,159,232,.06) 1px,transparent 1px);background-size:32px 32px;animation:meshDrift 26s linear infinite;pointer-events:none}
.ms-panel>*{position:relative;z-index:1}
.ms-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.ms-panel-title{font-size:.74rem;font-weight:800;color:rgba(255,255,255,.75);letter-spacing:.12em;text-transform:uppercase}
.ms-live-badge{display:inline-flex;align-items:center;gap:7px;font-size:.66rem;font-weight:800;letter-spacing:.14em;color:#fff;background:rgba(34,197,94,.16);border:1px solid rgba(34,197,94,.4);padding:4px 11px;border-radius:50px}
.ms-live-dot{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 8px rgba(34,197,94,.8);animation:pulseG 1.6s ease-in-out infinite}
.ms-metrics{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-bottom:16px}
.ms-metric{position:relative;background:rgba(43,159,232,.1);border:1px solid rgba(43,159,232,.25);border-radius:var(--r);padding:18px 18px 16px;text-align:left;overflow:hidden;transition:var(--t)}
.ms-metric::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--sky),transparent);opacity:.6}
.ms-metric:hover{background:rgba(43,159,232,.2);transform:translateY(-2px);box-shadow:0 8px 24px rgba(43,159,232,.18)}
.ms-metric-ico{font-size:1.3rem;margin-bottom:8px;filter:drop-shadow(0 2px 8px rgba(43,159,232,.5))}
.ms-metric .n{font-size:1.95rem;font-weight:900;color:#fff;line-height:1;letter-spacing:-.02em}
.ms-metric .n .u{font-size:1rem;font-weight:800;color:var(--sky-l)}
.ms-metric .l{font-size:.72rem;color:rgba(255,255,255,.7);margin-top:5px;font-weight:700;letter-spacing:.02em}
.ms-uptime{background:linear-gradient(100deg,rgba(34,197,94,.14),rgba(43,159,232,.08));border:1px solid rgba(34,197,94,.3);border-radius:var(--r);padding:16px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.ms-uptime-left{display:flex;align-items:center;gap:14px}
.uptime-dot{width:12px;height:12px;background:#22c55e;border-radius:50%;flex-shrink:0;box-shadow:0 0 10px rgba(34,197,94,.6);animation:pulseG 2s ease-in-out infinite;position:relative}
.uptime-dot::after{content:'';position:absolute;inset:-5px;border-radius:50%;border:1.5px solid rgba(34,197,94,.5);animation:uptimeRing 2s ease-out infinite}
@keyframes uptimeRing{0%{transform:scale(.6);opacity:.8}100%{transform:scale(1.6);opacity:0}}
@keyframes pulseG{0%,100%{box-shadow:0 0 6px rgba(34,197,94,.5)}50%{box-shadow:0 0 22px rgba(34,197,94,.9)}}
.uptime-text h4{font-size:.88rem;font-weight:800;color:#fff}
.uptime-text p{font-size:.78rem;color:rgba(255,255,255,.7)}
/* mini animated activity bars */
.ms-spark{display:flex;align-items:flex-end;gap:3px;height:30px;flex-shrink:0}
.ms-spark span{width:4px;background:linear-gradient(to top,var(--sky),var(--sky-l));border-radius:2px;animation:spark 1.4s ease-in-out infinite;transform-origin:bottom}
.ms-spark span:nth-child(1){height:40%;animation-delay:0s}
.ms-spark span:nth-child(2){height:70%;animation-delay:-.2s}
.ms-spark span:nth-child(3){height:50%;animation-delay:-.4s}
.ms-spark span:nth-child(4){height:90%;animation-delay:-.6s}
.ms-spark span:nth-child(5){height:60%;animation-delay:-.8s}
.ms-spark span:nth-child(6){height:80%;animation-delay:-1s}
.ms-spark span:nth-child(7){height:45%;animation-delay:-1.2s}
@keyframes spark{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1)}}

/* ══════════════════════════════
   OTHER SERVICES — alternating visuals
══════════════════════════════ */
.services-rest{padding:100px 0;background:var(--off)}
.services-rest-header{text-align:center;margin-bottom:72px}
.services-alt-list{display:flex;flex-direction:column;gap:88px}
.svc-alt{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.svc-alt.reverse{direction:rtl}
.svc-alt.reverse>*{direction:ltr}
.svc-alt-visual{position:relative;display:flex;justify-content:center;align-items:center;min-height:340px}

/* ─ DIGITAL: floating browser mockup ─ */
.browser-mock{width:340px;background:var(--white);border-radius:16px;box-shadow:var(--sh-lg);overflow:hidden;border:1px solid var(--border);animation:fl2 6s ease-in-out infinite}
.browser-bar{background:var(--off);padding:12px 16px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--border)}
.b-dot{width:10px;height:10px;border-radius:50%}
.b-url{flex:1;background:#fff;border-radius:50px;padding:5px 14px;font-size:.72rem;color:var(--muted);font-weight:700;border:1px solid var(--border)}
.browser-body{padding:20px}
.bb-hero{background:linear-gradient(135deg,rgba(43,159,232,.15),rgba(26,47,106,.09));border-radius:10px;height:90px;margin-bottom:14px;display:flex;align-items:center;justify-content:center;font-size:2.2rem}
.bb-lines{display:flex;flex-direction:column;gap:7px}
.bb-line{height:9px;background:var(--border);border-radius:50px}
.bb-line:nth-child(1){width:85%}
.bb-line:nth-child(2){width:65%}
.bb-line:nth-child(3){width:75%}
.bb-btn{margin-top:14px;display:inline-block;background:var(--sky);color:#fff;font-size:.72rem;font-weight:800;padding:7px 16px;border-radius:50px}

/* ─ MARKETING: animated bar chart ─ */
.chart-wrap{width:320px;background:var(--navy);border-radius:var(--rl);padding:28px;box-shadow:var(--sh-lg)}
.chart-title{font-size:.72rem;font-weight:800;color:rgba(255,255,255,.5);letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px}
.chart-val{font-size:1.8rem;font-weight:900;color:#fff;margin-bottom:20px}
.chart-val span{color:var(--sky)}
.chart-bars{display:flex;align-items:flex-end;gap:10px;height:120px;margin-bottom:16px}
.cbar{flex:1;border-radius:6px 6px 0 0;position:relative;transition:height 1.2s var(--ease);cursor:pointer}
.cbar:hover{filter:brightness(1.2)}
.cbar-label{position:absolute;bottom:-22px;left:50%;transform:translateX(-50%);font-size:.68rem;color:rgba(255,255,255,.4);font-weight:700;white-space:nowrap}
.chart-legend{display:flex;gap:16px}
.cl-item{display:flex;align-items:center;gap:6px;font-size:.72rem;color:rgba(255,255,255,.5);font-weight:700}
.cl-dot{width:8px;height:8px;border-radius:50%}

/* ─ DESIGN: brand identity card stack ─ */
.brand-stack{position:relative;width:320px;height:320px}
.brand-card{position:absolute;border-radius:var(--rl);box-shadow:var(--sh-lg);padding:28px}
.bc-back{width:280px;height:260px;background:var(--off);border:1px solid var(--border);top:30px;left:30px;transform:rotate(4deg)}
.bc-mid{width:280px;height:260px;background:var(--sky-l);top:16px;left:16px;transform:rotate(2deg);display:flex;align-items:center;justify-content:center}
.bc-front{width:280px;height:260px;background:var(--white);border:1px solid var(--border);top:0;left:0}
.bc-palette{display:flex;gap:10px;margin-bottom:18px}
.bc-swatch{width:36px;height:36px;border-radius:8px}
.bc-logo-placeholder{width:100%;height:60px;background:linear-gradient(135deg,rgba(43,159,232,.15),rgba(26,47,106,.08));border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;font-size:1.5rem}
.bc-type{height:8px;background:var(--border);border-radius:50px;margin-bottom:8px}
.bc-type:nth-child(1){width:70%}
.bc-type:nth-child(2){width:50%}

.svc-alt-content .h2{font-size:clamp(1.7rem,3vw,2.3rem)}
.svc-list{list-style:none;display:flex;flex-direction:column;gap:10px;margin-top:18px;margin-bottom:28px}
.svc-list li{display:flex;align-items:center;gap:10px;font-size:.95rem;color:var(--text);font-weight:700}
.svc-list li::before{content:'';width:8px;height:8px;background:var(--sky);border-radius:50%;flex-shrink:0}

/* ══════════════════════════════
   WHY US
══════════════════════════════ */
#why{padding:120px 0;background:var(--white);position:relative;overflow:hidden}

/* Hexagonal grid background */
.hex-bg{position:absolute;inset:0;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='115'%3E%3Cpolygon points='50,5 95,27.5 95,72.5 50,95 5,72.5 5,27.5' fill='none' stroke='%232B9FE8' stroke-width='1'/%3E%3C/svg%3E");background-size:90px 104px}

.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;position:relative;z-index:1}
.why-cards{display:flex;flex-direction:column;gap:16px}
.why-card{background:var(--white);border:1.5px solid var(--border);border-radius:var(--rl);padding:26px;box-shadow:var(--sh);transition:var(--t);display:flex;gap:18px;align-items:flex-start}
.why-card:hover{border-color:var(--sky);box-shadow:0 8px 40px rgba(43,159,232,.14);transform:translateY(-3px)}
.why-card-ico{width:50px;height:50px;background:linear-gradient(135deg,rgba(43,159,232,.14),rgba(26,47,106,.07));border:1px solid rgba(43,159,232,.18);border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:1.35rem;flex-shrink:0}
.why-card h4{font-size:1rem;font-weight:800;color:var(--navy);margin-bottom:5px}
.why-card p{font-size:.875rem;color:var(--muted);line-height:1.65}

/* ══════════════════════════════
   PROCESS — dark, futuristic
══════════════════════════════ */
#process{padding:130px 0;background:var(--navy-dd);position:relative;overflow:hidden}

/* Canvas drawn via JS */
#particleCanvas{position:absolute;inset:0;pointer-events:none;opacity:.5}

.process-header{text-align:center;margin-bottom:72px;position:relative;z-index:1}
.process-header .h2{color:#fff}
.process-header .body-copy{color:rgba(255,255,255,.85);margin:0 auto}

/* Glowing horizontal connector */
.timeline{position:relative;z-index:1}
.timeline-track{position:absolute;top:52px;left:10%;right:10%;height:2px;background:rgba(255,255,255,.08)}
.timeline-fill{position:absolute;top:0;left:0;height:100%;width:0;background:linear-gradient(90deg,var(--sky),var(--sky-l));border-radius:2px;transition:width 1.4s var(--ease)}
.timeline-fill.filled{width:100%}

.process-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;position:relative}
.proc-step{text-align:center;position:relative}
.proc-num{width:106px;height:106px;background:rgba(43,159,232,.08);border:2px solid rgba(43,159,232,.25);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2.4rem;margin:0 auto 22px;position:relative;z-index:1;transition:var(--t);box-shadow:0 0 0 0 rgba(43,159,232,0)}
.proc-step:hover .proc-num{border-color:var(--sky);box-shadow:0 0 0 8px rgba(43,159,232,.12),0 0 40px rgba(43,159,232,.2)}
.proc-step h3{font-size:1rem;font-weight:800;color:#fff;margin-bottom:8px}
.proc-step p{font-size:.85rem;color:rgba(255,255,255,.8);line-height:1.65}

/* ══════════════════════════════
   CONTACT
══════════════════════════════ */
#contact{padding:120px 0;background:var(--off)}
.contact-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:72px;align-items:start}
.contact-items{display:flex;flex-direction:column;gap:18px;margin-top:32px}
.ci{display:flex;gap:16px;align-items:flex-start}
.ci-ico{width:46px;height:46px;background:linear-gradient(135deg,var(--sky),var(--mid));border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.15rem;flex-shrink:0}
.ci h4{font-size:.74rem;font-weight:800;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-bottom:3px}
.ci p{font-size:.96rem;color:var(--navy);font-weight:800}
.contact-form{background:var(--white);border-radius:var(--rl);padding:44px;box-shadow:var(--sh-lg);border:1px solid var(--border)}
.contact-form h3{font-size:1.3rem;font-weight:800;color:var(--navy);margin-bottom:28px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fg{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.fg label{font-size:.78rem;font-weight:800;color:var(--navy);letter-spacing:.04em}
.fg input,.fg select,.fg textarea{padding:12px 16px;border:1.5px solid var(--border);border-radius:var(--r);font-family:'Nunito',sans-serif;font-size:.92rem;color:var(--text);background:var(--white);transition:var(--t);outline:none}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--sky);box-shadow:0 0 0 3px rgba(43,159,232,.12)}
.fg textarea{resize:vertical;min-height:96px}
.form-btn{width:100%;justify-content:center;padding:15px;font-size:1rem;border-radius:var(--r)}

/* ══════════════════════════════
   FOOTER
══════════════════════════════ */
footer{background:var(--navy-dd);color:rgba(255,255,255,.85);padding:64px 0 28px}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px}
.footer-brand img{height:44px;margin-bottom:16px}
.footer-brand p{font-size:.875rem;color:rgba(255,255,255,.75);line-height:1.75}
.fh{font-size:.73rem;font-weight:800;color:#fff;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px}
.fl{list-style:none;display:flex;flex-direction:column;gap:10px}
.fl a{font-size:.875rem;color:rgba(255,255,255,.78);text-decoration:none;transition:var(--t);font-weight:600}
.fl a:hover{color:var(--sky)}
.footer-bot{border-top:1px solid rgba(255,255,255,.07);padding-top:24px;display:flex;justify-content:space-between;align-items:center;font-size:.8rem;color:rgba(255,255,255,.28)}
.footer-bot a{color:var(--sky);text-decoration:none}

/* ══════════════════════════════
   SCROLL REVEAL — futuristic
══════════════════════════════ */
.sr      {opacity:0;transform:translateY(38px);  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.sr-l    {opacity:0;transform:translateX(-52px); transition:opacity .82s var(--ease),transform .82s var(--ease)}
.sr-r    {opacity:0;transform:translateX(52px);  transition:opacity .82s var(--ease),transform .82s var(--ease)}
.sr-sc   {opacity:0;transform:scale(.9);         transition:opacity .75s var(--ease),transform .75s var(--ease)}
.sr-clip {opacity:0;clip-path:inset(100% 0 0 0); transition:opacity .8s var(--ease),clip-path 1s var(--ease)}
.sr.visible,.sr-l.visible,.sr-r.visible,.sr-sc.visible{opacity:1;transform:none}
.sr-clip.visible{opacity:1;clip-path:inset(0% 0 0 0)}

/* ── TOAST ── */
.toast{position:fixed;bottom:28px;right:28px;background:var(--navy);color:#fff;padding:14px 24px;border-radius:var(--r);border-left:4px solid var(--sky);box-shadow:var(--sh-lg);font-size:.9rem;font-weight:700;transform:translateY(80px);opacity:0;transition:var(--t);z-index:9999}
.toast.show{transform:translateY(0);opacity:1}

/* ══════════════════════════════
   RESPONSIVE
══════════════════════════════ */
@media(max-width:960px){
  .hero-grid,.ms-grid,.why-grid,.contact-grid,.svc-alt{grid-template-columns:1fr;gap:48px}
  .svc-alt.reverse{direction:ltr}
  .hero-visual,.data-streams{display:none}
  .process-steps{grid-template-columns:1fr 1fr}
  .timeline-track{display:none}
  .footer-grid{grid-template-columns:1fr 1fr}
  .nav-links,.nav-actions{display:none}
  .hamburger{display:flex}
  /* Keep hero decoration from causing horizontal scroll on mobile */
  #hero{overflow:hidden}
  .hero-orb{right:-40%;width:90vw;height:90vw}
  .hero-orb-2{display:none}
  .hero-mesh{inset:0}
}
@media(max-width:640px){
  .footer-grid,.form-row,.ms-metrics{grid-template-columns:1fr}
  .hero-stats{flex-wrap:wrap;gap:20px}
  .process-steps{grid-template-columns:1fr}
  .contact-form{padding:24px 18px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ══════════════════════════════
   v4 — AXIOM-STYLE SCROLL EFFECTS
══════════════════════════════ */
══════════════════════════════ */

/* ── HORIZONTAL SCROLL SHOWCASE ──
   Modern: driven entirely by CSS scroll-driven
   animations (animation-timeline: scroll()).
   The browser's compositor moves the track — no
   JS runs during scroll. Falls back to a normal
   swipeable horizontal scroll where unsupported. */
#showcase{background:var(--navy-dd);position:relative}

/* ---- FALLBACK (no scroll-timeline support) ---- */
.hs-pin{padding:90px 0}
.hs-head{padding:0 28px;max-width:1160px;margin:0 auto 8px;width:100%}
.hs-head .eyebrow{color:var(--sky-l)}
.hs-head h2{color:#fff;font-size:clamp(1.8rem,3.5vw,2.6rem);font-weight:900;line-height:1.1}
.hs-head h2 em{font-style:normal;color:var(--sky)}
.hs-viewport{width:100%;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.hs-viewport::-webkit-scrollbar{display:none}
.hs-track{display:flex;gap:32px;padding:0 28px}
.hs-card{
  position:relative;flex:0 0 clamp(300px,34vw,560px);height:clamp(360px,52vh,580px);
  border-radius:var(--rl);overflow:hidden;scroll-snap-align:center;
  background:linear-gradient(155deg,#21408c 0%,var(--navy) 55%,var(--navy-dd) 100%);
  border:1px solid rgba(43,159,232,.28);
  box-shadow:0 18px 50px rgba(8,16,40,.45), inset 0 1px 0 rgba(255,255,255,.06);
}
/* lit-from-within accent ring at the top edge */
.hs-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--sky),transparent);
  opacity:.7;
}
/* breathing glow that keeps the card feeling alive while auto-scrolling */
.hs-card-glow{
  position:absolute;inset:0;
  background:radial-gradient(circle at 50% 118%,rgba(43,159,232,.5) 0%,transparent 58%);
  animation:cardPulse 4.5s ease-in-out infinite;
}
.hs-card:nth-child(2) .hs-card-glow{animation-delay:-.6s}
.hs-card:nth-child(3) .hs-card-glow{animation-delay:-1.3s}
.hs-card:nth-child(4) .hs-card-glow{animation-delay:-2s}
.hs-card:nth-child(5) .hs-card-glow{animation-delay:-2.7s}
@keyframes cardPulse{0%,100%{opacity:.55}50%{opacity:1}}

/* big background emoji — bolder, brighter, gently drifting */
.hs-card-bg{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-end;
  padding:0 6% 26% 0;
  font-size:clamp(7rem,12vw,11rem);
  opacity:.9;
  filter:drop-shadow(0 6px 26px rgba(43,159,232,.55)) saturate(1.25);
  animation:emojiFloat 6s ease-in-out infinite;
}
.hs-card:nth-child(2) .hs-card-bg{animation-delay:-1s}
.hs-card:nth-child(3) .hs-card-bg{animation-delay:-2s}
.hs-card:nth-child(4) .hs-card-bg{animation-delay:-3s}
@keyframes emojiFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-14px) rotate(2deg)}}

/* soft sheen sweeping across — always-on shimmer */
.hs-card::after{
  content:'';position:absolute;top:0;bottom:0;width:55%;
  left:-60%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.07),transparent);
  transform:skewX(-18deg);
  animation:sheen 7s ease-in-out infinite;
}
.hs-card:nth-child(2)::after{animation-delay:-1.8s}
.hs-card:nth-child(3)::after{animation-delay:-3.4s}
.hs-card:nth-child(4)::after{animation-delay:-5s}
@keyframes sheen{0%{left:-60%}55%,100%{left:140%}}

.hs-card-num{position:absolute;top:28px;left:30px;font-size:.85rem;font-weight:800;letter-spacing:.2em;color:var(--sky-l);text-shadow:0 0 14px rgba(43,159,232,.5);z-index:2}
.hs-card-content{position:absolute;left:0;right:0;bottom:0;padding:38px 34px;background:linear-gradient(to top,rgba(10,20,52,.97) 30%,rgba(10,20,52,.7) 70%,transparent);z-index:2}
.hs-card-content h3{font-size:clamp(1.4rem,2vw,1.9rem);font-weight:900;color:#fff;margin-bottom:12px}
.hs-card-content p{font-size:clamp(.9rem,1vw,1.05rem);color:rgba(255,255,255,.9);line-height:1.6;margin-bottom:18px}
.hs-tags{display:flex;flex-wrap:wrap;gap:8px}
.hs-tag{font-size:.74rem;font-weight:700;color:#fff;background:rgba(43,159,232,.28);border:1px solid rgba(43,159,232,.5);padding:5px 13px;border-radius:50px;box-shadow:0 2px 10px rgba(43,159,232,.2)}

/* Closing CTA card */
.hs-card-cta{background:linear-gradient(150deg,#2a52a8 0%,#1e3b82 45%,var(--navy) 100%);border-color:rgba(91,188,245,.45)}
.hs-card-cta .hs-card-glow{background:radial-gradient(circle at 50% 115%,rgba(91,188,245,.55) 0%,transparent 60%)}
.hs-cta-inner{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:44px 38px;gap:6px;z-index:2}
.hs-cta-mark{font-size:2.4rem;color:var(--sky-l);margin-bottom:8px;text-shadow:0 0 20px rgba(91,188,245,.7);animation:emojiFloat 5s ease-in-out infinite}
.hs-cta-inner h3{font-size:clamp(1.5rem,2.2vw,2.1rem);font-weight:900;color:#fff;line-height:1.15;margin-bottom:12px}
.hs-cta-inner p{font-size:clamp(.9rem,1vw,1.05rem);color:rgba(255,255,255,.9);line-height:1.6;margin-bottom:22px;max-width:90%}
.hs-progress{width:100%;max-width:1160px;margin:28px auto 0;padding:0 28px}
.hs-progress-track{height:2px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden}
.hs-progress-bar{height:100%;width:30%;background:linear-gradient(90deg,var(--sky),var(--sky-l));border-radius:2px}
.hs-hint{text-align:center;font-size:.78rem;color:rgba(255,255,255,.35);font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-top:24px}
.hs-hint span{display:inline-block;animation:nudge 1.8s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}

/* ---- MODERN: scroll-driven pinned horizontal ---- */
@supports (animation-timeline: scroll()) {
  @media (min-width: 961px) {
    /* Height = pin duration. Scales DOWN on wider screens (less
       horizontal overflow) so travel-per-scroll stays consistent. */
    #showcase{
      height:280vh; /* fallback; JS sets precise height from real overflow */
      view-timeline:--hs block;
      position:relative;
    }
    .hs-pin{
      position:sticky;top:0;height:100vh;padding:64px 0 0;
      display:flex;flex-direction:column;justify-content:center;align-items:stretch;
      overflow:hidden;gap:20px;
    }
    .hs-viewport{overflow:visible;scroll-snap-type:none}
    .hs-track{
      width:max-content;
      animation:hsScroll linear both;
      animation-timeline:--hs;
      animation-range:cover 0% cover 100%;
    }
    .hs-progress-bar{
      width:100%;transform-origin:left;transform:scaleX(0);
      animation:hsBar linear both;
      animation-timeline:--hs;
      animation-range:cover 0% cover 100%;
    }
    .hs-hint{animation:hsHide linear both;animation-timeline:--hs;animation-range:cover 0% cover 18%}
  }
}
/* Dwell baked into keyframes (height-independent):
   entry + hold card 1 (0-32%), scroll (32-72%), hold CTA + exit (72-100%) */
@keyframes hsScroll{
  0%,32%   {transform:translateX(0)}
  72%,100% {transform:translateX(calc(100vw - 100% - 56px))}
}
@keyframes hsBar{
  0%,32%   {transform:scaleX(0)}
  72%,100% {transform:scaleX(1)}
}
@keyframes hsHide{to{opacity:0}}

/* ── PINNED MANAGED SERVICES (native sticky) ── */
.ms-pin-wrap{position:relative;height:auto}
.ms-sticky{position:relative;min-height:100vh;display:flex;align-items:center}

/* ── PARALLAX BAND ──
   Parallax via CSS scroll-driven animation where
   supported; otherwise a clean static gradient. */
.parallax-band{position:relative;height:60vh;overflow:hidden;display:flex;align-items:center;justify-content:center}
.parallax-band .pb-bg{position:absolute;inset:-20% 0;background:linear-gradient(135deg,#1e3b82,#0e1c47)}
.parallax-band .pb-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(43,159,232,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(43,159,232,.07) 1px,transparent 1px);background-size:50px 50px}
.parallax-band .pb-content{position:relative;z-index:1;text-align:center;padding:0 28px;max-width:800px}
.parallax-band .pb-content h2{font-size:clamp(1.6rem,3.5vw,2.6rem);font-weight:900;color:#fff;line-height:1.2}
.parallax-band .pb-content h2 em{font-style:normal;color:var(--sky)}
.parallax-band .pb-content p{font-size:1.05rem;color:rgba(255,255,255,.88);margin-top:14px}
@supports (animation-timeline: view()) {
  .parallax-band .pb-bg{
    animation:bandPar linear both;
    animation-timeline:view();
    animation-range:cover 0% cover 100%;
  }
}
@keyframes bandPar{from{transform:translateY(-8%)}to{transform:translateY(8%)}}

/* word reveal */
.word{display:inline-block;opacity:0;transform:translateY(24px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.word.in{opacity:1;transform:none}

@media(max-width:960px){
  #showcase{height:auto}
  .hs-pin{height:auto;padding:80px 0;position:static}
  .ms-pin-wrap{height:auto}
  .ms-sticky{position:relative;height:auto;min-height:0;padding:90px 0 100px}
  .parallax-band{height:46vh}
}

/* ══════════════════════════════
   PERFORMANCE
══════════════════════════════ */
/* Skip render work for off-screen sections */
#why,#process,#contact,footer{content-visibility:auto;contain-intrinsic-size:auto 800px}

/* Footer logo — white bubble like header */
.footer-logo{display:inline-flex;align-items:center;background:#fff;border-radius:50px;padding:8px 18px 8px 8px;box-shadow:0 2px 16px rgba(0,0,0,.25);margin-bottom:18px}
.footer-logo img{height:40px;width:auto;display:block;margin:0}

/* Respect reduced-motion: drop all ambient + scroll animation */
@media (prefers-reduced-motion: reduce){
  .hero-mesh,.scan-line,.hero-orb .ring,.ds-pulse,.hcard,.browser-mock,.hs-hint span,.uptime-dot{animation:none!important}
  .hs-track,.hs-progress-bar,.parallax-band .pb-bg{animation:none!important;transform:none!important}
}

/* Pause hero ambient animations when hero is scrolled out of view */
.hero-out .hero-mesh,
.hero-out .scan-line,
.hero-out .hero-orb .ring,
.hero-out .hcard{animation-play-state:paused}