/* =========================================================================
   Home page only — stark / bold / sharp, matching hunchopv.com.
   Everything here is scoped to `body.home`, so the Library & Dashboard
   styling in styles.css is left completely untouched.
   ========================================================================= */

/* Starker background than the rest of the site — one pink light, top-right. */
body.home {
  background-image: radial-gradient(760px 460px at 88% -8%, rgba(255,45,120,.14), transparent 62%);
}

/* Heavy condensed display type, the way hunchopv sets headlines. */
.home .display {
  font-family: 'Anton', var(--font-display);
  font-weight: 400;                 /* Anton ships one weight */
  text-transform: uppercase;
  line-height: .9;
  letter-spacing: .01em;
}

/* Rectangular bordered kicker (their "VRCHAT AVATARS" box). */
.tag-box {
  display: inline-block; padding: 7px 13px; margin-bottom: 24px;
  border: 1px solid var(--accent); color: var(--accent);
  font-size: .72rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
}

/* Sharp buttons (home only — Library keeps its rounded pills). */
.home .btn { border-radius: 3px; }
/* …except the blurple Join Discord button, which stays a rounded pill so it
   matches the header button on every other page. */
.home .btn--discord { border-radius: 999px; }
.btn--fill { background: var(--accent); color: #fff; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.btn--fill:hover { background: #ff4d8f; transform: translateY(-2px); box-shadow: 0 8px 26px var(--accent-glow); }
.btn--line { background: transparent; color: var(--text); border: 1px solid var(--border); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.btn--line:hover { border-color: var(--accent); color: var(--accent); }

/* ---- Hero ------------------------------------------------------------- */
.home-hero { padding-block: clamp(44px, 7vw, 96px); }
.home-hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.home-hero h1 { font-size: clamp(3rem, 8vw, 5.6rem); margin-bottom: 22px; }
.home-hero h1 .pink { color: var(--accent); }
.home-hero__lead { font-size: 1.08rem; color: var(--text-muted); max-width: 46ch; margin-bottom: 30px; }

.home-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 30px; }

/* Uppercase spec line, echoing "+ PC + QUEST + FACE TRACKING". */
.spec-line { display: flex; flex-wrap: wrap; gap: 14px 24px; font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); }
.spec-line span { display: inline-flex; align-items: center; gap: 8px; }
.spec-line span::before { content: "+"; color: var(--accent); font-weight: 700; }

/* Visual: staggered 2×2 of sharply framed asset previews. */
.home-hero__visual { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.frame { position: relative; aspect-ratio: 1/1; border: 1px solid var(--border); overflow: hidden; background: var(--surface-2); }
.frame img, .frame video, .frame .ph { width: 100%; height: 100%; object-fit: cover; }
.frame__label { position: absolute; left: 0; bottom: 0; padding: 6px 11px; font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; background: rgba(10,10,14,.72); backdrop-filter: blur(4px); }
.home-hero__visual .frame:nth-child(2) { transform: translateY(26px); }
.home-hero__visual .frame:nth-child(3) { transform: translateY(-26px); }

/* ---- Slim category strip ---------------------------------------------- */
.home-cats { padding-block: 44px 84px; }
.home-cats__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 26px; flex-wrap: wrap; }
.home-cats__head h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
.home-cats__head a { color: var(--accent); font-weight: 600; font-size: .9rem; display: inline-flex; align-items: center; gap: 7px; }
.home-cats__head a svg { width: 16px; height: 16px; }
.home .cat-cloud { justify-content: flex-start; }
.home .cat-cloud a { border-radius: 3px; }

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 900px) {
  .home-hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .home-hero__visual { max-width: 400px; }
}