* {

    box-sizing: border-box;

}



body {

    margin: 0;

    font-family: Arial, sans-serif;

    background: #f7fbff;

    color: #1f2937;

}



/* NAVBAR */

.navbar {

    position: sticky;

    top: 0;

    z-index: 1000;



    display: flex;

    justify-content: space-between;

    align-items: center;



    padding: 20px 40px;



    background: rgba(255, 255, 255, 0.85);

    backdrop-filter: blur(12px);

}



.logo {

    font-size: 24px;

    font-weight: 800;

    color: #0ea5e9;

}



.nav-links {

    display: flex;

    gap: 25px;

}



.nav-links a {

    text-decoration: none;

    color: #1f2937;

    font-weight: 600;

}



.nav-links a:hover {

    color: #0ea5e9;

}



/* HERO */

.hero {

    min-height: 85vh;



    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;



    text-align: center;

    padding: 80px 20px;



    background:

        radial-gradient(circle at top right, #7cc8ff 0%, transparent 28%),

        radial-gradient(circle at bottom left, #ccecff 0%, transparent 30%),

        #f7fbff;

}



.hero-tag {

    display: inline-block;

    padding: 10px 18px;

    border-radius: 999px;



    background: rgba(56, 189, 248, 0.15);

    color: #0ea5e9;



    font-weight: 700;

    margin-bottom: 25px;

}



.hero h1 {

    max-width: 900px;

    font-size: 72px;

    font-weight: 800;

    line-height: 1;

    letter-spacing: -2px;

    margin: 0 0 25px;

}



.hero p {

    max-width: 700px;

    font-size: 22px;

    line-height: 1.6;

    color: #5b6575;

    margin: 0;

}



.hero-buttons {

    display: flex;

    gap: 15px;

    margin-top: 35px;

    flex-wrap: wrap;

    justify-content: center;

}



/* BUTTONS */

.btn,

.btn-secondary {

    display: inline-block;

    padding: 16px 34px;

    border-radius: 999px;



    text-decoration: none;

    font-weight: 700;



    transition: 0.3s ease;

}



.btn {

    background: linear-gradient(135deg, #38bdf8, #0ea5e9);

    color: white;

    box-shadow: 0 10px 25px rgba(14, 165, 233, 0.25);

}



.btn:hover {

    transform: translateY(-3px);

    box-shadow: 0 15px 35px rgba(14, 165, 233, 0.35);

}



.btn-secondary {

    background: white;

    color: #0ea5e9;

    border: 2px solid #0ea5e9;

}



.btn-secondary:hover {

    background: #0ea5e9;

    color: white;

}



/* HERO STATS */

.hero-stats {

    display: flex;

    gap: 50px;

    margin-top: 55px;

    flex-wrap: wrap;

    justify-content: center;

}



.hero-stats div {

    text-align: center;

}



.hero-stats strong {

    display: block;

    font-size: 30px;

    color: #0ea5e9;

}



.hero-stats span {

    color: #64748b;

    font-weight: 500;

}



/* SECTIONS */

section {

    padding: 100px 20px;

    text-align: center;

}



section h2 {

    font-size: 42px;

    margin-bottom: 20px;

}



.services-text {

    max-width: 700px;

    margin: 0 auto 50px;

    font-size: 18px;

    color: #64748b;

    line-height: 1.7;

}



/* ABOUT */

.about-box {

    max-width: 1000px;

    margin: 0 auto;



    display: flex;

    align-items: center;

    gap: 50px;



    background: white;

    padding: 40px;



    border-radius: 30px;

    border: 1px solid rgba(56, 189, 248, 0.15);



    box-shadow: 0 20px 50px rgba(56, 189, 248, 0.12);

}



.about-box img {

    width: 300px;



    border-radius: 35px;



    box-shadow:

    0 25px 60px rgba(0,0,0,0.12);

}



.about-text {

    text-align: left;

}



.about-text p {

    color: #64748b;

    font-size: 18px;

    line-height: 1.7;

}



/* SERVICES */

.services {

    max-width: 1300px;

    margin: auto;

}



.cards {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 30px;



    margin-top: 50px;

}



.card {

    width: 100%;

    max-width: 720px;



    background: white;

    padding: 45px;



    border-radius: 30px;

    border: 1px solid rgba(56, 189, 248, 0.15);



    box-shadow: 0 15px 40px rgba(56, 189, 248, 0.12);



    transition: 0.3s ease;

    text-align: center;

}



.card:hover {

    transform: translateY(-8px);

    box-shadow: 0 25px 60px rgba(56, 189, 248, 0.2);

}



.highlight {

    background: linear-gradient(135deg, #38bdf8, #0ea5e9);

    color: white;

    transform: scale(1.03);

}



.highlight h3,

.highlight .price,

.highlight .period,

.highlight .features li {

    color: white;

}



.badge {

    display: inline-block;



    background: white;

    color: #0ea5e9;



    padding: 8px 16px;

    border-radius: 999px;



    font-size: 12px;

    font-weight: 800;



    margin-bottom: 20px;

}



.price {

    font-size: 56px;

    font-weight: 800;

    color: #0ea5e9;

    line-height: 1;

}



.period {

    color: #64748b;

    margin-top: 10px;

    margin-bottom: 30px;

    font-size: 16px;

}



.features {

    list-style: none;

    padding: 0;

    margin: 30px 0;

}



.features li {

    padding: 10px 0;

    font-size: 18px;

    color: #475569;

}



/* STEPS */

.steps ol {

    display: inline-block;

    text-align: left;

    font-size: 18px;

    line-height: 2;

}



/* CONTACT */

.contact p {

    color: #64748b;

    font-size: 18px;

}



.socials {

    margin-top: 25px;



    display: flex;

    justify-content: center;

    gap: 15px;

    flex-wrap: wrap;

}



.social-btn {

    padding: 14px 24px;



    background: #e8f3ff;

    color: #0ea5e9;



    text-decoration: none;

    border-radius: 999px;

    font-weight: 800;



    transition: 0.3s;

}



.social-btn:hover {

    transform: translateY(-2px);

    background: #d6ecff;

}



.social-btn.whatsapp {

    background: #25D366;

    color: white;

}



/* FLOATING BUTTONS */

.floating-socials {

    position: fixed;

    bottom: 20px;

    right: 20px;



    display: flex;

    flex-direction: column;

    gap: 12px;



    z-index: 999;

}



.float-btn {

    width: 60px;

    height: 60px;



    border-radius: 50%;



    display: flex;

    align-items: center;

    justify-content: center;



    font-size: 26px;

    text-decoration: none;



    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);



    transition: 0.3s;

}



.float-btn:hover {

    transform: scale(1.1);

}



.float-btn.insta {

    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);

    color: white;

}



.float-btn.whatsapp {

    background: #25D366;

    color: white;

}



/* FOOTER */

footer {

    background: #0ea5e9;

    color: white;

    text-align: center;

    padding: 25px;

}

.plan-type {

    font-weight: 700;

    color: #0ea5e9;

    margin-bottom: 20px;

}



.highlight .plan-type {

    color: white;

}

.pro-text {

    font-weight: 600;

    margin-bottom: 25px;

    opacity: 0.95;

}

/* MOBILE */

@media (max-width: 768px) {

    .navbar {

        padding: 16px 20px;

    }



    .nav-links {

        gap: 15px;

    }



    .logo {

        font-size: 20px;

    }



    .hero {

        min-height: auto;

        padding: 80px 15px;

    }



    .hero h1 {

        font-size: 42px;

        letter-spacing: -1px;

    }



    .hero p {

        font-size: 16px;

    }



    .hero-stats {

        gap: 25px;

    }



    section {

        padding: 60px 15px;

    }



    section h2 {

        font-size: 30px;

    }



    .about-box {

        flex-direction: column;

        padding: 28px;

    }



    .about-text {

        text-align: center;

    }



    .about-box img {

        width: 100%;

        max-width: 300px;

    }



    .card {

        padding: 30px 22px;

        border-radius: 24px;

    }



    .price {

        font-size: 38px;

    }



    .features li {

        font-size: 16px;

    }



    .social-btn {

        width: 100%;

        text-align: center;

    }



    .floating-socials {

        bottom: 15px;

        right: 15px;

    }



    .float-btn {

        width: 50px;

        height: 50px;

        font-size: 22px;

    }

}

.about-box {

    transition: 0.3s ease;

}



.about-box:hover {

    transform: translateY(-5px);



    box-shadow:

    0 30px 70px rgba(56,189,248,0.18);

}