@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800&display=swap');

:root {
  --bg: #050819;
  --panel: #0b1028;
  --line: #252d59;
  --purple: #642cff;
  --violet: #a77aff;
  --text: #f7f7ff;
  --muted: #9da8d1;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: radial-gradient(ellipse at 50% -20%, #191847, transparent 48%), var(--bg);
  color: var(--text);
  font-family: Vazirmatn, Tahoma, Arial, sans-serif;
  line-height: 1.7;
}

a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }

.top {
  padding: 7px;
  text-align: center;
  background: #090d22;
  border-bottom: 1px solid #181d3d;
  color: var(--muted);
  font-size: 12px;
}

.top a { color: white; }

.header {
  max-width: 1400px;
  margin: auto;
  padding: 17px 4.5%;
  display: grid;
  grid-template-columns: 1fr minmax(260px, 1.3fr) 1fr auto;
  gap: 20px;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
  gap: 9px;
  direction: ltr;
  font-size: 25px;
  font-weight: 800;
}

.logo > b {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, #c3b3ff, #642cff, #1716a6);
  font-size: 31px;
  font-style: italic;
  box-shadow: 0 0 25px #6b37ff55;
}

.logo small {
  display: block;
  direction: rtl;
  font-size: 10px;
  color: var(--muted);
  font-weight: 400;
  margin-top: -5px;
}

.search {
  display: flex;
  background: #121a3a;
  border: 1px solid #343d72;
  border-radius: 11px;
  overflow: hidden;
  height: 44px;
}

.search input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  padding: 0 13px;
  color: white;
  outline: 0;
}

