:root {
  --bg:#080b10;
  --panel:#10151c;
  --panel2:#0d1117;
  --line:#27303a;
  --orange:#ff9d00;
  --text:#f5f7fa;
  --muted:#9aa7b7;
}

* {box-sizing:border-box}
html {scroll-behavior:smooth}
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,Arial,Helvetica,sans-serif;
}
a {text-decoration:none;color:inherit}
button {font:inherit}
.wrap {max-width:1320px;margin:auto;padding-left:28px;padding-right:28px}

.header {
  min-height:84px;
  padding:16px 4%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  border-bottom:1px solid #242b34;
  background:#090c11;
}
.brand {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:18px;
  font-weight:900;
  letter-spacing:1px;
}
.brand b {color:var(--orange)}
.brand small {
  display:block;
  color:var(--muted);
  font-size:10px;
  letter-spacing:3px;
  margin-top:5px;
}
.brand-mark {font-size:37px;color:var(--orange)}
.header nav {display:flex;gap:28px}
.header nav a {font-size:13px;font-weight:700;color:#c5ced8}
.header nav a:hover {color:var(--orange)}
.currency {
  font-size:11px;
  font-weight:800;
  color:#fff;
  white-space:nowrap;
}
.currency span {display:block;color:var(--orange);margin-top:5px}

.hero {
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 75% 40%,rgba(255,157,0,.12),transparent 48%),
    linear-gradient(130deg,#0e131a,#07090d);
  border-bottom:1px solid #222a33;
}
.hero-inner {
  min-height:610px;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  align-items:center;
  gap:30px;
}
.section-label {
  color:var(--orange);
  font-size:12px;
  font-weight:900;
  letter-spacing:2.5px;
}
.hero h1 {
  font-size:clamp(55px,6.5vw,100px);
  line-height:1;
  letter-spacing:-4px;
  margin:26px 0;
}
.hero h1 span,.page-hero h1 span {color:var(--orange)}
.hero p {
  max-width:610px;
  color:#b3bfcc;
  font-size:17px;
  line-height:1.85;
}
.hero-actions {display:flex;gap:14px;flex-wrap:wrap;margin-top:35px}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:15px 22px;
  border-radius:9px;
  font-size:13px;
  font-weight:900;
}
.button.primary {background:var(--orange);color:#090909}
.button.primary:hover {background:#ffb43c}
.button.secondary {
  border:1px solid #46505c;
  color:#fff;
}
.hero-note {
  margin-top:50px;
  color:#8996a5;
  font-size:10px;
  letter-spacing:1.5px;
}
.hero-visual {
  display:flex;
  justify-content:center;
  align-items:center;
}
.orb {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  width:min(420px,90%);
  aspect-ratio:1;
  border:1px solid rgba(255,157,0,.28);
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%,rgba(255,157,0,.17),transparent 55%),
    radial-gradient(circle at 50% 50%,#17202a,#090c11 75%);
  box-shadow:0 0 100px rgba(255,157,0,.07);
  text-align:center;
}
.orb > span {
  color:var(--orange);
  font-size:120px;
  line-height:1;
}
.orb strong {font-size:27px;letter-spacing:2px}
.orb small {
  color:#8794a4;
  margin-top:17px;
  font-size:10px;
  letter-spacing:2px;
}
.benefits {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:55px;
  margin-bottom:80px;
}
.benefits > div {
  padding:27px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--panel2);
}
.benefits strong {display:block;font-size:13px;color:var(--orange)}
.benefits span {display:block;margin-top:12px;color:var(--muted);font-size:13px}

.catalog {padding-top:20px;padding-bottom:90px}
.catalog h2 {
  font-size:clamp(32px,4vw,49px);
  margin:14px 0 32px;
}
.filters {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:30px;
}
.filters button {
  border:1px solid #34404d;
  border-radius:8px;
  padding:11px 17px;
  background:#111821;
  color:#d0d8e2;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
}
.filters button.active,
.filters button:hover {
  background:var(--orange);
  color:#090909;
  border-color:var(--orange);
}
.grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
}
.product-card {
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:17px;
  background:var(--panel2);
  transition:.2s;
}
.product-card:hover {
  transform:translateY(-4px);
  border-color:var(--orange);
}
.product-card[hidden] {display:none!important}
.product-art {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:270px;
  padding:20px;
  text-align:center;
  background:
    radial-gradient(circle at center,rgba(255,157,0,.13),transparent 60%),
    linear-gradient(145deg,#131c26,#080b10);
}
.art-icon {font-size:75px;color:var(--orange)}
.art-category {
  color:var(--orange);
  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;
}
.product-art strong {font-size:24px}
.product-art small {font-size:10px;color:#7d8997;letter-spacing:1.5px}
.product-info {padding:24px}
.product-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  font-size:11px;
  color:var(--orange);
  font-weight:800;
}
.status {
  display:inline-block;
  padding:6px 9px;
  border:1px solid #43505e;
  border-radius:7px;
  color:#b7c2ce;
  font-size:10px;
  font-weight:700;
  white-space:nowrap;
}
.product-info h3 {font-size:23px;margin:19px 0 9px}
.product-info p {color:var(--muted);font-size:13px;line-height:1.7;min-height:44px}
.product-bottom {
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding-top:20px;
  margin-top:23px;
  border-top:1px solid var(--line);
}
.product-bottom span {color:var(--orange);font-size:12px;font-weight:900}
.product-bottom small {color:#8895a4}
.empty {color:var(--muted);padding:25px}
.banner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  margin-bottom:90px;
  padding-top:55px;
  padding-bottom:55px;
  border:1px solid rgba(255,157,0,.3);
  border-radius:18px;
  background:linear-gradient(120deg,#19150f,#0a0d11);
}
.banner h2 {font-size:40px;line-height:1.2;margin:18px 0}
.banner p {color:var(--muted)}
.page-hero {padding-top:75px;padding-bottom:40px}
.page-hero h1 {font-size:clamp(45px,6vw,75px);margin:18px 0}
.page-hero p {color:var(--muted)}
.breadcrumb {padding:40px 0;color:#8d9bab;font-size:13px}
.breadcrumb a {color:var(--orange)}
.detail {
  display:grid;
  grid-template-columns:1fr 1fr;
  border:1px solid var(--line);
  border-radius:20px;
  overflow:hidden;
  background:#0c1016;
}
.detail-art {
  min-height:540px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:radial-gradient(circle,rgba(255,157,0,.12),transparent 65%),#0b1016;
}
.detail-copy {padding:55px}
.detail-copy h1 {font-size:clamp(40px,4vw,60px);margin:18px 0 10px}
.detail-copy h2 {font-size:19px;color:#ffb33c;font-weight:500}
.detail-copy > p {color:#b4bfcc;line-height:1.9;margin:28px 0}
.purchase-panel {
  padding:25px;
  margin-top:30px;
  border:1px solid #35404d;
  border-radius:14px;
  background:#111820;
}
.purchase-panel > strong {color:var(--orange)}
.purchase-panel p {color:var(--muted);font-size:13px}
.purchase-panel .button {margin-top:15px}
.specs {padding:75px 0 100px;max-width:850px}
.specs h2 {font-size:37px;margin:15px 0 30px}
.spec-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  padding:20px 25px;
  border:1px solid var(--line);
  border-bottom:none;
  background:#0d1218;
}
.spec-row:last-of-type {border-bottom:1px solid var(--line)}
.spec-row span {color:var(--muted)}
.spec-row strong {font-weight:600}
.disclaimer {color:#8593a3;font-size:12px;margin-top:25px}
footer {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:25px;
  padding:55px 5%;
  border-top:1px solid var(--line);
  background:#090c11;
}
footer strong {color:var(--orange);letter-spacing:2px}
footer p {color:var(--muted);font-size:13px}
footer > div:nth-child(2) {display:flex;gap:22px;font-size:13px}
.copyright {width:100%;font-size:11px}

@media(max-width:950px) {
  .header {flex-wrap:wrap}
  .header nav {order:3;width:100%;justify-content:center;flex-wrap:wrap}
  .hero-inner {grid-template-columns:1fr;padding-top:70px;padding-bottom:70px}
  .hero-visual {display:none}
  .grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  .detail {grid-template-columns:1fr}
}
@media(max-width:650px) {
  .wrap {padding-left:18px;padding-right:18px}
  .hero h1 {letter-spacing:-2px}
  .grid,.benefits {grid-template-columns:1fr}
  .banner {flex-direction:column;align-items:flex-start}
  .detail-copy {padding:28px}
  .detail-art {min-height:300px}
  .spec-row {grid-template-columns:1fr;gap:8px}
  .header nav {gap:16px}
  .currency {display:none}
}