/* ═══════════════════════════════════════════
   styles.css — RevAvenues.in
   Full stylesheet for the site.
   Sections:
     1. Brand Tokens
     2. Reset & Base
     3. Nav (desktop)
     4. Mobile Nav (hamburger + drawer)
     5. Hero
     6. 3D Sphere
     7. Shared Section Styles
     8. Services
     9. Pipeline
    10. Clients
    11. Proof Strip
    12. Founder
    13. Testimonials
    14. Case Studies
    15. RevAvenues.ai Section
    16. CTA
    17. Footer
    18. Back-to-Top Button
    19. Scroll-in Animation Helpers
    20. GPU Compositing Hints
    21. Responsive Breakpoints (1100 → 900 → 768 → 480)
═══════════════════════════════════════════ */


/* ─────────────────────────────
   1. BRAND TOKENS — RevAvenues
───────────────────────────── */
:root {
  /* Dark backgrounds — Deep Navy */
  --dark:        #0B1F3A;
  --dark-2:      #122848;
  /* Electric Blue accent */
  --blue:        #2E6FF2;
  --blue-d:      #1A5ADB;
  --blue-l:      #EBF1FD;
  /* Neutrals */
  --ink:         #0B1F3A;
  --ink-2:       #1F3557;
  --muted:       #5B6B7C;
  --subtle:      #8A9BB0;
  --border:      #E2E6ED;
  --surface:     #F7F8FA;
  --white:       #FFFFFF;
  /* Semantic */
  --emerald:     #059669;
  --emerald-l:   #ECFDF5;
  /* Aliases — everything maps to the Electric Blue system */
  --indigo:      var(--blue);
  --indigo-d:    var(--blue-d);
  --indigo-l:    var(--blue-l);
  --obsidian:    var(--dark);
  --obsidian-2:  var(--dark-2);
  --teal:        var(--blue);
  --teal-d:      var(--blue-d);
  --teal-l:      var(--blue-l);
  --gold:        var(--blue);
  --gold-d:      var(--blue-d);
  --gold-l:      var(--blue-l);
  /* Radii */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  /* Shadows */
  --shadow-sm:   0 1px 3px rgba(0,0,0,.06);
  --shadow-md:   0 4px 20px rgba(0,0,0,.08);
  --shadow-lg:   0 12px 40px rgba(0,0,0,.12);
  /* Font */
  --font-body:   'Inter', system-ui, sans-serif;
}


/* ─────────────────────────────
   2. RESET & BASE
───────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
  font-family: var(--font-body);
  background: var(--white);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* prevent horizontal bleed */
}
img, svg { display: block; }
a { text-decoration: none; }


/* ─────────────────────────────
   3. NAV (desktop)
───────────────────────────── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: 64px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 5%;
  /* Solid white so mix-blend-mode:multiply on the JPG logo works correctly */
  background: #ffffff;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border);
  transition: box-shadow .3s;
}
nav.scrolled { box-shadow: var(--shadow-sm); }

/* Nav logo — multiply blend removes the white JPG background on the light nav */
.nav-logo {
  height: 32px; flex-shrink: 0;
  object-fit: contain; width: auto;
  mix-blend-mode: multiply;
}

/* Footer logo — invert flips black logo to white; screen blend dissolves the
   white background into the dark footer */
.footer-logo-img {
  height: 24px; width: auto;
  object-fit: contain;
  filter: invert(1);
  mix-blend-mode: screen;
}

.nav-links {
  display: flex; align-items: center; gap: 2rem;
}
.nav-links a {
  font-family: var(--font-body);
  font-size: .8rem; font-weight: 500;
  color: var(--muted); letter-spacing: .01em;
  transition: color .15s;
}
.nav-links a:hover { color: var(--ink); }

/* "Book a Call" CTA pill in the desktop nav */
.nav-cta {
  height: 36px; padding: 0 1.1rem;
  background: var(--indigo); color: var(--white) !important;
  border-radius: 50px;
  font-size: .82rem !important; font-weight: 600 !important;
  display: flex; align-items: center; gap: .4rem;
  transition: background .15s !important;
}
.nav-cta:hover { background: var(--indigo-d) !important; }


/* ─────────────────────────────
   4. MOBILE NAV — hamburger + drawer
───────────────────────────── */

/* Right-side group: mobile CTA pill + hamburger button (hidden on desktop) */
.nav-mobile-right {
  display: none;
  align-items: center; gap: .6rem;
}
@media (max-width: 768px) {
  .nav-mobile-right { display: flex; }
}

