/* =========================================================
   MR1 — Responsive layer (mobile-first priorities: 360–430px)
   ========================================================= */

@media (max-width: 1180px) {
  .main-nav a { padding: 8px 9px; }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
  .hero-visual { height: 480px; }
  .ai-bubble { left: 14%; }
}

@media (max-width: 980px) {
  :root { --header-h: 68px; }
  .main-nav { display: none; }
  .header-actions { margin-inline-start: auto; }
  .brand img { height: 40px; }

  .hero { padding-top: calc(var(--header-h) + 36px); padding-bottom: 64px; }
  .hero-inner { grid-template-columns: 1fr; gap: 20px; }
  .hero-copy { max-width: 640px; }
  .hero-visual { height: 460px; max-width: 640px; width: 100%; margin-inline: auto; }
  .ai-bubble { position: relative; left: auto; top: auto; margin: -36px auto 0; max-width: 420px; }
  .hero::after { left: -200px; top: 380px; }

  .assistant-grid, .quote-grid, .faq-inner { grid-template-columns: 1fr; gap: 40px; }
  .quote-copy { position: static; }
  .work-grid { grid-template-columns: repeat(2, 1fr); }
  .w-wide { grid-column: span 2; }
  .w-tall { grid-row: span 1; }
  .shot-app { min-height: 300px; }
  .steps { grid-template-columns: 1fr; gap: 0; }
  .steps::before { top: 24px; bottom: 24px; inset-inline: 24px auto; width: 2px; height: auto; background: repeating-linear-gradient(to bottom, var(--blue) 0 8px, transparent 8px 16px); }
  .steps li { display: grid; grid-template-columns: 50px 1fr; column-gap: 18px; padding-bottom: 26px; }
  .steps li .step-n { grid-row: span 2; margin: 0; }
  .steps li b { align-self: end; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  body { padding-bottom: 76px; } /* room for the sticky mobile bar */
  .section { padding: 72px 0; }
  .section-head { margin-bottom: 32px; }
  .header-cta { display: none; }

  /* Sticky mobile CTA bar */
  .mobile-bar {
    display: grid; grid-template-columns: 1.1fr 1fr; gap: 8px;
    position: fixed; z-index: 55; inset: auto 0 0 0;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--line); box-shadow: 0 -10px 30px -20px rgba(16,34,79,.35);
    transition: transform .3s var(--ease);
  }
  .mobile-bar .btn { --pad-y: 13px; font-size: .95rem; }
  .mobile-bar.is-hidden { transform: translateY(110%); }
  .chat-launcher { display: none; }
  .chat-mini { bottom: calc(84px + env(safe-area-inset-bottom)); }

  /* Chat becomes a full-screen sheet; height follows the visual viewport so the keyboard never covers the input */
  .chat-panel {
    inset: 0; bottom: auto; width: 100%;
    height: var(--vvh, 100dvh);
    border-radius: 0; border: 0;
    animation-name: sheet-in;
  }
  .chat-head { padding-top: calc(12px + env(safe-area-inset-top)); }
  .chat-input { padding-bottom: 8px; }
  .chat-privacy { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .chat-input input { font-size: 16px; } /* prevents iOS zoom */
  .qr { min-height: 44px; font-size: .95rem; }
  .chat-quick { max-height: 38vh; }
  body.chat-open { overflow: hidden; }
  body.chat-open .mobile-bar { transform: translateY(110%); }

  .consent-banner { flex-direction: column; align-items: stretch; gap: 12px; bottom: calc(84px + env(safe-area-inset-bottom)); }
  .consent-actions .btn { flex: 1; }

  .form-card { padding: 22px 18px; border-radius: 24px; }
  .field-row { grid-template-columns: 1fr; }
  .field input, .field select, .field textarea { font-size: 16px; }

  .final-cta { padding-bottom: 72px; }
  .final-inner { border-radius: 28px; padding: 60px 20px; }
}

@media (max-width: 640px) {
  .container { padding-inline: 18px; }
  .hero-title { line-height: 1.4; }
  .hero-lead { font-size: 1.05rem; }
  .hero-ctas { flex-direction: column; }
  .hero-ctas .btn { width: 100%; }

  /* Simplified composition on phones: browser + phone + video, dashboard tucked in */
  .hero-visual { height: 370px; }
  .mk-browser { left: 0; width: 82%; top: 8px; }
  .site { padding: 10px 12px 12px; }
  .site-h { font-size: 13px; }
  .site-img { height: 80px; }
  .site-cards span { height: 30px; }
  .mk-phone { width: 34%; top: 70px; border-radius: 24px; padding: 7px; }
  .ph-screen { border-radius: 18px; padding: 26px 8px 8px; gap: 6px; }
  .ph-card:not(.ph-card-main):last-of-type { display: none; }
  .mk-dash { width: 52%; bottom: 14px; padding: 12px; }
  .dash-bars { display: none; }
  .mk-video { width: 30%; right: 36%; bottom: 0; }
  .vid-wave, .vid-meta { display: none; }
  .ai-bubble { margin-top: -20px; }

  .service-grid { grid-template-columns: 1fr; }
  .work-grid { grid-template-columns: 1fr; }
  .w-wide { grid-column: auto; }
  .work-card:nth-child(4) { flex-direction: column; }
  .shot-video { flex-direction: row; padding: 18px; gap: 12px; }
  .v916 { width: 92px; }
  .v169 { width: 190px; }
  .footer-inner { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; }
}

@media (max-width: 380px) {
  .country-select select { padding-inline: 10px 28px; font-size: 12px; }
  .brand img { height: 34px; }
  .hero-visual { height: 320px; }
}

@keyframes sheet-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

@media (hover: none) {
  .service-card:hover, .work-card:hover { transform: none; }
}

@media (max-width: 980px) {
  .case-card { grid-template-columns: 1fr; padding: 26px; gap: 28px; }
  .medra-modules { grid-template-columns: repeat(2, 1fr); }
  .w-row { flex-direction: column; }
}
@media (max-width: 640px) {
  .case-card { padding: 20px 16px; border-radius: 24px; }
  .case-info .btn, .medra-actions .btn { width: 100%; white-space: normal; }

  /* SNP screens: stacked fan carousel (swipe, dots, auto-advance) */
  .case-shots { display: block; position: relative; aspect-ratio: 1 / 1.04; margin-top: 4px; touch-action: pan-y; }
  .case-shots .case-phone { position: absolute; top: 18px; left: 50%; width: 58%; margin-left: -29%;
    transition: transform .6s var(--ease), opacity .6s var(--ease), translate .8s var(--ease); }
  .case-shots[data-inview] .case-phone { transition-delay: 0s; }
  .case-shots .case-phone:nth-child(2) picture, .case-card:hover .case-phone:nth-child(2) picture, .case-card:hover .case-phone picture { transform: none; }
  .case-shots .case-phone figcaption { opacity: 0; transition: opacity .3s; }
  .case-shots .case-phone.is-front { z-index: 3; transform: none; }
  .case-shots .case-phone.is-front figcaption { opacity: 1; }
  .case-shots .case-phone.is-prev { z-index: 2; transform: translateX(-46%) rotate(-7deg) scale(.84); }
  .case-shots.in-view .case-phone.is-prev, .case-shots.in-view .case-phone.is-next { opacity: .6; }
  .case-shots .case-phone.is-next { z-index: 1; transform: translateX(46%) rotate(7deg) scale(.84); }
  .fan-dots { display: flex; justify-content: center; gap: 8px; position: absolute; bottom: 0; inset-inline: 0; }
  .fan-dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px; background: #C9DCD5; transition: width .3s var(--ease), background-color .3s; }
  .fan-dots button[aria-pressed="true"] { width: 26px; background: var(--case); }
  .fan-dots button::before { content: ""; position: absolute; inset: -12px; } /* bigger tap target */
  .fan-dots button { position: relative; }

  .medra-intro { grid-template-columns: 1fr; }
  .medra-actions { justify-content: stretch; }
  .medra-modules { grid-template-columns: 1fr; gap: 12px; }
  .medra-brand span { font-size: 1.25rem; }
}

/* ----- smart quote form ----- */
@media (max-width: 1180px) {
  .opt-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 980px) {
  .opt-grid { grid-template-columns: repeat(5, 1fr); }
  .quote { padding-top: 56px; }
}
@media (max-width: 760px) {
  .sticky-cta { display: none; }
  .quote-form { padding: 20px 16px; border-radius: 24px; }
  .quote-copy .after-list, .quote-copy .alt-contact { display: none; }   /* get to the form faster on phones */
  .sf-steps li { font-size: 0; gap: 0; justify-content: center; }
  .sf-steps li.is-current { font-size: 12px; gap: 5px; }
  .opt-grid { grid-template-columns: repeat(3, 1fr); }
  .chip span { font-size: 13.5px; padding: 8px 14px; }
}

@media (max-width: 980px) {
  .case-sc { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .sc-actions .btn { width: 100%; }
  .sc-vis { padding: 34px 0 52px; }
  .sc-kpis b { font-size: 13px; }
  .sc-chart { height: 96px; }
  .sc-invoice { inset-inline-end: 0; top: 4px; }
  .sc-alert { bottom: 60px; }
  .sc-payroll { display: none; }
  .sc-note { top: -6px; inset-inline-start: 0; }
}
@media (max-width: 640px) {
  .shot-eone { padding: 14px 12px 0; }
  .eo-hero { grid-template-columns: 1fr; }
  .eo-map { max-width: 230px; margin-inline: auto; }
  .eo-lanes { grid-template-columns: 1fr 1fr 1fr; }
  .eo-lanes span { font-size: 9.5px; padding: 4px 6px; }
  .sc-logo img { height: 44px; }
}

/* SoftCloud screenshots + EONE showcase */
@media (max-width: 1024px) {
  .case-eo { grid-template-columns: 1fr; }
  .work-duo { grid-template-columns: 1fr 1.6fr; }
}
@media (max-width: 760px) {
  .case-sc .sc-vis { padding: 34px 0 54px; }
  .case-sc .sc-invoice { inset-inline-end: 0; top: -2px; }
  .case-sc .sc-payroll { display: flex; bottom: 64px; inset-inline-start: 0; font-size: 11px; padding: 6px 10px; }
  .case-sc .sc-note { top: -6px; inset-inline-start: 0; }
  .sc-tabs button { font-size: 12px; padding: 4px 12px; }
  .eo-vis { padding: 36px 0 0; }
  .eo-browser { margin-inline-start: 0; }
  .eo-vis .eo-hero { grid-template-columns: 1fr; }
  .eo-vis .eo-map { display: none; }
  .eo-vis .eo-nav span { display: none; }
  .eo-vis .eo-h { font-size: 19px; }
  .eo-vis .eo-lanes { grid-template-columns: 1fr 1fr 1fr; }
  .eo-vis .eo-lanes span { padding: 5px 6px; }
  .eo-phone { position: relative; left: auto; bottom: auto; margin: -70px auto 0; width: 200px; }
  .eo-quote { top: -4px; inset-inline-end: 0; }
  .eo-note { top: -8px; inset-inline-start: 0; }
  .work-duo { grid-template-columns: 1fr; }
}