/* CloudySystem W14 — integrated light header + prominent approved brand, enterprise mega navigation,
   footer brand band, and the scroll-stage choreography (platform 8 domains, needs beats).
   Loaded last on all 12 pages. */

/* ===================== 1 · HEADER: one calm light surface ===================== */
:root { --header-h: 80px; --brand-s: .6; }
@media (max-width: 1080px) { :root { --header-h: 68px; --brand-s: .46; } }
@media (max-width: 640px)  { :root { --header-h: 66px; --brand-s: .43; } }
@media (max-width: 359px)  { :root { --brand-s: .41; } }

.site-header.is-light {
  background: rgb(251 250 247 / .94);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid rgb(16 34 80 / .09);
  box-shadow: 0 1px 0 rgb(255 255 255 / .7) inset;
  transition: box-shadow var(--dur-2), background var(--dur-2);
}
.site-header.is-light.is-scrolled { background: rgb(251 250 247 / .97); border-color: rgb(16 34 80 / .1); box-shadow: 0 12px 32px -22px rgb(6 14 40 / .55); }
.site-header.is-light.has-mega, .site-header.is-light.has-drawer { background: #fbfaf7; }
.site-header__inner { gap: clamp(1rem, .4rem + 1.6vw, 2.25rem); }

/* Approved wordmark, unchanged pixels. The crop box clips only the file's fully transparent margins
   (opaque art spans x 6–313, y 21–85 of 320×107; the box keeps x 5–315, y 20–87). */
.brand { display: inline-flex; align-items: center; flex: none; border-radius: 10px; }
.brand__crop { position: relative; display: block; overflow: hidden; width: calc(310px * var(--brand-s)); height: calc(67px * var(--brand-s)); }
.brand .brand__img {
  position: absolute; left: calc(-5px * var(--brand-s)); top: calc(-20px * var(--brand-s));
  width: calc(320px * var(--brand-s)); height: calc(107px * var(--brand-s)); max-width: none;
}
.brand:focus-visible { outline-offset: 6px; }

/* Nav items on the light surface */
.site-header.is-light .mega__top { color: #26324f; font-weight: 500; font-size: 1rem; min-height: 44px; padding-inline: .9rem; }
.site-header.is-light .mega__top:hover { color: #0a1430; background: rgb(16 34 80 / .055); }
.site-header.is-light .mega__top[aria-expanded="true"] { color: #1747b8; background: rgb(45 108 240 / .09); }
.site-header.is-light .mega__top[aria-current="page"] { color: #0a1430; font-weight: 600; }
.site-header.is-light .mega__top[aria-current="page"]::after { background: #2d6cf0; }
.site-header.is-light .lang { color: #4b5776; border-color: rgb(16 34 80 / .14); background: #fff; }
.site-header.is-light .icon-btn { color: #1c2742; border-color: rgb(16 34 80 / .16); background: #fff; }
.site-header.is-light .btn--primary { box-shadow: 0 8px 20px -10px rgb(31 99 232 / .6); }

/* 2 · 3 · Mega panels and the mobile drawer: superseded by the W15 customer-first navigation (w15.css). */

/* ===================== 4 · FOOTER: light brand band + dark link columns ===================== */
.site-footer--rich { padding-top: 0; }
.footer-band { background: linear-gradient(180deg, #fbfaf7, #f2f4f9); border-block: 1px solid rgb(16 34 80 / .08); }
.footer-band__inner { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: 2rem clamp(2rem, 1rem + 4vw, 5rem); align-items: center; padding-block: clamp(2.5rem, 2rem + 2.5vw, 4rem); }
.footer-band__brand { display: grid; gap: .6rem; justify-items: start; }
.footer-band .brand { --brand-s: .76; }
.footer-band__tag { margin-top: .35rem; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.2rem, 1rem + .7vw, 1.55rem); color: #0a1430; line-height: 1.4; }
.footer-band__about { max-width: 44ch; color: #3d4966; font-size: .95rem; line-height: 1.9; }
.footer-band .footer-cta { margin: 0; padding: 0; border: 0; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; padding-inline-start: clamp(1.5rem, 1rem + 2vw, 3rem); border-inline-start: 1px solid rgb(16 34 80 / .1); }
.footer-band .footer-cta__title { max-width: 30ch; }
.footer-cta__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.site-footer--rich > .wrap { padding-top: clamp(2.25rem, 1.75rem + 2vw, 3.25rem); }
.footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 860px) {
  .footer-band__inner { grid-template-columns: minmax(0, 1fr); }
  .footer-band .footer-cta { padding-inline-start: 0; border-inline-start: 0; padding-top: 1.5rem; border-top: 1px solid rgb(16 34 80 / .1); }
  .footer-band .brand { --brand-s: .6; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } .footer-cta__actions .btn { width: 100%; } }

/* Header offsets that were hard-coded for the old 68px header */
.pf-tabs, .pf-screen { top: calc(var(--header-h) + 24px); }


/* ===================== 5 · PLATFORM: eight domains as a guided stage ===================== */
.pf { display: block; position: relative; }
.pf-sticky { display: grid; gap: .85rem; min-width: 0; }
.pf-stagebar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.5rem; }
.pf-hint { margin: 0; color: var(--text-3); font-size: var(--fs-meta); }
.pf-hint__scroll { display: none; }
.pf.is-staged .pf-hint__scroll { display: inline; }
.pf.is-staged .pf-hint__manual { display: none; }
.pf-ctrl { display: flex; align-items: center; gap: .5rem; }
.pf-nav { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-3); background: var(--surface-1); color: var(--text-1); cursor: pointer; transition: border-color var(--dur-1), background var(--dur-1); }
.pf-nav svg { width: 18px; height: 18px; }
.pf-nav:hover:not(:disabled) { border-color: var(--blue-400); }
.pf-nav:disabled { opacity: .35; cursor: default; }
.pf-nav:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.pf-count { min-width: 3.5em; text-align: center; font-variant-numeric: tabular-nums; color: var(--text-2); direction: ltr; font-weight: 600; }

/* The rail: one horizontal row that physically glides to the active domain (RTL-safe centring in stage.js). */
.pf-rail { position: relative; min-width: 0; }
.pf .pf-tabs {
  position: static; display: flex; gap: .6rem; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  padding: .3rem .2rem .55rem; margin: -.3rem -.2rem 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent);
}
.pf .pf-tabs::-webkit-scrollbar { display: none; }
.pf .pf-tab {
  position: relative; flex: 0 0 auto; width: auto; min-width: 214px; max-width: 300px; grid-template-columns: 40px auto; gap: .7rem; padding: .8rem .9rem;
  border-radius: 16px; border: 1px solid var(--line-2); background: var(--surface-1);
  transition: border-color var(--dur-2), box-shadow var(--dur-2), background var(--dur-2), transform var(--dur-2) var(--ease-out);
}
.pf .pf-tab svg { width: 40px; height: 40px; padding: 9px; border-radius: 12px; transition: background var(--dur-2), color var(--dur-2); }
.pf .pf-tab b { font-size: .98rem; white-space: nowrap; }
.pf .pf-tab small { display: block; font-size: var(--fs-meta); }
.pf-tab__n { color: var(--blue-300); font-weight: 600; }
.pf .pf-tab::after { content: ""; position: absolute; inset-inline: 14px; bottom: -1px; height: 3px; border-radius: 3px; background: var(--blue-400); transform: scaleX(0); transition: transform var(--dur-2) var(--ease-out); }
.pf .pf-tab[aria-selected="true"] { border-color: var(--blue-400); box-shadow: 0 16px 34px -22px rgb(31 99 232 / .65); transform: translateY(-2px); }
.pf .pf-tab[aria-selected="true"]::after { transform: scaleX(1); }
.pf .pf-tab.is-past svg { background: var(--blue-tint-2); }
.pf .pf-tab:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Progress thread: eight stations; continuous with scroll in stage mode, per selection otherwise. */
.pf-progress { position: relative; height: 4px; border-radius: 4px; background: var(--line-2); margin-top: -.15rem; }
.pf-progress i { position: absolute; inset-block: 0; inset-inline-start: 0; width: calc((var(--pf-k, 0) + 1) / 8 * 100%); border-radius: inherit; background: linear-gradient(270deg, var(--blue-400), var(--blue-600)); transition: width var(--dur-2) var(--ease-out); }
.pf.is-staged .pf-progress i { width: calc(var(--stage-p, 0) * 100%); min-width: calc(100% / 8 * .35); transition: width .12s linear; }
.pf-progress span { position: absolute; top: 50%; inset-inline-start: calc((var(--i) + 1) / 8 * 100%); width: 8px; height: 8px; margin-inline-start: -8px; border-radius: 50%; background: var(--bg-1); border: 2px solid var(--line-3); transform: translateY(-50%); }
.pf-progress span:last-child { margin-inline-start: -8px; }

/* Panel crossfade with 8–16px depth (no blank frames: the new panel is drawn immediately). */
@keyframes pfIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes pfScreenIn { from { opacity: 0; transform: perspective(900px) translateY(16px) translateZ(-16px); } to { opacity: 1; transform: none; } }
.pf-panel.is-entering > .pf-intro { animation: pfIn .5s var(--ease-out) both; }
.pf-panel.is-entering > .pf-mods { animation: pfIn .5s .06s var(--ease-out) both; }
.pf-panel.is-entering > .pf-screen { animation: pfScreenIn .6s .1s var(--ease-out) both; }
.pf.is-measuring .pf-panel > * { animation: none !important; }

@media (min-width: 1081px) {
  .pf-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1fr); grid-template-areas: "intro mods screen"; gap: 1.25rem 1.5rem; padding: 1.4rem 1.5rem; }
  .pf-screen { position: static; }
  .pf-intro { gap: .6rem; }
  .pf-intro h3 { font-size: clamp(1.2rem, 1rem + .5vw, 1.45rem); }
  .pf-lead { font-size: .95rem; line-height: 1.8; }
  .pf-scene p { font-size: .9rem; line-height: 1.8; }
  .pf-mods { grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: .45rem; }
  .pf-mod { padding: .6rem .7rem; }
  .pf-mod b { font-size: .9rem; line-height: 1.5; }
  .pf-mod span { font-size: .82rem; line-height: 1.6; }
}
/* Stage mode: a finite runway (8 segments) behind a sticky stage. No blank viewport: the stage is always drawn. */
.pf.is-staged::after { content: ""; display: block; height: var(--stage-run, 0px); }
.pf.is-staged .pf-sticky { position: sticky; top: calc(var(--header-h) + 12px); min-height: var(--pf-sticky-h, auto); align-content: start; }
.pf.is-staged, .pf.is-staged * { overflow-anchor: none; }

@media (max-width: 1080px) {
  .pf .pf-tab { width: auto; min-width: 0; max-width: 78vw; grid-template-columns: 32px auto; padding: .55rem .8rem; scroll-snap-align: center; }
  .pf .pf-tabs { scroll-snap-type: x proximity; }
  .pf .pf-tab svg { width: 32px; height: 32px; padding: 7px; }
  .pf .pf-tab small { display: none; }
  .pf .pf-tab[aria-selected="true"] { transform: none; }
}
@media (max-width: 600px) {
  .pf-stagebar { flex-wrap: nowrap; }
  .pf-hint { flex: 1; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pf-panel.is-entering > * { animation: none !important; }
  .pf .pf-tab, .pf .pf-tab::after, .pf-progress i { transition: none; }
  .pf .pf-tab[aria-selected="true"] { transform: none; }
}

/* ===================== 6 · NEEDS: beats read as a vertical sequence ===================== */
.nd-beats { position: relative; }
.nd-beats::before { content: ""; position: absolute; inset-inline-start: 1.05rem; top: .9rem; bottom: .9rem; width: 2px; border-radius: 2px; background: var(--line-2); }
.nd-beats::after { content: ""; position: absolute; inset-inline-start: 1.05rem; top: .9rem; width: 2px; height: calc((100% - 1.8rem) * var(--nd-p, 0)); border-radius: 2px; background: var(--blue-400); transition: height .45s var(--ease-out); }
.nd-beats li { position: relative; z-index: 1; transition: background var(--dur-2); border-radius: 12px; }
.nd-beats__n { position: relative; background: var(--surface-2); color: var(--text-3); transition: background var(--dur-2), color var(--dur-2), box-shadow var(--dur-2); }
.nd-beats li.is-lit .nd-beats__n { background: rgb(47 123 255 / .16); color: var(--blue-300); }
.nd-beats li.is-now .nd-beats__n { background: var(--blue-600); color: #fff; box-shadow: 0 0 0 4px rgb(47 123 255 / .18); }
.nd-beats li.is-now { background: linear-gradient(270deg, rgb(47 123 255 / .07), transparent 70%); }
@media (prefers-reduced-motion: reduce) { .nd-beats::after, .nd-beats li, .nd-beats__n { transition: none; } }