*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#050b12;color:#fff}
a{text-decoration:none}
.topbar{height:66px;padding:0 4.3vw;display:flex;align-items:center;gap:34px;background:#04090f;border-bottom:1px solid #172433;position:sticky;top:0;z-index:50}
.logo{font-weight:900;letter-spacing:2.5px;font-size:27px;color:#fff;white-space:nowrap}
.logo span{color:#0876ff}.logo small{font-size:10px;letter-spacing:1.8px}
.topbar nav{margin-left:auto;display:flex;gap:27px}.topbar nav a{font-size:10px;letter-spacing:.8px;color:#e2e9f0;padding:27px 0 23px}.topbar nav a.active{border-bottom:2px solid #0876ff}
.order-btn{background:#0876ff;color:#fff;border-radius:18px;font-size:10px;font-weight:800;padding:9px 15px}

.hero{position:relative;min-height:610px;overflow:hidden;background:
radial-gradient(circle at 73% 46%,rgba(31,67,98,.9) 0,rgba(12,26,41,.88) 28%,rgba(4,10,16,.97) 63%),
linear-gradient(180deg,#08131f,#050b12)}
.hero:before{content:"";position:absolute;inset:0;background:
radial-gradient(circle at 75% 55%,rgba(255,255,255,.08),transparent 30%),
radial-gradient(circle at 68% 36%,rgba(118,161,194,.10),transparent 16%);
filter:blur(20px)}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,9,15,.98) 0,rgba(4,9,15,.85) 38%,rgba(4,9,15,.18) 67%,rgba(4,9,15,.05))}
.hero-copy{position:relative;z-index:5;width:49%;padding:75px 0 55px 5.5vw}
.eyebrow{font-size:11px;letter-spacing:2.8px;font-weight:800;color:#5ba7ff;margin:0 0 16px}
.hero h1{font-size:57px;line-height:.96;letter-spacing:-1.5px;margin:0;color:#fff;font-weight:900}.hero h1 span{color:#0876ff}
.sub{font-size:15px;line-height:1.55;color:#c4cfda;margin:18px 0 30px}
.benefit-row{display:grid;grid-template-columns:repeat(4,max-content);gap:20px;margin:28px 0 32px}
.benefit{display:flex;align-items:center;gap:9px;font-size:9px;line-height:1.25;font-weight:800;color:#eef4fa}
.icon{width:34px;height:34px;border:1px solid #607386;border-radius:50%;display:grid;place-items:center;font-size:11px;color:#fff}
.explore-btn{display:inline-block;background:#0876ff;color:#fff;border-radius:23px;padding:13px 24px;font-weight:800;font-size:12px}

.product-stage{position:absolute;z-index:4;right:2.7vw;bottom:18px;width:57%;height:500px}
.tin{position:absolute;border-radius:50%;overflow:hidden;box-shadow:0 28px 55px rgba(0,0,0,.48);background:#fff;border:5px solid rgba(255,255,255,.75)}
.tin img{width:100%;height:100%;object-fit:cover}
.zyn-tin{width:250px;height:250px;left:4%;bottom:68px;z-index:6;transform:rotate(-5deg)}
.pablo-ice-tin{width:205px;height:205px;left:26%;bottom:140px;z-index:5;transform:rotate(4deg)}
.pablo-tin{width:190px;height:190px;left:45%;bottom:168px;z-index:4;transform:rotate(-5deg)}
.killa-tin{width:222px;height:222px;left:44%;bottom:44px;z-index:8;transform:rotate(3deg)}
.velo-tin{width:194px;height:194px;left:67%;bottom:70px;z-index:7;transform:rotate(-4deg)}
.fox-tin{width:178px;height:178px;right:0;bottom:88px;z-index:6;transform:rotate(3deg)}
.mg{position:absolute;right:10px;top:12px;color:#fff;border-radius:50%;width:52px;height:52px;display:grid;place-items:center;font-size:12px;font-weight:900;border:3px solid rgba(255,255,255,.9)}
.mg.blue{background:#0b78ff}.mg.red{background:#d7262e}

.brand-strip{background:#f8fafc;color:#0a1119;padding:82px 5.5vw 90px}.section-heading h2{font-size:40px;margin:8px 0 34px}
.brand-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.brand-card{background:#fff;border:1px solid #dfe6ed;border-radius:16px;padding:22px;box-shadow:0 10px 30px rgba(10,25,40,.06)}
.product-img{height:240px;display:flex;align-items:center;justify-content:center;position:relative}.product-img img{width:100%;height:100%;object-fit:contain}
.brand-card h3{font-size:24px;margin:15px 0 7px}.brand-card p{margin:0;color:#66737f;font-size:14px;line-height:1.5}
.zyn-name{color:#0876ff}.velo-name{color:#12afb8}
.corner-badge{position:absolute;right:8px;top:8px;background:#0876ff;color:#fff;padding:9px 11px;border-radius:20px;font-weight:900;font-size:13px}.corner-badge.alt{background:#d7262e}

.about{padding:78px 5.5vw;background:#08121d;display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.about h2,.contact h2{font-size:39px;margin:8px 0}.about>p{color:#aebcca;line-height:1.7;font-size:16px}

.contact{padding:82px 5.5vw;background:#050b12;display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.contact-copy p:last-child{color:#9eafbf}.contact-panel{background:#091725;border:1px solid #1c3145;border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:17px}.contact-panel a,.contact-panel span{color:#fff;font-size:18px}

footer{padding:32px 5.5vw;border-top:1px solid #172433;background:#04090f;color:#8fa0b0;font-size:11px;display:grid;grid-template-columns:auto 1fr auto;gap:30px;align-items:center}.footer-logo{font-size:21px}

.age-gate{position:fixed;inset:0;background:rgba(0,0,0,.93);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}.age-box{max-width:480px;background:#0b1724;border:1px solid #243b52;border-radius:18px;padding:36px;text-align:center}.age-logo{font-size:30px}.age-box h2{font-size:29px;margin:20px 0 10px}.age-box p{color:#aebdcb;line-height:1.6}.age-actions{display:flex;gap:10px;justify-content:center;margin-top:20px}.age-box button{border:0;border-radius:23px;padding:12px 18px;color:#fff;font-weight:800;cursor:pointer}.primary-btn{background:#0876ff}.secondary-btn{background:#1a2a39}

@media(max-width:1050px){
  .topbar nav{display:none}
  .hero-copy{width:55%}
  .hero h1{font-size:48px}
  .benefit-row{grid-template-columns:repeat(2,max-content)}
  .product-stage{right:-6vw;width:58%}
  .brand-cards{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .topbar{padding:0 5vw}.order-btn{margin-left:auto}
  .hero{min-height:880px}.hero-copy{width:100%;padding:58px 6vw 0}.hero h1{font-size:43px}.product-stage{position:relative;right:auto;bottom:auto;width:100%;height:420px;margin-top:0}
  .zyn-tin{width:180px;height:180px;left:5%;bottom:100px}.pablo-ice-tin{width:145px;height:145px;left:32%;bottom:190px}.pablo-tin{width:135px;height:135px;left:54%;bottom:205px}.killa-tin{width:160px;height:160px;left:42%;bottom:64px}.velo-tin{width:145px;height:145px;left:68%;bottom:100px}.fox-tin{width:130px;height:130px;right:-5%;bottom:118px}
  .brand-cards{grid-template-columns:1fr}.about,.contact{grid-template-columns:1fr}.benefit-row{grid-template-columns:repeat(2,1fr);gap:14px}.benefit{font-size:8px}
  footer{grid-template-columns:1fr}
}

/* V5 contact polish */
.contact-v5{padding:105px 5.5vw;background:radial-gradient(circle at 70% 30%,#102b43 0,#07121d 35%,#050b12 68%);border-top:1px solid #172433;text-align:center}
.contact-inner{max-width:900px;margin:auto}.contact-v5 h2{font-size:54px;margin:8px 0 12px;font-weight:900}.contact-v5 h2 span{color:#0876ff}.contact-sub{color:#aab9c7;font-size:17px;margin:0 0 36px}
.contact-actions{display:flex;justify-content:center;gap:15px;margin-bottom:34px}.contact-button{width:245px;min-height:72px;padding:13px 20px;display:flex;align-items:center;gap:14px;text-align:left;color:#fff;border:1px solid #29435b;border-radius:13px;background:#0a1826}.contact-button.primary-contact{background:#0876ff;border-color:#0876ff}.contact-button b{width:39px;height:39px;border:1px solid rgba(255,255,255,.45);border-radius:50%;display:grid;place-items:center}.contact-button span{font-size:17px}.contact-button small,.direct-contact small{display:block;color:#a9bdd0;font-size:8px;letter-spacing:1.5px;margin-bottom:4px}.primary-contact small{color:#dcecff}
.direct-contact{display:flex;justify-content:center;align-items:center;gap:38px;max-width:650px;margin:auto;padding-top:28px;border-top:1px solid #1b3044}.direct-contact a{color:#fff;text-align:left}.direct-contact strong{font-size:18px}.direct-contact i{width:1px;height:42px;background:#263b4e}
.product-stage{right:1.5vw;width:59%}.tin{box-shadow:0 24px 45px rgba(0,0,0,.55);border-width:3px}
@media(max-width:760px){.contact-v5{padding:75px 6vw}.contact-v5 h2{font-size:42px}.contact-actions{flex-direction:column}.contact-button{width:100%}.direct-contact{flex-direction:column;gap:20px}.direct-contact i{width:100%;height:1px}.direct-contact a{text-align:center}}

/* ===== V6 APPROVED HERO ===== */
.approved-hero-v6{
  width:100%;
  background:#02070c;
  overflow:hidden;
  line-height:0;
}
.approved-hero-v6 img{
  display:block;
  width:100%;
  height:auto;
  margin:0 auto;
}
header, .hero, .contact-v5{
  display:none !important;
}
@media(max-width:760px){
  .approved-hero-v6{
    overflow-x:auto;
  }
  .approved-hero-v6 img{
    width:1280px;
    max-width:none;
  }
}
