:root{
  --bg:#111111;
  --card:#1a1a1a;
  --line:#2a2a2a;
  --ink:#f5f3ee;
  --muted:#9b978e;
  --accent:#F2BD1F;
  --accent-ink:#141005;
  --r:18px;
  --ease:cubic-bezier(.22,1,.36,1);
  --display:"Unbounded",system-ui,sans-serif;
  --body:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--ink);font-family:var(--body);
  font-size:clamp(15px,1.05vw,17px);line-height:1.55;
  -webkit-font-smoothing:antialiased;min-height:100vh;
  background-image:radial-gradient(rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:28px 28px;background-position:center top;
}
.defs{position:absolute;width:0;height:0;overflow:hidden}
a{color:inherit;text-decoration:none}
svg{stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:12px}

.page{width:min(1080px,100% - 32px);margin-inline:auto;padding:clamp(48px,9vh,96px) 0 32px}

/* HERO */
.hero{max-width:640px;margin-inline:auto;text-align:center;position:relative}
.hero::before{
  content:"";position:absolute;left:50%;top:-40px;width:min(420px,100%);aspect-ratio:1;translate:-50% 0;
  background:radial-gradient(closest-side,rgba(242,189,31,.13),transparent);pointer-events:none;z-index:-1;
}
.mark{width:76px;height:76px;margin:0 auto 22px;position:relative}
.half{position:absolute;top:0;width:50%;height:100%}
.half-l{left:0;background:#fff;border-radius:0 999px 999px 0;animation:inL 1.1s var(--ease) .1s both}
.half-r{right:0;background:var(--accent);border-radius:999px 0 0 999px;animation:inR 1.1s var(--ease) .1s both}
@keyframes inL{from{transform:translateX(-46px);opacity:0}}
@keyframes inR{from{transform:translateX(46px);opacity:0}}
.mark:hover .half-l{transform:translateX(-5px)}
.mark:hover .half-r{transform:translateX(5px)}
.half{transition:transform .5s var(--ease)}

.handle{display:inline-flex;align-items:center;gap:10px;color:var(--muted);font-size:.95em;font-weight:500}
.handle span:first-child{color:var(--ink)}
.dot{width:4px;height:4px;border-radius:50%;background:var(--muted)}

h1{
  font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.08;
  font-size:clamp(30px,5.4vw,52px);margin:18px 0 18px;text-wrap:balance;
}
h1 em{font-style:normal;color:var(--accent)}
.intro{color:var(--muted);max-width:48ch;margin-inline:auto;text-wrap:pretty}

.handle,h1,.intro,.stats,.links{animation:rise .9s var(--ease) both}
.handle{animation-delay:.35s}h1{animation-delay:.45s}.intro{animation-delay:.55s}
.stats{animation-delay:.65s}.links{animation-delay:.75s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}

.stats{list-style:none;max-width:560px;margin-inline:auto;display:grid;grid-template-columns:repeat(3,1fr);margin:30px auto 28px;
  border:1px solid var(--line);border-radius:var(--r);background:rgba(26,26,26,.7)}
.stats li{padding:14px 8px;display:flex;flex-direction:column;gap:2px}
.stats li+li{border-left:1px solid var(--line)}
.stats b{font-family:var(--display);font-weight:500;font-size:clamp(17px,2.2vw,21px);font-variant-numeric:tabular-nums}
.stats span{color:var(--muted);font-size:.82em}

.links{display:grid;gap:12px;max-width:560px;margin-inline:auto}
.btn{
  display:grid;grid-template-columns:24px 1fr 20px;align-items:center;gap:12px;
  min-height:58px;padding:0 20px;border-radius:var(--r);
  background:var(--card);border:1px solid var(--line);font-weight:600;font-size:1.02em;
  transition:transform .35s var(--ease),border-color .35s,background .35s;
}
.btn .ic{width:22px;height:22px}
.btn .ar{width:18px;height:18px;opacity:.55;transition:transform .35s var(--ease),opacity .35s}
.btn:hover{transform:translateY(-2px);border-color:#3a3a3a;background:#1e1e1e}
.btn:hover .ar{transform:translate(2px,-2px);opacity:1}
.btn-main{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn-main:hover{background:#ffcb2e;border-color:#ffcb2e}
.btn-main .ar{opacity:.8}

/* TOP REELS */
.top{margin-top:clamp(64px,11vh,110px)}
.top-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:20px}
h2{font-family:var(--display);font-weight:500;font-size:clamp(20px,2.6vw,26px);letter-spacing:-.01em}
.more{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-weight:500;min-height:44px}
.more svg{width:16px;height:16px}
.more:hover{color:var(--ink)}
.grid{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (min-width:768px){.grid{grid-template-columns:repeat(3,1fr);gap:16px}}
@media (min-width:1080px){.grid{grid-template-columns:repeat(6,1fr)}}
.card{display:flex;flex-direction:column;gap:10px}
.thumb{display:block;position:relative;aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:var(--card);border:1px solid var(--line);isolation:isolate}
.card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.card:hover img{transform:scale(1.04)}
.views{position:absolute;top:10px;left:10px;z-index:2;display:inline-flex;align-items:center;gap:4px;
  padding:4px 9px 4px 7px;border-radius:999px;background:rgba(17,17,17,.72);backdrop-filter:blur(6px);
  font-size:.78em;font-weight:600;font-variant-numeric:tabular-nums}
.views svg{width:12px;height:12px;color:var(--accent)}
.t{font-size:.88em;font-weight:500;line-height:1.35;color:#d8d5ce;padding:0 2px;text-wrap:pretty}
.card:hover .t{color:var(--ink)}

footer{margin-top:64px;padding-top:22px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;color:var(--muted);font-size:.85em}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}