/* ----------- HOME PAGE ----------- */

.home-page {background: #0f1720; color: white; font-family: Arial, Helvetica, sans-serif; line-height: 1.6;}


/* ----------- HEADER ----------- */

.home-page header {background: linear-gradient(135deg, #101820, #172635); padding: 40px 20px; border-bottom: 1px solid #00aeef;}

.home-page .header-content {max-width: 1200px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap;}

.home-page .header-left {flex: 1; min-width: 320px;}

.home-page .header-left img {width: 120px; margin-bottom: 20px;}

.home-page .header-left h1 {font-size: 48px; margin-bottom: 15px; color: #00aeef;}

.home-page .header-left p {font-size: 18px; color: #d4dbe2; max-width: 700px;}

.home-page .header-right {flex: 1; text-align: center;}

.home-page .header-right img {width: 100%; max-width: 500px; border-radius: 14px; border: 1px solid #00aeef; box-shadow: 0 0 20px rgba(0,174,239,0.2);}


/* ----------- SECTION ----------- */

.home-page .section {max-width: 1200px; margin: auto; padding: 70px 20px;}

.home-page .section h2 {font-size: 34px; margin-bottom: 25px; color: #00aeef;}

.home-page .section p {color: #d4dbe2; margin-bottom: 18px; text-align: justify;}


/* ----------- CARDS ----------- */

.home-page .cards {display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 25px; margin-top: 40px;}

.home-page .card {background: #1c2836; border: 1px solid #26384b; border-radius: 14px; padding: 25px; transition: 0.3s;}

.home-page .card:hover {border-color: #00aeef; transform: translateY(-4px);}

.home-page .card h3 {margin-bottom: 15px; color: #00aeef;}

.home-page .card p {font-size: 15px; color: #c8d0d8;}


/* ----------- IMAGES ----------- */

.home-page .image-section {display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 25px; margin-top: 40px;}

.home-page .image-section img {width: 100%; border-radius: 14px; border: 1px solid #26384b; box-shadow: 0 0 20px rgba(0,0,0,0.3);}


/* ----------- FOOTER ----------- */

.home-page .footer {margin-top: 60px; padding: 30px 20px; text-align: center; background: #101820; border-top: 1px solid #26384b; color: #8ca0b3;}

.home-page .flag-logo {margin-top: 25px; text-align: center;}

.home-page .flag-logo img {width: 90px;}


/* ----------- HERO ----------- */

.home-page .hero {max-width: 1200px; margin: auto; padding: 70px 20px; display: flex; align-items: center; justify-content: space-between; gap: 50px; flex-wrap: wrap;}

.home-page .hero-left {flex: 1; min-width: 320px;}

.home-page .hero-left h2 {font-size: 52px; line-height: 1.2; margin-bottom: 25px; color: white;}

.home-page .hero-left p {font-size: 18px; color: #d4dbe2; margin-bottom: 35px; max-width: 650px;}

.home-page .hero-buttons {display: flex; gap: 15px; flex-wrap: wrap;}

.home-page .btn-primary {background: #00aeef; color: white; padding: 14px 28px; border-radius: 8px; text-decoration: none; font-weight: bold; transition: 0.3s;}

.home-page .btn-primary:hover {background: #0095cc;}

.home-page .btn-secondary {border: 1px solid #00aeef; color: #00aeef; padding: 14px 28px; border-radius: 8px; text-decoration: none; font-weight: bold; transition: 0.3s;}

.home-page .btn-secondary:hover {background: #00aeef; color: white;}

.home-page .hero-right {flex: 1; text-align: center;}

.home-page .hero-right img {width: 100%; max-width: 520px; border-radius: 16px; border: 1px solid #00aeef; box-shadow: 0 0 30px rgba(0,174,239,0.25);}


/* ----------- RESPONSIVE ----------- */

@media (max-width: 768px) {

    .home-page .header-left h1 {font-size: 36px;}

    .home-page .header-left p {font-size: 16px;}

    .home-page .hero-left h2 {font-size: 38px;}

    .home-page .hero-left p {font-size: 16px;}


}


/* ===================================================== */
/* PRICING SECTION */
/* ===================================================== */

.home-page .pricing-cards {
    align-items: stretch;
}

.home-page .pricing-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100%;
    overflow: hidden;
}

.home-page .pricing-card.featured {
    border-color: #00aeef;
    box-shadow: 0 0 25px rgba(0,174,239,0.18);
    transform: scale(1.03);
}

.home-page .pricing-card.featured:hover {
    transform: scale(1.03) translateY(-4px);
}


/* ===================================================== */
/* BADGE */
/* ===================================================== */

.home-page .badge {
    position: absolute;
    top: 16px;
    right: 16px;

    background: #00aeef;

    color: white;

    font-size: 12px;

    font-weight: bold;

    padding: 6px 12px;

    border-radius: 30px;

    box-shadow: 0 0 12px rgba(0,174,239,0.3);
}


/* ===================================================== */
/* PRICE */
/* ===================================================== */

.home-page .price {
    font-size: 42px;

    font-weight: bold;

    color: white;

    margin: 25px 0 10px 0;
}

.home-page .price span {
    font-size: 16px;

    color: #9fb3c8;

    margin-left: 4px;
}


/* ===================================================== */
/* DESCRIPTION */
/* ===================================================== */

.home-page .pricing-description {
    margin-bottom: 25px;

    color: #d4dbe2;

    min-height: 80px;
}


/* ===================================================== */
/* FEATURES LIST */
/* ===================================================== */

.home-page .pricing-card ul {
    list-style: none;

    padding: 0;

    margin: 0 0 30px 0;
}

.home-page .pricing-card ul li {
    position: relative;

    padding-left: 24px;

    margin-bottom: 12px;

    color: #c8d0d8;

    font-size: 15px;
}

.home-page .pricing-card ul li::before {
    content: "✓";

    position: absolute;

    left: 0;

    color: #00aeef;

    font-weight: bold;
}


/* ===================================================== */
/* BUTTON */
/* ===================================================== */

.home-page .btn {
    display: inline-block;

    width: 100%;

    text-align: center;

    background: #00aeef;

    color: white;

    padding: 14px 20px;

    border-radius: 10px;

    text-decoration: none;

    font-weight: bold;

    transition: 0.3s;

    box-sizing: border-box;
}

.home-page .btn:hover {
    background: #0095cc;

    transform: translateY(-2px);
}


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

@media (max-width: 768px) {

    .home-page .price {
        font-size: 34px;
    }

    .home-page .pricing-card.featured {
        transform: none;
    }

    .home-page .pricing-card.featured:hover {
        transform: translateY(-4px);
    }

}