/* ════════════════════════════════════════════════════════════════
   INNOVIA GLOBAL TECHNOLOGIES — STYLESHEET
   ════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────
   1. THEME TOKENS
   Pick ONE color scheme below. Only one :root color block should
   be active (uncommented) at a time — comment the active one out
   and uncomment a different one to re-skin the entire site.
   ────────────────────────────────────────────────────────────── */

/* ---- THEME A: "Aurora Teal" — cool tech teal + amber accent (ACTIVE) ---- */
:root{
  --clr-primary:      #00BFA5;   /* bright teal — links, highlights on dark */
  --clr-primary-dark: #00897B;   /* core teal — buttons, icons */
  --clr-primary-deep: #00695C;   /* deep teal — button hover */
  --clr-accent:       #E8A020;   /* amber — badges, highlights */
  --clr-ink:          #0B1628;   /* primary text / dark surfaces */
  --clr-ink-2:        #080E1C;   /* darkest surface (hero, footer) */
  --clr-surface:      #FFFFFF;   /* card / surface white */
  --clr-bg:           #F3F7F6;   /* page background tint */
  --clr-muted:        #5A7184;   /* secondary text */
  --clr-muted-lt:     #8EA8BC;   /* tertiary text */
  --clr-border:       rgba(0,137,123,0.12);
  --clr-primary-rgb:  0,191,165;
}

/* ---- THEME B: "Quantum Violet" — deep violet + cyan accent ----
*/
/* :root{
  --clr-primary:      #8C6CFF;
  --clr-primary-dark: #6C4CE0;
  --clr-primary-deep: #4F35B5;
  --clr-accent:       #00E0C6;
  --clr-ink:          #161329;
  --clr-ink-2:        #0D0B1A;
  --clr-surface:      #FFFFFF;
  --clr-bg:           #F6F4FC;
  --clr-muted:        #6B6480;
  --clr-muted-lt:     #A29CC2;
  --clr-border:       rgba(140,108,255,0.14);
  --clr-primary-rgb:  140,108,255;
} */

/* ---- THEME C: "Solar Amber" — warm amber + teal accent ----
*/
/* :root{
  --clr-primary:      #FF8A4C;
  --clr-primary-dark: #E5631A;
  --clr-primary-deep: #B84A0F;
  --clr-accent:       #20C4B0;
  --clr-ink:          #211A14;
  --clr-ink-2:        #16100C;
  --clr-surface:      #FFFFFF;
  --clr-bg:           #FBF6F0;
  --clr-muted:        #7C6A5C;
  --clr-muted-lt:     #BCA897;
  --clr-border:       rgba(255,138,76,0.16);
  --clr-primary-rgb:  255,138,76;
} */

/* ---- TYPOGRAPHY TOKENS ----
   Swap families here to re-type the whole site. */
:root{
  --ff-display: 'Bebas Neue', Impact, sans-serif;   /* big display headings */
  --ff-heading: 'Rajdhani', 'Arial Narrow', sans-serif; /* sub-headings, labels */
  --ff-body:    'DM Sans', sans-serif;              /* body copy, UI */

  /* shared motion + radius tokens */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
}

/* ──────────────────────────────────────────────────────────────
   2. RESET & BASE
   ────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--ff-body);
  background:var(--clr-bg);
  color:var(--clr-ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
::selection{background:var(--clr-primary);color:#fff}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* visible focus state */
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--clr-primary);outline-offset:2px;border-radius:4px;
}

/* ──────────────────────────────────────────────────────────────
   3. SCROLL PROGRESS BAR
   ────────────────────────────────────────────────────────────── */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0%;
  background:linear-gradient(90deg,var(--clr-primary-dark),var(--clr-primary),var(--clr-accent));
  z-index:999;transition:width .08s linear;
}

/* ──────────────────────────────────────────────────────────────
   4. SCROLL-REVEAL + MICRO-INTERACTION UTILITIES
   ────────────────────────────────────────────────────────────── */
[data-reveal]{opacity:0;will-change:transform,opacity}
[data-reveal].in-view{opacity:1}

/* stagger helper — applied via inline custom property */
.animate__animated[style*="--d"]{animation-delay:var(--d)}

