:root{
  --gold:#f5c518;
  --gold2:#d4a017;
  --hot:#ff5e00;
  --infoBlue1:#9bc1ec;
  --infoBlue2:#5a85c9;
  --black:#0a0a0a;
  --darkbg:#1a1a1a;
  --cream:#f6f0e0;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Bebas Neue',sans-serif;background:var(--black);
  color:var(--cream);overflow-x:hidden;position:relative;
  font-size:18px;letter-spacing:.5px;
}
body::before{
  content:"";position:fixed;inset:0;
  background:repeating-linear-gradient(0deg,
    rgba(0,0,0,.22) 0,rgba(0,0,0,.22) 1px,
    transparent 1px,transparent 3px);
  pointer-events:none;z-index:9999;mix-blend-mode:multiply;
}
body::after{
  content:"";position:fixed;inset:0;
  background:radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,.6) 100%);
  pointer-events:none;z-index:9998;
}

.marquee-top{
  background:var(--gold);color:var(--black);
  border-bottom:5px solid var(--hot);
  font-family:'Anton',sans-serif;
  font-size:1.4rem;white-space:nowrap;overflow:hidden;
  position:sticky;top:0;z-index:100;padding:14px 0;
  text-transform:uppercase;letter-spacing:2px;
}
.marquee-top span{display:inline-block;padding-left:100%;animation:scroll 26s linear infinite}
@keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}

