/* Homepage mobile/responsive final fixes for PR #5. Loaded by js/homepage.js. */
@media (min-width: 821px) {
  .nav-cta {
    gap: 9px !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    background: rgba(10,10,10,.46) !important;
    color: rgba(244,245,240,.94) !important;
    box-shadow: 0 18px 46px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.07), 0 0 28px rgba(255,255,255,.035) !important;
    backdrop-filter: blur(22px) saturate(130%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(130%) !important;
  }

  .nav-cta:hover {
    border-color: rgba(255,255,255,.28) !important;
    background: rgba(255,255,255,.075) !important;
    color: var(--white) !important;
  }
}

.stat:last-child span { text-transform: capitalize; }
.stat::before {
  display: block !important;
  content: "" !important;
}
.stat::after {
  content: "" !important;
  box-sizing: border-box;
}
.stat:nth-child(1)::after {
  width: 15px !important;
  height: 15px !important;
  border: 1px solid rgba(244,245,240,.58) !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle, rgba(244,245,240,.72) 0 2px, transparent 2.6px) -5px -4px / 14px 14px no-repeat,
    radial-gradient(circle, rgba(244,245,240,.48) 0 2px, transparent 2.6px) 6px 7px / 14px 14px no-repeat !important;
  box-shadow: none !important;
  transform: translateY(-50%) !important;
}
.stat:nth-child(2)::after {
  width: 14px !important;
  height: 14px !important;
  border: 0 !important;
  border-radius: 3px !important;
  background:
    linear-gradient(rgba(244,245,240,.58), rgba(244,245,240,.58)) 0 0 / 5px 5px no-repeat,
    linear-gradient(rgba(244,245,240,.38), rgba(244,245,240,.38)) 9px 0 / 5px 5px no-repeat,
    linear-gradient(rgba(244,245,240,.38), rgba(244,245,240,.38)) 0 9px / 5px 5px no-repeat,
    linear-gradient(rgba(244,245,240,.58), rgba(244,245,240,.58)) 9px 9px / 5px 5px no-repeat !important;
  box-shadow: none !important;
  transform: translateY(-50%) !important;
}
.stat:nth-child(3)::after {
  width: 14px !important;
  height: 14px !important;
  border: 1px solid rgba(244,245,240,.58) !important;
  border-radius: 50% 50% 50% 0 !important;
  background: radial-gradient(circle, rgba(244,245,240,.72) 0 2px, transparent 2.5px) center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  transform: translateY(-58%) rotate(-45deg) !important;
}
.stat:nth-child(4)::after {
  width: 17px !important;
  height: 17px !important;
  border: 1px solid rgba(244,245,240,.52) !important;
  border-radius: 50% !important;
  background:
    linear-gradient(90deg, transparent 45%, rgba(244,245,240,.38) 46% 54%, transparent 55%),
    linear-gradient(transparent 45%, rgba(244,245,240,.38) 46% 54%, transparent 55%) !important;
  box-shadow: inset 5px 0 0 -4px rgba(244,245,240,.42), inset -5px 0 0 -4px rgba(244,245,240,.42) !important;
  transform: translateY(-50%) !important;
}

