/* ==========================================================================
   Airclub – stylesheet
   Richting: Blackout. Matzwart als het materiaal van de club zelf, wit type,
   de regenboog-geluidsgolf uit het logo als enige kleur.
   ========================================================================== */

:root{
  --bg:#0B0B0C;
  --surface:#151517;
  --surface-2:#1C1C1F;
  --line:rgba(255,255,255,.12);
  --line-strong:rgba(255,255,255,.22);
  --text:#F4F4F2;
  --text-soft:#D0D0CD;
  --muted:#9A9A9E;
  --spectrum:linear-gradient(90deg,#FF5A3C 0%,#FFC83C 25%,#3CE07A 50%,#3C8CFF 75%,#B05CFF 100%);
  --display:"Unbounded",system-ui,sans-serif;
  --body:"Manrope",system-ui,sans-serif;
  --max:1200px;
  --gutter:16px;
  --section:96px;
  --radius:16px;
  color-scheme:dark;
}
@media (min-width:900px){ :root{ --gutter:40px; --section:128px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--body); font-size:17px; line-height:1.6; font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; font-weight:600; line-height:1.15; text-wrap:balance; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; }
[hidden]{ display:none !important; }
:focus-visible{ outline:2px solid #fff; outline-offset:3px; border-radius:4px; }
.wrap{ width:100%; max-width:var(--max); margin:0 auto; padding:0 var(--gutter); }
.skip{ position:absolute; left:-999px; top:8px; background:#fff; color:#000; padding:10px 14px; border-radius:8px; z-index:100; }
.skip:focus{ left:8px; }

.display{ font-family:var(--display); letter-spacing:-.03em; }
.h2{ font-family:var(--display); font-weight:500; letter-spacing:-.03em; font-size:clamp(28px, 3.6vw, 46px); line-height:1.08; }
.label{
  font-family:var(--body); font-weight:600; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.eyebrow{ display:inline-flex; align-items:center; gap:12px; margin-bottom:20px; }
.eyebrow svg{ width:24px; height:10px; flex:none; }
.eyebrow .label{ color:var(--text); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:52px; padding:0 26px; border-radius:999px; border:1px solid transparent;
  font-family:var(--body); font-weight:600; font-size:15px; white-space:nowrap; cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:#fff; color:#0B0B0C; }
.btn-primary:hover{ background:#E8E8E6; }
.btn-ghost{ background:transparent; color:#fff; border-color:var(--line-strong); }
.btn-ghost:hover{ border-color:#fff; }
.btn-sm{ height:42px; padding:0 20px; font-size:14px; }
.btn svg{ width:16px; height:16px; }
.btn[disabled]{ opacity:.5; cursor:wait; transform:none; }

/* ---------- Nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(11,11,12,.78); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; height:76px; gap:24px; }
.nav-logo img{ height:44px; width:auto; }
@media (max-width:480px){ .nav-logo img{ height:36px; } }
.nav-links{ display:none; align-items:center; gap:30px; }
.nav-links a{ font-size:14.5px; font-weight:600; color:var(--muted); transition:color .2s; }
.nav-links a:hover, .nav-links a[aria-current="page"]{ color:var(--text); }
.nav-cta{ display:none; }
.nav-toggle{
  display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px;
  background:transparent; border:1px solid var(--line-strong); border-radius:999px; color:#fff; cursor:pointer;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  display:block; width:18px; height:1.5px; background:#fff; position:relative; content:""; transition:transform .25s, opacity .25s;
}
.nav-toggle span::before{ position:absolute; top:-6px; }
.nav-toggle span::after{ position:absolute; top:6px; }
.nav[data-open="true"] .nav-toggle span{ background:transparent; }
.nav[data-open="true"] .nav-toggle span::before{ transform:translateY(6px) rotate(45deg); }
.nav[data-open="true"] .nav-toggle span::after{ transform:translateY(-6px) rotate(-45deg); }
.nav-mobile{
  display:none; flex-direction:column; gap:4px; padding:12px var(--gutter) 24px; border-top:1px solid var(--line); background:rgba(11,11,12,.96);
}
.nav-mobile a{ padding:12px 0; font-size:18px; font-weight:600; border-bottom:1px solid var(--line); }
.nav-mobile .btn{ margin-top:16px; align-self:flex-start; border-bottom:0; font-size:15px; }
.nav[data-open="true"] .nav-mobile{ display:flex; }
@media (min-width:900px){
  .nav-links{ display:flex; }
  .nav-cta{ display:inline-flex; }
  .nav-toggle, .nav-mobile{ display:none !important; }
}

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:min(calc(100svh - 76px), 880px); display:flex; align-items:flex-end; overflow:hidden;
  isolation:isolate;
}
.hero-media{ position:absolute; inset:0; z-index:-2; }
.hero-media img{ width:100%; height:100%; object-fit:cover; object-position:center; }
.hero::after{
  content:""; position:absolute; inset:0; z-index:-2;
  background:linear-gradient(180deg, rgba(11,11,12,.55) 0%, rgba(11,11,12,.15) 30%, rgba(11,11,12,.72) 68%, var(--bg) 100%);
}
.hero .wrap{ padding-top:120px; padding-bottom:72px; }
.hero-logo{ width:min(520px, 78vw); height:auto; margin-bottom:40px; }
.hero h1{ font-family:var(--display); font-weight:700; letter-spacing:-.035em; font-size:clamp(34px, 5.6vw, 72px); line-height:1.02; max-width:14ch; }
.hero p{ margin-top:22px; max-width:46ch; font-size:clamp(17px, 1.4vw, 20px); color:#D9D9D6; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:12px; margin-top:36px; }
.hero-meta{ margin-top:48px; display:flex; flex-wrap:wrap; gap:14px 28px; }
.hero-meta .label{ color:#C8C8C5; }

/* Compacte paginakop (reserveren) */
.page-head{ padding:72px 0 48px; }
.page-head h1{ font-family:var(--display); font-weight:700; letter-spacing:-.035em; font-size:clamp(34px, 5vw, 64px); line-height:1.02; }
.page-head p{ margin-top:18px; color:var(--muted); font-size:18px; max-width:56ch; }

/* ---------- Wave ---------- */
.wave{ display:block; width:100%; height:56px; }
.wave path{ stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.wave-divider{ padding:0 var(--gutter); max-width:var(--max); margin:0 auto; }
.wave-hero{ margin-top:-28px; position:relative; z-index:2; }
@keyframes wave-flow{ from{ stroke-dashoffset:0; } to{ stroke-dashoffset:-240; } }
.wave path.anim{ stroke-dasharray:160 80; animation:wave-flow 6s linear infinite; }
.wave path.ghost{ stroke:rgba(255,255,255,.08); }
@media (prefers-reduced-motion:reduce){
  .wave path.anim{ animation:none; stroke-dasharray:none; }
  html{ scroll-behavior:auto; }
  .btn:hover{ transform:none; }
  .product:hover, .product:hover .product-media img{ transform:none; }
}

/* ---------- Sections ---------- */
.section{ padding:var(--section) 0; }
.section-head{ max-width:720px; margin-bottom:56px; }
.section-head h2{ font-family:var(--display); font-weight:500; letter-spacing:-.03em; font-size:clamp(28px, 3.6vw, 46px); line-height:1.08; }
.section-head p{ margin-top:16px; color:var(--muted); font-size:18px; max-width:52ch; }

/* ---------- USP strip ---------- */
.usp{ padding:56px 0 0; }
.usp ul{ display:grid; grid-template-columns:1fr; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.usp li{ padding:22px 0; border-bottom:1px solid var(--line); }
.usp li:last-child{ border-bottom:0; }
.usp strong{ display:block; font-weight:600; font-size:16px; margin-bottom:4px; }
.usp span{ color:var(--muted); font-size:15px; }
@media (min-width:700px){
  .usp ul{ grid-template-columns:repeat(2,1fr); }
  .usp li{ padding:28px 28px 28px 0; border-bottom:0; }
  .usp li:nth-child(odd){ border-right:1px solid var(--line); }
  .usp li:nth-child(even){ padding-left:28px; }
  .usp li:nth-child(-n+2){ border-bottom:1px solid var(--line); }
}
@media (min-width:1000px){
  .usp ul{ grid-template-columns:repeat(4,1fr); }
  .usp li{ border-bottom:0 !important; border-right:1px solid var(--line); padding:32px 28px; }
  .usp li:first-child{ padding-left:0; }
  .usp li:last-child{ border-right:0; padding-right:0; }
}

/* ---------- Products ---------- */
.products{ display:grid; grid-template-columns:1fr; gap:20px; }
@media (min-width:640px){ .products{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1080px){ .products{ grid-template-columns:repeat(4,1fr); } }
.product{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  display:flex; flex-direction:column; transition:border-color .25s ease, transform .25s ease;
}
.product:hover{ border-color:var(--line-strong); transform:translateY(-3px); }
.product-media{ aspect-ratio:4/5; overflow:hidden; background:#0F0F11; }
.product-media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.product-media img.contain{ object-fit:contain; background:#141416; padding:12%; }
.product:hover .product-media img{ transform:scale(1.03); }
.product-body{ padding:22px 22px 24px; display:flex; flex-direction:column; gap:10px; flex:1; }
.product h3{ font-size:19px; font-weight:600; }
.product-spec{ color:var(--muted); font-size:15px; line-height:1.5; }
.product-foot{ margin-top:auto; padding-top:18px; display:flex; align-items:flex-end; justify-content:space-between; gap:12px; border-top:1px solid var(--line); }
.price{ font-family:var(--display); font-weight:700; letter-spacing:-.03em; font-size:30px; line-height:1; font-variant-numeric:tabular-nums; }
.price small{ display:block; font-family:var(--body); font-weight:600; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.product-link{ font-size:14px; font-weight:600; color:var(--text); display:inline-flex; align-items:center; gap:6px; white-space:nowrap; border-bottom:1px solid var(--line-strong); padding-bottom:2px; transition:border-color .2s; }
.product-link:hover{ border-color:#fff; }
.product-link svg{ width:14px; height:14px; }
.combo{
  margin-top:20px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 24px;
  padding:20px 24px; border:1px dashed var(--line-strong); border-radius:var(--radius);
}
.combo p{ color:var(--text-soft); font-size:15px; }
.combo p strong{ color:var(--text); }
.combo .price{ font-size:24px; }

/* ---------- Package ---------- */
.package{
  background:var(--surface); border:1px solid var(--line); border-radius:20px; overflow:hidden;
  display:grid; grid-template-columns:1fr;
}
@media (min-width:900px){ .package{ grid-template-columns:1.1fr 1fr; } }
.package-body{ padding:40px 28px; display:flex; flex-direction:column; gap:28px; }
@media (min-width:900px){ .package-body{ padding:64px 56px; } }
.package h2{ font-family:var(--display); font-weight:500; letter-spacing:-.03em; font-size:clamp(28px, 3.4vw, 44px); line-height:1.08; }
.package-lead{ color:var(--muted); font-size:17px; max-width:46ch; margin-top:16px; }
.checklist{ display:grid; gap:12px; }
.checklist li{ display:flex; gap:14px; align-items:flex-start; font-size:16px; }
.checklist svg{ width:20px; height:20px; flex:none; margin-top:3px; }
.package-price{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:16px 24px; padding-top:28px; border-top:1px solid var(--line); }
.package-price .big{ font-family:var(--display); font-weight:700; letter-spacing:-.04em; font-size:clamp(52px, 6vw, 84px); line-height:.95; }
.package-price .was{ color:var(--muted); font-size:16px; text-decoration:line-through; }
.package-price .tagwrap{ margin-top:8px; }
.tag{
  display:inline-flex; align-items:center; height:30px; padding:0 12px; border-radius:999px; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  background:transparent; border:1px solid var(--line-strong); color:var(--text); position:relative;
}
.tag::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--spectrum); margin-right:8px; }
.package-note{ color:var(--muted); font-size:14px; }
.package-ctas{ display:flex; flex-wrap:wrap; gap:12px; }
.package-media{ position:relative; min-height:320px; }
.package-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.package-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, var(--surface) 0%, rgba(21,21,23,0) 30%); display:none; }
@media (min-width:900px){ .package-media::after{ display:block; } }

/* ---------- Toepassingen ---------- */
.uses{ display:grid; grid-template-columns:1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
@media (min-width:640px){ .uses{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1080px){ .uses{ grid-template-columns:repeat(4,1fr); } }
.use{ background:var(--bg); padding:36px 28px 40px; display:flex; flex-direction:column; gap:14px; min-height:240px; transition:background .25s; }
.use:hover{ background:var(--surface); }
.use .label{ color:var(--muted); }
.use h3{ font-size:22px; font-weight:600; margin-top:auto; }
.use p{ color:var(--muted); font-size:15px; }

/* ---------- Video ---------- */
.video-section .section-head{ margin-bottom:40px; }
.video{ position:relative; aspect-ratio:16/9; max-width:100%; border-radius:20px; overflow:hidden; border:1px solid var(--line); background:#000; }
.video img{ width:100%; height:100%; object-fit:cover; opacity:.85; transition:opacity .3s; }
.video:hover img{ opacity:1; }
.video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-play{
  position:absolute; inset:0; width:100%; display:flex; align-items:center; justify-content:center;
  background:transparent; border:0; cursor:pointer; color:#fff; padding:0;
}
.video-play span{
  display:inline-flex; align-items:center; gap:14px; height:64px; padding:0 28px 0 22px; border-radius:999px;
  background:rgba(11,11,12,.72); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid var(--line-strong);
  font-weight:600; font-size:16px; transition:background .2s, color .2s;
}
.video-play svg{ width:18px; height:18px; }
.video-play:hover span{ background:#fff; color:#0B0B0C; }
.video-play:focus-visible{ outline:none; }
.video-play:focus-visible span{ outline:2px solid #fff; outline-offset:3px; }

/* ---------- Bezorging ---------- */
.delivery{ display:grid; grid-template-columns:1fr; gap:40px; align-items:center; }
@media (min-width:900px){ .delivery{ grid-template-columns:1fr 1fr; gap:72px; } }
.delivery-text{ display:flex; flex-direction:column; gap:20px; }
.delivery-text p{ color:var(--text-soft); max-width:50ch; }
.delivery-text p strong{ color:var(--text); font-weight:600; }
.delivery-facts{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:8px; }
.fact{ border:1px solid var(--line); border-radius:12px; padding:18px 18px 16px; }
.fact .display{ font-size:28px; font-weight:700; line-height:1; margin-bottom:8px; }
.fact .label{ font-size:11px; }
.delivery-media{ position:relative; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); aspect-ratio:4/5; max-height:620px; }
.delivery-media img{ width:100%; height:100%; object-fit:cover; object-position:center 60%; }
.delivery-caption{
  position:absolute; left:18px; bottom:18px; right:18px; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px; background:rgba(11,11,12,.82); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid var(--line); border-radius:12px;
}
.delivery-caption span{ font-weight:600; font-size:15px; }
.badge-radius{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  width:64px; height:64px; border-radius:50%; border:1px solid var(--line-strong); background:var(--bg); flex:none;
}
.badge-radius b{ font-family:var(--display); font-weight:700; font-size:16px; line-height:1; letter-spacing:-.02em; }
.badge-radius i{ font-style:normal; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:3px; }

/* ---------- Beschikbaarheid ---------- */
.availability{ display:grid; grid-template-columns:1fr; gap:32px; }
@media (min-width:900px){ .availability{ grid-template-columns:1fr 1.4fr; gap:64px; align-items:start; } }
.availability .section-head{ margin-bottom:0; }
.availability-ctas{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.calendar-embed{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:10px; }
.calendar-embed iframe{ display:block; width:100%; aspect-ratio:4/3; min-height:420px; border:0; border-radius:10px; background:#fff; }
.calendar-note{ padding:14px 10px 4px; font-size:13px; color:var(--muted); }

/* ---------- Contact ---------- */
.contact{ display:grid; grid-template-columns:1fr; gap:20px; }
@media (min-width:900px){ .contact{ grid-template-columns:repeat(3,1fr); } }
.contact-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px; display:flex; flex-direction:column; gap:12px; min-height:220px; }
.contact-card .label{ margin-bottom:6px; }
.contact-card .big{ font-family:var(--display); font-weight:500; font-size:22px; letter-spacing:-.02em; }
.contact-card p{ color:var(--muted); font-size:15px; }
.contact-card .links{ margin-top:auto; display:flex; flex-wrap:wrap; gap:10px; padding-top:16px; }

/* ---------- Reserveren ---------- */
.booking{ display:grid; grid-template-columns:1fr; gap:32px; padding-bottom:var(--section); }
@media (min-width:900px){ .booking{ grid-template-columns:1.5fr 1fr; gap:48px; align-items:start; } }
.form-card{ background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:28px 20px; display:flex; flex-direction:column; gap:36px; }
@media (min-width:640px){ .form-card{ padding:40px; } }
.form-card fieldset{ border:0; margin:0; padding:0; min-width:0; display:flex; flex-direction:column; gap:18px; }
.form-card legend{ padding:0; margin-bottom:4px; font-weight:600; font-size:18px; }
.form-card legend small{ display:block; font-weight:400; font-size:14px; color:var(--muted); margin-top:4px; }
.form-grid{ display:grid; gap:18px; grid-template-columns:1fr; }
@media (min-width:640px){ .form-grid{ grid-template-columns:1fr 1fr; } .form-grid .span{ grid-column:1 / -1; } }
.field{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.field label{ font-size:14px; font-weight:600; }
.field label small{ font-weight:400; color:var(--muted); }
.field input, .field textarea{
  width:100%; background:var(--bg); border:1px solid var(--line-strong); border-radius:12px; color:var(--text);
  font:inherit; font-size:16px; padding:14px 16px; transition:border-color .2s;
}
.field input::placeholder, .field textarea::placeholder{ color:rgba(255,255,255,.35); }
.field input:hover, .field textarea:hover{ border-color:rgba(255,255,255,.4); }
.field input:focus-visible, .field textarea:focus-visible{ outline:2px solid #fff; outline-offset:2px; border-color:#fff; border-radius:12px; }
.field input[type="date"]{ color-scheme:dark; }
.field textarea{ resize:vertical; min-height:120px; }
.field .error{ display:none; font-size:13px; color:#FF9A86; }
.field .hint{ font-size:13px; color:var(--muted); }
.field.invalid .error{ display:block; }
.field.invalid input{ border-color:#FF5A3C; }
.choices{ display:grid; gap:10px; }
.choice{ display:flex; gap:14px; align-items:flex-start; padding:16px; border:1px solid var(--line); border-radius:12px; cursor:pointer; transition:border-color .2s, background .2s; background:var(--bg); }
.choice:hover{ border-color:var(--line-strong); }
.choice:has(input:checked){ border-color:#fff; background:var(--surface-2); }
.choice:has(input:disabled){ opacity:.4; cursor:not-allowed; }
.choice:has(input:focus-visible){ outline:2px solid #fff; outline-offset:2px; }
.choice input{ margin:3px 0 0; accent-color:#fff; width:18px; height:18px; flex:none; }
.choice-body{ flex:1; display:flex; justify-content:space-between; gap:12px; min-width:0; }
.choice strong{ display:block; font-size:15px; }
.choice span{ color:var(--muted); font-size:14px; }
.choice .p{ font-family:var(--display); font-weight:700; font-size:17px; white-space:nowrap; letter-spacing:-.02em; }
.choice.featured{ border-color:var(--line-strong); }
.choice.featured .tag{ margin-top:8px; height:26px; font-size:11px; }
.seg{ display:flex; border:1px solid var(--line-strong); border-radius:999px; padding:4px; background:var(--bg); }
.seg label{ position:relative; cursor:pointer; flex:1; min-width:0; }
.seg input{ position:absolute; opacity:0; inset:0; margin:0; }
.seg span{ display:flex; width:100%; min-height:40px; padding:8px 14px; align-items:center; justify-content:center; text-align:center; line-height:1.25; border-radius:999px; font-weight:600; font-size:14px; color:var(--muted); transition:background .2s, color .2s; }
.seg input:checked + span{ background:#fff; color:#0B0B0C; }
.seg input:focus-visible + span{ outline:2px solid #fff; outline-offset:2px; }
.form-foot{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 24px; padding-top:28px; border-top:1px solid var(--line); }
.form-foot p{ color:var(--muted); font-size:14px; max-width:46ch; }
.form-success{ background:var(--surface); border:1px solid var(--line-strong); border-radius:20px; padding:40px 28px; display:flex; flex-direction:column; gap:16px; }
.form-success h2{ font-family:var(--display); font-weight:500; letter-spacing:-.03em; font-size:clamp(24px, 3vw, 36px); }
.form-success p{ color:var(--text-soft); max-width:52ch; }
.form-success .hero-ctas{ margin-top:8px; }

.aside{ display:flex; flex-direction:column; gap:20px; }
@media (min-width:900px){ .aside{ position:sticky; top:96px; } }
.summary{ background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:28px; }
.summary .label{ display:block; margin-bottom:14px; }
.summary ul{ display:grid; gap:10px; margin-bottom:18px; }
.summary li{ display:flex; justify-content:space-between; gap:12px; font-size:15px; color:var(--text-soft); }
.summary li span:last-child{ font-variant-numeric:tabular-nums; white-space:nowrap; }
.summary li.empty{ color:var(--muted); }
.summary .total{ display:flex; justify-content:space-between; align-items:flex-end; gap:12px; padding-top:18px; border-top:1px solid var(--line); }
.summary .total .label{ margin:0 0 6px; }
.summary .total .big{ font-family:var(--display); font-weight:700; font-size:36px; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums; }
.summary .fine{ margin-top:14px; font-size:13px; color:var(--muted); }
.steps-card{ border:1px solid var(--line); border-radius:20px; padding:8px 28px 12px; }
.step{ display:flex; gap:18px; padding:18px 0; border-top:1px solid var(--line); }
.step:first-child{ border-top:0; }
.step b{ font-family:var(--display); font-weight:500; font-size:13px; color:var(--muted); flex:none; width:24px; padding-top:3px; }
.step strong{ display:block; font-size:15px; margin-bottom:2px; }
.step span{ font-size:14px; color:var(--muted); }
.aside .contact-card{ min-height:0; }

/* ---------- SEO-tekst, FAQ, landingspagina's ---------- */
.prose{ max-width:68ch; display:flex; flex-direction:column; gap:18px; color:var(--text-soft); }
.prose h2, .prose h3{ color:var(--text); }
.prose h3{ font-size:20px; margin-top:8px; }
.prose strong{ color:var(--text); font-weight:600; }
.prose a{ text-decoration:underline; text-underline-offset:3px; color:var(--text); }
.prose ul{ display:grid; gap:8px; padding-left:18px; list-style:disc; }
.seo-grid{ display:grid; grid-template-columns:1fr; gap:48px; align-items:start; }
@media (min-width:900px){ .seo-grid{ grid-template-columns:1.1fr .9fr; gap:72px; } }
.linkcards{ display:grid; gap:12px; grid-template-columns:1fr; }
@media (min-width:640px){ .linkcards{ grid-template-columns:1fr 1fr; } }
.linkcard{ display:flex; flex-direction:column; gap:6px; padding:20px 22px; border:1px solid var(--line); border-radius:12px; background:var(--surface); transition:border-color .2s; }
.linkcard:hover{ border-color:#fff; }
.linkcard strong{ font-size:16px; }
.linkcard span{ color:var(--muted); font-size:14px; }
.faq{ display:grid; gap:10px; max-width:820px; }
.faq details{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:0 22px; }
.faq summary{ cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 0; font-weight:600; font-size:16px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-family:var(--display); font-size:20px; line-height:1; color:var(--muted); flex:none; }
.faq details[open] summary::after{ content:"\2013"; }
.faq p{ padding:0 0 20px; color:var(--text-soft); font-size:15px; }
.crumbs{ display:flex; flex-wrap:wrap; gap:8px; font-size:13px; color:var(--muted); margin-bottom:20px; }
.crumbs a:hover{ color:var(--text); }
.places{ display:flex; flex-wrap:wrap; gap:8px; }
.places li{ padding:8px 14px; border:1px solid var(--line); border-radius:999px; font-size:14px; color:var(--text-soft); }
.landing-hero{ display:grid; gap:40px; align-items:center; }
@media (min-width:900px){ .landing-hero{ grid-template-columns:1.1fr .9fr; gap:64px; } }
.landing-hero .media{ border-radius:20px; overflow:hidden; border:1px solid var(--line); aspect-ratio:4/5; max-height:560px; }
.landing-hero .media img{ width:100%; height:100%; object-fit:cover; }
.landing-hero .media img.contain{ object-fit:contain; background:#141416; padding:10%; }
.price-row{ display:flex; flex-wrap:wrap; gap:16px 28px; align-items:center; padding:22px 26px; border:1px solid var(--line-strong); border-radius:var(--radius); margin-top:8px; }
.price-row .price{ font-size:34px; }
.price-row p{ color:var(--muted); font-size:14px; flex:1; min-width:200px; }
.cta-band{ background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:40px 28px; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:24px; }
@media (min-width:900px){ .cta-band{ padding:48px 56px; } }
.cta-band h2{ font-family:var(--display); font-weight:500; letter-spacing:-.03em; font-size:clamp(24px, 3vw, 36px); max-width:20ch; }
.cta-band p{ color:var(--muted); margin-top:10px; max-width:48ch; }

/* ---------- Opblazen (3D op scroll) ---------- */
.inflate{ position:relative; height:320vh; }
.inflate-sticky{ position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; }
.inflate-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.inflate-hud{ position:absolute; left:var(--gutter); top:96px; display:flex; flex-direction:column; gap:6px; }
.inflate-pct{ font-size:clamp(34px,5vw,64px); font-weight:700; line-height:1; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.inflate-steps{ position:absolute; left:var(--gutter); right:var(--gutter); bottom:40px; pointer-events:none; }
.inflate-step{ position:absolute; left:0; bottom:0; max-width:440px; opacity:0; transform:translateY(12px); transition:opacity .2s ease-out, transform .2s ease-out; }
.inflate-step.on{ opacity:1; transform:none; pointer-events:auto; transition:opacity .45s cubic-bezier(0.215, 0.61, 0.355, 1) .22s, transform .45s cubic-bezier(0.215, 0.61, 0.355, 1) .22s; }
.inflate-step .label{ display:block; margin-bottom:10px; }
.inflate-step h2{ font-weight:500; font-size:clamp(28px,3.6vw,46px); line-height:1.05; margin-bottom:12px; }
.inflate-step p{ color:var(--text-soft); max-width:40ch; }
.inflate-hint{ position:absolute; left:50%; bottom:24px; transform:translateX(-50%); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); transition:opacity .4s; white-space:nowrap; }
.inflate-hint.off{ opacity:0; }
@media (min-width:900px){
  .inflate-steps{ bottom:auto; top:50%; right:var(--gutter); left:auto; width:min(420px, 36vw); transform:translateY(-50%); }
  .inflate-step{ bottom:auto; top:0; }
  .inflate-hud{ top:120px; }
}
@media (max-width:899px){
  .inflate-canvas{ top:-6vh; height:78vh; }
  .inflate-step h2{ font-size:26px; }
  .inflate-step p{ font-size:15px; }
}

/* ---------- Clubsfeer: licht, rook, beat, reveals ----------
   Alleen transform en opacity worden geanimeerd; alles staat uit bij prefers-reduced-motion. */
:root{ --ease-out:cubic-bezier(0.215, 0.61, 0.355, 1); --ease-move:cubic-bezier(0.645, 0.045, 0.355, 1); }

/* Zwevende clublichten achter de hele pagina */
.club-lights{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.club-lights i{ position:absolute; width:70vmax; height:70vmax; border-radius:50%; opacity:.16; will-change:transform;
  background:radial-gradient(circle at center, var(--c) 0%, transparent 60%); }
.club-lights i:nth-child(1){ --c:#3C8CFF; left:-25vmax; top:-20vmax; animation:drift-a 38s var(--ease-move) infinite alternate; }
.club-lights i:nth-child(2){ --c:#B05CFF; right:-30vmax; top:10vmax; animation:drift-b 46s var(--ease-move) infinite alternate; }
.club-lights i:nth-child(3){ --c:#FF5A3C; left:20vmax; bottom:-40vmax; opacity:.11; animation:drift-c 52s var(--ease-move) infinite alternate; }
@keyframes drift-a{ to{ transform:translate(22vmax, 18vmax); } }
@keyframes drift-b{ to{ transform:translate(-24vmax, 26vmax); } }
@keyframes drift-c{ to{ transform:translate(-18vmax, -22vmax); } }

/* Lichtbundels en rook in de hero */
.hero-fx{ position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.beam{ position:absolute; left:50%; top:-14%; width:min(26vw, 340px); height:150%; margin-left:calc(-1 * min(13vw, 170px));
  transform-origin:50% 0; mix-blend-mode:screen; opacity:.75; will-change:transform; filter:blur(10px);
  background:linear-gradient(180deg, var(--c) 0%, color-mix(in srgb, var(--c) 45%, transparent) 50%, transparent 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent); mask-image:linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent);
}
.beam-1{ --c:rgba(60,140,255,.85); animation:sweep-1 11s var(--ease-move) infinite alternate; }
.beam-2{ --c:rgba(176,92,255,.8); animation:sweep-2 14s var(--ease-move) infinite alternate; }
.beam-3{ --c:rgba(60,224,122,.6); animation:sweep-3 9s var(--ease-move) infinite alternate; }
@keyframes sweep-1{ from{ transform:rotate(-26deg); } to{ transform:rotate(14deg); } }
@keyframes sweep-2{ from{ transform:rotate(22deg); } to{ transform:rotate(-18deg); } }
@keyframes sweep-3{ from{ transform:rotate(-8deg); } to{ transform:rotate(30deg); } }
.fog{ position:absolute; left:-20%; right:-20%; bottom:-10%; height:60%; opacity:.5; will-change:transform; mix-blend-mode:screen;
  background:radial-gradient(60% 70% at 30% 80%, rgba(255,255,255,.14), transparent 70%), radial-gradient(50% 60% at 75% 90%, rgba(255,255,255,.1), transparent 70%); }
.fog-2{ animation:fog-b 34s var(--ease-move) infinite alternate; opacity:.35; }
.fog-1{ animation:fog-a 26s var(--ease-move) infinite alternate; }
@keyframes fog-a{ from{ transform:translateX(-6%); } to{ transform:translateX(7%); } }
@keyframes fog-b{ from{ transform:translateX(5%) scale(1.05); } to{ transform:translateX(-6%) scale(1); } }

/* De geluidsgolf klopt mee op de beat (twee tellen bij 128 bpm) */
.wave path.anim{ transform-box:fill-box; transform-origin:center; animation:wave-flow 6s linear infinite, beat 0.94s var(--ease-out) infinite; }
@keyframes beat{ 0%{ transform:scaleY(1); } 14%{ transform:scaleY(1.32); } 42%{ transform:scaleY(.96); } 70%{ transform:scaleY(1); } 100%{ transform:scaleY(1); } }

/* Binnenkomen bij laden en bij scrollen */
.js .hero-logo, .js .hero h1, .js .hero p, .js .hero-ctas, .js .hero-meta{ opacity:0; transform:translateY(16px); animation:rise .7s var(--ease-out) forwards; }
.js .hero h1{ animation-delay:.08s } .js .hero p{ animation-delay:.16s } .js .hero-ctas{ animation-delay:.24s } .js .hero-meta{ animation-delay:.32s }
@keyframes rise{ to{ opacity:1; transform:none; } }
.js .reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out); transition-delay:calc(var(--i, 0) * 70ms); }
.js .reveal.in{ opacity:1; transform:none; }
.btn:active{ transform:scale(.97); }
.product:hover .product-media::after{ opacity:1; transform:translateX(60%); }
.product-media{ position:relative; }
.product-media::after{ content:""; position:absolute; inset:0; opacity:0; transform:translateX(-60%); transition:transform .9s var(--ease-move), opacity .4s ease; pointer-events:none;
  background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.08) 50%, transparent 70%); }

@media (max-width:700px){ .beam{ width:40vw; margin-left:-20vw; opacity:.45; } .club-lights i{ opacity:.12; } }
@media (prefers-reduced-motion:reduce){
  .club-lights i, .beam, .fog{ animation:none; }
  .wave path.anim{ animation:none; }
  .js .hero-logo, .js .hero h1, .js .hero p, .js .hero-ctas, .js .hero-meta{ animation:none; opacity:1; transform:none; }
  .js .reveal{ transition:none; opacity:1; transform:none; }
  .product-media::after{ transition:none; }
}

/* ---------- Footer ---------- */
footer{ border-top:1px solid var(--line); padding:64px 0 36px; }
.foot-grid{ display:grid; grid-template-columns:1fr; gap:40px; }
@media (min-width:700px){ .foot-grid{ grid-template-columns:1fr 1fr; gap:40px; } }
@media (min-width:1000px){ .foot-grid{ grid-template-columns:1.4fr 1fr 1.3fr 1.2fr 1fr; gap:32px; } }
.foot-col a{ font-size:14px; }
.foot-brand img{ height:36px; width:auto; margin-bottom:20px; }
.foot-brand p{ color:var(--muted); max-width:36ch; }
.foot-col .label{ margin-bottom:16px; display:block; }
.foot-col ul{ display:grid; gap:10px; }
.foot-col a{ color:var(--text-soft); font-size:15px; transition:color .2s; }
.foot-col a:hover{ color:#fff; }
.foot-col p{ color:var(--text-soft); font-size:15px; }
.foot-bottom{ margin-top:56px; padding-top:24px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:12px 24px; justify-content:space-between; color:var(--muted); font-size:13px; }
.foot-bottom a{ color:var(--text-soft); text-decoration:underline; text-underline-offset:3px; }
.foot-bottom a:hover{ color:#fff; }