:root{--bg:#000;--fg:#fff;--gold:#f2b705;--burlap:#c8a165;--chestnut:#8b4a2b;--muted:#808080;--line:3px solid #fff}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:Nunito,system-ui,sans-serif;font-weight:500;line-height:1.55;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;background:url(/assets/texture.jpg) center/420px repeat;opacity:.07;pointer-events:none;z-index:-1}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:"Lilita One",Nunito,sans-serif;font-weight:400;letter-spacing:.01em;line-height:1.02}
.nav{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem clamp(1rem,4vw,3rem);background:rgba(0,0,0,.85);backdrop-filter:blur(8px);border-bottom:2px solid #222}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;font-family:"Lilita One";font-size:1.4rem}
.brand img{border-radius:50%;border:2px solid #fff}
.nav nav{display:flex;gap:1.4rem}
.nav nav a{text-decoration:none;font-weight:800;font-size:.95rem;color:#ddd}
.nav nav a:hover{color:var(--gold)}
section{padding:clamp(3.5rem,8vw,7rem) clamp(1.2rem,5vw,4rem);max-width:1200px;margin:0 auto}
h2{font-size:clamp(2.2rem,5vw,3.6rem);margin-bottom:.6rem}
.sub{color:#bbb;font-size:1.1rem;margin-bottom:2.5rem}
.hero{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:clamp(2rem,5vw,4rem);min-height:min(calc(100vh - 70px),820px)}
.hero-art{border:var(--line);border-radius:28px;overflow:hidden;box-shadow:10px 10px 0 var(--gold);animation:bob 5s ease-in-out infinite}
.hero-art img{width:100%;aspect-ratio:1/1;object-fit:cover}
@keyframes bob{50%{transform:translateY(-8px)}}
.tag{display:inline-block;font-weight:800;color:var(--gold);border:2px solid var(--gold);border-radius:99px;padding:.25rem .9rem;font-size:.9rem;margin-bottom:1.2rem}
h1{font-size:clamp(3.4rem,9vw,7rem)}
h1 span{color:var(--gold)}
.lede{font-size:clamp(1.05rem,1.6vw,1.3rem);color:#ddd;margin:1.4rem 0 2rem;max-width:34ch}
.btn{display:inline-block;background:var(--gold);color:#000;text-decoration:none;font-weight:800;font-size:1.1rem;padding:.9rem 1.8rem;border:var(--line);border-radius:14px;box-shadow:5px 5px 0 #fff;transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 #fff}
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.steps li{border:var(--line);border-radius:22px;padding:1.8rem;background:#0b0b0b}
.steps .n{display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;background:var(--gold);color:#000;font-family:"Lilita One";font-size:1.5rem;border:3px solid #fff;margin-bottom:1rem}
.steps h3{font-size:1.6rem;margin-bottom:.4rem}
.steps p{color:#ccc}
.how{position:relative}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2rem}
.card{border:var(--line);border-radius:22px;padding:1.6rem;background:#0b0b0b;display:flex;flex-direction:column;gap:.7rem}
.card img{border-radius:16px;border:2px solid #fff;aspect-ratio:1/1;object-fit:cover;width:100%}
.card h3{font-size:1.8rem;color:var(--gold)}
.card p{color:#ccc}
.trough{aspect-ratio:1/1;border-radius:16px;border:2px solid #fff;background:#000;position:relative;overflow:hidden}
.trough::after{content:"";position:absolute;left:12%;right:12%;bottom:14%;height:26%;background:#111;border:4px solid #fff;border-radius:6px 6px 18px 18px}
.trough i{position:absolute;top:-12%;width:14%;aspect-ratio:1;border-radius:50%;background:var(--gold);border:3px solid #fff;animation:drop 2.4s linear infinite}
.trough i:nth-child(1){left:30%}.trough i:nth-child(2){left:48%;animation-delay:.8s}.trough i:nth-child(3){left:64%;animation-delay:1.6s}
@keyframes drop{0%{top:-12%;opacity:1}70%{top:58%;opacity:1}80%,100%{top:62%;opacity:0}}
.you{aspect-ratio:1/1;border-radius:16px;border:2px solid #fff;display:grid;place-items:center;font-size:clamp(4rem,10vw,7rem);background:var(--burlap)}
.status{display:flex;gap:1.1rem;align-items:flex-start;border:var(--line);border-radius:22px;padding:1.8rem;background:#0b0b0b;margin:1.6rem 0}
.status strong{font-size:1.3rem;color:var(--gold)}
.status p{color:#ccc;margin-top:.4rem;max-width:70ch}
.dot{flex:none;width:14px;height:14px;border-radius:50%;background:var(--gold);margin-top:.45rem;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{opacity:.3}}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.facts div{border:2px solid #333;border-radius:16px;padding:1rem 1.2rem}
.facts dt{color:var(--muted);font-size:.85rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.facts dd{font-family:"Lilita One";font-size:1.4rem;margin-top:.2rem}
footer{border-top:2px solid #222;padding:2.5rem 1.2rem 3rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.5rem;color:#ccc}
footer img{border-radius:50%;border:2px solid #fff}
.fine{font-size:.85rem;color:var(--muted)}
@media (max-width:860px){
  .hero{grid-template-columns:1fr;min-height:auto;padding-top:2rem}
  .hero-copy{order:-1}
  .steps,.cards{grid-template-columns:1fr}
  .facts{grid-template-columns:repeat(2,1fr)}
  .nav nav{gap:.9rem}.nav nav a{font-size:.85rem}
}
@media (max-width:480px){.nav nav a:nth-child(1){display:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}