/* Black Card Verified — blackcardverified.com
   System: black field, giant edge-to-edge wordmark, grow-in shape parade,
   spinning sticker, sticky stacking color deck, bouncy staggered pop-ins. */

:root{
  --bg:#0A0A0B;
  --gold:#F5C84C;
  --wine:#8E1F3F;
  --purple:#6C4BF4;
  --cream:#F6EFE3;
  --ink:#0A0A0B;
  --d:'Baloo 2',system-ui,sans-serif;
  --s:'Space Grotesk',-apple-system,system-ui,sans-serif;
  --pop:cubic-bezier(.34,1.56,.64,1);
  --quart:cubic-bezier(.165,.84,.44,1);
  --gut:clamp(20px,5vw,64px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:#fff;font-family:var(--s);
  font-size:clamp(15px,1.05vw,17px);line-height:1.6;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--gold);color:var(--ink)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--gut)}

/* ── nav: hides on scroll down, returns on scroll up ── */
.nav{position:fixed;top:0;left:0;right:0;z-index:90;display:flex;align-items:center;
  justify-content:space-between;padding:16px var(--gut);
  transition:transform .45s var(--quart)}
.nav.hid{transform:translateY(-110%)}
.nav .brand{display:flex;align-items:center;gap:10px;font-family:var(--d);font-weight:800;font-size:17px}
.nav .brand img{width:34px;height:34px;border-radius:9px}
.nav .cta{background:var(--gold);color:var(--ink);font-weight:700;font-size:14px;
  padding:10px 20px;border-radius:99px;transition:transform .35s var(--pop)}
.nav .cta:hover{transform:scale(1.07)}

/* ── reveals ── */
.rv{opacity:0;transform:translateY(30px);transition:opacity .8s ease-out,transform .8s var(--quart)}
.rv.in{opacity:1;transform:none}
.pop{opacity:0;transform:translateY(26px) scale(.92);
  transition:opacity .35s ease-out,transform .5s var(--pop)}
.pop.in{opacity:1;transform:none}

/* ── stacking deck ── */
.deck section{position:sticky;top:0;min-height:100svh;display:flex;flex-direction:column;
  justify-content:center;overflow:hidden;border-radius:34px 34px 0 0;
  box-shadow:0 -24px 60px rgba(0,0,0,.35)}
.deck section:first-child{border-radius:0}
.s-black{background:var(--bg)}
.s-gold{background:var(--gold);color:var(--ink)}
.s-cream{background:var(--cream);color:var(--ink)}
.s-wine{background:var(--wine);color:var(--cream)}
.s-purple{background:var(--purple);color:#fff}

/* ── hero ── */
.hero{padding-top:86px}
.hero .kicker{max-width:340px;font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.75);
  margin:0 0 clamp(16px,3vh,40px) var(--gut)}
.wordmark{font-family:var(--d);font-weight:800;line-height:.82;letter-spacing:-.015em;
  color:var(--gold);text-transform:lowercase;text-align:center;user-select:none;
  font-size:clamp(70px,18.4vw,262px);white-space:nowrap}
.wordmark .l{display:inline-block;transform:translateY(110%);opacity:0;
  transition:transform 1s var(--quart),opacity .5s}
.wordmark.in .l{transform:none;opacity:1}
.hero-cta{display:flex;align-items:center;gap:16px;justify-content:center;margin:clamp(18px,3.5vh,40px) 0}
.hero-cta img{height:50px}
.hero-cta .note{font-size:13px;font-weight:600;color:rgba(255,255,255,.7)}
.badge-btn{display:inline-block;transition:transform .35s var(--pop)}
.badge-btn:hover{transform:scale(1.06)}

/* ── shape parade: bars grow in, sticker spins ── */
.parade{display:flex;align-items:flex-end;justify-content:center;gap:clamp(10px,1.8vw,22px);
  padding:0 var(--gut) clamp(20px,4vh,46px);height:clamp(150px,24vh,260px)}
.parade .bar{width:clamp(64px,9vw,150px);height:0;border-radius:999px;
  transition:height .65s ease-in-out}
