:root{--red:#c00000;--deep:#7a0000;--black:#0a0000;--white:#fff;--glow:#ff2a2a}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:#140000;color:var(--white);font-family:'Nunito',sans-serif;overflow-x:hidden;line-height:1.55}
h1,h2,h3,.logo-text{font-family:'Creepster',cursive;letter-spacing:2px;font-weight:400}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{width:min(1100px,92%);margin:0 auto}

/* ---------- loader ---------- */
#loader{position:fixed;inset:0;z-index:9999;background:radial-gradient(circle at 50% 70%,#a00000,#2a0000 70%,#000);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;transition:opacity .8s,visibility .8s;overflow:hidden}
#loader.done{opacity:0;visibility:hidden}
#loader .mansion{width:min(1100px,150%);height:auto;margin-bottom:-6px;display:block;background:none;filter:none;pointer-events:none}
#loader .ltxt{position:absolute;top:42%;font-family:'Creepster';font-size:clamp(1.6rem,6vw,3rem);letter-spacing:4px;animation:pulse 1.4s infinite;text-align:center;width:100%;text-shadow:0 0 10px #000;}
.bat{position:absolute;fill:#000;left:-120px;animation:fly linear infinite}
.bat svg{width:100%;height:100%;animation:flap .25s ease-in-out infinite alternate;transform-origin:center}
@keyframes fly{0%{transform:translateX(0) translateY(0)}50%{transform:translateX(60vw) translateY(-30px)}100%{transform:translateX(130vw) translateY(20px)}}
@keyframes flap{from{transform:scaleY(1)}to{transform:scaleY(.55)}}
@keyframes pulse{50%{opacity:.4}}

/* ---------- nav ---------- */
nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(10,0,0,.88);backdrop-filter:blur(6px);border-bottom:2px solid #000}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo-text{font-size:1.7rem;display:flex;align-items:center;gap:10px}
.logo-text img{width:46px;height:46px;object-fit:contain;background:transparent;border-radius:0}
.menu{display:flex;gap:22px;align-items:center;font-weight:700}
.menu a:hover{color:#ff7070}
.burger{display:none;background:none;border:0;color:#fff;font-size:2rem;cursor:pointer}
.btn{display:inline-block;background:#fff;color:#000;font-weight:900;padding:13px 28px;border-radius:50px;border:3px solid #000;box-shadow:4px 4px 0 #000;transition:.15s;cursor:pointer;font-family:inherit;font-size:1rem}
.btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 #000}
.btn.dark{background:#000;color:#fff;border-color:#fff;box-shadow:4px 4px 0 #fff}
.btn.small{padding:8px 16px;font-size:.85rem;white-space:nowrap}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100vh;padding:0 0 72px;display:flex;align-items:flex-end;text-align:center;overflow:hidden;background:linear-gradient(180deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,0) 18%,rgba(20,0,0,.25) 48%,rgba(20,0,0,.88) 100%),url('assets/background.jpg') center top / cover no-repeat}
.hero .bats{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero .wrap{position:relative;z-index:2;padding-bottom:12px}
.float-cat{position:absolute;z-index:2;top:12%;right:5%;width:min(220px,28vw);background:transparent;animation:float 3.5s ease-in-out infinite;filter:drop-shadow(0 14px 16px rgba(0,0,0,.5));pointer-events:none}
@keyframes float{50%{transform:translateY(-14px) rotate(1.5deg)}}
.hero h1{font-size:clamp(3.2rem,13vw,7.5rem);text-shadow:5px 5px 0 #000;line-height:1}
.tag{font-size:clamp(1rem,3.5vw,1.3rem);margin:12px auto 24px;max-width:560px;font-weight:700;text-shadow:2px 2px 0 #000}
.cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.ca{margin:26px auto 0;display:inline-flex;max-width:100%;align-items:center;gap:10px;background:#000;border:2px solid #fff;border-radius:50px;padding:8px 8px 8px 20px}
.ca code{font-size:.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:62vw}
.ca button{background:var(--red);color:#fff;border:0;border-radius:50px;padding:8px 16px;font-weight:900;cursor:pointer;font-family:inherit}

/* ---------- sections ---------- */
section{padding:80px 0;position:relative}
.dark{background:var(--black)}
#about{position:relative;overflow:hidden}
#about::before{content:"";position:absolute;inset:0;background:url('assets/about-art.png') center / contain no-repeat;opacity:.3;pointer-events:none}
#about .wrap{position:relative;z-index:1}
h2{font-size:clamp(2.2rem,8vw,3.6rem);text-align:center;margin-bottom:12px;text-shadow:3px 3px 0 #000}
.dark h2{text-shadow:3px 3px 0 var(--red)}
.sub{text-align:center;max-width:620px;margin:0 auto 40px;opacity:.9}
.about{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.about img{border:none;border-radius:0;box-shadow:none;background:transparent;margin:auto;width:min(340px,88%);filter:drop-shadow(0 10px 18px rgba(0,0,0,.45))}
.about p{margin-bottom:14px}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}
.card{background:#000;border:3px solid #fff;border-radius:20px;padding:22px 12px;text-align:center}
.card b{display:block;font-family:'Creepster';font-size:2rem;letter-spacing:2px;color:#ff4d4d}
.card span{font-size:.85rem;opacity:.85}

.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gal figure{aspect-ratio:1;overflow:hidden;border-radius:20px;border:3px solid var(--red);background:#1a0000;cursor:zoom-in}
.gal img{width:100%;height:100%;object-fit:cover;transition:.4s}
.gal figure:hover img{transform:scale(1.08) rotate(1deg)}
#lb{position:fixed;inset:0;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center;z-index:500;padding:20px}
#lb.on{display:flex}
#lb img{max-height:90vh;border-radius:16px}

.steps{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;counter-reset:s}
.step{background:#000;border:3px solid #fff;border-radius:22px;padding:24px 22px 24px 76px;position:relative;box-shadow:6px 6px 0 #000}
.step:before{counter-increment:s;content:counter(s);position:absolute;left:18px;top:18px;width:42px;height:42px;border-radius:50%;background:var(--red);border:3px solid #fff;display:grid;place-items:center;font-family:'Creepster';font-size:1.5rem}
.step h3{font-size:1.5rem;margin-bottom:4px}
.step p{font-size:.95rem;opacity:.9}
.step a{text-decoration:underline;color:#ff7070}

.road{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.phase{background:var(--black);border-radius:22px;padding:26px 20px;border-top:6px solid #fff}
.phase small{font-weight:900;color:#ff6b6b;letter-spacing:2px}
.phase h3{font-size:1.7rem;margin:4px 0 10px}
.phase ul{list-style:none}
.phase li{padding:5px 0 5px 24px;position:relative;font-size:.95rem}
.phase li:before{content:"🦇";position:absolute;left:0;font-size:.8rem;top:8px}

.socials{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:26px}
footer{background:#000;text-align:center;padding:36px 4% 44px;font-size:.85rem}
footer p{max-width:700px;margin:8px auto 0;opacity:.6}

.reveal{opacity:0;transform:translateY(30px);transition:.7s}
.reveal.in{opacity:1;transform:none}

/* ---------- mobile ---------- */
@media(max-width:860px){
  .burger{display:block}
  .menu{position:absolute;top:64px;left:0;right:0;background:#000;flex-direction:column;padding:20px;gap:18px;display:none;border-bottom:2px solid var(--red)}
  .menu.open{display:flex}
  .about,.steps{grid-template-columns:1fr}
  .cards,.road{grid-template-columns:repeat(2,1fr)}
  .gal{grid-template-columns:repeat(2,1fr);gap:10px}
  section{padding:60px 0}
  .hero{padding-bottom:48px}
  .float-cat{width:108px;top:74px;right:10px}
}
@media(max-width:420px){
  .road{grid-template-columns:1fr}
  .step{padding:70px 18px 20px}
  .step:before{top:16px}
  .btn{padding:12px 22px}
}

@media (prefers-reduced-motion: reduce) {
  .bat, .float-cat, .ltxt, .reveal { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}