@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');


/* =========================================================
   SHANTEK — FUTURISTIC TECH DESIGN SYSTEM
   ========================================================= */

:root{

    --black:#020307;
    --black-2:#05070C;
    --black-3:#080B12;

    --surface:#0B0F17;
    --surface-2:#10151F;

    --white:#FFFFFF;
    --text:#E8EBEF;

    --silver:#C9CDD4;
    --silver-2:#9299A5;
    --muted:#737C89;

    --line:rgba(255,255,255,.09);
    --line-soft:rgba(255,255,255,.045);

    --glow:rgba(255,255,255,.13);

    --radius:24px;
    --radius-lg:34px;

    --ease:cubic-bezier(.16,1,.3,1);

    --shadow:
        0 25px 80px rgba(0,0,0,.55);
}


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

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Inter',sans-serif;

    color:var(--text);

    background:#020307;

    overflow-x:hidden;

    line-height:1.6;

    -webkit-font-smoothing:antialiased;
}

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

button{
    font-family:inherit;
}


/* =========================================================
   HIGH TECH BACKGROUND
   ========================================================= */

body::before{

    content:"";

    position:fixed;

    inset:0;

    z-index:-10;

    pointer-events:none;

    background:

        /* fine technical grid */

        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),

        /* large grid */

        linear-gradient(
            rgba(255,255,255,.012) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.012) 1px,
            transparent 1px
        );

    background-size:
        35px 35px,
        35px 35px,
        140px 140px,
        140px 140px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            rgba(0,0,0,.75),
            transparent 90%
        );
}


/* =========================================================
   AMBIENT TECH LIGHT
   ========================================================= */

body::after{

    content:"";

    position:fixed;

    inset:0;

    z-index:-9;

    pointer-events:none;

    background:

        radial-gradient(
            circle at 15% 10%,
            rgba(255,255,255,.075),
            transparent 22%
        ),

        radial-gradient(
            circle at 85% 15%,
            rgba(160,170,190,.065),
            transparent 24%
        ),

        radial-gradient(
            circle at 50% 55%,
            rgba(255,255,255,.025),
            transparent 35%
        ),

        radial-gradient(
            circle at 10% 90%,
            rgba(255,255,255,.04),
            transparent 25%
        );

    animation:
        ambientMove 15s ease-in-out infinite alternate;
}


@keyframes ambientMove{

    from{
        transform:scale(1);
    }

    to{
        transform:scale(1.08);
    }
}


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

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

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

