/* ═══════════════════════════════════════════════════════════════
   OmG MEDIACOM GROUP VENTURES
   omg-global.css  —  v1.0  LOCKED
   ─────────────────────────────────────────────────────────────
   Load on EVERY page:
     <link rel="stylesheet" href="/css/omg-global.css">
   Sub-pages use:  href="../css/omg-global.css"
═══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════
   1. DESIGN TOKENS
══════════════════════════════════════ */
:root {
  /* Palette */
  --ink:    #09090F;    /* primary dark bg */
  --navy:   #0D0D2B;    /* deep navy bg */
  --lime:   #C6FF00;    /* primary accent — Electric Lime */
  --cyan:   #00E5FF;    /* secondary accent */
  --cream:  #F4EFE6;    /* light text / light section bg */
  --mist:   #E8E4DC;    /* awards / light section bg */
  --dim:    rgba(244,239,230,.18);
  --red:    #E8192C;    /* OmG brand red — G letter ALWAYS */
  --wa:     #25D366;    /* WhatsApp green */

  /* Vertical accent colours */
  --v-retail:  #C6FF00;
  --v-media:   #00E5FF;
  --v-digital: #A259FF;
  --v-street:  #FF6B35;
  --v-pulse:   #FF3CAC;
  --v-sport:   #00FFB2;
  --v-echo:    #7B61FF;

  /* Typography */
  --ff-display: 'Syne', sans-serif;
  --ff-body:    'Space Grotesk', sans-serif;
  --ff-italic:  'Cormorant Garamond', serif;

  /* Spacing scale */
  --sp-xs:  0.5rem;
  --sp-sm:  1rem;
  --sp-md:  2rem;
  --sp-lg:  clamp(3rem,5vw,6rem);
  --sp-xl:  clamp(5rem,8vw,10rem);

  /* Section padding */
  --sec-pad: clamp(60px,8vw,120px) 5vw;
}


/* ══════════════════════════════════════
   2. RESET + BASE
══════════════════════════════════════ */
*, *::before, *::after {
  margin: 0; padding: 0;
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
  scroll-behavior: auto;
  font-size: 16px;
}

body {
  background: var(--ink);
  color: var(--cream);
  font-family: var(--ff-body);
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: hidden;
  cursor: none;
}

a { text-decoration: none; color: inherit }
img { display: block; max-width: 100% }
button { cursor: pointer; font-family: inherit }

/* ──────────────────────────────────────────────────────────────
   TYPOGRAPHY RULES — WCAG AA minimum standards
   Dark bg (#09090F / #0D0D2B / #000):
     Body:    min 16px · min color rgba(255,255,255,0.80)
     Labels:  min 13px · min color rgba(255,255,255,0.72)
   Light bg (#F4EFE6 / #E8E4DC):
     Body:    min 16px · min color #444 (contrast 6.1:1)
─────────────────────────────────────────────────────────────── */
p, li, td, blockquote { font-size: 1rem; line-height: 1.7 }

/* Section eyebrow labels */
.label {
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.35em; text-transform: uppercase;
  display: flex; align-items: center; gap: 0.7rem;
}
.label::before {
  content: ''; display: block;
  width: 22px; height: 1.5px;
  background: currentColor; flex-shrink: 0;
}
.label-lime  { color: var(--lime) }
.label-navy  { color: var(--navy) }
.label-cream { color: var(--cream) }


