/* =====================================================
   BRANDS COMPANION – COMPREHENSIVE UI UPGRADE v3
   Glow effects · Hover FX · Nav centering · Responsive
   ===================================================== */

/* ── 1. CSS CUSTOM PROPERTIES ────────────────────────── */
:root {
  --green-glow: hsl(120,70%,45%);
  --orange-glow: hsl(22,90%,55%);
  --green-mid: hsl(161,59%,34%);
  --nav-h: 68px;
}

/* ── 2. HEADER / NAV CENTER ALIGNMENT ────────────────── */
header {
  will-change: transform;
}

/* Center desktop nav links absolutely in the navbar */
@media (min-width: 1024px) {
  header nav {
    position: relative !important;
  }
  /* First div = nav links group (gap-0) */
  header nav > div:first-of-type {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    pointer-events: auto !important;
    z-index: 10;
  }
}

/* Nav link underline glow upgrade */
.nav-agency-link::after {
  background: linear-gradient(90deg, hsl(120,70%,55%), hsl(22,90%,60%)) !important;
  height: 2px !important;
  box-shadow: 0 0 8px hsl(22,90%,55%,.6);
}
.nav-agency-link:hover {
  color: #fff !important;
  text-shadow: 0 0 18px hsl(120,70%,60%,.45);
}

/* Nav CTA button glow pulse */
.nav-cta-btn {
  background: linear-gradient(135deg, #e67342, #e6943c) !important;
  box-shadow: 0 4px 20px rgba(230,115,66,.5), 0 0 0 0 rgba(230,115,66,.3) !important;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease !important;
}
.nav-cta-btn:hover {
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 10px 36px rgba(230,115,66,.65), 0 0 0 6px rgba(230,115,66,.1) !important;
}

/* Mobile hamburger button */
@media (max-width: 1023px) {
  header nav {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* ── 3. HERO SECTION – CENTER ALIGNMENT ──────────────── */

/* Index & home hero (height:100vh) */
section[style*="height:100vh"] .container,
section[style*="height: 100vh"] .container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  width: 100% !important;
}
section[style*="height:100vh"] .container .flex:not(.flex-wrap):not([class*="gap-4"]):not([class*="absolute"]) {
  justify-content: center !important;
}

/* Service/page hero (min-h-[75vh]) – center all hero content */
section[class*="min-h-"] > .container {
  text-align: center !important;
}
section[class*="min-h-"] > .container > div.flex.flex-wrap {
  justify-content: center !important;
}
section[class*="min-h-"] > .container h1 {
  margin-left: auto !important;
  margin-right: auto !important;
}
section[class*="min-h-"] > .container p {
  margin-left: auto !important;
  margin-right: auto !important;
}
section[class*="min-h-"] > .container .flex.flex-wrap.gap-4 {
  justify-content: center !important;
}
/* Breadcrumb: keep centered on smaller screens, left on desktop */
section[class*="min-h-"] > .container .flex.items-center.gap-2.text-xs {
  justify-content: center !important;
}

/* Stats bar below hero (4-col grid) */
section[class*="min-h-"] + section .grid.grid-cols-2 {
  justify-items: center;
}

/* About / landing page heroes */
section[class*="min-h-[88vh]"] > .container,
section[class*="min-h-[80vh]"] > .container,
section[class*="min-h-[70vh]"] > .container {
  text-align: center !important;
  align-items: center !important;
}

/* ── 4. ENHANCED TITLE GLOW EFFECTS ─────────────────── */

/* Animated glow on dark section headings */
@keyframes title-glow-pulse {
  0%, 100% { text-shadow: 0 0 40px hsl(120,70%,45%,.1), 0 2px 20px rgba(0,0,0,.5); }
  50%       { text-shadow: 0 0 70px hsl(120,70%,45%,.25), 0 0 30px hsl(22,90%,55%,.08), 0 2px 20px rgba(0,0,0,.5); }
}
.dark-section h1,
.dark-section h2,
.dark-section h3,
.dark-section-alt h1,
.dark-section-alt h2,
.dark-section-alt h3 {
  animation: title-glow-pulse 5s ease-in-out infinite;
}

/* Gradient text – enhanced glow */
@keyframes gradient-text-glow {
  0%, 100% { filter: drop-shadow(0 0 12px hsl(120,70%,50%,.3)) drop-shadow(0 0 24px hsl(22,90%,55%,.15)); }
  50%       { filter: drop-shadow(0 0 24px hsl(120,70%,55%,.55)) drop-shadow(0 0 40px hsl(22,90%,55%,.3)); }
}
.hero-v2-gradient-text,
.grad-green-orange {
  animation: gradient-text-glow 4s ease-in-out infinite !important;
}

/* Section pill glow upgrade */
.section-pill {
  box-shadow: 0 0 0 1px hsl(120,60%,34%,.25), 0 0 14px hsl(120,60%,34%,.2);
  transition: box-shadow .3s ease, transform .3s ease;
}
.section-pill:hover,
.section-pill-dark {
  box-shadow: 0 0 0 1px hsl(120,60%,34%,.45), 0 0 24px hsl(120,60%,34%,.35) !important;
}
.section-pill-orange {
  box-shadow: 0 0 0 1px hsl(22,90%,55%,.25), 0 0 14px hsl(22,90%,55%,.2) !important;
}

/* Hero h1 text glow on dark backgrounds */
section[class*="bg-[hsl(161"] h1,
section[class*="bg-[hsl(120"] h1 {
  text-shadow: 0 0 80px hsl(120,70%,45%,.12), 0 4px 30px rgba(0,0,0,.5);
}

/* ── 5. CARD & BLOCK HOVER EFFECTS ───────────────────── */

/* Universal card hover - all glass/dark cards */
@keyframes card-border-glow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255,255,255,.05), 0 8px 24px rgba(0,0,0,.3); }
  50%       { box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 8px 32px rgba(0,0,0,.4), 0 0 20px hsl(120,60%,34%,.06); }
}
.glass-card {
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease, border-color .35s ease !important;
  animation: card-border-glow 6s ease-in-out infinite;
}
.glass-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 55px rgba(0,0,0,.45), 0 0 30px hsl(120,60%,34%,.12), 0 0 0 1px rgba(255,255,255,.09) !important;
}

