*{
  box-sizing:border-box;
}

:root{
  --bg:#080808;
  --panel:#111113;
  --panel2:#171719;
  --line:rgba(255,255,255,.09);
  --muted:#929299;
  --text:#f5f5f7;
  --accent:#7c5cff;
  --accent2:#25d0ff;
  --green:#38d996;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:
    radial-gradient(circle at 50% -250px,#1d1832 0,transparent 550px),
    var(--bg);
  color:var(--text);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}

button,
input,
textarea{
  font:inherit;
}

button,
a{
  -webkit-tap-highlight-color:transparent;
}

button{
  color:inherit;
}

a{
  color:inherit;
  text-decoration:none;
}

.shell{
  width:min(1460px,calc(100% - 48px));
  margin:auto;
}

/* TOP */

.topline{
  height:34px;
  background:#050505;
  border-bottom:1px solid rgba(255,255,255,.05);
  color:#8f8f96;
  font-size:12px;
}

.topline-inner{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.topline-inner div{
  display:flex;
  gap:24px;
}

.topline a:hover{
  color:#fff;
}

/* HEADER */

.header{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(10,10,11,.88);
  border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(25px);
  -webkit-backdrop-filter:blur(25px);
}

.header-inner{
  min-height:78px;
  display:grid;
  grid-template-columns:auto auto minmax(260px,1fr) auto auto;
  gap:14px;
  align-items:center;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
}

.brand-mark{
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:13px;
  background:linear-gradient(145deg,#fff,#bdbdc6);
  color:#080808;
  font-size:25px;
  font-weight:950;
  letter-spacing:-3px;
  box-shadow:0 8px 25px rgba(255,255,255,.08);
}

.brand-name{
  font-weight:900;
  font-size:20px;
  letter-spacing:-.7px;
  line-height:.9;
}

.brand-name small{
  display:block;
  color:#929299;
  font-size:9px;
  letter-spacing:4px;
  margin-top:6px;
}

.catalog-button{
  height:48px;
  padding:0 20px;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:14px;
  background:#171719;
  font-weight:800;
  transition:.2s;
}

.catalog-button:hover{
  background:#222225;
  transform:translateY(-1px);
}

.burger{
  font-size:19px;
}

.main-search{
  height:48px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 17px;
  background:#18181a;
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;
  transition:.2s;
}

.main-search:focus-within{
  border-color:rgba(124,92,255,.7);
  box-shadow:0 0 0 4px rgba(124,92,255,.08);
}

.main-search span{
  color:#8e8e93;
  font-size:25px;
}

.main-search input{
  width:100%;
  border:0;
  outline:0;
  background:none;
  color:#fff;
  font-size:15px;
}

.main-search input::placeholder{
  color:#77777e;
}

.telegram-button{
  height:48px;
  padding:0 17px;
  display:flex;
  align-items:center;
  gap:9px;
  background:#1d9bf0;
  color:#fff;
  border-radius:14px;
  transition:.2s;
}

.telegram-button:hover{
  transform:translateY(-1px);
  filter:brightness(1.08);
}

.telegram-button span{
  font-size:19px;
}

.cart-button{
  height:48px;
  min-width:130px;
  padding:0 13px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  background:#202023;
  display:flex;
  align-items:center;
  gap:9px;
  cursor:pointer;
  transition:.2s;
}

.cart-button:hover{
  background:#29292d;
}

.cart-icon{
  font-size:19px;
}

.cart-button-text{
  text-align:left;
  font-weight:800;
  line-height:1.05;
}

.cart-button-text small{
  display:block;
  color:#8f8f96;
  font-size:10px;
  font-weight:600;
  margin-bottom:3px;
}

.cart-button b{
  margin-left:auto;
  min-width:23px;
  height:23px;
  padding:0 6px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  color:#111;
  border-radius:20px;
  font-size:11px;
}

.mobile-cats{
  display:none;
}

/* HERO */

.hero{
  padding:24px 0 16px;
}

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

.side-catalog{
  background:#121214;
  border:1px solid var(--line);
  border-radius:22px;
  padding:11px;
  display:flex;
  flex-direction:column;
}

.side-title{
  padding:13px 12px 15px;
  border-bottom:1px solid var(--line);
  margin-bottom:6px;
}

.side-title span{
  display:block;
  font-size:15px;
  font-weight:800;
}

.side-title small{
  display:block;
  color:#717178;
  margin-top:3px;
}

.side-category{
  width:100%;
  border:0;
  background:transparent;
  padding:13px 10px;
  border-radius:12px;
  display:grid;
  grid-template-columns:30px 1fr auto;
  gap:7px;
  align-items:center;
  text-align:left;
  color:#b9b9c0;
  cursor:pointer;
  font-weight:650;
  transition:.18s;
}

.side-category:hover,
.side-category.active{
  background:#202023;
  color:#fff;
}

.category-symbol{
  width:28px;
  height:28px;
  border-radius:9px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#29292d;
  color:#fff;
  font-size:13px;
}

.side-category b{
  color:#65656c;
  font-size:21px;
}

.side-support{
  margin-top:auto;
  padding:16px;
  background:linear-gradient(145deg,#1e1932,#15151a);
  border:1px solid rgba(124,92,255,.18);
  border-radius:16px;
}

.side-support small{
  color:#8f8f96;
  display:block;
}

.side-support strong{
  display:block;
  margin:5px 0 12px;
  font-size:14px;
}

.side-support a{
  font-size:12px;
  color:#bbaeff;
  font-weight:700;
}

.hero-banner{
  min-height:535px;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  border-radius:26px;
  background:
    radial-gradient(circle at 72% 42%,rgba(124,92,255,.32),transparent 29%),
    radial-gradient(circle at 91% 12%,rgba(37,208,255,.14),transparent 25%),
    linear-gradient(135deg,#121217,#08080b 58%,#171024);
}

.hero-banner:before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:45px 45px;
  mask-image:linear-gradient(to right,black,transparent);
}

.hero-glow{
  position:absolute;
  border-radius:50%;
  filter:blur(1px);
}

.hero-glow-one{
  width:420px;
  height:420px;
  right:-120px;
  bottom:-210px;
  background:rgba(124,92,255,.22);
  box-shadow:0 0 130px rgba(124,92,255,.25);
}

.hero-glow-two{
  width:200px;
  height:200px;
  right:33%;
  top:-140px;
  background:rgba(37,208,255,.1);
}

.hero-content{
  position:relative;
  z-index:3;
  width:58%;
  padding:65px 0 60px 60px;
}

.hero-tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:30px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.09);
  color:#c6c6cc;
  font-size:12px;
  font-weight:700;
}

.hero-tag span{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#8a6cff;
  box-shadow:0 0 13px #8a6cff;
}

.hero h1{
  margin:22px 0 18px;
  font-size:clamp(48px,5vw,82px);
  line-height:.93;
  letter-spacing:-5px;
  font-weight:900;
}

.hero h1 span{
  background:linear-gradient(90deg,#fff,#8e7cff,#41d9ff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.hero-content > p{
  width:min(550px,100%);
  margin:0;
  color:#9d9da5;
  font-size:17px;
  line-height:1.6;
}

.hero-actions{
  margin-top:29px;
  display:flex;
  gap:11px;
}

.hero-actions a{
  min-height:48px;
  padding:0 20px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:14px;
  transition:.2s;
}

.hero-primary{
  background:#fff;
  color:#111;
}

.hero-secondary{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.11);
}

.hero-actions a:hover{
  transform:translateY(-2px);
}

.hero-features{
  margin-top:30px;
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  color:#777780;
  font-size:11px;
}

.hero-device{
  position:absolute;
  z-index:2;
  width:440px;
  height:500px;
  right:25px;
  bottom:-42px;
}

.phone{
  position:absolute;
  width:205px;
  height:420px;
  border-radius:44px;
  border:4px solid #b5b5bd;
  box-shadow:
    0 45px 80px rgba(0,0,0,.7),
    inset 0 0 0 1px rgba(255,255,255,.3);
}

.phone-back{
  left:22px;
  top:66px;
  transform:rotate(-12deg);
  background:linear-gradient(145deg,#3d3b48,#181820);
}

.phone-front{
  right:38px;
  top:15px;
  transform:rotate(8deg);
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 65%,#4b2aff 0,#201550 23%,#080810 55%);
}

.phone-front:after{
  content:"";
  position:absolute;
  inset:2px;
  border-radius:38px;
  border:1px solid rgba(255,255,255,.12);
}

.island{
  position:absolute;
  width:70px;
  height:20px;
  background:#000;
  border-radius:30px;
  top:14px;
  left:50%;
  transform:translateX(-50%);
}

.screen-orb{
  width:240px;
  height:240px;
  position:absolute;
  left:-20px;
  top:130px;
  border-radius:50%;
  border:22px solid rgba(91,69,255,.4);
  box-shadow:
    0 0 70px rgba(124,92,255,.5),
    inset 0 0 60px rgba(37,208,255,.25);
}

.phone-front > span{
  position:absolute;
  bottom:70px;
  left:0;
  right:0;
  text-align:center;
  font-size:12px;
  letter-spacing:8px;
  color:rgba(255,255,255,.45);
}

.camera{
  position:absolute;
  left:15px;
  top:15px;
  width:105px;
  height:105px;
  border-radius:30px;
  background:#30303a;
  display:grid;
  grid-template-columns:1fr 1fr;
  padding:10px;
  gap:7px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
}

.camera i{
  width:36px;
  height:36px;
  border-radius:50%;
  background:
    radial-gradient(circle,#12121c 20%,#272342 30%,#08080d 65%);
  border:2px solid #656571;
}

.camera i:nth-child(3){
  grid-column:1;
}

.apple{
  position:absolute;
  top:49%;
  left:50%;
  transform:translate(-50%,-50%);
  color:#92929a;
  opacity:.5;
}

.hero-dots{
  position:absolute;
  z-index:5;
  left:60px;
  bottom:26px;
  display:flex;
  gap:7px;
}

.hero-dots i{
  width:25px;
  height:4px;
  background:rgba(255,255,255,.18);
  border-radius:10px;
}

.hero-dots i.active{
  width:45px;
  background:#fff;
}

/* ADVANTAGES */

.advantages{
  padding:8px 0 30px;
}

.advantage-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line);
  background:#111113;
  border-radius:20px;
  overflow:hidden;
}

.advantage{
  min-height:90px;
  padding:18px 20px;
  display:flex;
  align-items:center;
  gap:13px;
  border-right:1px solid var(--line);
}

.advantage:last-child{
  border:0;
}

.advantage-icon{
  flex:0 0 auto;
  width:38px;
  height:38px;
  border-radius:12px;
  background:#202023;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#c2b8ff;
  font-weight:900;
}

.advantage strong{
  display:block;
  font-size:13px;
}

.advantage small{
  display:block;
  margin-top:4px;
  color:#77777e;
  font-size:11px;
  line-height:1.35;
}

/* SECTIONS */

.categories-section,
.catalog-section,
.manager-section,
.info-section,
.faq-section{
  padding:52px 0;
}

.section-heading{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-bottom:24px;
}

.eyebrow{
  color:#8070e8;
  font-size:11px;
  font-weight:900;
  letter-spacing:2px;
}

.section-heading h2,
.manager-card h2{
  margin:6px 0 0;
  font-size:clamp(30px,3vw,44px);
  letter-spacing:-1.8px;
}

.section-heading > a{
  color:#96969d;
  font-size:13px;
}

.category-cards{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px;
}

.category-card{
  min-width:0;
  height:235px;
  padding:19px;
  border:1px solid var(--line);
  border-radius:20px;
  background:#151517;
  cursor:pointer;
  text-align:left;
  overflow:hidden;
  position:relative;
  transition:
    transform .25s ease,
    border-color .25s ease,
    background .25s ease;
}

.category-card:hover{
  transform:translateY(-5px);
  border-color:rgba(255,255,255,.2);
  background:#1a1a1d;
}

.category-card strong{
  position:absolute;
  left:19px;
  bottom:38px;
  font-size:18px;
}

.category-card small{
  position:absolute;
  left:19px;
  bottom:19px;
  color:#77777e;
}

.cat-art{
  height:135px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}

.phone-art:before{
  content:"";
  width:65px;
  height:122px;
  border-radius:18px;
  border:3px solid #777780;
  background:
    radial-gradient(circle at 50% 60%,#735bff,#181222 50%,#08080a 70%);
  transform:rotate(8deg);
  box-shadow:0 20px 35px rgba(0,0,0,.45);
}

.phone-art i{
  position:absolute;
  width:55px;
  height:110px;
  border-radius:17px;
  background:#d7d7dc;
  transform:translateX(-28px) rotate(-9deg);
  z-index:-1;
}

.pods-art:before,
.pods-art:after{
  content:"";
  width:28px;
  height:75px;
  background:#f5f5f7;
  border-radius:20px 20px 16px 16px;
  box-shadow:0 15px 30px rgba(0,0,0,.35);
}

.pods-art:before{
  transform:rotate(12deg) translateX(5px);
}

.pods-art:after{
  transform:rotate(-12deg) translateX(-5px);
}

.watch-art:before{
  content:"";
  width:72px;
  height:86px;
  border-radius:22px;
  background:
    radial-gradient(circle at 50% 45%,#826eff,#111 65%);
  border:5px solid #b6b6bd;
  box-shadow:
    0 -45px 0 -27px #55545d,
    0 45px 0 -27px #55545d;
}

.mac-art:before{
  content:"";
  width:130px;
  height:82px;
  border:4px solid #aaaab0;
  border-radius:8px;
  background:
    radial-gradient(circle at 50% 50%,#765dff,#101015 60%);
}

.mac-art:after{
  content:"";
  position:absolute;
  width:160px;
  height:7px;
  background:#bcbcc2;
  bottom:21px;
  border-radius:2px 2px 10px 10px;
}

.mac-art i{
  position:absolute;
  z-index:2;
  font-style:normal;
  font-size:8px;
  letter-spacing:3px;
  color:#fff;
}

.accessory-art{
  font-size:65px;
  color:#9d8cff;
  text-shadow:0 0 40px rgba(124,92,255,.7);
}

/* FILTERS */

.catalog-section{
  background:
    linear-gradient(180deg,transparent,#0d0d0f 15%,#0d0d0f 85%,transparent);
}

.catalog-heading{
  margin-bottom:18px;
}

.product-counter{
  color:#77777e;
  font-size:13px;
}

.filters{
  display:flex;
  gap:8px;
  overflow:auto;
  padding:3px 0 20px;
  scrollbar-width:none;
}

.filters::-webkit-scrollbar{
  display:none;
}

.filters button{
  flex:0 0 auto;
  border:1px solid var(--line);
  background:#171719;
  color:#aaaab0;
  border-radius:12px;
  padding:11px 16px;
  cursor:pointer;
  font-weight:700;
  transition:.18s;
}

.filters button:hover,
.filters button.active{
  color:#111;
  background:#fff;
  border-color:#fff;
}

/* PRODUCTS */

.products{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:13px;
}

.product-card{
  min-width:0;
  background:#151517;
  border:1px solid var(--line);
  border-radius:21px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

.product-card:hover{
  transform:translateY(-5px);
  border-color:rgba(255,255,255,.18);
  box-shadow:0 25px 60px rgba(0,0,0,.3);
}

.product-media{
  height:290px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 50% 45%,#29292d 0,#1a1a1d 45%,#131315 70%);
  overflow:hidden;
}

.product-media:after{
  content:"";
  position:absolute;
  left:10%;
  right:10%;
  bottom:8px;
  height:30px;
  background:#000;
  filter:blur(25px);
  opacity:.45;
}

.product-media img{
  position:relative;
  z-index:2;
  width:82%;
  height:82%;
  object-fit:contain;
  transition:transform .35s ease;
}

.product-card:hover .product-media img{
  transform:scale(1.04);
}

.product-placeholder{
  position:relative;
  z-index:2;
  width:145px;
  height:190px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:30px;
  border:2px solid #5b5b64;
  background:
    radial-gradient(circle at 50% 55%,#6049d9,#1b1726 50%,#111 70%);
  color:rgba(255,255,255,.55);
  font-size:12px;
  letter-spacing:6px;
  box-shadow:0 30px 50px rgba(0,0,0,.4);
}

.stock-badge,
.discount-badge{
  position:absolute;
  z-index:5;
  top:13px;
  border-radius:30px;
  padding:7px 9px;
  font-size:9px;
  font-weight:850;
  backdrop-filter:blur(15px);
}

.stock-badge{
  right:13px;
}

.stock-badge.yes{
  background:rgba(56,217,150,.1);
  color:#55e8aa;
  border:1px solid rgba(56,217,150,.18);
}

.stock-badge.no{
  background:rgba(255,80,80,.09);
  color:#ff8d8d;
  border:1px solid rgba(255,80,80,.15);
}

.discount-badge{
  left:13px;
  background:#ff493f;
  color:#fff;
}

.product-content{
  padding:18px;
  display:flex;
  flex-direction:column;
  flex:1;
}

.product-category{
  color:#797980;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:1.2px;
  font-weight:800;
}

.product-content h3{
  margin:7px 0 8px;
  font-size:18px;
  line-height:1.25;
  letter-spacing:-.4px;
}

.product-content p{
  margin:0;
  min-height:38px;
  color:#85858c;
  font-size:12px;
  line-height:1.5;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.product-footer{
  margin-top:auto;
  padding-top:19px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
}

.product-price span{
  display:block;
  color:#6f6f76;
  text-decoration:line-through;
  font-size:11px;
  margin-bottom:3px;
}

.product-price strong{
  display:block;
  font-size:20px;
  letter-spacing:-.7px;
}

.buy-button{
  flex:0 0 auto;
  min-height:42px;
  padding:0 9px 0 14px;
  border:0;
  border-radius:13px;
  background:#fff;
  color:#111;
  display:flex;
  align-items:center;
  gap:9px;
  cursor:pointer;
  font-weight:850;
  transition:.18s;
}

.buy-button b{
  width:25px;
  height:25px;
  border-radius:8px;
  background:#111;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
}

.buy-button:hover{
  transform:translateY(-2px);
}

.buy-button:disabled{
  cursor:not-allowed;
  background:#252529;
  color:#77777e;
  transform:none;
}

.loading-products,
.empty-products{
  grid-column:1/-1;
  min-height:260px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:13px;
  color:#77777e;
  border:1px dashed rgba(255,255,255,.1);
  border-radius:22px;
}

.empty-products b{
  color:#fff;
  font-size:20px;
}

.loader{
  width:28px;
  height:28px;
  border-radius:50%;
  border:3px solid rgba(255,255,255,.1);
  border-top-color:#fff;
  animation:spin .7s linear infinite;
}

@keyframes spin{
  to{transform:rotate(360deg)}
}

/* MANAGER */

.manager-card{
  min-height:260px;
  padding:45px;
  border:1px solid rgba(124,92,255,.2);
  border-radius:26px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  overflow:hidden;
  position:relative;
  background:
    radial-gradient(circle at 80% 50%,rgba(124,92,255,.27),transparent 32%),
    linear-gradient(135deg,#17141f,#101012);
}

.manager-card:after{
  content:"NOVA";
  position:absolute;
  right:5%;
  top:50%;
  transform:translateY(-50%);
  font-size:150px;
  font-weight:950;
  color:rgba(255,255,255,.025);
  letter-spacing:-12px;
  pointer-events:none;
}

.manager-card > div,
.manager-card > a{
  position:relative;
  z-index:2;
}

.manager-card p{
  max-width:600px;
  color:#909098;
  line-height:1.55;
}

.manager-card > a{
  flex:0 0 auto;
  min-height:55px;
  padding:0 20px;
  border-radius:15px;
  background:#fff;
  color:#111;
  display:flex;
  align-items:center;
  gap:25px;
  font-weight:850;
  transition:.2s;
}

.manager-card > a:hover{
  transform:translateY(-2px);
}

.manager-card > a span{
  font-size:20px;
}

/* INFO */

.info-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}

.info-grid article{
  padding:30px;
  border:1px solid var(--line);
  background:#121214;
  border-radius:20px;
}

.info-grid article > span{
  color:#6f5bd3;
  font-weight:900;
  font-size:12px;
}

.info-grid h3{
  font-size:20px;
  margin:13px 0 8px;
}

.info-grid p{
  margin:0;
  color:#85858c;
  line-height:1.6;
  font-size:13px;
}

/* FAQ */

.faq-grid{
  display:grid;
  gap:8px;
}

.faq-grid details{
  border:1px solid var(--line);
  background:#121214;
  border-radius:16px;
  padding:0 20px;
}

.faq-grid summary{
  padding:20px 0;
  cursor:pointer;
  font-weight:750;
}

.faq-grid p{
  color:#8d8d94;
  line-height:1.6;
  margin:0 0 20px;
}

/* FOOTER */

footer{
  margin-top:50px;
  padding:45px 0 25px;
  border-top:1px solid var(--line);
  background:#070708;
}

.footer-main{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:50px;
}

.footer-brand p{
  color:#717178;
  font-size:12px;
  margin-top:17px;
}

.footer-main > div:not(.footer-brand){
  display:flex;
  flex-direction:column;
  gap:10px;
  font-size:13px;
}

.footer-main strong{
  margin-bottom:7px;
}

.footer-main > div:not(.footer-brand) a{
  color:#7e7e85;
}

.footer-main > div:not(.footer-brand) a:hover{
  color:#fff;
}

.footer-bottom{
  margin-top:40px;
  padding-top:20px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  color:#55555c;
  font-size:10px;
}

/* CART */

#cart{
  position:fixed;
  inset:0 0 0 auto;
  width:min(500px,100%);
  height:100dvh;
  max-height:none;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:rgba(15,15,17,.97);
  color:#f5f5f7;
  box-shadow:-30px 0 90px rgba(0,0,0,.6);
  backdrop-filter:blur(30px);
  transform:translateX(100%);
  opacity:0;
  transition:
    transform .3s cubic-bezier(.2,.8,.2,1),
    opacity .2s ease;
}

#cart[open]{
  display:flex;
  flex-direction:column;
  transform:translateX(0);
  opacity:1;
}

#cart::backdrop{
  background:rgba(0,0,0,.7);
  backdrop-filter:blur(7px);
}

#cart > h2{
  margin:0;
  padding:27px 75px 22px 25px;
  border-bottom:1px solid var(--line);
  font-size:27px;
  letter-spacing:-.8px;
}

#cart > h2 small{
  display:block;
  margin-top:4px;
  color:#77777e;
  font-size:11px;
  font-weight:500;
  letter-spacing:0;
}

#cart #close{
  position:absolute;
  top:21px;
  right:21px;
  width:42px;
  height:42px;
  padding:0;
  border:1px solid var(--line);
  border-radius:50%;
  background:#202023;
  cursor:pointer;
}

#cart #close:after{
  content:"×";
  color:#fff;
  font-size:26px;
}

#cartItems{
  flex:1;
  overflow:auto;
  padding:18px 20px 8px;
}

.cart-row{
  display:grid;
  grid-template-columns:78px minmax(0,1fr) auto;
  gap:13px;
  padding:13px;
  margin-bottom:10px;
  border:1px solid var(--line);
  background:#171719;
  border-radius:18px;
}

.cart-image{
  width:78px;
  height:78px;
  border-radius:14px;
  background:#242428;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.cart-image img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.cart-image span{
  font-size:9px;
  letter-spacing:2px;
  color:#777;
}

.cart-product{
  min-width:0;
}

.cart-product > b{
  display:block;
  font-size:13px;
  line-height:1.3;
}

.cart-product > span{
  display:block;
  color:#888890;
  font-size:11px;
  margin-top:4px;
}

.cart-controls{
  display:flex;
  align-items:center;
  gap:7px;
  margin-top:11px;
}

.cart-controls button{
  min-width:28px;
  height:28px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#242428;
  cursor:pointer;
}

.cart-controls button:disabled{
  opacity:.3;
}

.cart-controls strong{
  min-width:17px;
  text-align:center;
  font-size:12px;
}

.cart-controls .cart-remove{
  width:auto;
  margin-left:5px;
  padding:0 8px;
  color:#ff8c8c;
  font-size:9px;
}

.cart-line-price{
  white-space:nowrap;
  font-size:12px;
}

.cart-empty{
  min-height:300px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:#77777e;
  gap:6px;
}

.cart-empty div{
  font-size:35px;
  margin-bottom:8px;
}

.cart-empty b{
  color:#fff;
}

#cart .total{
  margin:0 20px;
  padding:18px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

#cart .total b{
  font-size:23px;
}

