:root {
  --ground: #fff;
  --band: #f7f9fc;
  --ink: #10233f;
  --cobalt: #2864dc;
  --cobalt-deep: #1e4fb5;
  --mist: #dce7ff;
  --slate: #53647a;
  --line: #e6ecf5;
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --body: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --page-pad: clamp(1rem, 5vw, 4rem);
  --content: 68rem;
  --bar-height: 5.5rem;
  --header-h: 4.25rem;
}

* { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; padding-bottom: calc(var(--bar-height) + env(safe-area-inset-bottom)); color: var(--ink); background: var(--ground); font-family: var(--body); font-size: 1.0625rem; line-height: 1.55; }
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; }

.skip-link { position: fixed; z-index: 20; top: 1rem; left: 1rem; transform: translateY(-200%); padding: .75rem 1rem; background: var(--ink); color: var(--ground); border-radius: .5rem; }
.skip-link:focus { transform: translateY(0); }

/* The header lets the page pass behind it, blurred. The seam is a hairline, and
   the blur fades out below it so there is no hard edge to catch the eye. */
.site-header { position: sticky; z-index: 13; top: 0; display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); padding: .75rem var(--page-pad); background: rgb(255 255 255 / .7); background: color-mix(in srgb, var(--ground) 70%, transparent); border-bottom: 1px solid rgb(16 35 63 / .06); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); }
.site-header::after { content: ""; position: absolute; top: 100%; right: 0; left: 0; height: 1.75rem; -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); -webkit-mask-image: linear-gradient(to bottom, #000, transparent); mask-image: linear-gradient(to bottom, #000, transparent); pointer-events: none; }
.brand { display: inline-flex; align-items: center; min-height: 2.75rem; gap: .5rem; color: var(--ink); font: 700 1.3125rem/1 var(--display); letter-spacing: -.05em; text-decoration: none; }
.brand img { width: 1.75rem; height: 1.375rem; }
.menu-toggle { display: inline-grid; width: 2.75rem; min-width: 2.75rem; min-height: 2.75rem; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--ground); color: var(--ink); cursor: pointer; }
.menu-toggle[aria-expanded="true"] { border-color: var(--cobalt); background: var(--mist); color: var(--cobalt); }
/* Three bars: the middle one dissolves while the outer two cross into an X. */
.menu-icon { position: relative; display: block; width: 1.125rem; height: .75rem; }
.menu-icon span { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: currentColor; transition: top 220ms cubic-bezier(.22, .61, .36, 1), transform 320ms cubic-bezier(.22, .61, .36, 1), opacity 160ms linear; }
.menu-icon span:nth-child(1) { top: 0; }
.menu-icon span:nth-child(2) { top: calc(50% - 1px); }
.menu-icon span:nth-child(3) { top: calc(100% - 2px); }
.menu-toggle[aria-expanded="true"] .menu-icon span { top: calc(50% - 1px); }
.menu-toggle[aria-expanded="true"] .menu-icon span:nth-child(1) { transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-icon span:nth-child(2) { opacity: 0; transform: scaleX(.4); }
.menu-toggle[aria-expanded="true"] .menu-icon span:nth-child(3) { transform: rotate(-45deg); }

/* A full-height sheet, not a dropdown card. The veil dissolves the page while the
   rows drift up into place, so the two states cross-fade instead of popping. */
.menu-scrim { position: fixed; z-index: 11; inset: 0; background: var(--ground); }
.menu-panel { position: fixed; z-index: 12; inset: var(--header-h) 0 0; display: flex; flex-direction: column; padding: 1.75rem var(--page-pad) calc(2rem + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; }
.menu-panel a { text-decoration: none; }
.menu-panel a:not(.menu-cta) { display: grid; grid-template-columns: 1fr 1.25rem; align-items: center; column-gap: .75rem; min-height: 3.875rem; padding: .5rem 0; border-bottom: 1px solid var(--line); font: 700 1.375rem/1.25 var(--display); letter-spacing: -.035em; }
.menu-panel a:not(.menu-cta)::after { content: ""; justify-self: center; width: .5rem; height: .5rem; border-top: 2px solid var(--cobalt); border-right: 2px solid var(--cobalt); transform: rotate(45deg); }
.menu-panel a:not(.menu-cta):hover { color: var(--cobalt); }
.menu-panel .menu-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 3.375rem; margin-top: auto; padding: .875rem 1.25rem; border-radius: 999px; background: var(--cobalt); color: var(--ground); font-weight: 600; font-size: 1.0625rem; }
.menu-panel .menu-cta:hover { background: var(--cobalt-deep); }

@keyframes menu-veil-in { from { opacity: 0; } }
@keyframes menu-row-in { from { opacity: 0; transform: translateY(.625rem); } }
.menu-scrim:not([hidden]) { animation: menu-veil-in 300ms ease both; }
/* Long durations, short offsets: the rows overlap heavily so the sequence reads
   as one movement rather than items arriving one by one. */
.menu-panel:not([hidden]) > a { animation: menu-row-in 460ms cubic-bezier(.22, .61, .36, 1) both; }
.menu-panel:not([hidden]) > a:nth-child(1) { animation-delay: 50ms; }
.menu-panel:not([hidden]) > a:nth-child(2) { animation-delay: 85ms; }
.menu-panel:not([hidden]) > a:nth-child(3) { animation-delay: 120ms; }
.menu-panel:not([hidden]) > a:nth-child(4) { animation-delay: 155ms; }
.menu-panel:not([hidden]) > a:nth-child(5) { animation-delay: 190ms; }
.menu-panel:not([hidden]) > a:nth-child(6) { animation-delay: 225ms; }
.menu-panel:not([hidden]) > a:nth-child(7) { animation-delay: 260ms; }

main, footer { width: min(100%, calc(var(--content) + var(--page-pad) * 2)); margin-inline: auto; }
section { padding: clamp(2.75rem, 8vw, 5rem) var(--page-pad); }
.band { background: var(--band); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--display); letter-spacing: -.04em; }
h1 { max-width: 16ch; margin-bottom: 1.125rem; font-size: clamp(2.75rem, 11vw, 5rem); line-height: 1.05; }
h2 { margin-bottom: .75rem; font-size: clamp(2rem, 6vw, 3.25rem); line-height: 1.06; }
h3 { margin-bottom: .5rem; font-size: 1.5rem; line-height: 1.15; }
.lead { max-width: 38rem; margin-bottom: 1.5rem; color: var(--slate); font-size: 1.0625rem; line-height: 1.6; }
.eyebrow { margin-bottom: .625rem; color: var(--cobalt); font: 500 .75rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.meta { margin-bottom: .5rem; color: var(--slate); font: 500 .6875rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }

/* Buttons all clear the 44px touch target and read as buttons, not links. */
.button { min-height: 3.125rem; display: inline-flex; align-items: center; justify-content: center; padding: .75rem 1.25rem; border: 1.5px solid transparent; border-radius: .75rem; font-weight: 600; font-size: 1rem; text-align: center; text-decoration: none; }
.button.primary { background: var(--cobalt); color: var(--ground); }
.button.primary:hover { background: var(--cobalt-deep); }
.lab-cta { position: relative; overflow: hidden; animation: lab-cta-nudge 4s ease-in-out infinite; }
.lab-cta::after { position: absolute; inset: 0 auto 0 -45%; width: 32%; background: linear-gradient(90deg, transparent, rgb(255 255 255 / .3), transparent); content: ""; transform: skewX(-18deg); animation: lab-cta-glint 4s ease-in-out infinite; pointer-events: none; }
.lab-cta:hover { animation-play-state: paused; transform: translateY(-2px); }
@keyframes lab-cta-nudge { 0%, 78%, 100% { transform: translateY(0) scale(1); box-shadow: none; } 84% { transform: translateY(-2px) scale(1.012); box-shadow: 0 .55rem 1.25rem rgb(40 100 220 / .2); } 90% { transform: translateY(0) scale(1); box-shadow: none; } }
@keyframes lab-cta-glint { 0%, 80% { left: -45%; opacity: 0; } 82% { opacity: 1; } 92% { left: 115%; opacity: 0; } 100% { left: 115%; opacity: 0; } }
.button.outline { border-color: var(--cobalt); color: var(--cobalt); background: var(--ground); }
.button.outline:hover { background: var(--mist); }
.button.ghost { border-color: var(--line); color: var(--ink); background: var(--ground); }
.button.ghost:hover { border-color: var(--cobalt); color: var(--cobalt); }
.button.light { background: var(--ground); color: var(--ink); }

.hero { display: grid; gap: 1.75rem; padding-top: clamp(2rem, 7vw, 4.5rem); }
.hero-copy { min-width: 0; }
/* The photo sits under the copy on a phone and beside it on a wide screen; its blue
   backdrop is echoed by a soft halo so it reads as part of the page, not a sticker. */
.hero-portrait { position: relative; margin: 0; justify-self: center; width: min(100%, 22rem); }
.hero-portrait::before { position: absolute; z-index: 0; inset: 12% -8% -6% -8%; border-radius: 45% 55% 50% 50% / 55% 45% 55% 45%; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--cobalt) 26%, transparent), transparent 72%); content: ""; }
.hero-portrait img { position: relative; z-index: 1; width: 100%; height: auto; border-radius: 1.5rem; box-shadow: 0 1.25rem 3rem rgb(16 35 63 / .16); }
.proofs { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.5rem; padding-top: .875rem; border-top: 1px solid var(--line); color: var(--slate); font-size: .9375rem; line-height: 1.4; }
.proofs strong { color: var(--ink); }
.proof-icons { display: inline-flex; flex: 0 0 auto; }
.proof-icons img { width: 2.25rem; height: 2.25rem; border: 2px solid var(--ground); border-radius: .75rem; box-shadow: 0 .25rem .75rem rgb(16 35 63 / .12); }
.proof-icons img + img { margin-left: -.5rem; }
.hero-actions { display: grid; gap: .75rem; }

