/* ============================================================
   YOUTH.AL — DESIGN SYSTEM v3
   "Warm Transit" — warm black canvas, ember/amber/gold glow,
   single typeface (Space Grotesk), big confident type.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

:root {
  /* Warm black canvas */
  --black: #0D0904;
  --black-deep: #070502;
  --panel: #1A1108;
  --panel-light: #26190D;
  --line: rgba(255,255,255,0.10);
  --line-strong: rgba(255,255,255,0.18);

  /* Ink */
  --ink: #F5EFE6;
  --ink-soft: #C9B8A3;
  --ink-dim: #8A7A65;

  /* Warm accent system */
  --amber: #FFA23C;
  --amber-soft: rgba(255,162,60,0.14);
  --ember: #FF5A3D;
  --ember-soft: rgba(255,90,61,0.14);
  --gold: #FFD166;
  --gold-soft: rgba(255,209,102,0.14);

  /* dynamic per-section accent (JS updates this) */
  --accent: var(--amber);
  --accent-soft: var(--amber-soft);

  /* Single typeface, used everywhere */
  --font: 'Space Grotesk', sans-serif;

  --max-width: 1140px;
  --radius: 20px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--black);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 2;
}

/* ---------- Grain texture ---------- */
.grain {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0.045;
  pointer-events: none;
  mix-blend-mode: overlay;
}

/* ---------- Focus & a11y ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ember);
  color: #fff;
  padding: 10px 16px;
  z-index: 500;
}
.skip-link:focus { left: 12px; top: 12px; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* ---------- Loader ---------- */
.loader {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
.loader.hide { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-stamp { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.loader-stamp svg { animation: stampIn 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.loader-word { font-family: var(--font); font-size: 1.3rem; font-weight: 700; color: #fff; letter-spacing: -0.01em; opacity: 0; animation: fadeUp 0.5s ease 0.35s forwards; }
.loader-word .dot { color: var(--amber); }
@keyframes stampIn {
  0% { transform: scale(2.4) rotate(-14deg); opacity: 0; }
  60% { transform: scale(0.94) rotate(2deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Scroll progress ---------- */
.progress-bar {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--gold), var(--amber), var(--ember));
  z-index: 300;
  transition: width 0.1s linear;
  box-shadow: 0 0 12px var(--ember);
}

/* ---------- Header ---------- */
header.site {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(13, 9, 4, 0.75);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  transition: padding 0.25s ease, box-shadow 0.25s ease;
}
header.site.scrolled { box-shadow: 0 8px 32px rgba(0,0,0,0.5); }
header.site.scrolled .site-nav { padding-top: 10px; padding-bottom: 10px; }

.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  gap: 20px;
  transition: padding 0.25s ease;
}

.logo { display: flex; align-items: center; gap: 10px; font-family: var(--font); font-weight: 700; font-size: 1.25rem; color: var(--ink); text-decoration: none; letter-spacing: -0.01em; }
.logo .dot { color: var(--amber); }

.nav-links { display: flex; align-items: center; gap: 30px; list-style: none; margin: 0; padding: 0; }
.nav-links a { text-decoration: none; color: var(--ink-soft); font-weight: 500; font-size: 0.92rem; transition: color 0.15s ease; position: relative; }
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -4px;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--amber), var(--ember));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { transform: scaleX(1); }

.nav-right { display: flex; align-items: center; gap: 14px; }

.lang-toggle { display: flex; border: 1.5px solid var(--line-strong); border-radius: 999px; overflow: hidden; font-size: 0.78rem; }
.lang-toggle button { border: none; background: transparent; padding: 7px 14px; cursor: pointer; color: var(--ink-soft); font-family: inherit; font-weight: 500; }
.lang-toggle button.active { background: var(--ink); color: var(--black); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 13px 24px;
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
  cursor: pointer;
  border: none;
  font-family: var(--font);
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s ease;
}
.btn-primary {
  background: linear-gradient(100deg, var(--gold), var(--amber));
  color: #241203;
}
.btn-primary:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 10px 30px rgba(255,162,60,0.35), 0 0 44px rgba(255,90,61,0.18);
}
.btn-ghost { background: transparent; border: 1.5px solid var(--line-strong); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); }

/* ---------- Mobile menu ---------- */
.mobile-menu { display: none; position: relative; }
.mobile-menu summary { list-style: none; cursor: pointer; display: flex; align-items: center; padding: 6px; color: var(--ink); border-radius: 8px; }
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu[open] summary { background: var(--panel-light); }
.mobile-menu-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 210px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.6);
  z-index: 150;
}
.mobile-menu-panel a { text-decoration: none; color: var(--ink); padding: 10px 12px; border-radius: 8px; font-weight: 500; font-size: 0.95rem; }
.mobile-menu-panel a:hover { background: var(--panel-light); }
.mobile-menu-panel .btn { text-align: center; margin-top: 6px; }

