/* Octaward server pages — one stylesheet for every setup / error / holding page.
   Served from /__octaward/assets/ by nginx; no third-party requests. */
@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;src:url(fonts/poppins-400.woff2) format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;src:url(fonts/poppins-500.woff2) format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;src:url(fonts/poppins-600.woff2) format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:swap;src:url(fonts/poppins-700.woff2) format("woff2")}

:root{
  --navy:#12203A; --navy-2:#0B1528; --navy-3:#1B2C4C;
  --gold:#CBA74C; --gold-soft:#E2C77F;
  --cream:#F4F2EE;
  --bg:var(--navy); --bg-deep:var(--navy-2); --ink:var(--cream);
  --muted:rgba(244,242,238,.66); --faint:rgba(244,242,238,.14); --line:rgba(244,242,238,.10);
  --accent:var(--gold);
  color-scheme:dark;
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --bg:var(--cream); --bg-deep:#E9E5DC; --ink:var(--navy);
    --muted:rgba(18,32,58,.68); --faint:rgba(18,32,58,.16); --line:rgba(18,32,58,.10);
    --accent:#A9852C; color-scheme:light;
  }
}

*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{
  font-family:Poppins,ui-sans-serif,system-ui,sans-serif;
  background:
    radial-gradient(120% 90% at 85% 50%, var(--bg) 0%, var(--bg-deep) 100%);
  color:var(--ink); line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* faint survey grid: every direction, mapped */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(70% 70% at 70% 50%, #000 0%, transparent 75%);
  -webkit-mask-image:radial-gradient(70% 70% at 70% 50%, #000 0%, transparent 75%);
  opacity:.55;
}

.shell{
  position:relative; min-height:100%;
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  grid-template-rows:auto 1fr auto; column-gap:4vw;
  padding:clamp(20px,4vw,56px) clamp(16px,5vw,80px);
}

/* wordmark */
.brand{grid-column:1/-1; display:flex; align-items:center; gap:14px; text-decoration:none; color:inherit; width:max-content}
.brand svg{width:30px;height:30px}
.brand b{font-weight:700; letter-spacing:.32em; font-size:15px}

/* main copy */
.copy{grid-column:1; align-self:center; max-width:34rem; padding:6vh 0}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--accent);
}
.eyebrow .code{
  font-variant-numeric:tabular-nums; border:1px solid currentColor; border-radius:999px;
  padding:2px 10px; letter-spacing:.12em;
}
h1{
  font-weight:600; letter-spacing:-.025em; line-height:1.08;
  font-size:clamp(34px,5.4vw,64px); margin:18px 0 18px; text-wrap:balance;
}
h1 .host{display:block; color:var(--accent); overflow-wrap:anywhere}
.lede{color:var(--muted); font-size:clamp(15px,1.25vw,17px); max-width:31rem; text-wrap:pretty}

.actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
.btn{
  display:inline-flex; align-items:center; gap:10px; min-height:46px; padding:0 22px;
  border-radius:12px; font:600 14px/1 Poppins,sans-serif; letter-spacing:.02em; text-decoration:none;
  transition:transform .2s cubic-bezier(.2,.8,.2,1), background-color .2s, border-color .2s;
}
.btn-primary{background:var(--accent); color:var(--navy)}
.btn-primary:hover{transform:translateY(-1px); background:var(--gold-soft)}
.btn-ghost{border:1px solid var(--faint); color:var(--ink)}
.btn-ghost:hover{border-color:var(--accent)}
.btn:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

/* console strip */
.console{
  margin-top:40px; padding-top:18px; border-top:1px solid var(--faint);
  display:flex; flex-wrap:wrap; gap:8px 26px;
  font-size:12px; letter-spacing:.06em; color:var(--muted); font-variant-numeric:tabular-nums;
}
.console span{display:inline-flex; gap:8px; align-items:baseline; min-width:0}
.console em{font-style:normal; font-weight:600; letter-spacing:.2em; text-transform:uppercase; font-size:10.5px; color:var(--ink); opacity:.9}
.console code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; word-break:break-all}
.live{width:7px;height:7px;border-radius:50%;background:var(--accent);align-self:center;box-shadow:0 0 0 0 var(--accent);animation:ping 2.4s infinite}

/* radar */
.radar{grid-column:2; grid-row:2; align-self:center; justify-self:end; width:min(44vw,600px); padding:28px; aspect-ratio:1}
.radar svg{width:100%; height:100%; overflow:visible}
.r-ring{fill:none; stroke:var(--faint); stroke-width:1}
.r-ring.outer{stroke:var(--ink); stroke-opacity:.55; stroke-width:2}
.r-tick{stroke:var(--ink); stroke-opacity:.5; stroke-width:2}
.r-cross{stroke:var(--line); stroke-width:1}
.r-label{fill:var(--muted); font:600 11px Poppins,sans-serif; letter-spacing:.2em; text-anchor:middle; dominant-baseline:middle}
.r-sweep{transform-box:view-box; transform-origin:200px 200px; animation:sweep 5.5s linear infinite}
.r-core{fill:var(--accent)}
.r-blip{fill:var(--accent)}
.r-pulse{fill:none; stroke:var(--accent); transform-box:fill-box; transform-origin:center; animation:pulse 2.6s cubic-bezier(.2,.7,.3,1) infinite}

/* states */
.state-halt .r-sweep{animation:none; transform:rotate(-38deg); opacity:.35}
.state-halt .r-core{animation:alert 1.6s ease-in-out infinite}
.state-slow .r-sweep{animation-duration:11s}
.state-blip .r-blip{animation:acquire 5.5s linear infinite}

/* footer */
.foot{
  grid-column:1/-1; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px 24px;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted);
}
.foot b{color:var(--ink); font-weight:700; letter-spacing:.3em}
.foot .tag{color:var(--accent)}

/* entrance */
.rise{opacity:0; transform:translateY(14px); animation:rise .8s cubic-bezier(.2,.8,.2,1) forwards}
.d1{animation-delay:.05s}.d2{animation-delay:.15s}.d3{animation-delay:.25s}.d4{animation-delay:.35s}.d5{animation-delay:.45s}
.radar{animation:fade 1.2s ease-out both}

@keyframes rise{to{opacity:1; transform:none}}
@keyframes fade{from{opacity:0; transform:scale(.97)}to{opacity:1; transform:none}}
@keyframes sweep{to{transform:rotate(360deg)}}
@keyframes pulse{0%{transform:scale(.4); opacity:.9}100%{transform:scale(3.2); opacity:0}}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(203,167,76,.6)}70%,100%{box-shadow:0 0 0 9px rgba(203,167,76,0)}}
@keyframes alert{50%{opacity:.25}}
/* blip lights up as the sweep passes (~2 o'clock), then fades */
@keyframes acquire{0%,14%{opacity:.15}17%{opacity:1}60%{opacity:.35}100%{opacity:.15}}

@media (max-width:820px){
  .shell{grid-template-columns:1fr; grid-template-rows:auto auto 1fr auto}
  .radar{grid-column:1; grid-row:2; justify-self:center; width:min(78vw,360px); margin:28px 0 0}
  .copy{grid-row:3; padding:18px 0 40px}
  .console{margin-top:30px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
  .rise{opacity:1; transform:none}
}