@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Stencil:wght@700;900&family=Archivo:wdth,wght@100..125,400..800&family=JetBrains+Mono:wght@500;700&display=swap');
:root{--void:#0b0b0a;--hull:#1b1b18;--rule:#2f2e29;--bone:#ece6d8;--bone2:#b3ad9f;--bone3:#77726a;--orange:#ff5b14;--phos:#9dff5c}
*{box-sizing:border-box}
html{background:var(--void)}
body{margin:0;color:var(--bone);font:17px/1.6 Archivo,-apple-system,Helvetica,Arial,sans-serif;background:var(--void);
 background-image:linear-gradient(rgba(236,230,216,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(236,230,216,.035) 1px,transparent 1px);background-size:120px 120px}
a{color:var(--orange)}
.wrap{max-width:980px;margin:0 auto;padding:0 20px}
header{display:flex;align-items:center;justify-content:space-between;padding:22px 0;border-bottom:1px solid var(--rule)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--bone)}
.brand img{width:44px;height:44px;border-radius:10px}
.st{font-family:'Big Shoulders Stencil',Impact,sans-serif;font-weight:900;text-transform:uppercase;line-height:.86;letter-spacing:.01em}
.brand .st{font-size:30px}
nav a{color:var(--bone3);text-decoration:none;font-stretch:125%;font-weight:800;font-size:12px;letter-spacing:.18em;text-transform:uppercase;margin-left:22px}
nav a:hover{color:var(--bone)}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:60px 0 40px}
.hero h1{font-size:clamp(50px,9vw,112px);margin:0;text-wrap:balance}
.hero h1 b{color:var(--orange);display:block;font-weight:900}
.lede{color:var(--bone2);font-size:19px;margin:22px 0 28px;max-width:470px}
.price{display:inline-flex;align-items:center;gap:14px;background:var(--orange);color:var(--void);padding:14px 22px;border-radius:4px;font-stretch:125%;font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:13px;text-decoration:none}
.price .m{font-family:'JetBrains Mono',monospace;font-size:20px;letter-spacing:0}
.phones{display:flex;gap:16px;justify-content:center}
.phones img{width:48%;border-radius:22px;box-shadow:0 30px 70px -20px rgba(255,91,20,.45),0 0 0 1px var(--rule)}
.phones img:last-child{margin-top:60px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border-radius:4px;overflow:hidden;margin:30px 0 60px}
.grid div{background:var(--hull);padding:22px}
.grid .st{font-size:24px;display:block;margin-bottom:8px}
.grid p{margin:0;color:var(--bone3);font-size:15px}
.doc{max-width:720px;padding:50px 20px 70px}
.doc h1{font-size:64px;margin:0 0 8px}
.doc h2{font-family:'Big Shoulders Stencil',Impact,sans-serif;font-weight:800;text-transform:uppercase;font-size:28px;margin:34px 0 8px}
.doc p,.doc li{color:var(--bone2)}
.plate{font-stretch:125%;font-weight:800;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--bone3)}
footer{border-top:1px solid var(--rule);padding:26px 0 40px;color:var(--bone3);font-size:13px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
@media(max-width:760px){.hero{grid-template-columns:1fr;padding-top:36px}.grid{grid-template-columns:1fr}nav a{margin-left:12px;font-size:10.5px;letter-spacing:.12em}.brand .st{font-size:24px}.brand img{width:36px;height:36px}.doc h1{font-size:52px}}
