:root {
    --primary:#C7F000;
    --primary-soft:#D9FF35;
    --black:#030303;
    --dark:#090909;
    --panel:#101010;
    --line:rgba(255,255,255,.14);
    --muted:#bdbdbd;
    --white:#ffffff;
}

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    background:
        radial-gradient(circle at 70% 8%, rgba(199,240,0,.12), transparent 28%),
        linear-gradient(180deg, #030303 0%, #090909 55%, #020202 100%);
    color:var(--white);
    overflow-x:hidden;
}

body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:-1;
    opacity:.28;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size:48px 48px;
}

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

a{
    color:inherit;
    text-decoration:none;
}

section,
footer{
    scroll-margin-top:110px;
}

a:focus-visible{
    outline:3px solid var(--primary);
    outline-offset:4px;
}

.navbar{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000;
    min-height:88px;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:34px;
    padding:18px 4.8%;
    background:rgba(0,0,0,.92);
    border-bottom:1px solid var(--line);
    backdrop-filter:blur(18px);
}

.logo{
    display:flex;
    align-items:flex-end;
    gap:6px;
    line-height:.8;
    letter-spacing:0;
}

.logo-mark{
    position:relative;
    font-family:'Anton',sans-serif;
    font-size:2.1rem;
    font-style:italic;
    color:var(--white);
    text-shadow:0 0 18px rgba(255,255,255,.16);
}

.logo-mark::before{
    content:"";
    position:absolute;
    top:-11px;
    right:3px;
    width:18px;
    height:12px;
    border:2px solid var(--primary);
    border-bottom:0;
    transform:skew(-14deg);
}

.logo-name{
    font-family:'Anton',sans-serif;
    font-size:1.35rem;
    color:var(--primary);
}

nav ul{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:34px;
    list-style:none;
}

nav{
    scrollbar-width:none;
}

nav::-webkit-scrollbar{
    display:none;
}

nav a{
    position:relative;
    font-family:'Bebas Neue',sans-serif;
    font-size:.96rem;
    letter-spacing:.7px;
    color:var(--white);
}

nav a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-8px;
    width:0;
    height:2px;
    background:var(--primary);
    transition:width .2s ease;
}

nav a:hover,
nav a:focus-visible{
    color:var(--primary);
}

nav a:hover::after,
nav a:focus-visible::after{
    width:100%;
}

.btn-primary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    min-height:48px;
    padding:0 24px;
    background:linear-gradient(180deg, var(--primary-soft), var(--primary));
    color:#050505;
    border:1px solid rgba(199,240,0,.7);
    box-shadow:0 0 28px rgba(199,240,0,.15);
    font-family:'Bebas Neue',sans-serif;
    font-size:1rem;
    letter-spacing:.7px;
    text-transform:uppercase;
    transition:transform .2s ease, box-shadow .2s ease;
}

.btn-primary:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 38px rgba(199,240,0,.26);
}

.hero{
    position:relative;
    min-height:100vh;
    display:grid;
    align-items:center;
    padding:126px 7.2% 62px;
    border-bottom:1px solid var(--line);
    overflow:hidden;
}

.hero-media{
    position:absolute;
    inset:88px 0 0;
    z-index:-2;
}

.hero-media img{
    height:100%;
    object-fit:cover;
    object-position:67% center;
    filter:contrast(1.08) saturate(.82) brightness(.78);
}

.hero::before{
    content:"";
    position:absolute;
    inset:88px 0 0;
    z-index:-1;
    background:
        linear-gradient(90deg, rgba(0,0,0,.98) 0%, rgba(0,0,0,.82) 34%, rgba(0,0,0,.26) 64%, rgba(0,0,0,.82) 100%),
        linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.94));
}

.hero-content{
    max-width:620px;
}

.eyebrow{
    margin-bottom:12px;
    color:var(--primary);
    font-family:'Bebas Neue',sans-serif;
    font-size:1.22rem;
    letter-spacing:5px;
    text-transform:uppercase;
}

.hero h1,
section h2{
    font-family:'Anton',sans-serif;
    line-height:.94;
    letter-spacing:.8px;
    text-transform:uppercase;
}

.hero h1{
    font-size:clamp(3.8rem, 7vw, 7.2rem);
    max-width:690px;
    text-shadow:0 8px 35px rgba(0,0,0,.85);
}

