:root{
  --bg:#05070b;
  --panel:#0d121b;
  --panel2:#111a28;
  --text:#f6f8fc;
  --muted:#a9b4c3;
  --blue:#1e6fff;
  --blue2:#3f8cff;
  --gold:#d9b35b;
  --line:#1d2a3a;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(circle at 80% 0%,rgba(30,111,255,.08),transparent 30%),
    var(--bg);
  color:var(--text);
  font-family:Arial,Helvetica,sans-serif;
}
button,input{font:inherit}
button{cursor:pointer}
.container{width:min(var(--max),calc(100% - 32px));margin:auto}

.topbar{
  position:sticky;top:0;z-index:30;
  background:rgba(5,7,11,.93);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(14px)
}
.nav{
  min-height:76px;display:flex;align-items:center;gap:24px
}
.brand{
  display:flex;align-items:center;gap:11px;color:#fff;text-decoration:none;font-weight:800;letter-spacing:.8px;white-space:nowrap
}
.brand-mark{
  display:inline-grid;place-items:center;width:42px;height:42px;border:2px solid var(--blue2);border-radius:50%;
  color:#fff;font-size:14px;letter-spacing:0
}
.search{display:flex;flex:1;max-width:650px;margin-left:auto}
.search input{
  width:100%;border:1px solid var(--line);border-right:0;background:#f7f9fd;color:#111;padding:13px 15px;border-radius:9px 0 0 9px;outline:none
}
.search button{
  border:0;background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff;padding:0 22px;font-weight:800;border-radius:0 9px 9px 0
}

