/* fasboard.com, single page. The desktop app's look (engine/fasboard-glass.css,
   packages/design/tokens.json): the soft colour field, glass cards with a bright
   rim, the plum accent and the system font. Layout rhythm after elevenlabs.io:
   very large tight headlines, pill buttons, a tabbed product showcase, a bento
   grid and a dark closing band. */
:root {
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --base: #EBE8F3;
  --text: #1D1B22;
  --muted: #625A6B;
  --accent: #281C32;
  --accent-2: #3D2A4D;
  --link: #5B3A7E;
  --surface: rgba(255, 255, 255, 0.56);
  --surface-strong: rgba(255, 255, 255, 0.82);
  --rim: rgba(255, 255, 255, 0.85);
  --edge: rgba(40, 28, 50, 0.10);
  --shadow: 0 24px 70px rgba(40, 28, 50, 0.14), 0 2px 8px rgba(40, 28, 50, 0.06);
  --working: #1B6B38; --working-bg: rgba(52, 199, 89, 0.16);
  --attention: #80540B; --attention-bg: rgba(255, 159, 10, 0.18);
  --test: #5B3A7E; --test-bg: rgba(122, 86, 168, 0.16);
  --eng: #34C77B; --eng-t: #DDF5E8;
  --cre: #FF8A5B; --cre-t: #FFE6DB;
  --mkt: #9B7BFF; --mkt-t: #ECE5FF;
  --fin: #4EA8FF; --fin-t: #DDEEFF;
  --radius: 28px;
  --radius-sm: 18px;
  --max: 1200px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  color: var(--text);
  background: var(--base);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video, iframe { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; letter-spacing: -0.035em; line-height: 1.02; font-weight: 700; }
p { margin: 0; }
.small { font-size: 14px; }
.muted { color: var(--muted); }

.skip { position: absolute; left: -999px; top: 8px; z-index: 50; padding: 10px 16px; border-radius: 999px; background: var(--accent); color: #fff; }
.skip:focus { left: 16px; }
:focus-visible { outline: 3px solid #7A56A8; outline-offset: 3px; border-radius: 10px; }

/* The colour field: four soft glows, as on the desktop. */
.field {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(42vw 42vw at 4% 2%, rgba(122, 86, 168, 0.42), transparent 70%),
    radial-gradient(40vw 40vw at 98% 6%, rgba(86, 140, 255, 0.30), transparent 70%),
    radial-gradient(44vw 44vw at 96% 96%, rgba(52, 196, 180, 0.24), transparent 70%),
    radial-gradient(40vw 40vw at 2% 98%, rgba(253, 130, 64, 0.20), transparent 70%),
    var(--base);
}

.glass {
  background: var(--surface);
  border: 1px solid var(--rim);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(28px) saturate(1.5);
  backdrop-filter: blur(28px) saturate(1.5);
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px; border-radius: 999px;
  font: 600 16px/1 var(--font); letter-spacing: -0.01em; text-decoration: none; white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-dark { color: #fff; background: linear-gradient(180deg, var(--accent-2), var(--accent)); box-shadow: 0 10px 26px rgba(40, 28, 50, 0.28); }
.btn-glass { color: var(--text); background: var(--surface-strong); border: 1px solid var(--rim); box-shadow: 0 6px 18px rgba(40, 28, 50, 0.08); }
.btn-sm { min-height: 38px; padding: 0 16px; font-size: 14px; }

/* Header */
.top { position: sticky; top: 12px; z-index: 20; padding: 0 16px; }
.bar {
  max-width: var(--max); margin: 0 auto; height: 60px; padding: 0 10px 0 18px;
  display: flex; align-items: center; gap: 28px; border-radius: 999px;
}
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font-weight: 700; font-size: 20px; letter-spacing: -0.04em; }
.links { display: flex; gap: 26px; list-style: none; margin: 0 0 0 auto; padding: 0; }
.links a { text-decoration: none; font-size: 15px; color: var(--muted); font-weight: 500; white-space: nowrap; }
.links a:hover { color: var(--text); }
.menu-btn { display: none; margin-left: auto; min-height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--edge); background: var(--surface-strong); font: 600 14px var(--font); color: var(--text); }
.phone-menu { max-width: var(--max); margin: 8px auto 0; border-radius: 22px; padding: 10px; display: grid; }
.phone-menu[hidden] { display: none; }
.phone-menu a { padding: 12px 14px; text-decoration: none; font-weight: 600; border-radius: 12px; }
.phone-menu a:hover { background: var(--surface-strong); }

/* Hero */
.hero { max-width: var(--max); margin: 0 auto; padding: 96px 16px 40px; text-align: center; }
.eyebrow-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px;
  background: var(--surface-strong); border: 1px solid var(--rim); font-size: 14px; font-weight: 600; color: var(--muted);
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: #34C759; box-shadow: 0 0 0 4px rgba(52, 199, 89, 0.18); }
.hero h1 { margin-top: 26px; font-size: clamp(48px, 8.4vw, 112px); letter-spacing: -0.055em; line-height: 0.96; }
.hero .lead { max-width: 640px; margin: 26px auto 0; font-size: clamp(18px, 2vw, 21px); color: var(--muted); line-height: 1.5; text-wrap: pretty; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 34px; }

/* Hero (2026-10-30): the headline over the Live office, centred like every section head below it.
   The FSB-10 studio photograph was retired: the Live office window is the picture. */
.hero-scene { position: relative; }
/* The painted floor of the department the Live office window shows (CLD-04 art, framed like the
   rest of the site's pictures); it changes with the window's tabs. */
.hero-art { position: relative; margin: 40px auto 0; max-width: 640px; aspect-ratio: 8 / 5; border-radius: 28px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.9); box-shadow: 0 30px 70px rgba(40, 28, 50, 0.22); background: #E6E1F1; }
.hero-art picture { position: absolute; inset: 0; transition: opacity .9s var(--ease), transform 1.6s var(--ease); }
.hero-art picture[hidden] { display: block; opacity: 0; visibility: hidden; transform: scale(1.04); transition: opacity .9s var(--ease), transform 1.6s var(--ease), visibility 0s .9s; }
.hero-art img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1024px) {
  .hero { max-width: 1392px; padding-top: 72px; }
  /* Headline on the left edge of the page grid, the painted floor beside it. */
  .hero-scene { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 56px; align-items: center; max-width: calc(var(--max) - 32px); margin: 0 auto; }
  .hero-copy { text-align: left; }
  .hero-copy h1 { font-size: clamp(52px, 5.4vw, 84px); }
  .hero-copy .lead { margin-left: 0; }
  .hero-copy .actions { justify-content: flex-start; }
  .hero-art { margin: 0; max-width: none; }
}
.stage { position: relative; margin: -8px auto 0; max-width: 1080px; }
@media (min-width: 1024px) { .stage { margin-top: 64px; } }
.window { border-radius: var(--radius); overflow: hidden; padding: 0; }
.window-bar { height: 46px; display: flex; align-items: center; gap: 14px; padding: 0 16px; border-bottom: 1px solid var(--edge); background: rgba(255, 255, 255, 0.5); }
.lights { display: inline-flex; gap: 7px; }
.lights i { width: 12px; height: 12px; border-radius: 50%; background: #FF5F57; }
.lights i:nth-child(2) { background: #FEBC2E; }
.lights i:nth-child(3) { background: #28C840; }
.window-title { flex: 1; text-align: center; font-size: 13px; font-weight: 600; color: var(--muted); }
.live-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--working); background: var(--working-bg); padding: 4px 10px; border-radius: 999px; }
.live-badge .dot { width: 7px; height: 7px; box-shadow: none; animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
/* The Live office fills the window edge to edge: one department floor at a time (story/floor.html has no frame,
   card or backdrop of its own), switched by the tabs in the window bar and in turn by itself. */
.window-body { position: relative; aspect-ratio: 3 / 2; background: #F6F4FA; }
/* Until the live office has loaded (after the page) the window shows a still of the floor; the live
   office then fades in over it. Without the script the still stays. */
.window-body .floor-still { position: absolute; inset: 0; transition: opacity .5s var(--ease); }
.window-body .floor-still img { width: 100%; height: 100%; object-fit: cover; }
.window-body .floor-still[hidden] { display: block; opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility 0s .5s; }
.window-body.live .floor-still { visibility: hidden; transition: visibility 0s .6s; }
.window-body iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; opacity: 0; transition: opacity .5s var(--ease); }
.window-body.live iframe { opacity: 1; }
/* A floor change: the room fades out, the next floor is drawn while it is hidden, and it fades back in. */
.window-body.switching iframe { opacity: 0; transition-duration: .32s; }
/* Off screen the room is not drawn at all (the frame keeps its document). */
.window-body.asleep iframe { display: none; }
.floor-tabs { display: flex; gap: 4px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.55); border: 1px solid var(--edge); }
.floor-tabs button { display: inline-flex; align-items: center; gap: 7px; border: 0; background: rgba(255, 255, 255, 0); font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); padding: 5px 12px; border-radius: 999px; cursor: pointer;
  transition: background .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease); }
.floor-tabs button:hover { color: var(--text); }
.floor-tabs button .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: none; }
.floor-tabs button[aria-selected="true"] { background: #fff; color: var(--text); box-shadow: 0 2px 8px rgba(40, 28, 50, 0.1); }
.floor-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (min-width: 1024px) { .window-title { flex: 0 1 auto; text-align: left; } .floor-tabs { margin-left: auto; } }

/* Over the moving office: a frosted card without a live backdrop blur (a blur would be redrawn every frame). */
.stage .float.glass, .stage .window.glass { -webkit-backdrop-filter: none; backdrop-filter: none; }
.stage .float.glass { background: rgba(255, 255, 255, 0.93); }
.stage .window.glass { background: rgba(255, 255, 255, 0.97); }
.float {
  position: absolute; display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  padding: 12px 16px; border-radius: 18px; font-size: 14px; font-weight: 600; text-align: left;
  animation: float 7s ease-in-out infinite;
}
.f1 { left: -46px; top: 22%; }
.f2 { right: -54px; top: 12%; animation-delay: -2.3s; max-width: 250px; }
.f3 { right: 6%; bottom: -30px; animation-delay: -4.6s; }
/* Without room beside the window, the chips sit just inside its edges rather than past the screen edge. */
@media (max-width: 1240px) { .f1 { left: 14px; } .f2 { right: 14px; } }
@keyframes float { 50% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .float, .live-badge .dot { animation: none; } }
.chip { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.chip-working { color: var(--working); background: var(--working-bg); }
.chip-attention { color: var(--attention); background: var(--attention-bg); border: 1px solid rgba(253, 130, 64, 0.5); }
.chip-test { color: var(--test); background: var(--test-bg); }

/* Tools strip */
.strip { max-width: var(--max); margin: 96px auto 0; padding: 0 16px; text-align: center; }
.strip > p:first-child { font-size: 15px; font-weight: 600; color: var(--muted); }
.tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; list-style: none; margin: 18px 0 14px; padding: 0; }
.tools li { padding: 12px 26px; border-radius: 999px; background: var(--surface-strong); border: 1px solid var(--rim); font-size: 22px; font-weight: 700; letter-spacing: -0.03em; box-shadow: 0 8px 22px rgba(40, 28, 50, 0.07); }

/* Sections */
.section { max-width: var(--max); margin: 0 auto; padding: 150px 16px 0; }
.section.narrow { max-width: 860px; }
.head { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--link); }
.head h2 { margin-top: 14px; font-size: clamp(38px, 5.6vw, 72px); letter-spacing: -0.05em; }
.intro { margin-top: 20px; font-size: 19px; color: var(--muted); text-wrap: balance; }

