
:root{--bg:#0b0d0f;--panel:#111519;--text:#f3f4f5;--muted:#a8adb2;--line:#2a3035;--accent:#d9d9d9;--max:1240px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff;color:#151719;font-family:Arial,Helvetica,sans-serif;line-height:1.5}
a{color:inherit;text-decoration:none}.container{width:min(var(--max),calc(100% - 40px));margin:auto}
.top{background:#0b0d0f;color:#fff}.topbar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:12px 0;font-size:14px}.phones{display:flex;gap:22px;flex-wrap:wrap}.lang{opacity:.9}
.header{position:sticky;top:0;z-index:20;background:#111315;color:#fff;border-bottom:1px solid #24282b}.nav{display:flex;align-items:center;gap:28px;min-height:76px}.logo{font-size:25px;font-weight:800;letter-spacing:.08em}.tag{font-size:11px;color:#aaa;line-height:1.2}.menu{display:flex;gap:22px;margin-left:auto;align-items:center}.menu a{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:#ddd}.menu a:hover{color:#fff}
.hero{background:#101315;color:#fff;padding:90px 0 80px}.hero h1{font-size:clamp(42px,6vw,78px);line-height:.96;text-transform:uppercase;max-width:900px;margin:0 0 35px;letter-spacing:-.03em}.hero .lead{font-size:20px;color:#c7cbcf;max-width:760px}.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:50px}.tile{min-height:190px;border:1px solid #3b4146;padding:22px;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(145deg,#1a1e21,#0e1012)}.tile b{font-size:17px;text-transform:uppercase}.tile span{color:#aaa;margin-top:7px}
section{padding:80px 0}.dark{background:#101315;color:#fff}.eyebrow{text-transform:uppercase;font-size:12px;letter-spacing:.15em;color:#777;margin-bottom:12px}.dark .eyebrow{color:#aaa}h2{font-size:44px;line-height:1.05;text-transform:uppercase;margin:0 0 28px}.intro{max-width:850px;font-size:18px}.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.card{border:1px solid #ddd;padding:28px;background:#fff}.card h3{font-size:25px;text-transform:uppercase;margin:0 0 15px}.card p{color:#555}.btn{display:inline-block;border:1px solid currentColor;padding:13px 20px;text-transform:uppercase;font-size:12px;letter-spacing:.08em;margin-top:15px;background:transparent;cursor:pointer}.product{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:70px 0;border-bottom:1px solid #ddd}.product h2{font-size:34px}.spec{white-space:pre-line;color:#555}.formbox{background:#f3f3f1;padding:30px}.formbox input,.formbox textarea{width:100%;padding:14px;margin:7px 0;border:1px solid #bbb;background:#fff}.formbox button{padding:14px 22px;border:0;background:#111;color:#fff;text-transform:uppercase;cursor:pointer}
.footer{background:#0b0d0f;color:#fff;padding:55px 0}.footergrid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px}.footer small{color:#9ca0a4}.cookie{position:fixed;bottom:0;left:0;right:0;background:#111;color:#eee;padding:15px 20px;z-index:50;display:flex;justify-content:center;gap:18px;align-items:center;font-size:13px}.cookie button{background:#fff;border:0;padding:9px 18px;cursor:pointer}
@media(max-width:900px){.menu{display:none}.grid{grid-template-columns:repeat(2,1fr)}.cards,.product,.footergrid{grid-template-columns:1fr}.hero{padding-top:55px}.hero h1{font-size:45px}h2{font-size:34px}}
@media(max-width:520px){.container{width:min(100% - 24px,var(--max))}.grid{grid-template-columns:1fr}.topbar{align-items:flex-start;flex-direction:column}.phones{gap:8px}}

.hero{position:relative;overflow:hidden;background:#0b0f12 url('/assets/hero-metals.jpg') center/cover no-repeat}
.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,9,11,.92) 0%,rgba(7,9,11,.70) 45%,rgba(7,9,11,.28) 100%)}
.hero>*{position:relative}
.tile{background-image:linear-gradient(0deg,rgba(0,0,0,.78),rgba(0,0,0,.12)),url('/assets/hero-metals.jpg');background-size:cover;background-position:center}.tile:nth-child(1){background-image:linear-gradient(0deg,rgba(0,0,0,.78),rgba(0,0,0,.12)),url('/assets/tile-copper-ingots.jpg')}.tile:nth-child(2){background-image:linear-gradient(0deg,rgba(0,0,0,.78),rgba(0,0,0,.12)),url('/assets/tile-copper-powder.jpg')}.tile:nth-child(3){background-image:linear-gradient(0deg,rgba(0,0,0,.78),rgba(0,0,0,.12)),url('/assets/tile-aluminum.jpg')}.tile:nth-child(4){background-image:linear-gradient(0deg,rgba(0,0,0,.78),rgba(0,0,0,.12)),url('/assets/tile-zinc.jpg')}.tile:nth-child(5){background-image:linear-gradient(0deg,rgba(0,0,0,.78),rgba(0,0,0,.12)),url('/assets/tile-rare-earth.jpg')}