/* The Lab is prominent through scale and position, while sharing the page palette. */
.lab-portal { background: var(--band); color: var(--ink); }
.lab-panel { display: grid; gap: 1.25rem; padding: clamp(1.5rem, 5vw, 3rem); border: 1px solid var(--line); border-left: 4px solid var(--cobalt); border-radius: 1.125rem; background: var(--ground); }
.lab-copy { max-width: 40rem; }
.lab-label { margin-bottom: .75rem; color: var(--cobalt); font-size: .875rem; font-weight: 700; }
.lab-portal h2 { max-width: 17ch; font-size: clamp(2.125rem, 8vw, 3.75rem); }
.lab-intro { max-width: 38rem; color: var(--slate); }
.lab-benefits { display: grid; margin: 1.5rem 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.lab-benefits li { position: relative; padding: .75rem 0 .75rem 1.25rem; border-bottom: 1px solid var(--line); font-weight: 600; transition: transform 180ms ease; }
.lab-benefits li::before, .lab-benefits li::after { position: absolute; top: 50%; left: 0; width: .625rem; height: .25rem; border-radius: 999px; content: ""; transform: translateY(-50%); }
.lab-benefits li::before { background: var(--mist); }
.lab-benefits li::after { background: var(--cobalt); transform: translateY(-50%) scaleX(0); transform-origin: left; }
.lab-benefits li:hover { transform: translateX(.25rem); }
.lab-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .875rem 1rem; }
.lab-actions > span { color: var(--slate); font-size: .8125rem; }
.lab-mark { width: 3.5rem; height: 3.5rem; overflow: visible; fill: none; stroke: var(--cobalt); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 260ms cubic-bezier(.22, .61, .36, 1); }
.lab-mark-liquid { fill: var(--mist); stroke: none; transform-box: fill-box; transform-origin: center bottom; }
.lab-liquid-group { transform-box: fill-box; transform-origin: center; }
.lab-panel:hover .lab-mark, .lab-panel:active .lab-mark { transform: translateY(-2px) rotate(3deg); }
.reveal-enabled .lab-mark-liquid { transform: scaleY(0); }
.reveal-enabled .lab-benefits li { opacity: 0; translate: .5rem 0; }
.lab-portal.is-visible .lab-mark-liquid { animation: lab-liquid-fill .7s cubic-bezier(.22, .61, .36, 1) .18s both; }
.lab-portal.is-visible .lab-liquid-group { animation: lab-liquid-sway 6s ease-in-out 1s infinite; }
.lab-portal.is-visible .lab-benefits li { animation: lab-benefit-in .42s ease-out both; }
.lab-benefits li:nth-child(1) { animation-delay: .12s; }
.lab-benefits li:nth-child(2) { animation-delay: .24s; }
.lab-benefits li:nth-child(3) { animation-delay: .36s; }
.lab-portal.is-visible .lab-benefits li:nth-child(1)::after { animation: lab-benefit-mark .3s ease-out .28s both; }
.lab-portal.is-visible .lab-benefits li:nth-child(2)::after { animation: lab-benefit-mark .3s ease-out .4s both; }
.lab-portal.is-visible .lab-benefits li:nth-child(3)::after { animation: lab-benefit-mark .3s ease-out .52s both; }
@keyframes lab-liquid-fill { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes lab-liquid-sway { 0%, 82%, 100% { transform: rotate(0); } 88% { transform: rotate(2.5deg); } 94% { transform: rotate(-2deg); } }
@keyframes lab-benefit-in { from { opacity: 0; translate: .5rem 0; } to { opacity: 1; translate: 0 0; } }
@keyframes lab-benefit-mark { to { transform: translateY(-50%) scaleX(1); } }

.campaign { width: min(calc(100% - var(--page-pad) * 2), var(--content)); margin: 0 auto; padding: 1.5rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--ground); }
.campaign h2 { font-size: 1.75rem; }
.campaign a { min-height: 2.75rem; display: inline-flex; align-items: center; color: var(--cobalt); font-weight: 600; }