.hero{
  position:relative;padding:50px 20px 70px;text-align:center;
  background:radial-gradient(ellipse at center,#1c1c1c 0%,#000 70%);
  overflow:hidden;border-bottom:6px solid var(--gold);
}

.logo{
  font-family:'Anton',sans-serif;
  font-size:clamp(3.2rem,13vw,8.5rem);
  line-height:.9;letter-spacing:2px;
  background:linear-gradient(180deg,#fff8c5 0%,#f5c518 35%,#b8860b 70%,#7a5a00 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-stroke:2px #000;color:transparent;
  text-shadow:4px 4px 0 #4a3500,8px 8px 12px rgba(0,0,0,.8);
  display:inline-block;transform:perspective(400px) rotateX(8deg);
  margin-bottom:5px;
}
.logo-bang{
  font-family:'Bungee',sans-serif;color:var(--hot);
  -webkit-text-stroke:2px #000;font-size:.6em;
  display:inline-block;animation:shake .4s infinite;vertical-align:top;
}
@keyframes shake{
  0%,100%{transform:rotate(-3deg) scale(1)}
  50%{transform:rotate(4deg) scale(1.08)}
}

.tagline{
  font-family:'Permanent Marker',cursive;
  font-size:clamp(1.2rem,3.2vw,2rem);
  color:var(--gold);margin:15px auto 5px;max-width:800px;
  text-shadow:2px 2px 0 #000,3px 3px 8px rgba(245,197,24,.4);
}
.subtag{
  font-family:'Bowlby One',sans-serif;
  font-size:clamp(.9rem,2vw,1.3rem);color:var(--cream);
  max-width:780px;margin:8px auto 25px;
  text-shadow:2px 2px 0 #000;letter-spacing:1px;
}

.boards-stage{
  position:relative;width:min(500px,90vw);
  margin:30px auto;aspect-ratio:5/4;
}
.board{
  position:absolute;width:75%;aspect-ratio:3/2;border-radius:14px;
  box-shadow:inset 0 4px 14px rgba(255,255,255,.35),
    inset 0 -4px 14px rgba(0,0,0,.25),
    0 12px 28px rgba(0,0,0,.7);
}
.board::before{
  content:"";position:absolute;inset:0;border-radius:14px;
  background:
    repeating-linear-gradient(35deg,transparent 0 8px,rgba(0,0,0,.04) 8px 9px),
    repeating-linear-gradient(-22deg,transparent 0 11px,rgba(0,0,0,.05) 11px 12px),
    radial-gradient(ellipse at 30% 25%,rgba(255,255,255,.35) 0%,transparent 55%);
}
.board::after{
  content:"";position:absolute;
  top:50%;right:14px;transform:translateY(-50%);
  width:8%;height:18%;background:#000;border-radius:30px;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.9),inset 0 -1px 2px rgba(255,255,255,.15);
}
.board.b-yellow{background:linear-gradient(135deg,#ffd84a 0%,#e8b820 50%,#c69010 100%);top:5%;left:20%;transform:rotate(-4deg);z-index:1}
.board.b-red{background:linear-gradient(135deg,#e04658 0%,#bb2a3e 50%,#8a1d2d 100%);top:18%;left:10%;transform:rotate(2deg);z-index:2}
.board.b-blue{background:linear-gradient(135deg,#3d62b8 0%,#1f3a85 50%,#15265c 100%);top:35%;left:0%;transform:rotate(-1deg);z-index:3}

.plus-burst{
  position:absolute;top:5%;left:0;
  width:180px;height:180px;
  background:radial-gradient(circle,#ffaa00 0%,#ff7a00 100%);
  clip-path:polygon(50% 0%,57% 12%,68% 4%,70% 18%,84% 13%,80% 27%,95% 28%,86% 40%,99% 47%,86% 56%,96% 70%,82% 70%,84% 86%,71% 78%,68% 94%,57% 84%,50% 100%,43% 84%,32% 94%,29% 78%,16% 86%,18% 70%,4% 70%,14% 56%,1% 47%,14% 40%,5% 28%,20% 27%,16% 13%,30% 18%,32% 4%,43% 12%);
  display:flex;align-items:center;justify-content:center;
  font-family:'Anton',sans-serif;font-size:3rem;color:var(--black);
  letter-spacing:2px;box-shadow:0 0 30px rgba(255,170,0,.6);
  animation:pulse 1.2s ease-in-out infinite;z-index:5;
}
@keyframes pulse{
  0%,100%{transform:rotate(-8deg) scale(1)}
  50%{transform:rotate(8deg) scale(1.08)}
}

.mouse-on-board{
  position:absolute;bottom:8%;right:20%;
  width:48px;height:72px;
  background:linear-gradient(180deg,#ddd 0%,#aaa 60%,#666 100%);
  border-radius:50% 50% 45% 45% / 60% 60% 40% 40%;
  box-shadow:0 6px 14px rgba(0,0,0,.6);z-index:4;
  animation:wiggle 2.5s ease-in-out infinite;
}
.mouse-on-board::before{
  content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);
  width:1px;height:35px;background:#666;
}
.mouse-on-board::after{
  content:"";position:absolute;bottom:12px;left:50%;transform:translateX(-50%);
  width:6px;height:6px;border-radius:50%;background:#ff0044;
  box-shadow:0 0 8px #ff0044;animation:laser 1.2s steps(2) infinite;
}
@keyframes wiggle{
  0%,100%{transform:translate(0,0)}
  25%{transform:translate(-10px,-3px) rotate(-3deg)}
  50%{transform:translate(8px,2px) rotate(2deg)}
  75%{transform:translate(-4px,4px) rotate(-1deg)}
}
@keyframes laser{50%{opacity:.3}}

.price-banner{
  display:inline-block;
  background:linear-gradient(180deg,var(--gold) 0%,var(--gold2) 100%);
  color:var(--black);font-family:'Anton',sans-serif;
  font-size:clamp(1.3rem,3.2vw,2rem);
  padding:18px 35px;border:4px solid #000;
  box-shadow:6px 6px 0 var(--hot),6px 6px 0 4px #000;
  text-transform:uppercase;letter-spacing:2px;margin:20px 10px;
  transform:rotate(-1deg);
}
.price-banner strong{font-size:1.4em;color:var(--hot);-webkit-text-stroke:1px #000}

.cta-big{
  display:inline-block;margin-top:20px;padding:22px 45px;
  font-family:'Anton',sans-serif;
  font-size:clamp(1.2rem,3vw,2rem);
  background:var(--hot);color:#fff;text-decoration:none;
  border:5px solid var(--gold);
  box-shadow:0 0 0 3px var(--black),8px 8px 0 var(--gold),8px 8px 0 3px var(--black);
  text-transform:uppercase;letter-spacing:3px;
  transform:rotate(-2deg);transition:transform .15s,box-shadow .15s;cursor:pointer;
}
.cta-big:hover{
  transform:rotate(2deg) scale(1.05);
  box-shadow:0 0 0 3px var(--black),12px 12px 0 var(--gold),12px 12px 0 3px var(--black);
}

.section-title{
  font-family:'Anton',sans-serif;
  font-size:clamp(2rem,6vw,4rem);text-align:center;
  margin:50px 20px 30px;color:var(--gold);
  text-shadow:3px 3px 0 var(--black),6px 6px 12px rgba(0,0,0,.6);
  text-transform:uppercase;line-height:1;letter-spacing:3px;
}

.demo{
  padding:50px 20px 60px;
  background:radial-gradient(ellipse at center,#1c1c1c 0%,#000 80%);
  border-top:6px solid var(--gold);border-bottom:6px solid var(--gold);
}
.demo-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:30px;max-width:1100px;margin:0 auto;
}
.demo-card{
  background:#0e0e0e;color:var(--cream);
  padding:30px 25px;border:3px solid var(--gold);position:relative;
}
.demo-card::before{
  content:"\2713";position:absolute;top:-22px;left:20px;
  background:var(--hot);color:#fff;
  width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.8rem;font-weight:bold;
  border:3px solid var(--gold);box-shadow:3px 3px 0 #000;
}
.demo-card h3{
  font-family:'Anton',sans-serif;color:var(--gold);
  font-size:1.5rem;margin-bottom:12px;text-transform:uppercase;letter-spacing:2px;
}
.demo-card p{font-family:'Bebas Neue',sans-serif;font-size:1.15rem;line-height:1.4}
.demo-card em{background:var(--gold);color:var(--black);padding:1px 6px;font-style:normal}

.colors{
  padding:50px 20px;
  background:linear-gradient(180deg,var(--infoBlue1) 0%,var(--infoBlue2) 100%);
  position:relative;
}
.colors .section-title{
  color:var(--gold);
  text-shadow:3px 3px 0 #000,6px 6px 12px rgba(0,0,0,.4);
}
.colors-intro{
  text-align:center;font-family:'Anton',sans-serif;
  font-size:clamp(1.2rem,2.8vw,1.7rem);
  color:#fff;max-width:700px;margin:0 auto 40px;
  text-shadow:2px 2px 0 #000;letter-spacing:1.5px;
}
.colors-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:30px;max-width:1000px;margin:0 auto;
}
.color-card{
  background:#000;color:var(--cream);
  padding:30px 20px;text-align:center;
  border:4px solid var(--gold);box-shadow:6px 6px 0 #000;
}
.color-board{
  width:100%;aspect-ratio:3/2;border-radius:12px;
  position:relative;margin-bottom:18px;
  box-shadow:inset 0 4px 12px rgba(255,255,255,.35),
    inset 0 -3px 10px rgba(0,0,0,.25),
    0 8px 16px rgba(0,0,0,.5);
}
.color-board::before{
  content:"";position:absolute;inset:0;border-radius:12px;
  background:radial-gradient(ellipse at 30% 25%,rgba(255,255,255,.35) 0%,transparent 55%);
}
.color-board::after{
  content:"";position:absolute;top:50%;right:10px;transform:translateY(-50%);
  width:7%;height:18%;background:#000;border-radius:20px;
  box-shadow:inset 0 2px 3px rgba(0,0,0,.9);
}
.cb-yellow{background:linear-gradient(135deg,#ffd84a 0%,#e8b820 50%,#c69010 100%)}
.cb-red{background:linear-gradient(135deg,#e04658 0%,#bb2a3e 50%,#8a1d2d 100%)}
.cb-blue{background:linear-gradient(135deg,#3d62b8 0%,#1f3a85 50%,#15265c 100%)}
.color-name{
  font-family:'Anton',sans-serif;font-size:1.6rem;letter-spacing:2px;
  color:var(--gold);text-transform:uppercase;text-shadow:2px 2px 0 #000;
}
.color-tagline{font-family:'Permanent Marker',cursive;font-size:1rem;margin-top:8px;color:var(--cream)}

.specs{padding:50px 20px;background:var(--darkbg)}
.specs .section-title{color:var(--cream)}
.specs-intro{
  text-align:center;font-family:'Permanent Marker',cursive;
  font-size:clamp(1.1rem,2.4vw,1.6rem);color:var(--gold);
  max-width:700px;margin:0 auto 40px;line-height:1.4;
}
.specs-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:20px;max-width:1100px;margin:0 auto;
}
.spec{background:#000;border:3px solid var(--gold);padding:25px 20px}
.spec-num{
  font-family:'Anton',sans-serif;
  color:var(--hot);font-size:2.8rem;line-height:1;
  text-shadow:2px 2px 0 var(--gold);letter-spacing:2px;
}
.spec-label{
  font-family:'Anton',sans-serif;color:var(--gold);
  font-size:1.1rem;text-transform:uppercase;
  margin:8px 0 6px;letter-spacing:1.5px;
}
.spec-desc{font-family:'Bebas Neue',sans-serif;font-size:1.05rem;line-height:1.3;color:#bbb}

.testimonials{padding:50px 20px;background:#000}
.testimonials .section-title{color:var(--cream)}
.testi-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:25px;max-width:1100px;margin:0 auto;
}
.testi{
  background:var(--cream);color:var(--black);
  padding:25px;border:3px dashed var(--black);
  font-family:'Permanent Marker',cursive;
  font-size:1.15rem;line-height:1.4;position:relative;
  transform:rotate(-1.5deg);
}
.testi:nth-child(even){transform:rotate(1.5deg);background:var(--gold)}
.testi:nth-child(3n){background:#fff;transform:rotate(-.5deg)}
.testi cite{
  display:block;margin-top:12px;font-style:normal;
  font-family:'Anton',sans-serif;font-size:.9rem;
  color:var(--hot);text-transform:uppercase;letter-spacing:1.5px;
}
.testi::before{content:"\2B50\2B50\2B50\2B50\2B50";display:block;font-size:1.1rem;margin-bottom:10px;letter-spacing:2px}

.order{
  background:linear-gradient(180deg,var(--infoBlue1) 0%,var(--infoBlue2) 80%,#3a5fa0 100%);
  padding:50px 20px 60px;
  border-top:6px solid var(--gold);border-bottom:6px solid var(--gold);
  text-align:center;position:relative;
}
.order::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,
    rgba(255,255,255,.04) 0 2px,transparent 2px 4px);
  pointer-events:none;
}
.order-inner{position:relative;z-index:1;max-width:900px;margin:0 auto}
.order-photo{
  display:inline-block;width:min(280px,60vw);aspect-ratio:4/3;
  background:#0a0a0a;border:4px solid #fff;
  position:relative;margin-bottom:10px;
  box-shadow:0 8px 20px rgba(0,0,0,.5);
}
.order-photo .mini-board{
  position:absolute;width:80%;aspect-ratio:3/2;border-radius:8px;
  box-shadow:inset 0 3px 10px rgba(255,255,255,.3),
    inset 0 -3px 8px rgba(0,0,0,.2),0 4px 10px rgba(0,0,0,.5);
}
.order-photo .mini-board::after{
  content:"";position:absolute;top:50%;right:8px;transform:translateY(-50%);
  width:8%;height:18%;background:#000;border-radius:20px;
}
.order-photo .mb-yellow{
  background:linear-gradient(135deg,#ffd84a 0%,#e8b820 60%,#c69010 100%);
  top:35%;left:5%;transform:rotate(-3deg);z-index:1;
}
.order-photo .mb-red{
  background:linear-gradient(135deg,#e04658 0%,#bb2a3e 60%,#8a1d2d 100%);
  top:15%;left:15%;transform:rotate(2deg);z-index:2;
}

.order-logo{
  font-family:'Anton',sans-serif;
  font-size:clamp(2rem,7vw,4.5rem);
  background:linear-gradient(180deg,#fff8c5 0%,#f5c518 35%,#b8860b 70%,#7a5a00 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-stroke:2px #000;color:transparent;
  text-shadow:4px 4px 0 #4a3500,8px 8px 12px rgba(0,0,0,.6);
  letter-spacing:3px;display:block;margin:25px 0 15px;
}
.order-price{
  font-family:'Anton',sans-serif;
  font-size:clamp(1.3rem,3.5vw,2rem);
  color:#fff;text-shadow:3px 3px 0 #000,4px 4px 8px rgba(0,0,0,.6);
  letter-spacing:2px;margin-bottom:5px;
}
.order-price strong{
  display:block;font-size:1.6em;color:var(--gold);
  text-shadow:3px 3px 0 #000,5px 5px 10px rgba(0,0,0,.6);margin-top:5px;
}
.order-cta-line{
  font-family:'Anton',sans-serif;
  font-size:clamp(1.1rem,3vw,1.7rem);color:#fff;
  text-shadow:3px 3px 0 #000;margin:25px 0 5px;letter-spacing:2px;
}
.order-phone{
  font-family:'Anton',sans-serif;
  font-size:clamp(1.6rem,5vw,3rem);color:#fff;
  text-shadow:4px 4px 0 #000,6px 6px 12px rgba(0,0,0,.6);
  letter-spacing:3px;display:block;text-decoration:none;margin-bottom:20px;
}
.order-phone:hover{color:var(--gold)}
.payment-row{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin:25px 0}
.pay-card{
  width:80px;height:50px;border-radius:6px;border:2px solid #000;
  display:flex;align-items:center;justify-content:center;
  font-family:'Arial Black',sans-serif;
  font-size:.85rem;font-weight:900;letter-spacing:.5px;
  box-shadow:2px 2px 0 rgba(0,0,0,.5);
}
.pay-visa{background:linear-gradient(180deg,#fff 0%,#ddd 100%);color:#1a1f71;font-style:italic}
.pay-mc{background:linear-gradient(180deg,#fff 0%,#eee 100%);color:#000;font-size:.7rem}
.pay-mc::before{content:"\25CF\25CF";color:#eb001b;margin-right:-3px;font-size:1.5rem;letter-spacing:-7px}
.pay-mc::after{content:"\25CF";color:#f79e1b;font-size:1.5rem;margin-left:-7px;opacity:.85}
.pay-interac{background:linear-gradient(180deg,#fdb813 0%,#e85420 100%);color:#fff}
.appelez{
  font-family:'Anton',sans-serif;
  font-size:clamp(1.5rem,5vw,2.8rem);color:#fff;
  text-shadow:4px 4px 0 #000,6px 6px 12px rgba(0,0,0,.6);
  letter-spacing:3px;margin-top:20px;
  animation:blink 1.2s steps(2) infinite;
}
@keyframes blink{50%{opacity:.4}}
.web-line{
  font-family:'VT323',monospace;font-size:1.3rem;color:var(--gold);
  text-shadow:2px 2px 0 #000;margin-top:15px;letter-spacing:2px;
}

.hommage{
  background:var(--gold);color:var(--black);text-align:center;
  padding:18px 20px;font-family:'Anton',sans-serif;
  font-size:1rem;text-transform:uppercase;letter-spacing:2px;
  border-top:4px solid var(--black);border-bottom:4px solid var(--black);
}
.hommage a{color:var(--hot);text-decoration:underline}

footer{
  background:var(--black);color:var(--cream);
  padding:40px 20px;text-align:center;
  font-family:'VT323',monospace;font-size:1.1rem;
  border-top:4px solid var(--gold);
}
footer .signature{
  font-family:'Anton',sans-serif;color:var(--gold);
  font-size:1.4rem;margin-bottom:15px;text-transform:uppercase;letter-spacing:3px;
}
footer .disclaimer{
  font-size:.85rem;color:#888;max-width:780px;
  margin:20px auto 0;line-height:1.4;font-family:'VT323',monospace;
}

.boom{
  position:fixed;inset:0;background:var(--gold);color:var(--hot);
  display:none;align-items:center;justify-content:center;
  font-family:'Anton',sans-serif;
  font-size:clamp(3rem,15vw,12rem);z-index:99999;text-align:center;
  animation:boom .5s steps(3) infinite;cursor:pointer;letter-spacing:5px;
}
.boom.show{display:flex}
@keyframes boom{
  0%{background:var(--gold);color:var(--hot)}
  33%{background:var(--hot);color:var(--cream)}
  66%{background:#1f3a85;color:var(--gold)}
}

@media (max-width:600px){
  .plus-burst{width:120px;height:120px;font-size:2rem}
  .marquee-top{font-size:1.1rem;padding:10px 0}
  .testi{transform:rotate(0)!important}
}