/* Ye Albania — type, layout, motion */
:root{
  --bg:#000;
  --fg:#fff;
  --mute:#888;
  --line:#1a1a1a;
  --accent:#E41E26;
  --serif: "Times New Roman", "Times", serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --display: "Helvetica Neue", "Arial Black", "Inter", sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0;}
html, body{ background:#000; color:#fff; font-family:var(--display); -webkit-font-smoothing:antialiased; overscroll-behavior:none;}
body{ min-height:100vh;}
a{ color:inherit; text-decoration:none;}
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer;}

/* Reusable kicker / lbl */
.kicker{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--mute); text-transform:uppercase;}
.lbl{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.18em; color:var(--mute); text-transform:uppercase; margin-bottom:6px;}
.val{ display:block; font-family:var(--display); font-weight:800; letter-spacing:.02em; font-size:18px;}

/* ─── Grain overlay ─────────────────────────────────── */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:9000; mix-blend-mode:overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.65'/></svg>");
  background-size:240px 240px;
  animation: grainShift .5s steps(4) infinite;
}
@keyframes grainShift{
  0%{ transform: translate(0,0);}
  25%{ transform: translate(-6%, 4%);}
  50%{ transform: translate(4%, -3%);}
  75%{ transform: translate(-3%, -5%);}
  100%{ transform: translate(0,0);}
}

/* ─── Intro ─────────────────────────────────────────── */
.intro{
  position:fixed; inset:0; z-index:8000; background:#000; overflow:hidden;
}
.intro__stage{ position:absolute; inset:0;}
.intro__img-wrap{ position:absolute; inset:0; overflow:hidden;}
.intro__img{
  position:absolute; left:50%; top:50%; transform: translate(-50%, -50%) scale(1);
  width: max(100vw, 100vh * 1); height: max(100vh, 100vw * 1);
  min-width:100%; min-height:100%; object-fit:cover;
  filter: contrast(1.15) brightness(.85);
  transition: transform var(--introDur, 2.6s) cubic-bezier(.7,.02,.45,1);
  will-change: transform;
}

/* When opening: image scales up massively, the camera rushes into the mouth */
.intro--opening .intro__img{ transform: translate(-50%, -52%) scale(6.5);}
.intro--through .intro__img{ transform: translate(-50%, -52%) scale(14); opacity:.25;}

