:root {
  --bg:#0F1115;
  --p1:#141821;
  --p2:#0B0D12;
  --ink:#F2F4F8;
  --mut:#A7B0BF;
  --line:#2A3140;
  --a:#F4C95D;
  --b:#7DD3FC;
  --r:0px;
  --max: 1180px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background:
    radial-gradient(900px 520px at 15% -10%, rgba(244,201,93,.18), transparent 60%),
    radial-gradient(800px 540px at 85% 0%, rgba(125,211,252,.16), transparent 62%),
    linear-gradient(180deg, var(--bg), #06070a);
  color: var(--ink);
}
a{color:inherit}
img{max-width:100%; display:block}
p{line-height:1.65}
strong{font-weight:900}

.top{
  border-bottom:1px solid var(--line);
  background: rgba(11,13,18,.78);
  backdrop-filter: blur(10px);
  position: sticky;
  top:0;
  z-index: 5;
}
.top__row{
  max-width: var(--max);
  margin: 0 auto;
  padding: 14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
}
.logo{display:flex; align-items:center; gap:12px; text-decoration:none}
.logo__sig{width:14px; height:14px; background:var(--a);}
.logo__txt{font-weight:950; letter-spacing:.6px}

.menu{display:flex; gap:12px; flex-wrap:wrap; justify-content:center}
.menu__a{
  text-decoration:none;
  padding:10px 12px;
  border:1px solid var(--line);
  background: rgba(20,24,33,.55);
}
.menu__a:hover{border-color: rgba(244,201,93,.55)}

.pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 12px;
  border:1px solid var(--line);
  text-decoration:none;
  background: rgba(20,24,33,.55);
}
.pill__n{
  min-width:28px; text-align:center;
  padding:6px 10px;
  border:1px solid rgba(244,201,93,.55);
  background: rgba(244,201,93,.10);
}