::-webkit-scrollbar-thumb{

    background:
        linear-gradient(
            #555D69,
            #171B23
        );

    border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{
    background:#AAB0B9;
}


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

::selection{

    background:#FFFFFF;

    color:#000000;
}


/* =========================================================
   CONTAINER
   ========================================================= */

.container{

    width:90%;

    max-width:1400px;

    margin:auto;
}


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

section{

    position:relative;

    padding:
        130px 0;

    overflow:hidden;
}


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

.navbar{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:9999;

    background:
        rgba(2,3,7,.72);

    backdrop-filter:
        blur(25px);

    -webkit-backdrop-filter:
        blur(25px);

    border-bottom:
        1px solid rgba(255,255,255,.065);

    box-shadow:
        0 10px 40px rgba(0,0,0,.15);
}


.nav-wrapper{

    min-height:86px;

    display:flex;

    align-items:center;

    justify-content:space-between;
}


/* =========================================================
   BRAND LOGO
   ========================================================= */

.brand-logo{

    display:flex;

    align-items:center;

    gap:11px;

    flex-shrink:0;
}


.brand-logo img{

    width:43px;

    height:43px;

    object-fit:contain;

    filter:
        drop-shadow(
            0 0 12px
            rgba(255,255,255,.15)
        );

    transition:
        .4s var(--ease);
}


.brand-logo:hover img{

    transform:
        rotate(-5deg)
        scale(1.08);

    filter:
        drop-shadow(
            0 0 20px
            rgba(255,255,255,.35)
        );
}


.brand-name{

    font-family:'Manrope',sans-serif;

    font-size:25px;

    font-weight:800;

    letter-spacing:-1px;

    color:#FFFFFF;
}


.brand-name span{

    color:#858C97;
}


/* =========================================================
   NAV LINKS
   ========================================================= */

.nav-links{

    display:flex;

    align-items:center;

    gap:27px;
}


.nav-links > a,
.dropdown-toggle{

    position:relative;

    color:#89919D;

    font-size:13px;

    font-weight:500;

    padding:
        10px 0;

    transition:
        .35s var(--ease);
}


.nav-links > a::after,
.dropdown-toggle::after{

    content:"";

    position:absolute;

    left:0;

    bottom:3px;

    width:0;

    height:1px;

    background:#FFFFFF;

    transition:
        .35s var(--ease);
}


.nav-links > a:hover,
.dropdown-toggle:hover{

    color:#FFFFFF;
}


.nav-links > a:hover::after,
.dropdown-toggle:hover::after{

    width:100%;
}


/* ACTIVE */

.nav-links > a.active{

    color:#FFFFFF;
}


.nav-links > a.active::after{

    width:100%;
}


/* =========================================================
   SERVICES DROPDOWN
   ========================================================= */

.nav-dropdown{

    position:relative;
}


.dropdown-toggle{

    display:flex;

    align-items:center;

    gap:7px;

    cursor:pointer;
}


.dropdown-arrow{

    font-size:11px;

    color:#747C88;

    transition:.3s;
}


.nav-dropdown:hover .dropdown-arrow{

    transform:
        rotate(180deg);

    color:#FFFFFF;
}


.dropdown-menu{

    position:absolute;

    top:
        calc(100% + 18px);

    left:50%;

    transform:
        translateX(-50%)
        translateY(10px);

    width:290px;

    padding:10px;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    background:
        rgba(7,10,16,.94);

    backdrop-filter:
        blur(25px);

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

    border-radius:18px;

    box-shadow:
        0 25px 70px rgba(0,0,0,.55);

    transition:
        .35s var(--ease);
}


.nav-dropdown:hover .dropdown-menu{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

    transform:
        translateX(-50%)
        translateY(0);
}


.dropdown-menu::before{

    content:"";

    position:absolute;

    top:-5px;

    left:50%;

    width:10px;

    height:10px;

    background:#080B12;

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

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

    transform:
        translateX(-50%)
        rotate(45deg);
}


.dropdown-menu a{

    display:flex;

    align-items:center;

    gap:15px;

    padding:
        15px;

    border-radius:12px;

    color:#929AA7;

    font-size:13px;

    transition:.3s var(--ease);
}


.dropdown-menu a span{

    font-family:'Manrope',sans-serif;

    font-size:10px;

    color:#5F6773;

    letter-spacing:1px;
}


.dropdown-menu a:hover{

    color:#FFFFFF;

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

    transform:
        translateX(5px);
}


.dropdown-menu a:hover span{

    color:#FFFFFF;
}


/* =========================================================
   NAV CONTACT
   ========================================================= */

.nav-contact{

    padding:
        10px 18px !important;

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

    border-radius:100px;

    background:
        rgba(255,255,255,.035);
}


.nav-contact:hover{

    background:#FFFFFF;

    color:#000 !important;

    border-color:#FFFFFF;

    box-shadow:
        0 0 30px rgba(255,255,255,.15);
}


.nav-contact::after{

    display:none !important;
}


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

.menu-btn{

    display:none;

    width:45px;

    height:45px;

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

    border-radius:12px;

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

    color:#FFFFFF;

    font-size:20px;

    cursor:pointer;
}


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

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    padding-top:120px;

    position:relative;
}


/* TECH CIRCUITS */

.hero::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    right:-220px;

    top:-180px;

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

    border-radius:50%;

    box-shadow:

        0 0 0 70px rgba(255,255,255,.015),

        0 0 0 140px rgba(255,255,255,.01),

        0 0 100px rgba(255,255,255,.05);

    animation:
        orbitSpin 30s linear infinite;
}


.hero::after{

    content:"";

    position:absolute;

    width:1px;

    height:500px;

    right:18%;

    top:25%;

    background:
        linear-gradient(
            transparent,
            rgba(255,255,255,.15),
            transparent
        );

    transform:
        rotate(25deg);

    opacity:.5;
}


