/* ==========================================================================
   FLORNO — design system v4 "Daybreak Commerce"
   Deep navy night → warm ivory daylight. Physical goods meet digital
   commerce: amber & coral carry trade and storefront energy, teal carries
   technology and movement, pearl highlights lift the dark sections.
   Type: Satoshi (display) / General Sans (text).
   ========================================================================== */

/* ---------- Self-hosted webfonts (Fontshare free fonts, ITF FFL) ---------- */
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/satoshi-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/satoshi-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/satoshi-900.woff2") format("woff2");
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("../fonts/general-sans-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("../fonts/general-sans-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("../fonts/general-sans-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* night side */
  --navy-950: #06101d;
  --navy-900: #0a1a2e;
  --navy-850: #0e2238;
  --navy-800: #142c46;
  --navy-700: #1e3d5e;

  /* day side */
  --ivory: #f7f1e6;
  --ivory-2: #fbf7ee;
  --stone: #efe7d6;
  --stone-2: #e3d8c2;
  --pearl: #fffdf7;

  /* ink on day */
  --char: #1b2737;
  --char-soft: #47586c;
  --char-dim: #5b6d83;

  /* ink on night */
  --snow: #f3f0e8;
  --snow-soft: #bfcbd9;
  --snow-dim: #8296ac;

  /* brand accents */
  --teal: #2ec4b0;
  --teal-bright: #5bdfcc;
  --teal-deep: #0c7163;
  --amber: #efa64b;
  --amber-deep: #8f5a0c;
  --coral: #e5704e;
  --coral-deep: #c24d2d;
  --slateblue: #5e82ab;

  --grad-warm: linear-gradient(115deg, #f4b05c 0%, #e5704e 100%);
  --grad-warm-soft: linear-gradient(115deg, rgba(244, 176, 92, 0.16), rgba(229, 112, 78, 0.16));

  /* type */
  --font-display: "Satoshi", "Avenir Next", "Segoe UI", -apple-system, sans-serif;
  --font-body: "General Sans", "Segoe UI", -apple-system, sans-serif;

  /* layout */
  --container: 1180px;
  --gutter: clamp(1.25rem, 3.8vw, 2.6rem);
  --sec-pad: clamp(4.2rem, 8vw, 7rem);
  --r-card: 18px;
  --r-chip: 12px;
  --r-pill: 999px;

  --ease: cubic-bezier(0.33, 0.9, 0.45, 1);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");

  /* legacy aliases (used by inline styles on a few pages) */
  --amber-legacy: var(--amber);
  --text: var(--snow);

  /* -------- contextual tokens: dark defaults -------- */
  --sx-head: var(--snow);
  --sx-body: var(--snow-soft);
  --sx-mute: var(--snow-dim);
  --sx-line: rgba(243, 240, 232, 0.1);
  --sx-line-strong: rgba(243, 240, 232, 0.22);
  --sx-card: #102339;
  --sx-card-2: #0d1d30;
  --sx-card-line: rgba(243, 240, 232, 0.12);
  --sx-chip: rgba(243, 240, 232, 0.05);
  --sx-link: #4cd6c2;
  --sx-link-hover: #7ce8d9;
  --sx-accent: var(--amber);
  --sx-accent-text: var(--amber);
  --sx-field-bg: rgba(6, 16, 29, 0.55);
  --sx-field-line: rgba(243, 240, 232, 0.26);
  --sx-focus: var(--teal-bright);
  --sx-shadow: 0 30px 60px -30px rgba(2, 8, 18, 0.85);
}

/* light context — warm ivory sections */
.theme-light,
.section:not(.section--ink):not(.section--deep),
.cta-band {
  --sx-head: var(--char);
  --sx-body: var(--char-soft);
  --sx-mute: var(--char-dim);
  --sx-line: rgba(27, 39, 55, 0.11);
  --sx-line-strong: rgba(27, 39, 55, 0.26);
  --sx-card: var(--pearl);
  --sx-card-2: #fbf5e9;
  --sx-card-line: rgba(27, 39, 55, 0.1);
  --sx-chip: rgba(27, 39, 55, 0.05);
  --sx-link: var(--teal-deep);
  --sx-link-hover: #0b6b5f;
  --sx-accent: var(--coral);
  --sx-accent-text: var(--amber-deep);
  --sx-field-bg: #ffffff;
  --sx-field-line: #d6cab2;
  --sx-focus: var(--teal-deep);
  --sx-shadow: 0 26px 50px -28px rgba(27, 39, 55, 0.28);
}

/* ---------- Reset / base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  /* global ~10% scale reduction: every rem-based size derives from this */
  font-size: 91%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

[id] { scroll-margin-top: 86px; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--snow-soft);
  background: var(--navy-900);
  overflow-x: hidden;
}

img, svg, canvas, video { display: block; max-width: 100%; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--sx-head);
  margin: 0 0 0.55em;
}

h1 { font-size: clamp(2.2rem, 4vw, 3.5rem); }
h2 { font-size: clamp(1.7rem, 2.75vw, 2.5rem); }
h3 { font-size: 1.22rem; line-height: 1.3; letter-spacing: -0.01em; }
h4 { font-size: 1rem; }

p { margin: 0 0 1.1em; color: var(--sx-body); }

a { color: var(--sx-link); text-decoration: none; }
a:hover { color: var(--sx-link-hover); }

ul, ol { padding-left: 1.2rem; color: var(--sx-body); }

strong { font-weight: 600; color: var(--sx-head); }

:focus-visible {
  outline: 2px solid var(--sx-focus);
  outline-offset: 3px;
  border-radius: 3px;
}

