/* Aurora — "Control Room" design system. Recreated to spec from the Claude Design handoff.
   Dark-first brand; every color painted explicitly. Tokens are the source of truth. */
:root{
  --bg:#0b1120;
  --panel:rgba(16,24,42,.72); --panel-quiet:rgba(16,24,42,.4); --inset:rgba(11,17,32,.7);
  --border:rgba(120,150,255,.22); --line:rgba(120,150,255,.12); --track:rgba(120,150,255,.1);
  --text:#eef3ff; --mid:#cfe0ff; --muted:#aab8d8; --dim:#8a99bd; --on-accent:#06121c;
  --teal:#34e3c2; --blue:#5b8cff; --purple:#a06bff; --success:#7df0a8; --danger:#ff6b81;
  --brand:linear-gradient(120deg,#34e3c2,#5b8cff,#a06bff);
  --btn:linear-gradient(120deg,#34e3c2,#5b8cff);
  --rail:linear-gradient(90deg,#34e3c2,#5b8cff);
  --mono:'JetBrains Mono',ui-monospace,'Cascadia Code','SF Mono',Consolas,monospace;
  --sans:'Space Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --container:1320px; --gutter:48px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--muted); font-family:var(--sans);
  -webkit-font-smoothing:antialiased; line-height:1.5; min-height:100vh; display:flex; flex-direction:column;
  position:relative; overflow-x:hidden}
a{color:var(--teal); text-decoration:none; transition:color .18s ease}
a:hover{color:var(--blue)}
.tnum{font-variant-numeric:tabular-nums}

/* ---- cross-page view transitions (Chromium) ---- */
@view-transition{ navigation:auto }
@keyframes outFwd  { to   { opacity:0; transform:translateX(-3.5%) scale(.985); filter:blur(5px) } }
@keyframes inFwd   { from { opacity:0; transform:translateX(4.5%)  scale(.99);  filter:blur(7px) } }
@keyframes outBack { to   { opacity:0; transform:translateX(3.5%)  scale(.985); filter:blur(5px) } }
@keyframes inBack  { from { opacity:0; transform:translateX(-4.5%) scale(.99);  filter:blur(7px) } }
::view-transition-old(root){ animation:outFwd .3s cubic-bezier(.5,0,1,1) both }
::view-transition-new(root){ animation:inFwd  .5s cubic-bezier(.16,.86,.22,1) both }
html[data-nav-dir="back"]::view-transition-old(root){ animation-name:outBack }
html[data-nav-dir="back"]::view-transition-new(root){ animation-name:inBack }
::view-transition-group(aurora-nav){ animation-duration:.34s }
::view-transition-old(aurora-nav),::view-transition-new(aurora-nav){ animation:none; mix-blend-mode:normal }
::view-transition-group(aurora-glow){ animation-duration:.7s; animation-timing-function:cubic-bezier(.4,0,.2,1) }
::view-transition-old(aurora-glow),::view-transition-new(aurora-glow){ animation:none; mix-blend-mode:normal }
::view-transition-group(tab-rail){ animation-duration:.5s; animation-timing-function:cubic-bezier(.22,1,.3,1) }
::view-transition-old(tab-rail),::view-transition-new(tab-rail){ animation:none; height:100% }

/* ---- entrance stagger ---- */
@keyframes rise    { from { opacity:0; transform:translateY(14px) }            to { opacity:1; transform:none } }
@keyframes panelIn { from { opacity:0; transform:translateY(20px) scale(.975) } to { opacity:1; transform:none } }
.stagger>*{ animation:rise .6s cubic-bezier(.2,.85,.25,1) both }
.stagger>.eyebrow{ animation-duration:.55s; animation-delay:.04s }
.stagger>h1{ animation-delay:.10s }
.stagger>.lead{ animation-delay:.18s }
.stagger>.btnrow{ animation-delay:.26s }
.stagger>.meta{ animation-delay:.34s }
.panelrise{ animation:panelIn .75s cubic-bezier(.2,.85,.25,1) both; animation-delay:.22s }
@keyframes pulse{ 0%,100%{opacity:1; box-shadow:0 0 0 0 rgba(125,240,168,.5)} 50%{opacity:.7; box-shadow:0 0 0 5px rgba(125,240,168,0)} }
@keyframes drift{ 0%,100%{transform:translate(0,0)} 50%{transform:translate(30px,-20px)} }

/* ---- ambient glow ---- */
.glow{position:absolute; top:-140px; left:32%; width:800px; height:520px; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse, rgba(52,227,194,.14), rgba(91,140,255,.08) 45%, transparent 70%);
  filter:blur(36px); animation:drift 12s ease-in-out infinite; view-transition-name:aurora-glow}

/* ---- shell ---- */
.inner{max-width:var(--container); margin:0 auto; padding-inline:var(--gutter); width:100%}
.band{position:relative; z-index:1}

/* ---- header ---- */
.site-header{border-bottom:1px solid var(--line); view-transition-name:aurora-nav; position:relative; z-index:3; background:var(--bg)}
.nav{display:flex; align-items:center; justify-content:space-between; padding:22px var(--gutter)}
.logo{display:flex; align-items:center; gap:10px}
.diamond{width:14px; height:14px; border:2px solid; transform:rotate(45deg); flex:none;
  border-image:linear-gradient(120deg,#34e3c2,#5b8cff,#a06bff) 1}
.wordmark{font-family:var(--mono); font-weight:700; font-size:15px; letter-spacing:.18em;
  background:var(--brand); -webkit-background-clip:text; background-clip:text; color:transparent}
.tabs{display:flex; gap:30px; align-items:center}
.tab{font-family:var(--mono); font-weight:500; font-size:12px; letter-spacing:.1em; color:var(--muted);
  text-transform:uppercase; position:relative; padding-bottom:4px; transition:color .18s ease,opacity .18s ease}
.tab:hover{color:var(--text)} .tab:active{opacity:.55}
.tab.active{color:var(--teal)}
.tab.active .rail{position:absolute; left:0; right:0; bottom:-1px; height:2px; border-radius:2px;
  background:var(--rail); box-shadow:0 0 12px rgba(52,227,194,.65); view-transition-name:tab-rail}
.tab.soon{color:var(--dim); cursor:default} .tab.soon:hover{color:var(--dim)}
.tab.soon::after{content:"soon"; font-size:8px; letter-spacing:.1em; color:var(--purple); margin-left:5px; vertical-align:2px}
.cluster{display:flex; gap:14px; align-items:center}
.link-signin{font-family:var(--mono); font-weight:500; font-size:12px; color:var(--mid)}
.btn{font-family:var(--mono); font-weight:700; letter-spacing:.08em; border-radius:7px; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px; border:1px solid transparent; transition:filter .18s ease,transform .18s ease}
.btn:hover{filter:brightness(1.07); transform:translateY(-1px)}
.btn-teal{font-size:12px; letter-spacing:.08em; color:var(--on-accent); background:var(--teal); padding:10px 20px}
.btn-grad{font-size:13px; color:var(--on-accent); background:var(--btn); padding:14px 28px; border-radius:7px}
.btn-ghost{font-family:var(--mono); font-weight:500; font-size:13px; color:var(--mid); background:transparent;
  border:1px solid var(--border); padding:13px 24px; border-radius:7px}

/* ---- hero ---- */
.hero{flex:1; display:flex; align-items:center}
.hero .inner{display:grid; gap:56px; padding-block:76px; align-items:center}
.hero.home .inner{grid-template-columns:1.05fr 1fr}
.hero.product .inner{grid-template-columns:1.1fr 1fr; padding-block:80px}
.eyebrow{font-family:var(--mono); font-weight:500; font-size:11px; letter-spacing:.28em; color:var(--teal);
  text-transform:uppercase; margin:0 0 20px}
h1{font-family:var(--sans); font-weight:600; font-size:54px; line-height:1.08; letter-spacing:-.01em;
  color:var(--text); text-wrap:pretty; margin:0 0 20px}
.lead{font-size:17px; line-height:1.6; color:var(--muted); max-width:46ch; margin:0 0 32px}
.hero.product .lead{max-width:44ch}
.btnrow{display:flex; gap:14px; align-items:center; margin-bottom:34px; flex-wrap:wrap}
.meta{display:flex; gap:28px; font-family:var(--mono); font-weight:400; font-size:11px; color:var(--dim); flex-wrap:wrap}
.meta span::before{content:"◆ "; color:var(--teal)}

/* ---- right column (home cards) ---- */
.stack{display:flex; flex-direction:column; gap:16px; align-self:center}
.card{background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:22px;
  backdrop-filter:blur(8px); box-shadow:0 20px 60px rgba(0,0,0,.4); display:block; transition:border-color .18s ease}
a.card:hover{border-color:rgba(52,227,194,.45)}
.card-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px}
.card-title{display:flex; align-items:center; gap:9px; font-family:var(--mono); font-weight:700; font-size:13px;
  letter-spacing:.06em; color:var(--text)}
.dot{width:8px; height:8px; border-radius:50%; background:var(--success); animation:pulse 2s infinite; flex:none}
.badge{font-family:var(--mono); font-weight:700; font-size:10px; letter-spacing:.14em; padding:4px 9px; border-radius:4px; border:1px solid}
.badge.teal{color:var(--teal); border-color:rgba(52,227,194,.35)}
.badge.blue{color:var(--blue); border-color:rgba(91,140,255,.35)}
.badge.purple{color:var(--purple); border-color:rgba(160,107,255,.35)}
.badge.green{color:var(--success); border-color:rgba(125,240,168,.35)}
.card-body{font-size:13px; line-height:1.55; color:var(--muted); margin:0 0 16px}
.metrics{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px}
.tile{background:var(--inset); border:1px solid var(--line); border-radius:8px; padding:12px}
.tile .k{font-family:var(--mono); font-size:9px; letter-spacing:.16em; color:var(--dim); margin-bottom:5px; text-transform:uppercase}
.tile .v{font-family:var(--mono); font-weight:700; font-size:20px; color:var(--text)}
.tile .v.teal{color:var(--teal)}
.card-foot{display:flex; align-items:center; justify-content:space-between}
.foot-note{font-family:var(--mono); font-size:9px; letter-spacing:.06em; color:var(--dim)}
.foot-link{font-family:var(--mono); font-weight:700; font-size:11px; letter-spacing:.1em}
.foot-link.teal{color:var(--teal)} .foot-link.blue{color:var(--blue)}
.card.quiet{background:var(--panel-quiet); border:1px dashed var(--border); box-shadow:none; padding:16px 22px;
  display:flex; align-items:center; justify-content:space-between}
.card.quiet .label{font-family:var(--mono); font-weight:700; font-size:11px; letter-spacing:.1em; color:var(--mid)}

/* ---- telemetry panel (product page) ---- */
.panel{background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:24px;
  backdrop-filter:blur(8px); box-shadow:0 20px 60px rgba(0,0,0,.4); align-self:center}
.panel-head{display:flex; align-items:center; gap:9px; margin-bottom:18px}
.panel-head .name{font-family:var(--mono); font-weight:700; font-size:13px; letter-spacing:.06em; color:var(--text); flex:1}
.panel .metrics{margin-bottom:18px}
.panel .tile{padding:13px} .panel .tile .v{font-size:22px}
.marches{display:flex; flex-direction:column; gap:9px; margin-bottom:18px}
.march{display:flex; align-items:center; gap:10px}
.march .lbl{font-family:var(--mono); font-size:10px; color:var(--dim); width:64px; flex:none}
.march .trk{flex:1; height:6px; background:var(--track); border-radius:3px; overflow:hidden}
.march .fill{height:100%; background:var(--success); border-radius:3px}
.march .pct{font-family:var(--mono); font-weight:500; font-size:10px; color:var(--mid); font-variant-numeric:tabular-nums}
.panel-foot{display:flex; align-items:center; justify-content:space-between}
.btn-stop{font-family:var(--mono); font-weight:700; font-size:11px; letter-spacing:.1em; color:var(--danger);
  border:1px solid rgba(255,107,129,.35); background:transparent; padding:9px 20px; border-radius:6px; cursor:default}

/* ---- stat strip ---- */
.stats{border-top:1px solid var(--line)}
.stats .inner{display:grid; grid-template-columns:repeat(4,1fr); padding:0}
.stat{padding:26px var(--gutter); border-right:1px solid var(--line)}
.stat:last-child{border-right:none}
.stat .v{font-family:var(--mono); font-weight:700; font-size:26px; color:var(--text)}
.stat .v.teal{color:var(--teal)}
.stat .lbl{font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:var(--dim); margin-top:4px; text-transform:uppercase}
.stat .sub{font-family:var(--mono); font-size:9px; letter-spacing:.06em; color:var(--dim); margin-top:4px}

/* ---- footer ---- */
.site-footer{border-top:1px solid var(--line)}
.site-footer .inner{display:flex; align-items:center; justify-content:space-between; padding:20px var(--gutter);
  font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--dim); text-transform:uppercase; flex-wrap:wrap; gap:10px}

/* ---- responsive ---- */
@media (max-width:1100px){
  .hero.home .inner,.hero.product .inner{grid-template-columns:1fr; gap:40px}
  .stack,.panel{align-self:stretch}
}
@media (max-width:900px){
  :root{--gutter:28px}
  .nav{flex-wrap:wrap; row-gap:14px}
  .tabs{order:3; width:100%; gap:20px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:2px}
  .stats .inner{grid-template-columns:1fr 1fr}
  .stat:nth-child(2n){border-right:none}
  .stat{border-bottom:1px solid var(--line)}
}
@media (max-width:640px){
  :root{--gutter:20px}
  h1{font-size:34px}
  .hero .inner{padding-block:48px}
  .cluster .link-signin{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important}
  .glow{animation:none} html{scroll-behavior:auto}
  ::view-transition-old(root),::view-transition-new(root){animation:none !important}
}