@keyframes orbitSpin{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }
}


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

.hero-grid{

    display:grid;

    grid-template-columns:
        1.1fr .9fr;

    gap:80px;

    align-items:center;

    position:relative;

    z-index:2;
}


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

.hero-tag{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:
        8px 15px;

    margin-bottom:27px;

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

    border-radius:100px;

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

    color:#A8AFBA;

    font-size:11px;

    font-weight:700;

    letter-spacing:2px;
}


.hero-tag::before{

    content:"";

    width:6px;

    height:6px;

    border-radius:50%;

    background:#FFFFFF;

    box-shadow:
        0 0 15px #FFFFFF;

    animation:
        pulseDot 2s infinite;
}


@keyframes pulseDot{

    0%,100%{
        opacity:1;
        box-shadow:0 0 10px #FFFFFF;
    }

    50%{
        opacity:.45;
        box-shadow:0 0 25px #FFFFFF;
    }
}


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

.hero h1{

    font-family:'Manrope',sans-serif;

    font-size:
        clamp(55px,7vw,96px);

    line-height:.95;

    letter-spacing:-5px;

    font-weight:800;

    color:#FFFFFF;

    margin-bottom:30px;

    max-width:900px;
}


.hero h1 span{

    display:block;

    background:
        linear-gradient(
            110deg,
            #FFFFFF 5%,
            #9EA5AF 45%,
            #555D68 100%
        );

    -webkit-background-clip:text;

    background-clip:text;

    -webkit-text-fill-color:transparent;
}


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

.hero p{

    max-width:690px;

    color:#858E9B;

    font-size:17px;

    line-height:1.95;

    margin-bottom:40px;
}


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

.hero-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:13px;
}


.btn{

    position:relative;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:9px;

    padding:
        15px 26px;

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

    border-radius:100px;

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

    color:#FFFFFF;

    font-size:13px;

    font-weight:600;

    overflow:hidden;

    transition:
        .4s var(--ease);
}


.btn::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            115deg,
            transparent 25%,
            rgba(255,255,255,.3),
            transparent 75%
        );

    transform:
        translateX(-120%);

    transition:.7s;
}


.btn:hover::before{

    transform:
        translateX(120%);
}


.btn:hover{

    background:#FFFFFF;

    color:#000000;

    border-color:#FFFFFF;

    transform:
        translateY(-4px);

    box-shadow:
        0 15px 40px rgba(255,255,255,.14);
}


.btn-outline{

    background:transparent;

    color:#C3C8D0;
}


.btn-outline:hover{

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

    color:#FFFFFF;

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


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

.hero-trust{

    display:flex;

    align-items:center;

    gap:13px;

    margin-top:38px;

    color:#565F6C;

    font-size:10px;

    font-weight:600;

    letter-spacing:1.2px;

    text-transform:uppercase;
}


.hero-trust i{

    width:3px;

    height:3px;

    border-radius:50%;

    background:#707985;
}


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

.hero-visual{

    position:relative;

    min-height:500px;

    display:flex;

    align-items:center;

    justify-content:center;
}


/* =========================================================
   HERO MAIN CARD
   ========================================================= */

.main-hero-card{

    width:420px;

    height:480px;

    position:relative;

    padding:25px;

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

    border-radius:32px;

    background:

        linear-gradient(
            145deg,
            rgba(255,255,255,.08),
            rgba(255,255,255,.025)
        );

    backdrop-filter:
        blur(30px);

    box-shadow:

        0 40px 100px rgba(0,0,0,.65),

        inset 0 1px 0 rgba(255,255,255,.08);

    overflow:hidden;

    animation:
        heroFloat 6s ease-in-out infinite;
}


@keyframes heroFloat{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-13px);
    }
}


.main-hero-card::before{

    content:"";

    position:absolute;

    width:300px;

    height:300px;

    left:50%;

    top:50%;

    transform:
        translate(-50%,-50%);

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.10),
            transparent 65%
        );

    filter:
        blur(10px);
}