/* "Book a Call" pill shown on mobile instead of the full nav CTA */
.nav-mobile-cta {
  height: 34px; padding: 0 1rem;
  background: var(--indigo); color: var(--white);
  border-radius: 50px;
  font-size: .8rem; font-weight: 600;
  display: flex; align-items: center;
}

/* Hamburger icon button */
.nav-hamburger {
  display: flex; flex-direction: column; justify-content: center;
  gap: 5px; width: 34px; height: 34px;
  background: none; border: none; cursor: pointer; padding: 4px;
  border-radius: 6px;
}
.nav-hamburger span {
  display: block; height: 2px; border-radius: 2px;
  background: var(--ink);
  transition: transform .3s, opacity .3s, width .3s;
}
.nav-hamburger span:nth-child(1) { width: 20px; }
.nav-hamburger span:nth-child(2) { width: 14px; }
.nav-hamburger span:nth-child(3) { width: 20px; }

/* Open state — top and bottom bars rotate into an X */
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); width: 20px; }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); width: 20px; }

/* Slide-down mobile drawer */
.mobile-drawer {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  height: 100dvh;
  z-index: 195;
  background: var(--dark);
  display: flex; flex-direction: column; justify-content: center;
  padding: 5rem 8% 4rem;
  gap: 0;
  transform: translateX(100%);
  opacity: 0;
  transition: transform .38s cubic-bezier(.4,0,.2,1), opacity .3s;
  pointer-events: none;
}
.mobile-drawer.open {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}
.mobile-drawer a {
  font-size: 2rem; font-weight: 800; color: rgba(255,255,255,.75);
  padding: .75rem 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: color .15s;
  letter-spacing: -.02em;
}
.mobile-drawer a:last-child { border-bottom: none; }
.mobile-drawer a:hover { color: var(--white); }

/* Full-width CTA at the bottom of the mobile drawer */
.mobile-drawer-cta {
  margin-top: 2rem;
  display: flex !important; justify-content: center;
  background: var(--indigo) !important; color: white !important;
  border-radius: 50px; height: 52px; padding: 0 2rem;
  font-size: 1rem !important; font-weight: 700 !important;
  align-items: center;
  border-bottom: none !important;
  letter-spacing: .01em;
}
.mobile-drawer-cta:hover { opacity: .9; color: white !important; }


/* ─────────────────────────────
   5. HERO — editorial dark
───────────────────────────── */
.hero {
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr auto;
  background: var(--dark);
  position: relative; overflow: hidden;
}

/* Subtle grid-line overlay */
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
}

/* Radial glow top-right */
.hero::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 60% at 80% 10%, rgba(46,111,242,.15) 0%, transparent 70%);
  pointer-events: none;
}

.hero-content {
  grid-column: 1;
  grid-row: 1;
  display: flex; flex-direction: column; justify-content: center;
  padding: 9rem 3% 4rem 6%;
  position: relative; z-index: 1;
}

/* Eyebrow label above the headline — GSAP reveals it on load */
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold);
  margin-bottom: 2.5rem;
  /* opacity/transform set by GSAP */
}

/* Pulsing status dot in the eyebrow */
.hero-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold);
  animation: pulse-dot 2.4s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .3; transform: scale(.6); }
}

/* Main headline */
h1 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(2.4rem, 5.5vw, 5rem);
  font-weight: 900;
  line-height: .95;
  letter-spacing: -.04em;
  color: var(--white);
  margin-bottom: 2.5rem;
}

/* Clip-reveal wrapper per headline line — GSAP animates .hw translateY(0) */
.hw-clip { display: block; overflow: hidden; }
.hw { display: block; } /* GSAP sets initial hidden state */

h1 .accent { color: var(--gold); }

/* Subheading paragraph — GSAP reveals on load */
.hero-body {
  font-size: 1rem; color: rgba(255,255,255,.45);
  max-width: 440px; line-height: 1.82;
  margin-bottom: 2.5rem;
  /* opacity/transform set by GSAP */
}

/* CTA buttons row — GSAP reveals on load */
.hero-actions {
  display: flex; gap: .85rem; flex-wrap: wrap; align-items: center;
  /* opacity/transform set by GSAP */
}

