/* ============================================================ zBuyer secondary pages — shared themeable stylesheet Theme via ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap'); *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased;background:var(--bg);color:var(--text)} a{text-decoration:none;color:inherit} img{display:block} .container{max-width:1140px;margin:0 auto;padding:0 40px} /* ---------- THEME TOKENS ---------- */ .t-blue{ --bg:#fff;--text:#14233D;--muted:#5C6B82;--line:#E4EAF3; --surface:#fff;--surface-bd:#E4EAF3;--shadow:0 18px 40px -30px rgba(20,35,61,.35); --accent:#1D4FD7;--accent-soft:#E7EEFC;--accent-ink:#1D4FD7; --cta-bg:#FF6B4A;--cta-text:#fff; --navbg:#0E1B33;--navtext:#D7E0EE;--navline:rgba(255,255,255,.10);--navcta-bg:#FF6B4A;--navcta-text:#fff; --band-bg:linear-gradient(135deg,#16315c,#0a1426);--band-text:#fff;--band-sub:#AEBCD2;--band-cta-bg:#FF6B4A;--band-cta-text:#fff; --footbg:#0A1426;--foottext:#9DAAC1;--foothead:#fff; } .t-clay{ --bg:#fff;--text:#1A1A1F;--muted:#6B6B73;--line:#ECECEF; --surface:#fff;--surface-bd:#ECECEF;--shadow:0 18px 40px -30px rgba(0,0,0,.25); --accent:#C2613E;--accent-soft:#F6E5DA;--accent-ink:#9E4A2C; --cta-bg:#C2613E;--cta-text:#fff; --navbg:rgba(255,255,255,.78);--navtext:#1A1A1F;--navline:rgba(0,0,0,.06);--navcta-bg:#1A1A1F;--navcta-text:#fff; --band-bg:#1A1A1F;--band-text:#fff;--band-sub:#B8B8C0;--band-cta-bg:#C2613E;--band-cta-text:#fff; --footbg:#fff;--foottext:#6B6B73;--foothead:#1A1A1F;--footline:#ECECEF; } .t-cyan{ --bg:#070C12;--text:#E8F1F5;--muted:#94A7B3;--line:rgba(255,255,255,.12); --surface:rgba(255,255,255,.05);--surface-bd:rgba(255,255,255,.12);--shadow:0 24px 50px -30px rgba(0,0,0,.6); --accent:#22D3EE;--accent-soft:rgba(34,211,238,.16);--accent-ink:#7DD3FC; --cta-bg:#22D3EE;--cta-text:#042530; --navbg:rgba(7,12,18,.7);--navtext:#94A7B3;--navline:rgba(255,255,255,.10);--navcta-bg:#22D3EE;--navcta-text:#042530; --band-bg:linear-gradient(135deg,rgba(34,211,238,.18),rgba(56,189,248,.07));--band-text:#fff;--band-sub:#94A7B3;--band-cta-bg:#22D3EE;--band-cta-text:#042530; --footbg:transparent;--foottext:#94A7B3;--foothead:#fff;--footline:rgba(255,255,255,.12); } .t-cyan body,.t-cyan{background: radial-gradient(600px 600px at 12% -8%, rgba(14,116,144,.5), transparent 60%), radial-gradient(620px 620px at 92% 30%, rgba(29,78,216,.42), transparent 60%), radial-gradient(560px 560px at 40% 108%, rgba(3,105,161,.4), transparent 60%), #070C12;background-attachment:fixed} /* ---------- NAV ---------- */ .topbar{position:sticky;top:0;z-index:40;background:var(--navbg);border-bottom:1px solid var(--navline);backdrop-filter:blur(16px)} .bar{max-width:1140px;margin:0 auto;padding:15px 40px;display:flex;align-items:center;justify-content:space-between;position:relative} .brand{height:28px;width:auto} .navlinks{display:flex;align-items:center;gap:28px;font-size:15px;font-weight:500;color:var(--navtext);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)} .navlinks a.active{color:var(--accent-ink);font-weight:700} .nav-actions{display:flex;align-items:center;gap:16px;font-size:14px} .nav-actions .sellers{color:var(--navtext);font-weight:600} .nav-actions .signin{color:var(--navtext);font-weight:600} .t-clay .nav-actions .signin,.t-clay .navlinks{color:#1A1A1F} .navcta{background:var(--navcta-bg);color:var(--navcta-text);padding:10px 18px;border-radius:10px;font-weight:800;font-size:14px} .t-clay .navcta{border-radius:999px} .hamb{display:none;width:42px;height:42px;border-radius:11px;border:1px solid var(--navline);align-items:center;justify-content:center;font-size:20px;color:var(--navtext)} /* ---------- PAGE HERO ---------- */ .phero{padding:74px 0 30px;text-align:center} .eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--accent-ink);font-weight:700;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;margin-bottom:16px} .eyebrow .d{width:7px;height:7px;border-radius:50%;background:var(--accent)} .phero h1{font-size:54px;line-height:1.04;font-weight:800;letter-spacing:-.035em;max-width:780px;margin:0 auto} .phero p{color:var(--muted);font-size:19px;line-height:1.55;max-width:620px;margin:18px auto 0} .hero-cta{display:flex;gap:14px;justify-content:center;margin-top:30px;flex-wrap:wrap} /* ---------- BUTTONS ---------- */ .btn{display:inline-block;background:var(--cta-bg);color:var(--cta-text);padding:15px 28px;border-radius:12px;font-weight:800;font-size:16px} .t-clay .btn{border-radius:999px} .btn-ghost{display:inline-block;padding:15px 26px;border-radius:12px;font-weight:700;font-size:16px;border:1.5px solid var(--surface-bd);color:var(--text)} .t-clay .btn-ghost{border-radius:999px} /* ---------- SECTIONS ---------- */ .section{padding:70px 0} .section-head{text-align:center;max-width:640px;margin:0 auto 14px} .kicker{color:var(--accent-ink);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;text-align:center} h2{text-align:center;font-size:38px;font-weight:800;letter-spacing:-.025em;margin-top:10px} .lede{text-align:center;color:var(--muted);font-size:17px;max-width:620px;margin:14px auto 0;line-height:1.55} /* cards grid */ .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:46px} .card{background:var(--surface);border:1px solid var(--surface-bd);border-radius:18px;padding:28px;box-shadow:var(--shadow);backdrop-filter:blur(16px)} .card .ic{width:46px;height:46px;border-radius:13px;background:var(--accent-soft);display:grid;place-items:center;margin-bottom:16px} .card h3{font-size:18.5px;font-weight:700} .card p{color:var(--muted);font-size:14.5px;line-height:1.55;margin-top:8px} /* stats */ .stats{display:flex;justify-content:center;gap:60px;flex-wrap:wrap;padding:14px 0 0} .stat{text-align:center} .stat .n{font-size:30px;font-weight:800;color:var(--accent-ink);letter-spacing:-.02em} .stat .l{color:var(--muted);font-size:13px;margin-top:2px} /* reviews */ .review{background:var(--surface);border:1px solid var(--surface-bd);border-radius:18px;padding:26px;box-shadow:var(--shadow);backdrop-filter:blur(16px)} .stars{color:#E0A21A;font-size:15px;letter-spacing:2px} .review p{font-size:15.5px;line-height:1.55;margin:12px 0 16px} .who{display:flex;align-items:center;gap:12px} .who .av{width:42px;height:42px;border-radius:50%;background:var(--accent);color:var(--cta-text);display:grid;place-items:center;font-weight:800} .who b{font-size:14.5px} .who span{display:block;color:var(--muted);font-size:13px} /* faq */ .faq{max-width:860px;margin:40px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:18px 48px} .faq .q{font-size:16.5px;font-weight:700;display:flex;gap:10px;align-items:flex-start} .faq .q::before{content:"›";color:var(--accent-ink);font-weight:800} .faq .a{color:var(--muted);font-size:14.5px;line-height:1.55;margin-top:7px;padding-left:18px} /* contact cards */ .contact{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:46px} .ccard{background:var(--surface);border:1px solid var(--surface-bd);border-radius:18px;padding:26px;text-align:center;box-shadow:var(--shadow);backdrop-filter:blur(16px)} .ccard .ic{width:46px;height:46px;border-radius:13px;background:var(--accent-soft);display:grid;place-items:center;margin:0 auto 14px} .ccard b{font-size:16px;display:block} .ccard span{color:var(--muted);font-size:14px;display:block;margin-top:5px;line-height:1.5} /* cta band */ .ctaband{max-width:1140px;margin:30px auto 80px;padding:0 40px} .ctaband .inner{background:var(--band-bg);color:var(--band-text);border:1px solid var(--surface-bd);border-radius:26px;padding:54px;text-align:center;backdrop-filter:blur(16px)} .ctaband h2{color:var(--band-text)} .ctaband p{color:var(--band-sub);font-size:17px;margin:12px auto 0;max-width:520px} .ctaband .row{display:flex;gap:14px;justify-content:center;margin-top:26px;flex-wrap:wrap} .ctaband .btn{background:var(--band-cta-bg);color:var(--band-cta-text)} .ctaband .btn-ghost{border-color:rgba(255,255,255,.4);color:#fff} /* footer */ footer{background:var(--footbg);color:var(--foottext);border-top:1px solid var(--footline,transparent);padding:58px 0 34px;margin-top:10px} .fgrid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:40px} .flogo{height:28px;width:auto} .fblurb{margin-top:14px;font-size:14px;line-height:1.6;max-width:300px;color:var(--foottext)} footer h5{color:var(--foothead);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px} footer ul{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:14px} .fbottom{border-top:1px solid var(--footline,rgba(255,255,255,.1));margin-top:42px;padding-top:22px;display:flex;justify-content:space-between;font-size:13px;flex-wrap:wrap;gap:10px} /* ---------- MOBILE ---------- */ @media (max-width:768px){ .container,.bar,.ctaband{padding-left:22px;padding-right:22px} .navlinks,.nav-actions .sellers,.nav-actions .signin{display:none} .hamb{display:flex} .phero{padding:48px 0 20px} .phero h1{font-size:36px} .phero p{font-size:16.5px} .hero-cta{flex-direction:column} .section{padding:48px 0} h2{font-size:29px} .grid,.contact,.faq{grid-template-columns:1fr;gap:16px;margin-top:30px} .stats{gap:24px 40px} .ctaband .inner{padding:38px 24px} .ctaband .row{flex-direction:column} .fgrid{grid-template-columns:1fr 1fr;gap:28px} .fbottom{flex-direction:column;gap:8px} }