.main-hero-card::after{

    content:"";

    position:absolute;

    inset:12px;

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

    border-radius:24px;

    pointer-events:none;
}


/* =========================================================
   HERO CARD TOP
   ========================================================= */

.hero-card-top{

    position:relative;

    z-index:2;

    display:flex;

    justify-content:space-between;

    color:#727B88;

    font-size:10px;

    letter-spacing:2px;

    font-weight:700;
}


.status-dot{

    color:#FFFFFF;

    font-size:9px;

    text-shadow:
        0 0 12px #FFFFFF;
}


/* =========================================================
   HERO CARD CENTER
   ========================================================= */

.hero-card-center{

    position:absolute;

    z-index:2;

    top:50%;

    left:50%;

    transform:
        translate(-50%,-50%);

    width:100%;

    text-align:center;
}


.hero-logo-mark{

    width:95px;

    height:95px;

    margin:
        0 auto 28px;

    display:flex;

    align-items:center;

    justify-content:center;

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

    border-radius:28px;

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

    box-shadow:
        0 0 50px rgba(255,255,255,.07);
}


.hero-logo-mark img{

    width:62px;

    height:62px;

    object-fit:contain;
}


.hero-card-center h2{

    font-family:'Manrope',sans-serif;

    font-size:31px;

    line-height:1.1;

    letter-spacing:-1.5px;

    color:#FFFFFF;

    margin-bottom:15px;
}


.hero-card-center h2 span{

    color:#777F8B;
}


.hero-card-center p{

    margin:0;

    color:#626B78;

    font-size:11px;

    letter-spacing:2px;

    text-transform:uppercase;
}


/* =========================================================
   HERO CARD BOTTOM
   ========================================================= */

.hero-card-bottom{

    position:absolute;

    z-index:2;

    left:25px;

    right:25px;

    bottom:23px;

    display:flex;

    justify-content:space-between;

    color:#5F6875;

    font-size:9px;

    letter-spacing:1.5px;

    font-weight:600;
}


/* =========================================================
   FLOATING CARD
   ========================================================= */

.floating-card{

    position:absolute;

    z-index:5;

    right:-30px;

    bottom:45px;

    width:220px;

    padding:17px;

    display:flex;

    align-items:center;

    gap:13px;

    background:
        rgba(8,11,17,.88);

    backdrop-filter:
        blur(20px);

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

    border-radius:17px;

    box-shadow:
        0 25px 50px rgba(0,0,0,.5);

    animation:
        floatingSmall 5s ease-in-out infinite;
}


@keyframes floatingSmall{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-8px);
    }
}


.floating-number{

    font-family:'Manrope',sans-serif;

    font-size:19px;

    color:#FFFFFF;

    font-weight:800;
}


.floating-card strong{

    display:block;

    font-size:12px;

    color:#FFFFFF;
}


.floating-card small{

    display:block;

    color:#69727F;

    font-size:10px;

    margin-top:2px;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.eyebrow{

    display:inline-block;

    margin-bottom:18px;

    color:#858D99;

    font-size:10px;

    font-weight:700;

    letter-spacing:2.5px;

    text-transform:uppercase;
}


.eyebrow::before{

    content:"";

    display:inline-block;

    width:24px;

    height:1px;

    margin-right:10px;

    vertical-align:middle;

    background:#FFFFFF;

    opacity:.5;
}


/* =========================================================
   SECTION TITLE
   ========================================================= */

.section-title-wrap{

    max-width:850px;

    margin-bottom:60px;
}


.section-title{

    font-family:'Manrope',sans-serif;

    font-size:
        clamp(42px,5.5vw,70px);

    line-height:1;

    letter-spacing:-3px;

    color:#FFFFFF;

    font-weight:800;

    margin-bottom:25px;
}


.section-title span,
.section-title-wrap h2 span{

    color:#737B87;
}


.section-subtitle{

    max-width:700px;

    color:#7F8895;

    font-size:16px;

    line-height:1.9;
}


/* =========================================================
   IMPACT SECTION
   ========================================================= */

.impact-section{

    padding-top:100px;
}


.section-heading-left{

    max-width:760px;

    margin-bottom:65px;
}


.section-heading-left h2{

    font-family:'Manrope',sans-serif;

    font-size:
        clamp(40px,5vw,66px);

    line-height:1;

    letter-spacing:-3px;

    color:#FFFFFF;

    margin-bottom:25px;
}


.section-heading-left h2 span{

    color:#707986;
}


.section-heading-left p{

    color:#7C8592;

    max-width:650px;

    line-height:1.9;
}


/* =========================================================
   GLASS CARD
   ========================================================= */

.glass-card{

    position:relative;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.065),
            rgba(255,255,255,.018)
        );

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

    border-radius:
        var(--radius);

    backdrop-filter:
        blur(20px);

    -webkit-backdrop-filter:
        blur(20px);

    box-shadow:
        var(--shadow);

    overflow:hidden;

    transition:
        .45s var(--ease);
}