/* Trusted-by ticker strip at the bottom of the hero */
.hero-ticker {
  grid-column: 1 / -1;
  grid-row: 2;
  border-top: 1px solid rgba(255,255,255,.07);
  padding: 1.4rem 6%;
  display: flex; align-items: center; gap: 2.5rem;
  overflow: hidden; position: relative; z-index: 1;
}
.ticker-label {
  font-size: .58rem; font-weight: 700; letter-spacing: .2em;
  color: rgba(255,255,255,.2); white-space: nowrap; flex-shrink: 0;
}
.ticker-track { overflow: hidden; flex: 1; }
.ticker-inner {
  display: flex; gap: 3.5rem; align-items: center;
  white-space: nowrap; will-change: transform;
}
.ticker-inner span {
  font-size: .75rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.35);
  flex-shrink: 0;
}

/* Shared button styles */
.btn {
  display: inline-flex; align-items: center; gap: .45rem;
  height: 44px; padding: 0 1.5rem;
  border-radius: 50px;
  font-size: .85rem; font-weight: 600;
  letter-spacing: .01em;
  transition: all .2s;
}
.btn-dark    { background: var(--dark);  color: var(--white); }
.btn-dark:hover  { background: var(--gold); color: var(--dark); transform: translateY(-1px); }
.btn-light   { background: var(--white); color: var(--dark); }
.btn-light:hover { background: var(--gold); color: var(--dark); transform: translateY(-1px); }
.btn-outline { background: transparent; color: var(--ink); border: 1.5px solid var(--border); }
.btn-outline:hover { border-color: var(--dark); }
.btn-ghost   { background: transparent; color: rgba(255,255,255,.7); border: 1.5px solid rgba(255,255,255,.18); }
.btn-ghost:hover { border-color: rgba(255,255,255,.45); color: var(--white); }
.btn-arrow::after { content: '↗'; font-size: .9em; }


/* ─────────────────────────────
   6. 3D SPHERE — hero right panel
───────────────────────────── */
.hero-sphere {
  grid-column: 2;
  grid-row: 1;
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
  padding: 6rem 5% 3rem 0;
}
#sphereCanvas {
  width: 100%;
  max-width: 480px;
  aspect-ratio: 1;
  display: block;
}


/* ─────────────────────────────
   7. SHARED SECTION STYLES
───────────────────────────── */
section { padding: 6rem 5%; }

/* Eyebrow label above section headings (the small ALL-CAPS tag) */
.eyebrow {
  display: flex; align-items: center; gap: .6rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold);
  margin-bottom: .85rem;
}
.eyebrow::before {
  content: ''; display: block;
  width: 24px; height: 2px; border-radius: 2px;
  background: var(--gold);
}

.section-h {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 800; letter-spacing: -.04em;
  line-height: 1.08; color: var(--ink);
  margin-bottom: .85rem;
}
.section-p {
  font-size: .95rem; color: var(--muted);
  max-width: 460px; line-height: 1.8;
}
.section-head { margin-bottom: 3.5rem; }


/* ─────────────────────────────
   8. SERVICES
───────────────────────────── */
.services { background: var(--surface); border-bottom: 1px solid var(--border); }

/* 3-column card grid */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.srv {
  background: var(--white);
  padding: 2rem 1.8rem;
  transition: background .2s;
}
.srv:hover { background: var(--indigo-l); }

.srv-icon {
  width: 36px; height: 36px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; margin-bottom: 1.1rem;
}
.srv h3 {
  font-size: .9rem; font-weight: 700;
  color: var(--ink); margin-bottom: .4rem; letter-spacing: -.01em;
}
.srv p { font-size: .82rem; color: var(--muted); line-height: 1.7; }

/* Small funnel-stage tag */
.srv-tag {
  display: inline-block; margin-top: .85rem;
  font-size: .67rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--indigo);
  background: var(--indigo-l); padding: .2rem .55rem;
  border-radius: 50px;
}


/* ─────────────────────────────
   9. PIPELINE — GTM process steps
───────────────────────────── */
.pipeline {
  background: var(--obsidian);
  border-bottom: 1px solid var(--obsidian-2);
}
.pipeline .eyebrow { color: var(--teal); }
.pipeline .eyebrow::before { background: var(--teal); }
.pipeline .section-h { color: var(--white); }
.pipeline .section-p { color: var(--subtle); max-width: 520px; }

/* 6-step horizontal row on desktop */
.steps-row {
  display: grid; grid-template-columns: repeat(6,1fr);
  border: 1px solid var(--obsidian-2); border-radius: var(--radius-lg);
  overflow: hidden;
}
.stp {
  padding: 1.8rem 1.2rem;
  border-right: 1px solid var(--obsidian-2);
  display: flex; flex-direction: column; align-items: flex-start;
  transition: background .2s;
}
.stp:last-child { border-right: none; }
.stp:hover { background: rgba(46,111,242,.06); }

