.club-page { min-width:0; }
.club-container { width:min(100%,1200px); margin-inline:auto; padding-inline:max(28px,env(safe-area-inset-left)); padding-right:max(28px,env(safe-area-inset-right)); }
.club-container > .brand { display:inline-block; margin-top:28px; }
.club-experience { padding:5rem 0; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(280px,.95fr); gap:clamp(2rem,5vw,4rem); align-items:center; }
.club-copy { min-width:0; }
.club-copy > p { max-width:62ch; }
.club-experience h1 { max-width:13ch; font-size:clamp(40px,5.4vw,68px); overflow-wrap:anywhere; }
.club-experience h2 { max-width:12ch; }
.club-perks { display:grid; gap:.75rem; max-width:62ch; margin:1.5rem 0; padding:0; list-style:none; color:var(--muted); }
.club-perks li { position:relative; min-width:0; padding-left:1.45rem; overflow-wrap:anywhere; }
.club-perks li::before { content:'✦'; position:absolute; left:0; color:var(--gold); }
.club-perks li > strong,.club-perks li > span { display:block; }
.club-perks li > strong { color:var(--text); margin-bottom:.2rem; }
.club-card-stage { min-width:0; perspective:1100px; min-height:330px; padding-inline:10px; display:grid; place-items:center; cursor:grab; touch-action:none; outline:none; }
.club-card-stage:focus-visible { outline:2px solid #d9b642; outline-offset:8px; border-radius:22px; }
.club-card-stage.is-dragging, .club-card-stage:active { cursor:grabbing; }
.club-metal-card { width:min(100%,460px); aspect-ratio:1.586; border-radius:22px; padding:2rem; color:#fff8e4; background:linear-gradient(135deg,#141216 0%,#5b4220 38%,#d2a743 58%,#17131a 100%); box-shadow:0 30px 70px #0009, inset 0 1px #fff8; transform:rotateX(var(--card-rotate-x, -8deg)) rotateY(var(--card-rotate-y, 12deg)); transform-style:preserve-3d; transition:transform .12s ease-out; position:relative; overflow:hidden; }
.club-metal-card::before { content:''; position:absolute; inset:-45%; background:linear-gradient(110deg,transparent 36%,#fff8 49%,transparent 62%); transform:translateX(-40%) rotate(10deg); animation:clubShine 6s ease-in-out infinite; }
.club-metal-card > * { position:relative; z-index:1; }
.club-metal-card small { letter-spacing:.16em; font-weight:800; color:#1b1204; }
.club-metal-card strong { display:block; font-size:2rem; letter-spacing:.08em; margin-top:3.8rem; text-shadow:0 2px #1c1305; }
.club-metal-card span { display:block; margin-top:.4rem; color:#211807; font-weight:700; }
.club-metal-card em { position:absolute; right:2rem; bottom:1.7rem; font-style:normal; font-size:1.4rem; color:#241804; }
html[data-theme="light"] .club-metal-card { color:#fffafd; border:1px solid rgba(180,132,38,.76); background:linear-gradient(135deg,#4b2748 0%,#a66087 32%,#e6c4d5 52%,#d3a43a 71%,#6c385e 100%); box-shadow:0 28px 58px rgba(113,63,101,.34),inset 0 1px rgba(255,255,255,.72),inset 0 -1px rgba(108,55,87,.32); }
html[data-theme="light"] .club-metal-card::before { background:linear-gradient(110deg,transparent 35%,rgba(255,251,254,.86) 49%,rgba(255,232,195,.68) 55%,transparent 66%); }
html[data-theme="light"] .club-metal-card small, html[data-theme="light"] .club-metal-card span, html[data-theme="light"] .club-metal-card em { color:#fff7fb; text-shadow:0 1px 3px rgba(67,25,57,.55); }
html[data-theme="light"] .club-metal-card strong { color:#fffdf9; text-shadow:0 2px 2px rgba(70,28,57,.55),0 0 18px rgba(255,245,214,.38); }
.club-progress { margin-top:1.25rem; padding:1.25rem; border:1px solid #d9b64266; background:#151419cc; border-radius:14px; }
.club-progress[hidden] { display:none; }
.club-progress-bar { height:10px; border-radius:99px; background:#ffffff1a; overflow:hidden; margin:.8rem 0 .45rem; }
.club-progress-bar i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#d2ad37,#fff0a5); width:0; transition:width .5s ease; }
html[data-theme="light"] .club-progress { color:#3a1e31; border-color:rgba(150,104,181,.42); background:linear-gradient(128deg,rgba(255,250,253,.98),rgba(244,230,248,.96) 52%,rgba(234,222,247,.98)); box-shadow:0 16px 34px rgba(133,86,137,.14); }
html[data-theme="light"] .club-progress strong { color:#4d2947; }
html[data-theme="light"] .club-progress p { color:#765568; }
html[data-theme="light"] .club-progress b { color:#a87417; }
html[data-theme="light"] .club-progress-bar { height:12px; border:1px solid rgba(147,94,166,.18); background:rgba(154,108,182,.15); box-shadow:inset 0 1px 3px rgba(88,44,91,.12); }
html[data-theme="light"] .club-progress-bar i { background:linear-gradient(90deg,#b886bc 0%,#d6b6dc 45%,#d4ad37 100%); box-shadow:0 0 12px rgba(174,116,181,.38); }
.sofa-reveal { padding:4rem 0 6rem; }
.sofa-reveal-frame { position:relative; max-width:900px; aspect-ratio:16/8; overflow:hidden; border:1px solid #d9b64266; border-radius:18px; background:#110e12; }
.sofa-reveal-frame img { width:100%; height:100%; object-fit:cover; display:block; }
.sofa-clean { position:absolute; inset:0; clip-path:inset(0 50% 0 0); filter:brightness(1.12) saturate(1.12); }
.sofa-dirty { filter:sepia(.6) saturate(.65) brightness(.48); }
.sofa-divider { position:absolute; top:0; bottom:0; left:50%; width:3px; background:#e1ba40; box-shadow:0 0 18px #d5aa32; pointer-events:none; }
.sofa-range { width:100%; margin-top:1rem; accent-color:#d9b642; }
.sofa-before-after { max-width:760px; margin:1.35rem auto 0; aspect-ratio:1.22 / 1; border:0; border-radius:0; background:#f8f6f3; isolation:isolate; touch-action:none; }
.sofa-before, .sofa-after { position:absolute; inset:0; background-repeat:no-repeat; background-position:center; background-size:cover; }
.sofa-before { background-image:url('assets/sofa-before.jpg?v=20260827-stains'); }
.sofa-after { background-image:url('assets/sofa-after.jpg?v=20260827-natural'); clip-path:inset(0 0 0 50%); }
.sofa-before-after::before, .sofa-before-after::after { position:absolute; z-index:3; top:16px; padding:7px 11px; border-radius:999px; background:#0c0b0ddd; color:#fff8e4; font-size:12px; font-weight:800; letter-spacing:.08em; pointer-events:none; }
.sofa-before-after::before { content:'PRZED'; left:16px; }
.sofa-before-after::after { content:'PO'; right:16px; }
.sofa-before-after .sofa-divider { z-index:4; left:50%; width:3px; }
.sofa-before-after .sofa-divider span { position:absolute; top:50%; left:50%; display:grid; width:44px; height:44px; place-items:center; border:2px solid #fff0b5; border-radius:50%; background:#171216e8; color:#fff0b5; font-size:20px; transform:translate(-50%, -50%); box-shadow:0 4px 20px #0009; }
.sofa-before-after .sofa-range { position:absolute; z-index:5; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; }
.sofa-reveal-caption { max-width:760px; margin:.9rem auto 0; color:var(--muted); text-align:center; }
@keyframes clubShine { 0%,20% { transform:translateX(-55%) rotate(10deg); } 62%,100% { transform:translateX(55%) rotate(10deg); } }
@media (max-width:900px) {
  .club-container { padding-inline:max(20px,env(safe-area-inset-left)); padding-right:max(20px,env(safe-area-inset-right)); }
  .club-container > .brand { margin-top:22px; }
  .club-experience { grid-template-columns:minmax(0,1fr); padding:3.25rem 0 4rem; gap:1.75rem; }
  .club-experience h1 { max-width:15ch; font-size:clamp(34px,10vw,44px); line-height:1.06; }
  .club-copy { width:min(100%,640px); margin-inline:auto; }
  .club-card-stage { width:min(100%,500px); min-height:clamp(230px,72vw,330px); margin-inline:auto; padding-inline:10px; touch-action:pan-y; }
  .club-metal-card { width:calc(100% - 12px); padding:clamp(1.25rem,6vw,1.75rem); }
  .club-metal-card strong { margin-top:clamp(2rem,10vw,2.8rem); font-size:clamp(1.35rem,6vw,1.7rem); }
}
@media (max-width:420px) {
  .club-container { padding-inline:max(18px,env(safe-area-inset-left)); padding-right:max(18px,env(safe-area-inset-right)); }
  .club-experience { padding-top:2.75rem; }
  .club-copy > .button { width:min(280px,calc(100% - 72px)); padding-inline:14px; text-align:center; }
  .club-metal-card small { font-size:.7rem; }
  .club-metal-card span { font-size:.78rem; }
  .club-metal-card em { right:1.25rem; bottom:1.15rem; font-size:1.15rem; }
}