/* =============================================
   Home page specific styles
   ============================================= */

/* HERO */
.hero { padding: 4rem 0 3rem; background: linear-gradient(135deg, #f0f4ff 0%, #fafafa 60%); }

.hero-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.hero-label {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--color-accent);
    margin-bottom: .75rem;
}

.hero h1 {
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 900;
    line-height: 1.15;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.hero-sub {
    font-size: 1.05rem;
    color: var(--color-muted);
    max-width: 520px;
    margin-bottom: 1.5rem;
}

.hero-quick {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.5rem;
}
.hero-quick-label { font-size: .78rem; color: var(--color-muted); font-weight: 600; }
.hero-quick-tag {
    display: inline-block;
    background: var(--color-bg-off);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    font-size: .78rem;
    font-weight: 500;
    padding: .2rem .65rem;
    border-radius: 100px;
    text-decoration: none;
    transition: border-color .15s, background .15s;
}
.hero-quick-tag:hover { border-color: var(--color-primary); background: #fff; color: var(--color-primary); }

.hero-stats {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.75rem;
    flex-wrap: wrap;
}
.hero-stat { display: flex; flex-direction: column; }
.hero-stat-value { font-size: 1rem; font-weight: 800; color: var(--color-primary); }
.hero-stat-label { font-size: .72rem; color: var(--color-muted); }
.hero-stat-sep { width: 1px; height: 30px; background: var(--color-border); }

.hero-buttons { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Hero visual */
.hero-visual { display: flex; align-items: center; justify-content: center; }
.hero-mic-illustration { width: 100%; max-width: 300px; margin: 0 auto; }
.hero-mic-illustration svg { width: 100%; height: auto; }

/* BENTO GRID */
.home-section-header { text-align: center; margin-bottom: 2.5rem; }
.home-section-label {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--color-accent);
    margin-bottom: .5rem;
}
.home-section-header h2 { font-size: clamp(1.5rem, 3vw, 2rem); color: var(--color-primary); margin-bottom: .5rem; }
.home-section-header p { color: var(--color-muted); max-width: 540px; margin: 0 auto; }

.home-bento {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
    gap: 1.25rem;
}

.bento-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.5rem;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    transition: box-shadow .2s, transform .2s, border-color .2s;
}
.bento-card:hover {
    box-shadow: var(--shadow);
    transform: translateY(-3px);
    border-color: var(--color-primary);
    color: inherit;
}

.bento-card-featured {
    grid-column: 1 / 3;
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}
.bento-card-featured:hover { background: var(--color-primary-hover); color: #fff; }

.bento-icon { width: 2.5rem; height: 2.5rem; margin-bottom: .25rem; }
.bento-icon svg { width: 100%; height: 100%; }
.bento-card-featured .bento-icon svg { stroke: rgba(255,255,255,.9); }

.bento-card h3 { font-size: 1.05rem; font-weight: 700; }
.bento-card-featured h3 { color: #fff; font-size: 1.2rem; }
.bento-card p { font-size: .87rem; color: var(--color-muted); line-height: 1.65; }
.bento-card-featured p { color: rgba(255,255,255,.8); }

.bento-arrow { font-size: .82rem; font-weight: 600; margin-top: auto; padding-top: .5rem; color: var(--color-link); }
.bento-card-featured .bento-arrow { color: rgba(255,255,255,.9); }

/* PRODUCT CARDS */
.product-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.5rem;
}

.product-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    position: relative;
    transition: box-shadow .2s, transform .2s;
    display: flex;
    flex-direction: column;
}
.product-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }

.product-card-badge {
    position: absolute;
    top: .75rem;
    left: .75rem;
    background: var(--color-accent);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .2rem .55rem;
    border-radius: 100px;
    z-index: 1;
}
.product-card-badge-green  { background: #16A34A; }
.product-card-badge-orange { background: #D97706; }
.product-card-badge-purple { background: #7C3AED; }

.product-card-img-wrap {
    background: var(--color-bg-off);
    border-radius: var(--radius) var(--radius) 0 0;
    overflow: hidden;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.product-card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 1.5rem;
}

.product-card-body { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; gap: .5rem; }
.product-card-body h3 { font-size: 1.05rem; font-weight: 700; }
.product-card-body h3 a { color: var(--color-primary); text-decoration: none; }
.product-card-body h3 a:hover { text-decoration: underline; }

.product-card-rating { color: #F59E0B; font-size: .88rem; }
.product-card-rating span { color: var(--color-muted); font-size: .82rem; }
.product-card-body p { font-size: .85rem; color: var(--color-muted); line-height: 1.6; }
.product-card-price { font-size: .88rem; font-weight: 700; color: var(--color-primary); }

.product-card-btns { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; }
.product-card-review-link { font-size: .82rem; color: var(--color-link); text-decoration: none; margin-top: .25rem; }
.product-card-review-link:hover { text-decoration: underline; }

/* CTA BANNER */
.cta-banner { background: var(--color-primary); padding: 3rem 0; }
.cta-banner-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}
.cta-banner-text h2 { color: #fff; font-size: 1.5rem; margin-bottom: .5rem; }
.cta-banner-text p { color: rgba(255,255,255,.75); font-size: .95rem; }
.cta-banner-actions { display: flex; gap: .75rem; flex-shrink: 0; flex-wrap: wrap; }
.cta-banner .btn-secondary { border-color: rgba(255,255,255,.5); color: #fff; }
.cta-banner .btn-secondary:hover { background: rgba(255,255,255,.15); color: #fff; }

/* Responsive home */
@media (max-width: 900px) {
    .hero-inner { grid-template-columns: 1fr; }
    .hero-visual { display: none; }
    .home-bento { grid-template-columns: 1fr 1fr; }
    .bento-card-featured { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
    .hero { padding: 2.5rem 0 2rem; }
    .home-bento { grid-template-columns: 1fr; }
    .product-cards { grid-template-columns: 1fr; }
    .cta-banner-inner { flex-direction: column; text-align: center; }
    .cta-banner-actions { justify-content: center; }
}