/* ============================================================
   aaas.company — landing page
   Built on the AaaS design system (Basalt + Circuit).
   Dark-first. All surfaces 0.75rem radius. Liquid-ease motion.
   ============================================================ */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background: rgb(var(--basalt-deep));
  color: rgb(var(--text));
  overflow-x: hidden;
}
body.no-motion * { animation: none !important; transition: none !important; }

/* ---------- Background: gooey metaballs + grain ---------- */
.bg-stage { position: fixed; inset: 0; z-index: -3;
  background: radial-gradient(ellipse at 28% 12%, rgb(42 42 46) 0%, rgb(8 8 9) 62%); }
.bg-merge { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
.merge-blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.16; }
.mb1 { width: 560px; height: 560px; background: rgb(var(--circuit-glow)); top: -12%; left: -8%; animation: drift 26s ease-in-out infinite; }
.mb2 { width: 440px; height: 440px; background: rgb(var(--accent-red)); bottom: -14%; right: -6%; animation: drift 30s ease-in-out infinite reverse; }
.mb3 { width: 380px; height: 380px; background: rgb(var(--accent-teal)); top: 44%; right: 32%; animation: drift 34s ease-in-out infinite; }
@keyframes drift {
  0%,100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(14vw, -9vh) scale(1.12); }
  66% { transform: translate(-9vw, 13vh) scale(0.9); }
}
.bg-grain { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PScwIDAgMjU2IDI1NicgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC44NScgbnVtT2N0YXZlcz0nMycgc3RpdGNoVGlsZXM9J3N0aXRjaCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCNuKScvPjwvc3ZnPg==");
  opacity: var(--grain-opacity); mix-blend-mode: overlay; }

/* ---------- Shared layout ---------- */
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
section { position: relative; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-jetbrains); font-weight: 500;
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.2rem;
  color: rgb(var(--circuit-glow));
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: rgb(var(--circuit-glow));
  box-shadow: 0 0 8px rgb(var(--circuit-glow) / 0.5); }
.eyebrow.is-red { color: rgb(var(--accent-red)); }
.eyebrow.is-red::before { background: rgb(var(--accent-red)); box-shadow: 0 0 8px rgb(var(--accent-red) / 0.5); }

.sec-head { display: flex; flex-direction: column; gap: 16px; margin-bottom: 44px; max-width: 720px; }
.sec-title { margin: 0; }
.sec-sub { margin: 0; color: var(--text-muted); font-size: 1.05rem; line-height: 1.6; max-width: 560px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-inter); font-weight: 700; text-transform: uppercase;
  letter-spacing: -0.02em; font-size: 0.82rem;
  padding: 0.85rem 1.4rem; border-radius: 0.6rem; border: 1px solid transparent;
  cursor: pointer; text-decoration: none; line-height: 1; white-space: nowrap;
  transition: all 0.45s var(--liquid-ease);
}
/* on solid cyan use BLACK text (legibility rule) */
.btn-primary { background: rgb(var(--circuit-glow)); color: #07090b;
  box-shadow: 0 0 0 0 rgb(var(--circuit-glow) / 0.5); }
.btn-primary:hover { transform: translate(2px, -2px); box-shadow: -3px 3px 0 rgb(var(--accent-red)); }
.btn-ghost { background: rgb(var(--basalt-surface) / 0.5); color: rgb(var(--text));
  border-color: rgba(255,255,255,0.1); backdrop-filter: blur(12px); }
.btn-ghost:hover { border-color: rgb(var(--circuit-glow) / 0.4); color: rgb(var(--circuit-glow)); }
.btn-lg { font-size: 0.95rem; padding: 1.05rem 1.8rem; }
.btn svg { width: 15px; height: 15px; }

/* ---------- Glass card ---------- */
.glass {
  background: rgb(var(--basalt-surface) / 0.6);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  border-radius: var(--radius);
}
[data-theme="light"] .glass { background: rgba(255,255,255,0.5); border-color: rgba(0,0,0,0.06); }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 28px;
  padding: 14px 32px;
  background: rgb(var(--basalt-deep) / 0.72);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}
.nav-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-logo { height: 26px; width: auto; display: block; }

.brand-surface { font-family: var(--font-jetbrains); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.12rem; color: var(--text-muted); padding-left: 12px; border-left: 1px solid var(--border); }
.brand-surface b { color: rgb(var(--circuit-glow)); font-weight: 500; }
.nav-mark { display: flex; align-items: center; gap: 9px; }
.brand-pulse { width: 9px; height: 9px; border-radius: 50%; background: rgb(var(--circuit-glow));
  box-shadow: 0 0 9px rgb(var(--circuit-glow)); animation: brand-dual 3s ease-in-out infinite; }