.hero{
  position:relative;overflow:hidden;min-height:490px;display:flex;align-items:center;border-bottom:1px solid var(--line);
  background:linear-gradient(135deg,#0a101a 0%,#05070b 60%,#08101e 100%)
}
.hero-glow{position:absolute;border-radius:50%;filter:blur(20px);opacity:.5}
.hero-glow-a{width:360px;height:360px;background:#0f4bc9;right:8%;top:4%;opacity:.18}
.hero-glow-b{width:260px;height:260px;background:#c89d3c;right:26%;bottom:-20%;opacity:.08}
.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.25fr .75fr;align-items:center;gap:50px;padding:78px 0}
.hero-copy{max-width:760px}
.kicker{font-size:12px;font-weight:900;letter-spacing:2.2px;color:#69a2ff}
.hero h1{font-size:clamp(42px,6vw,76px);line-height:.98;margin:12px 0 20px;letter-spacing:-2px}
.hero p{max-width:680px;color:var(--muted);font-size:18px;line-height:1.65}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.primary,.secondary{
  display:inline-block;text-decoration:none;font-weight:900;padding:14px 20px;border-radius:8px
}
.primary{background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff}
.secondary{border:1px solid #31537c;color:#dbe8ff;background:rgba(22,43,70,.4)}

.hero-emblem{display:grid;place-items:center}
.emblem-ring{
  width:250px;height:250px;border-radius:50%;display:grid;place-items:center;
  border:2px solid #2f6cc1;
  box-shadow:0 0 80px rgba(30,111,255,.18),inset 0 0 45px rgba(30,111,255,.08)
}
.emblem-ring span{
  font-size:74px;font-weight:900;letter-spacing:-5px;color:#f5f9ff;text-shadow:0 0 25px rgba(63,140,255,.4)
}

.section{padding:54px 0}
.section-title{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:22px}
.section-title h2{font-size:31px;margin:6px 0 0}
.section-note,.count{color:var(--muted);font-size:14px}

.chips{display:flex;gap:10px;flex-wrap:wrap}
.chip{
  border:1px solid var(--line);background:var(--panel);color:#f3f7fd;padding:11px 16px;border-radius:999px
}
.chip:hover,.chip.active{
  background:linear-gradient(135deg,#16376d,#1e6fff);border-color:#4d8eff
}

.category-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.category{
  min-height:122px;text-align:left;border:1px solid var(--line);background:linear-gradient(180deg,#0e151f,#0a1018);color:#fff;border-radius:14px;padding:20px;transition:.2s ease
}
.category:hover,.category.active{transform:translateY(-2px);border-color:#365f92;background:linear-gradient(180deg,#111c2b,#0c1521)}
.category-icon{display:block;color:#67a0ff;font-size:19px;margin-bottom:12px}
.category b,.category small{display:block}
.category b{font-size:18px;margin-bottom:7px}
.category small{color:var(--muted);line-height:1.4}

.featured-strip{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:linear-gradient(90deg,#080b10,#0d1623 52%,#0b0f16)
}
.featured-inner{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:42px 0}
.featured-inner h2{font-size:31px;margin:7px 0 8px}
.featured-inner p{margin:0;color:var(--muted)}
.featured-btn{
  border:1px solid #355f95;background:#132641;color:#fff;border-radius:9px;padding:13px 19px;font-weight:900
}

.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.product-card{
  overflow:hidden;border:1px solid var(--line);background:linear-gradient(180deg,#0e151f,#0a0f17);border-radius:14px;
  transition:transform .18s ease,border-color .18s ease
}
.product-card:hover{transform:translateY(-3px);border-color:#325884}
.product-image{aspect-ratio:1/1;background:#f6f7f9;display:flex;align-items:center;justify-content:center;overflow:hidden}
.product-image img{width:100%;height:100%;object-fit:contain}
.placeholder{color:#657386;font-weight:900;text-align:center;padding:20px;line-height:1.5}
.product-info{padding:15px}
.tag{font-size:11px;color:#72a9ff;font-weight:900;text-transform:uppercase}
.product-info h3{font-size:16px;line-height:1.35;margin:8px 0 10px;min-height:43px}
.store{color:var(--muted);font-size:13px;margin-bottom:14px}
.offer{
  display:block;text-align:center;text-decoration:none;background:linear-gradient(135deg,var(--blue),var(--blue2));
  color:#fff;padding:12px;border-radius:8px;font-weight:900
}
.empty{padding:50px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:14px}

.notice{margin-top:28px;background:#0a0f17;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.notice-inner{display:grid;grid-template-columns:.8fr 1.2fr;gap:40px;padding-top:43px;padding-bottom:43px}
.notice h2{margin:7px 0 0}
.notice p{margin:0;color:var(--muted);line-height:1.65}

footer{padding:38px 0 46px}
.footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.footer-brand .brand-mark{width:34px;height:34px;font-size:12px}
.footer-inner p{color:var(--muted);font-size:13px;line-height:1.6;max-width:850px}
.affiliate{margin-top:14px}

@media(max-width:900px){
  .hero-inner{grid-template-columns:1fr}
  .hero-emblem{display:none}
}
@media(max-width:800px){
  .container{width:min(100% - 20px,var(--max))}
  .nav{min-height:64px;gap:10px;flex-wrap:wrap;padding:9px 0}
  .brand-copy{font-size:14px}
  .brand-mark{width:36px;height:36px}
  .search{order:2;flex-basis:100%;max-width:none}
  .search input{padding:11px}
  .search button{padding:0 14px}
  .hero{min-height:360px}
  .hero-inner{padding:50px 0}
  .hero h1{font-size:40px;letter-spacing:-1px}
  .hero p{font-size:15px}
  .section{padding:36px 0}
  .section-title{align-items:flex-start}
  .section-title h2{font-size:24px}
  .section-note{display:none}
  .category-grid{grid-template-columns:repeat(2,1fr);gap:9px}
  .category{min-height:105px;padding:14px}
  .category b{font-size:15px}
  .category small{font-size:12px}
  .product-grid{grid-template-columns:repeat(2,1fr);gap:9px}
  .product-info{padding:11px}
  .product-info h3{font-size:14px;min-height:57px}
  .offer{padding:11px 7px;font-size:13px}
  .featured-inner{align-items:flex-start;flex-direction:column;padding:34px 0}
  .notice-inner{grid-template-columns:1fr;gap:18px}
}