:root {
  color-scheme: dark;
  --bg: #07090d;
  --surface: #10141c;
  --surface-light: #151a24;
  --primary: #3b82f6;
  --secondary: #7c3aed;
  --text: #f8fafc;
  --muted: #8b96a8;
  --border: rgba(148, 163, 184, 0.14);
  --border-bright: rgba(96, 165, 250, 0.35);
  --success: #4ade80;
  --danger: #fb7185;
  --content: 1180px;
  --radius: 20px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 50% -10%, rgba(59, 130, 246, 0.11), transparent 34rem),
    var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  content: "";
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, black, transparent 70%);
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { color: inherit; font: inherit; }
.container { width: min(calc(100% - 48px), var(--content)); margin-inline: auto; }
.skip-link { position: fixed; top: -60px; left: 16px; z-index: 100; padding: 10px 16px; background: var(--primary); border-radius: 8px; }
.skip-link:focus { top: 16px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(7, 9, 13, .78);
  backdrop-filter: blur(18px) saturate(130%);
}
.site-header::after { position: absolute; inset: auto 0 -1px; height: 1px; content: ""; background: linear-gradient(90deg, transparent 5%, rgba(59,130,246,.32), transparent 95%); opacity: .45; }
.header-inner { display: flex; align-items: center; height: 72px; gap: 34px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 800; letter-spacing: .18em; }
.brand-mark { width: 25px; height: 25px; }
.desktop-nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.desktop-nav a { color: #aeb7c5; font-size: 14px; transition: color .2s ease; }
.desktop-nav a:hover, .desktop-nav a[aria-current="page"] { color: white; }
.header-action { margin-left: 8px; }
.site-settings { position: relative; margin-left: 4px; }
.settings-button { height: 38px; display: inline-flex; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid var(--border); border-radius: 10px; background: rgba(16,20,28,.78); color: #9ca8b8; cursor: pointer; }
.settings-button:hover, .settings-button[aria-expanded="true"] { border-color: rgba(96,165,250,.4); color: white; background: #141a24; }
.settings-button span { font: 10px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .09em; }
.settings-popover { position: absolute; right: 0; top: calc(100% + 11px); z-index: 70; width: 270px; padding: 18px; border: 1px solid rgba(148,163,184,.2); border-radius: 15px; background: rgba(14,18,25,.97); box-shadow: 0 24px 65px rgba(0,0,0,.48); backdrop-filter: blur(18px); }
.settings-popover[hidden] { display: none; }
.settings-popover p { margin: 0 0 17px; color: white; font-size: 14px; font-weight: 700; }
.settings-popover > span { display: block; margin-bottom: 8px; color: #69768a; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.language-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.language-options button { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: #10151d; color: #c5ceda; text-align: left; cursor: pointer; }
.language-options button small { color: #69768a; font-size: 10px; }.language-options button.is-active { border-color: rgba(96,165,250,.55); background: rgba(59,130,246,.11); color: white; }
.menu-toggle { display: none; margin-left: auto; width: 42px; height: 42px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); }
.menu-toggle span { display: block; width: 17px; height: 1px; margin: 5px auto; background: white; transition: transform .2s ease; }
.mobile-nav { display: none; }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 0 18px; border: 1px solid var(--border); border-radius: 11px; background: rgba(255,255,255,.025); font-size: 14px; font-weight: 650; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); border-color: rgba(147,197,253,.45); background: rgba(59,130,246,.08); }
.button-primary { border-color: #4b8cf5; background: var(--primary); color: white; box-shadow: 0 12px 34px rgba(37,99,235,.22); }
.button-primary:hover { background: #4d8ff7; }

.hero { position: relative; min-height: 710px; display: grid; place-items: center; overflow: hidden; isolation: isolate; }
.hero::after { position: absolute; left: 50%; bottom: 13%; width: 560px; height: 1px; content: ""; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(96,165,250,.65), transparent); box-shadow: 0 0 36px rgba(59,130,246,.8); }
.hero-system { position: absolute; left: 50%; top: 50%; z-index: -1; width: min(78vw, 860px); aspect-ratio: 1; transform: translate(-50%, -48%); opacity: .62; }
.hero-ring { position: absolute; inset: 8%; border: 1px solid rgba(96,165,250,.13); border-radius: 50%; }
.hero-ring-two { inset: 26%; border-color: rgba(139,92,246,.14); }
.hero-ring::before, .hero-ring::after { position: absolute; width: 7px; height: 7px; border-radius: 50%; content: ""; background: #72a7fa; box-shadow: 0 0 18px #3b82f6; }
.hero-ring::before { left: 11%; top: 21%; }
.hero-ring::after { right: 9%; bottom: 25%; background: #9f7aea; box-shadow: 0 0 18px #7c3aed; }
.hero-node { position: absolute; width: 5px; height: 5px; border: 1px solid #7aaefc; border-radius: 50%; box-shadow: 0 0 13px rgba(59,130,246,.8); }
.hero-node-one { left: 18%; bottom: 29%; }.hero-node-two { right: 21%; top: 29%; }.hero-node-three { left: 50%; top: 7%; }
.hero-content { position: relative; text-align: center; padding-block: 125px 145px; }
.hero-kicker { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 30px; padding: 8px 13px; border: 1px solid var(--border); border-radius: 999px; background: rgba(16,20,28,.72); color: #aab5c6; font-size: 11px; letter-spacing: .11em; text-transform: uppercase; box-shadow: 0 10px 35px rgba(0,0,0,.24); }
.kicker-signal { width: 5px; height: 5px; border-radius: 50%; background: #65a2ff; box-shadow: 0 0 12px #3b82f6; }
.hero h1 { margin: 0; font-size: clamp(92px, 18vw, 218px); font-weight: 850; line-height: .78; letter-spacing: -.075em; background: linear-gradient(180deg, #fff 24%, #95a3b8 115%); background-clip: text; color: transparent; filter: drop-shadow(0 18px 60px rgba(59,130,246,.12)); }
.hero-subtitle { margin: 40px auto 0; color: #b5bfce; font-size: clamp(20px, 3vw, 30px); font-weight: 420; letter-spacing: -.02em; }
.hero-actions { display: flex; justify-content: center; gap: 12px; margin-top: 34px; }
.health-pill { display: inline-flex; align-items: center; gap: 9px; margin-top: 28px; color: #9aa5b5; font-size: 13px; }
.health-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 14px rgba(74,222,128,.8); }
.health-pill.is-offline .health-dot { background: var(--danger); box-shadow: 0 0 14px rgba(251,113,133,.7); }

.system-rail { border-block: 1px solid var(--border); background: rgba(10,13,19,.74); }
.system-rail__grid { display: grid; grid-template-columns: .7fr 1fr 1fr .8fr; }
.system-rail__grid > div { min-height: 94px; display: flex; flex-direction: column; justify-content: center; gap: 7px; padding: 18px 28px; border-left: 1px solid var(--border); }
.system-rail__grid > div:last-child { border-right: 1px solid var(--border); }
.system-rail__label { color: #687488; font: 10px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .11em; text-transform: uppercase; }
.system-rail strong { color: #cbd5e1; font-size: 13px; font-weight: 620; }
.system-rail [data-api-health]:not(.is-offline) strong { color: #76df9d; }
.system-rail [data-api-health].is-offline strong { color: var(--danger); }

.section { padding-block: 108px; }
.section-tight { padding-block: 72px; }
.section-header { display: grid; grid-template-columns: 1fr minmax(280px, 480px); align-items: end; gap: 48px; margin-bottom: 42px; }
.eyebrow { margin: 0 0 12px; color: #76aafa; font-size: 11px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }
.section h2, .page-hero h1 { margin: 0; font-size: clamp(38px, 6vw, 68px); line-height: 1.02; letter-spacing: -.045em; }
.section-header > p, .page-hero__copy, .prose p { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.75; }
.project-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.project-card { position: relative; grid-column: span 2; min-height: 350px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; padding: 25px; border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(145deg, rgba(21,26,36,.88), rgba(11,14,20,.96)); transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease; }
.project-card:nth-child(4), .project-card:nth-child(5) { grid-column: span 3; }
.project-card::before { position: absolute; inset: 0 20% auto; height: 1px; content: ""; background: linear-gradient(90deg, transparent, rgba(96,165,250,.65), transparent); opacity: 0; transition: opacity .28s ease; }
.project-card::after { position: absolute; right: -80px; top: -80px; width: 180px; height: 180px; border-radius: 50%; content: ""; background: rgba(59,130,246,.075); filter: blur(30px); opacity: 0; transition: opacity .28s ease; }
.project-card:hover { transform: translateY(-5px); border-color: var(--border-bright); box-shadow: 0 24px 60px rgba(0,0,0,.36), 0 0 0 1px rgba(59,130,246,.04) inset; }
.project-card:hover::before, .project-card:hover::after { opacity: 1; }
.project-card__top { display: flex; align-items: flex-start; justify-content: space-between; }
.project-icon { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(96,165,250,.22); border-radius: 14px; background: rgba(59,130,246,.08); }
.project-icon img { width: 24px; height: 24px; }
.project-card__number { color: #465267; font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; }
.project-status { padding: 5px 8px; border: 1px solid var(--border); border-radius: 999px; color: #7f8a9a; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.project-status.is-active { border-color: rgba(74,222,128,.2); color: #73df9a; background: rgba(74,222,128,.05); }
.project-card h3 { margin: 0 0 12px; font-size: 24px; letter-spacing: -.025em; }
.project-card p:not(.eyebrow) { margin: 0; color: var(--muted); line-height: 1.65; }
.project-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 26px; padding-top: 18px; border-top: 1px solid rgba(148,163,184,.09); }
.project-card__link { display: flex; align-items: center; gap: 7px; color: #a9c8fa; font-size: 12px; }
.project-card__link img { transition: transform .2s ease; }.project-card__link:hover img { transform: translate(2px,-2px); }
.empty-panel { grid-column: 1 / -1; padding: 45px; border: 1px dashed var(--border); border-radius: var(--radius); color: var(--muted); text-align: center; }
.section-end-link { display: flex; justify-content: flex-end; margin-top: 24px; }
.section-end-link a { display: inline-flex; align-items: center; gap: 8px; color: #9dc3fc; font-size: 13px; }
.project-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.filter-chip { padding: 8px 13px; border: 1px solid var(--border); border-radius: 999px; background: rgba(255,255,255,.02); color: #7f8b9c; font-size: 12px; cursor: pointer; transition: color .2s ease, border-color .2s ease, background .2s ease; }
.filter-chip:hover { color: white; border-color: rgba(96,165,250,.34); }
.filter-chip.is-active { color: #dceaff; border-color: rgba(96,165,250,.42); background: rgba(59,130,246,.11); }

.principles { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: rgba(16,20,28,.65); }
.principle { padding: 34px; }
.principle + .principle { border-left: 1px solid var(--border); }
.principle-index { color: #609df8; font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; }
.principle h3 { margin: 42px 0 10px; font-size: 20px; }
.principle p { margin: 0; color: var(--muted); line-height: 1.65; }
.cta-panel { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 40px; overflow: hidden; padding: 52px; border: 1px solid rgba(96,165,250,.24); border-radius: 26px; background: #101620; }
.cta-panel::after { position: absolute; right: -110px; width: 310px; height: 310px; border-radius: 50%; content: ""; background: rgba(59,130,246,.13); filter: blur(60px); }
.cta-panel h2 { font-size: clamp(31px, 4vw, 46px); }

.page-hero { padding-block: 112px 76px; border-bottom: 1px solid var(--border); }
.page-hero__copy { max-width: 670px; margin-top: 24px; }
.page-hero__meta { margin-top: 30px; color: #718096; font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: start; }
.about-wordmark { position: sticky; top: 120px; font-size: clamp(80px, 14vw, 170px); font-weight: 850; letter-spacing: -.075em; line-height: .8; color: #151b25; text-shadow: 0 0 1px rgba(147,197,253,.6); }
.prose { max-width: 760px; }
.prose h2 { margin: 55px 0 18px; font-size: 28px; }
.prose h2:first-child { margin-top: 0; }
.prose p + p { margin-top: 18px; }
.prose a { color: #8db9fb; text-decoration: underline; text-underline-offset: 3px; }

.status-summary { display: flex; align-items: center; gap: 18px; margin-bottom: 34px; padding: 24px; border: 1px solid rgba(74,222,128,.2); border-radius: 16px; background: rgba(74,222,128,.045); }
.status-summary .health-dot { width: 11px; height: 11px; }
.status-summary h2 { margin: 0 0 4px; font-size: 18px; }
.status-summary p { margin: 0; color: var(--muted); font-size: 13px; }
.status-grid { display: grid; gap: 12px; }
.status-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 20px; padding: 24px; border: 1px solid var(--border); border-radius: 15px; background: var(--surface); }
.status-row h3 { margin: 0 0 6px; font-size: 16px; }
.status-row p { margin: 0; color: var(--muted); font-size: 13px; }
.status-value { color: var(--success); font-size: 13px; font-weight: 700; }
.status-value.status-offline { color: var(--danger); }
.status-note { margin-top: 20px; color: #6f7a8a; font-size: 12px; }

.site-footer { margin-top: 70px; border-top: 1px solid var(--border); }
.footer-main { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 60px; padding-block: 58px; }
.footer-tagline { max-width: 390px; margin: 18px 0 0; color: var(--muted); line-height: 1.6; }
.footer-links { display: grid; grid-template-columns: repeat(2, 140px); gap: 10px 40px; }
.footer-links a { color: #9da8b7; font-size: 14px; }
.footer-links a:hover { color: white; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-block: 20px 28px; border-top: 1px solid rgba(255,255,255,.055); color: #626d7d; font-size: 12px; }

.reveal { opacity: 0; transform: translateY(16px); transition: opacity .65s ease var(--delay, 0ms), transform .65s ease var(--delay, 0ms); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { --delay: 55ms; }.reveal-delay-2 { --delay: 110ms; }.reveal-delay-3 { --delay: 165ms; }.reveal-delay-4 { --delay: 220ms; }.reveal-delay-5 { --delay: 275ms; }

@media (max-width: 900px) {
  .desktop-nav, .header-action { display: none; }
  .menu-toggle { display: block; }
  .site-settings { margin-left: auto; }.menu-toggle { margin-left: 0; }
  .mobile-nav { position: fixed; inset: 72px 0 auto; display: grid; gap: 4px; padding: 18px 24px 24px; border-bottom: 1px solid var(--border); background: rgba(7,9,13,.98); transform: translateY(-130%); opacity: 0; transition: transform .25s ease, opacity .25s ease; }
  .mobile-nav.is-open { transform: translateY(0); opacity: 1; }
  .mobile-nav a { padding: 13px 8px; color: #bdc6d3; }
  .system-rail__grid { grid-template-columns: repeat(2, 1fr); }
  .system-rail__grid > div:nth-child(3) { border-top: 1px solid var(--border); }
  .system-rail__grid > div:nth-child(4) { border-top: 1px solid var(--border); }
  .project-grid { grid-template-columns: repeat(2, 1fr); }
  .project-card, .project-card:nth-child(4), .project-card:nth-child(5) { grid-column: span 1; }
  .section-header { grid-template-columns: 1fr; gap: 20px; }
  .principles { grid-template-columns: 1fr; }
  .principle + .principle { border-left: 0; border-top: 1px solid var(--border); }
  .about-grid { grid-template-columns: 1fr; gap: 35px; }
  .about-wordmark { position: static; }
}

@media (max-width: 620px) {
  .container { width: min(calc(100% - 30px), var(--content)); }
  .header-inner { height: 64px; }
  .mobile-nav { top: 64px; }
  .settings-popover { position: fixed; top: 70px; right: 15px; width: min(290px, calc(100vw - 30px)); }
  .hero { min-height: 610px; }
  .hero-content { padding-block: 90px 110px; }
  .hero h1 { font-size: clamp(76px, 27vw, 145px); }
  .hero-subtitle { max-width: 290px; font-size: 20px; }
  .hero-actions { flex-direction: column; align-items: stretch; max-width: 290px; margin-inline: auto; }
  .section { padding-block: 76px; }
  .system-rail__grid { grid-template-columns: 1fr 1fr; }
  .system-rail__grid > div { min-height: 82px; padding: 15px; }
  .system-rail strong { font-size: 11px; }
  .project-grid { grid-template-columns: 1fr; }
  .project-card { min-height: 300px; }
  .cta-panel { align-items: flex-start; flex-direction: column; padding: 34px 25px; }
  .page-hero { padding-block: 82px 58px; }
  .footer-main { grid-template-columns: 1fr; }
  .footer-links { grid-template-columns: repeat(2, 1fr); }
  .footer-bottom { flex-direction: column; }
}

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