/* magnetic / pressable buttons */
.btn-p,.btn-o,.btn-white,.mob-cta,.nav-cta{
  position:relative;overflow:hidden;
  transition:transform .35s var(--ease-out), background .25s, border-color .25s, color .25s, box-shadow .35s;
}
.btn-p:active,.btn-o:active,.btn-white:active,.mob-cta:active,.nav-cta:active{transform:scale(.96)}

/* ripple */
.ripple{
  position:absolute;border-radius:50%;
  background:rgba(255,255,255,.55);
  transform:scale(0);
  animation:ripple-anim .6s ease-out forwards;
  pointer-events:none;
}
@keyframes ripple-anim{to{transform:scale(2.6);opacity:0}}

/* card lift + glow on hover */
.svc-card,.why-card,.pillar,.region-card,.oem-pill{
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .25s, background .25s;
}
.svc-card:hover{box-shadow:0 18px 40px -20px rgba(var(--clr-primary-rgb),.45)}
.why-card:hover{box-shadow:0 14px 32px -18px rgba(var(--clr-primary-rgb),.35)}
.pillar:hover{box-shadow:inset 0 -2px 0 0 var(--clr-primary)}

/* icon pop on hover */
.svc-icon,.pillar-icon,.dc-icon{transition:transform .4s var(--ease-out), background .25s}
.svc-card:hover .svc-icon,.pillar:hover .pillar-icon{transform:rotate(-6deg) scale(1.12)}

/* shimmering link underline */
.svc-lnk{position:relative;display:inline-flex;align-items:center;gap:.3rem;transition:gap .25s}
.svc-card:hover .svc-lnk{gap:.55rem}

/* cursor glow (hero) */
.cursor-glow{
  position:absolute;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(var(--clr-primary-rgb),.16) 0%,transparent 70%);
  pointer-events:none;z-index:0;
  transform:translate(-50%,-50%);
  transition:opacity .3s;opacity:0;
}
.hero:hover .cursor-glow{opacity:1}

/* tilt wrapper */
.tilt{transform-style:preserve-3d;transition:transform .25s var(--ease-out)}

/* back to top */
.back-to-top{
  position:fixed;bottom:1.6rem;right:1.6rem;z-index:150;
  width:46px;height:46px;border-radius:50%;
  background:var(--clr-primary-dark);color:#fff;border:none;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:0 8px 24px -8px rgba(var(--clr-primary-rgb),.55);
  opacity:0;pointer-events:none;transform:translateY(16px);
  transition:opacity .3s,transform .3s,background .25s;
}
.back-to-top.show{opacity:1;pointer-events:auto;transform:translateY(0)}
.back-to-top:hover{background:var(--clr-primary-deep)}
.back-to-top svg{animation:bob 2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* typewriter cursor */
.type-cursor{display:inline-block;width:2px;background:var(--clr-primary);margin-left:2px;animation:blinkcur .9s step-end infinite}
@keyframes blinkcur{0%,100%{opacity:1}50%{opacity:0}}

/* counter pulse on completion */
@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.12)}100%{transform:scale(1)}}
.hs-num.counted{animation:pop .4s var(--ease-out)}
.lucide{display:inline-block;vertical-align:middle;width:1em;height:1em;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none}
.pillar-icon .lucide,.dc-icon .lucide{width:1.5em;height:1.5em}
/* ──────────────────────────────────────────────────────────────
   5. NAV
   ────────────────────────────────────────────────────────────── */
nav{
  position:sticky;top:0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 1.5rem;height:64px;
  background:rgba(8,14,28,0.97);
  border-bottom:1px solid rgba(var(--clr-primary-rgb),.13);
  backdrop-filter:blur(14px);
}
.logo-link{display:flex;align-items:center;height:100%}
.logo-img{height:34px;width:auto;object-fit:contain;transition:transform .3s var(--ease-out),filter .3s}
.logo-link:hover .logo-img{transform:scale(1.04)}

