/* ============================================================================
   KlarHealth — Homepage
   Dark, professional health management platform
   Scoped entirely to body.page-home
   ============================================================================ */

/* ── Global homepage overrides ─────────────────────────────────────────────── */
body.page-home {
    background: #09090B;
    color: #CBD5E1;
}

.page-home h1,
.page-home h2,
.page-home h3,
.page-home h4 {
    color: #F8FAFC;
}

/* Section labels — lime pill, small and subtle */
.page-home .section-label {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #84CC16;
    background: rgba(132, 204, 22, 0.08);
    border: 1px solid rgba(132, 204, 22, 0.18);
    border-radius: 4px;
    padding: 0.25rem 0.625rem;
    margin-block-end: 1.25rem;
}

/* Section backgrounds */
.page-home .section {
    background: #09090B;
    padding-block: 5rem;
}

.page-home .section--alt {
    background: #0D0D14;
}

.page-home .section--navy {
    background: #18103A;
    border-top: 1px solid rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Section header sub-text */
.page-home .section-header {
    margin-block-end: 3rem;
}

.page-home .section-header p {
    color: #64748B;
    max-width: 52ch;
}

/* ── Link colors — targeted, not global ────────────────────────────────────── */
/* Only colour specific links, not everything on the page */
.page-home .hero-login-link {
    color: #A78BFA;
    text-decoration: none;
}
.page-home .hero-login-link:hover {
    text-decoration: underline;
    color: #C4B5FD;
}

/* Footer and nav links stay as their own colour via styles.css — no override */

/* ── Buttons ────────────────────────────────────────────────────────────────── */
.page-home .btn--teal,
.page-home .hero .btn--teal,
.page-home .tourism-copy .btn--teal,
.page-home .section--navy .btn--teal {
    background: #6D28D9;
    border-color: #6D28D9;
    color: #F8FAFC;
}

.page-home .btn--teal:hover,
.page-home .hero .btn--teal:hover,
.page-home .tourism-copy .btn--teal:hover,
.page-home .section--navy .btn--teal:hover {
    background: #5B21B6;
    border-color: #5B21B6;
    color: #F8FAFC;
    box-shadow: 0 4px 20px rgba(109, 40, 217, 0.35);
}

.page-home .hero .btn--navy,
.page-home .section .btn--navy {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.18);
    color: #CBD5E1;
}

.page-home .hero .btn--navy:hover,
.page-home .section .btn--navy:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.35);
    color: #F8FAFC;
    box-shadow: none;
}

.page-home .btn--outline-white {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.2);
    color: #F8FAFC;
}

.page-home .btn--outline-white:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.4);
    color: #F8FAFC;
    box-shadow: none;
}

/* ── Hero ──────────────────────────────────────────────────────────────────── */
.page-home .hero {
    background: #09090B;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-block-start: calc(var(--nav-height) + 5rem);
    padding-block-end: 5rem;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #84CC16;
    background: rgba(132, 204, 22, 0.08);
    border: 1px solid rgba(132, 204, 22, 0.18);
    border-radius: 4px;
    padding: 0.375rem 0.75rem;
    margin-block-end: 1.75rem;
}

.page-home .hero-headline {
    font-size: clamp(2.5rem, 5.5vw, 4.25rem);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.03em;
    color: #F8FAFC;
    margin-block-end: 1.5rem;
}

.page-home .hero-subheadline {
    font-size: 1.0625rem;
    color: #64748B;
    line-height: 1.75;
    max-width: 50ch;
    margin-block-end: 2.5rem;
}

.page-home .hero-login-hint {
    color: #475569;
    font-size: 0.875rem;
    margin-block-start: 1.25rem;
    margin-block-end: 0;
}

.page-home .hero-trust {
    background: #111118;
    border: 1px solid rgba(255, 255, 255, 0.07);
    color: #475569;
    font-size: 0.8125rem;
    margin-block-start: 1.5rem;
}

.page-home .hero-trust svg {
    color: #84CC16;
}

/* Hero status card */
.page-home .hero-card {
    background: #111118;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    box-shadow: none;
    padding: 1.75rem;
}

.page-home .hero-card-label {
    color: #334155;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-block-end: 1rem;
}

