/* AstraOS landing page — Operator Console.
   Palette + logo are MIRRORED from the app and MUST stay in sync on any rebrand:
     colors : app/src/renderer/styles/tokens.css  (--bg #080808 · accent/bone #8a7760 · text #e3e3e3/#ababab/#7d7d7d · label #8f8f8f · accent-soft #0d0d0c)
     logo   : bone-white #e8e1d5 = app/public/icon.svg stroke
     mark   : app/public/icon.svg geometry == app/src/renderer/components/Icon.tsx "logo"
   Standalone static surface (no build step) so values are copied, not imported. */
:root{
  --ff-ui:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ff-mono:"JetBrains Mono",ui-monospace,"Cascadia Code",Menlo,Consolas,monospace;
  --bone-white:#e8e1d5;   /* the LOGO color (monochrome lockup) */
  --bone:#8a7760;         /* the ACCENT token (interactive) */
}
html,body{margin:0;background:#080808;color:#e3e3e3}
.page{background:#080808;color:#e3e3e3;overflow:hidden;font-family:var(--ff-ui)}
.wrap{max-width:880px;margin:0 auto;padding:0 28px}

/* logo lockup */
.mark{display:inline-block;color:var(--bone-white);vertical-align:baseline}
.lockup{display:inline-flex;align-items:center;gap:8px;color:var(--bone-white)}
.wordmark{font-family:var(--ff-ui);font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--bone-white)}

/* nav */
.nav{display:flex;align-items:center;justify-content:space-between;height:54px;border-bottom:1px solid #1a1a1a;padding:0 22px}
.nav .lockup .wordmark{font-size:14px}
.nav .mark{width:18px;height:18px}
.nav .meta{font:500 11px/1 var(--ff-mono);color:#7d7d7d;letter-spacing:.03em}

/* hero */
.hero{text-align:center;padding:62px 0 54px;background-image:radial-gradient(rgba(255,255,255,.045) 1px,transparent 1px);background-size:20px 20px;border-bottom:1px solid #161616}
.hero .status{display:inline-flex;align-items:center;gap:8px;font:500 11px/1 var(--ff-mono);color:#8f8f8f;letter-spacing:.04em;margin-bottom:24px;border:1px solid #262626;border-radius:999px;padding:6px 12px}
.hero .status .dot{width:7px;height:7px;border-radius:50%;background:#fff}
.hero .lockup{justify-content:center}
.hero .mark{width:.92em;height:.92em;align-self:center}
.hero .wordmark{font-size:clamp(40px,7vw,62px);font-weight:600;line-height:1.02}
.hero .tg{margin:20px auto 30px;max-width:46ch;font-size:17px;line-height:1.5;color:#ababab}
.cta-row{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:9px;padding:13px 22px;border-radius:8px;font:600 14px/1 var(--ff-ui);text-decoration:none;cursor:pointer}
.btn.primary{background:var(--bone);color:#0d0d0c}
.btn.ghost{background:transparent;border:1px solid #333;color:#ababab}
.hero .fineprint{margin-top:16px;font:500 11.5px/1 var(--ff-mono);color:#7d7d7d}

/* section */
.sec{padding:48px 0;border-bottom:1px solid #161616}
.sec h2{margin:0 0 6px;font-size:21px;font-weight:650;letter-spacing:-.01em}
.sec .sub{margin:0 0 26px;color:#8f8f8f;font-size:13.5px}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:760px){.steps{grid-template-columns:repeat(2,1fr)}}
.step{border:1px solid #262626;border-radius:10px;background:#0e0e0e;padding:16px 15px}
.step .n{font:600 12px/1 var(--ff-mono);color:var(--bone);margin-bottom:12px}
.step h3{margin:0 0 6px;font-size:14px;font-weight:600}
.step p{margin:0;font-size:12.5px;line-height:1.5;color:#9a9a9a}

/* smartscreen detail */
.ss{margin-top:22px;display:flex;gap:18px;align-items:center;border:1px solid #262626;border-radius:10px;background:#0e0e0e;padding:18px}
@media(max-width:680px){.ss{flex-direction:column;align-items:stretch}}
.ss .copy{flex:1}
.ss .copy h3{margin:0 0 6px;font-size:14px}
.ss .copy p{margin:0;font-size:12.5px;color:#9a9a9a;line-height:1.55}
.ss .copy b{color:#cdcdcd;font-weight:600}
.dlg{flex:0 0 280px;border:1px solid #2c2c2c;border-radius:8px;background:#141414;padding:14px;font-size:12px}
.dlg .t{font-weight:600;color:#e3e3e3;margin-bottom:6px}
.dlg .ln{color:#9a9a9a;line-height:1.5}
.dlg .more{color:var(--bone);text-decoration:underline;cursor:pointer}
.dlg .runrow{margin-top:12px;display:flex;justify-content:flex-end;gap:8px}
.dlg .mini{font-size:11px;padding:6px 10px;border-radius:6px}
.dlg .mini.run{background:var(--bone);color:#0d0d0c;font-weight:600}
.dlg .mini.cancel{border:1px solid #333;color:#9a9a9a}

/* invite callout */
.callout{display:flex;gap:14px;align-items:flex-start;border:1px solid #3a3024;border-radius:10px;background:#1a1713;padding:18px 20px}
.callout .mark{width:20px;height:20px;flex:0 0 auto;margin-top:1px}
.callout h3{margin:0 0 5px;font-size:14px;color:#e3d9c9}
.callout p{margin:0;font-size:13px;color:#bcae99;line-height:1.55}

/* footer */
.foot{padding:30px 0 40px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.foot .l{font:500 11.5px/1.5 var(--ff-mono);color:#6f6f6f}
.foot .lockup .wordmark{font-size:13px}
.foot .mark{width:16px;height:16px}