/* ====================================
   VARIABLES
==================================== */

:root{
    --primary:#198754;
    --primary-dark:#146c43;
    --dark:#111827;
    --dark-2:#1f2937;
    --light:#f8fafc;
    --white:#ffffff;
    --text:#374151;

    --radius:22px;
    --radius-sm:14px;

    --shadow-sm:0 5px 15px rgba(0,0,0,.08);
    --shadow:0 15px 40px rgba(0,0,0,.10);
    --shadow-lg:0 25px 60px rgba(0,0,0,.18);

    --transition:.35s ease;
}

/* ====================================
   RESET
==================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:
        Inter,
        system-ui,
        -apple-system,
        sans-serif;

    background:var(--light);
    color:var(--text);

    line-height:1.7;
    overflow-x:hidden;
}

img{
    max-width:100%;
    display:block;
}

a{
    text-decoration:none;
    transition:var(--transition);
}

ul{
    margin:0;
    padding:0;
}

section{
    padding:100px 0;
}

.container{
    max-width:1200px;
}

/* ====================================
   TYPOGRAPHY
==================================== */

h1,h2,h3,h4,h5,h6{
    color:var(--dark);
    font-weight:700;
    line-height:1.2;
}

.display-3{
    font-weight:800;
}

.lead{
    font-size:1.15rem;
}

.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4{
    color:#fff;
}

/* ====================================
   BUTTONS
==================================== */

.btn{
    transition:var(--transition);
}

.btn-success{
    background:var(--primary);
    border:none;
}

.btn-success:hover{
    background:var(--primary-dark);
    transform:translateY(-3px);
}

.btn-lg{
    border-radius:999px;
    padding:15px 34px;
    font-weight:600;
}

.btn-outline-light:hover{
    transform:translateY(-3px);
}

/* ====================================
   NAVBAR
==================================== */

.custom-navbar{
    padding:18px 0;
    transition:var(--transition);
    z-index:999;
}

.custom-navbar.scrolled{
    background:rgba(17,24,39,.95);
    backdrop-filter:blur(15px);
    box-shadow:var(--shadow-sm);
}

.navbar-brand{
    font-size:1.4rem;
}

.nav-link{
    color:#fff !important;
    margin:0 10px;
    font-weight:500;
}

.nav-link:hover{
    opacity:.8;
}

/* ====================================
   HERO
==================================== */

.hero-section{
    min-height:100vh;

    background-image:
    url("../img/intro.jpg");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    position:relative;

    display:flex;
    align-items:center;
}

.hero-overlay{
    position:absolute;
    inset:0;

    background:
    linear-gradient(
        135deg,
        rgba(17,24,39,.92),
        rgba(17,24,39,.65)
    );
}

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

.hero-lead{
    color:rgba(255,255,255,.85);
    font-size:1.15rem;
    max-width:700px;
}

.hero-image{
    border-radius:30px;
    box-shadow:var(--shadow-lg);
    transform:rotate(2deg);
}

/* ====================================
   HERO BADGES
==================================== */

.hero-badges{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;

    background:rgba(255,255,255,.12);

    border:1px solid rgba(255,255,255,.15);

    color:#fff;

    padding:10px 18px;

    border-radius:999px;

    backdrop-filter:blur(10px);
}

.hero-badge i{
    color:#39d98a;
}

/* ====================================
   HERO STATS
==================================== */

.hero-stat{
    background:rgba(255,255,255,.08);

    border:1px solid rgba(255,255,255,.10);

    padding:25px;

    border-radius:20px;

    text-align:center;

    backdrop-filter:blur(10px);
}

.hero-stat h3{
    color:#fff;
    font-size:2rem;
    margin-bottom:10px;
}

.hero-stat p{
    color:rgba(255,255,255,.75);
    margin:0;
}

/* ====================================
   GENERIC SECTIONS
==================================== */

.section-light{
    background:#fff;
}

.section-dark{
    background:var(--dark);
    color:#fff;
}

.section-dark h2{
    color:#fff;
}

/* ====================================
   BENEFITS
==================================== */

.benefit-card{
    background:#fff;
    border-radius:var(--radius);
    padding:35px 30px;
    text-align:center;

    box-shadow:var(--shadow-sm);

    height:100%;

    transition:var(--transition);
}

