*{margin:0;padding:0;box-sizing:border-box}

/* ============ CINEMATIC FIGHT INTRO ============ */
.intro{
  position:fixed;inset:0;z-index:9999;
  background:#000;overflow:hidden;
  animation:introOut .8s ease 7.2s forwards;
}
.intro-stage{
  position:absolute;inset:0;
  will-change:transform;
}
body.intro-done .intro{display:none}
body.intro-done{overflow:auto}
body:not(.intro-done){overflow:hidden;background:#000}

/* Background fight video */
.intro-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
  filter:contrast(1.3) saturate(1.3) brightness(.85);
  animation:videoZoom 7s ease forwards;
}
@keyframes videoZoom{
  0%{transform:scale(1.15);filter:contrast(1.2) saturate(0) brightness(.3)}
  8%{filter:contrast(1.3) saturate(.5) brightness(.7)}
  20%{transform:scale(1.08);filter:contrast(1.4) saturate(1.4) brightness(.85)}
  65%{transform:scale(1.02);filter:contrast(1.4) saturate(1.4) brightness(.85)}
  75%{filter:contrast(1.2) saturate(.8) brightness(.45)}
  100%{transform:scale(1);filter:contrast(1) saturate(.5) brightness(.2)}
}

/* Red/orange color grade overlay */
.intro-grade{
  position:absolute;inset:0;z-index:2;mix-blend-mode:overlay;
  background:
    radial-gradient(ellipse at center, transparent 20%, rgba(192,24,24,.4) 100%),
    linear-gradient(180deg, rgba(245,197,66,.15), rgba(192,24,24,.3));
  pointer-events:none;
}

/* Cinematic letterbox bars */
.intro-bars{position:absolute;inset:0;z-index:3;pointer-events:none}
.bar-top, .bar-bottom{
  position:absolute;left:0;right:0;height:0;
  background:#000;
  animation:barsIn .6s ease forwards;
}
.bar-top{top:0}
.bar-bottom{bottom:0}
@keyframes barsIn{
  to{height:10vh}
}

/* White flash strobes */
.intro-flash{
  position:absolute;inset:0;background:#fff;opacity:0;z-index:5;pointer-events:none;
  animation:flashes 7s ease forwards;
}
@keyframes flashes{
  0%,3%{opacity:0}
  4%{opacity:1}
  5%{opacity:0}
  18%,19%{opacity:0}
  20%{opacity:1}
  21%{opacity:0}
  37%,38%{opacity:0}
  39%{opacity:.8}
  40%{opacity:0}
  65%,66%{opacity:0}
  67%{opacity:.9}
  68%{opacity:0}
  79%{opacity:0}
  80%{opacity:1}
  82%{opacity:0}
  100%{opacity:0}
}