.hero h1 span,
.hero h1 strong{
    display:block;
}

.hero h1 strong{
    position:relative;
    color:var(--primary);
}

.hero h1 strong::after{
    content:"";
    display:block;
    width:210px;
    height:6px;
    margin-top:14px;
    background:var(--primary);
    box-shadow:0 0 24px rgba(199,240,0,.5);
}

.description,
.section-copy,
.about-content p,
.card p,
.testimonial p{
    color:var(--muted);
    line-height:1.75;
}

.description{
    max-width:510px;
    margin:24px 0 26px;
    font-size:1.08rem;
}

.hero-buttons{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:26px;
}

.btn-video{
    display:inline-flex;
    align-items:center;
    gap:12px;
    font-family:'Bebas Neue',sans-serif;
    letter-spacing:.8px;
    text-transform:uppercase;
}

.btn-video span{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border:2px solid var(--white);
    border-radius:50%;
    font-size:.8rem;
}

.hero-signature{
    position:absolute;
    right:8%;
    bottom:54px;
    text-align:center;
}

.hero-signature span{
    display:block;
    color:var(--primary);
    font-family:'Brush Script MT','Segoe Script',cursive;
    font-size:4.3rem;
    line-height:1;
    transform:rotate(-10deg);
}

.hero-signature p,
.hero-signature strong{
    font-family:'Bebas Neue',sans-serif;
    letter-spacing:1.4px;
    text-transform:uppercase;
}

.hero-signature p{
    margin-top:6px;
    color:var(--white);
}

.hero-signature strong{
    color:var(--primary);
    font-size:.9rem;
}

.section-split{
    display:grid;
    grid-template-columns:.82fr 1fr;
    align-items:center;
    gap:7%;
    padding:0 7.2%;
    border-bottom:1px solid var(--line);
}

.about-image{
    align-self:stretch;
    min-height:390px;
    position:relative;
}

.about-image::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg, transparent 60%, var(--black));
}

.about-image img{
    height:100%;
    min-height:390px;
    object-fit:cover;
    object-position:center;
    filter:grayscale(1) contrast(1.12) brightness(.76);
}

.about-content{
    padding:64px 0;
}

.about-content h2,
.classes h2,
.testimonials h2{
    font-size:clamp(2rem, 3.1vw, 3.3rem);
}

.about-content > p{
    max-width:650px;
    margin-top:18px;
}

.stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    margin-top:38px;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
}

.stat{
    min-height:150px;
    padding:26px 20px;
    border-right:1px solid var(--line);
}

.stat:last-child{
    border-right:0;
}

.stat i{
    color:var(--primary);
    font-size:2rem;
    margin-bottom:16px;
}

.stat h3{
    font-family:'Anton',sans-serif;
    font-size:2rem;
}

.stat p{
    color:var(--white);
    font-family:'Bebas Neue',sans-serif;
    letter-spacing:.8px;
    text-transform:uppercase;
}

.classes,
.testimonials{
    padding:72px 7.2%;
    text-align:center;
    border-bottom:1px solid var(--line);
}

.section-copy{
    max-width:640px;
    margin:14px auto 40px;
}

.cards{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
    text-align:left;
}

.card{
    position:relative;
    overflow:hidden;
    background:var(--panel);
    border:1px solid var(--line);
    box-shadow:0 24px 60px rgba(0,0,0,.28);
}

.card::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:4px;
    background:var(--primary);
    box-shadow:0 0 18px rgba(199,240,0,.55);
}

.card img{
    aspect-ratio:16/8.4;
    object-fit:cover;
    filter:grayscale(1) contrast(1.15) brightness(.72);
}

.card-body{
    position:relative;
    padding:32px 28px 30px;
}

.card-icon{
    position:absolute;
    top:-28px;
    left:24px;
    width:58px;
    height:58px;
    display:grid;
    place-items:center;
    color:#050505;
    background:var(--primary);
    border-radius:50%;
    box-shadow:0 0 24px rgba(199,240,0,.38);
    font-size:1.35rem;
}

.card h3{
    font-family:'Bebas Neue',sans-serif;
    font-size:1.5rem;
    letter-spacing:1px;
    text-transform:uppercase;
}

