:root { --ink:#081018; --muted:#65707a; --amber:#f5b942; --line:#d7d3ca; --paper:#f3f1eb; }
* { box-sizing:border-box; } body { margin:0; background:var(--paper); color:var(--ink); font-family:Manrope,system-ui,sans-serif; } .top { background:var(--ink); color:white; padding:22px 6vw 72px; } nav { display:flex; justify-content:space-between; gap:18px; align-items:center; } nav a { color:white; text-decoration:none; font-weight:800; } select { border:1px solid #41505d; border-radius:99px; padding:8px 10px; background:#0f1c27; color:white; } .hero { max-width:960px; margin:65px auto 0; } .eyebrow { display:block; color:#9a721e; font:700 .68rem "Space Mono",monospace; letter-spacing:.08em; text-transform:uppercase; } .hero h1 { max-width:830px; font-size:clamp(2.7rem,7vw,5.8rem); line-height:.96; letter-spacing:-.06em; margin:17px 0; } .hero p { max-width:720px; font-size:1.08rem; line-height:1.7; color:#b6c0c8; } .finder { display:inline-block; margin-top:18px; color:var(--amber); font-weight:800; text-decoration:none; } main { max-width:1300px; margin:auto; padding:56px 6vw 100px; } .grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; } .catalog-card { display:flex; flex-direction:column; background:white; border:1px solid var(--line); border-radius:18px; padding:24px; min-height:300px; } h2 { margin:12px 0; font-size:1.45rem; line-height:1.15; } .catalog-card p { color:var(--muted); line-height:1.6; flex:1; } dl { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:12px 0 22px; } dt { color:#7b858d; font:700 .62rem "Space Mono",monospace; } dd { margin:4px 0 0; font-size:.85rem; font-weight:800; } .button { display:inline-flex; justify-content:center; align-items:center; min-height:44px; background:var(--amber); color:var(--ink); text-decoration:none; border-radius:10px; font-weight:800; padding:10px 14px; } .offer h2 { color:#9a721e; } .offer-actions { display:flex; gap:8px; margin:12px 0 18px; } .code,.copy { border:1px solid var(--line); border-radius:9px; padding:10px; background:#fff; cursor:pointer; font-weight:800; } .code { flex:1; text-align:left; } .copy { color:#9a721e; } .empty { grid-column:1/-1; color:var(--muted); } @media(max-width:800px){ .grid{grid-template-columns:1fr;} .hero{margin-top:45px;} }