/* Service cards */
.service-card,
[class*="service-card"] {
  transition: transform .32s cubic-bezier(.34,1.56,.64,1), box-shadow .32s ease !important;
}
.service-card:hover,
[class*="service-card"]:hover {
  transform: translateY(-6px) scale(1.01) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.4), 0 0 22px hsl(120,60%,34%,.15) !important;
}

/* Portfolio cards */
.portfolio-card,
[class*="portfolio-card"] {
  transition: transform .32s cubic-bezier(.34,1.56,.64,1), box-shadow .32s ease !important;
}
.portfolio-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.5) !important;
}

/* Generic dark rounded cards - lift on hover */
.dark-section .rounded-2xl,
.dark-section-alt .rounded-2xl {
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease, border-color .3s ease;
}
.dark-section .rounded-2xl:hover,
.dark-section-alt .rounded-2xl:hover {
  transform: translateY(-4px);
}

/* Stat blocks */
.stat-block {
  transition: transform .3s ease, color .3s ease;
}
.stat-block:hover {
  transform: scale(1.06);
}
.stat-block:hover .stat-num {
  text-shadow: 0 0 20px hsl(120,70%,55%,.4);
}

/* KPI stat cells */
.bg-white\/\[0\.03\].px-6.py-6.text-center {
  transition: background .3s ease, transform .3s ease;
}
.bg-white\/\[0\.03\].px-6.py-6.text-center:hover {
  background: rgba(255,255,255,.06) !important;
  transform: scale(1.04);
}

/* Icon bubbles / feature icons */
.w-14.h-14.rounded-2xl,
.w-12.h-12.rounded-xl,
.w-10.h-10.rounded-xl {
  transition: transform .3s ease, box-shadow .3s ease;
}
.rounded-2xl:hover .w-14.h-14.rounded-2xl,
.dark-section .rounded-2xl:hover .w-12.h-12,
.dark-section .rounded-2xl:hover .w-10.h-10 {
  transform: scale(1.12) rotate(-4deg);
  box-shadow: 0 0 18px hsl(120,60%,34%,.35);
}

