/* ═══════════════════════════════════════════════════════════════════
   BLUNA theme — "Blueprint Intelligence" design system
   ───────────────────────────────────────────────────────────────────
   Shared primitives extracted from landing.html (the cinematic landing
   page is the source of truth for these values). The landing page keeps
   its own inline copy so its rendered output never depends on this file;
   every other page adopts the system from here. If a token changes,
   change it in BOTH places.

   Motion values follow the animation standards:
   • enter/exit → ease-out (strong custom curve, never ease-in)
   • transforms + opacity only — no layout-property animation
   • button press feedback 160ms; scroll reveals use --dur-beat (600ms,
     marketing/explanatory band); everything respects
     prefers-reduced-motion (movement removed, content stays visible).
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* palette — warm naturals */
  --cream:#F2EFE8;--forest:#2C3F32;--forest2:#22302a;--botanical:#5E8C4A;--copper:#C4883A;--charcoal:#1C1C1C;
  --ink:#243029;--soft:#6E7B71;--surface:#FFFFFF;--border:rgba(44,62,50,.12);--shadow:0 18px 50px -22px rgba(44,62,50,.45);

  /* palette — Blueprint Intelligence chrome (dark slate) */
  --slate-900:#161c22;--slate-800:#1c242c;--slate-700:#242e38;--slate-600:#2f3b46;
  --slate-line:rgba(255,255,255,.14);--slate-line-dim:rgba(255,255,255,.08);
  --powder:#9FC2D9;--gold:#D9B15C;
  --panel-shadow:0 30px 80px -30px rgba(0,0,0,.65), 0 2px 0 rgba(255,255,255,.03) inset;

  /* motion */
  --ease-cine:cubic-bezier(0.22,1,0.36,1);
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-hard-cut:steps(1,end);
  --dur-beat:600ms;--dur-breath:1200ms;--rise:24px;

  /* type */
  --font-body:'DM Sans',sans-serif;
  --font-display:'Bebas Neue',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
  /* --font-script only renders as intended if the page itself loads the
     Dancing Script webfont (Google Fonts); otherwise it falls back to the
     generic cursive stack. */
  --font-script:'Dancing Script',cursive;
}

/* ── Base ─────────────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body.theme-dark{background:var(--slate-900);color:#EDE9E0;font-family:var(--font-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.mono{font-family:var(--font-mono)}
.display{font-family:var(--font-display)}
.script{font-family:var(--font-script)}

/* ── Concrete section base — one cover-size stretch per section, never
     tiled; grain overlays at ~6% with a brightness pull ────────────── */
.concrete{
  background-color:var(--slate-900);
  background-image:
    radial-gradient(ellipse 1200px 700px at 12% -10%, rgba(159,194,217,.05), transparent 60%),
    radial-gradient(ellipse 900px 600px at 92% 108%, rgba(94,140,74,.05), transparent 60%),
    url('/media/landing/textures/concrete-dark.webp'),
    linear-gradient(168deg, var(--slate-800) 0%, var(--slate-900) 46%, #10151a 100%);
  background-size:auto, auto, cover, auto;
  background-position:center, center, center, center;
  background-repeat:no-repeat, no-repeat, no-repeat, no-repeat;
  position:relative;
  isolation:isolate;
}
.concrete::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.06;
  filter:brightness(.4);
  background-image:url('/media/landing/textures/grain-grey.webp');
  background-repeat:repeat;
  background-size:768px 768px;
}
.grain{position:absolute;inset:0;pointer-events:none;opacity:.04;filter:brightness(.4);
  background-image:url('/media/landing/textures/grain-grey.webp');
  background-repeat:repeat;
  background-size:768px 768px}

/* ── Nav ──────────────────────────────────────────────────────────── */
header.nav{position:sticky;top:0;z-index:100;background:rgba(22,28,34,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--slate-line-dim)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:26px;width:auto;filter:brightness(0) invert(1)}
.brand .wm{font-family:var(--font-body);font-weight:800;font-size:18px;letter-spacing:-.02em;color:#EAF2F6}
.nav-links{display:flex;align-items:center;gap:22px}
.nav-links a{font-size:14px;font-weight:600;color:rgba(237,233,224,.85)}
/* ── Mobile nav (≤900px): hamburger + dropdown panel. Before 2026-09-02 the
     links were simply display:none on phones with no way to open them —
     "For Vendors", "FAQ" and "Log In" were unreachable from a phone. ── */
.nav-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-8px;background:transparent;border:0;border-radius:10px;color:rgba(237,233,224,.9);cursor:pointer}
.nav-toggle svg{width:24px;height:24px}
.nav-toggle .ic-close{display:none}
header.nav.menu-open .nav-toggle .ic-open{display:none}
header.nav.menu-open .nav-toggle .ic-close{display:block}
@media(max-width:900px){
  .nav-toggle{display:inline-flex}
  .nav-in{position:relative}
  .nav-links{display:none;position:absolute;top:64px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:8px 16px 16px;background:rgba(22,28,34,.98);border-bottom:1px solid var(--slate-line-dim);box-shadow:0 18px 40px rgba(0,0,0,.45)}
  header.nav.menu-open .nav-links{display:flex}
  .nav-links a:not(.btn){display:block;padding:14px 6px;font-size:16px;border-bottom:1px solid var(--slate-line-dim)}
  .nav-links a.btn{margin-top:10px;padding:14px 20px;font-size:15px}
  .nav-links a.btn + a.btn{margin-top:8px}
}