/* ---------- Blob field (ambient warm glow) ---------- */
.blob-field { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.5; mix-blend-mode: screen; will-change: transform; }
.blob-1 { width: 560px; height: 560px; background: var(--ember); top: -180px; left: -140px; animation: driftA 22s ease-in-out infinite; }
.blob-2 { width: 440px; height: 440px; background: var(--amber); top: 40px; right: -160px; animation: driftB 18s ease-in-out infinite; }
.blob-3 { width: 400px; height: 400px; background: var(--gold); bottom: -200px; left: 30%; animation: driftC 26s ease-in-out infinite; }
.blob-cyan { width: 500px; height: 500px; background: var(--ember); top: -140px; left: 50%; transform: translateX(-50%); animation: driftA 20s ease-in-out infinite; }
@keyframes driftA { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(40px, 30px) scale(1.1); } }
@keyframes driftB { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-30px, 40px) scale(0.95); } }
@keyframes driftC { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(30px, -30px) scale(1.08); } }

/* ---------- Cursor glow ---------- */
.cursor-glow {
  position: fixed;
  top: 0; left: 0;
  width: 540px; height: 540px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,162,60,0.20) 0%, rgba(255,90,61,0.08) 45%, transparent 70%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.cursor-glow.active { opacity: 1; }
@media (hover: none), (pointer: coarse) { .cursor-glow { display: none; } }

