/* ============================================================
   SAAS DOOR: the status page. Dark navy, dot grid, standalone.
   ============================================================ */
:root{
  --bg:#060A14;
  --panel:#0C1526;
  --blue:#4C8DFF;
  --violet:#7C5BFF;
  --teal:#2BD9EE;
  --ok:#3DDC84;
  --warn:#F5A623;
  --down:#FF5D5D;
  --ink:#E9EFFB;
  --muted:#8B9AC0;
  --edge:rgba(139,154,192,.22);

  --body:"Sora","Helvetica Neue",Arial,sans-serif;
  --mono:"Space Mono","Courier New",monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
html,body{margin:0;padding:0}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--bg);color:var(--ink);
  padding:12px 18px;border-radius:4px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;
}
.skip-link:focus{left:12px;top:12px}

body{
  background:var(--bg);
  background-image:radial-gradient(rgba(139,154,192,.12) 1px, transparent 1.4px);
  background-size:26px 26px;
  color:var(--ink);
  font-family:var(--body);
  font-weight:300;
  font-size:16px;
  line-height:1.65;
}
a{color:var(--blue)}
[hidden]{display:none!important}
/* page-wide packet canvas: behind all content, above the body dot grid */
#bgnet{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
::selection{background:var(--blue);color:#060A14}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
:focus:not(:focus-visible){outline:none}

.dot{
  display:inline-block;width:9px;height:9px;border-radius:50%;
  margin-right:9px;vertical-align:1px;
}
.dot.ok{background:var(--ok);box-shadow:0 0 8px rgba(61,220,132,.7)}
.dot.warn{background:var(--warn);box-shadow:0 0 8px rgba(245,166,35,.7)}
.dot.down{background:var(--down);box-shadow:0 0 8px rgba(255,93,93,.7)}

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(6,10,20,.93);
  border-bottom:1px solid var(--edge);
}
.top-in{
  position:relative;
  max-width:760px;margin:0 auto;
  padding:13px 24px;
  display:flex;align-items:center;gap:12px;flex-wrap:nowrap;
}
.top-brand{
  font-family:var(--mono);font-weight:700;font-size:15px;
  color:var(--ink);text-decoration:none;white-space:nowrap;
}
.top-brand .dim{color:var(--muted);font-weight:400}
.top-book{margin-left:auto;white-space:nowrap;padding:9px 14px;font-size:10px}
.mb-long{white-space:pre}
.nav-burger{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  width:38px;height:38px;flex:0 0 38px;padding:0;cursor:pointer;
  border:1px solid var(--edge);border-radius:6px;background:transparent;
}
.nav-burger span{display:block;width:15px;height:2px;background:var(--ink);border-radius:2px;
  transition:transform .25s ease,opacity .25s ease}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.top-nav{
  display:none;
  position:absolute;top:100%;right:24px;
  flex-direction:column;
  width:280px;
  background:var(--panel);
  border:1px solid var(--edge);
  box-shadow:0 12px 34px rgba(0,0,0,.5);
  padding:6px 0;
}
.top-nav.open{display:flex}
.top-nav a{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;
  padding:13px 20px;border-top:1px solid rgba(139,154,192,.12);
}
.top-nav a:first-child{border-top:none}
.top-nav a:hover{color:var(--blue)}
@media (max-width:520px){
  .mb-long{display:none}
  .top-nav{left:12px;right:12px;width:auto}
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-p{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:#060A14;
  background:linear-gradient(102deg,var(--blue),var(--violet));
  border:none;border-radius:6px;
  padding:14px 22px;cursor:pointer;text-decoration:none;
  box-shadow:0 0 0 1px rgba(76,141,255,.5),0 10px 42px rgba(124,91,255,.28);
  max-width:100%;
}
.btn-p:disabled{opacity:.6;cursor:default}
.btn-o{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);background:rgba(12,21,38,.5);
  border:1px solid var(--edge);border-radius:6px;
  padding:14px 22px;cursor:pointer;text-decoration:none;
  max-width:100%;
}
.btn-o:hover{border-color:var(--blue);color:var(--blue)}

