:root {
  --ink: #f4f7ff;
  --muted: #98a4bd;
  --void: #05070d;
  --panel: #0b101c;
  --panel-2: #0f1523;
  --line: rgba(167, 186, 222, .15);
  --cyan: #65f6ff;
  --blue: #3676ff;
  --violet: #a16cff;
  --lime: #baff29;
  --shell: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 14% 7%, rgba(54,118,255,.13), transparent 28rem),
    radial-gradient(circle at 91% 19%, rgba(161,108,255,.1), transparent 27rem),
    var(--void);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a, button { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }

.site-header {
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding: 0 max(1.25rem, calc((100vw - var(--shell)) / 2));
  background: rgba(5,7,13,.8);
  backdrop-filter: blur(14px);
}
.brand { display: flex; align-items: center; gap: .8rem; text-decoration: none; }
.brand-mark { display: grid; width: 40px; aspect-ratio: 1; place-items: center; border-radius: 12px; background: var(--ink); color: var(--void); font-size: .74rem; font-weight: 900; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: .8rem; letter-spacing: -.01em; }
.brand small { margin-top: .12rem; color: var(--muted); font-size: .64rem; }
nav { display: flex; align-items: center; gap: 1.7rem; }
nav a { color: var(--muted); font-size: .72rem; font-weight: 700; text-decoration: none; }
nav a:hover { color: var(--ink); }
.all-experiments { border-left: 1px solid var(--line); padding-left: 1.7rem; }

