/* ── Section spacing ───────────────────────────────────────── */
.hp-section           { padding: 5rem 0; }
.hp-section--surface  { background: var(--gray-50); }
@media (max-width: 768px) { .hp-section { padding: 3.5rem 0; } }
@media (max-width: 540px) { .hp-section { padding: 2.75rem 0; } }

/* ── Hero trust row ────────────────────────────────────────── */
.h-trust-row {
    display: flex; flex-wrap: wrap;
    align-items: center; justify-content: center;
    gap: 0;
}
.h-trust-item {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.3rem 0.875rem;
    font-size: 0.875rem; font-weight: 600;
    color: var(--text-secondary);
}
.h-trust-item i { color: var(--black); font-size: 0.875rem; }
.h-trust-dot {
    width: 3px; height: 3px; border-radius: 50%;
    background: var(--gray-300); flex-shrink: 0;
}
@media (max-width: 540px) {
    .h-trust-dot { display: none; }
    .h-trust-item { font-size: 0.8rem; padding: 0.25rem 0.625rem; }
}

/* ── Hero trending ─────────────────────────────────────────── */
.h-trending { margin-top: 1.75rem; }
.h-trending-label {
    display: block;
    font-size: 0.75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.09em;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}
.trending-pills { justify-content: center; }

/* ── Featured slider ───────────────────────────────────────── */
.feat-wrap {
    position: relative;
}
.feat-outer {
    overflow: hidden;
    border-radius: var(--r-lg);
}
.feat-track {
    display: flex;
    gap: 1.25rem;
    transition: transform .5s cubic-bezier(.4,0,.2,1);
    will-change: transform;
}
.feat-card {
    flex: 0 0 calc((100% - 2 * 1.25rem) / 3);
    min-width: 0;
}
.feat-btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 2.5rem; height: 2.5rem;
    background: var(--white); border: 1.5px solid var(--border);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 0.9rem; color: var(--black);
    cursor: pointer; z-index: 10;
    box-shadow: var(--shadow-md);
    transition: background .2s, border-color .2s, transform .2s;
}
.feat-btn:hover { background: var(--black); color: var(--white); border-color: var(--black); }
.feat-btn--prev { left: -1.25rem; }
.feat-btn--next { right: -1.25rem; }
.feat-dots {
    display: flex; justify-content: center; gap: 0.5rem;
    margin-top: 1.5rem;
}
.feat-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--gray-300); border: none; cursor: pointer; padding: 0;
    transition: background .25s, width .25s;
}
.feat-dot.active { background: var(--black); width: 22px; border-radius: 4px; }
@media (max-width: 768px) {
    .feat-card { flex: 0 0 calc((100% - 1.25rem) / 2); }
    .feat-btn--prev { left: -0.75rem; }
    .feat-btn--next { right: -0.75rem; }
}
@media (max-width: 480px) {
    .feat-card { flex: 0 0 100%; }
    .feat-btn { display: none; }
}

/* ── Why Choose ────────────────────────────────────────────── */
.hp-why { background: var(--gray-900); padding: 5rem 0; }
.hp-why-inner {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 4rem; align-items: start;
}
.hp-benefits-label {
    font-size: 0.78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.09em;
    color: var(--gray-500); margin-bottom: 0.75rem;
}
.hp-benefits {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 0.55rem;
}
.hp-benefits li {
    display: flex; align-items: center; gap: 0.6rem;
    font-size: 0.975rem; font-weight: 500; color: var(--gray-300);
}
.hp-benefits li i { color: #22c55e; font-size: 1rem; flex-shrink: 0; }
.hp-stats {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
.hp-stat {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--r-lg); padding: 1.75rem 1.5rem; text-align: center;
}
.hp-stat--full { grid-column: 1 / -1; }
.hp-stat-num {
    font-size: clamp(2.25rem, 4vw, 3rem); font-weight: 800;
    color: var(--white); letter-spacing: -0.04em; line-height: 1; margin-bottom: 0.4rem;
}
.hp-stat-label { font-size: 0.875rem; color: var(--gray-400); font-weight: 500; }
@media (max-width: 768px) {
    .hp-why-inner { grid-template-columns: 1fr; gap: 2.5rem; }
    .hp-why { padding: 3.5rem 0; }
}
@media (max-width: 540px) { .hp-why { padding: 2.75rem 0; } }

/* ── SEO text ──────────────────────────────────────────────── */
.hp-seo {
    display: flex; flex-direction: column; gap: 1.125rem;
    color: var(--text-secondary); line-height: 1.85; font-size: 1rem;
}
.hp-seo p { margin: 0; }