/* ============================================================
   HATI COMPETITION — Design System
   DA: noir/blanc très contrasté, accents cobalt/violet/or/menthe,
   typo "funny" blocky + arrondie, esthétique scrapbook/sticker gaming.
   ============================================================ */

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

:root {
  /* Core */
  --ink: #0b0b0e;
  --ink-2: #131319;
  --paper: #ffffff;
  --off: #f5f4f0;

  /* Accents (extraits de la DA) */
  --blue: #1f3fe0;
  --blue-deep: #15267e;
  --purple: #5b3fb5;
  --plum: #2a0a2c;
  --red: #e8181b;
  --gold: #f2a900;
  --mint: #bfe6cc;
  --lavender: #d3cbf2;
  --sand: #ece1d3;

  /* UI */
  --line: rgba(255,255,255,.12);
  --line-dark: rgba(11,11,14,.12);

  /* Type */
  --f-display: 'Bungee', system-ui, sans-serif;
  --f-fun: 'Luckiest Guy', system-ui, sans-serif;
  --f-tall: 'Anton', system-ui, sans-serif;
  --f-body: 'Space Grotesk', system-ui, sans-serif;

  --maxw: 1240px;
  --gut: clamp(20px, 5vw, 64px);
  --radius: 18px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--f-body);
  background: var(--ink);
  color: #fff;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--blue); color: #fff; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.section { padding-block: clamp(72px, 11vw, 150px); position: relative; }
.section--paper { background: var(--paper); color: var(--ink); }
.section--off { background: var(--off); color: var(--ink); }
.section--ink { background: var(--ink); color: #fff; }
.section--tight { padding-block: clamp(48px, 7vw, 90px); }

.eyebrow {
  font-family: var(--f-body);
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  font-size: .76rem;
  opacity: .65;
  display: inline-flex;
  align-items: center;
  gap: .7em;
}
.eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; display: inline-block; }