/* Journeys read as one list of rows rather than three oversized cards. */
.journey-list { display: grid; border: 1px solid var(--line); border-radius: .875rem; background: var(--ground); overflow: hidden; }
.journey-list a { display: grid; grid-template-columns: 1fr 1.25rem; column-gap: .75rem; padding: 1.125rem 1rem; border-bottom: 1px solid var(--line); text-decoration: none; }
.journey-list a:last-child { border-bottom: 0; }
/* Label and sub stack in column one; the chevron holds its own lane across both rows. */
.journey-list strong { grid-column: 1; grid-row: 1; margin-bottom: .1875rem; font: 700 1.1875rem/1.3 var(--display); letter-spacing: -.03em; }
.journey-list span { grid-column: 1; grid-row: 2; color: var(--slate); font-size: .9375rem; line-height: 1.4; }
.journey-list a::after { content: ""; grid-column: 2; grid-row: 1 / span 2; align-self: center; justify-self: center; width: .5rem; height: .5rem; border-top: 2px solid var(--cobalt); border-right: 2px solid var(--cobalt); transform: rotate(45deg); }
.journey-list a:hover { background: var(--band); }

/* Four apps fit one screen, so the picker is a fixed grid: nothing moves under the thumb. */
.app-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin-bottom: 1.25rem; }
.app-grid button { display: grid; justify-items: center; gap: .5rem; padding: 0; border: 0; background: none; cursor: pointer; }
.app-grid img { width: 100%; height: auto; aspect-ratio: 1; border: 2px solid transparent; border-radius: 1.25rem; }
.app-grid img.pixel { image-rendering: pixelated; }
.app-grid span { color: var(--slate); font-size: .75rem; line-height: 1.2; text-align: center; }
.app-grid button[aria-current="true"] img { border-color: var(--cobalt); box-shadow: 0 0 0 4px var(--mist); }
.app-grid button[aria-current="true"] span { color: var(--ink); font-weight: 600; }

