/* ============================================================
   aaas.boutique — Live Proposal Lab
   Builds on the canonical token sheet
   (../../../_ds/aaas-design-system-2216a8d1-f354-4115-9de4-7172d50864b1/colors_and_type.css).
   Dark-first, circuit + red leads.
   ============================================================ */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; overflow-x: hidden; }

/* density scaling — set via [data-density] on <body> */
body { --d: 1; }
body[data-density="airy"]    { --d: 1.35; }
body[data-density="balanced"]{ --d: 1; }
body[data-density="packed"]  { --d: 0.72; }

/* ---------- Background system (AaaS signature) ---------- */
.bg-stage { position: fixed; inset: 0; z-index: -3;
  background: radial-gradient(ellipse at 50% 32%, rgb(42 42 46) 0%, rgb(8 8 9) 68%); }
[data-theme="light"] .bg-stage {
  background: radial-gradient(ellipse at 50% 32%, rgb(236 236 232) 0%, rgb(220 220 215) 70%); }
.bg-grain { position: fixed; inset: 0; z-index: -2; pointer-events: none; opacity: 0.018; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.bg-sheen { position: fixed; inset: 0; z-index: 100; pointer-events: none;
  background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.015) 50%, transparent 60%); }
/* drifting aura blobs */
.bg-aura { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.bg-aura i { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.4; mix-blend-mode: screen; }
[data-theme="light"] .bg-aura i { mix-blend-mode: multiply; opacity: 0.18; }
.bg-aura .a1 { width: 520px; height: 520px; left: -120px; top: 4%;
  background: radial-gradient(circle, rgb(var(--circuit-glow) / 0.5), transparent 65%); animation: drift1 26s var(--liquid-ease) infinite alternate; }
.bg-aura .a2 { width: 460px; height: 460px; right: -100px; top: 38%;
  background: radial-gradient(circle, rgb(var(--accent-red) / 0.4), transparent 65%); animation: drift2 32s var(--liquid-ease) infinite alternate; }
.bg-aura .a3 { width: 600px; height: 600px; left: 30%; bottom: -200px;
  background: radial-gradient(circle, rgb(var(--circuit-glow) / 0.3), transparent 70%); animation: drift3 38s var(--liquid-ease) infinite alternate; }
@keyframes drift1 { to { transform: translate(120px, 80px) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-90px, 60px) scale(1.1); } }
@keyframes drift3 { to { transform: translate(60px, -90px) scale(1.2); } }

/* ---------- Layout ---------- */
.page { max-width: 1280px; margin: 0 auto; padding: 0 40px; }
@media (max-width: 760px) { .page { padding: 0 20px; } }
.section { padding: calc(72px * var(--d)) 0; }
.sec-head { margin-bottom: calc(40px * var(--d)); }

/* overline w/ rule */
.topic { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-jetbrains);
  font-size: 0.65rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.2rem;
  color: rgb(var(--accent-red)); margin-bottom: 18px; }
.topic::before { content: ""; width: 26px; height: 2px; background: rgb(var(--accent-red));
  box-shadow: 0 0 8px rgba(244,63,108,0.4); }
.topic.cy { color: rgb(var(--circuit-glow)); }
.topic.cy::before { background: rgb(var(--circuit-glow)); box-shadow: 0 0 8px rgb(var(--circuit-glow)); }

.h2 { font-family: var(--font-inter); font-weight: 900; text-transform: uppercase; letter-spacing: -0.03em;
  line-height: 0.95; font-size: clamp(2.2rem, 4.5vw, 3.6rem); margin: 0;
  background: linear-gradient(180deg, #fff 0%, rgba(224,224,222,0.5) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
[data-theme="light"] .h2 { background: linear-gradient(180deg, #111 0%, rgba(17,17,19,0.55) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.h2 .dot { color: rgb(var(--accent-red)); -webkit-text-fill-color: rgb(var(--accent-red)); }
.lead { font-size: 1.05rem; line-height: 1.65; color: var(--text-muted); max-width: 560px; }

/* ---------- Nav ---------- */
.nav-root { position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: rgb(26 26 28 / 0.7); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,0.08); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); }
[data-theme="light"] .nav-root { background: rgba(255,255,255,0.55); border-color: rgba(0,0,0,0.06); }
.nav-inner { max-width: 1280px; margin: 0 auto; height: 68px; padding: 0 40px;
  display: flex; align-items: center; justify-content: space-between; }
@media (max-width: 760px) { .nav-inner { padding: 0 20px; } }
.brand-rule { display: flex; align-items: center; gap: 11px; padding-left: 14px; border-left: 2px solid rgb(var(--circuit-glow)); text-decoration: none; }
.brand-pulse { width: 9px; height: 9px; border-radius: 50%; background: rgb(var(--circuit-glow));
  box-shadow: 0 0 8px 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 8px rgb(var(--circuit-glow)); }
  50%,100% { background: rgb(var(--accent-red)); box-shadow: 0 0 8px rgb(var(--accent-red)); } }
.brand-text { font-family: var(--font-jetbrains); font-size: 12px; text-transform: lowercase;
  letter-spacing: 0.04em; color: rgb(var(--text)); font-weight: 500; }
.brand-text b { font-weight: 600; }
.nav-links { display: flex; align-items: center; gap: 30px; }
@media (max-width: 920px) { .nav-links { display: none; } }
.nav-link { font-family: var(--font-jetbrains); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-muted); background: none; border: none; cursor: pointer; padding: 0; text-decoration: none;
  transition: color 0.3s var(--liquid-ease); }
