/* Homepage mobile system — loaded last so the canonical desktop design remains intact. */
.mobile-nav { display: none; }
.payment-mark--clone { display: none; }

@media (max-width: 900px) {
  :root {
    --gutter: 22px;
    --nav-h: 68px;
  }

  html { scroll-padding-top: var(--nav-h); }
  html, body { width: 100%; max-width: 100%; overflow-x: clip !important; }
  body { background-attachment: scroll !important; }
  .glow { display: none !important; }

  /* Mobile content must never depend on an observer firing after a fast swipe. */
  .reveal,
  .reveal.in,
  [data-stagger] > *,
  [data-stagger].in > *,
  .gh-kpi-card,
  .gh-dash.v3.in .gh-kpi-card {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
    transition: none !important;
  }
  [data-parallax] { transform: none !important; will-change: auto !important; }

  .topbar-inner { padding-inline: var(--gutter); }
  .topbar-left { min-width: 0; }
  .topbar-right { margin-left: auto; }
  .topbar-social { width: 28px; height: 28px; }

  .nav {
    position: sticky;
    top: 0;
    height: var(--nav-h);
    backdrop-filter: blur(12px) saturate(130%);
    -webkit-backdrop-filter: blur(12px) saturate(130%);
  }
  .nav-inner { padding-inline: var(--gutter); gap: 12px; position: relative; }
  .nav-logo { min-width: 0; margin-right: auto; }
  .nav-logo img { height: 34px !important; max-width: 150px !important; }
  .nav-cta { min-height: 44px; padding: 10px 16px; font-size: 13px; gap: 7px; }

  .mobile-nav { display: block; order: 2; }
  .mobile-nav > summary {
    width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.14);
    border-radius: 12px; display: grid; place-content: center; gap: 4px;
    list-style: none; cursor: pointer; background: rgba(255,255,255,.045);
  }
  .mobile-nav summary::-webkit-details-marker { display: none; }
  .mobile-nav > summary > span { width: 18px; height: 2px; border-radius: 2px; background: #fff; transition: transform .2s ease, opacity .2s ease; }
  .mobile-nav[open] > summary > span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .mobile-nav[open] > summary > span:nth-child(2) { opacity: 0; }
  .mobile-nav[open] > summary > span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .mobile-nav-panel {
    position: absolute; z-index: 220; top: calc(100% + 1px); left: 0; right: 0;
    padding: 12px var(--gutter) 24px; display: grid; grid-template-columns: 1fr;
    gap: 8px; max-height: calc(100svh - var(--nav-h)); overflow-y: auto;
    overscroll-behavior: contain; background: #031624; border-bottom: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 24px 50px rgba(0,0,0,.38);
  }
  .mobile-mega-group { border: 1px solid rgba(255,255,255,.09); border-radius: 12px; overflow: hidden; background: rgba(255,255,255,.025); }
  .mobile-mega-group > summary {
    min-height: 54px; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between;
    list-style: none; cursor: pointer; color: #fff; font-family: var(--f-display); font-size: 15px; font-weight: 700;
  }
  .mobile-mega-group > summary i {
    width: 9px; height: 9px; margin-right: 3px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
    transform: rotate(45deg) translate(-2px,-2px); transition: transform .22s ease; flex: 0 0 auto;
  }
  .mobile-mega-group[open] > summary { color: var(--accent); background: rgba(4,231,136,.055); }
  .mobile-mega-group[open] > summary i { transform: rotate(225deg) translate(-2px,-2px); }
  .mobile-mega-links { padding: 4px 8px 8px; display: grid; grid-template-columns: 1fr; gap: 6px; border-top: 1px solid rgba(255,255,255,.07); }
  .mobile-mega-links--grid { grid-template-columns: 1fr 1fr; }
  .mobile-mega-links a {
    min-height: 62px; padding: 11px 12px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
    border: 1px solid rgba(255,255,255,.08); border-radius: 10px;
    background: rgba(255,255,255,.035);
  }
  .mobile-mega-links a strong { color: #fff; font-family: var(--f-display); font-size: 13px; line-height: 1.25; font-weight: 700; }
  .mobile-mega-links a small { margin-top: 4px; color: var(--dim); font-family: var(--f-body); font-size: 10.5px; line-height: 1.3; }
  .mobile-nav-direct {
    min-height: 56px; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between;
    border: 1px solid rgba(4,231,136,.24); border-radius: 12px; background: rgba(4,231,136,.07);
  }
  .mobile-nav-direct span { color: #fff; font-family: var(--f-display); font-size: 15px; font-weight: 700; }
  .mobile-nav-direct i { color: var(--accent); font-family: var(--f-body); font-size: 11px; font-style: normal; }

  .section, .woopw, .trust, .founder-section { padding: 76px var(--gutter) !important; }
  .section[style*="padding-top: 0"] { padding-top: 18px !important; }
  .section-head { margin-bottom: 34px !important; }
  .section-head .section-chip { margin-bottom: 16px; }
  .section-title { font-size: clamp(34px, 10vw, 48px); line-height: 1.03; max-width: 100%; }
  .section-intro { font-size: 16px; }

  .hero { padding: 52px var(--gutter) 58px !important; }
  .hero-grid { gap: 42px !important; }
  .hero h1 { font-size: clamp(39px, 11.5vw, 58px) !important; line-height: .98 !important; margin: 20px 0 24px !important; text-wrap: pretty; }
  .hero h1 .word, .hero-sub, .hero-actions, .hero-meta, .hero-eyebrow, .hero-visual, .hero-eco-lines {
    opacity: 1 !important; transform: none !important; animation: none !important;
  }
  .hero-sub { font-size: 16px !important; line-height: 1.55; margin-bottom: 30px; }
  .hero-actions { margin-bottom: 34px; gap: 10px; }
  .hero-actions .btn-primary, .hero-actions .btn-ghost { justify-content: center; min-height: 50px; }
  .hero-meta { margin-top: 0 !important; gap: 14px; display: grid; }
  .hero-meta-item { font-size: 9.5px; letter-spacing: .08em; }
  .hero-visual, .hero-eco { height: auto !important; aspect-ratio: 1 / 1; min-height: 0 !important; }
  .hero-eco { position: relative !important; inset: auto !important; }
  .hero-eco-lines { inset: 3% !important; }
  .eco-card.eco-sat { width: 22% !important; padding: 4% !important; gap: 2px !important; }
  .eco-sat .eco-icon { width: 21px !important; height: 21px !important; padding: 4px !important; }
  .eco-sat .eco-label { font-size: clamp(8px, 2.5vw, 11px) !important; }
  .eco-mini { font-size: 6px !important; }
  .eco-logo-wrap { width: 25% !important; }

  .services-grid-3, .cases-grid, .blog-grid, .reviews-grid, .vt-grid { gap: 16px !important; }
  .services-grid-3 .service, .case, .blog-card-body, .review-card { padding: 24px !important; }
  .services-grid-3 .service h3, .cases-grid .case h3 { font-size: 23px !important; }
  .service:hover, .case:hover, .blog-card:hover, .vt-card:hover, .review-card:hover { transform: none !important; }

  .woopw-inner, .gh-grid, .founder-inner { grid-template-columns: 1fr !important; gap: 42px !important; }
  .gh-glow { display: none !important; }
  .woopw h2, .founder-content h2 { font-size: clamp(34px, 10vw, 48px) !important; }
  .woopw-visual { min-width: 0; width: 100%; }
  .woopw-dash { transform: none !important; width: 100% !important; }
  .woopw-dash-side { width: 28% !important; }
  .woopw-dash-main { width: 72% !important; min-width: 0 !important; }
  .woopw-actions, .section-cta-buttons, .final-actions { width: 100%; }

  .case-visual { min-height: 150px !important; }
  .cases-grid .case .case-tag { margin-top: 20px !important; }
  .cases-grid .case .case-stat-val { font-size: 31px !important; }
  .vt-card { overflow: hidden; }
  .vt-video { width: 100%; aspect-ratio: 16/9; }
  .stats { padding: 62px var(--gutter) !important; }
  .stats-inner { gap: 28px 18px !important; }
  .stat { padding-left: 14px; }
  .stat-value { font-size: clamp(34px, 10vw, 48px); }
  .stat-label { font-size: 9px; line-height: 1.45; letter-spacing: .07em; }
  .process { border-radius: 18px; }
  .process-step { padding: 28px 24px 26px; }

  .founder-portrait-wrap { max-width: 560px; margin-inline: auto; }
  .founder-stat-floating { right: 12px !important; bottom: 12px !important; }
  .founder-sign { flex-wrap: wrap; align-items: flex-start; }
  .founder-vision { padding: 18px 18px 18px 20px; }
  .founder-vision p { font-size: 15px; }
  .founder-sign .btn-ghost { margin-left: 0 !important; width: 100%; justify-content: center; }

  .trust { overflow: hidden; }
  .trust-row { gap: 22px 16px !important; }
  .trust-badge { min-height: 72px; padding: 4px !important; }
  .trust-badge img { max-height: 58px; }

  .bp-inner { padding: 30px 22px !important; gap: 24px !important; }
  .bp-title { font-size: 34px; }
  .bp-meta { display: grid; gap: 10px; }
  .bp-card { padding: 24px !important; }
  .blueprint-promo { border-radius: 20px; }

  .section-cta { margin-top: 38px; padding-top: 28px; gap: 20px; }
  .section-cta .section-cta-buttons { display: grid; }
  .section-cta .btn-primary, .section-cta .btn-ghost,
  .woopw-actions .btn-primary, .woopw-actions .btn-ghost,
  .final-actions .btn-primary, .final-actions .btn-ghost { width: 100%; justify-content: center; min-height: 50px; }

  .final { padding: 82px var(--gutter) 44px !important; }
  .final h2 { font-size: clamp(42px, 12vw, 60px); }
  .final p { font-size: 16px; }
  .final-actions { display: grid; margin-bottom: 20px; }

  .footer { padding: 48px var(--gutter) 26px; }
  .footer-top { gap: 34px; }
  .footer-trust { gap: 24px; }
  .payment-area { width: 100%; max-width: 100%; overflow: hidden; }
  .payment-marks {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 8px;
    width: max-content;
    animation: homePaymentMarquee 21s linear infinite;
    will-change: transform;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  }
  .payment-mark {
    width: 76px;
    min-width: 76px;
    height: 30px;
    padding: 0 7px;
    flex: 0 0 76px;
    font-size: 10px;
  }
  .payment-mark.visa { font-size: 13px; }
  .payment-mark.apple { font-size: 11px; }
  .payment-mark.google, .payment-mark.maestro { font-size: 10px; }
  .payment-mark--clone { display: inline-flex; }
  .footer-bottom { align-items: flex-start; line-height: 1.5; }
}

/* Mobile mega menu: parent labels navigate; dedicated chevrons expand. */
@media (max-width: 980px) {
  .mobile-mega-head {
    min-height: 56px; display: grid; grid-template-columns: minmax(0, 1fr) 56px;
    align-items: stretch;
  }
  .mobile-mega-parent {
    min-width: 0; padding: 12px 14px; display: flex; align-items: center; gap: 11px;
    color: #fff; font-family: var(--f-display); font-size: 15px; font-weight: 700;
  }
  .mobile-menu-icon {
    width: 22px; height: 22px; flex: 0 0 22px; fill: none; stroke: currentColor;
    stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
  }
  .mobile-mega-parent .mobile-menu-icon {
    width: 31px; height: 31px; flex-basis: 31px; padding: 6px; color: var(--accent);
    border: 1px solid rgba(4,231,136,.32); border-radius: 9px; background: rgba(4,231,136,.08);
  }
  .mobile-mega-toggle {
    width: 56px; border: 0; border-left: 1px solid rgba(255,255,255,.07);
    background: transparent; color: var(--accent); display: grid; place-items: center; cursor: pointer;
  }
  .mobile-mega-toggle i {
    width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px,-2px); transition: transform .22s ease;
  }
  .mobile-mega-group.is-open .mobile-mega-head { color: var(--accent); background: rgba(4,231,136,.055); }
  .mobile-mega-group.is-open .mobile-mega-toggle i { transform: rotate(225deg) translate(-2px,-2px); }
  .mobile-mega-links[hidden] { display: none !important; }
  .mobile-mega-links a {
    display: grid; grid-template-columns: 34px minmax(0,1fr); grid-template-rows: auto auto;
    column-gap: 10px; align-items: center;
  }
  .mobile-mega-links a .mobile-menu-icon {
    grid-column: 1; grid-row: 1 / 3; width: 32px; height: 32px; padding: 7px;
    color: var(--accent); border: 1px solid rgba(4,231,136,.22); border-radius: 9px;
    background: rgba(4,231,136,.055);
  }
  .mobile-mega-links a strong, .mobile-mega-links a small { grid-column: 2; }
  .mobile-mega-links a strong { grid-row: 1; }
  .mobile-mega-links a small { grid-row: 2; }
  .mobile-nav-direct { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; gap: 10px; }
  .mobile-nav-direct .mobile-menu-icon {
    width: 32px; height: 32px; padding: 7px; color: var(--accent);
    border: 1px solid rgba(4,231,136,.28); border-radius: 9px; background: rgba(4,231,136,.07);
  }
  .mobile-mega-parent:focus-visible, .mobile-mega-toggle:focus-visible, .mobile-mega-links a:focus-visible,
  .mobile-nav-direct:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
}

@keyframes homePaymentMarquee {
  to { transform: translateX(calc(-50% - 4px)); }
}

@media (max-width: 560px) {
  :root { --gutter: 18px; --nav-h: 64px; }
  .topbar-right .topbar-social:nth-of-type(1) { display: none; }
  .topbar-login { padding: 5px 9px; }
  .nav-logo img { height: 31px !important; max-width: 135px !important; }
  .nav-cta { order: 3; font-size: 12px; width: auto; padding: 0 13px; justify-content: center; }
  .nav-cta svg { width: 18px; height: 18px; }
  .mobile-nav { order: 2; }
  .mobile-nav-panel { max-height: calc(100svh - 104px); }
  .mobile-mega-links--grid { grid-template-columns: 1fr; }
  .hero { padding-top: 46px !important; }
  .hero-eyebrow-trust { max-width: 100%; gap: 7px; }
  .het-stars svg { width: 11px; height: 11px; }
  .het-text strong, .het-text .het-num, .het-logo { font-size: 11px; }
  .hero-actions { display: grid; }
  .hero-actions .btn-primary, .hero-actions .btn-ghost { width: 100%; }
  .stats-inner { grid-template-columns: 1fr 1fr !important; }
  .founder-portrait-wrap {
    padding-bottom: 94px;
  }
  .founder-portrait-wrap::before {
    inset: -2px -2px 92px;
  }
  .founder-tag {
    left: 16px;
    right: 16px;
    bottom: 16px;
    width: auto;
    max-width: calc(100% - 32px);
    justify-content: center;
    text-align: center;
  }
  .founder-stat-floating {
    right: 0 !important;
    bottom: 0 !important;
    min-width: 196px;
  }
  .founder-creds { gap: 18px 10px; }
  .cyber-badge { width: 100%; }
}

@media (max-width: 340px) {
  :root { --gutter: 15px; }
  .topbar-social { display: none !important; }
  .nav-logo img { height: 27px !important; max-width: 118px !important; }
  .nav-cta { font-size: 10.5px; width: auto; padding: 0 10px; }
  .hero h1 { font-size: 36px !important; }
  .eco-mini { display: none !important; }
  .cases-grid .case .case-stats { gap: 10px !important; }
  .cases-grid .case .case-stat-val { font-size: 27px !important; }
}

/* Mobile logo: 25% smaller than the enlarged treatment, with room for controls. */
@media (max-width: 620px) {
  .pm-site-header { --nav-h: 78px; }
  .nav-logo img { height: 51px !important; max-width: 225px !important; }
}

@media (max-width: 560px) {
  .pm-site-header { --nav-h: 74px; }
  .nav-logo img { height: 47px !important; max-width: 203px !important; }
}

@media (max-width: 340px) {
  .pm-site-header { --nav-h: 68px; }
  .nav-logo img { height: 41px !important; max-width: 177px !important; }
}

@media (hover: none), (pointer: coarse) {
  .btn-primary:hover, .btn-ghost:hover, .nav-cta:hover, .cyber-badge:hover,
  .eco-card.eco-sat:hover, .service:hover, .case:hover, .blog-card:hover,
  .vt-card:hover, .review-card:hover { transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .payment-area { overflow-x: auto; }
  .payment-marks { animation: none !important; will-change: auto; }
  .payment-mark--clone { display: none; }
}

/* Keep G/Y/J/Q descenders inside every homepage display-title line box. */
:where(h1, h2, h3, h4) {
  line-height: 1.08 !important;
  overflow: visible !important;
  padding-bottom: .14em;
}

:where(h1, h2, h3, h4) :where(.grad, .gradient, .gradient-text, [class*="gradient"]) {
  line-height: inherit !important;
  overflow: visible !important;
  padding-bottom: .14em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

@media (max-width: 700px) {
  :where(h1, h2, h3, h4) {
    line-height: 1.12 !important;
    padding-bottom: .16em;
  }

  .founder-content h2 {
    line-height: 1.14 !important;
    padding-bottom: .18em;
  }
}