/* Showcase */
.showcase { display: grid; grid-template-columns: 380px 1fr; gap: 28px; align-items: stretch; }
.steps { display: grid; gap: 6px; align-content: start; }
.steps button {
  position: relative; overflow: hidden; display: grid; grid-template-columns: 38px 1fr; gap: 12px; text-align: left;
  padding: 18px 18px 20px; border: 1px solid transparent; border-radius: 20px; background: transparent;
  font: inherit; color: var(--muted); cursor: pointer; transition: background .2s, color .2s, border-color .2s;
}
.steps button:hover { background: rgba(255, 255, 255, 0.4); }
.steps .n { font: 600 13px/1.9 var(--mono); }
.steps .t { display: grid; gap: 6px; }
.steps b { font-size: 19px; letter-spacing: -0.025em; color: var(--text); }
.steps small { font-size: 15px; line-height: 1.45; display: none; }
.steps [aria-selected="true"] { background: var(--surface-strong); border-color: var(--rim); box-shadow: 0 10px 30px rgba(40, 28, 50, 0.08); color: var(--muted); }
.steps [aria-selected="true"] small { display: block; }
.bar-progress { position: absolute; left: 18px; right: 18px; bottom: 8px; height: 2px; border-radius: 2px; background: transparent; transform-origin: left; transform: scaleX(0); }
.steps [aria-selected="true"] .bar-progress { background: linear-gradient(90deg, #7A56A8, #F45264); animation: progress var(--step-ms, 6500ms) linear forwards; }
.showcase.paused .bar-progress { animation-play-state: paused; }
@keyframes progress { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .steps [aria-selected="true"] .bar-progress { animation: none; transform: scaleX(1); } }

.panels { position: relative; border-radius: var(--radius); padding: 28px; min-height: 560px; display: grid; }
[hidden] { display: none !important; }
.panel { margin: 0; display: grid; place-items: center; animation: fade .45s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } }
/* One whole subject per step, as large as the panel allows. */
.panel picture { display: block; width: min(100%, 680px); }
.panel img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; box-shadow: 0 16px 44px rgba(40, 28, 50, 0.12); }
/* A crop that ends inside a column fades out instead of stopping at a hard edge. */
.fade { -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent); mask-image: linear-gradient(to bottom, #000 80%, transparent); box-shadow: none !important; }
.m-cap { display: none; }

/* Departments */
.depts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.dept { border-radius: var(--radius); overflow: hidden; background: var(--t); border: 1px solid rgba(255, 255, 255, 0.9); box-shadow: var(--shadow); display: grid; grid-template-rows: auto 1fr; }
.dept img { width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; background: rgba(255, 255, 255, 0.5); }
.dept > div { padding: 22px 22px 24px; display: grid; gap: 8px; align-content: start; background: rgba(255, 255, 255, 0.72); }
.light { width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 5px var(--t); }
.dept h3 { font-size: 26px; margin-top: 6px; }
.dept p { color: var(--muted); font-size: 16px; }
.jobs { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 8px 0 0; padding: 0; }
.jobs li { font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--t); color: var(--text); }