/* ---------- Typography ---------- */
.display {
  font-family: var(--f-display);
  line-height: .92;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.fun { font-family: var(--f-fun); letter-spacing: .01em; line-height: 1; }
.tall { font-family: var(--f-tall); text-transform: uppercase; line-height: .92; }

h1.display { font-size: clamp(2.9rem, 10vw, 8.2rem); }
h2.display { font-size: clamp(2.1rem, 6vw, 4.6rem); }
.lead { font-size: clamp(1.05rem, 2.1vw, 1.4rem); line-height: 1.5; max-width: 56ch; }
.muted { opacity: .62; }

/* ---------- Decorative devices ---------- */
/* Surligneur marqueur derrière un mot */
.mark { position: relative; display: inline-block; z-index: 0; }
.mark::before {
  content: "";
  position: absolute;
  inset: 12% -.35em 8%;
  background: var(--hl, var(--mint));
  z-index: -1;
  transform: rotate(-1.6deg);
  border-radius: 4px 10px 6px 12px;
}
.mark--mint { --hl: var(--mint); }
.mark--lav  { --hl: var(--lavender); }
.mark--sand { --hl: var(--sand); }
.mark--gold { --hl: var(--gold); }
.mark--blue { --hl: var(--blue); color: #fff; }

/* Bout de scotch */
.tape {
  position: absolute;
  width: 116px; height: 30px;
  background: rgba(236,225,211,.62);
  box-shadow: 0 1px 6px rgba(0,0,0,.12);
  backdrop-filter: blur(1px);
}
.tape::after {
  content:""; position:absolute; inset:0;
  background: repeating-linear-gradient(90deg, transparent 0 6px, rgba(255,255,255,.25) 6px 7px);
  opacity:.5;
}

/* Chips de valeurs (AMBIANCE / PLAISIR / COHÉSION) */
.chip {
  font-family: var(--f-fun);
  display: inline-block;
  padding: .5em 1.1em .42em;
  color: #fff;
  background: var(--ink);
  font-size: clamp(1.1rem, 3vw, 1.9rem);
  letter-spacing: .02em;
  box-shadow: 6px 6px 0 rgba(0,0,0,.16);
}
.chip--blue { background: var(--blue); }
.chip--ink  { background: var(--ink); }
.chip:nth-child(odd)  { transform: rotate(-2.5deg); }
.chip:nth-child(even) { transform: rotate(1.8deg); }

/* Chevrons dorés (motif coin) */
.chevrons { display: inline-flex; gap: .1em; color: var(--gold); }
.chevrons svg { width: clamp(40px, 7vw, 92px); height: auto; }

/* Cadre photo décalé */
.framed { position: relative; display: inline-block; }
.framed > img { position: relative; z-index: 1; border-radius: 6px; }
.framed::before {
  content:""; position:absolute; z-index:0;
  inset: 18px -18px -18px 18px;
  background: var(--frame, var(--blue));
  border-radius: 6px;
}
.framed--green::before { background: #2f7d4f; }
.framed--purple::before { background: var(--purple); }
.framed--gold::before { background: var(--gold); }
.framed--mint::before { background: var(--mint); }

/* Flèche dessinée */
.scribble { color: currentColor; }

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--blue);
  --fg: #fff;
  font-family: var(--f-display);
  text-transform: uppercase;
  font-size: clamp(.82rem, 1.4vw, 1rem);
  letter-spacing: .02em;
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: 1.05em 1.7em;
  background: var(--bg);
  color: var(--fg);
  border: 3px solid var(--bg);
  border-radius: 999px;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  box-shadow: 0 0 0 rgba(0,0,0,0);
  line-height: 1;
}
.btn:hover { transform: translateY(-3px) rotate(-1deg); box-shadow: 0 14px 30px rgba(31,63,224,.32); }
.btn:active { transform: translateY(0); }
.btn--ghost { background: transparent; --fg: #fff; border-color: rgba(255,255,255,.5); }
.btn--ghost:hover { background: #fff; --fg: var(--ink); border-color:#fff; box-shadow: 0 14px 30px rgba(255,255,255,.18); }
.btn--ink { --bg: var(--ink); }
.btn--gold { --bg: var(--gold); --fg: var(--ink); }
.btn--gold:hover { box-shadow: 0 14px 30px rgba(242,169,0,.4); }
.btn--red { --bg: var(--red); }
.btn--lg { padding: 1.2em 2.1em; }
.btn-arrow { transition: transform .2s ease; }
.btn:hover .btn-arrow { transform: translateX(4px); }

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px var(--gut);
  transition: background .3s ease, padding .3s ease, box-shadow .3s ease;
}
.nav.scrolled {
  background: rgba(11,11,14,.82);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 1px 0 var(--line);
  padding-block: 9px;
}
.nav__brand { display: flex; align-items: center; gap: 12px; }
.nav__brand img { height: 38px; width: auto; }
.nav__links { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); }
.nav__links a {
  font-weight: 600; font-size: .92rem; letter-spacing: .01em;
  position: relative; padding: 4px 0; opacity: .85; transition: opacity .2s;
}
.nav__links a::after {
  content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0;
  background: var(--gold); transition: width .25s ease;
}
.nav__links a:hover { opacity: 1; }
.nav__links a:hover::after { width: 100%; }
.nav__cta { margin-left: 6px; }
.nav__burger { display: none; background: none; border: 0; color:#fff; cursor: pointer; padding: 6px; }
.nav__burger svg { width: 30px; height: 30px; }

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: 110px; padding-bottom: 40px;
  overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero__bg::after {
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 20% 10%, rgba(11,11,14,.35), transparent 55%),
    linear-gradient(180deg, rgba(11,11,14,.55) 0%, rgba(11,11,14,.35) 35%, rgba(11,11,14,.92) 100%);
}
.hero__inner { position: relative; z-index: 2; }
.hero__kicker {
  display:inline-flex; align-items:center; gap:.7em;
  font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  font-size:.8rem; padding:.5em 1em; border:1px solid rgba(255,255,255,.28);
  border-radius:999px; background: rgba(255,255,255,.05); backdrop-filter: blur(6px);
  margin-bottom: 26px;
}
.hero__kicker .dot { width:9px; height:9px; border-radius:50%; background: var(--gold); box-shadow:0 0 0 4px rgba(242,169,0,.25); animation: pulse 1.8s infinite; }
.hero h1 { margin-bottom: 22px; }
.hero h1 .row2 { display:block; }
.hero__sub { font-size: clamp(1.05rem, 2vw, 1.5rem); max-width: 48ch; opacity:.9; margin-bottom: 34px; }
.hero__actions { display:flex; flex-wrap:wrap; gap: 14px; align-items:center; }
.hero__scroll {
  position:absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  font-size:.72rem; letter-spacing:.25em; text-transform:uppercase; opacity:.6;
  display:flex; flex-direction:column; align-items:center; gap:8px; z-index:2;
}
.hero__scroll span.bar { width:1px; height:34px; background: linear-gradient(#fff, transparent); }

@keyframes pulse { 0%,100%{ box-shadow:0 0 0 4px rgba(242,169,0,.25);} 50%{ box-shadow:0 0 0 9px rgba(242,169,0,0);} }

/* ---------- Marquee ---------- */
.marquee {
  --speed: 28s;
  overflow: hidden; white-space: nowrap;
  border-block: 3px solid currentColor;
  padding-block: .35em;
  background: var(--gold); color: var(--ink);
}
.marquee__track { display: inline-flex; gap: 0; animation: slide var(--speed) linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track span {
  font-family: var(--f-display); text-transform: uppercase;
  font-size: clamp(1rem, 2.6vw, 1.7rem); padding-inline: .7em;
  display:inline-flex; align-items:center; gap:.7em;
}
.marquee__track span::after { content:"✦"; font-size:.7em; opacity:.6; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- Stats ---------- */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 3vw, 40px);
}
.stat { text-align: left; }
.stat__num {
  font-family: var(--f-tall);
  font-size: clamp(2.6rem, 7vw, 5.4rem);
  line-height: .9; color: var(--blue);
  letter-spacing: -.01em;
}
.section--ink .stat__num { color: #fff; }
.stat__num .u { color: var(--gold); }
.stat__label { font-weight: 600; opacity: .7; margin-top: .4em; font-size: clamp(.84rem,1.4vw,1rem); }

/* ---------- Split / about ---------- */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(34px, 6vw, 90px); align-items: center; }
.split--rev { grid-template-columns: .95fr 1.05fr; }
.stack-sm > * + * { margin-top: 1.1em; }
.values { display:flex; flex-wrap:wrap; gap: 16px; margin-top: 30px; }

/* ---------- Cards / palmarès ---------- */
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(24px, 4vw, 44px); }
.card {
  background: var(--ink-2); color: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  display:flex; flex-direction: column;
  transition: transform .25s ease, border-color .25s ease;
}
.card:hover { transform: translateY(-6px); border-color: rgba(255,255,255,.28); }
.card__media { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.card__media img { width:100%; height:100%; object-fit: cover; transition: transform .5s ease; }
.card:hover .card__media img { transform: scale(1.05); }
.card__tag {
  position:absolute; top:14px; left:14px; z-index:2;
  font-family: var(--f-fun); background: var(--blue); color:#fff;
  padding:.3em .8em; font-size: 1rem; transform: rotate(-3deg);
}
.card__body { padding: clamp(20px, 3vw, 32px); }
.card__title { font-family: var(--f-display); text-transform:uppercase; font-size: clamp(1.4rem, 3vw, 2.1rem); line-height:1; margin-bottom:.5em; }
.card__list { list-style:none; display:grid; gap:.55em; }
.card__list li { display:flex; gap:.6em; opacity:.85; font-size:.98rem; }
.card__list li::before { content:"▹"; color: var(--gold); }

/* Galerie */
.gallery { display:grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 150px; gap: 12px; }
.gallery a { position: relative; overflow:hidden; border-radius: 10px; }
.gallery img { width:100%; height:100%; object-fit: cover; transition: transform .5s ease, filter .4s ease; filter: grayscale(.1); }
.gallery a:hover img { transform: scale(1.07); filter: none; }
.gallery .g-tall { grid-row: span 2; }
.gallery .g-wide { grid-column: span 2; }

/* ---------- Teaser CTA ---------- */
.teaser {
  position: relative; overflow: hidden;
  border-radius: clamp(20px, 4vw, 40px);
  padding: clamp(40px, 8vw, 110px) clamp(28px, 6vw, 90px);
  isolation: isolate;
}
.teaser__bg { position:absolute; inset:0; z-index:-2; }
.teaser__bg img { width:100%; height:100%; object-fit: cover; }
.teaser::after { content:""; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(120deg, rgba(11,11,14,.86), rgba(21,38,126,.55)); }

/* ============================================================
   PAGE TOURNOI — billetterie
   ============================================================ */

.t-hero { min-height: 100svh; }
.t-meta { display:flex; flex-wrap:wrap; gap: 14px 30px; margin-top: 30px; }
.t-meta__item { display:flex; align-items:center; gap:.6em; font-weight:600; }
.t-meta__item .ic { color: var(--gold); display:inline-flex; }
.t-meta__item .ic svg { width: 22px; height:22px; }

/* Countdown */
.countdown { display:flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
.cd {
  background: rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  border-radius: 14px; padding: 14px 18px; min-width: 86px; text-align:center;
  backdrop-filter: blur(6px);
}
.cd b { font-family: var(--f-tall); font-size: clamp(1.8rem, 4vw, 2.8rem); display:block; line-height:1; }
.cd span { font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; opacity:.6; }

/* Bandeau infos */
.infobar { display:grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--line-dark); border-radius: 16px; overflow:hidden; border:1px solid var(--line-dark); }
.infobar > div { background: var(--paper); padding: clamp(20px,3vw,34px); }
.infobar .k { font-family: var(--f-tall); font-size: clamp(1.5rem, 3vw, 2.3rem); color: var(--blue); line-height:1; }
.infobar .l { font-weight:600; opacity:.6; margin-top:.5em; font-size:.9rem; }

/* ---- BILLETTERIE / TICKETS ---- */
.bill-head { text-align:center; max-width: 760px; margin: 0 auto clamp(20px,4vw,40px); }
.bill-progress { max-width: 760px; margin: 0 auto clamp(40px, 6vw, 64px); }
.bill-progress__bar { height: 16px; border-radius: 999px; background: rgba(11,11,14,.1); overflow: hidden; position: relative; }
.section--ink .bill-progress__bar { background: rgba(255,255,255,.12); }
.bill-progress__fill { height:100%; width:0; border-radius:999px; background: linear-gradient(90deg, var(--blue), var(--purple)); transition: width 1.3s cubic-bezier(.2,.8,.2,1); }
.bill-progress__meta { display:flex; justify-content:space-between; margin-top:12px; font-weight:600; font-size:.92rem; }
.bill-progress__meta .em { color: var(--red); }

.tiers { display:grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.5vw, 28px); align-items: stretch; }
.tier {
  position: relative; display:flex; flex-direction:column;
  background: var(--paper); color: var(--ink);
  border: 2px solid var(--ink); border-radius: 22px;
  padding: clamp(24px, 3vw, 36px);
  transition: transform .25s ease, box-shadow .25s ease;
}
.section--ink .tier { box-shadow: 0 24px 60px rgba(0,0,0,.45); }
.tier:hover { transform: translateY(-8px); box-shadow: 12px 18px 0 var(--accent, var(--blue)); }
.tier--people { --accent: var(--red); }
.tier--normal { --accent: var(--blue); }
.tier--late   { --accent: var(--purple); }
.tier__ribbon {
  position:absolute; top:-15px; left: 24px;
  font-family: var(--f-fun); font-size:.85rem; letter-spacing:.02em;
  color:#fff; background: var(--accent); padding:.4em .9em; border-radius: 999px;
  transform: rotate(-3deg); box-shadow: 0 6px 14px rgba(0,0,0,.2);
}
.tier__name { font-family: var(--f-display); text-transform:uppercase; font-size: clamp(1.25rem,2.4vw,1.7rem); line-height:1; margin: 6px 0 4px; }
.tier__sub { font-weight:600; opacity:.6; font-size:.86rem; min-height: 2.4em; }
.tier__price { display:flex; align-items:flex-end; gap:.2em; margin: 18px 0 2px; }
.tier__price b { font-family: var(--f-tall); font-size: clamp(3rem, 7vw, 4.6rem); line-height:.85; }
.tier__price .cur { font-family: var(--f-tall); font-size: clamp(1.4rem,3vw,2rem); color: var(--accent); }
.tier__price .per { font-weight:600; opacity:.55; font-size:.8rem; margin-bottom:.6em; }
.tier__feats { list-style:none; margin: 16px 0 20px; display:grid; gap:.6em; }
.tier__feats li { display:flex; gap:.55em; font-size:.95rem; }
.tier__feats li svg { width:18px; height:18px; color: var(--accent); flex:none; margin-top:2px; }
.tier__avail { margin-top: auto; }
.tier__availbar { height:9px; border-radius:999px; background: rgba(11,11,14,.1); overflow:hidden; }
.tier__availfill { height:100%; width:0; border-radius:999px; background: var(--accent); transition: width 1.3s cubic-bezier(.2,.8,.2,1); }
.tier__availtxt { font-weight:600; font-size:.82rem; margin-top:8px; display:flex; justify-content:space-between; }
.tier__cta { margin-top: 18px; }
.tier__cta .btn { width:100%; justify-content:center; }
.tier.is-soon { opacity: .92; }
.tier.is-soon .tier__cta .btn { background: #d9d6cf; border-color:#d9d6cf; color: #6b6b6b; pointer-events:none; }
.tier__flag { position:absolute; top: 18px; right: 18px; font-weight:700; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color: var(--red); }

.bill-note { text-align:center; margin-top: clamp(28px,4vw,44px); font-weight:600; }
.festimos { display:inline-flex; align-items:center; gap:.5em; padding:.5em 1em; border-radius:999px; background: rgba(242,169,0,.16); color: var(--gold); border:1px solid rgba(242,169,0,.4); }
.section--paper .festimos { color: #b07b00; }

/* Prize */
.prize { display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(30px,6vw,80px); align-items:center; }
.prize__amount { font-family: var(--f-tall); font-size: clamp(4rem, 14vw, 11rem); line-height:.8; color:#fff; }
.prize__amount .cur { color: var(--gold); }
.podium { display:flex; gap:14px; align-items:flex-end; margin-top: 28px; }
.podium div { flex:1; border-radius: 12px 12px 0 0; text-align:center; padding: 12px 6px; font-family: var(--f-display); font-size:.9rem; color: var(--ink); }
.podium .p1 { height: 130px; background: var(--gold); }
.podium .p2 { height: 100px; background: #d8d8d8; }
.podium .p3 { height: 80px; background: #cd9a5b; }

/* Venue */
.venue__addr { display:grid; gap: 10px; margin-top: 22px; }
.venue__addr div { display:flex; gap:.6em; align-items:flex-start; }
.venue__addr svg { width:20px; height:20px; color: var(--blue); flex:none; margin-top:3px; }

/* Charity */
.charity {
  display:grid; grid-template-columns: auto 1fr; gap: clamp(20px,4vw,46px); align-items:center;
  background: linear-gradient(135deg, #2f7d4f, #1f5c39);
  border-radius: clamp(18px,4vw,32px); padding: clamp(28px,5vw,60px); color:#fff;
}
.charity__badge { font-family: var(--f-tall); font-size: clamp(2.4rem,6vw,4rem); background: rgba(255,255,255,.15); border:2px solid rgba(255,255,255,.35); border-radius: 20px; padding:.3em .5em; line-height:1; text-align:center; }

/* FAQ */
.faq { max-width: 820px; margin-inline:auto; }
.faq details { border-bottom: 1px solid var(--line-dark); padding: 8px 0; }
.section--ink .faq details { border-color: var(--line); }
.faq summary { cursor:pointer; list-style:none; padding: 18px 0; font-weight:700; font-size: clamp(1.05rem,2vw,1.3rem); display:flex; justify-content:space-between; gap:1em; align-items:center; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary .plus { font-family: var(--f-display); transition: transform .25s; flex:none; color: var(--blue); }
.faq details[open] summary .plus { transform: rotate(45deg); }
.faq p { padding: 0 0 18px; opacity:.78; max-width: 64ch; }

/* ---------- Footer ---------- */
.footer { background: var(--ink); color:#fff; padding-block: clamp(56px, 8vw, 96px); border-top:1px solid var(--line); }
.footer__top { display:grid; grid-template-columns: 1.2fr 1fr; gap: clamp(30px,6vw,80px); align-items:start; }
.footer__brand img { height: 64px; margin-bottom: 18px; }
.footer__contact { display:grid; gap: 14px; }
.footer__contact a, .footer__contact div { display:flex; align-items:center; gap:.7em; font-weight:600; }
.footer__contact .ic { color: var(--gold); display:inline-flex; }
.footer__contact .ic svg { width:20px; height:20px; }
.footer__contact a:hover { color: var(--gold); }
.footer__cta { background: var(--ink-2); border:1px solid var(--line); border-radius: 20px; padding: clamp(24px,4vw,40px); }
.footer__bottom { display:flex; flex-wrap:wrap; gap: 14px; justify-content:space-between; align-items:center; margin-top: clamp(40px,6vw,70px); padding-top: 26px; border-top:1px solid var(--line); font-size:.85rem; opacity:.6; }
.socials { display:flex; gap: 12px; }
.socials a { width:42px; height:42px; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; transition: all .2s; }
.socials a:hover { background:#fff; color: var(--ink); transform: translateY(-3px); }
.socials svg { width:20px; height:20px; }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"]{ transition-delay:.08s } .reveal[data-d="2"]{ transition-delay:.16s }
.reveal[data-d="3"]{ transition-delay:.24s } .reveal[data-d="4"]{ transition-delay:.32s }

/* ---------- Mobile menu panel ---------- */
.mobile-menu { position: fixed; inset:0; z-index:200; background: var(--ink); transform: translateX(100%); transition: transform .35s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column; padding: 80px var(--gut) 40px; }
.mobile-menu.open { transform: none; }
.mobile-menu a { font-family: var(--f-display); text-transform:uppercase; font-size: 2rem; padding: 14px 0; border-bottom:1px solid var(--line); }
.mobile-menu .close { position:absolute; top:22px; right: var(--gut); background:none;border:0;color:#fff;cursor:pointer; }
.mobile-menu .close svg { width:32px;height:32px; }

/* ---------- Cause / AFEDE (enrichie) ---------- */
.btn--green { --bg: #2f7d4f; --fg: #fff; }
.btn--green:hover { box-shadow: 0 14px 30px rgba(47,125,79,.4); }
a.festimos { transition: background .2s ease; }
a.festimos:hover { background: rgba(242,169,0,.26); }
a.festimos strong { color: #b07b00; }

.cause-hero { display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px,5vw,56px); align-items:start; }
.cause-stats { display:grid; grid-template-columns: 1fr 1fr; gap:14px; margin-top:28px; }
.cause-stat { background:#fff; border:1px solid var(--line-dark); border-radius:16px; padding:18px; }
.cause-stat b { font-family: var(--f-tall); font-size: clamp(1.8rem,5vw,2.8rem); line-height:1; color:#2f7d4f; display:block; }
.cause-stat span { font-weight:600; opacity:.7; font-size:.86rem; }

.campaign { background:#fff; color:var(--ink); border:2px solid var(--ink); border-radius:22px; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.18); }
.campaign__head { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--line-dark); }
.campaign__brand { font-family: var(--f-display); font-size:1rem; color:#2f7d4f; letter-spacing:-.02em; }
.campaign__verified { font-size:.72rem; font-weight:700; color:#2f7d4f; display:inline-flex; align-items:center; gap:.3em; }
.campaign__body { padding: clamp(20px,3vw,30px); }
.campaign__title { font-family: var(--f-display); text-transform:uppercase; font-size: clamp(1.2rem,3vw,1.7rem); line-height:1.04; }
.campaign__desc { opacity:.7; font-size:.94rem; margin-top:10px; }
.campaign__bar { height:14px; background:#e9e9e9; border-radius:999px; overflow:hidden; margin-top:22px; }
.campaign__fill { height:100%; width:0; background: linear-gradient(90deg,#2f7d4f,#43b06a); border-radius:999px; transition: width 1.4s cubic-bezier(.2,.8,.2,1); }
.campaign__amounts { display:flex; justify-content:space-between; align-items:baseline; margin-top:12px; }
.campaign__amounts .raised { font-family: var(--f-tall); font-size: clamp(1.4rem,4vw,2rem); color:#2f7d4f; line-height:1; }
.campaign__amounts .goal { font-weight:600; opacity:.6; }
.campaign__row { display:flex; gap:18px; margin-top:16px; font-weight:600; font-size:.86rem; opacity:.7; flex-wrap:wrap; }
.campaign__cta { display:block; margin-top:20px; }
.campaign__cta .btn { width:100%; justify-content:center; }

/* ---------- Responsive ---------- */
@media (max-width: 940px) {
  .nav__links, .nav__cta { display:none; }
  .nav__burger { display:inline-flex; }
  .split, .split--rev, .prize, .charity, .cause-hero { grid-template-columns: 1fr; }
  .split--rev .split__media { order: -1; }
  .stats { grid-template-columns: repeat(2,1fr); row-gap: 34px; }
  .cards { grid-template-columns: 1fr; }
  .infobar { grid-template-columns: repeat(2,1fr); }
  .tiers { grid-template-columns: 1fr; max-width: 460px; margin-inline:auto; }
  .gallery { grid-template-columns: repeat(2,1fr); grid-auto-rows: 130px; }
  .footer__top { grid-template-columns: 1fr; }
  .charity { text-align:center; }
  .charity__badge { justify-self:center; }
}
@media (max-width: 520px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .gallery .g-wide { grid-column: span 2; }
  .hero__actions .btn { width: 100%; justify-content:center; }
  .countdown { display:grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
  .cd { min-width: 0; padding: 12px 6px; }
  .cd b { font-size: 1.7rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity:1; transform:none; }
}