/* One palette for the whole page: the app's own colour only tints the card and rings
   its icon, so four apps no longer mean four colour schemes stacked on the cobalt. */
.app-detail { display: grid; grid-template-columns: auto 1fr; gap: .5rem .875rem; padding: 1.25rem; border: 1px solid var(--line); border-radius: 1.125rem; background: color-mix(in srgb, var(--app-background, var(--mist)) 14%, var(--ground)); color: var(--ink); }
.app-detail > img { grid-row: span 2; width: 3.5rem; height: 3.5rem; border-radius: .875rem; box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-badge-background, var(--cobalt)) 55%, var(--ground)); }
.app-detail > img.pixel { image-rendering: pixelated; }
.app-detail-heading { align-self: center; }
.app-detail-heading h3, .app-detail-heading p { margin: 0; }
.app-detail-heading h3 { font-size: 1.625rem; }
.app-detail [data-app-tag] { color: var(--slate); font: 500 .6875rem/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.app-detail > [data-app-description], .app-detail > [data-app-stores], .app-detail > [data-app-status] { grid-column: 1 / -1; margin: .625rem 0 0; }
.app-detail [data-app-stores] { display: grid; grid-template-columns: 1fr 1fr; gap: .625rem; }
.app-detail [data-app-stores] a { min-height: 3.125rem; display: inline-flex; align-items: center; justify-content: center; border-radius: .75rem; background: var(--cobalt); color: var(--ground); font-weight: 600; font-size: .9375rem; text-decoration: none; }
.app-detail [data-app-stores] a:hover { background: var(--cobalt-deep); }
.app-detail [data-app-status] { color: var(--slate); font: 500 .8125rem/1.5 var(--mono); }
.app-detail.is-entering { animation: detail-in 280ms ease-out both; }
@keyframes detail-in { from { opacity: 0; transform: translateY(10px); } }

.developer-path { margin: 1.125rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--slate); font-size: .875rem; line-height: 1.6; }

.card-grid { display: grid; gap: .875rem; }
.card-grid article { display: flex; flex-direction: column; align-items: stretch; padding: 1.375rem 1.25rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--ground); }
.card-grid article > p:not(.meta):not(.outcome) { flex: 1; margin-bottom: 1rem; color: var(--slate); font-size: 1rem; }
.card-grid article .meta { color: var(--cobalt); }
/* What the client leaves with is the sentence that sells the call, so it gets its own line. */
.card-grid .outcome { margin: 0 0 1.125rem; padding: .75rem .875rem; border-left: 3px solid var(--cobalt); border-radius: 0 .5rem .5rem 0; background: var(--band); color: var(--slate); font-size: .9375rem; line-height: 1.5; }
.card-grid .outcome strong { color: var(--ink); }
.card-grid article:target { border-color: var(--cobalt); box-shadow: 0 0 0 4px var(--mist); }
#cadrage, #audit { scroll-margin-top: calc(var(--header-h) + 1rem); }
/* Motion Stack is a small portal into its own visual language, recoloured to
   belong on dembs.fr rather than looking like an unrelated dark advert. */
.card-grid .soon { --gaze-x: 0px; --gaze-y: 0px; position: relative; display: grid; min-height: 29rem; overflow: hidden; padding: 1.5rem 1.25rem 14rem; border: 1.5px solid color-mix(in srgb, var(--cobalt) 36%, var(--line)); border-radius: 1.25rem; background: linear-gradient(145deg, var(--ground) 0 48%, color-mix(in srgb, var(--mist) 58%, var(--ground)) 100%); color: inherit; text-decoration: none; isolation: isolate; transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; }
.card-grid .soon::before { position: absolute; z-index: -1; right: -4rem; bottom: -5rem; width: 17rem; height: 17rem; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--cobalt) 16%, transparent), transparent 68%); content: ""; }
.card-grid .soon-copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; }
.card-grid .soon .meta { margin-bottom: .65rem; color: var(--cobalt); }
.card-grid .soon h3 { max-width: 15ch; font-size: clamp(1.7rem, 6vw, 2.35rem); }
.card-grid .soon-description { max-width: 32rem; margin: 0; color: var(--slate); font-size: 1rem; }
.card-grid .soon-action { display: inline-flex; align-items: center; min-height: 2.75rem; margin-top: 1.125rem; color: var(--cobalt); font-weight: 700; }
.card-grid .soon:hover { transform: translateY(-2px); border-color: var(--cobalt); box-shadow: 0 1.1rem 2.5rem rgb(16 35 63 / .12); }
.card-grid .soon:focus-visible { outline: 3px solid color-mix(in srgb, var(--cobalt) 40%, transparent); outline-offset: 3px; }