.stp-num {
  font-family: var(--font-body);
  font-size: .65rem; font-weight: 700; letter-spacing: .12em;
  color: var(--teal); margin-bottom: 1rem;
  font-variant-numeric: tabular-nums;
}
.stp h3 {
  font-family: var(--font-body);
  font-size: .84rem; font-weight: 700;
  color: var(--white); margin-bottom: .35rem; line-height: 1.3;
}
.stp p { font-size: .72rem; color: var(--subtle); line-height: 1.6; }


/* ─────────────────────────────
   10. CLIENTS
───────────────────────────── */
.clients { background: var(--white); border-bottom: 1px solid var(--border); }

/* Two-column layout: enterprise logos | AI platform partners */
.clients-layout {
  display: grid; grid-template-columns: 1fr 1fr; gap: 5rem;
}
.client-col-label {
  font-size: .68rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--subtle);
  margin-bottom: 1.4rem; display: flex; align-items: center; gap: .5rem;
}
.client-col-label::before {
  content: ''; display: block; width: 16px; height: 1.5px;
  background: var(--subtle); border-radius: 2px;
}

/* Tag cloud of client chips */
.tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  display: inline-flex; align-items: center;
  height: 32px; padding: 0 .85rem;
  border: 1px solid var(--border); border-radius: 50px;
  font-size: .78rem; font-weight: 500; color: var(--ink-2);
  background: var(--white);
  transition: all .15s;
}
.chip:hover { border-color: var(--indigo); color: var(--indigo); }

/* AI platform chips have a blue-tinted background */
.chip.ai {
  background: var(--blue-l);
  border-color: #a3bef9; color: var(--blue-d);
}
.chip.ai:hover { border-color: var(--blue); }


/* ─────────────────────────────
   11. PROOF STRIP — dynamic stats
───────────────────────────── */
.proof {
  background: var(--obsidian);
  padding: 5rem 5%;
  border-bottom: 1px solid var(--obsidian-2);
}
.proof-grid {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 0;
}
.proof-item {
  padding-right: 3rem; border-right: 1px solid rgba(255,255,255,.15);
  margin-right: 3rem;
}
.proof-item:last-child { border-right: none; padding-right: 0; margin-right: 0; }

/* Large animated counter number */
.proof-num {
  font-family: var(--font-body);
  font-size: 3rem; font-weight: 800; letter-spacing: -.05em;
  color: var(--teal); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.proof-num .sfx { font-size: 2rem; }
.proof-label {
  font-family: var(--font-body);
  font-size: .72rem; font-weight: 700;
  color: rgba(255,255,255,.55); margin-top: .5rem;
  text-transform: uppercase; letter-spacing: .1em;
}
.proof-desc {
  font-size: .72rem; color: rgba(255,255,255,.3);
  margin-top: .25rem; line-height: 1.5;
}


/* ─────────────────────────────
   12. FOUNDER
───────────────────────────── */
.founder {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 6rem 5%;
}

/* Two-column: sidebar (photo + name) | main content (bio + track record) */
.founder-inner {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 5rem;
  align-items: flex-start;
}
.founder-sidebar { /* left column */ }

/* Square photo container */
.founder-photo-wrap {
  width: 100%; aspect-ratio: 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--indigo-l);
  margin-bottom: 1.5rem;
  position: relative;
}
/* color: transparent hides the browser's broken-image alt text */
.founder-photo-wrap img {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  display: block;
  color: transparent;
}
.founder-name {
  font-size: 1.3rem; font-weight: 800;
  letter-spacing: -.02em; margin-bottom: .2rem;
  color: var(--ink);
}
.founder-role {
  font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--indigo);
  margin-bottom: 1rem;
}
.founder-link {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .8rem; font-weight: 600; color: var(--ink);
  border: 1.5px solid var(--border); border-radius: 50px;
  padding: .45rem 1rem;
  transition: all .15s;
}
.founder-link:hover { border-color: var(--indigo); color: var(--indigo); }

/* Right column */
.founder-content { /* right column */ }
.founder-bio {
  font-size: .97rem; color: var(--muted);
  line-height: 1.85; margin-bottom: 1.2rem;
}

/* "What He's Built" section label */
.founder-track-label {
  font-size: .68rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--subtle);
  margin-top: 2.5rem; margin-bottom: 1.2rem;
  display: flex; align-items: center; gap: .6rem;
}
.founder-track-label::before {
  content: ''; display: block; width: 20px; height: 2px;
  background: var(--blue); border-radius: 2px;
}