@keyframes brand-dual {
  0%,49% { background: rgb(var(--circuit-glow)); box-shadow: 0 0 9px rgb(var(--circuit-glow)); }
  50%,100% { background: rgb(var(--accent-red)); box-shadow: 0 0 9px rgb(var(--accent-red)); }
}
.nav-name { font-family: var(--font-jetbrains); font-size: 12px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.18rem; color: rgb(var(--text)); }
.nav-name b { color: rgb(var(--accent-red)); font-weight: 500; }
.nav-links { display: flex; gap: 4px; margin-left: 14px; }
.nav-links a { font-family: var(--font-jetbrains); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-muted); text-decoration: none;
  padding: 8px 12px; border-radius: 0.5rem; transition: all 0.25s var(--liquid-ease); }
.nav-links a:hover { color: rgb(var(--text)); background: rgba(255,255,255,0.04); }
.nav-spacer { flex: 1; }
.nav-actions { display: flex; align-items: center; gap: 12px; }
.nav-signin { font-family: var(--font-jetbrains); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-muted); text-decoration: none; transition: color 0.25s; }
.nav-signin:hover { color: rgb(var(--circuit-glow)); }
@media (max-width: 920px) { .nav-links { display: none; } }
/* the actions pair keeps the row from fitting a phone: below 640px the
 * secondary "Sign in" folds and the row tightens — the primary CTA stays
 * (probe aaas.company 2026-10-26, 390x844: nav row right edge 459 vs 390). */
@media (max-width: 640px) {
  .nav { padding: 12px 16px; gap: 12px; }
  .nav-signin { display: none; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero { padding: 76px 0 56px; }
.hero-grid { display: grid; grid-template-columns: 1.04fr 0.96fr; gap: 56px; align-items: center; }
@media (max-width: 1000px) { .hero-grid { grid-template-columns: 1fr; gap: 40px; } }

.hero-h1 { margin: 22px 0 0; font-family: var(--font-inter); font-weight: 900;
  text-transform: uppercase; letter-spacing: -0.05em; line-height: 0.84;
  font-size: clamp(3.2rem, 6.4vw, 5.6rem); }
.hero-h1 .ln { display: block; }
.hero-h1 .glow { color: rgb(var(--circuit-glow)); text-shadow: 0 0 36px rgb(var(--circuit-glow) / 0.45); }
.hero-h1 .dot { color: rgb(var(--accent-red)); }
.hero-sub { margin: 26px 0 0; color: var(--text-muted); font-size: 1.15rem; line-height: 1.6; max-width: 480px; }
.hero-sub b { color: rgb(var(--text)); font-weight: 600; }
.hero-cta { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
.hero-trust { display: flex; align-items: center; gap: 16px; margin-top: 30px; flex-wrap: wrap; }
.hero-trust .lbl { font-family: var(--font-jetbrains); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--text-muted); }
.hero-trust .stat { font-family: var(--font-jetbrains); font-size: 11px; color: rgb(var(--text)); }
.hero-trust .stat b { color: rgb(var(--circuit-glow)); font-weight: 600; }
.hero-trust .divider { width: 1px; height: 18px; background: var(--border); }

/* terminal slab */
.term { border-radius: var(--radius); overflow: hidden; position: relative;
  background: rgb(var(--basalt-deep) / 0.78);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 32px 70px -28px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.06),
              0 0 0 1px rgb(var(--circuit-glow) / 0.06); }
.term::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: var(--radius);
  box-shadow: inset 0 0 70px rgb(var(--circuit-glow) / 0.05); }
.term-head { display: flex; align-items: center; gap: 10px; padding: 11px 15px;
  border-bottom: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.02); }
.term-dots { display: flex; gap: 6px; }
.term-dots i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.term-dots .r { background: rgb(var(--accent-red) / 0.6); }
.term-dots .c { background: rgb(var(--circuit-glow) / 0.4); }
.term-dots .t { background: rgb(var(--accent-teal) / 0.6); }
.term-title { font-family: var(--font-jetbrains); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.16rem; color: var(--text-muted); margin-left: 4px; }
.term-live { margin-left: auto; display: flex; align-items: center; gap: 7px;
  font-family: var(--font-jetbrains); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.1em; color: rgb(var(--circuit-glow)); }
.term-body { padding: 18px; font-family: var(--font-jetbrains); font-size: 12.5px;
  line-height: 1.7; min-height: 332px; }
