/* ===== Base ===== */
:root{ --bg:#0b0c10; --text:#e6e6e6; --muted:#9aa0a6; --accent:#6ee7ff; }
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}

/* Header */
.site-header{position:sticky;top:0;z-index:70;backdrop-filter:saturate(140%) blur(6px);
  background:linear-gradient(180deg, rgba(11,12,16,.85), rgba(11,12,16,.65) 60%, transparent);
  border-bottom:1px solid rgba(255,255,255,.06)}
.site-header .wrap{max-width:1200px;margin:0 auto;padding:12px 16px}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{font-weight:800;letter-spacing:.12em;color:#fff;text-decoration:none}
.logo{width:28px;height:28px;border-radius:6px;opacity:0;visibility:hidden;transition:opacity .25s ease}
body.intro-done .logo{opacity:1;visibility:visible}
.nav-links button{appearance:none;border:0;background:transparent;color:#9aa0a6;font-weight:700;cursor:pointer;margin:0 6px}
.nav-links button.active,.nav-links button:hover{color:#fff}
.btn.icon{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid rgba(255,255,255,.12);
  border-radius:999px;text-decoration:none;color:#fff;font-weight:700}

/* Hero */
.hero{position:fixed;inset:0;display:grid;place-items:center;z-index:80;pointer-events:none}
#hero{width:min(42vw,520px);height:auto;filter:drop-shadow(0 30px 60px rgba(0,0,0,.55));opacity:0;will-change:opacity,transform}

/* Sections SPA */
.section{display:none}
.section.active{display:block}

/* Mosaic */
.mosaic{padding-top:0;margin:0}
.grid-wrap{ position:relative; max-width:1200px; margin:0 auto; padding:0 16px 48px; }
.grid{display:grid;grid-template-columns:repeat(36, minmax(0,1fr));grid-auto-rows:1fr;gap:1px;
  position:relative; z-index:1; padding:0; margin:0; max-width:1200px}
.tile{position:relative;width:100%;padding-bottom:100%;background-size:3600% 3600%;
  background-image:url('assets/mosaic.jpg');opacity:0;transition:opacity 220ms ease}
.tile.show{opacity:1}

/* Guides overlay */
.grid-guides{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  display:grid; grid-template-columns:repeat(36, minmax(0,1fr)); grid-auto-rows:1fr; gap:1px;
}
.grid-guides .gcell{ border:1px solid rgba(255,255,255,.07); }
.mcap-note{ max-width:1200px; margin:8px auto 32px; padding:0 16px; opacity:.9; color:#e6e6e6; font-weight:700 }

/* Overlay phrases */
.overlay{position:fixed; inset:0; pointer-events:none; z-index:75}
.phrase{position:absolute; white-space:nowrap; background:rgba(0,0,0,.45); color:#fff; padding:6px 10px; border-radius:8px; font-weight:700;}

/* Chart */
.chart{max-width:1200px;margin:40px auto;padding:0 16px}
.chart h2{font-size:1.6rem;margin:0 0 16px 0}
.chart-frame{position:relative;width:100%;aspect-ratio:16/9;border:1px solid rgba(255,255,255,.1);border-radius:12px;overflow:hidden;background:#0f1117}
.chart-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.chart-note{opacity:.85;margin:10px 0 0}

/* Roadmap */
.roadmap{max-width:800px;margin:40px auto;padding:0 16px}
.roadmap h2{font-size:1.6rem;margin:0 0 16px 0}
.roadmap .lines p{margin:8px 0;font-size:1rem;line-height:1.5}

/* FAQ */
.faq{max-width:800px;margin:40px auto;padding:0 16px}
.faq h2{font-size:1.6rem;margin:0 0 16px 0}
.faq .qa p{margin:10px 0;font-size:1rem;line-height:1.55}
.faq strong{color:#ffffff !important}

/* Modal */
.modal{position:fixed; inset:0; z-index:90; display:none}
.modal:not(.hidden){display:block}
.modal-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.55)}
.modal-card{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(92vw,380px); background:rgba(18,20,26,.96); border:1px solid rgba(255,255,255,.08);
  border-radius:14px; padding:18px; color:#e6e6e6}
.modal-card h3{margin:0 0 14px 0}
.modal-actions{display:flex; gap:10px; justify-content:flex-end}
.btn-yes,.btn-no{appearance:none;border:0;padding:8px 14px;border-radius:10px;font-weight:700;cursor:pointer}
.btn-yes{background:#1f9d55;color:#fff}
.btn-no{background:#c0392b;color:#fff}

/* Utils */
.hidden-during-hero{opacity:0;visibility:hidden}
#mosaic.mosaic-hidden{opacity:0;transition:opacity 1s ease}
#mosaic:not(.mosaic-hidden){opacity:1;transition:opacity 1s ease}