/* ——— Theme ——— */
:root{
  --bg:#0e1117;
  --surface:#131a23;
  --surface-2:#0f1520;
  --text:#e7ecf5;
  --muted:#b6c2e1;
  --line:rgba(255,255,255,.08);
  --brand:#6aa6ff;
  --brand-2:#0b49b2;
  --shadow:0 10px 36px rgba(0,0,0,.35);
  --max:1020px;
  --pad:22px;
}

*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Arial,sans-serif}
img{max-width:100%;display:block}

/* ——— Layout helpers ——— */
.container{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.narrow{max-width:760px;margin-inline:auto}
.section{padding:56px 0;border-top:1px solid var(--line)}
.section.alt{background:var(--surface-2)}

/* ——— Header ——— */
.site-header{position:sticky;top:0;z-index:20;background:rgba(14,17,23,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.2px}
.logo{height:26px;width:auto}
.nav{display:flex;align-items:center;gap:16px}
.nav a{color:var(--muted);text-decoration:none}
.nav a:hover{color:var(--text)}
.burger{display:none;background:none;border:0;color:var(--text);font-size:22px}

/* ——— Hero ——— */
.hero{padding:72px 0;background:radial-gradient(1200px 600px at 50% -20%, rgba(106,166,255,.08), transparent 40%)}
.hero-inner{max-width:820px;margin-inline:auto;text-align:center}
.hero h1{font-size:48px;line-height:1.08;margin:0 0 14px}
.lead{font-size:18px;color:var(--muted);margin:0 auto 14px}
.cta{display:flex;gap:12px;justify-content:center;margin:18px 0}
.meta{color:var(--muted);font-size:14px}

/* ——— Cards / grids ——— */
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:var(--shadow)}
.card h3{margin:0 0 8px}

/* ——— Two-column info ——— */
.two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:start}
.note{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;box-shadow:var(--shadow)}
.steps{padding-left:18px}

/* ——— Buttons ——— */
.btn{display:inline-block;background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#fff;
  text-decoration:none;padding:12px 18px;border-radius:12px;font-weight:700;box-shadow:0 6px 20px rgba(106,166,255,.25)}
.btn:hover{filter:brightness(1.06)}
.btn-small{padding:8px 12px;border-radius:10px}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--text)}

/* ——— Footer ——— */
.site-footer{border-top:1px solid var(--line);padding:24px 0;background:var(--surface-2)}
.foot{display:flex;align-items:center;justify-content:space-between}
.links{display:flex;gap:16px}
.links a{color:var(--muted);text-decoration:none}
.links a:hover{color:var(--text)}
.muted{color:var(--muted)}

/* ——— Responsive ——— */
@media (max-width:920px){
  .grid-3{grid-template-columns:1fr 1fr}
  .two-col{grid-template-columns:1fr}
}
@media (max-width:640px){
  .nav{display:none;position:absolute;right:var(--pad);top:68px;background:var(--surface);
       border:1px solid var(--line);padding:10px;border-radius:10px;flex-direction:column}
  .nav.open{display:flex}
  .burger{display:block}
  .grid-3{grid-template-columns:1fr}
}

/* Support Discord button style */
.btn.support {
  background: linear-gradient(90deg, #4b8bff, #3674ff);
  box-shadow: 0 6px 20px rgba(80, 140, 255, 0.25);
}
.btn.support:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.preview-section {
  text-align: center;
  margin-top: 80px;
  margin-bottom: 60px;
}

.preview-section h2 {
  color: #fff;
  font-size: 1.8rem;
  margin-bottom: 12px;
}

.preview-section p {
  color: #b0b3b8;
  font-size: 1rem;
  margin-bottom: 20px;
}

.preview-section {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  margin-top: 80px;
  margin-bottom: 80px;
  width: 100%;
}

.preview-container {
  max-width: 900px;
  width: 90%;
}

.preview-section h2 {
  color: #ffffff;
  font-size: 1.8rem;
  margin-bottom: 10px;
  font-weight: 700;
}

.preview-section p {
  color: #b0b3b8;
  font-size: 1rem;
  margin-bottom: 25px;
}

.heatmap-preview {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  border-radius: 10px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.heatmap-preview:hover {
  transform: scale(1.02);
  box-shadow: 0 0 40px rgba(102, 170, 255, 0.5);
}

/* Heatmap demo */
.hm-wrap{max-width:960px;margin:18px auto 8px;padding:16px;border:1px solid var(--line,rgba(255,255,255,.08));
  border-radius:12px;background:var(--surface,#131a23);box-shadow:0 10px 36px rgba(0,0,0,.35)}
#lynqHeatmap{display:block;width:100%;height:auto;border-radius:8px}
.hm-legend{display:flex;gap:8px;align-items:center;justify-content:center;margin-top:12px;color:var(--muted,#b6c2e1);font-size:14px}
.hm-legend i{display:inline-block;width:38px;height:10px;border-radius:6px;background:linear-gradient(90deg,#0e2336,#114b7a)}
.hm-legend i:nth-child(2){background:linear-gradient(90deg,#114b7a,#1667a9)}
.hm-legend i:nth-child(3){background:linear-gradient(90deg,#1667a9,#1b7fd1)}
.hm-legend i:nth-child(4){background:linear-gradient(90deg,#1b7fd1,#63b3ff)}
.hm-legend i:nth-child(5){background:linear-gradient(90deg,#63b3ff,#95ceff)}
.hm-controls{display:flex;justify-content:center;margin-top:10px}
.btn.small{padding:8px 12px;border-radius:10px}