/* Features (FSB-11 clay images): one card per feature, the picture on its own lilac stage. */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feature { border-radius: var(--radius); overflow: hidden; background: var(--surface-strong); border: 1px solid var(--rim); box-shadow: var(--shadow); display: grid; grid-template-rows: auto 1fr; }
.feature picture { display: block; overflow: hidden; background: #E6E1F1; }
.feature img { width: 100%; height: auto; transition: transform .6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.feature:hover img { transform: scale(1.035); }
.feature-text { padding: 22px 24px 26px; display: grid; gap: 8px; align-content: start; }
.feature h3 { font-size: 22px; letter-spacing: -0.03em; line-height: 1.15; }
.feature p { color: var(--muted); font-size: 16px; }

/* Inside the app (FSB-12 framed screenshots): each device sits in a rounded card of its own stage. */
.screens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.screen { margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--surface-strong); border: 1px solid var(--rim); box-shadow: var(--shadow); display: grid; grid-template-rows: auto 1fr; }
.screen-wide { grid-column: 1 / -1; }
.screen picture { display: block; background: #ECE8F2; }
.screen img { width: 100%; height: auto; }
.screen figcaption { padding: 18px 24px 22px; display: grid; gap: 4px; font-size: 15px; color: var(--muted); }
.screen figcaption b { color: var(--text); font-size: 18px; letter-spacing: -0.02em; }
.screen-wide figcaption { text-align: center; }
/* On a desktop the wide card puts its words beside the laptop, so the card stays within one screen. */
@media (min-width: 1024px) {
  .screen-wide { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: none; align-items: center; }
  .screen-wide figcaption { text-align: left; padding: 32px 40px; gap: 10px; font-size: 17px; }
  .screen-wide figcaption b { font-size: 28px; letter-spacing: -0.03em; }
}

/* Product film */
.film { max-width: 1000px; margin: 0 auto 88px; text-align: center; }
.film video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 28px; background: #120D18; box-shadow: 0 30px 70px rgba(40, 28, 50, 0.22); }
.film figcaption { margin-top: 18px; font-size: 15px; color: var(--muted); display: grid; gap: 4px; }
.film figcaption b { color: var(--text); font-size: 18px; letter-spacing: -0.02em; }

/* Reels */
.reels { display: flex; justify-content: center; gap: 36px; flex-wrap: wrap; }
.reel { margin: 0; width: 290px; text-align: center; }
.phone {
  position: relative; display: block; width: 100%; aspect-ratio: 9 / 19.5; padding: 10px; border: 0; cursor: pointer;
  border-radius: 46px; background: linear-gradient(160deg, #2B2034, #120D18); box-shadow: 0 30px 70px rgba(40, 28, 50, 0.32), inset 0 0 0 2px rgba(255, 255, 255, 0.08);
}
.phone video { width: 100%; height: 100%; object-fit: cover; border-radius: 37px; background: #111; }
.play { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: rgba(255, 255, 255, 0.86); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); transition: opacity .2s, transform .2s; }
.play::after { content: ""; position: absolute; left: 29px; top: 23px; border-style: solid; border-width: 13px 0 13px 21px; border-color: transparent transparent transparent var(--accent); }
.phone.playing .play { opacity: 0; transform: scale(.85); }
.phone:hover .play { transform: scale(1.06); }
.reel figcaption { margin-top: 18px; font-size: 15px; color: var(--muted); display: grid; gap: 4px; }
.reel figcaption b { color: var(--text); font-size: 18px; letter-spacing: -0.02em; }

/* Bento */
.bento { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.tile { border-radius: var(--radius); padding: 30px; display: grid; grid-template-rows: auto 1fr; gap: 24px; overflow: hidden; }
.tile .art { align-self: end; }
.tile picture { display: block; align-self: end; }
.tile h3 { font-size: 28px; }
.tile-text p { margin-top: 12px; color: var(--muted); font-size: 16px; }
.art { width: 100%; height: auto; border-radius: 18px; background: rgba(255, 255, 255, 0.7); }
.art.shot { background: none; }
.fineprint { margin-top: 26px; text-align: center; font-size: 13px; color: var(--muted); }

/* FAQ */
.faq { display: grid; gap: 10px; }
.faq details { border-radius: 20px; background: var(--surface-strong); border: 1px solid var(--rim); box-shadow: 0 8px 22px rgba(40, 28, 50, 0.06); scroll-margin-top: 110px; }
.faq summary { list-style: none; cursor: pointer; padding: 20px 56px 20px 24px; position: relative; font-weight: 650; font-size: 18px; letter-spacing: -0.015em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); font-size: 24px; font-weight: 400; color: var(--muted); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding: 0 24px 22px; color: var(--muted); }

/* Closing band (the desktop's dark field) */
.closing { margin: 160px 16px 0; border-radius: 40px; overflow: hidden; position: relative; color: #F5F5F7;
  background:
    radial-gradient(60% 80% at 10% 0%, rgba(122, 86, 168, 0.55), transparent 70%),
    radial-gradient(50% 70% at 100% 10%, rgba(56, 100, 255, 0.32), transparent 70%),
    radial-gradient(50% 70% at 90% 100%, rgba(20, 170, 160, 0.26), transparent 70%),
    radial-gradient(40% 60% at 0% 100%, rgba(253, 130, 64, 0.18), transparent 70%),
    #07060C; }
/* The blue-hour desk (FSB-10 dusk-1) under a dark wash: the lamp and the window glow show at the right. */
.closing-photo { position: absolute; inset: 0; }
.closing-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; }
.closing-photo::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60% 80% at 10% 0%, rgba(122, 86, 168, 0.35), transparent 70%),
    linear-gradient(90deg, rgba(7, 6, 12, 0.92), rgba(7, 6, 12, 0.78) 55%, rgba(7, 6, 12, 0.38));
}
.closing-inner { position: relative; z-index: 1; }
.closing-inner { max-width: 900px; margin: 0 auto; padding: 120px 24px; text-align: center; display: grid; justify-items: center; gap: 22px; }
.closing h2 { font-size: clamp(42px, 6.8vw, 92px); letter-spacing: -0.055em; }
.closing p { max-width: 560px; color: #B6ABBE; font-size: 19px; }
.platforms { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; list-style: none; margin: 14px 0 0; padding: 0; }
.platforms li { display: grid; gap: 2px; padding: 14px 22px; border-radius: 18px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); text-align: left; }
.platforms b { font-size: 16px; }
.platforms span { font-size: 13px; color: #C9B3E6; }

/* Footer: the brand and line on the left, every page in three groups on the right, each group's links aligned under its label. */
.foot { max-width: var(--max); margin: 0 auto; padding: 56px 16px 64px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); grid-template-rows: auto 1fr; align-items: start; gap: 18px 48px; }
.foot > .brand, .foot > p { grid-column: 1; }
.foot > .brand { justify-self: start; }
.footer-nav { grid-column: 2; grid-row: 1 / span 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; }
.footer-group-label { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--link); }
.footer-nav ul { display: grid; list-style: none; margin: 8px 0 0; padding: 0; }
.footer-nav a { display: inline-flex; align-items: center; min-height: 36px; text-decoration: none; color: var(--muted); font-size: 14px; font-weight: 500; }
.footer-nav a:hover { color: var(--text); }