.t-row { display: flex; align-items: baseline; }
.t-row > * + * { margin-left: 10px; }
.t-prompt { color: rgb(var(--circuit-glow)); }
.t-dim { color: var(--text-muted); }
.t-ok { color: rgb(var(--accent-teal)); }
.t-pfx { width: 38px; flex-shrink: 0; }
.t-pfx.ctx, .t-pfx.skl, .t-pfx.dep, .t-pfx.mem { color: rgb(var(--circuit-glow)); }
.t-pfx.agt { color: rgb(var(--accent-red)); }
.t-pfx.aud { color: rgb(var(--pastel-lavender)); }
.t-msg { color: rgba(224,224,222,0.82); }
.t-cursor { display: inline-block; width: 8px; height: 15px; background: rgb(var(--circuit-glow));
  vertical-align: -2px; animation: cursor-blink 1.05s steps(2) infinite; }
@keyframes cursor-blink { 50% { opacity: 0.25; } }
.term-input { margin-top: 6px; display: flex; align-items: center; gap: 10px; }
.term-input .typed { border-bottom: 1.5px solid rgb(var(--circuit-glow)); padding-bottom: 1px; color: rgb(var(--text)); }

/* ---------- surface ticker ---------- */
.ticker { margin-top: 56px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  overflow: hidden; padding: 16px 0; position: relative; }
.ticker::before, .ticker::after { content: ""; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none; }
.ticker::before { left: 0; background: linear-gradient(90deg, rgb(var(--basalt-deep)), transparent); }
.ticker::after { right: 0; background: linear-gradient(270deg, rgb(var(--basalt-deep)), transparent); }
.ticker-track { display: flex; gap: 40px; width: max-content; animation: ticker 38s linear infinite; }
@keyframes ticker { to { transform: translateX(-50%); } }
.ticker-item { display: flex; align-items: center; gap: 10px; font-family: var(--font-jetbrains);
  font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.ticker-item b { color: rgb(var(--text)); font-weight: 500; }
.ticker-item .d { width: 5px; height: 5px; border-radius: 50%; background: rgb(var(--circuit-glow) / 0.6); }

/* ============================================================
   CONSTELLATION
   ============================================================ */
.constellation { padding: 92px 0; }
.const-grid { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 48px; align-items: center; }
@media (max-width: 1000px) { .const-grid { grid-template-columns: 1fr; } }
.const-travel { display: flex; flex-direction: column; gap: 12px; margin-top: 30px; }
.travel-row { display: flex; align-items: center; gap: 14px; padding: 13px 16px;
  border: 1px solid var(--border); border-radius: 0.7rem; background: rgb(var(--basalt-surface) / 0.35);
  transition: all 0.35s var(--liquid-ease); }
.travel-row:hover { border-color: rgb(var(--circuit-glow) / 0.25); transform: translateX(4px); }
.travel-key { font-family: var(--font-jetbrains); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.08em; color: #07090b; background: rgb(var(--circuit-glow)); padding: 4px 9px;
  border-radius: 0.4rem; min-width: 72px; text-align: center; }
.travel-desc { color: var(--text-muted); font-size: 0.92rem; }

.orbit { position: relative; aspect-ratio: 1.18 / 1; width: 100%; }
.orbit svg.rings { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orbit-node { position: absolute; transform: translate(-50%, -50%); }
.hub {
  left: 50%; top: 50%; width: 132px; height: 132px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgb(var(--basalt-bright)); border: 1px solid rgb(var(--circuit-glow) / 0.4);
  box-shadow: 0 0 0 7px rgb(var(--circuit-glow) / 0.07), 0 0 0 16px rgb(var(--circuit-glow) / 0.03),
              0 0 50px rgb(var(--circuit-glow) / 0.18), inset 0 1px 0 rgba(255,255,255,0.08);
  z-index: 6;
}
.hub-av { width: 38px; height: 38px; border-radius: 50%; background: rgb(var(--circuit-glow) / 0.18);
  border: 1px solid rgb(var(--circuit-glow) / 0.5); color: rgb(var(--circuit-glow));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-jetbrains); font-weight: 500; font-size: 13px; }
.hub-name { font-family: var(--font-inter); font-weight: 700; font-size: 1rem; margin-top: 7px; }
.hub-tag { font-family: var(--font-jetbrains); font-size: 8.5px; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--text-muted); margin-top: 3px; }