@media (max-width: 820px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .section-shell { width: min(100% - 28px, 760px) !important; }
  .site-header {
    top: 12px !important;
    left: 0;
    right: 0;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .glass-nav {
    width: min(100% - 24px, 720px) !important;
    min-height: 60px !important;
    padding: 9px 11px 9px 13px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    border: 1px solid rgba(255,255,255,.105) !important;
    border-radius: 20px !important;
    background: rgba(8,8,8,.62) !important;
    box-shadow: 0 16px 44px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.06) !important;
    backdrop-filter: blur(22px) saturate(130%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(130%) !important;
  }

  .brand-logo-link {
    height: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    overflow: hidden;
  }

  .brand-logo-image {
    width: clamp(124px, 34vw, 154px) !important;
    max-height: 38px !important;
  }

  .desktop-nav,
  .nav-cta { display: none !important; }

  .menu-toggle {
    width: 42px !important;
    height: 42px !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.035) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07) !important;
  }

  .mobile-menu {
    top: 84px !important;
    left: 14px !important;
    right: 14px !important;
    padding: 12px !important;
    gap: 3px;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 24px !important;
    background: rgba(6,6,6,.88) !important;
    box-shadow: 0 24px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.07) !important;
    backdrop-filter: blur(26px) saturate(132%) !important;
    -webkit-backdrop-filter: blur(26px) saturate(132%) !important;
  }

  .mobile-menu a {
    padding: 15px 14px !important;
    border-bottom: 1px solid rgba(255,255,255,.075) !important;
    border-radius: 14px;
    color: rgba(244,245,240,.82) !important;
    font-size: 15px !important;
  }

  .mobile-menu-cta {
    margin-top: 10px !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    background: rgba(255,255,255,.07) !important;
    color: var(--white) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
  }

  .hero {
    min-height: auto !important;
    grid-template-columns: 1fr !important;
    gap: 34px !important;
    padding-top: 128px !important;
    padding-bottom: 58px !important;
  }

  .hero h1 {
    max-width: 11ch;
    font-size: clamp(48px, 13.4vw, 76px) !important;
    line-height: .92 !important;
    letter-spacing: -.058em !important;
  }

  .hero-lede {
    max-width: 620px;
    margin-bottom: 28px !important;
    font-size: clamp(15px, 4vw, 18px) !important;
    line-height: 1.65 !important;
  }

  .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px !important;
  }

  .hero-actions .button {
    width: 100%;
    min-height: 50px;
    justify-content: center;
    padding-inline: 16px;
  }

  .hero-system {
    width: 100% !important;
    min-height: auto !important;
    margin: 0 !important;
  }

  .globe-stage.system-panel {
    width: 100% !important;
    min-height: 420px !important;
    padding: 16px !important;
    border-radius: 26px !important;
    transform: none !important;
  }

  .globe-kicker {
    gap: 10px;
    font-size: 7.5px !important;
    line-height: 1.5;
  }

  .globe-sphere {
    width: min(76vw, 340px) !important;
    height: auto;
    aspect-ratio: 1 / 1;
    margin: 18px auto 10px !important;
  }

  .globe-sphere > strong { font-size: clamp(54px, 16vw, 76px) !important; }

  .result-card {
    width: auto !important;
    max-width: none !important;
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    margin: -74px 18px 0 auto !important;
    padding: 14px !important;
    transform: none !important;
  }

  .stats {
    padding-top: 22px !important;
    padding-bottom: 78px !important;
  }

  .stats-glass {
    grid-template-columns: 1fr 1fr !important;
    border-radius: 24px !important;
  }

  .stat {
    min-height: 104px !important;
    padding: 20px 14px 18px 62px !important;
    border-right: 1px solid rgba(255,255,255,.07) !important;
  }

  .stat:nth-child(2),
  .stat:last-child { border-right: 0 !important; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.07) !important; }

  .stat::before {
    width: 32px !important;
    height: 32px !important;
    left: 16px !important;
  }
  .stat::after { left: 25px !important; }
  .stat strong { font-size: clamp(25px, 8vw, 31px) !important; }
  .stat:last-child strong { font-size: clamp(20px, 5.6vw, 25px) !important; }
  .stat span {
    max-width: 110px;
    font-size: 8px !important;
    line-height: 1.35;
  }

  .trusted,
  .services,
  .selected-work,
  .process,
  .final-cta { padding-bottom: 86px !important; }

  .section-intro.compact { margin-bottom: 28px !important; }
  .section-intro h2,
  .section-heading h2,
  .services-intro h2,
  .cta-glass h2 {
    font-size: clamp(42px, 11.5vw, 64px) !important;
    line-height: .95 !important;
  }

  .logo-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    border-radius: 22px !important;
  }

  .logo-row span {
    min-height: 96px !important;
    padding: 16px 10px !important;
    align-items: center;
    justify-content: center;
    font-size: clamp(22px, 7vw, 31px) !important;
    line-height: .96 !important;
    letter-spacing: -.055em !important;
    overflow-wrap: anywhere;
  }

  .logo-row b {
    margin-top: 8px !important;
    font-size: 8.5px !important;
    letter-spacing: .18em !important;
  }

  .services-layout { display: block !important; }
  .services-intro {
    max-width: 100% !important;
    margin-bottom: 28px;
  }

  .services-intro > p:last-child {
    margin-top: 22px !important;
    font-size: 14px !important;
  }

  .service-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .service-card {
    min-height: 0 !important;
    padding: 22px !important;
    border-radius: 22px !important;
    background: linear-gradient(145deg, rgba(255,255,255,.058), rgba(255,255,255,.018)) !important;
  }

  .service-number {
    margin-bottom: 34px !important;
    font-size: 9px !important;
  }

  .service-card h3 {
    margin-bottom: 10px !important;
    font-size: clamp(28px, 8vw, 36px) !important;
  }

  .service-card p {
    max-width: 100% !important;
    font-size: 13px !important;
  }

  .work-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .work-card,
  .work-card-large,
  .work-card-wide { border-radius: 24px !important; }

  .work-visual { height: 280px !important; }
  .work-visual strong { font-size: clamp(70px, 24vw, 110px) !important; }
  .work-visual i:nth-of-type(1) {
    width: 155px !important;
    height: 155px !important;
    right: -42px !important;
    top: -34px !important;
  }
  .work-visual i:nth-of-type(2) {
    width: 88px !important;
    height: 88px !important;
    left: 8% !important;
    bottom: -42px !important;
  }
  .work-visual i:nth-of-type(3) {
    width: 9px !important;
    height: 9px !important;
    right: 18px !important;
    bottom: 22px !important;
    opacity: .74;
  }
  .work-proof {
    left: 16px !important;
    bottom: 16px !important;
    width: min(240px, calc(100% - 32px)) !important;
    padding: 14px !important;
    border-radius: 16px !important;
  }

  .work-copy {
    min-height: 150px !important;
    padding: 20px !important;
  }

  .work-copy > div {
    padding-right: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    font-size: 8px !important;
    line-height: 1.45 !important;
  }

  .work-copy h3 {
    max-width: calc(100% - 48px) !important;
    margin-top: 28px !important;
    font-size: clamp(29px, 8.8vw, 40px) !important;
  }

  .work-arrow {
    right: 18px !important;
    bottom: 20px !important;
    width: 38px !important;
    height: 38px !important;
  }

  .process-list {
    grid-template-columns: 1fr !important;
    border-radius: 22px !important;
  }

  .process-item,
  .process-item:nth-child(2) {
    min-height: 0 !important;
    padding: 22px !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.075) !important;
  }
  .process-item:last-child { border-bottom: 0 !important; }

  .process-item h3 {
    margin-top: 26px !important;
    font-size: clamp(34px, 9.5vw, 46px) !important;
  }

  .process-item p { font-size: 13px !important; line-height: 1.65; }

  .cta-glass {
    padding: 38px 20px !important;
    border-radius: 26px !important;
  }

  .cta-glass::after {
    right: -22% !important;
    bottom: -6% !important;
    font-size: clamp(160px, 58vw, 280px) !important;
    opacity: .55;
  }

  .cta-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px;
  }

  .cta-actions .button {
    width: 100%;
    justify-content: center;
  }

  .site-footer { padding-bottom: 24px !important; }
  .footer-grid {
    padding: 54px 0 42px !important;
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .footer-brand,
  .footer-contact { grid-column: auto !important; }
  .footer-brand .brand-logo-image { width: 150px !important; }

  .footer-brand > p {
    margin-top: 20px !important;
    font-size: 13px !important;
  }

  .footer-bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    line-height: 1.6;
  }

  .whatsapp-float {
    width: 44px !important;
    height: 44px !important;
    right: 12px !important;
    bottom: 12px !important;
    border-radius: 14px !important;
    opacity: .86;
  }
}