/* ══════════════════════════════════════
   3. OmG BRAND MARK
   Om  → white on dark, navy on light
   G   → #E8192C ALWAYS
══════════════════════════════════════ */
.omg            { color: #fff !important; font-style: normal }
.omg .g         { color: #E8192C !important }

/* Light-bg overrides */
.bg-cream .omg,
.bg-mist .omg,
#manifesto .omg,
#awards .omg,
footer.light .omg { color: #0D0D2B !important }

.bg-cream .omg .g,
.bg-mist .omg .g,
#manifesto .omg .g,
#awards .omg .g,
footer.light .omg .g { color: #E8192C !important }

/* Ghost / watermark usage */
.omg-ghost { color: rgba(9,9,15,.04) !important }
.omg-ghost .g { color: rgba(9,9,15,.04) !important }


/* ══════════════════════════════════════
   4. CUSTOM CURSOR
══════════════════════════════════════ */
#cursor-dot {
  position: fixed; z-index: 9999; pointer-events: none;
  width: 7px; height: 7px;
  background: var(--lime); border-radius: 50%;
  transform: translate(-50%,-50%);
  mix-blend-mode: difference;
}
#cursor-ghost {
  position: fixed; z-index: 9998; pointer-events: none;
  width: 36px; height: 36px;
  border: 1px solid rgba(198,255,0,.4);
  border-radius: 50%;
  transform: translate(-50%,-50%);
  transition: width .35s, height .35s, border-color .35s;
}
body.hl #cursor-ghost { width: 52px; height: 52px; border-color: var(--cyan) }

@media (hover: none) {
  body { cursor: auto }
  #cursor-dot, #cursor-ghost { display: none }
}


/* ══════════════════════════════════════
   5. PAGE LOADER
══════════════════════════════════════ */
#ldr {
  position: fixed; inset: 0; z-index: 9000;
  background: var(--ink);
  display: grid; place-items: center;
  overflow: hidden;
}
.ldr-stripe {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 0;
  background: linear-gradient(135deg, var(--lime) 0%, var(--cyan) 100%);
  z-index: 0;
}
.ldr-n {
  font-family: var(--ff-display);
  font-size: clamp(9rem,24vw,22rem); font-weight: 800;
  color: var(--cream); letter-spacing: -.04em; line-height: 1;
  position: relative; z-index: 1;
  mix-blend-mode: difference;
}
.ldr-tag {
  position: absolute; bottom: 3.5rem; left: 5vw;
  font-size: 0.72rem; letter-spacing: .45em; text-transform: uppercase;
  color: rgba(244,239,230,.65);
}


/* ══════════════════════════════════════
   6. NAVIGATION
══════════════════════════════════════ */
nav#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 400;
  padding: 1.2rem 4vw;
  display: flex; justify-content: space-between; align-items: center;
  background: rgba(9,9,15,0);
  backdrop-filter: blur(0px);
  border-bottom: 1px solid transparent;
  transition: background .4s, padding .4s, backdrop-filter .4s, border-color .4s;
}
nav#nav.solid {
  background: rgba(9,9,15,.97);
  backdrop-filter: blur(24px);
  border-bottom-color: rgba(198,255,0,.08);
  padding: .9rem 4vw;
}

/* Logo */
.nav-logo {
  display: flex; align-items: center; gap: .7rem;
  text-decoration: none; color: #fff; flex-shrink: 0;
}
.nav-logo img { height: 36px; width: auto; object-fit: contain }
.nav-logo-text {
  font-family: var(--ff-display);
  font-size: 1.1rem; font-weight: 800; letter-spacing: -.01em;
}

/* Desktop links */
.nav-links { display: flex; align-items: center; gap: 0; list-style: none }
.nav-links li { position: relative }
.nav-links a {
  font-size: .6rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.78); padding: .5rem .9rem;
  display: block; transition: color .2s; white-space: nowrap;
}
.nav-links a:hover { color: #fff }
.nav-links a.active { color: var(--lime) }

/* Dropdown */
.nav-dd > a::after { content: ' ▾'; font-size: .45rem; opacity: .6 }
.nav-drop {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  padding-top: 18px;
  min-width: 220px;
  opacity: 0; pointer-events: none;
  transition: opacity .22s, visibility .22s;
  visibility: hidden;
  z-index: 100;
}
.nav-drop-inner,
.nav-drop:not(:has(.nav-drop-inner)) {
  background: rgba(9,9,15,.98); border: 1px solid rgba(198,255,0,.12);
  border-radius: 4px; padding: .5rem 0;
  backdrop-filter: blur(20px); box-shadow: 0 8px 32px rgba(0,0,0,.6);
}
.nav-dd:hover .nav-drop { opacity: 1; pointer-events: all; visibility: visible }
.nav-drop a,
.nav-drop-inner a {
  display: flex; align-items: center; gap: .7rem;
  padding: .6rem 1.2rem; font-size: .65rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.82); transition: color .2s, background .2s;
}
.nav-drop a:hover,
.nav-drop-inner a:hover { color: #fff; background: rgba(198,255,0,.06) }
.nav-drop a img,
.nav-drop-inner a img {
  width: 22px; height: 22px; object-fit: contain;
  filter: none; border-radius: 3px;
}
.nav-drop-group a { flex-direction: column; align-items: flex-start; gap: .1rem; padding: .7rem 1.2rem }
.nav-drop-group a strong { font-size: .65rem; color: rgba(255,255,255,.75) }
.nav-drop-group a em {
  font-size: .6rem; font-style: normal;
  color: rgba(255,255,255,.65); letter-spacing: .08em;
}

/* Special nav items */
.nav-retail  { color: var(--lime) !important; font-weight: 700 !important }
.nav-wa      { display: flex !important; align-items: center; gap: .35rem; color: var(--wa) !important }
.nav-founder { color: rgba(198,255,0,.8) !important }
.nav-cta {
  color: var(--ink) !important; background: var(--lime) !important;
  padding: .55rem 1.4rem !important; border-radius: 2px;
  font-weight: 700 !important; margin-left: .3rem;
  transition: background .2s !important;
}
.nav-cta:hover { background: var(--cyan) !important }

/* Hamburger */
.nav-ham {
  display: none; flex-direction: column; gap: 4px;
  background: none; border: none; padding: 4px;
}
.nav-ham span {
  display: block; width: 22px; height: 2px;
  background: var(--cream); border-radius: 2px;
  transition: transform .3s, opacity .3s;
}

/* Mobile drawer */
.mob-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.6);
  z-index: 590; opacity: 0; pointer-events: none;
  transition: opacity .3s;
}
.mob-overlay.open { opacity: 1; pointer-events: all }

