/* Mobile first. No fixed content heights; image proportions are preserved. */
:root { color-scheme: dark; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; color: #f7f7fd; background: #020b1e; --red: #f33454; --lavender: #d8b7fa; }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 1rem; line-height: 1.55; }
p, h1, h2, h3 { margin: 0; overflow-wrap: break-word; }
h1, h2, h3 { line-height: 1.2; }
.container { width: min(100% - 2.5rem, 68rem); margin-inline: auto; }
.hero { position: relative; isolation: isolate; text-align: center; background: #020b1e; }
.cosmic-sky { position: absolute; inset: 0 0 auto; z-index: -1; pointer-events: none; mask-image: linear-gradient(#000 70%, transparent); }
.cosmic-sky img { display: block; width: 100%; height: auto; }
.hero-content { position: relative; padding-top: clamp(4.5rem, 7vw, 7rem); }
.wordmark { position: relative; display: table; margin-inline: auto; font-size: min(clamp(2.75rem, 7.7vw, 6.5rem), 14.5vw); font-weight: 750; font-style: italic; line-height: 1.1; letter-spacing: -.06em; }
.brand-orbit { position: absolute; width: 59%; height: auto; top: -35%; left: 30%; }
.wordmark > span { color: var(--red); }
.eyebrow { display: flex; align-items: center; justify-content: center; gap: .8rem; margin-top: 1.3rem; font-size: clamp(.68rem, 1.5vw, .95rem); letter-spacing: .24em; }
.eyebrow::before, .eyebrow::after { content: ""; width: clamp(1rem, 5vw, 4rem); height: 1px; background: #c1b9ca; }
h1 { margin: 2rem auto 1.2rem; font-size: clamp(1.75rem, 8.6vw, 2.1rem); font-style: italic; font-weight: 650; letter-spacing: -.025em; }
.headline-opening { display: block; font-size: .83em; font-weight: 500; margin-bottom: .12em; }
.headline-main { display: block; }
.hero-description { max-width: 38rem; margin-inline: auto; font-size: clamp(1rem, 2.2vw, 1.375rem); line-height: 1.5; text-wrap: balance; }
.intelligent { color: var(--lavender); }
.learning { color: var(--red); }
.earth-space { display: flex; justify-content: center; overflow: hidden; margin-top: 1rem; mask-image: linear-gradient(transparent, #000 14%, #000 70%, transparent); }
.earth-space picture { display: block; flex: none; width: max(100%, 48rem); }
.earth-space img { display: block; width: 100%; height: auto; }
.lower-space { position: relative; isolation: isolate; padding-top: .5rem; clip-path: inset(0); }
/* The moving section clips the stationary sky without transforming it. */
.fixed-sky { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100lvh; z-index: 0; pointer-events: none; background: url('../images/starfield.svg') center top / 1000px auto repeat; }
/* Same navy as the page: content naturally occludes the fixed decorations. */
.principle, .section-label, .timeline { background-color: #020b1e; }
@supports not (clip-path: inset(0)) { .fixed-sky { position: absolute; height: 100%; } }
.lower-content { position: relative; z-index: 1; }
.panel { border: 1px solid transparent; border-radius: 1.25rem; background: linear-gradient(110deg, #211022, #080f27 45%, #14102d) padding-box, linear-gradient(110deg, #ed244d, #9c76bc 52%, #b45fe7) border-box; }
.creator { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; padding: min(1.5rem, 6vw); }
.creator > *, .principle > *, .status > * { min-width: 0; }
.creator-identity { position: relative; padding-left: min(1rem, 4vw); }
.creator-identity::before { content: ""; position: absolute; inset: .25rem auto .25rem 0; width: 3px; background: var(--red); border-radius: 4px; }
.creator-description { border-top: 1px solid #736580; padding-top: 1rem; }
.creator-location { margin-bottom: .35rem; font-size: .9375rem; font-weight: 500; color: #c3bed1; }
h2 { font-size: clamp(1.25rem, 2.4vw, 1.8rem); font-weight: 700; letter-spacing: -.02em; }
.creator-name { font-size: clamp(1.25rem, 2.4vw, 1.8rem); }
.principles { display: grid; gap: 2rem; margin-block: 3rem 3.5rem; }
.principle { display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem; align-items: start; }
.principle h2 { margin-bottom: .5rem; }
.principle p { max-width: 25rem; }
.icon { width: 2.5rem; height: 2.5rem; flex: none; }
.icon-red { color: var(--red); }
.icon-purple { color: var(--lavender); }
.section-label { display: flex; align-items: center; gap: 1rem; font-size: clamp(1.05rem, 2.2vw, 1.55rem); letter-spacing: .16em; }
.section-label::before { content: ""; width: 4px; height: 1.1em; background: var(--red); border-radius: 4px; }
.section-label::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, #44354f, #c88ad9, #34223f00); }
.timeline { list-style: none; padding: 0; margin: 2rem 0 3.5rem; display: grid; gap: 2rem; }
.timeline li { --node: #24aeff; position: relative; padding-left: 2.25rem; }
.timeline li:nth-child(2) { --node: #b76bfa; }
.timeline li:nth-child(3) { --node: #ff385d; }
.timeline li:not(:last-child)::before { content: ""; position: absolute; top: .5rem; bottom: -2.5rem; left: .48rem; width: 2px; background: linear-gradient(var(--node), #b76bfa); }
.timeline li:nth-child(2)::before { background: linear-gradient(#b76bfa, #ff385d); }
.timeline-node { position: absolute; width: .9rem; height: .9rem; top: .4rem; left: .1rem; border-radius: 50%; background: #fff; border: 2px solid var(--node); outline: 1px solid #fff; box-shadow: 0 0 10px 2px color-mix(in srgb, var(--node) 50%, transparent); }
.timeline h3 { font-size: clamp(1.15rem, 2vw, 1.45rem); margin-bottom: .65rem; }
.status { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: min(1.5rem, 6vw); }
.status h2 { margin-bottom: .6rem; }
.legal-note { margin-top: 1rem; font-size: .875rem; color: #c3bed1; }
footer { position: relative; isolation: isolate; clip-path: inset(0); padding-block: 2.5rem 3rem; font-size: .9375rem; color: #c3bed1; background: #020b1e; }
/* Reuse the faint stationary texture; the notice has no animated decoration. */
footer::before { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100lvh; z-index: -1; pointer-events: none; background: url('../images/starfield.svg') center top / 1000px auto repeat; }
.footer-notice { max-width: 48rem; margin-inline: auto; border-top: 1px solid #44354f; padding-top: 1.5rem; line-height: 1.7; background: #020b1e; }
.footer-notice h2 { margin-bottom: .85rem; font-size: 1rem; color: #f7f7fd; letter-spacing: 0; }
.footer-notice p + p { margin-top: .85rem; }
.footer-copyright { margin-top: 1.75rem; text-align: center; font-size: .75rem; color: #b5b7cb; }
@supports not (clip-path: inset(0)) { footer::before { position: absolute; height: 100%; } }
.stars { position: absolute; z-index: 0; inset: 0; pointer-events: none; }
.star { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #c7d8f5; opacity: .3; animation: twinkle var(--duration, 5s) ease-in-out var(--delay, 0s) infinite alternate; animation-play-state: paused; }
.stars[data-running="true"] .star[data-visible="true"] { animation-play-state: running; }
.star:nth-child(n+11) { display: none; }
@keyframes twinkle { from { opacity: .22; } to { opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .star { animation: none; opacity: .3; } }
@media (min-width: 45rem) {
  h1 { font-size: clamp(2.1rem, 5.2vw, 4.4rem); }
  .container { width: min(100% - 5rem, 68rem); }
  .creator { grid-template-columns: 1fr 1fr; align-items: center; padding: 1.75rem 2.25rem; gap: 2rem; }
  .creator-identity { padding-left: 1.5rem; }
  .creator-description { border-top: 0; border-left: 1px solid #736580; padding-top: 0; padding-left: 2rem; }
  .principles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-block: 3rem 4rem; }
  .principle { display: flex; flex-direction: column; align-items: center; text-align: center; padding-inline: 1.5rem; gap: .6rem; }
  .principle + .principle { border-left: 1px solid #777187; }
  .timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 2.5rem; }
  .timeline li { padding: 2.25rem 1rem 0; text-align: center; }
  .timeline-node { left: calc(50% - .45rem); top: 0; }
  .timeline li:not(:last-child)::before { top: .38rem; bottom: auto; left: 50%; width: 100%; height: 3px; background: linear-gradient(90deg, var(--node), #b76bfa); }
  .timeline li:nth-child(2)::before { background: linear-gradient(90deg, #b76bfa, #ff385d); }
  .status { grid-template-columns: 4.5rem 1fr; padding: 2rem 2.25rem; gap: 2rem; align-items: center; }
  .status-icon { justify-self: center; width: 3.2rem; height: 3.2rem; }
  .status > div { border-left: 1px solid #736580; padding-left: 2rem; }
  .star:nth-child(n+11) { display: block; }
}
@media (min-width: 64rem) { .lower-space { margin-top: -1.5rem; } .principles p, .timeline p, .creator-description, .status p:not(.legal-note) { font-size: 1.125rem; } }

/* v1.1: isolated decoration; no changes to the existing layout or artwork. */
.meteors { position: absolute; inset: 0; z-index: 0; overflow: hidden; contain: layout paint; pointer-events: none; }
.meteor { position: absolute; top: 0; left: 0; width: var(--trail, 72px); height: 2px; border-radius: 50%; opacity: 0; transform-origin: left center; background: linear-gradient(90deg, transparent, var(--meteor-color, #d7e8ff) 88%, #f2f6ff); }
/* One small prepainted star; only scale and opacity change during a pulse. */
.accent-star { --accent-size: 26px; --accent-rgb: 255 70 100; position: absolute; width: var(--accent-size); height: var(--accent-size); opacity: 0; pointer-events: none; border-radius: 50%; background: radial-gradient(circle, #fff 0 5%, rgb(var(--accent-rgb) / .98) 10% 18%, rgb(var(--accent-rgb) / .45) 28%, rgb(var(--accent-rgb) / .12) 48%, transparent 70%); }
.accent-star::before, .accent-star::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; }
.accent-star::before { width: 1px; height: 76%; background: linear-gradient(transparent, rgb(var(--accent-rgb) / .9), transparent); }
.accent-star::after { width: 76%; height: 1px; background: linear-gradient(90deg, transparent, rgb(var(--accent-rgb) / .9), transparent); }
@media (min-width: 45rem) { .accent-star { --accent-size: 34px; } }
@media (prefers-reduced-motion: reduce) { .meteors, .accent-star { display: none; } }