.glass-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.35),
            transparent
        );

    opacity:.6;
}


.glass-card:hover{

    transform:
        translateY(-10px);

    border-color:
        rgba(255,255,255,.16);

    box-shadow:
        0 35px 90px rgba(0,0,0,.65);
}


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

.stats-grid{

    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:18px;
}


.stat-card{

    min-height:300px;

    padding:30px;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;
}


.stat-number{

    position:absolute;

    top:25px;

    right:28px;

    color:#3E4651;

    font-family:'Manrope',sans-serif;

    font-size:11px;

    font-weight:700;

    letter-spacing:2px;
}


.stat-icon{

    width:50px;

    height:50px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:25px;

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

    border-radius:15px;

    color:#FFFFFF;

    font-size:20px;

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

    transition:
        .4s var(--ease);
}


.stat-card:hover .stat-icon{

    background:#FFFFFF;

    color:#000000;

    transform:
        rotate(-8deg);
}


.stat-card h3{

    font-family:'Manrope',sans-serif;

    font-size:20px;

    line-height:1.2;

    color:#FFFFFF;

    margin-bottom:12px;
}


.stat-card p{

    color:#737D8A;

    font-size:13px;

    line-height:1.8;
}


/* =========================================================
   CEO
   ========================================================= */

.ceo-section{

    padding-top:150px;

    padding-bottom:150px;
}


.ceo-grid{

    display:grid;

    grid-template-columns:
        440px 1fr;

    gap:100px;

    align-items:center;
}


.ceo-image{

    height:590px;

    position:relative;

    overflow:hidden;

    border-radius:30px;

    background:#0B0F16;

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

    box-shadow:
        0 35px 90px rgba(0,0,0,.6);
}


.ceo-image::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:2;

    background:
        linear-gradient(
            180deg,
            transparent 55%,
            rgba(0,0,0,.65)
        );

    pointer-events:none;
}


.ceo-image::after{

    content:"";

    position:absolute;

    inset:15px;

    z-index:3;

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

    border-radius:21px;

    pointer-events:none;
}


.ceo-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:
        1s var(--ease);
}


.ceo-image:hover img{

    transform:
        scale(1.045);
}


.ceo-name{

    font-family:'Manrope',sans-serif;

    font-size:
        clamp(40px,5vw,65px);

    line-height:.98;

    letter-spacing:-3px;

    color:#FFFFFF;

    margin-bottom:15px;
}


.ceo-title{

    font-size:15px;

    font-weight:600;

    color:#FFFFFF;

    margin-bottom:5px;
}


.ceo-qualification{

    color:#626B77;

    font-size:12px;

    margin-bottom:32px;
}


.ceo-message{

    max-width:700px;

    color:#89929F;

    font-size:16px;

    line-height:2;

    margin-bottom:30px;
}


.quote{

    position:relative;

    padding:
        27px 30px;

    border-left:
        2px solid #FFFFFF;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.055),
            transparent
        );

    border-radius:
        0 18px 18px 0;

    color:#C5CAD1;

    font-size:14px;

    font-style:italic;

    line-height:1.9;
}


/* =========================================================
   WHY SHANTEK
   ========================================================= */

.why-grid{

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:22px;
}


.why-card{

    min-height:390px;

    padding:35px;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;
}


