/* ============================================================================
   KlarHealth — Homepage
   Classic, classy, modern dark blue — single accent colour
   Scoped entirely to body.page-home
   ============================================================================ */

/*
   Palette:
   --bg:         #0C1220  deep navy (not extreme black)
   --surface:    #131E2E  card backgrounds
   --surface-hi: #1A2840  hover states
   --accent:     #3B82F6  blue — single accent throughout
   --text:       #F1F5F9  headlines / bright text
   --body:       #94A3B8  body copy
   --muted:      #64748B  sub-text / placeholders
   --border:     rgba(255,255,255,0.08)  subtle borders
*/

/* ── Global homepage overrides ─────────────────────────────────────────────── */
body.page-home {
    background: #0C1220;
    color: #94A3B8;
}

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

/* Section labels — subtle blue pill */
.page-home .section-label {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #93C5FD;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 4px;
    padding: 0.25rem 0.625rem;
    margin-block-end: 1.25rem;
}

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

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

.page-home .section--navy {
    background: #101D33;
    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;
}

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

.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: #2563EB;
    border-color: #2563EB;
    color: #ffffff;
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3);
}

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

.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: #F1F5F9;
    box-shadow: none;
}

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

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

/* ── Hero ──────────────────────────────────────────────────────────────────── */
.page-home .hero {
    background: #0C1220;
    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: #93C5FD;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.2);
    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: #F1F5F9;
    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-login-link {
    color: #93C5FD;
    text-decoration: none;
}
.page-home .hero-login-link:hover {
    color: #bfdbfe;
    text-decoration: underline;
}

.page-home .hero-trust {
    background: #131E2E;
    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: #3B82F6;
}

/* Hero status card */
.page-home .hero-card {
    background: #131E2E;
    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(59, 130, 246, 0.15);
}

/* ── Problem Section ───────────────────────────────────────────────────────── */
.page-home .problem-card {
    background: #131E2E;
    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(59, 130, 246, 0.3);
    transform: translateY(-2px);
    box-shadow: none;
}

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

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

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

/* ── How It Works — clean numbered steps ────────────────────────────────────── */
.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: #0F1828;
    border: none;
    border-radius: 0;
    padding: 2rem 2.5rem;
    box-shadow: none;
    transition: background-color 0.2s ease;
}

.page-home .hiw-card:hover {
    background: #131E2E;
    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: #93C5FD;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.18);
    border-radius: 4px;
    padding: 0.2rem 0.5rem;
}

.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: #0F1828;
    border: none;
    border-radius: 0;
    padding: 2rem;
    transition: background-color 0.2s ease;
    overflow: visible;
}

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

.page-home .feature-card__icon {
    width: 36px;
    height: 36px;
    color: #3B82F6;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 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(59, 130, 246, 0.1);
    color: #93C5FD;
    border: 1px solid rgba(59, 130, 246, 0.15);
    font-size: 1rem;
}

.page-home .why-proof:hover .why-proof__icon {
    background: #3B82F6;
    color: #ffffff;
    border-color: #3B82F6;
}

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

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

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

.page-home .stat-bar__number {
    color: #93C5FD;
}

.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: #F1F5F9;
}

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

.page-home .tourism-feature__icon {
    background: rgba(59, 130, 246, 0.1);
    color: #93C5FD;
    border: 1px solid rgba(59, 130, 246, 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: #93C5FD;
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.2);
}

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

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

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

.page-home .faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    max-width: 960px;
    margin: 3rem auto 0;
}

.page-home .faq-item {
    background: #131E2E;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.page-home .faq-item.open {
    border-color: rgba(59, 130, 246, 0.35);
}

.page-home .faq-question {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: #CBD5E1;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.45;
    transition: color 0.15s ease;
}

.page-home .faq-question__text {
    flex: 1;
}

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

.page-home .faq-item.open .faq-question {
    color: #F1F5F9;
}

.page-home .faq-icon {
    flex-shrink: 0;
    margin-top: 0.125rem;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.page-home .faq-item.open .faq-icon {
    background: #3B82F6;
    border-color: #3B82F6;
    color: #fff;
    transform: rotate(45deg);
}

.page-home .faq-answer {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.35s ease;
}

.page-home .faq-item.open .faq-answer {
    max-height: 500px;
}

.page-home .faq-answer__inner {
    padding: 0 1.5rem 1.25rem;
    color: #64748B;
    font-size: 0.9rem;
    line-height: 1.75;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 1rem;
}

@media (max-width: 700px) {
    .page-home .faq-grid {
        grid-template-columns: 1fr;
    }
}

/* ── 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: #131E2E;
        border: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: 8px;
    }

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

    .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;
    }
}

/* ── Mobile nav — dark homepage overrides ──────────────────────────────────── */
.page-home .nav-mobile {
    background: #131E2E;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.page-home .nav-mobile-link {
    color: #CBD5E1;
    border-bottom-color: rgba(255,255,255,0.07);
}

.page-home .nav-mobile-link:hover,
.page-home .nav-mobile-link:focus {
    color: #93C5FD;
    background: rgba(59,130,246,0.06);
}

/* Mobile lang picker — dark theme */
.page-home .nav-mobile-lang .lang-picker__btn {
    color: #94A3B8;
    border-color: rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05);
}

.page-home .nav-mobile-lang .lang-picker__btn:hover {
    background: rgba(59,130,246,0.1);
    color: #CBD5E1;
}

.page-home .nav-mobile-lang .lang-picker__panel {
    background: #1A2840;
    border-color: rgba(255,255,255,0.12);
}

.page-home .nav-mobile-lang .lang-picker__option {
    color: #94A3B8;
}

.page-home .nav-mobile-lang .lang-picker__option:hover {
    background: rgba(59,130,246,0.1);
    color: #CBD5E1;
}

.page-home .nav-mobile-lang .lang-picker__option--active {
    color: #93C5FD;
    background: rgba(59,130,246,0.08);
}