/* ============================================================
   DELTRON® — shared stylesheet · "flight deck"
   Cockpit-display language: B612 (the Airbus cockpit typeface),
   black glass, thin lines, square corners, colour used the way
   a PFD uses it:
     cyan    = interactive / selected
     green   = live / good / computed result
     amber   = caution / risk
     magenta = target / call-to-action highlight (sparingly)
   Tool pages still use the old token names (--line, --paper,
   --accent ...), so don't rename tokens without checking them.
   Tool-page overrides live in css/deck.css.
   ============================================================ */

:root{
  /* glass */
  --bg:#030405;
  --bg-2:#06080a;
  --surface-1:#080b0d;
  --surface-2:#0c1013;
  --surface-3:#11161a;

  /* light */
  --paper:#eef3f5;
  --ink:#030405;

  /* text */
  --text:#eef3f5;
  --text-2:#b9c4c9;
  --muted:#7d8a90;
  --text-disabled:#3f494e;

  /* lines */
  --line:#1d2529;
  --line-soft:#12181b;
  --line-strong:#2f3b41;

  /* PFD colours */
  --accent:#2fb8d4;          /* cyan (locked brand accent) */
  --accent-bright:#5fd0e6;
  --accent-faint:rgba(47,184,212,.08);
  --accent-ink:#021014;
  --good:#3ddc84;            /* green */
  --good-line:#1d4a31;
  --amber:#ffb020;
  --bad:#ff5f56;
  --magenta:#ff4fd8;

  /* type */
  --display:'B612',system-ui,sans-serif;
  --mono:'B612 Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --max:1200px;
  --gutter:32px;
  --r:2px;
}
@media(max-width:640px){:root{--gutter:16px}}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background-color:var(--bg);
  background-image:
    linear-gradient(rgba(47,184,212,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(47,184,212,.035) 1px,transparent 1px);
  background-size:48px 48px;
  background-position:-1px -1px;
  color:var(--text);
  font-family:var(--mono);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--accent);color:var(--accent-ink)}
a{color:inherit}
img,svg{display:block}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes blink{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* corner brackets — the instrument-bezel look. add .bezel to any box */
.bezel{position:relative}
.bezel::before,.bezel::after{content:"";position:absolute;width:10px;height:10px;pointer-events:none;transition:border-color .2s}
.bezel::before{top:-1px;left:-1px;border-top:1px solid var(--accent);border-left:1px solid var(--accent)}
.bezel::after{bottom:-1px;right:-1px;border-bottom:1px solid var(--accent);border-right:1px solid var(--accent)}

/* ---------- nav: top status bar ---------- */
.site-nav{
  position:sticky;top:0;z-index:50;
  background:rgba(3,4,5,.86);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.site-nav .in{max-width:var(--max);margin:0 auto;padding:12px var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.brand svg{width:20px;height:18px}
.brand .wm{font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.14em;text-transform:uppercase}
.brand .wm sup{font-size:.6em;font-weight:400;margin-left:1px;color:var(--muted);letter-spacing:0}
.nav-links{display:flex;align-items:center;gap:22px;list-style:none;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase}
.nav-links a{color:var(--muted);text-decoration:none;transition:color .15s}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--text)}
.nav-links a[aria-current="page"]{color:var(--accent)}
.nav-links .tools-link{color:var(--accent);border:1px solid var(--accent);padding:5px 12px;transition:background .15s,color .15s}
.nav-links .tools-link:hover,.nav-links .tools-link[aria-current="page"]{background:var(--accent);color:var(--accent-ink)}
.utc{font-size:11px;letter-spacing:.12em;color:var(--good);white-space:nowrap;min-width:13ch;text-align:right}
@media(max-width:900px){.utc{display:none}}
@media(max-width:720px){.nav-links li.div{display:none}}

/* ---------- buttons ---------- */
.btn{font-family:var(--mono);font-weight:700;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text);background:transparent;border:1px solid var(--line-strong);border-radius:var(--r);padding:14px 22px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:10px;transition:gap .2s,background .15s,color .15s,border-color .15s}
.btn:hover{gap:14px;border-color:var(--text)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line-strong)}
.btn-primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-bright);border-color:var(--accent-bright)}

