:root {
  --ink: #f5f7ff;
  --muted: #a7b0c9;
  --bg: #090d18;
  --panel: #101729;
  --line: rgba(170, 185, 230, .16);
  --cyan: #62e6e4;
  --violet: #9b8cff;
  --yellow: #ffd76a;
  --max: 1160px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--cyan); }
.container { width: min(var(--max), calc(100% - 40px)); margin-inline: auto; }
.site-header { position: sticky; top: 0; z-index: 10; backdrop-filter: blur(18px); background: rgba(9, 13, 24, .78); border-bottom: 1px solid var(--line); }
.nav { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 800; letter-spacing: -.02em; }
.brand-mark { width: 29px; height: 29px; display: grid; place-items: center; color: transparent; background: url("assets/brand/lumos-icon.png") center / cover no-repeat; border-radius: 8px; font-size: 0; }
.nav-links { display: flex; align-items: center; gap: 26px; color: var(--muted); font-size: .93rem; }
.nav-links a[aria-current="page"] { color: var(--ink); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid transparent; border-radius: 999px; padding: 11px 18px; font-weight: 750; font-size: .9rem; color: #071119; background: var(--cyan); box-shadow: 0 10px 30px rgba(98, 230, 228, .17); }
.button:hover { color: #071119; transform: translateY(-1px); }
.button.secondary { color: var(--ink); background: transparent; border-color: var(--line); box-shadow: none; }
.button.secondary:hover { color: var(--cyan); border-color: rgba(98,230,228,.55); }
.hero { position: relative; overflow: hidden; padding: 116px 0 104px; }
.hero::before { content: ""; position: absolute; inset: -30% -5% auto; height: 540px; opacity: .45; background: radial-gradient(circle at 25% 25%, rgba(98,230,228,.2), transparent 32%), radial-gradient(circle at 75% 35%, rgba(155,140,255,.17), transparent 35%); pointer-events: none; }
.hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 70px; align-items: center; }
.eyebrow { margin: 0 0 16px; color: var(--cyan); font-size: .78rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
h1, h2, h3 { line-height: 1.08; letter-spacing: -.045em; margin: 0; }
h1 { max-width: 720px; font-size: clamp(3.2rem, 7vw, 6.4rem); }
h2 { font-size: clamp(2rem, 4vw, 3.4rem); }
h3 { font-size: 1.25rem; }
.lede { max-width: 610px; margin: 25px 0 30px; color: var(--muted); font-size: 1.12rem; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hex-board { position: relative; min-height: 390px; display: grid; place-items: center; }
.studio-orbit { position: relative; min-height: 390px; display: grid; place-items: center; filter: drop-shadow(0 22px 50px rgba(0,0,0,.35)); }
.orbit { position: absolute; width: 300px; height: 160px; border: 1px solid rgba(98,230,228,.48); border-radius: 50%; transform: rotate(-25deg); }
.orbit-two { width: 225px; height: 300px; border-color: rgba(155,140,255,.4); transform: rotate(34deg); }
.orbit-core { position: relative; width: 116px; height: 116px; display: grid; place-items: center; border: 1px solid rgba(98,230,228,.72); border-radius: 50%; background: radial-gradient(circle, rgba(98,230,228,.92), rgba(25,54,84,.75) 48%, rgba(14,22,40,.5) 70%); box-shadow: 0 0 45px rgba(98,230,228,.25); }
.orbit-core::after { content: ""; position: absolute; width: 180px; height: 180px; border: 1px solid rgba(98,230,228,.16); border-radius: 50%; }
.orbit-core span { width: 34px; height: 34px; border-radius: 50%; background: #efffff; box-shadow: 0 0 30px 10px rgba(98,230,228,.7); }
.orbit-node { position: absolute; width: 15px; height: 15px; border-radius: 50%; box-shadow: 0 0 18px 5px currentColor; }.node-cyan { top: 84px; left: 48px; color: var(--cyan); background: var(--cyan); }.node-violet { top: 78px; right: 53px; color: var(--violet); background: var(--violet); }.node-gold { bottom: 76px; right: 102px; color: var(--yellow); background: var(--yellow); }
.hex-board::before { content: ""; position: absolute; inset: 16% 4%; background-image: linear-gradient(rgba(98,230,228,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(98,230,228,.1) 1px, transparent 1px); background-size: 42px 42px; mask-image: radial-gradient(circle, #000 10%, transparent 70%); transform: perspective(500px) rotateX(52deg) rotateZ(-14deg); }
.board { position: relative; display: grid; grid-template-columns: repeat(3, 74px); gap: 9px; transform: rotate(-15deg); }
.tile { width: 74px; height: 84px; display: grid; place-items: center; clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); background: #1a2741; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.tile::after { content: ""; width: 22px; height: 22px; border-radius: 50%; background: var(--dot, transparent); box-shadow: 0 0 22px var(--dot, transparent); }
.tile.cyan { --dot: var(--cyan); } .tile.violet { --dot: var(--violet); } .tile.yellow { --dot: var(--yellow); }
.section { padding: 92px 0; border-top: 1px solid var(--line); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 38px; }
.section-heading p { max-width: 460px; margin: 0; color: var(--muted); }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card { padding: 28px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(145deg, rgba(24,34,59,.75), rgba(12,18,33,.7)); }
.card p { color: var(--muted); margin-bottom: 0; }
.icon { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 22px; color: var(--cyan); border: 1px solid rgba(98,230,228,.35); border-radius: 12px; font-weight: 900; }
.feature { display: grid; grid-template-columns: .9fr 1.1fr; gap: 62px; align-items: center; }
.feature-visual { min-height: 380px; padding: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 24px; background: radial-gradient(circle at 50% 35%, rgba(98,230,228,.15), transparent 45%), #0d1425; }
.gameplay-shot { display: block; width: min(100%, 280px); max-height: 520px; object-fit: contain; border: 6px solid #293653; border-radius: 28px; box-shadow: 0 24px 70px rgba(0,0,0,.35); }
.phone { width: 190px; padding: 11px; border: 5px solid #293653; border-radius: 28px; background: #080c16; transform: rotate(7deg); box-shadow: 0 24px 70px rgba(0,0,0,.35); }
.phone-screen { height: 310px; padding: 18px 11px; border-radius: 16px; background: linear-gradient(150deg, #162946, #0c1c31); }
.phone-screen strong { display: block; font-size: 1.05rem; margin-bottom: 22px; }
.mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.mini-grid span { height: 42px; clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); background: #263d61; }
.mini-grid span:nth-child(2), .mini-grid span:nth-child(8) { background: var(--cyan); }.mini-grid span:nth-child(4), .mini-grid span:nth-child(6) { background: var(--violet); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 32px 0; }
.stat { padding: 16px; border-left: 2px solid var(--cyan); background: rgba(255,255,255,.035); }.stat strong { display: block; font-size: 1.45rem; }.stat span { color: var(--muted); font-size: .8rem; }
.cta { padding: 68px 0; }.cta-box { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 48px; border-radius: 24px; background: linear-gradient(110deg, #142d3a, #211e43); }
.cta-box p { color: #ccd5ee; margin: 10px 0 0; }
.site-footer { padding: 34px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: .88rem; }.footer-inner { display: flex; justify-content: space-between; gap: 20px; }.footer-links { display: flex; gap: 18px; }
.page-hero { padding: 82px 0 54px; }.page-hero .lede { margin-bottom: 0; }.prose { max-width: 780px; }.prose h2 { font-size: 1.75rem; margin: 48px 0 12px; }.prose h3 { margin: 28px 0 8px; }.prose p, .prose li { color: var(--muted); }.prose ul { padding-left: 20px; }.prose a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }
.pill { display: inline-block; margin-bottom: 18px; padding: 5px 10px; color: var(--cyan); border: 1px solid rgba(98,230,228,.3); border-radius: 99px; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 760px) { .container { width: min(var(--max), calc(100% - 28px)); }.nav { min-height: 64px; }.nav-links { gap: 13px; font-size: .78rem; }.nav-links .button { padding: 8px 12px; }.hero { padding: 76px 0 70px; }.hero-grid, .feature { grid-template-columns: 1fr; gap: 38px; }.hex-board { min-height: 280px; transform: scale(.78); }.cards { grid-template-columns: 1fr; }.section-heading { display: block; }.section-heading p { margin-top: 16px; }.stats { gap: 7px; }.stat { padding: 12px 9px; }.stat strong { font-size: 1.15rem; }.cta-box, .footer-inner { display: block; }.cta-box .actions { margin-top: 24px; }.footer-links { margin-top: 14px; flex-wrap: wrap; } }