:root {
  --bg: #050b13;
  --bg-soft: #07111f;
  --panel: rgba(8, 23, 38, 0.82);
  --panel-strong: rgba(9, 27, 44, 0.96);
  --line: rgba(104, 207, 255, 0.18);
  --line-strong: rgba(98, 216, 255, 0.42);
  --cyan: #6bdcff;
  --cyan-bright: #a8edff;
  --text: #e9f5fb;
  --muted: #93aabd;
  --green: #60e6a7;
  --shadow: 0 30px 80px rgba(0,0,0,.42);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 12% 0%, rgba(20, 93, 135, .22), transparent 30%),
    radial-gradient(circle at 88% 16%, rgba(32, 120, 151, .13), transparent 28%),
    linear-gradient(180deg, #06101c 0%, #050b13 60%, #03080e 100%);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
a:focus-visible, .button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }

.ambient-grid {
  position: fixed; inset: 0; pointer-events: none; opacity: .2;
  background-image:
    linear-gradient(rgba(107,220,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107,220,255,.045) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(to bottom, black, transparent 80%);
}
.ambient-orb { position: fixed; width: 420px; height: 420px; border-radius: 50%; filter: blur(110px); opacity: .12; pointer-events: none; }
.orb-a { background: #2cb7ff; top: 8%; left: -180px; }
.orb-b { background: #1dd3a7; top: 48%; right: -240px; }

.shell { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.site-header {
  width: min(1240px, calc(100% - 40px)); margin: 18px auto 0;
  min-height: 72px; padding: 12px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  position: sticky; top: 14px; z-index: 20;
  background: rgba(5, 14, 24, .78); border: 1px solid var(--line); border-radius: 16px;
  backdrop-filter: blur(18px); box-shadow: 0 14px 36px rgba(0,0,0,.22);
}
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid var(--line-strong); border-radius: 10px;
  background: linear-gradient(145deg, rgba(107,220,255,.16), rgba(7,21,34,.85));
  color: var(--cyan-bright); font-weight: 800; letter-spacing: -.03em; box-shadow: inset 0 0 20px rgba(79,190,238,.09);
}
.brand-copy { display: grid; line-height: 1.05; gap: 5px; }
.brand-copy strong { font-size: .84rem; letter-spacing: .16em; }
.brand-copy small { font-size: .58rem; color: var(--muted); letter-spacing: .16em; }
.top-nav { display: flex; gap: 6px; flex-wrap: wrap; }
.top-nav a { color: #bed0db; font-size: .84rem; padding: 9px 11px; border-radius: 9px; }
.top-nav a:hover { background: rgba(107,220,255,.07); color: white; }

.hero { min-height: 720px; padding: 116px 0 92px; display: grid; grid-template-columns: 1.08fr .92fr; gap: 68px; align-items: center; position: relative; }
.eyebrow, .micro { color: var(--cyan); font-size: .7rem; letter-spacing: .18em; font-weight: 700; }
.eyebrow { display: inline-flex; gap: 9px; align-items: center; border: 1px solid var(--line); padding: 7px 10px; border-radius: 999px; background: rgba(9,25,40,.58); }
.status-dot { width: 7px; height: 7px; background: var(--green); border-radius: 50%; box-shadow: 0 0 12px rgba(96,230,167,.8); }
h1 { font-size: clamp(3.1rem, 6.4vw, 6.5rem); line-height: .94; letter-spacing: -.055em; margin: 24px 0; font-weight: 680; }
h1 span { color: #91dffa; }
.hero-lead { max-width: 700px; font-size: 1.16rem; color: #b7cbd8; line-height: 1.7; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.button {
  min-height: 46px; padding: 0 17px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); font-size: .86rem; font-weight: 650;
}
.button.primary { background: linear-gradient(180deg, #9feaff, #67d4f7); color: #031019; box-shadow: 0 10px 28px rgba(54,190,235,.18); }
.button.secondary { background: rgba(10,27,43,.64); color: #dff7ff; }
.button:hover { transform: translateY(-1px); }
.quiet-note { margin-top: 18px; color: #728a9a; font-size: .74rem; max-width: 630px; }

.console-card {
  border: 1px solid var(--line-strong); border-radius: 18px; overflow: hidden;
  background: linear-gradient(180deg, rgba(9,29,48,.92), rgba(4,15,26,.92)); box-shadow: var(--shadow);
  position: relative;
}
.console-card::before { content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient(115deg, transparent 40%, rgba(107,220,255,.055) 50%, transparent 60%); }
.console-top { padding: 18px 20px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.console-top > div:first-child { display:grid; gap:3px; }
.console-top strong { font-size: 1.25rem; letter-spacing: .02em; }
.health { color: var(--green); font-size: .67rem; letter-spacing: .14em; display: flex; align-items: center; gap: 7px; }
.health span { width: 6px; height: 6px; background: var(--green); border-radius:50%; }
.console-body { padding: 25px 20px 22px; }
.prompt-label { color: var(--muted); font-size: .65rem; letter-spacing: .17em; }
.prompt { color: #effbff; font-size: 1rem; line-height: 1.55; padding: 13px 14px; border: 1px solid var(--line); background: rgba(2,12,21,.55); border-radius: 10px; }
.trace { margin-top: 22px; display: grid; gap: 8px; }
.trace > div { display: grid; grid-template-columns: 34px 112px 1fr; align-items: center; min-height: 47px; border: 1px solid rgba(107,220,255,.11); padding: 8px 10px; background: rgba(8,23,38,.5); }
.trace span { color: var(--cyan); font-size: .67rem; }
.trace b { font-size: .78rem; font-weight: 650; }
.trace small { color: var(--muted); }

.section { padding: 92px 0; position: relative; }
.section-heading { max-width: 820px; margin-bottom: 38px; }
.section-heading.compact { max-width: 760px; }
.section h2, .cta h2 { margin: 10px 0 14px; font-size: clamp(2rem, 4vw, 3.55rem); line-height: 1.05; letter-spacing: -.04em; font-weight: 650; }
.section-heading p { color: #9eb4c3; font-size: 1.03rem; }

.capability-grid { display:grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.hud-card { min-height: 250px; padding: 20px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(9,27,44,.74), rgba(5,17,29,.7)); border-radius: 14px; position:relative; overflow:hidden; }
.hud-card::after { content:""; position:absolute; right:-40px; bottom:-40px; width:100px; height:100px; border:1px solid rgba(107,220,255,.09); transform:rotate(45deg); }
.card-index { color: var(--cyan); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.7rem; }
.hud-card h3 { margin-top: 54px; margin-bottom: 10px; font-size: 1.1rem; }
.hud-card p { color: var(--muted); font-size: .88rem; }

.architecture { display:grid; grid-template-columns: 1.25fr .75fr; gap: 24px; align-items:stretch; }
.architecture-rail { padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: rgba(6,18,30,.62); }
.architecture-node { border:1px solid rgba(107,220,255,.16); background:rgba(9,28,46,.62); padding:16px; display:grid; gap:5px; }
.architecture-node.active { border-color: var(--line-strong); box-shadow: inset 3px 0 0 var(--cyan); }
.architecture-node span { color: var(--cyan); font-size:.63rem; letter-spacing:.15em; }
.architecture-node strong { font-size:1rem; }
.architecture-node small { color:var(--muted); }
.architecture-line { width:1px; height:20px; background:var(--line-strong); margin-left:28px; }
.principles { padding: 25px; border:1px solid var(--line); border-radius:16px; background:rgba(8,24,39,.7); }
.principles ul { list-style:none; padding:0; margin:23px 0 0; display:grid; gap:18px; }
.principles li { color:#9eb3c2; font-size:.88rem; padding-left:17px; border-left:1px solid var(--line-strong); }
.principles b { color:#eaf8fd; }

.split-panel { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.split-panel > div { min-height:200px; padding:24px; background:rgba(7,22,36,.7); border-right:1px solid var(--line); }
.split-panel > div:last-child { border-right:0; }
.panel-kicker { color:var(--cyan); font-size:.64rem; letter-spacing:.15em; }
.split-panel h3 { margin:38px 0 8px; font-size:1.1rem; }
.split-panel p { color:var(--muted); font-size:.86rem; }

.status-header { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:25px; }
.build-pill { color:#bfffe0; border:1px solid rgba(96,230,167,.24); padding:8px 10px; border-radius:999px; font-size:.66rem; letter-spacing:.14em; display:flex; align-items:center; gap:7px; }
.build-pill span { width:7px; height:7px; background:var(--green); border-radius:50%; box-shadow:0 0 10px rgba(96,230,167,.7); }
.status-board { border:1px solid var(--line); border-radius:16px; overflow:hidden; background:rgba(5,17,28,.65); }
.status-row { display:grid; grid-template-columns:52px 1fr 120px; align-items:center; min-height:78px; padding:10px 18px; border-bottom:1px solid rgba(107,220,255,.1); }
.status-row:last-child { border-bottom:0; }
.status-row.done { background:rgba(27,100,91,.055); }
.status-row.active { background:rgba(34,138,184,.09); box-shadow:inset 3px 0 0 var(--cyan); }
.status-number { color:#5a7b8f; font-family:ui-monospace, monospace; font-size:.68rem; }
.status-row div { display:grid; gap:3px; }
.status-row strong { font-size:.91rem; }
.status-row small { color:var(--muted); }
.state { justify-self:end; color:#7892a2; font-size:.65rem; letter-spacing:.13em; }
.done .state { color:var(--green); }
.active .state { color:var(--cyan); }

.cta { margin-top:55px; margin-bottom:80px; padding:36px 38px; border:1px solid var(--line-strong); border-radius:18px; display:flex; align-items:center; justify-content:space-between; gap:30px; background:linear-gradient(110deg, rgba(10,36,57,.78), rgba(6,19,31,.72)); }
.cta h2 { font-size:clamp(1.8rem,3vw,2.8rem); max-width:760px; }

.site-footer { border-top:1px solid var(--line); min-height:180px; padding:36px 0 50px; display:grid; grid-template-columns:auto 1fr auto; gap:28px; align-items:start; color:var(--muted); }
.site-footer p { margin:5px 0 0; font-size:.77rem; max-width:640px; }
.footer-links { display:flex; gap:16px; font-size:.76rem; }
.footer-brand .brand-mark { width:36px; height:36px; }

.privacy-main { padding: 105px 0; }
.privacy-copy { max-width: 840px; }
.privacy-copy h1 { font-size: clamp(2.8rem, 5vw, 5rem); }
.privacy-copy h2 { margin-top: 42px; font-size: 1.35rem; }
.privacy-copy p, .privacy-copy li { color:#a9bdca; }
.privacy-copy ul { padding-left:20px; }

@media (max-width: 980px) {
  .hero { grid-template-columns:1fr; padding-top:80px; }
  .capability-grid { grid-template-columns:repeat(2,1fr); }
  .architecture { grid-template-columns:1fr; }
  .split-panel { grid-template-columns:1fr; }
  .split-panel > div { border-right:0; border-bottom:1px solid var(--line); }
  .split-panel > div:last-child { border-bottom:0; }
}
@media (max-width: 700px) {
  .shell { width:min(100% - 28px, 1180px); }
  .site-header { width:calc(100% - 20px); top:8px; }
  .top-nav { display:none; }
  .brand-copy small { display:none; }
  h1 { font-size:clamp(2.8rem,14vw,4.4rem); }
  .hero { min-height:auto; padding:70px 0; gap:45px; }
  .capability-grid { grid-template-columns:1fr; }
  .status-header, .cta { align-items:flex-start; flex-direction:column; }
  .status-row { grid-template-columns:36px 1fr; padding:14px; }
  .state { grid-column:2; justify-self:start; margin-top:5px; }
  .site-footer { grid-template-columns:1fr; }
  .trace > div { grid-template-columns:28px 90px 1fr; }
}

/* Architecture page */
.architecture-page { padding-bottom: 90px; }
.architecture-hero { padding: 110px 0 70px; max-width: 900px; }
.architecture-hero h1 { font-size: clamp(3rem, 6vw, 6rem); margin-bottom: 24px; }

.architecture-map {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 28px;
  background:
    linear-gradient(180deg, rgba(6,20,33,.78), rgba(3,12,21,.84)),
    radial-gradient(circle at 50% 0%, rgba(79,194,238,.08), transparent 35%);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.architecture-map::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(107,220,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107,220,255,.035) 1px, transparent 1px);
  background-size: 42px 42px;
}

.arch-stage { position: relative; z-index: 1; }
.arch-stage-label {
  color: var(--cyan);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .18em;
  margin-bottom: 10px;
}
.arch-stage-user { max-width: 820px; margin: 0 auto; }

.arch-node {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px;
  background: linear-gradient(180deg, rgba(9,29,47,.9), rgba(6,19,32,.82));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.015);
}
.arch-node-primary {
  border-color: var(--line-strong);
  box-shadow: inset 3px 0 0 var(--cyan), 0 18px 50px rgba(0,0,0,.22);
}
.arch-node-header { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.arch-index { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--cyan); font-size: .7rem; }
.arch-state, .arch-tag {
  color: #8eb3c7;
  font-size: .61rem;
  letter-spacing: .13em;
  border: 1px solid rgba(107,220,255,.14);
  border-radius: 999px;
  padding: 5px 8px;
}
.arch-state { color: var(--green); display: inline-flex; align-items: center; gap: 6px; }
.arch-state i { width: 6px; height: 6px; background: var(--green); border-radius: 50%; box-shadow: 0 0 8px rgba(96,230,167,.7); }
.arch-node h2, .arch-node h3 { margin: 18px 0 8px; letter-spacing: -.025em; }
.arch-node h2 { font-size: 1.7rem; }
.arch-node h3 { font-size: 1.05rem; }
.arch-node p { color: var(--muted); margin-bottom: 0; font-size: .89rem; }
.compact-node { min-height: 190px; }

.arch-grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.arch-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }

.arch-chip-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.arch-chip-row span, .hub-meta span {
  border: 1px solid rgba(107,220,255,.13);
  background: rgba(107,220,255,.045);
  color: #a6c4d5;
  border-radius: 7px;
  padding: 5px 7px;
  font-size: .65rem;
}

.arch-mini-list { margin: 17px 0 0; padding-left: 17px; color: #9ab1c0; font-size: .8rem; }
.arch-mini-list li { margin: 4px 0; }

.arch-depth {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 7px;
  margin-top: 22px;
}
.arch-depth span {
  text-align: center;
  border: 1px solid rgba(107,220,255,.18);
  background: rgba(107,220,255,.05);
  border-radius: 7px;
  padding: 8px 6px;
  color: #bfeeff;
  font-size: .58rem;
  letter-spacing: .08em;
}
.arch-depth b { color: var(--cyan); font-weight: 400; }
.arch-note { color: #6f8b9c; display: block; margin-top: 11px; }

.arch-connector {
  height: 70px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.arch-connector span { height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong)); }
.arch-connector span:last-child { background: linear-gradient(90deg, var(--line-strong), transparent); }
.arch-connector b {
  color: #65899d;
  font-size: .58rem;
  letter-spacing: .15em;
  font-weight: 600;
}

.hub-layout { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.hub-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(7,22,36,.76);
  padding: 19px;
}
.hub-card.hub-active { border-color: var(--line-strong); box-shadow: inset 0 3px 0 rgba(107,220,255,.66); }
.hub-title { display: flex; align-items: center; gap: 11px; }
.hub-title small { color: #7898aa; letter-spacing: .12em; font-size: .58rem; }
.hub-title h3 { margin: 3px 0 0; font-size: 1.04rem; }
.hub-light { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 13px rgba(96,230,167,.65); flex: 0 0 auto; }
.hub-light.muted { background: #56788a; box-shadow: none; }
.hub-card p { color: var(--muted); font-size: .82rem; min-height: 78px; }
.hub-meta { display: flex; flex-wrap: wrap; gap: 6px; }

.hub-isolation {
  margin-top: 12px;
  border: 1px dashed rgba(107,220,255,.19);
  border-radius: 12px;
  min-height: 70px;
  padding: 13px 16px;
  display: flex;
  gap: 13px;
  align-items: center;
  background: rgba(4,14,24,.62);
}
.lock-mark {
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 9px; color: var(--cyan); font-size: 1.4rem;
}
.hub-isolation div { display: grid; gap: 2px; }
.hub-isolation strong { font-size: .82rem; }
.hub-isolation small { color: var(--muted); }

.source-node { min-height: 210px; }

.output-flow { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.output-node {
  min-height: 95px; padding: 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(7,22,36,.72);
  display: grid; align-content: center; gap: 4px;
}
.output-node span { color: var(--cyan); font-size: .63rem; letter-spacing: .15em; }
.output-node strong { font-size: .86rem; }
.output-node.complete { border-color: rgba(96,230,167,.31); box-shadow: inset 3px 0 0 var(--green); }
.output-node.next { border-color: var(--line-strong); box-shadow: inset 3px 0 0 var(--cyan); }
.output-caption { color: var(--muted); font-size: .78rem; margin: 13px 0 0; }

.architecture-principles { padding: 90px 0 20px; }

@media (max-width: 900px) {
  .arch-grid-3, .hub-layout { grid-template-columns: 1fr; }
  .hub-card p { min-height: auto; }
  .output-flow { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 700px) {
  .architecture-hero { padding: 75px 0 45px; }
  .architecture-map { padding: 16px; }
  .arch-grid-2 { grid-template-columns: 1fr; }
  .arch-depth { grid-template-columns: 1fr; }
  .arch-depth b { transform: rotate(90deg); text-align: center; }
  .output-flow { grid-template-columns: 1fr; }
  .arch-connector { height: 54px; }
}