/* 01 Night Flight Deck · hero: power-up (round 2, proposal 01) with the glass of proposal 05.
   The page opens dark; the INTEG LT knob turns itself with inertia and detent ticks; legends glow first, every display
   runs its own power-up, the headline lights last like an engraved legend. Displays and headline carry glass: an
   AR cover with rim light and one reflection (band + hotspot) that follows the pointer across all panes.
   --lum = knob position (set by hero.js on :root, the rest of the page uses it too), --amb = eyes adapting at the start. */
@property --p { syntax: "<percentage>"; inherits: true; initial-value: -30%; }
:root { --amb: 0; --text-3: #8e97a3; --out: cubic-bezier(.16, 1, .3, 1); }   /* --out came with proposal 01, style.css has only --ease */
.still { --amb: 1; }

/* the page opens dark: the header comes up with the first light */
.intro .bar > * { opacity: 0; }
.bar > * { transition: opacity 1.4s var(--ease); }

/* ---------- knob panel: real-feeling light around the original drawing (the drawing itself is untouched) ---------- */
.hero { --kw: clamp(176px, 15vw, 248px); }
.hero .knob-hint { margin-top: 14px; transition: opacity 1s var(--ease); }
.intro .hero .knob-hint { opacity: 0; }
.dimmer { position: relative; }
.dimmer .ik { box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 36px 60px -24px rgba(0, 0, 0, .95), 0 12px 24px -10px rgba(0, 0, 0, .8), 0 0 0 1px rgba(0, 0, 0, .7); }
.dimmer .ik::after { content: ""; position: absolute; inset: 0; border-radius: 12px; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(120% 90% at 22% 0%, rgba(255, 255, 255, .22), transparent 55%), linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(0, 0, 0, .18)); }
.key-light { position: absolute; left: 50%; top: 46%; width: 260%; height: 170%; transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(150, 190, 240, calc(.05 + .09 * var(--lum))), rgba(80, 130, 210, calc(.03 * var(--lum))) 55%, transparent); }
.dimmer::before { content: ""; position: absolute; left: 8%; right: 8%; bottom: 18px; height: 34px; border-radius: 50%; background: rgba(0, 0, 0, .75); filter: blur(16px); }
.dimmer .knob-wrap { position: relative; }
.ik.tick .ik-svg { animation: tick .14s ease-out; }
@keyframes tick { 40% { transform: rotate(.35deg); } }

