*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:"Poppins","Inter",sans-serif;
    background:#f5f8fc;
    color:#14243a;
    font-size:17px;
    line-height:1.8;
    overflow-x:hidden;
}

a{
    text-decoration:none;
}

.container{
    width:min(1180px,calc(100% - 40px));
    margin:auto;
}


/* ==============================
   HERO
============================== */

.hero{
    position:relative;
    overflow:hidden;

    padding:105px 0 120px;

    color:white;

    background:
    radial-gradient(
        circle at 85% 15%,
        rgba(14,165,233,.23),
        transparent 30%
    ),
    radial-gradient(
        circle at 10% 90%,
        rgba(37,99,235,.15),
        transparent 30%
    ),
    linear-gradient(
        135deg,
        #020617,
        #06284c 55%,
        #075985
    );
}

.hero:before{
    content:"";

    position:absolute;
    inset:0;

    opacity:.055;

    background-image:
    linear-gradient(
        rgba(255,255,255,.8) 1px,
        transparent 1px
    ),
    linear-gradient(
        90deg,
        rgba(255,255,255,.8) 1px,
        transparent 1px
    );

    background-size:60px 60px;
}

.hero-grid{
    position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:1.15fr .85fr;

    align-items:center;

    gap:75px;
}

.eyebrow,
.section-label{
    display:inline-flex;
    align-items:center;
    gap:10px;

    color:#38bdf8;

    font-size:13px;
    font-weight:800;

    letter-spacing:2px;
}

.eyebrow:before,
.section-label:before{
    content:"";

    width:30px;
    height:2px;

    background:#38bdf8;
}

.hero h1{
    margin-top:22px;

    max-width:850px;

    font-size:clamp(47px,5.7vw,77px);
    line-height:1.02;

    letter-spacing:-3px;

    font-weight:900;
}

.hero h1 span{
    display:block;
    color:#38bdf8;
}

.hero-acronym{
    margin-top:17px;

    color:#bae6fd;

    font-size:36px;
    font-weight:800;

    letter-spacing:2px;
}

.hero-content>p{
    max-width:760px;

    margin-top:18px;

    color:#cbd5e1;

    font-size:19px;
}

.hero-pills{
    display:flex;
    flex-wrap:wrap;

    gap:9px;

    margin-top:25px;
}

.hero-pills span{
    padding:7px 14px;

    border:1px solid rgba(255,255,255,.17);

    border-radius:50px;

    background:rgba(255,255,255,.06);

    color:#dbeafe;

    font-size:12px;
}

.hero-buttons{
    display:flex;
    gap:13px;
    flex-wrap:wrap;

    margin-top:32px;
}


/* BUTTON */

.btn{
    position:relative;
    overflow:hidden;

    display:inline-flex;

    align-items:center;
    justify-content:center;

    min-height:55px;

    padding:0 27px;

    border-radius:12px;

    font-size:15px;
    font-weight:800;

    transition:.25s ease;
}

.btn:hover{
    transform:translateY(-3px);
}

.primary{
    background:#0ea5e9;
    color:#fff;

    box-shadow:
    0 15px 35px rgba(14,165,233,.25);
}

.primary:hover{
    background:#0284c7;
}

.secondary{
    color:#fff;

    border:1px solid rgba(255,255,255,.2);

    background:rgba(255,255,255,.05);
}


/* HERO PANEL */

.hero-panel{
    padding:38px;

    border-radius:25px;

    border:1px solid rgba(255,255,255,.15);

    background:rgba(255,255,255,.07);

    backdrop-filter:blur(18px);

    box-shadow:
    0 35px 80px rgba(0,0,0,.25);
}

.panel-top{
    display:flex;
    justify-content:space-between;
}

.panel-top span{
    color:#7dd3fc;

    font-size:11px;
    font-weight:800;

    letter-spacing:2px;
}

.panel-top strong{
    color:#38bdf8;
}

.big-title{
    margin-top:18px;

    font-size:68px;
    line-height:1;

    font-weight:900;
}

.hero-panel>p{
    margin-top:13px;

    color:#cbd5e1;

    font-size:15px;
}

.line{
    height:1px;

    margin:27px 0;

    background:rgba(255,255,255,.12);
}