/* Process step cards */
.dark-section .border.border-white\/\[0\.06\]:hover {
  border-color: hsl(120,60%,34%,.3) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.4), 0 0 24px hsl(120,60%,34%,.1) !important;
}

/* ── 6. BUTTON IMPROVEMENTS ──────────────────────────── */

/* Primary CTA button - stronger glow on hover */
.btn-hero-primary {
  position: relative;
  overflow: hidden;
}
.btn-hero-primary::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, hsl(22,90%,65%), hsl(18,100%,55%), hsl(22,90%,65%));
  background-size: 200% auto;
  opacity: 0;
  transition: opacity .35s ease;
  z-index: -1;
  animation: gradient-shift 3s linear infinite;
}
.btn-hero-primary:hover::before {
  opacity: .35;
}

/* Secondary/outline button */
.btn-outline-green {
  transition: all .3s ease !important;
}
.btn-outline-green:hover {
  background: hsl(120,60%,34%,.12) !important;
  border-color: hsl(120,60%,34%,.5) !important;
  box-shadow: 0 0 0 4px hsl(120,60%,34%,.1), 0 8px 24px rgba(0,0,0,.35) !important;
  transform: translateY(-2px);
}

/* WhatsApp button */
a[href*="wa.me"]:not(.topbar-social):not(.nav-cta-btn) {
  transition: transform .25s ease, box-shadow .25s ease !important;
}
a[href*="wa.me"]:not(.topbar-social):not(.nav-cta-btn):hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(37,211,102,.3) !important;
}

/* ── 7. MOBILE & TABLET RESPONSIVENESS ───────────────── */

