@media(max-width:1160px){:root{--container:1040px}.hero-grid{grid-template-columns:1fr;gap:35px}.hero-copy{text-align:center}.hero-copy .eyebrow{justify-content:center}.hero h1,.hero-lead{margin-inline:auto}.hero-actions,.hero-proof{justify-content:center}.hero-visual{min-height:580px}.dashboard-shell{width:min(820px,92%)}.solution-copy{padding:55px 42px}.experience-grid{gap:55px}.contact-card{grid-template-columns:1fr 270px;padding:58px}.showcase-card:nth-child(n){grid-column:span 6}}
@media(max-width:900px){:root{--header-height:72px}.container{width:min(100% - 32px,var(--container))}.section{padding:95px 0}.desktop-nav,.desktop-only{display:none!important}.menu-toggle{display:block}.site-header.menu-open{background:rgba(6,11,21,.97);backdrop-filter:blur(20px)}.mobile-menu{position:fixed;top:var(--header-height);left:0;right:0;padding:16px 16px 28px;background:rgba(6,11,21,.97);border-bottom:1px solid var(--line);transform:translateY(-18px);opacity:0;visibility:hidden;transition:.3s}.mobile-menu.is-open{display:block;transform:none;opacity:1;visibility:visible}.mobile-nav{display:grid;margin-bottom:16px}.mobile-nav a{padding:15px 4px;border-bottom:1px solid var(--line);font-size:.9rem}.hero{padding-top:calc(var(--header-height) + 55px)}.hero h1{font-size:clamp(3.2rem,12vw,5.4rem)}.hero-visual{min-height:480px}.dashboard-shell{transform:none}.floating-card-two{right:0}.floating-card-one{left:0}.client-strip{flex-direction:column;text-align:center}.client-list{justify-content:center}.metrics-grid{grid-template-columns:repeat(2,1fr);row-gap:32px}.metric:nth-child(2){border-right:0}.metric:nth-child(3){padding-left:0}.solution-panel{grid-template-columns:1fr}.solution-copy{padding:46px 34px}.solution-visual{padding:0 28px}.solution-stage,.solution-panel{min-height:auto}.solution-image-frame{border-bottom:1px solid var(--line-strong)}.experience-grid{grid-template-columns:1fr}.experience-copy{text-align:center}.experience-copy .eyebrow{justify-content:center}.experience-copy>p{margin-inline:auto}.feature-item{text-align:left}.phone-stage{min-height:620px}.process-grid{grid-template-columns:1fr}.contact-card{grid-template-columns:1fr;padding:48px}.contact-side{display:none}.footer-top{grid-template-columns:1fr;gap:45px}.split-heading{display:block}.split-heading>p{margin-top:24px}.showcase-card:nth-child(n){grid-column:span 12}}
@media(max-width:640px){.container{width:min(100% - 24px,var(--container))}.section{padding:78px 0}.section-heading{margin-bottom:42px}.section-heading h2{font-size:clamp(2.2rem,11vw,3.3rem)}.hero{min-height:auto}.hero h1{font-size:clamp(2.9rem,14vw,4.4rem)}.hero-actions{flex-direction:column;align-items:stretch}.hero-actions .button{width:100%}.hero-proof{display:grid;grid-template-columns:1fr 1fr;gap:15px;text-align:left}.proof-item{align-items:flex-start}.hero-visual{min-height:370px;margin-top:18px}.dashboard-shell{width:100%;border-radius:19px}.browser-bar{height:38px}.browser-address{padding:4px 15px}.secure-pill{display:none}.dashboard-grid{grid-template-columns:42px 1fr;min-height:310px}.dash-sidebar{padding:14px 7px;gap:14px}.mini-logo img{width:22px}.side-line{width:22px}.dash-main{padding:14px}.dash-topline strong{font-size:.92rem}.chart-panel{padding:10px;margin-top:12px}.hero-chart{margin-top:7px}.dash-cards article{padding:9px}.dash-cards span,.dash-cards small{font-size:.42rem}.dash-cards strong{font-size:.62rem}.floating-card{padding:9px 11px}.floating-card-one{bottom:14px}.floating-card-two{top:10px}.floating-icon{width:29px;height:29px}.floating-card strong{font-size:.58rem}.floating-card small{font-size:.45rem}.visual-orbit{display:none}.client-strip{margin-top:36px}.client-list{gap:20px}.metrics-grid{grid-template-columns:1fr 1fr}.metric{padding:5px 15px}.metric strong{font-size:2rem}.solution-tabs{overflow-x:auto;justify-content:flex-start;padding-bottom:6px;scrollbar-width:none}.solution-tabs::-webkit-scrollbar{display:none}.solution-tab{flex:0 0 auto}.solution-copy{padding:38px 24px}.solution-copy h3{font-size:2.3rem}.solution-visual{padding:0 14px}.showcase-card{min-height:300px}.showcase-info{left:20px;right:20px;bottom:18px}.experience-copy h2{font-size:clamp(2.45rem,12vw,3.6rem)}.feature-item{padding:13px}.phone-stage{min-height:520px;transform:scale(.82);margin:-45px -35px}.phone-back{transform:translateX(-80px) rotate(-8deg) scale(.87)}.phone-front{transform:translateX(70px) rotate(6deg) scale(.92)}.badge-top{right:0}.badge-bottom{left:0}.contact-card{padding:34px 24px;min-height:440px;border-radius:28px}.contact-card h2{font-size:clamp(2.35rem,12vw,3.35rem)}.contact-actions{flex-direction:column;align-items:stretch}.contact-actions .button{width:100%}.footer-links{grid-template-columns:1fr 1fr}.footer-bottom{flex-direction:column;gap:13px}.lightbox-caption{align-items:flex-start;flex-wrap:wrap}.lightbox-caption .button{width:100%;margin-top:6px}}
@media(max-width:420px){.hero-proof{grid-template-columns:1fr}.metrics-grid{grid-template-columns:1fr}.metric{border-right:0;border-bottom:1px solid var(--line);padding:12px 0}.metric:last-child{border-bottom:0}.footer-links{grid-template-columns:1fr}}
@media(max-width:420px){.brand-mark{width:38px;height:38px}.brand-copy{gap:3px}.brand-copy strong{font-size:.96rem}.brand-copy small{font-size:.46rem;letter-spacing:.09em}}