.top__sub{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 16px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-top:1px solid rgba(42,49,64,.6);
}
.top__tag{margin:10px 0 0; color: var(--mut); font-size: 12px}
.top__links{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
.subLink{color: var(--mut); text-decoration:none; border-bottom:1px dashed rgba(167,176,191,.35)}
.subLink:hover{color: var(--ink); border-bottom-color: rgba(244,201,93,.7)}

.page{max-width: var(--max); margin:0 auto; padding: 18px 16px 48px}

.heroG{display:grid; grid-template-columns: 1.05fr .95fr; gap:16px; align-items:start}
.heroG__left{
  border:1px solid var(--line);
  background: rgba(20,24,33,.55);
  padding: 18px;
}
.heroG__right{display:grid; gap:12px}
.imgBox{border:1px solid var(--line); background: rgba(20,24,33,.55)}
.imgBox img{height: 340px; width:100%; object-fit: cover}
.heroG h1{margin:0 0 10px; font-size: 46px; line-height: 1.05}
.lede{margin:0; color: var(--mut); font-size: 16.5px}

.heroG__actions{display:flex; gap:10px; flex-wrap:wrap; margin-top: 14px}
.btnLine, .btnGhost{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 12px 14px;
  border: 1px solid var(--line);
  text-decoration:none;
  cursor:pointer;
  font-weight: 950;
}
.btnLine{border-color: rgba(244,201,93,.75); background: rgba(244,201,93,.10)}
.btnLine:hover{background: rgba(244,201,93,.16)}
.btnGhost{background: rgba(20,24,33,.55); color: var(--ink)}
.btnGhost:hover{border-color: rgba(125,211,252,.65)}
.full{width:100%}

.ticker{margin-top: 16px; display:grid; grid-template-columns: repeat(4, 1fr); gap:10px}
.tick{border:1px solid var(--line); background: rgba(11,13,18,.55); padding:12px}
.tick span{display:block; color: var(--mut); font-size: 12px; font-weight:900}

.micro{border:1px solid var(--line); background: rgba(20,24,33,.55); padding: 14px}
.micro__h{margin:0 0 10px; font-weight:950}
.micro__ol{margin:0; padding-left: 18px; color: var(--mut)}
.micro__ol li{margin: 8px 0}

.railA{margin-top: 14px; display:grid; grid-template-columns: 1fr 1fr; gap: 14px}
.blk{
  border:1px solid var(--line);
  background: rgba(20,24,33,.55);
  padding: 16px;
}
.blk--alt{background: rgba(11,13,18,.55)}
.blk h2{margin:0 0 10px}
.blk p{margin:0; color: var(--mut)}
.arrow{display:inline-block; margin-top: 10px; text-decoration:none; border-bottom:1px solid rgba(244,201,93,.6)}

.panelForm{margin-top: 14px; border:1px solid var(--line); background: rgba(11,13,18,.55); padding: 16px; display:grid; grid-template-columns: 1.2fr .8fr; gap: 14px}
.panelForm__copy h2{margin:0 0 8px}
.muted{margin:0; color: var(--mut)}

.formK{display:grid; gap:10px}
.formK--box{margin-top: 12px}
.lab{display:grid; gap:6px}
.lab span{font-size: 12px; color: var(--mut); font-weight: 900}
input, select, textarea{
  width:100%;
  padding: 12px 12px;
  border:1px solid var(--line);
  background: rgba(20,24,33,.55);
  color: var(--ink);
  border-radius: var(--r);
  font: inherit;
}
textarea{resize: vertical}
.hint{margin:0; color: var(--mut); font-size: 12px}

.headX{border:1px solid var(--line); background: rgba(20,24,33,.55); padding: 16px; display:grid; grid-template-columns: 1.1fr .9fr; gap: 14px}
.headX h1{margin:0 0 8px; font-size: 40px}
.ctrls{display:grid; gap: 12px; align-content:start}
.tabs{display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end}
.tab{padding: 10px 12px; border:1px solid var(--line); background: rgba(11,13,18,.55); color: var(--mut); cursor:pointer; font-weight:950}
.tab.is-on{border-color: rgba(125,211,252,.75); color: var(--ink)}
.pick{display:grid; gap:6px; justify-items:end}

.grid4{margin-top: 12px; display:grid; grid-template-columns: 1.15fr .85fr; gap: 14px}
.cards4{display:grid; grid-template-columns: repeat(4, 1fr); gap: 12px}
.card{
  border:1px solid var(--line);
  background: rgba(11,13,18,.55);
  padding: 12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.card__img{border:1px solid var(--line); background: rgba(20,24,33,.55)}
.card__img img{height: 110px; width:100%; object-fit: cover}
.card h3{margin:0}
.card p{margin:0; color: var(--mut)}
.card__meta{display:flex; justify-content:space-between; color: var(--mut); font-size: 12px}
.card__acts{display:flex; gap:10px; flex-wrap:wrap}

.sideY{border:1px solid var(--line); background: rgba(11,13,18,.55); padding: 16px}
.sideY h2{margin:0 0 10px}
.listA{margin: 0 0 10px; padding-left: 18px; color: var(--mut)}
.listA li{margin: 8px 0}

.strip{margin-top: 14px}
.strip__in{border:1px solid rgba(244,201,93,.35); background: rgba(244,201,93,.06); padding: 16px}
.strip__in h2{margin:0 0 10px}

.prodZ{margin-top: 12px; display:grid; grid-template-columns: .95fr 1.05fr; gap: 14px}
.miniGrid{display:grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px}
.miniCard{border:1px solid var(--line); background: rgba(11,13,18,.55); padding: 12px}
.miniCard__k{display:block; color: var(--mut); font-size: 12px; font-weight:900}
.crumb{display:inline-block; margin-bottom: 10px; color: var(--mut); text-decoration:none; border-bottom:1px dashed rgba(167,176,191,.35)}
.crumb:hover{color: var(--ink)}
.price{margin: 6px 0 10px; font-weight:950; font-size: 20px}
.specA{display:grid; gap:10px; margin-top: 12px}
.specA__row{display:flex; justify-content:space-between; gap:10px; border:1px solid var(--line); background: rgba(11,13,18,.55); padding: 12px; color: var(--mut)}
.specA__row strong{color: var(--ink)}
.buyA{display:flex; gap:10px; flex-wrap:wrap; align-items:end; margin-top: 12px}
.noteA{margin-top: 14px; border:1px solid var(--line); background: rgba(20,24,33,.55); padding: 16px}
.noteA--alt{background: rgba(11,13,18,.55)}
.noteA h2{margin:0 0 10px}

.cartL{margin-top: 12px; display:grid; grid-template-columns: 1.15fr .85fr; gap: 14px}
.basket{border:1px solid var(--line); background: rgba(11,13,18,.55); padding: 16px}
.rows{display:grid; gap:10px}
.row{
  border:1px solid var(--line);
  background: rgba(20,24,33,.55);
  padding: 12px;
  display:grid;
  grid-template-columns: 1fr auto;
  gap:12px;
  align-items:center;
}
.row__m{color: var(--mut); font-size: 12px}
.row__r{display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end}
.iconBtn{padding: 10px 12px; border:1px solid var(--line); background: rgba(11,13,18,.55); color: var(--ink); cursor:pointer; font-weight:950}
.iconBtn:hover{border-color: rgba(125,211,252,.65)}
.empty{border:1px dashed rgba(42,49,64,.9); padding: 14px; color: var(--mut); margin: 10px 0}
.checkout{display:grid; gap: 12px}
.sum{border:1px solid var(--line); background: rgba(20,24,33,.55); padding: 16px}
.sum h2{margin:0 0 10px}
.sum__row{display:flex; justify-content:space-between; padding: 8px 0; border-bottom:1px dashed rgba(42,49,64,.85); color: var(--mut)}
.sum__row--t{border-bottom:none; color: var(--ink); font-size: 18px}

.simple{border:1px solid var(--line); background: rgba(20,24,33,.55); padding: 16px}
.simple h1{margin:0 0 8px; font-size: 40px}

.cols2{margin-top: 12px; display:grid; grid-template-columns: 1fr 1fr; gap: 14px}

.steps{margin-top: 12px; display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px}
.step{border:1px solid var(--line); background: rgba(11,13,18,.55); padding: 16px}
.step__k{display:inline-block; padding: 6px 10px; border:1px solid rgba(244,201,93,.6); background: rgba(244,201,93,.08); margin-bottom: 10px; font-weight:950}

.doc{margin-top: 12px; border:1px solid var(--line); background: rgba(11,13,18,.55); padding: 16px}
.doc h2{margin: 16px 0 8px}
.doc p{margin:0 0 10px; color: var(--mut)}

.success{border:1px solid var(--line); background: rgba(20,24,33,.55); padding: 16px}
.success h1{margin:0 0 8px; font-size: 40px}
.success__grid{margin-top: 12px; display:grid; grid-template-columns: 1.1fr .9fr; gap: 14px}
.success__btns{margin-top: 12px; display:flex; gap: 10px; flex-wrap:wrap}

.foot{margin-top: 18px; border-top:1px solid var(--line); background: rgba(11,13,18,.78)}
.foot__grid{max-width: var(--max); margin:0 auto; padding: 18px 16px; display:grid; grid-template-columns: 1.1fr .8fr .8fr 1.1fr; gap:14px}
.foot__h{margin:0 0 10px}
.foot__p{margin:0; color: var(--mut)}
.foot__list{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.foot__list a{text-decoration:none; color: var(--mut); border-bottom:1px dashed rgba(167,176,191,.25)}
.foot__list a:hover{color: var(--ink); border-bottom-color: rgba(244,201,93,.7)}
.small{font-size: 12px}
.muted{color: var(--mut)}

.floatCart{
  position: fixed;
  right: 16px;
  bottom: 16px;
  display:flex;
  align-items:center;
  gap:10px;
  padding: 12px 14px;
  border:1px solid rgba(244,201,93,.75);
  background: rgba(11,13,18,.85);
  text-decoration:none;
  z-index: 9;
}
.floatCart__n{padding: 6px 10px; border:1px solid rgba(125,211,252,.65); background: rgba(125,211,252,.10); min-width: 28px; text-align:center}

@media (max-width: 1100px) {
  .heroG{grid-template-columns: 1fr}
  .ticker{grid-template-columns: 1fr 1fr}
  .railA{grid-template-columns: 1fr}
  .panelForm{grid-template-columns: 1fr}
  .headX{grid-template-columns: 1fr}
  .tabs{justify-content:flex-start}
  .pick{justify-items:start}
  .grid4{grid-template-columns: 1fr}
  .cards4{grid-template-columns: repeat(2, 1fr)}
  .prodZ{grid-template-columns: 1fr}
  .cartL{grid-template-columns: 1fr}
  .cols2{grid-template-columns: 1fr}
  .steps{grid-template-columns: 1fr}
  .success__grid{grid-template-columns: 1fr}
  .foot__grid{grid-template-columns: 1fr 1fr}
}
@media (max-width: 560px) {
  .menu{display:none}
  .cards4{grid-template-columns: 1fr}
  .top__sub{flex-direction:column; align-items:flex-start}
}