/* HYPNOS — minimal, professional. */
:root {
  --ink: #0c0e12;
  --ink-2: #22262d;
  --muted: #5d636d;
  --soft: #8b919a;
  --line: rgba(12, 14, 18, .1);
  --paper: #ffffff;
  --mist: #f3f4f6;
  --night: #07090d;
  --night-2: #10141b;
  --accent: #e25861;          /* HYPNOS coral, from the original wordmark */
  --accent-deep: #c9434c;
  --ok: #4cd18a;
  --hud: #e9eef5;
  --f-display: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --gutter: clamp(20px, 4vw, 56px);
  --maxw: 1320px;
  --ease: cubic-bezier(.22, .8, .2, 1);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 16px/1.6 var(--f-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body.is-loading { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 600; letter-spacing: -.035em; line-height: 1.02; margin: 0; }
p { margin: 0; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.eyebrow { font: 500 12px/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); display: flex; gap: 12px; align-items: center; }
.eyebrow b { color: var(--accent); font-weight: 500; }
.eyebrow--light { color: rgba(255,255,255,.6); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ---------------- opening veil ---------------- */
/* below the nav, so the logo assembles over the night while the hero rises out of it (main.js: opening) */
.loader { position: fixed; inset: 0; z-index: 45; background: var(--night); pointer-events: none; }

/* ---------------- nav ---------------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: 76px;
  display: flex; align-items: center; gap: 32px; padding: 0 var(--gutter);
  color: #fff; transition: color .5s var(--ease), background .5s var(--ease), backdrop-filter .5s, box-shadow .5s;
}
.nav.is-light { color: var(--ink); background: rgba(255,255,255,.78); backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px); box-shadow: 0 1px 0 var(--line); }
.nav.is-dark-solid { background: rgba(7,9,13,.6); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.nav.is-hidden { transform: translateY(-100%); }
.nav { transition: transform .6s var(--ease), color .5s, background .5s, box-shadow .5s; }
.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.brand__mark { width: 30px; height: 30px; }
.brand__word { width: 114px; height: 21px; }
.nav__links { display: flex; gap: 30px; font-size: 14px; font-weight: 500; }
.nav__links a { position: relative; opacity: .82; transition: opacity .3s; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.nav__links a:hover { opacity: 1; }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__cta { font-size: 14px; font-weight: 600; padding: 10px 18px; border-radius: 999px; border: 1px solid currentColor; transition: background .3s, color .3s, border-color .3s; }
.nav__cta:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.nav__burger { display: none; width: 40px; height: 40px; position: relative; }
.nav__burger span { position: absolute; left: 10px; right: 10px; height: 1.5px; background: currentColor; transition: transform .4s var(--ease); }
.nav__burger span:first-child { top: 16px; } .nav__burger span:last-child { top: 23px; }
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* ---------------- story ---------------- */
.story { position: relative; height: 1050vh; background: var(--night); color: #fff; }
/* the stage fills the large viewport, so the 3D scene also runs behind mobile browser toolbars (no white band
   when they slide away); captions and HUD stay inside the small viewport, always above the toolbar */
.story__sticky { --open: 1; position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; background: var(--night); transform-origin: 50% 40%; will-change: transform; }
/* opening pull-back on the scene only (the captions stay put) */
.story__canvas, .story__fallback { scale: var(--open); }
.story__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .9s var(--ease); }
/* the aerial photo carries the hero until the 3D scene has rendered its first frame (laid out by main.js) */
.story__fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 50%; transition: opacity .6s .5s; }
.story.is-live .story__canvas { opacity: 1; }
.story.is-live .story__fallback { opacity: 0; }
.story.is-fallback .story__fallback { opacity: 1; }
.story.is-fallback .story__canvas, .story.is-fallback .feed, .story.is-fallback .reticle, .story.is-fallback .target { display: none; }
.story__shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(5,7,10,.72) 0%, rgba(5,7,10,.35) 38%, rgba(5,7,10,0) 62%), linear-gradient(0deg, rgba(5,7,10,.55), rgba(5,7,10,0) 35%); }
.chapters { position: absolute; inset: 0 0 auto; height: 100%; height: 100svh; pointer-events: none; }
.chapter { position: absolute; left: var(--gutter); bottom: clamp(90px, 13vh, 150px); max-width: 520px; opacity: 0; will-change: opacity, transform; }
.chapter h2 { font-size: clamp(36px, 4.6vw, 68px); margin: 16px 0 18px; }
.chapter p:not(.eyebrow) { font-size: clamp(15px, 1.15vw, 18px); line-height: 1.55; color: rgba(255,255,255,.78); max-width: 430px; }
.chapter .eyebrow { color: rgba(255,255,255,.7); }
.chapter--hero { bottom: auto; top: 50%; transform: translateY(-50%); max-width: 860px; }
.chapter--hero h1 { font-size: clamp(44px, 7vw, 112px); line-height: .96; margin: 22px 0 28px; letter-spacing: -.045em; }
.chapter--hero h1 span { color: rgba(255,255,255,.55); }
.chapter--hero .lead { max-width: 520px; font-size: clamp(16px, 1.25vw, 19px); }
.rail { position: absolute; right: var(--gutter); top: 50%; top: 50svh; transform: translateY(-50%); display: grid; gap: 22px; font: 500 11px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; padding-left: 18px; }
.rail span { opacity: .38; transition: opacity .4s, color .4s; position: relative; }
.rail span.is-on { opacity: 1; }
.rail span::before { content: ""; position: absolute; left: -18px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; border: 1px solid currentColor; background: transparent; transition: background .4s; }
.rail span.is-on::before { background: var(--accent); border-color: var(--accent); }
.rail #rail-fill { display: none; }
.scroll-hint { position: absolute; left: 50%; bottom: 28px; bottom: calc(28px + 100% - 100svh); white-space: nowrap; transform: translateX(-50%); display: grid; justify-items: center; gap: 12px; font: 500 11px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.7); transition: opacity .5s; }
.scroll-hint i { width: 1px; height: 46px; background: linear-gradient(rgba(255,255,255,.8), rgba(255,255,255,0)); position: relative; overflow: hidden; }
.scroll-hint i::after { content: ""; position: absolute; left: 0; right: 0; height: 40%; top: -40%; background: #fff; animation: drip 2.2s var(--ease) infinite; }
@keyframes drip { to { top: 100%; } }

/* aerial reticle */
.reticle, .target { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; will-change: transform, width, height; }
.reticle .c, .feed .c { position: absolute; width: 14px; height: 14px; border: 1.5px solid #fff; }
.c.tl { left: 0; top: 0; border-right: 0; border-bottom: 0; } .c.tr { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.c.bl { left: 0; bottom: 0; border-right: 0; border-top: 0; } .c.br { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.reticle__tag { position: absolute; left: calc(100% + 14px); top: 0; white-space: nowrap; font: 500 10.5px/1.6 var(--f-mono); letter-spacing: .08em; display: grid; padding: 8px 10px; background: rgba(8,10,14,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-left: 2px solid var(--accent); }
.reticle__tag b { font-weight: 500; }
/* where the tag sits is chosen per frame (main.js) from the free space around the box */
.reticle[data-tag="below"] .reticle__tag { left: 0; top: calc(100% + 10px); }
.reticle[data-tag="above"] .reticle__tag { left: 0; top: auto; bottom: calc(100% + 10px); }
.reticle[data-tag="inside"] .reticle__tag { left: 10px; top: 10px; }
.target.flip span { top: 20px; }
.reticle__tag span { color: rgba(255,255,255,.6); }
.target i { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--accent); box-shadow: 0 0 0 6px rgba(226,88,97,.18); }
.target i::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 1px solid rgba(226,88,97,.6); animation: ping 1.8s var(--ease) infinite; }
@keyframes ping { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.target span { position: absolute; left: 18px; top: -7px; font: 500 10.5px var(--f-mono); letter-spacing: .08em; white-space: nowrap; background: rgba(8,10,14,.55); padding: 3px 8px; }

/* camera feed HUD */
.feed { position: absolute; inset: 0 0 auto; height: 100%; height: 100svh; pointer-events: none; opacity: 0; font-family: var(--f-mono); color: var(--hud); }
.feed__frame { position: absolute; inset: 92px var(--gutter) 56px; }
.feed__frame .c { width: 26px; height: 26px; border-color: rgba(233,238,245,.75); border-width: 1.5px; }
.feed__top, .feed__bottom { position: absolute; left: var(--gutter); right: var(--gutter); display: flex; justify-content: space-between; gap: 20px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.feed__top { top: 104px; padding: 0 18px; }
.feed__bottom { bottom: 24px; color: rgba(233,238,245,.55); font-size: 10.5px; }
.feed__rec { display: flex; gap: 8px; align-items: center; color: #fff; }
.feed__rec i { width: 8px; height: 8px; border-radius: 50%; background: #ff3b3b; box-shadow: 0 0 10px #ff3b3b; animation: blink 1.2s steps(2) infinite; }
@keyframes blink { 50% { opacity: .2; } }
.box { position: absolute; left: 0; top: 0; opacity: 0; border: 1px solid rgba(233,238,245,.7); will-change: transform; }
.box span { position: absolute; left: -1px; bottom: calc(100% + 6px); white-space: nowrap; font-size: 10.5px; letter-spacing: .08em; padding: 3px 7px; background: rgba(233,238,245,.92); color: #0b0d10; }
.box--plate { border: 2px solid var(--accent); box-shadow: 0 0 0 4px rgba(226,88,97,.2), 0 0 24px rgba(226,88,97,.35); overflow: hidden; }
.box--plate .scan { position: absolute; left: 0; right: 0; height: 2px; top: 0; background: linear-gradient(90deg, transparent, #fff, transparent); opacity: .9; }
.read { position: absolute; left: calc(var(--gutter) + 18px); top: 140px; width: 290px; padding: 14px; background: rgba(8,10,14,.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(233,238,245,.14); opacity: 0; will-change: transform; }
.read__crop { background: #000; padding: 4px; border: 1px solid rgba(233,238,245,.15); }
.read__crop canvas { width: 100%; height: auto; display: block; }
.read__ocr { font: 500 34px/1 var(--f-mono); letter-spacing: .08em; margin: 14px 0 10px; color: #fff; white-space: nowrap; }
.read__meta { display: flex; gap: 12px; font-size: 10px; letter-spacing: .08em; color: rgba(233,238,245,.6); }
.read__meta span:nth-child(2) { color: var(--ok); }
.checks { opacity: 0; position: absolute; right: var(--gutter); top: 50%; transform: translateY(-46%); width: min(360px, 34vw); margin: 0; padding: 18px 20px; list-style: none; background: rgba(8,10,14,.62); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(233,238,245,.12); }
.checks li { display: grid; grid-template-columns: 1fr auto 18px; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(233,238,245,.08); font-size: 11.5px; opacity: 0; transform: translateX(14px); }
.checks li:last-child { border-bottom: 0; }
.checks li span { color: rgba(233,238,245,.55); text-transform: uppercase; letter-spacing: .06em; font-size: 10.5px; }
.checks li b { font-weight: 500; text-align: right; color: #fff; }
.checks li b small { display: block; color: rgba(233,238,245,.5); font-size: 9.5px; }
.checks li em { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: rgba(76,209,138,.16); }
.checks li em::after { content: ""; width: 7px; height: 4px; border-left: 1.5px solid var(--ok); border-bottom: 1.5px solid var(--ok); transform: rotate(-45deg) translate(1px, -1px); }
.logged { position: absolute; right: var(--gutter); bottom: 64px; display: flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 10px 14px; background: var(--accent); color: #fff; opacity: 0; }
.logged i { width: 6px; height: 6px; background: #fff; border-radius: 50%; }

/* ---------------- manifesto ---------------- */
.manifesto { padding: clamp(110px, 16vw, 220px) 0 clamp(90px, 12vw, 160px); }
.manifesto__text { font: 500 clamp(28px, 3.7vw, 56px)/1.12 var(--f-display); letter-spacing: -.03em; margin: 28px 0 48px; max-width: 1180px; }
.manifesto__text .w { color: #c9ccd2; transition: color .2s; }
.manifesto__text .w.on { color: var(--ink); }
.manifesto__pills { display: flex; flex-wrap: wrap; gap: 10px; }
.manifesto__pills span { padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; color: var(--ink-2); }

/* ---------------- solutions (horizontal) ---------------- */
.solutions { padding: clamp(60px, 8vw, 100px) 0 0; background: var(--paper); }
.solutions__head { display: grid; grid-template-columns: 1.2fr 1fr; align-items: end; gap: 40px; margin-bottom: 56px; }
.solutions__head h2 { font-size: clamp(38px, 5vw, 76px); margin-top: 18px; }
.solutions__intro { color: var(--muted); font-size: 17px; max-width: 440px; justify-self: end; }
.hscroll { overflow: hidden; padding-bottom: clamp(80px, 9vw, 130px); }
.hscroll__track { display: flex; gap: 22px; padding: 0 var(--gutter); width: max-content; will-change: transform; }
.card { width: clamp(300px, 34vw, 500px); flex: none; background: var(--mist); border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; }
.card__media { width: 100%; aspect-ratio: 4 / 3; max-height: max(170px, calc(100svh - 500px)); overflow: hidden; position: relative; }
.card__media img { width: 120%; max-width: none; height: 100%; object-fit: cover; transform: translateX(var(--px, -8%)) scale(1.02); transition: transform 1.2s var(--ease); }
.card:hover .card__media img { transform: translateX(var(--px, -8%)) scale(1.07); }
.card__body { padding: 28px 30px 34px; display: grid; gap: 14px; }
.card__n { font: 500 12px var(--f-mono); color: var(--accent); letter-spacing: .1em; }
.card h3 { font-size: clamp(24px, 2.1vw, 32px); }
.card p { color: var(--muted); font-size: 15.5px; }
.card ul { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.card li { font-size: 12.5px; padding: 6px 11px; border-radius: 999px; background: #fff; color: var(--ink-2); }
.card--end { background: var(--ink); color: #fff; justify-content: center; align-items: flex-start; padding: 44px; gap: 28px; }
.card--end p { font: 600 clamp(28px, 2.6vw, 40px)/1.05 var(--f-display); letter-spacing: -.03em; color: #fff; }

/* ---------------- buttons ---------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 52px; padding: 0 26px; border-radius: 999px; font-weight: 600; font-size: 15px; transition: transform .4s var(--ease), background .3s, color .3s; position: relative; overflow: hidden; }
.btn--dark { background: var(--ink); color: #fff; }
.card--end .btn--dark { background: #fff; color: var(--ink); }
.btn--dark:hover { background: var(--accent); color: #fff; }
.btn--ghost { border: 1px solid var(--line); }
.btn--wide { width: 100%; justify-content: space-between; }
.btn i { font-style: normal; transition: transform .4s var(--ease); }
.btn:hover i { transform: translateX(5px); }

/* ---------------- parking ---------------- */
.parking { padding: clamp(90px, 11vw, 160px) 0 0; background: var(--mist); }
.parking__intro { max-width: var(--maxw); }
.parking__intro h2 { font-size: clamp(38px, 4.8vw, 74px); margin: 18px 0 22px; }
.parking__intro > p { color: var(--muted); font-size: 17px; max-width: 600px; }
.parking__pin { padding: clamp(40px, 6vh, 70px) 0 clamp(60px, 9vh, 110px); min-height: 100vh; min-height: 100svh; display: flex; align-items: center; }
.parking__stage { display: grid; grid-template-columns: minmax(250px, .62fr) 1.6fr; gap: clamp(28px, 4vw, 64px); align-items: center; width: 100%; }
.pk-steps { list-style: none; margin: 0; padding: 0; position: relative; }
.pk-steps::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 1px; background: var(--line); }
.pk-steps li { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 14px 0; opacity: .38; transition: opacity .5s var(--ease); }
.pk-steps li i { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font: 500 12px var(--f-mono); font-style: normal; background: var(--mist); border: 1px solid rgba(12,14,18,.18); position: relative; z-index: 1; transition: background .5s var(--ease), color .5s, border-color .5s, transform .5s var(--ease); }
.pk-steps li b { display: block; font: 600 20px/1.2 var(--f-display); letter-spacing: -.01em; margin: 3px 0 4px; }
.pk-steps li span { color: var(--muted); font-size: 14.5px; display: block; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .6s var(--ease), opacity .6s var(--ease); }
.pk-steps li.done { opacity: .7; }
.pk-steps li.done i { background: var(--ink); color: #fff; border-color: var(--ink); }
.pk-steps li.on { opacity: 1; }
.pk-steps li.on i { background: var(--accent); color: #fff; border-color: var(--accent); transform: scale(1.08); box-shadow: 0 0 0 8px rgba(226,88,97,.14); }
.pk-steps li.on span { max-height: 60px; opacity: 1; }
.pk-view { position: relative; border-radius: 26px; overflow: hidden; background: #2b2d31; box-shadow: 0 40px 90px -30px rgba(12,14,18,.45), 0 0 0 1px rgba(12,14,18,.06); }
.pk-view canvas { display: block; width: 100%; aspect-ratio: 3 / 2; }
.pk-phase { z-index: 2; position: absolute; left: 18px; top: 18px; padding: 9px 14px; border-radius: 999px; background: rgba(12,14,18,.72); backdrop-filter: blur(10px); color: #fff; font: 500 12px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
.pk-phase b { color: var(--accent); font-weight: 500; margin-right: 6px; }
.pk-front { position: absolute; inset: 0; transform-origin: 50% 100%; will-change: transform, opacity; }
.pk-front img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pk-front::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,.35)); }
.pk-front__cap { position: absolute; left: 18px; bottom: 18px; z-index: 1; padding: 10px 16px; border-radius: 12px; background: rgba(255,255,255,.92); font: 600 15px var(--f-display); color: var(--ink); }
.pk-install { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); padding: 10px 14px; border-radius: 12px; background: rgba(255,255,255,.94); font: 500 11.5px var(--f-mono); color: var(--ink); opacity: 0; transition: opacity .4s; display: grid; gap: 7px; min-width: 210px; }
.pk-install b { display: block; height: 4px; border-radius: 4px; background: rgba(12,14,18,.1); overflow: hidden; }
.pk-install b i { display: block; height: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); }
.pk-hud { position: absolute; left: 18px; right: 18px; bottom: 18px; display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 10px; opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.pk-hud.on { opacity: 1; transform: none; }
.pk-chip { padding: 10px 14px; border-radius: 14px; background: rgba(255,255,255,.94); backdrop-filter: blur(10px); min-width: 120px; box-shadow: 0 10px 30px -10px rgba(0,0,0,.4); }
.pk-chip span { display: block; font: 500 10.5px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
.pk-chip b { display: block; font: 600 22px/1.2 var(--f-display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.pk-bar { display: block; height: 3px; margin-top: 6px; border-radius: 3px; background: rgba(12,14,18,.1); overflow: hidden; }
.pk-bar i { display: block; height: 100%; background: #2f6fe0; transform-origin: 0 50%; transform: scaleX(0); transition: transform .8s var(--ease); }
.pk-toasts { z-index: 2; position: absolute; right: 18px; bottom: 18px; display: grid; gap: 8px; width: min(320px, 46%); }
.pk-toast { display: grid; grid-template-columns: 22px 1fr; column-gap: 10px; align-items: center; padding: 10px 14px; border-radius: 14px; background: rgba(12,14,18,.82); backdrop-filter: blur(12px); color: #fff; box-shadow: 0 12px 30px -10px rgba(0,0,0,.5); }
.pk-toast i { grid-row: span 2; width: 22px; height: 22px; border-radius: 50%; background: var(--ok); position: relative; }
.pk-toast i::after { content: ""; position: absolute; left: 7px; top: 5px; width: 6px; height: 10px; border: solid #0c2a18; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.pk-toast b { font: 600 13px var(--f-display); }
.pk-toast span { font: 400 12px var(--f-mono); color: rgba(255,255,255,.7); }
.pk-cap { display: none; }
.pk-cap p { display: flex; align-items: baseline; gap: 10px; margin: 0; }
.pk-cap small { font: 500 11px var(--f-mono); letter-spacing: .06em; color: var(--accent); }
.pk-cap b { font: 600 18px/1.25 var(--f-display); letter-spacing: -.01em; }
.pk-cap span { display: block; margin-top: 3px; font-size: 14px; line-height: 1.4; color: var(--muted); }
.hdots { display: none; justify-content: center; gap: 6px; margin-top: 18px; }
.hdots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(12,14,18,.18); transition: width .4s var(--ease), background .4s; }
.hdots i.on { width: 22px; background: var(--ink); }
.pk-note { z-index: 2; position: absolute; right: 22px; top: 22px; margin: 0; font: 500 10px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.parking[data-phase="0"] .pk-note, .parking[data-phase="1"] .pk-note { opacity: 0; }

.pipeline { position: relative; background: var(--night); color: #fff; overflow: hidden; }
.pipeline__bg { position: absolute; inset: 0; opacity: .22; }
.pipeline__bg img { width: 100%; height: 120%; object-fit: cover; }
.pipeline__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 75% 50%, rgba(7,9,13,.35), var(--night) 75%), linear-gradient(180deg, var(--night) 0%, rgba(7,9,13,.2) 40%, var(--night) 100%); }
.pipeline__pin { position: relative; min-height: 100vh; display: flex; align-items: center; padding: clamp(90px, 12vh, 140px) 0; }
.pipeline__grid { display: grid; grid-template-columns: minmax(300px, .85fr) 1.25fr; gap: clamp(36px, 5vw, 90px); align-items: center; width: 100%; }
.pipeline__head h2 { font-size: clamp(34px, 3.8vw, 58px); margin: 16px 0 18px; }
.pipeline__head p { color: rgba(255,255,255,.62); font-size: 16px; max-width: 520px; }
.pv-steps { list-style: none; margin: 34px 0 0; padding: 0; position: relative; }
.pv-steps li { --seg: 0; --sp: 0; position: relative; display: grid; grid-template-columns: 40px 1fr; column-gap: 18px; padding: 8px 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* connector: from the bottom of this dot to the top of the next one, so it never crosses a number or runs past the last step */
.pv-steps li:not(:last-child)::before, .pv-steps li:not(:last-child)::after { content: ""; position: absolute; left: 19px; top: 52px; bottom: -4px; width: 2px; border-radius: 2px; background: rgba(255,255,255,.1); }
.pv-steps li:not(:last-child)::after { background: linear-gradient(180deg, var(--accent), #ff9aa0); transform-origin: 50% 0; transform: scaleY(var(--seg)); box-shadow: 0 0 10px rgba(226,88,97,.55); }
.pv-steps li i { grid-row: span 2; position: relative; z-index: 1; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 500 11.5px var(--f-mono); font-style: normal; color: rgba(255,255,255,.5); background: #0d1016; border: 1px solid rgba(255,255,255,.16); transition: background .45s var(--ease), border-color .45s, color .45s, transform .5s var(--ease), box-shadow .5s; }
/* progress ring around the active dot (--sp = progress inside the step) */
.pv-steps li i::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; background: conic-gradient(var(--accent) calc(var(--sp) * 1turn), rgba(255,255,255,.08) 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); opacity: 0; transition: opacity .4s; }
.pv-steps li i::after { content: ""; position: absolute; left: 15px; top: 11px; width: 7px; height: 13px; border: solid var(--accent); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(.4); opacity: 0; transition: opacity .35s, transform .45s var(--ease); }
.pv-steps li b { font: 600 18px/1.3 var(--f-display); margin-top: 8px; color: rgba(255,255,255,.42); transition: color .45s var(--ease), transform .5s var(--ease); }
.pv-steps li span { color: rgba(255,255,255,.6); font-size: 14px; line-height: 1.45; max-height: 0; opacity: 0; overflow: hidden; transform: translateY(-4px); transition: max-height .6s var(--ease), opacity .5s var(--ease), transform .6s var(--ease); }
.pv-steps li:hover b { color: rgba(255,255,255,.8); }
.pv-steps li.done i { color: transparent; background: #1c1216; border-color: rgba(226,88,97,.55); }
.pv-steps li.done i::after { opacity: 1; transform: rotate(45deg) scale(1); }
.pv-steps li.done b { color: rgba(255,255,255,.66); }
.pv-steps li.on i { color: #fff; background: var(--accent); border-color: var(--accent); transform: scale(1.06); box-shadow: 0 0 0 5px rgba(226,88,97,.14), 0 10px 30px -6px rgba(226,88,97,.6); }
.pv-steps li.on i::before { opacity: 1; }
.pv-steps li.on b { color: #fff; transform: translateX(2px); }
.pv-steps li.on span { max-height: 64px; opacity: 1; transform: none; padding-top: 3px; }
.pv-cap { display: none; }
@keyframes pvCap { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.pv-steps li:focus-visible { outline: none; } .pv-steps li:focus-visible i { box-shadow: 0 0 0 3px rgba(255,255,255,.5); }

.pv-panel { position: relative; border-radius: 22px; background: linear-gradient(180deg, rgba(22,26,34,.92), rgba(12,15,20,.94)); border: 1px solid rgba(255,255,255,.09); box-shadow: 0 60px 120px -40px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter: blur(16px); overflow: hidden; }
.pv-bar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 13px 18px; border-bottom: 1px solid rgba(255,255,255,.07); font: 500 11.5px var(--f-mono); letter-spacing: .04em; color: rgba(255,255,255,.62); }
.pv-bar b { color: #fff; font-weight: 500; }
.pv-bar__id { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-dots { display: flex; gap: 6px; } .pv-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.16); }
.pv-status { padding: 4px 10px; border-radius: 999px; background: rgba(226,88,97,.16); color: #ff9aa0; transition: background .4s, color .4s; }
.pv-status.ok { background: rgba(76,209,138,.16); color: var(--ok); }
.pv-body { position: relative; aspect-ratio: 16 / 10.5; }
.pv-scene { position: absolute; inset: 0; padding: clamp(16px, 2.2vw, 28px); opacity: 0; visibility: hidden; }
.pv-note { position: absolute; right: 18px; bottom: 12px; margin: 0; font: 500 10px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.35); }

/* 1 · detection */
.pv-scene[data-s="1"] { display: grid; grid-template-columns: 1.55fr 1fr; gap: 18px; }
.pv-shot { position: relative; border-radius: 14px; overflow: hidden; background: #000; container-type: size; }
/* the frame keeps the photo's 3:2 ratio and covers the card, so boxes stay locked to the car at any size */
.pv-frame { position: absolute; left: 50%; top: 50%; width: max(100cqw, 150cqh); height: max(100cqh, 66.667cqw); translate: -50% -50%; transform-origin: var(--pl-x) var(--pl-y); }
.pv-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) contrast(1.06); }
.pv-box { position: absolute; border: 2px solid var(--accent); border-radius: 4px; translate: -50% -50%; opacity: 0; }
.pv-box::before, .pv-box::after { content: ""; position: absolute; width: 10px; height: 10px; border: 2px solid #fff; }
.pv-box::before { left: -6px; top: -6px; border-right: 0; border-bottom: 0; } .pv-box::after { right: -6px; bottom: -6px; border-left: 0; border-top: 0; }
.pv-box--car { left: var(--car-x); top: var(--car-y); width: var(--car-w); height: var(--car-h); border-color: rgba(255,255,255,.75); border-width: 1.5px; box-shadow: 0 0 0 9999px rgba(4,6,10,.28); }
.pv-box--car::before, .pv-box--car::after { border-color: var(--accent); }
.pv-box--car em { position: absolute; left: 6px; top: 6px; padding: 3px 7px; border-radius: 4px; background: rgba(255,255,255,.9); color: #111; font: 600 9.5px var(--f-mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.pv-box--plate { left: var(--pl-x); top: var(--pl-y); width: var(--pl-w); height: var(--pl-h); border-radius: 3px; box-shadow: 0 0 16px rgba(226,88,97,.75); }
.pv-box--plate::before, .pv-box--plate::after { width: 6px; height: 6px; }
.pv-box--plate::before { left: -5px; top: -5px; } .pv-box--plate::after { right: -5px; bottom: -5px; }
.pv-lens { position: relative; border-radius: 10px; overflow: hidden; background: rgba(8,10,14,.82); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(10px); box-shadow: 0 18px 40px -12px rgba(0,0,0,.8); opacity: 0; transform-origin: 50% 0; }
.pv-lens__crop { position: relative; aspect-ratio: 3 / 1; overflow: hidden; background: #000; }
/* plate (49.93% / 65.58%, 10.8% wide in the 3:2 photo) centred in a 3:1 crop at ~84% width */
.pv-lens__crop img { position: absolute; max-width: none; width: 777%; height: auto; left: -337.96%; top: -969.1%; filter: contrast(1.1) saturate(.9); }
.pv-lens__crop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0 46%, rgba(226,88,97,.55) 50%, transparent 54%) 0 var(--scan, -100%) / 100% 200% no-repeat; }
.pv-lens p { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0; padding: 8px 11px; font: 500 9.5px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.pv-ocr { min-width: 9ch; text-align: right; font: 600 14px var(--f-mono); letter-spacing: .06em; color: #fff; white-space: pre; }
.pv-tag, .pv-time { position: absolute; left: 12px; padding: 5px 9px; border-radius: 6px; background: rgba(0,0,0,.6); font: 500 10.5px var(--f-mono); letter-spacing: .05em; }
.pv-tag { top: 12px; } .pv-time { bottom: 12px; color: #ff9aa0; }
.pv-time { left: 12px; }
.pv-meter { display: grid; align-content: center; gap: 16px; min-width: 0; }
.pv-verdict { color: #ff9aa0; font-weight: 600; }
.pv-gauge { position: relative; text-align: center; }
.pv-gauge svg { width: 100%; max-width: 230px; }
.g-bg, .g-val { fill: none; stroke-width: 8; stroke-linecap: round; }
.g-bg { stroke: rgba(255,255,255,.1); } .g-val { stroke: var(--accent); stroke-dasharray: 157; stroke-dashoffset: 157; }
.pv-gauge b { position: absolute; left: 0; right: 0; top: 36%; font: 600 clamp(34px, 3.4vw, 52px)/1 var(--f-display); font-variant-numeric: tabular-nums; }
.pv-gauge span { display: block; margin-top: -4px; font: 500 10.5px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.pv-facts p { display: flex; justify-content: space-between; margin: 0; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.07); font-size: 13.5px; }
.pv-facts span { color: rgba(255,255,255,.5); }
.pv-plate { font: 600 13px var(--f-mono); padding: 2px 8px; border-radius: 4px; background: #f4f5f2; color: #111; border-left: 6px solid #1b3f9a; }

/* 3 · ticket */
.pv-scene[data-s="2"] { display: grid; place-items: center; }
.pv-doc { width: min(440px, 88%); background: #f7f6f2; color: #16181c; border-radius: 6px; padding: 22px 26px; box-shadow: 0 40px 80px -20px rgba(0,0,0,.7); transform-origin: 50% 100%; }
.pv-doc header { display: grid; gap: 2px; padding-bottom: 12px; border-bottom: 2px solid #16181c; }
.pv-doc header b { font: 700 15px var(--f-display); } .pv-doc header span { font: 500 11px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: #6b6f76; }
.pv-doc dl { margin: 10px 0 14px; }
.pv-doc dl div { display: grid; grid-template-columns: 1fr 1.3fr; padding: 7px 0; border-bottom: 1px dashed rgba(0,0,0,.15); font-size: 13px; }
.pv-doc dt { color: #6b6f76; } .pv-doc dd { margin: 0; font: 600 13px var(--f-mono); min-height: 1.2em; }
.pv-doc footer { display: grid; grid-template-columns: 54px 1fr; gap: 14px; align-items: center; font-size: 12px; color: #444; }
.pv-qr { width: 54px; height: 54px; } .pv-qr rect { fill: #16181c; }
.pv-doc footer small { color: #888; font-family: var(--f-mono); font-size: 10.5px; }

/* 1 · equipment */
.pv-scene[data-s="0"] { display: grid; grid-template-rows: 1fr auto; gap: 18px; }
.pv-gear { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; min-height: 0; }
.pv-gear figure { margin: 0; position: relative; border-radius: 14px; overflow: hidden; background: #000; box-shadow: 0 24px 50px -20px rgba(0,0,0,.8); }
.pv-gear img { width: 100%; height: 100%; object-fit: cover; }
.pv-gear figcaption { position: absolute; left: 10px; bottom: 10px; padding: 6px 10px; border-radius: 8px; background: rgba(0,0,0,.62); backdrop-filter: blur(8px); font: 600 14px var(--f-display); }
.pv-modes { display: flex; gap: 10px; flex-wrap: wrap; }
.pv-modes span { padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); font: 500 12px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; }
.pv-modes span:first-child { background: var(--accent); border-color: var(--accent); }

/* 4 · software */
.pv-soft { height: 100%; display: grid; grid-template-columns: 1.25fr 1fr; gap: 16px; }
.pv-rows { border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); padding: 6px 14px; overflow: hidden; }
.pv-row { display: grid; grid-template-columns: 1fr 1.2fr .8fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.06); font: 500 12px var(--f-mono); color: rgba(255,255,255,.85); }
.pv-row--head { color: rgba(255,255,255,.4); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
.pv-row em { font-style: normal; color: var(--ok); }
.pv-bars { display: flex; align-items: flex-end; gap: 8px; padding: 14px 14px 26px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); position: relative; }
.pv-bars i { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--accent), rgba(226,88,97,.35)); transform-origin: 50% 100%; position: relative; }
.pv-bars i::after { content: attr(data-m); position: absolute; left: 50%; bottom: -20px; transform: translateX(-50%); font: 500 9.5px var(--f-mono); color: rgba(255,255,255,.4); font-style: normal; }

/* 5 · support */
.pv-support { list-style: none; margin: 0; padding: 0; height: 100%; display: grid; align-content: center; gap: 10px; }
.pv-support li { display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 14px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07); }
.pv-support li i { width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); position: relative; transition: background .3s, border-color .3s; }
.pv-support li.ok i { background: var(--ok); border-color: var(--ok); }
.pv-support li.ok i::after { content: ""; position: absolute; left: 9px; top: 5px; width: 6px; height: 11px; border: solid #0c2a18; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.pv-support b { font: 600 16px var(--f-display); }

/* ---------------- software ---------------- */
.software { padding: clamp(100px, 12vw, 170px) 0; }
.software__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
.software__copy h2 { font-size: clamp(38px, 4.6vw, 70px); margin: 18px 0 24px; }
.software__copy > p { color: var(--muted); font-size: 17px; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--line); }
.kpis b { display: block; font: 600 clamp(28px, 2.6vw, 40px)/1 var(--f-display); letter-spacing: -.03em; margin-bottom: 10px; }
.kpis span { font-size: 13.5px; color: var(--muted); line-height: 1.45; display: block; }
.dash { background: #0d1016; color: #e8ecf2; border-radius: 20px; overflow: hidden; box-shadow: 0 40px 100px -30px rgba(12,14,18,.45), 0 0 0 1px rgba(12,14,18,.06); font-family: var(--f-mono); }
.dash__bar { display: flex; align-items: center; gap: 16px; padding: 14px 18px; font-size: 11px; letter-spacing: .06em; color: rgba(232,236,242,.6); border-bottom: 1px solid rgba(255,255,255,.07); }
.dash__dots { display: flex; gap: 6px; } .dash__dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.15); }
.dash__live { margin-left: auto; display: flex; gap: 7px; align-items: center; color: var(--ok); }
.dash__live i { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: blink 1.4s steps(2) infinite; }
.dash__body { display: grid; grid-template-columns: 1fr 1fr; min-height: 360px; }
.dash__map { position: relative; overflow: hidden; border-right: 1px solid rgba(255,255,255,.07); }
.dash__map img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.85) brightness(.55) contrast(1.15); transform: scale(1.4); }
.dash__pin { position: absolute; left: var(--x); top: var(--y); display: flex; align-items: center; gap: 6px; font-size: 9.5px; letter-spacing: .08em; background: rgba(13,16,22,.8); padding: 3px 7px 3px 4px; border-radius: 4px; transform: translate(-6px, -50%); }
.dash__pin i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(226,88,97,.25); }
.dash__side { display: grid; grid-template-rows: auto 1fr; }
.dash__stat { padding: 18px; border-bottom: 1px solid rgba(255,255,255,.07); display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 4px 12px; }
.dash__stat span { font-size: 10px; letter-spacing: .08em; color: rgba(232,236,242,.5); text-transform: uppercase; grid-column: 1; }
.dash__stat b { font: 600 28px/1 var(--f-display); letter-spacing: -.02em; grid-column: 1; }
.spark { grid-column: 2; grid-row: 1 / 3; width: 110px; height: 32px; }
.spark polyline { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.dash__list { padding: 6px 0; overflow: hidden; }
.dash__head, .dash__list li { display: grid; grid-template-columns: 54px 1fr 58px 64px; gap: 8px; padding: 8px 18px; font-size: 10.5px; }
.dash__head { color: rgba(232,236,242,.4); letter-spacing: .08em; text-transform: uppercase; font-size: 9.5px; }
.dash__list ul { list-style: none; margin: 0; padding: 0; height: 248px; overflow: hidden; }
.dash__list li { border-top: 1px solid rgba(255,255,255,.05); animation: rowin .7s var(--ease); }
.dash__list li .st { color: var(--ok); } .dash__list li .st.warn { color: #ffb648; }
@keyframes rowin { from { opacity: 0; transform: translateY(-10px); background: rgba(226,88,97,.15); } to { opacity: 1; transform: none; background: transparent; } }
.dash__note { font-size: 10px; letter-spacing: .08em; color: rgba(232,236,242,.35); padding: 10px 18px; border-top: 1px solid rgba(255,255,255,.07); text-transform: uppercase; }

/* ---------------- method ---------------- */
.method { padding: clamp(90px, 11vw, 160px) 0; background: var(--mist); }
.method__head h2 { font-size: clamp(38px, 4.6vw, 70px); margin-top: 18px; }
.method__track { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px; margin-top: 80px; }
.method__line { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line); }
.method__line i { position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(0); }
.method__step { padding-top: 34px; }
.method__step span { font: 500 12px var(--f-mono); color: var(--accent); }
.method__step h3 { font-size: clamp(20px, 1.7vw, 25px); margin: 18px 0 10px; letter-spacing: -.02em; }
.method__step p { color: var(--muted); font-size: 15px; }

/* ---------------- company ---------------- */
.company { background: var(--night); color: #fff; padding: clamp(110px, 13vw, 180px) 0 0; overflow: hidden; }
.company__grid { display: grid; grid-template-columns: 1.4fr .8fr; gap: clamp(40px, 7vw, 110px); align-items: end; }
.company__main h2 { font-size: clamp(36px, 4.4vw, 66px); margin: 18px 0 28px; }
.company__main > p { color: rgba(255,255,255,.66); font-size: 17px; max-width: 640px; }
.audience { list-style: none; padding: 0; margin: 36px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.audience li { border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 8px 15px; font-size: 14px; color: rgba(255,255,255,.85); }
.tributi { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 22px; padding: 34px; }
.tributi__tag { font: 500 11px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.tributi h3 { font-size: 30px; margin: 14px 0 14px; }
.tributi p { color: rgba(255,255,255,.66); }
.link-arrow { display: inline-flex; gap: 10px; margin-top: 26px; font-weight: 600; font-size: 15px; border-bottom: 1px solid rgba(255,255,255,.3); padding-bottom: 4px; }
.link-arrow span { transition: transform .4s var(--ease); } .link-arrow:hover span { transform: translateX(5px); }
.marquee { margin-top: clamp(90px, 10vw, 140px); border-top: 1px solid rgba(255,255,255,.08); padding: 34px 0; overflow: hidden; white-space: nowrap; }
.marquee__inner { display: inline-flex; gap: 64px; animation: marquee 38s linear infinite; font: 600 clamp(34px, 4.4vw, 64px)/1 var(--f-display); letter-spacing: -.03em; color: rgba(255,255,255,.14); }
.marquee__inner span::after { content: "●"; font-size: .3em; vertical-align: middle; margin-left: 64px; color: var(--accent); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------------- contact ---------------- */
.contact { padding: clamp(100px, 12vw, 170px) 0; }
.contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 120px); }
.contact__title { font-size: clamp(64px, 10vw, 160px); letter-spacing: -.06em; margin: 14px 0 28px; }
.contact__copy > p { color: var(--muted); font-size: 17px; max-width: 440px; }
.contact__list { margin: 44px 0 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.contact__list div { display: grid; grid-template-columns: 120px 1fr; padding: 16px 0; border-bottom: 1px solid var(--line); }
.contact__list dt { font: 500 11px/2 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--soft); }
.contact__list dd { margin: 0; font-size: 16px; }
.contact__list a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .4s var(--ease); }
.contact__list a:hover { background-size: 100% 1px; }
.form { display: grid; gap: 18px; align-content: start; background: var(--mist); padding: clamp(26px, 3vw, 44px); border-radius: 24px; }
.field { position: relative; }
.field input, .field textarea { width: 100%; font: 400 16px var(--f-body); color: var(--ink); background: #fff; border: 1px solid transparent; border-radius: 12px; padding: 26px 16px 10px; outline: none; transition: border-color .3s, box-shadow .3s; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(12,14,18,.06); }
.field label { position: absolute; left: 17px; top: 18px; font-size: 15px; color: var(--soft); pointer-events: none; transform-origin: left top; transition: transform .3s var(--ease), color .3s; }
.field input:focus + label, .field input:not(:placeholder-shown) + label, .field textarea:focus + label, .field textarea:not(:placeholder-shown) + label { transform: translateY(-10px) scale(.78); color: var(--muted); }
.field.invalid input, .field.invalid textarea { border-color: var(--accent); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.chips { border: 0; padding: 0; margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips legend { font: 500 11px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--soft); margin-bottom: 12px; padding: 0; }
.chips label { position: relative; }
.chips input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chips span { display: inline-block; padding: 8px 14px; border-radius: 999px; background: #fff; font-size: 14px; border: 1px solid transparent; transition: background .3s, color .3s; }
.chips input:checked + span { background: var(--ink); color: #fff; }
.chips input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.privacy { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--muted); }
.privacy input { margin-top: 3px; accent-color: var(--ink); }
.privacy a { text-decoration: underline; text-underline-offset: 3px; }
.privacy.invalid { color: var(--accent); }
.form__note { font-size: 13px; color: var(--soft); }


/* ---------------- certifications (dedicated section) ---------------- */
.certsec { background: var(--mist); padding: clamp(100px, 12vw, 170px) 0 clamp(80px, 9vw, 130px); }
.certsec__head { display: grid; grid-template-columns: 1.5fr 1fr; column-gap: clamp(40px, 6vw, 100px); align-items: end; }
.certsec__head .eyebrow { grid-column: 1 / -1; }
.certsec__head h2 { font-size: clamp(36px, 4.2vw, 62px); margin-top: 18px; }
.certsec__intro { color: var(--muted); font-size: 17px; max-width: 520px; }
.hint-touch { display: none; }
@media (hover: none) { .hint-fine { display: none; } .hint-touch { display: inline; } }
.certsec__grid { margin-top: clamp(48px, 6vw, 80px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }

.cert { --mx: 50%; --my: 30%; position: relative; display: grid; border-radius: 26px; background: #fff; box-shadow: 0 1px 0 rgba(12,14,18,.04), 0 18px 50px -30px rgba(12,14,18,.25); overflow: hidden; isolation: isolate; transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.cert > * { grid-area: 1 / 1; }
.cert::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(420px circle at var(--mx) var(--my), rgba(242,106,33,.10), transparent 60%); opacity: 0; transition: opacity .5s; }
.cert:hover::before { opacity: 1; }
.cert__face { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(26px, 2.6vw, 38px); }
.cert__code { margin-top: 26px; font: 500 12px/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: #d9501a; }
.cert h3 { font-size: clamp(24px, 2.1vw, 30px); margin: 10px 0 12px; }
.cert__lead { color: var(--muted); font-size: 15.5px; line-height: 1.55; }
.cert__more, .cert__close { margin-top: auto; padding-top: 26px; display: inline-flex; align-items: center; gap: 12px; font-weight: 600; font-size: 14.5px; }
.cert__more i, .cert__close i { position: relative; width: 30px; height: 30px; border-radius: 50%; border: 1px solid currentColor; opacity: .9; transition: transform .5s var(--ease), background .3s; }
.cert__more i::before, .cert__more i::after, .cert__close i::before, .cert__close i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; margin: -.75px 0 0 -5.5px; background: currentColor; border-radius: 1px; }
.cert__more i::after, .cert__close i::after { transform: rotate(90deg); }
.cert__close i { transform: rotate(45deg); }
.cert__more:hover i { background: rgba(12,14,18,.06); transform: rotate(90deg); }

/* badge */
.cbadge { width: clamp(132px, 11vw, 158px); height: auto; overflow: visible; filter: drop-shadow(0 14px 22px rgba(12,14,18,.16)); }
.cbadge__halo { fill: none; stroke: var(--ink); stroke-opacity: .16; stroke-width: 1; stroke-dasharray: 2 4; }
.cbadge__band { fill: none; stroke: var(--ink); stroke-width: 22; }
.cbadge__ring { transform-box: view-box; transform-origin: 100px 100px; }
.cbadge__ring text { fill: #fff; font: 600 9.6px var(--f-mono); letter-spacing: 0; }
.cbadge__disc { fill: #fff; }
.cbadge__gold { fill: none; stroke: url(#hy-ring); stroke-width: 2.6; }
.cbadge__icon { fill: none; stroke: #e2611f; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cbadge text { text-anchor: middle; }
.cbadge__pre { font: 600 10.5px var(--f-mono); letter-spacing: .14em; fill: var(--muted); }
.cbadge__code { font: 700 37px var(--f-display); letter-spacing: -.04em; fill: var(--ink); }
.cbadge__ed { font: 600 11.5px var(--f-mono); letter-spacing: .06em; fill: #d9501a; }
@keyframes cbSpin { to { transform: rotate(360deg); } }
@keyframes certOpen { from { clip-path: circle(0% at 22% 18%); } to { clip-path: circle(150% at 22% 18%); } }
.cert:hover .cbadge__ring, .cert.is-open .cbadge__ring { animation: cbSpin 14s linear infinite; }

/* details: an ink panel that opens from the badge */
.cert__detail { position: relative; z-index: 2; display: flex; flex-direction: column; padding: clamp(26px, 2.6vw, 38px); background: var(--night); color: #fff; clip-path: circle(0% at 22% 18%); visibility: hidden; transition: clip-path .7s var(--ease), visibility 0s .7s; }
.cert__detail::before { content: ""; position: absolute; right: -90px; top: -90px; width: 240px; height: 240px; border-radius: 50%; border: 22px solid rgba(242,106,33,.12); pointer-events: none; }
.cert.is-open .cert__detail { clip-path: circle(150% at 22% 18%); visibility: visible; transition: clip-path .8s var(--ease), visibility 0s; }
@media (hover: hover) and (pointer: fine) {
  .cert:hover { transform: translateY(-6px); box-shadow: 0 1px 0 rgba(12,14,18,.04), 0 34px 70px -34px rgba(12,14,18,.4); }
  .cert:hover .cert__detail { clip-path: circle(150% at 22% 18%); visibility: visible; transition: clip-path .8s var(--ease) .08s, visibility 0s; }
}
.cert__k { font: 500 11px/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: #f68a46; }
.cert__detail ul + .cert__k { margin-top: 24px; }
.cert__detail ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 9px; }
.cert__detail li { position: relative; padding-left: 26px; font-size: 14.5px; line-height: 1.45; color: rgba(255,255,255,.86); }
.cert__detail li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 11px; height: 6px; border-left: 1.6px solid #f68a46; border-bottom: 1.6px solid #f68a46; transform: rotate(-45deg); }
.cert__why { margin-top: 10px; font-size: 14.5px; line-height: 1.5; color: rgba(255,255,255,.66); }
.cert__close { color: #fff; }

.certsec__foot { list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.certsec__foot li { border-top: 1px solid rgba(12,14,18,.14); padding-top: 18px; }
.certsec__foot b, .certsec__foot span { display: block; }
.certsec__foot b { font: 600 15.5px/1.3 var(--f-display); }
.certsec__foot span { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.certsec__ask i { display: inline-block; font-style: normal; color: var(--ink); transition: transform .4s var(--ease); }
.certsec__ask:hover i { transform: translateX(5px); }
.certsec__ask:hover b { color: #d9501a; }

/* ---------------- footer ---------------- */
.footer { background: var(--night); color: rgba(255,255,255,.7); padding: 70px 0 36px; }
.footer__top { display: flex; justify-content: space-between; align-items: center; gap: 30px; flex-wrap: wrap; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.08); }
.footer__logo { display: flex; align-items: center; gap: 16px; color: #fff; }
.footer__mark { width: 50px; height: 50px; }
.footer__lockup { display: grid; gap: 9px; }
.footer__word { width: 168px; height: 31px; }
.footer__lockup small { font: 500 9.5px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.footer__nav { display: flex; gap: 26px; flex-wrap: wrap; font-size: 14px; }
.footer__nav a:hover { color: #fff; }
.footer__bottom { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 28px; font-size: 13px; color: rgba(255,255,255,.45); }

/* ---------------- dialog ---------------- */
.mail-dialog { border: 0; border-radius: 22px; padding: 36px; width: min(520px, calc(100vw - 32px)); color: var(--ink); box-shadow: 0 40px 120px rgba(0,0,0,.35); }
.mail-dialog::backdrop { background: rgba(7,9,13,.55); backdrop-filter: blur(6px); }
.mail-dialog h2 { font-size: 34px; margin: 12px 0 12px; }
.mail-dialog > p { color: var(--muted); }
.mail-dialog pre { white-space: pre-wrap; font: 13px/1.6 var(--f-mono); background: var(--mist); padding: 16px; border-radius: 12px; margin: 20px 0; max-height: 240px; overflow: auto; }
.mail-dialog__actions { display: flex; gap: 10px; justify-content: flex-end; }

/* ---------------- reveal helpers ---------------- */
.split .line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.split .line > span { display: inline-block; will-change: transform; }
.fade-up { opacity: 0; transform: translateY(28px); }

/* menu jump veil */
.jump-veil { position: fixed; inset: 0; z-index: 90; background: var(--night); opacity: 0; pointer-events: none; }

/* ---------------- responsive ---------------- */
@media (max-width: 1080px) {
  .certsec__grid { grid-template-columns: 1fr 1fr; }
  .certsec__grid .cert:last-child { grid-column: 1 / -1; }
  .nav__links { display: none; position: fixed; inset: 76px 0 auto 0; flex-direction: column; gap: 0; padding: 12px var(--gutter) 28px; background: rgba(255,255,255,.97); color: var(--ink); box-shadow: 0 30px 60px rgba(0,0,0,.12); }
  .nav__links.open { display: flex; }
  .nav__links a { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 18px; }
  .nav__burger { display: block; }
  .software__grid, .company__grid, .contact__grid { grid-template-columns: 1fr; }
  .solutions__head { grid-template-columns: 1fr; }
  .solutions__intro { justify-self: start; }
  .pipeline__grid, .parking__stage { grid-template-columns: 1fr; }
  .pipeline__head p { display: none; }
  .pv-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 22px; }
  .pv-steps li { grid-template-columns: 1fr; padding: 0; justify-items: start; }
  .pv-steps li:not(:last-child)::before, .pv-steps li:not(:last-child)::after { left: 46px; right: 4px; top: 19px; bottom: auto; width: auto; height: 2px; transform-origin: 0 50%; }
  .pv-steps li:not(:last-child)::after { transform: scaleX(var(--seg)); }
  .pv-steps li i { grid-row: auto; }
  .pv-steps li b { font-size: 12px; } .pv-steps li span { display: none; }
  .pk-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .pk-steps::before { display: none; }
  .pk-steps li { grid-template-columns: 1fr; padding: 0; gap: 6px; }
  .pk-steps li b { font-size: 13px; } .pk-steps li span { display: none; }
  /* pinned single-column stage: clear of the nav, and the street never taller than the screen */
  .parking__pin { padding: 100px 0 28px; }
  .parking__stage { gap: 22px; }
  .pk-view canvas { max-height: calc(100svh - 230px); }
  .method__track { grid-template-columns: 1fr 1fr; }
  .method__line { display: none; }
  .checks { width: min(340px, 44vw); }
}
@media (max-width: 720px) {
  .nav { height: 64px; }
  .nav__cta { display: none; }
  .nav__links { inset: 64px 0 auto 0; }
  .story { height: 950vh; }
  .chapter { right: var(--gutter); bottom: 72px; }
  .chapter--feed h2 { font-size: 30px; margin: 10px 0 8px; }
  .chapter--feed p:not(.eyebrow) { display: none; }
  .rail { display: none; }
  .story__shade { background: linear-gradient(0deg, rgba(5,7,10,.8) 0%, rgba(5,7,10,0) 55%), linear-gradient(180deg, rgba(5,7,10,.55), rgba(5,7,10,0) 30%), rgba(5,7,10,.18); }
  .chapter--hero { right: var(--gutter); }
  .chapter--hero .eyebrow { font-size: 10.5px; letter-spacing: .06em; }
  .chapter--hero h1 { margin: 16px 0 20px; }
  .chapter--hero h1, .chapter--hero .lead, .chapter h2 { text-shadow: 0 2px 22px rgba(5,7,10,.55); }
  .chapter--hero h1 span { color: rgba(255,255,255,.62); }
  .scroll-hint { font-size: 10px; }
  .feed__frame { inset: 76px 12px 40px; }
  .feed__top { top: 84px; left: 12px; right: 12px; padding: 0 10px; font-size: 9.5px; }
  .feed__top span:nth-child(2) { display: none; }
  .feed__bottom { left: 12px; right: 12px; bottom: 14px; font-size: 9px; }
  .feed__bottom span:first-child { display: none; }
  .checks { left: 12px; right: 12px; top: auto; bottom: 52px; transform: none; width: auto; padding: 8px 14px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .checks li { padding: 7px 0; font-size: 10.5px; grid-template-columns: 1fr auto 14px; gap: 6px; }
  .checks li span { font-size: 9px; }
  .checks li b small { display: none; }
  .checks li em { width: 14px; height: 14px; }
  .logged { display: none; }
  .read { width: 150px; padding: 8px; left: 12px; top: 112px; }
  .read__meta { gap: 8px; font-size: 8.5px; }
  .chapter--feed { top: auto; bottom: 236px; }
  .read__ocr { font-size: 18px; margin: 10px 0 8px; }
  .card { width: 84vw; }
  .hscroll { scrollbar-width: none; scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain; padding-bottom: 28px; }
  .hscroll::-webkit-scrollbar { display: none; }
  .hscroll__track { gap: 14px; }
  .card__body { padding: 22px 22px 26px; }
  .card--end { padding: 32px; }
  .hdots { display: flex; margin: 0 0 76px; }
  .pipeline__head .eyebrow { display: none; }
  .pv-dots { display: none; }
  .pv-facts p { font-size: 12px; padding: 6px 0; }
  .pv-note { display: none; }
  /* ---- verbali on phones: dots + one caption, panel fills the remaining height ---- */
  .pipeline__pin { padding: 76px 0 16px; align-items: flex-start; }
  .pipeline__grid { gap: 16px; }
  .pipeline__head h2 { font-size: 29px; line-height: 1.08; margin: 6px 0 0; }
  .pv-steps { grid-template-columns: repeat(4, 1fr) auto; gap: 0; margin-top: 18px; }
  .pv-steps li { padding: 0; }
  .pv-steps li b { display: none; }
  .pv-steps li:not(:last-child)::before, .pv-steps li:not(:last-child)::after { left: 40px; right: 8px; top: 15px; }
  .pv-steps li i::after { left: 12px; top: 7px; }
  .pv-steps li i::before { inset: -5px; }
  .pv-steps li.on i { transform: scale(1.1); }
  .pv-cap { display: block; margin-top: 12px; min-height: 64px; }
  .pv-cap.swap { animation: pvCap .45s var(--ease); }
  .pv-cap p { display: flex; align-items: baseline; gap: 10px; margin: 0; }
  .pv-cap small { font: 500 11px var(--f-mono); letter-spacing: .06em; color: #ff9aa0; }
  .pv-cap b { font: 600 18px/1.25 var(--f-display); }
  .pv-cap span { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.4; color: rgba(255,255,255,.6); }
  .pv-panel { border-radius: 18px; }
  .pv-bar { grid-template-columns: 1fr auto; gap: 10px; font-size: 10.5px; padding: 11px 14px; }
  .pv-bar__x { display: none; }
  .pv-status { padding: 3px 9px; }
  .pv-body { aspect-ratio: auto; height: clamp(300px, calc(100svh - 378px), 500px); }
  .pv-scene { padding: 12px; }
  /* 1 · equipment */
  .pv-scene[data-s="0"] { gap: 12px; }
  .pv-gear { grid-template-columns: 1fr 1fr; grid-template-rows: 1.25fr 1fr; gap: 8px; }
  .pv-gear figure:first-child { grid-column: 1 / -1; }
  .pv-gear figure { border-radius: 12px; }
  .pv-gear figcaption { left: 6px; right: 6px; bottom: 6px; padding: 5px 7px; font-size: 12px; text-align: center; }
  .pv-modes { flex-wrap: nowrap; gap: 6px; }
  .pv-modes span { flex: 1 1 auto; padding: 8px 6px; font-size: 9.5px; letter-spacing: .04em; text-align: center; white-space: nowrap; }
  /* 2 · speed check */
  .pv-scene[data-s="1"] { grid-template-columns: 1fr; grid-template-rows: 1fr auto; gap: 12px; }
  .pv-shot { height: auto; min-height: 0; border-radius: 12px; }
  .pv-tag { top: 8px; left: 8px; font-size: 9.5px; } .pv-time { bottom: 8px; left: 8px; font-size: 9.5px; }
  .pv-meter { grid-template-columns: .9fr 1.25fr; align-items: center; gap: 12px; }
  .pv-gauge svg { max-width: 132px; }
  .pv-gauge b { font-size: 28px; }
  .pv-gauge span { font-size: 9px; }
  .pv-lens p { padding: 7px 9px; font-size: 8.5px; } .pv-ocr { font-size: 13px; }
  /* 3 · ticket */
  .pv-doc { width: 100%; max-width: 360px; padding: 16px 16px 14px; }
  .pv-doc dl { margin: 8px 0 10px; }
  .pv-doc dl div { grid-template-columns: 1fr 1.35fr; gap: 8px; font-size: 12px; padding: 6px 0; }
  .pv-doc dd { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pv-doc footer { grid-template-columns: 44px 1fr; gap: 12px; }
  .pv-qr { width: 44px; height: 44px; }
  /* 4 · software */
  .pv-soft { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 10px; }
  .pv-bars { min-height: 0; gap: 7px; padding: 12px 12px 26px; border-radius: 12px; }
  .pv-rows { padding: 2px 12px; border-radius: 12px; }
  .pv-row { grid-template-columns: 1fr 1.3fr auto; gap: 8px; padding: 9px 0; font-size: 11px; }
  .pv-row span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* 5 · support */
  .pv-support { gap: 8px; }
  .pv-support li { grid-template-columns: 24px 1fr; gap: 12px; padding: 11px 12px; border-radius: 12px; }
  .pv-support li i { width: 24px; height: 24px; }
  .pv-support li.ok i::after { left: 8px; top: 4px; width: 5px; height: 10px; }
  .pv-support b { font-size: 13.5px; line-height: 1.3; }
  .pv-meter .pv-facts { display: none; }
  .pv-box--car em { display: none; }
  .pv-steps li i, .pk-steps li i { width: 32px; height: 32px; }
  .certsec__head { grid-template-columns: 1fr; }
  .certsec__intro { margin-top: 20px; }
  .certsec__grid, .certsec__foot { grid-template-columns: 1fr; }
  .cert__face { display: grid; grid-template-columns: 96px 1fr; column-gap: 18px; align-items: center; }
  .cert__face > :not(.cbadge) { grid-column: 2; }
  .cbadge { grid-row: 1 / span 2; width: 96px; }
  .cert__code { margin-top: 0; align-self: end; }
  .cert h3 { font-size: 22px; margin: 4px 0 0; align-self: start; }
  .cert__lead, .cert__more { grid-column: 1 / -1 !important; }
  .cert__lead { margin-top: 16px; }
  .cert__more { padding-top: 18px; }
  /* phones: the card swaps face and details, so it is never as tall as the hidden side */
  .cert__detail { display: none; }
  .cert.is-open .cert__face { display: none; }
  .cert.is-open .cert__detail { display: flex; animation: certOpen .7s var(--ease); }
  .footer__mark { width: 42px; height: 42px; } .footer__word { width: 140px; height: 26px; }
  .pk-steps { position: relative; }
  .pk-steps::before { display: block; left: 10%; right: 10%; top: 16px; bottom: auto; width: auto; height: 1px; }
  .pk-steps li { justify-items: center; }
  .pk-steps li b { display: none; }
  .pk-steps li.on i { box-shadow: 0 0 0 6px rgba(226,88,97,.14); }
  .pk-cap { display: block; margin-top: 4px; min-height: 58px; }
  .pk-cap.swap { animation: pvCap .45s var(--ease); }
  .pk-phase { display: none; }
  .pk-note { left: 14px; right: auto; top: 14px; font-size: 9px; }
  .parking__pin { padding: 76px 0 20px; }
  .parking__stage { gap: 14px; }
  .pk-view { border-radius: 18px; }
  .pk-view canvas { aspect-ratio: 4 / 5; max-height: calc(100svh - 230px); }
  .pk-front__cap { left: 12px; bottom: 12px; font-size: 13px; padding: 8px 12px; }
  .pk-install { top: auto; bottom: 14px; min-width: 0; width: calc(100% - 28px); }
  .pk-hud { left: 12px; right: 12px; bottom: 12px; gap: 8px; }
  .pk-chip { min-width: 0; padding: 8px 12px; border-radius: 12px; }
  .pk-hud { grid-template-columns: repeat(2, auto); }
  .pk-hud .pk-chip:nth-child(2) { display: none; }
  .pk-toasts { display: none; }
  .pk-chip b { font-size: 17px; }
  .kpis { grid-template-columns: 1fr; }
  .dash__body { grid-template-columns: 1fr; }
  .dash__map { height: 200px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.07); }
  .method__track { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .contact__list div { grid-template-columns: 1fr; }
}
/* landscape tablets: the pinned verbali panel must fit under the heading and the steps */
@media (min-width: 721px) and (max-width: 1080px) and (orientation: landscape) {
  .pipeline__pin { padding: 92px 0 20px; }
  .pv-body { aspect-ratio: auto; height: max(300px, calc(100svh - 372px)); }
}
/* portrait tablets: the car fills the middle of the camera feed, so the data panel docks at the bottom */
@media (min-width: 721px) and (max-width: 1080px) and (orientation: portrait) {
  .checks { left: var(--gutter); right: var(--gutter); top: auto; bottom: 60px; transform: none; width: auto; display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; padding: 8px 22px; }
  .checks li:nth-last-child(2) { border-bottom: 0; }
  .chapter--feed { bottom: 250px; }
  .logged { top: 140px; bottom: auto; right: calc(var(--gutter) + 18px); }
  .feed__top { padding-right: 0; }
}
@media (max-width: 720px) and (max-height: 700px) {
  .pipeline__head h2 { font-size: 25px; }
  .pv-cap span { display: none; } .pv-cap { min-height: 26px; }
  .pv-body { height: clamp(300px, calc(100svh - 318px), 500px); }
  .pv-doc footer { display: none; }
  .pv-doc dl div { padding: 4px 0; }
  .pv-soft { grid-template-rows: auto; } .pv-bars { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .manifesto__text .w { color: var(--ink); }
}