@media (max-width: 430px) {
  .section-shell { width: min(100% - 22px, 408px) !important; }
  .hero h1 { font-size: clamp(46px, 13.2vw, 58px) !important; }
  .hero-actions { grid-template-columns: 1fr !important; }
  .globe-stage.system-panel { min-height: 380px !important; }
  .result-card { margin: -56px 12px 0 12px !important; }
  .stats-glass { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .stat,
  .stat:nth-child(2),
  .stat:last-child {
    min-height: 100px !important;
    padding: 18px 10px 16px 58px !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
  }
  .stat:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.07) !important; }
  .stat:nth-child(even) { border-right: 0 !important; }
  .stat:nth-child(n+3) { border-bottom: 0 !important; }
  .stat strong { font-size: 25px !important; }
  .stat:last-child strong { font-size: 19px !important; letter-spacing: -.055em !important; }
  .logo-row span {
    min-height: 88px !important;
    font-size: clamp(21px, 6.8vw, 27px) !important;
  }
  .work-visual { height: 250px !important; }
  .work-proof { width: min(220px, calc(100% - 28px)) !important; }
  .whatsapp-float {
    width: 42px !important;
    height: 42px !important;
    opacity: .78;
  }
}

@media (max-width: 390px) {
  .brand-logo-image { width: 118px !important; }
  .glass-nav { min-height: 56px !important; }
  .menu-toggle { width: 39px !important; height: 39px !important; }
  .hero { padding-top: 118px !important; }
  .hero h1 { font-size: 45px !important; }
  .logo-row span { font-size: 23px !important; }
  .stat { padding-left: 54px !important; }
  .stat::before { left: 14px !important; }
  .stat::after { left: 23px !important; }
  .stat strong { font-size: 26px !important; }
  .stat:last-child strong { font-size: 18px !important; }
  .cta-glass::after { opacity: .4; }
}

@media (max-width: 1024px), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .cursor-glow { display: none !important; }
}