:root{--ink:#0f172a;--muted:#64748b;--line:#e5e7eb;--bg:#ffffff;--soft:#f4f5f7;--navy:#05083a;--accent:#1e3a5f;--ok:#15803d}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:Inter,system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.55}
a{color:inherit}img{max-width:100%;display:block}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.announce{background:var(--navy);color:#e2e8f0;text-align:center;font-size:13px;padding:9px 16px;letter-spacing:.02em}
.hd{border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0;z-index:5}
.hd__in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:76px}
.hd__nav{display:flex;gap:22px;font-size:14px}.hd__nav a{text-decoration:none;color:var(--muted)}.hd__nav a:hover{color:var(--ink)}
.hd__logo{display:flex;align-items:center;gap:10px;text-decoration:none}.hd__logo img{height:34px;width:auto}
.hd__logo span{font-size:13px;color:var(--muted);border-left:1px solid var(--line);padding-left:10px;white-space:nowrap}
.hd__cart{justify-self:end;position:relative;text-decoration:none;display:flex}
.hd__count{position:absolute;top:-6px;right:-10px;background:var(--navy);color:#fff;font-size:11px;border-radius:999px;min-width:18px;height:18px;display:grid;place-items:center;padding:0 5px}
.hero{background:linear-gradient(180deg,#eef2ff 0,#f8fafc 100%)}
.hero__in{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;padding:56px 20px}
.hero h1{font-size:clamp(36px,5vw,58px);line-height:1.05;margin:.2em 0 .3em;letter-spacing:-.02em}
.hero__img{border-radius:18px;box-shadow:0 20px 50px rgb(15 23 42/.12)}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:12px;color:var(--muted);margin:0}
.lede{font-size:18px;color:#334155;max-width:34em;margin:0 0 24px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--ink);background:#fff;color:var(--ink);padding:12px 22px;border-radius:999px;font:inherit;font-weight:600;text-decoration:none;cursor:pointer}
.btn--primary{background:var(--navy);border-color:var(--navy);color:#fff}.btn--primary:hover{background:#111a6b}
.btn--wide{width:100%}
.section{padding:48px 20px}.section__head{display:flex;justify-content:space-between;align-items:baseline}.section__head a{font-size:14px;color:var(--muted)}
h2{font-size:24px;letter-spacing:-.01em}.h1{font-size:32px;letter-spacing:-.015em;margin:.2em 0}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.card{text-decoration:none;display:flex;flex-direction:column;gap:4px}
.card__img{border-radius:14px;overflow:hidden;background:var(--soft);margin-bottom:8px}.card__img img{transition:transform .35s}.card:hover .card__img img{transform:scale(1.04)}
.card__tag{font-size:12px;color:var(--muted)}.card__title{font-weight:600}.card__price{color:#334155}
.agent{background:var(--soft);border-radius:18px;margin-bottom:48px;padding:32px}
.hash code,code{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;word-break:break-all;background:#eef2f7;padding:2px 6px;border-radius:6px}
.pdp{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;padding:40px 20px 64px}
.pdp__media img[data-main]{border-radius:16px;background:var(--soft)}
.pdp__thumbs{display:flex;gap:10px;margin-top:12px}.pdp__thumbs img{width:84px;border-radius:10px;border:1px solid var(--line);cursor:pointer}
.pdp__info{display:flex;flex-direction:column;gap:14px}.price{font-size:20px;margin:0}
.opt{border:0;padding:0;margin:0}.opt legend{font-size:13px;color:var(--muted);margin-bottom:8px}
.opt label{display:inline-block;margin:0 8px 8px 0}.opt input{position:absolute;opacity:0}
.opt span{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:14px;cursor:pointer}
.opt input:checked+span{background:var(--navy);color:#fff;border-color:var(--navy)}.opt input:focus-visible+span{outline:2px solid #6366f1}
.qty input{width:80px;margin-left:8px;padding:8px;border:1px solid var(--line);border-radius:8px;font:inherit}
.agree{font-size:14px;color:#334155}
.note{font-size:14px;color:var(--ok);margin:0}.desc{color:#334155}
details{border-top:1px solid var(--line);padding:12px 0}summary{cursor:pointer;font-weight:600}
.prose{max-width:760px;padding:40px 20px 64px}.prose li{margin:6px 0}
.cart-row{display:grid;grid-template-columns:90px 1fr auto auto;gap:16px;align-items:center;border-bottom:1px solid var(--line);padding:14px 0}
.cart-row img{border-radius:10px;background:var(--soft)}.cart-row button{background:none;border:0;color:var(--muted);cursor:pointer;text-decoration:underline}
.cart-total{display:flex;justify-content:flex-end;gap:24px;align-items:center;padding:20px 0}
.checkout{display:grid;grid-template-columns:1.3fr 1fr;gap:48px;padding:40px 20px 64px}
.checkout form{display:flex;flex-direction:column;gap:14px}.checkout label{display:flex;flex-direction:column;gap:6px;font-size:14px}
.checkout label.agree{flex-direction:row;align-items:center;gap:8px}
.checkout input:not([type=checkbox]),.checkout select{padding:11px 12px;border:1px solid var(--line);border-radius:10px;font:inherit}
.checkout .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.checkout aside{background:var(--soft);border-radius:16px;padding:24px;align-self:start}
.order{background:var(--soft);border-radius:16px;padding:28px;max-width:760px}
.order pre{background:#0f172a;color:#e2e8f0;padding:16px;border-radius:12px;overflow:auto;font-size:12.5px}
.ft{background:var(--navy);color:#cbd5e1;margin-top:40px}.ft__in{display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px;padding:44px 20px}
.ft img{background:#fff;border-radius:10px;padding:4px}.ft h4{color:#fff;margin:0 0 10px}.ft a{display:block;color:#cbd5e1;text-decoration:none;font-size:14px;margin:4px 0}
.ft__base{border-top:1px solid rgb(255 255 255/.12);padding:16px 20px;font-size:13px}
@media (max-width:860px){.grid{grid-template-columns:repeat(2,1fr)}.hero__in,.pdp,.checkout{grid-template-columns:1fr}.ft__in{grid-template-columns:1fr}.hd__nav{display:none}.hd__in{grid-template-columns:auto 1fr auto}.hd__logo span{display:none}}
.pop{border:0;border-radius:18px;padding:28px 32px;max-width:680px;width:calc(100% - 32px);max-height:85vh;overflow:auto;box-shadow:0 30px 80px rgb(15 23 42/.3)}
.pop::backdrop{background:rgb(5 8 58/.45)}
.pop__head{display:flex;justify-content:space-between;align-items:center}.pop__head h2{margin:0}
.pop__x{border:0;background:none;font-size:28px;cursor:pointer;color:var(--muted)}
.pop h3{font-size:15px;margin:20px 0 4px}.pop p{margin:0 0 8px;color:#334155}
.note--error{color:#b91c1c}