/* ============================================================
   Arial Studio — styles partagés des pages « Sites web » et « Motion design »
   (l'accueil garde ses styles dans index.html). Valeurs = DESIGN-SYSTEM.md
   ============================================================ */
/* Fondu entre les pages (navigateurs compatibles) ; la barre de navigation reste fixe pendant le fondu */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; animation-timing-function: ease; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
.snav { view-transition-name: snav; }
::view-transition-group(snav) { animation: none; }
::view-transition-old(snav) { display: none; }
::view-transition-new(snav) { animation: none; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #FFFFFF; color: #0A0F1E; font-family: 'Plus Jakarta Sans', sans-serif; -webkit-font-smoothing: antialiased; line-height: 1.6; }
a { color: #2563EB; text-decoration: none; }
a:hover { color: #1D4ED8; }
::selection { background: #DBEAFE; }
body.nav-locked { overflow: hidden; }
h1, h2, h3 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; margin: 0; color: #0A0F1E; }
.wrap { max-width: 1140px; margin: 0 auto; }
.kicker { font-size: 13px; font-weight: 700; letter-spacing: .14em; color: #2563EB; text-transform: uppercase; }
.h2 { font-size: 44px; letter-spacing: -0.02em; line-height: 1.1; margin: 14px 0 12px; }
.lead { font-size: 17px; line-height: 1.65; color: #64748B; max-width: 640px; margin: 0; }
section { position: relative; }

/* ====== Navigation (même barre flottante que l'accueil) ====== */
.snav { position: fixed; top: 18px; left: 0; right: 0; z-index: 100; }
.snav-wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: center; position: relative; }
.snav-links { position: relative; display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 999px; background: rgba(255,255,255,.78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid #E2E8F0; box-shadow: 0 8px 24px rgba(10,15,30,.06); }
.nav-indicator { position: absolute; top: 6px; bottom: 6px; left: 6px; width: 0; border-radius: 999px; background: #0A0F1E; z-index: 0; transition: left .4s cubic-bezier(.65,0,.35,1), width .4s cubic-bezier(.65,0,.35,1); }
.nav-link { position: relative; z-index: 1; padding: 9px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; color: #475569; white-space: nowrap; transition: color .25s ease, background .25s ease; }
.nav-link:hover { color: #0A0F1E; }
.nav-link.active { color: #FFFFFF; }
.nav-link.active:hover { color: #FFFFFF; }
.nav-contact { display: inline-flex; align-items: center; height: 40px; width: 40px; padding-left: 13px; margin-left: 2px; border-radius: 999px; background: #2563EB; color: #FFFFFF; overflow: hidden; white-space: nowrap; flex: 0 0 auto; box-shadow: 0 8px 20px -6px rgba(37,99,235,.5); transition: width .4s cubic-bezier(.4,0,.2,1), background .25s ease; }
.nav-contact svg { flex: 0 0 auto; }
.nav-contact-label { margin-left: 9px; padding-right: 20px; font-size: 14px; font-weight: 700; opacity: 0; transition: opacity .15s ease; }
.nav-contact:hover, .nav-contact:focus-visible { width: 182px; background: #1D4ED8; color: #FFFFFF; }
.nav-contact:hover .nav-contact-label, .nav-contact:focus-visible .nav-contact-label { opacity: 1; transition: opacity .2s ease .15s; }
.nav-burger { display: none; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); appearance: none; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 46px; height: 46px; padding: 0; border-radius: 50%; background: rgba(255,255,255,.78); backdrop-filter: blur(12px); border: 1px solid #E2E8F0; box-shadow: 0 8px 24px rgba(10,15,30,.06); }
.nav-burger span { display: block; width: 18px; height: 2px; border-radius: 1px; background: #0A0F1E; transition: transform .25s, opacity .2s; }
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-backdrop { display: none; }

/* ====== Boutons ====== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 17px 36px; border-radius: 999px; background: #2563EB; color: #FFFFFF; font: 700 16px 'Plus Jakarta Sans', sans-serif; border: 0; cursor: pointer; box-shadow: 0 14px 32px -8px rgba(37,99,235,.5); transition: all .25s; }
.btn:hover { background: #1D4ED8; color: #FFFFFF; transform: translateY(-2px); box-shadow: 0 18px 38px -8px rgba(37,99,235,.55); }
.btn.ghost { background: #FFFFFF; color: #0A0F1E; border: 1.5px solid #CBD5E1; box-shadow: none; }
.btn.ghost:hover { border-color: #0A0F1E; background: #FFFFFF; color: #0A0F1E; }
.btn.ghost-dark { background: transparent; color: #DBEAFE; border: 1.5px solid rgba(147,197,253,.5); box-shadow: none; }
.btn.ghost-dark:hover { background: rgba(255,255,255,.08); color: #FFFFFF; border-color: #93C5FD; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ====== Hero de page ====== */
.phero { position: relative; overflow: hidden; padding: 150px 24px 80px; text-align: center; }
.phero::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 640px; background: radial-gradient(52% 58% at 50% 20%, rgba(191,219,254,.85) 0%, rgba(219,234,254,.45) 42%, rgba(219,234,254,0) 74%); pointer-events: none; }
.phero-in { position: relative; max-width: 820px; margin: 0 auto; }
.phero h1 { font-size: 62px; line-height: 1.06; letter-spacing: -0.03em; margin: 18px 0 18px; }
.phero p.lead { margin: 0 auto 30px; font-size: 18px; }
.phero .btn-row { justify-content: center; }
.phero-note { margin-top: 20px; font-size: 13.5px; color: #64748B; }

/* ====== Bandeau de réassurance ====== */
.trust { padding: 0 24px 90px; }
.trust-grid { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.trust-item { padding: 20px 22px; border-radius: 16px; background: #F8FAFC; border: 1px solid #EEF2F7; }
.trust-item b { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 19px; letter-spacing: -0.01em; color: #0A0F1E; }
.trust-item span { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.5; color: #64748B; }

/* ====== Cartes ====== */
.sec { padding: 20px 24px 100px; }
.sec.alt { background: #F8FAFC; border-top: 1px solid #EEF2F7; border-bottom: 1px solid #EEF2F7; padding: 96px 24px; }
.sec-head { margin-bottom: 42px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.card { display: flex; flex-direction: column; gap: 10px; padding: 28px; background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 16px; transition: all .3s; }
.card:hover { transform: translateY(-3px); box-shadow: 0 20px 44px -16px rgba(10,15,30,.14); border-color: #BFDBFE; }
.card.dashed { background: #F8FAFC; border: 1px dashed #CBD5E1; }
.card .num { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 15px; color: #93C5FD; }
.card .ttl { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 21px; letter-spacing: -0.01em; }
.card p { margin: 0; flex: 1; font-size: 14.5px; line-height: 1.6; color: #64748B; }
.card .links { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; font-weight: 700; }
.card .links a.sub { color: #64748B; font-weight: 600; }

/* ====== Formules ====== */
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: stretch; }
.plan { display: flex; flex-direction: column; gap: 6px; padding: 26px; background: #FFFFFF; border: 2px solid #E2E8F0; border-radius: 18px; }
.plan.pop { border-color: #2563EB; box-shadow: 0 24px 50px -22px rgba(37,99,235,.45); }
.plan .pname { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 15.5px; font-weight: 700; }
.badge { font-size: 10px; font-weight: 700; letter-spacing: .04em; padding: 3px 9px; border-radius: 999px; background: #2563EB; color: #fff; }
.plan .price { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 30px; line-height: 1.1; margin-top: 6px; }
.plan .price small { display: block; font: 600 12px 'Plus Jakarta Sans', sans-serif; color: #64748B; margin-bottom: 2px; }
.plan .price em { font: 600 13px 'Plus Jakarta Sans', sans-serif; font-style: normal; color: #94A3B8; margin-left: 4px; }
.plan ul { list-style: none; padding: 0; margin: 12px 0 18px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.plan li { position: relative; padding-left: 22px; font-size: 14px; line-height: 1.5; color: #475569; }
.plan li::before { content: "✓"; position: absolute; left: 0; top: 0; font-weight: 700; color: #2563EB; }
.plan .btn { padding: 13px 20px; font-size: 14.5px; }
.price-note { margin-top: 18px; font-size: 13.5px; color: #64748B; text-align: center; }

/* ====== Liste « inclus » ====== */
.inc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 40px; max-width: 900px; margin: 0 auto; }
.inc { display: flex; gap: 14px; align-items: flex-start; }
.inc i { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: #DCFCE7; color: #16A34A; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-weight: 700; font-size: 14px; margin-top: 2px; }
.inc b { display: block; font-size: 16px; }
.inc span { font-size: 14.5px; color: #64748B; line-height: 1.55; }

/* ====== Étapes ====== */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.step { display: flex; flex-direction: column; align-items: center; text-align: center; }
.step .dot { width: 48px; height: 48px; border-radius: 50%; background: #FFFFFF; border: 2px solid #93C5FD; color: #2563EB; display: inline-flex; align-items: center; justify-content: center; font: 700 15px 'Space Grotesk', sans-serif; box-shadow: 0 4px 14px rgba(37,99,235,.14); }
.step h3 { font-size: 19px; margin: 20px 0 8px; }
.step p { margin: 0; font-size: 14.5px; line-height: 1.6; color: #64748B; max-width: 280px; }

/* ====== FAQ (details natifs) ====== */
.faq { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq details { background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 16px; padding: 20px 26px; transition: border-color .25s; }
.faq details:hover, .faq details[open] { border-color: #BFDBFE; }
.faq summary { cursor: pointer; font-size: 16.5px; font-weight: 700; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: #EFF6FF; color: #2563EB; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 600; transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 14px 0 0; font-size: 15px; line-height: 1.65; color: #64748B; }

/* ====== Bandeau CTA sombre ====== */
.cta { position: relative; overflow: hidden; background: #0A0F1E; padding: 104px 24px; text-align: center; }
.cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(55% 65% at 50% 0%, rgba(37,99,235,.3), rgba(37,99,235,0) 70%); pointer-events: none; }
.cta-in { position: relative; z-index: 1; }
.cta h2 { font-size: 52px; letter-spacing: -0.025em; color: #FFFFFF; margin: 0 0 16px; }
.cta p { font-size: 17.5px; color: #94A3B8; margin: 0 0 36px; }
.cta .btn-row { justify-content: center; }

/* ====== Footer ====== */
.footer { background: #FFFFFF; border-top: 1px solid #EEF2F7; padding: 64px 24px 32px; }
.footer-grid { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; }
.footer img { display: block; height: 56px; width: auto; }
.footer p { margin: 16px 0 0; font-size: 14.5px; line-height: 1.65; color: #64748B; max-width: 280px; }
.footer h4 { margin: 0 0 16px; font-size: 13px; font-weight: 700; letter-spacing: .1em; color: #0A0F1E; }
.footer .col { display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; }
.footer .col a { color: #64748B; }
.footer .col a:hover { color: #2563EB; }
.footer-bottom { max-width: 1140px; margin: 52px auto 0; padding-top: 24px; border-top: 1px solid #EEF2F7; font-size: 13px; color: #94A3B8; }

/* ====== Lecteur vidéo ====== */
.vp-slot { position: relative; background-size: cover; background-position: center; }
.vp { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; background: #0A0F1E; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.vp video { display: block; width: 100%; height: 100%; object-fit: contain; background: #0A0F1E; cursor: pointer; }
.vp-big { position: absolute; left: 50%; top: 50%; width: 66px; height: 66px; margin: -33px 0 0 -33px; border-radius: 50%; background: rgba(10,15,30,.58); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.28); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .25s, opacity .25s, background .25s; }
.vp-big svg { margin-left: 3px; }
.vp:hover .vp-big { background: rgba(10,15,30,.75); transform: scale(1.06); }
.vp.playing .vp-big { opacity: 0; pointer-events: none; transform: scale(.9); }
.vp-ui { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 6px; padding: 26px 10px 8px; background: linear-gradient(to top, rgba(10,15,30,.78), rgba(10,15,30,0)); opacity: 0; transition: opacity .25s; pointer-events: none; }
.vp.ui-on .vp-ui, .vp:not(.playing) .vp-ui, .vp:focus-within .vp-ui { opacity: 1; pointer-events: auto; }
.vp-btn { appearance: none; border: 0; background: transparent; width: 36px; height: 36px; padding: 0; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 auto; }
.vp-btn:hover { background: rgba(255,255,255,.16); }
.vp-btn:focus-visible { outline: 2px solid #93C5FD; outline-offset: 1px; }
.vp-btn svg { display: block; }
.vp-time { flex: 0 0 auto; font: 600 12.5px 'Plus Jakarta Sans', sans-serif; color: #fff; font-variant-numeric: tabular-nums; padding: 0 6px; white-space: nowrap; }
.vp-prog { position: relative; flex: 1; min-width: 40px; height: 28px; display: flex; align-items: center; cursor: pointer; touch-action: none; }
.vp-track { position: relative; width: 100%; height: 4px; border-radius: 2px; background: rgba(255,255,255,.32); transition: height .15s; }
.vp-prog:hover .vp-track { height: 6px; }
.vp-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 2px; background: #FFFFFF; }
.vp-knob { position: absolute; top: 50%; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 4px rgba(0,0,0,.4); left: 0; }
.vp .ic-pause, .vp.playing .ic-play, .vp .ic-muted, .vp.muted .ic-vol, .vp .ic-collapse, .vp.large .ic-expand { display: none; }
.vp.playing .ic-pause, .vp.muted .ic-muted, .vp.large .ic-collapse { display: block; }
.vp-backdrop { position: fixed; inset: 0; z-index: 10000; background: rgba(6,10,22,.72); backdrop-filter: blur(18px) saturate(.8); -webkit-backdrop-filter: blur(18px) saturate(.8); opacity: 0; transition: opacity .35s ease; cursor: zoom-out; }
.vp-backdrop.on { opacity: 1; }
.vp.large { position: fixed; inset: auto; left: 50%; top: 50%; z-index: 10001; width: min(1240px, 92vw, calc(86vh * 16 / 9)); aspect-ratio: 16 / 9; border-radius: 18px; box-shadow: 0 50px 120px -20px rgba(0,0,0,.75); transform: translate(-50%, -50%); animation: vpGrow .4s cubic-bezier(.16,1,.3,1) both; }
.vp.large.portrait { width: auto; height: min(90vh, 1000px); max-width: 92vw; aspect-ratio: 9 / 16; }
@keyframes vpGrow { from { opacity: .4; transform: translate(-50%, -48%) scale(.94); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

/* ====== Motion design (fond sombre) ====== */
.mhero { position: relative; overflow: hidden; padding: 150px 24px 100px; background: #0A0F1E; color: #FFFFFF; }
.mhero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 55% at 50% 0%, rgba(37,99,235,.38) 0%, rgba(37,99,235,0) 70%), radial-gradient(40% 40% at 90% 100%, rgba(37,99,235,.2) 0%, rgba(37,99,235,0) 70%); pointer-events: none; }
.motion-dust { position: absolute; inset: 0; opacity: .55; pointer-events: none; background-image: radial-gradient(2px 2px at 8% 20%, #60A5FA 50%, transparent 51%), radial-gradient(3px 3px at 90% 14%, #2563EB 50%, transparent 51%), radial-gradient(2px 2px at 64% 32%, #93C5FD 50%, transparent 51%), radial-gradient(2px 2px at 26% 70%, #93C5FD 50%, transparent 51%), radial-gradient(3px 3px at 78% 82%, #60A5FA 50%, transparent 51%), radial-gradient(2px 2px at 45% 92%, #2563EB 50%, transparent 51%); }
.mhero-grid { position: relative; max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: 1fr 330px; gap: 64px; align-items: center; }
.mhero h1 { color: #FFFFFF; font-size: 56px; line-height: 1.06; letter-spacing: -0.03em; margin: 16px 0 18px; }
.mhero h1 span { color: #60A5FA; }
.mhero .kicker { color: #93C5FD; display: inline-flex; align-items: center; gap: 10px; }
.motion-new { padding: 4px 11px; border-radius: 999px; background: #2563EB; color: #fff; font-size: 11px; letter-spacing: .08em; }
.mhero p.lead { color: #CBD5E1; margin-bottom: 30px; font-size: 17.5px; }
.vp-slot.motion-slot { width: 310px; aspect-ratio: 388 / 800; background: transparent; }
.vp-slot.motion-slot > .vp { inset: 1.75% 4.38%; border-radius: 16.2% / 7.5%; clip-path: inset(0 round 16.2% / 7.5%); isolation: isolate; background: #FFFFFF; }
.vp-slot.motion-slot > .vp video { background: #FFFFFF; border-radius: inherit; }
.phone-frame { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; filter: drop-shadow(0 40px 50px rgba(37,99,235,.45)); }
.motion-phone-cap { margin-top: 20px; text-align: center; font-size: 14px; font-weight: 600; color: #94A3B8; }
.motion-phone-cap b { color: #fff; }
.msec { background: #0A0F1E; color: #fff; padding: 20px 24px 104px; position: relative; overflow: hidden; }
.msec .kicker { color: #93C5FD; }
.msec h2 { color: #FFFFFF; }
.msec .lead { color: #CBD5E1; }
.motion-list { display: flex; flex-direction: column; gap: 12px; max-width: 900px; margin: 0 auto; }
.mcard { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 22px 26px; border-radius: 18px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.11); transition: transform .3s, border-color .3s, background .3s; }
.mcard:hover { transform: translateY(-3px); border-color: rgba(147,197,253,.55); background: rgba(255,255,255,.07); }
.mcard.pop { border-color: #2563EB; background: rgba(37,99,235,.14); }
.mcard-name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 21px; letter-spacing: -0.01em; color: #fff; }
.mcard-badge { padding: 3px 10px; border-radius: 999px; background: #2563EB; color: #fff; font: 700 10px 'Plus Jakarta Sans', sans-serif; letter-spacing: .06em; }
.mcard-badge.soft { background: rgba(147,197,253,.18); color: #BFDBFE; }
.mcard-desc { margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: #94A3B8; }
.mcard-side { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.mcard-price { text-align: right; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 28px; line-height: 1.05; color: #fff; white-space: nowrap; }
.mcard-price small { display: block; font: 600 12px 'Plus Jakarta Sans', sans-serif; color: #93C5FD; letter-spacing: .02em; margin-bottom: 2px; }
.mcard-price em { font: 600 13px 'Plus Jakarta Sans', sans-serif; font-style: normal; color: #94A3B8; margin-left: 3px; }
.mcard-btn { padding: 9px 18px; border-radius: 999px; background: transparent; border: 1.5px solid rgba(147,197,253,.5); color: #DBEAFE; font: 700 13px 'Plus Jakarta Sans', sans-serif; transition: all .25s; white-space: nowrap; }
.mcard-btn:hover { background: #2563EB; border-color: #2563EB; color: #fff; }
.mcard.pop .mcard-btn { background: #2563EB; border-color: #2563EB; color: #fff; }
.mcard.pop .mcard-btn:hover { background: #1D4ED8; border-color: #1D4ED8; }
.motion-note { margin: 22px auto 0; max-width: 900px; font-size: 13px; line-height: 1.55; color: #94A3B8; text-align: center; }
.use-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.use { padding: 24px; background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 16px; }
.use b { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 18px; margin-bottom: 6px; }
.use span { font-size: 14px; line-height: 1.55; color: #64748B; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.chip { padding: 9px 18px; border-radius: 999px; background: #EFF6FF; border: 1px solid #BFDBFE; color: #1D4ED8; font-size: 14px; font-weight: 700; }

/* ====== Tablette ====== */
@media (max-width: 960px) {
  .mhero-grid { grid-template-columns: 1fr; gap: 44px; justify-items: center; text-align: center; }
  .mhero .btn-row { justify-content: center; }
  .mhero p.lead { margin-left: auto; margin-right: auto; }
}
@media (max-width: 900px) {
  .h2 { font-size: 32px; }
  .phero h1 { font-size: 46px; }
  .mhero h1 { font-size: 44px; }
  .cta h2 { font-size: 38px; }
  .grid3 { grid-template-columns: repeat(2, 1fr); }
  .plans { grid-template-columns: repeat(2, 1fr); }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .use-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { gap: 24px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}

/* ====== Mobile ====== */
@media (max-width: 600px) {
  .snav-wrap { justify-content: space-between; flex-wrap: nowrap; padding: 0 16px; min-height: 46px; }
  .nav-burger { display: inline-flex; }
  .snav-links { display: none; }
  .nav-backdrop.nav-open { display: block; position: fixed; inset: 0; background: rgba(10,15,30,.4); z-index: 150; }
  .snav-links.nav-open { display: flex; position: fixed; top: 66px; right: 16px; flex-direction: column; align-items: stretch; gap: 2px; padding: 12px; width: 230px; max-width: calc(100vw - 32px); background: #FFFFFF; border-radius: 20px; box-shadow: 0 24px 48px -12px rgba(10,15,30,.28); z-index: 200; }
  .snav-links.nav-open .nav-indicator { position: absolute; top: 6px; bottom: 6px; left: 6px; width: 0; border-radius: 999px; background: #0A0F1E; z-index: 0; transition: left .4s cubic-bezier(.65,0,.35,1), width .4s cubic-bezier(.65,0,.35,1); }
.nav-link { position: relative; z-index: 1; padding: 13px 14px; font-size: 16px; border-radius: 12px; }
  .snav-links.nav-open .nav-indicator { display: none; }
  .snav-links.nav-open .nav-link.active { color: #0A0F1E; background: #F1F5F9; }
  .snav-links.nav-open .nav-contact { width: auto; height: auto; justify-content: center; padding: 13px 14px; margin: 4px 0 0; }
  .snav-links.nav-open .nav-contact-label { margin-left: 8px; padding-right: 0; opacity: 1; }

  .phero { padding: 112px 16px 56px; }
  .phero h1 { font-size: 34px; line-height: 1.08; letter-spacing: -0.02em; }
  .phero p.lead { font-size: 16px; }
  .h2 { font-size: 27px; }
  .sec { padding: 16px 16px 64px; }
  .sec.alt { padding: 56px 16px; }
  .trust { padding: 0 16px 64px; }
  .trust-grid, .grid3, .plans, .use-grid, .steps, .inc-grid { grid-template-columns: 1fr; }
  .steps { gap: 30px; }
  .btn { width: 100%; padding: 16px 20px; }
  .faq details { padding: 18px; border-radius: 14px; }
  .cta { padding: 60px 16px; }
  .cta h2 { font-size: 28px; }
  .footer { padding: 48px 16px 28px; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .vp-big { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
  .vp-time { display: none; }
  .vp-btn { width: 40px; height: 40px; }
  .vp.large { width: 96vw; border-radius: 12px; }
  .vp.large.portrait { width: auto; height: 90vh; max-width: 96vw; }
  .mhero { padding: 112px 20px 72px; }
  .mhero h1 { font-size: 32px; }
  .vp-slot.motion-slot { width: min(280px, 72vw); }
  .msec { padding: 16px 16px 72px; }
  .mcard { flex-direction: column; align-items: stretch; gap: 14px; padding: 20px; }
  .mcard-side { flex-direction: row; align-items: center; justify-content: space-between; }
  .mcard-price { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .vp.large { animation: none; }
  .vp-backdrop, .card, .btn, .mcard { transition: none; }
}