/* YOM Group maquette v3: page identities, page transition, iPhone 18 Pro Max mockup,
   the Valmora-style home hero and one animated hero per inner page. Loaded after styles.css. */

/* ---------- Page identities (colours derived from the #FF9900 charter) ---------- */
@property --page { syntax: "<color>"; inherits: true; initial-value: #FF9900; }
@property --page-2 { syntax: "<color>"; inherits: true; initial-value: #FFC46B; }
:root {
  --page: #FF9900; --page-2: #FFC46B;
  --grad: linear-gradient(100deg, var(--page-2) 0%, var(--page) 48%, color-mix(in srgb, var(--page) 72%, #2A1200) 100%);
  transition: --page 700ms ease, --page-2 700ms ease;
}
.b1 { background: radial-gradient(circle, color-mix(in srgb, var(--page) 60%, transparent), transparent 62%); }
.b3 { background: radial-gradient(circle, color-mix(in srgb, var(--page-2) 34%, transparent), transparent 62%); }
.page-hero .eyebrow { color: var(--page); }
.nav-ind { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--page) 50%, transparent), inset 0 1px 0 rgba(255,255,255,.18); }
.tone-light .crumbs [aria-current] { color: var(--fg); }

.crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; font: 500 12px/1.4 var(--f-mono); color: var(--mut); }
.crumbs li + li::before { content: "/"; margin-right: 8px; opacity: .5; }
.crumbs a { text-decoration: none; }
.crumbs [aria-current] { color: var(--fg); }
@media (hover: hover) and (pointer: fine) { .crumbs a:hover { color: var(--page); } }

/* Page transition: a wipe in the colour of the destination page, carrying its name */
.pt { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; pointer-events: none; clip-path: inset(100% 0 0 0); background: radial-gradient(130% 110% at 50% 110%, var(--pt-2, #FFC46B), var(--pt-1, #FF9900) 62%); }
.pt-label { padding: 0 16px; text-align: center; font: 780 clamp(40px, 9vw, 132px)/1 var(--f); letter-spacing: -0.055em; color: #0B0B10; opacity: 0; transform: translateY(24px); }
.pt.in { clip-path: inset(0 0 0 0); transition: clip-path 280ms var(--ease-in-out); }
.pt.in .pt-label { opacity: 1; transform: none; transition: opacity 200ms ease 80ms, transform 360ms var(--ease-out) 60ms; }
.pt.out { clip-path: inset(0 0 100% 0); transition: clip-path 380ms var(--ease-in-out); }
.pt.out .pt-label { opacity: 0; transform: translateY(-18px); transition: opacity 160ms ease, transform 300ms var(--ease-out); }

/* ---------- iPhone 18 Pro Max mockup: 78 × 163.4 × 8.75 mm, everything scales with the width ---------- */
.iphone { --w: 260px; position: relative; flex: none; width: var(--w); aspect-ratio: 78 / 163.4; }
.ip-body { position: absolute; inset: 0; transform-style: preserve-3d; }
.ip-face, .ip-edge { position: absolute; inset: 0; border-radius: 16% / 7.64%; }
.ip-front { box-sizing: border-box; padding: 1.4%; background: linear-gradient(140deg, #FFC27A 0%, #FF9900 34%, #E06F00 70%, #A94C00 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), inset 0 0 6px rgba(0,0,0,.35), 0 30px 60px -22px rgba(0,0,0,.75); }
.ip-glass { position: relative; height: 100%; box-sizing: border-box; padding: 2.1%; border-radius: 14.8% / 7.06%; background: #030305; }
.ip-screen { position: relative; height: 100%; overflow: hidden; border-radius: 13.1% / 6.25%; container-type: inline-size; background: #0E0D14; color: #F5F4F2; font-family: var(--f); }
.ip-front::after { content: ""; position: absolute; inset: 1.4%; z-index: 8; border-radius: 14.8% / 7.06%; pointer-events: none; background: linear-gradient(118deg, rgba(255,255,255,.17) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 72%, rgba(255,255,255,.06) 100%); }
.ip-island { position: absolute; z-index: 7; top: 2.6cqw; left: 50%; width: 25cqw; height: 7.2cqw; border-radius: 4cqw; transform: translateX(-50%); background: #000000; }
.ip-island::after { content: ""; position: absolute; right: 2.4cqw; top: 50%; width: 2.6cqw; height: 2.6cqw; border-radius: 50%; transform: translateY(-50%); background: radial-gradient(circle at 35% 35%, #3B3F66, #0A0A12 60%); }
.ip-status { position: absolute; z-index: 6; top: 4.1cqw; left: 8.5cqw; right: 7cqw; display: flex; justify-content: space-between; align-items: center; font: 650 3.7cqw/1 var(--f); letter-spacing: -0.02em; }
.ip-icons { display: flex; align-items: center; gap: 1.3cqw; }
.ip-icons .sig { width: 4.4cqw; height: 2.8cqw; background: linear-gradient(90deg, currentColor 0 18%, transparent 18% 27%, currentColor 27% 45%, transparent 45% 54%, currentColor 54% 72%, transparent 72% 81%, currentColor 81%); -webkit-mask: linear-gradient(to top right, #000 50%, transparent 50%); mask: linear-gradient(to top right, #000 50%, transparent 50%); }
.ip-icons .wifi { width: 3.8cqw; height: 2.8cqw; background: radial-gradient(circle at 50% 100%, currentColor 0 22%, transparent 23% 42%, currentColor 43% 60%, transparent 61% 78%, currentColor 79%); clip-path: polygon(50% 100%, 0 0, 100% 0); }
.ip-icons .bat { position: relative; width: 6.2cqw; height: 2.9cqw; border-radius: .9cqw; box-shadow: inset 0 0 0 .3cqw rgba(245,244,242,.55); }
.ip-icons .bat::before { content: ""; position: absolute; inset: .6cqw 1.4cqw .6cqw .6cqw; border-radius: .4cqw; background: currentColor; }
.ip-icons .bat::after { content: ""; position: absolute; right: -.8cqw; top: .9cqw; width: .5cqw; height: 1.1cqw; border-radius: 0 .3cqw .3cqw 0; background: rgba(245,244,242,.55); }
.ip-btn { position: absolute; z-index: -1; width: 1.3%; border-radius: 2px; background: linear-gradient(90deg, #8A3E00, #FF9900 60%, #C25A00); }
.ip-btn.b-act { left: -1%; top: 15.5%; height: 4.2%; }
.ip-btn.b-vu { left: -1%; top: 22.5%; height: 7.6%; }
.ip-btn.b-vd { left: -1%; top: 31.5%; height: 7.6%; }
.ip-btn.b-pow { right: -1%; top: 24%; height: 11%; }
.ip-btn.b-cam { right: -.7%; top: 60%; height: 7.5%; width: 1%; }

/* 3D version: back face with the camera plateau and a stacked metal edge */
.ip3d .ip-front { transform: translateZ(calc(var(--w) * .056)); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.ip3d .ip-back { transform: rotateY(180deg) translateZ(calc(var(--w) * .056)); backface-visibility: hidden; -webkit-backface-visibility: hidden; background: radial-gradient(120% 80% at 28% 18%, #FFBC70, #FF9900 46%, #D96800 80%, #A94C00); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), inset 0 -18px 40px -10px rgba(0,0,0,.28); }
.ip-edge { background: linear-gradient(90deg, #7E3700, #E77400 18%, #FFB25C 50%, #E77400 82%, #7E3700); }
.ip-plateau { position: absolute; left: 3%; right: 3%; top: 2.1%; height: 22%; border-radius: 14% / 30%; background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(0,0,0,.06)), #F48A00; box-shadow: 0 6px 14px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.4); }
.ip-lens { position: absolute; width: 23.5%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 36% 34%, #5A5F8A 0%, #14141F 34%, #000000 62%); box-shadow: 0 0 0 3px #26262B, 0 0 0 5px rgba(255,255,255,.2), inset 0 0 6px rgba(120,140,255,.45); }
.ip-lens.l1 { left: 6%; top: 6%; } .ip-lens.l2 { left: 6%; top: 52%; } .ip-lens.l3 { left: 30%; top: 29%; }
.ip-flash { position: absolute; right: 12%; top: 22%; width: 9%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #FFF6DA, #E9C987 70%); box-shadow: 0 0 0 2px rgba(0,0,0,.25); }
.ip-lidar { position: absolute; right: 12%; top: 58%; width: 8%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #3A3A44, #0B0B0F 70%); }
.ip-mark { position: absolute; left: 50%; top: 54%; width: 30%; transform: translateX(-50%); filter: brightness(0) invert(1); opacity: .88; }

/* Flat version (kanban): front only, buttons outside the frame */
.iphone.flat { --w: auto; height: min(100%, 560px); width: auto; transition: transform 1000ms var(--ease-out), filter 600ms ease; }
.iphone.flat .ip-front { position: absolute; inset: 0; }
.iphone.shipped { transform: perspective(900px) rotateY(-16deg) rotateX(5deg); filter: drop-shadow(0 0 40px rgba(255,153,0,.45)); }

/* Kanban layers rebuilt in container units so the app scales with the phone */
.ip-screen .ly { position: absolute; }
.ip-screen .ly-wire { inset: 0; }
.ip-screen .ly-wire i { position: absolute; left: 7%; right: 7%; border: .4cqw dashed rgba(245,244,242,.22); border-radius: 4cqw; }
.ip-screen .ly-wire i:nth-child(1) { top: 13%; height: 11%; } .ip-screen .ly-wire i:nth-child(2) { top: 31%; height: 29%; }
.ip-screen .ly-wire i:nth-child(3) { top: 63%; height: 9%; } .ip-screen .ly-wire i:nth-child(4) { bottom: 12.5%; height: 8%; }
.ip-screen .ly-shell { top: auto; left: 0; right: 0; bottom: 0; height: 9%; display: flex; justify-content: space-around; align-items: center; background: rgba(255,255,255,.04); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.ip-screen .ly-shell i { width: 13%; height: 1.4cqw; border-radius: 1cqw; background: rgba(245,244,242,.25); }
.ip-screen .ly-shell i:first-child { background: var(--brand); }
.ip-screen .ly-head { top: 12.5%; left: 7%; right: 7%; display: grid; gap: 2.2cqw; }
.ip-screen .ly-head small { font: 500 3.4cqw/1 var(--f); color: rgba(245,244,242,.6); }
.ip-screen .ly-head b { font: 750 6.6cqw/1.05 var(--f); letter-spacing: -0.03em; }
.ip-screen .ph-search { display: block; padding: 2.4cqw 3.6cqw; border-radius: 99px; background: rgba(255,255,255,.08); font: 500 3.4cqw/1 var(--f); color: rgba(245,244,242,.55); }
.ip-screen .ly-sync { top: 27.5%; left: 7%; display: flex; align-items: center; gap: 1.6cqw; padding: 1.6cqw 2.8cqw; border-radius: 99px; background: rgba(31,164,99,.16); font: 600 3cqw/1 var(--f-mono); color: #6FE3A6; }
.ip-screen .ly-sync::before { content: ""; width: 2cqw; height: 2cqw; border-radius: 50%; background: #2BD67B; }
.ip-screen .ly-live { top: 32.5%; left: 7%; right: 7%; height: 27%; border-radius: 5cqw; background: radial-gradient(90% 80% at 80% 10%, #FFD08A, transparent 60%), linear-gradient(140deg, #FF9900, #7B61FF); }
.ip-screen .ph-live { position: absolute; top: 3cqw; left: 3cqw; padding: 1cqw 2cqw; border-radius: 1.2cqw; background: #E5242B; color: #FFFFFF; font: 700 2.8cqw/1 var(--f-mono); letter-spacing: .08em; }
.ip-screen .ly-rgpd { top: 62.5%; left: 7%; right: 7%; display: flex; align-items: center; gap: 2cqw; padding: 3cqw; border-radius: 3.6cqw; background: rgba(255,255,255,.06); font: 600 3.1cqw/1.2 var(--f); }
.ip-screen .ly-rgpd::before { content: ""; flex: none; width: 3cqw; height: 3cqw; border-radius: .8cqw; background: #FF9900; }
.ip-screen .ly-pay { left: 7%; right: 7%; bottom: 12%; height: 8.5%; display: grid; place-items: center; border-radius: 4cqw; background: linear-gradient(180deg, #FFB547, #FF9900); color: #140A00; font: 700 4cqw/1 var(--f); }
.ip-screen .ly-ci { z-index: 9; top: 1.9cqw; left: 28%; right: 28%; display: flex; justify-content: center; }
.ip-screen .ly-ci span { padding: 2cqw 3cqw; border-radius: 4cqw; background: #000000; color: #6FE3A6; font: 600 3cqw/1 var(--f-mono); white-space: nowrap; }
.ly-ci span::after { content: ""; width: .7em; height: .34em; margin: 0 .1em .22em .1em; border-left: .16em solid currentColor; border-bottom: .16em solid currentColor; transform: rotate(-45deg); }
.ip-screen .ly-store { inset: 0; display: grid; place-items: center; background: rgba(14,13,20,.35); }
.ip-screen .ly-store span { display: grid; place-items: center; width: 62%; aspect-ratio: 1; box-sizing: border-box; padding: 9%; border-radius: 50%; border: .7cqw solid #FF9900; color: #FFB547; background: rgba(14,13,20,.88); text-align: center; font: 700 3.6cqw/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; transform: rotate(-12deg); }

/* =====================================================================
   Home hero: the product unveiled on the scroll (Valmora mechanics, IT subject)
   ===================================================================== */
.hh { position: relative; height: 430vh; }
.hh-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.hh-spot { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(42% 60% at 70% -6%, rgba(255,214,160,.2), transparent 70%), radial-gradient(30% 34% at 70% 62%, color-mix(in srgb, var(--page) 22%, transparent), transparent 70%); }
.hh .horizon { top: calc(100% - clamp(90px, 13vh, 150px)); }
.hh-grid { position: relative; z-index: 2; height: 100%; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: 24px; padding-top: calc(var(--nav-h) + 8px); padding-bottom: 130px; }
.hh-copy { min-width: 0; }
.hh-titles { display: grid; margin: 0 0 22px; }
.hh-t { grid-area: 1 / 1; margin: 0; max-width: 13ch; font: 760 clamp(42px, 5.9vw, 94px)/.96 var(--f); letter-spacing: -0.055em; text-wrap: balance; opacity: 0; transform: translateY(26px); transition: opacity 420ms var(--ease-out), transform 620ms var(--ease-out); }
.hh-t.is-up { transform: translateY(-26px); }
.hh-t.is-on { opacity: 1; transform: none; }
.hh-sub { margin: 0 0 28px; min-height: 3.2em; max-width: 46ch; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.55; color: color-mix(in srgb, var(--fg) 82%, transparent); }
.hh-sub b { display: block; margin-bottom: 4px; font: 500 12px/1.4 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--page); }
.hh-sub span { transition: opacity 300ms ease; }
.hh-device { position: relative; justify-self: center; display: grid; place-items: center; perspective: 1600px; }
.hh-device .iphone { --w: clamp(190px, 27vh, 290px); }
.hh-floor { position: absolute; left: 50%; bottom: -7%; width: 150%; height: 14%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(255,153,0,.38), transparent); filter: blur(6px); pointer-events: none; }
.veil { position: absolute; z-index: 4; inset: -6% -22%; border-radius: 34px; pointer-events: none; background: linear-gradient(160deg, rgba(255,255,255,.2), rgba(255,255,255,.05) 45%, rgba(255,255,255,.12)), repeating-linear-gradient(100deg, rgba(255,255,255,0) 0 22px, rgba(255,255,255,.07) 22px 26px, rgba(255,255,255,0) 26px 58px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), inset 0 1px 0 rgba(255,255,255,.4), 0 40px 80px -30px rgba(0,0,0,.7); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); transform-origin: 50% 100%; will-change: transform, opacity; }
.veil span { position: absolute; left: 50%; bottom: 9%; transform: translateX(-50%); white-space: nowrap; font: 500 11px/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.co { position: absolute; z-index: 5; display: flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: 999px; background: rgba(18,18,27,.62); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.2), 0 16px 34px -16px rgba(0,0,0,.7); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); font: 600 13.5px/1 var(--f); white-space: nowrap; opacity: 0; transform: translateY(10px) scale(.96); transition: opacity 300ms var(--ease-out), transform 450ms var(--ease-out); }
.co::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--page); box-shadow: 0 0 10px var(--page); }
.co.on { opacity: 1; transform: none; }
.co-l { right: calc(100% - 16px); top: 26%; }
.co-r { left: calc(100% - 16px); top: 60%; }
.notif { position: absolute; z-index: 6; display: grid; gap: 2px; min-width: 190px; padding: 12px 14px; border-radius: 18px; background: rgba(22,22,32,.7); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 18px 40px -16px rgba(0,0,0,.8); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); opacity: 0; transform: translateY(14px) scale(.96); transition: opacity 320ms var(--ease-out), transform 480ms var(--ease-out); }
.notif b { font-size: 14px; } .notif span { font-size: 12px; color: var(--mut); }
.notif i { font: 500 10.5px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: #6FE3A6; font-style: normal; }
.notif.on { opacity: 1; transform: none; }
.nf1 { left: calc(100% - 30px); top: 6%; } .nf2 { right: calc(100% - 30px); bottom: 18%; }
.hh-hud { position: absolute; z-index: 3; left: 0; right: 0; bottom: clamp(22px, 4vh, 40px); display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; pointer-events: none; }
.hh-steps { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.hh-steps li { display: grid; gap: 8px; min-width: 96px; font: 500 11px/1.2 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mut); transition: color 300ms ease; }
.hh-steps li i { display: block; height: 2px; border-radius: 2px; background: rgba(255,255,255,.14); overflow: hidden; }
.hh-steps li i::after { content: ""; display: block; height: 100%; background: var(--grad); transform-origin: left; transform: scaleX(var(--k, 0)); }
.hh-steps li.on { color: var(--fg); }
.gauge { position: relative; width: 220px; }
.gauge svg { display: block; width: 100%; height: auto; overflow: visible; }
.g-tick { stroke: rgba(255,255,255,.28); stroke-width: 1.4; }
.g-tick.major { stroke: rgba(255,255,255,.6); stroke-width: 2.2; }
.g-arc { fill: none; stroke: url(#g-grad); stroke-width: 6; stroke-linecap: round; }
.g-track { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 6; stroke-linecap: round; }
.g-needle { stroke: #FFFFFF; stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(255,153,0,.9)); }
.g-hub { fill: #FF9900; }
.g-read { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; }
.g-read b { font: 700 34px/1 var(--f); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.g-read b small { font-size: 16px; margin-left: 2px; color: var(--mut); }
.g-read span { display: block; margin-top: 4px; font: 500 10.5px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mut); }
.hh-hint { position: absolute; z-index: 3; left: 50%; bottom: clamp(22px, 4vh, 40px); transform: translateX(-50%); margin: 0; font: 500 11px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--mut); transition: opacity 300ms ease; }

/* Screens inside the hero phone */
.scr { position: absolute; inset: 0; opacity: 0; transform: translateY(3cqw) scale(.985); transition: opacity 420ms var(--ease-out), transform 560ms var(--ease-out); }
.scr.on { opacity: 1; transform: none; }
.scr-app { background: linear-gradient(180deg, #17131F, #0C0B11); }
.sa-head { position: absolute; top: 14cqw; left: 7cqw; right: 7cqw; display: grid; gap: 1.6cqw; }
.sa-head span { font: 500 3.6cqw/1 var(--f); color: rgba(245,244,242,.6); }
.sa-head b { font: 760 7.6cqw/1 var(--f); letter-spacing: -0.035em; }
.sa-search { position: absolute; top: 33cqw; left: 7cqw; right: 7cqw; padding: 3cqw 4cqw; border-radius: 99px; background: rgba(255,255,255,.08); font: 500 3.5cqw/1 var(--f); color: rgba(245,244,242,.5); }
.sa-card { position: absolute; top: 48cqw; left: 7cqw; right: 7cqw; height: 46cqw; overflow: hidden; border-radius: 6cqw; background: radial-gradient(90% 90% at 85% 10%, #FFD08A, transparent 55%), linear-gradient(135deg, #FF9900, #E2462B 60%, #7B61FF); }
.sa-card .tg { position: absolute; top: 4cqw; left: 4cqw; padding: 1.4cqw 2.6cqw; border-radius: 99px; background: rgba(0,0,0,.35); font: 600 3cqw/1 var(--f-mono); }
.sa-card b { position: absolute; left: 4.5cqw; bottom: 5cqw; max-width: 60%; font: 760 6.4cqw/1.05 var(--f); letter-spacing: -0.03em; }
.sa-chips { position: absolute; top: 99cqw; left: 7cqw; right: 3cqw; display: flex; gap: 2cqw; }
.sa-chips i { padding: 1.8cqw 3.4cqw; border-radius: 99px; background: rgba(255,255,255,.07); font: 600 3.1cqw/1 var(--f); font-style: normal; }
.sa-chips i.on { background: #FF9900; color: #140A00; }
.sa-grid { position: absolute; top: 112cqw; left: 7cqw; right: 7cqw; display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; }
.sa-grid i { height: 30cqw; border-radius: 4.5cqw; background: linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.03)); }
.sa-grid i:nth-child(2) { background: linear-gradient(160deg, rgba(123,97,255,.5), rgba(123,97,255,.1)); }
.sa-grid i:nth-child(3) { background: linear-gradient(160deg, rgba(255,153,0,.45), rgba(255,153,0,.08)); }
.sa-tabs { position: absolute; left: 0; right: 0; bottom: 0; height: 17cqw; display: flex; justify-content: space-around; align-items: center; background: rgba(14,13,20,.9); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.sa-tabs i { width: 6cqw; height: 6cqw; border-radius: 2cqw; background: rgba(245,244,242,.2); }
.sa-tabs i.on { background: #FF9900; }
.scr-web { background: #F7F5F1; color: #111118; }
.sw-bar { position: absolute; z-index: 3; top: 12cqw; left: 6cqw; right: 6cqw; padding: 2.4cqw 3.6cqw; border-radius: 99px; background: #EAE6E0; font: 500 3.2cqw/1 var(--f-mono); color: #5A5560; text-align: center; }
.sw-view { position: absolute; top: 22cqw; left: 0; right: 0; bottom: 0; overflow: hidden; }
.sw-page { padding: 4cqw 6cqw; will-change: transform; }
.sw-page .k { display: block; font: 600 2.8cqw/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: #C25E00; }
.sw-page h4 { margin: 2.6cqw 0 3cqw; font: 780 8.4cqw/1.02 var(--f); letter-spacing: -0.045em; }
.sw-page p { margin: 0 0 4cqw; font: 400 3.4cqw/1.45 var(--f); color: #57525E; }
.sw-btn { display: inline-block; padding: 3cqw 5cqw; border-radius: 99px; background: #FF9900; color: #140A00; font: 700 3.4cqw/1 var(--f); }
.sw-img { height: 44cqw; margin: 6cqw 0; border-radius: 5cqw; background: radial-gradient(70% 90% at 80% 20%, #FFD08A, transparent 60%), linear-gradient(135deg, #FF9900, #7B61FF); }
.sw-feat { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; margin-bottom: 6cqw; }
.sw-feat i { height: 22cqw; border-radius: 4cqw; background: #FFFFFF; box-shadow: 0 0 0 .3cqw rgba(17,17,24,.06); }
.sw-cta { padding: 6cqw; border-radius: 5cqw; background: #111118; color: #F5F4F2; font: 700 5cqw/1.15 var(--f); }
.scr-pay { background: linear-gradient(180deg, #15121C, #0C0B11); }
.sp-item { position: absolute; top: 16cqw; left: 7cqw; right: 7cqw; display: flex; gap: 4cqw; align-items: center; }
.sp-item i { width: 18cqw; height: 18cqw; border-radius: 5cqw; background: linear-gradient(135deg, #FF9900, #7B61FF); }
.sp-item b { display: block; font: 700 4.6cqw/1.2 var(--f); }
.sp-item span { font: 500 3.3cqw/1.3 var(--f); color: rgba(245,244,242,.6); }
.sp-lines { position: absolute; top: 44cqw; left: 7cqw; right: 7cqw; display: grid; gap: 3.4cqw; }
.sp-lines i { height: 3cqw; border-radius: 2cqw; background: rgba(255,255,255,.08); }
.sp-lines i:nth-child(2) { width: 70%; } .sp-lines i:nth-child(3) { width: 82%; }
.sp-sheet { position: absolute; left: 0; right: 0; bottom: 0; height: 58%; padding: 6cqw 7cqw; box-sizing: border-box; border-radius: 7cqw 7cqw 0 0; background: #F7F5F1; color: #111118; transform: translateY(102%); transition: transform 620ms var(--ease-drawer); }
.sp-sheet.up { transform: none; }
.sp-sheet b { font: 760 5.4cqw/1.1 var(--f); letter-spacing: -0.03em; }
.sp-card { margin: 4cqw 0; padding: 4cqw; border-radius: 4cqw; background: #FFFFFF; box-shadow: 0 0 0 .3cqw rgba(17,17,24,.08); font: 500 3.4cqw/1.4 var(--f-mono); color: #57525E; }
.sp-pay { display: grid; place-items: center; height: 13cqw; border-radius: 4cqw; background: #FF9900; color: #140A00; font: 760 4.4cqw/1 var(--f); }
.sp-ok { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 4cqw; background: rgba(12,11,17,.92); opacity: 0; transition: opacity 400ms var(--ease-out); }
.sp-ok.on { opacity: 1; }
.sp-ok i { width: 22cqw; height: 22cqw; border-radius: 50%; background: radial-gradient(circle, #2BD67B, #12A363); box-shadow: 0 0 40px rgba(43,214,123,.5); position: relative; }
.sp-ok i::after { content: ""; position: absolute; left: 8cqw; top: 5cqw; width: 5cqw; height: 10cqw; border: solid #FFFFFF; border-width: 0 1.4cqw 1.4cqw 0; transform: rotate(45deg); }
.sp-ok b { font: 760 5.6cqw/1 var(--f); }
.scr-ad { background: #000000; }
.sd-visual { position: absolute; inset: 0; background: radial-gradient(70% 50% at 50% 38%, rgba(255,214,160,.85), transparent 60%), radial-gradient(90% 70% at 20% 90%, #7B61FF, transparent 60%), linear-gradient(170deg, #FF9900, #E2462B 55%, #2A1A5E); }
.sd-visual::after { content: ""; position: absolute; left: 50%; top: 34%; width: 40cqw; height: 52cqw; transform: translate(-50%, -50%) rotate(-8deg); border-radius: 6cqw; background: linear-gradient(160deg, rgba(255,255,255,.55), rgba(255,255,255,.08)); box-shadow: 0 6cqw 12cqw rgba(0,0,0,.35); }
.sd-bars { position: absolute; z-index: 2; top: 12cqw; left: 5cqw; right: 5cqw; display: flex; gap: 1.4cqw; }
.sd-bars i { flex: 1; height: .8cqw; border-radius: 1cqw; background: rgba(255,255,255,.35); }
.sd-bars i.on { background: #FFFFFF; }
.sd-user { position: absolute; z-index: 2; top: 16cqw; left: 5cqw; display: flex; align-items: center; gap: 2cqw; font: 600 3.4cqw/1.2 var(--f); }
.sd-user i { width: 8cqw; height: 8cqw; border-radius: 50%; background: #FF9900; box-shadow: 0 0 0 .6cqw #000000; }
.sd-user span { display: block; font: 500 2.8cqw/1 var(--f); color: rgba(255,255,255,.75); }
.sd-cap { position: absolute; z-index: 2; left: 5cqw; right: 22cqw; bottom: 30cqw; margin: 0; font: 650 4.6cqw/1.25 var(--f); text-shadow: 0 1cqw 3cqw rgba(0,0,0,.5); }
.sd-cta { position: absolute; z-index: 2; left: 5cqw; right: 5cqw; bottom: 12cqw; display: grid; place-items: center; height: 12cqw; border-radius: 3.4cqw; background: #FFFFFF; color: #111118; font: 700 3.8cqw/1 var(--f); }
.sd-side { position: absolute; z-index: 2; right: 4.4cqw; bottom: 34cqw; display: grid; gap: 5cqw; }
.sd-side i { width: 9cqw; height: 9cqw; border-radius: 50%; background: rgba(255,255,255,.22); }
.sd-side i:first-child { background: #FF4F7B; }

@media (max-width: 899px) {
  .hh { height: 400vh; }
  .hh-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); align-items: start; gap: 6px; padding-top: calc(var(--nav-h) - 6px); padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)); text-align: center; }
  .hh-copy .pill { display: none; }
  .hh-titles { margin-bottom: 10px; }
  .hh-t { max-width: none; font-size: clamp(30px, 8.6vw, 46px); }
  .hh-sub { margin: 0 auto 14px; min-height: 0; font-size: 15px; }
  .hh-sub span { display: none; }
  .hh-copy .cta-row { justify-content: center; }
  .hh-copy .btn-glass { display: none; }
  .hh-copy .btn-l { min-height: 50px; padding: 0 22px; font-size: 15.5px; }
  .hh-device { align-self: center; }
  .hh-device .iphone { --w: clamp(132px, 19svh, 196px); }
  .co { font-size: 12px; padding: 7px 10px; }
  .co-l { right: auto; left: -36%; top: 14%; }
  .co-r { left: auto; right: -36%; top: 66%; }
  .notif { min-width: 0; padding: 9px 11px; }
  .notif b { font-size: 12.5px; } .notif span { display: none; }
  .nf1 { left: calc(100% - 40px); top: 2%; } .nf2 { right: calc(100% - 40px); bottom: 10%; }
  .veil { inset: -5% -30%; border-radius: 24px; }
  .hh-hud { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); align-items: center; }
  .hh-steps li { min-width: 0; width: 54px; font-size: 9.5px; letter-spacing: .06em; }
  .gauge { width: 132px; }
  .g-read b { font-size: 22px; } .g-read span { font-size: 9px; }
  .hh-hint { display: none; }
}
@media (max-width: 899px) and (max-height: 700px) { .hh-sub { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .hh { height: auto; }
  .hh-stage { position: relative; height: auto; min-height: 100svh; }
  .veil, .hh-hint { display: none; }
  .hh-t:not(:first-child) { display: none; }
  .hh-t:first-child { opacity: 1; transform: none; }
}

/* =====================================================================
   Inner page heroes: each page its own colour and animation
   ===================================================================== */
.svc-hero { align-items: center; }
.svc-hero .svc-points { margin-top: 26px; padding: 0; background: none; box-shadow: none; }
.art { position: relative; min-width: 0; min-height: 360px; display: grid; place-items: center; }
/* Développement: code that writes itself, then the pipeline ships it */
.code-win { width: min(100%, 520px); border-radius: 20px; overflow: hidden; background: rgba(14,13,22,.82); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 40px 80px -30px rgba(0,0,0,.8), 0 0 80px -20px color-mix(in srgb, var(--page) 55%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); text-align: left; }
.cw-bar { display: flex; align-items: center; gap: 7px; padding: 12px 14px; box-shadow: inset 0 -1px 0 rgba(255,255,255,.08); font: 500 12px/1 var(--f-mono); color: var(--mut); }
.cw-bar i { width: 11px; height: 11px; border-radius: 50%; background: #FF5F57; } .cw-bar i:nth-child(2) { background: #FEBC2E; } .cw-bar i:nth-child(3) { background: #28C840; }
.cw-bar span { margin-left: 8px; }
.cw-code { min-height: 236px; margin: 0; padding: 16px 18px; font: 500 13px/1.7 var(--f-mono); white-space: pre; overflow: hidden; color: #E6E3F0; }
.cw-code .k { color: #C3B6FF; } .cw-code .s { color: #FFC46B; } .cw-code .f { color: #6FD3FF; } .cw-code .c { color: #6B6880; }
.cw-caret { display: inline-block; width: 7px; height: 15px; margin-left: 1px; vertical-align: -2px; background: var(--page); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.cw-pipe { display: flex; gap: 8px; padding: 12px 14px 16px; }
.cw-pipe span { display: flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 999px; background: rgba(255,255,255,.06); font: 500 12px/1 var(--f-mono); color: var(--mut); transition: background-color 300ms ease, color 300ms ease; }
.cw-pipe span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.cw-pipe span.on { background: color-mix(in srgb, #2BD67B 18%, transparent); color: #6FE3A6; }
/* Marketing: the WebGL glass objects + live KPI chips */
.art-mkt canvas { position: absolute; inset: -10% -20%; width: 140%; height: 120%; }
.art-mkt .kpi { position: absolute; z-index: 2; padding: 10px 14px; border-radius: 16px; background: rgba(22,22,32,.66); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); font: 600 13.5px/1.2 var(--f); animation: kpi 6s var(--ease-out) infinite; }
.art-mkt .kpi i { display: block; font: 500 10.5px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--page); font-style: normal; margin-bottom: 4px; }
.art-mkt .kpi:nth-of-type(1) { left: 2%; top: 14%; } .art-mkt .kpi:nth-of-type(2) { right: 0; top: 46%; animation-delay: 2s; } .art-mkt .kpi:nth-of-type(3) { left: 12%; bottom: 6%; animation-delay: 4s; }
@keyframes kpi { 0%, 100% { opacity: 0; transform: translateY(12px) scale(.96); } 12%, 70% { opacity: 1; transform: none; } }
/* Design & Branding: shapes assembling into a mark, palette fan, a weight-shifting glyph */
.art-des { min-height: 400px; }
.des-mark { position: relative; width: 220px; height: 220px; }
.des-mark i { position: absolute; border-radius: 50%; mix-blend-mode: screen; animation: assemble 7s var(--ease-in-out) infinite; }
.des-mark i:nth-child(1) { left: 20px; top: 20px; width: 130px; height: 130px; background: var(--page); --dx: -70px; --dy: -40px; }
.des-mark i:nth-child(2) { left: 70px; top: 70px; width: 130px; height: 130px; background: var(--page-2); --dx: 80px; --dy: 30px; animation-delay: .15s; }
.des-mark i:nth-child(3) { left: 60px; top: 30px; width: 100px; height: 100px; border-radius: 26px; background: #7B61FF; --dx: 20px; --dy: -90px; animation-delay: .3s; }
@keyframes assemble { 0%, 100% { transform: translate(var(--dx), var(--dy)) scale(.7) rotate(-20deg); opacity: .6; } 35%, 75% { transform: none; opacity: 1; } }
.des-fan { position: absolute; right: 4%; bottom: 8%; width: 70px; height: 150px; }
.des-fan i { position: absolute; inset: 0; border-radius: 12px; transform-origin: 50% 92%; box-shadow: 0 10px 20px -8px rgba(0,0,0,.6); animation: fan 7s var(--ease-in-out) infinite; }
.des-fan i:nth-child(1) { background: #FF9900; --r: -30deg; } .des-fan i:nth-child(2) { background: #FF4FA3; --r: -10deg; } .des-fan i:nth-child(3) { background: #7B61FF; --r: 10deg; } .des-fan i:nth-child(4) { background: #F5F4F2; --r: 30deg; }
@keyframes fan { 0%, 100% { transform: rotate(0); } 30%, 80% { transform: rotate(var(--r)); } }
.des-aa { position: absolute; left: 4%; top: 6%; font: 300 92px/1 var(--f); letter-spacing: -0.06em; color: var(--fg); animation: weight 7s var(--ease-in-out) infinite; }
@keyframes weight { 0%, 100% { font-weight: 300; } 50% { font-weight: 800; } }
/* Conseil & AMOA: a roadmap that fills itself */
.gantt { width: min(100%, 520px); padding: 20px; border-radius: 22px; background: rgba(14,16,24,.75); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 0 80px -24px color-mix(in srgb, var(--page) 60%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); text-align: left; }
.gantt-h { display: flex; justify-content: space-between; margin-bottom: 14px; font: 500 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
.g-row { display: grid; grid-template-columns: 140px minmax(0, 1fr); align-items: center; gap: 12px; padding: 9px 0; box-shadow: inset 0 -1px 0 rgba(255,255,255,.06); font-size: 13.5px; }
.g-row span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-row i { position: relative; display: block; height: 12px; border-radius: 8px; background: rgba(255,255,255,.06); overflow: hidden; }
.g-row i::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--s); width: var(--l); border-radius: 8px; background: linear-gradient(90deg, var(--page), var(--page-2)); transform-origin: left; animation: bar 6s var(--ease-out) infinite; animation-delay: var(--d); }
@keyframes bar { 0% { transform: scaleX(0); } 30%, 85% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; } }
/* Réalisations: two reels of projects sliding past */
.reels { position: relative; display: grid; gap: 14px; margin: 10px 0 30px; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.reel { display: flex; width: max-content; gap: 14px; animation: marquee 60s linear infinite; }
.reel.rev { animation-direction: reverse; animation-duration: 70s; }
.reel span { display: grid; place-items: end start; width: 230px; height: 130px; padding: 14px; box-sizing: border-box; border-radius: 18px; font: 700 17px/1.1 var(--f); letter-spacing: -0.02em; background: radial-gradient(80% 100% at 85% 0%, var(--c1), transparent 65%), radial-gradient(70% 90% at 0% 100%, var(--c2), transparent 65%), #15141D; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
/* Agence (light page): dotted map with the cities lighting up */
.map { position: relative; width: min(100%, 560px); aspect-ratio: 1.15; }
.map canvas { width: 100%; height: 100%; display: block; }
.map .pin { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px rgba(255,153,0,.22); }
.map .pin::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,153,0,.6); animation: ping 2.4s var(--ease-out) infinite; animation-delay: var(--d, 0s); }
.map .pin b { position: absolute; left: 14px; top: -6px; white-space: nowrap; font: 600 12px/1 var(--f-mono); color: var(--fg); }
@keyframes ping { from { transform: scale(.4); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }
.light-page { background: #F5F3EF; color: #0B0B10; padding-bottom: clamp(48px, 7vw, 90px); }
.light-page .values li, .light-page .presence, .light-page .team, .light-page .band { background: rgba(255,255,255,.7); }
.light-page .cities li { background: rgba(255,255,255,.8); }
/* Contact: a live conversation */
.chat { display: grid; gap: 10px; width: min(100%, 440px); padding: 18px; border-radius: 26px; background: rgba(14,18,16,.72); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 0 80px -24px color-mix(in srgb, var(--page) 55%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); text-align: left; }
.chat-h { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; box-shadow: inset 0 -1px 0 rgba(255,255,255,.08); font-weight: 650; }
.chat-h img { width: 34px; height: 34px; }
.chat-h span { display: block; font: 500 11px/1 var(--f-mono); color: #6FE3A6; }
.msg { max-width: 82%; padding: 10px 14px; border-radius: 18px; font-size: 14.5px; line-height: 1.4; opacity: 0; transform: translateY(10px) scale(.97); animation: msg 9s var(--ease-out) infinite; }
.msg.me { justify-self: end; border-bottom-right-radius: 6px; background: linear-gradient(180deg, #2BD67B, #16A85C); color: #04140A; }
.msg.yo { justify-self: start; border-bottom-left-radius: 6px; background: rgba(255,255,255,.08); }
.msg:nth-of-type(2) { animation-delay: 1.4s; } .msg:nth-of-type(3) { animation-delay: 2.8s; } .msg:nth-of-type(4) { animation-delay: 4.2s; }
@keyframes msg { 0% { opacity: 0; transform: translateY(10px) scale(.97); } 6%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@media (max-width: 979px) { .art { min-height: 300px; } .g-row { grid-template-columns: 110px minmax(0, 1fr); } .des-aa { font-size: 64px; } }
.map svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.map svg path { fill: none; stroke: #FF9900; stroke-width: .5; stroke-dasharray: 1.6 2.4; vector-effect: non-scaling-stroke; animation: route 2.4s linear infinite; }
.map svg path { stroke-width: 1.6; }
@keyframes route { to { stroke-dashoffset: -16; } }
.map .pin-l b { left: auto; right: 14px; }
.map .pin-bl b { left: auto; right: 14px; top: 8px; }
.art-mkt { min-height: 420px; background: radial-gradient(45% 45% at 50% 50%, rgba(255,90,54,.22), transparent 70%); }
#mkt-scene { opacity: 0; transition: opacity 900ms ease; }
#mkt-scene.is-ready { opacity: 1; }
.art-mkt.no-webgl canvas { display: none; }
.art-mkt canvas { -webkit-mask: radial-gradient(closest-side, #000 58%, transparent 100%); mask: radial-gradient(closest-side, #000 58%, transparent 100%); }
.art-mkt .kpi { z-index: 3; }
@media (prefers-reduced-motion: reduce) {
  .des-mark i, .des-fan i, .des-aa, .g-row i::after, .reel, .msg, .art-mkt .kpi, .map .pin::after, .cw-caret, .map svg path { animation: none; opacity: 1; transform: none; }
}

/* ---------- Real iPhone 18 Pro Max: Apple product bezel (1470 x 3000), screen 1320 x 2868 at (75, 66) ---------- */
.rphone { --w: 260px; position: relative; flex: none; width: var(--w); aspect-ratio: 1470 / 3000; }
.rp-body { position: absolute; inset: 0; transform-style: preserve-3d; }
.rphone .bezel { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; -webkit-user-select: none; user-select: none; }
.rphone .ip-screen { position: absolute; z-index: 1; left: 5.102%; top: 2.2%; width: 89.796%; height: 95.6%; border-radius: 14.5% / 6.67%; }
.rphone .ip-status { top: 5.6cqw; left: 10cqw; right: 8cqw; }
.rp-edge { position: absolute; left: 2%; right: 2%; top: .7%; bottom: .7%; border-radius: 16.8% / 8.1%; background: linear-gradient(90deg, #0B0B0E, #3A3A42 28%, #1A1A20 62%, #050507); }
.scr-off { position: absolute; inset: 0; z-index: 5; background: #000000; pointer-events: none; }
.rphone.flat { --w: auto; height: min(100%, 560px); width: auto; transition: transform 1000ms var(--ease-out), filter 600ms ease; }
.rphone.shipped { transform: perspective(900px) rotateY(-16deg) rotateX(5deg); filter: drop-shadow(0 0 40px rgba(255,153,0,.45)); }
.hh-device .rphone { --w: clamp(190px, 27vh, 290px); perspective: 1600px; filter: drop-shadow(0 40px 50px rgba(0,0,0,.55)); }
@media (max-width: 899px) { .hh-device .rphone { --w: clamp(132px, 19svh, 196px); } }
@media (prefers-reduced-motion: reduce) { .rphone.shipped { transform: none; } .scr-off { display: none; } }
/* The reporting dashboard no longer rides up over the pinned hero and its buttons */
.dash3d-wrap { margin-top: 0; padding-top: clamp(56px, 8vw, 110px); }

/* ---------- Hero spacing: the progress steps sit under the buttons, everything fits shorter screens ---------- */
.hh-copy .hh-steps { margin-top: clamp(26px, 4.5vh, 46px); }
.hh-hud { justify-content: flex-end; }
.hh-t { font-size: clamp(36px, min(5.6vw, 7.8vh), 92px); }
.hh-stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 16vh; pointer-events: none; background: linear-gradient(180deg, rgba(7,7,11,0), #07070B 92%); }
@media (min-width: 900px) and (max-height: 820px) {
  .hh-copy .pill { display: none; }
  .hh-sub { margin-bottom: 20px; }
  .hh-grid { padding-bottom: 118px; }
  .gauge { width: 176px; }
  .g-read b { font-size: 28px; }
}
@media (min-width: 900px) and (max-height: 660px) { .hh-sub span { display: none; } .hh-sub { min-height: 0; } }
/* The dashboard zooms in while rising over the bottom of the hero (arc and dial), never up to the buttons */
.dash3d-wrap { margin-top: calc(-1 * min(13vh, 110px)); padding-top: 0; }
@media (max-width: 899px) {
  .hh-copy .hh-steps { position: absolute; left: max(clamp(16px, 4vw, 40px), env(safe-area-inset-left, 0px)); bottom: calc(92px + env(safe-area-inset-bottom, 0px)); margin: 0; }
}

/* Medium desktop widths: callouts and notifications hug the phone instead of reaching the buttons */
@media (min-width: 900px) and (max-width: 1279px) {
  .nf2 { right: calc(100% - 78px); }
  .co-l { right: calc(100% - 44px); }
  .nf1 { left: calc(100% - 60px); }
}

/* ---------- Project device scenes: real MacBook Pro M5 14" (left) and iPhone 18 Pro Max (right) ---------- */
/* MacBook bezel 3860 x 2540, screen 3024 x 1964 at (418, 288). They rise into place in 3D when seen. */
.case-cover.has-media { aspect-ratio: 16 / 10; }
.devscene { position: absolute; inset: 0; perspective: 1400px; }
.mbp { position: absolute; z-index: 1; left: 9%; bottom: 13%; width: 82%; aspect-ratio: 3860 / 2540; transform-origin: 50% 100%; transform: rotateY(18deg) rotateX(14deg) translateY(12%); opacity: 0; filter: drop-shadow(0 26px 26px rgba(0,0,0,.5)); transition: transform 1100ms var(--ease-out), opacity 600ms ease; }
.devscene.has-phone .mbp { left: 3%; width: 76%; }
.devscene.in .mbp { transform: rotateY(14deg) rotateX(5deg); opacity: 1; }
.mbp-bezel { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.mbp-screen { position: absolute; z-index: 1; left: 10.829%; top: 11.339%; width: 78.342%; height: 77.323%; overflow: hidden; border-radius: 2.1% 2.1% 0 0 / 3.3% 3.3% 0 0; background: var(--fill, #0E0D14); }
.mbp-screen .shot { display: block; width: 100%; height: auto; }
.mbp-screen .fade { position: absolute; left: 0; top: 0; }
.mbp-screen .fade.f1 { opacity: 0; }
.devscene.in .mbp-screen .fade.f1 { animation: shotFade 10s ease-in-out 1.5s infinite; }
@keyframes shotFade { 0%, 40% { opacity: 0; } 50%, 90% { opacity: 1; } 100% { opacity: 0; } }
.devscene.in .mbp-screen .scrolls { animation: shotScroll 11s ease-in-out 1.2s infinite alternate; }
@keyframes shotScroll { 0%, 12% { transform: translateY(0); } 88%, 100% { transform: translateY(var(--scroll)); } }
.dev-phone.rphone { position: absolute; z-index: 2; right: 7%; bottom: 8%; width: 21%; transform-origin: 50% 100%; transform: rotateY(-16deg) rotateX(12deg) translate3d(0, 18%, 40px); opacity: 0; filter: drop-shadow(-14px 22px 22px rgba(0,0,0,.55)); transition: transform 1200ms var(--ease-out) 140ms, opacity 600ms ease 140ms; }
.devscene.in .dev-phone.rphone { transform: rotateY(-12deg) rotateX(4deg) translate3d(0, 0, 40px); opacity: 1; }
.dev-phone .ip-screen .shot { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.dev-floor { position: absolute; z-index: 0; left: 8%; right: 8%; bottom: 5%; height: 12%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.6), transparent); pointer-events: none; }
.case-cover.has-media i { z-index: 4; }
@media (hover: hover) and (pointer: fine) {
  .case:hover .devscene.in .mbp { transform: rotateY(9deg) rotateX(3deg) translateY(-2%); }
  .case:hover .devscene.in .dev-phone.rphone { transform: rotateY(-8deg) rotateX(2deg) translate3d(0, -6%, 60px); }
}
@media (prefers-reduced-motion: reduce) {
  .mbp, .dev-phone.rphone { opacity: 1; transition: none; }
  .devscene .mbp { transform: rotateY(10deg) rotateX(3deg); }
  .devscene .dev-phone.rphone { transform: rotateY(-8deg) rotateX(2deg) translateZ(40px); }
  .mbp-screen .shot { animation: none !important; }
}
@media (max-width: 639px) { .case-cover.has-media { aspect-ratio: 4 / 3; } .case-cover.has-media .mbp { bottom: 11%; } }

/* ---------- Project form v2: several services, live summary, sending and error states ---------- */
.cfg { scroll-margin-top: calc(var(--nav-h) + 12px); }
/* Phones: a field reached with the keyboard or focus() must not end up under the fixed action dock */
@media (max-width: 899px) { html { scroll-padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); } }
.cfg-step legend .cfg-hint { display: block; margin-top: 8px; font: 500 12.5px/1.3 var(--f-mono); letter-spacing: .02em; color: var(--mut); }
.svc-groups { display: grid; gap: 18px; }
.svc-group { --gc: #A3A1AC; min-width: 0; }
.svc-group[data-g="dev"], .sum-chip[data-g="dev"] { --gc: #8F78FF; }
.svc-group[data-g="mkt"], .sum-chip[data-g="mkt"] { --gc: #FF6A45; }
.svc-group[data-g="des"], .sum-chip[data-g="des"] { --gc: #FF4FA3; }
.svc-group[data-g="con"], .sum-chip[data-g="con"] { --gc: #1FC8E3; }
.svc-gh { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 500 11.5px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mut); }
.svc-gh::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gc); box-shadow: 0 0 10px color-mix(in srgb, var(--gc) 70%, transparent); }
.svc-other { padding-top: 16px; border-top: 1px solid var(--line); }
.svc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.svc-chip { position: relative; display: block; max-width: 100%; cursor: pointer; }
.svc-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.svc-chip span { display: flex; align-items: center; gap: 10px; min-height: 48px; box-sizing: border-box; padding: 8px 18px 8px 12px; border-radius: 999px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--g-bd); font-weight: 550; font-size: 15.5px; line-height: 1.25; transition: background-color 160ms ease, box-shadow 160ms ease, transform 140ms var(--ease-out); }
.svc-chip span::before { content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--gc) 60%, rgba(255,255,255,.3)); background: transparent center / 12px no-repeat; transition: background-color 160ms ease, box-shadow 160ms ease; }
.svc-chip input:checked + span { background: rgba(255,153,0,.14); box-shadow: inset 0 0 0 2px var(--brand); }
.svc-chip input:checked + span::before { box-shadow: none; background-color: var(--brand); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23140A00' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m3.8 8.4 2.7 2.6 5.7-6'/></svg>"); }
.svc-chip:active span { transform: scale(.97); }
.svc-chip input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .svc-chip:hover span { background: rgba(255,255,255,.09); } .svc-chip:hover input:checked + span { background: rgba(255,153,0,.18); } }

/* Summary: always visible next to the form; on phones a one-line bar above it that unfolds */
.sum-toggle { display: none; }
.sum-eyebrow { display: flex; align-items: center; gap: 8px; }
.sum-live { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #2BD67B; }
.cfg-sum.is-typing .sum-live { animation: sumBeat 900ms ease-out infinite; }
.cfg-sum.is-done .sum-live { background: var(--brand); animation: none; }
@keyframes sumBeat { 0% { box-shadow: 0 0 0 0 rgba(43,214,123,.6); } 100% { box-shadow: 0 0 0 7px rgba(43,214,123,0); } }
.cfg-sum dd { transition: color 450ms ease; }
.cfg-sum dd.is-live, .sum-contact dd .is-live { color: var(--page); transition-duration: 80ms; }
.cfg-sum dd[data-sum="services"].is-set { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.sum-chip { --gc: #A3A1AC; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 26px; padding: 3px 10px; box-sizing: border-box; border-radius: 999px; background: color-mix(in srgb, var(--gc) 15%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gc) 38%, transparent); color: var(--fg); font-size: 13px; font-weight: 560; line-height: 1.25; }
.sum-chip::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--gc); }
.sum-chip.is-new { animation: chipIn 300ms var(--ease-out) both; }
@keyframes chipIn { from { opacity: 0; transform: scale(.92); } }
.sum-contact dd > * { display: block; overflow-wrap: anywhere; }
.sum-contact dd > [hidden] { display: none; }
.sum-contact dd b { color: var(--fg); }
.sum-contact dd span:not(.sum-ph) { font-weight: 500; font-size: 14px; color: color-mix(in srgb, var(--fg) 82%, transparent); }
.sum-contact dd [data-sum="company"] { color: var(--mut); }
.cfg-sum dd[data-sum="message"] { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-weight: 450; font-size: 14px; white-space: pre-line; overflow-wrap: anywhere; }
@media (max-width: 899px) {
  .cfg-sum { order: -1; padding: 0; box-shadow: inset 0 -1px 0 var(--g-bd); }
  .sum-toggle { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 0 20px; text-align: left; }
  .sum-tt { display: inline-flex; align-items: center; gap: 8px; font: 500 11.5px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mut); white-space: nowrap; }
  .sum-mini { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; text-align: right; color: var(--fg); }
  .sum-chev { width: 8px; height: 8px; margin: 0 2px 4px; border: solid var(--mut); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform 240ms var(--ease-out); }
  .cfg-sum.is-open .sum-chev { transform: translateY(4px) rotate(-135deg); }
  .sum-body { display: none; padding: 2px 20px 22px; }
  .cfg-sum.is-open .sum-body { display: block; animation: fadeUp 260ms var(--ease-out) both; }
  .sum-eyebrow { display: none; }
}

/* Sending, error, success */
.cfg-nav [data-next].is-busy .arr { display: none; }
.cfg-nav [data-next].is-busy::after { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(20,10,0,.28); border-top-color: var(--on-brand); animation: cfgSpin 700ms linear infinite; }
.cfg-nav [data-next][disabled], .cfg-nav [data-prev][disabled] { cursor: default; }
@keyframes cfgSpin { to { transform: rotate(360deg); } }
.cfg-alert { margin-top: 20px; padding: 14px 16px; border-radius: 16px; background: rgba(255,122,122,.08); box-shadow: inset 0 0 0 1px rgba(255,122,122,.35); }
.cfg-alert p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.45; color: #FFD3D3; }
.cfg-alert-act { display: flex; flex-wrap: wrap; gap: 8px; }
.cfg-done:focus { outline: none; }
.cfg-ref { margin: 0 0 8px; font: 500 13px/1.4 var(--f-mono); color: var(--mut); }
.cfg-ref b { color: var(--fg); letter-spacing: .06em; }
.field input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--danger); }
@media (prefers-reduced-motion: reduce) {
  .sum-chip.is-new, .cfg-sum.is-typing .sum-live, .cfg-sum.is-open .sum-body { animation: none; }
  .cfg-nav [data-next].is-busy::after { animation-duration: 1.6s; }
}

/* ---------- FAQ: one answer open at a time, the height eases open where the browser can ---------- */
.faq-ask { margin: 0; color: var(--mut); }
.faq-ask a { color: var(--fg); text-decoration-color: color-mix(in srgb, var(--page) 70%, transparent); text-underline-offset: 3px; }
.faq-contact { padding-top: 0; }
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq details::details-content { block-size: 0; overflow-y: clip; transition: block-size 320ms var(--ease-out), content-visibility 320ms allow-discrete; }
  .faq details[open]::details-content { block-size: auto; }
}
@media (prefers-reduced-motion: reduce) { .faq details::details-content { transition: none; } }

/* ---------- Développement: every dev project, big cards then compact ones ---------- */
.cases-more-h { margin: clamp(40px, 6vw, 64px) 0 0; }
.cases-more { margin-top: 20px; }
.cases-more .case-cover { aspect-ratio: 16 / 10; } /* same height in every row, with or without device mockups */