.nav-links{display:flex;gap:1.8rem;list-style:none}
.nav-links a{position:relative;color:rgba(255,255,255,.52);text-decoration:none;font-size:.83rem;font-weight:500;letter-spacing:.03em;transition:color .2s;padding-bottom:4px}
.nav-links a::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--clr-primary);transition:width .3s var(--ease-out)}
.nav-links a:hover{color:var(--clr-primary)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-links a.active{color:#fff}

.nav-cta{background:var(--clr-primary-dark);color:#fff;border:none;padding:.46rem 1.1rem;border-radius:5px;font-family:var(--ff-body);font-size:.83rem;font-weight:600;cursor:pointer;white-space:nowrap}
.nav-cta:hover{background:var(--clr-primary-deep);box-shadow:0 6px 18px -6px rgba(var(--clr-primary-rgb),.6)}

/* Hamburger */
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px}
.hamburger span{display:block;width:24px;height:2px;background:#fff;border-radius:2px;transition:all .3s}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Mobile nav drawer */
.mobile-menu{
  display:none;position:fixed;top:64px;left:0;right:0;bottom:0;
  background:rgba(8,14,28,0.98);z-index:199;
  flex-direction:column;align-items:center;justify-content:center;gap:2rem;
  padding:2rem;
}
.mobile-menu.open{display:flex}
.mobile-menu a{color:rgba(255,255,255,.75);text-decoration:none;font-family:var(--ff-display);font-size:2rem;letter-spacing:3px;transition:color .2s, transform .2s}
.mobile-menu a:hover{color:var(--clr-primary);transform:translateX(6px)}
.mobile-menu .mob-cta{background:var(--clr-primary-dark);color:#fff;border:none;padding:.8rem 2rem;border-radius:7px;font-family:var(--ff-body);font-size:1rem;font-weight:600;cursor:pointer;width:100%;max-width:280px}
.mobile-menu .mob-cta:hover{background:var(--clr-primary-deep)}

/* ──────────────────────────────────────────────────────────────
   6. HERO
   ────────────────────────────────────────────────────────────── */
.hero{
  position:relative;overflow:hidden;min-height:100svh;
  background:var(--clr-ink-2);
  display:flex;align-items:center;justify-content:center;
  padding:5rem 1.5rem 3rem;text-align:center;
}
.hero-bg-grid{position:absolute;inset:0;z-index:0;background-image:repeating-linear-gradient(0deg,transparent,transparent 59px,rgba(var(--clr-primary-rgb),.055) 60px),repeating-linear-gradient(90deg,transparent,transparent 59px,rgba(var(--clr-primary-rgb),.055) 60px)}
.hero-glow-r{position:absolute;right:-20%;top:-10%;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(var(--clr-primary-rgb),.17) 0%,transparent 65%);z-index:0;pointer-events:none;animation:driftR 14s ease-in-out infinite}
.hero-glow-l{position:absolute;left:-20%;bottom:-20%;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(232,160,32,.08) 0%,transparent 65%);z-index:0;pointer-events:none;animation:driftL 18s ease-in-out infinite}
@keyframes driftR{0%,100%{transform:translate(0,0)}50%{transform:translate(-30px,30px)}}
@keyframes driftL{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,-20px)}}

.hero-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;width:100%;max-width:700px}
.hero-logo-wrap{margin-bottom:1.8rem;animation:float 7s ease-in-out infinite;width:100%;max-width:380px}
.hero-logo-wrap img{width:100%;height:auto}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(var(--clr-primary-rgb),.1);border:1px solid rgba(var(--clr-primary-rgb),.25);border-radius:20px;padding:.28rem .9rem;font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--clr-primary);margin-bottom:1.4rem;min-height:1.6rem}
.hero-eyebrow::before{content:'';width:6px;height:6px;background:var(--clr-primary);border-radius:50%;animation:blink 2s infinite;flex-shrink:0}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.15}}