.nav-link:hover { color: rgb(var(--circuit-glow)); text-shadow: 0 0 10px rgb(var(--circuit-glow)); }
.nav-cta { padding: 0.5rem 1.1rem; font-family: var(--font-inter); font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.03em; color: rgb(var(--basalt-deep)); background: rgb(var(--circuit-glow));
  border: none; border-radius: 0.75rem; cursor: pointer; text-decoration: none; transition: all 0.4s var(--liquid-ease); }
.nav-cta:hover { transform: translate(2px,-2px); box-shadow: -3px 3px 0 rgb(var(--accent-red)); }
.kinetic { position: absolute; bottom: 0; left: 0; right: 0; height: 1px; overflow: hidden;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent); }
.kinetic i { position: absolute; top: 0; left: 0; width: 120px; height: 100%; background: rgb(var(--circuit-glow));
  filter: blur(4px); animation: kin-sweep 5s var(--liquid-ease) infinite; }
@keyframes kin-sweep { 0% { transform: translateX(-120px); } 100% { transform: translateX(1280px); } }

/* ---------- Buttons ---------- */
.btn { font-family: var(--font-inter); font-weight: 700; text-transform: uppercase; font-size: 0.8rem;
  letter-spacing: 0.04em; border-radius: 0.75rem; cursor: pointer; text-decoration: none; display: inline-flex;
  align-items: center; justify-content: center; gap: 8px; padding: 0.8rem 1.5rem; border: none;
  transition: all 0.45s var(--liquid-ease); white-space: nowrap; }
.btn-primary { background: rgb(var(--text)); color: rgb(var(--basalt-deep)); }
.btn-primary:hover { transform: translate(4px,-4px); box-shadow: -4px 4px 0 rgb(var(--circuit-glow)); }
.btn-primary:active { box-shadow: -4px 4px 0 rgb(var(--accent-red)); }
.btn-cyan { background: rgb(var(--circuit-glow)); color: rgb(var(--basalt-deep)); }
.btn-cyan:hover { transform: translate(4px,-4px); box-shadow: -4px 4px 0 rgb(var(--accent-red)); }
.btn-outline { background: transparent; color: rgb(var(--circuit-glow)); border: 1px solid rgb(var(--circuit-glow) / 0.3); }
.btn-outline:hover { background: rgb(var(--circuit-glow) / 0.1); border-color: rgb(var(--circuit-glow) / 0.6); }
.btn-outline:active { color: rgb(var(--accent-red)); border-color: rgb(var(--accent-red) / 0.6); background: rgb(var(--accent-red) / 0.1); }
.btn-sm { padding: 0.55rem 1rem; font-size: 0.7rem; }

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

/* status dot */
.sdot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.sdot.cy { background: rgb(var(--circuit-glow)); box-shadow: 0 0 8px rgb(var(--circuit-glow)); }
.sdot.red { background: rgb(var(--accent-red)); box-shadow: 0 0 8px rgb(var(--accent-red)); }
.sdot.teal { background: rgb(var(--accent-teal)); box-shadow: 0 0 8px rgb(var(--accent-teal)); }
.sdot.gold { background: rgb(var(--pastel-gold)); }
.sdot.pulse { animation: dotpulse 2s ease-in-out infinite; }
@keyframes dotpulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

.olabel { font-family: var(--font-jetbrains); font-weight: 500; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.15rem; }
.mono { font-family: var(--font-jetbrains); }

/* fade-up on scroll */
.fade-up { opacity: 0; transform: translateY(24px); transition: opacity 0.6s var(--liquid-ease), transform 0.6s var(--liquid-ease); }
.fade-up.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; }
  .fade-up { 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; }