/* ══════════════════════════════════════════════════════════════
   HERO SECTION - COMPLETE RESPONSIVE CSS
   All screen sizes: 320px to 1920px+
   Fixed navbar overlap issue at all zoom levels
   ══════════════════════════════════════════════════════════════ */

/* ── CRITICAL FIX: Ensure hero section stays below navbar ──── */
.hero-wrap {
  position: relative !important;
  z-index: 1 !important;
  margin-top: 0 !important;
}

/* Ensure topbar stays on top at all zoom levels */
.topbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
}

/* ── ULTRA SMALL PHONES (320px - 360px) ──────────────────── */
@media (max-width: 360px) {
  .hero-wrap {
    min-height: 100vh !important;
    height: auto !important;
    padding: 90px 12px 30px 12px !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 0 !important;
  }
  
  .hero {
    width: 100% !important;
    max-width: 100% !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
  
  /* Hero accent line */
  .hero-accent-line {
    width: 40px;
    height: 2px;
    margin-bottom: 12px;
  }
  
  /* Hero stat pills */
  .hero-stat-pills {
    gap: 4px !important;
    margin-bottom: 12px !important;
    flex-wrap: wrap;
  }
  
  .hero-stat-pill {
    padding: 4px 8px !important;
    font-size: 9px !important;
    border-radius: 6px;
  }
  
  .hero-stat-pill i {
    font-size: 10px !important;
    margin-right: 3px;
  }
  
  .hero-stat-pill strong {
    font-size: 9px !important;
  }
  
  /* Hero heading */
  .hero h1 {
    font-size: clamp(20px, 6.5vw, 28px) !important;
    line-height: 1.2 !important;
    margin: 12px 0 8px !important;
    letter-spacing: -0.02em !important;
  }
  
  .hero h1 .typed-line-small {
    font-size: clamp(14px, 5vw, 22px) !important;
    margin-top: 4px;
  }
  
  /* Subtitle */
  .subtitle {
    font-size: 12px !important;
    line-height: 1.5 !important;
    max-width: 100% !important;
    margin-bottom: 16px !important;
    padding-left: 10px !important;
    border-left-width: 2px !important;
  }
  
  /* CTA buttons */
  .cta-row {
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 16px !important;
    margin-bottom: 16px !important;
  }
  
  .cta-primary,
  .cta-secondary {
    width: 100% !important;
    padding: 10px 20px !important;
    font-size: 12px !important;
    text-align: center !important;
    justify-content: center !important;
  }
  
  /* Trust line */
  .hero-trust {
    font-size: 10px !important;
    margin-top: 16px !important;
    padding-top: 16px !important;
    gap: 8px !important;
  }
  
  .trust-dot {
    width: 24px !important;
    height: 24px !important;
    margin-left: -6px !important;
  }
  
  .trust-dot:first-child {
    margin-left: 0 !important;
  }
  
  /* Hide hero visual */
  .hero-visual,
  .code-card,
  .float-stat-card,
  .floating-icon {
    display: none !important;
  }
  
  /* Hide glow effects */
  .hero-glow {
    opacity: 0.3 !important;
  }
}

/* ── SMALL PHONES (361px - 480px) ──────────────────────────── */
@media (min-width: 361px) and (max-width: 480px) {
  .hero-wrap {
    min-height: 100vh !important;
    height: auto !important;
    padding: 100px 16px 35px 16px !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 0 !important;
  }
  
  .hero {
    width: 100% !important;
    max-width: 100% !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
  
  /* Hero accent line */
  .hero-accent-line {
    width: 50px;
    height: 2px;
    margin-bottom: 14px;
  }
  
  /* Hero stat pills */
  .hero-stat-pills {
    gap: 6px !important;
    margin-bottom: 14px !important;
    flex-wrap: wrap;
  }
  
  .hero-stat-pill {
    padding: 5px 10px !important;
    font-size: 10px !important;
    border-radius: 8px;
  }
  
  .hero-stat-pill i {
    font-size: 12px !important;
    margin-right: 4px;
  }
  
  .hero-stat-pill strong {
    font-size: 10px !important;
  }
  
  /* Hero heading */
  .hero h1 {
    font-size: clamp(24px, 7.5vw, 36px) !important;
    line-height: 1.2 !important;
    margin: 14px 0 10px !important;
    letter-spacing: -0.02em !important;
  }
  
  .hero h1 .typed-line-small {
    font-size: clamp(18px, 6vw, 30px) !important;
    margin-top: 4px;
  }
  
  /* Subtitle */
  .subtitle {
    font-size: 13px !important;
    line-height: 1.5 !important;
    max-width: 100% !important;
    margin-bottom: 20px !important;
    padding-left: 12px !important;
    border-left-width: 2px !important;
  }
  
  /* CTA buttons */
  .cta-row {
    flex-direction: column !important;
    gap: 12px !important;
    margin-top: 20px !important;
    margin-bottom: 20px !important;
  }
  
  .cta-primary,
  .cta-secondary {
    width: 100% !important;
    padding: 12px 24px !important;
    font-size: 13px !important;
    text-align: center !important;
    justify-content: center !important;
  }
  
  /* Trust line */
  .hero-trust {
    font-size: 11px !important;
    margin-top: 20px !important;
    padding-top: 18px !important;
    gap: 10px !important;
  }
  
  .trust-dot {
    width: 26px !important;
    height: 26px !important;
    margin-left: -7px !important;
  }
  
  .trust-dot:first-child {
    margin-left: 0 !important;
  }
  
  /* Hide hero visual */
  .hero-visual,
  .code-card,
  .float-stat-card,
  .floating-icon {
    display: none !important;
  }
  
  /* Reduce glow effects */
  .hero-glow {
    opacity: 0.4 !important;
  }
}

/* ── LARGE PHONES (481px - 600px) ──────────────────────────── */
@media (min-width: 481px) and (max-width: 600px) {
  .hero-wrap {
    min-height: 100vh !important;
    height: auto !important;
    padding: 110px 20px 40px 20px !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 0 !important;
  }
  
  .hero {
    width: 100% !important;
    max-width: 100% !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
  
  /* Hero accent line */
  .hero-accent-line {
    width: 60px;
    height: 3px;
    margin-bottom: 16px;
  }
  
  /* Hero stat pills */
  .hero-stat-pills {
    gap: 8px !important;
    margin-bottom: 16px !important;
    flex-wrap: wrap;
  }
  
  .hero-stat-pill {
    padding: 6px 12px !important;
    font-size: 11px !important;
  }
  
  .hero-stat-pill i {
    font-size: 13px !important;
  }
  
  .hero-stat-pill strong {
    font-size: 11px !important;
  }
  
  /* Hero heading */
  .hero h1 {
    font-size: clamp(28px, 6.5vw, 40px) !important;
    line-height: 1.2 !important;
    margin: 16px 0 12px !important;
  }
  
  .hero h1 .typed-line-small {
    font-size: clamp(20px, 5vw, 34px) !important;
  }
  
  /* Subtitle */
  .subtitle {
    font-size: 14px !important;
    line-height: 1.6 !important;
    max-width: 100% !important;
    margin-bottom: 24px !important;
    padding-left: 14px !important;
  }
  
  /* CTA buttons */
  .cta-row {
    flex-direction: column !important;
    gap: 14px !important;
    margin-top: 24px !important;
    margin-bottom: 24px !important;
  }
  
  .cta-primary,
  .cta-secondary {
    width: 100% !important;
    padding: 13px 26px !important;
    font-size: 14px !important;
    text-align: center !important;
    justify-content: center !important;
  }
  
  /* Trust line */
  .hero-trust {
    font-size: 12px !important;
    margin-top: 24px !important;
    padding-top: 20px !important;
  }
  
  .trust-dot {
    width: 28px !important;
    height: 28px !important;
  }
  
  /* Hide hero visual */
  .hero-visual,
  .code-card,
  .float-stat-card,
  .floating-icon {
    display: none !important;
  }
}

/* ── TABLETS (601px - 768px) ───────────────────────────────── */
@media (min-width: 601px) and (max-width: 768px) {
  .hero-wrap {
    min-height: 100vh !important;
    height: auto !important;
    padding: 120px 24px 45px 24px !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 0 !important;
  }
  
  .hero {
    width: 100% !important;
    max-width: 100% !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
  
  /* Hero stat pills */
  .hero-stat-pills {
    gap: 10px !important;
    margin-bottom: 18px !important;
  }
  
  .hero-stat-pill {
    padding: 7px 14px !important;
    font-size: 12px !important;
  }
  
  .hero-stat-pill i {
    font-size: 14px !important;
  }
  
  /* Hero heading */
  .hero h1 {
    font-size: clamp(32px, 6vw, 48px) !important;
    line-height: 1.2 !important;
    margin: 18px 0 14px !important;
  }
  
  .hero h1 .typed-line-small {
    font-size: clamp(24px, 4.5vw, 40px) !important;
  }
  
  /* Subtitle */
  .subtitle {
    font-size: 15px !important;
    line-height: 1.6 !important;
    max-width: 100% !important;
    margin-bottom: 28px !important;
  }
  
  /* CTA buttons */
  .cta-row {
    flex-direction: row !important;
    gap: 16px !important;
    margin-top: 28px !important;
    flex-wrap: wrap;
  }
  
  .cta-primary,
  .cta-secondary {
    width: auto !important;
    padding: 14px 28px !important;
    font-size: 14px !important;
  }
  
  /* Trust line */
  .hero-trust {
    font-size: 13px !important;
    margin-top: 28px !important;
    padding-top: 22px !important;
  }
  
  /* Hide hero visual */
  .hero-visual,
  .code-card,
  .float-stat-card,
  .floating-icon {
    display: none !important;
  }
}

/* ── LARGE TABLETS (769px - 920px) ─────────────────────────── */
@media (min-width: 769px) and (max-width: 920px) {
  .hero-wrap {
    min-height: 100vh !important;
    height: auto !important;
    padding: 120px 32px 50px 32px !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 0 !important;
  }
  
  .hero {
    width: 100% !important;
    max-width: 100% !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
  
  /* Hero heading */
  .hero h1 {
    font-size: clamp(36px, 5.5vw, 54px) !important;
    line-height: 1.2 !important;
  }
  
  .hero h1 .typed-line-small {
    font-size: clamp(26px, 4vw, 44px) !important;
  }
  
  /* Subtitle */
  .subtitle {
    font-size: 16px !important;
    max-width: 100% !important;
  }
  
  /* CTA buttons */
  .cta-row {
    flex-direction: row !important;
    gap: 18px !important;
    margin-top: 32px !important;
  }
  
  .cta-primary,
  .cta-secondary {
    padding: 14px 28px !important;
    font-size: 15px !important;
  }
  
  /* Hide hero visual */
  .hero-visual,
  .code-card,
  .float-stat-card,
  .floating-icon {
    display: none !important;
  }
}

/* ── SMALL DESKTOP (921px - 1024px) ────────────────────────── */
@media (min-width: 921px) and (max-width: 1024px) {
  .hero-wrap {
    min-height: 100vh !important;
    height: 100vh !important;
    padding: 120px 40px 40px 40px !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    gap: 30px !important;
  }
  
  .hero {
    width: 58% !important;
    max-width: 58% !important;
    padding-right: 10px !important;
  }
  
  /* Hero heading */
  .hero h1 {
    font-size: clamp(38px, 5vw, 58px) !important;
  }
  
  .hero h1 .typed-line-small {
    font-size: clamp(28px, 3.8vw, 46px) !important;
  }
  
  /* Subtitle */
  .subtitle {
    font-size: 17px !important;
    max-width: 90% !important;
  }
  
  /* Show hero visual but smaller */
  .hero-visual {
    display: flex !important;
    width: 38% !important;
    height: 400px !important;
  }
  
  .code-card {
    width: 90% !important;
    transform: rotateY(-3deg) rotateX(1.5deg);
  }
  
  /* Show only 2 floating stat cards */
  .fsc-1,
  .fsc-2 {
    display: flex !important;
  }
  
  .fsc-3 {
    display: none !important;
  }
  
  /* Show only 2 floating icons */
  .fi-1,
  .fi-2 {
    display: flex !important;
  }
  
  .fi-3,
  .fi-4 {
    display: none !important;
  }
}

/* ── MEDIUM DESKTOP (1025px - 1200px) ──────────────────────── */
@media (min-width: 1025px) and (max-width: 1200px) {
  .hero-wrap {
    min-height: 100vh !important;
    height: 100vh !important;
    padding: 120px 5% 40px 5% !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    gap: 35px !important;
  }
  
  .hero {
    width: 62% !important;
    max-width: 62% !important;
  }
  
  /* Hero heading */
  .hero h1 {
    font-size: clamp(42px, 5.2vw, 64px) !important;
  }
  
  .hero h1 .typed-line-small {
    font-size: clamp(30px, 3.8vw, 48px) !important;
  }
  
  /* Subtitle */
  .subtitle {
    font-size: 18px !important;
    max-width: 85% !important;
  }
  
  /* Show hero visual */
  .hero-visual {
    display: flex !important;
    width: 35% !important;
    height: 440px !important;
  }
  
  .code-card {
    width: 95% !important;
  }
  
  /* Show 3 floating stat cards */
  .fsc-1,
  .fsc-2,
  .fsc-3 {
    display: flex !important;
  }
  
  /* Show 3 floating icons */
  .fi-1,
  .fi-2,
  .fi-3 {
    display: flex !important;
  }
  
  .fi-4 {
    display: none !important;
  }
}

/* ── LARGE DESKTOP (1201px - 1440px) ───────────────────────── */
@media (min-width: 1201px) and (max-width: 1440px) {
  .hero-wrap {
    min-height: 100vh !important;
    height: 100vh !important;
    padding: 120px 6% 40px 6% !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    gap: 40px !important;
  }
  
  .hero {
    width: 65% !important;
    max-width: 65% !important;
  }
  
  /* Hero heading */
  .hero h1 {
    font-size: clamp(48px, 5.5vw, 68px) !important;
  }
  
  .hero h1 .typed-line-small {
    font-size: clamp(32px, 4vw, 50px) !important;
  }
  
  /* Subtitle */
  .subtitle {
    font-size: 19px !important;
    max-width: 80% !important;
  }
  
  /* Show hero visual */
  .hero-visual {
    display: flex !important;
    width: 32% !important;
    height: 460px !important;
  }
  
  .code-card {
    width: 100% !important;
  }
  
  /* Show all floating elements */
  .fsc-1,
  .fsc-2,
  .fsc-3,
  .fi-1,
  .fi-2,
  .fi-3,
  .fi-4 {
    display: flex !important;
  }
}

/* ── EXTRA LARGE DESKTOP (1441px+) ─────────────────────────── */
@media (min-width: 1441px) {
  .hero-wrap {
    min-height: 100vh !important;
    height: 100vh !important;
    padding: 120px 8% 40px 8% !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    gap: 40px !important;
  }
  
  .hero {
    width: 68% !important;
    max-width: 1000px !important;
  }
  
  /* Hero heading */
  .hero h1 {
    font-size: clamp(52px, 5.8vw, 72px) !important;
  }
  
  .hero h1 .typed-line-small {
    font-size: clamp(36px, 4vw, 50px) !important;
  }
  
  /* Subtitle */
  .subtitle {
    font-size: 20px !important;
    max-width: 620px !important;
  }
  
  /* Show hero visual */
  .hero-visual {
    display: flex !important;
    width: clamp(300px, 32vw, 450px) !important;
    height: 460px !important;
  }
  
  .code-card {
    width: min(380px, 100%) !important;
  }
  
  /* Show all floating elements */
  .fsc-1,
  .fsc-2,
  .fsc-3,
  .fi-1,
  .fi-2,
  .fi-3,
  .fi-4 {
    display: flex !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   LANDSCAPE ORIENTATION FIXES
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 920px) and (orientation: landscape) {
  .hero-wrap {
    min-height: auto !important;
    height: auto !important;
    padding: 70px 20px 30px 20px !important;
  }
  
  .hero h1 {
    font-size: clamp(24px, 5vw, 36px) !important;
  }
  
  .hero h1 .typed-line-small {
    font-size: clamp(18px, 4vw, 30px) !important;
  }
  
  .subtitle {
    font-size: 14px !important;
    margin-bottom: 20px !important;
  }
  
  .cta-row {
    margin-top: 20px !important;
    margin-bottom: 16px !important;
  }
  
  .hero-trust {
    margin-top: 16px !important;
    padding-top: 16px !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   SCROLL HINT RESPONSIVE
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .scroll-hint {
    font-size: 11px;
    bottom: 20px;
  }
}

@media (max-width: 480px) {
  .scroll-hint {
    display: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   FORCE PROPER STACKING ON MOBILE
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 920px) {
  .hero-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  
  .hero {
    order: 1 !important;
  }
  
  .hero-visual {
    order: 2 !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   BROWSER ZOOM LEVEL FIXES (125%, 150%, 175%, 200%)
   ══════════════════════════════════════════════════════════════ */

/* At 125% zoom, viewport becomes ~1536px → ~1229px effective */
@media (min-width: 1200px) and (max-width: 1600px) {
  .hero-wrap {
    padding-top: 130px !important;
  }
  
  .topbar {
    height: auto !important;
    min-height: 86px !important;
  }
}

/* At 150% zoom, viewport becomes ~1280px → ~853px effective */
@media (min-width: 800px) and (max-width: 1199px) {
  .hero-wrap {
    padding-top: 140px !important;
  }
  
  .topbar {
    height: auto !important;
    min-height: 90px !important;
  }
}

/* At 175% zoom and 200% zoom */
@media (min-width: 600px) and (max-width: 799px) {
  .hero-wrap {
    padding-top: 150px !important;
  }
  
  .topbar {
    height: auto !important;
    min-height: 95px !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
}

/* Extra safety for very high zoom levels */
@media (max-width: 599px) {
  .hero-wrap {
    padding-top: 100px !important;
  }
  
  .topbar {
    height: auto !important;
    min-height: 70px !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   ADDITIONAL ZOOM SAFETY MEASURES
   ══════════════════════════════════════════════════════════════ */

/* Ensure navbar never overlaps hero at any zoom level */
body {
  padding-top: 0 !important;
}

.hero-wrap {
  margin-top: 0 !important;
  position: relative !important;
}

/* Force topbar to stay fixed at top */
.topbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1000 !important;
}

/* Ensure hero content doesn't overlap with navbar */
.hero {
  position: relative !important;
  z-index: 1 !important;
}

/* Add extra top margin for hero stat pills to ensure visibility */
.hero-stat-pills {
  margin-top: 8px !important;
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE NAVBAR HEIGHT ADJUSTMENTS
   ══════════════════════════════════════════════════════════════ */

/* Adjust hero padding based on actual navbar height */
@media (min-width: 1920px) {
  .hero-wrap {
    padding-top: 130px !important;
  }
}

@media (min-width: 1600px) and (max-width: 1919px) {
  .hero-wrap {
    padding-top: 125px !important;
  }
}

@media (min-width: 1440px) and (max-width: 1599px) {
  .hero-wrap {
    padding-top: 120px !important;
  }
}

@media (min-width: 1200px) and (max-width: 1439px) {
  .hero-wrap {
    padding-top: 120px !important;
  }
}

@media (min-width: 1024px) and (max-width: 1199px) {
  .hero-wrap {
    padding-top: 120px !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .hero-wrap {
    padding-top: 120px !important;
  }
}

@media (min-width: 480px) and (max-width: 767px) {
  .hero-wrap {
    padding-top: 110px !important;
  }
}

@media (max-width: 479px) {
  .hero-wrap {
    padding-top: 100px !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   ADDITIONAL 150% ZOOM OPTIMIZATIONS
   ══════════════════════════════════════════════════════════════ */

@media (min-width: 800px) and (max-width: 1199px) {
  /* Hero stat pills - more compact for 150% zoom */
  .hero-stat-pills {
    gap: 5px !important;
    margin-bottom: 12px !important;
  }
  
  .hero-stat-pill {
    padding: 4px 8px !important;
    font-size: 9.5px !important;
    border-radius: 6px !important;
  }
  
  .hero-stat-pill i {
    font-size: 10px !important;
    margin-right: 3px !important;
  }
  
  .hero-stat-pill strong {
    font-size: 9.5px !important;
  }
  
  /* Hero heading - slightly smaller */
  .hero h1 {
    font-size: clamp(28px, 5.5vw, 42px) !important;
    margin: 14px 0 10px !important;
  }
  
  .hero h1 .typed-line-small {
    font-size: clamp(20px, 4.2vw, 34px) !important;
  }
  
  /* Subtitle - more compact */
  .subtitle {
    font-size: 14px !important;
    margin-bottom: 24px !important;
    padding-left: 12px !important;
  }
  
  /* CTA buttons - smaller */
  .cta-primary,
  .cta-secondary {
    padding: 11px 22px !important;
    font-size: 12.5px !important;
  }
  
  /* Trust line - more compact */
  .hero-trust {
    font-size: 11.5px !important;
    margin-top: 24px !important;
    padding-top: 18px !important;
  }
  
  .trust-dot {
    width: 26px !important;
    height: 26px !important;
  }
  
  /* Hero accent line */
  .hero-accent-line {
    width: 50px !important;
    height: 2.5px !important;
    margin-bottom: 12px !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   175% ZOOM OPTIMIZATIONS (600px - 799px)
   ══════════════════════════════════════════════════════════════ */

@media (min-width: 600px) and (max-width: 799px) {
  .hero-wrap {
    padding: 100px 16px 35px 16px !important;
  }
  
  /* Hide stat pills completely at 175% zoom */
  .hero-stat-pills {
    display: none !important;
  }
  
  /* Hero accent line - smaller */
  .hero-accent-line {
    width: 45px !important;
    height: 2px !important;
    margin-bottom: 10px !important;
  }
  
  /* Hero heading - more compact */
  .hero h1 {
    font-size: clamp(24px, 5vw, 36px) !important;
    line-height: 1.15 !important;
    margin: 12px 0 8px !important;
    letter-spacing: -0.02em !important;
  }
  
  .hero h1 .typed-line-small {
    font-size: clamp(18px, 4vw, 28px) !important;
  }
  
  /* Subtitle - smaller */
  .subtitle {
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin-bottom: 20px !important;
    padding-left: 10px !important;
    border-left-width: 2px !important;
  }
  
  /* CTA buttons - more compact */
  .cta-row {
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 20px !important;
    margin-bottom: 20px !important;
  }
  
  .cta-primary,
  .cta-secondary {
    width: 100% !important;
    padding: 10px 20px !important;
    font-size: 12px !important;
    text-align: center !important;
    justify-content: center !important;
  }
  
  /* Trust line - smaller */
  .hero-trust {
    font-size: 11px !important;
    margin-top: 20px !important;
    padding-top: 16px !important;
    gap: 8px !important;
  }
  
  .trust-dot {
    width: 24px !important;
    height: 24px !important;
    margin-left: -6px !important;
  }
  
  .trust-dot:first-child {
    margin-left: 0 !important;
  }
  
  /* Ensure hero visual is hidden */
  .hero-visual,
  .code-card,
  .float-stat-card,
  .floating-icon {
    display: none !important;
  }
  
  /* Reduce glow effects */
  .hero-glow {
    opacity: 0.3 !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   200% ZOOM OPTIMIZATIONS (Below 600px effective)
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 599px) {
  .hero-wrap {
    padding: 90px 12px 30px 12px !important;
  }
  
  /* Hide stat pills */
  .hero-stat-pills {
    display: none !important;
  }
  
  /* Hero accent line - minimal */
  .hero-accent-line {
    width: 40px !important;
    height: 2px !important;
    margin-bottom: 8px !important;
  }
  
  /* Hero heading - very compact */
  .hero h1 {
    font-size: clamp(20px, 6.5vw, 32px) !important;
    line-height: 1.15 !important;
    margin: 10px 0 8px !important;
  }
  
  .hero h1 .typed-line-small {
    font-size: clamp(16px, 5vw, 24px) !important;
  }
  
  /* Subtitle - very small */
  .subtitle {
    font-size: 12px !important;
    line-height: 1.5 !important;
    margin-bottom: 18px !important;
    padding-left: 8px !important;
  }
  
  /* CTA buttons - full width */
  .cta-row {
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: 18px !important;
    margin-bottom: 18px !important;
  }
  
  .cta-primary,
  .cta-secondary {
    width: 100% !important;
    padding: 10px 18px !important;
    font-size: 11px !important;
  }
  
  /* Trust line - minimal */
  .hero-trust {
    font-size: 10px !important;
    margin-top: 18px !important;
    padding-top: 14px !important;
  }
  
  .trust-dot {
    width: 22px !important;
    height: 22px !important;
  }
}