/* ══════════════════════════════════════════════════════════════
   Bayqus — shared stylesheet for multi-page site (login, status,
   start, contact). Mirrors index.html's token system + Brand Law
   (docs/design-system.md): Sky accent on Slate, emerald/amber/red
   as semantic status only, system-sans + ui-mono, two themes.
   index.html stays self-contained (Artifact-safe); these pages
   link this file for maintainability.
   ══════════════════════════════════════════════════════════════ */
:root {
  --bg:#020617; --bg-2:#060c1c; --panel:#0b1324; --surface:#0f172a; --surface-2:#1e293b;
  --border:rgba(255,255,255,.07); --border-2:rgba(255,255,255,.12);
  --text:#e2e8f0; --text-2:#94a3b8; --text-3:#5b6b83;
  --accent:#0ea5e9; --accent-2:#38bdf8; --accent-deep:#0284c7;
  --accent-dim:rgba(56,189,248,.12); --accent-line:rgba(56,189,248,.30);
  --ok:#10b981; --ok-dim:rgba(16,185,129,.14);
  --warn:#f59e0b; --warn-dim:rgba(245,158,11,.14);
  --crit:#ef4444; --crit-dim:rgba(239,68,68,.14);
  --moon:rgba(56,189,248,.10); --grid-line:rgba(148,163,184,.05);
  --star:rgba(226,232,240,.72); --star-dim:rgba(148,163,184,.42);
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  --r:12px; --r-sm:8px; --maxw:1180px;
  --shadow:0 24px 60px -20px rgba(0,0,0,.65);
  color-scheme:dark;
}
@media (prefers-color-scheme:light){:root{
  --bg:#eef2f8; --bg-2:#e7edf6; --panel:#ffffff; --surface:#ffffff; --surface-2:#f1f5f9;
  --border:rgba(2,6,23,.10); --border-2:rgba(2,6,23,.16);
  --text:#0f172a; --text-2:#475569; --text-3:#7c8aa0;
  --accent:#0284c7; --accent-2:#0ea5e9; --accent-deep:#0369a1;
  --accent-dim:rgba(2,132,199,.10); --accent-line:rgba(2,132,199,.28);
  --ok-dim:rgba(16,185,129,.12); --warn-dim:rgba(245,158,11,.14); --crit-dim:rgba(239,68,68,.12);
  --moon:rgba(2,132,199,.08); --grid-line:rgba(15,23,42,.045); --star:transparent; --star-dim:transparent; --shadow:0 24px 60px -24px rgba(15,23,42,.25);
  color-scheme:light;
}}
:root[data-theme="dark"]{
  --bg:#020617; --bg-2:#060c1c; --panel:#0b1324; --surface:#0f172a; --surface-2:#1e293b;
  --border:rgba(255,255,255,.07); --border-2:rgba(255,255,255,.12);
  --text:#e2e8f0; --text-2:#94a3b8; --text-3:#5b6b83;
  --accent:#0ea5e9; --accent-2:#38bdf8; --accent-deep:#0284c7;
  --accent-dim:rgba(56,189,248,.12); --accent-line:rgba(56,189,248,.30);
  --ok-dim:rgba(16,185,129,.14); --warn-dim:rgba(245,158,11,.14); --crit-dim:rgba(239,68,68,.14);
  --moon:rgba(56,189,248,.10); --grid-line:rgba(148,163,184,.05); --star:rgba(226,232,240,.72); --star-dim:rgba(148,163,184,.42); --shadow:0 24px 60px -20px rgba(0,0,0,.65);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#eef2f8; --bg-2:#e7edf6; --panel:#ffffff; --surface:#ffffff; --surface-2:#f1f5f9;
  --border:rgba(2,6,23,.10); --border-2:rgba(2,6,23,.16);
  --text:#0f172a; --text-2:#475569; --text-3:#7c8aa0;
  --accent:#0284c7; --accent-2:#0ea5e9; --accent-deep:#0369a1;
  --accent-dim:rgba(2,132,199,.10); --accent-line:rgba(2,132,199,.28);
  --ok-dim:rgba(16,185,129,.12); --warn-dim:rgba(245,158,11,.14); --crit-dim:rgba(239,68,68,.12);
  --moon:rgba(2,132,199,.08); --grid-line:rgba(15,23,42,.045); --star:transparent; --star-dim:transparent; --shadow:0 24px 60px -24px rgba(15,23,42,.25);
  color-scheme:light;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--text); font-family:var(--sans);
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  min-height:100vh; display:flex; flex-direction:column; overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:radial-gradient(1200px 760px at 84% -16%,var(--moon),transparent 60%),
             radial-gradient(820px 640px at -8% 2%,var(--accent-dim),transparent 62%);
}
/* sparse, irregular starfield — night only (transparent in day); never a grid */
body::after{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none; background-repeat:no-repeat;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 17%,var(--star),transparent 62%),
    radial-gradient(1.3px 1.3px at 23% 8%,var(--star-dim),transparent 62%),
    radial-gradient(1.8px 1.8px at 38% 23%,var(--star),transparent 62%),
    radial-gradient(1.2px 1.2px at 51% 6%,var(--star-dim),transparent 62%),
    radial-gradient(1.5px 1.5px at 62% 19%,var(--star),transparent 62%),
    radial-gradient(1.3px 1.3px at 70% 11%,var(--star-dim),transparent 62%),
    radial-gradient(2.1px 2.1px at 83% 25%,var(--star),transparent 62%),
    radial-gradient(1.2px 1.2px at 91% 7%,var(--star-dim),transparent 62%),
    radial-gradient(1.5px 1.5px at 6% 33%,var(--star-dim),transparent 62%),
    radial-gradient(1.7px 1.7px at 45% 37%,var(--star),transparent 62%),
    radial-gradient(1.3px 1.3px at 77% 39%,var(--star-dim),transparent 62%),
    radial-gradient(1.6px 1.6px at 33% 44%,var(--star-dim),transparent 62%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 26%,transparent 66%);
          mask-image:linear-gradient(180deg,#000 0%,#000 26%,transparent 66%);
}
a{color:inherit; text-decoration:none;}
::selection{background:var(--accent-line); color:#fff;}
:focus-visible{outline:2px solid var(--accent-2); outline-offset:3px; border-radius:6px;}
.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:24px;}
.mono{font-family:var(--mono);}
.tnum{font-variant-numeric:tabular-nums; font-feature-settings:"tnum";}
.eyebrow{font-family:var(--mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent-2); font-weight:600;}

