/* ZeroNairaStore: follows the Figma. Off-white, DM Mono, condensed headline, black pills, grey panel, orange FREE! stars. */
:root { --bg: #fbfbfb; --paper: #fbfbfb; --fg: #000; --muted: #7a7a7a; --line: rgba(0,0,0,.14); --line-strong: rgba(0,0,0,.5); --a1: #000; --cur: #000; --mono: "DM Mono", ui-monospace, monospace; --body: "DM Mono", ui-monospace, monospace; --display: "Anton", Impact, "Arial Narrow", sans-serif; }
body { font: 400 15px/1.65 var(--mono); letter-spacing: 0; background: var(--bg); }
body::before { background: var(--bg); }
.strip { background: #000; color: #fff; font-size: 12px; }
.strip .wrap { display: flex; justify-content: space-between; gap: 12px; padding-block: 7px; flex-wrap: wrap; }
.strip a { text-decoration: none; opacity: .85; } .strip a:hover { opacity: 1; text-decoration: underline; }
.zh { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 18px clamp(16px, 4vw, 48px); font-size: 12px; text-transform: uppercase; flex-wrap: wrap; }
.zh a { text-decoration: none; } .zh nav { display: flex; align-items: center; gap: 4px 18px; }
.zp { display: inline-flex; align-items: center; background: #000; color: #fff; border: 0; border-radius: 999px; padding: 14px 28px; font: 400 14px var(--mono); text-transform: uppercase; text-decoration: none; cursor: pointer; transition: transform .25s var(--ease); }
.zp.sm { padding: 5px 14px; font-size: 11.5px; } .zp:hover { transform: translateY(-2px); background: #222; }
.zp.out { background: transparent; color: #000; border: 1px solid #000; } .zp.out:hover { background: #000; color: #fff; }
.zhero { overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 12px; min-height: min(86vh, 760px); }
.panel { position: relative; background: #eee; border-radius: 8px; overflow: hidden; min-height: 420px; }
.panel img { position: absolute; mix-blend-mode: multiply; }
.panel .chair { left: 26%; bottom: -3%; height: 60%; animation: sway 8s ease-in-out infinite; transform-origin: 50% 100%; }
.panel .iron { right: -9%; bottom: -2%; height: 40%; } .panel .mouse { left: -4%; bottom: 0; height: 38%; }
.panel .star { mix-blend-mode: normal; animation: spin 20s linear infinite; } .panel .s1 { right: 0; top: 48%; width: 24%; } .panel .s2 { left: 2%; bottom: 4%; width: 20%; animation-direction: reverse; }
@keyframes spin { to { transform: rotate(360deg); } } @keyframes sway { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-2.5deg); } }
.copy { min-width: 0; display: grid; place-content: center; justify-items: center; text-align: center; padding: 32px clamp(16px, 4vw, 56px); }
.copy h1 { font: 400 clamp(2.8rem, 5.4vw, 6.4rem)/.94 var(--display); text-transform: uppercase; letter-spacing: 0; max-width: 100%; overflow-wrap: anywhere; }
.copy h1 .w { display: inline-block; animation: rise .85s var(--ease) both; animation-delay: calc(var(--i)*.08s + .05s); }
.copy p { max-width: 44ch; margin: 22px 0 26px; font-size: 16px; animation: rise .85s var(--ease) .45s both; }
.copy .btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; animation: rise .85s var(--ease) .55s both; }
.dev { font-size: 11.5px; text-transform: uppercase; border: 1px solid #000; border-radius: 999px; padding: 3px 12px; margin-bottom: 22px; display: inline-block; }
.zs { padding: clamp(56px, 8vw, 100px) clamp(16px, 4vw, 48px); max-width: 1100px; margin-inline: auto; }
.zs h2 { font: 400 15px var(--mono); text-transform: uppercase; letter-spacing: 0; margin-bottom: 24px; }
.item { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 48px; }
.item .big { background: #d9d9d9; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; } .item .big img { height: 88%; width: auto; mix-blend-mode: multiply; }
.thumbs { margin-top: 28px; } .thumbs h3 { font: 400 12px var(--mono); text-transform: uppercase; letter-spacing: 0; margin-bottom: 10px; } .thumbs h3 span { color: #aaa; }
.thumbs div { display: flex; gap: 12px; } .thumbs i { width: 68px; height: 68px; background: #d9d9d9; display: grid; place-items: center; overflow: hidden; } .thumbs img { height: 90%; mix-blend-mode: multiply; }
.item h3.t { font: 400 20px var(--mono); text-transform: uppercase; letter-spacing: 0; line-height: 1.3; } .item .hash { font-size: 20px; color: #aaa; text-transform: uppercase; }
.item .by { font-size: 12px; text-transform: uppercase; margin: 14px 0 26px; } .item .price { font-size: 26px; text-transform: uppercase; margin-bottom: 16px; }
.item .claim { width: 100%; justify-content: center; border-radius: 3px; padding: 11px; } .item .dc { text-align: center; color: #b5b5b5; font-size: 11.5px; text-transform: uppercase; margin-top: 12px; }
.samp { font-size: 12px; color: var(--muted); margin-top: 22px; }
.steps { list-style: none; counter-reset: s; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 16px; }
.steps li { counter-increment: s; border-top: 1px solid #000; padding-top: 12px; } .steps li::before { content: counter(s, decimal-leading-zero); display: block; font: 400 2.6rem/1 var(--display); margin-bottom: 14px; }
.steps b { display: block; font-weight: 500; text-transform: uppercase; font-size: 13px; margin-bottom: 4px; } .steps p { margin: 0; color: #555; font-size: 13.5px; }
.note { background: #000; color: #fff; border-radius: 8px; padding: clamp(28px, 5vw, 64px); } .note h2 { font: 400 clamp(2rem, 5vw, 4.4rem)/1 var(--display); text-transform: uppercase; color: #fff; margin-bottom: 16px; } .note p { margin: 0; color: #cfcfcf; max-width: 60ch; } .note .fill { color: #ffb347; }
.band { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; background: #eee; border-radius: 8px; padding: clamp(24px, 4vw, 48px); } .band h2 { font: 400 clamp(2rem, 5vw, 3.6rem)/1 var(--display); text-transform: uppercase; margin: 0; }
.zf { padding: 28px clamp(16px, 4vw, 48px) 40px; font-size: 12px; text-transform: uppercase; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; color: var(--muted); } .zf a { text-decoration: none; margin-right: 16px; color: #000; }
.fill { color: #b35a00; border-color: #b35a00; }
.cursor-ring.has-label { background: #000; }
@media (max-width: 900px) { .zhero, .item { grid-template-columns: minmax(0,1fr); } .panel { min-height: 380px; } .steps { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px) { .steps { grid-template-columns: minmax(0,1fr); } }
@media (prefers-reduced-motion: reduce) { .copy h1 .w, .copy p, .copy .btns, .panel .star, .panel .chair { animation: none; } }
.panel .star { height: auto; }