/* The portal — a black radial that grows from the mouth, swallowing screen */
.intro__portal{
  position:absolute; left:50%; top:62%;
  width: 8vmin; height: 8vmin; border-radius:50%;
  background: radial-gradient(circle at 50% 50%, #000 55%, rgba(0,0,0,.85) 70%, rgba(0,0,0,0) 100%);
  transform: translate(-50%, -50%) scale(.1);
  opacity:0;
  transition: transform calc(var(--introDur, 2.6s) * .9) cubic-bezier(.6,.04,.3,1), opacity .4s ease;
  will-change: transform, opacity;
}
.intro--opening .intro__portal{ opacity:1; transform: translate(-50%, -50%) scale(8);}
.intro--through .intro__portal{ opacity:1; transform: translate(-50%, -50%) scale(60); transition-duration:.7s;}

/* Style variants */
.intro--cinematic{ --introDur:2.6s;}
.intro--hard{ --introDur:1.4s;}
.intro--hard .intro__img{ animation: glitch .12s steps(1) infinite; }
.intro--pulse{ --introDur:3.2s;}
.intro--pulse.intro--opening .intro__img{ animation: pulse 700ms ease-in-out 2; }
@keyframes glitch{
  0%{ filter: contrast(1.15) brightness(.85) hue-rotate(0);}
  25%{ filter: contrast(1.4) brightness(1.1) hue-rotate(0); transform-origin:center; }
  50%{ filter: contrast(1.15) brightness(.85);}
  75%{ filter: contrast(1.6) brightness(.7); }
}
@keyframes pulse{
  0%, 100%{ transform: translate(-50%, -50%) scale(1); }
  50%{ transform: translate(-50%, -52%) scale(1.15); }
}

.intro__chrome{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between;
  padding: clamp(20px, 4vw, 48px);
  pointer-events:none;
  transition: opacity .4s ease;
}
.intro--through .intro__chrome{ opacity:0;}

.intro__top{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:12px; letter-spacing:.2em; color:#fff;}
.intro__brand{ font-weight:700;}
.intro__cue{ color:var(--mute);}

.intro__bottom{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px;}
.intro__title{
  font-family:var(--display); font-weight:900; letter-spacing:-0.02em; line-height:.85;
  font-size: clamp(64px, 14vw, 220px);
  text-transform:uppercase; color:#fff; mix-blend-mode:difference;
}
.intro__title-sub{
  display:block; font-size: clamp(14px, 1.4vw, 22px); font-family:var(--mono); letter-spacing:.4em;
  color:#fff; mix-blend-mode:normal; margin-top:8px; font-weight:400;
}
.intro__skip{
  pointer-events:auto;
  font-family:var(--mono); font-size:12px; letter-spacing:.2em; color:#fff;
  border:1px solid rgba(255,255,255,.4); padding:14px 18px; backdrop-filter:blur(4px);
  background:rgba(0,0,0,.35);
  transition: background .2s, color .2s;
}
.intro__skip:hover{ background:#fff; color:#000;}

/* ─── Header ────────────────────────────────────────── */
.app{ position:relative; min-height:100vh;}
.hdr{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 24px; background: rgba(0,0,0,.7); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.hdr__mark{ font-family:var(--display); font-weight:900; letter-spacing:.05em; font-size:18px;}
.hdr__nav{ display:flex; gap:28px; font-family:var(--mono); font-size:12px; letter-spacing:.2em;}
.hdr__nav a{ color:#bbb; transition:color .15s;}
.hdr__nav a:hover{ color:#fff;}
.hdr__cta{
  font-family:var(--mono); font-size:12px; letter-spacing:.2em;
  padding:12px 18px; border:1px solid #fff; color:#fff;
  transition: background .2s, color .2s;
}
.hdr__cta:hover{ background:#fff; color:#000;}
.hdr__r{ display:flex; align-items:center; gap:14px;}

/* Hamburger */
.hdr__burger{
  display:none; width:34px; height:34px; padding:8px; flex-direction:column; justify-content:space-between;
}
.hdr__burger span{
  display:block; width:18px; height:1.5px; background:#fff; transition: transform .25s, opacity .2s;
}
.hdr__burger.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg);}
.hdr__burger.is-open span:nth-child(2){ opacity:0;}
.hdr__burger.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg);}

@media (max-width: 860px){
  .hdr__nav{ display:none;}
  .hdr__burger{ display:flex;}
  .hdr__cta{ display:none;}
}

/* ─── Mobile menu drawer ────────────────────────────── */
.mnav{
  position:fixed; inset:0; z-index:6500; background:rgba(0,0,0,.7);
  animation: fadeIn .2s ease;
}
.mnav__sheet{
  position:absolute; right:0; top:0; bottom:0;
  width: min(440px, 92%); background:#0a0a0a; border-left:1px solid var(--line);
  display:flex; flex-direction:column;
  animation: slideIn .3s cubic-bezier(.2,.8,.2,1);
}
.mnav__head{
  display:flex; justify-content:space-between; align-items:center;
  padding: 22px 24px; border-bottom:1px solid var(--line);
}
.mnav__x{ font-size:22px; color:#fff;}
.mnav__list{
  display:flex; flex-direction:column; padding: 16px 0; flex:1; overflow-y:auto;
}
.mnav__list a{
  display:flex; align-items:baseline; gap:18px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--line);
  font-family:var(--display); font-weight:900; font-size:28px; letter-spacing:-.01em; text-transform:uppercase;
  transition: background .15s, padding-left .15s;
}
.mnav__list a:hover{ background:#111; padding-left: 32px;}
.mnav__num{ font-family:var(--mono); font-weight:400; font-size:11px; letter-spacing:.2em; color:var(--mute);}
.mnav__cta{
  margin: 16px 24px 24px; padding: 18px;
  background: var(--accent); color:#fff;
  font-family:var(--display); font-weight:900; letter-spacing:.05em; font-size:18px;
  text-transform:uppercase;
}
.mnav__cta:hover{ filter: brightness(1.1);}

/* ─── Hero ──────────────────────────────────────────── */
.hero{
  position:relative; min-height: 100vh; padding: 24px;
  display:grid; grid-template-rows: auto 1fr auto auto; gap:40px;
  overflow:hidden;
}
.hero__bg{
  position:absolute; inset:0; z-index:-1;
}
.hero__bg img{
  width:100%; height:100%; object-fit:cover; object-position: center 35%;
  filter: contrast(1.1) brightness(.55) grayscale(1);
  transform: scale(1.05);
}
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 60%, rgba(0,0,0,.85) 100%);
}

.hero__top{
  display:flex; justify-content:space-between;
  font-family:var(--mono); font-size:11px; letter-spacing:.3em; color:#ccc;
}

.hero__center{
  align-self:center;
}
.hero__title{
  font-family:var(--display); font-weight:900; letter-spacing:-0.04em;
  font-size: clamp(80px, 18vw, 320px);
  line-height:.82;
  text-transform:uppercase;
}
.hero__line{ display:block;}
.hero__line--out{
  -webkit-text-stroke: 2px #fff; color:transparent;
  font-style:italic; font-weight:700;
  font-size: clamp(40px, 9vw, 160px);
  margin-left: clamp(40px, 8vw, 160px);
}
.hero__meta{
  margin-top: 32px;
  display:grid; grid-template-columns: repeat(3, 1fr); gap:24px;
  max-width: 720px;
  border-top:1px solid rgba(255,255,255,.2); padding-top:20px;
}

.hero__bot{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px;}
.hero__tag{
  font-family:var(--mono); letter-spacing:.18em; font-size:13px; color:#ccc;
  max-width: 320px;
}
.hero__cta{
  display:inline-flex; align-items:center; gap:18px;
  padding: 18px 24px;
  background:var(--accent); color:#fff;
  font-family:var(--display); font-weight:900; letter-spacing:.05em; font-size:18px;
  border:0;
  transition: transform .15s, gap .2s;
}
.hero__cta:hover{ gap:28px;}
.hero__cta-arrow{ font-size:24px;}

/* Marquee */
.marq{
  position:absolute; bottom:0; left:0; right:0;
  overflow:hidden; border-top:1px solid var(--line);
  background:#000; padding: 14px 0;
}
.marq__track{
  display:flex; gap: 0;
  font-family:var(--display); font-weight:900; font-size:18px; letter-spacing:.05em; text-transform:uppercase;
  white-space:nowrap; color:#fff;
  animation: marq 30s linear infinite;
}
.marq__track > span{ padding-right: 4ch;}
@keyframes marq{ to{ transform: translateX(-50%);}}

/* ─── Section bleed — distinct visual per section ───
   Same vertical-fade pattern, but each section gets its own
   imagery so the page doesn't repeat itself. Two photographic
   moments (a hero re-crop + warm/cool grades) and two
   procedural textures (architectural grid + fractal static).
*/
.cd, .sel, .ven, .faq{
  position: relative;
  isolation: isolate;
}
.cd::before, .sel::before, .ven::before, .faq::before{
  content:"";
  position:absolute; inset:0;
  background-color: #000;
  pointer-events: none;
  z-index: -1;
}

/* ─ Countdown — "Sky": top crop of the hero, warm sepia tone */
.cd::before{
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.30) 0%,
      rgba(0,0,0,.72) 22%,
      rgba(0,0,0,.94) 42%,
      #000 60%, #000 100%),
    url("assets/mouth.webp") center 8% / 230% auto no-repeat;
  filter: sepia(.55) hue-rotate(-22deg) saturate(1.5) brightness(.95);
}

/* ─ SeatSelector — "Stadium grid": procedural blueprint */
.sel::before{
  background:
    /* Top fade-to-black */
    linear-gradient(180deg,
      rgba(0,0,0,.20) 0%,
      rgba(0,0,0,.60) 18%,
      rgba(0,0,0,.88) 38%,
      #000 60%, #000 100%),
    /* Radial spotlight at top (suggests stadium floods) */
    radial-gradient(ellipse 80% 50% at 50% -10%,
      rgba(228,30,38,.18) 0%, rgba(228,30,38,0) 60%),
    /* Stadium-seating vertical bars */
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.04) 0px, rgba(255,255,255,.04) 1px,
      transparent 1px,            transparent 18px),
    /* Subtle horizontal scan lines */
    repeating-linear-gradient(0deg,
      rgba(255,255,255,.025) 0px, rgba(255,255,255,.025) 1px,
      transparent 1px,             transparent 6px);
}