.panel-data{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.panel-data div{
    padding:16px;

    border-radius:13px;

    background:rgba(0,0,0,.17);
}

.panel-data small{
    display:block;

    color:#94a3b8;

    font-size:10px;
    font-weight:800;

    letter-spacing:1px;
}

.panel-data strong{
    display:block;

    margin-top:4px;

    color:white;

    font-size:15px;
}

.panel-button{
    display:flex;

    justify-content:center;

    margin-top:24px;
    padding:14px;

    border-radius:12px;

    background:#fff;

    color:#082b50;

    font-size:14px;
    font-weight:800;

    transition:.25s;
}

.panel-button:hover{
    background:#e0f2fe;
}


/* TRUST */

.trust{
    position:relative;

    z-index:5;

    margin-top:-55px;
}

.trust-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);

    overflow:hidden;

    border-radius:20px;

    background:white;

    box-shadow:
    0 25px 60px rgba(15,23,42,.1);
}

.trust-grid>div{
    padding:27px 15px;

    text-align:center;

    border-right:1px solid #e5eaf1;
}

.trust-grid>div:last-child{
    border:0;
}

.trust-grid strong{
    display:block;

    color:#0b3d70;

    font-size:18px;
}

.trust-grid span{
    color:#64748b;

    font-size:12px;
}


/* SECTION */

.section{
    padding:105px 0;

    background:#fff;
}

.grey{
    background:#f5f8fc;
}

.two-column{
    display:grid;
    grid-template-columns:1.2fr .8fr;

    gap:80px;

    align-items:start;
}

.content h2,
.heading h2,
.dark-content h2,
.investment-content h2,
.cta h2{
    margin-top:14px;

    color:#0b1f3a;

    font-size:clamp(36px,4.5vw,56px);

    line-height:1.14;

    letter-spacing:-1.7px;
}

.content h2 span,
.heading h2 span,
.investment-content h2 span,
.cta h2 span{
    color:#0784c5;
}

.content>p{
    margin-top:18px;

    color:#61758a;

    font-size:18px;
}

.highlight{
    margin-top:28px;

    padding:24px 28px;

    border-left:4px solid #0ea5e9;

    border-radius:0 15px 15px 0;

    background:#eaf7ff;
}

.highlight strong{
    color:#0b3d70;

    font-size:18px;
}

.highlight p{
    margin-top:5px;

    color:#526b82;

    font-size:15px;
}


/* INFO CARD */

.info-card{
    padding:36px;

    border-radius:25px;

    color:white;

    background:
    linear-gradient(
        145deg,
        #08254a,
        #0b4779
    );

    box-shadow:
    0 25px 60px rgba(8,36,74,.2);
}

.number{
    display:block;

    color:#38bdf8;

    font-size:13px;
    font-weight:900;
}

.info-card>small{
    display:block;

    margin-top:10px;

    color:#7dd3fc;

    font-size:11px;
    font-weight:800;

    letter-spacing:1.5px;
}

.info-card h3{
    margin-top:13px;

    font-size:27px;
    line-height:1.35;
}

.info-line{
    height:1px;

    margin:27px 0;

    background:rgba(255,255,255,.12);
}

.price-label{
    color:#94a3b8;

    font-size:11px;
}

.price{
    display:block;

    margin-top:3px;

    color:#38bdf8;

    font-size:35px;
    font-weight:900;
}

.per{
    color:#94a3b8;

    font-size:12px;
}


/* HEADING */

.heading{
    max-width:850px;

    margin-bottom:48px;
}

.heading>p{
    margin-top:15px;

    color:#64748b;

    font-size:18px;
}


/* LAW */

.law-grid{
    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:18px;
}

.law-card{
    padding:30px;

    border:1px solid #e1e8f0;

    border-radius:20px;

    background:#fff;

    box-shadow:
    0 12px 35px rgba(15,23,42,.05);

    transition:.3s;
}

.law-card:hover{
    transform:translateY(-6px);

    border-color:#7dd3fc;
}

.law-card>span{
    color:#0ea5e9;

    font-size:13px;
    font-weight:900;
}

.law-card h3{
    margin-top:13px;

    color:#163858;

    font-size:21px;

    line-height:1.4;
}

.law-card p{
    margin-top:10px;

    color:#64748b;

    font-size:15px;
}

.important{
    margin-top:20px;

    padding:25px 30px;

    border-left:4px solid #0ea5e9;

    border-radius:0 15px 15px 0;

    background:#eaf7ff;
}

.important strong{
    color:#0b3d70;
}

.important p{
    margin-top:5px;

    color:#526b82;
}


/* COMPETENCY */

.competency{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:15px;
}