.why-number{

    position:absolute;

    top:28px;

    left:32px;

    color:#4D5561;

    font-family:'Manrope',sans-serif;

    font-size:12px;

    letter-spacing:2px;
}


.why-card h3{

    font-family:'Manrope',sans-serif;

    font-size:27px;

    color:#FFFFFF;

    margin-bottom:15px;

    letter-spacing:-1px;
}


.why-card p{

    color:#7C8592;

    font-size:14px;

    line-height:1.9;
}


.why-line{

    width:45px;

    height:1px;

    background:#FFFFFF;

    margin-top:27px;

    opacity:.45;

    transition:
        .4s var(--ease);
}


.why-card:hover .why-line{

    width:90px;

    opacity:1;
}


.why-card.featured{

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.095),
            rgba(255,255,255,.025)
        );
}


/* =========================================================
   SERVICES
   ========================================================= */

.services-grid{

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:22px;
}


.service-card{

    min-height:390px;

    padding:32px;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;
}


.service-top{

    position:absolute;

    top:28px;

    left:32px;

    right:32px;

    display:flex;

    justify-content:space-between;

    align-items:center;
}


.service-number{

    color:#4C5561;

    font-family:'Manrope',sans-serif;

    font-size:11px;

    font-weight:700;

    letter-spacing:2px;
}


.service-symbol{

    width:37px;

    height:37px;

    display:flex;

    align-items:center;

    justify-content:center;

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

    border-radius:50%;

    color:#9AA2AD;

    transition:
        .4s var(--ease);
}


.service-card:hover .service-symbol{

    background:#FFFFFF;

    color:#000000;

    transform:
        rotate(45deg);
}


.service-card h3{

    font-family:'Manrope',sans-serif;

    font-size:25px;

    line-height:1.2;

    color:#FFFFFF;

    margin-bottom:14px;

    letter-spacing:-.7px;
}


.service-card p{

    color:#78818E;

    font-size:14px;

    line-height:1.85;

    margin-bottom:25px;
}


.service-btn{

    align-self:flex-start;

    padding:
        11px 17px;

    font-size:11px;

    letter-spacing:.2px;
}


/* =========================================================
   OPPORTUNITY
   ========================================================= */

.opportunity-card{

    min-height:570px;

    display:grid;

    grid-template-columns:
        1.1fr .9fr;

    align-items:center;

    padding:
        70px;

    position:relative;

    overflow:hidden;
}


.opportunity-card::before{

    content:"";

    position:absolute;

    width:600px;

    height:600px;

    right:-180px;

    top:-100px;

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

    border-radius:50%;

    box-shadow:

        0 0 0 60px rgba(255,255,255,.012),

        0 0 0 120px rgba(255,255,255,.008),

        0 0 100px rgba(255,255,255,.04);
}


.opportunity-content{

    position:relative;

    z-index:2;
}


.opportunity-content h2{

    font-family:'Manrope',sans-serif;

    font-size:
        clamp(43px,5vw,70px);

    line-height:.98;

    letter-spacing:-3px;

    color:#FFFFFF;

    margin-bottom:25px;
}


.opportunity-content h2 span{

    color:#707985;
}


.opportunity-content p{

    max-width:620px;

    color:#7D8693;

    line-height:1.9;

    margin-bottom:35px;
}


.opportunity-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:13px;
}


/* =========================================================
   OPPORTUNITY VISUAL
   ========================================================= */

.opportunity-visual{

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

    z-index:2;
}


.opportunity-circle{

    width:300px;

    height:300px;

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

    border-radius:50%;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    position:relative;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.065),
            transparent 65%
        );

    box-shadow:
        0 0 80px rgba(255,255,255,.05);
}


.opportunity-circle::before{

    content:"";

    position:absolute;

    inset:22px;

    border:
        1px dashed rgba(255,255,255,.12);

    border-radius:50%;

    animation:
        orbitSpin 20s linear infinite;
}


.opportunity-circle span{

    font-size:10px;

    letter-spacing:3px;

    color:#727B87;
}


