/* Voracity Mail landing — mobile performance + centered composition.
   Keep desktop presentation untouched. Mobile intentionally uses one static
   background and avoids viewport-sized animated/blurred layers. */

@media (max-width: 900px) {
  html {
    background:#080a0a;
    scroll-behavior:auto !important;
  }

  html body.landing-page {
    overflow-x:hidden !important;
    background-color:#080a0a !important;
    background-image:
      linear-gradient(rgba(47,191,113,.028) 1px,transparent 1px),
      linear-gradient(90deg,rgba(38,160,202,.03) 1px,transparent 1px) !important;
    background-size:56px 56px !important;
    background-position:center top !important;
    background-attachment:scroll !important;
  }

  /* Zero mobile ambient animation. */
  body.landing-page::before,
  body.landing-page::after,
  .landing-page .public-hero::before,
  .landing-page .cyber-board-bg,
  .landing-page .circuit-trace-layer,
  .landing-page .hero-panel::after {
    display:none !important;
    content:none !important;
    animation:none !important;
    transition:none !important;
    filter:none !important;
  }

  .landing-page *,
  .landing-page *::before,
  .landing-page *::after {
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }

  .landing-page .hero-panel,
  .landing-page .bars i,
  .landing-page .status-dot,
  .landing-page .service-card,
  .landing-page .landing-price-card,
  .landing-page .public-metric-grid article {
    animation:none !important;
    transition:none !important;
    will-change:auto !important;
  }

  /* Render below-the-fold sections only when they approach the viewport. */
  .landing-page main > .section,
  .landing-page main > .logo-strip {
    content-visibility:auto;
    contain-intrinsic-size:720px;
  }

  .landing-page .service-card,
  .landing-page .landing-price-card,
  .landing-page .public-metric-grid article,
  .landing-page .about-principles article {
    contain:layout paint style;
    box-shadow:none !important;
  }

  /* One centered mobile frame. */
  .landing-page .shell,
  .landing-page .hero.public-hero,
  .landing-page .section,
  .landing-page .split-section,
  .landing-page .logo-strip {
    width:min(92vw,760px) !important;
    max-width:760px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .landing-page .public-floating-header.shell {
    width:min(92vw,760px) !important;
    max-width:760px !important;
    min-height:58px !important;
    height:auto !important;
    padding:7px 10px !important;
    left:0 !important;
    right:0 !important;
    margin-inline:auto !important;
    transform:none !important;
    background:rgba(8,11,10,.96) !important;
    box-shadow:0 8px 24px rgba(0,0,0,.22) !important;
  }

  .landing-page .public-brand {
    gap:8px;
    min-width:0;
  }
  .landing-page .public-brand .brand-mark {
    width:30px;
    height:34px;
    flex:0 0 30px;
  }
  .landing-page .public-brand strong { font-size:14px; }
  .landing-page .public-brand small { font-size:8px; }

  .landing-page .public-desktop-nav,
  .landing-page .public-header-demo,
  .landing-page .public-header-login,
  .landing-page .public-header-account {
    display:none !important;
  }

  .landing-page .public-menu-button {
    display:inline-grid !important;
    place-items:center;
    width:42px;
    min-width:42px;
    height:42px;
    padding:9px;
    touch-action:manipulation;
  }

  .landing-page .public-menu-backdrop {
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  .landing-page .public-menu-panel {
    width:min(92vw,420px) !important;
    max-height:calc(100dvh - 88px) !important;
    left:50% !important;
    right:auto !important;
    transform:translate3d(-50%,-12px,0) scale(.985) !important;
    overflow-y:auto;
    overscroll-behavior:contain;
    background:#0e1210 !important;
    box-shadow:0 18px 44px rgba(0,0,0,.34) !important;
  }
  .public-menu-open .public-menu-panel {
    transform:translate3d(-50%,0,0) scale(1) !important;
  }

  .landing-page .public-menu-links a {
    min-height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
  }

  /* Hero: same hierarchy as desktop, but centered and stacked cleanly. */
  .landing-page .hero.public-hero {
    min-height:auto !important;
    grid-template-columns:1fr !important;
    gap:30px !important;
    padding-top:42px !important;
    padding-bottom:42px !important;
  }

  .landing-page .public-hero .hero-copy,
  .landing-page .hero-panel {
    width:100% !important;
    max-width:720px !important;
    margin-inline:auto !important;
  }

  .landing-page .public-hero .hero-copy,
  .landing-page .section-heading,
  .landing-page .split-section > div:first-child,
  .landing-page .about-story,
  .landing-page .service-card,
  .landing-page .landing-price-card,
  .landing-page .public-metric-grid article,
  .landing-page .demo-public-card,
  .landing-page .contact-card {
    text-align:center !important;
  }

  .landing-page .identity-heading,
  .landing-page .eyebrow {
    justify-content:center !important;
  }

  .landing-page .public-hero .hero-copy h1 {
    max-width:680px !important;
    margin:10px auto 18px !important;
    font-size:clamp(38px,8.7vw,56px) !important;
    line-height:1.02 !important;
    letter-spacing:-.04em !important;
    text-wrap:balance;
  }

  .landing-page .hero-text,
  .landing-page .section-heading p,
  .landing-page .split-section p,
  .landing-page .about-story p,
  .landing-page .service-card p,
  .landing-page .landing-price-card p,
  .landing-page .demo-public-card p,
  .landing-page .contact-card p {
    max-width:650px;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .landing-page .hero-text {
    font-size:15.5px !important;
    line-height:1.62 !important;
  }

  .landing-page .hero-actions,
  .landing-page .trust-row,
  .landing-page .contact-actions {
    justify-content:center !important;
    align-items:center !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .landing-page .hero-actions {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
    width:min(100%,520px) !important;
    margin-top:24px !important;
  }
  .landing-page .hero-actions .button { width:100% !important; min-height:46px; }

  .landing-page .trust-row {
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px 14px !important;
    margin-top:22px !important;
    text-align:center !important;
  }

  .landing-page .hero-panel {
    padding:14px !important;
    text-align:left !important;
    background:#101512 !important;
    box-shadow:none !important;
  }

  .landing-page .preview-grid {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .landing-page .mini-card { min-width:0; padding:14px 12px !important; }
  .landing-page .preview-chart { height:158px !important; padding:12px 9px !important; }
  .landing-page .bars { height:100px !important; gap:5px !important; }

  /* Capability row stays centered instead of visually starting at the left edge. */
  .landing-page .logo-strip {
    min-height:68px !important;
    display:flex !important;
    justify-content:center !important;
    flex-wrap:wrap !important;
    gap:12px 20px !important;
    overflow:visible !important;
    padding-inline:0 !important;
    text-align:center !important;
  }

  .landing-page .section {
    padding-top:58px !important;
    padding-bottom:58px !important;
  }
  .landing-page .section-heading { margin-bottom:28px !important; }
  .landing-page .section-heading h2,
  .landing-page .split-section h2 {
    max-width:680px;
    margin-left:auto !important;
    margin-right:auto !important;
    font-size:clamp(31px,7vw,44px) !important;
    line-height:1.08 !important;
    text-wrap:balance;
  }

  .landing-page .about-grid,
  .landing-page .split-section {
    grid-template-columns:1fr !important;
    gap:26px !important;
  }

  .landing-page .about-principles {
    width:min(100%,620px);
    margin-inline:auto !important;
  }
  .landing-page .about-principles article {
    text-align:center !important;
  }

  .landing-page .service-grid,
  .landing-page .landing-pricing-preview {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px !important;
  }
  .landing-page .service-card,
  .landing-page .landing-price-card {
    min-width:0 !important;
    padding:22px 18px !important;
  }
  .landing-page .service-card .service-icon {
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .landing-page .integration-flow {
    width:min(100%,620px) !important;
    margin-inline:auto !important;
    text-align:center !important;
  }
  .landing-page .integration-flow > *,
  .landing-page .integration-flow div > * {
    min-width:0;
    overflow-wrap:anywhere;
  }

  .landing-page .public-metric-grid {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
  }

  .landing-page .demo-public-card,
  .landing-page .contact-card {
    grid-template-columns:1fr !important;
    gap:22px !important;
    align-items:center !important;
    padding:24px 20px !important;
  }
  .landing-page .demo-public-actions,
  .landing-page .contact-actions {
    width:100% !important;
    align-items:center !important;
  }

  .landing-page .site-footer,
  .landing-page .global-site-footer {
    text-align:center !important;
  }
}

@media (max-width: 640px) {
  .landing-page .shell,
  .landing-page .hero.public-hero,
  .landing-page .section,
  .landing-page .split-section,
  .landing-page .logo-strip,
  .landing-page .public-floating-header.shell {
    width:min(94vw,640px) !important;
    max-width:640px !important;
  }

  .landing-page .hero.public-hero {
    gap:24px !important;
    padding-top:32px !important;
    padding-bottom:34px !important;
  }
  .landing-page .public-hero .hero-copy h1 {
    font-size:clamp(34px,10.2vw,46px) !important;
  }
  .landing-page .hero-text { font-size:15px !important; }
  .landing-page .section { padding-top:50px !important; padding-bottom:50px !important; }

  .landing-page .service-grid,
  .landing-page .landing-pricing-preview {
    grid-template-columns:1fr !important;
  }

  .landing-page .service-card,
  .landing-page .landing-price-card {
    width:min(100%,540px) !important;
    margin-inline:auto !important;
  }
}

@media (max-width: 430px) {
  .landing-page .shell,
  .landing-page .hero.public-hero,
  .landing-page .section,
  .landing-page .split-section,
  .landing-page .logo-strip,
  .landing-page .public-floating-header.shell {
    width:min(94vw,410px) !important;
  }

  .landing-page .hero-actions {
    grid-template-columns:1fr !important;
    width:min(100%,360px) !important;
  }
  .landing-page .preview-grid,
  .landing-page .public-metric-grid {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .landing-page .mini-card strong { font-size:24px !important; }
  .landing-page .section-heading h2,
  .landing-page .split-section h2 {
    font-size:clamp(29px,9vw,36px) !important;
  }
}

@media (max-width: 350px) {
  .landing-page .preview-grid,
  .landing-page .public-metric-grid {
    grid-template-columns:1fr !important;
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  .landing-page .public-menu-panel { max-height:calc(100dvh - 12px) !important; }
  .landing-page .hero.public-hero { padding-top:24px !important; }
}