.hero-headline{font-family:var(--ff-heading);font-weight:600;font-size:clamp(.92rem,3.5vw,1.15rem);letter-spacing:.02em;color:rgba(255,255,255,.58);max-width:580px;line-height:1.75;margin-bottom:2rem}
.hero-headline strong{color:#fff;font-weight:700}

.hero-actions{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center;margin-bottom:2.8rem;width:100%}
.btn-p{background:var(--clr-primary-dark);color:#fff;border:none;padding:.72rem 1.5rem;border-radius:6px;font-family:var(--ff-body);font-size:.88rem;font-weight:600;cursor:pointer;text-decoration:none;display:inline-block;white-space:nowrap}
.btn-p:hover{background:var(--clr-primary-deep);transform:translateY(-3px);box-shadow:0 10px 24px -10px rgba(var(--clr-primary-rgb),.6)}
.btn-o{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.23);padding:.72rem 1.5rem;border-radius:6px;font-family:var(--ff-body);font-size:.88rem;font-weight:500;cursor:pointer;text-decoration:none;display:inline-block;white-space:nowrap}
.btn-o:hover{border-color:var(--clr-primary);color:var(--clr-primary);transform:translateY(-3px)}

.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid rgba(255,255,255,.08);border-radius:12px;overflow:hidden;width:100%}
.hs{padding:1rem .8rem;border-right:1px solid rgba(255,255,255,.08);text-align:center;transition:background .25s}
.hs:hover{background:rgba(var(--clr-primary-rgb),.06)}
.hs:last-child{border-right:none}
.hs-num{font-family:var(--ff-display);font-size:1.7rem;letter-spacing:2px;color:#fff;line-height:1}
.hs-num span{color:var(--clr-primary)}
.hs-lbl{font-size:.6rem;color:rgba(255,255,255,.35);margin-top:3px;letter-spacing:.04em;text-transform:uppercase}

/* scroll cue */
.scroll-cue{position:absolute;bottom:1.4rem;left:50%;transform:translateX(-50%);z-index:1;display:flex;flex-direction:column;align-items:center;gap:6px;color:rgba(255,255,255,.35);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;font-family:var(--ff-heading);font-weight:700}
.scroll-cue .line{width:1px;height:26px;background:linear-gradient(var(--clr-primary),transparent);animation:scrollline 2s ease-in-out infinite}
@keyframes scrollline{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}50.01%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ──────────────────────────────────────────────────────────────
   7. STRIPE / MARQUEE
   ────────────────────────────────────────────────────────────── */
.stripe{display:flex;overflow:hidden;background:var(--clr-primary-dark);padding:.78rem 0}
.stripe-inner{display:flex;gap:3rem;animation:marquee 26s linear infinite;width:max-content;align-items:center}
.stripe:hover .stripe-inner{animation-play-state:paused}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.stripe-item{display:flex;align-items:center;gap:.6rem;font-family:var(--ff-heading);font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.82);white-space:nowrap}
.sdot{width:4px;height:4px;background:rgba(255,255,255,.45);border-radius:50%;flex-shrink:0}

/* ──────────────────────────────────────────────────────────────
   8. SECTION SHARED
   ────────────────────────────────────────────────────────────── */
section{padding:3.5rem 1.5rem}
.sec-label{font-family:var(--ff-heading);font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--clr-primary-dark);margin-bottom:.45rem;display:flex;align-items:center;gap:.5rem}
.sec-label::before{content:'';width:18px;height:2px;background:var(--clr-primary-dark);display:inline-block;border-radius:2px}
h2{font-family:var(--ff-display);font-size:clamp(1.7rem,5vw,2.6rem);letter-spacing:2px;line-height:1.15;color:var(--clr-ink)}
h2 em{font-style:normal;color:var(--clr-primary-dark)}
.sec-sub{color:var(--clr-muted);font-size:.88rem;line-height:1.75;margin-top:.5rem;max-width:620px}

/* ──────────────────────────────────────────────────────────────
   9. PILLARS
   ────────────────────────────────────────────────────────────── */
.pillars{background:#fff;border-bottom:1px solid var(--clr-border)}
.pillars-grid{display:grid;grid-template-columns:repeat(2,1fr);border:1px solid var(--clr-border);border-radius:12px;overflow:hidden;margin-top:2rem}
.pillar{padding:1.4rem 1.2rem;border-right:1px solid var(--clr-border);border-bottom:1px solid var(--clr-border);position:relative}
.pillar:nth-child(2n){border-right:none}
.pillar:nth-last-child(-n+2){border-bottom:none}
.pillar:hover{background:rgba(var(--clr-primary-rgb),.03)}
.pillar-top{position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--clr-primary-dark),var(--clr-primary));opacity:0;transition:opacity .25s}
.pillar:hover .pillar-top{opacity:1}
.pillar-icon{width:40px;height:40px;border-radius:9px;background:rgba(var(--clr-primary-rgb),.09);display:flex;align-items:center;justify-content:center;margin-bottom:.8rem;font-size:1.15rem}
.pillar-title{font-family:var(--ff-heading);font-size:.95rem;font-weight:700;color:var(--clr-ink);margin-bottom:.3rem}
.pillar-text{font-size:.78rem;color:var(--clr-muted);line-height:1.65}