/* Header (shared) */
header{position:sticky; top:0; z-index:50; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  background:color-mix(in srgb,var(--bg) 72%,transparent); border-bottom:1px solid var(--border);}
.nav{display:flex; align-items:center; gap:20px; height:62px;}
.brand{display:flex; align-items:center; gap:11px; font-weight:800; letter-spacing:-.02em; font-size:1.12rem;}
.brand .owl{width:30px; height:30px; flex:0 0 auto;}
.brand small{font-family:var(--mono); font-size:.6rem; letter-spacing:.16em; color:var(--text-3); text-transform:uppercase; display:block; margin-top:-4px;}
.nav-links{display:flex; gap:4px; margin-left:12px;}
.nav-links a{padding:8px 12px; border-radius:8px; color:var(--text-2); font-size:.92rem; font-weight:500; transition:color .15s,background .15s;}
.nav-links a:hover{color:var(--text); background:var(--surface-2);}
.nav-spacer{flex:1;}
.nav-tools{display:flex; align-items:center; gap:8px;}
.seg{display:inline-flex; background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:2px; font-family:var(--mono); font-size:.74rem;}
.seg button{border:0; background:transparent; color:var(--text-2); cursor:pointer; padding:5px 9px; border-radius:6px; font:inherit; letter-spacing:.04em;}
.seg button[aria-pressed="true"]{background:var(--accent-dim); color:var(--accent-2);}
.icon-btn{width:34px; height:34px; display:grid; place-items:center; background:var(--surface); border:1px solid var(--border); border-radius:8px; color:var(--text-2); cursor:pointer; transition:color .15s,border-color .15s;}
.icon-btn:hover{color:var(--text); border-color:var(--border-2);}

/* Buttons (shared) */
.btn{display:inline-flex; align-items:center; gap:8px; justify-content:center; padding:11px 18px; border-radius:var(--r-sm);
  font-weight:650; font-size:.94rem; cursor:pointer; border:1px solid transparent; transition:transform .12s,box-shadow .2s,background .2s,border-color .2s,filter .2s;
  font-family:var(--sans); white-space:nowrap;}
.btn-primary{background:linear-gradient(180deg,var(--accent-2),var(--accent)); color:#04121e; border-color:transparent;
  box-shadow:0 10px 24px -12px var(--accent), inset 0 1px 0 rgba(255,255,255,.32);}