.surf-node {
  display: flex; align-items: center; gap: 8px; padding: 7px 12px 7px 9px;
  border-radius: 9999px; font-family: var(--font-jetbrains); font-size: 11.5px;
  background: rgb(var(--basalt-surface) / 0.7); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.09); white-space: nowrap; cursor: default;
  transition: all 0.4s var(--liquid-ease); box-shadow: 0 6px 18px rgba(0,0,0,0.3);
}
.surf-node .sd { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.surf-node.on { border-color: rgb(var(--circuit-glow) / 0.45); color: rgb(var(--text)); }
.surf-node.on .sd { background: rgb(var(--circuit-glow)); box-shadow: 0 0 8px rgb(var(--circuit-glow)); }
.surf-node.off { color: var(--text-muted); opacity: 0.78; }
.surf-node.off .sd { background: rgba(224,224,222,0.4); }
.surf-node:hover { transform: scale(1.08); border-color: rgb(var(--circuit-glow) / 0.6);
  box-shadow: 0 8px 26px rgba(0,0,0,0.45), 0 0 18px rgb(var(--circuit-glow) / 0.15); z-index: 8; }
.surf-node b { font-weight: 500; }
.const-legend { display: flex; gap: 18px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }
.legend-item { display: flex; align-items: center; gap: 8px; font-family: var(--font-jetbrains);
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.legend-item .ld { width: 8px; height: 8px; border-radius: 50%; }

/* ============================================================
   CREDENTIAL (boarding pass)
   ============================================================ */
.credential { padding: 92px 0; }
.cred-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 30px; align-items: stretch; }
@media (max-width: 1000px) { .cred-grid { grid-template-columns: 1fr; } }

.pass { position: relative; border-radius: var(--radius); overflow: hidden;
  background: linear-gradient(135deg, rgb(20 20 23) 0%, rgb(12 12 14) 100%);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 36px 80px -34px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.07);
  display: grid; grid-template-columns: 1.9fr 1fr; }
.pass::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 88% 12%, rgb(var(--circuit-glow) / 0.12), transparent 42%),
              radial-gradient(circle at 8% 92%, rgb(var(--accent-red) / 0.1), transparent 40%); }
.pass-main { padding: 30px 32px; position: relative; z-index: 1; display: flex; flex-direction: column; gap: 24px; }
.pass-top { display: flex; align-items: flex-start; justify-content: space-between; }
.pass-holder { display: flex; align-items: center; gap: 16px; }
.pass-portrait { width: 64px; height: 64px; border-radius: 0.6rem; flex-shrink: 0;
  background: rgb(var(--circuit-glow) / 0.12); border: 1px solid rgb(var(--circuit-glow) / 0.4);
  color: rgb(var(--circuit-glow)); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-jetbrains); font-weight: 500; font-size: 22px; }
.pass-field-lbl { font-family: var(--font-jetbrains); font-size: 9px; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--text-muted); }
.pass-name { font-family: var(--font-inter); font-weight: 900; text-transform: uppercase;
  letter-spacing: -0.02em; font-size: 1.7rem; line-height: 1; margin-top: 6px; }
.pass-handle { font-family: var(--font-jetbrains); font-size: 11px; color: rgb(var(--circuit-glow)); margin-top: 6px; }
.pass-meta { display: flex; gap: 34px; }
.pass-meta .v { font-family: var(--font-jetbrains); font-size: 13px; color: rgb(var(--text)); margin-top: 5px; }
.pass-scopes { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.scope { font-family: var(--font-jetbrains); font-size: 10px; padding: 4px 9px;
  border: 1px solid rgba(255,255,255,0.14); border-radius: 9999px; color: rgba(224,224,222,0.75); }
.pass-verified { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-jetbrains);
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: rgb(var(--accent-teal));
  border: 1px solid rgb(var(--accent-teal) / 0.3); background: rgb(var(--accent-teal) / 0.08);
  padding: 5px 11px; border-radius: 9999px; }
.pass-verified .sd { width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--accent-teal));
  box-shadow: 0 0 7px rgb(var(--accent-teal)); }

/* stub */
.pass-stub { position: relative; z-index: 1; padding: 30px 24px;
  border-left: 1.5px dashed rgba(255,255,255,0.18);
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 18px; }
.pass-stub::before, .pass-stub::after { content: ""; position: absolute; left: -10px; width: 20px; height: 20px;
  border-radius: 50%; background: rgb(var(--basalt-deep)); }
