:root {
  color-scheme: dark;
  --bg: #080f1c;
  --paper: #f4f0ee;
  --muted: #bbc5d2;
  --accent: #ffa37d;
  --line: #73849b55;
  /* Header height. The hero slides under it so the gradient runs to the top edge. */
  --bar: clamp(58px, 10vh, 92px);
  font-family: Arial, Helvetica, sans-serif;
  color: var(--paper);
  background: var(--bg);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.wrap { width: min(93%, 1640px); margin-inline: auto; }
.skip { position: fixed; z-index: 10; top: 12px; left: 12px; transform: translateY(-180%); }
.skip:focus { transform: none; background: var(--bg); padding: .75rem 1rem; }

/* Header */
.topbar { position: relative; z-index: 2; }
.topbar .wrap { display: flex; justify-content: space-between; gap: 24px; align-items: center; min-height: var(--bar); padding-block: 10px; }
.brand { display: inline-flex; gap: .55em; align-items: center; white-space: nowrap; font-size: clamp(1.2rem, min(1.75vw, 3.7vh), 1.85rem); font-weight: 800; letter-spacing: .005em; text-decoration: none; }
.brand::before { content: ""; width: .13em; height: .86em; background: var(--accent); transform: skew(-29deg); }
.topnav { display: flex; gap: clamp(16px, 3.4vw, 64px); align-items: center; font-size: clamp(.9rem, min(1.12vw, 2.4vh), 1.25rem); }
.topnav a { text-decoration: none; white-space: nowrap; }
.button { display: inline-flex; justify-content: center; align-items: center; padding: .53em 1.15em; border: 1px solid currentColor; text-decoration: none; line-height: 1.25; }

/* Hero: sized against viewport height as well as width so the headline,
   supporting line and the full offer row fit above the fold on desktop. */
.hero { position: relative; isolation: isolate; overflow: hidden; margin-top: calc(-1 * var(--bar)); padding-top: calc(var(--bar) + clamp(4px, 1.4vh, 22px)); padding-bottom: clamp(40px, 6.6vh, 72px); background: radial-gradient(ellipse at 55% 42%, #112138 0%, #0a1729 44%, #080f1c 87%); }
.hero .wrap { position: relative; }
.horizon { position: absolute; z-index: -1; top: calc(var(--bar) * .82); right: 0; width: min(44vw, 760px); height: auto; opacity: .66; filter: brightness(.86) saturate(.9); -webkit-mask-image: linear-gradient(to right, transparent, black 24%), linear-gradient(to bottom, transparent, black 12%, black 58%, transparent 96%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, black 24%), linear-gradient(to bottom, transparent, black 12%, black 58%, transparent 96%); mask-composite: intersect; }
.orbit { position: absolute; z-index: -1; right: 21%; top: calc(var(--bar) + 13vh); width: min(40%, 660px); opacity: .8; }
.hero h1 { font-family: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; font-size: clamp(1.9rem, min(3.35vw, 6.6vh), 4.2rem); line-height: 1.04; letter-spacing: -.02em; font-weight: 600; }
.hero h1 span { display: block; }
.hero-intro { max-width: 76ch; margin-top: clamp(8px, 1.5vh, 18px); font-size: clamp(1rem, min(1.3vw, 2.65vh), 1.42rem); line-height: 1.35; }

/* Offers. Each card spans four rows of a shared grid (subgrid), so planets,
   titles, subtitles and arrow rows line up across a row of cards. */
.offers {
  --gap: clamp(20px, 2.6vw, 56px);
  --planet: clamp(140px, 35vh, 296px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: 0;
  margin-top: clamp(14px, 3.4vh, 42px);
}
.offer { display: grid; grid-row: span 4; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); align-content: start; min-width: 0; text-decoration: none; border-radius: 6px; -webkit-tap-highlight-color: transparent; }
.offer > .planet-wrap { grid-area: 1 / 1; }
.offer > h2 { grid-area: 2 / 1; align-self: end; }
.offer > .offer-summary { grid-area: 3 / 1; }
.offer > .offer-action { grid-area: 4 / 1; }
.offer::after { content: ""; grid-area: 2 / 1 / 5 / 2; justify-self: end; width: 1px; margin-right: calc(var(--gap) / -2); background: var(--line); pointer-events: none; }
.offer:last-child::after { display: none; }
.offer:focus-visible { outline-offset: 8px; }
.offer:focus-visible h2 { color: var(--accent); }
.offer h2 { font-size: clamp(1.4rem, min(2.15vw, 4.5vh), 2.65rem); letter-spacing: -.04em; line-height: 1.1; }
.offer-summary { margin-top: clamp(3px, .8vh, 10px); font-size: clamp(.94rem, min(1.08vw, 2.3vh), 1.15rem); line-height: 1.3; letter-spacing: -.006em; }
.offer-action { display: flex; gap: .9em; align-items: flex-start; margin-top: clamp(8px, 1.6vh, 18px); font-size: clamp(.94rem, min(1.08vw, 2.3vh), 1.15rem); line-height: 1.3; color: #dfe4ea; }
@media (min-width: 1000px) { .offer-summary { margin-right: -6px; } }
.arrow { color: var(--accent); width: 1.85em; height: 1em; flex: none; margin-top: .17em; }
@media (hover: hover) {
  .topnav a:hover, .footer a:hover, .button:hover, .offer:hover h2 { color: var(--accent); }
}

/* Planets: a soft circular mask blends the square image edges into the hero. */
.planet-wrap { position: relative; display: block; width: min(100%, var(--planet, 100%)); aspect-ratio: 1; isolation: isolate; -webkit-mask-image: radial-gradient(closest-side, #000 91.5%, transparent 100%); mask-image: radial-gradient(closest-side, #000 91.5%, transparent 100%); }
.offer .planet-wrap { margin-left: calc(min(100%, var(--planet)) * -.045); margin-bottom: clamp(6px, 1.5vh, 18px); }
.planet { display: block; width: 100%; height: auto; }
/* Rotating surface (WebGL, assets/home.js). Hidden until its first frame; the
   static artwork underneath stays as the fallback. */
.globe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .3s ease; }
.is-turning .globe { opacity: 1; }

/* Discreet pause control for the continuous rotation. */
.motion-toggle { position: absolute; z-index: 1; right: max(3.5%, calc((100% - 1640px) / 2)); bottom: clamp(8px, 1.6vh, 20px); display: inline-flex; gap: .45em; align-items: center; padding: .3em .7em; border: 1px solid #73849b66; border-radius: 999px; background: #080f1ccc; color: var(--muted); font: inherit; font-size: .78rem; line-height: 1.2; cursor: pointer; }
.motion-toggle[hidden] { display: none; }
.motion-toggle svg { width: .85em; height: .85em; fill: currentColor; }
.motion-toggle .i-play, .motion-toggle[aria-pressed="true"] .i-pause { display: none; }
.motion-toggle[aria-pressed="true"] .i-play { display: inline; }
.motion-toggle:focus-visible { outline-offset: 3px; }
@media (hover: hover) { .motion-toggle:hover { color: var(--paper); border-color: var(--muted); } }

/* Surface light. Four short effects with their own timelines, independent of
   the WebGL rotation: assets/home.js only keeps each light on its surface
   feature. Every element is invisible at rest; .is-playing runs one pass,
   offset by --d during the opening sequence. */
.fx { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; overflow: visible; }
.fx * { opacity: 0; transform-box: fill-box; transform-origin: center; }
.offer.is-playing .fx * { animation-delay: calc(var(--d, 0ms) + var(--at, 0s)); animation-fill-mode: both; }

/* SQE China: a warm point travels along the trade route into its lit point. */
.sqe-trail { fill: none; stroke: #ffb27a; stroke-width: 3.6; stroke-linecap: round; stroke-dasharray: 30 300; }
.sqe-spark { fill: none; stroke: #fff4e6; stroke-width: 9; stroke-linecap: round; stroke-dasharray: .01 300; }
.sqe-halo { stroke: #ff9a55; stroke-width: 26; }
.is-playing .sqe-trail { animation: sqe-trail 1.7s cubic-bezier(.45, 0, .3, 1); }
.is-playing .sqe-spark { animation: sqe-spark 1.7s cubic-bezier(.45, 0, .3, 1); }
.is-playing .sqe-halo { animation-name: sqe-halo; }
.is-playing .sqe-flare { --at: 1.45s; animation: flare .9s ease-out; }
@keyframes sqe-trail { from { stroke-dashoffset: 30; opacity: 0; } 15% { opacity: .95; } 85% { opacity: .95; } to { stroke-dashoffset: -70; opacity: 0; } }
@keyframes sqe-spark { from { stroke-dashoffset: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } to { stroke-dashoffset: -100; opacity: 0; } }
@keyframes sqe-halo { from { stroke-dashoffset: 0; opacity: 0; } 12% { opacity: .55; } 88% { opacity: .55; } to { stroke-dashoffset: -100; opacity: 0; } }
@keyframes flare { from { opacity: 0; transform: scale(.55); } 35% { opacity: 1; transform: scale(1.12); } to { opacity: 0; transform: scale(.9); } }

/* Mesa China: four connected nodes light in sequence along their links. */
.mesa-edge { fill: none; stroke: #ffd2a3; stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: 38 300; }
.is-playing .mesa-node { animation: flare .85s ease-out; }
.is-playing .mesa-node.n2 { --at: .6s; }
.is-playing .mesa-node.n3 { --at: 1.2s; }
.is-playing .mesa-node.n4 { --at: 1.8s; }
.is-playing .mesa-edge { --at: .2s; animation: mesa-edge .55s ease-in-out; }
.is-playing .mesa-edge.e2 { --at: .8s; }
.is-playing .mesa-edge.e3 { --at: 1.4s; }
@keyframes mesa-edge { from { stroke-dashoffset: 34; opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } to { stroke-dashoffset: -100; opacity: 0; } }

/* LEDVision Pro: a blue scan sweeps a block of tiles, column by column. */
.led-tile { fill: #3d78ff; stroke: #7aa4ff; stroke-width: 3; stroke-opacity: .4; }
.is-playing .led-tile { animation: led-tile 1.1s ease-in-out; }
.is-playing .led-tile.c1 { --at: .1s; }
.is-playing .led-tile.c2 { --at: .35s; }
.is-playing .led-tile.c3 { --at: .6s; }
.is-playing .led-tile.c4 { --at: .85s; }
.is-playing .led-scan { animation: led-scan 1.7s ease-in-out; }
@keyframes led-tile { from { opacity: 0; } 30% { opacity: .95; } 60% { opacity: .7; } to { opacity: 0; } }
@keyframes led-scan { from { opacity: 0; transform: translateX(0); } 18% { opacity: 1; } 82% { opacity: 1; } to { opacity: 0; transform: translateX(140px); } }

/* IVMS: a brief wave passes through a band of LED points. */
.is-playing .ivms-led { --at: calc(var(--i) * 1.1s); animation: ivms-led .8s ease-in-out; }
@keyframes ivms-led { from { opacity: 0; transform: scale(.8); } 45% { opacity: 1; transform: scale(1.15); } to { opacity: 0; transform: scale(.9); } }

/* About and contact */
.band { border-top: 1px solid var(--line); background: #0a1423; }
.band .wrap { padding-block: clamp(45px, 6vw, 100px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 80px); }
.kicker { color: var(--accent); font-size: .77rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.band h2 { font-size: clamp(1.55rem, 2.6vw, 2.55rem); margin-top: .35em; line-height: 1.15; letter-spacing: -.035em; }
.band p:not(.kicker) { margin-top: .85em; color: var(--muted); max-width: 49ch; line-height: 1.55; }
.contact-links { display: flex; gap: .6rem 1.2rem; flex-wrap: wrap; margin-top: .95rem; }
.contact-links a { text-underline-offset: .2em; }
.contact-links a:hover { color: var(--accent); }
.footer { border-top: 1px solid var(--line); color: var(--muted); font-size: .88rem; }
.footer .wrap { display: flex; justify-content: space-between; gap: 1rem; padding-block: 1.45rem; }
.footer a { text-underline-offset: .2em; }

/* Detail pages */
.detail { border-top: 1px solid var(--line); }
.detail-hero { background: radial-gradient(ellipse at 72% 38%, #13253c, var(--bg) 66%); }
.detail-hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 385px); gap: clamp(20px, 5vw, 85px); align-items: center; padding-block: clamp(44px, 6vw, 108px); }
.detail-hero .wrap.no-art { display: block; }
.back { display: inline-block; margin-bottom: clamp(24px, 3vw, 48px); color: var(--muted); text-underline-offset: .22em; }
.detail h1 { margin-top: .18em; font-size: clamp(2.4rem, 5vw, 5rem); letter-spacing: -.045em; line-height: 1.04; }
.detail-lede { max-width: 54ch; margin-top: 1rem; font-size: clamp(1.1rem, 1.55vw, 1.45rem); line-height: 1.48; color: var(--muted); }
.detail-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.55rem; }
.primary { background: var(--accent); border-color: var(--accent); color: #111722; font-weight: 700; }
.primary:hover { color: #111722; background: #ffc2a8; border-color: #ffc2a8; }
.detail-copy { max-width: 1000px; padding-block: clamp(38px, 5vw, 80px); }
.detail-copy h2 { margin-bottom: .6em; font-size: clamp(1.42rem, 2.5vw, 2rem); }
.detail-copy p, .detail-copy li { line-height: 1.65; color: var(--muted); }
.detail-copy p + p, .detail-copy li + li { margin-top: .65rem; }
.detail-copy h2:not(:first-child) { margin-top: 2rem; }
.detail-copy ul { padding-left: 1.15em; }
.detail-copy a { text-underline-offset: .2em; }
.detail-copy a:hover { color: var(--accent); }
.detail-copy section + section { margin-top: clamp(2rem, 4vw, 3rem); }
.detail-copy h3 { font-size: 1.08rem; line-height: 1.3; color: var(--paper); }
.detail-copy .facts p { max-width: 62ch; font-size: 1.12rem; color: var(--paper); }
.external { color: var(--muted); }

/* Numbered path or routine: one row per stage. */
.detail-copy .steps { list-style: none; padding: 0; margin: 0; counter-reset: step; border-top: 1px solid var(--line); }
.steps li { counter-increment: step; display: grid; grid-template-columns: 2.4rem minmax(0, 15rem) minmax(0, 1fr); gap: .3rem 1rem; align-items: baseline; padding-block: .9rem; border-bottom: 1px solid var(--line); }
.detail-copy .steps li + li { margin-top: 0; }
.steps li::before { content: counter(step, decimal-leading-zero); color: var(--accent); font-size: .85rem; font-weight: 700; letter-spacing: .08em; }
.steps p { margin: 0; }
.terms { margin-top: 1rem; padding-left: .9rem; border-left: 2px solid var(--accent); }

/* SQE China / Mesa China distinction, shown on both pages. */
.compare-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.compare-item { display: block; padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-radius: 6px; background: #0a1423; text-decoration: none; }
.compare-item.is-current { border-color: #ffa37d88; }
.detail-copy .compare-item p { margin-top: .4rem; }
.detail-copy .compare-item .compare-kind { margin-top: 0; color: var(--accent); font-size: .77rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.compare-item h3 { margin-top: .35rem; font-size: 1.35rem; }
.detail-copy .compare-item .compare-here { margin-top: .7rem; font-size: .92rem; color: var(--paper); }
a.compare-item:hover .compare-here, a.compare-item:hover h3 { color: var(--accent); }
.detail-copy .compare-note { margin-top: .9rem; }

/* Next step: the CTA repeated where the reading ends. */
.next { padding: clamp(1.3rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: 6px; background: #0a1423; }
.next p { max-width: 62ch; }
.next .detail-actions { margin-top: 1.1rem; }

/* Tablet: two columns, where the descriptions still fit comfortably. */
@media (max-width: 999px) {
  .hero h1 { font-size: clamp(2.1rem, 5.4vw, 3.2rem); }
  .hero-intro { font-size: clamp(1rem, 2vw, 1.2rem); }
  .offers { --planet: 270px; --gap: clamp(22px, 4vw, 40px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .offer:nth-child(n+3) .planet-wrap { margin-top: 30px; }
  .offer:nth-child(2n)::after { display: none; }
  .offer h2 { font-size: clamp(1.45rem, 3.4vw, 2rem); }
  .offer-summary, .offer-action { font-size: 1rem; }
  .horizon { width: 58vw; opacity: .6; }
  .orbit { top: calc(var(--bar) + 6vh); right: 14%; width: 46%; }
  .detail-hero .wrap { grid-template-columns: minmax(0, 1fr) minmax(130px, 32%); }
}

/* Phone: one column, planet beside its text so each offer stays compact. */
@media (max-width: 599px) {
  .offers { grid-template-columns: minmax(0, 1fr); margin-top: 22px; }
  .offer { grid-row: auto; grid-template-rows: auto auto 1fr; grid-template-columns: clamp(92px, 28vw, 132px) minmax(0, 1fr); column-gap: 14px; align-items: center; padding-block: 14px; border-top: 1px solid var(--line); }
  .offer:last-child { border-bottom: 1px solid var(--line); }
  .offer > .planet-wrap { grid-area: 1 / 1 / 4 / 2; align-self: center; }
  .offer > h2 { grid-area: 1 / 2; }
  .offer > .offer-summary { grid-area: 2 / 2; }
  .offer > .offer-action { grid-area: 3 / 2; align-self: start; }
  .offer .planet-wrap, .offer:nth-child(n+3) .planet-wrap { margin: 0; width: 100%; }
  .offer::after { display: none; }
  .offer:focus-visible { outline-offset: 2px; }
  .offer h2 { font-size: 1.4rem; }
  .offer-summary, .offer-action { font-size: .95rem; }
  .offer-action { margin-top: 6px; gap: .5em; }
  .arrow { width: 1.45em; }
}
@media (max-width: 490px) {
  :root { --bar: 100px; }
  .wrap { width: 90%; }
  .topbar .wrap { flex-wrap: wrap; gap: 10px; align-content: center; }
  .topnav { width: 100%; justify-content: space-between; gap: 8px; font-size: .9rem; }
  .hero { padding-top: calc(var(--bar) + 14px); }
  .hero h1 { font-size: clamp(1.95rem, 8.4vw, 2.5rem); }
  .orbit { display: none; }
  .horizon { width: 80vw; top: 70px; opacity: .45; }
  .band .wrap, .detail-hero .wrap { grid-template-columns: 1fr; }
  .detail-hero .planet-wrap { width: min(62vw, 250px); justify-self: center; }
}
@media (max-width: 699px) {
  .steps li { grid-template-columns: 2.2rem minmax(0, 1fr); }
  .steps li p { grid-column: 2; }
  .compare-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fx, .globe, .motion-toggle { display: none; }
}