/* ==========================================================================
   Home page — bespoke layout (hero, floating cards, dashboard tweaks)
   Uses shared tokens from main.css. No hard-coded palette values.
   ========================================================================== */

/* ---- Hero ---- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--nav-h) + 40px);
  padding-bottom: 60px;
  overflow: hidden;
}
#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.55;
  -webkit-mask-image: radial-gradient(120% 100% at 70% 30%, #000 40%, transparent 85%);
  mask-image: radial-gradient(120% 100% at 70% 30%, #000 40%, transparent 85%);
}
.hero-inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 40px;
  width: 100%;
}
.hero-copy { max-width: 640px; }
.hero-copy .badge-live { margin-bottom: var(--sp-6); }
.hero-title {
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin-bottom: var(--sp-6);
}
.hero-sub { max-width: 560px; margin-bottom: var(--sp-8); color: var(--text-1); }
.hero-cta { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.hero-book { margin-left: 6px; }
.hero-mini {
  display: flex;
  gap: var(--sp-8);
  margin-top: var(--sp-10);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.hero-mini-item { display: flex; flex-direction: column; gap: 2px; }
.hero-mini-item span { font-size: 1.6rem; font-weight: 700; color: var(--text-0); font-family: var(--font-display); letter-spacing: -0.02em; }
.hero-mini-item small { color: var(--text-3); font-size: 0.78rem; }

/* Floating live cards */
.hero-visual { position: relative; height: 480px; }
.hero-card { position: absolute; padding: var(--sp-5); }
.hero-card-main { top: 40px; right: 0; width: 320px; z-index: 3; }
.hero-price { font-size: 1.5rem; font-weight: 700; color: var(--text-0); margin-top: 2px; }
.hero-card-2 { top: 0; left: 0; width: 240px; z-index: 4; }
.hero-card-3 { bottom: 20px; right: 60px; width: 220px; z-index: 2; text-align: center; }

/* ---- Why: feature cell with mini chart ---- */
.why-feature { display: flex; flex-direction: column; gap: var(--sp-4); }
.why-feature .mini-chart { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); background: var(--bg-inset); }

/* ---- Service cards ---- */
.service-card { display: flex; flex-direction: column; gap: var(--sp-4); }
.service-card h3 { font-size: var(--fs-h4); }
.service-card p { color: var(--text-2); font-size: var(--fs-sm); flex: 1; }
.service-card .link-arrow { margin-top: auto; }

/* ---- Dashboard section ---- */
.index-strip {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-6);
}
.index-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: var(--r-pill);
  background: var(--glass);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(10px);
}
.index-pill strong { color: var(--text-0); font-size: 0.98rem; }
.index-pill .q-chg { font-size: 0.82rem; }
.dash-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
  background:
    radial-gradient(80% 140% at 0% 0%, rgba(16,185,129,0.14), transparent 60%),
    linear-gradient(180deg, var(--glass-2), var(--glass));
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; gap: 48px; }
  .hero-visual { height: 380px; max-width: 460px; }
  .hero-card-main { right: auto; left: 40px; }
  .hero-card-3 { right: 0; }
  .dash .widget[style*="span 8"] { grid-column: span 6 !important; }
  .dash .widget[style*="span 4"] { grid-column: span 3 !important; }
}
@media (max-width: 900px) {
  .dash .widget[style*="span 8"],
  .dash .widget[style*="span 4"],
  .dash .widget[style*="span 12"] { grid-column: 1 / -1 !important; }
}
@media (max-width: 680px) {
  .hero { min-height: auto; }
  .hero-visual { display: none; }
  .hero-title { font-size: clamp(2.6rem, 10vw, 3.6rem); }
  .hero-mini { gap: var(--sp-6); }
  .hero-mini-item span { font-size: 1.3rem; }
  .index-pill { padding: 10px 14px; }
}