
:root{
  --bg:#070809;
  --panel:#0d0f11;
  --panel-2:#121519;
  --panel-3:#171b20;
  --text:#f4f6f8;
  --muted:#9299a2;
  --line:#242a31;
  --accent:#b7ff25;
  --accent-dark:#8fd000;
  --white:#ffffff;
  --danger:#ff5b5b;
  --radius:22px;
  --shadow:0 24px 70px rgba(0,0,0,.35);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:Inter,system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
}
button,input,select{font:inherit}
button,a{transition:.25s ease}
a{text-decoration:none;color:inherit}
button{cursor:pointer}
.announcement{
  min-height:34px;background:var(--accent);color:#0a0b0c;
  display:flex;align-items:center;justify-content:center;gap:16px;
  font-weight:800;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  padding:8px 18px;text-align:center
}
.announcement-dot{width:4px;height:4px;background:#101214;border-radius:50%}
.header{
  height:78px;display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(20px,5vw,82px);border-bottom:1px solid rgba(255,255,255,.06);
  position:sticky;top:0;z-index:50;background:rgba(7,8,9,.86);backdrop-filter:blur(18px)
}
.brand{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:900;letter-spacing:-.06em}
.brand>span:last-child>span{color:var(--accent)}
.brand-mark{
  display:grid;place-items:center;width:34px;height:34px;border-radius:9px;
  color:#070809;background:var(--accent);font-weight:900;transform:skew(-8deg)
}
.nav{display:flex;align-items:center;gap:34px;color:#c5cbd2;font-size:13px;font-weight:600}
.nav a:hover{color:var(--accent)}
.header-actions{display:flex;gap:10px;align-items:center}
.icon-btn,.menu-btn,.search-panel button,.cart-header button{
  border:1px solid var(--line);background:var(--panel);color:var(--text);
  min-width:42px;height:42px;border-radius:12px
}
.icon-btn:hover,.menu-btn:hover{border-color:#515b66;background:var(--panel-2)}
.cart-btn{position:relative;width:auto;padding:0 12px}
.cart-btn span{
  min-width:18px;height:18px;padding:0 4px;display:grid;place-items:center;
  position:absolute;right:-5px;top:-6px;background:var(--accent);color:#090a0b;
  border-radius:99px;font-size:10px;font-weight:900
}
.menu-btn{display:none}
.search-panel{
  position:fixed;left:0;right:0;top:112px;z-index:45;
  transform:translateY(-130%);opacity:0;transition:.3s ease;
  display:flex;justify-content:center;padding:18px
}
.search-panel.open{transform:translateY(0);opacity:1}
.search-wrap{
  width:min(680px,100%);display:flex;padding:9px;background:#101317;
  border:1px solid #303740;border-radius:18px;box-shadow:var(--shadow)
}
.search-wrap input{
  flex:1;background:transparent;border:0;outline:0;color:#fff;padding:0 14px
}
.search-wrap button{border:0;background:transparent}
.hero{
  min-height:700px;display:grid;grid-template-columns:1.08fr .92fr;
  align-items:center;position:relative;overflow:hidden;
  padding:80px clamp(20px,7vw,120px) 70px
}
.hero:before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(7,8,9,1) 0%,rgba(7,8,9,.94) 41%,rgba(7,8,9,.3) 100%),
    radial-gradient(circle at 75% 50%,#20262d 0,#0a0c0f 42%,#070809 75%);
  z-index:-3
}
.hero-glow{position:absolute;border-radius:50%;filter:blur(80px);opacity:.13;z-index:-1}
.glow-one{width:360px;height:360px;background:var(--accent);right:5%;top:19%}
.glow-two{width:230px;height:230px;background:#5a8cff;right:27%;bottom:4%;opacity:.07}
.eyebrow{color:var(--accent);font-size:11px;font-weight:900;letter-spacing:.16em}
.hero h1,.gaming-copy h2,.feature-copy h2{
  margin:18px 0 22px;font-size:clamp(58px,7vw,110px);line-height:.88;
  letter-spacing:-.075em;font-weight:900
}
.hero h1 span,.gaming-copy h2 span{color:var(--accent)}
.hero-content>p{max-width:610px;color:#a4abb4;font-size:17px;line-height:1.75}
.hero-cta{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap}
.btn{
  min-height:48px;padding:0 20px;border-radius:12px;border:1px solid transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-weight:800;font-size:13px
}
.btn-primary{background:var(--accent);color:#090a0b}
.btn-primary:hover{background:#cbff62;transform:translateY(-2px)}
.btn-ghost{border-color:#2b3239;background:rgba(255,255,255,.025);color:#f1f3f5}
.btn-ghost:hover{border-color:#69737d}
.full{width:100%}
.hero-stats{display:flex;gap:34px;margin-top:52px}
.hero-stats div{display:flex;flex-direction:column;border-left:1px solid var(--line);padding-left:15px}
.hero-stats strong{font-size:20px}
.hero-stats span{color:#7f8790;font-size:11px;margin-top:4px}
.hero-visual{height:560px;position:relative;display:grid;place-items:center}
.product-orbit{
  position:absolute;border:1px solid rgba(183,255,37,.16);border-radius:50%;
  width:470px;height:470px
}
.orbit-two{width:350px;height:350px;border-color:rgba(255,255,255,.08)}
.headphone-art{width:390px;height:430px;position:relative;filter:drop-shadow(0 35px 35px rgba(0,0,0,.65))}
.headband{
  position:absolute;width:260px;height:270px;border:42px solid #23282f;
  border-bottom:0;border-radius:150px 150px 0 0;left:65px;top:34px;
  box-shadow:inset 0 0 0 1px #3f474f
}
.headband:after{
  content:"";position:absolute;inset:12px;border:2px solid rgba(255,255,255,.04);
  border-bottom:0;border-radius:120px 120px 0 0
}
.earcup{
  position:absolute;top:225px;width:92px;height:150px;background:linear-gradient(145deg,#353c45,#13171c);
  border:1px solid #4a535c;border-radius:42px;box-shadow:inset 0 0 24px rgba(255,255,255,.04)
}
.earcup.left{left:35px;transform:rotate(7deg)}
.earcup.right{right:35px;transform:rotate(-7deg)}
.cup-detail{
  position:absolute;top:265px;width:58px;height:82px;background:#090b0d;border-radius:24px;
  border:1px solid #2e353d
}
.left-detail{left:52px}.right-detail{right:52px}
.cup-detail:after{
  content:"C";position:absolute;inset:0;display:grid;place-items:center;color:var(--accent);
  font-weight:900;font-size:22px
}
.floating-card{
  position:absolute;background:rgba(15,18,21,.85);backdrop-filter:blur(10px);
  border:1px solid #2c333a;border-radius:15px;box-shadow:0 16px 45px rgba(0,0,0,.35)
}
.card-top{right:0;top:80px;padding:13px 16px;display:flex;gap:10px;align-items:center}
.card-top .dot{width:9px;height:9px;background:var(--accent);border-radius:50%;box-shadow:0 0 15px var(--accent)}
.floating-card strong{display:block;font-size:11px}.floating-card small{color:#7e8791;font-size:9px}
.card-bottom{left:12%;bottom:44px;padding:13px 18px}.card-bottom strong{font-size:22px;color:var(--accent)}
.trust-strip{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:#0a0c0e;display:grid;grid-template-columns:repeat(4,1fr);
  padding:24px clamp(20px,7vw,120px);gap:10px
}
.trust-strip>div{display:grid;grid-template-columns:38px 1fr;align-items:center}
.trust-strip>div>span{grid-row:1/3;font-size:21px;color:var(--accent)}
.trust-strip strong{font-size:12px}.trust-strip small{color:#707882;font-size:10px;margin-top:4px}
.section{padding:95px clamp(20px,7vw,120px)}
.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:34px}
.section-heading h2{font-size:clamp(34px,4vw,54px);letter-spacing:-.055em;margin-top:10px}
.controls select{
  background:#0f1215;color:#dce0e4;border:1px solid #2d343c;border-radius:10px;
  padding:10px 14px;outline:none
}
.category-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.category-card{
  text-align:left;border:1px solid #262c33;background:#0c0f12;color:#fff;
  border-radius:18px;padding:24px;min-height:155px;position:relative;overflow:hidden
}
.category-card:after{
  content:"";position:absolute;width:100px;height:100px;border-radius:50%;
  background:var(--accent);filter:blur(60px);opacity:0;right:-30px;bottom:-40px;transition:.3s
}
.category-card:hover,.category-card.active{border-color:#54602f;background:#11150d}
.category-card:hover:after,.category-card.active:after{opacity:.18}
.category-icon{
  display:grid;place-items:center;width:40px;height:40px;border:1px solid #343c45;
  border-radius:11px;margin-bottom:26px;color:var(--accent)
}
.category-card strong{display:block;font-size:15px}.category-card small{display:block;color:#77808a;margin-top:5px;font-size:10px}
.products-section{padding-top:55px}
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.product-card{
  border:1px solid #222830;background:#0b0d10;border-radius:20px;overflow:hidden;
  transition:.25s;position:relative
}
.product-card:hover{transform:translateY(-5px);border-color:#3a434d;box-shadow:0 25px 55px rgba(0,0,0,.24)}
.product-media{height:245px;position:relative;display:grid;place-items:center;background:
  radial-gradient(circle at 50% 45%,#242a31 0,#11151a 37%,#0a0c0f 70%)}
.badge{
  position:absolute;top:14px;left:14px;padding:6px 8px;border-radius:7px;background:#171b20;
  border:1px solid #2c333b;font-size:8px;font-weight:900;letter-spacing:.08em
}
.badge.green{background:var(--accent);color:#090a0b;border-color:var(--accent)}
.favorite{
  position:absolute;right:13px;top:13px;width:34px;height:34px;border-radius:10px;
  border:1px solid #293039;background:#11151a;color:#8b949e
}
.favorite.active{color:var(--accent);border-color:#5d6c2b}
.mini-headset{width:150px;height:165px;position:relative}
.mini-headset .band{
  position:absolute;left:31px;top:11px;width:88px;height:100px;border:20px solid var(--metal,#303740);
  border-bottom:0;border-radius:60px 60px 0 0
}
.mini-headset .cup{
  position:absolute;top:88px;width:43px;height:65px;border-radius:20px;background:linear-gradient(145deg,var(--cup,#343c46),#101318);
  border:1px solid #505966
}
.mini-headset .cup.l{left:18px}.mini-headset .cup.r{right:18px}
.mini-headset .cup:after{
  content:"C";display:grid;place-items:center;height:100%;font-size:14px;font-weight:900;color:var(--accent)
}
.product-body{padding:18px}
.product-category{color:#7f8790;font-size:9px;text-transform:uppercase;letter-spacing:.1em}
.product-title{font-size:15px;margin:6px 0 7px}
.product-rating{font-size:10px;color:#f5d45c}.product-rating span{color:#737b85;margin-left:6px}
.product-price-row{display:flex;align-items:flex-end;justify-content:space-between;margin-top:15px;gap:8px}
.price strong{font-size:18px}.price del{display:block;color:#606873;font-size:10px;margin-bottom:2px}
.add-cart{
  border:1px solid #303841;background:#12161a;color:#fff;width:38px;height:38px;border-radius:11px;
  font-size:18px
}
.add-cart:hover{background:var(--accent);color:#070809;border-color:var(--accent)}
.empty-state{text-align:center;padding:55px 20px;display:none;color:#7e8791}
.empty-state h3{color:#fff;margin-bottom:8px}
.gaming-banner{
  margin:35px clamp(20px,5vw,80px) 0;border:1px solid #242b32;border-radius:28px;
  min-height:520px;display:grid;grid-template-columns:1fr 1fr;overflow:hidden;
  background:
    linear-gradient(110deg,#0d100c 0,#0b0d0f 48%,#151a20 100%);
  position:relative
}
.gaming-copy{padding:70px clamp(30px,6vw,90px);position:relative;z-index:2}
.gaming-copy h2{font-size:clamp(48px,5.3vw,82px)}
.gaming-copy p{color:#9199a3;line-height:1.7;max-width:560px}
.specs{display:flex;gap:35px;margin:30px 0}
.specs div{display:flex;flex-direction:column}
.specs strong{font-size:16px}.specs span{color:#747d86;font-size:9px;margin-top:5px}
.gaming-visual{position:relative;display:grid;place-items:center;overflow:hidden}
.wave{position:absolute;border:1px solid rgba(183,255,37,.2);border-radius:50%}
.wave-a{width:420px;height:420px}.wave-b{width:310px;height:310px}
.gaming-headset{width:320px;height:360px;position:relative;transform:rotate(8deg)}
.g-headband{
  position:absolute;left:70px;top:30px;width:190px;height:210px;border:35px solid #2d343c;
  border-bottom:0;border-radius:110px 110px 0 0
}
.g-cup{position:absolute;top:190px;width:75px;height:110px;border-radius:28px;background:linear-gradient(145deg,#353e47,#0e1114);border:1px solid #52606b}
.g-left{left:44px}.g-right{right:14px}
.g-cup:after{content:"C";height:100%;display:grid;place-items:center;color:var(--accent);font-weight:900;font-size:23px}
.g-mic{position:absolute;width:110px;height:8px;background:#252b32;border-radius:20px;left:13px;top:272px;transform:rotate(20deg);transform-origin:right}
.g-mic:after{content:"";position:absolute;width:15px;height:15px;background:var(--accent);border-radius:50%;left:-3px;top:-4px}
.feature-section{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.feature-copy h2{font-size:clamp(48px,5vw,72px)}
.feature-copy>p{color:#8c949d;line-height:1.75;max-width:590px}
.feature-list{list-style:none;margin-top:35px;display:grid;gap:0}
.feature-list li{display:grid;grid-template-columns:48px 1fr;gap:14px;border-top:1px solid #262d34;padding:20px 0}
.feature-list li>span{color:var(--accent);font-size:10px;font-weight:800}
.feature-list strong{font-size:14px}.feature-list p{font-size:11px;color:#747c85;margin-top:5px}
.feature-card{
  min-height:560px;border:1px solid #252c34;border-radius:28px;background:#0d1013;
  position:relative;display:grid;place-items:center;overflow:hidden
}
.feature-sphere{position:absolute;width:360px;height:360px;border:1px solid rgba(183,255,37,.16);border-radius:50%;box-shadow:0 0 120px rgba(183,255,37,.06)}
.feature-headphone{width:300px;height:340px;position:relative}
.fh-band{position:absolute;left:60px;top:25px;width:180px;height:190px;border:34px solid #2d343c;border-bottom:0;border-radius:100px 100px 0 0}
.fh-cup{position:absolute;top:185px;width:72px;height:105px;border-radius:28px;background:linear-gradient(150deg,#37404a,#101318);border:1px solid #4c5864}
.fh-left{left:29px}.fh-right{right:29px}
.feature-label{position:absolute;font-size:9px;font-weight:800;letter-spacing:.09em;padding:8px 10px;border-radius:8px;border:1px solid #313943;background:#14181c}
.label-a{left:8%;top:20%}.label-b{right:7%;top:44%}.label-c{left:13%;bottom:13%}
.reviews{padding-top:50px}
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.review-card{padding:28px;border:1px solid #252b32;border-radius:18px;background:#0c0f12}
.stars{color:var(--accent);font-size:12px;letter-spacing:3px}
.review-card>p{color:#a3aab2;line-height:1.7;font-size:13px;margin:18px 0 24px}
.review-user{display:flex;align-items:center;gap:12px}
.review-user>span{width:38px;height:38px;border-radius:50%;background:#1e242a;display:grid;place-items:center;font-size:10px;font-weight:800}
.review-user strong{display:block;font-size:11px}.review-user small{display:block;color:#6e7680;font-size:9px;margin-top:3px}
.newsletter{
  margin:20px clamp(20px,5vw,80px) 80px;padding:55px clamp(25px,5vw,70px);
  border:1px solid #333b43;border-radius:26px;background:
  linear-gradient(110deg,#10140c,#0d1013 48%,#12161a);
  display:grid;grid-template-columns:1.3fr 1fr;gap:30px;align-items:center;position:relative;overflow:hidden
}
.newsletter:after{content:"";position:absolute;width:250px;height:250px;background:var(--accent);filter:blur(100px);opacity:.08;right:-50px;top:-80px}
.newsletter h2{font-size:clamp(32px,4vw,52px);letter-spacing:-.055em;margin:9px 0}
.newsletter p{color:#818a93;font-size:12px}
.newsletter form{display:flex;gap:10px;position:relative;z-index:2}
.newsletter input{flex:1;min-width:0;border:1px solid #353d46;background:#0a0c0f;border-radius:12px;padding:0 16px;color:#fff;outline:0}
.newsletter input:focus{border-color:#67753a}
.newsletter>small{grid-column:2;color:var(--accent);min-height:12px}
.footer{border-top:1px solid #222830;background:#080a0c;padding:55px clamp(20px,7vw,120px) 25px}
.footer-main{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:35px}
.footer-brand p{max-width:360px;color:#6f7781;font-size:11px;line-height:1.7;margin-top:18px}
.footer h4{font-size:11px;margin-bottom:17px}.footer-main>div:not(:first-child){display:flex;flex-direction:column}
.footer-main>div:not(:first-child) a{font-size:10px;color:#707984;margin:6px 0}
.footer-main a:hover{color:#fff}
.footer-bottom{border-top:1px solid #20262d;margin-top:45px;padding-top:22px;display:flex;justify-content:space-between;color:#5f6771;font-size:9px}
.footer-bottom div{display:flex;gap:20px}
.cart-drawer{
  position:fixed;right:0;top:0;bottom:0;width:min(430px,94vw);z-index:100;
  background:#0b0e11;border-left:1px solid #282f36;transform:translateX(105%);
  transition:.35s ease;display:flex;flex-direction:column;box-shadow:-20px 0 70px rgba(0,0,0,.4)
}
.cart-drawer.open{transform:translateX(0)}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:90;opacity:0;pointer-events:none;transition:.3s}
.overlay.open{opacity:1;pointer-events:auto}
.cart-header{display:flex;justify-content:space-between;align-items:center;padding:25px;border-bottom:1px solid #242a31}
.cart-header h3{font-size:24px;margin-top:4px}
.cart-header button{width:40px}
.cart-items{flex:1;overflow:auto;padding:16px}
.cart-item{display:grid;grid-template-columns:68px 1fr auto;gap:12px;padding:13px 0;border-bottom:1px solid #20262d}
.cart-thumb{height:68px;border-radius:12px;background:#151a20;display:grid;place-items:center;color:var(--accent);font-weight:900}
.cart-item h4{font-size:12px}.cart-item small{color:#727b84;font-size:9px}
.qty{display:flex;align-items:center;gap:8px;margin-top:8px}
.qty button{width:24px;height:24px;border:1px solid #2e363e;background:#12161a;color:#fff;border-radius:6px}
.cart-price{text-align:right;font-size:11px}
.remove{display:block;margin-top:8px;border:0;background:transparent;color:#777f88;font-size:9px}
.cart-empty{margin:auto;text-align:center;color:#727b84;padding:30px}
.cart-empty span{font-size:36px}.cart-empty h4{color:#fff;margin:12px 0 7px}
.cart-empty p{font-size:11px}
.cart-footer{padding:22px;border-top:1px solid #242a31}
.cart-total{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}
.cart-total span{color:#8a939d;font-size:11px}.cart-total strong{font-size:22px}
.cart-footer>small{display:block;text-align:center;color:#626b74;font-size:9px;margin-top:10px}
.toast{
  position:fixed;left:50%;bottom:25px;z-index:120;transform:translate(-50%,30px);
  background:#13171b;border:1px solid #323a43;border-radius:12px;padding:11px 16px;
  font-size:11px;opacity:0;pointer-events:none;transition:.3s
}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:1000px){
  .nav{display:none;position:absolute;top:78px;left:0;right:0;background:#0b0e11;border-bottom:1px solid #252c33;padding:20px;flex-direction:column;align-items:flex-start}
  .nav.open{display:flex}.menu-btn{display:block}
  .hero{grid-template-columns:1fr;padding-top:70px}
  .hero-visual{height:450px;margin-top:30px}
  .trust-strip,.category-grid{grid-template-columns:repeat(2,1fr)}
  .product-grid{grid-template-columns:repeat(2,1fr)}
  .gaming-banner,.feature-section{grid-template-columns:1fr}
  .gaming-visual{min-height:430px}
  .feature-card{min-height:480px}
  .reviews-grid{grid-template-columns:1fr}
  .newsletter{grid-template-columns:1fr}.newsletter>small{grid-column:1}
  .footer-main{grid-template-columns:2fr 1fr 1fr}.footer-main>div:last-child{display:none}
}
@media(max-width:650px){
  .announcement{font-size:9px}.announcement span:nth-child(n+2){display:none}
  .header{height:68px;padding:0 16px}
  .brand{font-size:17px}.brand-mark{width:31px;height:31px}
  .icon-btn{min-width:38px;height:38px}.menu-btn{min-width:38px;height:38px}
  .search-panel{top:100px}
  .hero{padding:55px 18px 42px;min-height:auto}
  .hero h1{font-size:54px}.hero-content>p{font-size:14px}
  .hero-stats{gap:18px;justify-content:space-between}.hero-stats div{padding-left:10px}
  .hero-visual{height:330px}
  .product-orbit{width:300px;height:300px}.orbit-two{width:235px;height:235px}
  .headphone-art{transform:scale(.69)}
  .card-top{right:-5px;top:35px}.card-bottom{left:0;bottom:25px}
  .trust-strip{grid-template-columns:1fr 1fr;padding:20px 16px;gap:22px 8px}
  .section{padding:65px 16px}.section-heading{align-items:flex-start;flex-direction:column}
  .category-grid{grid-template-columns:1fr 1fr;gap:10px}
  .category-card{padding:18px;min-height:132px}
  .category-icon{margin-bottom:18px}
  .product-grid{grid-template-columns:1fr 1fr;gap:9px}
  .product-media{height:180px}.mini-headset{transform:scale(.82)}
  .product-body{padding:13px}.product-title{font-size:12px}.product-price-row{align-items:center}
  .price strong{font-size:14px}.product-rating{font-size:8px}.add-cart{width:34px;height:34px}
  .gaming-banner{margin:15px 12px 0;border-radius:20px}
  .gaming-copy{padding:45px 22px}.gaming-copy h2{font-size:49px}
  .specs{gap:19px}.gaming-visual{min-height:330px}.gaming-headset{transform:scale(.75) rotate(8deg)}
  .feature-section{gap:35px}.feature-copy h2{font-size:45px}.feature-card{min-height:390px}
  .feature-headphone{transform:scale(.78)}
  .newsletter{margin:10px 12px 50px;padding:38px 20px}.newsletter form{flex-direction:column}.newsletter input{min-height:46px}
  .footer{padding:45px 18px 22px}.footer-main{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/3}
  .footer-bottom{flex-direction:column;gap:14px}
}