/* Narrow screens */
@media (max-width: 1080px) {
  .float { display: none; }
  .showcase { grid-template-columns: 1fr; }
  /* The 6px top padding keeps a focused tab's outline inside the scrolling rail. */
  .steps { grid-auto-flow: column; grid-auto-columns: minmax(210px, 1fr); overflow-x: auto; scroll-snap-type: x mandatory; padding-top: 6px; margin-top: -6px; padding-bottom: 4px; }
  .steps button { scroll-snap-align: start; }
  .steps small { display: block; }
  .depts { grid-template-columns: repeat(2, 1fr); }
  .features { grid-template-columns: repeat(2, 1fr); }
  /* The brand and line sit above the group row, which starts at the footer's left content edge. */
  .foot { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .footer-nav { grid-column: 1; grid-row: auto; margin-top: 12px; }
}
/* The header links fit on one line down to about 920 px; below that the Menu button takes over. */
@media (max-width: 920px) {
  .links, .bar > .btn { display: none; }
  .menu-btn { display: inline-flex; align-items: center; }
  .bar { gap: 12px; }
}
@media (max-width: 760px) {
  .bar { height: 56px; }
  body { font-size: 16px; }
  .hero { padding-top: 64px; }
  .stage { margin-top: 48px; }
  .window-bar { flex-wrap: wrap; height: auto; padding: 10px 12px; row-gap: 10px; }
  .window-title { display: none; }
  .floor-tabs { order: 3; width: 100%; justify-content: space-between; }
  .floor-tabs { display: grid; grid-template-columns: repeat(4, 1fr); }
  .floor-tabs button { justify-content: center; padding: 5px 2px; font-size: 11.5px; gap: 4px; }
  .floor-tabs button .dot { width: 6px; height: 6px; }
  .live-badge { margin-left: auto; }
  .section { padding-top: 110px; }
  .head { margin-bottom: 36px; }
  .intro { font-size: 17px; }
  .panels { padding: 12px; min-height: 0; }
  .steps { grid-auto-columns: max-content; }
  .steps button { grid-template-columns: auto auto; padding: 12px 16px 14px; }
  .steps small { display: none !important; }
  .steps b { font-size: 16px; white-space: nowrap; }
  .m-cap { display: block; grid-column: 1 / -1; margin-top: 14px; color: var(--muted); font-size: 15px; text-align: left; }
  .depts, .bento, .features, .screens { grid-template-columns: 1fr; }
  .feature-text { padding: 18px 20px 22px; }
  .screen figcaption { padding: 16px 20px 20px; }
  .tile { padding: 22px; }
  .reels { gap: 28px; }
  .film { margin-bottom: 64px; }
  .film video { border-radius: 18px; }
  .reel { width: min(290px, 80vw); }
  .tools li { font-size: 18px; padding: 10px 20px; }
  .closing { margin-top: 110px; border-radius: 30px; }
  .closing-inner { padding: 84px 20px; }
  .footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Below 768 px the tab rail scrolls sideways to the screen edges. It fades over its last 24 px, so a cut tab reads as more to scroll,
   and over its first 10 px, so a tab scrolled past the left edge fades rather than stops. The padding lets the first and last
   tabs scroll fully clear of both fades, and keeps every tab's focus outline inside the rail. */
@media (max-width: 767.98px) {
  .steps {
    margin: -6px -16px; padding: 6px 32px 10px 16px; scroll-padding-inline: 16px;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 10px, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 10px, #000 calc(100% - 24px), transparent);
  }
}

/* Entrance motion (2026-10-30): section heads and cards rise into place once as they come into view, one after
   another within a group, starting just before they show and lasting about half a second. Only with the script (it sets .motion) and never with reduced motion, so the page is
   complete without it. */
.motion .rv { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: calc(var(--i, 0) * 60ms); }
.motion .rv.in { opacity: 1; transform: none; }

/* Reduced motion: no animation, transition or smooth scrolling anywhere on the page. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}