/* ── Story Shared Design System ─────────────────────────────── 
   Shared across all story.theroboburger.com pages.
   Each page also imports /styles.css for base + analytics wiring.
*/
:root {
  --s-bg: #06060b;
  --s-bg2: #0c0c14;
  --s-surface: #111119;
  --s-surface2: #18182a;
  --s-accent: #6366f1;
  --s-accent-light: #818cf8;
  --s-accent-glow: rgba(99,102,241,0.12);
  --s-ember: #f97316;
  --s-ember-glow: rgba(249,115,22,0.10);
  --s-text: #e2e8f0;
  --s-muted: #94a3b8;
  --s-dim: #64748b;
  --s-border: rgba(255,255,255,0.06);
  --s-gold: #fbbf24;
  --s-green: #34d399;
  --s-red: #f43f5e;
  --s-radius: 16px;
  --s-radius-sm: 10px;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--s-bg);
  color:var(--s-text);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before {
  content:'';
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background: 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.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  background-size:256px;
}

/* ── Nav ─────────────────────────────── */
.s-nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(6,6,11,0.8);
  backdrop-filter:blur(24px) saturate(1.4);
  -webkit-backdrop-filter:blur(24px) saturate(1.4);
  border-bottom:1px solid var(--s-border);
}
.s-nav-inner {
  max-width:1280px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  height:68px; padding:0 2rem;
}
.s-nav-logo {
  font-weight:800; font-size:1.15rem; color:var(--s-text);
  text-decoration:none; letter-spacing:-0.03em;
  display:flex; align-items:center; gap:0.6rem;
}
.s-nav-logo .ember { color:var(--s-ember); }
.s-nav-links { list-style:none; display:flex; gap:2.2rem; }
.s-nav-links a {
  color:var(--s-muted); text-decoration:none; font-size:0.875rem;
  font-weight:500; transition:color 0.25s; position:relative;
}
.s-nav-links a:hover { color:var(--s-accent-light); }
.s-nav-links a::after {
  content:''; position:absolute; bottom:-4px; left:0; right:0;
  height:2px; background:var(--s-accent); border-radius:2px;
  transform:scaleX(0); transition:transform 0.3s;
}
.s-nav-links a:hover::after { transform:scaleX(1); }
.s-nav-cta {
  background:var(--s-accent); color:#fff; padding:0.5rem 1.2rem;
  border-radius:8px; font-size:0.85rem; font-weight:600;
  text-decoration:none; transition:all 0.25s;
}
.s-nav-cta:hover { background:var(--s-accent-light); transform:translateY(-1px); }

/* ── Hero shared ─────────────────────────────── */
.s-hero-badge {
  display:inline-flex; align-items:center; gap:0.5rem;
  background:var(--s-surface); border:1px solid var(--s-border);
  border-radius:100px; padding:0.45rem 1.2rem;
  font-size:0.8rem; color:var(--s-accent-light);
  margin-bottom:2rem; letter-spacing:0.02em;
}
.s-hero-badge .dot {
  width:7px; height:7px; border-radius:50%;
  background:var(--s-green); box-shadow:0 0 8px var(--s-green);
  animation:blink 2s infinite;
}
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0.3;} }
.grad {
  background:linear-gradient(135deg, var(--s-accent-light) 0%, var(--s-ember) 50%, var(--s-gold) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* ── Section ─────────────────────────────── */
.s-section {
  max-width:1200px; margin:0 auto; padding:6rem 2rem;
  position:relative; z-index:1;
}
.s-section-tag {
  display:inline-flex; align-items:center; gap:0.4rem;
  font-size:0.75rem; text-transform:uppercase; letter-spacing:0.12em;
  font-weight:700; color:var(--s-accent-light); margin-bottom:1rem;
}
.s-section-tag .line { width:24px; height:2px; background:var(--s-accent); border-radius:2px; }
.s-section h2 {
  font-size:clamp(2rem, 4vw, 3rem);
  font-weight:800; letter-spacing:-0.03em;
  margin-bottom:1rem; line-height:1.15;
}
.s-section .sub {
  font-size:1.1rem; color:var(--s-muted); max-width:640px;
  line-height:1.7; margin-bottom:3rem;
}

/* ── Cards ─────────────────────────────── */
.s-card-grid {
  display:grid; gap:1.5rem;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
}
.s-card {
  background:var(--s-surface); border:1px solid var(--s-border);
  border-radius:var(--s-radius); padding:2rem;
  transition:all 0.35s cubic-bezier(0.4,0,0.2,1);
  position:relative; overflow:hidden;
}
.s-card::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, var(--s-accent-glow) 0%, transparent 60%);
  opacity:0; transition:opacity 0.35s;
}
.s-card:hover {
  border-color:rgba(99,102,241,0.2); transform:translateY(-4px);
  box-shadow:0 20px 60px rgba(0,0,0,0.4);
}
.s-card:hover::before { opacity:1; }
.s-card h3 { font-size:1.15rem; font-weight:700; margin-bottom:0.6rem; position:relative; z-index:1; }
.s-card p { font-size:0.9rem; color:var(--s-muted); line-height:1.65; position:relative; z-index:1; }

/* ── Buttons ─────────────────────────────── */
.s-btn {
  display:inline-flex; align-items:center; gap:0.5rem;
  padding:0.85rem 2rem; border-radius:10px;
  font-weight:600; font-size:0.95rem;
  text-decoration:none; transition:all 0.3s;
}
.s-btn-primary {
  background:linear-gradient(135deg, var(--s-accent), var(--s-accent-light));
  color:#fff; box-shadow:0 4px 20px rgba(99,102,241,0.3);
}
.s-btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 32px rgba(99,102,241,0.4); }
.s-btn-outline { background:transparent; border:1px solid var(--s-border); color:var(--s-text); }
.s-btn-outline:hover { border-color:var(--s-accent); color:var(--s-accent-light); }
.s-btn-group { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* ── Divider ─────────────────────────────── */
.s-divider {
  max-width:1200px; margin:0 auto; height:1px;
  background:linear-gradient(90deg, transparent 0%, var(--s-border) 50%, transparent 100%);
}

/* ── Footer ─────────────────────────────── */
.s-footer {
  border-top:1px solid var(--s-border);
  padding:3rem 2rem; text-align:center;
  position:relative; z-index:1;
}
.s-footer p { font-size:0.8rem; color:var(--s-dim); }
.s-footer a { color:var(--s-muted); text-decoration:none; }
.s-footer a:hover { color:var(--s-accent-light); }

/* ── Reveal ─────────────────────────────── */
.s-reveal {
  opacity:0; transform:translateY(30px);
  transition:opacity 0.7s cubic-bezier(0.4,0,0.2,1), transform 0.7s cubic-bezier(0.4,0,0.2,1);
}
.s-reveal.visible { opacity:1; transform:translateY(0); }

/* ── Responsive ─────────────────────────────── */
@media (max-width:900px) {
  .s-nav-links { display:none; }
}
@media (max-width:640px) {
  .s-section { padding:4rem 1.5rem; }
}