.btn-primary:hover{transform:translateY(-1px); filter:brightness(1.05); box-shadow:0 16px 34px -14px var(--accent), inset 0 1px 0 rgba(255,255,255,.4);}
.btn-primary:active{transform:translateY(0); filter:brightness(.98);}
.btn-ghost{background:transparent; color:var(--accent); border-color:var(--accent-line);}
.btn-ghost:hover{background:var(--accent-dim); border-color:var(--accent); transform:translateY(-1px);}
.btn-ghost:active{transform:translateY(0);}
.btn-sm{padding:9px 14px; font-size:.88rem;}
.btn[disabled]{opacity:.55; cursor:not-allowed;}

/* Footer (shared) */
footer{border-top:1px solid var(--border); padding:56px 0 26px; color:var(--text-3); margin-top:auto;}
.foot{display:grid; grid-template-columns:1.3fr 2.4fr; gap:44px 40px; align-items:start;}
.foot-lead{max-width:340px;}
.foot-lead .brand{margin-bottom:14px;}
.foot-lead .owl{width:34px; height:34px;}
.foot-tag{font-size:.88rem; line-height:1.62; color:var(--text-2); margin:0 0 18px;}
.foot-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:26px 22px;}
.foot-col{display:flex; flex-direction:column; align-items:flex-start; gap:11px; min-width:0;}
.foot-col h4{margin:0 0 3px; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); font-weight:700;}
.foot-col a{color:var(--text-2); font-size:.9rem; text-decoration:none; transition:color .15s;}
.foot-col a:hover{color:var(--accent-2);}
.foot-base{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  margin-top:40px; padding-top:22px; border-top:1px solid var(--border);}
.foot-base .mono{font-size:.74rem; letter-spacing:.04em; color:var(--text-3);}
@media(max-width:820px){
  .foot{grid-template-columns:1fr; gap:36px;}
  .foot-lead{max-width:none;}
  .foot-grid{grid-template-columns:repeat(2,1fr); gap:28px 20px;}
}

/* Page scaffold */
main{flex:1 0 auto; width:100%;}
.page-head{max-width:44rem; margin:0 auto; text-align:center; padding:52px 0 8px;}
.page-head h1{font-size:clamp(1.9rem,3.6vw,2.7rem); letter-spacing:-.03em; line-height:1.08; font-weight:820; margin:14px 0 0; text-wrap:balance;}
.page-head p{color:var(--text-2); font-size:1.06rem; margin:14px auto 0; max-width:40rem; text-wrap:pretty;}

/* status dots */
.sdot{width:9px; height:9px; border-radius:50%; display:inline-block; flex:0 0 auto;}
.sdot.ok{background:var(--ok); box-shadow:0 0 0 3px var(--ok-dim);}
.sdot.warn{background:var(--warn); box-shadow:0 0 0 3px var(--warn-dim);}
.sdot.crit{background:var(--crit); box-shadow:0 0 0 3px var(--crit-dim);}
.pulse{width:8px; height:8px; border-radius:50%; background:var(--ok); position:relative; display:inline-block;}
.pulse::after{content:""; position:absolute; inset:0; border-radius:50%; background:var(--ok); animation:ping 2s cubic-bezier(0,0,.2,1) infinite;}
@keyframes ping{0%{transform:scale(1); opacity:.7} 80%,100%{transform:scale(2.6); opacity:0}}

@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} .pulse::after{animation:none;} .nav-links{transition:none;} }

/* Mobile-nav primitives (desktop = hidden; the media query flips them on) */
.nav-toggle{display:none;}
.nav-toggle .i-close{display:none;}
header.menu-open .nav-toggle .i-open{display:none;}
header.menu-open .nav-toggle .i-close{display:block;}
.nav-cta-mobile{display:none;}

/* Hamburger reveals nav as a dropdown; bar CTAs move into it */
@media (max-width:760px){
  .nav-toggle{display:grid;}
  .nav-cta-bar{display:none;}
  .nav-links{
    position:absolute; top:100%; left:0; right:0; margin:0;
    display:flex; flex-direction:column; align-items:stretch; gap:4px;
    padding:12px 16px calc(14px + env(safe-area-inset-bottom));
    background:var(--panel); border-bottom:1px solid var(--border-2); box-shadow:var(--shadow);
    max-height:calc(100dvh - 62px); overflow-y:auto;
    opacity:0; transform:translateY(-8px); pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
  }
  header.menu-open .nav-links{opacity:1; transform:none; pointer-events:auto;}
  .nav-links a{padding:13px 12px; font-size:1rem; border-radius:8px;}
  .nav-cta-mobile{display:inline-flex; width:100%;}
}

@media (max-width:560px){
  .wrap{padding-inline:18px;}
  .brand small{display:none;}
  body{-webkit-tap-highlight-color:transparent;}
}