/* ──────────────────────────────────────────────────────────────
   10. SERVICES
   ────────────────────────────────────────────────────────────── */
.services-bg{background:var(--clr-bg)}
.services-grid{display:grid;
  /* grid-template-columns:repeat(1fr 1fr 1fr); */
  grid-template-columns:repeat(auto-fit,minmax(380px,1fr));

  gap:1rem;margin-top:2.5rem}
.svc-card{background:#fff;border:1px solid var(--clr-border);border-radius:12px;padding:1.5rem;display:flex;flex-direction:column;gap:.65rem}
.svc-card:hover{border-color:var(--clr-primary-dark);transform:translateY(-4px)}
.svc-icon{width:48px;height:48px;border-radius:10px;background:rgba(var(--clr-primary-rgb),.08);display:flex;align-items:center;justify-content:center;font-size:1.2rem}
.svc-title{font-family:var(--ff-heading);font-size:1rem;font-weight:700;color:var(--clr-ink)}
.svc-desc{font-size:.81rem;color:var(--clr-muted);line-height:1.7;flex:1}
.svc-lnk{font-size:.76rem;font-weight:600;color:var(--clr-primary-dark)}
.svc-lnk svg{transition:transform .3s var(--ease-out)}
.svc-card:hover .svc-lnk svg{transform:translateX(4px)}

/* SASE / sub-list cards */
.svc-card-header{display:flex;align-items:center;gap:.6rem;margin-bottom:.1rem}
.svc-cat-tag{font-family:var(--ff-heading);font-size:.65rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--clr-primary-dark);background:rgba(var(--clr-primary-rgb),.08);border:1px solid rgba(var(--clr-primary-rgb),.18);border-radius:4px;padding:.15rem .5rem}
.svc-card-sase{border-color:rgba(var(--clr-primary-rgb),.25)}
.svc-card-sase:hover{border-color:var(--clr-primary)}
.svc-sub-list{display:flex;flex-direction:column;gap:.38rem;margin:.1rem 0 .6rem}
.svc-sub-item{font-size:.76rem;color:var(--clr-muted);line-height:1.4;display:flex;align-items:flex-start;gap:.4rem;transition:transform .2s,color .2s}
.svc-card:hover .svc-sub-item{color:var(--clr-ink)}
.svc-sub-item:hover{transform:translateX(3px)}

/* ──────────────────────────────────────────────────────────────
   11. GLOBAL REACH
   ────────────────────────────────────────────────────────────── */