.mob-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(300px,85vw);
  background: rgba(6,6,18,.98); backdrop-filter: blur(24px);
  border-left: 1px solid rgba(198,255,0,.1);
  z-index: 600; padding: 2rem 1.5rem;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.16,1,.3,1);
  overflow-y: auto;
}
.mob-drawer.open { transform: translateX(0) }

.mob-close {
  background: none; border: 1px solid rgba(255,255,255,.1);
  color: var(--cream); width: 30px; height: 30px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: .8rem; margin-bottom: 2rem;
  transition: border-color .2s;
}
.mob-close:hover { border-color: var(--lime) }

.mob-links { list-style: none; display: flex; flex-direction: column; gap: 0 }
.mob-links a {
  display: block; padding: .75rem 0;
  font-size: .75rem; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase;
  color: rgba(255,255,255,.82);
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: color .2s;
}
.mob-links a:hover { color: var(--lime) }
.mob-links .mob-wa    { color: var(--wa) !important; display: flex; align-items: center; gap: .5rem }
.mob-links .mob-cta-talk {
  margin-top: 1.5rem; background: var(--lime); color: var(--ink) !important;
  padding: .75rem 1.5rem; display: block; text-align: center;
  font-weight: 700 !important; border-bottom: none !important; border-radius: 2px;
}

/* Sub-page drawer — all links use ../ prefix (handled by JS) */


/* ══════════════════════════════════════
   7. SHARED BUTTONS
══════════════════════════════════════ */
.btn-lime {
  font-family: var(--ff-body); font-size: .62rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  padding: .75rem 2rem; background: var(--lime); color: var(--ink);
  border-radius: 2px; display: inline-block;
  transition: background .2s, transform .2s;
}
.btn-lime:hover { background: var(--cyan); transform: translateY(-2px) }

.btn-cyan {
  font-family: var(--ff-body); font-size: .62rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  padding: .75rem 2rem; background: var(--cyan); color: var(--ink);
  border-radius: 2px; display: inline-block;
  transition: background .2s, transform .2s;
}
.btn-cyan:hover { background: var(--lime); transform: translateY(-2px) }

.btn-outline {
  font-family: var(--ff-body); font-size: .62rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  padding: .72rem 1.9rem;
  border: 1.5px solid rgba(198,255,0,.5); color: var(--lime);
  border-radius: 2px; display: inline-block;
  transition: background .2s, border-color .2s, color .2s;
}
.btn-outline:hover { background: var(--lime); color: var(--ink); border-color: var(--lime) }

.btn-wa {
  font-size: .62rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  padding: .75rem 1.6rem; background: var(--wa); color: #fff;
  border-radius: 2px; display: inline-flex; align-items: center; gap: .5rem;
  transition: background .2s;
}
.btn-wa:hover { background: #1da851 }

.btn-cta {
  font-family: var(--ff-body); font-size: .62rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  padding: .9rem 2.8rem;
  background: linear-gradient(135deg, var(--lime) 0%, var(--cyan) 100%);
  color: var(--ink); border-radius: 2px; display: inline-block;
  transition: opacity .2s, transform .2s;
}
.btn-cta:hover { opacity: .9; transform: translateY(-2px) }


/* ══════════════════════════════════════
   8. PAGE HERO — video + type (index.html)
══════════════════════════════════════ */
#hero {
  height: 100vh; position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
}
#hvid {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; z-index: 0;
}
.h-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom,
    rgba(9,9,15,.4) 0%, rgba(9,9,15,.15) 45%,
    rgba(9,9,15,.72) 80%, rgba(9,9,15,1) 100%);
}
.h-type { position: relative; z-index: 2; padding: 0 5vw .5rem }
.h-type h1 {
  font-family: var(--ff-display);
  font-size: clamp(2.8rem,6.5vw,7.5rem); font-weight: 800;
  line-height: .86; letter-spacing: -.03em;
}
.h-type h1 .ln { display: block; overflow: hidden }
.h-type h1 .wd { display: block; transform: translateY(110%) }
.h-type h1 .wd.lime  { color: var(--lime) }
.h-type h1 .wd.ghost { -webkit-text-stroke: 1.5px rgba(244,239,230,.78); color: transparent }

.h-floor {
  position: relative; z-index: 2;
  display: flex; justify-content: space-between; align-items: flex-end;
  padding: 1.8rem 5vw; border-top: 1px solid rgba(244,239,230,.08);
  flex-wrap: wrap; gap: 1.2rem;
}
.h-sub {
  font-size: .65rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.82); max-width: 280px; line-height: 1.7;
}
.h-counters { display: flex; gap: 4vw }
.hc { display: flex; flex-direction: column; gap: .15rem }
.hc-n {
  font-family: var(--ff-display);
  font-size: clamp(1.5rem,2.8vw,2.6rem); font-weight: 800; line-height: 1; letter-spacing: -.03em;
}
.hc-l {
  font-size: .6rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.80);
}
.h-actions { display: flex; gap: .8rem; align-items: center }

