:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;color:#f8f9fa;background:#03090d;font-synthesis:none;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}body{margin:0;overflow-x:clip}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;border:0}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,.star-control:focus-visible{outline:2px solid #fff;outline-offset:6px}
.header{position:fixed;top:0;left:0;width:100%;height:66px;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:0 4.6vw;padding-left:16px;pointer-events:none}.header>*{pointer-events:auto}.brand{display:inline-flex;align-items:center;gap:11px;flex-shrink:0;height:44px}.brand img{display:block;flex-shrink:0}.brand-name{font-size:18px;font-weight:700;letter-spacing:.22em;line-height:1;color:#f8f9fa}.header nav{display:flex;gap:10px;align-items:center}.pill{height:44px;padding:0 24px;border-radius:99px;font-size:16px;font-weight:500;white-space:nowrap;transition:background .2s,transform .2s}.pill:hover{transform:translateY(-1px)}.login{background:#242c32;color:#fff;display:inline-flex;align-items:center;justify-content:center}.login:hover{background:#343e46}.try{background:#fff;color:#080a0b;display:inline-flex;align-items:center;justify-content:center;gap:9px}.try:hover{background:#dedfe0}.try svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5}
.hero{position:relative;isolation:isolate;width:100%;height:100svh;min-height:400px;overflow:hidden;background:transparent}#galaxy{position:fixed;inset:0;display:block;width:100%;height:100%;pointer-events:none}.star-control{position:absolute;inset:70px 0 0;z-index:1;cursor:grab;touch-action:pan-y}.star-control:active{cursor:grabbing}.star-control:focus-visible{outline-offset:-9px}h1{position:absolute;inset:0;margin:0;padding:0 3.6vw;display:flex;align-items:center;justify-content:space-between;font-size:clamp(36px,4.17vw,88px);font-weight:400;letter-spacing:-.045em;line-height:1;pointer-events:none;z-index:2}h1 span{opacity:0;transform:translateY(8px);transition:opacity 1.15s,transform 1.15s}.formed h1 span{opacity:1;transform:translateY(0)}.formed h1 span:last-child{transition-delay:.08s}.replay{position:absolute;right:max(0px,calc(16px - (100vw - 100%)));bottom:16px;z-index:3;width:42px;height:42px;border-radius:50%;background:#ffffff1b;color:#d5d9dd;display:grid;place-items:center;transition:background .2s}.replay:hover{background:#ffffff30}.replay svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.no-script{position:absolute;bottom:28px;left:30px;font-size:14px}
dialog{width:min(410px,calc(100% - 36px));border:1px solid #ffffff24;padding:42px;border-radius:20px;color:#f8f9fa;background:#0c1218;box-shadow:0 24px 100px #0008}dialog::backdrop{background:#0008;backdrop-filter:blur(8px)}dialog h2{font-size:30px;font-weight:400;margin:24px 0 14px}dialog p{color:#aeb7be;line-height:1.6;font-size:15px;margin-bottom:30px}.close{position:absolute;right:15px;top:12px;background:transparent;color:#bdc6cc;font-size:28px;line-height:1}
@media(max-width:680px){.header{height:72px;padding:0 22px;padding-left:21.5px}.brand img{width:29px;height:29px}.header nav{gap:8px}.pill{height:39px;font-size:14px;padding:0 17px}h1{padding:0 6vw;font-size:clamp(28px,7.2vw,46px);align-items:flex-start;padding-top:27svh;letter-spacing:-.05em}.hero{min-height:480px}.replay{width:38px;height:38px;right:max(0px,calc(20px - (100vw - 100%)));bottom:20px}}
@media(prefers-reduced-motion:reduce){h1 span{opacity:1;transform:none;transition:none}.pill{transition:none}}

/* Fade only the header surface; keep its logo and buttons fully opaque. */
.header{pointer-events:auto;background-color:transparent;transition:background-color .35s ease}
@media(hover:hover){.header:hover{background-color:#000}}
@media(prefers-reduced-motion:reduce){.header{transition:none}}

/* A single persistent sky sits behind the complete scroll narrative. */
.cosmos {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 51%, #000 0%, #020609 37%, #071219 100%);
}
#galaxy { z-index: 0; }
main { position: relative; z-index: 1; pointer-events: none; }
.star-control, main button, main a, .intro > *, .section-heading, .feature-card, .media-slot { pointer-events: auto; }
.section-shell { width: min(1200px, calc(100% - 112px)); margin-inline: auto; }
.eyebrow {
  margin: 0 0 28px;
  color: #88959e;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .19em;
  line-height: 1.6;
  text-transform: uppercase;
}
main h2 { margin: 0; font-size: clamp(34px, 4.2vw, 62px); font-weight: 400; letter-spacing: -.047em; line-height: 1.07; }
.intro { min-height: 96svh; padding-block: 27svh 23svh; text-align: center; }
.intro h2 { font-size: clamp(58px, 7.5vw, 108px); line-height: 1.02; letter-spacing: -.055em; }
.section-copy { margin: 32px 0 0; color: #97a3ad; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.6; letter-spacing: -.012em; }
.text-link { display: inline-flex; align-items: center; gap: 22px; margin-top: 36px; padding: 10px 0; font-size: 13px; line-height: 1.5; }
.text-link span { color: #a8b2bb; font-size: 18px; transition: transform .25s ease; }
.text-link:hover span { transform: translate(2px, -2px); }
.showcase { padding-block: 80px 110px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 46px; }
.section-heading .eyebrow { margin-bottom: 20px; }
.section-note { margin: 0 0 3px; color: #87949e; font-size: 13px; line-height: 1.7; letter-spacing: -.008em; flex-shrink: 0; }
.media-slot {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  width: 100%;
  border: 1px solid #202a31;
  border-radius: 12px;
  background: linear-gradient(145deg, #0e171d, #080e13 62%, #0c141a);
}
.video-slot { aspect-ratio: 16 / 9; }
.interface-slot { aspect-ratio: 16 / 10; }
.slot-word { color: #26333d; font-size: clamp(30px, 5.8vw, 78px); font-weight: 400; letter-spacing: .15em; line-height: 1; transform: translateX(.075em); user-select: none; }
.interface-slot .slot-word { font-size: clamp(24px, 4.5vw, 60px); }
.slot-caption { position: absolute; inset: auto 28px 26px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 11px; line-height: 1.5; }
.slot-caption span:first-child { color: #a8b3bd; }
.slot-caption span:last-child { color: #87949e; }
.features { padding-block: 130px 120px; }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.feature-card {
  min-width: 0;
  min-height: 278px;
  padding: 34px 32px 32px;
  border: 1px solid #1b272f;
  border-radius: 10px;
  background: #0b1319;
  transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
}
.feature-mark { display: block; width: 35px; height: 35px; margin-bottom: 46px; fill: none; stroke: #a5b5c1; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.feature-mark .mark-muted { stroke: #596b79; }
.feature-card h3 { margin: 0 0 14px; color: #ecf0f2; font-size: 22px; font-weight: 400; letter-spacing: -.035em; line-height: 1.2; }
.feature-card p { margin: 0; color: #8c9aa5; font-size: 13px; line-height: 1.75; letter-spacing: -.007em; }
.customization { padding-block: 130px 160px; }
.signature { height: 240svh; min-height: 900px; position: relative; }
.signature-inner { height: 100svh; position: sticky; top: 0; text-align: center; }
.signature-eyebrow { position: absolute; top: max(88px, 13svh); left: 0; right: 0; margin: 0; }
/* Keep the center free for the particle emblem, including its four long tips. */
.signature-copy { position: absolute; bottom: 5.5svh; left: 24px; right: 24px; pointer-events: auto; }
.signature-copy h2 { font-size: clamp(36px, 4.2vw, 58px); }
.signature-copy .pill { margin-top: 22px; }
.footer { position: relative; z-index: 1; min-height: 126px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-top: 1px solid #ffffff14; }
.footer-brand { display: inline-flex; align-items: center; gap: 12px; font-size: 12px; letter-spacing: -.01em; }
.footer-brand img { display: block; }
.footer-note { color: #87949e; font-size: 11px; }
.footer-top { display: inline-flex; align-items: center; gap: 20px; color: #95a3ae; font-size: 11px; padding-block: 12px; }
@media (hover: hover) {
  .feature-card:hover { border-color: #33454f; background: #101c24; transform: translateY(-3px); }
  .footer-top:hover { color: #fff; }
}
@media (max-width: 1000px) {
  .section-shell { width: calc(100% - 72px); }
  .section-heading { gap: 28px; }
  .section-note { font-size: 12px; }
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-card { min-height: 260px; }
}
@media (max-width: 680px) {
  .section-shell { width: calc(100% - 44px); }
  .eyebrow { font-size: 9px; margin-bottom: 26px; }
  .intro { padding-block: 24svh 22svh; min-height: 86svh; }
  .intro h2 { font-size: clamp(50px, 12vw, 76px); }
  .section-copy { margin-top: 28px; font-size: 16px; }
  .text-link { margin-top: 28px; }
  .showcase { padding-block: 46px 60px; }
  .section-heading { display: block; margin-bottom: 28px; }
  .section-heading .eyebrow { margin-bottom: 17px; }
  .section-heading h2 { max-width: 360px; }
  .section-note { margin-top: 22px; line-height: 1.6; }
  .media-slot { border-radius: 8px; }
  .slot-caption { inset: auto 15px 14px; gap: 10px; font-size: 9px; }
  .features { padding-block: 90px 62px; }
  .feature-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .feature-card { min-height: 235px; padding: 28px; }
  .feature-mark { width: 30px; height: 30px; margin-bottom: 32px; }
  .feature-card h3 { font-size: 23px; margin-bottom: 12px; }
  .customization { padding-block: 90px 100px; }
  .signature-eyebrow { top: max(92px, 14svh); }
  .signature-copy { bottom: 7svh; }
  .signature-copy .pill { height: 44px; margin-top: 20px; padding-inline: 22px; }
  .footer { min-height: 112px; gap: 16px; }
  .footer-note { display: none; }
  .footer-brand { font-size: 11px; gap: 9px; }
  .footer-top { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .feature-card, .text-link span { transition: none; }
  .feature-card:hover, .text-link:hover span { transform: none; }
}

/* Pricing: readable surfaces over the existing star field. */
.pricing { padding-block: 70px 150px; position: relative; z-index: 1; }
.pricing-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.price-card { padding: 36px; border: 1px solid #ffffff20; border-radius: 16px; background: rgba(9,15,21,.94); display: flex; flex-direction: column; }
.price-card-featured { border-color: #b88be57a; background: rgba(20,17,29,.96); }
.plan-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 26px; margin: 0 0 34px; color: #a4aab4; font-size: 12px; }
.plan-badge { border: 1px solid #c09ae647; border-radius: 30px; padding: 5px 9px; color: #d8baf5; font-size: 10px; white-space: nowrap; }
.price-card h3 { margin: 0; font-size: 23px; font-weight: 400; }
.plan-price { margin: 24px 0; font-size: clamp(44px,4.8vw,68px); line-height: 1; letter-spacing: -.055em; }
.plan-price span { color: #929ba6; font-size: 13px; letter-spacing: 0; white-space: nowrap; }
.plan-description { color: #a4aab4; font-size: 13px; line-height: 1.7; margin: 0 0 42px; }
.price-button { margin-top: auto; width: 100%; display: flex; align-items: center; justify-content: center; position: relative; padding-inline: 48px; line-height: 1; background: #ffffff0b; border: 1px solid #ffffff24; color: #fff; }
.price-button-featured { color: #111017; background: #eee6f7; border-color: transparent; }
.price-button:hover { background: #ffffff20; }
.price-button-featured:hover { background: #fff; }
.price-button:focus-visible { outline: 2px solid #c09ae6; outline-offset: 5px; }
@media(max-width:1000px) { .price-card { padding: 26px; } .plan-label { flex-wrap: wrap; } }
@media(max-width:760px) { .pricing { padding-block: 40px 90px; } .pricing-grid { grid-template-columns: 1fr; gap: 16px; } .price-card { padding: 30px; } .plan-label { margin-bottom: 24px; } .plan-price { font-size: 60px; } .plan-description { margin-bottom: 30px; } }

.price-button > span { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); line-height: 1; }

/* Hero explorer */
.heroes { padding-block: 90px 100px; position: relative; z-index: 1; scroll-margin-top: 90px; }
.hero-browser { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.12fr); gap: clamp(32px,5vw,88px); align-items: start; }
.hero-picker { padding-top: 6px; }
.hero-roles { position: relative; isolation: isolate; display: flex; gap: 8px; padding: 5px; border: 1px solid #ffffff16; border-radius: 40px; background: #081015ed; margin-bottom: 24px; }
.hero-roles button { position: relative; z-index: 1; flex: 1; padding: 12px 8px; border-radius: 30px; color: #95a2ad; background: transparent; font: inherit; font-size: 13px; }
.hero-roles button[aria-pressed="true"] { background: transparent; color: #11151b; }
.hero-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 9px; }
.hero-tile { min-width: 0; position: relative; padding: 0 0 9px; color: #adb7c0; border: 1px solid #ffffff16; border-radius: 9px; background: #0b141ce8; overflow: hidden; transform: perspective(500px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); transition: border-color .18s, background .18s, transform .18s; }
.hero-tile img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; display: block; pointer-events: none; }
.hero-tile span { display: block; font-size: 10px; line-height: 1.35; padding: 0 3px; min-height: 27px; align-content: center; }
.hero-tile:hover { border-color: #a6b4c675; background: #15202be8; }
.hero-tile[aria-pressed="true"] { border-color: #ffffff80; background: #0b141ce8; color: #fff; }
.hero-tile:focus-visible,.hero-roles button:focus-visible { outline: 2px solid #ffffffb3; outline-offset: 3px; }
.hero-catalog-note { margin: 18px 0 0; color: #82909b; font-size: 11px; }
.hero-detail { min-width: 0; padding: 10px 0 0; border: 0; border-radius: 0; background: transparent; }
.hero-identity { margin-bottom: 36px; }
.hero-identity p { text-transform: uppercase; color: #939da6; letter-spacing: .14em; font-size: 11px; line-height: 1.4; margin: 0 0 12px; }
.hero-identity h3 { font-size: clamp(38px,4vw,60px); line-height: 1.08; letter-spacing: -.045em; font-weight: 400; margin: 0; overflow-wrap: anywhere; }
.hero-capabilities ul { list-style: none; padding: 0; margin: 0; }
.hero-ability { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: baseline; column-gap: 24px; padding: 23px 0; border-top: 1px solid #ffffff24; }
.hero-ability:last-child { border-bottom: 1px solid #ffffff24; }
.hero-ability h4 { margin: 0; font-weight: 400; font-size: 18px; line-height: 1.45; overflow-wrap: anywhere; }
.ability-mode { color: #a5aeb7; text-align: right; font-size: 13px; line-height: 1.6; max-width: 150px; }
.hero-empty,.hero-loading { color: #a5aeb7; font-size: 14px; line-height: 1.8; margin: 0; padding-block: 23px; border-top: 1px solid #ffffff24; }
@media(max-width:1000px) { .hero-browser { gap: 32px; } .hero-grid { grid-template-columns: repeat(4,minmax(0,1fr)); } .hero-ability { column-gap: 16px; } }
@media(max-width:760px) { .heroes { padding-block: 40px 70px; } .hero-browser { grid-template-columns: 1fr; gap: 40px; } .hero-grid { grid-template-columns: repeat(5,minmax(0,1fr)); } .hero-detail { padding-top: 0; } .hero-identity { margin-bottom: 28px; } .hero-ability { padding-block: 20px; } .hero-ability h4 { font-size: 16px; } .ability-mode { font-size: 12px; max-width: 125px; } }
@media(prefers-reduced-motion:reduce) { .hero-tile { transition: none; transform: none; } }

.hero-tile { padding: 0; aspect-ratio: 1; }


/* Hero selection motion: fresh nodes cancel superseded entrance animations. */
.hero-roles::before { content: ''; position: absolute; z-index: 0; left: 5px; top: 5px; bottom: 5px; width: calc((100% - 26px) / 3); border-radius: 30px; background: #e9eaf0; transform: translateX(calc(var(--role-index,0) * (100% + 8px))); transition: transform 300ms cubic-bezier(.22,1,.36,1); pointer-events: none; }
.hero-tile { animation: hero-tile-enter 240ms cubic-bezier(.22,1,.36,1) var(--enter-delay,0ms) both; }
.hero-identity { animation: hero-detail-enter 260ms cubic-bezier(.22,1,.36,1) both; }
.hero-ability,.hero-empty { animation: hero-detail-enter 220ms cubic-bezier(.22,1,.36,1) var(--enter-delay,60ms) both; }
@keyframes hero-tile-enter { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
@keyframes hero-detail-enter { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
@media(prefers-reduced-motion:reduce) { .hero-roles::before { transition: none; } .hero-tile,.hero-identity,.hero-ability,.hero-empty { animation: none !important; translate: none; opacity: 1; } }

.astro-menu-preview{display:block;width:100%;height:840px;border:0;background:transparent} @media(max-width:1250px){.astro-menu-preview{height:calc((100vw - 80px)*.625 + 90px)}} @media(max-width:650px){.astro-menu-preview{height:550px}}

/* Embedded controls must opt back in: main intentionally ignores pointer input. */
.astro-menu-preview{pointer-events:auto}


@media(max-width:680px){.brand{gap:9px}.brand-name{font-size:16px;letter-spacing:.18em}}
@media(max-width:380px){.header{padding-left:24px}.header nav{gap:6px}.brand{gap:7px}.brand img{width:24px;height:24px}.brand-name{font-size:13px;letter-spacing:.16em}.header .pill{padding-inline:12px}}