.pass-stub::before { top: -10px; }
.pass-stub::after { bottom: -10px; }
.stub-glyph { color: rgb(var(--circuit-glow)); }
.stub-barcode { width: 100%; height: 58px;
  background: repeating-linear-gradient(90deg, rgba(224,224,222,0.75) 0 2px, transparent 2px 5px);
  opacity: 0.6; border-radius: 3px; }
.stub-cap { font-family: var(--font-jetbrains); font-size: 9px; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--text-muted); text-align: center; }

/* stamps panel */
.stamps { padding: 26px; display: flex; flex-direction: column; }
.stamps-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; }
.stamps-count { font-family: var(--font-inter); font-weight: 900; font-size: 1.5rem; }
.stamps-count b { color: rgb(var(--circuit-glow)); }
.stamps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; flex: 1; }
.stamp { aspect-ratio: 1; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.16);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--font-jetbrains); position: relative; transition: all 0.4s var(--liquid-ease); }
.stamp.on { border-color: rgb(var(--circuit-glow) / 0.5); background: rgb(var(--circuit-glow) / 0.07);
  color: rgb(var(--text)); }
.stamp.on::after { content: "✓"; position: absolute; bottom: 13px; font-size: 9px; color: rgb(var(--circuit-glow)); }
.stamp.off { border-style: dashed; color: var(--text-muted); opacity: 0.6; }
.stamp .sn { font-size: 7px; opacity: 0.6; }
.stamp .sl { font-size: 12px; font-weight: 500; margin-top: 1px; }
.stamps-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; }

/* ============================================================
   MISSION CONTROL (dashboard preview)
   ============================================================ */
.mission { padding: 92px 0; }
.browser { border-radius: var(--radius); overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 50px 120px -40px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.06);
  background: rgb(var(--basalt-deep) / 0.85); }
.br-chrome { display: flex; align-items: center; gap: 14px; padding: 11px 16px;
  background: rgb(var(--basalt-surface) / 0.6); border-bottom: 1px solid rgba(255,255,255,0.07); }
.br-dots { display: flex; gap: 7px; }
.br-dots i { width: 11px; height: 11px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.18); display: block; }
.br-url { flex: 1; max-width: 420px; margin: 0 auto; display: flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 9999px; background: rgb(var(--basalt-deep) / 0.6);
  border: 1px solid rgba(255,255,255,0.07); font-family: var(--font-jetbrains); font-size: 11px;
  color: var(--text-muted); }
.br-url b { color: rgb(var(--text)); font-weight: 500; }
.br-url svg { width: 11px; height: 11px; color: rgb(var(--accent-teal)); }

.dash { display: grid; grid-template-columns: 210px 1fr; min-height: 540px; }
@media (max-width: 760px) { .dash { grid-template-columns: 1fr; } .dash .d-side { display: none; } }
.d-side { border-right: 1px solid rgba(255,255,255,0.07); padding: 18px 14px;
  display: flex; flex-direction: column; gap: 5px; background: rgb(var(--basalt-surface) / 0.3); }
.d-brand { display: flex; align-items: center; gap: 9px; padding: 4px 10px 16px; }
.d-link { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 0.55rem;
  font-family: var(--font-inter); font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.04em;
  font-weight: 500; color: var(--text-muted); cursor: pointer; transition: all 0.25s var(--liquid-ease); }
.d-link svg { width: 14px; height: 14px; }
.d-link:hover { color: rgb(var(--text)); background: rgba(255,255,255,0.03); }
.d-link.on { color: rgb(var(--circuit-glow)); background: rgb(var(--circuit-glow) / 0.08);
  text-shadow: 0 0 10px rgb(var(--circuit-glow) / 0.4); }
.d-side-foot { margin-top: auto; padding: 12px 10px 0; border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 9px; }

.d-main { display: flex; flex-direction: column; min-width: 0; }
.d-top { display: flex; align-items: center; gap: 18px; padding: 14px 22px;
  border-bottom: 1px solid var(--border); }
.d-search { flex: 1; max-width: 380px; display: flex; align-items: center; gap: 9px; padding: 8px 13px;
  border-radius: 0.6rem; background: rgb(var(--basalt-surface) / 0.5); border: 1px solid rgba(255,255,255,0.06);
  color: var(--text-muted); font-family: var(--font-inter); font-size: 12px; }
.d-search svg { width: 13px; height: 13px; }
.d-kbd { margin-left: auto; font-family: var(--font-jetbrains); font-size: 9px; padding: 2px 6px;
  border: 1px solid rgba(255,255,255,0.1); border-radius: 4px; color: var(--text-muted); }