/* ---------- Hero (big, minimal, centered) ---------- */
.hero { position: relative; padding: 140px 24px 100px; overflow: hidden; text-align: center; }
.hero-inner { max-width: var(--max-width); margin: 0 auto; position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.hero-inner > * { opacity: 0; transform: translateY(18px); animation: fadeUp 0.7s ease both; }
.hero-inner > .eyebrow { animation-delay: 0.15s; }
.hero-inner > .hero-title { animation-delay: 0.25s; }
.hero-inner > .hero-sub { animation-delay: 0.38s; }
.hero-inner > .hero-cta { animation-delay: 0.5s; }

.eyebrow {
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 26px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}
.eyebrow::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.eyebrow-light { color: var(--ink); }

h1.hero-title {
  font-family: var(--font);
  font-weight: 700;
  font-size: clamp(3.4rem, 9vw, 7.2rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin: 0 0 28px;
  max-width: 14ch;
  text-align: center;
  background: linear-gradient(100deg, #FFFFFF 0%, var(--gold) 40%, var(--amber) 70%, var(--ember) 100%);
  background-size: 220% 220%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: fadeUp 0.7s ease 0.25s both, heroGradientShift 14s ease-in-out infinite;
}
@keyframes heroGradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.hero-sub { font-size: 1.35rem; color: var(--ink-soft); max-width: 34ch; margin: 0 auto 40px; font-weight: 400; text-align: center; }

.hero-cta { font-size: 1rem; padding: 16px 32px; }

/* ---------- Hero illustration ---------- */
.hero-illustration {
  max-width: 640px;
  margin: 56px auto 0;
  opacity: 0;
  animation: fadeUp 0.9s ease 0.65s both;
}
.hero-svg { width: 100%; height: auto; overflow: visible; }
.flight-path { animation: dashMove 30s linear infinite; }
@keyframes dashMove { to { stroke-dashoffset: -400; } }
.pin-float { animation: floatY 4s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.plane-float { animation: floatPlane 5s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.compass-spin { animation: spinSlow 40s linear infinite; transform-origin: center; transform-box: fill-box; }
@keyframes floatY { 0%, 100% { transform: translate(70px,300px) translateY(0); } 50% { transform: translate(70px,300px) translateY(-10px); } }
@keyframes floatPlane { 0%, 100% { transform: translate(580px,90px) rotate(-28deg) translateY(0); } 50% { transform: translate(580px,90px) rotate(-28deg) translateY(-8px); } }
@keyframes spinSlow { from { transform: translate(520px,300px) rotate(0deg); } to { transform: translate(520px,300px) rotate(360deg); } }

.scroll-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 48px;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0;
  animation: fadeUp 0.7s ease 0.8s both;
  transition: color 0.2s ease;
}
.scroll-hint:hover { color: var(--ink); }
.scroll-hint svg { animation: bounceY 1.8s ease-in-out infinite; }
@keyframes bounceY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* ---------- What we offer ---------- */
.offer { position: relative; z-index: 2; padding: 96px 24px 100px; text-align: center; }
.offer .eyebrow { justify-content: center; }
.offer .eyebrow::before { display: none; }
.offer-sub { color: var(--ink-soft); font-size: 1.1rem; max-width: 46ch; margin: 18px auto 0; }
.offer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 52px; text-align: left; }
.offer-card {
  padding: 40px 32px;
  border-radius: 20px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line);
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.offer-card:hover { transform: translateY(-6px); border-color: var(--line-strong); }
.offer-icon { width: 48px; height: 48px; margin-bottom: 24px; }
.offer-card[data-cat="volunteering"] .offer-icon { color: var(--gold); }
.offer-card[data-cat="volunteering"]:hover { box-shadow: 0 20px 50px rgba(255,209,102,0.12); }
.offer-card[data-cat="erasmus"] .offer-icon { color: var(--ember); }
.offer-card[data-cat="erasmus"]:hover { box-shadow: 0 20px 50px rgba(255,90,61,0.12); }
.offer-card[data-cat="ngo"] .offer-icon { color: var(--amber); }
.offer-card[data-cat="ngo"]:hover { box-shadow: 0 20px 50px rgba(255,162,60,0.12); }
.offer-card h3 { font-family: var(--font); font-weight: 700; font-size: 1.3rem; color: var(--ink); margin: 0 0 12px; }
.offer-card p { color: var(--ink-soft); font-size: 1rem; margin: 0; line-height: 1.55; }
.offer-grid .offer-card:nth-child(2) { transition-delay: 0.1s; }
.offer-grid .offer-card:nth-child(3) { transition-delay: 0.2s; }

.section-title {
  font-family: var(--font);
  font-weight: 700;
  font-size: 2.3rem;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0;
  position: relative;
  display: inline-block;
}
.section-title::after {
  content: '';
  position: absolute;
  left: 0; bottom: -10px;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--amber), var(--ember));
  transition: width 0.6s cubic-bezier(0.16,1,0.3,1) 0.15s;
}
.section-title.revealed::after { width: 56px; }

/* ---------- Scroll reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); }
[data-reveal].revealed { opacity: 1; transform: translateY(0); }

/* ---------- Listings ---------- */
.listings { position: relative; z-index: 2; padding: 20px 24px 100px; }
.listings-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 26px; flex-wrap: wrap; gap: 12px; }
.count-label { font-size: 0.9rem; color: var(--ink-soft); }