.card p{
    margin-top:8px;
    font-size:.92rem;
}

.testimonials{
    position:relative;
    overflow:hidden;
    background:
        linear-gradient(rgba(0,0,0,.86), rgba(0,0,0,.92)),
        url("../assets/classes/mindset.jpg") center/cover;
}

.testimonial-grid{
    display:flex;
    gap:22px;
    margin:42px -7.2% 0;
    padding:10px 7.2% 34px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scrollbar-color:var(--primary) rgba(255,255,255,.08);
    scrollbar-width:thin;
    border:0;
    text-align:left;
    cursor:grab;
}

.testimonial-grid::-webkit-scrollbar{
    height:8px;
}

.testimonial-grid::-webkit-scrollbar-track{
    margin:0 7.2vw;
    border-radius:999px;
    background:rgba(255,255,255,.08);
}

.testimonial-grid::-webkit-scrollbar-thumb{
    border-radius:999px;
    background:linear-gradient(90deg, var(--primary), #e6ff66);
}

.testimonial-grid:active{
    cursor:grabbing;
}

.testimonial{
    position:relative;
    flex:0 0 clamp(340px, 31vw, 440px);
    min-height:310px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:34px 36px;
    overflow:hidden;
    border:1px solid rgba(191,255,0,.22);
    border-radius:8px;
    background:
        linear-gradient(145deg, rgba(191,255,0,.11), transparent 34%),
        linear-gradient(180deg, rgba(20,20,20,.94), rgba(5,5,5,.92));
    box-shadow:0 24px 70px rgba(0,0,0,.45);
    scroll-snap-align:start;
    transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.testimonial::before{
    content:"";
    position:absolute;
    inset:0 0 auto;
    height:4px;
    background:linear-gradient(90deg, var(--primary), transparent 74%);
}

.testimonial::after{
    content:"";
    position:absolute;
    right:-42px;
    bottom:-42px;
    width:128px;
    height:128px;
    border:1px solid rgba(191,255,0,.18);
    border-radius:50%;
    opacity:.75;
}

.testimonial:hover{
    transform:translateY(-8px);
    border-color:rgba(191,255,0,.56);
    box-shadow:0 34px 90px rgba(0,0,0,.58), 0 0 34px rgba(191,255,0,.1);
}

.testimonial > i{
    position:relative;
    z-index:1;
    color:var(--primary);
    width:58px;
    height:58px;
    display:grid;
    place-items:center;
    border:1px solid rgba(191,255,0,.38);
    border-radius:50%;
    background:rgba(191,255,0,.08);
    font-size:1.55rem;
    margin-bottom:16px;
}

.testimonial p{
    position:relative;
    z-index:1;
    font-size:1.02rem;
}

.testimonial footer{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    gap:14px;
    margin-top:24px;
}

.testimonial footer span{
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--primary);
    border:1px solid var(--primary);
    color:#030303;
    font-weight:800;
}

.testimonial footer strong{
    font-family:'Bebas Neue',sans-serif;
    letter-spacing:1px;
    text-transform:uppercase;
}

.contact{
    display:grid;
    grid-template-columns:repeat(4,auto);
    justify-content:space-between;
    align-items:center;
    gap:28px;
    padding:24px 7.2%;
    background:#050505;
    border-top:1px solid var(--line);
}

.contact a,
.contact span{
    display:inline-flex;
    align-items:center;
    gap:12px;
    color:var(--white);
}

.contact i{
    color:var(--primary);
    font-size:1.25rem;
}

.contact .btn-primary i{
    color:#050505;
}

.whatsapp-float{
    position:fixed;
    right:22px;
    bottom:22px;
    z-index:900;
    width:58px;
    height:58px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#25D366;
    color:white;
    font-size:1.9rem;
    box-shadow:0 14px 32px rgba(0,0,0,.4);
}

@media(max-width:1100px){
    .navbar{
        grid-template-columns:auto auto;
    }

    nav{
        grid-column:1/-1;
        order:3;
        overflow-x:auto;
    }

    nav ul{
        justify-content:flex-start;
        min-width:max-content;
    }

    .hero{
        padding-top:178px;
    }

    .hero-media,
    .hero::before{
        inset:130px 0 0;
    }

    .cards,
    .stats{
        grid-template-columns:repeat(2,1fr);
    }

    .section-split{
        grid-template-columns:1fr;
    }

    .stat{
        border-right:0;
    }

    .stat:not(:last-child){
        border-bottom:1px solid var(--line);
    }

    .testimonial{
        flex-basis:min(520px, 48vw);
    }

    .contact{
        grid-template-columns:1fr 1fr;
    }
}

@media(max-width:720px){
    .navbar{
        grid-template-columns:1fr auto;
        min-height:122px;
        padding:28px 6% 0;
        gap:18px;
        align-items:start;
        background:#000;
        border-bottom:10px solid rgba(255,255,255,.28);
    }

    .logo-mark{
        font-family:'Anton',sans-serif;
        font-size:2.15rem;
        font-style:normal;
        line-height:1;
    }

    .logo-mark::before{
        display:none;
    }

    .logo-name{
        align-self:center;
        font-size:1.15rem;
        line-height:1;
    }

    .nav-cta{
        min-height:62px;
        padding:0 24px;
        font-size:1.12rem;
    }

    nav{
        display:none;
    }

    nav ul{
        gap:26px;
        min-width:max-content;
    }

    nav a{
        font-size:1.02rem;
    }

    .hero{
        min-height:790px;
        padding:150px 6% 58px;
        align-items:start;
    }

    .hero-media{
        inset:122px 0 0;
    }

    .hero-media img{
        object-position:61% center;
        filter:contrast(1.08) saturate(.88) brightness(.7);
    }

    .hero::before{
        inset:122px 0 0;
        background:
            linear-gradient(90deg, rgba(0,0,0,.96) 0%, rgba(0,0,0,.82) 58%, rgba(0,0,0,.44) 100%),
            linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.96));
    }

    .hero-content{
        max-width:none;
        padding-top:34px;
    }

    .eyebrow{
        margin-bottom:20px;
        font-size:1.35rem;
        letter-spacing:4px;
    }

    .hero h1{
        font-size:clamp(4.05rem, 15.8vw, 5.25rem);
        max-width:680px;
        line-height:.98;
    }

    .hero h1 strong::after{
        width:280px;
        height:7px;
        margin-top:18px;
    }

    .description{
        max-width:650px;
        margin:44px 0 34px;
        font-size:1.42rem;
        line-height:1.55;
    }

    .hero-buttons{
        gap:28px;
    }

    .hero .btn-primary{
        min-height:72px;
        padding:0 28px;
        font-size:1.2rem;
    }

    .btn-video{
        gap:14px;
        font-size:1.15rem;
    }

    .btn-video span{
        width:58px;
        height:58px;
        font-size:.95rem;
    }

    .hero-signature{
        display:none;
    }

    .about{
        position:relative;
        min-height:360px;
        padding-top:0;
        padding-bottom:0;
        overflow:hidden;
    }

    .about-image{
        position:absolute;
        inset:0;
        min-height:100%;
        z-index:-2;
    }

    .about-image::after{
        background:rgba(0,0,0,.82);
    }

    .about-image img{
        min-height:100%;
        height:100%;
        filter:grayscale(1) contrast(1.12) brightness(.45);
    }

    .about-content{
        padding:48px 0 50px;
    }

    .about-content h2{
        max-width:650px;
        font-size:clamp(2rem, 8.4vw, 3rem);
    }

    .about-content > p{
        margin-top:18px;
        font-size:1.05rem;
        line-height:1.55;
    }

    .stats{
        grid-template-columns:repeat(4,1fr);
        gap:0;
        margin-top:28px;
        border-top:0;
        border-bottom:0;
    }

    .stat{
        min-height:82px;
        padding:0 8px;
        text-align:center;
        border-right:1px solid var(--line);
        border-bottom:0;
    }

    .stat:last-child{
        border-right:0;
    }

    .stat i{
        display:none;
    }

    .stat h3{
        font-size:1.8rem;
    }

    .stat p{
        margin-top:4px;
        font-size:.78rem;
        line-height:1.25;
    }

    .section-split,
    .classes,
    .testimonials{
        padding-left:6%;
        padding-right:6%;
    }

    .classes{
        padding-top:62px;
        padding-bottom:70px;
    }

    .classes .eyebrow{
        text-align:center;
        margin-bottom:12px;
    }

    .classes h2{
        max-width:620px;
        margin:0 auto;
        font-size:clamp(2.2rem, 9vw, 3rem);
        line-height:1.08;
    }

    .section-copy{
        max-width:570px;
        margin:18px auto 40px;
        font-size:1.05rem;
        line-height:1.45;
    }

    .cards,
    .contact{
        grid-template-columns:1fr;
    }

    .cards{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:24px;
    }

    .card img{
        aspect-ratio:16/9;
    }

    .card-body{
        min-height:150px;
        padding:38px 18px 22px 88px;
    }

    .card-icon{
        top:-30px;
        left:24px;
        width:68px;
        height:68px;
        font-size:1.45rem;
    }

    .card h3{
        font-size:1.18rem;
        letter-spacing:.6px;
        white-space:nowrap;
    }

    .card p{
        font-size:.92rem;
        line-height:1.45;
    }

    .contact{
        justify-content:start;
    }

    .testimonials{
        padding-top:64px;
        padding-bottom:70px;
        overflow:hidden;
    }

    .testimonials h2{
        max-width:620px;
        margin:0 auto;
        font-size:clamp(2.2rem, 9vw, 3rem);
        line-height:1.08;
    }

    .testimonial-grid{
        display:flex;
        gap:18px;
        margin:34px -6% 0;
        padding:0 6% 18px;
        overflow-x:auto;
        overscroll-behavior-x:contain;
        scroll-snap-type:x mandatory;
        scrollbar-width:none;
        border:0;
    }

    .testimonial-grid::-webkit-scrollbar{
        display:none;
    }

    .testimonial{
        flex:0 0 82%;
        min-height:330px;
        display:flex;
        flex-direction:column;
        justify-content:space-between;
        padding:30px 28px;
        border:1px solid rgba(191,255,0,.28);
        background:
            linear-gradient(145deg, rgba(191,255,0,.11), transparent 34%),
            linear-gradient(180deg, rgba(20,20,20,.94), rgba(5,5,5,.92));
        box-shadow:0 24px 60px rgba(0,0,0,.34);
        scroll-snap-align:start;
    }

    .testimonial:not(:last-child),
    .testimonial:nth-child(n+4){
        border-bottom:1px solid rgba(191,255,0,.28);
        border-top:1px solid rgba(191,255,0,.28);
    }

    .testimonial > i{
        margin-bottom:18px;
    }

    .testimonial p{
        font-size:1rem;
        line-height:1.65;
    }

    .testimonial footer{
        margin-top:26px;
    }

    .testimonial footer strong{
        font-size:1.05rem;
    }
}

