/* ── BioRadar Landing Styles ── */

/* Hero */
.hero {
  min-height: auto; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 72px 24px 32px; max-width: 900px; margin: 0 auto;
}
.hero-eyebrow {
  font-size: 13px; font-weight: 600; color: var(--text-3);
  letter-spacing: 0.3px; text-transform: none; margin-bottom: 20px;
}
.hero-tagline {
  font-size: clamp(26px, 3.8vw, 40px); font-weight: 700;
  letter-spacing: -1.2px; text-align: center; margin-bottom: 20px;
  line-height: 1.15; max-width: 720px;
}
.hero-tagline em { font-style: normal; color: var(--text-2); }
.hero-sub {
  font-size: clamp(14px, 1.6vw, 17px); font-weight: 400; color: var(--text-2);
  text-align: center; margin-bottom: 30px; line-height: 1.65; max-width: 720px;
}

/* Visual */
.visual-section {
  display: flex; flex-direction: column; align-items: center;
  padding: 0 24px 40px; background: var(--bg);
}
.visual-hint {
  text-align: center; margin-bottom: 16px;
  font-size: 16px; font-weight: 700; color: var(--text);
  display: inline-flex; align-items: center; gap: 8px; letter-spacing: 0.2px;
  background: linear-gradient(135deg, #c47a3a 0%, #8b3a3a 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; cursor: pointer;
}
.visual-hint svg { stroke: #c47a3a; }
.visual-wrap {
  position: relative; width: 560px; height: 560px; margin-bottom: 24px;
  cursor: pointer; border-radius: 20px; overflow: hidden; background: var(--bg);
  transition: transform .4s cubic-bezier(.25,.46,.45,.94);
}
.visual-wrap:hover { transform: scale(1.03); }
.visual-wrap canvas { width: 100%; height: 100%; }

/* Stats */
.stats { display: flex; gap: 64px; justify-content: center; margin-bottom: 100px; }
.stat { text-align: center; }
.stat-num { font-family: var(--font); font-size: 48px; font-weight: 700; letter-spacing: -2px; color: var(--text); line-height: 1; }
.stat-label { font-size: 13px; font-weight: 500; color: var(--text-3); margin-top: 8px; letter-spacing: 0.3px; }

/* Footer */
.footer {
  background: var(--bg-3); padding: 20px 24px;
  display: flex; justify-content: center; gap: 28px; font-size: 12px; color: var(--text-3);
}
.footer a { color: var(--text-3); text-decoration: none; transition: color .2s; }
.footer a:hover { color: var(--text); }

@media (max-width: 768px) {
  .stats { gap: 36px; } .stat-num { font-size: 36px; }
  .visual-wrap { width: 300px; height: 300px; }
  .footer { flex-wrap: wrap; gap: 16px; justify-content: center; }
  .hero { padding: 56px 16px 24px; }
}