.global-sec{background:var(--clr-ink-2);color:#fff;position:relative;overflow:hidden}
.global-sec .sec-label{color:var(--clr-primary)}
.global-sec .sec-label::before{background:var(--clr-primary)}
.global-sec h2{color:#fff}
.global-sec .sec-sub{color:rgba(255,255,255,.48)}
.globe-wrap{width:100%;max-width:100%;margin:1.8rem 0 0;border-radius:14px;overflow:hidden;border:1px solid rgba(var(--clr-primary-rgb),.15);background:rgba(5,14,28,.6)}
@media(max-width:767px){.globe-wrap{margin:1.2rem 0 0}}
.global-inner{display:grid;grid-template-columns: 1fr;gap:1.5rem;margin-top:1rem;align-items:start}
@media(max-width:900px){.global-inner{grid-template-columns:1fr}}
.regions-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem}
.region-card{background:rgba(255,255,255,.04);border:1px solid rgba(var(--clr-primary-rgb),.13);border-radius:11px;padding:.9rem 1rem}
.region-card:hover{background:rgba(var(--clr-primary-rgb),.07);border-color:rgba(var(--clr-primary-rgb),.28);transform:translateY(-3px)}
.rc-region{font-family:var(--ff-heading);font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--clr-primary);margin-bottom:.25rem}
.rc-countries{font-size:.74rem;color:rgba(255,255,255,.42);line-height:1.5}
.delivery-card{background:rgba(255,255,255,.04);border:1px solid rgba(var(--clr-primary-rgb),.14);border-radius:12px;padding:1.4rem}
.delivery-card-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr; gap:.4rem 1.8rem}
@media(max-width:600px){.delivery-card-grid{grid-template-columns:1fr}}
.dc-label{font-family:var(--ff-heading);font-size:.65rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:rgba(var(--clr-primary-rgb),.7);margin-bottom:.9rem}
.dc-item{display:flex;gap:.6rem;align-items:flex-start;margin-bottom:.6rem}
.dc-item:last-child{margin-bottom:0}
.dc-icon{width:28px;height:28px;border-radius:6px;background:rgba(var(--clr-primary-rgb),.12);display:flex;align-items:center;justify-content:center;font-size:.78rem;flex-shrink:0}
.dc-item:hover .dc-icon{transform:scale(1.15) rotate(8deg)}
.dc-title{font-size:.76rem;font-weight:700;color:#fff;margin-bottom:.1rem}
.dc-text{font-size:.68rem;color:rgba(255,255,255,.5);line-height:1.5}

/* globe hotspot pulse rings reuse */
.globe-svg circle{transform-box:fill-box;transform-origin:center}

/* ──────────────────────────────────────────────────────────────
   12. PARTNERS
   ────────────────────────────────────────────────────────────── */
.partners-sec{background:#fff}
.oem-cats{display:flex;gap:.45rem;flex-wrap:wrap;margin:1.5rem 0 1.2rem}
.oem-cat{padding:.28rem .78rem;border-radius:18px;border:1px solid var(--clr-border);background:transparent;font-family:var(--ff-body);font-size:.74rem;color:var(--clr-muted);cursor:pointer;transition:all .2s}
.oem-cat:hover,.oem-cat.active{background:rgba(var(--clr-primary-rgb),.09);border-color:var(--clr-primary-dark);color:var(--clr-primary-dark)}
.oem-groups{display:flex;flex-direction:column;gap:1.5rem}
.oem-group{transition:opacity .3s,transform .3s}
.oem-group.hide{display:none}
.oem-group-label{font-family:var(--ff-heading);font-size:.65rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--clr-muted-lt);margin-bottom:.6rem;display:flex;align-items:center;gap:.6rem}
.oem-group-label::after{content:'';flex:1;height:1px;background:var(--clr-border)}
.oem-pills{display:flex;flex-wrap:wrap;gap:.45rem}
.oem-pill{display:flex;align-items:center;gap:.4rem;background:var(--clr-bg);border:1px solid var(--clr-border);border-radius:7px;padding:.38rem .82rem;font-size:.78rem;font-weight:500;color:var(--clr-ink)}
.oem-pill:hover{border-color:var(--clr-primary-dark);background:rgba(var(--clr-primary-rgb),.04);transform:translateY(-2px)}
.oem-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;display:inline-block}
.cert-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(232,160,32,.1);border:1px solid rgba(232,160,32,.28);border-radius:6px;padding:.25rem .65rem;font-size:.67rem;font-weight:600;color:#A0720A;letter-spacing:.03em;margin-top:1rem}

/* SASE highlight box */
.svc-sase{background:rgba(var(--clr-primary-rgb),.05);border:1px solid rgba(var(--clr-primary-rgb),.18);border-radius:9px;padding:1rem;margin-top:.2rem}
.sase-badge{display:inline-flex;align-items:center;gap:5px;background:rgba(var(--clr-primary-rgb),.12);border:1px solid rgba(var(--clr-primary-rgb),.25);border-radius:5px;padding:.22rem .65rem;font-size:.68rem;font-weight:700;color:var(--clr-primary-deep);letter-spacing:.06em;text-transform:uppercase;margin-bottom:.6rem}
.sase-text{font-size:.78rem;color:var(--clr-muted);line-height:1.65;margin-bottom:.75rem}
.sase-oems{display:flex;flex-wrap:wrap;gap:.4rem}
.sase-oem{font-size:.7rem;font-weight:600;border:1px solid;border-radius:4px;padding:.18rem .55rem;letter-spacing:.02em}
.sase-highlight-bar{display:flex;align-items:flex-start;gap:.75rem;background:rgba(var(--clr-primary-rgb),.06);border:1px solid rgba(var(--clr-primary-rgb),.15);border-radius:8px;padding:.9rem 1rem}
.sase-hl-icon{font-size:1.2rem;flex-shrink:0;margin-top:1px}
.sase-hl-text{font-size:.78rem;color:var(--clr-muted);line-height:1.6}
.oem-pill-sase{display:flex;flex-direction:row;align-items:center;gap:.42rem;padding:.5rem .88rem}
.oem-pill-tag{font-size:.65rem;font-weight:600;color:var(--clr-primary-deep);background:rgba(var(--clr-primary-rgb),.1);border-radius:3px;padding:.1rem .4rem;letter-spacing:.02em;white-space:nowrap}