#cart #order{
  padding:18px 20px 8px;
}

#cart #order h3{
  margin:0 0 13px;
  font-size:15px;
}

#cart #order input,
#cart #order textarea{
  display:block;
  width:100%;
  margin-bottom:8px;
  padding:13px 14px;
  border:1px solid var(--line);
  border-radius:12px;
  outline:none;
  background:#1d1d20;
  color:#fff;
}

#cart #order textarea{
  min-height:70px;
  resize:vertical;
}

#cart #order input:focus,
#cart #order textarea:focus{
  border-color:rgba(124,92,255,.7);
}

#cart #order .primary{
  width:100%;
  min-height:49px;
  margin-top:4px;
  border:0;
  border-radius:13px;
  background:#fff;
  color:#111;
  font-weight:850;
  cursor:pointer;
}

#cart #order .primary:disabled{
  opacity:.5;
}

#cart .note{
  margin:4px 20px 18px;
  color:#68686f;
  font-size:10px;
  line-height:1.4;
}

/* TOAST */

.toast{
  position:fixed;
  z-index:5000;
  left:50%;
  bottom:25px;
  transform:translate(-50%,30px);
  padding:12px 17px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:13px;
  background:rgba(30,30,33,.94);
  box-shadow:0 15px 45px rgba(0,0,0,.4);
  backdrop-filter:blur(20px);
  opacity:0;
  pointer-events:none;
  transition:.25s;
  font-size:12px;
  font-weight:700;
}