.search button {
  width: 46px;
  border: 0;
  color: white;
  background: linear-gradient(130deg, #762aff, #3915d5);
  font-size: 27px;
}

.support {
  font-size: 10px;
  color: var(--muted);
  display: grid;
}

.support strong {
  direction: ltr;
  color: white;
  font-size: 13px;
}

.cart {
  position: relative;
  background: #0e1431;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: white;
  padding: 9px;
}

.cart i {
  position: absolute;
  top: -8px;
  right: -7px;
  background: var(--purple);
  border-radius: 50%;
  font-size: 10px;
  padding: 0 5px;
  font-style: normal;
}

.nav {
  max-width: 1400px;
  margin: auto;
  padding: 0 4.5% 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  border-bottom: 1px solid #171d3d;
  font-size: 12px;
}

.nav button, .button {
  background: linear-gradient(110deg, #7439ff, #4b21dc);
  border: 0;
  color: white;
  border-radius: 9px;
  padding: 10px 15px;
}

.nav a { color: #d4d9f5; white-space: nowrap; }
.nav a:hover { color: #b99cff; }

main {
  max-width: 1400px;
  margin: auto;
  padding: 18px 4.5% 35px;
}

.hero-grid {
  display: grid;
  grid-template-columns: 205px minmax(0, 1fr) 235px;
  gap: 13px;
}

.categories, .hero, .promos > a, .benefits,
.product, .banner, .newsletter {
  border: 1px solid var(--line);
  background: linear-gradient(145deg, #0a1027, #060a1b);
  border-radius: 16px;
  overflow: hidden;
}

.categories { padding: 10px 13px; }

.categories h3 {
  font-size: 14px;
  border-bottom: 1px solid #1c2447;
  padding-bottom: 8px;
}

.categories a {
  display: block;
  font-size: 12px;
  padding: 11px 0;
  border-bottom: 1px solid #1a2142;
  color: #d8def9;
}

.hero {
  min-height: 320px;
  position: relative;
  display: flex;
  align-items: center;
  background:
    radial-gradient(ellipse at 75% 55%, #6c20ff99, transparent 31%),
    radial-gradient(ellipse at 55% 100%, #123bdc, transparent 40%),
    linear-gradient(110deg, #12072c, #090d31 55%, #18063d);
}

.hero-copy {
  z-index: 4;
  position: relative;
  padding: 30px 6%;
  max-width: 62%;
}

.hero-copy > small, .banner small { color: #bba3ff; font-size: 12px; }

.hero h1 {
  font-size: clamp(26px, 3vw, 41px);
  line-height: 1.45;
  margin: 10px 0;
}

.hero h1 strong { text-shadow: 0 0 25px #8b59ff66; }

.hero p { font-size: 12px; color: #c0c8eb; }

.button {
  display: inline-block;
  border-radius: 25px;
  font-size: 12px;
  padding: 10px 18px;
}

.dots { display: flex; gap: 8px; margin-top: 24px; }

.dots button {
  border: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6c61a8;
  padding: 0;
}

.dots .active { background: #b08aff; }

.glow {
  position: absolute;
  right: 14%;
  top: 45px;
  width: 240px;
  height: 240px;
  border: 2px solid #a35aff99;
  border-radius: 50%;
  box-shadow: 0 0 35px #6c2bff, inset 0 0 45px #672aff55;
}

.orbit {
  position: absolute;
  right: 10%;
  top: 120px;
  width: 280px;
  height: 100px;
  border: 2px solid #b75aff;
  border-radius: 50%;
  transform: rotate(-35deg);
}

.phone {
  position: absolute;
  z-index: 2;
  border: 3px solid #6c6a91;
  border-radius: 25px;
  box-shadow: 0 15px 45px #0008;
}

.phone-back {
  height: 220px;
  width: 113px;
  right: 45%;
  top: 45px;
  transform: rotate(-9deg);
  background: linear-gradient(145deg, #c9bddf, #44356b 60%, #14162c);
}

.phone i {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 4px solid #211b37;
  border-radius: 50%;
  background: #080a19;
  top: 13px;
  right: 10px;
}

.phone i:nth-child(2) { top: 46px; }
.phone i:nth-child(3) { top: 79px; }

.phone-front {
  height: 235px;
  width: 115px;
  right: 29%;
  top: 58px;
  transform: rotate(7deg);
  background: radial-gradient(circle at 60% 40%, #8a52ff, #161b5d 35%, #05091d 70%);
}

.phone-front span {
  position: absolute;
  top: 8px;
  left: 35%;
  width: 33px;
  height: 9px;
  border-radius: 20px;
  background: #050714;
}

.guarantee {
  position: absolute;
  z-index: 5;
  top: 18px;
  right: 18px;
  padding: 8px 11px;
  background: #070b20dd;
  border: 1px solid #7042d9;
  border-radius: 11px;
  font-size: 10px;
}

.guarantee small { display: block; color: var(--muted); }

.arrow {
  position: absolute;
  z-index: 6;
  top: 47%;
  border: 1px solid #9c7aff;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  background: #080b20aa;
  color: white;
  font-size: 22px;
}

.prev { left: 10px; }
.next { right: 10px; }

.promos { display: grid; gap: 10px; }

.promos > a {
  position: relative;
  min-height: 98px;
  padding: 11px 13px;
}

.promos span { font-size: 10px; color: #b8a2ff; }
.promos h3 { font-size: 14px; margin: 0; }
.promos small { font-size: 10px; color: var(--muted); }
.promos b { display: block; font-size: 10px; color: #d8c7ff; }

.promos em {
  position: absolute;
  left: 12px;
  bottom: 5px;
  font-size: 36px;
  color: #a99aff;
  font-style: normal;
}

.benefits {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 15px 0 26px;
  padding: 13px 5px;
}

.benefits > div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  border-left: 1px solid #20264b;
  color: #a77aff;
  font-size: 24px;
}

.benefits span { display: grid; color: white; }
.benefits b { font-size: 11px; }
.benefits small { font-size: 10px; color: var(--muted); }

.heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.heading small { color: #b49aff; }
.heading h2 { font-size: 20px; }

.round {
  border: 1px solid #363d6c;
  border-radius: 50%;
  width: 31px;
  height: 31px;
  background: #111735;
  color: #d7c6ff;
  font-size: 22px;
}

.product-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 60px) / 5);
  gap: 15px;
  overflow-x: auto;
  padding: 2px 2px 12px;
  scroll-snap-type: x mandatory;
}

.product {
  position: relative;
  padding: 12px;
  min-width: 0;
  scroll-snap-align: start;
}

.heart {
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 3;
  background: #11152b99;
  color: #ddd;
  border: 0;
  border-radius: 50%;
  font-size: 19px;
}

.heart.liked { color: #ff74b4; }

.product label {
  position: absolute;
  top: 11px;
  left: 11px;
  background: #5c20e9;
  border-radius: 6px;
  padding: 2px 7px;
  font-size: 10px;
}

.art {
  height: 125px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 3px 0 8px;
  background: radial-gradient(ellipse, #1e2357, transparent 68%);
}

.product > small { font-size: 10px; color: var(--muted); }
.product h3 { font-size: 13px; margin: 2px 0; }
.stars { font-size: 12px; color: #ffc968; }

.product p { font-size: 14px; font-weight: 800; }
.product p small { font-size: 10px; color: var(--muted); }

.add {
  width: 100%;
  border: 0;
  background: linear-gradient(100deg, #7138f5, #4b1fd8);
  color: white;
  border-radius: 8px;
  padding: 8px 3px;
  font-size: 10px;
}

.mini {
  position: absolute;
  width: 67px;
  height: 104px;
  border: 3px solid #7b819d;
  border-radius: 13px;
  box-shadow: 0 8px 18px #0007;
}

.mini.gold {
  left: calc(50% - 58px);
  background: linear-gradient(135deg, #c9b89a, #393b53);
}

.mini.blue {
  left: calc(50% - 5px);
  top: 15px;
  background: linear-gradient(135deg, #8fd7ff, #163e91);
}

.mini i {
  display: block;
  width: 17px;
  height: 17px;
  background: #101528;
  border: 2px solid #222943;
  border-radius: 50%;
  margin: 5px;
}

.mini.cyan {
  position: relative;
  background: linear-gradient(135deg, #74e5ff, #123b88);
  width: 65px;
  height: 105px;
}

.earbuds b {
  position: absolute;
  bottom: 15px;
  width: 70px;
  height: 42px;
  border-radius: 15px 15px 22px 22px;
  background: linear-gradient(135deg, #fff, #aeb8d5);
}

.earbuds i {
  position: absolute;
  z-index: 1;
  top: 23px;
  width: 15px;
  height: 42px;
  border-radius: 9px;
  background: linear-gradient(90deg, #fff, #b8c3df);
}

.earbuds i:first-child { left: calc(50% - 19px); }
.earbuds i:nth-child(2) { left: calc(50% + 7px); }

.watch {
  width: 68px;
  height: 68px;
  border: 8px solid #242c48;
  border-radius: 18px;
  background: #111a35;
  color: #8dffdb;
  font-size: 35px;
  text-align: center;
}

.watch small { display: block; font-size: 8px; }

.headphones {
  width: 75px;
  height: 73px;
  border: 8px solid #232c4d;
  border-bottom-color: transparent;
  border-radius: 50% 50% 20% 20%;
  position: relative;
}

.headphones:before, .headphones:after {
  content: "";
  position: absolute;
  top: 39px;
  width: 22px;
  height: 33px;
  border-radius: 8px;
  background: #343d5d;
}

.headphones:before { left: -13px; }
.headphones:after { right: -13px; }

.laptop {
  width: 100px;
  height: 65px;
  border: 5px solid #66708c;
  border-radius: 7px;
  background: linear-gradient(135deg, #6d49e8, #12235c);
  text-align: center;
  line-height: 55px;
  font-size: 32px;
}

.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

.filters button {
  border: 1px solid #2c345e;
  border-radius: 22px;
  padding: 7px 14px;
  background: #0d122b;
  color: #b7c0e4;
  font-size: 11px;
}

.filters button.active { background: #4c24bc; color: white; }
.hidden { display: none !important; }

.banners {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 25px 0;
}

.banner { min-height: 135px; position: relative; padding: 16px 19px; }
.banner h2 { font-size: 18px; margin: 2px 0; }
.banner p { font-size: 11px; color: #c3cbed; }
.banner b { font-size: 11px; color: #d9caff; }

.banner em {
  position: absolute;
  left: 18px;
  bottom: 8px;
  font-size: 61px;
  color: #9e76ff;
  font-style: normal;
}

.b1 { background: radial-gradient(circle at 85%, #4b1d8b, transparent 40%), #0b0d25; }
.b2 { background: radial-gradient(circle at 85%, #5120c9, transparent 40%), #150b37; }
.b3 { background: radial-gradient(circle at 85%, #153c68, transparent 40%), #081328; }

.newsletter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 19px 22px;
  position: relative;
}

.newsletter > div { display: flex; align-items: center; gap: 12px; }
.newsletter > div > b { font-size: 23px; color: #bb9aff; }
.newsletter span { display: grid; }
.newsletter strong { font-size: 14px; }
.newsletter span small { font-size: 10px; color: var(--muted); }

.newsletter form { display: flex; gap: 7px; width: 45%; }

.newsletter input {
  flex: 1;
  min-width: 0;
  background: #101735;
  border: 1px solid #30385f;
  border-radius: 8px;
  padding: 9px;
  color: white;
}

.newsletter form button {
  border: 0;
  border-radius: 8px;
  background: #5b2be1;
  color: white;
  padding: 8px 12px;
}

#newsMsg { color: #9dffcf; font-size: 10px; }

footer { border-top: 1px solid #1c2348; background: #060a1a; }

.footer-grid {
  max-width: 1400px;
  margin: auto;
  padding: 32px 4.5%;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr 1fr;
  gap: 30px;
}

.footer-grid h3 { font-size: 13px; }
.footer-grid p, .footer-grid > div > a:not(.logo) {
  display: block;
  color: #aeb8dd;
  font-size: 11px;
  margin: 8px 0;
}

.copyright {
  border-top: 1px solid #171d3b;
  text-align: center;
  padding: 13px;
  color: #818cb5;
  font-size: 10px;
}

#toast {
  position: fixed;
  z-index: 80;
  bottom: 20px;
  left: 20px;
  background: #181b3a;
  border: 1px solid #6550b7;
  color: white;
  padding: 12px 18px;
  border-radius: 11px;
  opacity: 0;
  transition: .2s;
  pointer-events: none;
}

#toast.show { opacity: 1; }

.drawer {
  position: fixed;
  z-index: 91;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(370px, 92vw);
  padding: 20px;
  background: #0b1028;
  border-right: 1px solid #30365f;
  transform: translateX(-105%);
  transition: .25s;
}

.drawer.open { transform: none; }

.drawerhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.drawerhead button { background: none; border: 0; color: white; }

.drawer > small { display: block; color: var(--muted); font-size: 10px; margin-top: 15px; }

#overlay {
  position: fixed;
  z-index: 90;
  inset: 0;
  background: #0009;
  opacity: 0;
  pointer-events: none;
}

#overlay.open { opacity: 1; pointer-events: auto; }

@media (max-width: 1100px) {
  .header { grid-template-columns: auto 1fr auto; gap: 12px; }
  .search { grid-column: 1 / -1; grid-row: 2; }
  .hero-grid { grid-template-columns: 170px 1fr; }
  .promos { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); }
  .product-track { grid-auto-columns: calc((100% - 45px) / 4); }
  .support { display: none; }
}

@media (max-width: 760px) {
  .header { padding: 12px 4%; grid-template-columns: 1fr auto; gap: 10px; }
  .logo { font-size: 22px; }
  .header .search { grid-column: 1 / -1; grid-row: 2; }
  .nav { padding: 10px 4%; flex-wrap: wrap; gap: 12px; }
  .nav button { width: 100%; text-align: right; }
  main { padding: 13px 4% 25px; }
  .hero-grid { display: flex; flex-direction: column; }
  .categories { display: none; }
  .categories.mobile-open { display: block; }
  .hero { min-height: 300px; }
  .hero-copy { padding: 22px 5%; max-width: 72%; }
  .hero h1 { font-size: 25px; }
  .hero p { font-size: 10px; }
  .glow { width: 180px; height: 180px; right: 12%; top: 65px; }
  .orbit { width: 210px; right: 8%; top: 120px; }
  .phone-back { right: 47%; top: 65px; transform: scale(.8) rotate(-9deg); transform-origin: top; }
  .phone-front { right: 23%; top: 70px; transform: scale(.8) rotate(7deg); transform-origin: top; }
  .guarantee { font-size: 9px; top: 10px; right: 10px; }
  .promos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .promos > a { padding: 8px; min-height: 110px; }
  .promos h3 { font-size: 11px; }
  .promos small { font-size: 9px; }
  .promos b { font-size: 8px; }
  .benefits { grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 12px 5px; }
  .benefits > div { justify-content: flex-start; padding: 0 7px; font-size: 20px; }
  .heading h2 { font-size: 17px; }
  .product-track { grid-auto-columns: calc((100% - 10px) / 2); gap: 10px; }
  .product { padding: 9px; }
  .art { height: 105px; }
  .product h3 { font-size: 12px; }
  .product p { font-size: 12px; }
  .add { font-size: 9px; }
  .banners { grid-template-columns: 1fr; gap: 9px; }
  .banner { min-height: 115px; }
  .newsletter { align-items: stretch; flex-direction: column; padding: 15px; }
  .newsletter form { width: 100%; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 25px 4%; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
}

@media (max-width: 390px) {
  .hero h1 { font-size: 22px; }
  .hero-copy { max-width: 75%; }
  .phone-back { right: 50%; transform: scale(.68) rotate(-9deg); }
  .phone-front { right: 23%; transform: scale(.68) rotate(7deg); }
  .guarantee { display: none; }
}