.filter-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 36px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--line-strong);
  background: rgba(255,255,255,0.03);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.2s ease;
}
.chip .swatch { width: 9px; height: 9px; border-radius: 50%; }
.chip[data-cat="all"] .swatch { background: linear-gradient(135deg, var(--gold), var(--amber), var(--ember)); }
.chip[data-cat="volunteering"] .swatch { background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.chip[data-cat="erasmus"] .swatch { background: var(--ember); box-shadow: 0 0 8px var(--ember); }
.chip[data-cat="ngo"] .swatch { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.chip:hover { border-color: var(--ink-soft); transform: translateY(-1px); }
.chip:active { transform: scale(0.95); }
.chip.active { background: var(--ink); border-color: var(--ink); color: var(--black); }
.chip.active .swatch { background: var(--black); box-shadow: none; }

.search-field {
  display: flex;
  align-items: stretch;
  width: 220px;
  background: rgba(255,255,255,0.04);
  border: 1.5px solid var(--line-strong);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, width 0.2s ease;
}
.search-field:focus-within { border-color: var(--amber); box-shadow: 0 0 0 4px var(--amber-soft); width: 280px; }
.search-field input { flex: 1; border: none; padding: 12px 16px; font-family: var(--font); font-size: 0.95rem; background: transparent; color: var(--ink); min-width: 0; }
.search-field input::placeholder { color: var(--ink-dim); }
.search-field input:focus { outline: none; }
.search-field .search-icon { display: flex; align-items: center; padding: 0 14px; color: var(--ink-soft); }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; transition: opacity 0.25s ease; }
.grid.swapping { opacity: 0.35; }

/* Ticket card */
.ticket {
  background: rgba(255,255,255,0.035);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(14px);
  transition: opacity 0.55s cubic-bezier(0.16,1,0.3,1), transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
  transform-style: preserve-3d;
  will-change: transform;
  position: relative;
  opacity: 0;
  transform: translateY(24px) scale(0.98);
}
.ticket.revealed { opacity: 1; transform: translateY(0) scale(1); }
.ticket::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,0.16) 38%, transparent 55%);
  background-size: 250% 250%;
  background-position: var(--shine-x, 0%) var(--shine-y, 0%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 2;
}
.ticket:hover::before { opacity: 1; }
.ticket[data-cat="volunteering"]:hover { border-color: var(--gold); box-shadow: 0 20px 50px rgba(255,209,102,0.15); }
.ticket[data-cat="erasmus"]:hover { border-color: var(--ember); box-shadow: 0 20px 50px rgba(255,90,61,0.15); }
.ticket[data-cat="ngo"]:hover { border-color: var(--amber); box-shadow: 0 20px 50px rgba(255,162,60,0.15); }

.ticket-top { padding: 24px 24px 18px; display: flex; gap: 16px; align-items: flex-start; }
.stamp { flex-shrink: 0; width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; border: 1.5px solid; transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1); }
.ticket[data-cat="volunteering"] .stamp { border-color: var(--gold); color: var(--gold); background: var(--gold-soft); }
.ticket[data-cat="erasmus"] .stamp { border-color: var(--ember); color: var(--ember); background: var(--ember-soft); }
.ticket[data-cat="ngo"] .stamp { border-color: var(--amber); color: var(--amber); background: var(--amber-soft); }
.ticket:hover .stamp { transform: rotate(-8deg) scale(1.08); }

.ticket-title { font-family: var(--font); font-weight: 700; font-size: 1.15rem; color: var(--ink); margin: 0 0 4px; line-height: 1.35; }
.ticket-org { font-size: 0.9rem; color: var(--ink-soft); margin: 0; }
.ticket-desc { padding: 0 24px 20px; font-size: 0.95rem; color: var(--ink-soft); flex: 1; }