.benefit-card:hover{
    transform:translateY(-10px);
    box-shadow:var(--shadow);
}

.benefit-card i{
    font-size:3rem;
    color:var(--primary);
    margin-bottom:20px;
}

.benefit-card h4{
    margin-bottom:15px;
}

.benefit-card p{
    margin:0;
}

/* ====================================
   STEPS
==================================== */

.step-card{
    background:#fff;

    border-radius:var(--radius);

    padding:35px;

    text-align:center;

    height:100%;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);
}

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

.step-number{
    width:70px;
    height:70px;

    margin:0 auto 20px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    font-size:1.8rem;
    font-weight:700;
}

/* ====================================
   BUY CARDS
==================================== */

.buy-card{
    background:#fff;

    border-radius:var(--radius);

    padding:40px 30px;

    text-align:center;

    height:100%;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);
}

.buy-card:hover{
    transform:translateY(-10px);
    box-shadow:var(--shadow);
}

.buy-card i{
    font-size:3.5rem;
    color:var(--primary);

    margin-bottom:20px;

    display:block;
}

.buy-card h4{
    margin-bottom:15px;
}

/* ====================================
   WHY US
==================================== */

.why-item{
    display:flex;
    align-items:center;

    gap:12px;

    margin-bottom:18px;

    font-size:1.05rem;
}

.why-item i{
    color:#39d98a;
    font-size:1.2rem;
}

.section-dark img{
    transition:var(--transition);
}

.section-dark img:hover{
    transform:scale(1.02);
}

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

.stats-section{
    background:#fff;
}

.stat-box{
    padding:30px 15px;
}

.stat-box h2{
    font-size:3rem;
    font-weight:800;

    color:var(--primary);

    margin-bottom:10px;
}

.stat-box p{
    margin:0;
    font-size:.95rem;
}

/* ====================================
   SECTION HEADINGS
==================================== */

section h2{
    margin-bottom:15px;
}

section .lead{
    color:#6b7280;
}

/* ====================================
   CARD ANIMATIONS
==================================== */

.benefit-card,
.step-card,
.buy-card{
    position:relative;
    overflow:hidden;
}

.benefit-card::before,
.step-card::before,
.buy-card::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:4px;

    background:var(--primary);

    transform:scaleX(0);

    transform-origin:left;

    transition:var(--transition);
}

.benefit-card:hover::before,
.step-card:hover::before,
.buy-card:hover::before{
    transform:scaleX(1);
}

/* ====================================
   IMAGE EFFECTS
==================================== */

img{
    transition:var(--transition);
}

img:hover{
    transform:translateY(-3px);
}

/* ====================================
   SPACING HELPERS
==================================== */

.mb-6{
    margin-bottom:4rem;
}

.mt-6{
    margin-top:4rem;
}

/* ====================================
   PREMIUM SHADOWS
==================================== */

.shadow-premium{
    box-shadow:
    0 10px 30px rgba(0,0,0,.08),
    0 20px 60px rgba(0,0,0,.08);
}

/* ====================================
   HOVER UTILITIES
==================================== */

.hover-lift{
    transition:var(--transition);
}

.hover-lift:hover{
    transform:translateY(-8px);
}

/* ====================================
   BACKGROUND HELPERS
==================================== */

.bg-gradient-primary{
    background:
    linear-gradient(
        135deg,
        var(--primary),
        #28c76f
    );
}
/* ====================================
   CTA SECTION
==================================== */

.cta-section{
    padding:100px 0;
}

.cta-box{
    background:
    linear-gradient(
        135deg,
        var(--primary),
        #28c76f
    );

    border-radius:30px;

    padding:80px 40px;

    color:#fff;

    box-shadow:var(--shadow-lg);
}

.cta-box h2{
    color:#fff;
}

.cta-box .lead{
    color:rgba(255,255,255,.9);
}

.cta-box .btn{
    min-width:220px;
    margin-top:10px;
}

/* ====================================
   TESTIMONIALS
==================================== */

.testimonial-card{
    background:#fff;

    border-radius:var(--radius);

    padding:35px;

    height:100%;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);
}

.testimonial-card:hover{
    transform:translateY(-10px);
    box-shadow:var(--shadow);
}

.testimonial-card strong{
    color:var(--dark);
}

.text-warning{
    font-size:1.2rem;
    letter-spacing:3px;
}

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