::selection { background: var(--amber); color: #131c28; }

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 300;
  background: var(--amber);
  color: #131c28;
  padding: 0.7rem 1.2rem;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: var(--font-display);
  border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; color: #131c28; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { position: relative; padding-block: var(--sec-pad); }
.section--flush-top { padding-top: 0; }

/* surface bands — warm daylight by default, navy for cinematic moments */
.section { background: var(--ivory); }
.section--sand {
  background:
    radial-gradient(90% 70% at 88% 0%, rgba(46, 196, 176, 0.07), transparent 55%),
    linear-gradient(180deg, #f3ecdb, #ece2cc);
}
.section--white {
  background: linear-gradient(180deg, var(--ivory-2), var(--ivory));
}
.section--ink {
  background:
    radial-gradient(100% 80% at 85% 0%, rgba(46, 196, 176, 0.07), transparent 55%),
    radial-gradient(90% 70% at 8% 100%, rgba(239, 166, 75, 0.08), transparent 60%),
    var(--navy-900);
}
.section--deep {
  background:
    radial-gradient(110% 90% at 50% 115%, #122944, transparent 70%),
    var(--navy-950);
}

/* section head */
.sec-head {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 1.5rem 3rem;
  align-items: start;
  border-top: 1px solid var(--sx-line-strong);
  padding-top: 1.6rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.sec-head__body { max-width: 680px; }
.sec-head__body > :last-child { margin-bottom: 0; }

.lead {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.65;
  color: var(--sx-body);
}

.note { font-size: 0.87rem; color: var(--sx-mute); }

/* ---------- Eyebrow label ---------- */
.eyebrow,
.label-mono {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--sx-mute);
}
.eyebrow::before,
.label-mono::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  background: var(--grad-warm);
  border-radius: 1.5px;
  transform: rotate(45deg);
}
.eyebrow--teal::before { background: linear-gradient(115deg, var(--teal-bright), var(--teal-deep)); }
.label-mono i { display: none; }
.label-mono--teal::before { background: linear-gradient(115deg, var(--teal-bright), var(--teal-deep)); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.75rem;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
    border-color 0.25s var(--ease), transform 0.25s var(--ease),
    box-shadow 0.25s var(--ease), filter 0.25s var(--ease);
}
.btn svg { flex: none; transition: transform 0.25s var(--ease); }
.btn:hover svg { transform: translateX(4px); }

.btn--primary {
  background: var(--grad-warm);
  color: #1d1208;
  box-shadow: 0 14px 30px -14px rgba(229, 112, 78, 0.55);
}
.btn--primary:hover {
  color: #1d1208;
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 20px 38px -16px rgba(229, 112, 78, 0.65);
}

.btn--ghost {
  border-color: var(--sx-line-strong);
  color: var(--sx-head);
  background: var(--sx-chip);
}
.btn--ghost:hover {
  border-color: var(--sx-head);
  color: var(--sx-head);
  transform: translateY(-2px);
}
.btn--ghost-inv { border-color: var(--sx-line-strong); color: var(--sx-head); background: transparent; }
.btn--ghost-inv:hover { border-color: var(--sx-head); color: var(--sx-head); }

.btn--sm { padding: 0.66rem 1.25rem; font-size: 0.88rem; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--sx-head);
  background-image: linear-gradient(var(--coral), var(--coral));
  background-repeat: no-repeat;
  background-size: 0% 2px;
  background-position: left calc(100% + 3px);
  transition: background-size 0.3s var(--ease), color 0.2s;
  padding-bottom: 3px;
}
.link-arrow svg { transition: transform 0.25s var(--ease); }
.link-arrow:hover { color: var(--sx-accent); background-size: 100% 2px; }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------- Brand wordmark ---------- */
.brand {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: 1.34rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  color: var(--snow);
  transition: color 0.25s;
}
.brand:hover { color: var(--amber-soft, #f6c37e); }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  background: linear-gradient(180deg, rgba(6, 16, 29, 0.72), rgba(6, 16, 29, 0));
  border-bottom: 1px solid transparent;
  transition: background-color 0.35s, border-color 0.35s, backdrop-filter 0.35s;
}
.site-header.is-scrolled {
  background: rgba(8, 20, 35, 0.86);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom-color: rgba(243, 240, 232, 0.1);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 68px;
}

.site-nav { display: flex; align-items: center; gap: 1.6rem; }

.nav__list {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.95rem;
  font-family: var(--font-display);
  font-size: 0.93rem;
  font-weight: 500;
  color: var(--snow-soft);
  background: none;
  border: 0;
  cursor: pointer;
  border-radius: var(--r-pill);
  transition: color 0.2s, background-color 0.2s;
}
.nav__link:hover { color: var(--snow); background: rgba(243, 240, 232, 0.06); }
.nav__link[aria-current="page"],
.nav__item--sub.is-active > .nav__link { color: var(--amber); }
.nav__link svg { transition: transform 0.25s var(--ease); }
.nav__link[aria-expanded="true"] svg { transform: rotate(180deg); }

/* dropdown */
.nav__item--sub { position: relative; }
.nav__panel {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 360px;
  background: linear-gradient(170deg, #11253c, #0c1c30);
  border: 1px solid rgba(243, 240, 232, 0.12);
  border-radius: 16px;
  box-shadow: 0 30px 70px -24px rgba(2, 8, 18, 0.85);
  padding: 0.55rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
}
.nav__panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav__panel a {
  display: block;
  padding: 0.8rem 0.9rem;
  border-radius: 10px;
  transition: background-color 0.18s;
}
.nav__panel a:hover { background: rgba(243, 240, 232, 0.06); }
.nav__panel a strong {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--snow);
}
.nav__panel a strong i {
  font-style: normal;
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 1.5px;
  transform: rotate(45deg);
  overflow: hidden;
  text-indent: -99px;
  background: var(--amber);
}
.nav__panel a:nth-child(2) strong i { background: var(--coral); }
.nav__panel a:nth-child(3) strong i { background: var(--teal); }
.nav__panel a:nth-child(4) strong i { background: var(--slateblue); }
.nav__panel a span {
  display: block;
  font-size: 0.83rem;
  color: var(--snow-dim);
  margin-top: 0.15rem;
  padding-left: 1.25rem;
}
.nav__panel a[aria-current="page"] { background: rgba(239, 166, 75, 0.1); }

/* toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 11px;
  background: rgba(243, 240, 232, 0.05);
  border: 1px solid rgba(243, 240, 232, 0.2);
  border-radius: 12px;
  cursor: pointer;
}
.nav-toggle__bar {
  display: block;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  background: var(--snow);
  transition: transform 0.3s var(--ease), opacity 0.2s;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* drawer */
.drawer {
  position: fixed;
  inset: 68px 0 0 0;
  z-index: 90;
  background:
    radial-gradient(120% 60% at 85% 0%, rgba(46, 196, 176, 0.08), transparent 60%),
    radial-gradient(120% 60% at 8% 100%, rgba(239, 166, 75, 0.1), transparent 60%),
    var(--navy-950);
  color: var(--snow);
  padding: 2rem var(--gutter) 3rem;
  overflow-y: auto;
  transform: translateY(-12px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
}
.drawer.is-open { opacity: 1; visibility: visible; transform: none; }

.drawer__group { margin-bottom: 1.6rem; }
.drawer__label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--snow-dim);
  margin: 0 0 0.5rem;
}
.drawer__list { list-style: none; margin: 0; padding: 0; }
.drawer__list a {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  padding: 0.72rem 0;
  font-family: var(--font-display);
  font-size: 1.42rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--snow);
  border-bottom: 1px solid rgba(243, 240, 232, 0.1);
}
.drawer__list a i {
  font-style: normal;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--amber);
}
.drawer__list a[aria-current="page"] { color: var(--amber); }
.drawer__cta { margin-top: 2rem; display: grid; gap: 0.9rem; }
.drawer__cta .btn { width: 100%; }
.drawer__contact {
  font-size: 0.84rem;
  color: var(--snow-dim);
}
.drawer__contact a { color: var(--snow-soft); }

