/* ============================================================================
   XENTH — Flagship layer (2026-10-06)
   Loads after styles.css. Minimal celestial atmosphere and Living Structure
   in one system. Everything here is progressive enhancement over
   complete HTML: no rule below is required to read, navigate or contact XENTH.

   Principles (design system, see docs/DESIGN-SYSTEM.md)
     Structure is drawn, not decorated. Motion explains relationships.
     One light source: a white North Star with restrained champagne glow.
     Mobile gets its own rhythm; clarity beats spectacle.
   ========================================================================== */

:root {
  /* --- Motion tokens -------------------------------------------------- */
  --ease-structure: cubic-bezier(0.2, 0.7, 0.1, 1);   /* settle: fast start, long landing */
  --ease-reveal:    cubic-bezier(0.16, 1, 0.3, 1);
  --dur-reveal:     900ms;
  --dur-assemble:   1400ms;
  --stagger:        90ms;

  /* --- Atmosphere ----------------------------------------------------- */
  --haze-ice:  rgba(78, 164, 255, 0.13);
  --line-soft: rgba(188, 193, 201, 0.16);

  /* --- The sky (release surface; neutral, still inside the locked palette) */
  --sky-0:   #dde4ec;
  --sky-1:   #eef1f5;
  --sky-ink: #0b0d10;
  --sky-ink-2: #2b313a;
  --sky-signal: #0b4f9c;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ------------------------------------------------------------ Type ------ */

.fx-h2 {
  font-family: var(--font-display);
  font-weight: var(--w-heading);
  font-size: var(--t-h2);
  line-height: var(--lh-head);
  letter-spacing: var(--tr-head);
  max-width: 21ch;
  text-wrap: balance;
}
.fx-h2--sm { font-size: var(--t-h3); max-width: 24ch; }
.fx-split { display: grid; gap: var(--s-8); align-items: start; }
@media (min-width: 960px) { .fx-split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-11); } }

/* ------------------------------------------- Links and button feel ------ */

.btn { transition: transform var(--dur-fast) var(--ease), background-color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), color var(--dur-base) var(--ease); }
@media (hover: hover) {
  .btn:hover { transform: translateY(-1px); }
  .btn--primary:hover { box-shadow: 0 0 0 1px var(--xenth-signal), 0 10px 28px -12px rgba(78, 164, 255, 0.55); }
}
.btn:active { transform: none; }

.fx-link {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-weight: var(--w-strong); color: var(--xenth-text); text-decoration: none;
  padding-block: var(--s-2); position: relative;
}
.fx-link span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size var(--dur-base) var(--ease-reveal); padding-bottom: 3px; }
.fx-link svg { width: 14px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform var(--dur-base) var(--ease-reveal); }
@media (hover: hover) {
  .fx-link:hover span { background-size: 100% 1px; }
  .fx-link:hover svg { transform: translateX(4px); }
}
.fx-link:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.fx-link--ink { color: var(--sky-ink); }
.fx-link--ink:focus-visible { outline-color: var(--sky-signal); }

/* --------------------------------------------------- Act I · arrival ---- */

.fx-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: calc(100svh - var(--spine-offset, 4.2rem));
  display: flex; align-items: center;
  padding-block: clamp(3rem, 8vh, 6rem);
  background:
    radial-gradient(62% 54% at 74% 4%, var(--haze-ice), transparent 70%),
    linear-gradient(180deg, #06080b 0%, #050608 60%, #07090c 100%);
}
.fx-hero::before {  /* architectural ground lines, very quiet */
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image: linear-gradient(var(--line-soft) 1px, transparent 1px);
  background-size: 100% 6.5rem; background-position: 0 100%;
  -webkit-mask-image: linear-gradient(0deg, #000, transparent 70%); mask-image: linear-gradient(0deg, #000, transparent 70%);
  opacity: 0.35;
}
.fx-hero__inner { position: relative; z-index: 2; width: 100%; }
.fx-hero__inner > * { max-width: 38rem; }
.fx-hero__title {
  font-family: var(--font-display); font-weight: var(--w-display);
  font-size: clamp(2.5rem, 1.15rem + 5.4vw, 5.1rem);
  line-height: var(--lh-hero); letter-spacing: var(--tr-hero);
  margin-top: var(--s-5); max-width: 12.2em; text-wrap: balance;
}
.fx-hero__soft { display: block; font-weight: var(--w-display-soft); color: var(--xenth-text-muted); }
.fx-hero__lede { margin-top: var(--s-6); font-size: var(--t-lead); line-height: 1.55; color: var(--xenth-text-muted); font-weight: var(--w-lead); max-width: 36rem; }
.fx-hero__actions { margin-top: var(--s-7); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); }
.fx-hero__note { margin-top: var(--s-4); font-size: var(--t-small); color: var(--xenth-text-dim); }
.fx-hero__foundation { margin-top: var(--s-8); }