.accordion-item{
    border:none;
    margin-bottom:15px;

    border-radius:18px !important;

    overflow:hidden;

    box-shadow:var(--shadow-sm);
}

.accordion-button{
    padding:22px 25px;

    font-weight:600;

    background:#fff;
}

.accordion-button:not(.collapsed){
    background:#fff;
    color:var(--primary);
}

.accordion-button:focus{
    box-shadow:none;
}

.accordion-body{
    padding:25px;
}

/* ====================================
   FORM
==================================== */

#formular{
    background:#fff;
}

.form-control{
    border-radius:16px;
    border:1px solid #e5e7eb;

    padding:15px 20px;
}

.form-control:focus{
    border-color:var(--primary);

    box-shadow:
    0 0 0 .2rem rgba(25,135,84,.15);
}

textarea.form-control{
    resize:none;
}

.contact-box{
    background:var(--dark);

    color:#fff;

    padding:40px;

    border-radius:var(--radius);

    height:100%;
}

.contact-box h3{
    color:#fff;
}

.contact-box p{
    color:rgba(255,255,255,.85);

    margin-bottom:18px;
}

.contact-box i{
    color:#39d98a;
}

/* ====================================
   FOOTER
==================================== */

footer{
    background:#0f172a;

    color:#fff;

    padding:80px 0 30px;
}

footer h4,
footer h5{
    color:#fff;
    margin-bottom:20px;
}

footer p,
footer li{
    color:rgba(255,255,255,.75);
}

footer ul li{
    margin-bottom:10px;
}

footer hr{
    margin:40px 0 25px;

    border-color:rgba(255,255,255,.12);
}

/* ====================================
   COUNTER ANIMATION READY
==================================== */

.counter{
    transition:all .3s ease;
}

/* ====================================
   MOBILE NAVBAR
==================================== */

@media(max-width:991px){

    .navbar-collapse{
        background:rgba(17,24,39,.98);

        padding:25px;

        border-radius:20px;

        margin-top:15px;
    }

    .nav-link{
        margin:10px 0;
    }

}

/* ====================================
   TABLET
==================================== */

@media(max-width:992px){

    section{
        padding:80px 0;
    }

    .hero-section{
        text-align:center;
    }

    .hero-badges{
        justify-content:center;
    }

    .hero-image{
        margin-top:50px;
        transform:none;
    }

    .hero-stat{
        margin-bottom:15px;
    }

    .why-item{
        justify-content:center;
    }

}

/* ====================================
   MOBILE
==================================== */

@media(max-width:768px){

    .display-3{
        font-size:2.5rem;
    }

    .hero-lead{
        font-size:1rem;
    }

    .hero-badge{
        width:100%;
        justify-content:center;
    }

    .hero-stat h3{
        font-size:1.6rem;
    }

    .benefit-card,
    .step-card,
    .buy-card,
    .testimonial-card{
        padding:25px;
    }

    .cta-box{
        padding:50px 25px;
    }

    .cta-box .btn{
        width:100%;
        margin-bottom:10px;
    }

    .contact-box{
        margin-top:20px;
    }

    .stat-box h2{
        font-size:2.2rem;
    }

}

/* ====================================
   SMALL MOBILE
==================================== */

@media(max-width:576px){

    section{
        padding:65px 0;
    }

    .display-3{
        font-size:2rem;
    }

    .navbar-brand{
        font-size:1.1rem;
    }

    .btn-lg{
        width:100%;
    }

    .hero-stat{
        padding:18px;
    }

    .cta-box{
        border-radius:20px;
    }

}

/* ====================================
   SCROLLBAR
==================================== */

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#f1f1f1;
}

::-webkit-scrollbar-thumb{
    background:var(--primary);
    border-radius:999px;
}

::-webkit-scrollbar-thumb:hover{
    background:var(--primary-dark);
}

/* ====================================
   SELECTION
==================================== */

::selection{
    background:var(--primary);
    color:#fff;
}

/* ====================================
   FINAL UTILITIES
==================================== */

.rounded-premium{
    border-radius:var(--radius);
}

.shadow-hover{
    transition:var(--transition);
}

.shadow-hover:hover{
    box-shadow:var(--shadow);
}

.text-primary-custom{
    color:var(--primary);
}

.bg-light-custom{
    background:var(--light);
}