/* Mobile: better hero padding */
@media (max-width: 767px) {
  section[class*="min-h-"] {
    padding-top: 7rem !important;
    padding-bottom: 3rem !important;
  }
  section[class*="height:100vh"] > .container,
  section[style*="height:100vh"] > .container {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
  /* Mobile nav: full width, better tap targets */
  .mob-nav-link {
    padding: 12px 16px !important;
    font-size: 15px !important;
    border-radius: 10px;
  }
  .mob-nav-link:hover {
    background: rgba(255,255,255,.06) !important;
  }
  /* Mobile hero title */
  section[class*="min-h-"] h1 {
    font-size: clamp(1.75rem, 7vw, 2.5rem) !important;
    line-height: 1.15 !important;
  }
  /* Mobile hero buttons */
  section[class*="min-h-"] .flex.flex-wrap.gap-4 {
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.75rem !important;
  }
  section[class*="min-h-"] .flex.flex-wrap.gap-4 > a {
    width: 100% !important;
    max-width: 320px !important;
    justify-content: center !important;
  }
  /* Section heading size */
  .dark-section h2,
  .dark-section-alt h2 {
    font-size: clamp(1.6rem, 6.5vw, 2.25rem) !important;
    line-height: 1.2 !important;
  }
  /* Container padding */
  .container {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
  /* Stat grid - ensure 2 cols on mobile */
  .grid.grid-cols-2.md\:grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
  }
  /* 2-col grids become 1-col on mobile */
  .grid.lg\:grid-cols-2 {
    grid-template-columns: 1fr !important;
  }
  /* Spacing improvements */
  .py-20 { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
  .py-28 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
}

/* Tablet (768–1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  section[class*="min-h-"] {
    padding-top: 8rem !important;
    padding-bottom: 4rem !important;
  }
  .grid.lg\:grid-cols-2 {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }
  .grid.lg\:grid-cols-3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  section[class*="min-h-"] h1 {
    font-size: clamp(2rem, 4.5vw, 3rem) !important;
  }
  /* Hero buttons row on tablet */
  section[class*="min-h-"] .flex.flex-wrap.gap-4 {
    justify-content: center !important;
  }
}

/* Desktop wide: constrain max hero text width for readability */
@media (min-width: 1280px) {
  section[class*="min-h-"] > .container h1 {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
  }
  section[class*="min-h-"] > .container > p,
  section[class*="min-h-"] > .container .text-white\/55,
  section[class*="min-h-"] > .container .text-white\/60 {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ── 8. IMPROVED IMAGE & MEDIA BLOCKS ─────────────────── */
img {
  transition: filter .35s ease;
}
.dark-section .rounded-2xl:hover img,
.dark-section-alt .rounded-2xl:hover img {
  filter: brightness(1.08) saturate(1.1);
}

/* ── 9. LINK HOVER GLOBAL IMPROVEMENTS ───────────────── */
a.mega-svc-link {
  transition: all .2s ease !important;
  border-left: 2px solid transparent;
}
a.mega-svc-link:hover {
  background: rgba(255,255,255,.07) !important;
  color: rgba(255,255,255,.95) !important;
  border-left-color: hsl(120,60%,34%,.6);
  padding-left: 14px !important;
}

/* Topbar social icons */
.topbar-social {
  border-radius: 6px;
  padding: 3px !important;
  transition: color .2s ease, transform .2s ease, background .2s ease !important;
}
.topbar-social:hover {
  background: rgba(255,255,255,.08) !important;
  transform: translateY(-2px) !important;
}

/* ── 10. SECTION DIVIDERS & DECORATIVE ELEMENTS ──────── */

/* Glowing horizontal rule between sections */
.glow-divider {
  height: 1.5px !important;
  box-shadow: 0 0 12px hsl(120,60%,34%,.35), 0 0 24px hsl(22,90%,55%,.2) !important;
}

/* Aurora blob enhancements */
.aurora-blob {
  transition: opacity 2s ease;
}
.aurora-blob.aurora-1 {
  filter: blur(72px) !important;
}
.aurora-blob.aurora-2 {
  filter: blur(80px) !important;
}

/* ── 11. FOOTER IMPROVEMENTS ─────────────────────────── */
footer a {
  transition: color .2s ease, padding-left .2s ease;
}
footer a:hover {
  padding-left: 4px;
}

/* ── 12. SCROLL BAR STYLING ──────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: hsl(161,59%,3%); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, hsl(161,59%,30%), hsl(22,90%,50%));
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, hsl(161,59%,40%), hsl(22,90%,60%));
}

/* ── 13. FOCUS ACCESSIBILITY ─────────────────────────── */
a:focus-visible,
button:focus-visible {
  outline: 2px solid hsl(120,60%,34%);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── 14. ENHANCED REVEAL ANIMATIONS ─────────────────── */
.reveal-on-scroll {
  transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1) !important;
}
.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1) !important;
}
.reveal-left.revealed {
  opacity: 1 !important;
  transform: translateX(0) !important;
}
.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1) !important;
}
.reveal-right.revealed {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

/* ── 15. PORTFOLIO / CASE STUDY CARDS ───────────────── */
.portfolio-card .group-hover\:scale-105,
.dark-section .group:hover img {
  transition: transform .5s cubic-bezier(.34,1.56,.64,1) !important;
}

/* ── 16. MOBILE HEADER (overlay menu) ───────────────── */
@media (max-width: 1023px) {
  /* Mobile menu panel */
  .lg\:hidden[style*="height"] {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  /* Logo sizing on mobile */
  header nav > a .relative {
    width: 52px !important;
    height: 52px !important;
  }
}

/* ── 17. HERO CONTENT MIN-WIDTH GUARD ───────────────── */
section[class*="min-h-"] > .container > div:not(.flex-wrap):first-child {
  overflow: visible;
}

/* ── 18. TESTIMONIAL / REVIEW CARDS ─────────────────── */
.dark-section .border.border-white\/\[0\.06\].rounded-2xl {
  position: relative;
  overflow: hidden;
}
.dark-section .border.border-white\/\[0\.06\].rounded-2xl::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse 60% 50% at 50% 0%, hsl(120,60%,34%,.05), transparent 70%);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity .4s ease;
}
.dark-section .border.border-white\/\[0\.06\].rounded-2xl:hover::before {
  opacity: 1;
}