/* Sub-page hero (no video — static full-bleed with overlay) */
.page-hero {
  min-height: 55vh; position: relative; overflow: hidden;
  display: flex; align-items: flex-end;
  padding: var(--sec-pad);
  background: var(--navy);
}
.page-hero::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg,
    rgba(198,255,0,.06) 0%, rgba(0,229,255,.04) 60%, transparent 100%);
}
.page-hero-edge {
  position: absolute; top: 0; left: 0; bottom: 0;
  width: 3px;
}
.page-hero-content { position: relative; z-index: 2 }
.page-hero-label {
  font-size: .72rem; font-weight: 700; letter-spacing: .4em; text-transform: uppercase;
  margin-bottom: 1.2rem;
}
.page-hero-h {
  font-family: var(--ff-display);
  font-size: clamp(2.5rem,6vw,7rem); font-weight: 800;
  line-height: .84; letter-spacing: -.04em; color: var(--cream);
}
.page-hero-h em { font-style: normal; color: var(--lime) }
.page-hero-sub {
  font-size: .95rem; color: rgba(255,255,255,.72); max-width: 500px;
  line-height: 1.8; margin-top: 1.5rem;
}


/* ══════════════════════════════════════
   9. TICKER
══════════════════════════════════════ */
.ticker {
  overflow: hidden; background: rgba(6,6,12,.92);
  border-top: 1px solid rgba(198,255,0,.06);
  padding: .8rem 0; position: relative; z-index: 2;
}
.ticker-t { display: flex; animation: tkroll 20s linear infinite; width: max-content }
.ticker-i {
  font-size: .65rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase;
  color: rgba(255,255,255,.62); padding: 0 3rem; white-space: nowrap;
  display: flex; align-items: center; gap: 2rem;
}
.ticker-i::after { content: '▲'; color: var(--lime); font-size: .3rem }
@keyframes tkroll { from { transform: translateX(0) } to { transform: translateX(-50%) } }


/* ══════════════════════════════════════
   10. MANIFESTO SECTION
══════════════════════════════════════ */
#manifesto {
  background: var(--cream); padding: var(--sec-pad);
  position: relative; overflow: hidden;
}
.mfst-ghost {
  position: absolute; font-family: var(--ff-display);
  font-size: 20vw; font-weight: 800;
  color: rgba(9,9,15,.04); right: -3vw; top: 50%;
  transform: translateY(-50%); line-height: 1;
  pointer-events: none; letter-spacing: -.04em;
}
.mfst-tag {
  font-size: .72rem; font-weight: 700; letter-spacing: .35em; text-transform: uppercase;
  color: var(--navy); display: flex; align-items: center; gap: .8rem; margin-bottom: 3rem;
}
.mfst-tag::before { content: ''; display: block; width: 28px; height: 1px; background: var(--navy) }
#mfst-words {
  font-family: var(--ff-display); font-size: clamp(2rem,4vw,5rem);
  font-weight: 800; line-height: .9; letter-spacing: -.03em;
}
.mw { display: inline-block; color: rgba(13,13,43,.1); margin-right: .2em }
.mfst-bottom {
  margin-top: clamp(40px,7vw,100px); padding-top: clamp(30px,4vw,60px);
  border-top: 1px solid rgba(9,9,15,.08);
  display: flex; justify-content: space-between; align-items: flex-end;
  flex-wrap: wrap; gap: 3rem;
}
.mfst-body { font-size: 1rem; color: #555; line-height: 1.9; max-width: 420px }
.mfst-body strong { color: var(--navy) }
.mfst-kpis { display: flex; gap: 4rem }
.mk-n {
  font-family: var(--ff-display); font-size: 2.2rem; font-weight: 800;
  color: var(--navy); line-height: 1; letter-spacing: -.04em;
}
.mk-l {
  font-size: .55rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: #888; margin-top: .25rem;
}
.mfst-quote {
  font-family: var(--ff-italic); font-size: clamp(1.1rem,2.2vw,1.6rem);
  color: #666; line-height: 1.65; max-width: 360px; font-style: italic;
}


/* ══════════════════════════════════════
   11. VERTICALS GRID
══════════════════════════════════════ */
#verticals { background: var(--navy); padding: var(--sec-pad) }
.vt-head { margin-bottom: clamp(32px,4vw,60px) }
.vt-head-label {
  font-size: .75rem; font-weight: 700; letter-spacing: .4em; text-transform: uppercase;
  color: var(--lime); margin-bottom: 1rem;
}
.vt-head-h {
  font-family: var(--ff-display); font-size: clamp(2rem,5vw,5.5rem);
  font-weight: 800; line-height: .88; letter-spacing: -.03em; color: var(--cream);
}
.vt-head-h em { font-style: normal; color: var(--lime) }
.vt-head-sub { font-size: .9rem; color: rgba(255,255,255,.72); margin-top: .8rem; max-width: 480px; line-height: 1.7 }

.vgrid {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 1px; background: rgba(198,255,0,.06);
}
.vcard {
  background: var(--navy); padding: 2rem 1.8rem;
  position: relative; overflow: hidden;
  transition: background .35s;
  display: flex; flex-direction: column; min-height: 260px; cursor: default;
}
.vcard:hover { background: rgba(198,255,0,.04) }
.vcard-edge {
  position: absolute; top: 0; left: 0; width: 2px; height: 0;
  transition: height .4s cubic-bezier(.16,1,.3,1);
}
.vcard:hover .vcard-edge { height: 100% }
.vcard-num {
  font-family: var(--ff-display); font-size: 4rem; font-weight: 800;
  color: rgba(198,255,0,.05); line-height: 1; letter-spacing: -.04em;
  margin-bottom: 1rem; transition: color .3s;
}
.vcard:hover .vcard-num { color: rgba(198,255,0,.1) }
.vcard-tag {
  font-size: .62rem; font-weight: 700; letter-spacing: .25em; text-transform: uppercase;
  margin-bottom: .7rem; display: flex; align-items: center; gap: .5rem;
}
.vcard-tag::before { content: ''; display: block; width: 14px; height: 1.5px; background: currentColor; flex-shrink: 0 }
.vcard-name {
  font-family: var(--ff-display); font-size: 1.35rem; font-weight: 800;
  letter-spacing: -.02em; color: var(--cream); line-height: 1.05; margin-bottom: .9rem; flex: 1;
}
/* .vcard-logo — replaced by .vlogo-box component */
.vcard-logo { display: none }

/* ══ VERTICAL LOGO BOX — LOCKED
   Reference: retail-iq.html hero logo style
   Homepage vcards → .vlogo-box        : 72×32px box, 18px logo
   Page heroes     → .vlogo-box--hero  : 130×82px box, 54px logo
══════════════════════════════════════════════════ */
.vlogo-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 52px;
  background: rgba(9,9,15,.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 4px;
  margin-bottom: .9rem;
  align-self: flex-start;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 2px 12px rgba(0,0,0,.5);
  overflow: hidden;
  transition: box-shadow .3s;
}
.vcard:hover .vlogo-box {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.15), 0 4px 20px rgba(0,0,0,.7);
}
.vlogo-box img {
  display: block;
  width: auto;
  height: 32px;
  max-width: 90px;
  max-height: 32px;
  object-fit: contain;
  filter: none !important;
  position: relative;
  z-index: 1;
}