/* 2×2 track record grid */
.founder-track-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.founder-track-item {
  background: var(--white);
  padding: 1.4rem 1.5rem;
  transition: background .2s;
}
.founder-track-item:hover { background: var(--indigo-l); }
.founder-track-icon { font-size: 1.1rem; margin-bottom: .6rem; }
.founder-track-title {
  font-size: .88rem; font-weight: 700; color: var(--ink);
  margin-bottom: .3rem; line-height: 1.3;
}
.founder-track-desc {
  font-size: .78rem; color: var(--muted); line-height: 1.6;
}


/* ─────────────────────────────
   13. TESTIMONIALS
───────────────────────────── */
.testimonials { background: var(--white); border-bottom: 1px solid var(--border); }

/* 2-column testimonial card grid */
.testi-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
  margin-bottom: 1.5rem;
}
.testi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.2rem;
  display: flex; flex-direction: column; justify-content: space-between;
  transition: box-shadow .2s, border-color .2s;
}
.testi-card:hover { border-color: var(--indigo); box-shadow: var(--shadow-md); }
.testi-quote {
  font-size: 1.5rem; color: var(--indigo); line-height: 1;
  margin-bottom: 1rem; font-family: Georgia, serif;
}
.testi-body {
  font-size: .93rem; color: var(--ink-2);
  line-height: 1.8; margin-bottom: 1.8rem;
  font-style: italic;
}
.testi-meta { display: flex; align-items: center; gap: .9rem; }
.testi-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--indigo-l); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; font-weight: 800; color: var(--indigo);
  flex-shrink: 0;
}
.testi-name  { font-size: .88rem; font-weight: 700; color: var(--ink); }
.testi-role  { font-size: .75rem; color: var(--muted); margin-top: .1rem; }
.testi-stars { color: #f59e0b; font-size: .85rem; margin-bottom: .8rem; letter-spacing: 1px; }


/* ─────────────────────────────
   14. CASE STUDIES — stacked page effect
───────────────────────────── */
.case-studies {
  background: var(--dark);
  border-bottom: 1px solid var(--dark-2);
  padding: 6rem 0 0; /* horizontal padding lives on the individual cards */
}
.case-studies .section-head { padding: 0 5%; margin-bottom: 3rem; }
.case-studies .eyebrow { color: rgba(255,255,255,.5); }
.case-studies .eyebrow::before { background: rgba(255,255,255,.3); }
.case-studies .section-h { color: var(--white); }
.case-studies .section-p { color: rgba(255,255,255,.5); }

.cs-stack { display: flex; flex-direction: column; }

/* Each card is sticky — scrolling through the stack scales + dims earlier cards */
.cs-card {
  --dim: 0; /* CSS custom prop driven by GSAP for GPU-composited dim */
  position: sticky;
  top: 64px; /* stick below the 64px nav */
  min-height: 72vh;
  display: grid;
  grid-template-columns: 72px 1fr 1fr;
  gap: 3.5rem;
  padding: 4rem 5%;
  align-items: start;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -16px 60px rgba(0,0,0,.55), 0 -1px 0 rgba(255,255,255,.07);
  transform-origin: top center;
  will-change: transform; /* promote to GPU compositing layer */
  backface-visibility: hidden; /* prevent subpixel jitter */
}

/* GPU-composited dark overlay — GSAP animates --dim 0→0.45 as next card enters.
   Using opacity on a pseudo-element avoids filter:brightness which causes full repaints. */
.cs-card::after {
  content: '';
  position: absolute; inset: 0;
  background: #000;
  border-radius: inherit;
  opacity: var(--dim);
  pointer-events: none;
  will-change: opacity;
}

/* Each card has a slightly different background for visual depth */
.cs-card:nth-child(1) { z-index: 10; background: #0f2550; }
.cs-card:nth-child(2) { z-index: 20; background: #0d2244; }
.cs-card:nth-child(3) { z-index: 30; background: var(--dark); }

/* Large ghost card number in the left gutter */
.cs-num {
  font-size: 4.5rem; font-weight: 900;
  color: rgba(255,255,255,.06);
  line-height: 1; letter-spacing: -.04em;
  user-select: none; padding-top: .25rem;
}

/* Left column: client tag, title, challenge, approach */
.cs-client-tag {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .65rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--blue);
  margin-bottom: 1rem;
}
.cs-client-tag::before {
  content: ''; display: block; width: 18px; height: 1.5px;
  background: var(--blue); border-radius: 2px;
}
.cs-title {
  font-size: 1.15rem; font-weight: 800; color: var(--white);
  line-height: 1.35; margin-bottom: 1.6rem; letter-spacing: -.02em;
}
.cs-label {
  font-size: .65rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.3);
  margin-top: 1.2rem; margin-bottom: .5rem;
}
.cs-label:first-of-type { margin-top: 0; }
.cs-text {
  font-size: .84rem; color: rgba(255,255,255,.5); line-height: 1.8;
}
.cs-list {
  list-style: none; display: flex; flex-direction: column; gap: .5rem; margin-top: .4rem;
}
.cs-list li {
  font-size: .84rem; color: rgba(255,255,255,.5); line-height: 1.65;
  display: flex; align-items: flex-start; gap: .6rem;
}
.cs-list li::before {
  content: '';
  display: block; width: 5px; height: 5px; min-width: 5px;
  border-radius: 50%; background: var(--blue);
  margin-top: .55rem; flex-shrink: 0;
}

/* Right column: metric tiles + key wins */
.cs-metrics {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 1px; background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--radius-md);
  overflow: hidden; margin-bottom: 2rem;
}
.cs-metric {
  background: rgba(255,255,255,.03);
  padding: 1.2rem 1.1rem;
  transition: background .2s;
}
.cs-metric:hover { background: rgba(46,111,242,.08); }
.cs-metric-num {
  font-size: 1.6rem; font-weight: 900;
  color: var(--blue); letter-spacing: -.04em;
  line-height: 1; margin-bottom: .3rem;
}
.cs-metric-label {
  font-size: .62rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.35);
  line-height: 1.4;
}
.cs-results-label {
  font-size: .65rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.3);
  margin-bottom: .6rem;
}