.d-acct { display: flex; align-items: center; gap: 9px; padding: 4px 12px 4px 4px;
  border-radius: 9999px; border: 1px solid rgba(255,255,255,0.07); background: rgb(var(--basalt-surface) / 0.5); }
.d-acct .av { width: 26px; height: 26px; border-radius: 50%; background: rgb(var(--circuit-glow) / 0.18);
  border: 1px solid rgb(var(--circuit-glow) / 0.4); color: rgb(var(--circuit-glow));
  display: flex; align-items: center; justify-content: center; font-family: var(--font-jetbrains); font-size: 10px; }
.d-acct .nm { font-family: var(--font-inter); font-size: 11.5px; color: rgb(var(--text)); }

.d-content { padding: 22px; display: flex; flex-direction: column; gap: 18px; }
.d-h2 { font-family: var(--font-inter); font-weight: 900; text-transform: uppercase;
  letter-spacing: -0.025em; font-size: 1.7rem; line-height: 1; margin: 4px 0 3px; }
.d-h2 .dot { color: rgb(var(--accent-red)); }
.d-sub { font-family: var(--font-jetbrains); font-size: 11px; color: var(--text-muted); }
.d-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 980px) { .d-metrics { grid-template-columns: repeat(2, 1fr); } }
.d-metric { padding: 14px 15px; border-radius: 0.7rem; background: rgb(var(--basalt-surface) / 0.5);
  border: 1px solid rgba(255,255,255,0.06); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); }
.d-metric .ml { font-family: var(--font-jetbrains); font-size: 9px; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--text-muted); display: flex; justify-content: space-between; align-items: center; }
.d-metric .mv { font-family: var(--font-inter); font-weight: 900; font-size: 1.6rem; line-height: 1; margin: 9px 0 11px;
  background: linear-gradient(180deg, #fff 0%, #888 100%); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; }
.d-metric .mbar { height: 4px; border-radius: 9999px; background: rgba(255,255,255,0.05); overflow: hidden; }
.d-metric .mfill { height: 100%; border-radius: 9999px; background: rgb(var(--circuit-glow)); box-shadow: 0 0 8px rgb(var(--circuit-glow)); }
.d-delta { font-family: var(--font-jetbrains); font-size: 9px; padding: 1px 6px; border-radius: 9999px;
  border: 1px solid rgb(var(--circuit-glow) / 0.25); color: rgb(var(--circuit-glow)); background: rgb(var(--circuit-glow) / 0.06); }
.d-delta.red { border-color: rgb(var(--accent-red) / 0.25); color: rgb(var(--accent-red)); background: rgb(var(--accent-red) / 0.06); }

.d-two { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; }
@media (max-width: 980px) { .d-two { grid-template-columns: 1fr; } }
.d-panel { padding: 18px; border-radius: 0.7rem; background: rgb(var(--basalt-surface) / 0.5);
  border: 1px solid rgba(255,255,255,0.07); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); }
.d-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.d-panel-title { font-family: var(--font-inter); font-weight: 600; font-size: 1.05rem; }
.d-roster { display: flex; flex-direction: column; gap: 6px; }
.d-agent { display: grid; grid-template-columns: auto 1fr auto auto; gap: 12px; align-items: center;
  padding: 10px 12px; border-radius: 0.55rem; background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.04); transition: all 0.3s var(--liquid-ease); }
.d-agent:hover { border-color: rgb(var(--circuit-glow) / 0.2); background: rgb(var(--circuit-glow) / 0.04); }
.d-agent .sd { width: 8px; height: 8px; border-radius: 50%; }
.d-agent .sd.on { background: rgb(var(--circuit-glow)); box-shadow: 0 0 6px rgb(var(--circuit-glow)); animation: pulse 1.4s ease-in-out infinite; }
.d-agent .sd.lav { background: rgb(var(--pastel-lavender)); box-shadow: 0 0 6px rgb(var(--pastel-lavender)); }
.d-agent .sd.idle { background: rgba(224,224,222,0.35); }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
.d-agent .anm { font-family: var(--font-jetbrains); font-size: 12px; color: rgb(var(--text)); }
.d-agent .arl { font-size: 10.5px; color: var(--text-muted); margin-top: 1px; }
.d-agent .amd { font-family: var(--font-jetbrains); font-size: 9px; padding: 3px 7px; border-radius: 4px;
  background: rgb(var(--circuit-glow) / 0.06); color: rgb(var(--circuit-glow)); text-transform: uppercase; letter-spacing: 0.04em; }
.d-agent .ast { font-family: var(--font-jetbrains); font-size: 9px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-muted); width: 50px; text-align: right; }

