:root{--m4:#0f161c;--m3:#162029;--m2:#44505c;--m1:#79848f;--s1:#f2f6fa;--s2:#d8e4eb;--s3:#afc2cc;--t3:#1d4d68;--sonar:#acff24;--beacon:#fb6b3c}
*{box-sizing:border-box}body{margin:0;background:var(--m4);color:var(--s1);font-family:"Helvetica Neue",Inter,Arial,sans-serif;-webkit-font-smoothing:antialiased}
.mono{font-family:ui-monospace,Menlo,"DejaVu Sans Mono",monospace;text-transform:uppercase;letter-spacing:.12em;font-size:12px}
a{color:inherit;text-decoration:none}
header{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:18px 48px;background:rgba(15,22,28,.85);backdrop-filter:blur(10px);border-bottom:1px solid rgba(242,246,250,.1)}
header .brand{display:flex;align-items:center;gap:14px}header .brand img{height:24px}header .brand span{color:var(--m1);border-left:1px solid var(--m2);padding-left:14px}
nav{display:flex;gap:28px}nav a{color:var(--s3)}nav a.on,nav a:hover{color:var(--sonar)}
.cart{border:1px solid var(--m2);padding:9px 14px;border-radius:2px}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--sonar);color:var(--m3);padding:15px 22px;border:0;border-radius:2px;font-weight:600;cursor:pointer}
.btn.ghost{background:transparent;color:var(--s1);border:1px solid var(--m2)}
.hero{position:relative;min-height:600px;display:flex;align-items:flex-end;padding:72px 48px;background:linear-gradient(90deg,rgba(15,22,28,.95) 25%,rgba(15,22,28,.3)),url(img/hero.png) center/cover}
.hero h1{font-size:76px;line-height:.98;font-weight:500;letter-spacing:-.03em;margin:16px 0 22px;max-width:820px}
.hero p{font-size:20px;color:var(--s3);max-width:560px;line-height:1.5}
.eyebrow{color:var(--sonar)}
section.wrap{padding:88px 48px;border-bottom:1px solid rgba(242,246,250,.08)}
h2{font-size:46px;font-weight:500;letter-spacing:-.02em;margin:12px 0 16px}
.lead{color:var(--s3);font-size:18px;max-width:640px;line-height:1.55}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px}
.card{background:var(--m3);border:1px solid rgba(242,246,250,.08);display:flex;flex-direction:column}
.card img{width:100%;aspect-ratio:1;display:block}
.card .b{padding:18px 18px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.card h3{margin:0;font-size:19px;font-weight:500}.card .bl{color:var(--m1)}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:10px}
.tag{border:1px solid var(--m2);color:var(--s3);padding:5px 8px;font-size:10.5px}.tag.g{border-color:var(--sonar);color:var(--sonar)}
.price{color:var(--s3);font-size:13px}.price em{color:var(--m1);font-style:normal;font-size:11px}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(242,246,250,.1);margin-top:40px}
.tiles>a{background:var(--m4);padding:30px;min-height:190px;display:flex;flex-direction:column;justify-content:space-between}.tiles>a:hover{background:var(--m3)}
.tiles h3{font-size:24px;font-weight:500;margin:0}
.panel{background:var(--m3);border:1px solid rgba(242,246,250,.1);padding:28px}
.pick{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:14px 0 22px}
.opt{background:var(--m4);border:1px solid var(--m2);cursor:pointer;position:relative}.opt img{width:100%;display:block}
.opt .l{padding:12px}.opt.sel{border-color:var(--sonar);box-shadow:0 0 0 1px var(--sonar)}
.opt.sel:after{content:"✓ SELECTED";position:absolute;top:10px;left:10px;background:var(--sonar);color:var(--m3);font:600 10px monospace;padding:4px 6px}
.sizes{display:flex;gap:8px;flex-wrap:wrap}.sizes button{background:transparent;color:var(--s1);border:1px solid var(--m2);min-width:48px;padding:10px;cursor:pointer;font-family:monospace}
.sizes button.sel{background:var(--s1);color:var(--m3)}
.step{display:flex;align-items:center;gap:12px;margin-top:34px}.step b{width:30px;height:30px;border:1px solid var(--sonar);color:var(--sonar);display:grid;place-items:center;font:12px monospace}
.step h3{margin:0;font-size:22px;font-weight:500}
.layout{display:grid;grid-template-columns:1fr 400px;gap:36px;align-items:start}
.sum{position:sticky;top:90px}.sum li{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--m2);color:var(--s3)}.sum ul{list-style:none;padding:0}
label{display:block;color:var(--m1);margin:16px 0 6px}
input,select,textarea{width:100%;background:var(--m4);color:var(--s1);border:1px solid var(--m2);padding:12px;font:15px inherit;border-radius:2px}
table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--m2);padding:8px;text-align:center}th{color:var(--m1);font-weight:400}td input{text-align:center;padding:8px}
.sw{display:flex;gap:10px}.sw span{width:34px;height:34px;border-radius:50%;border:2px solid var(--m2);cursor:pointer}.sw span.sel{outline:2px solid var(--sonar);outline-offset:3px}
.note{border-left:3px solid var(--beacon);padding:12px 16px;background:rgba(251,107,60,.08);color:var(--s2);margin:16px 0}
footer{padding:46px 48px;display:flex;justify-content:space-between;align-items:center;color:var(--m1)}footer img{height:18px;opacity:.6}footer b{color:var(--s1);font-weight:500}
.toast{display:none;margin-top:14px;padding:14px;border:1px solid var(--sonar);color:var(--sonar)}
@media(max-width:800px){header{padding:14px 18px}nav,.brand span,.cart{display:none}.hero{padding:40px 20px;min-height:520px}.hero h1{font-size:44px}section.wrap{padding:56px 20px}h2{font-size:32px}.grid,.tiles{grid-template-columns:1fr 1fr;gap:12px}.cols,.layout{grid-template-columns:1fr}.pick{grid-template-columns:1fr 1fr 1fr;gap:8px}.card .b{padding:12px}.card h3{font-size:15px}footer{flex-direction:column;gap:14px;padding:30px 20px;text-align:center}.mburger{display:block!important}}
.mburger{display:none;font-size:22px}
.lbl{list-style:none;padding:0;margin:26px 0 0}.lbl li{display:flex;gap:16px;padding:13px 0;border-bottom:1px solid var(--m2);color:var(--s2)}.lbl b{color:var(--sonar);font-weight:400}
.lblimgs{display:grid;grid-template-columns:1fr 1.4fr;gap:16px;align-items:center}.lblimgs.one{grid-template-columns:1fr}.lblimgs img,.dropimgs img{width:100%;display:block;border:1px solid rgba(242,246,250,.1)}
.dropimgs{display:grid;grid-template-columns:1fr 1fr;gap:14px}.drop{background:linear-gradient(180deg,var(--m3),var(--m4))}
.tagprev{margin-top:22px;padding-top:6px;border-top:1px solid var(--m2)}.tagprev img{width:100%;max-width:220px;display:block;border:1px solid var(--m2)}.tagprev span{display:block;color:var(--m1);font-size:10px;margin-top:8px}
@media(max-width:800px){.lblimgs,.dropimgs{grid-template-columns:1fr}}