/* ===== BROKODE — dark streetwear theme ===== */
:root{
  --bg:#0a0a0c;
  --bg-alt:#121216;
  --card:#17171c;
  --line:#2a2a30;
  --text:#f2f2f2;
  --muted:#a3a3ab;
  --accent:#8fae4f;      /* green dot from logo */
  --accent2:#e63946;     /* red pop */
  --radius:16px;
  --shadow: 0 20px 50px rgba(0,0,0,.5);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
h1,h2,h3,h4{margin:0 0 .5rem;letter-spacing:.5px;}
p{color:var(--muted);line-height:1.6;}

.eyebrow{color:var(--accent);text-transform:uppercase;letter-spacing:3px;font-size:.8rem;font-weight:700;margin:0 0 .5rem;}
.center{text-align:center;}
.section-title{font-size:2.2rem;}
.section-sub{max-width:600px;margin:0 auto 2rem;}

/* ===== buttons ===== */
.btn{
  display:inline-block;
  padding:.85rem 1.8rem;
  border-radius:999px;
  border:1px solid var(--line);
  cursor:pointer;
  font-weight:700;
  font-size:.95rem;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
  text-align:center;
}
.btn-primary{background:linear-gradient(135deg,var(--accent),#5f7d2b);color:#0a0a0c;border:none;}
.btn-primary:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 10px 25px rgba(143,174,79,.35);}
.btn-ghost{background:transparent;color:var(--text);}
.btn-ghost:hover{background:rgba(255,255,255,.08);}
.btn-block{width:100%;}
.btn-lg{padding:1.1rem 2.4rem;font-size:1.05rem;}
.btn-sm{padding:.5rem 1rem;font-size:.8rem;}

/* ===== navbar ===== */
.navbar{
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(14px);
  background:rgba(10,10,12,.7);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:1200px;margin:0 auto;padding:.8rem 1.5rem;
  display:flex;align-items:center;justify-content:space-between;
}
.brand-logo{height:22px;}
.nav-links{display:flex;gap:1.8rem;}
.nav-links a{font-size:.9rem;font-weight:600;opacity:.85;transition:opacity .2s, color .2s;}
.nav-links a:hover{opacity:1;color:var(--accent);}
.nav-actions{display:flex;align-items:center;gap:.8rem;}
.icon-btn{background:none;border:1px solid var(--line);color:var(--text);border-radius:50%;width:40px;height:40px;cursor:pointer;position:relative;font-size:1rem;transition:transform .2s, border-color .2s;}
.icon-btn:hover{transform:scale(1.1);border-color:var(--accent);}
.cart-count{position:absolute;top:-6px;right:-6px;background:var(--accent2);color:#fff;font-size:.65rem;border-radius:999px;padding:1px 6px;font-weight:700;}
.hamburger{display:none;background:none;border:none;color:var(--text);font-size:1.4rem;cursor:pointer;}

/* ===== hero ===== */
.hero{
  position:relative;
  min-height:92vh;
  display:flex;align-items:center;
  padding:2rem 1.5rem;
  overflow:hidden;
  max-width:1300px;margin:0 auto;
}
.hero-bg-glow{
  position:absolute;inset:-20% -10%;
  background:radial-gradient(circle at 30% 30%, rgba(143,174,79,.25), transparent 55%),
             radial-gradient(circle at 80% 70%, rgba(230,57,70,.15), transparent 50%);
  filter:blur(40px);
  animation:pulseGlow 8s ease-in-out infinite alternate;
  z-index:0;
}
@keyframes pulseGlow{from{opacity:.6;}to{opacity:1;}}
.hero-grid{
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:40px 40px;
  mask-image:radial-gradient(ellipse at center, black 40%, transparent 80%);
  z-index:0;
}
.hero-content{position:relative;z-index:1;max-width:600px;}
.hero-title{font-size:clamp(3rem,9vw,6rem);font-weight:900;line-height:1;}
.glitch{position:relative;display:inline-block;color:var(--text);animation:flicker 6s infinite;}
@keyframes flicker{0%,92%,100%{opacity:1;}93%{opacity:.6;}94%{opacity:1;}96%{opacity:.4;}97%{opacity:1;}}
.hero-sub{font-size:1.1rem;margin:1.2rem 0 1.8rem;}
.hero-cta{display:flex;gap:1rem;flex-wrap:wrap;}
.hero-tee{
  position:absolute;right:-40px;top:50%;transform:translateY(-50%) rotate(4deg);
  width:380px;z-index:1;
  animation:floatY 5s ease-in-out infinite;
  border-radius:20px;overflow:hidden;box-shadow:var(--shadow);
}
.hero-tee img{border-radius:20px;}
@keyframes floatY{0%,100%{transform:translateY(-50%) rotate(4deg);}50%{transform:translateY(-56%) rotate(-2deg);}}
.scroll-cue{position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);color:var(--muted);font-size:.8rem;animation:bounceDown 2s infinite;}
@keyframes bounceDown{0%,100%{transform:translate(-50%,0);}50%{transform:translate(-50%,8px);}}

.reveal{opacity:0;transform:translateY(30px);animation:revealUp .8s ease forwards;}
.reveal:nth-child(2){animation-delay:.1s;}
.reveal:nth-child(3){animation-delay:.2s;}
.reveal:nth-child(4){animation-delay:.3s;}
@keyframes revealUp{to{opacity:1;transform:translateY(0);}}

/* ===== marquee ===== */
.marquee{background:var(--accent);color:#0a0a0c;overflow:hidden;padding:.7rem 0;font-weight:800;white-space:nowrap;}
.marquee-track{display:inline-flex;gap:1.5rem;animation:scrollLeft 18s linear infinite;}
.marquee-track span{font-size:.85rem;letter-spacing:1px;}
@keyframes scrollLeft{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ===== fade-in on scroll ===== */
.fade-in{opacity:0;transform:translateY(40px);transition:opacity .8s ease, transform .8s ease;}
.fade-in.visible{opacity:1;transform:translateY(0);}

/* ===== about ===== */
.about{max-width:1200px;margin:6rem auto;padding:0 1.5rem;}
.about-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:3rem;align-items:center;}
.about-img{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);}
.about-text h2{font-size:2rem;}

/* ===== bundles ===== */
.bundles{max-width:1200px;margin:6rem auto;padding:0 1.5rem;}
.bundle-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem;margin-top:2.5rem;}
.bundle-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.6rem;position:relative;transition:transform .3s ease, box-shadow .3s ease;
}
.bundle-card.featured{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent), var(--shadow);}
.bundle-badge{position:absolute;top:-12px;left:1.4rem;background:var(--accent);color:#0a0a0c;font-size:.7rem;font-weight:800;padding:.3rem .8rem;border-radius:999px;letter-spacing:1px;}
.bundle-imgs{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin:1rem 0;}
.bundle-imgs img{border-radius:10px;aspect-ratio:3/4;object-fit:cover;}
.bundle-imgs.four{grid-template-columns:repeat(4,1fr);}
.bundle-imgs.six{grid-template-columns:repeat(3,1fr);}
.bundle-price{font-size:1.6rem;font-weight:900;color:var(--accent);margin:1rem 0;}
.bundle-price span{font-size:.85rem;color:var(--muted);font-weight:400;}

/* ===== gallery ===== */
.gallery{max-width:1200px;margin:6rem auto;padding:0 1.5rem;}
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;}
.gallery-grid img{border-radius:var(--radius);aspect-ratio:3/4;object-fit:cover;box-shadow:var(--shadow);}