.d-feed { background: rgb(var(--basalt-deep) / 0.6); }
.d-feed .term-body { min-height: 0; padding: 0; font-size: 11px; line-height: 1.65; }
.d-feed-term { border-radius: 0.5rem; overflow: hidden; border: 1px solid rgba(255,255,255,0.06); }
.d-feed-body { padding: 13px; font-family: var(--font-jetbrains); font-size: 10.5px; line-height: 1.65;
  display: flex; flex-direction: column; gap: 3px; }

.mission-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 30px; }
@media (max-width: 760px) { .mission-feats { grid-template-columns: 1fr; } }
.feat { padding: 22px; border-radius: 0.7rem; }
.feat .fi { width: 38px; height: 38px; border-radius: 0.55rem; display: flex; align-items: center; justify-content: center;
  background: rgb(var(--circuit-glow) / 0.1); border: 1px solid rgb(var(--circuit-glow) / 0.25); color: rgb(var(--circuit-glow)); margin-bottom: 14px; }
.feat .fi svg { width: 19px; height: 19px; }
.feat h4 { margin: 0 0 7px; font-family: var(--font-inter); font-weight: 600; font-size: 1.1rem; }
.feat p { margin: 0; color: var(--text-muted); font-size: 0.92rem; line-height: 1.55; }

/* ============================================================
   SURFACES GRID
   ============================================================ */
.surfaces { padding: 92px 0; }
.surf-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 980px) { .surf-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px) { .surf-grid { grid-template-columns: repeat(2, 1fr); } }
.surf-card { padding: 20px; border-radius: 0.7rem; background: rgb(var(--basalt-surface) / 0.45);
  border: 1px solid rgba(255,255,255,0.07); display: flex; flex-direction: column; gap: 14px;
  cursor: pointer; transition: all 0.4s var(--liquid-ease); position: relative; overflow: hidden; min-height: 150px; }
.surf-card::after { content: ""; position: absolute; inset: 0; border-radius: 0.7rem; pointer-events: none;
  opacity: 0; transition: opacity 0.4s var(--liquid-ease); box-shadow: inset 0 0 40px rgb(var(--circuit-glow) / 0.08); }
.surf-card:hover { transform: translateY(-4px); border-color: rgb(var(--circuit-glow) / 0.3); }
.surf-card:hover::after { opacity: 1; }
.surf-card.current { border-color: rgb(var(--accent-red) / 0.4); background: rgb(var(--accent-red) / 0.06); }
.surf-card-top { display: flex; align-items: center; justify-content: space-between; }
.surf-card-glyph { color: rgb(var(--circuit-glow)); }
.surf-card.current .surf-card-glyph { color: rgb(var(--accent-red)); }
.surf-card-url { font-family: var(--font-jetbrains); font-size: 10px; color: var(--text-muted); }
.surf-card-name { font-family: var(--font-inter); font-weight: 700; font-size: 1.2rem; margin-top: auto; }
.surf-card-hint { font-family: var(--font-jetbrains); font-size: 10.5px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.4; }
.surf-card .here { font-family: var(--font-jetbrains); font-size: 8.5px; text-transform: uppercase;
  letter-spacing: 0.1em; color: rgb(var(--accent-red)); border: 1px solid rgb(var(--accent-red) / 0.3);
  padding: 2px 7px; border-radius: 9999px; }

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.how { padding: 92px 0; }
.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 880px) { .how-grid { grid-template-columns: 1fr; } }
.step { padding: 28px; border-radius: 0.7rem; position: relative; }
.step-n { font-family: var(--font-inter); font-weight: 900; font-size: 3.4rem; line-height: 0.8;
  color: transparent; -webkit-text-stroke: 1.5px rgb(var(--circuit-glow) / 0.5); margin-bottom: 18px; }
.step h3 { margin: 0 0 10px; font-family: var(--font-inter); font-weight: 600; font-size: 1.3rem; }
.step p { margin: 0; color: var(--text-muted); font-size: 0.96rem; line-height: 1.6; }
.step-line { position: absolute; top: 46px; right: -10px; color: rgb(var(--circuit-glow) / 0.4); }
@media (max-width: 880px) { .step-line { display: none; } }

/* ============================================================
   FINAL CTA + FOOTER
   ============================================================ */
