:root{
  --black:#0c0d0e; --graphite:#1a1c1e; --steel:#2a2d30;
  --paper:#f2efe9; --ochre:#c8963e; --ochre-dim:#8a6527;
  --text-dim:#9a9d9f;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"Liberation Sans Narrow","Nimbus Sans Narrow","Arial Narrow","Roboto Condensed",system-ui,sans-serif;
  background:var(--black); color:var(--paper); line-height:1.5;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

/* top bar */
.top{border-bottom:1px solid var(--steel);background:var(--graphite)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:44px;font-size:14px;color:var(--text-dim)}
.top b{color:var(--paper);font-weight:600}

/* header */
header{position:sticky;top:0;z-index:50;background:rgba(12,13,14,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--steel)}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:76px}
.logo{display:flex;align-items:center;gap:12px}
.logo .mark{font-size:30px;color:var(--ochre);line-height:1;transform:scaleY(1.15)}
.logo .name{font-size:26px;letter-spacing:.28em;font-weight:700}
.logo .name span{color:var(--ochre)}
nav{display:flex;gap:34px;font-size:16px;letter-spacing:.12em;text-transform:uppercase}
nav a{color:var(--text-dim);transition:color .2s}
nav a:hover{color:var(--ochre)}
@media(max-width:820px){nav{display:none}}

/* hero */
.hero{
  min-height:78vh;display:flex;align-items:flex-end;
  background:
    linear-gradient(160deg,rgba(12,13,14,.55) 0%,rgba(12,13,14,.92) 70%),
    radial-gradient(120% 90% at 80% 10%,#23262a 0%,#0c0d0e 60%);
  border-bottom:1px solid var(--steel);
}
.hero .wrap{padding:90px 24px 70px}
.hero .rune{font-size:120px;color:var(--ochre);line-height:.9;opacity:.92}
.hero h1{
  font-size:clamp(44px,7vw,84px);line-height:.98;letter-spacing:.02em;
  text-transform:uppercase;font-weight:700;margin:18px 0 22px;
}
.hero h1 em{font-style:normal;color:var(--ochre)}
.hero p{max-width:560px;font-size:20px;color:var(--text-dim)}
.cta{display:inline-block;margin-top:34px;padding:16px 42px;
  border:1px solid var(--ochre);color:var(--ochre);
  text-transform:uppercase;letter-spacing:.22em;font-size:15px;
  transition:all .25s}
.cta:hover{background:var(--ochre);color:var(--black)}

/* promo panels */
.panel{display:grid;grid-template-columns:1fr 1fr;min-height:380px;border-bottom:1px solid var(--steel)}
.panel:nth-child(even){direction:rtl}
.panel>*{direction:ltr}
.panel .txt{display:flex;flex-direction:column;justify-content:center;padding:64px;gap:16px}
.panel .img{
  background:
    linear-gradient(140deg,var(--graphite),var(--steel)),
    radial-gradient(80% 80% at 30% 20%,#33373b,transparent);
  display:flex;align-items:center;justify-content:center;
}
.panel .img .glyph{font-size:150px;color:#3d4247}
.panel h2{font-size:clamp(28px,3.4vw,40px);text-transform:uppercase;letter-spacing:.04em}
.panel h2 span{color:var(--ochre)}
.panel p{color:var(--text-dim);font-size:18px;max-width:420px}
.panel .more{color:var(--ochre);text-transform:uppercase;letter-spacing:.18em;font-size:14px}
@media(max-width:820px){.panel{grid-template-columns:1fr}.panel .img{min-height:220px}}

/* catalog tiles */
.catalog{padding:80px 0}
.catalog h2{font-size:clamp(30px,4vw,44px);text-transform:uppercase;margin-bottom:36px}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tile{position:relative;height:300px;background:linear-gradient(150deg,var(--graphite),var(--steel));
  display:flex;align-items:flex-end;padding:22px;border:1px solid var(--steel);transition:border-color .25s}
.tile:hover{border-color:var(--ochre)}
.tile b{font-size:21px;text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.tile span{display:block;color:var(--text-dim);font-size:15px}
@media(max-width:820px){.tiles{grid-template-columns:1fr}.tile{height:200px}}

/* news */
.news{padding:80px 0;border-top:1px solid var(--steel)}
.news h2{font-size:clamp(30px,4vw,44px);text-transform:uppercase;margin-bottom:36px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.card{border:1px solid var(--steel);padding:26px;display:flex;flex-direction:column;gap:10px;background:var(--graphite)}
.card time{color:var(--ochre);font-size:14px;letter-spacing:.1em}
.card b{font-size:19px}
.card p{color:var(--text-dim);font-size:15px}
@media(max-width:820px){.cards{grid-template-columns:1fr}}

/* footer */
footer{border-top:1px solid var(--steel);padding:44px 0 60px;background:var(--graphite)}
footer .wrap{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;color:var(--text-dim);font-size:15px}
footer b{color:var(--paper);display:block;margin-bottom:8px;font-size:16px}
footer .rune-sm{font-size:34px;color:var(--ochre)}

.price{color:var(--ochre);font-size:19px;font-weight:700;letter-spacing:.04em}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:820px){.grid{grid-template-columns:1fr}}
.prod{border:1px solid var(--steel);background:var(--graphite);padding:26px;display:flex;flex-direction:column;gap:10px;transition:border-color .25s}
.prod:hover{border-color:var(--ochre)}
.prod b{font-size:20px;text-transform:uppercase;letter-spacing:.04em}
.prod p{color:var(--text-dim);font-size:15px;flex:1}
.prod .row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.btn{display:inline-block;padding:10px 26px;border:1px solid var(--ochre);color:var(--ochre);text-transform:uppercase;letter-spacing:.18em;font-size:13px;transition:all .25s;background:none;cursor:pointer}
.btn:hover{background:var(--ochre);color:var(--black)}
.page{padding:70px 0}
.page h1{font-size:clamp(34px,5vw,60px);text-transform:uppercase;margin-bottom:26px}
.page .lead{color:var(--text-dim);max-width:640px;font-size:18px;margin-bottom:34px}
.breadcrumbs{color:var(--text-dim);font-size:14px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:26px}
.breadcrumbs a:hover{color:var(--ochre)}
.spec{color:var(--text-dim)}
.spec b{color:var(--paper)}
article.body{max-width:820px;color:var(--paper);font-size:17px}
article.body p{margin:0 0 14px}
article.body h2,article.body h3{margin:22px 0 10px;text-transform:uppercase}
article.body img{max-width:100%;border:1px solid var(--steel)}
article.body a{color:var(--ochre)}
.notice{color:var(--text-dim);padding:20px 0}
.rune-svg{width:1em;height:1.35em;display:inline-block;vertical-align:middle}
.logo .rune-svg{width:26px;height:34px;color:var(--ochre);transform:scaleY(1.15)}
.hero .rune-svg{width:110px;height:148px;color:var(--ochre);opacity:.92}
footer .rune-svg{width:30px;height:40px;color:var(--ochre)}
.panel .glyph{color:#3d4247}.panel .glyph .rune-svg{width:150px;height:200px;color:#3d4247}