/* Host layout for the decorative React island. Copy stays in server HTML. */
body[data-theme="graphite"] #home .fv-tunnel-hero {
  display: grid;
  place-items: center;
  min-height: clamp(620px, 76svh, 820px);
  border: 1px solid rgba(255, 53, 70, .24);
  background: #09080b;
  box-shadow: 0 0 60px rgba(181, 10, 35, .09);
}
.fv-tunnel-mount { position: absolute; inset: 0; pointer-events: none; }
body[data-theme="graphite"] #home .fv-tunnel-hero .home-copy {
  position: relative;
  z-index: 2;
  width: min(100%, 590px);
  max-width: 590px;
  min-height: 0;
  margin: 0;
  padding: 70px 24px;
  align-items: center;
  text-align: center;
  isolation: isolate;
}
body[data-theme="graphite"] #home .fv-tunnel-hero .home-copy::before {
  content: "";
  position: absolute;
  inset: -30px -35px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse, rgba(9, 8, 11, .96) 25%, rgba(9, 8, 11, .73) 48%, transparent 72%);
}
body[data-theme="graphite"] #home .fv-tunnel-hero .home-copy h1 {
  font-size: clamp(42px, 4.3vw, 66px) !important;
  line-height: 1.08 !important;
  letter-spacing: -.035em;
  text-align: center;
  margin-bottom: 24px;
  text-shadow: 0 2px 24px #09080b;
}
body[data-theme="graphite"] #home .fv-tunnel-hero .home-copy h1 em {
  color: #ff4358 !important;
  text-shadow: 0 0 30px rgba(255, 34, 63, .25);
}
body[data-theme="graphite"] #home .fv-tunnel-hero .home-description {
  max-width: 390px;
  margin: 0 0 28px;
  font-size: 15px !important;
  line-height: 1.7 !important;
  text-shadow: 0 2px 10px #09080b;
}
body[data-theme="graphite"] #home .fv-tunnel-hero .home-assortment-actions { justify-content: center; gap: 12px; }
@media (max-width: 699px) {
  body[data-theme="graphite"] #home .fv-tunnel-hero { min-height: 680px; }
  body[data-theme="graphite"] #home .fv-tunnel-hero .home-copy { width: 100%; padding: 100px 20px; }
  body[data-theme="graphite"] #home .fv-tunnel-hero .home-copy::before { inset: -20px -45px; }
  body[data-theme="graphite"] #home .fv-tunnel-hero .home-copy h1 { font-size: clamp(28px, 7.6vw, 43px) !important; margin-bottom: 20px; }
  body[data-theme="graphite"] #home .fv-tunnel-hero .home-description { max-width: 300px; font-size: 13px !important; line-height: 1.65 !important; }
  body[data-theme="graphite"] #home .fv-tunnel-hero .home-assortment-actions { flex-direction: column; width: 100%; }
  body[data-theme="graphite"] #home .fv-tunnel-hero .home-assortment-actions a { width: min(100%, 220px); }
}