.motion-mascot-stage { position: absolute; right: 50%; bottom: .35rem; width: min(18rem, 92%); height: 13.5rem; pointer-events: none; transform: translateX(50%); }
.motion-mascot { position: absolute; z-index: 2; bottom: .5rem; left: calc(50% - 5.25rem); width: 10.5rem; overflow: visible; animation: mascot-float 5.4s ease-in-out infinite; }
.motion-shadow { fill: rgb(16 35 63 / .12); }
.motion-freddy-body { fill: var(--cobalt); transform-box: fill-box; transform-origin: center bottom; animation: mascot-breathe 3.6s ease-in-out infinite; }
.motion-freddy-eyes { fill: #fff; transform: translate(var(--gaze-x), var(--gaze-y)); transition: transform 90ms linear; }
.motion-freddy-eye { transform-box: fill-box; transform-origin: center; animation: mascot-blink 5.8s ease-in-out infinite; }
.motion-freddy-eye-right { animation-delay: 35ms; }
.motion-chip { position: absolute; z-index: 3; display: inline-grid; min-width: 2.75rem; min-height: 2.2rem; place-items: center; border: 1px solid color-mix(in srgb, var(--cobalt) 38%, var(--line)); border-radius: .7rem; background: rgb(255 255 255 / .9); box-shadow: 0 .5rem 1rem rgb(16 35 63 / .1); color: var(--cobalt); font: 700 .7rem/1 var(--mono); letter-spacing: .08em; }
.motion-chip-cc { top: 3.25rem; left: .25rem; animation: decor-float-left 5.8s ease-in-out infinite; }
.motion-chip-fx { top: 1.1rem; right: .35rem; animation: decor-float-right 6.4s ease-in-out -.9s infinite; }
.motion-frame { position: absolute; z-index: 1; bottom: 1.15rem; left: 50%; width: 11.5rem; height: 9rem; border: 1px solid color-mix(in srgb, var(--cobalt) 30%, transparent); transform: translateX(-50%) rotate(-2deg); }
.motion-frame::before, .motion-frame::after { position: absolute; width: .45rem; height: .45rem; border: 1.5px solid var(--cobalt); background: var(--ground); content: ""; }
.motion-frame::before { top: -.3rem; left: -.3rem; }
.motion-frame::after { right: -.3rem; bottom: -.3rem; }
.motion-wave { position: absolute; z-index: 3; bottom: 1.5rem; left: .5rem; display: flex; align-items: center; gap: .18rem; height: 2.25rem; padding: .45rem .55rem; border: 1px solid color-mix(in srgb, var(--cobalt) 28%, var(--line)); border-radius: 999px; background: rgb(255 255 255 / .88); box-shadow: 0 .4rem 1rem rgb(16 35 63 / .08); animation: decor-drift 6.8s ease-in-out -2s infinite; }
.motion-wave i { display: block; width: .16rem; border-radius: 999px; background: var(--cobalt); animation: wave-pulse 1.6s ease-in-out infinite; }
.motion-wave i:nth-child(1), .motion-wave i:nth-child(5) { height: .45rem; }
.motion-wave i:nth-child(2), .motion-wave i:nth-child(4) { height: .85rem; animation-delay: -.3s; }
.motion-wave i:nth-child(3) { height: 1.2rem; animation-delay: -.6s; }
.motion-spark { position: absolute; z-index: 3; top: .75rem; left: 34%; width: 1.15rem; height: 1.15rem; animation: spark-float 5s ease-in-out -1.4s infinite; }
.motion-spark::before, .motion-spark::after { position: absolute; inset: 50% auto auto 50%; width: 100%; height: 2px; border-radius: 999px; background: var(--cobalt); content: ""; transform: translate(-50%, -50%); }
.motion-spark::after { transform: translate(-50%, -50%) rotate(90deg); }
.motion-clapper { position: absolute; z-index: 4; right: .35rem; bottom: .8rem; display: grid; width: 3.15rem; height: 2.7rem; place-items: center; border: 1px solid color-mix(in srgb, var(--cobalt) 30%, var(--line)); border-radius: .75rem; background: rgb(255 255 255 / .92); box-shadow: 0 .45rem .95rem rgb(16 35 63 / .09); animation: clapper-float 6.5s ease-in-out -1.1s infinite; }
.motion-clapper svg { width: 2.65rem; overflow: visible; }
.motion-clapper-body { fill: var(--ground); stroke: var(--cobalt); stroke-width: 2.25; }
.motion-clapper-detail { fill: none; stroke: color-mix(in srgb, var(--cobalt) 55%, var(--ground)); stroke-width: 1.75; stroke-linecap: round; }
.motion-clapper-slate { fill: var(--cobalt); stroke: var(--cobalt); stroke-width: 2; stroke-linecap: round; transform-box: view-box; transform-origin: 11px 22px; animation: clapper-close 2.8s cubic-bezier(.65, 0, .35, 1) infinite; }
.motion-clapper-slate path { fill: none; stroke: var(--ground); stroke-width: 2; }

@keyframes mascot-blink { 0%, 45%, 49%, 100% { transform: scaleY(1); } 47% { transform: scaleY(.08); } }
@keyframes mascot-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes mascot-breathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.018); } }
@keyframes decor-float-left { 0%, 100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-5px) rotate(-2deg); } }
@keyframes decor-float-right { 0%, 100% { transform: translateY(0) rotate(6deg); } 50% { transform: translateY(4px) rotate(3deg); } }
@keyframes decor-drift { 0%, 100% { transform: translateY(0) rotate(2deg); } 50% { transform: translateY(-4px) rotate(-1deg); } }
@keyframes wave-pulse { 0%, 100% { transform: scaleY(.7); } 50% { transform: scaleY(1); } }
@keyframes spark-float { 0%, 100% { opacity: .7; transform: translateY(0) rotate(45deg) scale(.85); } 50% { opacity: 1; transform: translateY(-5px) rotate(45deg) scale(1); } }
@keyframes clapper-float { 0%, 100% { transform: translateY(0) rotate(1.5deg); } 50% { transform: translateY(-3px) rotate(-1deg); } }
@keyframes clapper-close { 0%, 68%, 82%, 100% { transform: rotate(-12deg); } 75% { transform: rotate(0); } }