.opportunity-circle strong{

    font-family:'Manrope',sans-serif;

    font-size:75px;

    line-height:1;

    color:#FFFFFF;

    letter-spacing:-5px;
}


/* =========================================================
   REVIEWS
   ========================================================= */

.reviews-grid{

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:22px;
}


.review-card{

    padding:32px;

    min-height:270px;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;
}


.review-stars{

    position:absolute;

    top:28px;

    left:32px;

    color:#FFFFFF;

    letter-spacing:4px;

    font-size:11px;
}


.review-card p{

    color:#8A939F;

    font-size:14px;

    line-height:1.9;

    margin-bottom:22px;
}


.review-name{

    color:#FFFFFF;

    font-size:13px;

    font-weight:700;
}


.review-service{

    color:#606976;

    font-size:11px;

    margin-top:3px;
}


/* =========================================================
   CTA
   ========================================================= */

.cta-section{

    padding-top:80px;

    padding-bottom:140px;
}


.cta{

    padding:
        90px 40px;

    text-align:center;

    position:relative;
}


.cta::after{

    content:"";

    position:absolute;

    width:500px;

    height:250px;

    left:50%;

    top:50%;

    transform:
        translate(-50%,-50%);

    background:
        radial-gradient(
            ellipse,
            rgba(255,255,255,.07),
            transparent 70%
        );

    pointer-events:none;
}


.cta > *{

    position:relative;

    z-index:2;
}


.cta h2{

    font-family:'Manrope',sans-serif;

    font-size:
        clamp(43px,5vw,70px);

    line-height:.98;

    letter-spacing:-3px;

    color:#FFFFFF;

    margin-bottom:23px;
}


.cta h2 span{

    color:#717A87;
}


.cta p{

    max-width:650px;

    margin:
        0 auto 35px;

    color:#7D8693;

    line-height:1.9;
}


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

.footer{

    position:relative;

    padding:
        85px 0 30px;

    border-top:
        1px solid rgba(255,255,255,.06);

    background:
        rgba(0,0,0,.2);
}


.footer-grid{

    display:grid;

    grid-template-columns:
        2fr 1fr 1fr 1fr;

    gap:55px;
}


.footer-brand .brand-logo{

    margin-bottom:22px;
}


.footer p{

    max-width:350px;

    color:#68717E;

    font-size:13px;

    line-height:1.9;
}


.footer h4{

    margin-bottom:20px;

    color:#FFFFFF;

    font-size:12px;

    letter-spacing:1px;

    text-transform:uppercase;
}


.footer a:not(.brand-logo){

    display:block;

    color:#68717E;

    font-size:12px;

    margin-bottom:12px;

    transition:
        .3s var(--ease);
}


.footer a:not(.brand-logo):hover{

    color:#FFFFFF;

    transform:
        translateX(5px);
}


.copyright{

    margin-top:65px;

    padding-top:25px;

    border-top:
        1px solid rgba(255,255,255,.05);

    text-align:center;

    color:#4F5865;

    font-size:10px;

    letter-spacing:.5px;
}


/* =========================================================
   HERO ORBIT ELEMENTS
========================================================= */

.hero-orbit{

    position:absolute;

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

    border-radius:50%;

    pointer-events:none;
}


.orbit-one{

    width:500px;

    height:500px;

    right:-150px;

    bottom:-220px;
}


.orbit-two{

    width:800px;

    height:800px;

    right:-300px;

    bottom:-370px;
}


/* =========================================================
   RESPONSIVE — 1200
   ========================================================= */

@media(max-width:1200px){

    .nav-links{

        gap:18px;
    }

    .nav-links > a,
    .dropdown-toggle{

        font-size:12px;
    }

    .hero-grid{

        grid-template-columns:
            1fr;

        gap:70px;
    }

    .hero-content{

        max-width:850px;
    }

    .hero-visual{

        max-width:650px;

        width:100%;

        margin:auto;
    }

    .stats-grid{

        grid-template-columns:
            repeat(2,1fr);
    }

    .ceo-grid{

        grid-template-columns:
            360px 1fr;

        gap:55px;
    }

    .services-grid{

        grid-template-columns:
            repeat(2,1fr);
    }

    .footer-grid{

        grid-template-columns:
            2fr 1fr 1fr;
    }
}