@media(max-width:430px){
    .navbar{
        padding-left:5%;
        padding-right:5%;
    }

    .logo-mark{
        font-size:1.78rem;
    }

    .logo-name{
        font-size:.98rem;
    }

    .nav-cta{
        min-height:56px;
        padding:0 18px;
        font-size:1rem;
    }

    .hero{
        min-height:730px;
        padding-left:5%;
        padding-right:5%;
    }

    .hero h1{
        font-size:clamp(3.18rem, 15.4vw, 4.15rem);
    }

    .description{
        margin-top:34px;
        font-size:1.12rem;
    }

    .hero .btn-primary{
        min-height:58px;
        padding:0 20px;
        font-size:1rem;
    }

    .btn-video{
        font-size:.98rem;
    }

    .btn-video span{
        width:48px;
        height:48px;
    }

    .about-content h2{
        font-size:2.05rem;
    }

    .about-content > p{
        font-size:.98rem;
    }

    .stat h3{
        font-size:1.42rem;
    }

    .stat p{
        font-size:.65rem;
    }

    .classes h2{
        font-size:2.18rem;
    }

    .cards{
        gap:14px;
    }

    .card-body{
        min-height:154px;
        padding:34px 12px 20px 70px;
    }

    .card-icon{
        left:16px;
        width:58px;
        height:58px;
    }

    .card h3{
        font-size:.92rem;
    }

    .card p{
        font-size:.78rem;
    }

    .testimonial-grid{
        gap:14px;
    }

    .testimonial{
        flex-basis:86%;
        min-height:350px;
        padding:28px 24px;
    }

    .testimonial p{
        font-size:.94rem;
    }
}