/* ── 19. CONTACT FORM INPUTS ─────────────────────────── */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  transition: border-color .25s ease, box-shadow .25s ease !important;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus {
  border-color: hsl(120,60%,34%,.6) !important;
  box-shadow: 0 0 0 3px hsl(120,60%,34%,.12), 0 0 16px hsl(120,60%,34%,.08) !important;
  outline: none !important;
}

/* ── 20. LOADING STATE SHIMMER ───────────────────────── */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,.04) 25%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.04) 75%);
  background-size: 200% auto;
  animation: shimmer 1.8s ease-in-out infinite;
}

/* ── 21. PROCESS STEP NUMBER BADGES ─────────────────── */
.dark-section .w-10.h-10.rounded-full,
.dark-section-alt .w-10.h-10.rounded-full {
  box-shadow: 0 0 0 4px hsl(120,60%,34%,.1), 0 0 14px hsl(120,60%,34%,.2);
  transition: box-shadow .3s ease, transform .3s ease;
}
.dark-section .rounded-2xl:hover .w-10.h-10.rounded-full {
  box-shadow: 0 0 0 6px hsl(120,60%,34%,.18), 0 0 22px hsl(120,60%,34%,.35);
  transform: scale(1.1);
}

/* ── 22. HERO PARTICLE EFFECTS BOOST ────────────────── */
.hero-particle {
  box-shadow: 0 0 6px 1px currentColor !important;
}

/* ── 23. FAQ ITEMS ───────────────────────────────────── */
.faq-dark-item button {
  transition: color .25s ease;
}
.faq-dark-item:hover button {
  color: rgba(255,255,255,.95) !important;
}

/* ── 24. BADGE / TAG IMPROVEMENTS ───────────────────── */
span.inline-flex.items-center.gap-1\.5.px-3.py-1\.5.rounded-full {
  transition: transform .25s ease, box-shadow .25s ease;
}
span.inline-flex.items-center.gap-1\.5.px-3.py-1\.5.rounded-full:hover {
  transform: scale(1.05);
  box-shadow: 0 0 12px currentColor;
}

/* ── 25. ORBITAL RING GLOW BOOST ─────────────────────── */
.orbital-ring {
  opacity: .09 !important;
  filter: drop-shadow(0 0 3px hsl(120,60%,34%));
}

/* ── 26. MOBILE STATIC HERO – KILL ANIMATIONS ──────── */

/*
 * On mobile (<768px) the animated hero (aurora blobs, orbital rings,
 * particles, typewriter, fade-in-up delays) causes flashing, jank
 * and layout instability.  We kill every animation and show fully-
 * rendered static content instantly.
 */