/* Hero variant — retail-iq.html reference */
.vlogo-box--hero {
  width: 130px;
  height: 82px;
  border-radius: 6px;
  margin-bottom: 0;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    0 4px 28px rgba(0,0,0,.7),
    0 0 0 1px rgba(198,255,0,.06);
}
.vlogo-box--hero img {
  height: 54px;
  max-height: 54px;
  max-width: 110px;
}

/* 4-edge animated border runners */
.vlb-t, .vlb-b, .vlb-r, .vlb-l {
  position: absolute;
  background: var(--v-accent, #C6FF00);
  pointer-events: none;
  z-index: 2;
}
.vlb-t { top:0; left:0; height:1.5px; width:45%; animation:vlbRunH 2s linear infinite; }
.vlb-b { bottom:0; right:0; height:1.5px; width:45%; animation:vlbRunH 2s linear infinite reverse; }
.vlb-r { right:0; top:0; width:1.5px; height:45%; animation:vlbRunV 2s linear infinite; animation-delay:.5s; }
.vlb-l { left:0; bottom:0; width:1.5px; height:45%; animation:vlbRunV 2s linear infinite reverse; animation-delay:.5s; }
@keyframes vlbRunH { 0%{transform:translateX(-100%)} 100%{transform:translateX(300%)} }
@keyframes vlbRunV { 0%{transform:translateY(-100%)} 100%{transform:translateY(300%)} }
.vcard-desc {
  font-size: .82rem; color: rgba(255,255,255,.80); line-height: 1.7;
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .4s ease, opacity .3s;
}
.vcard:hover .vcard-desc { max-height: 140px; opacity: 1 }
.vcard-link {
  font-size: .55rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: .3rem;
  margin-top: .8rem; opacity: 0; transform: translateY(4px);
  transition: opacity .25s, transform .25s;
}
.vcard-link::after { content: '→' }
.vcard:hover .vcard-link { opacity: 1; transform: translateY(0) }
.vcard-soon {
  opacity: .3; background: rgba(198,255,0,.02) !important;
  align-items: center; justify-content: center; text-align: center;
}
.vcard-soon:hover { opacity: .4 }
.vsoon-ico { font-size: 2rem; margin-bottom: .8rem }
.vsoon-title {
  font-family: var(--ff-display); font-size: 1rem; font-weight: 800;
  letter-spacing: .05em; color: var(--cream); margin-bottom: .4rem;
}
.vsoon-sub {
  font-size: .6rem; font-weight: 600; letter-spacing: .25em; text-transform: uppercase;
  color: var(--lime); opacity: .6;
}


/* ══════════════════════════════════════
   12. METHODOLOGY
══════════════════════════════════════ */
#method { background: var(--ink); padding: var(--sec-pad); overflow: hidden }
.mth-top {
  display: flex; justify-content: space-between; align-items: flex-end;
  flex-wrap: wrap; gap: 2rem;
  margin-bottom: clamp(50px,8vw,120px);
  padding-bottom: clamp(30px,4vw,60px);
  border-bottom: 1px solid rgba(198,255,0,.08);
}
.mth-h {
  font-family: var(--ff-display); font-size: clamp(2.2rem,4.5vw,5.5rem);
  font-weight: 800; line-height: .84; letter-spacing: -.04em; color: var(--cream);
}
.mth-h em { font-style: normal; color: var(--lime) }
.mth-sub { font-size: .92rem; color: rgba(255,255,255,.75); line-height: 1.8; max-width: 260px }
.mrow {
  display: flex; align-items: baseline;
  padding: clamp(1.5rem,3vw,3.5rem) 0;
  border-top: 1px solid rgba(198,255,0,.06);
  gap: 3vw; position: relative; cursor: default;
}
.mrow::after {
  content: ''; position: absolute; bottom: 0; left: 0;
  width: 0; height: 1px;
  background: linear-gradient(90deg, var(--lime), var(--cyan));
  transition: width .8s ease;
}
.mrow:hover::after { width: 100% }
.mrow:last-child { border-bottom: 1px solid rgba(198,255,0,.06) }
.mr-num {
  font-family: var(--ff-display); font-size: clamp(3rem,6vw,7rem); font-weight: 800;
  color: rgba(198,255,0,.05); line-height: 1; letter-spacing: -.04em;
  flex-shrink: 0; width: 18vw; transition: color .4s;
}
.mrow:hover .mr-num { color: rgba(198,255,0,.1) }
.mr-step {
  font-size: .58rem; font-weight: 700; letter-spacing: .4em; text-transform: uppercase;
  color: var(--lime); flex-shrink: 0; width: 12vw; padding-top: .4rem;
}
.mr-title {
  font-family: var(--ff-display); font-size: clamp(1.4rem,2.5vw,3rem); font-weight: 800;
  color: var(--cream); letter-spacing: -.03em; line-height: .9; flex-shrink: 0; width: 22vw;
}
.mr-desc { font-size: .9rem; color: #b0b0b0; line-height: 1.8; flex: 1 }
.mrow:hover .mr-desc { color: #c8c8c8 }


/* ══════════════════════════════════════
   13. CLIENTS MARQUEE
══════════════════════════════════════ */
#clients { background: #06060D; padding: var(--sec-pad) }
#clients { padding: clamp(70px,8vw,130px) 0 }
.cl-top { padding: 0 5vw; margin-bottom: clamp(30px,4vw,60px) }
.cl-h {
  font-family: var(--ff-display); font-size: clamp(1.8rem,3.8vw,4.8rem);
  font-weight: 800; color: var(--cream); line-height: .85; letter-spacing: -.03em;
}
.cl-h em { color: var(--lime); font-style: normal }
.cl-sub { font-size: .9rem; color: rgba(255,255,255,.75); margin-top: 1rem }
.cl-mask {
  overflow: hidden;
  mask-image: linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
  margin-bottom: 10px;
}
.cl-row { display: flex; gap: 10px; width: max-content; animation: clroll 38s linear infinite }
.cl-row.rev { animation-direction: reverse; animation-duration: 28s }
@keyframes clroll { from { transform: translateX(0) } to { transform: translateX(-50%) } }
.cl-item {
  width: 82px; height: 82px; min-width: 82px; border-radius: 50%;
  background: #FFFFFF; border: 1px solid rgba(0,0,0,.06);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; flex-shrink: 0; transition: border-color .3s, transform .3s;
}
.cl-item:hover { border-color: rgba(198,255,0,.5); transform: scale(1.08) }
.cl-item img {
  width: 58px; height: 58px; object-fit: contain;
  transition: transform .3s;
}
.cl-item:hover img { transform: scale(1.06) }
.cl-item.cl-fail { display: none }


/* ══════════════════════════════════════
   14. AWARDS
══════════════════════════════════════ */
#awards { background: var(--mist); padding: clamp(70px,8vw,130px) 0; overflow: hidden }
.aw-top { padding: 0 5vw; margin-bottom: clamp(30px,4vw,60px) }
.aw-h {
  font-family: var(--ff-display); font-size: clamp(1.8rem,3.8vw,4.8rem);
  font-weight: 800; color: var(--navy); line-height: .85; letter-spacing: -.03em;
}
.aw-h em { color: var(--ink); font-style: normal }
.aw-belt { overflow: hidden; border-top: 1px solid rgba(9,9,15,.07) }
.aw-track { display: flex; width: max-content; animation: awroll 30s linear infinite }
.aw-track:hover { animation-play-state: paused }
@keyframes awroll { from { transform: translateX(0) } to { transform: translateX(-50%) } }
.aw-item {
  display: flex; flex-direction: column;
  padding: clamp(2rem,3vw,4rem);
  border-right: 1px solid rgba(9,9,15,.07);
  min-width: 260px; max-width: 295px; flex-shrink: 0;
  transition: background .3s; cursor: default;
}
.aw-item:hover { background: rgba(9,9,15,.04) }
.aw-ico {
  width: 42px; height: 42px; margin-bottom: 1.2rem;
  display: flex; align-items: center; justify-content: center;
  background: rgba(9,9,15,.06); border-radius: 10px;
}
.aw-ico svg { width: 22px; height: 22px }
.aw-name {
  font-family: var(--ff-display); font-size: 1.1rem; font-weight: 700;
  color: var(--navy); margin-bottom: .5rem; letter-spacing: -.02em; line-height: 1.1;
}
.aw-desc { font-size: .82rem; color: #666; line-height: 1.55 }


/* ══════════════════════════════════════
   15. NETWORK / MAP SECTION
══════════════════════════════════════ */
#network {
  min-height: 100vh; background: #04040C;
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: center; overflow: hidden; position: relative;
}
.net-left-col { padding: clamp(60px,8vw,120px) 0 clamp(60px,8vw,120px) 5vw; position: relative; z-index: 2 }
.net-right-col { position: relative; height: 100vh; min-height: 500px; background: transparent }
#india-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block }
.net-over { display: none }
.net-panel { max-width: 440px }
.net-tag {
  font-size: .75rem; font-weight: 700; letter-spacing: .35em; text-transform: uppercase;
  color: var(--lime); display: flex; align-items: center; gap: .8rem; margin-bottom: 2rem;
}
.net-tag::before { content: ''; display: block; width: 24px; height: 1px; background: var(--lime) }
.net-h {
  font-family: var(--ff-display); font-size: clamp(2rem,4vw,5rem); font-weight: 800;
  line-height: .84; letter-spacing: -.04em; color: var(--cream); margin-bottom: 2.5rem;
}
.net-h em { font-style: normal; color: var(--lime) }
.net-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 2.5rem }
.nk-n {
  font-family: var(--ff-display); font-size: 1.8rem; font-weight: 800;
  color: var(--cream); line-height: 1; letter-spacing: -.03em;
}
.nk-n span { color: var(--lime) }
.nk-l { font-size: .72rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.72); margin-top: .2rem }
.net-zones { display: flex; flex-direction: column; gap: .3rem }
.nzone {
  display: flex; align-items: baseline; gap: .8rem; padding: .4rem 0;
  border-bottom: 1px solid rgba(198,255,0,.05); transition: all .2s; cursor: default;
}
.nzone:last-child { border-bottom: none }
.nzone:hover .nz-n { color: var(--lime) }
.nzone:hover .nz-c { color: rgba(255,255,255,.75) }
.nz-n {
  font-family: var(--ff-display); font-size: .95rem; font-weight: 700;
  letter-spacing: .1em; color: rgba(255,255,255,.70); min-width: 65px; transition: color .2s;
}
.nz-c { font-size: .85rem; color: rgba(255,255,255,.70); transition: color .2s; line-height: 1.5 }


/* ══════════════════════════════════════
   16. CTA SECTION
══════════════════════════════════════ */
#cta {
  height: 100vh; position: relative; overflow: hidden;
  background: var(--navy); display: flex; flex-direction: column;
  justify-content: flex-end; padding: 5vw;
}
#cta-vid {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .06; mix-blend-mode: screen;
}
.cta-sweep {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(198,255,0,.1) 0%, rgba(0,229,255,.08) 50%, transparent 100%);
}
.cta-inner { position: relative; z-index: 1 }
.cta-tag {
  font-family: var(--ff-display); font-size: .88rem; font-weight: 700;
  letter-spacing: .1em; color: rgba(198,255,0,.65); margin-bottom: 1.5rem;
}
.cta-h {
  font-family: var(--ff-display); font-size: clamp(2.5rem,6vw,7rem); font-weight: 800;
  line-height: .82; letter-spacing: -.04em; color: var(--cream); margin-bottom: 4vw;
}
.cta-h em { font-style: normal; color: var(--lime) }
.cta-floor {
  display: flex; justify-content: space-between; align-items: flex-end;
  flex-wrap: wrap; gap: 2rem; position: relative; z-index: 1;
}
.cta-sub { font-size: .95rem; color: rgba(255,255,255,.78); max-width: 340px; line-height: 1.8 }