/* ==========================================================================
   Cinematic hero — daybreak over global commerce
   ========================================================================== */
.hero-cine {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(85% 65% at 80% 12%, rgba(46, 196, 176, 0.1), transparent 60%),
    radial-gradient(70% 58% at 10% 96%, rgba(240, 166, 75, 0.18), transparent 62%),
    radial-gradient(120% 85% at 55% 115%, #17324f, transparent 72%),
    linear-gradient(180deg, #081424 0%, #0b1d33 55%, #102641 100%);
}

.hero-scene { position: absolute; inset: 0; pointer-events: none; }
.hero-scene > * { position: absolute; inset: 0; }

/* soft pearl light beam */
.scene-beam {
  background: linear-gradient(112deg, transparent 38%, rgba(255, 243, 220, 0.055) 50%, transparent 62%);
}

.scene-layer { width: 100%; height: 100%; will-change: transform; }
.scene-layer svg { width: 100%; height: 100%; }

.scene-grain {
  background-image: var(--grain);
  opacity: 0.05;
  mix-blend-mode: overlay;
}

.scene-specks { width: 100%; height: 100%; opacity: 0.8; }

/* --- scene internals --- */
.sky-arc {
  fill: none;
  stroke: rgba(243, 240, 232, 0.08);
  stroke-width: 1;
  stroke-dasharray: 1 7;
  stroke-linecap: round;
}
.sky-star { fill: rgba(243, 240, 232, 0.3); }
.silh { fill: #0a1929; }
.silh--near { fill: #0c1e31; }
.silh-glow { fill: rgba(244, 180, 92, 0.5); }
.silh-glow--teal { fill: rgba(91, 223, 204, 0.4); }

.jr-base {
  fill: none;
  stroke: rgba(243, 240, 232, 0.14);
  stroke-width: 1.2;
}
.jr-light {
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 3 9;
  animation: route-drift 5s linear infinite;
  opacity: 0.85;
}
@keyframes route-drift { to { stroke-dashoffset: -72; } }

.node-label {
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  fill: rgba(243, 240, 232, 0.62);
}
.node-sub { font-family: var(--font-body); font-size: 10px; fill: rgba(243, 240, 232, 0.38); letter-spacing: 0.04em; }

/* commerce ping rings */
.ping {
  fill: none;
  stroke: var(--teal-bright);
  stroke-width: 1.4;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: ping 5.5s var(--ease) infinite;
}
.ping--warm { stroke: var(--amber); }
@keyframes ping {
  0%, 62% { opacity: 0; transform: scale(0.25); }
  68% { opacity: 0.85; }
  88%, 100% { opacity: 0; transform: scale(1.6); }
}

/* storefront card */
.sf-card { fill: #fffdf6; }
.sf-card-edge { fill: none; stroke: rgba(27, 39, 55, 0.14); stroke-width: 1; }
.sf-img { fill: url(#sf-img-grad); }
.sf-line { fill: rgba(27, 39, 55, 0.16); }
.sf-line--strong { fill: rgba(27, 39, 55, 0.55); }
.sf-price { font-family: var(--font-display); font-weight: 700; font-size: 15px; fill: #1b2737; }
.sf-cart { fill: url(#cta-grad); }
.sf-cart-label { font-family: var(--font-display); font-weight: 600; font-size: 10.5px; letter-spacing: 0.06em; fill: #2a1409; }
.sf-dot {
  fill: #fffdf6;
  transform-box: fill-box;
  transform-origin: center;
  animation: cart-dot 2.8s ease-in-out infinite;
}
@keyframes cart-dot {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.5); opacity: 0.5; }
}

/* order-confirmed toast */
.order-toast {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: toast 9s var(--ease) infinite;
}
@keyframes toast {
  0%, 54% { opacity: 0; transform: translateY(8px); }
  60%, 86% { opacity: 1; transform: translateY(0); }
  94%, 100% { opacity: 0; transform: translateY(-6px); }
}
.toast-box { fill: #11283f; stroke: rgba(91, 223, 204, 0.45); stroke-width: 1; }
.toast-check { fill: none; stroke: var(--teal-bright); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.toast-text { font-family: var(--font-display); font-weight: 600; font-size: 10px; letter-spacing: 0.05em; fill: rgba(243, 240, 232, 0.85); }

/* travelling parcel */
.parcel-body { fill: #eda44c; }
.parcel-top { fill: #f8cf94; }
.parcel-tape { fill: #fff6e6; }
.parcel-shadow { fill: rgba(4, 10, 18, 0.45); }

/* scrim grounds the copy zone */
.hero-cine::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(98deg, rgba(7, 17, 30, 0.86) 0%, rgba(7, 17, 30, 0.5) 36%, transparent 60%);
  pointer-events: none;
  z-index: 1;
}

.hero-cine__content {
  position: relative;
  z-index: 2;
  padding-top: clamp(7rem, 14vh, 9rem);
  padding-bottom: 6.5rem;
  max-width: var(--container);
}
.hero-cine__content .eyebrow { margin-bottom: 1.7rem; color: var(--snow-dim); }

.hero-cine h1 {
  font-size: clamp(2.45rem, 4.65vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.05;
  max-width: 11.5em;
  margin-bottom: 1.35rem;
  color: var(--snow);
}
.hero-cine h1 .h1-accent {
  background: linear-gradient(100deg, #f6c887, #e98a5b 55%, #6adcc8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-cine__lead {
  max-width: 34em;
  font-size: clamp(1.04rem, 1.4vw, 1.16rem);
  color: var(--snow-soft);
  margin-bottom: 2.5rem;
}

.hero-cine__actions { display: flex; flex-wrap: wrap; gap: 0.95rem; align-items: center; }

.hero-scroll {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 1.9rem;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--snow-dim);
}
.hero-scroll:hover { color: var(--snow-soft); }
.hero-scroll i {
  width: 1px;
  height: 44px;
  background: linear-gradient(180deg, var(--amber), transparent);
  overflow: hidden;
  position: relative;
}
.hero-scroll i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, #0b1d33);
  animation: scroll-hint 2.2s var(--ease) infinite;
}
@keyframes scroll-hint {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

/* hero load-in */
.hero-cine__content > * { animation: rise-in 0.9s var(--ease) both; }
.hero-cine__content > :nth-child(1) { animation-delay: 0.1s; }
.hero-cine__content > :nth-child(2) { animation-delay: 0.22s; }
.hero-cine__content > :nth-child(3) { animation-delay: 0.34s; }
.hero-cine__content > :nth-child(4) { animation-delay: 0.46s; }
@keyframes rise-in {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}

/* mobile hero vignette (compact static scene) */
.scene-mobile { display: none; }

/* ==========================================================================
   Capability ledger (homepage)
   ========================================================================== */
.cap-ledger { border-top: 1px solid var(--sx-line-strong); }

.cap-row {
  --row-acc: var(--amber);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 3.6rem minmax(0, 0.95fr) minmax(0, 1.45fr) auto;
  gap: 1.2rem 2.4rem;
  align-items: center;
  padding: 1.7rem 1rem;
  border-bottom: 1px solid var(--sx-line);
  color: inherit;
  transition: padding 0.3s var(--ease);
}
.cap-row--trade { --row-acc: #c2701b; }
.cap-row--ecom { --row-acc: #c8502e; }
.cap-row--products { --row-acc: #0e8071; }
.cap-row--digital { --row-acc: #3e6390; }

.cap-row::before {
  content: "";
  position: absolute;
  inset: 4px -14px;
  z-index: -1;
  background: var(--pearl);
  border: 1px solid var(--sx-card-line);
  border-radius: var(--r-card);
  box-shadow: var(--sx-shadow);
  opacity: 0;
  transform: scale(0.985);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.cap-row:hover::before,
.cap-row:focus-visible::before { opacity: 1; transform: none; }

.cap-row__no {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--row-acc);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.cap-row__no::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 1.5px;
  transform: rotate(45deg);
  background: var(--row-acc);
  opacity: 0.85;
}

.cap-row__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 2vw, 1.62rem);
  letter-spacing: -0.018em;
  line-height: 1.12;
  color: var(--sx-head);
}
.cap-row__name em {
  display: block;
  font-style: normal;
  font-weight: 500;
  font-size: 0.86rem;
  letter-spacing: 0.01em;
  color: var(--sx-mute);
  margin-top: 0.3rem;
}

.cap-row__desc { font-size: 0.95rem; color: var(--sx-body); margin: 0; }

.cap-row__go {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--sx-line-strong);
  display: grid;
  place-items: center;
  color: var(--sx-head);
  transition: background-color 0.28s var(--ease), border-color 0.28s var(--ease),
    color 0.28s var(--ease), transform 0.28s var(--ease);
}
.cap-row:hover .cap-row__go,
.cap-row:focus-visible .cap-row__go {
  background: var(--row-acc);
  border-color: transparent;
  color: #fffdf7;
  transform: rotate(-45deg);
}

/* ==========================================================================
   Product world (homepage editorial grid)
   ========================================================================== */
.pw-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(208px, auto);
  gap: 1.15rem;
}

.pw-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  border-radius: var(--r-card);
  border: 1px solid var(--sx-card-line);
  background: var(--sx-card);
  padding: 1.5rem 1.6rem;
  color: inherit;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.pw-tile:hover { transform: translateY(-5px); box-shadow: var(--sx-shadow); }

.pw-tile--lead { grid-column: 1 / 8; grid-row: 1 / 3; min-height: 440px; }
.pw-tile--a { grid-column: 8 / 13; grid-row: 1; }
.pw-tile--b { grid-column: 8 / 13; grid-row: 2; }
.pw-tile--note { grid-column: 1 / 5; grid-row: 3; }
.pw-tile--wide { grid-column: 5 / 13; grid-row: 3; }

.pw-tile__art { position: absolute; inset: 0; }
.pw-tile__art svg { width: 100%; height: 100%; }
.pw-tile:hover .pw-art-product { transform: translateY(-6px); }
.pw-art-product {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.5s var(--ease);
}

.pw-tile__cap { position: relative; z-index: 1; }
.pw-tile__cap h3 {
  font-size: clamp(1.25rem, 1.8vw, 1.55rem);
  margin-bottom: 0.3rem;
  color: var(--char);
}
.pw-tile--lead .pw-tile__cap h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.pw-tile__cap p { font-size: 0.93rem; color: var(--char-soft); margin: 0 0 0.75rem; max-width: 30em; }

.pw-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--char-soft);
  background: rgba(255, 253, 247, 0.72);
  border: 1px solid rgba(27, 39, 55, 0.12);
  border-radius: var(--r-pill);
  padding: 0.32rem 0.75rem;
  margin-bottom: 0.9rem;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.pw-tag::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 1.5px;
  transform: rotate(45deg);
  background: var(--coral);
}

.pw-tile--note {
  justify-content: center;
  background:
    radial-gradient(120% 120% at 85% 10%, rgba(46, 196, 176, 0.12), transparent 60%),
    var(--navy-900);
  border-color: rgba(243, 240, 232, 0.1);
}
.pw-tile--note h3 { color: var(--snow); font-size: 1.2rem; }
.pw-tile--note p { color: var(--snow-soft); }
.pw-tile--note .link-arrow { color: var(--snow); }
.pw-tile--note .link-arrow:hover { color: var(--amber); }

/* tile art internals */
.pw-bg-baby { fill: url(#pw-grad-baby); }
.pw-bg-home { fill: url(#pw-grad-home); }
.pw-bg-cloth { fill: url(#pw-grad-cloth); }
.pw-bg-life { fill: url(#pw-grad-life); }
.pw-shadow { fill: rgba(27, 39, 55, 0.13); }
.pw-outline { fill: none; stroke: #2b3a4c; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pw-fill-cream { fill: #fdf8ec; }
.pw-fill-warm { fill: #f3c98e; }
.pw-fill-coral { fill: #e8825f; }
.pw-fill-teal { fill: #7fd4c5; }
.pw-fill-navy { fill: #2e4a68; }
.pw-stitch { fill: none; stroke: rgba(27, 39, 55, 0.3); stroke-width: 1.3; stroke-dasharray: 3 4; stroke-linecap: round; }

/* ==========================================================================
   Journey — factory to customer (homepage, scroll-driven)
   ========================================================================== */
.journey-board { position: relative; }
.journey-board svg { width: 100%; height: auto; }

.jrny-base { fill: none; stroke: rgba(243, 240, 232, 0.16); stroke-width: 1.5; }
.jrny-progress {
  fill: none;
  stroke: url(#jrny-grad);
  stroke-width: 3;
  stroke-linecap: round;
}
.jrny-station circle.st-ring {
  fill: var(--navy-850);
  stroke: rgba(243, 240, 232, 0.25);
  stroke-width: 1.4;
  transition: stroke 0.4s, fill 0.4s;
}
.jrny-station .st-ico { stroke: var(--snow-soft); stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.4s; }
.jrny-station.is-passed circle.st-ring { stroke: var(--amber); fill: #142b44; }
.jrny-station.is-passed .st-ico { stroke: var(--amber); }
.jrny-station:nth-of-type(n+5).is-passed circle.st-ring { stroke: var(--teal); }
.jrny-station:nth-of-type(n+5).is-passed .st-ico { stroke: var(--teal-bright); }
.st-name { font-family: var(--font-display); font-weight: 700; font-size: 16px; fill: var(--snow); letter-spacing: -0.01em; }
.st-hint { font-family: var(--font-body); font-size: 11.5px; fill: var(--snow-dim); }

.jrny-parcel { transition: opacity 0.3s; }

.journey-steps-mobile { display: none; }

/* shared vertical stepper */
.stepper { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sx-line-strong); counter-reset: stp; }
.stepper li {
  counter-increment: stp;
  display: grid;
  grid-template-columns: 56px minmax(0, 0.8fr) minmax(0, 1.4fr);
  gap: 1rem 2rem;
  align-items: baseline;
  padding: 1.15rem 0.3rem;
  border-bottom: 1px solid var(--sx-line);
  transition: background-color 0.25s;
}
.stepper li:hover { background: var(--sx-chip); }
.stepper li::before {
  content: "0" counter(stp);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--sx-accent-text);
}
.stepper__name { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: var(--sx-head); }
.stepper__hint { font-size: 0.92rem; color: var(--sx-mute); }

/* ==========================================================================
   Channels (homepage)
   ========================================================================== */
.chan-flow { position: relative; }

.chan-rail-row {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}
.chan-core {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--navy-900);
  color: var(--snow);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  border-radius: var(--r-pill);
  padding: 0.85rem 1.4rem;
  box-shadow: 0 18px 36px -18px rgba(10, 26, 46, 0.55);
}
.chan-core svg { width: 20px; height: 20px; }

.chan-rail {
  position: relative;
  flex: 1;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--amber), var(--coral) 45%, var(--teal-deep));
  overflow: hidden;
}
.chan-rail::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg,
    rgba(255, 253, 247, 0.55) 0 14px, transparent 14px 72px);
  animation: rail-flow 1.8s linear infinite;
  mix-blend-mode: overlay;
}
@keyframes rail-flow { to { transform: translateX(72px); } }

.chan-endcap {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--pearl);
  border: 1px solid var(--sx-line-strong);
  color: var(--teal-deep);
}

.chan-grid {
  list-style: none;
  margin: 2.4rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 1rem;
}
@media (max-width: 1200px) {
  .chan-chip::before { display: none; }
  .chan-grid { margin-top: 1.6rem; }
}
.chan-chip {
  position: relative;
  background: var(--sx-card);
  border: 1px solid var(--sx-card-line);
  border-radius: 14px;
  padding: 1.15rem 1.25rem 1.1rem;
  transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s;
}
.chan-chip::before {
  content: "";
  position: absolute;
  top: -2.4rem;
  left: 50%;
  width: 1px;
  height: 2.4rem;
  background: linear-gradient(180deg, transparent, rgba(27, 39, 55, 0.25));
}
.chan-chip:hover {
  transform: translateY(-4px);
  border-color: rgba(14, 128, 113, 0.5);
  box-shadow: var(--sx-shadow);
}
.chan-chip__type {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin-bottom: 0.3rem;
}
.chan-chip strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--sx-head);
}
.chan-chip p { font-size: 0.84rem; color: var(--sx-mute); margin: 0.35rem 0 0; }

/* ==========================================================================
   Digital — commerce OS panel
   ========================================================================== */
.os-panel {
  background: linear-gradient(170deg, #10243c, #0b1a2e 80%);
  border: 1px solid rgba(243, 240, 232, 0.12);
  border-radius: var(--r-card);
  box-shadow: 0 40px 80px -40px rgba(2, 8, 18, 0.9);
  overflow: hidden;
}
.os-bar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.85rem 1.2rem;
  border-bottom: 1px solid rgba(243, 240, 232, 0.09);
}
.os-bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(243, 240, 232, 0.16);
}
.os-bar i:nth-child(1) { background: rgba(229, 112, 78, 0.6); }
.os-bar i:nth-child(2) { background: rgba(239, 166, 75, 0.6); }
.os-bar i:nth-child(3) { background: rgba(46, 196, 176, 0.6); }
.os-bar span {
  margin-left: 0.6rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--snow-dim);
}

.os-row {
  display: grid;
  grid-template-columns: 118px 1fr auto;
  align-items: center;
  gap: 1.2rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(243, 240, 232, 0.07);
}
.os-row:last-of-type { border-bottom: 0; }
.os-row__label { font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; color: var(--snow); }

.os-spark { display: flex; align-items: flex-end; gap: 4px; height: 30px; }
.os-spark i {
  width: 7px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, var(--teal-bright), var(--teal-deep));
  height: calc(var(--h, 40) * 1%);
  animation: spark 3s ease-in-out infinite alternate;
  animation-delay: calc(var(--i, 0) * -0.35s);
}
.os-spark--warm i { background: linear-gradient(180deg, #f6c37e, var(--coral)); }
@keyframes spark {
  from { transform: scaleY(0.72); transform-origin: bottom; }
  to { transform: scaleY(1.08); transform-origin: bottom; }
}

.os-chip {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  padding: 0.32rem 0.75rem;
  border-radius: var(--r-pill);
  color: var(--teal-bright);
  background: rgba(46, 196, 176, 0.1);
  border: 1px solid rgba(46, 196, 176, 0.35);
  white-space: nowrap;
}
.os-chip--warm {
  color: #f6c37e;
  background: rgba(239, 166, 75, 0.1);
  border-color: rgba(239, 166, 75, 0.35);
}

.os-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.9rem;
  padding: 0.95rem 1.25rem;
  border-top: 1px solid rgba(243, 240, 232, 0.09);
  font-size: 0.78rem;
  color: var(--snow-dim);
}
.os-foot b { color: var(--snow-soft); font-weight: 600; }

/* ==========================================================================
   Interior page components
   ========================================================================== */

/* page hero */
.page-hero,
.page-hero--ink {
  position: relative;
  padding-top: clamp(7.5rem, 14vh, 10rem);
  padding-bottom: clamp(2.4rem, 4.5vw, 3.8rem);
  background:
    radial-gradient(50% 60% at 88% 0%, rgba(46, 196, 176, 0.1), transparent 60%),
    radial-gradient(55% 65% at 4% 100%, rgba(239, 166, 75, 0.12), transparent 60%),
    linear-gradient(180deg, #081424, #0d2036);
  overflow: hidden;
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: 0.04;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.page-hero .container { position: relative; }
.page-hero .eyebrow,
.page-hero .label-mono { margin-bottom: 1.5rem; }
.page-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: 1.5rem 4rem;
  align-items: end;
  border-bottom: 1px solid rgba(243, 240, 232, 0.14);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
.page-hero h1 { margin-bottom: 0; max-width: 14em; color: var(--snow); }
.page-hero__aside { max-width: 36em; }
.page-hero__aside p { color: var(--snow-soft); font-size: 1rem; margin: 0; }

/* split */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}
.split--start { align-items: start; }
.split > div > :last-child { margin-bottom: 0; }

/* facts table */
.facts {
  border: 1px solid var(--sx-card-line);
  border-radius: var(--r-card);
  background: var(--sx-card);
  padding: 0.4rem 1.4rem;
  font-size: 0.92rem;
  box-shadow: 0 18px 40px -28px rgba(27, 39, 55, 0.3);
}
.facts__row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 1rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--sx-line);
}
.facts__row:last-child { border-bottom: 0; }
.facts__key {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sx-mute);
  padding-top: 0.25em;
}
.facts__val { color: var(--sx-head); font-weight: 500; }
.facts__val a { color: var(--sx-link); }
.facts__val a:hover { color: var(--sx-link-hover); }

/* numbered list rows */
.list-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sx-line-strong); }
.list-rows li {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 1.2rem;
  padding: 1.1rem 0.2rem;
  border-bottom: 1px solid var(--sx-line);
  font-size: 0.96rem;
  color: var(--sx-body);
}
.list-rows li i {
  font-style: normal;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--sx-accent-text);
  padding-top: 0.3em;
}
.list-rows li strong { color: var(--sx-head); font-weight: 600; }

/* petal bullet list */
.sq-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.sq-list li { position: relative; padding-left: 1.45rem; color: var(--sx-body); font-size: 0.96rem; }
.sq-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: 1.5px;
  transform: rotate(45deg);
  background: var(--grad-warm);
}
.sq-list--teal li::before { background: linear-gradient(115deg, var(--teal-bright), var(--teal-deep)); }
.sq-list li strong { color: var(--sx-head); }

/* tickets (cards) */
.ticket-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.1rem; }
.ticket {
  position: relative;
  background: var(--sx-card);
  border: 1px solid var(--sx-card-line);
  border-radius: 14px;
  padding: 1.5rem 1.4rem 1.4rem;
  transition: border-color 0.25s, transform 0.25s var(--ease), box-shadow 0.25s;
}
.ticket:hover {
  border-color: rgba(229, 112, 78, 0.55);
  transform: translateY(-4px);
  box-shadow: var(--sx-shadow);
}
.ticket__bar {
  height: 8px;
  margin-bottom: 1.2rem;
  max-width: 86px;
  border-radius: 4px;
  background: var(--grad-warm-soft);
}
.ticket__code {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin-bottom: 0.4rem;
}
.ticket h3 { font-size: 1.06rem; margin-bottom: 0.35rem; }
.ticket p { font-size: 0.88rem; color: var(--sx-mute); margin: 0; }

/* step grid */
.step-grid,
.step-grid--light {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
}
.step-cell {
  padding: 1.8rem 1.6rem 1.9rem;
  border: 1px solid var(--sx-card-line);
  border-radius: 14px;
  background: var(--sx-card);
  transition: transform 0.3s var(--ease), box-shadow 0.3s;
}
.step-cell:hover { transform: translateY(-4px); box-shadow: var(--sx-shadow); }
.step-cell__num {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sx-accent-text);
  margin-bottom: 1.1rem;
}
.step-cell__num::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 1.5px;
  transform: rotate(45deg);
  background: var(--grad-warm);
}
.step-cell h3 { color: var(--sx-head); font-size: 1.06rem; margin-bottom: 0.45rem; }
.step-cell p { font-size: 0.91rem; color: var(--sx-body); margin: 0; }

/* plates (products page) */
.plate {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.plate + .plate { margin-top: clamp(3.5rem, 7vw, 6rem); }
.plate--reverse > .plate__visual { order: -1; }
.plate__visual {
  background:
    radial-gradient(95% 85% at 22% 88%, rgba(239, 166, 75, 0.16), transparent 60%),
    var(--pearl);
  border: 1px solid var(--sx-card-line);
  border-radius: var(--r-card);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  box-shadow: 0 24px 48px -32px rgba(27, 39, 55, 0.3);
}
.plate--reverse .plate__visual {
  background:
    radial-gradient(95% 85% at 80% 12%, rgba(46, 196, 176, 0.14), transparent 60%),
    var(--pearl);
}
.plate__visual svg { width: 100%; height: auto; }
.plate__copy .eyebrow,
.plate__copy .label-mono { margin-bottom: 1.1rem; }

.plate-ill .ill-line { stroke: #33455a; stroke-width: 2; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.plate-ill .ill-fill { fill: #33455a; }
.plate-ill .ill-accent { fill: var(--coral); }
.plate-ill .ill-accent-line { stroke: var(--coral); stroke-width: 2; fill: none; stroke-linecap: round; }
.plate-ill text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.1em;
  fill: var(--char-dim);
}

/* system map (digital page, dark) */
.sysmap {
  background: linear-gradient(170deg, #10243c, #0b1a2e 80%);
  border: 1px solid rgba(243, 240, 232, 0.12);
  border-radius: var(--r-card);
  padding: clamp(1.25rem, 3vw, 2.25rem);
}
.sysmap svg { width: 100%; height: auto; }
.sysmap .sm-box { fill: rgba(243, 240, 232, 0.02); stroke: rgba(243, 240, 232, 0.22); stroke-width: 1.2; rx: 8; }
.sysmap .sm-box--core { stroke: var(--teal); fill: rgba(46, 196, 176, 0.08); }
.sysmap .sm-wire { fill: none; stroke: rgba(243, 240, 232, 0.2); stroke-width: 1.2; }
.sysmap .sm-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.1em;
  fill: var(--snow-soft);
}
.sysmap .sm-title { font-family: var(--font-display); font-weight: 700; font-size: 13px; fill: var(--snow); }
.sysmap .sm-pulse { fill: var(--teal-bright); }

/* journey strip (ecommerce page, light) */
.journey__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1.8rem; }
.journey-line { stroke: rgba(27, 39, 55, 0.16); stroke-width: 1; }
.journey-route {
  stroke: var(--coral);
  stroke-width: 1.6;
  stroke-dasharray: 3 9;
  animation: route-drift 4s linear infinite;
  opacity: 0.85;
}
.journey-node rect.node-box {
  fill: var(--pearl);
  stroke: rgba(27, 39, 55, 0.3);
  stroke-width: 1.2;
  rx: 10;
  transition: stroke 0.25s;
}
.journey-node:hover rect.node-box { stroke: var(--coral); }
.journey-node .node-ico { stroke: var(--char); stroke-width: 1.5; fill: none; }
.journey-node .node-code {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.12em;
  fill: var(--teal-deep);
}
.journey-node .node-name { font-family: var(--font-display); font-size: 14.5px; font-weight: 700; fill: var(--char); }
.journey-node .node-sub { font-family: var(--font-body); font-size: 11.5px; fill: var(--char-dim); }
.journey-pulse { fill: var(--coral); }

/* ---------- CTA band ---------- */
.cta-band {
  position: relative;
  background:
    radial-gradient(75% 130% at 88% 15%, rgba(240, 166, 75, 0.3), transparent 55%),
    radial-gradient(60% 110% at 6% 100%, rgba(46, 196, 176, 0.16), transparent 60%),
    linear-gradient(180deg, #f7f0e1, #f1e4ca);
  border-block: 1px solid rgba(27, 39, 55, 0.1);
}
.cta-band .container {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) auto;
  gap: 2rem;
  align-items: center;
}
.cta-band h2 { margin-bottom: 0.5rem; max-width: 16em; font-size: clamp(1.85rem, 2.9vw, 2.65rem); }
.cta-band p { margin: 0; max-width: 36em; }
.cta-band__actions { display: flex; gap: 0.85rem; flex-wrap: wrap; }
.cta-band__meta {
  margin: 1.1rem 0 0;
  font-size: 0.86rem;
  color: var(--char-dim);
}

/* ---------- Forms ---------- */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}

.form-card {
  background: var(--sx-card);
  border: 1px solid var(--sx-card-line);
  border-radius: var(--r-card);
  padding: clamp(1.6rem, 3.5vw, 2.6rem);
  box-shadow: 0 30px 60px -40px rgba(27, 39, 55, 0.35);
}

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 1.4rem; }
.form-field--full { grid-column: 1 / -1; }

.form-field label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.87rem;
  font-weight: 600;
  color: var(--sx-head);
  margin-bottom: 0.4rem;
}
.form-field label .req { color: var(--coral-deep); }
.form-field label .opt { font-weight: 400; color: var(--sx-mute); font-size: 0.77rem; }

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  font: inherit;
  font-size: 0.96rem;
  color: var(--sx-head);
  background: var(--sx-field-bg);
  border: 1px solid var(--sx-field-line);
  border-radius: 11px;
  padding: 0.78rem 0.95rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-field textarea { resize: vertical; min-height: 140px; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--sx-focus);
  box-shadow: 0 0 0 3px rgba(14, 128, 113, 0.16);
}
.form-field input[aria-invalid="true"],
.form-field select[aria-invalid="true"],
.form-field textarea[aria-invalid="true"] { border-color: #c43d42; }

.form-field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2347586c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 1rem;
  padding-right: 2.5rem;
}
.form-field select option { background: var(--pearl); color: var(--char); }

.field-error { display: none; font-size: 0.82rem; color: #b13338; margin-top: 0.35rem; }
.field-error.is-visible { display: block; }

.consent { display: flex; align-items: flex-start; gap: 0.7rem; font-size: 0.88rem; color: var(--sx-body); }
.consent input { width: 1.15rem; height: 1.15rem; margin-top: 0.18rem; accent-color: var(--coral); flex: none; }
.consent a { color: var(--sx-link); text-decoration: underline; text-underline-offset: 2px; }

.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
  opacity: 0;
}

.form-status { display: none; border-radius: 12px; padding: 1rem 1.2rem; font-size: 0.93rem; margin-bottom: 1.4rem; }
.form-status.is-success {
  display: block;
  background: rgba(14, 128, 113, 0.1);
  border: 1px solid rgba(14, 128, 113, 0.45);
  color: #0a5d53;
}
.form-status.is-error {
  display: block;
  background: rgba(196, 61, 66, 0.08);
  border: 1px solid rgba(196, 61, 66, 0.4);
  color: #9c2b30;
}

.contact-aside .facts { margin-bottom: 2rem; }
.contact-aside h3 { font-size: 1rem; margin-bottom: 0.4rem; }
.contact-block { margin-bottom: 1.8rem; }
.contact-block > :last-child { margin-bottom: 0; }

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  background:
    radial-gradient(80% 70% at 50% 125%, rgba(20, 44, 70, 0.9), transparent 75%),
    linear-gradient(180deg, #081626, var(--navy-950));
  border-top: 1px solid rgba(243, 240, 232, 0.08);
  color: var(--snow-soft);
  padding-top: clamp(3rem, 6vw, 4.5rem);
  overflow: hidden;
}
.site-footer a { color: var(--snow-soft); transition: color 0.2s; }
.site-footer a:hover { color: var(--snow); }
.site-footer p { color: var(--snow-soft); }

.site-footer .footer-mark {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(3.8rem, 11.5vw, 10.5rem);
  line-height: 0.85;
  letter-spacing: 0.05em;
  background: linear-gradient(110deg, rgba(244, 176, 92, 0.55), rgba(229, 112, 78, 0.48) 55%, rgba(46, 196, 176, 0.4));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  user-select: none;
  white-space: nowrap;
  margin: 0 0 clamp(2rem, 5vw, 3.5rem);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.1fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
  border-top: 1px solid rgba(243, 240, 232, 0.09);
  padding-top: 2.5rem;
}
.footer-brand p { font-size: 0.91rem; max-width: 26em; margin: 0; color: var(--snow-dim); }
.footer-brand .brand { margin-bottom: 1rem; }

.footer-col h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--snow-dim);
  margin-bottom: 1.1rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.footer-col li { font-size: 0.91rem; }
.footer-col .footer-col__addr { color: var(--snow-dim); }

.footer-bottom {
  border-top: 1px solid rgba(243, 240, 232, 0.09);
  padding-block: 1.3rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  font-size: 0.83rem;
  color: var(--snow-dim);
}
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: 1.4rem; list-style: none; margin: 0; padding: 0; }

