:root{
  --bg:#0d0d0f;
  --bg-2:#15151a;
  --ink:#f5f5f5;
  --ink-dim:#b8b8be;
  --red:#ff2a2a;
  --yellow:#ffd400;
  --line:#2a2a31;
  --hdr:64px;
  --dots:54px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--ink);font-family:'Inter',system-ui,sans-serif;overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* photo background (street + brick + graffiti) */
body{
  background:#0d0d0f url("пикчи/bg.png") center center / cover no-repeat fixed;
}
/* very light tint so the photo stays bright and there's no vignette */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
  background:rgba(0,0,0,.18);
}

/* TOPBAR */
.topbar{
  position:fixed;top:0;left:0;right:0;height:var(--hdr);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;z-index:30;
  background:linear-gradient(180deg, rgba(0,0,0,.7), rgba(0,0,0,0));
  backdrop-filter:blur(6px);
}
.brand{display:flex;align-items:center;gap:12px;font-family:'Permanent Marker',cursive;font-size:22px}
.brand img{width:40px;height:40px;object-fit:contain;filter:drop-shadow(0 2px 0 #000)}
.topnav{display:flex;align-items:center;gap:18px;font-weight:800;letter-spacing:.08em;font-size:13px}
.topnav a{padding:8px 10px;border-radius:6px;transition:color .15s}
.topnav a:hover{color:var(--yellow)}
.topnav-cta{background:var(--red);color:#fff !important;padding:10px 14px !important;border-radius:8px;box-shadow:3px 3px 0 #000}
.topnav-cta:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 #000;color:#fff !important}

/* DECK */
.deck{
  position:fixed;inset:var(--hdr) 0 var(--dots) 0;
  display:flex;flex-direction:row;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;
}
.deck::-webkit-scrollbar{display:none}
.slide{
  flex:0 0 100vw;height:100%;
  scroll-snap-align:start;scroll-snap-stop:always;
  padding:40px clamp(24px,6vw,96px);
  display:flex;flex-direction:column;justify-content:center;
  position:relative;z-index:2;
}
/* smooth content reveal on the active slide */
.slide > *{
  opacity:0;transform:translateY(24px) scale(.985);
  transition:opacity .9s cubic-bezier(.22,.9,.28,1) .15s, transform .9s cubic-bezier(.22,.9,.28,1) .15s;
  will-change:opacity,transform;
}
.slide.is-active > *{opacity:1;transform:translateY(0) scale(1)}
@media (prefers-reduced-motion: reduce){
  .slide > *{transition:none;opacity:1;transform:none}
}

/* graffiti tags in corners */
.slide::after{
  content:"";position:absolute;right:24px;bottom:24px;width:140px;height:140px;
  background:radial-gradient(circle at 30% 30%, rgba(255,42,42,.18), transparent 60%);
  filter:blur(4px);pointer-events:none;
}

/* ARROWS */
.arrow{
  position:fixed;top:50%;transform:translateY(-50%);z-index:25;
  width:54px;height:54px;border-radius:50%;
  background:#000;color:#fff;border:2px solid #fff;
  font-size:34px;line-height:1;display:flex;align-items:center;justify-content:center;
  box-shadow:4px 4px 0 var(--red);
  transition:transform .15s, box-shadow .15s;
}
.arrow:hover{transform:translateY(-50%) translate(-1px,-1px);box-shadow:5px 5px 0 var(--red)}
.arrow-left{left:18px}
.arrow-right{right:18px}

/* TITLES */
.title-spray{
  font-family:'Permanent Marker',cursive;
  font-size:clamp(48px,9vw,128px);line-height:.95;letter-spacing:-.01em;
  color:#fff;
  text-shadow:
    4px 4px 0 var(--red),
    8px 8px 0 #000;
  display:inline-block;
  padding-bottom:6px;
  background-image:linear-gradient(transparent calc(100% - 8px), var(--yellow) 0);
  background-repeat:no-repeat;background-size:80% 100%;background-position:left bottom;
}
.title-spray.center{display:block;text-align:center;margin:0 auto 40px;background-position:center bottom}
.kicker{
  display:inline-block;font-family:'Bangers',cursive;letter-spacing:.18em;
  color:var(--yellow);background:#000;padding:6px 12px;border:2px solid var(--yellow);
  transform:rotate(-2deg);margin-bottom:16px;font-size:14px;
}

/* HERO */
.hero-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center;width:100%}
.hero-text .lede{margin:18px 0 28px;color:var(--ink-dim);max-width:560px;font-size:clamp(15px,1.4vw,18px)}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:28px}
.btn{display:inline-flex;align-items:center;justify-content:center;font-weight:800;letter-spacing:.08em;font-size:14px;padding:14px 22px;border-radius:8px;transition:transform .15s, box-shadow .15s}
.btn-primary{background:var(--red);color:#fff;box-shadow:4px 4px 0 #000}
.btn-primary:hover{transform:rotate(-1deg) translate(-1px,-1px);box-shadow:5px 5px 0 #000}
.btn-ghost{background:#000;color:#fff;border:2px solid #fff;box-shadow:4px 4px 0 var(--yellow)}
.btn-ghost:hover{transform:rotate(1deg) translate(-1px,-1px);box-shadow:5px 5px 0 var(--yellow)}

.hero-art{position:relative;display:flex;justify-content:center;align-items:center}
.hero-art img{
  max-height:72vh;width:auto;
  filter:drop-shadow(8px 12px 0 rgba(0,0,0,.5));
  transform:rotate(-4deg);
  animation:float 6s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(-2deg) translateY(-12px)}}
.splash{position:absolute;border-radius:50%;filter:blur(40px);opacity:.55;pointer-events:none}
.splash-yellow{width:280px;height:280px;background:var(--yellow);top:5%;left:5%}
.splash-red{width:340px;height:340px;background:var(--red);bottom:0;right:5%}

/* CA CHIP */
.ca-chip{
  display:inline-flex;align-items:center;gap:10px;
  background:#000;border:2px dashed var(--yellow);
  padding:10px 14px;border-radius:8px;font-family:'JetBrains Mono',monospace;font-size:13px;
}
.ca-chip.big{margin-top:24px;align-self:center}
.ca-label{color:var(--yellow);font-weight:800}
.ca-value{color:#fff;letter-spacing:.05em}
.ca-copy{
  background:var(--red);color:#fff;padding:6px 10px;border-radius:6px;font-weight:800;font-size:11px;letter-spacing:.1em;
  box-shadow:2px 2px 0 #000;transition:transform .12s, box-shadow .12s;
}
.ca-copy:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 #000}
.ca-copy.small{font-size:10px;padding:4px 8px}

/* ABOUT */
.about-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center;width:100%}
.about-text p{font-size:clamp(15px,1.3vw,18px);color:var(--ink-dim);margin-top:16px;max-width:560px;line-height:1.55}
.tag-quote{font-family:'Permanent Marker',cursive;color:var(--yellow) !important;font-size:clamp(20px,2.2vw,28px) !important;margin-top:24px !important;transform:rotate(-1.5deg);display:inline-block;border-left:4px solid var(--red);padding-left:14px}
.about-art img{max-height:62vh;transform:rotate(5deg);filter:drop-shadow(6px 10px 0 rgba(0,0,0,.5))}

/* TOKENOMICS */
.tok-layout{display:grid;grid-template-columns:minmax(260px,1fr) 2fr;gap:40px;align-items:center;width:100%;max-width:1300px;margin:0 auto}
.tok-art{display:flex;justify-content:center;align-items:center;position:relative}
.tok-art img{
  max-height:60vh;width:auto;
  filter:drop-shadow(8px 12px 0 rgba(0,0,0,.55));
  transform:rotate(-3deg);
  animation:float 6s ease-in-out infinite;
}
.tok-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;width:100%}
.tok-card{
  background:#000;border:3px solid #fff;padding:28px 22px;border-radius:10px;
  box-shadow:6px 6px 0 var(--red);
  display:flex;flex-direction:column;gap:10px;
  transform:rotate(-1deg);transition:transform .2s;
}
.tok-card:nth-child(2){transform:rotate(1deg);box-shadow:6px 6px 0 var(--yellow)}
.tok-card:nth-child(3){transform:rotate(-.5deg)}
.tok-card:nth-child(4){transform:rotate(1.5deg);box-shadow:6px 6px 0 var(--yellow)}
.tok-card:hover{transform:rotate(0) translateY(-4px)}
.tok-key{font-family:'Bangers',cursive;letter-spacing:.15em;color:var(--yellow);font-size:16px}
.tok-val{font-family:'Permanent Marker',cursive;font-size:clamp(20px,2.4vw,32px);color:#fff;word-break:break-all}
.tok-ca{font-size:clamp(18px,2vw,24px) !important}

/* HOW TO BUY */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;width:100%;max-width:1200px;margin:0 auto}
.step{
  background:#000;border:2px solid #fff;border-radius:10px;padding:28px 22px;
  position:relative;box-shadow:5px 5px 0 #000;
}
.step-num{
  position:absolute;top:-22px;left:18px;
  width:48px;height:48px;border-radius:50%;
  background:var(--red);color:#fff;font-family:'Permanent Marker',cursive;font-size:26px;
  display:flex;align-items:center;justify-content:center;
  border:3px solid #fff;box-shadow:3px 3px 0 #000;transform:rotate(-6deg);
}
.step h3{font-family:'Permanent Marker',cursive;font-size:24px;margin:18px 0 10px;color:var(--yellow);letter-spacing:.04em}
.step p{color:var(--ink-dim);font-size:14px;line-height:1.5}

/* ROADMAP */
.road{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;width:100%;max-width:1200px;margin:0 auto;position:relative;padding-top:30px}
.road-line{
  position:absolute;left:6%;right:6%;top:42px;height:6px;
  background:repeating-linear-gradient(90deg, var(--red) 0 14px, transparent 14px 24px);
  border-radius:3px;z-index:0;
}
.phase{position:relative;background:#000;border:2px solid #fff;border-radius:10px;padding:46px 20px 22px;z-index:1;box-shadow:5px 5px 0 #000}
.phase .dot{
  position:absolute;top:-18px;left:50%;transform:translateX(-50%);
  width:36px;height:36px;border-radius:50%;background:var(--yellow);
  border:3px solid #000;box-shadow:0 0 0 3px var(--yellow), 4px 4px 0 #000;
}
.phase:nth-child(odd) .dot{background:var(--red);box-shadow:0 0 0 3px var(--red), 4px 4px 0 #000}
.phase h4{font-family:'Permanent Marker',cursive;font-size:22px;color:#fff;margin-bottom:8px}
.phase p{color:var(--ink-dim);font-size:14px;line-height:1.5}

/* GALLERY */
.gal-grid{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);gap:24px;width:100%;max-width:900px;height:62vh;margin:0 auto}
.gal-item{
  background:#000;border:2px solid #fff;border-radius:10px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  box-shadow:4px 4px 0 var(--red);transition:transform .25s, box-shadow .25s;
}
.gal-item:nth-child(even){box-shadow:4px 4px 0 var(--yellow)}
.gal-item:hover{transform:rotate(-2deg) translateY(-3px);box-shadow:6px 6px 0 var(--red)}
.gal-item:nth-child(even):hover{box-shadow:6px 6px 0 var(--yellow)}
.gal-item img{width:100%;height:100%;object-fit:contain;padding:14px}
.gal-item.placeholder{position:relative;background:repeating-linear-gradient(45deg, #15151a 0 10px, #0d0d0f 10px 20px)}
.gal-item.placeholder::before{
  content:"";position:absolute;inset:14px;border:2px dashed rgba(255,255,255,.15);border-radius:6px;
}
.gal-item.placeholder::after{
  content:"";position:absolute;left:50%;top:50%;width:42px;height:42px;transform:translate(-50%,-50%);
  background:no-repeat center / contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.35'><rect x='3' y='4' width='18' height='16' rx='2'/><circle cx='9' cy='10' r='1.6'/><path d='M21 16l-5-5L7 20'/></svg>");
  opacity:.7;
}

/* COMMUNITY */
.slide-community{align-items:center;text-align:center}
.comm-sub{color:var(--ink-dim);margin-bottom:36px;font-size:clamp(15px,1.4vw,18px)}
.comm-buttons{display:flex;gap:28px;justify-content:center;flex-wrap:wrap;margin-bottom:24px}
.btn-big{
  display:flex;align-items:center;gap:14px;
  background:#000;color:#fff;padding:22px 36px;border-radius:14px;
  border:3px solid #fff;font-family:'Permanent Marker',cursive;font-size:clamp(22px,2.4vw,32px);letter-spacing:.06em;
  box-shadow:6px 6px 0 var(--red);transition:transform .15s, box-shadow .15s;
}
.btn-big:hover{transform:rotate(-1deg) translate(-2px,-2px);box-shadow:8px 8px 0 var(--red)}
.btn-big.btn-tg{box-shadow:6px 6px 0 var(--yellow)}
.btn-big.btn-tg:hover{box-shadow:8px 8px 0 var(--yellow);transform:rotate(1deg) translate(-2px,-2px)}
.btn-big-ico{
  width:54px;height:54px;border-radius:50%;
  background:var(--red);display:flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:900;color:#fff;border:3px solid #fff;
}
.btn-big.btn-tg .btn-big-ico{background:var(--yellow);color:#000}
.powered{display:block;margin-top:30px;color:var(--ink-dim);font-size:12px;letter-spacing:.3em;text-transform:uppercase}

/* DOTS */
.dots{
  position:fixed;bottom:0;left:0;right:0;height:var(--dots);z-index:25;
  display:flex;align-items:center;justify-content:center;gap:14px;
  background:linear-gradient(0deg, rgba(0,0,0,.7), rgba(0,0,0,0));
}
.dot-btn{
  width:14px;height:14px;border-radius:50%;background:#fff;opacity:.35;
  border:2px solid #000;transition:transform .15s, opacity .15s, background .15s;
}
.dot-btn:hover{opacity:.8;transform:scale(1.15)}
.dot-btn.active{background:var(--red);opacity:1;transform:scale(1.3);box-shadow:0 0 0 2px #fff}

/* TOAST */
.toast{
  position:fixed;left:50%;bottom:80px;transform:translateX(-50%) translateY(20px);
  background:var(--yellow);color:#000;font-weight:800;letter-spacing:.1em;
  padding:10px 18px;border-radius:8px;border:2px solid #000;box-shadow:4px 4px 0 var(--red);
  opacity:0;pointer-events:none;transition:opacity .2s, transform .2s;z-index:50;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* RESPONSIVE */
@media (max-width: 1024px){
  .arrow{display:none}
  .hero-grid,.about-grid{grid-template-columns:1fr;gap:24px;text-align:center}
  .hero-text{order:2}
  .hero-art{order:1}
  .hero-art img{max-height:42vh}
  .about-art{order:2}
  .about-text{order:1}
  .about-text p,.hero-text .lede{margin-left:auto;margin-right:auto}
  .about-text .tag-quote{border-left:0;border-top:4px solid var(--red);padding:14px 0 0}
  .cta-row{justify-content:center}
  .tok-layout{grid-template-columns:1fr;gap:24px}
  .tok-art img{max-height:34vh}
  .tok-grid,.steps,.road{grid-template-columns:repeat(2,1fr)}
  .road-line{display:none}
  .gal-grid{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr)}
}
@media (max-width: 600px){
  :root{--hdr:56px}
  .topnav a:not(.topnav-cta){display:none}
  .slide{padding:24px 18px}
  .tok-grid,.steps,.road{grid-template-columns:1fr;gap:16px}
  .gal-grid{grid-template-columns:1fr;grid-template-rows:repeat(4,minmax(140px,1fr));height:auto;max-height:62vh;overflow-y:auto}
  .comm-buttons{flex-direction:column;gap:18px}
}