:root {
  --navy: #071a44;
  --blue: #0755e8;
  --orange: #ff9f00;
  --green: #18c964;
  --green-hover: #14b85a;
  --ink: #111827;
  --muted: #667085;
  --line: #dbe3ef;
  --white: #ffffff;
  --page-bg: #050B1F;
  --surface-bg: #08142F;
  --text-primary: #FFFFFF;
  --text-secondary: rgba(255,255,255,0.6);
  --border-color: rgba(255,255,255,0.1);
  --grid-color: rgba(255,255,255,0.035);
  --glow-color: rgba(74,99,255,0.11);
  --scroll-y: 0;
  --mouse-x: 0;
  --mouse-y: 0;
  --parallax-x: 0;
  --parallax-y: 0;
  font-family: Inter, Manrope, "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--page-bg);
  scroll-behavior: smooth;
}

[data-theme="dark"] {
  --page-bg: #050B1F;
  --surface-bg: #08142F;
  --text-primary: #FFFFFF;
  --text-secondary: rgba(255,255,255,0.6);
  --border-color: rgba(255,255,255,0.1);
  --grid-color: rgba(255,255,255,0.035);
  --glow-color: rgba(74,99,255,0.11);
}

[data-theme="light"] {
  --page-bg: #F4F6FA;
  --surface-bg: #FFFFFF;
  --text-primary: #08142F;
  --text-secondary: rgba(8,20,47,0.65);
  --border-color: rgba(8,20,47,0.1);
  --grid-color: rgba(90,130,255,0.035);
  --glow-color: rgba(74,99,255,0.11);
}

* { box-sizing: border-box; }
body { margin: 0; overflow-x: hidden; background: var(--page-bg); }
body.modal-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid rgba(10, 101, 255, .45); outline-offset: 4px; }
.container { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }
.section { padding: 70px 0; }
.narrow { max-width: 820px; }
.centered { text-align: center; max-width: 760px; }
.eyebrow { margin: 0 0 10px; color: var(--blue); font-size: .72rem; font-weight: 550; letter-spacing: .04em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; letter-spacing: 0; }
h1 { max-width: 690px; margin-bottom: 18px; color: var(--navy); font-size: clamp(2.35rem, 4.8vw, 4.6rem); font-weight: 680; line-height: 1.02; }
h2 { color: var(--navy); font-size: clamp(1.85rem, 3.5vw, 3.15rem); font-weight: 620; line-height: 1.06; margin-bottom: 14px; }
h3 { color: var(--navy); font-size: 1.06rem; font-weight: 580; margin-bottom: 8px; }
p { color: var(--muted); font-weight: 400; line-height: 1.65; }

/* 3D Parallax Foundation */
.scene-3d {
  position: relative;
  perspective: 1200px;
  transform-style: preserve-3d;
}

.depth-layer {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  pointer-events: none;
}


.depth-mid {
  --transform-translate-z: -50px;
  --transform-scale: 1.04;
  --transform-scroll-y-multiplier: -0.025px;
  --transform-mouse-x-multiplier: 8px;
  --transform-mouse-y-multiplier: 6px;
}

.depth-near {
  --transform-translate-z: 40px;
  --transform-scale: 1;
  --transform-scroll-y-multiplier: -0.035px;
  --transform-mouse-x-multiplier: 8px;
  --transform-mouse-y-multiplier: 6px;
}

.parallax-far {
  --transform-translate-x-scroll: 0;
  --transform-translate-y-scroll: calc(var(--scroll-y) * var(--transform-scroll-y-multiplier));
}

.parallax-mid {
  --transform-translate-x-scroll: 0;
  --transform-translate-y-scroll: calc(var(--scroll-y) * var(--transform-scroll-y-multiplier));
}

.parallax-near {
  --transform-translate-x-scroll: 0;
  --transform-translate-y-scroll: calc(var(--scroll-y) * var(--transform-scroll-y-multiplier));
}

.mouse-parallax {
  --transform-translate-x-mouse: calc(var(--mouse-x) * var(--transform-mouse-x-multiplier));
  --transform-translate-y-mouse: calc(var(--mouse-y) * var(--transform-mouse-y-multiplier));
}

.tilt-card {
  transition: transform 180ms ease;
  transform-style: preserve-3d;
}

.tilt-card:hover {
  --transform-rotate-x: 3deg;
  --transform-rotate-y: 4deg;
}

.tilt-card:not(:hover) {
  --transform-rotate-x: 0deg;
  --transform-rotate-y: 0deg;
}

.transform-combined {
  transform: translateZ(var(--transform-translate-z))
             translateX(calc(var(--transform-translate-x-scroll) + var(--transform-translate-x-mouse)))
             translateY(calc(var(--transform-translate-y-scroll) + var(--transform-translate-y-mouse)))
             rotateX(var(--transform-rotate-x))
             rotateY(var(--transform-rotate-y))
             scale(var(--transform-scale));
}