/* ── Buttons — press feedback scale(.97) @160ms ease-out (button-press
     band 100–160ms); hover is a color change only ─────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:inherit;font-weight:700;cursor:pointer;border-radius:10px;font-size:14px;border:1px solid transparent;transition:transform 160ms var(--ease-out),background 160ms var(--ease-out),border-color 160ms var(--ease-out),color 160ms var(--ease-out)}
.btn:active{transform:scale(.97)}
.btn-pri{background:var(--botanical);color:#0f1610;padding:11px 20px}
.btn-pri:hover{background:#6f9f5a}
.btn-out{background:transparent;color:rgba(237,233,224,.85);border-color:var(--slate-line)}
.btn-out:hover{border-color:var(--powder);color:var(--powder)}
.btn-lg{padding:15px 26px;font-size:15px;border-radius:12px}

/* ── Section scaffolding ──────────────────────────────────────────── */
.act{position:relative}
.act-dark{background-color:var(--slate-900);color:#EDE9E0}
.sec-eye{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--powder);margin-bottom:14px}
h1.sec-hero,.sec-hero{font-family:var(--font-display);font-size:clamp(44px,8vw,96px);line-height:.98;letter-spacing:.01em;color:var(--cream)}
h2.sec-h,.sec-h{font-family:var(--font-display);font-size:clamp(34px,5vw,54px);line-height:1.05;color:#EAF2F6;margin-bottom:14px}
.sec-sub{font-size:16px;color:rgba(237,233,224,.6);max-width:60ch;margin-bottom:50px;line-height:1.55}

/* ── Dark panel cards (the intel-panel / proof-card family) ───────── */
.dk-panel{background:linear-gradient(165deg,var(--slate-700),var(--slate-800));border:1px solid var(--slate-line);border-radius:20px;padding:32px;box-shadow:var(--panel-shadow)}
.dk-card{background:rgba(255,255,255,.03);border:1px solid var(--slate-line-dim);border-radius:12px;padding:16px}
.dk-card .n{font-family:var(--font-display);font-size:19px;color:var(--botanical);line-height:1;margin-bottom:8px}
.dk-card h3{font-size:15px;margin-bottom:5px;color:#EAF2F6}
.dk-card p{font-size:13px;color:rgba(237,233,224,.5);line-height:1.45}

/* ── Framed-screen motif ──────────────────────────────────────────── */
.frame-mount{position:relative;border-radius:18px;padding:14px;
  background:linear-gradient(155deg,#3a4450 0%,#232b33 45%,#161b20 100%);
  box-shadow:var(--panel-shadow), 0 0 0 1px rgba(255,255,255,.05) inset}
.frame-mount::before{content:"";position:absolute;inset:6px;border-radius:12px;border:1px solid rgba(255,255,255,.08);pointer-events:none}
.frame-screen{position:relative;border-radius:10px;overflow:hidden;background:#000;box-shadow:0 0 0 1px rgba(0,0,0,.5) inset}
.frame-screen img,.frame-screen video,.frame-screen canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.frame-label{position:absolute;bottom:-26px;left:14px;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;color:rgba(159,194,217,.5);text-transform:uppercase}

/* ── Phone / dispatch-thread component (landing Act 4, lightweight) ── */
.phone{width:320px;height:640px;background:#0c0c0c;border-radius:46px;padding:13px;box-shadow:0 40px 120px -30px rgba(0,0,0,.85);position:relative;border:1px solid rgba(255,255,255,.06)}
.phone::before{content:"";position:absolute;top:20px;left:50%;transform:translateX(-50%);width:108px;height:24px;background:#0c0c0c;border-radius:20px;z-index:3}
.screen{width:100%;height:100%;background:#F4F1EA;border-radius:34px;overflow:hidden;display:flex;flex-direction:column}
.sms-top{background:#fff;padding:32px 15px 11px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border)}
.sms-av{width:36px;height:36px;border-radius:50%;background:var(--forest);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px}
.sms-name{font-weight:700;font-size:14.5px;line-height:1.1;color:var(--ink)}
.sms-status{font-size:11px;color:var(--botanical);font-weight:600}
.sms-status .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--botanical);margin-right:4px;vertical-align:middle}
.thread{flex:1;padding:15px 13px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;background:#F4F1EA;overflow:hidden}
.meta{font-size:10px;color:var(--soft);text-align:center;margin:4px 0 2px;letter-spacing:.04em;text-transform:uppercase}
/* messages rise in when the thread scrolls into view — entering →
   ease-out, 300ms, transform+opacity only, one-shot. The hidden initial
   state is gated behind html.js (added synchronously by theme.js): if JS
   never runs, messages simply render visible. */
.msg{transition:opacity .3s var(--ease-out),transform .3s var(--ease-out)}
html.js .msg{opacity:0;transform:translateY(10px)}
html.js .msg.on{opacity:1;transform:translateY(0)}
.bub{max-width:80%;padding:8px 12px;border-radius:16px;font-size:13px;line-height:1.4}
.msg.in,.bub.in{align-self:flex-start;background:#fff;color:var(--ink);border:1px solid var(--border);border-bottom-left-radius:5px}
.msg.out,.bub.out{align-self:flex-end;background:var(--forest);color:#fff;border-bottom-right-radius:5px}
.card{align-self:flex-start;max-width:84%;background:#fff;border:1px solid var(--border);border-radius:14px;padding:10px 11px;box-shadow:0 6px 18px -12px rgba(44,62,50,.4)}
.card-row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.card-t{font-weight:700;font-size:12.5px;color:var(--ink)}
.card-amt{font-family:var(--font-mono);font-weight:500;font-size:13.5px;color:var(--botanical)}
.card-sub{font-size:11px;color:var(--soft);margin-top:3px}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:20px;background:rgba(94,140,74,.14);color:var(--botanical);margin-top:6px}
@media(max-width:900px){.phone{width:290px;height:580px}}

/* ── Blueprint seam vignettes (self-drawing linework between acts) ── */
.blueprint-seam{position:relative;height:180px;overflow:hidden}
.blueprint-seam.tall{height:220px}
.blueprint-seam svg{position:absolute;inset:0;width:100%;height:100%}
.vg-line{fill:none;stroke:#fff;stroke-opacity:.2;stroke-width:.9;stroke-linecap:round;stroke-linejoin:round}
.vg-line.soft{stroke-opacity:.18}
.vg-dim{fill:none;stroke:#fff;stroke-opacity:.22;stroke-width:.6;stroke-dasharray:1.5 2.5}
.vg-arrow{fill:none;stroke:var(--powder);stroke-opacity:.4;stroke-width:.8}
.vg-label{font-family:var(--font-mono);font-size:9px;fill:rgba(255,255,255,.5);letter-spacing:.08em}
.vg-sheet{font-family:var(--font-mono);font-size:9.5px;fill:rgba(255,255,255,.5);letter-spacing:.1em}
.vg-vacant{fill:var(--powder);fill-opacity:.08;stroke:var(--powder);stroke-opacity:.35;stroke-width:.9}
.vg-draw{transition:stroke-dashoffset 1.1s var(--ease-cine)}
.vg-draw.drawn{stroke-dashoffset:0 !important}
@media(max-width:900px){.blueprint-seam{height:90px}}

/* ── Scroll reveal utility — entering → strong ease-out; 600ms sits in
     the marketing/explanatory band; transform+opacity only. Hidden state
     is gated behind html.js (no-JS guard: content renders visible if
     theme.js never executes). ─────────────────────────────────────── */
.reveal{transition:opacity var(--dur-beat) var(--ease-out),transform var(--dur-beat) var(--ease-out)}
html.js .reveal{opacity:0;transform:translateY(var(--rise))}
html.js .reveal.on{opacity:1;transform:translateY(0)}
/* stagger steps for grouped reveals (80ms — top of the 30–80ms band) */
.reveal[data-stagger="1"]{transition-delay:80ms}
.reveal[data-stagger="2"]{transition-delay:160ms}
.reveal[data-stagger="3"]{transition-delay:240ms}
.reveal[data-stagger="4"]{transition-delay:320ms}

/* ── Data strip + footer ──────────────────────────────────────────── */
.data-strip{background:#0e1216;border-top:1px solid var(--slate-line-dim);border-bottom:1px solid var(--slate-line-dim);padding:26px 0;overflow:hidden}
.data-strip-in{display:flex;align-items:center;gap:36px;flex-wrap:wrap;justify-content:center;font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;color:rgba(159,194,217,.75)}
.data-strip-in .sep{color:rgba(255,255,255,.15)}
.data-strip-in .lbl{color:rgba(237,233,224,.4)}
.data-strip-in .val{color:#EAF2F6;font-weight:600}

footer.theme-foot{background:#10151a;color:#93a3ac;padding:48px 0;border-top:1px solid var(--slate-line-dim)}
.foot-in{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.foot-brand{display:flex;align-items:center;gap:9px;color:#EAF2F6;font-family:var(--font-body);font-weight:800;letter-spacing:-.02em}
.foot-brand img{height:22px;width:auto;filter:brightness(0) invert(1)}
.foot-links{display:flex;flex-wrap:wrap;gap:14px;font-size:13px}
.foot-links a{color:var(--powder)}
.foot-meta{font-size:13px}
.foot-meta a{color:var(--powder)}

/* ── Reduced motion: movement removed, content stays visible ──────── */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal,.msg,html.js .reveal,html.js .msg{opacity:1;transform:none;transition:none}
  .vg-draw{stroke-dashoffset:0 !important;transition:none}
  .btn{transition:background 160ms var(--ease-out),border-color 160ms var(--ease-out),color 160ms var(--ease-out)}
  .btn:active{transform:none}
}