{% extends 'expat_life/base.html' %}
{% load static %}

{% block title %}Home - Live in Sri Lanka{% endblock %}

{% block content %}

<style>
    .hero-section {
        position: relative;
        min-height: 720px;
        background-color: #07131c;
    }

    .hero-bg-image {
        position: absolute;
        inset: 0;
        background: url("{% static 'expat_life/images/live_in_srilanka_home_hero.webp' %}") center center / cover no-repeat;
        transform: scale(1.02);
        z-index: 0;
    }

    .hero-overlay {
        position: absolute;
        inset: 0;
        background:
            radial-gradient(
                circle at 78% 18%,
                rgba(255, 193, 7, 0.10),
                transparent 30%
            ),
            radial-gradient(
                circle at 88% 82%,
                rgba(32, 201, 151, 0.12),
                transparent 34%
            ),
            linear-gradient(
                90deg,
                rgba(7, 19, 28, 0.88) 0%,
                rgba(7, 19, 28, 0.74) 36%,
                rgba(11, 61, 145, 0.48) 64%,
                rgba(15, 118, 110, 0.34) 100%
            ),
            linear-gradient(
                180deg,
                rgba(0, 0, 0, 0.16) 0%,
                rgba(0, 0, 0, 0.34) 100%
            );
        z-index: 1;
    }

    .hero-content {
        position: relative;
        z-index: 2;
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .min-vh-75 {
        min-height: 75vh;
    }

    .hero-language-info {
        max-width: 690px;
        padding: 1rem 1.1rem;
        border-radius: 20px;
        background:
            linear-gradient(
                135deg,
                rgba(255, 255, 255, 0.14),
                rgba(255, 255, 255, 0.08)
            );
        border: 1px solid rgba(255, 255, 255, 0.22);
        backdrop-filter: blur(12px);
        box-shadow: 0 18px 42px rgba(0, 0, 0, 0.20);
    }

    .hero-language-icon {
        width: 44px;
        height: 44px;
        border-radius: 15px;
        background: linear-gradient(135deg, #ffd36b, #ffc107);
        color: #07131c;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.3rem;
        flex-shrink: 0;
        box-shadow: 0 12px 24px rgba(255, 193, 7, 0.22);
    }

    .hero-language-mini {
        display: inline-block;
        color: #ffd36b;
        font-size: .72rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: .08em;
        margin-bottom: .2rem;
    }

    .hero-language-info h5 {
        color: #fff;
        font-size: 1rem;
    }

    .hero-language-info p {
        color: rgba(255, 255, 255, 0.82);
        font-size: .9rem;
        line-height: 1.5;
    }

    .hero-language-flags {
        display: flex;
        flex-wrap: wrap;
        gap: .4rem;
    }

    .hero-language-flags span {
        display: inline-flex;
        align-items: center;
        gap: .25rem;
        padding: .24rem .55rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.15);
        border: 1px solid rgba(255, 255, 255, 0.12);
        color: #fff;
        font-size: .74rem;
        font-weight: 700;
        white-space: nowrap;
    }

    .hero-language-info .btn-light {
        color: #07131c;
        background: #ffffff;
        border: none;
        font-weight: 800;
        box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
    }

    .hero-language-info .btn-light:hover {
        background: linear-gradient(135deg, #ffd36b, #ffc107);
        color: #07131c;
    }

    @media (max-width: 575.98px) {
        .hero-language-info {
            padding: .9rem;
        }

        .hero-language-info .d-flex {
            align-items: flex-start;
        }

        .hero-language-flags span {
            font-size: .7rem;
        }
    }

    /* =========================================================
       LIVE IN SRI LANKA - PREMIUM HOME PAGE SECTIONS
       This excludes hero styling.
       Keep your existing hero CSS as it is.
    ========================================================= */

    :root {
        --lis-deep: #07131c;
        --lis-navy: #0b2638;
        --lis-blue: #0d6efd;
        --lis-blue-dark: #0b3d91;
        --lis-teal: #0f766e;
        --lis-teal-soft: #ecfdf5;
        --lis-gold: #ffc107;
        --lis-gold-soft: rgba(255, 193, 7, 0.15);
        --lis-sand: #fff8ed;
        --lis-soft-blue: #f5f9ff;
        --lis-white: #ffffff;
        --lis-text: #102033;
        --lis-muted: #64748b;
        --lis-border: rgba(15, 42, 64, 0.10);
        --lis-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
        --lis-shadow-strong: 0 26px 64px rgba(15, 23, 42, 0.15);
    }

    /* =========================================================
       GLOBAL SECTION POLISH
    ========================================================= */

    .section-heading {
        max-width: 880px;
        margin-left: auto;
        margin-right: auto;
    }

    .section-heading h2 {
        color: var(--lis-text);
        font-weight: 950;
        letter-spacing: -0.035em;
        line-height: 1.12;
        font-size: clamp(2rem, 3.4vw, 3.1rem);
    }

    .section-heading p {
        color: var(--lis-muted) !important;
        line-height: 1.82;
        font-size: 1.04rem;
        max-width: 760px;
        margin-left: auto;
        margin-right: auto;
    }

    .section-mini-title {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        padding: 7px 15px;
        border-radius: 999px;
        background: rgba(15, 118, 110, 0.09);
        border: 1px solid rgba(15, 118, 110, 0.14);
        color: var(--lis-teal);
        font-size: 0.78rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.075em;
        margin-bottom: 14px;
    }

    .section-mini-title::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--lis-gold);
        box-shadow: 0 0 0 5px rgba(255, 193, 7, 0.14);
    }

    .section-mini-title-light {
        background: rgba(255, 193, 7, 0.14);
        border-color: rgba(255, 193, 7, 0.28);
        color: #ffd36b;
    }

    .section-mini-title-light::before {
        background: #ffffff;
        box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.12);
    }

    /* =========================================================
       STATS SECTION
    ========================================================= */

    .stats-section {
        position: relative;
        background:
            linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
        border-bottom: 1px solid rgba(15, 42, 64, 0.06);
    }

    .stat-box {
        position: relative;
        overflow: hidden;
        background:
            radial-gradient(circle at 90% 12%, rgba(255, 193, 7, 0.12), transparent 35%),
            linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
        border: 1px solid rgba(15, 42, 64, 0.07);
        border-radius: 24px;
        padding: 27px 18px;
        box-shadow: var(--lis-shadow);
        transition: all 0.24s ease;
    }

    .stat-box::after {
        content: "";
        position: absolute;
        width: 84px;
        height: 84px;
        right: -34px;
        bottom: -34px;
        border-radius: 50%;
        background: rgba(13, 110, 253, 0.07);
    }

    .stat-box:hover {
        transform: translateY(-4px);
        box-shadow: 0 20px 46px rgba(15, 23, 42, 0.11);
    }

    .stat-box h3 {
        position: relative;
        z-index: 2;
        color: var(--lis-blue);
        font-weight: 950;
        letter-spacing: -0.035em;
        margin-bottom: 8px;
    }

    .stat-box p {
        position: relative;
        z-index: 2;
        color: var(--lis-muted);
        font-weight: 700;
        font-size: 0.92rem;
    }

    /* =========================================================
       WHY SRI LANKA / FEATURE CARDS
    ========================================================= */

    section.bg-white {
        background:
            radial-gradient(circle at 8% 8%, rgba(255, 193, 7, 0.07), transparent 25%),
            #ffffff !important;
    }

    .feature-card {
        position: relative;
        overflow: hidden;
        height: 100%;
        background:
            radial-gradient(circle at 92% 10%, rgba(255, 193, 7, 0.11), transparent 34%),
            linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
        border: 1px solid rgba(15, 42, 64, 0.08);
        border-radius: 26px;
        padding: 32px 25px;
        box-shadow: var(--lis-shadow);
        transition: all 0.25s ease;
    }

    .feature-card::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 4px;
        background: linear-gradient(90deg, var(--lis-gold), var(--lis-teal), var(--lis-blue));
        opacity: 0;
        transition: opacity 0.25s ease;
    }

    .feature-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--lis-shadow-strong);
    }

    .feature-card:hover::before {
        opacity: 1;
    }

    .icon-wrap {
        width: 66px;
        height: 66px;
        border-radius: 23px;
        background:
            linear-gradient(135deg, #ecfdf5 0%, #e9f2ff 100%);
        color: var(--lis-teal);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        margin-bottom: 20px;
        box-shadow: 0 14px 28px rgba(15, 118, 110, 0.10);
    }

    .feature-card h5 {
        color: var(--lis-text);
        font-weight: 950;
        letter-spacing: -0.015em;
        margin-bottom: 11px;
    }

    .feature-card p {
        color: var(--lis-muted);
        line-height: 1.72;
        margin-bottom: 0;
    }

    /* =========================================================
       PACKAGES SECTION
    ========================================================= */

    .light-section {
        position: relative;
        overflow: hidden;
        background:
            radial-gradient(circle at 8% 10%, rgba(255, 193, 7, 0.12), transparent 25%),
            radial-gradient(circle at 92% 8%, rgba(13, 110, 253, 0.08), transparent 28%),
            linear-gradient(180deg, #f5f9ff 0%, #ffffff 100%);
    }

    .light-section .container {
        position: relative;
        z-index: 2;
    }

    .package-card {
        position: relative;
        overflow: hidden;
        background: #ffffff;
        border: 1px solid rgba(15, 42, 64, 0.08);
        border-radius: 28px;
        box-shadow: var(--lis-shadow);
        transition: all 0.25s ease;
    }

    .package-card:hover {
        transform: translateY(-7px);
        box-shadow: 0 26px 62px rgba(15, 23, 42, 0.15);
    }

    .package-featured {
        border: 2px solid var(--lis-gold);
        box-shadow: 0 24px 58px rgba(255, 193, 7, 0.14);
    }

    .featured-label {
        top: 14px;
        right: 14px;
        border-radius: 999px;
        background: linear-gradient(135deg, #ffd45f, var(--lis-gold));
        color: #332100;
        font-weight: 950;
        box-shadow: 0 12px 24px rgba(255, 193, 7, 0.26);
        z-index: 5;
    }

    .package-image {
        height: 230px;
        object-fit: cover;
    }

    .package-image-placeholder {
        background:
            radial-gradient(circle at center, rgba(255, 193, 7, 0.14), transparent 36%),
            linear-gradient(135deg, #ecfdf5, #e9f2ff);
        color: var(--lis-teal);
    }

    .package-body {
        padding: 27px 25px 26px;
    }

    .package-body h4 {
        color: var(--lis-text);
        font-weight: 950;
        letter-spacing: -0.02em;
        margin-bottom: 10px;
    }

    .package-price {
        color: var(--lis-blue);
        font-size: 2.1rem;
        font-weight: 950;
        letter-spacing: -0.035em;
        margin-bottom: 13px;
    }

    .package-price span {
        color: #718096;
        font-size: 0.98rem;
        font-weight: 700;
    }

    .package-body .text-muted {
        color: var(--lis-muted) !important;
        line-height: 1.68;
    }

    .package-mini-list li {
        color: #475569;
        font-weight: 650;
        line-height: 1.55;
    }

    .package-mini-list i {
        color: var(--lis-teal);
    }

    .package-body .btn {
        border-radius: 999px;
        font-weight: 850;
        letter-spacing: 0.01em;
    }

    .package-body .btn-dark {
        background: linear-gradient(135deg, var(--lis-deep), var(--lis-blue));
        border: none;
        box-shadow: 0 14px 28px rgba(13, 110, 253, 0.18);
    }

    .package-body .btn-dark:hover {
        background: linear-gradient(135deg, #06111a, var(--lis-teal));
    }

    .package-body .btn-outline-primary {
        color: var(--lis-blue);
        border-color: rgba(13, 110, 253, 0.36);
        background: #ffffff;
    }

    .package-body .btn-outline-primary:hover {
        background: var(--lis-blue);
        border-color: var(--lis-blue);
        color: #ffffff;
    }

    .package-body .btn-outline-success {
        color: var(--lis-teal);
        border-color: rgba(15, 118, 110, 0.36);
        background: #ffffff;
    }

    .package-body .btn-outline-success:hover {
        background: var(--lis-teal);
        border-color: var(--lis-teal);
        color: #ffffff;
    }

    /* =========================================================
       HOW IT WORKS
    ========================================================= */

    .step-card {
        position: relative;
        overflow: hidden;
        background: #ffffff;
        border: 1px solid rgba(15, 42, 64, 0.08);
        border-radius: 26px;
        padding: 36px 28px;
        box-shadow: var(--lis-shadow);
        transition: all 0.25s ease;
    }

    .step-card::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 5px;
        background: linear-gradient(90deg, var(--lis-gold), var(--lis-teal), var(--lis-blue));
    }

    .step-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--lis-shadow-strong);
    }

    .step-number {
        width: 74px;
        height: 74px;
        border-radius: 26px;
        background: linear-gradient(135deg, var(--lis-teal), var(--lis-blue));
        color: #ffffff;
        box-shadow: 0 16px 30px rgba(13, 110, 253, 0.20);
        font-weight: 950;
    }

    .step-card h5 {
        color: var(--lis-text);
        font-weight: 950;
        letter-spacing: -0.015em;
    }

    .step-card p {
        color: var(--lis-muted);
        line-height: 1.72;
        margin-bottom: 0;
    }

    /* =========================================================
       LIFESTYLE SECTION
    ========================================================= */

    .gradient-section {
        position: relative;
        overflow: hidden;
        background:
            radial-gradient(circle at top left, rgba(255, 193, 7, 0.18), transparent 34%),
            radial-gradient(circle at bottom right, rgba(32, 201, 151, 0.20), transparent 34%),
            linear-gradient(135deg, #061b2a 0%, #0b3d91 52%, #0f766e 100%);
    }

    .gradient-section::before {
        content: "";
        position: absolute;
        width: 420px;
        height: 420px;
        right: -180px;
        top: -180px;
        border-radius: 50%;
        background: rgba(255, 193, 7, 0.10);
    }

    .gradient-section::after {
        content: "";
        position: absolute;
        width: 360px;
        height: 360px;
        left: -160px;
        bottom: -180px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.08);
    }

    .gradient-section .container {
        position: relative;
        z-index: 2;
    }

    .gradient-section h2 {
        font-weight: 950;
        letter-spacing: -0.035em;
        font-size: clamp(2rem, 3.5vw, 3rem);
    }

    .gradient-section p {
        color: rgba(255, 255, 255, 0.84);
        line-height: 1.78;
    }

    .mini-feature-box {
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.16);
        padding: 17px 18px;
        border-radius: 19px;
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 62px;
        backdrop-filter: blur(10px);
        color: #ffffff;
        font-weight: 800;
        transition: all 0.24s ease;
    }

    .mini-feature-box:hover {
        transform: translateY(-3px);
        background: rgba(255, 255, 255, 0.17);
    }

    .mini-feature-box i {
        width: 36px;
        height: 36px;
        min-width: 36px;
        border-radius: 13px;
        background: rgba(255, 193, 7, 0.18);
        color: #ffd36b;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .cta-card-light {
        background:
            radial-gradient(circle at 90% 12%, rgba(255, 193, 7, 0.13), transparent 34%),
            #ffffff;
        border: 1px solid rgba(255, 255, 255, 0.35);
        border-radius: 30px;
        padding: 36px;
        box-shadow: 0 26px 64px rgba(0, 0, 0, 0.22);
    }

    .cta-card-light h4 {
        color: var(--lis-text);
        font-weight: 950;
        letter-spacing: -0.02em;
    }

    .cta-card-light p {
        color: var(--lis-muted) !important;
        line-height: 1.72;
    }

    .cta-card-light .btn {
        border-radius: 999px;
        font-weight: 850;
        letter-spacing: 0.01em;
    }

    .cta-card-light .btn-warning {
        background: linear-gradient(135deg, #ffd45f, var(--lis-gold));
        border: none;
        color: #231707;
    }

    .cta-card-light .btn-outline-dark {
        color: var(--lis-deep);
        border-color: rgba(7, 19, 28, 0.28);
        background: #ffffff;
    }

    .cta-card-light .btn-outline-dark:hover {
        background: var(--lis-deep);
        border-color: var(--lis-deep);
        color: #ffffff;
    }

    /* =========================================================
       FAQ
    ========================================================= */

    .custom-accordion .accordion-item {
        border-radius: 21px !important;
        overflow: hidden;
        margin-bottom: 16px;
        border: 1px solid rgba(15, 42, 64, 0.08);
        box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
    }

    .custom-accordion .accordion-button {
        font-weight: 850;
        color: var(--lis-text);
        padding: 22px 24px;
        background: #ffffff;
    }

    .custom-accordion .accordion-button:not(.collapsed) {
        background:
            linear-gradient(135deg, #ecfdf5, #f8fbff);
        color: var(--lis-teal);
        box-shadow: none;
    }

    .custom-accordion .accordion-button:focus {
        box-shadow: 0 0 0 0.18rem rgba(15, 118, 110, 0.10);
    }

    .custom-accordion .accordion-body {
        color: var(--lis-muted);
        line-height: 1.78;
        padding: 22px 24px;
    }

    /* =========================================================
       FINAL CTA
    ========================================================= */

    .final-cta-section {
        background:
            radial-gradient(circle at 12% 12%, rgba(255, 193, 7, 0.12), transparent 26%),
            linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
    }

    .final-cta-box {
        position: relative;
        overflow: hidden;
        background:
            radial-gradient(circle at top right, rgba(255, 193, 7, 0.18), transparent 32%),
            linear-gradient(135deg, #061b2a 0%, #0b3d91 48%, #0f766e 100%);
        border-radius: 36px;
        padding: 60px 36px;
        box-shadow: 0 28px 70px rgba(15, 23, 42, 0.18);
    }

    .final-cta-box::before {
        content: "";
        position: absolute;
        width: 380px;
        height: 380px;
        left: -170px;
        bottom: -190px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.08);
    }

    .final-cta-box::after {
        content: "";
        position: absolute;
        width: 320px;
        height: 320px;
        right: -150px;
        top: -170px;
        border-radius: 50%;
        background: rgba(255, 193, 7, 0.12);
    }

    .final-cta-box h2,
    .final-cta-box p,
    .final-cta-box .btn {
        position: relative;
        z-index: 2;
    }

    .final-cta-box h2 {
        font-size: clamp(2rem, 4vw, 3.35rem);
        letter-spacing: -0.035em;
        font-weight: 950;
    }

    .final-cta-box .lead {
        max-width: 820px;
        margin-left: auto;
        margin-right: auto;
        color: rgba(255, 255, 255, 0.84);
        line-height: 1.78;
    }

    .final-cta-box .btn {
        border-radius: 999px;
        font-weight: 850;
        letter-spacing: 0.01em;
        box-shadow: 0 16px 32px rgba(0, 0, 0, 0.16);
    }

    .final-cta-box .btn-warning {
        background: linear-gradient(135deg, #ffd45f, var(--lis-gold));
        border: none;
        color: #231707;
    }

    .final-cta-box .btn-warning:hover {
        background: linear-gradient(135deg, #ffe08a, var(--lis-gold));
        color: #231707;
    }

    .final-cta-box .btn-outline-light {
        border-color: rgba(255, 255, 255, 0.44);
        background: rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(10px);
    }

    .final-cta-box .btn-outline-light:hover {
        background: #ffffff;
        border-color: #ffffff;
        color: var(--lis-deep);
    }

    .final-cta-box .btn-light:hover {
        background: var(--lis-gold);
        color: #231707;
    }

    /* =========================================================
       RESPONSIVE
    ========================================================= */

    @media (max-width: 991.98px) {
        .stat-box {
            padding: 24px 15px;
        }

        .package-card,
        .feature-card,
        .step-card {
            border-radius: 24px;
        }

        .cta-card-light {
            padding: 30px;
        }
    }

    @media (max-width: 767.98px) {
        .section-heading h2 {
            font-size: 1.95rem;
        }

        .package-image {
            height: 210px;
        }

        .cta-card-light {
            padding: 26px;
            border-radius: 24px;
        }

        .final-cta-box {
            padding: 42px 22px;
            border-radius: 28px;
        }

        .final-cta-box .btn {
            width: 100%;
        }
    }

    @media (max-width: 420px) {
        .stat-box h3 {
            font-size: 1.45rem;
        }

        .section-heading h2 {
            font-size: 1.8rem;
        }

        .package-body {
            padding: 23px 21px;
        }

        .step-card {
            padding: 32px 22px;
        }
    }

        /* =========================================================
       HERO MONTHLY LIFESTYLE CARD - PREMIUM TOUCH ONLY
       No size or positioning changes
    ========================================================= */

    .hero-info-card {
        position: relative;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.34);
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.96));
        box-shadow:
            0 26px 70px rgba(0, 0, 0, 0.24),
            0 0 0 1px rgba(255, 255, 255, 0.18) inset;
        backdrop-filter: blur(14px);
    }

    .hero-info-card::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 5px;
        background: linear-gradient(90deg, #ffc107, #20c997, #0d6efd);
        z-index: 3;
    }

    .hero-info-card::after {
        content: "";
        position: absolute;
        width: 180px;
        height: 180px;
        right: -90px;
        top: -90px;
        border-radius: 50%;
        background: rgba(255, 193, 7, 0.14);
        pointer-events: none;
        z-index: 1;
    }

    .hero-info-content,
    .hero-info-action {
        position: relative;
        z-index: 2;
    }

    .hero-info-content {
        background:
            radial-gradient(circle at 92% 8%, rgba(255, 193, 7, 0.11), transparent 32%),
            linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
        border: 1px solid rgba(13, 110, 253, 0.08);
    }

    .hero-info-content h4 {
        color: #102033;
        font-weight: 900;
        letter-spacing: -0.025em;
        display: flex;
        align-items: center;
        gap: 0.55rem;
    }

    .hero-info-content h4::before {
        content: "\F586";
        font-family: "bootstrap-icons";
        width: 36px;
        height: 36px;
        border-radius: 14px;
        background: linear-gradient(135deg, rgba(255, 193, 7, 0.20), rgba(32, 201, 151, 0.14));
        color: #0f766e;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.05rem;
        flex-shrink: 0;
    }

    .price-tier-item {
        border-bottom-color: rgba(15, 42, 64, 0.10);
        transition: background 0.22s ease, transform 0.22s ease;
    }

    .price-tier-item:hover {
        background: rgba(13, 110, 253, 0.035);
        transform: translateX(2px);
    }

    .price-tier-text h6 {
        color: #102033;
        font-weight: 850;
        letter-spacing: -0.01em;
    }

    .price-tier-text small {
        color: #64748b;
        line-height: 1.45;
    }

    .price-tier-item strong {
        color: #0f766e;
        font-weight: 950;
        letter-spacing: -0.02em;
        padding: 0.2rem 0.6rem;
        border-radius: 999px;
        background: rgba(15, 118, 110, 0.08);
        border: 1px solid rgba(15, 118, 110, 0.12);
    }

    .hero-info-content hr {
        border-color: rgba(15, 42, 64, 0.12);
        opacity: 1;
    }

    .hero-info-content p.small {
        color: #64748b !important;
        line-height: 1.62;
        padding: 0.85rem 0.95rem;
        border-radius: 16px;
        background: rgba(255, 193, 7, 0.10);
        border: 1px solid rgba(255, 193, 7, 0.18);
    }

    .hero-info-action .btn-dark {
        border: none;
        border-radius: 999px;
        background: linear-gradient(135deg, #07131c, #0d6efd);
        font-weight: 850;
        letter-spacing: 0.01em;
        box-shadow: 0 16px 32px rgba(13, 110, 253, 0.22);
        transition: all 0.22s ease;
    }

    .hero-info-action .btn-dark:hover {
        background: linear-gradient(135deg, #07131c, #0f766e);
        transform: translateY(-2px);
        box-shadow: 0 20px 38px rgba(15, 118, 110, 0.26);
    }
</style>

<!-- HERO -->
<section class="hero-section position-relative overflow-hidden">
    <div class="hero-bg-image"></div>
    <div class="hero-overlay"></div>

    <div class="container position-relative hero-content">
        <div class="row align-items-center min-vh-75 gx-lg-5">
            <div class="col-lg-7 text-white">
                <span class="hero-badge mb-3 d-inline-block">
                    Affordable Tropical Living for International Guests
                </span>

                <h1 class="display-4 fw-bold mb-3 hero-title">
                    Live Better in Sri Lanka <br> for Less
                </h1>

                <p class="lead mb-4 hero-subtitle">
                    Discover practical, comfortable, premium, and luxury lifestyle packages for guests
                    who want peaceful living, tropical beauty, lower monthly costs, and local support.
                </p>

                <div class="d-flex flex-wrap gap-3 mb-4 hero-buttons">
                    <a href="{% url 'expat_life:package_list' %}" class="btn btn-warning btn-lg px-4">
                        Explore Packages
                    </a>

                    {% if is_foreigner_user %}
                        <a href="{% url 'expat_life:foreigner_dashboard' %}" class="btn btn-outline-light btn-lg px-4">
                            My Guest Dashboard
                        </a>
                    {% else %}
                        <a href="{% url 'expat_life:foreigner_signup' %}" class="btn btn-outline-light btn-lg px-4">
                            Guest Signup
                        </a>
                    {% endif %}

                    <a href="{% url 'expat_life:sri_lanka_digital_nomad_visa' %}"
                       class="btn btn-success btn-lg px-4 fw-semibold shadow hero-visa-btn">
                        🌴 Digital Nomad Visa
                    </a>
                </div>

                <!-- Multilingual Information Center Notice -->
                <div class="hero-language-info mb-4">
                    <div class="d-flex align-items-start gap-3">
                        <div class="hero-language-icon">
                            <i class="bi bi-translate"></i>
                        </div>

                        <div class="flex-grow-1">
                            <span class="hero-language-mini">
                                Available in 11 major languages
                            </span>

                            <h5 class="fw-bold mb-2">
                                Prefer it in your language?
                            </h5>

                            <p class="mb-3">
                                Read, download, listen, or watch our Sri Lanka living guides in major international languages.
                            </p>

                            <div class="hero-language-flags mb-3">
                                <span>🇬🇧 English</span>
                                <span>🇳🇱 Dutch</span>
                                <span>🇨🇳 Chinese</span>
                                <span>🇯🇵 Japanese</span>
                                <span>🇫🇷 French</span>
                                <span>🇪🇸 Spanish</span>
                                <span>🇮🇹 Italian</span>
                                <span>🇩🇪 German</span>
                                <span>🇵🇹 Portuguese</span>
                                <span>🇷🇺 Russian</span>
                                <span>🇮🇳 Hindi</span>
                            </div>

                            <a href="{% url 'expat_life:marketing_resources' %}"
                               class="btn btn-light btn-sm rounded-pill px-3 fw-semibold">
                                <i class="bi bi-folder2-open me-1"></i>
                                Open Information Center
                            </a>
                        </div>
                    </div>
                </div>

                <div class="hero-points row g-3 mt-2">
                    <div class="col-sm-6">
                        <div class="hero-point-box">
                            <i class="bi bi-house-door-fill"></i>
                            <span>Affordable Rental Guidance</span>
                        </div>
                    </div>

                    <div class="col-sm-6">
                        <div class="hero-point-box">
                            <i class="bi bi-wifi"></i>
                            <span>Remote Work Friendly</span>
                        </div>
                    </div>

                    <div class="col-sm-6">
                        <div class="hero-point-box">
                            <i class="bi bi-geo-alt-fill"></i>
                            <span>Beach, City, or Hill Country</span>
                        </div>
                    </div>

                    <div class="col-sm-6">
                        <div class="hero-point-box">
                            <i class="bi bi-people-fill"></i>
                            <span>Trusted Local Support</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-5 mt-5 mt-lg-0">
                <div class="hero-card-wrapper">
                    <div class="hero-info-card shadow-lg">
                        <div class="hero-info-content">
                            <h4 class="fw-bold mb-4">Monthly Lifestyle Ranges</h4>

                            <div class="price-tier-item">
                                <div class="price-tier-text">
                                    <h6 class="mb-1">Startup Package</h6>
                                    <small>Basic simple long-stay lifestyle</small>
                                </div>
                                <strong>$500</strong>
                            </div>

                            <div class="price-tier-item">
                                <div class="price-tier-text">
                                    <h6 class="mb-1">Comfort Package</h6>
                                    <small>Good living with more convenience</small>
                                </div>
                                <strong>$1,000</strong>
                            </div>

                            <div class="price-tier-item">
                                <div class="price-tier-text">
                                    <h6 class="mb-1">Premium Package</h6>
                                    <small>Work-friendly and visa-ready lifestyle</small>
                                </div>
                                <strong>$2,000</strong>
                            </div>

                            <div class="price-tier-item border-0 pb-0 mb-0">
                                <div class="price-tier-text">
                                    <h6 class="mb-1">Luxury Package</h6>
                                    <small>Spacious tropical comfort and service</small>
                                </div>
                                <strong>$3,000</strong>
                            </div>

                            <hr class="my-4">

                            <p class="small text-muted mb-0">
                                Start with a guest signup, discuss your needs, then confirm arrangements with a $100 booking confirmation.
                            </p>
                        </div>

                        <div class="hero-info-action">
                            <a href="{% url 'expat_life:consultation_request' %}" class="btn btn-dark w-100 btn-lg">
                                Book Consultation
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- STATS -->
<section class="stats-section py-4">
    <div class="container">
        <div class="row g-3">
            <div class="col-6 col-lg-3">
                <div class="stat-box text-center">
                    <h3>$500</h3>
                    <p class="mb-0">Startup Living Option</p>
                </div>
            </div>
            <div class="col-6 col-lg-3">
                <div class="stat-box text-center">
                    <h3>4</h3>
                    <p class="mb-0">Lifestyle Packages</p>
                </div>
            </div>
            <div class="col-6 col-lg-3">
                <div class="stat-box text-center">
                    <h3>Islandwide</h3>
                    <p class="mb-0">Location Possibilities</p>
                </div>
            </div>
            <div class="col-6 col-lg-3">
                <div class="stat-box text-center">
                    <h3>$100</h3>
                    <p class="mb-0">Confirmation Step</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- WHY SRI LANKA -->
<section class="py-5 bg-white">
    <div class="container">
        <div class="section-heading text-center mb-5">
            <span class="section-mini-title">Why Choose Sri Lanka</span>
            <h2 class="fw-bold">A Beautiful Island with a Lower Cost Lifestyle</h2>
            <p class="text-muted">
                Sri Lanka offers tropical weather, beautiful beaches, green mountains, warm hospitality,
                and a lifestyle that can be far more affordable than many Western countries.
            </p>
        </div>

        <div class="row g-4">
            <div class="col-md-6 col-lg-3">
                <div class="feature-card h-100">
                    <div class="icon-wrap"><i class="bi bi-cash-coin"></i></div>
                    <h5>Affordable Living</h5>
                    <p>Housing, food, transport, and local services can be far more affordable than in many developed countries.</p>
                </div>
            </div>

            <div class="col-md-6 col-lg-3">
                <div class="feature-card h-100">
                    <div class="icon-wrap"><i class="bi bi-brightness-high-fill"></i></div>
                    <h5>Tropical Lifestyle</h5>
                    <p>Enjoy sunshine, beaches, ocean views, coconut trees, and year-round island living.</p>
                </div>
            </div>

            <div class="col-md-6 col-lg-3">
                <div class="feature-card h-100">
                    <div class="icon-wrap"><i class="bi bi-laptop-fill"></i></div>
                    <h5>Remote Work Friendly</h5>
                    <p>Suitable for freelancers, online business owners, consultants, retirees, and slow travelers.</p>
                </div>
            </div>

            <div class="col-md-6 col-lg-3">
                <div class="feature-card h-100">
                    <div class="icon-wrap"><i class="bi bi-heart-fill"></i></div>
                    <h5>Warm Hospitality</h5>
                    <p>Friendly local culture, helpful people, and a welcoming social environment make settling easier.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- PACKAGES -->
<section class="py-5 light-section">
    <div class="container">
        <div class="section-heading text-center mb-5">
            <span class="section-mini-title">Lifestyle Packages</span>
            <h2 class="fw-bold">Choose the Package That Matches Your Budget</h2>
            <p class="text-muted">
                Whether you want a basic start or a premium tropical lifestyle, we help you plan the right setup.
            </p>
        </div>

        <div class="row g-4">
            {% for package in all_packages %}
            <div class="col-md-6 col-lg-3">
                <div class="package-card h-100 {% if package.is_featured %}package-featured{% endif %}">
                    {% if package.is_featured %}
                    <div class="featured-label">Popular</div>
                    {% endif %}

                    {% if package.image %}
                        <img src="{{ package.image.url }}" class="package-image" alt="{{ package.name }}">
                    {% else %}
                        <div class="package-image package-image-placeholder d-flex align-items-center justify-content-center">
                            <i class="bi bi-house-heart-fill"></i>
                        </div>
                    {% endif %}

                    <div class="package-body">
                        <h4 class="fw-bold">{{ package.name }}</h4>
                        <div class="package-price">${{ package.monthly_price_usd }}<span>/month</span></div>
                        <p class="text-muted">{{ package.short_description }}</p>

                        <ul class="package-mini-list">
                            <li><i class="bi bi-check-circle-fill"></i> Housing guidance included</li>
                            <li><i class="bi bi-check-circle-fill"></i> Budget-based planning</li>
                            <li><i class="bi bi-check-circle-fill"></i> Local support process</li>
                        </ul>

                        <div class="mt-4 d-grid gap-2">
                            <a href="{% url 'expat_life:package_detail' package.slug %}" class="btn btn-dark">
                                View Details
                            </a>
                            {% if not request.user.is_authenticated or not foreigner_profile %}
                                <a href="{% url 'expat_life:foreigner_signup' %}" class="btn btn-outline-primary">
                                    Get Started
                                </a>
                            {% else %}
                                <a href="#" class="btn btn-outline-success">
                                    Next Steps
                                </a>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

<!-- HOW IT WORKS -->
<section class="py-5 bg-white">
    <div class="container">
        <div class="section-heading text-center mb-5">
            <span class="section-mini-title">Simple Process</span>
            <h2 class="fw-bold">How It Works</h2>
            <p class="text-muted">
                A clear and easy process to help guests explore living in Sri Lanka.
            </p>
        </div>

        <div class="row g-4">
            <div class="col-md-4">
                <div class="step-card text-center h-100">
                    <div class="step-number">01</div>
                    <h5 class="fw-bold">Guest Signup</h5>
                    <p>
                        Submit your details, monthly budget, arrival plans, and package interest through our guest signup form.
                    </p>
                </div>
            </div>

            <div class="col-md-4">
                <div class="step-card text-center h-100">
                    <div class="step-number">02</div>
                    <h5 class="fw-bold">Consultation & Guidance</h5>
                    <p>
                        We discuss suitable locations, housing expectations, budget fit, and the best package for your lifestyle.
                    </p>
                </div>
            </div>

            <div class="col-md-4">
                <div class="step-card text-center h-100">
                    <div class="step-number">03</div>
                    <h5 class="fw-bold">$100 Confirmation</h5>
                    <p>
                        Once approved and ready to proceed, you confirm your arrangement so the next practical steps can begin.
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- LIFESTYLE SECTION -->
<section class="py-5 gradient-section text-white">
    <div class="container">
        <div class="row align-items-center g-5">
            <div class="col-lg-6">
                <span class="section-mini-title section-mini-title-light">Lifestyle Possibilities</span>
                <h2 class="fw-bold mb-3">From Simple Living to Tropical Comfort</h2>
                <p class="mb-4">
                    Sri Lanka can suit many lifestyles: peaceful beachside living, mountain relaxation,
                    city convenience, or a work-from-paradise setup.
                </p>

                <div class="row g-3">
                    <div class="col-sm-6">
                        <div class="mini-feature-box">
                            <i class="bi bi-house-fill"></i>
                            <span>Rental Guidance</span>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="mini-feature-box">
                            <i class="bi bi-basket-fill"></i>
                            <span>Food & Living Advice</span>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="mini-feature-box">
                            <i class="bi bi-car-front-fill"></i>
                            <span>Transport Options</span>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="mini-feature-box">
                            <i class="bi bi-person-workspace"></i>
                            <span>Remote Worker Friendly</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-6">
                <div class="cta-card-light">
                    <h4 class="fw-bold mb-3">Ready to Explore Sri Lanka?</h4>
                    <p class="text-muted mb-4">
                        Start with a guest signup and let us understand your income level, timeline,
                        and the kind of lifestyle you want.
                    </p>
                    <div class="d-grid gap-3">
                        {% if is_foreigner_user %}
                            <a href="{% url 'expat_life:foreigner_dashboard' %}" class="btn btn-warning btn-lg">
                                Go to Guest Dashboard
                            </a>
                        {% else %}
                            <a href="{% url 'expat_life:foreigner_signup' %}" class="btn btn-warning btn-lg">
                                Start Guest Signup
                            </a>
                        {% endif %}
                        <a href="{% url 'expat_life:contact_page' %}" class="btn btn-outline-dark btn-lg">
                            Contact Us First
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- FAQ -->
<section class="py-5 bg-white">
    <div class="container">
        <div class="section-heading text-center mb-5">
            <span class="section-mini-title">Questions</span>
            <h2 class="fw-bold">Frequently Asked Questions</h2>
        </div>

        <div class="accordion custom-accordion" id="faqAccordion">
            <div class="accordion-item">
                <h2 class="accordion-header" id="faqOne">
                    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
                        Is the package price a direct rent payment?
                    </button>
                </h2>
                <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
                    <div class="accordion-body">
                        No. These are planning-based lifestyle package levels to guide the kind of monthly living standard a guest may target in Sri Lanka.
                    </div>
                </div>
            </div>

            <div class="accordion-item">
                <h2 class="accordion-header" id="faqTwo">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo">
                        Can I apply before arriving in Sri Lanka?
                    </button>
                </h2>
                <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                    <div class="accordion-body">
                        Yes. You can sign up in advance, explain your expected arrival date, and discuss options before traveling.
                    </div>
                </div>
            </div>

            <div class="accordion-item">
                <h2 class="accordion-header" id="faqThree">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree">
                        What happens after the consultation?
                    </button>
                </h2>
                <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                    <div class="accordion-body">
                        After discussing your requirements, you can confirm interest and proceed with the $100 confirmation step before arrangement work starts.
                    </div>
                </div>
            </div>

            <div class="accordion-item">
                <h2 class="accordion-header" id="faqFour">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour">
                        Will there be private listings later?
                    </button>
                </h2>
                <div id="collapseFour" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                    <div class="accordion-body">
                        Yes. In the next phase, verified housing and support listings can be made visible only to confirmed guests.
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- FINAL CTA -->
<section class="final-cta-section py-5">
    <div class="container">
        <div class="final-cta-box text-center text-white">
            <h2 class="fw-bold mb-3">Start Your Sri Lanka Living Journey</h2>
            <p class="lead mb-4">
                Explore packages, complete a guest signup, and take the first step toward a more affordable and enjoyable lifestyle.
            </p>
            <div class="d-flex flex-wrap justify-content-center gap-3">
                <a href="{% url 'expat_life:package_list' %}" class="btn btn-warning btn-lg px-4">View Packages</a>
                {% if is_foreigner_user %}
                    <a href="{% url 'expat_life:foreigner_dashboard' %}" class="btn btn-outline-light btn-lg px-4">My Guest Dashboard</a>
                {% else %}
                    <a href="{% url 'expat_life:foreigner_signup' %}" class="btn btn-outline-light btn-lg px-4">Guest Signup</a>
                {% endif %}
                <a href="{% url 'expat_life:consultation_request' %}" class="btn btn-light btn-lg px-4">Book Consultation</a>
            </div>
        </div>
    </div>
</section>

{% endblock %}