/* ---------- layout ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; min-height: min(100svh, 1100px);
  display: grid; grid-template-columns: minmax(0, 600px) minmax(0, 1fr); grid-template-rows: 1fr auto auto;
  grid-template-areas: "top stage" "bot stage" ". stage"; column-gap: clamp(24px, 4vw, 72px);
  padding: 112px max(var(--gut), calc((100vw - var(--max)) / 2 + var(--gut))) clamp(36px, 6vh, 72px); }
.copy-top { grid-area: top; align-self: end; position: relative; }
.copy-bot { grid-area: bot; position: relative; }
.stage { grid-area: stage; position: relative; display: flex; align-items: flex-end; justify-content: center; }

/* ---------- scene: night sky + the cockpit photo rebuilt as night layers (canvas) ---------- */
.scene { position: absolute; inset: 0; z-index: -1; background: #010205; overflow: hidden; }
.sky { position: absolute; inset: 0; opacity: var(--amb);
  background: radial-gradient(ellipse 80% 30% at 62% var(--hz, 40%), rgba(46, 96, 190, .26), transparent 70%),
    radial-gradient(ellipse 120% 60% at 40% 0%, rgba(18, 32, 72, .5), transparent 70%),
    linear-gradient(180deg, #010208 0%, #020510 40%, #061031 calc(var(--hz, 40%) - 2%), #030712 calc(var(--hz, 40%) + 6%)); }
.stars { position: absolute; inset: 0; width: 100%; height: 100%; opacity: calc(1 - .3 * var(--lum)); }
.stars.tw { animation: twinkle 6s ease-in-out infinite alternate; }
.paused .stars.tw { animation-play-state: paused; }
@keyframes twinkle { from { opacity: .2; } to { opacity: .8; } }
.airglow { position: absolute; left: -5%; right: -5%; top: calc(var(--hz, 40%) - 3.5%); height: 7%; filter: blur(8px);
  background: linear-gradient(180deg, transparent, rgba(90, 150, 255, .18) 55%, rgba(120, 190, 255, .1) 75%, transparent); }
.box { position: absolute; left: 0; top: 0; width: 1600px; aspect-ratio: 16 / 10; visibility: hidden; }
.fit .box { visibility: visible; }
/* style.css uses .ph, .du and .hot elsewhere on the page (procedure phases, trainer display, hot spots): reset them here */
.hero .ph { position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; padding: 0; background: none; text-shadow: none; box-shadow: none; transition: none; }
.ph-dark { opacity: var(--amb); }
.ph-lit { opacity: calc(var(--lum) * .95); }
.ph-leg { opacity: min(1, calc(var(--lum) * 1.6)); mix-blend-mode: screen; }

/* ---------- display units: crisp content over the photo's display positions ---------- */
.hero .du { position: absolute; container-type: size; border-radius: 2px; overflow: hidden; background: #020305; padding: 0; box-shadow: none; }
.du::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5; opacity: var(--amb);
  background: linear-gradient(152deg, rgba(220, 235, 255, .085), rgba(220, 235, 255, .02) 34%, transparent 46%), radial-gradient(130% 90% at 50% 120%, rgba(0, 0, 0, .35), transparent 60%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .8), inset 0 0 6cqw rgba(0, 0, 0, .55); }
.du-bl { position: absolute; inset: 0; background: radial-gradient(110% 100% at 50% 50%, #0e141c, #070a0f); opacity: 0; transition: opacity .25s; }
.du-c { position: absolute; inset: 0; opacity: 0; filter: brightness(.95) saturate(1.06); }   /* displays have their own brightness, INTEG LT does not dim them */
.du-c > svg, .du-c > .crop { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.crop { background-repeat: no-repeat; filter: contrast(1.08) saturate(1.1); }
.du-flash { position: absolute; inset: 0; background: radial-gradient(120% 120% at 50% 45%, #fff, #dfe9f7); opacity: 0; z-index: 4; mix-blend-mode: screen; }
.du-test { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 2cqh; opacity: 0; z-index: 3;
  font: 700 6.4cqw/1.2 var(--mono); color: #f2f2f2; letter-spacing: .02em; }
.du-test i { font-style: normal; font-weight: 400; color: #3fd6f2; font-size: 5.6cqw; }
.du-test::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(255, 255, 255, .55); box-shadow: 0 0 6px rgba(255, 255, 255, .6); animation: scan 1.1s linear infinite; }
@keyframes scan { from { transform: translateY(0); } to { transform: translateY(100cqh); } }
.du.bl .du-bl { opacity: 1; }
.du.st .du-test { opacity: 1; }
.du.on .du-c { opacity: 1; }
.du.on .du-bl { opacity: 1; }
.du.on .du-test { opacity: 0; transition: opacity .2s; }
.du.off .du-c { opacity: 0; transition: opacity .5s var(--ease); }
.du.off .du-bl { opacity: 0; transition: opacity .7s var(--ease) .1s; }
.du.flash .du-flash { animation: flash .62s cubic-bezier(.2, .6, .3, 1) both; }
@keyframes flash { 0% { opacity: 0; } 10% { opacity: .92; } 100% { opacity: 0; } }
.du.wipe .du-c { animation: wipe .7s var(--out) both; }
@keyframes wipe { from { clip-path: inset(0 0 100% 0); filter: brightness(1.9) saturate(.6); } 60% { filter: brightness(1.15); } to { clip-path: inset(0 0 0 0); } }
.du-nd.wipe .du-c { animation: radar .95s var(--out) both; }
@keyframes radar { from { clip-path: circle(0% at 50% 82%); filter: brightness(1.8); } to { clip-path: circle(140% at 50% 82%); } }
.du-ewd .arc { stroke-dasharray: 1; stroke-dashoffset: 1; }
.du-ewd.wipe .arc, .du-ewd.on .arc { animation: draw .8s var(--out) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.still .du-ewd .arc { stroke-dashoffset: 0; animation: none; }
.bloom { position: absolute; border-radius: 50%; pointer-events: none; mix-blend-mode: screen; opacity: 0; transition: opacity .9s var(--ease);
  background: radial-gradient(closest-side, rgba(90, 160, 255, .26), rgba(60, 120, 230, .077) 60%, transparent); }
.bloom.on { opacity: 1; }

/* ---------- MASTER WARN: original drawing over the photo's button; shown only while it flashes and is pressed ---------- */
.hero .mc { position: absolute; z-index: 2; opacity: 0; transition: opacity .5s var(--ease); pointer-events: none; }
.hero .mc.on { opacity: 1; transition-duration: .12s; }
.hero .mc svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; transition: transform .1s ease-out; }
.hero .mc::before { content: ""; position: absolute; inset: -130%; border-radius: 50%; mix-blend-mode: screen; opacity: 0; transition: opacity .06s;
  background: radial-gradient(closest-side, rgba(255, 60, 40, .55), rgba(255, 40, 25, .15) 55%, transparent); }
.hero .mc.lit::before { opacity: 1; }
.hero .mc.press svg { transform: scale(.86); filter: brightness(.8); }
.mc-ring { position: absolute; inset: -20%; border-radius: 50%; border: 1.5px solid rgba(220, 235, 255, .85); opacity: 0; }
.mc.press .mc-ring { animation: mcRing .7s var(--out) both; }
@keyframes mcRing { from { transform: scale(.5); opacity: .95; } to { transform: scale(2.4); opacity: 0; } }

/* ---------- glass (from proposal 05): AR cover, rim light, one reflection that follows the pointer ----------
   The band and the hotspot sit at the same place in the room on every pane (hero.js moves them), so all displays and
   the headline read as one sheet of light. --g = reflection strength (rises for the sweep after power-up). */
.glass { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 6; opacity: var(--amb);
  box-shadow: inset 0 0 0 1px rgba(200, 225, 255, .07), inset 0 1px 0 rgba(235, 244, 255, .16), inset 0 -18px 30px -18px rgba(0, 0, 0, .55); }
.glass::before { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(150, 185, 235, .07), rgba(40, 60, 100, .015) 38%, rgba(0, 0, 0, 0) 60%); }
.hero .spec, .hero .hot { position: absolute; border: 0; padding: 0; cursor: default; left: 0; top: 0; pointer-events: none; mix-blend-mode: screen; will-change: transform; }
.spec { width: 1400px; height: 1400px; margin: -700px 0 0 -700px; opacity: var(--g, .55);
  background:
    linear-gradient(112deg, transparent 45.6%, rgba(214, 231, 255, .06) 47.4%, rgba(232, 242, 255, .26) 49.3%, rgba(255, 255, 255, .42) 50%, rgba(214, 231, 255, .16) 50.9%, rgba(214, 231, 255, .05) 52.6%, transparent 54%),
    linear-gradient(112deg, transparent 54.6%, rgba(200, 225, 255, .11) 55.2%, transparent 55.9%); }
.hero .hot { width: 340px; height: 340px; margin: -170px 0 0 -170px; border-radius: 50%; opacity: calc(.6 + .4 * var(--g, .55));
  background: radial-gradient(closest-side, rgba(235, 244, 255, .17), rgba(200, 225, 255, .055) 42%, rgba(160, 200, 255, .015) 70%, transparent); }

.shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(1, 2, 5, .92) 0%, rgba(1, 2, 5, .72) 30%, rgba(1, 2, 5, 0) 52%),
    linear-gradient(180deg, rgba(1, 2, 5, .55) 0%, transparent 18%, transparent 78%, rgba(4, 6, 10, .95) 100%); }

/* ---------- copy ---------- */
.hero .eyebrow { color: color-mix(in srgb, #e8eef6 calc(100% * min(1, var(--lum) * 1.4)), #3a4250); margin-bottom: 22px; letter-spacing: .18em;
  text-shadow: 0 0 calc(12px * var(--lum)) rgba(170, 205, 255, calc(.45 * var(--lum))); }
.hero h1.display { position: relative; font-size: clamp(46px, 6.3vw, 100px); letter-spacing: -.014em; line-height: 1.02; }
/* headline as an engraved legend: unlit it is cut into the dark panel, then the lamp behind it warms up from left to right */
.h-ink { display: block; position: relative; color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(100deg, #c6cfdb 0, #c6cfdb calc(var(--p) - 9%), #ffffff calc(var(--p) - 2%), #e6ecf5 var(--p), #1b222c calc(var(--p) + 12%), #1b222c 100%); }
/* lit ink is a cool panel white a shade below pure white, so the glass reflection (.h-sheen) can still brighten it */
.h-cut { position: absolute; inset: 0; color: transparent; pointer-events: none; text-shadow: 0 1px 0 rgba(200, 220, 255, .09), 0 -1px 0 rgba(0, 0, 0, .9); }
.h-glow { position: absolute; inset: 0; pointer-events: none; color: rgba(214, 231, 255, .9); filter: blur(18px); opacity: 0;
  -webkit-mask-image: linear-gradient(100deg, #000 calc(var(--p) - 30%), #000 calc(var(--p) - 4%), transparent calc(var(--p) + 6%)); mask-image: linear-gradient(100deg, #000 calc(var(--p) - 30%), #000 calc(var(--p) - 4%), transparent calc(var(--p) + 6%)); }
.h-lit .h-ink { transition: --p 1.6s cubic-bezier(.45, .05, .25, 1); --p: 135%; }
.h-lit .h-glow { animation: hglow 2.6s var(--ease) forwards; }
@keyframes hglow { 0% { opacity: 0; } 40% { opacity: .38; } 100% { opacity: .14; } }
.still .h-ink { --p: 135%; transition: none; }
.still .h-glow { opacity: .14; animation: none; }
/* the headline is glass too: the same reflection band, clipped to the letters, at the same place in the room */
.h-sheen { position: absolute; inset: 0; pointer-events: none; color: transparent; opacity: 0; transition: opacity 1.2s var(--ease);
  background: linear-gradient(112deg, transparent 0, transparent 42%, rgba(214, 231, 255, .22) 45.5%, rgba(240, 247, 255, .75) 48.8%, #fff 50%, rgba(232, 242, 255, .7) 51.2%, rgba(214, 231, 255, .2) 54.5%, transparent 57.5%, transparent 58.4%, rgba(200, 225, 255, .3) 58.9%, transparent 59.8%, transparent 100%) 0 0 / 300% 100% repeat-x;
  -webkit-background-clip: text; background-clip: text; }
.h-lit .h-sheen { opacity: calc(.5 + .5 * var(--g, .55)); }
.still .h-sheen { opacity: .78; transition: none; }

.hero .lines { margin-top: 28px; display: grid; gap: 5px; }
.hero .lines li { font: 500 15px/1.4 var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); display: flex; align-items: center; gap: 12px; }
.hero .lines li::before { content: ""; width: 18px; height: 1px; background: var(--cyan); box-shadow: 0 0 calc(6px * var(--lum)) var(--cyan); }
.hero .lead { margin-top: 22px; font-size: clamp(17px, 1.35vw, 19px); color: #c3cad3; max-width: 44ch; }
.hero .ctas { margin-top: 30px; }
.hero .btn-ghost { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.rise { transition: opacity 1s var(--ease), transform 1.2s var(--out); transition-delay: calc(var(--i, 0) * 90ms); }
.pre .rise { opacity: 0; transform: translateY(14px); }

/* ---------- small screens: headline over the sky, the cockpit below it, the knob on its pedestal, then the rest ---------- */
@media (max-width: 899px), (max-aspect-ratio: 1/1) {
  .hero { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; grid-template-areas: "top" "stage" "bot";
    padding: 100px var(--gut) 44px; min-height: 0; }
  .copy-top { align-self: start; }
  .hero h1.display { font-size: clamp(42px, 11.4vw, 84px); }
  .hero { --kw: clamp(168px, 30vw, 230px); }
  .stage { height: calc(var(--duh, 120px) * 1.98 + var(--kw) * .98 + 76px); margin: 0 calc(-1 * var(--gut)); }
  .copy-bot { margin-top: 8px; }
  .shade { background: linear-gradient(180deg, rgba(1, 2, 5, .5) 0%, transparent 14%, transparent 60%, rgba(4, 6, 10, 1) calc(100% - var(--botcopy, 420px))); }
  .hero .ctas .btn { flex: 1 1 auto; justify-content: center; }
}

/* ===== v19 hero: "Same failure, any screen" (proposal hero-geraete/03-window-morph, built on round-3 proposal 01) =====
   The failure arrives after the power-up, its procedure is worked on the app's floating E/WD window, and that window takes
   on a device (iPhone, iPad, browser on a Mac); after STATUS the three stand side by side. Everything below is scoped to
   .hero.hw (class on the homepage hero) so it cannot touch style.css or the proposal pages that also load this file. */
.hero.hw { --mono: "B612 Mono", ui-monospace, Menlo, monospace; --ecam-red: #ff3b30; }
/* ---------- failure layer ---------- */

.hero.hw .fx { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

/* the app's floating windows (12-sim-3d): dark chrome, title row, display inside */

.hero.hw .win { position: absolute; left: 0; top: 0; width: 300px; padding: 0 6px 6px; border-radius: 11px; transform-origin: 0 0; opacity: 0; visibility: hidden;
  background: linear-gradient(180deg, #23272c, #1a1d21 40%, #16191c);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 255, 255, .09), inset 0 0 0 1px rgba(255, 255, 255, .03),
    0 40px 70px -28px rgba(0, 0, 0, .95), 0 18px 30px -18px rgba(0, 0, 0, .8), 0 0 90px -34px rgba(90, 150, 255, .3); }
.hero.hw .win.in { opacity: 1; visibility: visible; }
.hero.hw .win-ewd { z-index: 2; }
.hero.hw .win-sd { z-index: 1; transition: box-shadow 1s var(--ease); }
.hero.hw .win-bar { height: 24px; display: flex; align-items: center; gap: 9px; padding: 0 4px 0 6px; font: 700 clamp(10px, .82vw, 12.5px)/1 var(--mono); letter-spacing: .07em; color: #98a1ab; white-space: nowrap; overflow: hidden; }
.hero.hw .win-n { flex: none; }
.hero.hw .win-t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ecam-red); text-shadow: 0 0 10px rgba(255, 59, 48, .45); }
.hero.hw .win.a .win-t { color: #ff9d1f; text-shadow: none; }
.hero.hw .win-sd .win-n { flex: 1 1 auto; }
.hero.hw .win-ic { flex: none; position: relative; width: 11px; height: 11px; margin-left: 6px; opacity: .55; }
.hero.hw .win-pop { border: 1.5px solid #8d96a0; border-radius: 2px; border-top-color: transparent; border-right-color: transparent; }
.hero.hw .win-pop::after { content: ""; position: absolute; right: -3px; top: -3px; width: 7px; height: 7px; border: solid #8d96a0; border-width: 1.5px 1.5px 0 0; }
.hero.hw .win-x::before, .hero.hw .win-x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; background: #8d96a0; translate: -50% -50%; rotate: 45deg; }
.hero.hw .win-x::after { rotate: -45deg; }
.hero.hw .win-scr { position: relative; border-radius: 4px; overflow: hidden; background: #050607; aspect-ratio: 1; box-shadow: inset 0 0 0 1px #000; }
.hero.hw .win-scr > svg, .hero.hw .win-scr > .sd-photo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero.hw .win-gl { position: absolute; inset: 24px 6px 6px; border-radius: 4px; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(150deg, rgba(210, 228, 255, .075), rgba(210, 228, 255, .015) 32%, transparent 44%); box-shadow: inset 0 1px 0 rgba(235, 244, 255, .1); }

/* the warning pulses on the E/WD window while MASTER WARN flashes */

.hero.hw.alarm .win-ewd { animation: winWarn .66s steps(1) infinite; }
@keyframes winWarn { 50% { box-shadow: 0 0 0 1px rgba(255, 59, 48, .55), inset 0 1px 0 rgba(255, 255, 255, .09), 0 40px 70px -28px rgba(0, 0, 0, .95), 0 0 60px -12px rgba(255, 59, 48, .38); } }

.hero.hw .sd-photo { background-repeat: no-repeat; filter: contrast(1.06) saturate(1.08); transition: opacity .5s var(--ease); }
.hero.hw .sd-sts { opacity: 0; transition: opacity .5s var(--ease) .12s; }
.hero.hw .win-sd.sts .sd-photo { opacity: 0; }
.hero.hw .win-sd.sts .sd-sts { opacity: 1; }

/* E/WD rows: done lines leave, the rest moves up */

.hero.hw .e-svg .r { transition: opacity .38s var(--ease); }
.hero.hw .e-svg .r .hl { fill: rgba(63, 214, 242, 0); stroke: rgba(63, 214, 242, 0); stroke-width: 1.6; transition: fill .3s, stroke .3s; }
.hero.hw .e-svg .r.cur .hl { fill: rgba(63, 214, 242, .12); stroke: rgba(63, 214, 242, .95); animation: rowCur 1.3s ease-in-out infinite; }
@keyframes rowCur { 50% { stroke: rgba(63, 214, 242, .35); } }
.hero.hw .e-svg .r.tap .hl { fill: rgba(63, 214, 242, .32); }
.hero.hw .e-svg .r.gone { opacity: 0; }
.hero.hw .e-svg .r.over { opacity: 0; }
.hero.hw .e-svg .arr { opacity: 0; transition: opacity .3s; }
.hero.hw .e-svg .arr.on { opacity: 1; }
.hero.hw .e-svg .e-sec { opacity: 0; transition: opacity .4s; }
.hero.hw .e-svg .e-sec.on { opacity: 1; }
.hero.hw .e-svg text.gone { opacity: 0; transition: opacity .4s; }
.still .hero.hw .e-svg .r, .still .hero.hw .e-svg .r .hl { transition: none; animation: none; }

/* the E/WD display in the panel lights red at the edge while the failure is new */

.hero.hw .du-ewd.fault::before { content: ""; position: absolute; inset: 0; z-index: 7; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255, 59, 48, .5), inset 0 0 18px rgba(255, 59, 48, .25); }

/* ---------- pedestal: INTEG LT hands over to the controls of the open line ---------- */

.hero.hw .dimmer { transition: opacity .7s var(--ease), filter .7s var(--ease); }
.hero.hw.handover .dimmer { opacity: 0; filter: blur(6px); }
.hero.hw.handover .knob-hint { opacity: 0; }
.hero.hw .ped { position: absolute; left: 0; top: 0; width: 240px; height: 250px; border-radius: 16px; opacity: 0; visibility: hidden; transform: translateY(10px) scale(.97);
  transition: opacity .8s var(--ease), transform 1s var(--out), visibility 0s .8s;
  background: radial-gradient(120% 90% at 50% 0%, #16202c, #0b1017 70%);
  box-shadow: 0 0 0 1px rgba(170, 200, 240, .13), inset 0 1px 0 rgba(255, 255, 255, .05), 0 36px 60px -26px rgba(0, 0, 0, .95); }
.hero.hw.handover .ped { opacity: 1; visibility: visible; transform: none; transition: opacity .8s var(--ease) .15s, transform 1s var(--out) .15s, visibility 0s; }
.hero.hw .ped-in { position: absolute; left: 14px; right: 14px; top: 14px; bottom: 44px; }
.hero.hw .ped .pp { position: absolute; left: 50%; top: 50%; translate: -50% -50%; opacity: 0; scale: .965; filter: blur(3px);
  transition: opacity .55s var(--ease), scale .7s var(--out), filter .55s var(--ease); }
.hero.hw .ped .pp.on { opacity: 1; scale: 1; filter: none; }
.hero.hw .ped .pp svg { display: block; width: 100%; height: auto; }
.hero.hw .ped .key { transform-box: fill-box; transform-origin: 50% 50%; transition: transform .12s ease-out; }
.hero.hw .ped .key.push { transform: scale(.9); }
.hero.hw .ped-l { position: absolute; left: 12px; right: 12px; bottom: 14px; margin: 0; text-align: center; font: 700 13px/1.2 var(--mono); letter-spacing: .04em; color: var(--cyan);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .35s var(--ease); }
.hero.hw .ped-l.done { color: var(--text); }
.hero.hw .ped-l.done::before { content: ""; display: inline-block; width: 9px; height: 5px; margin-right: 9px; border: solid var(--cyan); border-width: 0 0 2px 2px; rotate: -45deg; translate: 0 -3px; }
.still .hero.hw .ctl-p .want { animation: none; filter: drop-shadow(0 0 7px rgba(99, 210, 255, .95)) drop-shadow(0 0 2px #63d2ff); }

/* the second line of the hero ("work through the failures") lights with the failure */

.hero.hw .lines li { transition: color .8s var(--ease), text-shadow .8s var(--ease); }
.hero.hw .lines li::before { transition: width .8s var(--out), box-shadow .8s var(--ease); }
.hero.hw.failed .lines li.l-fail { color: var(--text); text-shadow: 0 0 14px rgba(140, 195, 255, .35); }
.hero.hw.failed .lines li.l-fail::before { width: 30px; box-shadow: 0 0 10px var(--cyan); }

/* ---------- strip ---------- */

@media (max-width: 899px), (max-aspect-ratio: 1/1) {
  .hero.hw .stage { min-height: var(--stmin, 0px); }
  .hero.hw .ped-l { font-size: 12px; }
}
/* the light frame that carries the E/WD out of the display */

.hero.hw .ghost { position: absolute; left: 0; top: 0; width: 10px; height: 10px; z-index: 3; border-radius: 11px; opacity: 0; pointer-events: none; transform-origin: 0 0;
  box-shadow: inset 0 0 0 1.5px rgba(214, 231, 255, .85), 0 0 24px rgba(120, 180, 255, .45), inset 0 0 30px rgba(120, 180, 255, .18); }

/* after CLR the SD with STATUS comes to the front */

.hero.hw .win-sd.sts { z-index: 3; }

/* ---------- round 4 · 03 window-morph: the E/WD window takes on a device ----------
   Generic outline devices (no brand artwork): graphite body, one hairline of light as the outline, black glass.
   Geometry comes from main.js (left/top/width/height in px); every value below transitions together, so the frame morphs. */

.hero.hw { --mv: cubic-bezier(.62, .02, .2, 1); --mvt: 1.25s; }
.hero.hw .win-sd { z-index: 1; }
.hero.hw .win-ewd { z-index: 3; }
.hero.hw .win-ewd.dev { transition: transform var(--mvt) var(--mv), background .7s var(--ease), box-shadow .7s var(--ease); }
.hero.hw .win-ewd .win-bar, .hero.hw .win-ewd .win-gl { transition: opacity .6s var(--ease); }
.hero.hw .win-ewd.bare { background: transparent; box-shadow: none; }
.hero.hw .win-ewd.bare .win-bar, .hero.hw .win-ewd.bare .win-gl { opacity: 0; }
.hero.hw .win-ewd.bare .win-scr { box-shadow: none; border-radius: 3%; }
.hero.hw .win.clone { transition: none !important; }
.hero.hw .win-sd.out { opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .8s var(--ease), transform .9s var(--ease), visibility 0s .9s; }

.hero.hw .dv { position: absolute; left: 0; top: 0; z-index: 2; opacity: 0; pointer-events: none;
  background: linear-gradient(165deg, #20262e 0%, #11151a 46%, #0b0e12 100%);
  box-shadow: 0 0 0 1px rgba(200, 220, 245, .3), inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(255, 255, 255, .03),
    0 44px 70px -30px rgba(0, 0, 0, .95), 0 18px 32px -20px rgba(0, 0, 0, .85), 0 0 100px -36px rgba(90, 150, 255, .34);
  transition: left var(--mvt) var(--mv), top var(--mvt) var(--mv), width var(--mvt) var(--mv), height var(--mvt) var(--mv),
    border-radius var(--mvt) var(--mv), opacity .7s var(--ease); }
.hero.hw .dv.on { opacity: 1; }
.hero.hw .dv-scr { position: absolute; overflow: hidden; background: #050607; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(0, 0, 0, .6);
  transition: left var(--mvt) var(--mv), top var(--mvt) var(--mv), width var(--mvt) var(--mv), height var(--mvt) var(--mv), border-radius var(--mvt) var(--mv); }
.hero.hw .dv-bg { position: absolute; left: 0; right: 0; bottom: 0; top: 0; opacity: 0; background-repeat: no-repeat;
  transition: opacity .8s var(--ease), top var(--mvt) var(--mv); }

/* the web app behind the window: the app's 2D cockpit page, a little dimmed like a screen at night */

.hero.hw .dv-sim { background-size: cover; background-position: 0% 50%; filter: brightness(.72) saturate(.92); }

/* the iPhone's ECAM tab */

.hero.hw .dv-ph { background-size: 100% auto; background-position: 50% 0%; }
.hero.hw .dv-mac .dv-sim, .hero.hw .dv-ipad .dv-sim, .hero.hw .dv-iphone .dv-ph { opacity: 1; }

/* into the iPhone: the page behind goes first, the phone's own screen comes once the frame has nearly settled */

.hero.hw .dv-sim { transition: opacity .45s var(--ease), top var(--mvt) var(--mv); }
.hero.hw .dv-iphone .dv-ph { transition: opacity .6s var(--ease) .75s, top var(--mvt) var(--mv); }
.hero.hw .dv-floor { position: absolute; z-index: 1; pointer-events: none; opacity: 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(3, 5, 9, .86), rgba(3, 5, 9, .64) 55%, rgba(3, 5, 9, 0)); transition: opacity 1.2s var(--ease) .2s; }
.hero.hw.trio .dv-floor { opacity: 1; }

/* MASTER WARN is lit in that screenshot; after it was pushed it shows dark, like the button beside it (same picture, shifted) */

.hero.hw .dv-mw { position: absolute; left: 76.03%; top: 45.73%; width: 10.51%; height: 4.86%; background-size: 951.2% 2058.5%; background-position: 97.85% 48.07%; }

/* the phone's thrust levers (original drawing) over the screenshot's lever panel; lever 1 travels slowly to IDLE */

.hero.hw .dv-thr { position: absolute; left: 3.59%; top: 56.457%; width: 92.82%; height: 30.63%; overflow: hidden; background: #1c232b; border-radius: 2px; }
.hero.hw .dv-thr svg { display: block; width: 100%; height: 100%; }
.hero.hw .dv-thr .mv { transform-box: view-box; transition: transform 1.6s cubic-bezier(.45, .05, .2, 1); }
.still .hero.hw .dv-thr .mv, .hero.hw .dv.nt .dv-thr .mv { transition: none; }

/* browser chrome: three neutral dots and an address field, nothing else */

.hero.hw .dv-bb { position: absolute; left: 0; right: 0; top: 0; height: 0; z-index: 2; opacity: 0; display: flex; align-items: center; gap: .2em; padding: 0 .5em;
  background: linear-gradient(180deg, #232930, #1b2026); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .7);
  transition: height var(--mvt) var(--mv), opacity .6s var(--ease); }
.hero.hw .dv-mac .dv-bb { opacity: 1; }
.hero.hw .dv-bb i { flex: none; width: .2em; height: .2em; border-radius: 50%; background: rgba(205, 218, 235, .28); }
.hero.hw .dv-bb b { flex: none; width: 44%; height: .44em; margin: 0 auto; border-radius: 1em; background: rgba(205, 218, 235, .08); box-shadow: inset 0 0 0 1px rgba(205, 218, 235, .07); translate: -.7em 0; }
.hero.hw .dv-gl { position: absolute; inset: 0; z-index: 3; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(152deg, rgba(210, 228, 255, .07), rgba(210, 228, 255, .012) 34%, transparent 46%); }
.hero.hw .dv-cam { position: absolute; left: 50%; z-index: 4; translate: -50% 0; border-radius: 99px; background: #050608; box-shadow: inset 0 0 0 1px rgba(120, 140, 170, .2);
  transition: top var(--mvt) var(--mv), width var(--mvt) var(--mv), height var(--mvt) var(--mv); }
.hero.hw .dv-iphone .dv-cam { background: #000; box-shadow: none; }

/* laptop base: a thin slab, a touch wider than the lid, with the opening notch */

.hero.hw .dv-base { position: absolute; left: 50%; width: 116%; translate: -50% 0; opacity: 0; transform: scaleX(.86); border-radius: 0 0 14px 14px / 0 0 100% 100%;
  background: linear-gradient(180deg, #2b323b 0%, #171b21 60%, #0d1014 100%);
  box-shadow: 0 0 0 1px rgba(200, 220, 245, .3), inset 0 1px 0 rgba(255, 255, 255, .14), 0 26px 40px -22px rgba(0, 0, 0, .95);
  transition: opacity .7s var(--ease), transform var(--mvt) var(--mv), height var(--mvt) var(--mv), top var(--mvt) var(--mv); }
.hero.hw .dv-base::before { content: ""; position: absolute; left: 50%; top: 0; width: 15%; height: 42%; translate: -50% 0; border-radius: 0 0 6px 6px; background: rgba(0, 0, 0, .45); }
.hero.hw .dv-mac .dv-base { opacity: 1; transform: none; }
.hero.hw .dv-lab { position: absolute; left: 50%; translate: -50% 4px; white-space: nowrap; text-align: center; opacity: 0; font: 500 13px/1 var(--sans); letter-spacing: .05em; color: var(--text-2); text-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 0 14px rgba(0, 0, 0, .85);
  transition: opacity .8s var(--ease) .5s, translate .9s var(--out) .5s; }
.hero.hw .dv.lab-on .dv-lab { opacity: 1; translate: -50% 0; }
.hero.hw .dv-lab small { display: block; margin-top: 6px; font: 500 11px/1 var(--sans); letter-spacing: .04em; color: var(--text-3); text-align: center; }
@media (max-width: 560px) { .hero.hw .dv-lab small { font-size: 9.5px; letter-spacing: .02em; } }
.hero.hw .fx.nt .dv, .hero.hw .fx.nt .dv *, .hero.hw .fx.nt .win, .hero.hw .dv.nt, .hero.hw .dv.nt * { transition: none !important; }
@media (max-width: 560px) { .hero.hw .dv-lab { font-size: 12px; letter-spacing: .03em; } }

/* small screens: the row stands over the cockpit, so the cockpit eases back a little when it arrives */

@media (max-width: 899px), (max-aspect-ratio: 1/1) {
  .hero.hw .box { transition: filter 1.4s var(--ease); }
  .hero.hw.trio .box { filter: brightness(.62) saturate(.85); }
}

/* the headline always stays above every scene layer: its own stacking level above the failure layer (.fx), and a soft pool
   of night under it, so the lit glareshield of the photo never shows through the letters while the ink sweeps on */
.hero.hw .copy-top { z-index: 2; }
.hero.hw .copy-top::before { content: ""; position: absolute; z-index: -1; left: -8%; right: -16%; top: -16%; bottom: -20%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(1, 2, 5, .8), rgba(1, 2, 5, .5) 62%, rgba(1, 2, 5, 0)); }

/* ===== v20 camera: the cockpit's real E/WD and SD take the spotlight =====
   .cam carries the whole cockpit photo with its display units; hero.js pans and scales it (transform only). */
.hero.hw .cam { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; transition: transform 1.4s cubic-bezier(.62, .02, .22, 1); }
.hero.hw .cam.nt { transition: none; }
/* spotlight: everything around the framed displays goes into shade, the displays themselves stay clear */
.hero.hw .spot { position: absolute; z-index: 0; border-radius: 26px; pointer-events: none; opacity: 0;
  box-shadow: 0 0 120px 3000px rgba(2, 3, 7, .7); transition: opacity 1.2s var(--ease) .2s; }
.hero.hw.camin .spot { opacity: 1; }
/* the lower ECAM display (SD), below the E/WD at its true place on the panel; only in frame while the camera is in */
.hero.hw .sd-house { position: absolute; border-radius: 3px; opacity: 0; transition: opacity .9s var(--ease);
  background: linear-gradient(180deg, #1e2733 0%, #171e28 55%, #11161d 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 0 0 1px rgba(0, 0, 0, .55), 0 0 0 1px rgba(150, 175, 210, .1); }
.hero.hw .sdu { position: absolute; overflow: hidden; border-radius: 2px; background: #020305; opacity: 0; transition: opacity .9s var(--ease) .25s;
  box-shadow: 0 0 0 1px #000, 0 0 26px rgba(60, 120, 220, .22); }
.hero.hw.camin .sd-house, .hero.hw.camin .sdu { opacity: 1; }
.hero.hw .sdu > .sd-photo, .hero.hw .sdu > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero.hw .sdu.sts .sd-photo { opacity: 0; }
.hero.hw .sdu.sts .sd-sts { opacity: 1; }
.hero.hw .sdu-gl { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(150deg, rgba(210, 228, 255, .08), rgba(210, 228, 255, .015) 32%, transparent 44%); }
/* while the camera is in, the INTEG LT knob steps back (the pedestal card comes only for CLR) */
.hero.hw.camin .dimmer { opacity: 0; filter: blur(6px); pointer-events: none; }
.hero.hw .ped { transition: opacity .8s var(--ease), transform 1s var(--out), visibility 0s .8s, left 1.4s cubic-bezier(.62, .02, .22, 1), top 1.4s cubic-bezier(.62, .02, .22, 1); }
.hero.hw.handover .ped { transition: opacity .8s var(--ease) .15s, transform 1s var(--out) .15s, visibility 0s, left 1.4s cubic-bezier(.62, .02, .22, 1), top 1.4s cubic-bezier(.62, .02, .22, 1); }
/* the page sinks back into the real display: it fades on the last part of the move */
.hero.hw .win-ewd.dev { transition: transform var(--mvt) var(--mv), opacity .6s var(--ease), background .7s var(--ease), box-shadow .7s var(--ease); }
.hero.hw .win-ewd.sunk { opacity: 0; transition: transform var(--mvt) var(--mv), opacity .5s var(--ease) .8s, background .7s var(--ease), box-shadow .7s var(--ease); }
/* the copy below the headline also stays above every scene layer */
.hero.hw .copy-bot { z-index: 2; }
/* narrower desktops: the pedestal card stays out of the close-up and comes back with the normal framing */
.hero.hw.camin.pedout .ped { opacity: 0; visibility: hidden; }
/* once the page has sunk back into the real display, the lifted copy is hidden for good (no stray layer) */
.hero.hw .win-ewd.sunk { visibility: hidden; transition: transform var(--mvt) var(--mv), opacity .5s var(--ease) .8s, visibility 0s 1.3s, background .7s var(--ease), box-shadow .7s var(--ease); }
.hero.hw .cam { will-change: auto; }

/* ===== v21: darker night, MASTER WARN without a box =====
   MASTER WARN: the original drawing is cropped to the button only (no overflow: the rest of the warning panel, with its
   own lit lights, stayed visible as a lighter box) and its edge is feathered into the photo; the red spill is radial. */
.hero.hw .mc svg { overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 2%, #000 20%, #000 80%, transparent 98%), linear-gradient(180deg, transparent 2%, #000 20%, #000 80%, transparent 98%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 2%, #000 20%, #000 80%, transparent 98%), linear-gradient(180deg, transparent 2%, #000 20%, #000 80%, transparent 98%);
  mask-composite: intersect; }
/* the panel light matters more: the lit photo layer follows the knob on a curve, so at rest (0.45) the cockpit is dark and
   at BRT it is fully lit; the moonlit layer is a little lower too */
.hero.hw .ph-lit { opacity: min(1, calc(var(--lum) * var(--lum) * 1.05)); }
.hero.hw .ph-dark { opacity: calc(var(--amb) * .8); }
.hero.hw .ph-leg { opacity: min(1, calc(var(--lum) * 1.3)); }
.hero.hw .spot { box-shadow: 0 0 120px 3000px rgba(1, 2, 5, .78); }
.hero.hw .sd-house { filter: brightness(calc(.55 + .45 * var(--lum))); }

/* ===== v22: a plain zoom into the cockpit =====
   The spotlight is a soft vignette over the whole scene (no box); the SD unit sits in the panel surface (.pext), no card. */
.hero.hw .spot { inset: 0; left: 0; top: 0; width: auto; height: auto; border-radius: 0; box-shadow: none; }
.hero.hw .sd-house { display: none; }
.hero.hw .sdu { box-shadow: 0 0 0 2px #06080b, 0 0 0 3px rgba(150, 172, 205, .07), 0 0 22px rgba(60, 120, 220, .16); }
.hero.hw .pext { position: absolute; pointer-events: none; opacity: var(--amb); background: linear-gradient(180deg, #0a0d12 0%, #090c11 60%, #07090d 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 70%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 10%, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 70%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 10%, #000 78%, transparent 100%);
  mask-composite: intersect; }
/* the panel light reaches it like the photo: a cool grey-blue lit surface on the same curve as .ph-lit */
.hero.hw .pext::after { content: ""; position: absolute; inset: 0; opacity: min(1, calc(var(--lum) * var(--lum) * 1.05));
  background: linear-gradient(180deg, #2b3542 0%, #26303c 40%, #1d252f 100%); }
/* in the close-up the eyes adapt a little: the panel around the displays comes up gently (displays stay the brightest) */
.hero.hw .ph-lit, .hero.hw .pext::after { transition: opacity 1.6s var(--ease); }
.hero.hw.camin .ph-lit { opacity: min(1, calc(var(--lum) * var(--lum) * 1.05 + .16)); }
.hero.hw.camin .pext::after { opacity: min(1, calc(var(--lum) * var(--lum) * 1.05 + .16)); }
.hero.hw .ph-leg { transition: opacity 1.6s var(--ease); }

/* ===== v22: the INTEG LT panel seated in the night scene =====
   The drawing is the app's original (plate, legends, knob untouched); only its light and its mount change: the plate dims
   with the panel light like the cockpit, the legends are backlit cool white, a soft key light from above, and the panel sits
   in a dark glass mount in the site's card style (thin cyan-tinted edge, deep shadow, inner highlight). */
.hero.hw { --kw: clamp(105px, 8.56vw, 145px); }   /* v29: another 20 % smaller */   /* v24: 20 % smaller than v22 */
.hero.hw .knob-wrap.big .ik { border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .7), 0 0 0 8px rgba(13, 19, 27, .86), 0 0 0 9px rgba(99, 210, 255, .16), inset 0 1px 0 rgba(255, 255, 255, .06),
    0 44px 70px -26px rgba(0, 0, 0, .95), 0 16px 30px -14px rgba(0, 0, 0, .85), 0 0 calc(70px * var(--lum)) -20px rgba(99, 170, 255, calc(.28 * var(--lum))); }
.hero.hw .knob-wrap.big .ik-plate { filter: brightness(calc(.2 + .36 * var(--lum))) saturate(.92); transition: filter .2s linear; }
.hero.hw .knob-wrap.big .ik-lg { fill: color-mix(in srgb, #eef5ff calc(35% + 65% * var(--lum)), #59626e); stroke: color-mix(in srgb, #eef5ff calc(35% + 65% * var(--lum)), #59626e);
  filter: drop-shadow(0 0 calc(3.5px * var(--lum)) rgba(175, 212, 255, calc(.6 * var(--lum)))); }
.hero.hw .knob-wrap.big .ik::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 12px; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(120% 70% at 50% -8%, rgba(170, 205, 255, calc(.05 + .12 * var(--lum))), transparent 62%); }
.hero.hw .knob-hint { margin-top: 24px; font: 600 12px/1.25 var(--cond); letter-spacing: .16em; text-transform: uppercase; color: var(--text-2); }

/* ===== v24: CLR on the real ECAM control panel, INTEG LT flies into the header knob ===== */
.hero.hw .ecpo { position: absolute; z-index: 3; opacity: 0; pointer-events: none; transition: opacity .7s var(--ease);
  filter: brightness(calc(.34 + .62 * var(--lum))) saturate(.9);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 1.2%, #000 98.8%, transparent), linear-gradient(180deg, transparent, #000 3%, #000 97%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 1.2%, #000 98.8%, transparent), linear-gradient(180deg, transparent, #000 3%, #000 97%, transparent);
  mask-composite: intersect; }
/* the lit CLR key carries its own light, so it reads through the dimmed plate */
.hero.hw .ecpo [data-pl$=".an"].an { filter: brightness(2.2) drop-shadow(0 0 3px rgba(235, 245, 255, .9)); }
.hero.hw.camecp .ecpo { opacity: 1; }
.hero.hw .ecpo svg { display: block; width: 100%; height: 100%; }
.hero.hw .ecpo .key { transform-box: fill-box; transform-origin: 50% 50%; transition: transform .12s ease-out; }
.hero.hw .ecpo .key.push { transform: scale(.9); }
.hero.hw .ecp-cap { position: absolute; z-index: 4; margin: 0; translate: -50% 0; opacity: 0; pointer-events: none; white-space: nowrap;
  font: 600 12px/1.2 var(--cond); letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); text-shadow: 0 1px 3px #000, 0 0 12px rgba(0, 0, 0, .9);
  transition: opacity .6s var(--ease), color .35s var(--ease); }
.hero.hw.camecp .ecp-cap { opacity: 1; }
.hero.hw .ecp-cap.done { color: var(--text); }
.hero.hw .ecp-cap.done::before { content: ""; display: inline-block; width: 9px; height: 5px; margin-right: 9px; border: solid var(--cyan); border-width: 0 0 2px 2px; rotate: -45deg; translate: 0 -3px; }
.hero.hw .dimmer.flown { opacity: 0 !important; visibility: hidden; pointer-events: none; }
.hero.hw .dimmer.flown .knob-hint { opacity: 0; }
.bar-knob { position: relative; }
.bar-knob.ping::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 1.5px rgba(99, 210, 255, .9), 0 0 18px rgba(99, 210, 255, .55); animation: knobPing 1.6s var(--out) both; }
@keyframes knobPing { 0% { transform: scale(.9); opacity: 0; } 18% { opacity: 1; } 100% { transform: scale(1.9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .bar-knob.ping::after { animation: none; opacity: 0; } }
/* v24: the device reads as "the same page on another device": a soft deep shadow towards the real displays */
.hero.hw.camin .dv.on { filter: drop-shadow(0 26px 40px rgba(0, 0, 0, .7)); }
.hero.hw .ecpo svg text { text-rendering: geometricPrecision; }

/* v24: two-line ghost CTA (Open in browser / Web app · Android, Windows, Mac); both CTAs share one height */
.hero .ctas .btn { min-height: 54px; }
.hero .btn-ghost { gap: 11px; padding: 0 22px 0 18px; }
.hero .btn-ghost .btn-globe { width: 20px; height: 20px; fill: none; flex: none; opacity: .9; }
.hero .btn-two { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.hero .btn-sub { font: 500 12px/1.1 var(--sans); letter-spacing: .02em; color: var(--text-2); white-space: nowrap; }
@media (max-width: 899px), (max-aspect-ratio: 1/1) { .hero .btn-two { align-items: center; } }

/* v26: the controls panel inside the iPad / browser screen */
.hero.hw.indev .ped { opacity: 1 !important; visibility: visible !important; transform: none; z-index: 4; border-radius: 8px;
  transition: opacity .6s var(--ease) .5s, left var(--mvt) var(--mv), top var(--mvt) var(--mv), width var(--mvt) var(--mv), height var(--mvt) var(--mv), visibility 0s; }
.hero.hw.indev .ped-l { font-size: clamp(9px, .8vw, 11px); bottom: 6px; left: 4px; right: 4px; white-space: normal; line-height: 1.15; }
.hero.hw.indev .ped-in { top: 8px; left: 8px; right: 8px; bottom: 30px; }

/* ===== v27: more faithful generic device frames (no logos) ===== */
.hero.hw .win-ewd.dev { transition: transform var(--mvt) var(--mv), clip-path var(--mvt) var(--mv), opacity .6s var(--ease), background .7s var(--ease), box-shadow .7s var(--ease); }
/* iPhone: black glass bezel, a thin metal band with a soft highlight, slim side buttons */
.hero.hw .dv-iphone { background: #050608;
  box-shadow: 0 0 0 1.6px #3a414a, 0 0 0 2.6px #12161b, 0 0 0 3.2px rgba(190, 210, 235, .32), inset 0 0 0 1px rgba(255, 255, 255, .05),
    0 44px 70px -30px rgba(0, 0, 0, .95), 0 0 90px -36px rgba(90, 150, 255, .3); }
.hero.hw .dv-iphone::before, .hero.hw .dv-iphone::after { content: ""; position: absolute; width: 2.5px; border-radius: 2px; background: linear-gradient(90deg, #2c333b, #59626d); }
.hero.hw .dv-iphone::before { left: -4.6px; top: 18%; height: 4.5%; box-shadow: 0 9cqh 0 0 #3d454e; }
.hero.hw .dv-iphone { container-type: size; }
.hero.hw .dv-iphone::before { box-shadow: 0 calc(7.5cqh) 0 0 #434b55, 0 calc(14.5cqh) 0 0 #434b55; }
.hero.hw .dv-iphone::after { right: -4.6px; top: 27%; height: 11%; background: linear-gradient(270deg, #2c333b, #59626d); }
/* iPad: even dark bezel, smaller radius */
.hero.hw .dv-ipad { background: linear-gradient(160deg, #15191e, #0a0c0f 60%);
  box-shadow: 0 0 0 1.3px #353c45, 0 0 0 2.2px rgba(190, 210, 235, .26), inset 0 1px 0 rgba(255, 255, 255, .06), 0 44px 70px -30px rgba(0, 0, 0, .95), 0 0 90px -36px rgba(90, 150, 255, .3); }
/* laptop: thin black screen bezel, aluminium base with hinge and opening notch, dimmed for the night scene */
.hero.hw .dv-mac { background: #07080a; box-shadow: 0 0 0 1.4px #3b424b, 0 0 0 2.2px rgba(190, 210, 235, .22), inset 0 1px 0 rgba(255, 255, 255, .05), 0 44px 70px -30px rgba(0, 0, 0, .95); }
.hero.hw .dv-base { width: 114%; border-radius: 2px 2px 12px 12px / 2px 2px 100% 100%;
  background: linear-gradient(180deg, #4d555f 0%, #3a4149 18%, #2a3037 70%, #1a1e23 100%);
  box-shadow: inset 0 1px 0 rgba(235, 242, 252, .32), inset 0 -1px 0 rgba(0, 0, 0, .5), 0 0 0 1px rgba(190, 210, 235, .18), 0 26px 40px -22px rgba(0, 0, 0, .95); }
.hero.hw .dv-base::after { content: ""; position: absolute; left: 6%; right: 6%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .55) 20%, rgba(0, 0, 0, .55) 80%, transparent); }
.hero.hw .dv-base::before { width: 13%; height: 38%; border-radius: 0 0 5px 5px; background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .25)); }
.hero.hw .dv-scr { box-shadow: 0 0 0 1px #000; }
.hero.hw .dv-gl { background: linear-gradient(152deg, rgba(210, 228, 255, .06), rgba(210, 228, 255, .01) 34%, transparent 46%); }
/* v27: the in-device controls panel in the app's own panel-window style, shrink-wrapped */
.hero.hw.indev .ped { border-radius: 9px; background: linear-gradient(180deg, #23272c, #1a1d21 40%, #16191c);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 255, 255, .09), 0 18px 30px -18px rgba(0, 0, 0, .8);
  transition: opacity .6s var(--ease) .5s, left var(--mvt) var(--mv), top .5s var(--ease), width .5s var(--ease), height .5s var(--ease), visibility 0s; }
.hero.hw.indev .ped-in { top: 8px; left: 8px; right: 8px; bottom: 26px; }
.hero.hw.indev .ped .pp { transition: opacity .4s var(--ease), scale .5s var(--out), filter .4s var(--ease); }

/* v27: CLR on the photo's own key: no drawn panel, only the key light, the cue and the press */
.hero.hw .ecpo { display: none; }
.hero.hw .ecp-clr { position: absolute; z-index: 3; pointer-events: none; border-radius: 12%; opacity: 0; transition: opacity .4s var(--ease); }
.hero.hw.camecp .ecp-clr, .hero.hw .ecp-clr.lit { opacity: 1; }
.hero.hw .ecp-clr::before { content: ""; position: absolute; left: 18%; right: 18%; top: 8%; height: 16%; border-radius: 1px; opacity: 0; transition: opacity .15s;
  background: rgba(236, 244, 255, .95); box-shadow: 0 0 2px rgba(236, 244, 255, .9), 0 0 6px rgba(200, 225, 255, .6); }
.hero.hw .ecp-clr.lit::before { opacity: 1; }
.hero.hw .ecp-clr::after { content: ""; position: absolute; inset: -22%; border-radius: 22%; opacity: 0; box-shadow: 0 0 0 1px rgba(99, 210, 255, .95), 0 0 6px rgba(99, 210, 255, .8); }
.hero.hw .ecp-clr.want::after { animation: clrCue 1.2s ease-in-out infinite; }
@keyframes clrCue { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.hero.hw .ecp-clr.push { box-shadow: inset 0 0 0 40px rgba(0, 0, 0, .45); transform: scale(.94); transition: transform .08s, box-shadow .08s; }

/* ===== v28: the iPad shows the app's 2D cockpit; the switch is tapped right on the panel ===== */
.hero.hw .dv-2d { background: #0b1016; }
.hero.hw .dv-ipad .dv-sim { opacity: 0; }
.hero.hw .dv-ipad .dv-2d { opacity: 1; }
.hero.hw .d2 { position: absolute; inset: 0; background-size: cover; background-position: 0% 50%; opacity: 0; transition: opacity .28s var(--ease);
  filter: brightness(.86) saturate(.95); }
.hero.hw .d2.on { opacity: 1; }
.hero.hw .d2-eng-a { opacity: 1; }
.hero.hw .dv-2d:has(.d2.on) .d2-eng-a:not(.on) { opacity: 0; }
.hero.hw .d2-tap { position: absolute; width: 9%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .55), rgba(255, 255, 255, .22) 60%, rgba(255, 255, 255, 0));
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .7); }
.hero.hw .d2-tap.go { animation: d2tap .75s var(--out) both; }
@keyframes d2tap { 0% { opacity: 0; transform: scale(.6); } 25% { opacity: 1; transform: scale(.85); } 100% { opacity: 0; transform: scale(1.6); } }
.hero.hw .d2-cap { position: absolute; left: 2.5%; bottom: 3%; padding: .35em .7em; border-radius: 99px; white-space: nowrap;
  font: 600 clamp(8px, .75vw, 11px)/1 var(--cond); letter-spacing: .1em; text-transform: uppercase; color: #e8f6ff;
  background: rgba(6, 10, 15, .78); box-shadow: 0 0 0 1px rgba(99, 210, 255, .4); }

/* v29: HD scene layers replace the 1920 canvases once decoded */
.hero.hw.hd canvas.ph-dark, .hero.hw.hd canvas.ph-lit { display: none; }
.hero.hw .phx { pointer-events: none; isolation: isolate; overflow: hidden; }
.hero.hw .phx img { max-width: none; }
/* v29: on phones the iPhone label in the end row is right-aligned to the device, so its second line stays inside the page */
@media (max-width: 560px) { .hero.hw .dv-iphone .dv-lab { left: auto; right: 0; translate: 0 4px; text-align: right; } .hero.hw .dv-iphone.lab-on .dv-lab { translate: 0 0; } .hero.hw .dv-iphone .dv-lab small { text-align: right; } }
/* v31: with the HD photo the processed legend glow is dropped (it bloomed the white knobs and ghosted on the MCDUs);
   the plain HD photo, dimmed to the night level, carries the legends. On the pedestal the integral lighting is up. */
.hero.hw.hd canvas.ph-leg { display: none; }
.hero.hw.hd .phx.ph-lit img { filter: brightness(.62) saturate(.8) contrast(1.08) !important; }
.hero.hw.camecp .ph-lit { opacity: .82; }

/* v32: SD CRUISE page drawn crisp over the photo's SD; the SD unit powers up with the other displays and stays on */
.hero.hw .sdu > .sd-cru { position: absolute; transition: opacity .5s var(--ease); }
.hero.hw .sdu.sts > .sd-cru { opacity: 0; }
.hero.hw .sdu > .sd-photo { opacity: 0; }
.hero.hw:not(.intro) .sdu { opacity: 1; transition: opacity .5s var(--ease) 1.1s; }
.still .hero.hw .sdu { opacity: 1; transition: none; }

/* ===== v33: the end row as a calm composition ===== */
.hero.hw .dv-floor { border-radius: 0; background:
  linear-gradient(90deg, transparent var(--fx0), rgba(170, 200, 240, .22) calc(var(--fx0) + 40px), rgba(170, 200, 240, .22) calc(var(--fx1) - 40px), transparent var(--fx1)) 0 var(--fy) / 100% 1px no-repeat,
  radial-gradient(60% 70% at 50% 55%, rgba(2, 4, 8, .9), rgba(2, 4, 8, .7) 55%, rgba(2, 4, 8, 0) 100%); }
/* contact shadow under each device, a faint reflection line */
.hero.hw.trio .dv.lab-on { filter: drop-shadow(0 14px 14px rgba(0, 0, 0, .65)); }
.hero.hw .dv-lab { font: 600 11.5px/1 var(--cond); letter-spacing: .16em; text-transform: uppercase; color: #dfe7f1; text-shadow: none; }
.hero.hw .dv-lab small { margin-top: 7px; font: 500 10px/1.1 var(--cond); letter-spacing: .08em; text-transform: none; color: var(--text-3); }
@media (max-width: 560px) {
  .hero.hw .dv-lab { font-size: 10.5px; letter-spacing: .12em; }
  .hero.hw .dv-lab small { font-size: 9.5px; letter-spacing: .04em; }
  .hero.hw .dv-iphone .dv-lab, .hero.hw .dv-iphone.lab-on .dv-lab { left: 50%; right: auto; translate: -50% 0; text-align: center; }
  .hero.hw .dv-iphone .dv-lab small { text-align: center; }
}

/* v34: the left extension follows the same night layers */
.hero.hw .ltile .phl { position: absolute; inset: 0; overflow: hidden; isolation: isolate; }
.hero.hw.hd .ltile .phl.ph-lit img { filter: brightness(.62) saturate(.8) contrast(1.08) !important; }
.hero.hw .dv-thr .mv { transition: none !important; }

/* ===== v36: end row from hero-ende/03 (from the depth), in the dark band at the bottom right ===== */
@media (min-width: 900px) and (min-aspect-ratio: 1/1) { .hero.hw .dv-floor { opacity: 0 !important; } }
.hero.hw .ek-float { animation: ekFloat 6s ease-in-out infinite; }
@keyframes ekFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
.hero.hw.trio .dv.lab-on { filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .75)); }
@media (prefers-reduced-motion: reduce) { .hero.hw .ek-float { animation: none; } }
/* end row: the small tablet has no room for the 2D hint, so it leaves with the fly-in */
.hero.hw.trio .d2-cap, .hero.hw.trio .d2-tap { opacity: 0; transition: opacity .4s; }