.final { padding: 40px 0 92px; }
.final-card { border-radius: var(--radius); overflow: hidden; position: relative;
  padding: 64px 56px; text-align: center;
  background: linear-gradient(135deg, rgb(18 18 21), rgb(10 10 12));
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 40px 90px -40px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.07); }
.final-card::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 0%, rgb(var(--circuit-glow) / 0.14), transparent 55%); }
.final-card h2 { position: relative; margin: 14px 0 0; }
.final-card .glow { color: rgb(var(--circuit-glow)); text-shadow: 0 0 30px rgb(var(--circuit-glow) / 0.4); }
.final-sub { position: relative; margin: 20px auto 0; color: var(--text-muted); font-size: 1.05rem; max-width: 440px; }
.final-cta { position: relative; display: flex; gap: 14px; justify-content: center; margin-top: 32px; flex-wrap: wrap; }
.final-fine { position: relative; margin-top: 22px; font-family: var(--font-jetbrains); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); }

.footer { border-top: 1px solid var(--border); padding: 40px 0; }
.footer-grid { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.footer-cols { display: flex; gap: 26px; flex-wrap: wrap; }
.footer-cols a { font-family: var(--font-jetbrains); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-muted); text-decoration: none; transition: color 0.25s; }
.footer-cols a:hover { color: rgb(var(--circuit-glow)); }
.footer-copy { font-family: var(--font-jetbrains); font-size: 10px; color: var(--text-muted); letter-spacing: 0.06em; }

/* ============================================================
   LIGHT THEME
   The "system chrome" slabs — terminal, dashboard preview,
   credential pass and final CTA — stay dark ON PURPOSE: they
   depict the dark-first product. Re-declaring the tokens on the
   slab re-establishes a dark context for everything inside it,
   so nested text/borders resolve correctly without duplication.
   (--circuit-glow is deliberately NOT re-pinned so the accent
   tweak keeps working inside the slabs.)
   ============================================================ */
[data-theme="light"] .term,
[data-theme="light"] .browser,
[data-theme="light"] .pass,
[data-theme="light"] .final-card {
  --basalt-deep: 8 8 9;
  --basalt-surface: 26 26 28;
  --basalt-bright: 42 42 46;
  --text: 224 224 222;
  --text-muted: rgba(224, 224, 222, 0.5);
  --border: rgba(255, 255, 255, 0.05);
  color: rgb(var(--text));
}
[data-theme="light"] .term { background: rgb(12 12 14 / 0.97); }
[data-theme="light"] .browser { background: rgb(10 10 12); }

/* hairlines that would vanish on warm-gray paper */
[data-theme="light"] .surf-card,
[data-theme="light"] .travel-row,
[data-theme="light"] .d-panel,
[data-theme="light"] .stamp { border-color: rgba(0, 0, 0, 0.1); }
[data-theme="light"] .surf-card { background: rgba(255, 255, 255, 0.5); }
[data-theme="light"] .travel-row { background: rgba(255, 255, 255, 0.4); }
[data-theme="light"] .btn-ghost { border-color: rgba(0, 0, 0, 0.12); }
[data-theme="light"] .nav-links a:hover { background: rgba(0, 0, 0, 0.05); }
[data-theme="light"] .surf-node {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .surf-node.off .sd { background: rgba(17, 17, 19, 0.35); }
[data-theme="light"] .hub { background: rgb(255 255 255 / 0.85); }
[data-theme="light"] .ticker::before { background: linear-gradient(90deg, rgb(var(--basalt-deep)), transparent); }
[data-theme="light"] .ticker::after { background: linear-gradient(270deg, rgb(var(--basalt-deep)), transparent); }
/* solid-cyan buttons keep BLACK text in both themes (legibility rule) */
[data-theme="light"] .btn-primary { color: #07090b; }

/* reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--liquid-ease), transform 0.7s var(--liquid-ease); }
.reveal.in { opacity: 1; transform: none; }
body.no-motion .reveal { opacity: 1; transform: none; }

/* ── Brand lockup · the Academy treatment ─────────────────────────────────────
   The design system's logo file (never recoloured, never redrawn) followed by
   this domain's segment alone — the mark already says AaaS, so "aaas.<segment>"
   would say it twice. Colourway swaps by class, not by filter: inverting the
   artwork is a recolour and the system forbids it. */
.ds-logo { height: 18px; width: auto; max-width: none; display: block; flex-shrink: 0; }
.ds-logo.black { display: none; }
[data-theme="light"] .ds-logo.white { display: none; }
[data-theme="light"] .ds-logo.black { display: block; }
.ds-seg { font-family: var(--font-jetbrains); font-size: 12px; letter-spacing: 0.04em;
  color: rgb(var(--circuit-glow)); font-weight: 500; text-transform: lowercase; }