/* ============================================================
   HERO: text + terminal over a perspective grid floor
   ============================================================ */
.hero{position:relative;overflow:hidden;perspective:700px}
#knot{position:absolute;inset:0;width:100%;height:100%;opacity:.35}
.floor{
  position:absolute;left:-30%;right:-30%;bottom:-12%;height:58%;
  z-index:1;pointer-events:none;
  background:
    repeating-linear-gradient(to right, rgba(76,141,255,.18) 0 1px, transparent 1px 54px),
    repeating-linear-gradient(to bottom, rgba(76,141,255,.18) 0 1px, transparent 1px 34px);
  transform:rotateX(63deg);
  transform-origin:top center;
  mask-image:linear-gradient(to bottom, transparent, #000 28%);
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 28%);
  animation:floorScroll 3.2s linear infinite;
}
@keyframes floorScroll{from{background-position:0 0,0 0}to{background-position:0 0,0 34px}}
.hero-in{
  position:relative;z-index:2;
  max-width:1080px;margin:0 auto;
  padding:64px 24px 76px;
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:40px;align-items:center;
}
@media (max-width:900px){
  .hero-in{grid-template-columns:1fr;gap:28px;padding-bottom:60px}
}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:4px}

/* terminal window */
.term{
  border:1px solid var(--edge);border-radius:10px;
  background:rgba(4,7,14,.92);
  box-shadow:0 24px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(76,141,255,.08);
  overflow:hidden;
  font-family:var(--mono);
}
.term{position:relative;z-index:3}
.term.dragging{z-index:20}
.term-bar{
  display:flex;align-items:center;gap:7px;
  padding:10px 14px;
  background:rgba(12,21,38,.9);
  border-bottom:1px solid var(--edge);
  cursor:grab;touch-action:none;user-select:none;
}
.term.dragging .term-bar{cursor:grabbing}
.term-bar i{width:10px;height:10px;border-radius:50%;background:var(--edge)}
.term-bar i:nth-child(1){background:#FF5D5D}
.term-bar i:nth-child(2){background:#F5A623}
.term-bar i:nth-child(3){background:#3DDC84}
.term-bar span{
  margin-left:6px;font-size:10px;letter-spacing:.12em;color:var(--muted);
}
.term-body{padding:16px 18px 14px;min-height:132px}
.tl{
  margin:0 0 7px;font-size:12.5px;line-height:1.6;color:var(--muted);
  white-space:pre-wrap;word-break:break-word;
}
.tl:first-child{color:var(--ink)}
.term-cursor{color:var(--teal);animation:cursorBlink 1s steps(2,jump-none) infinite}
@keyframes cursorBlink{0%{opacity:1}50%{opacity:0}}
.term-input-row{display:flex;align-items:baseline;gap:0;margin:0 0 7px}
.term-prompt{color:var(--teal)}
.term-input{
  flex:1;min-width:0;
  background:none;border:0;outline:0;padding:0;margin:0;
  font-family:var(--mono);font-size:12.5px;color:var(--ink);
  caret-color:var(--teal);
}
.term-input::placeholder{color:rgba(139,154,192,.4)}
.term-reply p{margin:0 0 7px;font-size:12.5px;line-height:1.6;color:var(--muted)}
.term-reply{margin-top:2px}

/* rotating orbit solid hovering over the terminal's corner */
.hero-in{position:relative}
.hero-solid{
  position:absolute;right:-8px;top:-34px;
  width:120px;height:120px;
  display:grid;place-items:center;perspective:560px;
  pointer-events:none;
}
@media (max-width:900px){.hero-solid{right:6px;top:auto;bottom:-26px}}
.hero-solid .solid{
  display:block;color:var(--violet);
  transform-style:preserve-3d;
  animation:tumble 26s linear infinite;will-change:transform;
}
@keyframes tumble{from{transform:rotateX(14deg) rotateY(0deg)}to{transform:rotateX(374deg) rotateY(360deg)}}
.hero-solid .solid > span{display:block;position:relative;transform-style:preserve-3d}
.orbit{width:96px;height:96px}
.orbit .core{position:absolute;left:50%;top:50%;width:17px;height:17px;margin:-8.5px 0 0 -8.5px;border-radius:50%;background:currentColor;box-shadow:0 0 18px currentColor,0 0 44px currentColor}
.orbit .path{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(139,154,192,.35)}
.orbit .path:nth-of-type(2){inset:16px;transform:rotateX(66deg)}
.orbit .path:nth-of-type(3){inset:30px;transform:rotateY(60deg)}
.orbit .pip{position:absolute;top:50%;left:0;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--blue);box-shadow:0 0 12px var(--blue)}
.orbit .pip.b{left:auto;right:0;background:var(--teal);box-shadow:0 0 12px var(--teal)}

/* more solids further down the page, floating in the right margin */
.side-solid{
  display:none;
  position:absolute;right:-150px;top:60px;
  width:110px;height:110px;
  place-items:center;perspective:560px;
  pointer-events:none;
}
@media (min-width:1340px){.side-solid{display:grid}}
.side-solid .solid{
  display:block;
  transform-style:preserve-3d;
  animation:tumble 30s linear infinite;will-change:transform;
}
.side-solid .solid > span{display:block;position:relative;transform-style:preserve-3d}
.solid.s2{color:var(--teal)}
.solid.s3{color:var(--blue);animation-duration:24s;animation-direction:reverse}
.cube{width:58px;height:58px}
.cube i{position:absolute;inset:0;border:1px solid currentColor;background:rgba(233,239,251,.03);box-shadow:0 0 14px currentColor inset}
.cube i:nth-child(1){transform:translateZ(29px)}
.cube i:nth-child(2){transform:rotateY(180deg) translateZ(29px)}
.cube i:nth-child(3){transform:rotateY(90deg) translateZ(29px)}
.cube i:nth-child(4){transform:rotateY(-90deg) translateZ(29px)}
.cube i:nth-child(5){transform:rotateX(90deg) translateZ(29px)}
.cube i:nth-child(6){transform:rotateX(-90deg) translateZ(29px)}
.rings{width:82px;height:82px}
.rings i{position:absolute;inset:0;border-radius:50%;border:1px solid currentColor;box-shadow:0 0 15px currentColor}
.rings i:nth-child(2){transform:rotateX(64deg)}
.rings i:nth-child(3){transform:rotateY(64deg)}
.rings i:nth-child(4){transform:rotateX(38deg) rotateY(46deg);opacity:.45}
.kicker{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--teal);margin:0 0 16px;
}
h1{
  font-family:var(--body);font-weight:700;
  font-size:clamp(1.9rem,5vw,3rem);
  letter-spacing:-.03em;line-height:1.08;
  margin:0 0 16px;
}
.hl{color:var(--blue)}
.sub{color:var(--muted);max-width:54ch;margin:0 0 24px}
/* the status line lives inside the terminal; states recolor it */
.statusbar{color:var(--warn)}
.statusbar.ok{color:var(--ok)}
.statusbar.warn{color:var(--warn)}
.statusbar.down{color:var(--down)}

/* ============================================================
   DASHBOARD LAYOUT: sticky ops rail + content column
   ============================================================ */
.dash{max-width:1080px;margin:0 auto;display:block}
.rail{display:none}
@media (min-width:1020px){
  .dash{display:grid;grid-template-columns:230px minmax(0,1fr);gap:0 34px;padding:0 24px}
  .dash .page{min-width:0}
  .dash .sec{padding-left:0;padding-right:0;max-width:none}
  .dash .colophon{padding-left:0;padding-right:0;max-width:none}
  .rail{
    display:block;
    position:sticky;top:78px;align-self:start;
    margin-top:42px;
    border:1px solid var(--edge);border-radius:10px;
    background:var(--panel);
    padding:16px 16px 12px;
    font-family:var(--mono);
  }
  .rail-h{
    margin:0 0 12px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
    color:var(--ink);
  }
  .rail-svc{list-style:none;margin:0 0 14px;padding:0;border-bottom:1px solid var(--edge)}
  .rail-svc li{
    display:flex;align-items:center;
    font-size:10.5px;color:var(--muted);
    padding:5px 0;
  }
  .rail-svc .dot{width:7px;height:7px;margin-right:8px}
  .dot.idle{background:var(--muted);opacity:.45;box-shadow:none}
  .rail-nav{display:flex;flex-direction:column;padding:8px 0 2px}
  .rail-nav a{
    font-size:10px;letter-spacing:.12em;text-transform:uppercase;
    color:var(--muted);text-decoration:none;padding:5px 0;
  }
  .rail-nav a:hover{color:var(--blue)}
}

/* ============================================================
   SECTIONS
   ============================================================ */
.sec{max-width:760px;margin:0 auto;padding:42px 24px 6px;position:relative}
.sec h2{
  font-family:var(--body);font-weight:700;
  font-size:clamp(1.3rem,2.8vw,1.7rem);letter-spacing:-.02em;
  border-bottom:1px solid var(--edge);
  padding-bottom:10px;margin:0 0 14px;
}
.note{color:var(--muted);margin:0 0 18px;max-width:60ch}
.note a{color:var(--blue)}

/* ============================================================
   COMPONENT CHECK
   ============================================================ */
.qbox{
  border:1px solid var(--edge);border-radius:10px;
  background:var(--panel);
  padding:20px 22px;margin-bottom:16px;
}
.qcount{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:0 0 8px;
}
.qtext{font-weight:600;font-size:1.12rem;margin:0 0 14px;min-height:2.2em}
.qbtns{display:flex;gap:10px;flex-wrap:wrap}
.q-ans{min-width:92px}

.components{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.comp{
  display:flex;align-items:center;gap:12px;
  border:1px solid var(--edge);border-radius:8px;
  background:var(--panel);
  padding:13px 16px;
  font-size:.92rem;
}
.comp .cname{font-family:var(--mono);font-size:.8rem;color:var(--ink);flex:1}
.comp .cstat{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.comp.up .cstat{color:var(--ok)}
.comp.degraded{border-color:rgba(255,93,93,.35)}
.comp.degraded .cstat{color:var(--down)}
.comp .cfix{font-size:.78rem;color:var(--muted);width:100%;margin-top:4px}
.comp .cfix b{color:var(--blue);font-family:var(--mono);font-size:.75rem}
.comp{flex-wrap:wrap}

.readout{
  border:1px solid var(--edge);border-radius:10px;
  background:var(--panel);
  padding:20px 22px;margin-bottom:10px;
}
.readout p{margin:0 0 14px;color:var(--muted)}
.readout b{color:var(--ink)}
.readout .uptime{font-family:var(--mono);color:var(--warn)}
.read-cta{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.q-reset{
  font-size:.82rem;color:var(--muted);
  background:none;border:none;cursor:pointer;text-decoration:underline;padding:0;
}

/* ============================================================
   SERVICES + INCIDENTS
   ============================================================ */
.svc{list-style:none;margin:0;padding:0}
.svc li{
  padding:14px 26px 14px 0;position:relative;cursor:pointer;
  border-bottom:1px dotted var(--edge);
  font-size:.95rem;color:var(--muted);
}
.svc li b{
  color:var(--teal);font-family:var(--mono);font-size:.82rem;
  margin-right:8px;
}
.svc li:hover{background:rgba(43,217,238,.04)}
.svc-more{display:block;margin-top:8px;border-left:2px solid var(--edge);padding-left:12px;font-size:.87rem}
.svc-more[hidden]{display:none}

/* per-service uptime ticks: filled by the visitor's own component check */
.up-row{display:flex;align-items:center;gap:10px;margin-top:9px}
.up-bar{display:flex;gap:2px;flex:1;min-width:0;overflow:hidden}
.up-bar i{
  flex:1 1 auto;min-width:2px;max-width:7px;height:14px;border-radius:1.5px;
  background:rgba(139,154,192,.18);
  transition:background .2s ease;
  transition-delay:var(--d,0s);
}
.up-bar.ok i{background:var(--ok)}
.up-bar.bad i{background:var(--warn)}
.up-word{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;
}
.up-row.ok .up-word{color:var(--ok)}
.up-row.bad .up-word{color:var(--warn)}

/* incident log: terminal lines that type themselves in on scroll */
.inc{list-style:none;margin:0;padding:14px 16px;
  border:1px solid var(--edge);border-radius:10px;
  background:rgba(4,7,14,.8);
  font-family:var(--mono);
}
.inc li{
  padding:8px 0;border-bottom:1px dotted rgba(139,154,192,.15);
  color:var(--muted);font-size:.82rem;line-height:1.6;
  opacity:0;transform:translateX(-8px);
  transition:opacity .4s ease,transform .4s ease;
  transition-delay:var(--d,0s);
}
.inc li:last-child{border-bottom:none}
.inc.on li{opacity:1;transform:none}
.inc-pre{color:var(--teal);margin-right:8px}
.inc-tag{
  font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--down);border:1px solid rgba(255,93,93,.4);border-radius:4px;
  padding:3px 7px;margin-right:10px;
}

/* ============================================================
   FORM + BIO + FOOTER + CONSENT
   ============================================================ */
.card{
  border:1px solid var(--edge);border-radius:10px;
  background:var(--panel);
  padding:22px;margin-bottom:10px;
}
.card h3{font-weight:700;font-size:1.1rem;margin:0 0 10px}
.card form{display:flex;flex-direction:column;gap:14px;max-width:440px}
.s-field{display:flex;flex-direction:column;gap:5px}
.s-field span{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.s-field input{
  font-family:var(--body);font-size:15px;color:var(--ink);
  background:rgba(6,10,20,.6);
  border:1px solid var(--edge);border-radius:6px;
  padding:12px;width:100%;
}
.s-field input:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.s-field input::placeholder{color:rgba(139,154,192,.5)}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.s-note{margin:2px 0 0;font-size:.82rem;color:var(--down);min-height:1.2em}

.bio{
  border-left:3px solid var(--violet);
  background:rgba(124,91,255,.08);
  padding:14px 18px;color:var(--muted);
  margin:0 0 14px;
}

.colophon{
  max-width:760px;margin:40px auto 0;
  border-top:1px solid var(--edge);
  padding:18px 24px 30px;
  display:flex;gap:22px;flex-wrap:wrap;
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);
}
.colophon a{color:var(--muted);text-decoration:none}
.colophon a:hover{color:var(--blue)}

.consent{
  position:fixed;left:24px;bottom:18px;z-index:95;
  max-width:380px;
  border:1px solid var(--blue);
  background:rgba(12,21,38,.97);
  padding:16px 18px;display:none;
  font-size:.88rem;
}
.consent.show{display:block}
.consent p{margin:0 0 12px;line-height:1.55}
.consent-row{display:flex;gap:10px}
.consent-row .btn-p,.consent-row .btn-o{flex:1;padding:10px 12px;font-size:10px}
.consent-decline{
  background:none;border:0;padding:0;margin:0;
  color:var(--blue);text-decoration:underline;text-underline-offset:2px;
  font:inherit;cursor:pointer;
}
@media (max-width:520px){.consent{left:12px;right:12px;max-width:none}}

@media (prefers-reduced-motion: reduce){
  .nav-burger span{transition:none}
  .floor{animation:none}
  .term-cursor{animation:none}
  .inc li{transition:none;opacity:1;transform:none}
  .up-bar i{transition:none}
  .hero-solid .solid{animation:none;transform:rotateX(16deg) rotateY(28deg)}
  .side-solid .solid{animation:none;transform:rotateX(16deg) rotateY(28deg)}
}

/* sticky topbar must not cover anchor targets */
[id]{scroll-margin-top:80px}