@keyframes fx-rise { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
@keyframes fx-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes fx-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fx-lift { from { transform: translateY(14px); } to { transform: none; } }  /* text stays visible on first frame */
@media (prefers-reduced-motion: no-preference) {
  .fx-hero__inner > * { animation: fx-lift 800ms var(--ease-reveal) both; }
  .fx-hero__inner > :nth-child(1) { animation-delay: 60ms; }
  .fx-hero__inner > :nth-child(2) { animation-delay: 140ms; }
  .fx-hero__inner > :nth-child(3) { animation-delay: 240ms; }
  .fx-hero__inner > :nth-child(4) { animation-delay: 320ms; }
  .fx-hero__inner > :nth-child(5) { animation-delay: 380ms; }
  .fx-hero__inner > :nth-child(6) { animation-delay: 440ms; }
}

@media (max-width: 959px) {
  .fx-hero { align-items: flex-start; padding-top: clamp(2.5rem, 7vh, 4rem); }
  .fx-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(5, 6, 8, 0.2), rgba(5, 6, 8, 0.78) 62%, #050608); }
}

/* ------------------------------------------------ Act II · the problem -- */

.fx-problem { background: linear-gradient(180deg, #07090c, var(--xenth-bg)); }
.fx-frags { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4) var(--s-3); align-items: start; }
.fx-frags li {
  font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.04em; color: var(--xenth-text-muted);
  background: var(--xenth-surface); border: var(--hairline) solid var(--xenth-border); border-radius: var(--radius);
  padding: 0.7rem 0.85rem; line-height: 1.3;
}
.fx-frags li:nth-child(3n+2) { margin-top: 1.4rem; }
.fx-frags li:nth-child(3n)   { margin-top: 0.4rem; }
.fx-frags li:nth-child(4n+1) { margin-left: 0.6rem; }
.fx-frags li:nth-child(5n+2) { border-style: dashed; }
.fx-frags li:nth-child(7)    { grid-column: 2 / span 2; }
.js .fx-frags li { opacity: 0; transform: translate3d(calc((var(--n, 0) - 4.5) * 7px), 14px, 0); transition: opacity var(--dur-reveal) var(--ease-reveal), transform var(--dur-reveal) var(--ease-reveal); transition-delay: calc(var(--n, 0) * 70ms); }
.js .fx-frags.is-in li { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .fx-frags li { opacity: 1; transform: none; transition: none; } }

/* -------------------------------- Act III · the living structure stage -- */

.fx-stage { position: relative; background: var(--xenth-bg); }
.fx-stage__pin { min-height: 100svh; display: grid; align-content: center; padding-block: var(--s-10) var(--s-9); }
.fx-stage__lede { margin-top: var(--s-4); color: var(--xenth-text-muted); max-width: 40ch; }
.fx-stage { --p: 1; }
.fx-path { list-style: none; margin: var(--s-9) 0 0; padding: 0; position: relative; display: grid; gap: var(--s-3); counter-reset: n; }
.fx-path li { position: relative; display: grid; border: var(--hairline) solid var(--xenth-border); background: var(--xenth-surface); border-radius: var(--radius); padding: 0.9rem 1rem; min-height: 4rem; align-content: center; will-change: auto; }
.fx-node__n { grid-row: 1; font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: var(--tr-label); color: var(--xenth-text-dim); }
.fx-node__before { display: none; }
.fx-node__after { grid-row: 2; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--xenth-text); }
.fx-stage__caption { display: none; }

@media (min-width: 960px) {
  .fx-path { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s-3); margin-top: var(--s-10); }
  .fx-path li { min-height: 7.25rem; padding: 1rem 1rem 1.1rem; align-content: space-between; }
  .fx-path::before { content: ""; position: absolute; left: 0; right: 0; top: -1.75rem; height: 1px; background: linear-gradient(90deg, var(--xenth-border), var(--xenth-signal)); transform-origin: left; transform: scaleX(var(--p)); }
  .fx-path::after { content: ""; position: absolute; right: -0.4rem; top: calc(-1.75rem - 0.6rem); width: 1.2rem; height: 1.2rem; background: #e3f0ff; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); filter: drop-shadow(0 0 8px rgba(120, 190, 255, 0.9)); opacity: calc((var(--p) - 0.7) * 3.3); }
}

/* Motion mode: the stage pins; scrolling assembles the path. No scroll hijack,
   the page keeps scrolling at native speed; only the stage holds still. */
.fx-motion .fx-stage { height: 270vh; }
.fx-motion .fx-stage__pin { position: sticky; top: 0; height: 100svh; min-height: 0; padding-top: calc(var(--spine-offset, 4.2rem) + var(--s-6)); padding-bottom: var(--s-6); align-content: center; }
.fx-motion .fx-path li {
  transform: translate3d(calc((1 - var(--p)) * var(--x) * var(--xs, 1)), calc((1 - var(--p)) * var(--y) * var(--ys, 1)), 0);
  border-color: color-mix(in srgb, var(--xenth-signal) calc(var(--p) * 55%), var(--xenth-border));
}
.fx-motion .fx-node__before, .fx-motion .fx-node__after { display: block; grid-column: 1; }
.fx-motion .fx-node__before { grid-row: 2; font-family: var(--font-mono); font-size: 0.78rem; line-height: 1.3; letter-spacing: 0.02em; color: #c9cfd8; opacity: calc(1 - var(--p) * 2.4); }
.fx-motion .fx-node__after { opacity: calc((var(--p) - 0.4) * 2.4); }
.fx-motion .fx-node__n { color: color-mix(in srgb, var(--xenth-signal) calc(var(--p) * 100%), var(--xenth-text-dim)); }
.fx-motion .fx-stage__caption { display: block; position: relative; margin-top: var(--s-6); height: 1.5rem; font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: var(--tr-label); text-transform: uppercase; }
.fx-motion .fx-stage__caption span { position: absolute; left: 0; top: 0; }
.fx-motion [data-fx-cap-a] { color: var(--xenth-text-dim); opacity: calc(1 - var(--p) * 2.4); }
.fx-motion [data-fx-cap-b] { color: var(--xenth-signal); opacity: calc((var(--p) - 0.4) * 2.4); }

@media (max-width: 959px) {
  .fx-path { gap: var(--s-2); margin-top: var(--s-6); --xs: 0.55; --ys: 0.5; }
  .fx-path li { min-height: 0; grid-template-columns: 2.4rem 1fr; padding: 0.7rem 0.85rem; align-items: center; }
  .fx-node__n { grid-row: 1; grid-column: 1; }
  .fx-node__after { grid-row: 1; grid-column: 2; font-size: 1rem; }
  .fx-motion .fx-stage { height: 230vh; }
  .fx-motion .fx-node__before, .fx-motion .fx-node__after { grid-row: 1; grid-column: 2; }
  .fx-motion .fx-node__before { font-size: 0.8rem; }
  .fx-stage__pin .fx-h2 { font-size: clamp(1.6rem, 1.1rem + 2.6vw, 2.2rem); }
  .fx-motion .fx-stage__lede { display: none; }
}
@media (max-width: 959px) and (max-height: 700px) { .fx-motion .fx-stage__caption { display: none; } }

/* --------------------------------------------------- Act IV · services -- */

.fx-services { background: var(--xenth-bg); }
.fx-services__head { display: grid; gap: var(--s-4); margin-bottom: var(--s-8); }
.fx-index { list-style: none; margin: 0; padding: 0; border-top: var(--hairline) solid var(--xenth-border); }
.fx-row { position: relative; border-bottom: var(--hairline) solid var(--xenth-border); }
.fx-row__head {
  width: 100%; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto 1.4rem; align-items: center; gap: var(--s-3);
  padding: 1.15rem 0; background: none; border: 0; color: var(--xenth-text); text-align: left; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: clamp(1.15rem, 0.95rem + 1.15vw, 1.85rem); letter-spacing: -0.015em; line-height: 1.15;
}
.fx-row__head:focus-visible { outline: var(--focus-ring); outline-offset: -2px; }
.fx-row__n { font-family: var(--font-mono); font-weight: 400; font-size: var(--t-label); letter-spacing: var(--tr-label); color: var(--xenth-text-dim); transition: color var(--dur-base) var(--ease); }
.fx-row__name { transition: transform var(--dur-base) var(--ease-reveal), color var(--dur-base) var(--ease); }
.fx-row__tag { font-family: var(--font-mono); font-weight: 400; font-size: var(--t-label); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--xenth-signal); }
.fx-row__mark { position: relative; width: 14px; height: 14px; justify-self: end; }
.fx-row__mark::before, .fx-row__mark::after { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 1.5px; background: var(--xenth-text-muted); transition: transform var(--dur-base) var(--ease-reveal), background-color var(--dur-base) var(--ease); }
.fx-row__mark::after { transform: rotate(90deg); }
.fx-row[data-open] .fx-row__mark::after { transform: rotate(0); }
.fx-row[data-open] .fx-row__mark::before, .fx-row[data-open] .fx-row__mark::after { background: var(--xenth-signal); }
.fx-row[data-open] .fx-row__n { color: var(--xenth-signal); }
@media (hover: hover) {
  .fx-row__head:hover .fx-row__name { transform: translateX(0.35rem); }
  .fx-row__head:hover .fx-row__n { color: var(--xenth-text); }
}
.fx-row__body { display: grid; grid-template-rows: 1fr; }
.fx-row__inner { min-height: 0; overflow: hidden; padding-left: 3.35rem; }
.fx-row__inner p { max-width: 56ch; color: var(--xenth-text-muted); }
.fx-row__inner .link-arrow { display: inline-block; margin: var(--s-3) 0 1.5rem; }
.js .fx-row__body { grid-template-rows: 0fr; transition: grid-template-rows var(--dur-slow) var(--ease-reveal), visibility 0s linear var(--dur-slow); visibility: hidden; }
.js .fx-row[data-open] .fx-row__body { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
@media (min-width: 1100px) {  /* the North Star marks the open row */
  .fx-row__head::before { content: ""; position: absolute; left: -1.6rem; top: 1.45rem; width: 0.8rem; height: 0.8rem; background: #e3f0ff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); opacity: 0; transform: scale(0.4); transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease-reveal); }
  .fx-row[data-open] .fx-row__head::before { opacity: 1; transform: none; }
}
@media (max-width: 599px) {
  .fx-row__head { grid-template-columns: 2rem minmax(0, 1fr) 1.2rem; }
  .fx-row__tag { display: none; }
  .fx-row__inner { padding-left: 2.75rem; }
}
@media (prefers-reduced-motion: reduce) { .js .fx-row__body { transition: none; } }

/* ------------------------------------------------ Act V · the system ---- */

.fx-system { background: linear-gradient(180deg, var(--xenth-bg), #090c11 70%, #070a0e); overflow: hidden; }
.fx-system__grid { display: grid; gap: var(--s-10); align-items: center; }
@media (min-width: 960px) { .fx-system__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-11); } }
.fx-layers { list-style: none; margin: var(--s-8) 0 0; padding: 0; display: grid; gap: 0; border-top: var(--hairline) solid var(--xenth-border); }
.fx-layers li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.25rem var(--s-4); padding: 1.1rem 0 1.1rem 1rem; border-bottom: var(--hairline) solid var(--xenth-border); border-left: 2px solid transparent; transition: border-color var(--dur-base) var(--ease), background-color var(--dur-base) var(--ease); }
.fx-layers__k { grid-row: 1 / span 2; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.1em; color: var(--xenth-signal); padding-top: 0.2rem; }
.fx-layers b { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: -0.01em; }
.fx-layers li > span:last-child { color: var(--xenth-text-muted); font-size: var(--t-small); grid-column: 2; }
@media (hover: hover) { .fx-layers li:hover { border-left-color: var(--xenth-signal); background: rgba(78, 164, 255, 0.04); } }

.fx-planes { position: relative; width: 100%; max-width: 34rem; aspect-ratio: 1 / 1; margin-inline: auto; perspective: 1500px; transform-style: preserve-3d; }
.fx-system__copy > * + * { margin-top: var(--s-5); }
.fx-system__copy > .fx-layers { margin-top: var(--s-8); }
.fx-plane {
  position: absolute; inset: 20% 12% 14% 12%;
  background: linear-gradient(135deg, #182131, #0c1119 70%);
  border: var(--hairline) solid rgba(188, 193, 201, 0.28);
  transform: rotateX(58deg) rotateZ(-38deg) translateZ(calc((2 - var(--k)) * 1.1rem));
  transition: transform var(--dur-assemble) var(--ease-structure), border-color var(--dur-base) var(--ease), background-color var(--dur-base) var(--ease);
  display: flex; align-items: flex-end; padding: 0.9rem;
  box-shadow: 0 1.6rem 3rem -1.4rem rgba(0, 0, 0, 0.8);
}
.fx-plane span { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.16em; color: rgba(227, 240, 255, 0.78); }
.fx-plane:nth-child(1) { border-color: rgba(160, 205, 255, 0.55); background: linear-gradient(135deg, #223149, #101722 72%); }
.fx-planes.is-in .fx-plane { transform: rotateX(58deg) rotateZ(-38deg) translateZ(calc((2 - var(--k)) * 4.6rem)); }
.fx-planes[data-active="0"] .fx-plane:nth-child(1), .fx-planes[data-active="1"] .fx-plane:nth-child(2), .fx-planes[data-active="2"] .fx-plane:nth-child(3) { border-color: var(--xenth-signal); }
.fx-planes__axis { transform: translateZ(11rem); position: absolute; left: 50%; top: 6%; bottom: 22%; width: 1px; background: linear-gradient(180deg, #e3f0ff, rgba(78, 164, 255, 0)); opacity: 0.0; transition: opacity var(--dur-assemble) ease 0.6s; }
.fx-planes__axis::before { content: ""; position: absolute; left: -0.45rem; top: -0.5rem; width: 0.9rem; height: 0.9rem; background: #e3f0ff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); filter: drop-shadow(0 0 8px rgba(120, 190, 255, 0.9)); }
.fx-planes.is-in .fx-planes__axis { opacity: 0.9; }
@media (prefers-reduced-motion: reduce) {
  .fx-plane { transition: none; transform: rotateX(58deg) rotateZ(-38deg) translateZ(calc((2 - var(--k)) * 4.6rem)); }
  .fx-planes__axis { opacity: 0.9; transition: none; }
}
@media (max-width: 599px) { .fx-layers li { grid-template-columns: 1fr; } .fx-layers__k { grid-row: auto; } .fx-layers li > span:last-child { grid-column: 1; } .fx-planes { max-width: 22rem; } .fx-plane { inset: 22% 8% 16% 8%; } }

/* ------------------------------------------------- Act VI · the method -- */

.fx-method { background: linear-gradient(180deg, #070a0e, var(--xenth-bg) 60%, #07090c); }
.fx-steps { list-style: none; margin: var(--s-9) 0 0; padding: 0; display: grid; gap: var(--s-7); counter-reset: s; }
.fx-steps li { position: relative; padding-top: var(--s-5); border-top: var(--hairline) solid var(--xenth-border); }
.fx-steps li::before { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 100%; background: var(--xenth-signal); transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease-structure); transition-delay: calc(var(--n, 0) * 220ms); }
.fx-steps.is-in li::before { transform: scaleX(1); }
.fx-steps__n { display: block; font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: var(--tr-label); color: var(--xenth-text-dim); margin-bottom: var(--s-4); }
.fx-steps p { margin-top: var(--s-3); color: var(--xenth-text-muted); max-width: 34ch; }
.fx-method__note { margin-top: var(--s-9); max-width: 52ch; color: var(--xenth-text-dim); font-size: var(--t-small); }
@media (min-width: 900px) { .fx-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-8); } }
@media (prefers-reduced-motion: reduce) { .fx-steps li::before { transform: scaleX(1); transition: none; } }
.js:not(.fx-motion) .fx-steps li::before { transform: scaleX(1); }

.fx-founder { background: #07090c; border-top: var(--hairline) solid var(--xenth-border-soft); }

/* ------------------------------------------------ Act VII · destination -- */

.fx-sky { position: relative; isolation: isolate; overflow: hidden; color: var(--sky-ink); padding-block: clamp(5.5rem, 14vw, 11rem); background: linear-gradient(180deg, var(--sky-0) 0%, var(--sky-1) 55%, #f4f5f7 100%); }
.fx-sky::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(11, 79, 156, 0.5), transparent); z-index: 2; }
.fx-sky__inner { position: relative; }
.fx-sky__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.2rem, 1.1rem + 4.6vw, 4.6rem); line-height: 1.02; letter-spacing: -0.035em; max-width: 15em; text-wrap: balance; color: var(--sky-ink); }
.fx-sky__lede { margin-top: var(--s-6); max-width: 38rem; font-size: var(--t-lead); color: var(--sky-ink-2); font-weight: var(--w-lead); }
.fx-sky__actions { margin-top: var(--s-8); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-7); }
.fx-sky .btn--primary { background: var(--sky-ink); color: #f5f5f6; border-color: var(--sky-ink); }
.fx-sky .btn--primary:hover { background: #1a2230; box-shadow: 0 14px 30px -14px rgba(11, 13, 16, 0.6); }
.fx-sky .btn:focus-visible { outline: 2px solid var(--sky-signal); outline-offset: 3px; }

/* ------------------------------------ Shared system: inner page headers -- */

.page-head { position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(54% 80% at 88% 0%, var(--haze-ice), transparent 70%), linear-gradient(180deg, #06080b, var(--xenth-bg)); }
.page-head::after {
  content: ""; position: absolute; z-index: -1; right: max(1.5rem, calc(50% - 36rem)); top: 50%; width: 7rem; height: 7rem; transform: translateY(-50%); opacity: 0.8;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='24' fill='none' stroke='%234ea4ff' stroke-opacity='.35'/%3E%3Ccircle cx='50' cy='50' r='42' fill='none' stroke='%234ea4ff' stroke-opacity='.15'/%3E%3Cpath d='M50 18 L53 47 L82 50 L53 53 L50 82 L47 53 L18 50 L47 47Z' fill='%23e3f0ff'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (max-width: 719px) { .page-head::after { width: 4.5rem; height: 4.5rem; top: 1.8rem; transform: none; opacity: 0.55; } }

/* ------------------------------------------------ Living Spine: the star -- */

.spine__node[data-state="operational"] .spine__dot {
  width: 12px; height: 12px; margin: -3.5px; box-shadow: none; background: #e3f0ff;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}
.spine__node[data-state="operational"] { filter: drop-shadow(0 0 5px rgba(120, 190, 255, 0.6)); }
@media (max-width: 1279px) { [data-spine-rail] { display: none; } }   /* clarity over spectacle on small screens */

/* ------------------------------------------------------------- Forms ---- */

.hubspot-form-panel { transition: box-shadow var(--dur-base) var(--ease); }
.hubspot-form-panel[data-form-state="ready"] { box-shadow: 0 0 0 1px rgba(78, 164, 255, 0.35); }
.form-success { margin-top: var(--s-4); padding: var(--s-4) var(--s-5); border: var(--hairline) solid var(--xenth-signal); border-radius: var(--radius); color: var(--xenth-text); background: rgba(78, 164, 255, 0.06); }

/* ----------------------------------------------------- Reduced motion ---- */

@media (prefers-reduced-motion: reduce) {
  .fx-hero__inner > * { animation: none !important; }
  .btn, .fx-link span, .fx-link svg, .fx-row__name { transition: none; }
}
@media print { .fx-celestial, .fx-sky__signature, .fx-planes { display: none; } }

/* Mobile menu: centred call to action */
.nav-panel .btn { justify-content: center; text-align: center; }

/* Clip the stage's scatter horizontally (offsets must never create page scroll).
   `clip` does not create a scroll container, so the sticky pin keeps working. */
.fx-stage { overflow-x: clip; }

/* Short landscape screens (phones on their side): the offer and CTA stay in the first view. */
@media (max-height: 520px) and (orientation: landscape) {
  .fx-hero { min-height: 0; padding-block: 1.25rem 1.75rem; align-items: flex-start; }
  .fx-hero__inner > .eyebrow, .fx-hero__note, .fx-hero__foundation { display: none; }
  .fx-hero__title { margin-top: 0; font-size: clamp(1.9rem, 5.2vw, 2.6rem); max-width: 16em; }
  .fx-hero__lede { margin-top: var(--s-3); font-size: 1rem; max-width: 40rem; }
  .fx-hero__actions { margin-top: var(--s-4); }
  .fx-motion .fx-stage { height: 200vh; }
}

/* Section rail over the light destination section (set by flagship.js) */
html[data-rail="light"] .spine {
  --spine-unknown: #7a8596; --spine-discovered: #566174; --spine-validated: #2f3745;
  --spine-authorized: #0b0d10; --spine-operational: #0f2f5c;
}
html[data-rail="light"] .spine__frame, html[data-rail="light"] .spine__nodes::before { background: rgba(11, 13, 16, 0.28); }
html[data-rail="light"] .spine__node[data-state="operational"] .spine__dot { background: #0f2f5c; }
html[data-rail="light"] .spine__node[data-state="operational"] { filter: none; }
html[data-rail="light"] .spine__label { background: #ffffff; border-color: #9aa6b8; color: #0b0d10; }
.spine__node:focus-visible { outline: var(--focus-ring); outline-offset: 4px; }
html[data-rail="light"] .spine__node:focus-visible { outline-color: #0b4f9c; }

/* Chips start offset before they reveal: clip so they can never widen the page */
.fx-problem { overflow-x: clip; }

.fx-showcase { margin-block: 3rem 0; }
.fx-showcase a { display: block; border: 1px solid rgba(145,177,213,.25); border-radius: 12px; overflow: hidden; box-shadow: 0 24px 80px rgba(0,0,0,.3); }
.fx-showcase img { display: block; width: 100%; height: auto; }
.fx-showcase figcaption { margin-top: 1rem; font-size: .8rem; line-height: 1.6; color: var(--xenth-muted, #a8b4c6); }
.fx-showcase a:focus-visible { outline: var(--focus-ring); outline-offset: 6px; }
@media (max-width: 767px) {
  .fx-showcase { margin-top: 2rem; }
}

/* Small phones (iPhone SE class): offer and CTA stay in the first view */
@media (max-width: 480px) and (max-height: 720px) {
  .fx-hero { padding-block: 1.25rem 2rem; }
  .fx-hero__title { margin-top: var(--s-3); font-size: clamp(2rem, 9.2vw, 2.4rem); }
  .fx-hero__lede { margin-top: var(--s-4); font-size: 1rem; line-height: 1.5; }
  .fx-hero__actions { margin-top: var(--s-5); }
  .fx-hero__foundation { margin-top: var(--s-6); }
}

/* Deliberate movement: a finite arrival and one-time scroll reveals. */
.fx-explorer { display: none; margin-top: 3rem; }
.fx-explorer[data-ready] { display: block; }
.fx-explorer__controls { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1rem; }
.fx-explorer__controls button { flex: 1 1 180px; padding: 1.1rem 1.25rem; text-align: left; color: var(--xenth-text); font: inherit; font-weight: 600; cursor: pointer; border: 1px solid #344459; border-radius: 8px; background: #101823; }
.fx-explorer__controls span { display: block; font-size: .85rem; font-weight: 400; color: #b5c6d9; margin-top: .4rem; }
.fx-explorer__controls button[aria-pressed="true"] { background: #142b46; border-color: #69b3ff; box-shadow: inset 0 0 0 1px #69b3ff; }
.fx-explorer__controls button:focus-visible { outline: var(--focus-ring); outline-offset: 4px; }
.fx-explorer__detail { min-height: 3.2em; margin-top: 1rem; max-width: 52rem; color: #c7d6e7; }
@media (prefers-reduced-motion: no-preference) {
  .fx-explorer__controls button { transition: transform .25s ease, background .25s ease, border-color .25s ease; }
  .fx-explorer__controls button:hover { transform: translateY(-4px); border-color: #69b3ff; }
  .fx-motion .fx-showcase { opacity: .15; transform: translateY(36px); transition: opacity .9s ease, transform .9s cubic-bezier(.16,1,.3,1); }
  .fx-motion .fx-showcase.is-in { opacity: 1; transform: none; }
  .fx-showcase a img { transition: transform .6s cubic-bezier(.16,1,.3,1); }
  .fx-showcase a:hover img { transform: scale(1.015); }
}
html[data-static] .fx-explorer__controls button, html[data-static] .fx-showcase a img { transition: none; }
html[data-static] .fx-explorer__controls button:hover, html[data-static] .fx-showcase a:hover img { transform: none; }

/* Ghost commercial pass: an immediate offer and one restrained arrival. */
.fx-hero__title{font-size:clamp(2.5rem,1.25rem + 4.2vw,4.5rem);max-width:14em;letter-spacing:-.035em}
.fx-hero__lede{max-width:34rem;line-height:1.65}
/* Review polish: preserve the compact hero rules after the commercial type pass. */
.fx-hero__title { text-wrap: balance; }
.fx-explorer__controls button { min-height: 64px; }
.fx-showcase { min-width: 0; }
@media (max-width: 480px) {
  .fx-hero__title { font-size: clamp(2rem, 9.2vw, 2.65rem); line-height: 1.08; }
  .fx-hero__actions { gap: .75rem 1.5rem; }
  .fx-hero__actions .btn { width: 100%; justify-content: center; }
  .fx-hero__actions .fx-link { min-height: 44px; }
  .fx-explorer__controls { gap: .5rem; }
  .fx-explorer__controls button { flex-basis: 100%; }
  .fx-row__name { overflow-wrap: anywhere; }
}
@media (max-width: 480px) and (max-height: 720px) {
  .fx-hero__title { font-size: clamp(2rem, 9.2vw, 2.4rem); }
}
@media (max-height: 520px) and (orientation: landscape) {
  .fx-hero__title { font-size: clamp(1.9rem, 5.2vw, 2.6rem); }
}
@media (prefers-reduced-motion: reduce) {
  .fx-motion .fx-showcase { opacity: 1; transform: none; }
}

/* XENTH celestial atmosphere: quiet space, one fixed guiding light.
   Native vector detail keeps it crisp at every size; no video or starfield loop. */
.fx-hero { background: #07090c; }
.fx-hero::before { display: none; }
.fx-celestial { position: absolute; inset: 0; z-index: 0; pointer-events: none; transform: translateY(calc(var(--sy, 0) * .025px)); }
.fx-celestial__field { display: block; width: 100%; height: 100%; }
.fx-celestial__points { opacity: .34; }
.fx-celestial__star { filter: drop-shadow(0 0 4px rgba(234,195,110,.44)) drop-shadow(0 0 18px rgba(214,173,92,.18)); }
.fx-stage__pin { position: relative; isolation: isolate; overflow: hidden; }
.fx-stage__pin > .wrap { position: relative; z-index: 2; }
.fx-constellation { position: absolute; inset: 0; color: #c5cedb; opacity: calc(.035 + var(--p, 1) * .065); pointer-events: none; }
.fx-constellation svg { width: 100%; height: 100%; }
.fx-constellation__routes { stroke-width: .6; }
.fx-sky { background: radial-gradient(ellipse at 85% 30%, #fff 0%, #f4f5f7 45%, #e8ecf1 100%); }
.fx-sky__inner { position: relative; z-index: 2; }
.fx-sky__signature { position: absolute; width: clamp(10rem, 22vw, 20rem); right: max(3rem, calc(50% - 35rem)); top: 50%; transform: translateY(-50%); opacity: .055; pointer-events: none; }
.fx-sky__signature img { display: block; width: 100%; height: auto; }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-static]) .fx-celestial__north { animation: fx-fade 1.6s ease both; }
}
@media (max-width: 959px) {
  .fx-celestial { inset: 0 -25% 0 0; opacity: .6; }
  .fx-hero::after { background: linear-gradient(90deg, rgba(7,9,12,.2), transparent), linear-gradient(0deg, #07090c, transparent 75%); }
  .fx-sky__signature { right: -3rem; top: 24%; opacity: .035; }
}
@media (max-width: 599px) {
  .fx-celestial { inset: 0 -60% 0 0; opacity: .5; }
  .fx-celestial__field { position: absolute; width: 900px; max-width: none; height: 562px; top: -190px; right: 110px; }
  .fx-celestial__north { transform: none; }
  .fx-sky__signature { width: 12rem; }
}
@media (prefers-reduced-motion: reduce) { .fx-celestial { transform: none; } .fx-celestial__north { animation: none; } }
html[data-static] .fx-celestial { transform: none; }
html[data-static] .fx-celestial__north { animation: none; }
@media print { .fx-celestial, .fx-constellation, .fx-sky__signature { display: none; } }