/* ---------- Legal ---------- */
.legal-body { max-width: 740px; }
.legal-body h2 {
  font-size: 1.32rem;
  margin-top: 2.4em;
  padding-top: 1.2em;
  border-top: 1px solid var(--sx-line);
}
.legal-body h3 { font-size: 1.05rem; margin-top: 1.6em; }
.legal-body p, .legal-body li { color: var(--sx-body); font-size: 0.97rem; }
.legal-body code { color: var(--teal-deep); font-size: 0.9em; }
.legal-body .updated {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--sx-mute);
  border-left: 3px solid var(--amber);
  padding-left: 1rem;
}

/* ---------- 404 ---------- */
.error-page {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background:
    radial-gradient(55% 55% at 12% 95%, rgba(240, 166, 75, 0.16), transparent 60%),
    radial-gradient(45% 50% at 88% 8%, rgba(46, 196, 176, 0.12), transparent 60%),
    linear-gradient(180deg, #081424, #0e2440);
  text-align: center;
  padding: 2rem;
}
.error-page__code {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(6rem, 20vw, 12rem);
  line-height: 1;
  color: transparent;
  background: linear-gradient(115deg, #f4b05c, #e5704e 55%, #2ec4b0);
  -webkit-background-clip: text;
  background-clip: text;
  margin: 0 0 0.5rem;
}
.error-page h1 { font-size: 1.45rem; margin-bottom: 0.4rem; color: var(--snow); }
.error-page p { color: var(--snow-soft); max-width: 30em; margin-inline: auto; }
.error-page__actions { display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; }
.error-page .label-mono,
.error-page .eyebrow { justify-content: center; display: flex; }

/* ---------- Reveal ---------- */
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: var(--reveal-delay, 0s);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

[data-stagger] > * { --reveal-delay: 0s; }
[data-stagger] > *:nth-child(2) { --reveal-delay: 0.07s; }
[data-stagger] > *:nth-child(3) { --reveal-delay: 0.14s; }
[data-stagger] > *:nth-child(4) { --reveal-delay: 0.21s; }
[data-stagger] > *:nth-child(5) { --reveal-delay: 0.28s; }
[data-stagger] > *:nth-child(6) { --reveal-delay: 0.35s; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .nav__list, .site-nav > .btn { display: none; }
  .nav-toggle { display: flex; }

  .page-hero__grid { grid-template-columns: 1fr; align-items: start; }
  .page-hero h1 { max-width: none; }

  .split { grid-template-columns: 1fr; }
  .plate { grid-template-columns: 1fr; }
  .plate--reverse > .plate__visual { order: 0; }

  .sec-head { grid-template-columns: 1fr; gap: 0.9rem; }

  .cap-row { grid-template-columns: 3rem minmax(0, 1fr) auto; }
  .cap-row__desc { grid-column: 2 / 3; grid-row: 2; }
  .cap-row__go { grid-row: 1 / 3; align-self: center; }

  .pw-grid { grid-template-columns: repeat(6, 1fr); }
  .pw-tile--lead { grid-column: 1 / 7; grid-row: auto; min-height: 420px; }
  .pw-tile--a { grid-column: 1 / 4; grid-row: auto; }
  .pw-tile--b { grid-column: 4 / 7; grid-row: auto; }
  .pw-tile--note { grid-column: 1 / 7; grid-row: auto; min-height: 0; }
  .pw-tile--wide { grid-column: 1 / 7; grid-row: auto; }

  .step-grid, .step-grid--light { grid-template-columns: 1fr 1fr; }

  .cta-band .container { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }

  .journey-board .journey-svg-wrap { display: none; }
  .journey-steps-mobile { display: block; }

  .chan-rail-row { flex-direction: column; align-items: stretch; gap: 1rem; }
  .chan-core { justify-content: center; }
  .chan-rail { width: 100%; }
  .chan-endcap { display: none; }
  .chan-chip::before { display: none; }
  .chan-grid { margin-top: 1.4rem; }
}

@media (max-width: 1150px) {
  /* the right-anchored hero scene shifts left on narrower screens;
     the factory cluster would collide with the copy zone */
  .jr-factory { display: none; }
}

@media (max-width: 860px) {
  /* simplified hero scene on small screens */
  .scene-layer--journey,
  .scene-specks,
  .scene-beam { display: none; }
  .scene-mobile {
    display: block;
    position: absolute;
    inset: auto 0 0 0;
    height: 38vh;
    min-height: 240px;
  }
  .scene-mobile svg { width: 100%; height: 100%; }
  .hero-cine::after {
    background: linear-gradient(180deg, rgba(7, 17, 30, 0.6) 0%, rgba(7, 17, 30, 0.22) 45%, rgba(7, 17, 30, 0.32) 100%);
  }
  .hero-cine__content { padding-bottom: clamp(13rem, 40vh, 19rem); }
}

@media (max-width: 660px) {
  body { font-size: 0.98rem; }

  .hero-cine h1 { font-size: clamp(2rem, 8.6vw, 2.5rem); }
  .hero-cine__actions .btn { width: 100%; }
  .hero-scroll { display: none; }

  .cap-row { grid-template-columns: minmax(0, 1fr) auto; padding: 1.4rem 0.4rem; }
  .cap-row__no { display: none; }
  .cap-row__desc { grid-column: 1 / 2; }
  .cap-row__go { width: 44px; height: 44px; }
  .cap-row::before { inset: 4px -8px; }

  .pw-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .pw-tile--lead, .pw-tile--a, .pw-tile--b, .pw-tile--note, .pw-tile--wide { grid-column: 1 / 2; }
  .pw-tile { min-height: 300px; }
  .pw-tile--lead { min-height: 380px; }
  .pw-tile--note { min-height: 0; }

  /* comfortable touch targets; 16px inputs prevent iOS focus-zoom */
  .btn { min-height: 44px; }
  .form-field input,
  .form-field select,
  .form-field textarea { font-size: 16px; min-height: 44px; }
  .consent input { width: 1.35rem; height: 1.35rem; }

  .form-grid { grid-template-columns: 1fr; }
  .contact-layout { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .cta-band__actions .btn { width: 100%; }

  .step-grid, .step-grid--light { grid-template-columns: 1fr; }

  .stepper li {
    grid-template-columns: 44px 1fr;
    grid-template-areas: "n name" "n hint";
  }
  .stepper li::before { grid-area: n; }
  .stepper__name { grid-area: name; }
  .stepper__hint { grid-area: hint; }

  .facts__row { grid-template-columns: 92px 1fr; }
  .os-row { grid-template-columns: 90px 1fr auto; gap: 0.8rem; padding-inline: 1rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .jr-light, .journey-route, .chan-rail::after, .os-spark i { animation: none; }
  /* SMIL motion ignores CSS rules — hide traveling pulses instead */
  .journey-pulse, .sm-pulse, .hero-parcel, .jrny-parcel { display: none; }
  .ping, .order-toast { display: none; }
  .scene-specks { display: none; }
  .hero-scroll i::after { display: none; }
}