@media (max-width: 767px) {

  /* --- Force hero to auto-height, remove 100vh lock --- */
  section[style*="height:100vh"],
  section[style*="height: 100vh"] {
    height: auto !important;
    min-height: 100svh !important;   /* safe-area viewport */
    max-height: none !important;
    overflow: visible !important;
  }

  /* --- Kill ALL hero background animations --- */
  .aurora-blob,
  .aurora-blob.aurora-1,
  .aurora-blob.aurora-2,
  .aurora-blob.aurora-3 {
    animation: none !important;
    display: none !important;          /* fully remove to save GPU */
  }

  .orbital-ring,
  .orbital-ring.ring-1,
  .orbital-ring.ring-2,
  .orbital-ring.ring-3 {
    animation: none !important;
    display: none !important;
  }

  .hero-particle {
    animation: none !important;
    display: none !important;
  }

  .hero-v2-dot-grid {
    display: none !important;
  }

  /* --- Kill fade-in-up animation delays --- */
  .animate-fade-in-up,
  [class*="animate-fade-in-up"],
  .animation-fill-forwards {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    animation-delay: 0s !important;
  }

  /* Specifically target delay classes */
  .animation-delay-100,
  .animation-delay-200,
  .animation-delay-300,
  .animation-delay-400,
  .animation-delay-500,
  .animation-delay-600,
  .animation-delay-1000,
  .animation-delay-2000 {
    animation-delay: 0s !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* --- Kill typewriter, cycle-strip, gradient text glow --- */
  .hero-v2-gradient-text,
  .grad-green-orange {
    animation: none !important;
    filter: none !important;
  }

  .cycle-strip,
  .cycle-strip .cycle-box {
    animation: none !important;
  }

  #hero-typewriter {
    animation: none !important;
    width: auto !important;
    overflow: visible !important;
    border: none !important;
  }
  #hero-cursor {
    animation: none !important;
  }

  /* --- Kill marquee on mobile for performance --- */
  .marquee-track {
    animation: none !important;
    overflow: hidden !important;
  }

  /* --- Kill floating bubbles --- */
  .floating-bubble {
    display: none !important;
  }

  /* --- Kill title glow pulses --- */
  .dark-section h1,
  .dark-section h2,
  .dark-section h3,
  .dark-section-alt h1,
  .dark-section-alt h2,
  .dark-section-alt h3 {
    animation: none !important;
    text-shadow: none !important;
  }

  /* --- Kill card hover/glow animations (no hover on touch) --- */
  .glass-card {
    animation: none !important;
  }

  /* --- Kill gradient-text-glow --- */
  @keyframes gradient-text-glow { 0%, 100% { filter: none; } }

  /* --- Kill section pill glow animations --- */
  .section-pill,
  .section-pill-dark,
  .section-pill-orange {
    box-shadow: none !important;
  }

  /* --- Ensure ALL content is immediately visible --- */
  .reveal-on-scroll,
  .reveal-left,
  .reveal-right {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* --- Hero content layout --- */
  section[style*="height:100vh"] > .container,
  section[style*="height: 100vh"] > .container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 120px 1.25rem 2rem !important;
  }

  /* --- Hero badge --- */
  .hero-v2-badge {
    font-size: 11px !important;
    padding: 7px 16px !important;
    gap: 6px !important;
  }

  /* --- Hero h1 --- */
  section[style*="height:100vh"] h1 {
    font-size: clamp(1.7rem, 8vw, 2.5rem) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    word-break: break-word !important;
  }

  /* --- Hero description --- */
  .hero-v2-desc {
    font-size: 14px !important;
    line-height: 1.6 !important;
    max-width: 340px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* --- Hero CTA buttons stack vertically --- */
  section[style*="height:100vh"] .flex.flex-wrap.gap-4,
  section[style*="height:100vh"] .flex.flex-wrap.gap-3 {
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.75rem !important;
    width: 100% !important;
  }
  section[style*="height:100vh"] .flex.flex-wrap.gap-4 > a,
  section[style*="height:100vh"] .flex.flex-wrap.gap-3 > a {
    width: 100% !important;
    max-width: 300px !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* --- Social proof strip --- */
  section[style*="height:100vh"] .flex.items-center.gap-3 {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.5rem !important;
  }

  /* --- Fix body/html overflow issues --- */
  html, body {
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100% !important;
  }

  /* --- Ensure images are responsive --- */
  img {
    max-width: 100% !important;
    height: auto !important;
  }
  /* Exception for logos/icons */
  header img,
  .w-7 img, .w-8 img, .w-10 img, .w-12 img, .w-14 img {
    max-width: none !important;
    height: auto !important;
  }

  /* --- Fix grid layouts on mobile --- */
  .grid.lg\:grid-cols-3 {
    grid-template-columns: 1fr !important;
  }
  .grid.md\:grid-cols-3 {
    grid-template-columns: 1fr !important;
  }
  .grid.md\:grid-cols-2 {
    grid-template-columns: 1fr !important;
  }

  /* --- Compact spacing --- */
  section {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* --- Footer responsive --- */
  footer .grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  /* --- Reduce will-change to save mobile GPU --- */
  header {
    will-change: auto !important;
  }

  /* --- Prevent horizontal scroll from oversized elements --- */
  .container {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
}

/* Tablet animation reduction */
@media (max-width: 1023px) and (min-width: 768px) {
  .aurora-blob { opacity: 0.3 !important; }
  .orbital-ring { opacity: 0.04 !important; }
  .hero-particle { opacity: 0.15 !important; }
}

/* ── END COMPREHENSIVE UI UPGRADE v3 ═════════════════ */