.competency-card{
    display:grid;

    grid-template-columns:53px 1fr;

    gap:15px;

    padding:23px;

    border:1px solid #e1e8f0;

    border-radius:17px;

    background:white;

    transition:.25s;
}

.competency-card:hover{
    transform:translateY(-4px);

    border-color:#7dd3fc;

    box-shadow:
    0 15px 35px rgba(15,23,42,.06);
}

.competency-card>span{
    display:grid;

    place-items:center;

    width:44px;
    height:44px;

    border-radius:12px;

    background:#eaf7ff;

    color:#0284c7;

    font-weight:900;
}

.competency-card small{
    color:#0284c7;

    font-size:11px;

    font-weight:800;
}

.competency-card h3{
    margin-top:4px;

    color:#203b59;

    font-size:17px;

    line-height:1.5;
}

.competency-card p{
    margin-top:7px;

    color:#64748b;

    font-size:14px;
}


/* DARK */

.dark-section{
    padding:105px 0;

    color:white;

    background:
    radial-gradient(
        circle at 85% 20%,
        rgba(14,165,233,.17),
        transparent 30%
    ),
    linear-gradient(
        135deg,
        #020617,
        #082d55
    );
}

.dark-content{
    max-width:850px;
}

.dark-content h2{
    color:white;
}

.dark-content h2 span{
    color:#38bdf8;
}

.dark-content>p{
    margin-top:17px;

    color:#b7c6d8;

    font-size:18px;
}

.target{
    display:flex;

    align-items:center;

    gap:20px;

    margin-top:37px;

    padding:27px;

    border:1px solid rgba(255,255,255,.1);

    border-radius:20px;

    background:rgba(255,255,255,.05);
}

.target-icon{
    display:grid;

    place-items:center;

    flex-shrink:0;

    width:58px;
    height:58px;

    border-radius:15px;

    background:#0ea5e9;

    font-size:22px;
    font-weight:900;
}

.target strong{
    font-size:20px;
}

.target p{
    margin-top:4px;

    color:#b7c6d8;

    font-size:15px;
}


/* REQUIREMENT */

.requirements{
    max-width:950px;

    display:grid;

    gap:13px;
}

.requirement{
    display:grid;

    grid-template-columns:50px 1fr;

    gap:17px;

    align-items:start;

    padding:21px;

    border:1px solid #e1e8f0;

    border-radius:16px;

    background:#fff;
}

.requirement>span{
    display:grid;

    place-items:center;

    width:43px;
    height:43px;

    border-radius:11px;

    background:#eaf7ff;

    color:#0284c7;

    font-weight:900;
}

.requirement p{
    color:#52677d;

    font-size:16px;
}


/* SCHEDULE */

.schedule-grid{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;
}

.schedule-card{
    position:relative;

    padding:32px;

    border:1px solid #e1e8f0;

    border-radius:22px;

    background:white;

    box-shadow:
    0 15px 40px rgba(15,23,42,.05);
}

.schedule-card.featured{
    border-color:#7dd3fc;

    box-shadow:
    0 20px 50px rgba(14,165,233,.1);
}

.schedule-head{
    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:10px;
}

.schedule-head span{
    color:#0284c7;

    font-size:12px;

    font-weight:900;

    letter-spacing:1.5px;
}

.schedule-head strong{
    color:#0b3d70;
}

.dates{
    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:9px;

    margin-top:20px;
}

.dates b{
    padding:11px 6px;

    border-radius:10px;

    background:#f2f7fb;

    color:#334e68;

    text-align:center;

    font-size:13px;
}

.badge{
    position:absolute;

    top:0;
    right:0;

    padding:8px 14px;

    border-radius:0 0 0 12px;

    background:#0ea5e9;

    color:#fff;

    font-size:10px;

    font-weight:800;
}


/* DOCUMENTS */

.documents{
    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:15px;
}

.document{
    padding:27px;

    border:1px solid #e1e8f0;

    border-radius:18px;

    background:#fff;

    transition:.25s;
}

.document:hover{
    transform:translateY(-5px);

    border-color:#7dd3fc;
}

.document>span{
    color:#0ea5e9;

    font-size:12px;
    font-weight:900;
}

.document h3{
    margin-top:12px;

    color:#173c60;

    font-size:19px;
}

.document p{
    margin-top:7px;

    color:#64748b;

    font-size:14px;
}


/* INVESTMENT */

.investment{
    padding:105px 0;

    color:white;

    background:
    radial-gradient(
        circle at 85% 20%,
        rgba(56,189,248,.18),
        transparent 30%
    ),
    linear-gradient(
        135deg,
        #020617,
        #082f58
    );
}