/* ─────────────────────────────
   15. REVAVENUES.AI — sister platform
───────────────────────────── */
.raai {
  background: var(--obsidian);
  border-bottom: 1px solid var(--obsidian-2);
  padding: 6rem 5%;
}
.raai .eyebrow { color: rgba(255,255,255,.65); }
.raai .section-h { color: white; }
.raai .section-p { color: rgba(255,255,255,.75); }

/* Two-column: description + buttons | stat tiles */
.raai-body { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; margin-top: 4rem; }
.raai-desc {
  font-size: .95rem; color: rgba(255,255,255,.85); line-height: 1.8;
  margin-bottom: 1.8rem;
}
.raai-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  background: white; color: var(--indigo);
  font-size: .88rem; font-weight: 700;
  padding: .85rem 1.8rem; border-radius: 50px;
  text-decoration: none; transition: opacity .15s;
}
.raai-btn:hover { opacity: .9; }

/* 2×2 stat tiles */
.raai-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.raai-stat {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--radius-md);
  padding: 1.5rem;
}
.raai-stat-num {
  font-size: 2rem; font-weight: 900; color: white;
  letter-spacing: -.04em; line-height: 1;
  margin-bottom: .35rem;
}
.raai-stat-label {
  font-size: .78rem; color: rgba(255,255,255,.65);
  font-weight: 500;
}


/* ─────────────────────────────
   16. CTA — final call to action
───────────────────────────── */
.cta {
  background: var(--white);
  padding: 8rem 5%;
  text-align: center;
  border-bottom: 1px solid var(--border);
}
.cta-kicker {
  font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--subtle);
  margin-bottom: 1.2rem;
}
.cta h2 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 900; letter-spacing: -.035em;
  line-height: 1.08; color: var(--ink);
  max-width: 580px; margin: 0 auto 1.2rem;
}
.cta-body {
  font-size: .95rem; color: var(--muted);
  max-width: 420px; margin: 0 auto 2.5rem;
  line-height: 1.75;
}
.cta-actions { display: flex; justify-content: center; gap: .75rem; flex-wrap: wrap; }