.resource-card { display: flex; flex-direction: column; align-items: stretch; max-width: 34rem; padding: 1.375rem 1.25rem; border-radius: 1rem; background: var(--ink); color: var(--ground); }
.resource-card p { margin-bottom: 1.125rem; color: #b8c6d9; font-size: 1rem; }

/* The setup is an editorial field note, not an ecommerce grid: one camera
   anchors the section, then the supporting kit is grouped by the job it does. */
.gear-section > .lead { margin-bottom: 1.75rem; }
.gear-layout { display: grid; gap: 1rem; }
.gear-feature { position: relative; display: grid; min-height: 24rem; overflow: hidden; padding: 1.5rem 1.25rem 12.5rem; border: 1px solid color-mix(in srgb, var(--cobalt) 24%, var(--line)); border-radius: 1.25rem; background: var(--mist); color: var(--ink); text-decoration: none; transition: border-color 180ms ease, transform 180ms ease; }
.gear-feature-copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; }
.gear-category { margin-bottom: .75rem; color: var(--cobalt-deep); font: 500 .75rem/1.4 var(--mono); }
.gear-feature-copy > strong { max-width: 13ch; font: 750 clamp(2rem, 9vw, 3.5rem)/1 var(--display); letter-spacing: -.05em; }
.gear-variant { margin-top: .25rem; color: var(--cobalt-deep); font-weight: 700; }
.gear-description { max-width: 31rem; margin-top: 1rem; color: var(--slate); font-size: 1rem; }
.gear-affiliate { margin-top: 1rem; color: var(--slate); font: 500 .6875rem/1.5 var(--mono); }
.gear-action { display: inline-flex; align-items: center; min-height: 2.75rem; margin-top: .5rem; color: var(--cobalt-deep); font-weight: 700; }
.gear-action::after { width: .45rem; height: .45rem; margin-left: .6rem; border-top: 2px solid currentColor; border-right: 2px solid currentColor; content: ""; transform: rotate(45deg); }
.gear-feature:hover { border-color: var(--cobalt); transform: translateY(-2px); }

.gear-camera-stage { position: absolute; right: .5rem; bottom: -.5rem; display: grid; width: 13.5rem; height: 13.5rem; place-items: center; isolation: isolate; }
.gear-camera-glow { position: absolute; z-index: -1; width: 10.5rem; height: 10.5rem; border-radius: 50%; background: color-mix(in srgb, var(--ground) 72%, transparent); box-shadow: 0 1.2rem 3rem color-mix(in srgb, var(--cobalt) 24%, transparent); }
.gear-camera-product { width: 12rem; height: 12rem; object-fit: contain; filter: drop-shadow(0 1.15rem 1rem rgb(16 35 63 / .25)); animation: gear-camera-float 5.8s ease-in-out infinite; }
@keyframes gear-camera-float { 0%, 100% { transform: translateY(0) rotate(2deg); } 50% { transform: translateY(-8px) rotate(-1deg); } }

