/* ============================================================================
   PACK: Dark Dramatic
   Near-black layered canvas, serif + italic accent headings, one surgical red,
   glow + motion. Best for detailing, tint, PPF, performance + premium trades.
   Scoped under body.pack-dark-dramatic so it only applies when opted in; it
   restyles the shared .x-* kit, so it drops straight into the generator later.
   ============================================================================ */
body.pack-dark-dramatic {
  --brand-bg: #0b0b0d;
  --brand-bg-alt: #131316;
  --brand-text: #ececee;
  --brand-text-muted: #9a9aa2;
  --brand-primary: #E11D1D;
  --brand-secondary: #0f0f12;
  --brand-border: #26262b;
  --radius: 12px;
  --font-heading: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  background: #0b0b0d;
  color: #ececee;
}
body.pack-dark-dramatic { font-family: var(--font-body); }

/* Header — solid (no backdrop-filter: it breaks the mobile slide-in menu). */
body.pack-dark-dramatic .site-header { background: #0a0a0c; border-bottom: 1px solid #1c1c20; }
body.pack-dark-dramatic .nav-links > li > a { letter-spacing: .04em; }

/* Hero — layered black: dual red glows + faint grid, masked to the center. */
body.pack-dark-dramatic .x-hero { background: #09090b; min-height: 94vh; }
body.pack-dark-dramatic .x-hero-art {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(900px 520px at 78% 16%, rgba(225,29,29,.18), transparent 62%),
    radial-gradient(720px 600px at 10% 96%, rgba(225,29,29,.07), transparent 60%),
    linear-gradient(180deg, #0c0c0f 0%, #08080a 100%);
}
body.pack-dark-dramatic .x-hero-art::after {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(circle at 60% 38%, #000, transparent 78%);
  mask-image: radial-gradient(circle at 60% 38%, #000, transparent 78%);
}
body.pack-dark-dramatic .x-hero .container { z-index: 2; }
body.pack-dark-dramatic .x-hero h1 {
  font-family: var(--font-heading); font-weight: 600; letter-spacing: -.01em;
  line-height: 1.04; font-size: clamp(2.7rem, 6.4vw, 5rem); max-width: 16ch;
  text-shadow: 0 2px 50px rgba(0,0,0,.55);
}
body.pack-dark-dramatic .x-hero h1 em { font-style: italic; color: #ff3b3b; font-weight: 600; }
body.pack-dark-dramatic .x-hero .x-sub { color: rgba(255,255,255,.82); }

/* Eyebrow — refined outlined pill with a pulsing dot. */
body.pack-dark-dramatic .x-eyebrow {
  background: rgba(225,29,29,.10); color: #ff6a6a; border: 1px solid rgba(225,29,29,.35);
  border-radius: 100px; font-weight: 600; letter-spacing: .14em; padding: 8px 16px 8px 13px;
}
body.pack-dark-dramatic .x-eyebrow::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: #ff3b3b; margin-right: 2px;
  box-shadow: 0 0 0 0 rgba(255,59,59,.6); animation: dd-pulse 2.2s infinite;
}
@keyframes dd-pulse { 0%{box-shadow:0 0 0 0 rgba(255,59,59,.55)} 70%{box-shadow:0 0 0 7px rgba(255,59,59,0)} 100%{box-shadow:0 0 0 0 rgba(255,59,59,0)} }

/* Buttons */
body.pack-dark-dramatic .x-btn-primary { background: #E11D1D; box-shadow: 0 14px 40px rgba(225,29,29,.32); }
body.pack-dark-dramatic .x-btn-primary:hover { background: #c81616; }
body.pack-dark-dramatic .x-btn-ghost { border-color: rgba(255,255,255,.45); }

/* Stat strip — its own near-black band, serif red numerals. */
body.pack-dark-dramatic .x-stats { background: #0e0e11; border-top: 1px solid #1d1d22; border-bottom: 1px solid #1d1d22; }
body.pack-dark-dramatic .x-stat .num { font-family: var(--font-heading); font-weight: 600; color: #ff3b3b; }
body.pack-dark-dramatic .x-stat .lbl { color: rgba(255,255,255,.55); }

/* Section headings */
body.pack-dark-dramatic .x-head h2 { font-family: var(--font-heading); font-weight: 600; color: #fff; letter-spacing: -.01em; }
body.pack-dark-dramatic .x-head .k { color: #ff5a5a; }
body.pack-dark-dramatic .x-head p { color: var(--brand-text-muted); }

/* Service tiles — dark cards, red top-edge sweep + lift on hover. */
body.pack-dark-dramatic .x-svc { border-radius: 14px; border: 1px solid #232328; box-shadow: 0 20px 54px rgba(0,0,0,.5); transition: transform .35s ease, box-shadow .35s ease; }
body.pack-dark-dramatic .x-svc::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: #E11D1D; transform: scaleX(0); transform-origin: left; transition: transform .4s cubic-bezier(.16,.7,.3,1); z-index: 3; }
body.pack-dark-dramatic .x-svc:hover { transform: translateY(-6px); box-shadow: 0 30px 70px rgba(0,0,0,.6); }
body.pack-dark-dramatic .x-svc:hover::before { transform: scaleX(1); }
body.pack-dark-dramatic .x-svc h3 { font-family: var(--font-heading); font-weight: 600; }
body.pack-dark-dramatic .x-svc .x-arrow span { color: #ff5a5a; }

/* Signature statement — big serif line over a layered band, oversized quote mark. */
body.pack-dark-dramatic .x-statement { position: relative; background: linear-gradient(180deg, #0d0d10, #090909); border-top: 1px solid #1c1c20; border-bottom: 1px solid #1c1c20; overflow: hidden; }
body.pack-dark-dramatic .x-statement::before { content: '\201C'; position: absolute; top: -.18em; left: 50%; transform: translateX(-50%); font-family: var(--font-heading); font-size: 16rem; line-height: 1; color: rgba(225,29,29,.12); pointer-events: none; }
body.pack-dark-dramatic .x-statement p { position: relative; font-family: var(--font-heading); font-weight: 400; font-size: clamp(1.6rem,3.4vw,2.6rem); line-height: 1.36; color: #eaeaeb; }
body.pack-dark-dramatic .x-statement em { color: #ff3b3b; font-style: italic; }

/* Why-us */
body.pack-dark-dramatic .x-feat .ic { background: rgba(225,29,29,.11); border: 1px solid rgba(225,29,29,.24); }
body.pack-dark-dramatic .x-feat .ic svg { color: #ff5a5a; }
body.pack-dark-dramatic .x-feat h4 { color: #fff; }

/* Process */
body.pack-dark-dramatic .x-step .n { font-family: var(--font-heading); font-weight: 600; color: rgba(225,29,29,.32); }
body.pack-dark-dramatic .x-step h4 { color: #fff; }

/* FAQ */
body.pack-dark-dramatic .x-faq details { border-bottom: 1px solid #222227; }
body.pack-dark-dramatic .x-faq summary { color: #ececee; }
body.pack-dark-dramatic .x-faq summary::after { color: #ff3b3b; }

/* Big CTA — dramatic dark band with a red glow, not a flat red slab. */
body.pack-dark-dramatic .x-bigcta { background: radial-gradient(760px 320px at 50% -10%, rgba(225,29,29,.3), transparent 62%), linear-gradient(180deg, #100f12, #0a0a0c); border-top: 1px solid #1e1e23; }
body.pack-dark-dramatic .x-bigcta h2 { font-family: var(--font-heading); font-weight: 600; }
body.pack-dark-dramatic .x-bigcta p { color: rgba(255,255,255,.8); }

/* Footer */
body.pack-dark-dramatic .site-footer { background: #0d0d10; border-top: 1px solid #1c1c20; }