.tear-line { border-top: 2px dashed var(--line-strong); position: relative; }
.tear-line::before, .tear-line::after { content: ''; position: absolute; top: -8px; width: 16px; height: 16px; background: var(--black); border-radius: 50%; }
.tear-line::before { left: -8px; }
.tear-line::after { right: -8px; }

.ticket-meta { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; font-size: 0.85rem; color: var(--ink-soft); }
.ticket-meta .loc { display: flex; align-items: center; gap: 6px; }
.ticket-meta .deadline { font-weight: 700; color: var(--ink); }

.ticket-cta { display: block; text-align: center; padding: 15px; background: var(--ink); color: var(--black); text-decoration: none; font-weight: 700; font-size: 0.92rem; letter-spacing: 0.01em; transition: background 0.15s ease, color 0.15s ease; }
.ticket[data-cat="volunteering"] .ticket-cta:hover { background: var(--gold); }
.ticket[data-cat="erasmus"] .ticket-cta:hover { background: var(--ember); color: #fff; }
.ticket[data-cat="ngo"] .ticket-cta:hover { background: var(--amber); }

.empty-state { text-align: center; padding: 70px 20px; color: var(--ink-soft); }
.empty-state h3 { font-family: var(--font); color: var(--ink); margin-bottom: 8px; }

/* ---------- CTA banner ---------- */
.cta-banner {
  position: relative;
  background: linear-gradient(135deg, var(--panel), var(--panel-light));
  border: 1px solid var(--line-strong);
  color: #fff;
  padding: 72px 44px;
  border-radius: 28px;
  margin: 0 24px 100px;
  max-width: calc(var(--max-width) - 48px);
  margin-left: auto; margin-right: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  overflow: hidden;
}
.cta-banner::before { content: ''; position: absolute; width: 360px; height: 360px; background: radial-gradient(circle, var(--ember) 0%, transparent 70%); opacity: 0.18; top: -150px; right: -110px; border-radius: 50%; }
.cta-banner h2 { font-family: var(--font); font-weight: 700; font-size: 2rem; margin: 0 0 12px; max-width: 18ch; position: relative; z-index: 2; }
.cta-banner p { margin: 0; color: var(--ink-soft); max-width: 36ch; font-size: 1.05rem; position: relative; z-index: 2; }
.cta-banner .btn-primary { position: relative; z-index: 2; }

/* ---------- Footer ---------- */
footer.site { position: relative; z-index: 2; border-top: 1px solid var(--line); padding: 56px 24px 32px; }
.footer-grid { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 32px; margin-bottom: 32px; }
.footer-brand p { color: var(--ink-soft); max-width: 34ch; font-size: 0.95rem; margin-top: 12px; }
.footer-links { display: flex; gap: 56px; flex-wrap: wrap; }
.footer-col h4 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-dim); margin: 0 0 14px; font-weight: 500; }
.footer-col a { display: block; text-decoration: none; color: var(--ink-soft); font-size: 0.95rem; margin-bottom: 10px; transition: color 0.15s ease; }
.footer-col a:hover { color: var(--ink); }
.footer-bottom { border-top: 1px solid var(--line); padding-top: 20px; font-size: 0.82rem; color: var(--ink-dim); }

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
  .nav-links { display: none; }
  .nav-cta-desktop { display: none; }
  .mobile-menu { display: block; }
  .offer-grid { grid-template-columns: 1fr; }
  .cta-banner { flex-direction: column; align-items: flex-start; text-align: left; }
  .blob { filter: blur(55px); opacity: 0.4; }
  .filter-row { flex-direction: column; align-items: stretch; }
  .search-field, .search-field:focus-within { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .loader { display: none; }
  .hero-inner > *, .hero-title { opacity: 1 !important; transform: none !important; }
  [data-reveal], .ticket, .offer-card { opacity: 1 !important; transform: none !important; }
  .cursor-glow, .blob { display: none !important; }
}