/* ===== ai teaser ===== */
.ai-teaser{position:relative;max-width:1200px;margin:6rem auto;padding:4rem 1.5rem;text-align:center;border-radius:var(--radius);overflow:hidden;background:var(--bg-alt);border:1px solid var(--line);}
.ai-teaser-glow{position:absolute;inset:0;background:conic-gradient(from 0deg, rgba(143,174,79,.2), transparent 40%, rgba(230,57,70,.15), transparent 80%);animation:spin 12s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.ai-teaser > *{position:relative;z-index:1;}

/* ===== faq ===== */
.faq{max-width:800px;margin:6rem auto;padding:0 1.5rem;}
.faq-list details{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1rem 1.2rem;margin-bottom:.8rem;}
.faq-list summary{cursor:pointer;font-weight:700;}
.faq-list p{margin-top:.6rem;}

/* ===== footer ===== */
.footer{background:var(--bg-alt);border-top:1px solid var(--line);padding:4rem 1.5rem 2rem;margin-top:4rem;}
.footer-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2rem;}
.footer-logo{height:20px;margin-bottom:.8rem;}
.footer h4{color:var(--accent);}
.footer a:hover{color:var(--accent);}
.footer-bottom{text-align:center;color:var(--muted);margin-top:3rem;font-size:.8rem;}

/* ===== tilt 3d ===== */
.tilt-el{transition:transform .15s ease;transform-style:preserve-3d;will-change:transform;}