.page-home .hero-card-item {
    color: #94A3B8;
    border-block-end: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.75rem 0;
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.page-home .hero-card-item:last-child {
    border-block-end: none;
}

.page-home .hero-card-check svg circle {
    fill: rgba(132, 204, 22, 0.15);
}

/* ── Problem Section ───────────────────────────────────────────────────────── */
.page-home .problem-card {
    background: #111118;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 8px;
    box-shadow: none;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.page-home .problem-card:hover {
    border-color: rgba(109, 40, 217, 0.3);
    transform: translateY(-2px);
    box-shadow: none;
}

.page-home .problem-card__icon {
    width: 32px;
    height: 32px;
    color: #6D28D9;
}

.page-home .problem-card__title {
    color: #E2E8F0;
    font-size: 1rem;
}

.page-home .problem-card__body {
    color: #64748B;
}

/* ── How It Works — clean numbered steps, no icons ─────────────────────────── */
.page-home .hiw-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 8px;
    overflow: hidden;
    margin-block-start: 3rem;
}

.page-home .hiw-card {
    background: #0D0D14;
    border: none;
    border-radius: 0;
    padding: 2rem 2.5rem;
    box-shadow: none;
    transition: background-color 0.2s ease;
}

.page-home .hiw-card:hover {
    background: #111118;
    border-color: transparent;
    box-shadow: none;
    transform: none;
}

.page-home .hiw-card__top {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    margin-block-end: 1rem;
}

.page-home .hiw-card__num {
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: #84CC16;
    background: rgba(132, 204, 22, 0.08);
    border: 1px solid rgba(132, 204, 22, 0.15);
    border-radius: 4px;
    padding: 0.2rem 0.5rem;
}

/* Hide icons in HIW — step numbers are sufficient */
.page-home .hiw-card__icon {
    display: none;
}

.page-home .hiw-card__title {
    color: #E2E8F0;
    font-size: 1rem;
    font-weight: 700;
    margin-block-end: 0.5rem;
}

.page-home .hiw-card__body {
    color: #64748B;
    font-size: 0.9375rem;
    line-height: 1.65;
    margin: 0;
}

/* ── Features Grid ─────────────────────────────────────────────────────────── */
.page-home .features-grid {
    gap: 1px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 8px;
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.page-home .feature-card {
    background: #0D0D14;
    border: none;
    border-radius: 0;
    padding: 2rem;
    transition: background-color 0.2s ease;
    overflow: visible;
}

.page-home .feature-card:hover {
    background: #111118;
    border-color: transparent;
    box-shadow: none;
    transform: none;
}

.page-home .feature-card__icon {
    width: 36px;
    height: 36px;
    color: #6D28D9;
    background: rgba(109, 40, 217, 0.1);
    border: 1px solid rgba(109, 40, 217, 0.15);
    border-radius: 6px;
    padding: 7px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-block-end: 1.25rem;
    flex-shrink: 0;
}

.page-home .feature-card__icon svg {
    width: 100%;
    height: 100%;
}

.page-home .feature-card__title {
    color: #E2E8F0;
    font-size: 0.9375rem;
    font-weight: 700;
    margin-block-end: 0.5rem;
}

.page-home .feature-card__body {
    color: #64748B;
    font-size: 0.9rem;
    line-height: 1.65;
}

/* ── Why KlarHealth ────────────────────────────────────────────────────────── */
.page-home .why-proof__icon {
    background: rgba(109, 40, 217, 0.1);
    color: #A78BFA;
    border: 1px solid rgba(109, 40, 217, 0.15);
    font-size: 1rem;
}

.page-home .why-proof:hover .why-proof__icon {
    background: #6D28D9;
    color: #F8FAFC;
    border-color: #6D28D9;
}

.page-home .why-proof__stat {
    color: #F8FAFC;
    font-size: 1.125rem;
}

.page-home .why-proof__body {
    color: #64748B;
}

/* Stat bar */
.page-home .stat-bar {
    background: #111118;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 8px;
}

.page-home .stat-bar__number {
    color: #84CC16;
}

.page-home .stat-bar__label {
    color: #64748B;
}

.page-home .stat-bar__item + .stat-bar__item::before {
    background: rgba(255, 255, 255, 0.07);
}

/* ── Healthcare Tourism ────────────────────────────────────────────────────── */
.page-home .tourism-copy h2 {
    color: #F8FAFC;
}

.page-home .tourism-intro {
    color: #64748B;
}

.page-home .tourism-feature__icon {
    background: rgba(109, 40, 217, 0.1);
    color: #A78BFA;
    border: 1px solid rgba(109, 40, 217, 0.15);
    flex-shrink: 0;
}

.page-home .tourism-feature__text h3 {
    color: #E2E8F0;
}

.page-home .tourism-feature__text p {
    color: #64748B;
}

/* ── Signup CTA ────────────────────────────────────────────────────────────── */
.page-home .section--navy .section-label {
    color: #84CC16;
    background: rgba(132, 204, 22, 0.08);
    border-color: rgba(132, 204, 22, 0.18);
}

.page-home .section--navy h2 {
    color: #F8FAFC;
}

.page-home .section--navy > .container > .signup-cta > p {
    color: rgba(255, 255, 255, 0.55);
}

/* ── FAQ ───────────────────────────────────────────────────────────────────── */
.page-home #faq {
    background: #0D0D14;
}

.page-home .faq-list {
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.page-home .faq-item {
    border-block-end: 1px solid rgba(255, 255, 255, 0.07);
}

.page-home .faq-question {
    color: #CBD5E1;
    font-size: 0.9375rem;
    font-weight: 500;
}

.page-home .faq-question:hover {
    color: #F8FAFC;
}

.page-home .faq-icon {
    background: rgba(255, 255, 255, 0.05);
    color: #475569;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.page-home .faq-item.open .faq-icon {
    background: #6D28D9;
    color: #F8FAFC;
    border-color: #6D28D9;
}

.page-home .faq-answer__inner {
    color: #64748B;
    font-size: 0.9375rem;
    line-height: 1.75;
}

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .page-home .features-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .page-home .hero {
        padding-block-start: calc(var(--nav-height) + 3rem);
        padding-block-end: 3.5rem;
    }

    .page-home .hero-headline {
        font-size: clamp(2rem, 9vw, 2.75rem);
    }

    .page-home .section {
        padding-block: 3.5rem;
    }

    .page-home .hiw-grid {
        grid-template-columns: 1fr;
    }

    .page-home .features-grid {
        grid-template-columns: 1fr;
        background: transparent;
        border: none;
        border-radius: 0;
        gap: 0.75rem;
    }

    .page-home .feature-card {
        background: #111118;
        border: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: 8px;
    }

    .page-home .feature-card:hover {
        background: #161621;
    }

    .page-home .hiw-card {
        border-radius: 0;
    }
}

@media (max-width: 480px) {
    .page-home .hero-headline {
        font-size: 2rem;
    }

    .page-home .section {
        padding-block: 3rem;
    }

    .page-home .hiw-card {
        padding: 1.5rem;
    }

    .page-home .feature-card {
        padding: 1.5rem;
    }

    .page-home .hero-card {
        padding: 1.25rem;
    }
}