.toast.show{
  opacity:1;
  transform:translate(-50%,0);
}

/* TABLET */

@media(max-width:1150px){

  .header-inner{
    grid-template-columns:auto auto 1fr auto;
  }

  .telegram-button{
    display:none;
  }

  .hero-grid{
    grid-template-columns:215px minmax(0,1fr);
  }

  .hero-device{
    opacity:.75;
    right:-75px;
  }

  .hero-content{
    width:68%;
    padding-left:42px;
  }

  .products{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .category-cards{
    grid-template-columns:repeat(5,220px);
    overflow:auto;
    padding-bottom:8px;
  }

  .advantage-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .advantage:nth-child(2){
    border-right:0;
  }

  .advantage:nth-child(-n+2){
    border-bottom:1px solid var(--line);
  }
}

/* MOBILE */

@media(max-width:800px){

  .shell{
    width:min(100% - 28px,1460px);
  }

  .topline{
    display:none;
  }

  .header-inner{
    min-height:67px;
    grid-template-columns:auto 1fr auto;
    gap:9px;
  }

  .brand-name{
    display:none;
  }

  .brand-mark{
    width:39px;
    height:39px;
  }

  .catalog-button{
    display:none;
  }

  .main-search{
    height:43px;
  }

  .cart-button{
    min-width:43px;
    width:43px;
    height:43px;
    padding:0;
    justify-content:center;
    position:relative;
  }

  .cart-button-text{
    display:none;
  }

  .cart-button b{
    position:absolute;
    right:-5px;
    top:-5px;
    margin:0;
    min-width:19px;
    height:19px;
    font-size:9px;
  }

  .mobile-cats{
    display:block;
    position:sticky;
    top:67px;
    z-index:900;
    background:rgba(9,9,10,.92);
    backdrop-filter:blur(20px);
    border-bottom:1px solid var(--line);
  }

  .mobile-cats .shell{
    display:flex;
    overflow:auto;
    gap:18px;
    padding:12px 0;
    scrollbar-width:none;
    font-size:11px;
    color:#aaaab0;
    font-weight:700;
  }

  .mobile-cats .shell::-webkit-scrollbar{
    display:none;
  }

  .mobile-cats a{
    flex:0 0 auto;
  }

  .hero{
    padding-top:14px;
  }

  .hero-grid{
    display:block;
  }

  .side-catalog{
    display:none;
  }

  .hero-banner{
    min-height:560px;
    border-radius:22px;
  }

  .hero-content{
    width:100%;
    padding:35px 25px;
  }

  .hero h1{
    font-size:50px;
    letter-spacing:-3.5px;
  }

  .hero-content > p{
    font-size:14px;
    max-width:90%;
  }

  .hero-actions{
    flex-direction:column;
    align-items:stretch;
    width:75%;
  }

  .hero-device{
    width:330px;
    height:330px;
    right:-45px;
    bottom:-95px;
    transform:scale(.72);
    transform-origin:right bottom;
    opacity:.85;
  }

  .hero-features{
    display:none;
  }

  .hero-dots{
    left:25px;
    bottom:20px;
  }

  .advantages{
    padding-top:0;
  }

  .advantage-grid{
    grid-template-columns:1fr;
  }

  .advantage{
    min-height:75px;
    border-right:0;
    border-bottom:1px solid var(--line);
  }

  .advantage:nth-child(3){
    border-bottom:1px solid var(--line);
  }

  .category-cards{
    grid-template-columns:repeat(5,185px);
  }

  .category-card{
    height:210px;
  }

  .products{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }

  .product-media{
    height:190px;
  }

  .product-content{
    padding:13px;
  }

  .product-content h3{
    font-size:14px;
  }

  .product-content p{
    display:none;
  }

  .product-price strong{
    font-size:15px;
  }

  .buy-button{
    min-height:37px;
    padding:0 7px 0 10px;
    font-size:10px;
  }

  .buy-button b{
    width:22px;
    height:22px;
  }

  .stock-badge{
    right:7px;
    top:7px;
    padding:5px 6px;
    font-size:7px;
  }

  .discount-badge{
    left:7px;
    top:7px;
    font-size:8px;
  }

  .manager-card{
    padding:28px 24px;
    display:block;
  }

  .manager-card > a{
    margin-top:22px;
    width:100%;
    justify-content:space-between;
  }

  .info-grid{
    grid-template-columns:1fr;
  }

  .footer-main{
    grid-template-columns:1fr 1fr;
  }

  .footer-brand{
    grid-column:1/-1;
  }

  .footer-bottom{
    display:block;
    line-height:1.8;
  }

  #cart{
    inset:auto 0 0 0;
    width:100%;
    height:min(92dvh,850px);
    border-radius:27px 27px 0 0;
    transform:translateY(100%);
  }

  #cart[open]{
    transform:translateY(0);
  }

  .cart-row{
    grid-template-columns:65px minmax(0,1fr);
  }

  .cart-image{
    width:65px;
    height:65px;
  }

  .cart-line-price{
    display:none;
  }
}