/* ─────────────────────────────
   17. FOOTER
───────────────────────────── */
footer {
  background: #0f172a;
  padding: 2.2rem 5%;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1.2rem;
}
.footer-logo { height: 22px; }
.footer-right {
  display: flex; align-items: center; gap: 2rem;
}
footer p { font-size: .75rem; color: #475569; }
footer a { font-size: .75rem; color: #64748b; transition: color .15s; }
footer a:hover { color: var(--white); }


/* ─────────────────────────────
   18. BACK-TO-TOP BUTTON
───────────────────────────── */
.back-to-top {
  position: fixed;
  bottom: 2rem; right: 2rem;
  z-index: 50;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--dark);
  border: 1.5px solid rgba(46,111,242,.35);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(46,111,242,.2);
  opacity: 0; transform: translateY(12px);
  transition: border-color .2s, box-shadow .2s;
  pointer-events: none;
}
.back-to-top.visible {
  opacity: 1; transform: translateY(0);
  pointer-events: auto;
}
.back-to-top:hover {
  border-color: var(--blue);
  box-shadow: 0 4px 24px rgba(46,111,242,.45);
}
.back-to-top svg { width: 16px; height: 16px; }


/* ─────────────────────────────
   19. SCROLL-IN ANIMATION HELPERS
───────────────────────────── */
/* GSAP manages all fade-up reveals — these classes just prevent CSS from
   conflicting with the initial hidden state */
.fade-up { opacity: 1; }
.fade-up.visible { opacity: 1; }


/* ─────────────────────────────
   20. GPU COMPOSITING HINTS
   Promote fixed/sticky elements to their own GPU layers so they don't
   trigger repaints during scroll.
───────────────────────────── */
nav { will-change: transform; }
#sphereCanvas { will-change: transform; transform: translateZ(0); }
.hero-content, .hero-sphere { transform: translateZ(0); }


/* ═══════════════════════════════════════════
   21. RESPONSIVE — COMPLETE
   Four breakpoints: 1100 → 900 → 768 → 480
═══════════════════════════════════════════ */

/* ── 1: Small desktops / large tablets (≤1100px) ── */
@media (max-width: 1100px) {
  .hero-content { padding: 8rem 4% 4rem 5%; }

  /* Services: 3→2 cols */
  .services-grid { grid-template-columns: repeat(2,1fr); }

  /* Proof: 4→2×2 grid */
  .proof-grid { grid-template-columns: repeat(2,1fr); gap: 2.5rem; }
  .proof-item {
    border-right: none; padding-right: 0; margin-right: 0;
    padding-bottom: 2.5rem; border-bottom: 1px solid rgba(255,255,255,.1);
  }
  .proof-item:nth-last-child(-n+2) { border-bottom: none; padding-bottom: 0; }

  /* Pipeline steps: 6→3 cols */
  .steps-row { grid-template-columns: repeat(3,1fr); }
  .stp:nth-child(3) { border-right: none; }
  .stp:nth-child(n+4) { border-top: 1px solid rgba(255,255,255,.08); }

  /* Founder: slightly narrower sidebar */
  .founder-inner { grid-template-columns: 280px 1fr; gap: 4rem; }
}

/* ── 2: Tablets (≤900px) ── */
@media (max-width: 900px) {
  section { padding: 4.5rem 5%; }

  /* Hero: single column — sphere and content share the same grid cell (overlap) */
  .hero { grid-template-columns: 1fr; }
  .hero-content {
    grid-column: 1; grid-row: 1;
    z-index: 2; /* renders above the sphere */
    padding: 7rem 5% 3rem;
    position: relative;
  }
  /* Sphere stays in grid flow (ensures getBoundingClientRect works for sizing),
     and shares cell 1/1 with hero-content to create the ghost-behind-text look */
  .hero-sphere {
    grid-column: 1; grid-row: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 0 0 40%; /* push canvas to the right half */
    opacity: 0.22;
    z-index: 1;
    pointer-events: none;
    position: relative;
  }
  #sphereCanvas { max-width: none; width: 100%; }

  /* Clients: stack */
  .clients-layout { grid-template-columns: 1fr; gap: 2.5rem; }

  /* Pipeline steps: 6→2×3 */
  .steps-row { grid-template-columns: repeat(2,1fr); }
  .stp:nth-child(3) { border-right: 1px solid var(--obsidian-2); } /* reset 1100px override */
  .stp:nth-child(2n) { border-right: none; }
  .stp:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.08); }

  /* Proof: strengthen gap */
  .proof-grid { gap: 2rem; }

  /* Founder: narrower sidebar, track record stacks vertically */
  .founder-inner { grid-template-columns: 200px 1fr; gap: 3rem; }
  .founder-track-grid { grid-template-columns: 1fr; }

  /* RAAI: single col */
  .raai-body { grid-template-columns: 1fr; gap: 3rem; }

  /* Testimonials: keep 2-col at tablet */
  .testi-grid { grid-template-columns: 1fr 1fr; }
}