/* ══════════════════════════════════════
   17. FOOTER
══════════════════════════════════════ */
footer {
  background: #000; padding: 6rem 5vw 3rem;
  border-top: 1px solid rgba(198,255,0,.05);
}
.ft-g {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 5rem; padding-bottom: 4rem;
  border-bottom: 1px solid rgba(198,255,0,.05);
}
.ft-logo {
  font-family: var(--ff-display); font-size: 1.15rem; font-weight: 800;
  letter-spacing: -.02em; color: var(--cream); display: block; margin-bottom: 1.2rem;
}
.ft-about { font-size: 0.87rem; color: #aaa; line-height: 1.8; max-width: 270px }
.ft-certs { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1.5rem }
.ft-cert {
  font-size: .65rem; letter-spacing: .12em; text-transform: uppercase;
  color: #999; border: 1px solid rgba(198,255,0,.18); padding: .3rem .7rem;
}
.ft-col h6 {
  font-size: .72rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase;
  color: var(--lime); margin-bottom: 1.5rem;
}
.ft-col ul { list-style: none; display: flex; flex-direction: column; gap: .55rem }
.ft-col a { font-size: .72rem; color: #888; line-height: 1.4; transition: color .2s }
.ft-col a:hover { color: var(--cream) }
.ft-bot {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 2.5rem; flex-wrap: wrap; gap: 1rem;
}
.ft-copy { font-size: 0.75rem; color: #777 }
.ft-copy > span:not(.omg) { color: rgba(198,255,0,.35) }
.ft-copy .omg   { color: #fff !important; opacity: .4 }
.ft-copy .omg .g { color: #E8192C !important; opacity: 1 }
.ft-legal { color: #777; transition: color .2s }
.ft-legal:hover { color: var(--lime) }


/* ══════════════════════════════════════
   18. SHARED SECTION UTILITIES
══════════════════════════════════════ */
/* Generic section heading pattern */
.sec-h {
  font-family: var(--ff-display); font-size: clamp(2rem,4.5vw,5.5rem);
  font-weight: 800; line-height: .86; letter-spacing: -.03em; color: var(--cream);
}
.sec-h em { font-style: normal; color: var(--lime) }
.sec-h.dark { color: var(--navy) }

/* Divider lines */
.rule-lime { border: none; height: 1px; background: rgba(198,255,0,.15); margin: 0 }
.rule-dim  { border: none; height: 1px; background: rgba(255,255,255,.06); margin: 0 }

/* Scroll reveal — elements start invisible, JS adds .vis */
.reveal {
  opacity: 0; transform: translateY(32px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.vis { opacity: 1; transform: none }
.reveal-left { opacity: 0; transform: translateX(-40px); transition: opacity .7s ease, transform .7s ease }
.reveal-left.vis { opacity: 1; transform: none }
.reveal-right { opacity: 0; transform: translateX(40px); transition: opacity .7s ease, transform .7s ease }
.reveal-right.vis { opacity: 1; transform: none }

/* Floating WhatsApp button */
.wa-float {
  position: fixed; bottom: 2rem; right: 2rem; z-index: 500;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--wa); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 24px rgba(37,211,102,.35);
  transition: transform .2s, box-shadow .2s;
}
.wa-float:hover { transform: scale(1.08); box-shadow: 0 6px 32px rgba(37,211,102,.5) }
.wa-float svg { width: 28px; height: 28px }

/* Page transition overlay */
#page-transition {
  position: fixed; inset: 0; z-index: 8999;
  background: var(--lime);
  transform: scaleX(0); transform-origin: right;
  pointer-events: none;
}


/* ══════════════════════════════════════
   19. RESPONSIVE
══════════════════════════════════════ */
@media(max-width:1100px) {
  .vgrid { grid-template-columns: repeat(2,1fr) }
}

@media(max-width:1000px) {
  .nav-links .hide-md { display: none }
  .ft-g { grid-template-columns: 1fr 1fr; gap: 3rem }
}

@media(max-width:820px) {
  .nav-links { display: none }
  .nav-ham { display: flex }
}

@media(max-width:900px) {
  .h-floor { flex-direction: column; align-items: flex-start }
  .mfst-bottom { flex-direction: column }
  .mrow { flex-direction: column; gap: .8rem }
  .mr-num, .mr-step, .mr-title { width: auto }
  #network { grid-template-columns: 1fr }
  .net-right-col { height: 70vw; min-height: 300px }
  .net-left-col { padding: 3rem 5vw 0 }
}

@media(max-width:640px) {
  .vgrid { grid-template-columns: 1fr }
  .vcard { min-height: auto }
  .vcard-desc { max-height: none !important; opacity: 1 !important }
  .vcard-link { opacity: 1 !important; transform: none !important }
  .ft-g { grid-template-columns: 1fr }
  .h-counters { gap: 6vw }
  .mfst-kpis { gap: 2rem }
  .net-grid { grid-template-columns: 1fr 1fr }
  .page-hero { min-height: 45vh }
}