/* Mobile reductions */
@media (max-width: 900px) {
  .mouse-parallax,
  .tilt-card {
    --transform-translate-x-mouse: 0;
    --transform-translate-y-mouse: 0;
    --transform-rotate-x: 0deg;
    --transform-rotate-y: 0deg;
  }

  .parallax-far,
  .parallax-mid,
  .parallax-near {
    --transform-translate-x-scroll: 0;
    --transform-translate-y-scroll: 0;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .mouse-parallax,
  .tilt-card {
    --transform-translate-x-mouse: 0;
    --transform-translate-y-mouse: 0;
    --transform-rotate-x: 0deg;
    --transform-rotate-y: 0deg;
    transition: none !important;
  }

  .parallax-far,
  .parallax-mid,
  .parallax-near {
    --transform-translate-x-scroll: 0;
    --transform-translate-y-scroll: 0;
    transition: none !important;
  }

  .hero::before,
  .hero::after {
    transition: none !important;
  }
}

.site-header { position: fixed; inset: 0 0 auto; z-index: 50; border-bottom: 1px solid rgba(255,255,255,.07); background: transparent; transition: background .22s, border-color .22s, backdrop-filter .22s; }
.site-header.scrolled { background: rgba(6,0,21,.92); border-bottom-color: rgba(255,255,255,.1); backdrop-filter: blur(12px); }
.header-inner { min-height: 96px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.brand img { width: 48px; height: 48px; object-fit: contain; }
.brand strong { display: block; color: white; font-size: 1rem; font-weight: 600; }
.brand small { display: block; color: rgba(255,255,255,.52); font-size: .66rem; font-weight: 400; white-space: nowrap; }
.main-nav { display: flex; align-items: center; justify-content: center; gap: 58px; }
.main-nav a { color: rgba(226,216,242,.72); font-size: 1.02rem; font-weight: 430; transition: color .18s; }
.main-nav a:hover { color: white; }
.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.phone-link { color: white; font-weight: 520; font-size: .9rem; }
/* Compact header variant of the shared WhatsApp CTA */
.header-actions .btn-whatsapp { min-height: 40px; padding: 0 17px; border-radius: 999px; font-size: .92rem; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 0 24px; border: 1px solid currentColor; border-radius: 1px; background: transparent; font-weight: 560; cursor: pointer; transition: transform .18s, background-color .18s, border-color .18s, color .18s; box-shadow: none; }
.btn:hover { transform: translateX(1px); }
.btn-large { min-height: 50px; padding: 0 28px; }
/* Shared WhatsApp CTA — dark, navy-integrated treatment for every WhatsApp
   button outside the hero. The hero keeps its own more luminous variant
   (see .hero .btn-whatsapp below) which intentionally overrides these rules. */
.btn-whatsapp {
  position: relative;
  border: 1px solid rgba(24,201,100,.5);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(24,255,100,.14) 0%, rgba(24,255,100,.04) 45%, rgba(10,101,255,.08) 100%),
    rgba(8,20,47,.72);
  color: white;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
  backdrop-filter: blur(8px);
  transition: transform .2s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.btn-whatsapp:hover {
  border-color: rgba(24,255,100,.85);
  background:
    linear-gradient(135deg, rgba(24,255,100,.22) 0%, rgba(24,255,100,.07) 45%, rgba(10,101,255,.12) 100%),
    rgba(9,23,54,.82);
  color: white;
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
}
.btn-secondary { color: var(--navy); border-color: var(--navy); background: transparent; }
.btn-secondary:hover { background: var(--navy); color: white; }

.hero {
  position: relative;
  overflow: visible;
  height: 100vh;
  min-height: 850px;
  max-height: 1020px;
  padding: 0;
  background: #070013;
  color: white;
  isolation: isolate;
  perspective: 1200px;
  transform-style: preserve-3d;
  --transform-translate-z: -120px;
  --transform-scale: 1.1;
  --transform-scroll-y-multiplier: -0.015px;
  --transform-mouse-x-multiplier: -5px;
  --transform-mouse-y-multiplier: -5px;
}

.hero.is-pinned {
  position: sticky;
  top: 0;
  z-index: 20;
}

.hero.is-pinned .depth-mid,
.hero.is-pinned .depth-near {
  --transform-scroll-y-multiplier: 0;
}

.hero.is-pinned h1,
.hero.is-pinned .hero-text,
.hero.is-pinned .hero-cta-group {
  will-change: transform, opacity;
}

.hero-scroll-region {
  position: relative;
}

.hero-scroll-spacer {
  height: 800px;
  width: 100%;
  pointer-events: none;
}

@media (max-width: 900px) {
  .hero-scroll-spacer {
    height: 0;
  }
}
.hero::before { content: ""; position: absolute; left: 9.5%; right: 9.5%; top: 108px; height: 265px; z-index: -3; border-top: 1px solid rgba(166,126,218,.18); background-image: linear-gradient(rgba(174,139,230,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(174,139,230,.11) 1px, transparent 1px); background-size: 112px 48px; transform: perspective(760px) rotateX(60deg) translateZ(var(--transform-translate-z)) scale(var(--transform-scale)) translateX(calc(var(--transform-translate-x-scroll) + var(--transform-translate-x-mouse))) translateY(calc(var(--transform-translate-y-scroll) + var(--transform-translate-y-mouse))); transform-origin: center top; opacity: .58; mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 76%, transparent 100%); border-radius: 0 0 42px 42px; }
.hero::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: 96px; height: 360px; z-index: -2; background-image: linear-gradient(rgba(196,105,255,.19) 1px, transparent 1px), linear-gradient(90deg, rgba(196,105,255,.17) 1px, transparent 1px); background-size: 112px 50px; transform: perspective(760px) rotateX(62deg) translateZ(var(--transform-translate-z)) scale(var(--transform-scale)) translateX(calc(var(--transform-translate-x-scroll) + var(--transform-translate-x-mouse))) translateY(calc(var(--transform-translate-y-scroll) + var(--transform-translate-y-mouse))); transform-origin: center bottom; opacity: .7; mask-image: linear-gradient(to bottom, transparent 0%, #000 26%, #000 90%, transparent 100%); border-radius: 80px 80px 0 0; }
.hero-glow { position: absolute; left: 50%; bottom: 188px; z-index: -1; width: min(1160px, 92vw); height: 235px; transform: translateX(-50%); background: radial-gradient(ellipse at center, rgba(255,168,255,.95) 0%, rgba(211,83,255,.74) 24%, rgba(118,43,255,.42) 48%, rgba(44,18,108,.16) 72%, transparent 100%); filter: blur(24px); opacity: .9; animation: heroGlow 8s ease-in-out infinite alternate; }
.hero-shell { position: relative; height: 100%; display: grid; justify-items: center; align-content: start; text-align: center; padding-top: 125px; }
.hero-copy { display: grid; justify-items: center; max-width: 1180px; }
.hero-eyebrow { display: none; }
.hero h1 { max-width: 1160px; margin-bottom: 20px; color: #f6f1ff; font-size: clamp(4.1rem, 5.8vw, 5.9rem); font-weight: 750; letter-spacing: -.015em; line-height: .98; text-align: center; }
.hero-text { max-width: 900px; color: rgba(228,218,242,.68); font-size: clamp(1.22rem, 1.55vw, 1.6rem); font-weight: 400; line-height: 1.35; margin-bottom: 34px; }
.hero-cta-group { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.hero .btn-whatsapp { position: relative; min-height: 50px; padding: 0 30px; border: 1px solid rgba(24,201,100,.72); border-radius: 999px; background: linear-gradient(120deg, rgba(24,201,100,.72) 0%, rgba(24,201,100,.32) 34%, rgba(255,255,255,.12) 50%, rgba(20,184,90,.5) 68%, rgba(24,201,100,.72) 100%); background-size: 240% 100%; color: white; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); backdrop-filter: blur(10px); font-weight: 560; animation: whatsappGreenFlow 3.4s ease-in-out infinite; }
.hero .btn-whatsapp:hover { border-color: rgba(24,201,100,.9); color: white; transform: translateY(-1px); animation-duration: 2.2s; }
.hero .btn-secondary, .hero-secondary { color: white; border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.04); }
.hero .btn-secondary:hover, .hero-secondary:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.34); color: white; transform: translateY(-1px); }
.microcopy { margin: 17px 0 0; color: rgba(255,255,255,.5); font-size: .94rem; font-weight: 400; }
.hero-points { display: flex; flex-wrap: wrap; gap: 9px; }
.hero-points span, .audience-list span { border: 1px solid var(--line); background: transparent; padding: 9px 12px; border-radius: 0; color: #24324d; font-size: .84rem; font-weight: 480; }
.hero-visual { position: relative; }
/* Hidden - replaced by real video preview in hero-process-transition */
.hero-dashboard { display: none; }
.hero-dashboard.reveal { opacity: 0; transform: translateX(-50%) translateY(18px); }
.hero-dashboard.reveal.visible { opacity: .78; transform: translateX(-50%) translateY(0); }
.dashboard-topbar { min-height: 46px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 0 18px; border-bottom: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.8); }
.dashboard-topbar div { display: flex; gap: 7px; }
.dashboard-topbar span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.28); }
.dashboard-topbar strong { color: white; font-size: .9rem; font-weight: 560; }
.dashboard-topbar small { justify-self: end; color: rgba(255,255,255,.42); font-size: .76rem; }
.dashboard-grid { display: grid; grid-template-columns: 1.15fr .92fr .92fr; gap: 12px; padding: 14px; }
.dashboard-card { min-height: 126px; display: grid; align-content: space-between; gap: 10px; padding: 14px; border: 1px solid rgba(255,255,255,.08); border-radius: 4px; background: rgba(255,255,255,.035); overflow: hidden; }
.dashboard-card span { color: rgba(255,255,255,.54); font-size: .74rem; font-weight: 520; text-transform: uppercase; letter-spacing: .06em; }
.dashboard-card h3, .dashboard-card strong { margin: 0; color: white; font-weight: 600; }
.dashboard-card h3 { max-width: 400px; font-size: clamp(1.35rem, 1.9vw, 1.72rem); line-height: 1.04; }
.dashboard-card strong { font-size: 1rem; }
.dashboard-card--wide { background: radial-gradient(circle at 75% 18%, rgba(7,85,232,.3), transparent 34%), rgba(255,255,255,.045); }
.dashboard-card--accent { background: linear-gradient(135deg, rgba(24,201,100,.16), rgba(7,85,232,.14)); border-color: rgba(24,201,100,.24); }
.flow-lines { display: grid; gap: 8px; margin-top: 10px; }
.flow-lines i { display: block; height: 8px; border-radius: 1px; background: linear-gradient(90deg, rgba(119,167,255,.18), rgba(119,167,255,.78), rgba(24,201,100,.62)); }
.flow-lines i:nth-child(2) { width: 76%; }
.flow-lines i:nth-child(3) { width: 58%; }
.mini-bars { height: 42px; display: flex; align-items: end; gap: 8px; }
.mini-bars i { flex: 1; background: linear-gradient(180deg, #77a7ff, #0755e8); border-radius: 1px; opacity: .84; }
.mini-bars i:nth-child(1) { height: 38%; }
.mini-bars i:nth-child(2) { height: 62%; }
.mini-bars i:nth-child(3) { height: 48%; }
.mini-bars i:nth-child(4) { height: 78%; background: linear-gradient(180deg, #18c964, #0755e8); }
.search-stack { display: grid; gap: 8px; }
.search-stack i { display: block; height: 12px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); }
.search-stack i:nth-child(2) { width: 82%; }
.search-stack i:nth-child(3) { width: 64%; }
.media-card { min-height: 112px; padding: 10px; align-content: end; position: relative; }
.media-card img { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); object-fit: cover; border-radius: 3px; opacity: .72; }
.media-card::after { content: ""; position: absolute; inset: 10px; background: linear-gradient(180deg, transparent 28%, rgba(5,11,31,.8)); border-radius: 3px; }
.media-card span { position: relative; z-index: 1; color: white; }
.floating-detail { display: none; }
.floating-detail span { width: 8px; height: 8px; background: var(--green); }
.floating-detail--one { left: -34px; top: 86px; }
.floating-detail--two { right: -28px; top: 150px; animation-delay: .8s; }
.floating-detail--three { left: 18%; bottom: -20px; animation-delay: 1.3s; }
.hero-trust-row { width: min(900px, 88vw); display: flex; justify-content: center; gap: 10px 26px; flex-wrap: wrap; margin-top: 24px; color: rgba(255,255,255,.46); font-size: .86rem; font-weight: 420; }
.result-card { position: absolute; border: 1px solid rgba(219,227,239,.96); background: rgba(255,255,255,.96); border-radius: 2px; padding: 13px 15px; box-shadow: none; backdrop-filter: blur(10px); }
.result-card small { display: block; color: var(--muted); font-size: .74rem; font-weight: 420; margin-bottom: 4px; }
.result-card strong { color: var(--navy); font-size: .94rem; font-weight: 580; }
.card-top { left: -18px; top: 42px; }
.card-mid { right: -10px; top: 158px; }
.card-bottom { left: 42px; bottom: 26px; display: flex; align-items: center; gap: 10px; }

/* ============================================================
   HERO → PROCESS CINEMATIC TRANSITION
   Single video element transforms from small Hero preview
   to full Process video through scroll-driven timeline.
   ============================================================ */

.hero-process-transition {
  position: absolute;
  left: 50%;
  bottom: 50px;
  width: min(880px, 80vw);
  transform: translateX(-50%);
  z-index: 10;
  pointer-events: none;
  /* Contain the video and text layers */
  contain: layout paint;
  /* Remove 3D parallax influence - this element should stay pinned to Hero bottom */
  transform-style: flat;
}

.hero-process-video {
  position: relative;
  width: 100%;
  /* Initial state: taller panel extending below viewport, ~160px visible above bottom */
  height: 200px;
  border-radius: 48px;
  overflow: hidden;
  transform-origin: center top;
  /* Initial state: visible at viewport bottom, top portion showing */
  transform: translateY(0);
  clip-path: inset(0 0 0 0 round 48px);
  opacity: 1;
  /* Glassmorphism base - builds up during emergence */
  --glass-opacity: 0;
  --glass-blur: 0;
  --glass-border-opacity: 0;
  --glass-shadow: 0;
  --glass-highlight-opacity: 0;
  will-change: transform, clip-path, opacity, filter, height, border-radius;
  /* Ensure media stays within clipped bounds */
  isolation: isolate;
}

.hero-process-video__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  /* Initial opacity for preview state */
  opacity: 0.68;
  filter: saturate(0.92) contrast(1.05);
  transition: opacity 0.3s ease, filter 0.3s ease;
  /* Ensure video is clipped by parent's clip-path */
  clip-path: inherit;
}

/* During the pinned Hero phase, the static image itself establishes the
   animated surface's height from its intrinsic dimensions. Anchoring the stage
   by its original top edge keeps the approved starting position while the full
   image naturally extends below the Hero viewport. */
.hero-scroll-phase-active .hero-process-transition {
  top: calc(100% - 250px);
  bottom: auto;
}

.hero-scroll-phase-active .hero-process-video {
  height: auto;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
  overflow: hidden;
  border-radius: 48px;
  clip-path: none;
  mask-image: none;
  -webkit-mask-image: none;
}

.hero-scroll-phase-active .hero-process-video__media {
  position: static;
  inset: auto;
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
  border-radius: 48px;
  clip-path: none;
  mask-image: none;
  -webkit-mask-image: none;
}

.hero-process-video__chrome {
  position: absolute;
  z-index: 2;
  color: rgba(255,255,255,.72);
  font-size: .78rem;
  font-weight: 560;
  letter-spacing: .04em;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.hero-process-video__chrome--top {
  left: 22px;
  top: 18px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(5,11,31,.38);
  backdrop-filter: blur(12px);
}

.hero-process-video__chrome--bottom {
  left: 22px;
  bottom: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hero-process-video__chrome--bottom span {
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(5,11,31,.38);
  backdrop-filter: blur(12px);
  color: rgba(255,255,255,.78);
}

/* Glass overlay - builds up during lift phase */
.hero-process-video__glass {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(5,11,31,0) 0%,
      rgba(5,11,31,0.04) 30%,
      rgba(5,11,31,0.08) 60%,
      rgba(5,11,31,0.12) 100%
    ),
    radial-gradient(ellipse at 50% 0%,
      rgba(10,101,255,0.03) 0%,
      transparent 50%
    );
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid rgba(255,255,255, var(--glass-border-opacity));
  border-radius: inherit;
  box-shadow:
    0 0 0 1px rgba(255,255,255, calc(var(--glass-border-opacity) * 0.1)) inset,
    0 0 0 1px rgba(10,101,255, var(--glass-border-opacity)) inset,
    0 calc(10px + var(--glass-shadow) * 30px) calc(40px + var(--glass-shadow) * 60px)
      rgba(7,26,68, calc(0.15 + var(--glass-shadow) * 0.15)),
    0 0 calc(60px + var(--glass-shadow) * 100px)
      rgba(10,101,255, calc(0.03 + var(--glass-shadow) * 0.05));
  /* Subtle top-edge highlight */
  mask-image:
    linear-gradient(to bottom,
      rgba(0,0,0, var(--glass-highlight-opacity)) 0%,
      rgba(0,0,0, 0.8) 15%,
      rgba(0,0,0, 0.9) 100%
    );
  -webkit-mask-image:
    linear-gradient(to bottom,
      rgba(0,0,0, var(--glass-highlight-opacity)) 0%,
      rgba(0,0,0, 0.8) 15%,
      rgba(0,0,0, 0.9) 100%
    );
  opacity: var(--glass-opacity);
  transition: opacity 0.4s ease, backdrop-filter 0.4s ease, border-color 0.4s ease,
              box-shadow 0.4s ease, -webkit-mask-image 0.4s ease;
}

/* Process text - positioned under the video, revealed as video lifts */
.hero-process-text {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 24px;
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  /* Clipped by video movement - revealed from beneath */
  clip-path: inset(100% 0 0 0);
  transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              clip-path 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  pointer-events: none;
}

.hero-process-text .eyebrow {
  color: #77a7ff;
  letter-spacing: .04em;
  font-size: .72rem;
  font-weight: 550;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.hero-process-text h2 {
  color: white;
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 620;
  line-height: 1.06;
  margin-bottom: 14px;
  max-width: 850px;
  margin-left: auto;
  margin-right: auto;
}

.hero-process-text p {
  color: rgba(255,255,255,.62);
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.6;
  max-width: 720px;
  margin: 0 auto;
}

/* Process section heading (in #process) - initially hidden, revealed at handoff */
.video-section-heading[data-process-heading] {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.video-section-heading[data-process-heading].visible {
  opacity: 1;
  visibility: visible;
}

/* Process video panel - initially hidden, revealed at handoff */
.video-panel[data-process-video-panel] {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  /* When visible, act as a container for the arriving hero video */
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.video-panel[data-process-video-panel].visible {
  opacity: 1;
  visibility: visible;
}

/* Placeholder content inside process video panel - hidden when real video arrives */
.video-panel__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* When hero video arrives in process panel, it fills the panel */
.video-panel[data-process-video-panel] .hero-process-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
}

/* Reduced motion: simplify to basic state changes */
@media (prefers-reduced-motion: reduce) {
  .hero-process-video {
    clip-path: none !important;
    transform: none !important;
  }
  .hero-process-video__glass {
    opacity: 0 !important;
  }
  .hero-process-text {
    clip-path: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Mobile: simplified transition */
@media (max-width: 900px) {
  .hero-process-transition {
    bottom: 20px;
    width: min(90vw, 340px);
  }
  .hero-process-video {
    height: 150px;
    border-radius: 32px;
    transform: translateY(0);
    clip-path: inset(0 0 0 0 round 32px);
    opacity: 1;
  }
  .hero-process-video__glass {
    display: none;
  }
  .hero-process-text {
    clip-path: none;
    opacity: 1;
    transform: none;
    margin-top: 16px;
  }
}
.whatsapp-icon { width: 19px; height: 19px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.whatsapp-icon img { width: 100%; height: 100%; display: block; }
.whatsapp-icon-box { width: 19px; height: 19px; border: 0; border-radius: 0; background: transparent; padding: 0; }

.proof-strip { background: var(--navy); padding: 18px 0; color: white; }
.proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.proof-grid div { border-left: 1px solid rgba(255,255,255,.18); padding-left: 14px; }
.proof-grid strong, .proof-grid span { display: block; }
.proof-grid strong { font-size: 1rem; font-weight: 560; }
.proof-grid span { color: rgba(255,255,255,.68); font-size: .82rem; font-weight: 400; margin-top: 3px; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.section-heading { margin-bottom: 24px; }
.problem-section { background: var(--white); }
/* Continues the dark visual environment from Packages onward.
   Uses the same palette as .video-section / .package-section / .closing-cta. */
.testimonials-section {
  background: linear-gradient(180deg, #050B1F 0%, #071A44 40%, #050B1F 100%);
}
.testimonials-section .eyebrow { color: #77A7FF; }
.testimonials-section .section-heading h2 { color: #fff; }
.testimonials-section { color: #fff; }
.pain-grid, .service-grid, .package-grid, .testimonial-grid { display: grid; gap: 16px; }
.pain-grid { grid-template-columns: repeat(4, 1fr); margin-top: 24px; }
.service-grid, .package-grid, .testimonial-grid { grid-template-columns: repeat(3, 1fr); }
.pain-card, .service-card, .package-card { background: var(--white); border: 1px solid var(--line); border-radius: 3px; box-shadow: none; }
.pain-card, .service-card, .testimonial-card { padding: 22px; }
.testimonial-card { background: #08142F; border: 1px solid rgba(255,255,255,.10); border-radius: 3px; box-shadow: none; color: #fff; }
.testimonial-card h3 { color: #fff; }
.testimonial-card p { color: rgba(255,255,255,.72); }
.testimonial-card .sample-label { display: inline-block; margin: 0 0 10px; color: rgba(255,255,255,.42); font-size: .68rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.testimonial-card footer { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.10); color: rgba(255,255,255,.40); font-size: .8rem; }
/* Continues the dark visual environment from Packages onward.
   Uses the same palette as .video-section / .package-section / .closing-cta. */
.positioning-section { position: relative; overflow: hidden; padding: 122px 0 132px; border-top: 1px solid rgba(255,255,255,.06); background: linear-gradient(180deg, #050B1F 0%, #071A44 48%, #050B1F 100%); color: white; }
.positioning-section::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(90,130,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(90,130,255,.032) 1px, transparent 1px); background-size: 62px 62px; opacity: .72; mask-image: radial-gradient(circle at 50% 32%, #000 0%, transparent 74%); pointer-events: none; }
.positioning-section::after { content: ""; position: absolute; right: max(0px, calc((100vw - 1280px) / 2)); top: 300px; width: min(44vw, 560px); height: 620px; background: radial-gradient(circle, rgba(10,101,255,.18), transparent 66%); opacity: .42; filter: blur(8px); pointer-events: none; }
.positioning-section > * { position: relative; z-index: 1; }
.positioning-section .section-heading { max-width: 900px; margin-bottom: 32px; }
.positioning-section .eyebrow { color: #77a7ff; letter-spacing: .04em; font-weight: 500; }
.positioning-section .section-heading h2 { color: #fff; font-size: clamp(2.125rem, 5vw, 3.55rem); font-weight: 620; line-height: .98; max-width: 900px; margin-inline: auto; }
.positioning-section .section-heading p:last-child { max-width: 780px; color: rgba(255,255,255,.58); font-weight: 400; line-height: 1.6; margin-inline: auto; }
.comparison-shell { max-width: 1240px; margin-top: 30px; }
.comparison-table-wrap { overflow-x: auto; border: 1px solid rgba(255,255,255,.10); border-radius: 3px; background: #08142f; scrollbar-color: rgba(119,167,255,.55) rgba(255,255,255,.06); }
.comparison-table { width: 100%; min-width: 920px; border-collapse: collapse; table-layout: fixed; }
.comparison-col-feature { width: 25%; }
.comparison-col-marketplace { width: 23%; }
.comparison-col-drc { width: 29%; }
.comparison-table th, .comparison-table td { min-height: 58px; padding: 18px 18px; border-bottom: 1px solid rgba(255,255,255,.075); border-right: 1px solid rgba(255,255,255,.055); text-align: left; vertical-align: middle; font-size: .94rem; line-height: 1.45; }
.comparison-table thead th { height: 72px; background: #071a44; color: rgba(255,255,255,.72); font-weight: 500; letter-spacing: 0; }
.comparison-table tbody tr { background: #08142f; transition: background .2s ease; }
.comparison-table tbody tr:hover { background: rgba(255,255,255,.018); }
.comparison-table th:last-child, .comparison-table td:last-child { border-right: 0; }
.comparison-table tbody th { color: #fff; font-weight: 500; background: rgba(8,20,47,.96); }
.comparison-table tbody td { color: rgba(255,255,255,.48); font-weight: 400; }
.comparison-table .drc-col { background: rgba(10,101,255,.035); color: rgba(255,255,255,.88); }
.comparison-table thead .drc-col { position: relative; background: #071a44; color: white; font-weight: 600; border-top: 3px solid #18c964; }
.comparison-table thead .drc-col span { display: inline-flex; align-items: center; margin-left: 8px; padding: 4px 7px; border: 1px solid rgba(24,201,100,.55); border-radius: 1px; background: rgba(24,201,100,.10); color: #18c964; font-size: .64rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.comparison-yes { display: inline-flex; align-items: center; gap: 7px; color: rgba(255,255,255,.9); font-weight: 500; }
.comparison-check { display: inline-flex; align-items: center; justify-content: center; color: #18c964; font-size: .92rem; line-height: 1; }
.comparison-unavailable { color: rgba(255,255,255,.25); font-size: 1rem; }
.comparison-scroll-hint { display: none; margin: 12px 0 0; color: rgba(255,255,255,.44); font-size: .86rem; font-weight: 400; }
/* Continues the dark visual environment from Packages onward.
   Uses the same palette as .video-section / .package-section / .closing-cta. */
.service-section { position: relative; overflow: hidden; padding: 112px 0 124px; border-top: 1px solid rgba(255,255,255,.06); background: linear-gradient(180deg, #050B1F 0%, #071A44 45%, #050B1F 100%); color: #fff; }
.service-section::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(90,130,255,.033) 1px, transparent 1px), linear-gradient(90deg, rgba(90,130,255,.028) 1px, transparent 1px); background-size: 64px 64px; opacity: .55; mask-image: radial-gradient(circle at 50% 28%, #000 0%, transparent 72%); pointer-events: none; }
.service-section > * { position: relative; z-index: 1; }
.service-section .section-heading { max-width: 900px; margin-inline: auto; text-align: center; }
.service-section .eyebrow { color: #77a7ff; letter-spacing: .04em; font-weight: 500; }
.service-section .section-heading h2 { max-width: 900px; margin-inline: auto; color: #fff; font-size: clamp(2.25rem, 4.8vw, 3.45rem); font-weight: 620; line-height: 1; }
.service-section .section-heading p:last-child { max-width: 760px; margin-inline: auto; color: rgba(255,255,255,.58); font-size: 1.05rem; line-height: 1.6; }
.service-section .service-grid { display: block; max-width: 1280px; margin-top: 34px; }
.service-rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; border: 1px solid rgba(255,255,255,.10); border-radius: 3px; background: #08142f; }
.service-zone { min-height: 220px; padding: 29px 30px; border-right: 1px solid rgba(255,255,255,.08); background: transparent; box-shadow: none; }
.service-zone:last-child { border-right: 0; background: rgba(24,201,100,.025); }
.service-zone__number { display: block; color: #77a7ff; font-size: .75rem; font-weight: 600; letter-spacing: .08em; }
.service-zone__visual { display: flex; align-items: center; width: max-content; height: 36px; margin: 20px 0 16px; color: #77a7ff; }
.service-zone__visual img { display: block; width: auto; max-width: 38px; height: 34px; object-fit: contain; }
.service-zone__visual svg { display: block; width: 36px; height: 36px; color: #77a7ff; }
.service-zone h3 { margin: 0 0 10px; color: #fff; font-size: clamp(1.25rem, 1.7vw, 1.38rem); font-weight: 560; line-height: 1.15; }
.service-zone p { margin: 0; color: rgba(255,255,255,.55); font-size: .98rem; line-height: 1.55; }
.service-section .section-cta { display: flex; justify-content: center; margin-top: 32px; }
/* Continues the Process → Packages bridge's dark environment (the bridge ends
   at #081225) so there is no light flash between Process and Packages,
   regardless of the active theme. Uses the same palette as .video-section. */
.package-section { position: relative; overflow: hidden; padding: 118px 0 132px; border-top: 1px solid rgba(255,255,255,.06); background: linear-gradient(180deg, #081225 0%, #071a44 52%, #050b1f 100%); color: white; }
/* (background overridden by the later .package-section rule below — kept in sync) */
.package-section::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(90,130,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(90,130,255,.035) 1px, transparent 1px); background-size: 58px 58px; opacity: .6; mask-image: radial-gradient(circle at 50% 46%, #000 0%, transparent 72%); pointer-events: none; }
.package-section::after { content: ""; position: absolute; left: 50%; top: 58%; width: min(720px, 72vw); height: 420px; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(10,101,255,.2), transparent 68%); filter: blur(48px); pointer-events: none; }
.package-section .container { position: relative; z-index: 1; }
.package-section .section-heading { max-width: 780px; margin-bottom: 44px; }
.package-section .eyebrow { color: #77a7ff; letter-spacing: .04em; }
.package-section h2 { color: white; font-size: clamp(3.25rem, 5vw, 3.9rem); font-weight: 640; line-height: 1.06; }
.package-section .section-heading p { max-width: 720px; margin-left: auto; margin-right: auto; color: rgba(255,255,255,.58); font-size: 1.06rem; }
.package-section .package-grid { width: min(1320px, calc(100% - 48px)); grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }

/* ============ PREMIUM PRICING CARD REDESIGN ============ */
/* DRC Brand Palette from logo:
   Deep Navy:      #071A44
   Royal Blue:     #0A65FF / #0755E8
   Saffron Orange: #FF9F00
   India Green:    #18C964
   White:          #FFFFFF
   Off-White:      #F8FAFC
*/

.package-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 28px;
  border: 1px solid rgba(10,101,255,.12);
  border-radius: 20px;
  background:
    linear-gradient(145deg, #FFFFFF 0%, #F0F4FF 45%, #E8F0FE 100%),
    linear-gradient(180deg, rgba(7,85,232,.03) 0%, transparent 40%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.8) inset,
    0 -1px 0 rgba(7,26,68,.08) inset,
    0 8px 32px rgba(7,26,68,.12);
  color: #071A44;
  transition: transform .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease;
  overflow: hidden;
}

/* Subtle top edge highlight */
.package-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(10,101,255,.25), transparent);
  opacity: .6;
}

.package-card:hover {
  transform: translateY(-4px);
  border-color: rgba(10,101,255,.25);
  box-shadow:
    0 1px 0 rgba(255,255,255,.8) inset,
    0 -1px 0 rgba(7,26,68,.08) inset,
    0 16px 48px rgba(7,26,68,.15),
    0 0 0 1px rgba(10,101,255,.18);
}

/* ============ FEATURED CARD (₹45K) ============ */
.package-card.featured {
  border-color: rgba(10,101,255,.22);
  background:
    linear-gradient(145deg, #FFFFFF 0%, #E8F0FE 35%, #F0F4FF 100%),
    linear-gradient(180deg, rgba(10,101,255,.06) 0%, transparent 35%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.8) inset,
    0 -1px 0 rgba(7,26,68,.08) inset,
    0 12px 48px rgba(10,101,255,.18),
    0 0 0 1px rgba(10,101,255,.12);
  transform: translateY(-4px);
}

.package-card.featured::after {
  content: "";
  position: absolute;
  top: -2px;
  left: 50%;
  width: 60%;
  height: 2px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(10,101,255,.5), transparent);
  border-radius: 2px;
  filter: blur(1px);
  opacity: .5;
}

.package-card.featured:hover {
  transform: translateY(-8px);
  border-color: rgba(10,101,255,.4);
  box-shadow:
    0 1px 0 rgba(255,255,255,.8) inset,
    0 -1px 0 rgba(7,26,68,.08) inset,
    0 24px 64px rgba(10,101,255,.22),
    0 0 0 1px rgba(10,101,255,.25);
}

/* Remove old accent bars */
.package-accent { display: none; }

/* ============ RECOMMENDED BADGE ============ */
.package-card .badge {
  align-self: flex-start;
  padding: 6px 12px;
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(10,101,255,.12), rgba(10,101,255,.04));
  border: 1px solid rgba(10,101,255,.2);
  color: #0A65FF;
  box-shadow:
    0 1px 0 rgba(255,255,255,.4) inset,
    0 0 10px rgba(10,101,255,.12);
}

.package-card.featured .badge {
  background: linear-gradient(135deg, #0A65FF, #0755E8);
  border-color: #0A65FF;
  color: white;
  box-shadow:
    0 1px 0 rgba(255,255,255,.15) inset,
    0 0 16px rgba(10,101,255,.3),
    0 2px 8px rgba(10,101,255,.18);
}

/* ============ CARD CONTENT LAYOUT ============ */
.package-card {
  /* Override gap for better internal spacing control */
  gap: 20px;
}

/* Plan name */
.package-card h3 {
  font-size: .85rem;
  font-weight: 550;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: rgba(7,26,68,.65);
  margin: 0 0 4px;
}

/* Price block */
.package-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 4px 0 2px;
}

.package-price strong {
  font-size: clamp(2.8rem, 4.5vw, 3.4rem);
  font-weight: 700;
  line-height: 1;
  color: #071A44;
  letter-spacing: -.02em;
}

.package-price span {
  font-size: 1rem;
  font-weight: 400;
  color: rgba(7,26,68,.45);
  white-space: nowrap;
}

/* Best for / description */
.package-card > p {
  font-size: .92rem;
  line-height: 1.55;
  color: rgba(7,26,68,.5);
  margin: 0 0 6px;
}

/* Features list */
.package-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  display: grid;
  gap: 10px;
}

.package-card li {
  position: relative;
  padding-left: 22px;
  font-size: .9rem;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(7,26,68,.6);
}

.package-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: linear-gradient(135deg, #18C964, #14B85A);
  box-shadow: 0 0 8px rgba(24,201,100,.4);
  flex-shrink: 0;
}

/* ============ CTA AREA ============ */
.package-actions {
  display: grid;
  gap: 10px;
  margin-top: auto;
  padding-top: 8px;
}

/* Know More button */
.package-know-more {
  width: 100%;
  padding: 14px 20px;
  font-size: .9rem;
  font-weight: 550;
  letter-spacing: .02em;
  color: #0A65FF;
  background: transparent;
  border: 1px solid rgba(10,101,255,.25);
  border-radius: 10px;
  transition: all .2s ease;
}

.package-know-more:hover {
  background: rgba(10,101,255,.08);
  border-color: #0A65FF;
  color: #0755E8;
  transform: none;
}

/* WhatsApp button - keep existing design but ensure consistency */
.package-card .btn-whatsapp {
  width: 100%;
  padding: 14px 20px;
  font-size: .9rem;
  font-weight: 550;
  border-radius: 10px;
  box-shadow: none;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
  .package-section .package-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
  .package-card.featured {
    grid-column: span 2;
    transform: translateY(-4px);
  }
  .package-card.featured:hover {
    transform: translateY(-8px);
  }
}

@media (max-width: 900px) {
  .package-section .package-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .package-card.featured {
    grid-column: auto;
    transform: none;
  }
  .package-card.featured:hover {
    transform: translateY(-4px);
  }
  .package-card {
    padding: 24px;
  }
  .package-price strong {
    font-size: clamp(2.5rem, 10vw, 3rem);
  }
}

@media (max-width: 640px) {
  .package-section { padding: 82px 0 94px; }
  .package-section .section-heading { margin-bottom: 30px; }
  .package-section h2 { font-size: clamp(2.25rem, 9.5vw, 2.85rem); }
  .package-section .section-heading p { font-size: .98rem; }
  .package-section .package-grid { gap: 16px; }
  .package-card { padding: 22px; }
  .package-price strong { font-size: clamp(2.25rem, 11vw, 2.9rem); }
  .package-card li { font-size: .88rem; }
  .package-know-more, .package-card .btn-whatsapp { padding: 13px 18px; font-size: .88rem; }
}

.plan-modal[hidden] { display: none; }
.plan-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 2.5vh 4vw; opacity: 0; transition: opacity .2s ease; }
.plan-modal.open { opacity: 1; }
.plan-modal__backdrop { position: absolute; inset: 0; background: rgba(7, 26, 68, .65); }
.plan-modal__dialog { position: relative; z-index: 1; width: min(92vw, 1700px); height: 92vh; max-height: 95vh; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 3px; background: var(--white); box-shadow: none; transform: translateY(10px); transition: transform .2s ease; }
.plan-modal.open .plan-modal__dialog { transform: translateY(0); }
.plan-modal__header { position: sticky; top: 0; z-index: 5; display: flex; align-items: start; justify-content: space-between; gap: 20px; min-height: 118px; padding: 24px; border-bottom: 1px solid rgba(255,255,255,.16); background: var(--navy); color: white; }
.plan-modal__header .eyebrow, .plan-modal__header h2 { color: white; }
.plan-modal__header h2 { margin-bottom: 10px; }
.plan-modal__close { width: 42px; height: 42px; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.42); border-radius: 1px; background: transparent; color: white; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.plan-modal__close:hover { background: white; color: var(--navy); }
.plan-modal__body { overflow: auto; padding: 0; display: grid; gap: 0; scroll-behavior: smooth; }
.plan-modal__body > .plan-detail-block:last-of-type { margin-bottom: 104px; }
.plan-detail-block { border: 1px solid var(--line); border-radius: 3px; padding: 20px; background: white; }
.visual-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 34px; align-items: center; border: 0; border-radius: 0; padding: 52px 56px; background: linear-gradient(135deg, var(--navy), #0b3a91); color: white; }
.visual-hero .eyebrow, .visual-hero h3 { color: white; }
.visual-hero h3 { font-size: clamp(2.15rem, 4.8vw, 4.9rem); line-height: 1; margin-bottom: 16px; }
.visual-hero p { color: rgba(255,255,255,.76); }
.visual-price { display: grid; gap: 4px; margin: 28px 0 16px; }
.visual-price strong { color: white; font-size: clamp(1.8rem, 3.2vw, 3rem); font-weight: 640; }
.visual-price span { color: rgba(255,255,255,.72); }
.hero-feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.hero-feature-grid > span, .summary-panel > span { display: flex; align-items: center; justify-content: flex-start; gap: 15px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.07); padding: 16px; color: white; font-weight: 480; }
.platform-mark { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border: 0; background: transparent; color: #55f294; padding: 0; }
.platform-mark img, .platform-mark svg { width: 28px; height: 28px; display: block; object-fit: contain; }
.platform-mark svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; }
.platform-mark--brand { background: transparent; border-color: transparent; }
.platform-mark--meta img { transform: scale(1.15); }
.platform-mark--pair { width: auto; height: 30px; display: flex; align-items: center; justify-content: center; gap: 8px; overflow: visible; padding: 0; background: transparent; border-color: transparent; }
.platform-mark--pair img { position: static; width: 25px; height: 25px; flex: 0 0 auto; object-fit: contain; }
.mini-illustration { width: 100%; height: 100%; }
.mini-illustration .ill-white { fill: rgba(255,255,255,.96); stroke: rgba(255,255,255,.72); }
.mini-illustration .ill-blue { fill: #0a65ff; stroke: none; }
.mini-illustration .ill-blue-soft { fill: rgba(10,101,255,.78); stroke: rgba(255,255,255,.55); }
.mini-illustration .ill-orange { fill: #ff9f00; stroke: none; }
.mini-illustration .ill-green { fill: #18c964; stroke: none; }
.mini-illustration .ill-line { fill: none; stroke: #071a44; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; }
.mini-illustration .ill-text { fill: #071a44; font-size: 9px; font-weight: 700; font-family: Inter, system-ui, sans-serif; }
.quick-stats-strip { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); background: white; }
.quick-stats-strip div { padding: 18px 22px; border-right: 1px solid var(--line); }
.quick-stats-strip div:last-child { border-right: 0; }
.quick-stats-strip strong, .quick-stats-strip span { display: block; }
.quick-stats-strip strong { color: var(--navy); font-size: 1.25rem; font-weight: 600; }
.quick-stats-strip span { color: var(--muted); font-size: .86rem; }
.modal-section-nav { display: flex; gap: 22px; overflow-x: auto; padding: 0 28px; border-bottom: 1px solid var(--line); background: white; }
.modal-section-nav a { flex: 0 0 auto; padding: 15px 0 13px; border-bottom: 2px solid transparent; color: var(--muted); font-size: .9rem; font-weight: 500; }
.modal-section-nav a:hover { color: var(--blue); border-bottom-color: var(--blue); }
.overview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 28px; background: #f5f8fc; }
.summary-panel { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.summary-panel > span { border-color: var(--line); background: white; color: var(--navy); }
.summary-panel .platform-mark { border-color: transparent; background: transparent; color: var(--blue); }
.summary-panel .platform-mark--brand, .summary-panel .platform-mark--pair { background: transparent; }
.compact-band, .roadmap-section, .bonus-block, .ad-spend-block, .plan-modal__body > .plan-detail-block:not(.overview-grid) { margin: 0 28px 28px; }
.plan-detail-block ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.plan-detail-block li { color: #334155; font-weight: 400; }
.plan-detail-block li::before { content: "+"; margin-right: 8px; color: var(--green); font-weight: 520; }
.detail-pair-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.detail-pair-grid div, .named-list article, .roadmap-grid article { border: 1px solid var(--line); border-radius: 2px; padding: 14px; background: #fff; transition: transform .2s ease, border-color .2s ease; }
.named-list article:hover { transform: translateY(-2px); border-color: rgba(7,85,232,.4); }
.detail-pair-grid span, .bonus-value span, .roadmap-grid span { display: block; color: var(--muted); font-size: .78rem; font-weight: 420; margin-bottom: 5px; }
.detail-pair-grid strong, .bonus-value strong { color: var(--navy); font-weight: 580; }
.named-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.named-list h4, .roadmap-grid h4 { margin: 0 0 6px; color: var(--navy); font-size: .98rem; font-weight: 560; }
.named-list p { margin: 0; font-size: .92rem; }
.plan-offerings > p { margin-bottom: 18px; }
.plan-offering-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.plan-offering-grid article { display: flex; align-items: center; gap: 13px; min-height: 76px; border: 1px solid var(--line); border-radius: 3px; padding: 14px; background: white; }
.plan-offering-grid h4 { margin: 0; color: var(--navy); font-size: .96rem; font-weight: 560; }
.roadmap-section { background: #f5f8fc; }
.roadmap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; position: relative; }
.roadmap-grid::before { content: ""; position: absolute; left: 16%; right: 16%; top: 33px; height: 2px; background: linear-gradient(90deg, var(--blue), #0a65ff, var(--green)); }
.roadmap-grid article { position: relative; border-right: 0; padding-top: 58px; }
.roadmap-grid article:last-child { border-right: 1px solid var(--line); }
.roadmap-grid span { position: absolute; top: 12px; left: 14px; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--blue); background: white; color: var(--blue); font-size: 1rem; font-weight: 600; }
.roadmap-grid ul { margin-top: 10px; }
.visual-bonus { border: 0; background: linear-gradient(135deg, var(--navy), #092c6f); color: white; }
.visual-bonus .eyebrow, .visual-bonus h3 { color: white; }
.visual-bonus p { color: rgba(255,255,255,.76); }
.visual-bonus .named-list article { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.06); }
.visual-bonus .named-list h4 { color: white; }
.visual-bonus .named-list p { color: rgba(255,255,255,.68); }
.visual-bonus .platform-mark { color: #ffb000; }
.bonus-value { display: inline-grid; gap: 2px; margin: 4px 0 16px; padding: 12px 14px; border: 1px solid var(--orange); background: transparent; }
.visual-bonus .bonus-value span { color: rgba(255,255,255,.7); }
.visual-bonus .bonus-value strong { color: #ffb000; font-size: 1.35rem; font-weight: 650; }
.bonus-summary-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.bonus-summary-strip span { padding: 8px 10px; border: 1px solid rgba(255,255,255,.18); border-radius: 2px; background: rgba(255,255,255,.06); color: rgba(255,255,255,.86); font-size: .86rem; font-weight: 520; }
.bonus-services { display: grid; grid-template-rows: auto auto; padding: 0; overflow: visible; background: #f7faff; }
.bonus-services__intro { padding: 24px 28px 18px; border-bottom: 1px solid var(--line); background: white; }
.bonus-services__intro h3 { max-width: 720px; }
.bonus-services__intro p:last-child { max-width: 820px; }
.bonus-service-stack { display: grid; gap: 18px; padding: 18px; }
.bonus-service { min-height: 240px; max-height: 300px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .85fr); gap: 32px; align-items: center; padding: 30px 34px; border: 1px solid var(--line); border-radius: 3px; background: white; overflow: hidden; }
.bonus-service:nth-child(even) { background: #f4f8ff; }
.bonus-service:nth-child(even) .bonus-service__visual { order: -1; }
.bonus-service:last-child { border-bottom: 1px solid var(--line); }
.bonus-service--carousel { max-height: none; grid-template-columns: 1fr; padding: 34px; }
.bonus-service--carousel .bonus-service__copy { max-width: 760px; }
.bonus-service__copy { display: grid; gap: 7px; }
.bonus-service__copy p { margin: 0; color: var(--blue); font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.bonus-service__copy h4 { margin: 0; color: var(--navy); font-size: clamp(1.6rem, 2.2vw, 2rem); font-weight: 620; }
.bonus-service__copy strong { color: var(--navy); font-size: 1rem; font-weight: 560; }
.bonus-service__copy span { color: var(--muted); font-size: .98rem; line-height: 1.55; }
.bonus-service__visual { min-width: 0; display: grid; justify-items: center; }
.service-illustration { width: min(100%, 330px); height: 205px; max-height: 220px; border: 0; border-radius: 0; background: transparent; object-fit: contain; }
.service-logo-panel { width: min(100%, 330px); height: 205px; display: grid; place-items: center; gap: 8px; padding: 0; border: 0; border-radius: 0; background: transparent; }
.service-logo-panel img { max-width: 82%; max-height: 82%; width: auto; height: auto; object-fit: contain; object-position: center; }
.service-logo-panel > span { color: var(--navy); font-size: .95rem; font-weight: 600; text-align: center; }
.service-logo-panel > span b { font-weight: 700; }
.service-logo-panel--single img { max-width: 76%; max-height: 76%; }
.service-logo-panel--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; padding: 0; }
.service-logo-panel--grid.service-logo-panel--duo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.service-logo-panel--duo span { min-height: 112px; }
.service-logo-panel--duo img { max-width: 106px; max-height: 82px; }
.service-logo-panel--grid span { min-height: 58px; display: grid; place-items: center; gap: 6px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--navy); font-size: .74rem; font-weight: 600; text-align: center; }
.service-logo-panel--grid span b { font-weight: 700; }
.service-logo-panel--grid img { max-width: 78px; max-height: 48px; width: auto; height: auto; object-fit: contain; object-position: center; }
.service-logo-panel--crm img { max-width: 82%; max-height: 76%; object-fit: contain; object-position: center; }
.service-logo-panel--crm > span { font-size: 1.05rem; }
.service-logo-panel--crm > b { color: var(--muted); font-size: .78rem; font-weight: 520; text-align: center; }
.service-logo-panel--google > span { font-size: 1.08rem; }
.service-logo-panel--google > span b { color: #4285f4; }
.brand-tile--google b { color: #4285f4; }
.brand-tile--meta b { color: #0a65ff; }
.brand-tile--instagram b { color: #d62976; }
.brand-tile--linkedin b { color: #0a66c2; }
.brand-tile--bing b { color: #258ffa; }
.svc-card { fill: #fff; stroke: #d7e1f2; stroke-width: 2; rx: 3; }
.svc-blue { fill: #0755e8; }
.svc-green { fill: #18c964; }
.svc-orange { fill: #ffb000; }
.svc-white { fill: #fff; }
.svc-line { fill: none; stroke: #071a44; stroke-width: 4; stroke-linecap: square; opacity: .72; }
.svc-stroke { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: square; stroke-linejoin: miter; }
.bonus-carousel { border: 1px solid var(--line); border-radius: 3px; background: white; overflow: hidden; }
.bonus-service[id="bonus-static-post-creation"] .bonus-carousel { width: 100%; max-width: none; margin: 0; }
.bonus-carousel__top { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.bonus-carousel__top span { color: var(--navy); font-size: .92rem; font-weight: 600; }
.bonus-carousel__top div { display: flex; gap: 8px; }
.bonus-carousel__top button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 2px; background: #f7faff; color: var(--navy); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.bonus-carousel__top button:hover { border-color: var(--blue); color: var(--blue); }
.bonus-carousel__track { display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; padding: 14px; scrollbar-width: thin; }
.bonus-carousel__track[data-dragging="true"] { cursor: grabbing; scroll-snap-type: none; }
.bonus-slide { flex: 0 0 calc((100% - 28px) / 3.35); min-height: 240px; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; scroll-snap-align: start; padding: 16px; border: 1px solid rgba(7,26,68,.12); border-radius: 3px; background: linear-gradient(135deg, #071a44, #0b3a91); color: white; }
.bonus-service--carousel .bonus-slide { height: 286px; aspect-ratio: auto; }
.bonus-slide--image { flex: 0 0 calc((100% - 48px) / 3); min-width: 260px; max-width: 380px; height: auto; min-height: 0; justify-content: center; padding: 0; background: #fff; overflow: hidden; position: relative; }
.bonus-service--carousel .bonus-slide--image { height: auto; min-height: 0; }
.portfolio-preview-trigger { position: absolute; inset: 0; box-sizing: border-box; width: 100%; height: 100%; display: grid; place-items: center; border: 0; background: #fff; padding: 10px; cursor: zoom-in; overflow: hidden; }
.portfolio-preview-trigger img { width: 100%; height: auto; max-width: 100%; max-height: 500px; display: block; object-fit: contain; object-position: center; }
.bonus-slide--image .portfolio-preview-trigger { position: static; min-height: 360px; }
.bonus-service--carousel[id*="video"] .bonus-carousel { width: 100%; max-width: none; }
.bonus-service--carousel[id*="video"] .bonus-slide { flex: 0 0 calc((100% - 42px) / 4); min-width: 190px; height: auto; min-height: 0; aspect-ratio: 9 / 16; position: relative; padding: 0; overflow: hidden; background: #071a44; }
.video-preview-trigger { position: absolute; inset: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; border: 0; background: #071a44; color: white; padding: 16px; text-align: left; cursor: zoom-in; overflow: hidden; }
.video-preview-trigger img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: .82; transition: opacity .18s ease, transform .18s ease; }
.video-preview-trigger::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,26,68,0) 34%, rgba(7,26,68,.82) 100%); }
.video-preview-trigger:hover img { opacity: .92; transform: scale(1.02); }
.video-preview-trigger strong,
.video-preview-trigger .video-card__meta { position: relative; z-index: 1; }
.video-preview-trigger strong { color: white; font-size: 1rem; font-weight: 620; }
.video-preview-trigger .video-card__meta { width: auto; height: auto; display: block; border: 0; color: rgba(255,255,255,.76); font-size: .78rem; font-weight: 520; }
.bonus-slide:nth-child(2n) { background: linear-gradient(135deg, #0b3a91, #18c964); }
.bonus-slide:nth-child(3n) { background: linear-gradient(135deg, #071a44, #ffb000); }
.bonus-slide span { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.34); color: rgba(255,255,255,.82); font-size: .82rem; font-weight: 600; }
.bonus-slide strong { color: white; font-size: 1.1rem; font-weight: 620; }
.bonus-slide p { margin: 0; color: rgba(255,255,255,.72); font-size: .88rem; }
.bonus-carousel__dots { display: flex; gap: 6px; padding: 0 14px 14px; }
.bonus-carousel__dots span { width: 7px; height: 7px; background: #c4d3ea; }
.bonus-carousel__dots span:first-child { background: var(--blue); }
.bonus-service[id="bonus-video-creation-editing"] { background: #071a44; color: white; }
.bonus-service[id="bonus-video-creation-editing"] .bonus-service__copy p,
.bonus-service[id="bonus-video-creation-editing"] .bonus-service__copy h4,
.bonus-service[id="bonus-video-creation-editing"] .bonus-service__copy strong { color: white; }
.bonus-service[id="bonus-video-creation-editing"] .bonus-service__copy span { color: rgba(255,255,255,.74); }
.bonus-service[id="bonus-video-creation-editing"] .bonus-carousel { border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.06); }
.bonus-service[id="bonus-video-creation-editing"] .bonus-carousel__top { border-color: rgba(255,255,255,.16); }
.bonus-service[id="bonus-video-creation-editing"] .bonus-carousel__top span { color: white; }
.bonus-service[id="bonus-video-creation-editing"] .bonus-carousel__top button { border-color: rgba(255,255,255,.24); background: transparent; color: white; }
.bonus-service[id="bonus-video-creation-editing"] .bonus-carousel__dots span { background: rgba(255,255,255,.28); }
.bonus-service[id="bonus-video-creation-editing"] .bonus-carousel__dots span:first-child { background: var(--green); }
.bonus-slide__play { width: 52px; height: 52px; position: absolute; top: 18px; right: 18px; z-index: 1; border: 1px solid rgba(255,255,255,.55); border-radius: 2px; background: rgba(7,26,68,.28); }
.bonus-slide__play::after { content: ""; position: absolute; left: 21px; top: 15px; border-left: 17px solid white; border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
.portfolio-lightbox[hidden] { display: none; }
.portfolio-lightbox { position: fixed; inset: 0; z-index: 160; display: grid; place-items: center; padding: 4vh 4vw; opacity: 0; transition: opacity .16s ease; }
.portfolio-lightbox.open { opacity: 1; }
.portfolio-lightbox__backdrop { position: absolute; inset: 0; border: 0; background: rgba(7,26,68,.78); cursor: zoom-out; }
.portfolio-lightbox__dialog { position: relative; z-index: 1; width: min(92vw, 980px); height: min(90vh, 980px); display: grid; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 3px; background: #fff; padding: 18px; box-shadow: none; }
.portfolio-lightbox__dialog img { max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; }
.video-lightbox__dialog { width: min(92vw, 560px); height: min(92vh, 900px); background: #050f2a; padding: 12px; }
.video-lightbox__dialog video { width: 100%; height: 100%; object-fit: contain; object-position: center; background: #050f2a; }
.portfolio-lightbox__close { position: absolute; top: 10px; right: 10px; z-index: 2; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 2px; background: white; color: var(--navy); font-size: 1.45rem; line-height: 1; cursor: pointer; }
.ad-spend-block { border-left: 3px solid var(--orange); background: #fffaf0; }
.future-slot { display: grid; gap: 4px; padding: 14px; border: 1px dashed #cbd8ee; background: #f8fbff; }
.future-slot p { margin: 0; color: var(--navy); font-weight: 520; }
.future-slot span { color: var(--muted); font-size: .92rem; }
.plan-modal__cta { justify-self: start; }
.modal-sticky-cta { position: sticky; bottom: 0; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 24px; border-top: 1px solid var(--line); background: rgba(255,255,255,.96); backdrop-filter: blur(14px); }
.modal-sticky-cta strong, .modal-sticky-cta span { display: block; }
.modal-sticky-cta strong { color: var(--navy); font-weight: 600; }
.modal-sticky-cta span { color: var(--muted); font-size: .86rem; }

/* ================================================================
   DARK PREMIUM REDESIGN — package plan detail modals.
   Applied via .plan-modal--dark on the visual detail modal. Every surface
   below is restyled to the site's dark visual system:
   base #050B1F · navy #071A44 · panel #08142F · highlight #0B1D42
   text #FFFFFF · secondary rgba(255,255,255,.60) · muted rgba(255,255,255,.42)
   accent #0A65FF · soft blue #77A7FF · whatsapp #18C964
   ================================================================ */
.plan-modal--dark .plan-modal__dialog {
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 4px;
  background: #050B1F;
  box-shadow: none;
  color: #FFFFFF;
}
/* ---- sticky header ---- */
.plan-modal--dark .plan-modal__header {
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(5,11,31,.96);
  backdrop-filter: blur(10px);
  color: #FFFFFF;
}
.plan-modal--dark .plan-modal__header .eyebrow { color: #77A7FF; letter-spacing: .04em; }
.plan-modal--dark .plan-modal__header h2 { color: #FFFFFF; font-weight: 620; }
.plan-modal--dark .plan-modal__close {
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 2px;
  background: transparent;
  color: #FFFFFF;
}
.plan-modal--dark .plan-modal__close:hover {
  border-color: rgba(10,101,255,.85);
  background: rgba(10,101,255,.12);
  color: #FFFFFF;
}
.plan-modal--dark .plan-modal__body {
  background: #050B1F;
  color: #FFFFFF;
  /* Use block flow, not the base modal's `display:grid`.
     A grid track auto-sizes an `overflow:hidden` item (the hero clips its ambient
     glow) down to a ~0 minimum contribution, collapsing the hero to ~90px and
     clipping all content. Block flow keeps every section in normal document flow
     with a single scroll region, exactly as required for this overlay. */
  display: block;
}
/* ---- hero area inside overlay ---- */
.plan-modal--dark .visual-hero {
  position: relative;
  overflow: hidden; /* intentional: clips the ambient ::before glow only; the intrinsic grid row (min-height:auto) now sizes the hero to its full content, so hero content itself is not clipped */
  isolation: isolate; /* keeps the glow relative to this hero instead of drifting across neighbors */
  grid-template-columns: 11fr 9fr;
  column-gap: 34px;
  align-items: center;
  min-height: 530px;
  padding: 64px 60px;
  background: linear-gradient(135deg, #071A44 0%, #0B1D42 55%, #11123A 100%);
  color: #FFFFFF;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.plan-modal--dark .visual-hero::before {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: 0;
  width: min(760px, 68%); height: min(560px, 78%); transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(10,101,255,.34), rgba(118,43,255,.13) 46%, transparent 72%);
  filter: blur(48px); opacity: .62; pointer-events: none;
  animation: modalGlowDrift 9s ease-in-out infinite alternate; /* frozen under prefers-reduced-motion by the global reduce rule */
}
.plan-modal--dark .visual-hero > * { position: relative; z-index: 1; }
@media (max-width: 1100px) {
  /* stack the ₹45K overlay hero on smaller widths; intrinsic row sizing (min-height:auto) keeps all content in normal flow */
  .plan-modal--dark .visual-hero { grid-template-columns: 1fr; min-height: 0; padding: 44px 36px; }
}
@media (max-width: 640px) {
  .plan-modal--dark .visual-hero { grid-template-columns: 1fr; min-height: 0; padding: 32px 20px; }
}
.plan-modal--dark .visual-hero .eyebrow { color: #77A7FF; }
.plan-modal--dark .visual-hero h3 { color: #FFFFFF; font-weight: 640; }
.plan-modal--dark .visual-hero p { color: rgba(255,255,255,.68); }
.plan-modal--dark .visual-price strong { color: #FFFFFF; }
.plan-modal--dark .visual-price span { color: rgba(255,255,255,.60); }
/* ---- six capability boxes ---- */
.plan-modal--dark .hero-feature-grid > span {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 3px;
  background: rgba(255,255,255,.035);
  color: #FFFFFF;
  font-weight: 480;
  box-shadow: none;
}
.plan-modal--dark .hero-feature-grid .platform-mark { background: transparent; border-color: transparent; }
/* ---- dark metrics rail (replaces the white strip) ---- */
.plan-modal--dark .quick-stats-strip {
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: #08142F;
}
.plan-modal--dark .quick-stats-strip div { border-right: 1px solid rgba(255,255,255,.08); }
.plan-modal--dark .quick-stats-strip div:last-child { border-right: 0; }
.plan-modal--dark .quick-stats-strip strong { color: #FFFFFF; font-weight: 620; }
.plan-modal--dark .quick-stats-strip span { color: rgba(255,255,255,.48); }
/* ---- section anchor nav ---- */
.plan-modal--dark .modal-section-nav {
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: #050B1F;
}
.plan-modal--dark .modal-section-nav a { color: rgba(255,255,255,.55); }
.plan-modal--dark .modal-section-nav a:hover { color: #77A7FF; border-bottom-color: #0A65FF; }
/* ---- generic content blocks ---- */
.plan-modal--dark .plan-detail-block {
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 3px;
  background: #08142F;
  color: #FFFFFF;
}
.plan-modal--dark .overview-grid { background: #050B1F; border: 0; }
.plan-modal--dark .plan-detail-block h3 { color: #FFFFFF; font-weight: 600; }
.plan-modal--dark .plan-detail-block p { color: rgba(255,255,255,.60); }
.plan-modal--dark .plan-detail-block ul { color: #FFFFFF; }
.plan-modal--dark .plan-detail-block li { color: rgba(255,255,255,.72); }
.plan-modal--dark .plan-detail-block li::before { color: #18C964; }
.plan-modal--dark .overview-grid h3 { color: #FFFFFF; font-weight: 600; }
.plan-modal--dark .overview-grid p { color: rgba(255,255,255,.60); }
.plan-modal--dark .summary-panel > span {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 3px;
  background: rgba(255,255,255,.035);
  color: #FFFFFF;
}
.plan-modal--dark .summary-panel .platform-mark { color: #77A7FF; }
.plan-modal--dark .detail-pair-grid div,
.plan-modal--dark .named-list article,
.plan-modal--dark .roadmap-grid article {
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 3px;
  background: rgba(255,255,255,.03);
  box-shadow: none;
}
.plan-modal--dark .named-list article:hover { border-color: rgba(10,101,255,.5); }
.plan-modal--dark .detail-pair-grid span,
.plan-modal--dark .bonus-value span,
.plan-modal--dark .roadmap-grid span { color: rgba(255,255,255,.48); }
.plan-modal--dark .detail-pair-grid strong, .plan-modal--dark .bonus-value strong { color: #FFFFFF; }
.plan-modal--dark .named-list h4, .plan-modal--dark .roadmap-grid h4 { color: #FFFFFF; font-weight: 580; }
.plan-modal--dark .named-list p { color: rgba(255,255,255,.60); }
.plan-modal--dark .plan-offering-grid article { border-color: rgba(255,255,255,.10); background: rgba(255,255,255,.03); }
.plan-modal--dark .plan-offering-grid h4 { color: #FFFFFF; }
.plan-modal--dark .plan-offering-grid .platform-mark { color: #77A7FF; }
/* ---- roadmap ---- */
.plan-modal--dark .roadmap-section { background: #050B1F; }
.plan-modal--dark .roadmap-grid::before {
  background: linear-gradient(90deg, #0A65FF, #77A7FF, #18C964);
  opacity: .5;
}
.plan-modal--dark .roadmap-grid article { border-right: 0; }
.plan-modal--dark .roadmap-grid article:last-child { border-right: 1px solid rgba(255,255,255,.10); }
.plan-modal--dark .roadmap-grid span {
  border: 1px solid rgba(10,101,255,.7);
  background: #0B1D42;
  color: #77A7FF;
  font-weight: 600;
}
.plan-modal--dark .roadmap-grid li { color: rgba(255,255,255,.72); }
.plan-modal--dark .roadmap-grid li::before { color: #18C964; }
/* ---- bonus value block (limited period bonus) ---- */
.plan-modal--dark .visual-bonus {
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(135deg, #071A44, #0B1D42);
  color: #FFFFFF;
}
.plan-modal--dark .visual-bonus .eyebrow { color: #77A7FF; }
.plan-modal--dark .visual-bonus h3 { color: #FFFFFF; }
.plan-modal--dark .visual-bonus > p { color: rgba(255,255,255,.66); }
.plan-modal--dark .visual-bonus .named-list article {
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.035);
}
.plan-modal--dark .visual-bonus .named-list h4 { color: #FFFFFF; }
.plan-modal--dark .visual-bonus .named-list p { color: rgba(255,255,255,.62); }
.plan-modal--dark .visual-bonus .platform-mark { color: #FFB000; }
.plan-modal--dark .bonus-value {
  border: 1px solid rgba(255,159,0,.55);
  background: rgba(255,159,0,.05);
}
.plan-modal--dark .visual-bonus .bonus-value span { color: rgba(255,255,255,.62); }
.plan-modal--dark .visual-bonus .bonus-value strong { color: #FFB000; }
.plan-modal--dark .bonus-summary-strip span {
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.045);
  color: rgba(255,255,255,.82);
}
/* ---- bonus services stack ---- */
.plan-modal--dark .bonus-services { background: #050B1F; border: 0; }
.plan-modal--dark .bonus-services__intro {
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: #050B1F;
}
.plan-modal--dark .bonus-services__intro .eyebrow { color: #77A7FF; }
.plan-modal--dark .bonus-services__intro h3 { color: #FFFFFF; font-weight: 620; }
.plan-modal--dark .bonus-services__intro p:last-child { color: rgba(255,255,255,.60); }
.plan-modal--dark .bonus-service {
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 3px;
  background: #08142F;
  box-shadow: none;
}
.plan-modal--dark .bonus-service:nth-child(even) { background: #0B1D42; }
.plan-modal--dark .bonus-service:last-child { border-bottom: 1px solid rgba(255,255,255,.10); }
.plan-modal--dark .bonus-service__copy p { color: #77A7FF; }
.plan-modal--dark .bonus-service__copy h4 { color: #FFFFFF; font-weight: 620; }
.plan-modal--dark .bonus-service__copy strong { color: #FFFFFF; }
.plan-modal--dark .bonus-service__copy span { color: rgba(255,255,255,.62); }
/* logo / illustration panels rest on dark; keep brand assets as-is */
.plan-modal--dark .service-logo-panel { background: rgba(255,255,255,.03); border-radius: 3px; }
.plan-modal--dark .service-logo-panel > span { color: #FFFFFF; }
.plan-modal--dark .service-logo-panel--grid span { background: rgba(255,255,255,.04); color: rgba(255,255,255,.8); }
.plan-modal--dark .service-logo-panel--crm > span { color: #FFFFFF; }
.plan-modal--dark .service-logo-panel--crm > b { color: rgba(255,255,255,.5); }
/* ---- carousels (static posts + video) ---- */
.plan-modal--dark .bonus-carousel {
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 3px;
  background: #08142F;
}
.plan-modal--dark .bonus-carousel__top { border-bottom: 1px solid rgba(255,255,255,.10); }
.plan-modal--dark .bonus-carousel__top span { color: #FFFFFF; }
.plan-modal--dark .bonus-carousel__top button {
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 2px;
  background: rgba(255,255,255,.03);
  color: #FFFFFF;
}
.plan-modal--dark .bonus-carousel__top button:hover { border-color: rgba(10,101,255,.8); color: #77A7FF; }
.plan-modal--dark .bonus-carousel__dots span { background: rgba(255,255,255,.22); }
.plan-modal--dark .bonus-carousel__dots span:first-child { background: #0A65FF; }
/* static-post image slides keep artwork untouched; only the frame darkens */
.plan-modal--dark .bonus-slide--image { background: #050B1F; border: 1px solid rgba(255,255,255,.08); }
.plan-modal--dark .portfolio-preview-trigger { background: #050B1F; }
/* video poster slides already dark — keep, just match palette */
.plan-modal--dark .bonus-service--carousel[id*="video"] .bonus-slide { background: #0B1D42; }
.plan-modal--dark .video-preview-trigger { background: #0B1D42; }
.plan-modal--dark .video-preview-trigger::after { background: linear-gradient(180deg, rgba(5,11,31,0) 34%, rgba(5,11,31,.82) 100%); }
.plan-modal--dark .bonus-slide__play { border: 1px solid rgba(255,255,255,.4); background: rgba(5,11,31,.34); }
/* video bonus service section */
.plan-modal--dark .bonus-service[id="bonus-video-creation-editing"] { background: #071A44; }
.plan-modal--dark .bonus-service[id="bonus-video-creation-editing"] .bonus-service__copy h4,
.plan-modal--dark .bonus-service[id="bonus-video-creation-editing"] .bonus-service__copy strong { color: #FFFFFF; }
.plan-modal--dark .bonus-service[id="bonus-video-creation-editing"] .bonus-service__copy p { color: #77A7FF; }
.plan-modal--dark .bonus-service[id="bonus-video-creation-editing"] .bonus-service__copy span { color: rgba(255,255,255,.66); }
/* ---- advertising budget (was pale yellow) ---- */
.plan-modal--dark .ad-spend-block {
  border: 1px solid rgba(255,255,255,.10);
  border-left: 2px solid #FF9F00;
  background: rgba(255,159,0,.05);
}
.plan-modal--dark .ad-spend-block h3 { color: #FFFFFF; font-weight: 600; }
.plan-modal--dark .ad-spend-block p { color: rgba(255,255,255,.62); }
/* ---- future / empty slot ---- */
.plan-modal--dark .future-slot { border: 1px dashed rgba(255,255,255,.18); background: rgba(255,255,255,.02); }
.plan-modal--dark .future-slot p { color: #FFFFFF; }
.plan-modal--dark .future-slot span { color: rgba(255,255,255,.5); }
/* ---- sticky bottom CTA bar ---- */
.plan-modal--dark .modal-sticky-cta {
  border-top: 1px solid rgba(255,255,255,.10);
  background: rgba(5,11,31,.96);
  backdrop-filter: blur(14px);
}
.plan-modal--dark .modal-sticky-cta strong { color: #FFFFFF; font-weight: 620; }
.plan-modal--dark .modal-sticky-cta span { color: rgba(255,255,255,.5); }
/* Enquire button uses the site's shared dark WhatsApp CTA (already dark).
   Only soften the radius to match the modal's sharp geometry. */
.plan-modal--dark .plan-modal__cta { border-radius: 999px; }
.plan-modal--dark .modal-sticky-cta .btn-whatsapp { width: auto; }

/* Keep the decorative process background clipped to this section. */
.video-section { position: relative; overflow: hidden; overflow: clip; padding: 118px 0 128px; background: linear-gradient(180deg, #050b1f 0%, #071a44 72%, #081225 100%); color: white; }
.video-section::before { content: ""; position: absolute; left: 50%; top: 47%; width: min(980px, 86vw); height: 390px; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(10,101,255,.26), rgba(10,101,255,.08) 45%, transparent 72%); filter: blur(46px); opacity: .78; pointer-events: none; }
.video-section::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(119,167,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(119,167,255,.04) 1px, transparent 1px); background-size: 58px 58px; mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent); pointer-events: none; }
.video-layout { position: relative; z-index: 1; width: min(1320px, calc(100% - 48px)); display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(280px, .9fr); gap: 28px; }
.process-dashboard-dock { align-self: start; }

/* Process media remains a regular in-flow destination. The image → coin
   animation is driven by the hero runway above. */
.video-sticky-region {
  width: 100%;
  min-width: 0;
  position: relative;
  align-self: start;
}
.video-sticky {
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  z-index: 2;
  position: sticky;
  top: clamp(70px, 12vh, 120px);
}
.transition-bridge {
  position: relative;
  height: 240vh;
  background: transparent;
  background-image: none;
  border: none;
  box-shadow: none;
}
.transition-bridge::before,
.transition-bridge::after {
  content: none;
}
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .transition-bridge { display: none; }
  .video-sticky { position: static; top: auto; }
}
.video-section-heading { max-width: 850px; text-align: center; margin: 0 auto 48px; }
.video-section-heading .eyebrow { color: #77a7ff; letter-spacing: .04em; }
.video-section-heading h2 { color: white; font-size: clamp(3.25rem, 5vw, 4rem); font-weight: 640; line-height: 1.08; }
.video-section-heading p { max-width: 720px; margin: 0 auto; color: rgba(255,255,255,.62); font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.6; }
.video-showcase { position: relative; width: min(1180px, 90vw); }
.video-showcase::before { content: ""; position: absolute; inset: -28px 8% auto; height: 110px; background: linear-gradient(90deg, transparent, rgba(10,101,255,.28), transparent); filter: blur(30px); opacity: .7; transition: opacity 0.3s ease; }
.video-showcase--coin-phase::before { opacity: 0 !important; }
.video-panel { position: relative; aspect-ratio: 16 / 9; width: 100%; min-height: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; background: #08142f; box-shadow: 0 34px 110px rgba(0,0,0,.28); transition: opacity 0.3s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
.video-panel img { width: 100%; height: 100%; object-fit: cover; opacity: .68; filter: saturate(.92) contrast(1.05); transition: opacity 0.3s ease; }
.video-panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,11,31,.12), rgba(5,11,31,.28)), radial-gradient(circle at center, transparent 0%, rgba(5,11,31,.28) 72%); pointer-events: none; transition: opacity 0.3s ease; }
.video-panel--collapsed { background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
.video-panel--collapsed img { opacity: 0 !important; }
.video-panel--collapsed::after { opacity: 0 !important; }
.video-panel--collapsed .play-button,
.video-panel--collapsed .video-chrome--top,
.video-panel--collapsed .video-chrome--bottom { opacity: 0 !important; pointer-events: none; }
.play-button { position: absolute; inset: 50% auto auto 50%; z-index: 2; transform: translate(-50%, -50%); width: 88px; height: 88px; border: 0; border-radius: 50%; background: white; box-shadow: 0 0 0 10px rgba(255,255,255,.08); cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
.play-button:hover { transform: translate(-50%, -50%) scale(1.05); box-shadow: 0 0 0 14px rgba(255,255,255,.1); }
.play-button::after { content: ""; position: absolute; left: 36px; top: 27px; border-left: 25px solid var(--blue); border-top: 17px solid transparent; border-bottom: 17px solid transparent; }
.video-chrome { position: absolute; z-index: 2; color: rgba(255,255,255,.72); font-size: .78rem; font-weight: 560; letter-spacing: .04em; text-transform: uppercase; }
.video-chrome--top { left: 22px; top: 18px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.12); background: rgba(5,11,31,.38); backdrop-filter: blur(12px); }
.video-chrome--bottom { left: 22px; bottom: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.video-chrome--bottom span { padding: 8px 10px; border: 1px solid rgba(255,255,255,.12); background: rgba(5,11,31,.38); backdrop-filter: blur(12px); color: rgba(255,255,255,.78); }
.video-panel.played::before { content: "Process video placeholder. Connect the real DRC India process video here when it is supplied."; position: absolute; inset: 0; display: grid; place-items: center; z-index: 3; padding: 28px; background: rgba(5,11,31,.84); color: white; font-weight: 520; text-align: center; }

/* Static decorative ₹ token for the future Process → Packages transition.
   Purely decorative overlay centered on the Process video area. Hidden by
   default everywhere — a later stage will reveal/animate it. The video panel
   itself is never moved, cloned or modified by this element. */
.rupee-token {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  perspective: 900px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 3;
}
.rupee-token__scene {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
.rupee-token__coin {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
/* Shared coin-face styling: premium gold material, reflective highlights. */
.rupee-token__face,
.rupee-token__disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  backface-visibility: hidden;
}
.rupee-token__face {
  display: grid;
  place-items: center;
  font-size: 64px;
  font-weight: 680;
  line-height: 1;
}
.rupee-token__face--front {
  transform: translateZ(14px);
  color: #f5d547;
  background:
    radial-gradient(ellipse at 30% 25%, rgba(255, 235, 180, 0.9) 0%, transparent 45%),
    radial-gradient(ellipse at 70% 70%, rgba(255, 215, 100, 0.6) 0%, transparent 50%),
    conic-gradient(from 180deg at 50% 50%,
      #daa520 0%,
      #ffd700 15%,
      #fff8dc 30%,
      #ffd700 45%,
      #daa520 60%,
      #b8860b 75%,
      #daa520 100%);
  border: 2px solid #c9a02e;
  box-shadow:
    inset 0 0 30px rgba(255, 215, 0, 0.35),
    inset 0 -6px 18px rgba(0, 0, 0, 0.45),
    inset 0 6px 12px rgba(255, 248, 220, 0.25),
    0 0 40px rgba(218, 165, 32, 0.25),
    0 10px 30px rgba(0, 0, 0, 0.4);
  text-shadow:
    0 0 12px rgba(255, 215, 0, 0.8),
    0 2px 6px rgba(0, 0, 0, 0.5),
    0 -1px 2px rgba(255, 248, 220, 0.3);
}
.rupee-token__face--back {
  transform: rotateY(180deg) translateZ(14px);
  color: rgba(255, 215, 0, 0.4);
  background:
    radial-gradient(ellipse at 30% 30%, rgba(255, 235, 180, 0.4) 0%, transparent 50%),
    conic-gradient(from 0deg at 50% 50%,
      #b8860b 0%,
      #daa520 20%,
      #c9a02e 40%,
      #b8860b 60%,
      #996515 80%,
      #b8860b 100%);
  border: 2px solid #a68824;
  box-shadow:
    inset 0 0 20px rgba(218, 165, 32, 0.2),
    0 0 24px rgba(184, 134, 11, 0.15);
}
/* Intermediate discs fake the coin's thickness/edge between the two faces. */
.rupee-token__disc--mid {
  transform: translateZ(7px);
  background: #c9a02e;
  border: 3px solid #daa520;
  box-shadow:
    inset 0 0 10px rgba(218, 165, 32, 0.3),
    0 0 14px rgba(218, 165, 32, 0.2);
}
.rupee-token__disc--deep {
  transform: translateZ(-7px);
  background: #996515;
  border: 3px solid #b8860b;
  box-shadow:
    inset 0 0 10px rgba(0, 0, 0, 0.6),
    0 0 10px rgba(184, 134, 11, 0.12);
}
/* Thickness ring for stronger 3D read */
.rupee-token__edge {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(218, 165, 32, 0.4);
  background:
    linear-gradient(180deg,
      rgba(255, 235, 180, 0.3) 0%,
      transparent 30%,
      transparent 70%,
      rgba(218, 165, 32, 0.2) 100%);
  pointer-events: none;
}
/* Desktop gets the full static 3D tilt; the token stays hidden either way. */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .rupee-token__scene {
    transform: rotateX(-14deg) rotateY(20deg);
  }
}

/* Transition proxies for coin split and card morph */
.rupee-token--split {
  position: fixed;
  top: 0;
  left: 0;
  width: 150px;
  height: 150px;
  margin: 0;
  perspective: 900px;
  z-index: 100;
  pointer-events: none;
  will-change: transform, opacity;
}
.rupee-token--split .rupee-token__scene {
  transform: none !important;
}
.rupee-token--split .rupee-token__coin {
  transform-style: preserve-3d;
}

.package-proxy {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 99;
  will-change: transform, opacity, width, height, border-radius;
  overflow: hidden;
}
.package-proxy > .package-card {
  opacity: 0;
  transition: opacity 0.15s ease;
}
.package-proxy--visible > .package-card {
  opacity: 1;
}

.package-section--transition-active .package-card {
  visibility: hidden;
}
.package-section--transition-active .package-card::before,
.package-section--transition-active .package-card::after {
  display: none;
}

@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .package-section--transition-active .package-card {
    visibility: visible;
  }
}

.process-preview-strip { width: min(980px, 90vw); display: grid; grid-template-columns: repeat(5, 1fr); margin: 28px auto 0; border-top: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1); }
.process-preview-strip span { display: grid; gap: 5px; padding: 18px 16px; border-right: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.72); font-size: .9rem; font-weight: 430; }
.process-preview-strip span:last-child { border-right: 0; }
.process-preview-strip strong { color: #77a7ff; font-size: .82rem; font-weight: 560; }
.video-section-cta { display: grid; justify-items: center; gap: 10px; margin-top: 34px; }
.video-section-cta .btn-whatsapp { border-radius: 999px; }
.video-section-cta p { margin: 0; color: rgba(255,255,255,.46); font-size: .94rem; }

.stars { color: var(--orange); margin-bottom: 12px; letter-spacing: 0; font-weight: 500; }

.closing-cta { position: relative; overflow: hidden; padding: 96px 0 104px; background: linear-gradient(180deg, #071A44 0%, #050B1F 100%); color: #fff; text-align: center; }
.closing-cta-glow { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); width: min(64vw, 720px); height: 420px; background: radial-gradient(circle, rgba(10,101,255,.20), transparent 64%); opacity: .5; filter: blur(10px); pointer-events: none; }
.closing-cta-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(90,130,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(90,130,255,.035) 1px, transparent 1px); background-size: 64px 64px; opacity: .6; mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 70%); pointer-events: none; }
.closing-cta-inner { position: relative; z-index: 1; max-width: 760px; margin-inline: auto; display: grid; justify-items: center; }
.closing-cta .eyebrow { color: #77A7FF; letter-spacing: .04em; font-weight: 500; }
.closing-cta h2 { color: #fff; font-size: clamp(2.25rem, 5vw, 4rem); font-weight: 620; line-height: 1.04; margin-bottom: 16px; }
.closing-cta p { color: rgba(255,255,255,.60); font-size: 1.02rem; max-width: 560px; margin-bottom: 30px; }
.closing-cta .btn-whatsapp { border-radius: 999px; box-shadow: none; }

.faq-section { position: relative; padding: 80px 0 92px; background: #050B1F; color: #fff; border-top: 1px solid rgba(255,255,255,0.06); }
.faq-layout { align-items: start; grid-template-columns: 38% 62%; gap: 56px; }
.faq-intro .eyebrow { color: #77A7FF; letter-spacing: .04em; font-weight: 500; }
.faq-intro h2 { color: #fff; font-size: clamp(1.9rem, 3.4vw, 2.85rem); font-weight: 620; line-height: 1.05; margin-bottom: 14px; }
.faq-intro p { color: rgba(255,255,255,.60); max-width: 360px; }
.faq-list { display: block; border-top: 1px solid rgba(255,255,255,.10); }
.faq-item { position: relative; background: transparent; border: 0; border-radius: 0; border-bottom: 1px solid rgba(255,255,255,.10); box-shadow: none; transition: background-color .22s ease; }
.faq-item.open { background: rgba(8,20,47,.70); }
.faq-item.open::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: #77A7FF; }
.faq-question { width: 100%; border: 0; background: transparent; padding: 22px 18px; display: flex; justify-content: space-between; gap: 18px; align-items: center; text-align: left; color: #fff; font: inherit; font-size: 1rem; font-weight: 520; cursor: pointer; }
.faq-question b { flex: 0 0 auto; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; color: #77A7FF; font-weight: 500; font-size: 1.1rem; line-height: 1; transition: transform .22s ease, color .22s ease; }
.faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s ease; }
.faq-answer > div { overflow: hidden; padding: 0 18px; }
.faq-answer p { color: rgba(255,255,255,.60); font-size: .95rem; line-height: 1.6; }
.faq-item.open .faq-answer { grid-template-rows: 1fr; }
.faq-item.open .faq-answer > div { padding-bottom: 22px; }
.faq-item.open .faq-question b { transform: rotate(45deg); }

.final-cta {
  background: linear-gradient(180deg, #050B1F 0%, #071A44 55%, #050B1F 100%);
  padding: 90px 0 100px;
  color: #fff;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.final-card {
  padding: 0;
  max-width: 760px;
  margin: 0 auto;
  color: white;
  text-align: center;
}
.final-card h2 { color: white; }
.final-card p { color: rgba(255,255,255,0.60); }

.footer { background: #050f2a; color: white; padding: 34px 0 18px; }
.footer-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.footer strong { font-weight: 560; }
.footer p, .footer address { color: rgba(255,255,255,.68); font-weight: 400; font-style: normal; margin-bottom: 0; }
.footer a { display: inline-flex; color: white; font-weight: 520; margin-bottom: 8px; }
.copyright { border-top: 1px solid rgba(255,255,255,.12); padding-top: 16px; margin-top: 24px; color: rgba(255,255,255,.6); font-weight: 400; }
.sticky-whatsapp { position: fixed; right: 22px; bottom: 22px; z-index: 45; display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 11px; border: 1px solid rgba(24,201,100,.5); border-radius: 999px; background: linear-gradient(135deg, rgba(24,201,100,.16) 0%, rgba(24,201,100,.05) 45%, rgba(10,101,255,.10) 100%), rgba(6,13,32,.78); color: white; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 10px 30px rgba(3,8,20,.45); backdrop-filter: blur(12px); font-weight: 520; font-size: .92rem; transition: transform .2s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease; }
.sticky-whatsapp:hover { border-color: rgba(24,201,100,.85); background: linear-gradient(135deg, rgba(24,201,100,.24) 0%, rgba(24,201,100,.08) 45%, rgba(10,101,255,.14) 100%), rgba(7,16,38,.88); color: white; transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), 0 12px 32px rgba(3,8,20,.5); }

/* ===== Background Utilities ===== */
.bg-deep { background: #030817; }
.bg-navy { background: #050B1F; }
.bg-purple { background: #07142F; }
.bg-dark-navy { background: #071A44; }
.bg-darker { background: #0A1230; }

.ambient-glow::before,
.ambient-glow::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}
.ambient-glow::before {
  background: radial-gradient(circle at 50% 45%, rgba(74, 99, 255, 0.11), transparent 55%);
  animation: glowPulse 6s ease-in-out infinite;
}
.ambient-glow::after {
  background: radial-gradient(ellipse at 50% 50%, rgba(130, 52, 220, 0.09), transparent 60%);
  animation: glowPulse2 8s ease-in-out infinite;
}

.technical-grid {
  background-image:
    linear-gradient(rgba(90,130,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90,130,255,.035) 1px, transparent 1px);
  background-size: 64px 64px;
}

.grain-overlay {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  opacity: 0.02;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

.parallax-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: transform;
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.7; }
}
@keyframes glowPulse2 {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.6; }
}

/* ===== Section Background Updates ===== */

/* Packages section: add ambient glow behind middle package.
   Background continues the Process → Packages bridge's dark environment
   (bridge ends at #081225) using the .video-section palette, so no light
   flash appears between Process and Packages regardless of active theme. */
.package-section {
  position: relative;
  overflow: hidden;
  padding: 118px 0 132px;
  border-top: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, #081225 0%, #071a44 52%, #050b1f 100%);
  color: white;
}
.package-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, rgba(74, 99, 255, 0.11), transparent 55%);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.8s ease;
  transform: translate3d(0, calc(var(--scroll-y, 0) * -0.025px), 0);
  will-change: transform;
}
.package-section.visible::before {
  opacity: 0.15;
}

/* Comparison section: add technical grid */
.comparison-table-wrap {
  position: relative;
}
.comparison-table-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(90,130,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90,130,255,.035) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.4;
  pointer-events: none;
  z-index: -1;
}

/* Testimonials section: add purple spotlight */
.testimonials-section {
  position: relative;
  overflow: hidden;
}
.testimonials-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(130, 52, 220, 0.09), transparent 60%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease;
}
.testimonials-section.visible::before {
  opacity: 0.2;
}

/* FAQ section: keep calm, just subtle gradient */
.faq-section {
  background: linear-gradient(180deg, #050B1F 0%, #071A44 40%, #050B1F 100%);
}

/* Footer: flat deep navy */
.footer {
  background: #030817;
}

/* Add subtle top border between sections where appropriate */
.section {
  border-top: 1px solid rgba(255,255,255,0.03);
}
.section:first-child {
  border-top: 0;
}

/* Hero: keep existing but ensure it works with new system */
.hero {
  position: relative;
  overflow: hidden;
}
.hero::before,
.hero::after {
  /* existing pseudo-elements remain */
}

/* Ensure grain overlay is on body */
body {
  position: relative;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.018;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter2)'/%3E%3C/svg%3E");
}

.reveal { opacity: 0; transform: translateY(14px); transition: opacity .42s ease, transform .42s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

@keyframes heroGlow {
  from { opacity: .72; transform: translateX(-50%) translateY(10px) scaleX(.94); }
  to { opacity: .95; transform: translateX(-50%) translateY(-4px) scaleX(1.04); }
}

@keyframes floatDetail {
  from { transform: translateY(0); }
  to { transform: translateY(-8px); }
}

@keyframes whatsappGreenFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

@keyframes modalGlowDrift {
  from { transform: translate(-50%, -50%) scaleX(.92) translateY(10px); opacity: .55; }
  to { transform: translate(-50%, -50%) scaleX(1.06) translateY(-6px); opacity: .72; }
}

/* Shared Element Transition Styles */
.shared-transition-stage {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998; /* above content, below modals */
  perspective: 1200px;
  overflow: hidden;
}
/* OUTER traveller: owns screen-space geometry only (left/top/width/height).
   No viewport-sized box — explicit pixel size and position are set by JS so
   that at progress 0 it exactly overlays the real hero dashboard rectangle. */
.shared-dashboard-traveller {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;   /* overridden inline by JS to the source/interpolated width */
  height: 0;  /* overridden inline by JS to the source/interpolated height */
  transform-origin: top left;
  pointer-events: none;
  will-change: transform, width, height;
}
/* INNER depth layer: owns ONLY translateZ / rotateX / rotateY. Its pixel size
   tracks the traveller so the cloned content stays full-bleed inside it. */
.shared-dashboard-depth {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-origin: center center;
  transform-style: preserve-3d;
  pointer-events: none;
  will-change: transform;
}
/* The dashboard clone inside the depth layer renders as a static full-bleed copy. */
.shared-dashboard-depth > .hero-dashboard,
.shared-dashboard-depth > .hero-dashboard * {
  pointer-events: none !important;
}
.hero-dashboard--hidden {
  visibility: hidden !important;
}
/* Process Dashboard Dock — a real rectangular destination socket. Height is
   driven by an inline aspect-ratio (derived from the hero dashboard by JS),
   NOT the old height:0 hack which collapsed under global border-box. */
.process-dashboard-dock {
  position: relative;
  width: 100%;
  aspect-ratio: var(--dashboard-aspect, 4 / 3);
  min-height: 220px;
  margin: 24px 0;
  border-radius: 12px;
  background: rgba(7, 26, 68, 0.4);
  border: 1px solid rgba(10, 101, 255, 0.2);
  box-shadow: 0 10px 40px rgba(10, 101, 255, 0.08), inset 0 0 30px rgba(10, 101, 255, 0.06);
  backdrop-filter: blur(10px);
  overflow: hidden;
}
.process-dashboard-dock::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(10,101,255,0.15) 0%, transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.process-dashboard-dock.filled::before {
  opacity: 1;
}
/* The cloned dashboard inside the dock is scaled to fill the dock rect. */
.process-dashboard-dock > .hero-dashboard {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: top left;
  z-index: 1;
  pointer-events: none;
}

/* Existing media queries follow */
@media (max-width: 1024px) {
  .hero-grid, .split { grid-template-columns: 1fr; }
  .main-nav { gap: 18px; }
  .header-inner { grid-template-columns: auto 1fr auto; }
  .hero { height: 100vh; min-height: 820px; padding: 0; }
  .hero-shell { padding-top: 120px; }
  .hero h1 { font-size: clamp(3.45rem, 7vw, 4.8rem); }
  .hero-dashboard { position: absolute; left: 50%; bottom: -96px; width: min(94vw, 920px); min-height: 0; margin-top: 0; transform: translateX(-50%); }
  .dashboard-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard-card--wide { grid-column: 1 / -1; min-height: 150px; }
  .floating-detail--one { left: 16px; }
  .floating-detail--two { right: 16px; }
  .pain-grid, .service-grid, .package-grid, .testimonial-grid { grid-template-columns: repeat(2, 1fr); }
  .package-section .package-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .package-section .package-card.featured { grid-column: span 2; }
  .proof-grid { grid-template-columns: repeat(2, 1fr); }
  .package-card.featured { transform: none; }
  .plan-modal { padding: 3vh 3vw; }
  .plan-modal__dialog { width: 94vw; height: 92vh; }
  .visual-hero, .overview-grid, .bonus-service { grid-template-columns: 1fr; }
  .hero-feature-grid, .summary-panel, .quick-stats-strip { grid-template-columns: repeat(2, 1fr); }
  .bonus-service { max-height: none; gap: 18px; }
  .bonus-service--carousel .bonus-slide { flex-basis: calc((100% - 14px) / 2); }
  .bonus-service--carousel .bonus-slide--image { flex-basis: calc((100% - 16px) / 2); min-width: 240px; max-width: none; height: auto; min-height: 0; }
  .bonus-slide--image .portfolio-preview-trigger { min-height: 330px; }
  .bonus-service--carousel[id*="video"] .bonus-slide { flex-basis: calc((100% - 14px) / 2); min-width: 180px; }
}

@media (max-width: 640px) {
  .container { width: min(100% - 28px, 1120px); }
  .section { padding: 52px 0; }
  .header-inner { min-height: 66px; }
  .brand img { width: 42px; height: 42px; }
  .brand small, .phone-link, .main-nav { display: none; }
  .header-actions .btn { min-height: 40px; padding: 0 13px; font-size: .88rem; }
  .hero { height: 100vh; min-height: 780px; max-height: 900px; padding: 0; }
  .hero::before { left: 0; right: 0; top: 78px; height: 210px; background-size: 58px 42px; opacity: .34; transform: perspective(580px) rotateX(60deg); }
  .hero::after { left: -18%; right: -18%; bottom: 122px; height: 270px; background-size: 64px 42px; }
  .hero-glow { bottom: 174px; height: 150px; width: 118vw; filter: blur(28px); }
  h1 { font-size: clamp(2.08rem, 10.8vw, 3rem); line-height: 1.05; }
  .hero-shell { padding-top: 86px; }
  .hero h1 { font-size: clamp(2.75rem, 12.5vw, 4rem); line-height: .98; margin-bottom: 18px; }
  h2 { font-size: clamp(1.65rem, 8vw, 2.25rem); }
  .hero-eyebrow { min-height: auto; padding: 9px 10px; font-size: .64rem; line-height: 1.35; text-align: center; }
  .hero-text { max-width: 95%; font-size: 1rem; line-height: 1.42; margin-bottom: 24px; }
  .hero-cta-group { width: auto; }
  .hero-cta-group .btn { width: auto; }
  .btn { width: 100%; }
  .microcopy { font-size: .86rem; }
  .hero-dashboard { position: absolute; left: 50%; bottom: -80px; width: calc(100vw - 28px); min-height: 0; margin-top: 0; transform: translateX(-50%); border-radius: 6px 6px 0 0; }
  .dashboard-topbar { grid-template-columns: auto 1fr; min-height: 46px; padding: 0 12px; }
  .dashboard-topbar strong { justify-self: start; font-size: .78rem; }
  .dashboard-topbar small { display: none; }
  .dashboard-grid { grid-template-columns: 1fr; gap: 10px; padding: 10px; }
  .dashboard-card { min-height: 102px; padding: 13px; }
  .dashboard-card--wide { min-height: 158px; }
  .media-card { min-height: 145px; }
  .dashboard-card:nth-child(3), .dashboard-card:nth-child(4), .dashboard-card:nth-child(5) { display: none; }
  .floating-detail { position: static; width: 100%; justify-content: center; margin-top: 8px; animation: none; }
  .floating-detail--two, .floating-detail--three { display: none; }
  .hero-trust-row { margin-top: 26px; gap: 8px 14px; font-size: .78rem; }
  .result-card { padding: 10px 12px; }
  .card-top { left: 8px; top: 16px; }
  .card-mid { right: 8px; top: 118px; }
  .card-bottom { left: 8px; right: 8px; bottom: 14px; }
  .proof-grid, .pain-grid, .service-grid, .package-grid, .testimonial-grid, .footer-inner { grid-template-columns: 1fr; }
  .package-section { padding: 82px 0 94px; }
  .package-section .section-heading { margin-bottom: 30px; }
  .package-section h2 { font-size: clamp(2.25rem, 9.5vw, 2.85rem); }
  .package-section .section-heading p { font-size: .98rem; }
  .package-section .package-grid { width: min(100% - 28px, 1120px); grid-template-columns: 1fr; gap: 18px; }
  .package-section .package-card.featured { grid-column: auto; }
  .package-card { padding: 26px 22px; }
  .package-price strong { font-size: clamp(2.25rem, 11vw, 2.9rem); }
  .positioning-section { padding: 78px 0 90px; }
  .positioning-section::after { top: 210px; width: 70vw; height: 520px; opacity: .34; }
  .positioning-section .section-heading { margin-bottom: 24px; }
  .positioning-section .section-heading h2 { font-size: clamp(2.125rem, 10vw, 2.65rem); line-height: 1; }
  .comparison-shell { margin-top: 24px; }
  .comparison-table-wrap { margin-inline: -20px; border-left: 0; border-right: 0; border-radius: 0; }
  .comparison-table { min-width: 840px; }
  .comparison-table th, .comparison-table td { padding: 15px 14px; font-size: .88rem; }
  .comparison-table thead th { height: 68px; }
  .comparison-table th:first-child { position: sticky; left: 0; z-index: 2; width: 210px; box-shadow: 1px 0 0 rgba(255,255,255,.075); }
  .comparison-table thead th:first-child { z-index: 4; background: #071a44; }
  .comparison-table tbody th:first-child { background: #08142f; }
  .comparison-scroll-hint { display: block; padding-inline: 0; }
  .service-section { padding: 76px 0 88px; }
  .service-section .section-heading h2 { font-size: clamp(2.1rem, 9.5vw, 2.65rem); }
  .service-section .section-heading p:last-child { font-size: .96rem; }
  .service-section .service-grid { margin-top: 26px; }
  .service-rail { grid-template-columns: 1fr; border-radius: 3px; }
  .service-zone { min-height: 0; padding: 24px 22px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .service-zone:last-child { border-bottom: 0; }
  .service-zone__visual { height: 32px; margin: 16px 0 14px; }
  .service-zone__visual img { max-width: 34px; height: 30px; }
  .service-zone__visual svg { width: 32px; height: 32px; }
  .service-zone h3 { font-size: 1.25rem; }
  .service-zone p { font-size: .95rem; }
  .service-section .section-cta { margin-top: 28px; }
  .service-section .section-cta .btn { width: 100%; }
  .plan-modal { padding: 3vh 2vw; }
  .plan-modal__dialog { width: 96vw; height: 94vh; }
  .plan-modal__header, .plan-modal__body { padding: 18px; }
  .plan-modal__cta { width: 100%; }
  .plan-modal__body { padding: 0; }
  .visual-hero { grid-template-columns: 1fr; padding: 28px 18px; }
  .hero-feature-grid, .summary-panel, .quick-stats-strip { grid-template-columns: 1fr; }
  .hero-feature-grid > span, .summary-panel > span { gap: 13px; padding: 14px; }
  .platform-mark { width: 24px; height: 24px; padding: 0; }
  .hero-feature-grid .platform-mark { width: 24px; height: 24px; padding: 0; }
  .hero-feature-grid .platform-mark img, .hero-feature-grid .platform-mark svg { width: 24px; height: 24px; }
  .platform-mark--pair { width: auto; height: 24px; gap: 6px; padding: 0; }
  .platform-mark--pair img { width: 22px; height: 22px; }
  .hero-feature-grid .platform-mark--pair { width: auto; height: 24px; gap: 6px; padding: 0; }
  .hero-feature-grid .platform-mark--pair img { width: 22px; height: 22px; }
  .quick-stats-strip div { border-right: 0; border-bottom: 1px solid var(--line); }
  .plan-modal--dark .quick-stats-strip div { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .plan-modal--dark .roadmap-grid article, .plan-modal--dark .roadmap-grid article:last-child { border-right: 1px solid rgba(255,255,255,.10); }
  .modal-section-nav { padding: 0 18px; }
  .overview-grid, .compact-band, .roadmap-section, .bonus-block, .ad-spend-block, .plan-modal__body > .plan-detail-block:not(.overview-grid) { margin: 0 18px 18px; }
  .bonus-service-stack { gap: 14px; padding: 14px; }
  .bonus-services__intro, .bonus-service { padding: 22px 18px; }
  .plan-modal__body > .plan-detail-block:last-of-type { margin-bottom: 124px; }
  .service-illustration, .service-logo-panel { width: min(100%, 280px); height: 170px; min-height: 0; }
  .service-logo-panel img { max-width: 78%; max-height: 78%; width: auto; height: auto; }
  .service-logo-panel--single img { max-width: 76%; max-height: 76%; }
  .service-logo-panel--grid { gap: 6px; padding: 0; }
  .service-logo-panel--grid span { min-height: 48px; padding: 0; font-size: .68rem; }
  .service-logo-panel--grid img { max-width: 58px; max-height: 34px; width: auto; height: auto; }
  .service-logo-panel--crm img { max-width: 82%; max-height: 76%; width: auto; height: auto; }
  .bonus-service__copy h4 { font-size: clamp(1.5rem, 8vw, 1.75rem); }
  .bonus-service__copy span { font-size: .95rem; line-height: 1.5; }
  .bonus-service--carousel { padding: 24px 18px; }
  .bonus-service--carousel .bonus-slide { flex-basis: 74%; height: 250px; min-height: 230px; }
  .bonus-service--carousel .bonus-slide--image { flex-basis: 86%; min-width: 0; max-width: none; height: auto; min-height: 0; }
  .bonus-slide--image .portfolio-preview-trigger { min-height: 310px; }
  .bonus-service--carousel[id*="video"] .bonus-slide { flex-basis: 78%; height: auto; min-height: 0; }
  .video-preview-trigger { padding: 14px; }
  .video-preview-trigger strong { font-size: .96rem; }
  .video-preview-trigger .video-card__meta { font-size: .74rem; }
  .video-lightbox__dialog { width: 96vw; height: 92vh; padding: 10px; }
  .portfolio-lightbox { padding: 3vh 2vw; }
  .portfolio-lightbox__dialog { width: 96vw; height: 92vh; padding: 12px; }
  .bonus-slide { min-height: 184px; }
  .roadmap-grid { grid-template-columns: 1fr; gap: 10px; }
  .roadmap-grid::before { left: 35px; right: auto; top: 20px; bottom: 20px; width: 2px; height: auto; background: linear-gradient(180deg, var(--blue), #0a65ff, var(--green)); }
  .roadmap-grid article, .roadmap-grid article:last-child { border-right: 1px solid var(--line); padding: 22px 14px 14px 70px; }
  .roadmap-grid span { left: 14px; top: 16px; }
  .modal-sticky-cta { display: grid; gap: 12px; padding: 14px 18px; }
  .modal-sticky-cta .btn { width: 100%; }
  .detail-pair-grid, .named-list, .roadmap-grid, .plan-offering-grid { grid-template-columns: 1fr; }
  .video-section { padding: 72px 0 78px; }
  .video-layout { width: min(100% - 28px, 1120px); }
  .video-section-heading { margin-bottom: 32px; }
  .video-section-heading h2 { font-size: clamp(2.25rem, 9.5vw, 2.85rem); }
  .video-section-heading p { font-size: .98rem; }
  .video-showcase { width: 92vw; }
  .video-panel { aspect-ratio: 16 / 9; border-radius: 6px; }
  .video-panel, .video-panel img { min-height: 0; height: auto; }
  .play-button { width: 68px; height: 68px; }
  .play-button::after { left: 28px; top: 21px; border-left-width: 20px; border-top-width: 13px; border-bottom-width: 13px; }
  .video-chrome--top { left: 12px; top: 12px; font-size: .66rem; }
  .video-chrome--bottom { left: 12px; right: 12px; bottom: 12px; gap: 6px; }
  .video-chrome--bottom span { padding: 6px 7px; font-size: .66rem; }
  .process-preview-strip { width: 92vw; display: flex; overflow-x: auto; scrollbar-width: thin; }
  .process-preview-strip span { min-width: 138px; }
  .video-section-cta .btn { width: 100%; }
  .closing-cta { padding: 64px 0 70px; }
  .closing-cta h2 { font-size: clamp(2.05rem, 8vw, 2.75rem); }
  .closing-cta .btn-whatsapp.btn-large { width: 100%; max-width: 360px; }
  .faq-section { padding: 60px 0 72px; }
  .faq-layout { grid-template-columns: 1fr; gap: 28px; }
  .faq-intro { margin-bottom: 8px; }
  .faq-question { padding: 18px 6px; font-size: .96rem; }
  .faq-answer > div { padding: 0 6px; }
  .faq-item.open .faq-answer > div { padding-bottom: 18px; }
  .footer { padding-bottom: 86px; }
  .sticky-whatsapp { left: 14px; right: 14px; bottom: calc(12px + env(safe-area-inset-bottom)); justify-content: center; }
}

/* The pricing cards are the final page state. Intermediate marketing sections
   remain in the DOM for their data and modal content, but no longer contribute
   layout or appear after the scroll-driven coin sequence. */
.proof-strip,
.video-section,
.positioning-section,
.service-section,
.testimonials-section,
.closing-cta,
.faq-section,
.final-cta,
.footer,
.theme-switch {
  display: none !important;
}

.terminal-cards-active .sticky-whatsapp {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media (min-width: 901px) {
  .package-section {
    box-sizing: border-box;
    display: grid;
    align-items: center;
    width: 100%;
    height: 100vh;
    min-height: 620px;
    padding: 112px 0 16px;
    overflow: hidden;
  }

  .package-section .section-heading {
    display: none;
  }

  .package-section .package-grid {
    width: min(1320px, calc(100% - 48px));
    height: min(680px, calc(100vh - 128px));
    min-height: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
  }

  .package-section .package-card,
  .package-section .package-card.featured {
    min-height: 0;
    height: 100%;
    padding: 18px;
    gap: 8px;
    transform: none;
  }

  .package-section .package-card:hover,
  .package-section .package-card.featured:hover {
    transform: translateY(-2px);
  }

  .package-section .package-card .badge {
    padding: 4px 9px;
    font-size: .58rem;
  }

  .package-section .package-card h3 {
    font-size: .72rem;
    margin: 0;
  }

  .package-section .package-price {
    gap: 7px;
    margin: 2px 0;
  }

  .package-section .package-price strong {
    font-size: clamp(2rem, 3vw, 2.65rem);
  }

  .package-section .package-price span,
  .package-section .package-card > p,
  .package-section .package-card li {
    font-size: .78rem;
  }

  .package-section .package-card > p {
    line-height: 1.35;
    margin: 0;
  }

  .package-section .package-card ul {
    gap: 4px;
    margin: 0;
  }

  .package-section .package-card li {
    padding-left: 16px;
    line-height: 1.3;
  }

  .package-section .package-card li::before {
    width: 4px;
    height: 4px;
  }

  .package-section .package-actions {
    gap: 6px;
    padding-top: 4px;
  }

  .package-section .package-know-more,
  .package-section .package-card .btn-whatsapp {
    min-height: 38px;
    padding: 8px 12px;
    font-size: .76rem;
    border-radius: 8px;
  }
}