/* ---------- labels / status ---------- */
.sec-label{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);margin-bottom:24px;display:flex;align-items:center;gap:14px}
.sec-label::after{content:"";flex:1;height:1px;background:var(--line)}
.sec-label .dim{color:var(--muted)}
.status,.more-status{font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.status.live{color:var(--good)}
.status.live::before{box-shadow:0 0 8px var(--good)}
.status.soon{color:var(--amber)}
.status.soon::before{background:transparent;border:1px solid currentColor}

/* ---------- instrument tiles (tool cards) ---------- */
.tool-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:900px){.tool-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.tool-grid{grid-template-columns:1fr}}
.tool-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);padding:20px 20px 18px;background:var(--surface-1);text-decoration:none;color:var(--text);position:relative;transition:border-color .2s,background .2s}
.tool-card::before,.tool-card::after{content:"";position:absolute;width:10px;height:10px;transition:border-color .2s}
.tool-card::before{top:-1px;left:-1px;border-top:1px solid var(--line-strong);border-left:1px solid var(--line-strong)}
.tool-card::after{bottom:-1px;right:-1px;border-bottom:1px solid var(--line-strong);border-right:1px solid var(--line-strong)}
a.tool-card:hover{border-color:var(--line-strong);background:linear-gradient(180deg,var(--accent-faint),transparent 70%),var(--surface-1)}
a.tool-card:hover::before,a.tool-card:hover::after{border-color:var(--accent)}
.tool-card.soon{opacity:.62}
.tool-card .row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:10px;padding-bottom:12px;border-bottom:1px dashed var(--line)}
.tool-card .code{font-size:11px;letter-spacing:.16em;color:var(--accent);font-weight:700}
.tool-card .code .tag{color:var(--muted);font-weight:400;margin-left:8px}
.tool-card h3,.tool-card h4{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:.01em;line-height:1.15}
.tool-card p{color:var(--muted);font-size:12.5px;margin-top:8px;flex:1}
.tool-card .go{margin-top:16px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:8px;transition:color .2s,gap .2s}
a.tool-card:hover .go{color:var(--accent);gap:12px}

.track{margin-bottom:46px}

/* ---------- waitlist + "more" on tool pages ---------- */
.more{max-width:1080px;margin:0 auto;padding:30px 28px 10px}
@media(max-width:640px){.more{padding:24px var(--gutter) 10px}}
.waitlist{max-width:1080px;margin:0 auto;padding:10px 28px 20px}
@media(max-width:640px){.waitlist{padding:10px var(--gutter) 20px}}
.waitlist .box{border:1px solid var(--magenta);border-radius:var(--r);padding:24px;background:linear-gradient(135deg,rgba(255,79,216,.07),transparent 60%),var(--surface-1);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.waitlist .k{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--magenta);margin-bottom:8px}
.waitlist h3{font-family:var(--display);font-weight:700;font-size:22px}
.waitlist p{color:var(--muted);font-size:12.5px;margin-top:6px;max-width:58ch}
.waitlist .btn{border-color:var(--magenta);color:var(--magenta)}
.waitlist .btn:hover{background:var(--magenta);color:var(--ink)}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line);margin-top:80px;background:var(--bg)}
.site-footer .in{max-width:var(--max);margin:0 auto;padding:34px var(--gutter) 48px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:28px;color:var(--muted);font-size:12px}
.site-footer a{color:var(--muted);text-decoration:none}
.site-footer a:hover{color:var(--accent)}
.fcol{display:flex;flex-direction:column;gap:7px}
.fcol .h{color:var(--text);font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:11px;margin-bottom:4px}
.fcol.lead{max-width:34ch}
.fbase{flex-basis:100%;margin-top:6px;padding-top:18px;border-top:1px dashed var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:11px;letter-spacing:.06em}

/* ---------- page shell for non-tool pages ---------- */
.page{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.page-head{padding:72px 0 44px}
.eyebrow{font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);margin-bottom:20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.eyebrow .c{color:var(--accent)}
.page-head h1{font-family:var(--display);font-weight:700;font-size:clamp(34px,6vw,60px);line-height:1.02;letter-spacing:-.01em}
.page-head .lede{color:var(--text-2);font-size:clamp(14px,1.7vw,16px);margin-top:18px;max-width:58ch}
.cursor::after{content:"_";color:var(--accent);animation:blink 1.1s steps(1) infinite;margin-left:2px}