@media(max-width:1160px){.product-phone-stage{gap:4px}.real-phone{width:205px;height:450px}}
@media(max-width:900px){.product-dashboard{transform:none}.product-phone-stage{min-height:620px}.real-phone{width:190px;height:420px}.real-phone-left{transform:translateX(34px) rotate(-7deg) scale(.86)}.real-phone-right{transform:translateX(-34px) rotate(7deg) scale(.86)}}
@media(max-width:640px){.hero-product-picture{aspect-ratio:390/844}.hero-product-picture img{object-fit:cover}.product-phone-stage{min-height:560px;transform:none;margin:0 -42px}.real-phone{width:165px;height:365px;border-width:6px;border-radius:27px}.real-phone-left{transform:translateX(58px) rotate(-9deg) scale(.76)}.real-phone-center{transform:translateY(-12px);z-index:4}.real-phone-right{transform:translateX(-58px) rotate(9deg) scale(.76)}.product-phone-stage:hover .real-phone-left{transform:translateX(58px) rotate(-9deg) scale(.76)}.product-phone-stage:hover .real-phone-right{transform:translateX(-58px) rotate(9deg) scale(.76)}.product-phone-stage:hover .real-phone-center{transform:translateY(-12px)}.real-phone::before{width:56px;height:14px}.showcase-card{min-height:420px}.showcase-card:nth-child(1){min-height:240px}}
@media(max-width:420px){.product-phone-stage{margin:0 -60px}.real-phone{width:152px;height:338px}.showcase-card{min-height:390px}}

/* =========================================================
   IPHONE HORIZONTAL OVERFLOW FIX — 2026-07-27
   Keeps the mobile phone composition and floating badges
   fully inside the viewport without changing desktop layout.
   ========================================================= */
@media (max-width: 640px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  .experience,
  .experience-grid,
  .phone-stage,
  .product-phone-stage {
    max-width: 100%;
  }

  /* Original phone mockup section */
  .phone-stage {
    width: 100%;
    min-height: 520px;
    margin: 0;
    transform: none;
    overflow: hidden;
  }

  .phone-back {
    transform: translateX(-64px) rotate(-7deg) scale(.78);
  }

  .phone-front {
    transform: translateX(58px) rotate(6deg) scale(.82);
  }

  .phone-badge {
    max-width: calc(100% - 24px);
    padding: 11px 13px;
  }

  .badge-top {
    top: 82px;
    right: 8px;
    left: auto;
  }

  .badge-bottom {
    left: 8px;
    right: auto;
    bottom: 82px;
  }

  /* Real screenshot phone trio */
  .product-phone-stage {
    position: relative;
    width: 100%;
    min-height: 550px;
    margin: 0;
    padding: 20px 8px 0;
    gap: 0;
    overflow: hidden;
    transform: none;
  }

  .real-phone {
    position: absolute;
    width: 158px;
    height: 348px;
    flex: none;
    border-width: 6px;
    border-radius: 27px;
  }

  .real-phone-left {
    left: 0;
    right: auto;
    z-index: 1;
    transform: translateX(-8px) translateY(38px) rotate(-7deg) scale(.78);
    transform-origin: center bottom;
  }

  .real-phone-center {
    left: 50%;
    right: auto;
    z-index: 4;
    transform: translateX(-50%) translateY(0);
  }

  .real-phone-right {
    right: 0;
    left: auto;
    z-index: 1;
    transform: translateX(8px) translateY(38px) rotate(7deg) scale(.78);
    transform-origin: center bottom;
  }

  .product-phone-stage:hover .real-phone-left {
    transform: translateX(-8px) translateY(38px) rotate(-7deg) scale(.78);
  }

  .product-phone-stage:hover .real-phone-center {
    transform: translateX(-50%) translateY(0);
  }

  .product-phone-stage:hover .real-phone-right {
    transform: translateX(8px) translateY(38px) rotate(7deg) scale(.78);
  }
}

@media (max-width: 420px) {
  .product-phone-stage {
    min-height: 525px;
    margin: 0;
    padding-inline: 4px;
  }

  .real-phone {
    width: 148px;
    height: 326px;
  }

  .real-phone-left {
    transform: translateX(-12px) translateY(42px) rotate(-6deg) scale(.75);
  }

  .real-phone-right {
    transform: translateX(12px) translateY(42px) rotate(6deg) scale(.75);
  }

  .product-phone-stage:hover .real-phone-left {
    transform: translateX(-12px) translateY(42px) rotate(-6deg) scale(.75);
  }

  .product-phone-stage:hover .real-phone-right {
    transform: translateX(12px) translateY(42px) rotate(6deg) scale(.75);
  }

  .phone-badge {
    max-width: calc(100% - 16px);
  }

  .badge-top {
    right: 4px;
  }

  .badge-bottom {
    left: 4px;
  }
}