/* ─ Venue — "Ground": bottom crop of the hero, cool blue tone */
.ven::before{
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.35) 0%,
      rgba(0,0,0,.75) 22%,
      rgba(0,0,0,.94) 42%,
      #000 60%, #000 100%),
    url("assets/mouth.webp") center 92% / 200% auto no-repeat;
  filter: hue-rotate(180deg) saturate(.7) brightness(.85) contrast(1.1);
}

/* ─ FAQ — "Static": SVG fractal noise behind a heavy dim */
.faq::before{
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.55) 0%,
      rgba(0,0,0,.88) 24%,
      rgba(0,0,0,.97) 44%,
      #000 60%, #000 100%),
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.85 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")
      top center / 800px 800px repeat;
  filter: contrast(1.2);
}

/* Section content must sit above the bleed */
.cd > *, .sel > *, .ven > *, .faq > *{ position: relative; z-index: 0;}

/* ─── Countdown ─────────────────────────────────────── */
.cd{
  padding: 80px 24px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.cd__head{ display:flex; justify-content:space-between; margin-bottom:32px;}
.cd__row{
  display:flex; gap:20px; align-items:flex-start; justify-content:center;
  font-family:var(--display);
}
.cd__cell{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  min-width: clamp(80px, 14vw, 200px);
}
.cd__num{
  font-weight:900; letter-spacing:-.04em;
  font-size: clamp(64px, 12vw, 180px);
  line-height:1; font-variant-numeric: tabular-nums;
}
.cd__lbl{ font-family:var(--mono); font-size:11px; letter-spacing:.3em; color:var(--mute);}
.cd__sep{
  font-weight:900; font-size: clamp(40px, 9vw, 140px); line-height:1;
  color:var(--accent); align-self:center; margin-top:-10px;
}

/* ─── Stepper (used on selector + checkout) ─────────── */
.step{
  list-style:none; display:grid; grid-template-columns: repeat(4, 1fr);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  margin: 0 0 48px;
}
.step__cell{
  display:flex; align-items:center; gap:14px;
  padding: 18px 20px;
  border-right:1px solid var(--line);
  color:var(--mute);
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  transition: color .15s, background .15s;
}
.step__cell:last-child{ border-right:0;}
.step__cell.is-active{ color:#fff; background:#080808;}
.step__cell.is-active .step__n{ background:var(--accent); color:#fff; border-color:var(--accent);}
.step__cell.is-done   { color:#888;}
.step__cell.is-done .step__n{ background:#fff; color:#000; border-color:#fff;}
.step__n{
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:50%;
  border:1px solid currentColor;
  font-family:var(--display); font-weight:900; font-size:13px;
}
.step__l{ font-weight:500;}
@media (max-width: 720px){
  .step{ grid-template-columns: 1fr 1fr;}
  .step__cell{ border-right:0; border-bottom:1px solid var(--line);}
  .step__cell:nth-child(odd){ border-right:1px solid var(--line);}
  .step__cell:nth-last-child(-n+2){ border-bottom:0;}
}

/* ─── Seat selector ─────────────────────────────────── */
.sel{ padding: 100px 24px; border-bottom:1px solid var(--line);}
.sel__head{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:32px; margin-bottom:36px;}
.sel__head h2{
  font-family:var(--display); font-weight:900; letter-spacing:-.03em;
  font-size: clamp(48px, 10vw, 140px); line-height:.85; text-transform:uppercase;
  text-align:left; margin-top:8px;
}
.sel__cap{
  font-family:var(--mono); font-size:12px; line-height:1.7; letter-spacing:.04em;
  color:#bbb; max-width: 360px;
}
.sel__cap a{ color:#fff; text-decoration:underline; text-underline-offset:3px;}

/* ─── VIP callout (above the Standing/Seated tabs) ──── */
.sel__vip-group{
  display:flex; flex-direction:column; gap: 10px;
  margin-bottom: 24px;
}
.sel__vip-kicker{ margin-bottom: 4px;}
.sel__vip-banner{
  display:grid; grid-template-columns: 1fr auto; gap: 18px; align-items:center;
  padding: 16px 22px;
  background: #0a0a0a;
  border:1px solid var(--line);
  border-left: 4px solid #9C27B0;
}
.sel__vip-body{ display:flex; flex-direction:column; gap: 4px; min-width: 0;}
.sel__vip-head{
  display:flex; align-items:baseline; gap: 14px; flex-wrap:wrap;
}
.sel__vip-name{
  font-family:var(--display); font-weight:900; font-size: 18px;
  letter-spacing: .04em; text-transform: uppercase;
}
.sel__vip-price{
  font-family:var(--display); font-weight:900; font-size: 18px;
  color:#fff; margin-left: auto;
}
.sel__vip-desc{
  font-family:var(--mono); font-size: 12px; color: var(--mute);
  margin-top: 6px; line-height: 1.5; max-width: 560px;
}
.sel__vip-qty{
  display:inline-flex; align-items:center; gap: 12px;
}
.sel__vip-qty button{
  width: 32px; height: 32px;
  border:1px solid var(--line); background: transparent; color:#fff;
  font-size: 16px; cursor: pointer;
}
.sel__vip-qty button:hover:not(:disabled){ background:#fff; color:#000;}
.sel__vip-qty button:disabled{ opacity: .3; cursor: not-allowed;}
.sel__vip-qty span{
  min-width: 24px; text-align:center;
  font-family:var(--mono); font-size: 14px; font-variant-numeric: tabular-nums;
}

@media (max-width: 560px){
  .sel__vip-banner{ grid-template-columns: 1fr; padding: 16px 18px; gap: 14px;}
  .sel__vip-price{ margin-left: 0;}
  .sel__vip-qty{ justify-content: flex-start;}
}

/* ─── Tabs: Standing vs Seated ──────────────────────── */
.sel__tabs{
  display:grid; grid-template-columns: 1fr 1fr; gap:0;
  border:1px solid var(--line);
  margin-bottom: 36px;
}
.sel__tab{
  position:relative;
  display:flex; align-items:center; gap:18px;
  padding: 22px 24px;
  background:#000; color:#fff;
  text-align:left; cursor:pointer;
  border-right:1px solid var(--line);
  transition: background .15s, border-color .15s;
}
.sel__tab:last-child{ border-right:0;}
.sel__tab:hover{ background:#070707;}
.sel__tab.is-on{ background:#0e0e0e; box-shadow: inset 0 -3px 0 var(--accent);}
.sel__tab-i{ font-family:var(--mono); font-size:11px; letter-spacing:.3em; color:var(--mute);}
.sel__tab-body{ flex:1;}
.sel__tab-name{ font-family:var(--display); font-weight:900; font-size: clamp(22px, 2.5vw, 32px); letter-spacing:-.01em; text-transform:uppercase;}
.sel__tab-sub{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:#bbb; margin-top: 4px;}
.sel__tab-pill{
  background: var(--accent); color:#fff;
  font-family:var(--display); font-weight:900; font-size:14px;
  width: 28px; height:28px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
}

/* ─── Grid: cards (left) + map aside (right) ─────────── */
.sel__grid{
  display:grid; grid-template-columns: 1fr 420px; gap:32px;
  margin-bottom: 48px;
}
@media (max-width: 1100px){ .sel__grid{ grid-template-columns: 1fr;} }

.sel__cards{ display:flex; flex-direction:column; gap: 32px;}
.sel__group{ display:flex; flex-direction:column; gap: 14px;}
.sel__group-h{
  display:flex; justify-content:space-between; align-items:baseline; gap: 14px;
  padding-bottom: 6px;
  border-bottom:1px solid var(--line);
}
.sel__group-tag{
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--mute);
  text-transform:uppercase;
}
.sel__group-cards{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap:12px;
}

/* ─── ZoneCard ──────────────────────────────────────── */
.zc{
  position:relative;
  display:flex; gap: 14px;
  padding: 18px;
  background:#000;
  border:1px solid var(--line);
  transition: background .12s, border-color .12s, transform .12s;
}
.zc:hover, .zc.is-hov{ background:#0a0a0a; border-color: rgba(255,255,255,.25);}
.zc.is-on{ background:#0e0e0e; box-shadow: inset 0 0 0 1px var(--accent);}

.zc__bar{
  width: 4px; flex: 0 0 4px;
  border-radius: 2px;
  align-self: stretch;
}
.zc__body{ flex:1; display:flex; flex-direction:column; gap: 10px;}
.zc__head{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px;}
.zc__name{
  font-family:var(--display); font-weight:900; font-size: 22px; letter-spacing:-.01em;
  line-height: 1.1; text-transform:uppercase;
}
.zc__price{ text-align:right; line-height:1.2;}
.zc__price-eur{ display:block; font-family:var(--display); font-weight:900; font-size: 22px; letter-spacing:-.01em; font-variant-numeric: tabular-nums;}
.zc__price-all{ display:block; font-family:var(--mono); font-size: 10px; letter-spacing:.06em; color:var(--mute); margin-top:2px;}
.zc__desc{
  font-family:var(--mono); font-size: 12px; line-height: 1.6; letter-spacing:.02em; color:#cfcfcf;
}
.zc__foot{ display:flex; justify-content:space-between; align-items:center; margin-top: 4px;}
.zc__qty{
  display:inline-flex; align-items:center; gap: 0;
  border: 1px solid var(--line);
}
.zc__qty button{
  width: 36px; height: 32px;
  background:#000; color:#fff;
  font-size: 18px; line-height: 1;
  border-right: 1px solid var(--line);
  transition: background .12s;
}
.zc__qty button:last-child{ border-right: 0;}
.zc__qty button:not(:disabled):hover{ background:#1a1a1a;}
.zc__qty button:disabled{ color: var(--mute); cursor: not-allowed;}
.zc__qty span{
  display:inline-flex; align-items:center; justify-content:center;
  min-width: 40px; height: 32px;
  font-family:var(--mono); font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  border-right: 1px solid var(--line);
}
.zc__on{
  font-family:var(--mono); font-size: 11px; letter-spacing: .18em; font-weight: 600;
}

/* ─── Stadium map aside ─────────────────────────────── */
.sel__aside{ position: sticky; top: 100px; align-self: flex-start;}
@media (max-width: 1100px){ .sel__aside{ position: static;} }
.sel__map-wrap{
  background:#fff; color:#000;
  padding: 16px 16px 24px;
  border:1px solid var(--line);
}
.sel__map-cap{
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:#666;
  text-align:center; margin-bottom: 10px; line-height: 1.5;
}
.sel__map-cap a{ color:#000; text-decoration:underline;}
.map{ width:100%; height:auto; display:block;}
.map__sect rect{ transition: filter .12s, stroke-width .12s; }
.map__sect:hover rect{ filter: brightness(1.15); stroke:#000; stroke-width:1.5;}

.sel__cart{ margin-bottom: 32px; padding-top: 24px; border-top:1px solid var(--line);}
.sel__cart ul{ list-style:none; margin-top:16px;}
.sel__line{
  display:grid; grid-template-columns: 18px 1fr 110px 200px; align-items:center; gap:16px;
  padding: 14px 0;
  border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:13px; letter-spacing:.04em;
}
.sel__line:last-child{ border-bottom:0;}
.sel__line-dot{ width:14px; height:14px; border-radius:50%;}
.sel__line-info{ min-width:0;}
.sel__line-name{ font-family:var(--display); font-weight:700; font-size:14px; letter-spacing:.02em; text-transform:uppercase;}
.sel__line-zone{ font-family:var(--mono); font-size:10px; letter-spacing:.15em; color:var(--mute); margin-top:4px; text-transform:uppercase;}
.sel__line-qty{ display:inline-flex; align-items:center; gap:12px; justify-self:start;}
.sel__line-qty button{ width:24px; height:24px; border:1px solid var(--line); color:#fff; font-size:16px;}
.sel__line-qty button:hover{ background:#fff; color:#000;}
.sel__line-qty span{ min-width:18px; text-align:center; font-variant-numeric: tabular-nums;}
.sel__line-sum{ text-align:right; font-weight:700; color:#fff; font-variant-numeric: tabular-nums;}

.sel__foot{
  display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap;
  padding-top: 24px; border-top:1px solid var(--line);
}
.sel__sub{ display:flex; flex-direction:column; gap:6px;}
.sel__sub-row{ display:flex; gap:18px; align-items:baseline;}
.sel__sub-eur{ font-family:var(--display); font-weight:900; font-size:clamp(28px, 4vw, 44px); letter-spacing:-.02em;}
.sel__sub-all{ font-family:var(--mono); font-size:13px; letter-spacing:.1em; color:#bbb;}
.sel__sub-q{ font-family:var(--mono); font-size:11px; letter-spacing:.15em; color:var(--mute);}
.sel__proceed{
  display:inline-flex; align-items:center; gap:14px;
  padding: 20px 28px;
  background:#333; color:#fff;
  font-family:var(--display); font-weight:900; font-size:18px; letter-spacing:.06em;
  transition: gap .15s, filter .15s;
}
.sel__proceed:not(:disabled):hover{ gap: 20px; filter: brightness(1.1);}
.sel__proceed:disabled{ opacity:.45; cursor:not-allowed;}
.sel__proceed span{ font-size:22px;}

/* ─── Checkout ──────────────────────────────────────── */
.co{
  position:fixed; inset:0; background: rgba(0,0,0,.85); z-index:7000;
  display:flex; justify-content:flex-end;
  animation: fadeIn .25s ease;
}
@keyframes fadeIn{ from{ opacity:0;} to{ opacity:1;} }

.co__sheet{
  width: min(560px, 100%); height:100%; background:#0a0a0a; border-left:1px solid var(--line);
  display:flex; flex-direction:column;
  overflow:auto;
  animation: slideIn .35s cubic-bezier(.2,.8,.2,1);
}
@keyframes slideIn{ from{ transform: translateX(40px);} to{ transform: translateX(0);}}

.co__head{
  display:flex; justify-content:space-between; align-items:flex-start;
  padding: 28px; border-bottom:1px solid var(--line);
}
.co__head h3{ font-family:var(--display); font-weight:900; font-size:32px; letter-spacing:-.02em; text-transform:uppercase; margin-top:6px;}
.co__x{ font-size:20px; color:var(--mute);}
.co__x:hover{ color:#fff;}

.co__stepper-wrap{ padding: 0 0;}
.co__stepper-wrap .step{ margin: 0; border-top:0; border-bottom:1px solid var(--line);}
.co__stepper-wrap .step__cell{ padding: 14px 12px; font-size:10px; letter-spacing:.15em;}
.co__stepper-wrap .step__n{ width:20px; height:20px; font-size:11px;}
.co__stepper-wrap .step__l{ display:none;}
.co__stepper-wrap .step__cell.is-active .step__l{ display:inline;}

.co__summary{
  padding: 18px 28px; border-bottom:1px solid var(--line); background:#050505;
  display:flex; flex-direction:column; gap:14px;
}
.co__sum-list{ display:flex; flex-direction:column; gap:8px;}
.co__sum-line{
  display:grid; grid-template-columns: 14px 1fr auto; gap:12px; align-items:center;
  font-family:var(--mono); font-size:12px; letter-spacing:.05em;
}
.co__sum-dot{ width:10px; height:10px; border-radius:50%;}
.co__sum-name{ color:#fff; font-weight:500; text-transform:uppercase; letter-spacing:.06em;}
.co__sum-val{ color:#bbb; font-variant-numeric: tabular-nums;}
.co__sum-tot{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap;
  padding-top: 12px; border-top:1px dashed var(--line);
}
.co__sum-tot-eur{ font-family:var(--display); font-weight:900; font-size:24px; letter-spacing:-.02em; color:#fff;}
.co__sum-tot-all{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--mute); margin-left: auto;}

.co__qty{ display:inline-flex; align-items:center; gap:14px; border:1px solid var(--line); padding:6px 12px;}
.co__qty button{ width:24px; height:24px; font-size:18px; color:#fff;}
.co__qty button:disabled{ color:var(--mute);}
.co__qty span{ font-family:var(--mono); min-width:16px; text-align:center;}

.co__note{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--mute);}
.co__check{
  flex-direction:row !important; align-items:flex-start; gap:10px; cursor:pointer;
  font-family:var(--mono); font-size:11px; letter-spacing:.05em; line-height:1.5; color:var(--mute);
}
.co__check input{ flex:0 0 auto; margin-top: 3px; accent-color: var(--accent);}
.co__check span{ flex:1;}

/* Section heads inside the sheet */
.co__h{
  font-family:var(--display); font-weight:900; font-size:22px; letter-spacing:-.01em;
  margin-top: 8px; margin-bottom: 4px; text-transform: none;
}
.co__sub-note{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--mute); margin-top:-6px;}
.co__sub-note a{ color:#fff; text-decoration:underline; text-underline-offset:2px;}
.co__check a{ color:#fff; text-decoration:underline; text-underline-offset:2px;}

/* Buyer-type radio */
.co__radio{ display:flex; gap:24px; font-family:var(--mono); font-size:12px; letter-spacing:.06em;}
.co__radio label{ flex-direction:row !important; align-items:center; gap:8px; cursor:pointer;}
.co__radio input[type=radio]{ accent-color: var(--accent);}

/* Address-row split (street + streetnumber) */
.co__row--3-1{ grid-template-columns: 3fr 1fr;}

/* Country dropdown */
.co__select{
  background:#000; border:1px solid var(--line); padding:14px 16px;
  color:#fff; font-family:var(--display); font-weight:600; font-size:16px;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23fff' d='M0 0h10L5 6z'/></svg>");
  background-repeat:no-repeat; background-position:right 16px center;
  padding-right: 40px;
}
.co__select:focus{ border-color:#fff; outline:none;}

/* Actions row (BACK + PROCEED) */
.co__actions{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  margin-top: 16px;
}
.co__actions .co__back{ padding-left:0;}

/* ─── Step 2: Addons grid ────────────────────────────── */
.co__addon-grid{
  display:grid; grid-template-columns: 1fr 1.4fr; gap: 32px;
  padding-top: 8px;
}
.co__addon-lbl{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--mute);
  text-transform:uppercase; margin-bottom: 12px;
}
.co__addon-ticket{ margin-bottom: 18px;}
.co__addon-name{ font-family:var(--display); font-weight:700; font-size:15px; letter-spacing:.02em; text-transform:uppercase; line-height:1.3;}
.co__addon-zone{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--mute); margin-top:4px; text-transform:uppercase;}
.co__addon-row{ display:flex; flex-direction:column; gap:10px;}
.co__addon-more{
  align-self:flex-start;
  font-family:var(--mono); font-size:12px; letter-spacing:.05em; color:#fff;
  padding: 0; margin: 4px 0;
}
.co__addon-more:hover{ color: var(--accent);}
.co__addon-info{
  font-family:var(--mono); font-size:12px; line-height:1.6; color:#bbb;
  padding: 8px 0 4px;
}
.co__addon-toggle{ display:flex; align-items:center; gap:14px; margin-top: 6px;}
.co__addon-price{ font-family:var(--mono); font-size:12px; color:#bbb;}

.co__switch{
  width:40px; height:22px; border-radius:999px; padding:0;
  background:#333; position:relative; transition: background .15s;
}
.co__switch span{
  position:absolute; top:3px; left:3px;
  width:16px; height:16px; border-radius:50%; background:#fff;
  transition: transform .18s cubic-bezier(.4,.7,.3,1);
}
.co__switch.is-on span{ transform: translateX(18px);}

@media (max-width: 560px){
  .co__addon-grid{ grid-template-columns: 1fr;}
}

/* ─── Step 3: Shopping Cart table ────────────────────── */
.co__cart{
  width:100%; border-collapse:collapse;
  font-family:var(--mono); font-size:12px; letter-spacing:.04em;
}
.co__cart th{
  text-align:left; padding: 10px 0;
  font-weight:500; letter-spacing:.18em; color:var(--mute); text-transform:uppercase;
  border-bottom:1px solid var(--line);
}
.co__cart td{
  padding: 14px 8px 14px 0; vertical-align:top;
  border-bottom:1px solid var(--line);
}
.co__cart td:last-child{ text-align:right; white-space:nowrap;}
.co__cart-name{ font-family:var(--display); font-weight:700; font-size:14px; letter-spacing:.02em; text-transform:uppercase;}
.co__cart-zone{ font-family:var(--mono); font-size:10px; letter-spacing:.15em; color:var(--mute); margin-top:4px;}
.co__cart-fee td{ color:#bbb;}
.co__cart-fee-note{ font-size:10px; letter-spacing:.05em; color:var(--mute); margin-top:4px;}
.co__cart-total td{ font-family:var(--display); font-weight:900; font-size:16px; color:#fff; letter-spacing:.02em;}

.co__coupon{
  display:flex; gap:12px; margin-top: 18px;
}
.co__coupon input{
  flex:1; background:#000; border:1px solid var(--line); padding:12px 14px;
  color:#fff; font-family:var(--mono); font-size:13px;
}
.co__coupon button{
  padding: 0 24px; background:#fff; color:#000;
  font-family:var(--mono); font-weight:700; font-size:13px; letter-spacing:.1em;
}

.co__note--organiser{
  font-family:var(--mono); font-size:10px; line-height:1.7; color:var(--mute);
  margin-top: 16px;
}

/* ─── Step 4: Full-screen Payment Provider ───────────── */
.co.is-full{ background:#000;}
.co__sheet--full{
  width: 100%; max-width: 100%; height: 100vh;
  background: #0a0a0a;
  display:flex; flex-direction:column;
  animation: fadeIn .2s ease;
}
.pay__bar{
  display:flex; justify-content:space-between; align-items:center;
  padding: 14px 24px;
  background:#000;
  border-bottom: 1px solid var(--line);
  font-family:var(--mono); font-size:12px; letter-spacing:.18em;
}
.pay__cancel{ color:#fff;}
.pay__cancel:hover{ color: var(--accent);}
.pay__timer{ color:#fff; font-variant-numeric: tabular-nums;}

.pay{ flex:1; display:flex; flex-direction:column;}
.pay__cols{
  flex:1; display:grid; grid-template-columns: 1.2fr 1fr; gap:0;
  border-top: 1px solid var(--line);
}
.pay__col{
  padding: 48px clamp(24px, 4vw, 56px);
  border-right: 1px solid var(--line);
}
.pay__col:last-child{ border-right:0; background:#070707;}
.pay__h1{
  font-family:var(--display); font-weight:900; letter-spacing:-.02em;
  font-size: clamp(28px, 3vw, 40px); margin-bottom: 6px; text-transform:uppercase;
}
.pay__sub{ font-family:var(--mono); font-size:13px; letter-spacing:.06em; color:var(--mute); margin-bottom: 28px;}

.pay__method{
  position:relative;
  display:grid; grid-template-columns: 22px 1fr auto; align-items:center; gap:14px;
  padding: 18px 16px;
  border:1px solid var(--line); margin-bottom: 12px;
  background:#000;
  cursor:pointer;
  transition: border-color .15s, background .15s;
}
.pay__method:hover{ background:#0c0c0c;}
.pay__method.is-on{ border-color:#fff;}
.pay__method input[type=radio]{ width:18px; height:18px; accent-color: var(--accent);}
.pay__method-name{ font-family:var(--display); font-weight:700; font-size:15px; letter-spacing:.02em;}
.pay__rec{
  font-family:var(--mono); font-size:10px; letter-spacing:.12em; color:#0a0a0a;
  background:#3fd29c; padding: 4px 10px; border-radius: 2px;
}
.pay__method-icons{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; color:var(--mute);}
.pay__method-body{
  grid-column: 1 / -1;
  margin-top: 14px; padding-top: 14px; border-top:1px dashed var(--line);
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.pay__method-art{ font-size: 28px; color:#888;}
.pay__method-msg{ font-family:var(--mono); font-size:12px; color:#ccc; text-align:center;}
.pay__method-action{
  width:100%; padding: 14px;
  font-family:var(--display); font-weight:900; font-size:14px; letter-spacing:.08em; color:#fff;
  background:#888; text-transform:uppercase;
}
.pay__method-more{ font-family:var(--mono); font-size:11px; color:#fff; text-decoration:underline; letter-spacing:.05em;}
.pay__more{
  width:100%; padding: 14px;
  border:1px dashed var(--line); color:var(--mute);
  font-family:var(--mono); font-size:11px; letter-spacing:.18em;
}
.pay__more:hover{ color:#fff; border-color:#fff;}

.pay__order{
  width:100%; border-collapse:collapse;
  font-family:var(--mono); font-size:12px;
}
.pay__order th{
  text-align:left; padding: 10px 0;
  font-weight:500; letter-spacing:.18em; color:var(--mute); text-transform:uppercase;
  border-bottom:1px solid var(--line);
}
.pay__order td{
  padding: 12px 6px 12px 0;
  vertical-align: top;
  border-bottom:1px solid var(--line);
}
.pay__order td:last-child{ text-align:right; white-space:nowrap;}
.pay__order-sec{
  padding-top: 18px !important; padding-bottom: 4px !important;
  color:#fff; font-weight:600; letter-spacing:.06em;
  border-bottom:0 !important;
}
.pay__order-fee-note{ font-size:10px; letter-spacing:.04em; color:var(--mute); margin-top: 4px;}
.pay__order-final td{ font-family:var(--display); font-weight:900; font-size:15px; color:#fff;}

.pay__addr{ margin-top: 28px;}
.pay__addr-lbl{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--mute); text-transform:uppercase; margin-bottom: 10px;}
.pay__addr-card{
  border:1px solid var(--line); padding: 16px;
  font-family:var(--mono); font-size:13px; line-height:1.7; color:#fff;
}

.pay__foot{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding: 18px clamp(24px, 4vw, 56px);
  border-top:1px solid var(--line);
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--mute);
}

@media (max-width: 860px){
  .pay__cols{ grid-template-columns: 1fr;}
  .pay__col{ border-right:0; border-bottom:1px solid var(--line);}
  .pay__foot{ flex-direction:column; align-items:flex-start;}
}

/* Done step heading */
.co__done-h{
  font-family:var(--display); font-weight:900; font-size: 40px; letter-spacing:-.02em;
  text-transform: uppercase; text-align: center;
}

.co__form{ padding: 28px; display:flex; flex-direction:column; gap:18px;}
.co__form label{ display:flex; flex-direction:column; gap:6px;}
.co__form label > span{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--mute); text-transform:uppercase;}
.co__form input{
  background:#000; border:1px solid var(--line); padding:14px 16px;
  color:#fff; font-family:var(--display); font-weight:600; font-size:16px; letter-spacing:.02em;
  outline:none; transition: border-color .15s;
}
.co__form input:focus{ border-color:#fff;}
.co__form input::placeholder{ color:#777; letter-spacing:.1em;}

.co__row{ display:grid; grid-template-columns:1fr 1fr; gap:14px;}

.co__terms{ display:flex; gap:10px; align-items:flex-start; font-family:var(--mono); font-size:11px; letter-spacing:.15em; color:var(--mute);}
.co__terms label{ flex-direction:row; cursor:pointer; line-height:1.4;}

.co__breakdown{ font-family:var(--mono); font-size:13px; color:var(--mute); display:flex; flex-direction:column; gap:8px; padding-top:8px; border-top:1px solid var(--line);}
.co__breakdown > div{ display:flex; justify-content:space-between;}
.co__breakdown-tot{ color:#fff; font-weight:700; padding-top:8px; border-top:1px solid var(--line); font-size:18px;}

.co__next{
  margin-top: 8px;
  background: var(--accent); color:#fff;
  font-family:var(--display); font-weight:900; letter-spacing:.05em; font-size:16px;
  padding: 18px; text-transform:uppercase;
  transition: transform .1s;
}
.co__next:hover{ transform: translateY(-1px);}
.co__next:disabled{ opacity:.4; cursor:not-allowed;}
.co__back{
  font-family:var(--mono); font-size:12px; letter-spacing:.2em; color:var(--mute); padding: 12px;
}
.co__back:hover{ color:#fff;}

.co__done{ padding:32px 28px; display:flex; flex-direction:column; align-items:center; gap:20px;}
.co__qr{ background:#fff; padding:16px;}
.co__done-meta{ width:100%; display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.co__done-lead{
  font-family:var(--mono); font-size:13px; line-height:1.6; color:#ccc;
  text-align:center; max-width: 520px;
}
.co__ref{
  font-family:var(--display); font-weight:900; font-size: clamp(24px, 7vw, 36px);
  letter-spacing:.06em; color:#fff; text-align:center;
  border:1px dashed var(--line); padding:14px 20px; width:100%; word-break:break-all;
}
.co__pay-now{
  width:100%; margin-top:4px; background:var(--accent); color:#fff;
  font-family:var(--display); font-weight:900; letter-spacing:.05em; font-size:16px;
  padding:18px; text-transform:uppercase; display:flex; justify-content:center; gap:10px;
  transition: transform .1s;
}
.co__pay-now:hover{ transform: translateY(-1px);}
.co__done-fine{ font-family:var(--mono); font-size:11px; line-height:1.6; color:var(--mute); text-align:center; max-width:480px;}
.co__done-fine strong{ color:#fff;}
.co__done-close{ font-family:var(--mono); font-size:12px; letter-spacing:.15em; color:var(--mute); padding:8px;}
.co__done-close:hover{ color:#fff;}

/* Make wide price tables scroll instead of overflowing on small screens */
.co__table-wrap{ width:100%; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;}

.pay__more-note{ font-family:var(--mono); font-size:11px; line-height:1.6; color:var(--mute); margin-top:10px;}

/* Visible keyboard focus ring (was missing — only border-color changed) */
:focus-visible{ outline:2px solid #fff; outline-offset:2px;}
.hero__cta:focus-visible, .sel__proceed:focus-visible, .co__next:focus-visible,
.co__pay-now:focus-visible, .pay__method-action:focus-visible{ outline-color: var(--accent);}

/* ─── Venue ─────────────────────────────────────────── */
.ven{ padding: 100px 24px; border-bottom:1px solid var(--line);}
.ven__head{ margin-bottom:48px; max-width: 800px;}
.ven__head h2{
  font-family:var(--display); font-weight:900; letter-spacing:-.03em;
  font-size: clamp(48px, 9vw, 120px); line-height:.85; text-transform:uppercase; margin-top:14px;
}
.ven__addr{ font-family:var(--mono); font-size:14px; letter-spacing:.15em; color:#ccc; margin-top:18px; text-transform:uppercase;}
.ven__grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:0;
  border-top:1px solid var(--line); border-left:1px solid var(--line);
}
.ven__card{
  padding: 32px 24px;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  display:flex; flex-direction:column; gap:14px;
  min-height: 160px;
}
.ven__card .val{ font-size: clamp(24px, 4vw, 40px); line-height:1.05; letter-spacing:-.02em;}
.ven__card--wide{ grid-column: span 3;}
.ven__body{ font-family:var(--display); font-weight:600; font-size:16px; line-height:1.5; color:#ddd; max-width: 720px;}
@media (max-width: 860px){
  .ven__grid{ grid-template-columns: 1fr;}
  .ven__card--wide{ grid-column: auto;}
}

.ven__transport{ margin-top: 56px;}
.ven__transport-h{ display:block; margin-bottom: 20px;}
.ven__transport ul{ list-style:none; border-top:1px solid var(--line);}
.ven__transport li{
  display:grid; grid-template-columns: 120px 1fr; gap:24px;
  padding: 18px 0; border-bottom:1px solid var(--line);
}
.ven__mode{ font-family:var(--display); font-weight:900; font-size:18px; letter-spacing:.04em;}
.ven__t-note{ font-family:var(--mono); font-size:13px; letter-spacing:.1em; color:#bbb; line-height:1.5;}

/* ─── FAQ ───────────────────────────────────────────── */
.faq{ padding: 100px 24px; border-bottom:1px solid var(--line);}
.faq__head{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:20px; margin-bottom:48px;}
.faq__head h2{
  font-family:var(--display); font-weight:900; letter-spacing:-.03em;
  font-size: clamp(48px, 10vw, 140px); line-height:.85; text-transform:uppercase;
  text-align:right;
}
.faq__group{ margin-bottom: 56px;}
.faq__group-h{
  font-family:var(--mono); font-size:11px; letter-spacing:.3em; color:var(--mute);
  padding: 0 0 14px;
  border-bottom:1px solid var(--line);
  margin-bottom: 0;
}
.faq__list{ list-style:none;}
.faq__item{ border-bottom:1px solid var(--line);}
.faq__q{
  width:100%; display:grid; grid-template-columns: 60px 1fr 40px;
  align-items:center; gap:24px;
  padding: 26px 0; text-align:left;
  transition: padding-left .15s;
}
.faq__q:hover{ padding-left: 12px;}
.faq__q-num{ font-family:var(--mono); font-size:11px; letter-spacing:.3em; color:var(--mute);}
.faq__q-txt{
  font-family:var(--display); font-weight:900; letter-spacing:-.01em; line-height:1.05;
  font-size: clamp(20px, 3vw, 32px); text-transform:uppercase; color:#fff;
}
.faq__q-tog{ font-family:var(--mono); font-size:28px; line-height:1; color:#fff; text-align:right;}
.faq__a{
  padding: 0 0 28px 84px; max-width: 800px;
  font-family:var(--mono); font-size:14px; letter-spacing:.05em; line-height:1.7; color:#bbb;
}
.faq__a a{ color:#fff; text-decoration:underline; text-underline-offset:3px;}
.faq__a a:hover{ color: var(--accent);}
@media (max-width: 860px){
  .faq__a{ padding-left: 24px;}
}

/* ─── Footer ────────────────────────────────────────── */
.ftr{ padding: 60px 24px 24px; border-top:1px solid var(--line);}
.ftr__top{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:32px; margin-bottom:60px;}
.ftr__big{ font-family:var(--display); font-weight:900; font-size:28px; letter-spacing:-.02em; text-transform:uppercase; margin-top:8px;}
.ftr__top a{ font-family:var(--display); font-weight:700; font-size:20px; margin-top:8px; display:block;}
.ftr__top a:hover{ color: var(--accent);}
.ftr__bot{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--mute);}

/* selection */
::selection{ background: var(--accent); color:#fff;}

/* ─── Mobile polish (≤ 560px) ─────────────────────────────
   Tightens layouts that look fine on tablet but cramp on
   phone-sized viewports (iPhone 390, Android 360). */
@media (max-width: 560px){
  /* Hero meta strip: 3 columns → 2, with DOORS/SHOW getting
     its own row so it stops wrapping awkwardly. */
  .hero__meta{ grid-template-columns: 1fr 1fr; gap: 18px;}

  /* Hero CTA: stack below the tagline as a full-width button
     instead of hugging the corner half-width. */
  .hero__bot{ flex-direction: column; align-items: stretch; gap: 18px;}
  .hero__tag{ order: 2; max-width: none;}
  .hero__cta{
    order: 1; width: 100%;
    justify-content: space-between;
    padding: 20px 24px;
  }

  /* Checkout form: side-by-side input pairs stack on phone
     so each field gets the full width — way easier to type. */
  .co__row, .co__row--3-1{ grid-template-columns: 1fr;}

  /* Stepper: shrink the labels so all four fit cleanly in 2×2. */
  .step__l{ font-size: 11px; letter-spacing: .04em;}
  .step__cell{ padding: 10px 6px; gap: 6px;}

  /* Payment screen footer: stays in one tight column. */
  .pay__foot{ font-size: 10px; gap: 6px;}

  /* Payment top bar — "✕ CANCEL ... 12:00 minutes left" runs flush against
     both viewport edges on phones. Tighten padding + shrink type. */
  .pay__bar{
    padding: 12px 16px;
    font-size: 10px;
    letter-spacing: .1em;
    gap: 12px;
  }
  .pay__timer{ font-size: 11px;}

  /* Countdown: flex row with min-width:80px cells and clamp(40px, 9vw, 140px)
     separators overflows past the viewport on phones (~515px needed for 414px
     space). Switch to a 4-column grid, drop the separators, shrink the digits,
     and stack the head text. */
  .cd{ padding: 60px 18px;}
  .cd__head{ flex-direction: column; gap: 6px; margin-bottom: 24px;}
  .cd__row{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }
  .cd__sep{ display: none;}
  .cd__cell{ min-width: 0; gap: 4px;}
  .cd__num{ font-size: clamp(36px, 13vw, 58px);}
  .cd__lbl{ font-size: 9px; letter-spacing: .15em;}

  /* "YOUR SELECTION" cart lines: 4-col grid collapses on phone widths,
     squeezing the product name into ~14px and forcing it to wrap mid-word
     into the stepper column. Restructure into 2 rows: dot + name + price
     on top, stepper alone on the next row. */
  .sel__line{
    grid-template-columns: 18px 1fr auto;
    grid-template-areas:
      "dot info sum"
      ".   qty  qty";
    column-gap: 12px;
    row-gap: 10px;
  }
  .sel__line-dot{ grid-area: dot; align-self: start; margin-top: 4px;}
  .sel__line-info{ grid-area: info; min-width: 0;}
  .sel__line-qty{ grid-area: qty; justify-self: start;}
  .sel__line-sum{
    grid-area: sum; text-align: right;
    font-size: 11px; line-height: 1.4;
    max-width: 120px;
  }
}