.parade.in .bar{height:100%}
.parade .bar.h70{transition-delay:.08s}
.parade.in .bar.h70{height:74%}
.parade .bar.h85{transition-delay:.16s}
.parade.in .bar.h85{height:88%}
.parade .round{border-radius:34px}
.b-gold{background:var(--gold)}
.b-wine{background:var(--wine)}
.b-purple{background:var(--purple)}
.b-cream{background:var(--cream)}
.spark{width:clamp(90px,13vw,190px);align-self:center;flex:none;opacity:0;
  transform:scale(.4) rotate(-90deg);transition:transform .8s var(--pop),opacity .4s}
.parade.in .spark{opacity:1;transform:none}
@media(prefers-reduced-motion:no-preference){
  .spark svg{animation:slowspin 26s linear infinite}
}
@keyframes slowspin{to{transform:rotate(360deg)}}
.sticker{width:clamp(110px,15vw,210px);flex:none;align-self:center;position:relative;
  opacity:0;transform:scale(.5);transition:transform .7s var(--pop),opacity .4s}
.parade.in .sticker{opacity:1;transform:none}
.sticker svg{display:block;width:100%}
@media(prefers-reduced-motion:no-preference){
  .sticker svg{animation:slowspin 20s linear infinite}
}
.sticker .center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:clamp(30px,4.5vw,54px)}

/* ── statement sections ── */
.statement{font-family:var(--d);font-weight:800;line-height:.98;letter-spacing:-.01em;
  font-size:clamp(42px,7.4vw,104px);max-width:14ch;text-wrap:balance}
.statement .alt{font-style:italic;opacity:.92}
.sub{font-size:clamp(15.5px,1.3vw,19px);max-width:52ch;margin-top:20px;opacity:.85}

/* category chips */
.chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,4vh,44px);max-width:820px}
.chip{font-family:var(--d);font-weight:700;font-size:clamp(15px,1.5vw,21px);
  padding:12px 22px;border-radius:999px;border:2.5px solid var(--ink);
  background:transparent;transition:background .3s,color .3s,transform .35s var(--pop)}
.chip:hover{background:var(--ink);color:var(--gold);transform:rotate(-2deg) scale(1.05)}

/* ── expanding-columns gallery ── */
.gallery{display:flex;gap:12px;height:clamp(380px,62vh,640px);padding:0 var(--gut);
  max-width:1400px;margin:clamp(28px,4vh,48px) auto 0;width:100%}
