/* ═══════════════════════════════════════════════════════════
   PandaRoc — Shared Ember design tokens + base chrome
   Used by all three overhaul directions.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Ember scale (from the app) */
  --e1:#16140f; --e2:#1f1d18; --e3:#2a2823; --e4:#33312b;
  --e5:#3b3933; --e6:#474441; --e7:#55524d; --e8:#6b6863;
  --e9:#a09c98; --e10:#9f9b96; --e11:#c4bfba; --e12:#f0ece7;
  --tc8:#bf6d4d; --tc9:#d07959; --tc10:#dd8b6f; --tc11:#e7a58c; --tc12:#f3cdba;
  --green9:#7bb449; --green10:#8ec45a;
  --amber9:#e8891a; --amber10:#f0a032;
  --red9:#e5544b; --red10:#ec6a5e;

  --bg-base:var(--e1);
  --bg-card:var(--e2);
  --bg-elev:var(--e3);
  --bg-hover:var(--e4);
  --text:var(--e12);
  --text-2:var(--e11);
  --muted:var(--e9);
  --subtle:var(--e8);
  --border:var(--e4);
  --border-strong:var(--e6);
  --accent:var(--tc9);
  --accent-2:var(--tc10);
  --accent-soft:color-mix(in oklch, var(--tc9) 14%, transparent);
  --accent-faint:color-mix(in oklch, var(--tc9) 7%, transparent);
  --nav-bg:rgba(22,20,15,0.62);

  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-2xl:28px;
  --ease:cubic-bezier(0.16,1,0.3,1);
  --ease-out:cubic-bezier(0.22,1,0.36,1);
  --dur:240ms;

  --shadow-sm:0 1px 2px rgba(20,12,4,0.45),0 1px 1px rgba(20,12,4,0.30);
  --shadow-md:0 6px 18px rgba(20,12,4,0.50),0 2px 6px rgba(20,12,4,0.32);
  --shadow-lg:0 18px 44px rgba(20,12,4,0.58),0 6px 14px rgba(20,12,4,0.38);
  --shadow-xl:0 36px 90px rgba(20,12,4,0.62),0 14px 30px rgba(20,12,4,0.4);

  --maxw:1320px;
}

* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
html, body { background:var(--bg-base); color:var(--text); color-scheme:dark; }
body {
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  font-feature-settings:'cv11','ss01','ss03';
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  font-size:15px; line-height:1.55;
  overflow-x:hidden;
}
.mono { font-family:'JetBrains Mono', ui-monospace, monospace; }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
img { display:block; max-width:100%; }
::selection { background:color-mix(in oklch, var(--accent) 38%, transparent); color:#fff; }

/* ═══ Grain ═══ */
.grain-body, .grain-coarse {
  position:fixed; inset:0; z-index:1; pointer-events:none;
}
.grain-body {
  background-image:url('../assets/grain-body.svg');
  background-size:200px 200px; opacity:0.085; mix-blend-mode:soft-light;
}
.grain-coarse {
  background-image:url('../assets/grain-coarse.svg');
  background-size:480px 480px; opacity:0.04; mix-blend-mode:soft-light;
}

/* ═══ Container ═══ */
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 40px; position:relative; z-index:2; }

/* ═══ Eyebrow ═══ */
.eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  font-family:'JetBrains Mono', monospace;
  font-size:11px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--accent);
}
.eyebrow::before { content:''; width:18px; height:1px; background:currentColor; opacity:0.5; }

/* ═══ Buttons ═══ */
.btn {
  display:inline-flex; align-items:center; gap:9px;
  padding:14px 22px; border-radius:var(--r-md);
  font-size:14px; font-weight:600; border:1px solid transparent;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn svg { width:16px; height:16px; }
.btn-primary {
  color:#fff; background:linear-gradient(180deg, var(--tc10), var(--tc9));
  border-color:var(--tc8); box-shadow:var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.18);
}
.btn-primary:hover {
  background:linear-gradient(180deg, var(--tc11), var(--tc10));
  transform:translateY(-1px); box-shadow:var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.22);
}
.btn-ghost {
  color:var(--text-2); background:rgba(255,255,255,0.03); border-color:var(--border-strong);
}
.btn-ghost:hover { background:rgba(255,255,255,0.06); color:var(--text); border-color:var(--e7); }

