/* Homepage hero refinements; shared page and component styles stay in app.css. */
.hero.hero--refined { --hero-muted: #6d7180; min-height: 0; padding: calc(var(--nav-height) + 36px) 32px 72px; }
.hero--refined .hero-inner { min-height: 560px; }
.hero--refined .hero-copy { top: 0; min-height: 560px; max-width: 48%; container-type: inline-size; }
.hero--refined h1 { text-wrap: balance; font-size: clamp(68px, 7vw, 92px); letter-spacing: -.04em; }
.hero--refined .hero-subtitle { max-width: none; font-size: min(32px, 6.75cqw); letter-spacing: -.025em; white-space: nowrap; }
.hero--refined .hero-subtitle:lang(en) { font-size: min(32px, 5.8cqw); }
.hero--refined .hero-sub { max-width: 35ch; margin-bottom: 28px; color: var(--skilo-body); }
.hero--refined .hero-cta-group { align-items: flex-start; flex-direction: column; gap: 12px; }
.hero--refined .hero-cta-group .btn-big { min-height: 54px; font-size: 16px; padding: 16px 28px; gap: 16px; }
.hero--refined .home-free-note { color: var(--hero-muted); font-size: 14px; line-height: 1.5; }
.hero--refined .hero-surface { top: 0; right: 0; bottom: auto; width: 49%; height: 560px; }
.hero--refined .hero-collage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 16px; height: auto; padding: 12px; transform: none; container-type: inline-size; }
.hero--refined .hero-collage-item { position: relative; inset: auto; height: auto; border-radius: 12px; -webkit-mask-image: none; mask-image: none; filter: none; box-shadow: 0 8px 18px rgba(26, 26, 46, .12); }
.hero--refined .hero-collage-item--bread { width: 98%; aspect-ratio: 1.01; transform: rotate(-5deg); }
.hero--refined .hero-collage-item--guitar { width: 103%; aspect-ratio: 1.08; margin-top: 2%; transform: perspective(100cqw) rotate(-4deg) rotateY(-8deg); }
.hero--refined .hero-collage-item--basketball { top: min(6px, 1.2cqw); left: -3.3cqw; width: 109%; aspect-ratio: 1.12; transform: perspective(100cqw) rotateY(-20deg) skewX(-2deg); }
.hero--refined .hero-collage-item--flowers { width: 96%; aspect-ratio: .96; justify-self: end; margin-top: 3%; transform: rotate(2deg); }
.hero--refined .hero-collage-note { top: 20px; left: 20px; width: 112px; }
.hero--refined .hero-collage-item--guitar .hero-collage-note { top: 20px; left: auto; right: 16px; width: 108px; }
.hero--refined .hero-collage-item--basketball .hero-collage-note,
.hero--refined .hero-collage-item--flowers .hero-collage-note { display: none; }
.hero--refined .hero-collage-item figcaption { inset: auto 12px 12px auto; max-width: calc(100% - 24px); padding: clamp(8px, 2cqw, 11px) clamp(6px, 2.8cqw, 14px); border-radius: 7px; background: var(--skilo-white); font-size: clamp(7px, 2.35cqw, 12px); letter-spacing: .15px; transform: rotate(0deg); white-space: nowrap; }
.hero--refined .hero-collage-item--bread figcaption { left: 50%; right: auto; transform: translateX(-50%) rotate(1deg); }
.hero--refined .hero-collage-item--basketball figcaption { left: 50%; right: auto; transform: translateX(-50%) rotate(-1deg); }

@media (min-width: 769px) and (max-width: 1000px) {
    .hero--refined h1 { font-size: 68px; }
    .hero--refined .hero-inner, .hero--refined .hero-copy { min-height: 510px; }
    .hero--refined .hero-surface { height: 510px; }
    .hero--refined .hero-collage-note { font-size: 23px; }
}

@media (max-width: 768px) {
    .site-nav { padding-inline: 24px; }
    .site-nav .logo img { height: 24px; }
    .hero.hero--refined { padding: calc(var(--nav-height) + 32px) 24px 48px; }
    .hero--refined .hero-inner, .hero--refined .hero-copy { min-height: 0; }
    .hero--refined .hero-copy { padding: 0; max-width: none; }
    .hero--refined h1 { font-size: clamp(52px, 13.8vw, 64px); margin-bottom: 20px; letter-spacing: -.04em; }
    .hero--refined .hero-subtitle { line-height: 1.3; margin-bottom: 12px; }
    .hero--refined .hero-sub { font-size: 16px; max-width: 36ch; margin-bottom: 24px; }
    .hero--refined .hero-cta-group { gap: 10px; align-items: stretch; }
    .hero--refined .hero-cta-group .avatar-stack { justify-content: center; }
    .hero--refined .home-free-note { text-align: center; font-size: 13px; }
    .hero--refined .hero-surface { position: relative; width: 100%; height: auto; margin-top: 32px; }
    .hero--refined .hero-collage { height: auto; gap: 12px; padding: 8px; }
    .hero--refined .hero-collage-note { font-size: clamp(18px, 4.8vw, 24px); }
    .hero--refined .hero-collage-note { top: 14px; left: 12px; width: 84px; }
    .hero--refined .hero-collage-item--guitar .hero-collage-note { top: 14px; right: 12px; left: auto; width: 74px; }
    .hero--refined .hero-collage-item figcaption { right: 8px; bottom: 8px; max-width: calc(100% - 16px); padding: 8px 6px; border-radius: 5px; font-size: clamp(7px, 2.1vw, 10px); }
    .hero--refined .hero-collage-item--bread figcaption,
    .hero--refined .hero-collage-item--basketball figcaption { right: auto; }
}