@media(max-width:420px){

  .shell{
    width:calc(100% - 20px);
  }

  .hero-banner{
    min-height:530px;
  }

  .hero h1{
    font-size:44px;
  }

  .hero-actions{
    width:88%;
  }

  .categories-section,
  .catalog-section,
  .manager-section,
  .info-section,
  .faq-section{
    padding:38px 0;
  }

  .section-heading h2{
    font-size:30px;
  }

  .products{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .product-media{
    height:165px;
  }

  .product-placeholder{
    width:90px;
    height:125px;
    border-radius:20px;
  }

  .product-footer{
    display:block;
  }

  .buy-button{
    width:100%;
    justify-content:space-between;
    margin-top:12px;
  }
}

/* ===== NOVA ACCOUNT BUTTON ===== */

.account-button{
 height:48px;
 padding:0 15px;
 display:flex;
 align-items:center;
 justify-content:center;
 gap:8px;
 border:1px solid rgba(255,255,255,.1);
 border-radius:14px;
 background:#18181b;
 color:#d5d5da;
 font-size:12px;
 font-weight:800;
 transition:
  transform .2s ease,
  background .2s ease,
  border-color .2s ease;
}

.account-button span{
 width:25px;
 height:25px;
 border-radius:9px;
 display:flex;
 align-items:center;
 justify-content:center;
 background:linear-gradient(145deg,#7962ed,#3a2e79);
 color:#fff;
 font-size:14px;
}

.account-button:hover{
 transform:translateY(-1px);
 background:#222226;
 border-color:rgba(255,255,255,.17);
}

@media(max-width:1150px){
 .account-button b{
  display:none;
 }

 .account-button{
  width:48px;
  padding:0;
 }
}

@media(max-width:800px){
 .account-button{
  position:fixed;
  right:16px;
  bottom:18px;
  z-index:850;
  width:49px;
  height:49px;
  padding:0;
  border-radius:16px;
  background:rgba(28,28,31,.94);
  box-shadow:0 12px 40px rgba(0,0,0,.45);
  backdrop-filter:blur(20px);
 }

 .account-button span{
  background:transparent;
  font-size:21px;
 }

 .account-button b{
  display:none;
 }
}