/* ──────────────────────────────────────────────────────────────
   13. WHY
   ────────────────────────────────────────────────────────────── */
.why-sec{background:var(--clr-bg)}
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:1rem;margin-top:2.5rem}
.why-card{background:#fff;border:1px solid var(--clr-border);border-radius:12px;padding:1.3rem;display:flex;gap:.8rem;align-items:flex-start}
.why-card:hover{border-color:var(--clr-primary-dark);transform:translateY(-3px)}
.why-num{font-family:var(--ff-display);font-size:6rem;color:rgba(var(--clr-primary-rgb),.18);line-height:1;flex-shrink:0;letter-spacing:1px;transition:color .3s}
.why-card:hover .why-num{color:rgba(var(--clr-primary-rgb),.4)}
.why-title{font-family:var(--ff-heading);font-size:.93rem;font-weight:700;color:var(--clr-ink);margin-bottom:.3rem}
.why-text{font-size:.79rem;color:var(--clr-muted);line-height:1.7}

/* ──────────────────────────────────────────────────────────────
   14. PROCESS
   ────────────────────────────────────────────────────────────── */
.process-sec{background:#fff}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:2.5rem;position:relative}
.steps::before{content:'';position:absolute;top:25px;left:10%;right:10%;height:1px;background:repeating-linear-gradient(90deg,var(--clr-primary-dark) 0,var(--clr-primary-dark) 8px,transparent 8px,transparent 16px)}
.step{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 .25rem}
.step-num{width:50px;height:50px;border-radius:50%;background:#fff;border:2px solid var(--clr-primary-dark);display:flex;align-items:center;justify-content:center;font-family:var(--ff-display);font-size:1rem;letter-spacing:1px;color:var(--clr-primary-dark);margin-bottom:.85rem;position:relative;z-index:1;flex-shrink:0;transition:transform .35s var(--ease-out),background .25s,color .25s}
.step:hover .step-num{background:var(--clr-primary-dark);color:#fff;transform:scale(1.1) rotate(8deg)}
.step-title{font-family:var(--ff-heading);font-size:.75rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--clr-ink);margin-bottom:.22rem}
.step-desc{font-size:.68rem;color:var(--clr-muted);line-height:1.5}

/* ──────────────────────────────────────────────────────────────
   15. CTA
   ────────────────────────────────────────────────────────────── */
.cta-sec{background:var(--clr-primary-dark);text-align:center;padding:4rem 1.5rem;position:relative;overflow:hidden}
.cta-sec::before{content:'';position:absolute;inset:0;background-image:repeating-linear-gradient(45deg,transparent,transparent 40px,rgba(255,255,255,.03) 41px);animation:slidebg 6s linear infinite}
@keyframes slidebg{0%{background-position:0 0}100%{background-position:80px 80px}}
.cta-inner{position:relative;z-index:1}
.cta-head{font-family:var(--ff-display);font-size:clamp(1.7rem,5vw,2.8rem);letter-spacing:2px;color:#fff;margin-bottom:.7rem;line-height:1.1}
.cta-sub{color:rgba(255,255,255,.7);font-size:.9rem;max-width:420px;margin:0 auto 2rem;line-height:1.75}
.cta-row{display:flex;gap:.65rem;justify-content:center;flex-wrap:wrap}
.cta-input{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.3);border-radius:6px;padding:.72rem 1rem;color:#fff;font-family:var(--ff-body);font-size:.9rem;width:min(100%,265px);outline:none;transition:border-color .2s,background .2s}
.cta-input::placeholder{color:rgba(255,255,255,.46)}
.cta-input:focus{border-color:rgba(255,255,255,.68);background:rgba(255,255,255,.18)}
.btn-white{background:#fff;color:var(--clr-primary-deep);border:none;padding:.72rem 1.6rem;border-radius:6px;font-family:var(--ff-body);font-size:.9rem;font-weight:700;cursor:pointer}
.btn-white:hover{background:var(--clr-bg);transform:translateY(-3px);box-shadow:0 10px 24px -10px rgba(0,0,0,.35)}
.cta-email-block{display:flex;align-items:center;justify-content:center;gap:.6rem;margin-top:1.2rem;flex-wrap:wrap}
.cta-email-label{font-size:.82rem;color:rgba(255,255,255,.6)}
.cta-email-link{
  display:inline-flex;align-items:center;
  font-size:.95rem;font-weight:700;color:#fff;
  text-decoration:none;letter-spacing:.02em;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.35);
  border-radius:6px;padding:.42rem 1rem;
  transition:all .2s;
}
.cta-email-link:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.6);transform:translateY(-2px)}

/* form success toast */
.form-toast{
  position:fixed;bottom:1.6rem;left:50%;transform:translate(-50%,20px);
  background:var(--clr-ink);color:#fff;padding:.7rem 1.2rem;border-radius:8px;
  font-size:.82rem;font-family:var(--ff-body);z-index:300;
  opacity:0;pointer-events:none;transition:opacity .35s,transform .35s;
  display:flex;align-items:center;gap:.5rem;border:1px solid rgba(var(--clr-primary-rgb),.4);
}
.form-toast.show{opacity:1;transform:translate(-50%,0)}

/* ──────────────────────────────────────────────────────────────
   16. FOOTER
   ────────────────────────────────────────────────────────────── */
footer{background:var(--clr-ink-2);color:rgba(255,255,255,.4);padding:2rem 1.5rem;display:flex;flex-direction:column;align-items:center;gap:1.2rem;text-align:center;border-top:1px solid rgba(var(--clr-primary-rgb),.1)}
.footer-logo{height:30px;width:auto;object-fit:contain;opacity:.92}
.footer-links{display:flex;gap:1.2rem;flex-wrap:wrap;justify-content:center}
.footer-links a{color:rgba(255,255,255,.33);text-decoration:none;font-size:.73rem;transition:color .2s}
.footer-links a:hover{color:rgba(255,255,255,.85)}
.footer-copy{font-size:.68rem;color:rgba(255,255,255,.25);margin-top:2px}

/* ──────────────────────────────────────────────────────────────
   17. RESPONSIVE
   ────────────────────────────────────────────────────────────── */
@media(min-width:768px){
  nav{padding:0 2.5rem}
  .hamburger{display:none!important}
  .nav-links{display:flex!important}
  .nav-cta{display:block!important}
  section{padding:5rem 3rem}
  .pillars-grid{grid-template-columns:repeat(4,1fr)}
  .pillar{border-bottom:none!important}
  .pillar:nth-child(2n){border-right:1px solid var(--clr-border)!important}
  .pillar:last-child{border-right:none!important}
  .global-inner{grid-template-columns:1fr;gap:3.5rem}
  .hero-stats{grid-template-columns:repeat(4,1fr)}
  .steps::before{top:26px}
  footer{flex-direction:row;justify-content:space-between;text-align:left;padding:2.2rem 3rem}
  .logo-img{height:38px}
}
@media(max-width:767px){
  .nav-links{display:none}
  .nav-cta{display:none}
  .hamburger{display:flex}
  .hero-stats{grid-template-columns:repeat(2,1fr)}
  .hs:nth-child(2){border-right:none}
  .hs:nth-child(3){border-top:1px solid rgba(255,255,255,.08)}
  .hs:nth-child(4){border-top:1px solid rgba(255,255,255,.08);border-right:none}
  .steps{grid-template-columns:1fr 1fr;row-gap:2rem}
  .steps::before{display:none}
  .step:last-child{grid-column:span 2}
  .hero-logo-wrap{max-width:240px}
}
@media(max-width:400px){
  .hero-stats{grid-template-columns:1fr 1fr}
  .hs-num{font-size:1.4rem}
}