/* ── 3: Mobile landscape / large phones (≤768px) ── */
@media (max-width: 768px) {
  nav { padding: 0 4%; }
  nav .nav-links { display: none; } /* replaced by the mobile drawer */

  section { padding: 4rem 4%; }

  /* Hero: collapse rows to auto so no empty gap forms below the buttons */
  .hero { min-height: auto; grid-template-rows: auto auto; }
  .hero-content { padding: 6rem 5% 3rem; justify-content: flex-start; }
  h1 { letter-spacing: -.025em; }
  .hero-body { font-size: .97rem; }
  /* Tighter tracking on the eyebrow prevents wrapping on narrow screens */
  .hero-eyebrow { letter-spacing: .1em; font-size: .65rem; }

  /* Services: 2→1 col */
  .services-grid { grid-template-columns: 1fr; }

  /* Pipeline steps: →2 col with clean border resets */
  .steps-row { grid-template-columns: repeat(2,1fr); }
  .stp { border-bottom: 1px solid rgba(255,255,255,.08); border-right: none; }
  .stp:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.08); }
  .stp:last-child { border-bottom: none; }

  /* Proof: stays 2-col */
  .proof-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .proof-num { font-size: 2.2rem; }

  /* Testimonials: →1 col */
  .testi-grid { grid-template-columns: 1fr; }

  /* Case studies: keep sticky stack, just reflow to 1-col.
     min-height: 88svh gives enough scroll distance for the stacking animation. */
  .cs-card {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 2.5rem 5%;
    min-height: 70svh;
    /* position: sticky and top: 64px are inherited from base — keep them */
    border-radius: 12px 12px 0 0;
  }
  .cs-num { display: none; }
  .cs-metrics { grid-template-columns: repeat(3,1fr); }

  /* Founder: stack — photo goes full bleed edge-to-edge */
  .founder-inner { grid-template-columns: 1fr; gap: 2rem; }
  .founder-photo-wrap {
    max-width: none;
    width: calc(100% + 8%); /* cancel the 4% section padding on each side */
    margin-left: -4%;
    margin-right: -4%;
    border-radius: 0;
    aspect-ratio: 4 / 3; /* portrait-friendly landscape crop on mobile */
  }
  .founder-track-grid { grid-template-columns: 1fr 1fr; }

  /* RAAI */
  .raai-stats { grid-template-columns: 1fr 1fr; }

  /* CTA */
  .cta { padding: 5rem 4%; }

  /* Footer */
  footer { flex-direction: column; align-items: flex-start; gap: .75rem; padding: 1.8rem 4%; }
  .footer-right { flex-direction: column; align-items: flex-start; gap: .4rem; }
  .footer-logo { display: block; }
}

/* ── 4: Small phones (≤480px) ── */
@media (max-width: 480px) {
  section { padding: 3.5rem 5%; }
  nav { padding: 0 5%; }

  /* Hero */
  .hero { min-height: 100svh; }
  .hero-content { padding: 5.5rem 5% 2rem; }
  h1 { font-size: clamp(1.9rem, 8vw, 2.4rem); line-height: 1.05; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { justify-content: center; }

  /* Section headings */
  .section-h { font-size: clamp(1.5rem, 6vw, 1.8rem); }

  /* Steps: →1 col */
  .steps-row { grid-template-columns: 1fr; }
  .stp { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,.08); }
  .stp:last-child { border-bottom: none; }

  /* Proof: →1 col */
  .proof-grid { grid-template-columns: 1fr; }
  .proof-item {
    border-bottom: 1px solid rgba(255,255,255,.1); padding-bottom: 1.8rem;
    border-right: none; margin-right: 0; padding-right: 0;
  }
  .proof-item:last-child { border-bottom: none; padding-bottom: 0; }

  /* CS metrics: keep 3-col — the numbers are short enough to fit */
  .cs-metrics { grid-template-columns: repeat(3, 1fr); }

  /* Founder track: →1 col */
  .founder-track-grid { grid-template-columns: 1fr; }

  /* RAAI stats: →1 col */
  .raai-stats { grid-template-columns: 1fr; }

  /* CTA */
  .cta { padding: 4rem 5%; }
  .cta h2 { font-size: clamp(1.6rem, 6vw, 2rem); }
  .cta-actions { flex-direction: column; align-items: stretch; }
  .cta-actions .btn { justify-content: center; }

  /* Ticker: tighter */
  .hero-ticker { padding: 1rem 5%; gap: 1.5rem; }

  /* Services: consistent border-radius on single col */
  .services-grid { border-radius: var(--radius-md); }
}