/* ===== drawer (cart) ===== */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .3s;z-index:60;}
.overlay.active{opacity:1;pointer-events:auto;}
.drawer{
  position:fixed;top:0;right:-420px;width:400px;max-width:90vw;height:100%;
  background:var(--bg-alt);border-left:1px solid var(--line);z-index:70;
  display:flex;flex-direction:column;transition:right .35s ease;
}
.drawer.active{right:0;}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:1.2rem;border-bottom:1px solid var(--line);}
.drawer-body{flex:1;overflow-y:auto;padding:1.2rem;}
.drawer-foot{padding:1.2rem;border-top:1px solid var(--line);}
.cart-total{font-size:1.2rem;font-weight:800;margin-bottom:1rem;}
.close-btn{background:none;border:none;color:var(--text);font-size:1.2rem;cursor:pointer;}
.empty-msg{color:var(--muted);}
.cart-item{display:flex;justify-content:space-between;align-items:center;padding:.8rem 0;border-bottom:1px solid var(--line);}
.cart-item button{background:none;border:none;color:var(--accent2);cursor:pointer;font-size:.9rem;}

/* ===== modal ===== */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.7);display:none;align-items:center;justify-content:center;z-index:80;padding:1.5rem;}
.modal.active{display:flex;}
.modal-box{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:2rem;max-width:440px;width:100%;position:relative;max-height:90vh;overflow-y:auto;animation:popIn .3s ease;}
@keyframes popIn{from{opacity:0;transform:scale(.9);}to{opacity:1;transform:scale(1);}}
.checkout-box{max-width:520px;}
.auth-tabs{display:flex;gap:.5rem;margin-bottom:1.2rem;}
.auth-tab{flex:1;padding:.6rem;background:transparent;border:1px solid var(--line);color:var(--text);border-radius:999px;cursor:pointer;font-weight:700;}
.auth-tab.active{background:var(--accent);color:#0a0a0c;border-color:var(--accent);}
.auth-form{display:none;flex-direction:column;gap:.8rem;}
.auth-form.active{display:flex;}
.account-status{margin-top:1rem;color:var(--accent);font-size:.85rem;text-align:center;}

input, textarea, select{
  background:var(--bg);border:1px solid var(--line);color:var(--text);
  padding:.8rem 1rem;border-radius:10px;font-size:.95rem;width:100%;
}
input:focus, textarea:focus, select:focus{outline:none;border-color:var(--accent);}
.form-row{display:flex;gap:.8rem;}
.hp{position:absolute;left:-9999px;}

.checkout-total{font-size:1.3rem;font-weight:800;color:var(--accent);margin-bottom:1rem;}
#orderForm{display:flex;flex-direction:column;gap:.9rem;margin-top:1rem;}
.pay-options{display:flex;flex-direction:column;gap:.6rem;}
.pay-opt{display:flex;align-items:center;gap:.6rem;border:1px solid var(--line);padding:.7rem 1rem;border-radius:10px;cursor:pointer;}
.pay-opt input{width:auto;}
.pay-opt.locked{opacity:.5;cursor:not-allowed;}
.pay-opt.unlocked{opacity:1;border-color:var(--accent);cursor:pointer;}
.upi-box{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:1rem;display:flex;flex-direction:column;gap:.7rem;}
.upi-id-row{display:flex;align-items:center;gap:.6rem;}
.upi-id-row code{background:var(--card);padding:.5rem .8rem;border-radius:8px;flex:1;}
.confirm-check{display:flex;align-items:center;gap:.6rem;font-size:.85rem;color:var(--muted);}
.confirm-check input{width:auto;}

/* ===== designer page ===== */
.designer{max-width:1100px;margin:3rem auto 6rem;padding:0 1.5rem;}
.designer-wrap{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:start;margin-top:2rem;}
.tee-canvas-wrap{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:var(--card);}
.tee-canvas-wrap img.tee-base{width:100%;}
.tee-canvas-wrap canvas{position:absolute;top:0;left:0;width:100%;height:100%;}
.designer-controls{display:flex;flex-direction:column;gap:.5rem;background:var(--card);border:1px solid var(--line);padding:1.6rem;border-radius:var(--radius);}
.designer-controls label{font-size:.8rem;color:var(--muted);margin-top:.6rem;text-transform:uppercase;letter-spacing:1px;}
.designer-note{font-size:.8rem;margin-top:1rem;}

/* ===== thank you ===== */
.thankyou{min-height:70vh;display:flex;align-items:center;justify-content:center;padding:2rem;}
.thankyou-box{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:3rem;text-align:center;max-width:480px;box-shadow:var(--shadow);}
.check-circle{width:70px;height:70px;border-radius:50%;background:var(--accent);color:#0a0a0c;font-size:2rem;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;animation:popIn .5s ease;}

/* ===== responsive ===== */
@media (max-width:900px){
  .nav-links{display:none;}
  .hamburger{display:block;}
  .about-grid{grid-template-columns:1fr;}
  .bundle-cards{grid-template-columns:1fr;}
  .gallery-grid{grid-template-columns:repeat(2,1fr);}
  .hero-tee{display:none;}
  .designer-wrap{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}