.investment-grid{
    display:grid;

    grid-template-columns:1fr .7fr;

    gap:80px;

    align-items:center;
}

.investment-content h2{
    color:white;
}

.investment-content p{
    margin-top:18px;

    color:#cbd5e1;

    font-size:18px;
}

.investment-card{
    padding:38px;

    border-radius:24px;

    background:white;

    color:#0b1f3a;

    box-shadow:
    0 25px 70px rgba(0,0,0,.2);
}

.investment-card>small{
    color:#64748b;

    font-size:11px;
    font-weight:800;

    letter-spacing:1px;
}

.investment-card>strong{
    display:block;

    margin-top:4px;

    color:#087cc1;

    font-size:38px;
}

.included{
    margin:22px 0;

    padding-top:18px;

    border-top:1px solid #e5eaf1;
}

.included p{
    padding:6px 0;

    color:#52677d;

    font-size:14px;
}


/* CTA */

.cta{
    padding:105px 0;

    color:white;

    background:
    radial-gradient(
        circle at 85% 20%,
        rgba(14,165,233,.2),
        transparent 30%
    ),
    linear-gradient(
        135deg,
        #020617,
        #082f58
    );
}

.cta-content{
    max-width:850px;
}

.cta h2{
    color:white;
}

.cta p{
    margin-top:18px;

    color:#cbd5e1;

    font-size:18px;
}

.cta-buttons{
    display:flex;

    flex-wrap:wrap;

    gap:13px;

    margin-top:30px;
}

.contact{
    display:flex;

    flex-wrap:wrap;

    gap:9px;

    margin-top:24px;
}

.contact span{
    padding:7px 12px;

    border:1px solid rgba(255,255,255,.12);

    border-radius:50px;

    color:#b7c6d8;

    font-size:12px;
}


/* WHATSAPP */

.floating-wa{
    position:fixed;

    z-index:9999;

    right:23px;
    bottom:23px;

    display:grid;

    place-items:center;

    width:60px;
    height:60px;

    border-radius:50%;

    background:#25d366;

    box-shadow:
    0 10px 30px rgba(37,211,102,.35);

    transition:.25s;
}

.floating-wa:hover{
    transform:translateY(-5px) scale(1.05);
}

.floating-wa svg{
    width:31px;
    height:31px;

    fill:white;
}


/* REVEAL */

.reveal{
    opacity:0;

    transform:translateY(28px);

    transition:
    opacity .7s ease,
    transform .7s ease;
}

.reveal.show{
    opacity:1;

    transform:translateY(0);
}


/* RESPONSIVE */

@media(max-width:1000px){

    .hero-grid,
    .two-column,
    .investment-grid{
        grid-template-columns:1fr;
        gap:45px;
    }

    .law-grid,
    .documents{
        grid-template-columns:1fr 1fr;
    }

}

@media(max-width:700px){

    body{
        font-size:16px;
    }

    .container{
        width:calc(100% - 28px);
    }

    .hero{
        padding:70px 0 90px;
    }

    .hero h1{
        font-size:48px;
        letter-spacing:-2px;
    }

    .hero-acronym{
        font-size:30px;
    }

    .hero-content>p{
        font-size:16px;
    }

    .hero-buttons{
        flex-direction:column;
    }

    .btn{
        width:100%;
    }

    .hero-panel{
        padding:27px;
    }

    .big-title{
        font-size:55px;
    }

    .trust{
        margin-top:-35px;
    }

    .trust-grid{
        grid-template-columns:1fr 1fr;
    }

    .trust-grid>div{
        padding:19px 8px;
    }

    .trust-grid strong{
        font-size:14px;
    }

    .section,
    .dark-section,
    .investment,
    .cta{
        padding:75px 0;
    }

    .content h2,
    .heading h2,
    .dark-content h2,
    .investment-content h2,
    .cta h2{
        font-size:36px;
    }

    .law-grid,
    .competency,
    .schedule-grid,
    .documents{
        grid-template-columns:1fr;
    }

    .dates{
        grid-template-columns:1fr 1fr 1fr;
    }

    .requirement{
        grid-template-columns:42px 1fr;
        gap:12px;
    }

    .target{
        align-items:flex-start;
    }

    .investment-card{
        padding:27px;
    }

    .investment-card>strong{
        font-size:31px;
    }

    .floating-wa{
        right:17px;
        bottom:17px;

        width:56px;
        height:56px;
    }

}