.hero {
  display: grid;
  width: min(calc(100% - 2.5rem), var(--shell));
  min-height: 680px;
  grid-template-columns: minmax(0, 1.05fr) minmax(390px, .75fr);
  align-items: center;
  gap: clamp(3rem, 8vw, 8rem);
  margin: 0 auto;
  padding: 5.5rem 0;
}
.eyebrow { display: flex; align-items: center; gap: .65rem; margin: 0; color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.eyebrow span { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 16px var(--cyan); }
h1 { margin: 1.4rem 0 0; font-size: clamp(4rem, 8vw, 6.6rem); letter-spacing: -.07em; line-height: .9; }
h1 span { color: var(--cyan); }
.tagline { margin: 1.5rem 0 0; font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 720; letter-spacing: -.025em; }
.lede { max-width: 610px; margin: 1rem 0 0; color: var(--muted); font-size: 1rem; line-height: 1.75; }
.hero-actions { display: flex; align-items: center; gap: 1.4rem; margin-top: 2rem; }
.button { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; border-radius: 11px; padding: 0 1.1rem; font-size: .75rem; font-weight: 800; text-decoration: none; }
.button-primary { background: var(--cyan); color: #061116; }
.button-primary:hover { background: #a8fbff; }
.text-link { color: var(--muted); font-size: .75rem; font-weight: 700; text-decoration: none; }
.text-link:hover { color: var(--ink); }
.hero-facts { display: grid; max-width: 610px; grid-template-columns: repeat(3, 1fr); margin: 3.25rem 0 0; border-top: 1px solid var(--line); }
.hero-facts div { padding-top: 1.15rem; }
.hero-facts div + div { border-left: 1px solid var(--line); padding-left: 1.2rem; }
.hero-facts dt { color: var(--muted); font-size: .64rem; font-weight: 700; text-transform: uppercase; }
.hero-facts dd { margin: .35rem 0 0; font-size: .78rem; font-weight: 760; }

.status-panel { overflow: hidden; border: 1px solid var(--line); border-radius: 24px; padding: 1.35rem; background: linear-gradient(145deg, rgba(15,21,35,.96), rgba(7,10,18,.98)); box-shadow: 0 28px 80px rgba(0,0,0,.33); }
.panel-topline { display: flex; justify-content: space-between; color: var(--muted); font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.emblem-wrap { display: grid; min-height: 205px; place-items: center; }
.forge-emblem { position: relative; display: grid; width: 158px; aspect-ratio: 1; place-items: center; border: 1px solid rgba(101,246,255,.35); border-radius: 50%; background: radial-gradient(circle, rgba(54,118,255,.22), rgba(54,118,255,.03) 65%, transparent 66%); }
.forge-emblem::before, .forge-emblem::after { position: absolute; border-radius: 50%; content: ""; }
.forge-emblem::before { inset: 17px; border: 1px dashed rgba(161,108,255,.5); }
.forge-emblem::after { inset: 34px; background: linear-gradient(145deg, var(--blue), var(--violet)); box-shadow: 0 0 35px rgba(54,118,255,.3); }
.forge-emblem span { position: relative; z-index: 1; font-size: 1.1rem; font-weight: 900; }
.forge-emblem.pulsing { animation: pulse .6s ease-out; }
.status-copy { border-top: 1px solid var(--line); padding-top: 1.25rem; }
.status-copy p { margin: 0 0 .5rem; color: var(--cyan); font-size: .61rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.status-copy h2 { margin: 0; font-size: 1.35rem; letter-spacing: -.03em; }
.status-copy > span { display: block; margin-top: .55rem; color: var(--muted); font-size: .78rem; line-height: 1.55; }
.status-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; margin-top: 1.25rem; }
.status-grid div { border: 1px solid var(--line); border-radius: 10px; padding: .72rem; background: rgba(255,255,255,.02); }
.status-grid span, .status-grid b { display: block; font-size: .61rem; }
.status-grid span { color: var(--muted); }
.status-grid b { margin-top: .28rem; }
.status-grid i, .availability i { display: inline-block; width: 6px; height: 6px; margin-right: .3rem; border-radius: 50%; background: var(--lime); }
.pulse-button { display: flex; width: 100%; min-height: 43px; align-items: center; justify-content: space-between; margin-top: .7rem; border: 0; border-radius: 10px; padding: 0 .8rem; background: rgba(101,246,255,.08); color: var(--cyan); font: inherit; font-size: .7rem; font-weight: 800; cursor: pointer; }
.pulse-button:hover { background: rgba(101,246,255,.14); }

.category-section, .principles-section { border-top: 1px solid var(--line); padding: clamp(5rem, 9vw, 8rem) max(1.25rem, calc((100vw - var(--shell)) / 2)); }
.section-intro { display: grid; grid-template-columns: 1.3fr .7fr; align-items: end; gap: 4rem; }
.section-intro h2, .principles-heading h2 { margin: 1rem 0 0; font-size: clamp(2.5rem, 5vw, 4.6rem); letter-spacing: -.055em; line-height: .98; }
.section-intro > p { max-width: 440px; margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.7; }
.category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 3.4rem; }
.category-card { position: relative; display: flex; min-height: 340px; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; padding: 1.35rem; background: var(--panel); }
.category-card::after { position: absolute; right: -70px; top: -70px; width: 180px; aspect-ratio: 1; border-radius: 50%; content: ""; filter: blur(3px); opacity: .14; }
.games-card::after { background: var(--cyan); }
.tools-card::after { background: var(--violet); }
.utilities-card::after { background: var(--lime); }
.card-number { display: flex; justify-content: space-between; color: var(--muted); font-size: .63rem; font-weight: 800; text-transform: uppercase; }
.category-icon { display: grid; width: 68px; aspect-ratio: 1; place-items: center; margin: 3rem 0 auto; border: 1px solid var(--line); border-radius: 16px; background: var(--panel-2); font-size: 1.15rem; font-weight: 900; }
.games-card .category-icon { color: var(--cyan); }
.tools-card .category-icon { color: var(--violet); }
.utilities-card .category-icon { color: var(--lime); }
.category-card h3 { margin: 1.6rem 0 0; font-size: 1.25rem; letter-spacing: -.025em; }
.category-card p { min-height: 3.5rem; margin: .55rem 0 0; color: var(--muted); font-size: .78rem; line-height: 1.55; }
.availability { margin-top: 1.2rem; color: var(--muted); font-size: .62rem; font-weight: 750; text-transform: uppercase; }

.principles-section { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(3rem, 8vw, 8rem); background: rgba(11,16,28,.42); }
.principles-heading { align-self: start; }
.principles-heading h2 { font-size: clamp(2.3rem, 4vw, 3.8rem); }
.principle-list { border-top: 1px solid var(--line); }
.principle-list article { display: grid; grid-template-columns: 42px minmax(150px, .75fr) 1fr; gap: 1.2rem; align-items: start; border-bottom: 1px solid var(--line); padding: 1.6rem 0; }
.principle-list article > span { color: var(--cyan); font-size: .62rem; font-weight: 800; }
.principle-list h3 { margin: 0; font-size: .92rem; }
.principle-list p { margin: 0; color: var(--muted); font-size: .76rem; line-height: 1.6; }

.closing-band { display: flex; align-items: center; justify-content: space-between; gap: 2rem; border-top: 1px solid var(--line); padding: 3.25rem max(1.25rem, calc((100vw - var(--shell)) / 2)); background: linear-gradient(90deg, rgba(54,118,255,.12), rgba(161,108,255,.1)); }
.closing-band p { margin: 0; color: var(--cyan); font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.closing-band h2 { margin: .5rem 0 0; font-size: clamp(1.4rem, 3vw, 2.2rem); letter-spacing: -.035em; }
.button-secondary { border: 1px solid var(--line); background: rgba(255,255,255,.04); }
.button-secondary:hover { border-color: rgba(101,246,255,.5); }

footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2rem; padding: 2rem max(1.25rem, calc((100vw - var(--shell)) / 2)); }
footer strong, footer div span { display: block; }
footer strong { font-size: .76rem; }
footer div span, footer p, footer a { color: var(--muted); font-size: .63rem; }
footer div span { margin-top: .18rem; }
footer p { margin: 0; text-align: center; }
footer a { justify-self: end; text-decoration: none; }

@keyframes pulse { 50% { transform: scale(1.045); box-shadow: 0 0 45px rgba(101,246,255,.18); } }

@media (max-width: 920px) {
  nav > a:not(.all-experiments) { display: none; }
  .all-experiments { border-left: 0; padding-left: 0; }
  .hero { min-height: auto; grid-template-columns: 1fr; padding: 4.5rem 0; }
  .status-panel { width: min(100%, 560px); }
  .section-intro, .principles-section { grid-template-columns: 1fr; gap: 2.5rem; }
  .section-intro > p { max-width: 600px; }
  .category-grid { grid-template-columns: 1fr; }
  .category-card { min-height: 300px; }
}

@media (max-width: 620px) {
  .site-header { min-height: 68px; }
  .brand strong { font-size: .7rem; }
  .brand small { display: none; }
  .all-experiments { font-size: 0; }
  .all-experiments span { font-size: .9rem; }
  .hero { width: min(calc(100% - 2rem), var(--shell)); padding: 3.5rem 0; }
  h1 { font-size: clamp(3.5rem, 18vw, 5rem); }
  .hero-actions { align-items: flex-start; flex-direction: column; }
  .hero-facts { grid-template-columns: 1fr; gap: .85rem; }
  .hero-facts div + div { border-left: 0; padding-left: 0; }
  .status-grid { grid-template-columns: 1fr; }
  .emblem-wrap { min-height: 190px; }
  .section-intro h2, .principles-heading h2 { font-size: 2.35rem; }
  .principle-list article { grid-template-columns: 30px 1fr; }
  .principle-list p { grid-column: 2; }
  .closing-band { align-items: flex-start; flex-direction: column; }
  footer { grid-template-columns: 1fr; }
  footer p { text-align: left; }
  footer a { justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}