/* =========================================================
   RESPONSIVE — 900
   ========================================================= */

@media(max-width:900px){

    .nav-links{

        display:none;

        position:absolute;

        top:86px;

        left:0;

        width:100%;

        padding:20px;

        flex-direction:column;

        align-items:stretch;

        gap:3px;

        background:
            rgba(3,5,9,.98);

        backdrop-filter:
            blur(30px);

        border-bottom:
            1px solid rgba(255,255,255,.08);

        box-shadow:
            0 25px 60px rgba(0,0,0,.5);
    }

    .nav-links.active{

        display:flex;
    }

    .nav-links > a,
    .dropdown-toggle{

        padding:14px 16px;

        border-radius:12px;
    }

    .nav-links > a:hover,
    .dropdown-toggle:hover{

        background:
            rgba(255,255,255,.05);
    }

    .nav-dropdown{

        width:100%;
    }

    .dropdown-menu{

        position:static;

        width:100%;

        transform:none;

        display:none;

        opacity:1;

        visibility:visible;

        pointer-events:auto;

        margin-top:0;

        box-shadow:none;

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

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

    .nav-dropdown:hover .dropdown-menu{

        transform:none;
    }

    .nav-dropdown:focus-within .dropdown-menu{

        display:block;
    }

    .menu-btn{

        display:flex;

        align-items:center;

        justify-content:center;
    }

    .ceo-grid{

        grid-template-columns:
            1fr;
    }

    .ceo-image{

        max-width:450px;

        width:100%;

        margin:auto;
    }

    .why-grid{

        grid-template-columns:
            1fr;
    }

    .opportunity-card{

        grid-template-columns:
            1fr;

        gap:50px;

        padding:50px;
    }

    .opportunity-visual{

        display:none;
    }
}


/* =========================================================
   RESPONSIVE — 768
   ========================================================= */

@media(max-width:768px){

    section{

        padding:
            90px 0;
    }

    .hero{

        padding-top:120px;
    }

    .hero h1{

        font-size:
            clamp(48px,12vw,68px);

        letter-spacing:-3px;
    }

    .hero p{

        font-size:15px;
    }

    .hero-trust{

        flex-wrap:wrap;

        gap:9px;
    }

    .main-hero-card{

        width:100%;

        max-width:420px;

        height:450px;
    }

    .floating-card{

        right:-5px;

        bottom:20px;
    }

    .stats-grid,
    .services-grid,
    .reviews-grid{

        grid-template-columns:
            1fr;
    }

    .section-title{

        font-size:43px;
    }

    .section-heading-left h2{

        font-size:45px;
    }

    .ceo-name{

        font-size:44px;
    }

    .opportunity-card{

        padding:38px 28px;

        min-height:auto;
    }

    .cta{

        padding:
            70px 25px;
    }

    .footer-grid{

        grid-template-columns:
            1fr;

        gap:38px;
    }
}


/* =========================================================
   RESPONSIVE — 480
   ========================================================= */

@media(max-width:480px){

    .container{

        width:92%;
    }

    .brand-name{

        font-size:23px;
    }

    .brand-logo img{

        width:38px;

        height:38px;
    }

    .hero h1{

        font-size:45px;

        letter-spacing:-2.5px;
    }

    .hero-buttons{

        flex-direction:column;
    }

    .hero-buttons .btn{

        width:100%;
    }

    .hero-trust{

        font-size:8px;
    }

    .hero-visual{

        min-height:430px;
    }

    .main-hero-card{

        height:420px;
    }

    .floating-card{

        width:190px;

        right:-3px;

        bottom:10px;
    }

    .section-title{

        font-size:39px;

        letter-spacing:-2px;
    }

    .section-heading-left h2{

        font-size:39px;
    }

    .ceo-image{

        height:430px;
    }

    .ceo-name{

        font-size:39px;
    }

    .why-card,
    .service-card{

        min-height:330px;

        padding:27px;
    }

    .opportunity-content h2{

        font-size:42px;
    }

    .cta h2{

        font-size:40px;
    }
}