/* Big SLAM text overlays */
.intro-slam{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  z-index:6;opacity:0;pointer-events:none;
}
.intro-slam span{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(80px,18vw,260px);
  letter-spacing:10px;
  color:#fff;
  text-shadow:
    0 0 40px rgba(212,82,31,.9),
    8px 8px 0 rgba(192,24,24,.85),
    -2px -2px 0 #000;
  -webkit-text-stroke:2px #000;
  transform:scale(.5);
}
.slam-1{animation:slamIn 1.3s ease .6s forwards}
.slam-2{animation:slamIn 1.3s ease 2.0s forwards}
.slam-3{animation:slamIn 1.3s ease 3.4s forwards}
@keyframes slamIn{
  0%{opacity:0;transform:scale(.3) rotate(-8deg)}
  15%{opacity:1;transform:scale(1.35) rotate(2deg)}
  25%{transform:scale(1) rotate(-1deg)}
  35%{transform:scale(1.05) rotate(0)}
  78%{opacity:1;transform:scale(1) rotate(0)}
  100%{opacity:0;transform:scale(1.2) rotate(0)}
}
.intro-slam span{display:inline-block}
.slam-1 span{color:#ff4444}
.slam-2 span{color:#ffaa22}
.slam-3 span{
  background:linear-gradient(180deg,#f5c542,#d4521f,#c01818);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:0;
  text-shadow:0 0 60px rgba(245,197,66,.9);
}

/* Final logo reveal */
.intro-final{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  z-index:7;opacity:0;pointer-events:none;
  background:radial-gradient(circle, rgba(10,6,6,.55) 0%, rgba(10,6,6,.9) 70%);
  animation:finalIn .6s ease 4.8s forwards;
}
@keyframes finalIn{
  0%{opacity:0}
  100%{opacity:1}
}
.intro-logo{
  width:clamp(180px,28vw,320px);height:auto;
  border-radius:50%;
  background:radial-gradient(circle, #fff 0%, #f5e9d8 65%, #e0c89a 100%);
  padding:10px;
  opacity:0;
  filter:drop-shadow(0 0 60px rgba(245,197,66,.8));
  animation:logoFinal 1.2s cubic-bezier(.2,1.4,.3,1) 5s forwards;
}
@keyframes logoFinal{
  0%{opacity:0;transform:scale(2.5) rotate(-25deg);filter:blur(16px)}
  55%{opacity:1;transform:scale(.95) rotate(0);filter:blur(0)}
  70%{transform:scale(1.08)}
  100%{opacity:1;transform:scale(1)}
}
.intro-rings{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.intro-ring{
  position:absolute;width:280px;height:280px;border-radius:50%;
  border:4px solid var(--accent-2);
  opacity:0;transform:scale(0);
}
.intro-ring:nth-child(1){animation:ringBurst 1.2s ease 5.2s forwards}
.intro-ring:nth-child(2){animation:ringBurst 1.2s ease 5.35s forwards;border-color:var(--accent)}
.intro-ring:nth-child(3){animation:ringBurst 1.2s ease 5.5s forwards;border-color:var(--red)}
@keyframes ringBurst{
  0%{opacity:1;transform:scale(.3);border-width:8px}
  100%{opacity:0;transform:scale(5);border-width:1px}
}
.intro-tagline{
  margin-top:30px;
  font-family:'Bebas Neue',sans-serif;font-size:clamp(28px,4vw,52px);
  letter-spacing:14px;color:var(--accent-2);
  text-shadow:0 0 24px rgba(245,197,66,.9);
  opacity:0;
  animation:taglineIn 1s ease 5.8s forwards;
}
@keyframes taglineIn{
  0%{opacity:0;letter-spacing:40px;transform:translateY(20px)}
  100%{opacity:1;letter-spacing:14px;transform:translateY(0)}
}

@keyframes introOut{
  to{opacity:0;visibility:hidden}
}

/* SKIP button */
.intro-skip{
  position:absolute;top:24px;right:30px;z-index:10;
  font-family:'Oswald',sans-serif;font-size:13px;letter-spacing:3px;
  color:#fff;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.3);
  padding:8px 16px;border-radius:30px;cursor:pointer;
  transition:all .3s;
}
.intro-skip:hover{background:var(--accent);border-color:var(--accent);transform:translateX(3px)}


/* ============ EMBERS ============ */
.embers{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.ember{
  position:absolute;bottom:-10px;width:6px;height:6px;border-radius:50%;
  background:radial-gradient(circle,#f5c542,#d4521f);
  box-shadow:0 0 10px #f5c542,0 0 20px #d4521f;
  opacity:0;
  animation:emberRise linear infinite;
}
@keyframes emberRise{
  0%{transform:translateY(0) translateX(0) scale(1);opacity:0}
  10%{opacity:1}
  90%{opacity:1}
  100%{transform:translateY(-100vh) translateX(var(--drift,30px)) scale(.3);opacity:0}
}

/* ============ HERO TITLE — letter-by-letter drop ============ */
.title{visibility:hidden}
.title.ready{visibility:visible}
.title .letter{
  display:inline-block;opacity:0;
  transform:translateY(80px) rotate(-15deg);
  animation:letterDrop .65s cubic-bezier(.2,1.4,.3,1) forwards;
}
.title .letter.space{width:.32em}
.title .letter-block{display:inline-block;vertical-align:baseline}
@keyframes letterDrop{
  0%{opacity:0;transform:translateY(80px) rotate(-15deg)}
  60%{opacity:1;transform:translateY(-8px) rotate(2deg)}
  100%{opacity:1;transform:translateY(0) rotate(0)}
}
/* Title afterglow pulse — kicks in once visible */
.title.ready{
  animation:titleGlow 4s ease-in-out 1.2s infinite;
}
@keyframes titleGlow{
  0%,100%{filter:drop-shadow(0 0 0 transparent)}
  50%{filter:drop-shadow(0 0 18px rgba(212,82,31,.45))}
}
:root{
  --bg:#0a0606;
  --bg-2:#1a0d0a;
  --accent:#d4521f;
  --accent-2:#f5c542;
  --red:#c01818;
  --text:#f5e9d8;
  --muted:#a89888;
}
html{scroll-behavior:smooth}
body{
  font-family:'Oswald',sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
}

/* Scroll progress bar */
.scroll-bar{
  position:fixed;top:0;left:0;height:3px;width:0%;z-index:200;
  background:linear-gradient(90deg,var(--accent-2),var(--accent),var(--red));
  box-shadow:0 0 12px var(--accent);
  transition:width .1s linear;
}

/* NAV */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;justify-content:space-between;align-items:center;
  padding:18px 50px;
  background:rgba(10,6,6,.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(212,82,31,.3);
  transition:padding .3s;
}
.nav.shrink{padding:10px 50px}
.brand{display:flex;align-items:center;gap:10px;font-family:'Bebas Neue',sans-serif;letter-spacing:2px}
.brand-mark{
  background:var(--accent);color:#fff;padding:4px 10px;font-size:22px;border-radius:4px;
  box-shadow:0 0 15px rgba(212,82,31,.6);
}
.brand-logo{
  width:48px;height:48px;border-radius:50%;
  background:radial-gradient(circle, #fff 0%, #f5e9d8 70%, #e0c89a 100%);
  padding:3px;
  box-shadow:0 0 14px rgba(245,197,66,.7), 0 0 4px rgba(212,82,31,.5);
  transition:transform .4s;
}
.brand-logo:hover{transform:rotate(15deg) scale(1.08)}
.brand-text{font-size:22px;color:var(--accent-2)}
.nav-links{display:flex;gap:30px;list-style:none}
.nav-links a{
  color:var(--text);text-decoration:none;font-weight:600;letter-spacing:1px;
  text-transform:uppercase;font-size:14px;transition:color .3s;position:relative;
}
.nav-links a::after{
  content:'';position:absolute;bottom:-6px;left:0;width:0;height:2px;
  background:var(--accent);transition:width .3s;
}
.nav-links a:hover{color:var(--accent)}
.nav-links a:hover::after{width:100%}

/* HERO */
.hero{
  min-height:100vh;position:relative;padding:120px 50px 40px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  overflow:hidden;
}
.hero-bg{
  position:absolute;inset:-10%;
  background:
    radial-gradient(circle at 50% 80%, rgba(212,82,31,.25), transparent 60%),
    radial-gradient(circle at 50% 20%, rgba(192,24,24,.15), transparent 50%),
    linear-gradient(180deg,#0a0606 0%, #1a0d0a 50%, #2a1410 100%);
  z-index:-2;
}
.dust{
  position:absolute;inset:-10%;z-index:-1;opacity:.4;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(245,197,66,.6),transparent),
    radial-gradient(1px 1px at 60% 70%, rgba(245,197,66,.4),transparent),
    radial-gradient(1.5px 1.5px at 80% 20%, rgba(212,82,31,.5),transparent),
    radial-gradient(1px 1px at 30% 80%, rgba(245,197,66,.3),transparent);
  background-size:300px 300px;
  animation:dustMove 20s linear infinite;
}
@keyframes dustMove{
  from{background-position:0 0,0 0,0 0,0 0}
  to{background-position:300px -300px,-300px 300px,300px 300px,-300px -300px}
}

.hero-content{text-align:center;z-index:2;max-width:900px;display:flex;flex-direction:column;align-items:center;position:relative}

/* Rotating light rays behind the logo */
.hero-rays{
  position:absolute;top:18%;left:50%;width:700px;height:700px;
  transform:translateX(-50%);pointer-events:none;z-index:0;
  background:
    conic-gradient(from 0deg,
      transparent 0deg, rgba(245,197,66,.18) 8deg, transparent 16deg,
      transparent 50deg, rgba(212,82,31,.14) 58deg, transparent 66deg,
      transparent 110deg, rgba(245,197,66,.16) 118deg, transparent 126deg,
      transparent 170deg, rgba(212,82,31,.12) 178deg, transparent 186deg,
      transparent 230deg, rgba(245,197,66,.18) 238deg, transparent 246deg,
      transparent 290deg, rgba(212,82,31,.14) 298deg, transparent 306deg,
      transparent 350deg, rgba(245,197,66,.16) 358deg, transparent 360deg
    );
  border-radius:50%;
  mask-image:radial-gradient(circle, #000 30%, transparent 70%);
  -webkit-mask-image:radial-gradient(circle, #000 30%, transparent 70%);
  animation:raysSpin 40s linear infinite;
  opacity:.85;
}
@keyframes raysSpin{
  to{transform:translateX(-50%) rotate(360deg)}
}

/* Hero vignette breathing */
.hero-vignette{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at 50% 60%, transparent 30%, rgba(10,6,6,.6) 100%);
  animation:vignettePulse 6s ease-in-out infinite;
}
@keyframes vignettePulse{
  0%,100%{opacity:.7}
  50%{opacity:1}
}

/* Logo wrap with glow rings */
.hero-logo-wrap{
  position:relative;margin-bottom:20px;
  display:flex;align-items:center;justify-content:center;
}
.logo-glow-ring{
  position:absolute;top:50%;left:50%;
  width:clamp(220px, 26vw, 340px);
  aspect-ratio:1;
  border-radius:50%;
  border:2px solid var(--accent-2);
  transform:translate(-50%,-50%);
  opacity:0;
  animation:ringPulse 3s ease-out infinite;
  pointer-events:none;
}
.logo-glow-ring-2{
  animation-delay:1.5s;border-color:var(--accent);
}
@keyframes ringPulse{
  0%{opacity:.7;transform:translate(-50%,-50%) scale(.85);border-width:3px}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.6);border-width:1px}
}

.hero-logo{
  position:relative;z-index:2;
  width:clamp(180px, 22vw, 280px);height:auto;
  border-radius:50%;
  background:radial-gradient(circle, #fff 0%, #f5e9d8 65%, #e0c89a 100%);
  padding:10px;
  box-shadow:
    0 0 50px rgba(245,197,66,.6),
    0 0 100px rgba(212,82,31,.4),
    inset 0 0 30px rgba(212,82,31,.1);
  animation:float 4s ease-in-out infinite, glowBreathe 3s ease-in-out infinite;
}
@keyframes float{
  0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-12px) rotate(-2deg)}
}
@keyframes glowBreathe{
  0%,100%{box-shadow:0 0 50px rgba(245,197,66,.6),0 0 100px rgba(212,82,31,.4),inset 0 0 30px rgba(212,82,31,.1)}
  50%{box-shadow:0 0 80px rgba(245,197,66,.9),0 0 160px rgba(212,82,31,.6),inset 0 0 30px rgba(212,82,31,.15)}
}
.kicker{
  color:var(--accent-2);letter-spacing:8px;font-size:14px;font-weight:600;
  margin-bottom:10px;
}
.title{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(50px,9vw,130px);letter-spacing:6px;line-height:1;
}
.flame{
  background:linear-gradient(180deg,#f5c542 0%, #d4521f 50%, #c01818 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.subtitle{
  color:var(--muted);margin:14px 0 28px;letter-spacing:2px;font-size:16px;
  background:linear-gradient(90deg,
    var(--muted) 0%, var(--muted) 40%,
    var(--accent-2) 50%, var(--muted) 60%, var(--muted) 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shimmerText 5s linear infinite;
}
@keyframes shimmerText{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}
.kicker{
  position:relative;display:inline-block;
}
.kicker::before, .kicker::after{
  content:'';position:absolute;top:50%;width:30px;height:1px;
  background:linear-gradient(90deg, transparent, var(--accent-2));
}
.kicker::before{right:calc(100% + 12px)}
.kicker::after{left:calc(100% + 12px);background:linear-gradient(90deg,var(--accent-2),transparent)}
.cta-row{display:flex;gap:16px;justify-content:center;align-items:center;flex-wrap:wrap;width:100%}
.btn{
  padding:14px 32px;text-decoration:none;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;font-size:14px;
  border-radius:4px;transition:all .3s;display:inline-block;
}
.btn-primary{
  background:linear-gradient(90deg,var(--accent),var(--red),var(--accent));
  background-size:200% 100%;
  color:#fff;box-shadow:0 4px 20px rgba(212,82,31,.4);
  position:relative;overflow:hidden;
  animation:btnPulse 2.5s ease-in-out infinite, btnGradient 4s linear infinite;
}
@keyframes btnPulse{
  0%,100%{box-shadow:0 4px 20px rgba(212,82,31,.4)}
  50%{box-shadow:0 4px 30px rgba(212,82,31,.85), 0 0 40px rgba(245,197,66,.3)}
}
@keyframes btnGradient{
  0%{background-position:0% 0}
  100%{background-position:200% 0}
}
.btn-primary::after{
  content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg);
  animation:btnSheen 3s ease-in-out infinite;
}
@keyframes btnSheen{
  0%,40%{left:-100%}
  60%{left:120%}
  100%{left:120%}
}
.btn-primary:hover{transform:translateY(-2px) scale(1.03)}
.btn-ghost{
  border:2px solid var(--accent-2);color:var(--accent-2);
}
.btn-ghost:hover{background:var(--accent-2);color:#0a0606}
.btn-insta{
  background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
  color:#fff;box-shadow:0 4px 20px rgba(220,39,67,.5);
  display:inline-flex;align-items:center;gap:8px;
}
.btn-insta:hover{transform:translateY(-2px);box-shadow:0 6px 28px rgba(220,39,67,.8)}
.insta-icon{font-size:18px}
.insta-note{
  margin-top:18px;color:var(--muted);font-size:13px;letter-spacing:2px;
}

.scroll-hint{
  margin-top:80px;display:flex;flex-direction:column;align-items:center;gap:10px;
  color:var(--muted);letter-spacing:4px;font-size:12px;
}
.scroll-arrow{
  width:2px;height:50px;background:linear-gradient(180deg,var(--accent-2),transparent);
  position:relative;animation:scrollDown 2s ease-in-out infinite;
}
@keyframes scrollDown{
  0%{transform:scaleY(0);transform-origin:top}
  50%{transform:scaleY(1);transform-origin:top}
  51%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}
}

/* SCROLL SCENE — pinned, video scrubs in one viewport of scroll */
.scroll-scene{
  position:relative;height:200vh;
}
.scene-sticky{
  position:sticky;top:0;height:100vh;width:100%;overflow:hidden;
  background:
    radial-gradient(circle at 50% 70%, rgba(212,82,31,.2), transparent 60%),
    linear-gradient(180deg,#0a0606,#1a0d0a 50%,#0a0606);
}
.fight-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;
}
.video-overlay{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse at center, rgba(10,6,6,.3) 0%, rgba(10,6,6,.85) 100%),
    linear-gradient(180deg,rgba(10,6,6,.7) 0%,rgba(10,6,6,.3) 30%,rgba(10,6,6,.3) 70%,rgba(10,6,6,.9) 100%);
}

.scene-text{
  position:absolute;top:14%;left:50%;transform:translateX(-50%);
  text-align:center;opacity:0;transition:opacity .3s;pointer-events:none;
  z-index:5;padding:24px 40px;border-radius:10px;
  background:rgba(10,6,6,.55);
  backdrop-filter:blur(4px);
  border:1px solid rgba(212,82,31,.35);
  max-width:90%;
}
.scene-text h2{
  font-family:'Bebas Neue',sans-serif;font-size:clamp(40px,7vw,90px);
  letter-spacing:6px;color:#fff;
  text-shadow:0 0 20px rgba(0,0,0,.9), 2px 2px 0 rgba(0,0,0,.6);
}
.scene-text p{
  color:var(--accent-2);letter-spacing:3px;margin-top:10px;font-size:16px;
  text-shadow:0 0 10px rgba(0,0,0,.9);
}


/* REVEAL ANIMATIONS */
.reveal{
  opacity:0;transform:translateY(40px);
  transition:opacity .8s ease, transform .8s ease;
}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-card{
  opacity:0;transform:translateY(60px) scale(.95);
  transition:opacity .8s ease, transform .8s ease;
}
.reveal-card.visible{opacity:1;transform:translateY(0) scale(1)}

/* SECTIONS */
.section{padding:120px 50px;max-width:1200px;margin:0 auto}
.section-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(40px,6vw,72px);letter-spacing:6px;text-align:center;margin-bottom:20px;
}
.section-sub{text-align:center;color:var(--muted);margin-bottom:60px;letter-spacing:1px}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px}
.card{
  background:linear-gradient(180deg,#1a0d0a,#0f0706);
  border:1px solid rgba(212,82,31,.3);
  border-radius:12px;padding:24px;text-align:center;position:relative;overflow:hidden;
  transition:transform .4s;
}
.card:hover{transform:translateY(-8px)}
.card-img{
  height:220px;border-radius:8px;margin-bottom:18px;
  background-size:cover;background-position:center;
  background-color:#1a0d0a;
  background-repeat:no-repeat;
  transition:transform .5s;
  /* fallback pattern if photo missing */
  background-image:linear-gradient(135deg,#2a1410,#0f0606),
    repeating-linear-gradient(45deg,transparent,transparent 8px,rgba(212,82,31,.05) 8px,rgba(212,82,31,.05) 16px);
}
.card:hover .card-img{transform:scale(1.05)}
.card h3{font-family:'Bebas Neue',sans-serif;font-size:26px;letter-spacing:3px;color:var(--accent-2);margin-bottom:8px}
.card p{color:var(--muted);font-size:14px;letter-spacing:1px}
.card-desc{margin-top:10px;font-style:italic}

.tag{
  position:absolute;top:14px;right:14px;padding:4px 10px;border-radius:20px;
  font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;z-index:2;
}
.tag-available{background:#1f7a3a;color:#fff}
.tag-sold{background:#7a1f1f;color:#fff}
.meta{font-size:12px!important;color:var(--accent-2)!important;margin-bottom:6px}
.price{
  font-family:'Bebas Neue',sans-serif;font-size:32px;color:var(--accent);
  margin:14px 0;letter-spacing:2px;
}
.btn-small{padding:10px 22px;font-size:12px;background:linear-gradient(90deg,var(--accent),var(--red));color:#fff;border-radius:4px;text-decoration:none;display:inline-block;letter-spacing:2px;text-transform:uppercase;font-weight:700}
.btn-small:hover{transform:translateY(-2px)}

/* BREEDING features */
.features{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:24px;margin:50px 0;
}
.feature{
  background:linear-gradient(180deg,#1a0d0a,#0f0706);
  border:1px solid rgba(212,82,31,.25);border-radius:10px;
  padding:24px;text-align:center;transition:transform .3s,border-color .3s;
}
.feature:hover{transform:translateY(-5px);border-color:var(--accent)}
.feat-icon{font-size:42px;margin-bottom:12px}
.feature h4{
  font-family:'Bebas Neue',sans-serif;font-size:20px;
  color:var(--accent-2);letter-spacing:2px;margin-bottom:8px;
}
.feature p{color:var(--muted);font-size:14px;line-height:1.5}

.about{text-align:center}
.about-text{
  max-width:780px;margin:0 auto;font-size:18px;line-height:1.7;color:var(--muted);
}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:30px;margin-top:60px}
.stat .num{
  display:block;font-family:'Bebas Neue',sans-serif;font-size:64px;
  color:var(--accent);text-shadow:0 0 20px rgba(212,82,31,.5);
}
.stat p{color:var(--muted);letter-spacing:2px}

/* FOOTER */
.footer{
  padding:80px 50px 40px;text-align:center;
  background:linear-gradient(180deg,transparent,#0a0606);
  border-top:1px solid rgba(212,82,31,.2);
}
.footer p{color:var(--muted);margin:10px 0;letter-spacing:1px}
.copy{font-size:12px;margin-top:30px!important;opacity:.6}

.contact-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:20px;max-width:900px;margin:0 auto 40px;
}
.contact-card{
  background:linear-gradient(180deg,#1a0d0a,#0f0706);
  border:1px solid rgba(212,82,31,.3);border-radius:10px;
  padding:24px;text-align:center;text-decoration:none;
  transition:all .3s;display:block;
}
.contact-card:hover{transform:translateY(-5px);border-color:var(--accent);box-shadow:0 8px 24px rgba(212,82,31,.25)}
.contact-icon{font-size:34px;margin-bottom:10px}
.contact-card h4{
  font-family:'Bebas Neue',sans-serif;color:var(--accent-2);
  font-size:18px;letter-spacing:2px;margin-bottom:6px;
}
.contact-card p{color:var(--text)!important;font-size:14px}

.socials{
  display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:30px 0;
}
.social-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 22px;border-radius:30px;
  text-decoration:none;color:#fff;font-weight:700;
  letter-spacing:1px;font-size:13px;text-transform:uppercase;
  transition:transform .3s,box-shadow .3s;
}
.social-btn:hover{transform:translateY(-3px) scale(1.05)}
.social-insta{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);box-shadow:0 4px 16px rgba(220,39,67,.4)}
.social-yt{background:linear-gradient(90deg,#ff0000,#cc0000);box-shadow:0 4px 16px rgba(255,0,0,.4)}
.social-th{background:linear-gradient(90deg,#222,#000);border:1px solid #555;box-shadow:0 4px 16px rgba(0,0,0,.6)}
.social-wa{background:linear-gradient(90deg,#25d366,#128c7e);box-shadow:0 4px 16px rgba(37,211,102,.4)}

.credit{
  display:inline-flex;align-items:center;gap:10px;
  margin-top:24px;padding:10px 22px;border-radius:30px;
  background:linear-gradient(90deg, rgba(99,102,241,.15), rgba(168,85,247,.15));
  border:1px solid rgba(168,85,247,.4);
  color:var(--text);text-decoration:none;font-size:13px;letter-spacing:1.5px;
  transition:all .3s;
}
.credit strong{color:#c4b5fd;font-weight:700;letter-spacing:2px}
.credit-handle{color:var(--muted);font-size:11px}
.credit-spark{
  color:#a5b4fc;font-size:18px;
  animation:sparkle 2s ease-in-out infinite;
}
@keyframes sparkle{
  0%,100%{transform:scale(1) rotate(0);opacity:.9}
  50%{transform:scale(1.3) rotate(180deg);opacity:1;text-shadow:0 0 12px #a5b4fc}
}
.credit:hover{
  transform:translateY(-2px);
  border-color:#a5b4fc;
  box-shadow:0 6px 20px rgba(168,85,247,.4);
}

/* ========== HAMBURGER MENU (mobile) ========== */
.hamburger{
  display:none;background:transparent;border:0;cursor:pointer;
  width:34px;height:30px;flex-direction:column;justify-content:space-between;
  padding:4px 0;z-index:101;
}
.hamburger span{
  display:block;height:3px;width:100%;background:var(--accent-2);
  border-radius:2px;transition:transform .3s, opacity .3s;
}
.hamburger.open span:nth-child(1){transform:translateY(11px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-11px) rotate(-45deg)}

/* ========== TABLET (max 1024px) ========== */
@media(max-width:1024px){
  .nav{padding:14px 24px}
  .nav-links{gap:20px}
  .nav-links a{font-size:13px}
  .brand-text{font-size:18px}
  .section{padding:90px 30px}
  .hero{padding:110px 30px 40px}
  .cards{gap:22px}
  .features{gap:18px}
  .stat .num{font-size:54px}
  .contact-grid{gap:16px}
}

/* ========== MOBILE (max 768px) ========== */
@media(max-width:768px){
  /* Nav: hamburger drawer */
  .nav{padding:12px 18px}
  .hamburger{display:flex}
  .brand-text{font-size:16px;letter-spacing:1px}
  .brand-logo{width:40px;height:40px}
  .nav-links{
    position:fixed;top:0;right:-100%;
    width:75%;max-width:320px;height:100vh;
    flex-direction:column;align-items:flex-start;
    gap:0;padding:90px 30px 30px;
    background:rgba(10,6,6,.97);
    backdrop-filter:blur(16px);
    border-left:1px solid rgba(212,82,31,.4);
    box-shadow:-10px 0 40px rgba(0,0,0,.6);
    transition:right .35s ease;
    z-index:99;
  }
  .nav-links.open{right:0}
  .nav-links li{width:100%;border-bottom:1px solid rgba(212,82,31,.15)}
  .nav-links a{
    display:block;padding:18px 0;font-size:16px;letter-spacing:3px;
  }
  .nav-links a::after{display:none}

  /* Hero */
  .hero{padding:100px 18px 30px;min-height:100svh}
  .hero-content{max-width:100%}
  .hero-logo{width:clamp(140px,40vw,200px);padding:7px}
  .kicker{font-size:11px;letter-spacing:4px}
  .title{font-size:clamp(46px,13vw,80px);letter-spacing:3px}
  .subtitle{font-size:14px;letter-spacing:1px}
  .cta-row{gap:10px;width:100%;flex-direction:column;align-items:center;justify-content:center}
  .btn{padding:14px 24px;font-size:13px;width:100%;max-width:320px;text-align:center}
  .btn-insta{justify-content:center}
  .insta-note{font-size:11px;letter-spacing:1px}
  .scroll-hint{margin-top:40px;font-size:11px;letter-spacing:2px}
  .scroll-arrow{height:36px}

  /* Sections */
  .section{padding:60px 18px}
  .section-title{font-size:clamp(34px,8vw,52px);letter-spacing:3px;margin-bottom:14px}
  .section-sub{font-size:13px;margin-bottom:40px;padding:0 10px}

  /* Sales cards */
  .cards{grid-template-columns:1fr;gap:20px;max-width:420px;margin:0 auto}
  .card{padding:20px}
  .card-img{height:240px}
  .card h3{font-size:22px;letter-spacing:2px}
  .price{font-size:28px}
  .tag{top:18px;right:18px;padding:5px 12px;font-size:10px}

  /* Breeding */
  .features{grid-template-columns:1fr 1fr;gap:14px}
  .feature{padding:18px 14px}
  .feat-icon{font-size:34px}
  .feature h4{font-size:16px}
  .feature p{font-size:12px}
  .about-text{font-size:15px;padding:0 6px}
  .stats{grid-template-columns:1fr 1fr;gap:24px}
  .stat .num{font-size:46px}
  .stat p{font-size:12px;letter-spacing:1px}

  /* Scroll scene */
  .scroll-scene{height:200vh}
  .scene-text{padding:16px 24px;top:12%}
  .scene-text h2{font-size:clamp(34px,9vw,60px);letter-spacing:3px}
  .scene-text p{font-size:13px;letter-spacing:1px}

  /* Footer */
  .footer{padding:60px 18px 30px}
  .contact-grid{grid-template-columns:1fr;max-width:340px;gap:14px}
  .contact-card{padding:18px}
  .socials{gap:10px}
  .social-btn{padding:10px 16px;font-size:11px;letter-spacing:.5px}
  .credit{font-size:11px;padding:8px 16px;flex-wrap:wrap;justify-content:center;text-align:center;margin-left:auto;margin-right:auto}
  .credit-handle{display:block;width:100%;text-align:center;margin-top:2px}
  .footer{text-align:center}
  .socials{justify-content:center}
  .copy{font-size:10px;padding:0 10px}

  /* Intro */
  .intro-slam span{font-size:clamp(50px,16vw,120px);letter-spacing:5px;-webkit-text-stroke-width:1px}
  .intro-tagline{font-size:clamp(22px,5vw,38px);letter-spacing:6px;margin-top:20px}
  .intro-logo{width:clamp(150px,40vw,220px)}
  .intro-ring{width:200px;height:200px}
  .intro-skip{top:14px;right:14px;font-size:11px;padding:6px 12px}
  .bar-top, .bar-bottom{animation:none}
  @keyframes barsInMobile{to{height:6vh}}
  .bar-top, .bar-bottom{animation:barsInMobile .6s ease forwards}
}

/* ========== SMALL PHONES (max 420px) ========== */
@media(max-width:420px){
  .nav{padding:10px 14px}
  .brand-text{font-size:14px}
  .brand-logo{width:36px;height:36px}
  .hero{padding:90px 14px 20px}
  .hero-logo{width:140px;padding:6px}
  .title{font-size:46px;letter-spacing:2px}
  .kicker{font-size:10px;letter-spacing:3px}
  .subtitle{font-size:13px}
  .section{padding:50px 14px}
  .section-title{font-size:32px}
  .features{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr;gap:18px}
  .stat .num{font-size:40px}
  .card-img{height:200px}
  .price{font-size:24px}
  .btn-small{padding:10px 18px;font-size:11px}
  .scene-text h2{font-size:34px;letter-spacing:2px}
  .scene-text p{font-size:11px}
  .scroll-hint{margin-top:24px}
  .footer p{font-size:12px}
  .social-btn{padding:9px 14px;font-size:10px}
}

/* ========== LANDSCAPE PHONES (short height) ========== */
@media(max-height:520px) and (orientation:landscape){
  .hero{min-height:100svh;padding:80px 20px 20px}
  .hero-logo{width:90px;margin-bottom:8px}
  .scroll-hint{display:none}
  .scene-text{top:6%}
  .scene-text h2{font-size:36px}
}

/* ========== REDUCE MOTION ========== */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .embers, .dust{display:none}
}