/* =========================================================
   base.css — SHARED styles (sabhi sections isko use karte hain)
   - Common colour tokens
   - Reset
   - Body / typography
   - Shared .sec / .inner layout
   - Shared .eyebrow
   ========================================================= */

:root {
  /* Brand tokens — sab sections mein same */
  --orange: #f4744a;
  --orange-deep: #ef6337;
  --green: #1fc774;
  --gold: #e8c34a;

  --bg: #0c0b0d;
  --text-primary: #fdf9f6;
  --text-muted: rgba(220, 216, 228, 0.68);

  --font-body: "Quicksand", system-ui, sans-serif;
  --font-display: "Zilla Slab", Georgia, serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  font-family: var(--font-body);
  color: var(--text-primary);
  overflow-x: hidden;
}

/* ---------- Section shell ----------
   .sec       -> full-width band (background + padding yahan lagti hai)
   .inner     -> content container (max-width 1320px, centred)
------------------------------------- */
.sec {
  padding: clamp(3rem, 8vw, 6rem) clamp(1.25rem, 6vw, 6rem);
}

.inner {
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
}

/* ---------- Shared eyebrow ----------
   Default: orange. (.sec-paths ise white override karta hai) */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange);
}

.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.9;
}

/* ---------- Accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .carousel { scroll-behavior: auto !important; }
}