:root{
  --bg:#0b0b12;
  --panel:#131324;
  --panel-2:#191a2e;
  --ink:#ead085;        /* soft gold */
  --ink-2:#bfa23c;      /* darker gold */
  --muted:#a8996c;
  --badge:#ffd54a;
  --accent:#ffcc33;
  --ring: rgba(255,204,51,.35);
  --shadow: 0 8px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{background:var(--bg);color:var(--ink);margin:0}
a{color:var(--ink)} a:hover{color:#fff}
.zo-body{min-height:100dvh}

/* hero */
.hero{
  padding:64px 20px 20px; text-align:center;
  background: radial-gradient(1200px 600px at 50% -200px, #1c1b33 10%, transparent 60%);
}
.hero-title{
  font-weight:800; font-size:48px; line-height:1.05;
  color:#ffd95e; text-shadow:0 6px 30px rgba(255,200,60,.15);
}
.hero-sub{max-width:820px;margin:14px auto 0;color:#e3d7a0;opacity:.95;font-size:18px}

/* CTA */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  background:linear-gradient(180deg,#ffd95e,#f3b933);
  color:#2a1f09; border:0; padding:14px 22px; font-weight:700; border-radius:12px;
  box-shadow:0 6px 20px rgba(255,204,51,.25); cursor:pointer;
}
.btn:focus{outline:2px solid var(--ring); outline-offset:2px}
.btn-secondary{
  background:#1b1c31; color:var(--ink); border:1px solid #2a2b47;
}

/* cards grid */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin:20px auto; max-width:1060px; padding:0 14px}
.card{background:var(--panel); border:1px solid #272744; border-radius:16px; padding:16px; text-align:center; box-shadow:var(--shadow)}
.card-title{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.card-value{font-size:28px; font-weight:800; color:#ffd95e; margin-top:6px}

/* spread catalog */
.catalog{max-width:1060px;margin:24px auto;padding:0 14px;display:grid;gap:18px}
.spread-card{
  display:flex; gap:16px; align-items:flex-start; padding:18px;
  background:linear-gradient(180deg, var(--panel), var(--panel-2));
  border:1px solid #2a2a48; border-radius:18px; box-shadow:var(--shadow);
}
.spread-icon{width:64px;height:64px;border-radius:50%;background:#ffe082;color:#2a1f09;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 30px rgba(255,204,51,.2)}
.spread-title{font-size:20px; font-weight:800;color:#ffe082;margin:2px 0}
.spread-sub{color:#e8d8a9;opacity:.85}
.meta{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px}
.badge{background:#253; background:#23233e; border:1px solid #303056;color:#c9bb82;border-radius:999px;padding:6px 10px;font-size:12px}
.badge-pop{background:#3d2b10;border-color:#6b4a13;color:#ffd95e}

/* modal */
.modal-bg{position:fixed;inset:0;background:rgba(3,3,8,.75);display:none;align-items:center;justify-content:center;z-index:1000;padding:20px}
.modal{width:min(560px,94vw);background:#141426;border:1px solid #2b2b46;border-radius:18px;box-shadow:var(--shadow);padding:18px 18px 22px}
.modal-header{display:flex; align-items:center; justify-content:space-between}
.modal-title{font-weight:800; color:#ffe082; font-size:22px}
.input{width:100%; background:#0f0f1e; border:1px solid #2b2b46; border-radius:10px; padding:12px 12px; color:#e9dca6}
.tabs{display:flex; gap:8px; margin:14px 0}
.tab{flex:1; text-align:center; padding:10px 12px; border-radius:10px; background:#181832; border:1px solid #2a2a48; cursor:pointer; color:#e0d6a1}
.tab.active{background:linear-gradient(180deg,#ffd95e,#f3b933); color:#2a1f09; font-weight:800}
@media (max-width:700px){ .hero-title{font-size:36px} }