.gcol{position:relative;flex:1;border-radius:26px;overflow:hidden;cursor:pointer;
  transition:flex .55s var(--quart);background:#141416}
.gcol img{width:100%;height:100%;object-fit:cover;object-position:top center}
.gcol .glabel{position:absolute;left:14px;bottom:12px;font-family:var(--d);font-weight:700;
  font-size:15px;color:#fff;background:rgba(10,10,11,.65);backdrop-filter:blur(8px);
  padding:7px 14px;border-radius:99px;opacity:0;transform:translateY(8px);
  transition:opacity .35s,transform .4s var(--pop);white-space:nowrap}
.gcol:hover,.gcol.on{flex:2.7}
.gcol:hover .glabel,.gcol.on .glabel{opacity:1;transform:none}
@media(max-width:760px){
  .gallery{display:flex;overflow-x:auto;scroll-snap-type:x proximity;height:64vh;
    scrollbar-width:none;gap:12px}
  .gallery::-webkit-scrollbar{display:none}
  .gcol{flex:0 0 72vw;scroll-snap-align:center}
  .gcol .glabel{opacity:1;transform:none}
}

/* ── mode cards ── */
.modes{display:grid;gap:14px;grid-template-columns:1fr;margin-top:clamp(26px,4vh,44px)}
@media(min-width:820px){.modes{grid-template-columns:repeat(5,1fr)}}
.mode{background:rgba(246,239,227,.08);border:1.5px solid rgba(246,239,227,.22);
  border-radius:22px;padding:22px 18px;transition:transform .4s var(--pop),background .3s}
.mode:hover{transform:translateY(-8px) rotate(-1deg);background:rgba(246,239,227,.14)}
.mode .mno{font-family:var(--d);font-weight:800;font-size:26px;color:var(--gold)}
.mode h3{font-family:var(--d);font-size:18px;font-weight:700;margin:6px 0 6px}
.mode p{font-size:13.5px;opacity:.8;line-height:1.55}

/* ── cert section ── */
.cert-grid{display:grid;gap:clamp(28px,5vw,64px);grid-template-columns:1fr;align-items:center}
@media(min-width:860px){.cert-grid{grid-template-columns:1.1fr .9fr}}
.phone{width:clamp(220px,23vw,280px);border-radius:38px;padding:10px;background:#0B0D12;
  box-shadow:0 34px 80px rgba(0,0,0,.45);position:relative;margin:0 auto;
  transition:transform .5s var(--quart)}
.phone::before{content:'';position:absolute;top:19px;left:50%;transform:translateX(-50%);
  width:32%;height:19px;background:#0B0D12;border-radius:10px;z-index:2}
.phone img{border-radius:29px}
.cert-grid:hover .phone{transform:translateY(-8px) rotate(1.4deg)}

/* ── final ── */
.final{text-align:center}
.final .statement{margin:0 auto}
.final .hero-cta{margin-top:clamp(24px,4vh,44px)}
footer{padding:40px var(--gut) 30px;display:flex;flex-wrap:wrap;gap:14px;
  justify-content:space-between;align-items:center;font-size:13px;color:rgba(255,255,255,.55)}
footer .links{display:flex;gap:20px;flex-wrap:wrap}
footer a:hover{color:#fff}

/* ── subpages ── */
.band{background:var(--bg);padding:clamp(120px,18vh,170px) 0 clamp(40px,6vw,70px)}
.band h1{font-family:var(--d);font-weight:800;font-size:clamp(34px,5.4vw,66px);color:var(--gold);
  line-height:1}
.band .crumb{font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.55);display:block;margin-bottom:12px}
.prose{max-width:720px;margin:0 auto;padding:clamp(40px,6vw,70px) var(--gut);
  background:var(--cream);color:var(--ink);border-radius:26px 26px 0 0}
.prose-wrap{background:var(--cream)}
.prose h2{font-family:var(--d);font-weight:800;font-size:clamp(21px,2.4vw,28px);margin:34px 0 12px}
.prose p,.prose li{color:#3A3730;margin-bottom:13px;font-size:15px}
.prose ul{padding-left:22px;margin-bottom:13px}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .rv,.pop,.wordmark .l,.spark,.sticker{opacity:1;transform:none}
  .parade .bar{height:100%}.parade .bar.h70{height:74%}.parade .bar.h85{height:88%}
}

/* ── culture notes (blog) ── */
.nav .lnk{font-weight:600;font-size:14.5px;opacity:.85;margin-left:auto;margin-right:18px}
.nav .lnk:hover{opacity:1;color:var(--gold)}
.band .lede{font-size:clamp(15.5px,1.3vw,19px);max-width:54ch;margin-top:16px;opacity:.85}
.bloglist{list-style:none;padding:0}
.bloglist li{border-bottom:2px solid rgba(10,10,11,.12)}
.bloglist a{display:block;padding:26px 0;transition:transform .3s var(--quart)}
.bloglist a:hover{transform:translateX(8px)}
.bloglist .bdate{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:#8E1F3F;font-weight:700}
.bloglist h2{font-family:var(--d);font-weight:800;font-size:clamp(20px,2.3vw,27px);margin:6px 0 6px;color:var(--ink)}
.bloglist p{color:#3A3730;font-size:15px;margin:0}

/* ── category art rail (game art, straight from the app) ── */
.catrail{display:flex;gap:clamp(14px,1.6vw,22px);margin-top:clamp(28px,4vh,48px);
  overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  padding:10px var(--gut) 22px;margin-left:calc(-1*var(--gut));margin-right:calc(-1*var(--gut));
  scrollbar-width:none;touch-action:pan-x pan-y;cursor:grab;user-select:none}
.catrail.dragging{cursor:grabbing;scroll-snap-type:none}
.catrail::-webkit-scrollbar{display:none}
.catcard{flex:0 0 clamp(250px,27vw,340px);margin:0;scroll-snap-align:center;border-radius:26px;
  overflow:hidden;border:3px solid var(--ink);background:var(--ink);
  box-shadow:0 9px 0 rgba(10,10,11,.30);transform:rotate(var(--tilt,0deg));
  transition:transform .45s var(--pop),box-shadow .45s var(--pop)}
.catcard:nth-child(odd){--tilt:-1.1deg}
.catcard:nth-child(even){--tilt:1deg}
.catcard:hover{transform:rotate(0deg) translateY(-8px);box-shadow:0 16px 0 rgba(10,10,11,.30)}
.catcard img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.catcard b{display:flex;align-items:center;justify-content:space-between;font-family:var(--d);
  font-weight:800;color:var(--gold);background:var(--ink);padding:11px 18px 13px;
  font-size:clamp(16px,1.6vw,21px);letter-spacing:.01em}
.catcard b::after{content:'\2192';font-family:var(--s);font-weight:700;opacity:.55}
.rail-hint{font-family:var(--s);font-weight:600;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;opacity:.55;margin-top:2px}

/* ── finale: the Black Card itself — the site goes luxe when it appears ── */
.s-black.final{background:#050505;transition:background .7s ease}
.bcard{width:min(560px,88vw);aspect-ratio:1.586;margin:clamp(30px,5vh,54px) auto 0;
  border-radius:28px;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#111112 0%,#1b1b1e 45%,#0b0b0c 100%);
  border:1px solid rgba(231,200,127,.38);
  box-shadow:0 30px 80px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.07);
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .25s ease-out}
.bcard::after{content:'';position:absolute;inset:-2%;pointer-events:none;
  background:linear-gradient(105deg,transparent 32%,rgba(231,200,127,.13) 46%,
    rgba(255,255,255,.09) 50%,rgba(231,200,127,.13) 54%,transparent 68%);
  transform:translateX(-130%);animation:sheen 6s ease-in-out infinite}
@keyframes sheen{0%,52%{transform:translateX(-130%)}78%,100%{transform:translateX(130%)}}
.bcard .crown{position:absolute;top:clamp(18px,4%,28px);left:clamp(20px,5%,32px);
  width:clamp(40px,10%,56px);border-radius:22%;box-shadow:0 6px 18px rgba(0,0,0,.5)}
.bcard .ctitle{position:absolute;top:clamp(24px,6%,34px);right:clamp(20px,5%,32px);
  font-family:var(--s);font-weight:700;letter-spacing:.42em;font-size:clamp(10px,1.6vw,13px);
  color:#E7C87F;text-transform:uppercase}
.bcard .cnum{position:absolute;left:clamp(20px,5%,32px);bottom:26%;
  font-family:var(--s);font-weight:600;letter-spacing:.3em;
  font-size:clamp(10px,1.9vw,15px);color:rgba(231,200,127,.92);text-transform:uppercase}
.bcard .cname{position:absolute;left:clamp(20px,5%,32px);bottom:clamp(18px,7%,30px);
  font-family:var(--s);letter-spacing:.22em;font-size:clamp(9px,1.4vw,12px);
  color:rgba(246,239,227,.55);text-transform:uppercase}
.bcard .clvl{position:absolute;right:clamp(20px,5%,32px);bottom:clamp(18px,7%,30px);
  font-family:var(--s);letter-spacing:.22em;font-size:clamp(9px,1.4vw,12px);
  color:rgba(231,200,127,.8);text-transform:uppercase}
/* chrome flip: nav + accents go champagne while the finale is in view */
.nav{transition:background .6s ease,border-color .6s ease,box-shadow .6s ease}
html.luxe .nav{background:rgba(5,5,5,.78);border-color:rgba(231,200,127,.45)}
html.luxe .nav .cta{background:#E7C87F;color:#050505}
html.luxe ::selection{background:#E7C87F;color:#050505}