/* ═══ Shared nav ═══ */
.nav {
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 40px;
  background:var(--nav-bg);
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  border-bottom:1px solid var(--border);
}
.nav::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, color-mix(in oklch, var(--accent) 35%, transparent) 30%, color-mix(in oklch, var(--accent) 35%, transparent) 70%, transparent);
  pointer-events:none;
}
.nav-brand { display:flex; align-items:center; gap:10px; font-weight:700; font-size:15px; letter-spacing:-0.3px; }
.nav-brand img { height:26px; width:auto; filter:drop-shadow(0 1px 3px rgba(0,0,0,0.25)); }
.nav-brand .accent { color:var(--accent); }
.nav-links { display:flex; align-items:center; gap:6px; }
.nav-link {
  padding:7px 14px; border-radius:999px; font-size:13px; font-weight:500; color:var(--muted);
  transition:color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav-link:hover { color:var(--text); background:rgba(255,255,255,0.04); }
.nav-cta {
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 16px; border-radius:var(--r-md);
  font-size:13px; font-weight:600; color:#fff;
  background:linear-gradient(180deg, var(--tc10), var(--tc9));
  border:1px solid var(--tc8);
  box-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.18);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav-cta:hover { background:linear-gradient(180deg, var(--tc11), var(--tc10)); transform:translateY(-1px); box-shadow:var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.2); }
.nav-cta svg { width:14px; height:14px; }

/* ═══ Footer ═══ */
footer { border-top:1px solid var(--border); padding:56px 0 40px; margin-top:40px; position:relative; z-index:2; }
.foot-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; margin-bottom:48px; }
.foot-brand { display:flex; align-items:center; gap:10px; font-weight:700; font-size:16px; letter-spacing:-0.3px; margin-bottom:14px; }
.foot-brand img { height:24px; }
.foot-brand .accent { color:var(--accent); }
.foot-tag { font-size:13px; color:var(--muted); max-width:280px; line-height:1.55; }
.foot-col h5 { font-family:'JetBrains Mono', monospace; font-size:11px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); margin-bottom:18px; }
.foot-col a { display:block; font-size:13.5px; color:var(--text-2); padding:5px 0; transition:color var(--dur) var(--ease); }
.foot-col a:hover { color:var(--accent); }
.foot-bottom { border-top:1px solid var(--border); padding-top:28px; display:flex; align-items:center; justify-content:space-between; font-family:'JetBrains Mono', monospace; font-size:11.5px; color:var(--subtle); letter-spacing:0.02em; }

/* ═══ Image placeholder (for screens not yet provided) ═══ */
.ph {
  position:relative; display:grid; place-items:center;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.018) 0 10px, transparent 10px 20px),
    var(--bg-elev);
  color:var(--subtle); font-family:'JetBrains Mono', monospace; font-size:11px;
  letter-spacing:0.1em; text-transform:uppercase; text-align:center; padding:24px;
  border:1px dashed var(--border-strong); border-radius:var(--r-lg);
}

/* ═══ Reduced motion ═══ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

/* ═══ Responsive nav (mobile) ═══ */
.nav-toggle { display:none; width:36px; height:36px; border-radius:var(--r-md); color:var(--muted); align-items:center; justify-content:center; }
.nav-toggle svg { width:20px; height:20px; }
@media (max-width: 720px) {
  .nav { padding:14px 20px; }
  .nav-links {
    display:none; position:fixed; top:60px; left:0; right:0;
    background:var(--nav-bg); backdrop-filter:blur(28px) saturate(180%); -webkit-backdrop-filter:blur(28px) saturate(180%);
    flex-direction:column; padding:16px 20px; border-bottom:1px solid var(--border); gap:4px;
  }
  .nav-links.open { display:flex; }
  .nav-toggle { display:flex; }
  .wrap { padding:0 20px; }
  .foot-grid { grid-template-columns:1fr 1fr; gap:32px; }
}