.gear-groups { display: grid; gap: 1rem; }
.gear-group { min-width: 0; }
.gear-group > h3 { margin: 0 0 .625rem; color: var(--slate); font: 600 1rem/1.4 var(--body); letter-spacing: 0; }
.gear-list { overflow: hidden; border: 1px solid var(--line); border-radius: 1rem; background: var(--ground); }
.gear-item { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) .75rem; align-items: center; gap: .875rem; min-height: 8.25rem; padding: 1rem; border-bottom: 1px solid var(--line); text-decoration: none; }
.gear-item:last-child { border-bottom: 0; }
.gear-item::after { width: .45rem; height: .45rem; border-top: 2px solid var(--cobalt); border-right: 2px solid var(--cobalt); content: ""; transform: rotate(45deg); }
.gear-item:hover { background: color-mix(in srgb, var(--mist) 25%, var(--ground)); }
.gear-item-copy { display: flex; min-width: 0; flex-direction: column; }
.gear-item-copy > strong { margin-bottom: .25rem; font: 700 1.125rem/1.2 var(--display); letter-spacing: -.025em; }
.gear-item-copy > span:not(.gear-status) { color: var(--slate); font-size: .875rem; line-height: 1.45; }
.gear-item-copy > small { margin-top: .55rem; color: var(--slate); font: 500 .625rem/1.45 var(--mono); }
.gear-status { align-self: flex-start; margin-top: .5rem; padding: .2rem .45rem; border-radius: .375rem; background: var(--band); color: var(--slate); font-size: .6875rem; font-weight: 600; }
.gear-mark { display: grid; width: 3.5rem; height: 3.5rem; place-items: center; border: 1px solid color-mix(in srgb, var(--cobalt) 28%, var(--line)); border-radius: .875rem; background: var(--mist); color: var(--cobalt-deep); }
.gear-icon { width: 2.75rem; height: 2.75rem; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.gear-icon-microsd .gear-card-body { fill: #21395f; stroke: currentColor; }
.gear-icon-microsd .gear-card-contact { fill: #f1bf52; stroke: #d69722; stroke-width: 1.2; }
.gear-icon-microsd .gear-card-ridge { stroke: #7ea7eb; stroke-width: 1.6; }
.gear-icon-panel circle { fill: currentColor; stroke: none; }
.gear-icon-torch .gear-light-beam { fill: url(#fl10-beam); stroke: none; }
.gear-icon-drive .gear-drive-face { fill: #21395f; stroke: currentColor; }
.gear-icon-drive .gear-drive-highlight { stroke: #789fe0; stroke-width: 1.5; }
.gear-icon-drive .gear-drive-led { fill: #72dea6; stroke: none; }
.gear-icon-drive .gear-drive-cable,
.gear-icon-drive .gear-drive-plug { stroke: currentColor; }
.affiliate-disclosure { max-width: 48rem; margin: .875rem 0 0; color: var(--slate); font-size: .75rem; line-height: 1.5; }

.reveal-enabled [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 420ms ease-out var(--reveal-delay, 0ms), transform 420ms ease-out var(--reveal-delay, 0ms); }
.reveal-enabled [data-reveal].is-visible { opacity: 1; transform: none; }
/* Content wins over decoration: the fallback shows everything with no transition to wait on. */
.reveal-disabled [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }

/* Who is talking: the portrait, a first name, and direct social destinations. */
.about-card { display: grid; gap: 1.25rem; justify-items: start; }
.about-portrait img { width: 6rem; height: 6rem; border: 3px solid var(--ground); border-radius: 50%; object-fit: cover; box-shadow: 0 .5rem 1.5rem rgb(16 35 63 / .14), 0 0 0 1px var(--line); }
.about-copy { min-width: 0; }
.about-copy h2 { margin-bottom: .5rem; }
.about-copy .lead { max-width: 34rem; margin-bottom: 1.125rem; }
.social-links { display: flex; gap: .625rem; }
.social-link { width: 3.25rem; min-height: 3.25rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 50%; background: var(--ground); color: var(--ink); text-decoration: none; box-shadow: 0 .35rem 1rem rgb(16 35 63 / .05); }

footer { padding: 0; border-top: 1px solid var(--line); background: var(--ground); }
.footer-invite { display: grid; gap: 1.5rem; padding: clamp(2.75rem, 8vw, 4.5rem) var(--page-pad); background: var(--ink); color: var(--ground); }
.footer-invite h2 { max-width: 14ch; margin-bottom: .625rem; }
.footer-invite p:not(.footer-kicker) { max-width: 36rem; margin-bottom: 0; color: rgb(255 255 255 / .72); }
.footer-kicker { margin-bottom: .625rem; color: var(--lab-mint); font: 600 .75rem/1.4 var(--mono); }
.footer-invite .button { align-self: start; justify-self: start; color: var(--ink); }
.footer-bottom { display: grid; gap: 1.25rem; padding: 1.5rem var(--page-pad) calc(1.75rem + env(safe-area-inset-bottom)); }
.footer-brand { margin: 0; font: 700 1.3125rem/1 var(--display); letter-spacing: -.05em; }
.footer-links { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.footer-links a { min-height: 2.75rem; display: inline-flex; align-items: center; color: var(--slate); font-size: .875rem; }
.footer-links a:hover { color: var(--cobalt); }
.footer-socials { display: flex; flex-wrap: wrap; gap: .5rem; }
.footer-socials a { min-height: 2.75rem; display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .75rem; border: 1px solid var(--line); border-radius: .625rem; color: var(--ink); font-size: .875rem; font-weight: 600; text-decoration: none; }
.footer-socials a:hover { border-color: var(--cobalt); color: var(--cobalt); }
.footer-socials .social-icon { width: 1.125rem; height: 1.125rem; }
.social-icon { width: 1.45rem; height: 1.45rem; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.social-icon-dot, .social-icon-fill { fill: currentColor; stroke: none; }
.social-link:hover { border-color: var(--cobalt); color: var(--cobalt); transform: translateY(-2px); box-shadow: 0 .55rem 1.2rem rgb(16 35 63 / .1); }
.social-link:focus-visible { outline: 3px solid color-mix(in srgb, var(--cobalt) 38%, transparent); outline-offset: 3px; }
/* The mobile action follows the current context and returns to the Lab elsewhere. */
.action-bar { position: fixed; z-index: 9; right: 0; bottom: 0; left: 0; display: flex; align-items: center; gap: .75rem; padding: .75rem var(--page-pad) calc(.75rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: color-mix(in srgb, var(--ground) 94%, transparent); backdrop-filter: blur(14px); }
.action-bar-text { display: grid; flex: 1; min-width: 0; }
.action-bar-text strong { font: 700 .9375rem/1.3 var(--display); letter-spacing: -.02em; }
.action-bar-text span { color: var(--slate); font-size: .8125rem; }
.action-bar .button { flex: 0 0 auto; min-height: 3rem; padding-inline: 1.25rem; }

@media (min-width: 760px) {
  body { padding-bottom: 0; }
  .action-bar { display: none; }
  .site-header { padding-inline: max(var(--page-pad), calc((100vw - var(--content)) / 2)); }
  /* A full sheet is right on a phone; on a wide screen four links want a card. */
  .menu-scrim { background: rgb(16 35 63 / .28); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
  .menu-panel { inset: auto; top: calc(var(--header-h) + .5rem); right: max(var(--page-pad), calc((100vw - var(--content)) / 2)); bottom: auto; left: auto; width: 20rem; padding: .75rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--ground); box-shadow: 0 1.25rem 3rem rgb(16 35 63 / .15); }
  .menu-panel a:not(.menu-cta) { min-height: 3rem; padding: .5rem .75rem; border-bottom: 0; border-radius: .5rem; font: 600 1rem/1.3 var(--body); letter-spacing: 0; }
  .menu-panel a:not(.menu-cta):hover { background: var(--mist); color: var(--cobalt); }
  .menu-panel .menu-cta { margin-top: .5rem; border-radius: .75rem; font-size: 1rem; }
  .hero { grid-template-columns: minmax(0, 1.25fr) minmax(16rem, .85fr); align-items: center; column-gap: clamp(2rem, 6vw, 5rem); }
  .hero-portrait { width: min(100%, 26rem); justify-self: end; }
  .hero-actions { grid-auto-flow: column; justify-content: start; }
  .lab-panel { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .lab-mark { grid-column: 2; grid-row: 1; width: 4.5rem; height: 4.5rem; }
  .lab-copy { grid-column: 1; grid-row: 1; }
  .journey-list { grid-template-columns: repeat(3, 1fr); }
  .journey-list a { border-right: 1px solid var(--line); border-bottom: 0; }
  .journey-list a:last-child { border-right: 0; }
  .app-grid { grid-template-columns: repeat(4, 5.5rem); }
  .card-grid { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); align-items: stretch; }
  .card-grid .soon { grid-column: 1 / -1; min-height: 20rem; padding: 2rem min(24rem, 36%) 2rem 2rem; }
  .motion-mascot-stage { right: min(18rem, 18%); bottom: .75rem; width: min(24rem, 40%); height: 18rem; }
  .motion-mascot { bottom: .75rem; left: calc(50% - 6.75rem); width: 13.5rem; }
  .motion-frame { bottom: 1.65rem; width: 14rem; height: 11rem; }
  .motion-chip-cc { top: 4.25rem; }
  .motion-chip-fx { top: 2rem; }
  .app-detail { padding: 1.75rem; }
  .app-detail > [data-app-description] { max-width: 48rem; }
  .app-detail [data-app-stores] { width: min(100%, 31rem); }
  .gear-feature { grid-template-columns: minmax(0, 1fr) 17rem; min-height: 22rem; padding: 2rem; }
  .gear-camera-stage { top: 50%; right: 2rem; bottom: auto; width: 16rem; height: 19rem; transform: translateY(-50%); }
  .gear-camera-glow { width: 13rem; height: 13rem; }
  .gear-camera-product { width: 16rem; height: 16rem; }
  .gear-feature-copy > strong { font-size: clamp(2.75rem, 6vw, 4.25rem); }
  .gear-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .about-card { grid-template-columns: auto 1fr; align-items: start; column-gap: 2rem; }
  .about-portrait img { width: 9rem; height: 9rem; }
  .footer-invite { grid-template-columns: 1fr auto; align-items: center; }
  .footer-invite .button { align-self: center; justify-self: end; }
  .footer-bottom { grid-template-columns: auto 1fr auto; align-items: center; }
  .footer-socials { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
}

/* Mentions légales — same system as the homepage, one shared stylesheet. */
.legal-page { padding-bottom: 0; }
.legal-page .back-link { min-height: 2.75rem; display: inline-flex; align-items: center; color: var(--slate); font-size: .875rem; font-weight: 600; text-decoration: none; }
.legal-page .back-link:hover { color: var(--cobalt); }
.legal-intro { padding-bottom: 0; }
.legal-intro h1 { font-size: clamp(2.25rem, 9vw, 3.5rem); }
.legal-body { display: grid; gap: 2.25rem; }
.legal-body article { display: grid; gap: .5rem; }
.legal-body h2 { display: flex; align-items: baseline; gap: .625rem; margin-bottom: .25rem; padding-bottom: .75rem; border-bottom: 1px solid var(--line); color: var(--slate); font: 500 .75rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.legal-body h2 .num { color: var(--cobalt); }
.legal-body p, .legal-body li { margin: 0; color: var(--slate); font-size: .9375rem; line-height: 1.65; }
.legal-body strong { color: var(--ink); }
.legal-body a { color: var(--cobalt); text-underline-offset: .2em; }
.legal-body ul { display: grid; gap: .625rem; margin: 0; padding-left: 1.125rem; }
.legal-body dl { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; }
.legal-body dt { padding-top: .75rem; color: var(--slate); font: 500 .6875rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.legal-body dd { margin: .1875rem 0 0; padding-bottom: .75rem; border-bottom: 1px solid var(--line); color: var(--ink); font-size: .9375rem; }
.legal-body dd:last-child { border-bottom: 0; }
.legal-updated { color: var(--slate); font: 500 .75rem/1.5 var(--mono); }

@media (min-width: 760px) {
  .legal-body dl { grid-template-columns: 12rem 1fr; align-items: baseline; }
  .legal-body dt { padding-bottom: .75rem; border-bottom: 1px solid var(--line); }
  .legal-body dd { margin-top: 0; padding-top: .75rem; }
  .legal-body dt:last-of-type, .legal-body dd:last-child { border-bottom: 0; }
}