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

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:
    "PingFang SC",
    "Microsoft YaHei",
    sans-serif;

    background:#f5f7fb;

    color:#1e293b;

    line-height:1.7;

    overflow-x:hidden;
}

.container{
    width:90%;
    max-width:1280px;
    margin:auto;
}

/* =========================================
   HEADER
========================================= */

.header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:1000;

    backdrop-filter:blur(18px);

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

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

    transition:0.35s;
}

.header.scrolled{

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

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

.navbar{

    height:88px;

    display:flex;

    align-items:center;

    justify-content:space-between;
}

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

.logo{

    display:flex;

    align-items:center;

    gap:12px;

    text-decoration:none;
}

.logo img{

    width:52px;

    height:52px;

    object-fit:contain;
}

.logo-text{

    font-size:30px;

    font-weight:800;

    color:#0f172a;
}

.logo-text span{

    color:#2563eb;
}

/* =========================================
   NAV MENU
========================================= */

.nav-menu{

    display:flex;

    align-items:center;

    gap:34px;
}

.nav-menu a{

    position:relative;

    text-decoration:none;

    color:#334155;

    font-size:16px;

    font-weight:600;

    transition:0.3s;
}

.nav-menu a:hover{

    color:#2563eb;
}

.nav-menu a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:#2563eb;

    transition:0.3s;
}

.nav-menu a:hover::after{

    width:100%;
}

/* =========================================
   BUTTON
========================================= */

.nav-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:13px 28px;

    border-radius:999px;

    background:
    linear-gradient(
    135deg,
    #2563eb,
    #3b82f6
    );

    color:#fff;

    text-decoration:none;

    font-weight:700;

    transition:0.35s;

    box-shadow:
    0 10px 25px rgba(37,99,235,0.25);
}

.nav-btn:hover{

    transform:translateY(-3px);

    box-shadow:
    0 18px 35px rgba(37,99,235,0.35);
}

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

.hero{

    padding:
    180px 0 110px;
}

.hero-container{

    display:grid;

    grid-template-columns:
    1fr 1fr;

    gap:80px;

    align-items:center;
}

.hero-subtitle{

    display:inline-block;

    padding:10px 18px;

    border-radius:999px;

    background:
    rgba(37,99,235,0.08);

    color:#2563eb;

    font-size:14px;

    font-weight:700;

    margin-bottom:22px;
}

.hero-title{

    font-size:64px;

    line-height:1.15;

    font-weight:900;

    margin-bottom:24px;
}

.hero-title span{

    background:
    linear-gradient(
    135deg,
    #2563eb,
    #60a5fa
    );

    -webkit-background-clip:text;

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

.hero-desc{

    font-size:18px;

    color:#64748b;

    margin-bottom:40px;
}

.hero-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;
}

.hero-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 34px;

    border-radius:999px;

    text-decoration:none;

    font-weight:700;

    transition:0.35s;
}

.hero-btn-primary{

    background:
    linear-gradient(
    135deg,
    #2563eb,
    #3b82f6
    );

    color:#fff;
}

.hero-btn-secondary{

    background:#fff;

    color:#2563eb;

    border:
    1px solid rgba(37,99,235,0.15);
}

.hero-btn:hover{

    transform:translateY(-4px);
}

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

.glass-card{

    padding:24px;

    border-radius:30px;

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

    backdrop-filter:blur(18px);

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

    box-shadow:
    0 25px 60px rgba(15,23,42,0.08);
}

.glass-card img{

    width:100%;

    border-radius:24px;

    display:block;
}

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

.section{

    padding:110px 0;
}

.section-title{

    font-size:48px;

    text-align:center;

    margin-bottom:20px;
}

.section-desc{

    text-align:center;

    max-width:760px;

    margin:auto;

    color:#64748b;

    margin-bottom:60px;
}

/* =========================================
   CARD GRID
========================================= */

.card-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(260px,1fr));

    gap:30px;
}

.card{

    background:#fff;

    border-radius:28px;

    padding:36px 30px;

    box-shadow:
    0 10px 40px rgba(15,23,42,0.05);

    transition:0.35s;
}

.card:hover{

    transform:translateY(-10px);

    box-shadow:
    0 25px 60px rgba(15,23,42,0.10);
}

.card-icon{

    font-size:42px;

    margin-bottom:20px;
}

.card h3{

    font-size:24px;

    margin-bottom:14px;
}

.card p{

    color:#64748b;
}

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

.cta{

    padding:90px 60px;

    border-radius:40px;

    text-align:center;

    background:
    linear-gradient(
    135deg,
    #2563eb,
    #60a5fa
    );

    color:#fff;
}

.cta h2{

    font-size:50px;

    margin-bottom:20px;
}

.cta p{

    font-size:18px;

    max-width:760px;

    margin:
    0 auto 36px;
}

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

.footer{

    background:#f8fafc;

    padding-top:80px;
}

.footer-top{

    display:flex;

    justify-content:space-between;

    gap:60px;

    flex-wrap:wrap;

    padding-bottom:50px;
}

.footer-bottom{

    text-align:center;

    padding:24px 0;

    border-top:
    1px solid rgba(226,232,240,0.8);

    color:#94a3b8;
}

/* =========================================
   BACK TOP
========================================= */

.back-to-top{

    position:fixed;

    right:30px;

    bottom:30px;

    width:56px;

    height:56px;

    border-radius:50%;

    background:
    linear-gradient(
    135deg,
    #2563eb,
    #60a5fa
    );

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    opacity:0;

    visibility:hidden;

    transition:0.35s;
}

.back-to-top.show{

    opacity:1;

    visibility:visible;
}

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

.menu-toggle{

    display:none;

    font-size:34px;

    cursor:pointer;

    color:#2563eb;

    font-weight:700;
}

.mobile-btn{

    display:none;
}

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

@media(max-width:992px){

    .hero-container{

        grid-template-columns:1fr;
    }

    .hero-title{

        font-size:52px;
    }
}

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

@media(max-width:768px){

    .navbar{

        height:80px;
    }

    .nav-btn{

        display:none;
    }

    .menu-toggle{

        display:block;
    }

    .nav-menu{

        position:absolute;

        top:80px;

        left:0;

        width:100%;

        background:#ffffff;

        flex-direction:column;

        align-items:center;

        gap:26px;

        padding:40px 0;

        box-shadow:
        0 15px 40px rgba(0,0,0,0.08);

        opacity:0;

        visibility:hidden;

        transform:translateY(-10px);

        transition:0.35s;
    }

    .nav-menu.active{

        opacity:1;

        visibility:visible;

        transform:translateY(0);
    }

    .mobile-btn{

        display:inline-flex;

        align-items:center;

        justify-content:center;

        width:200px;

        height:52px;

        border-radius:999px;

        background:
        linear-gradient(
        135deg,
        #2563eb,
        #3b82f6
        );

        color:#fff !important;

        text-decoration:none;

        font-weight:700;
    }

    .hero{

        padding:
        140px 0 80px;
    }

    .hero-title{

        font-size:40px;
    }

    .hero-buttons{

        flex-direction:column;
    }

    .hero-btn{

        width:100%;
    }

    .section-title{

        font-size:34px;
    }

    .card{

        padding:28px 22px;
    }

    .cta{

        padding:60px 24px;
    }

    .cta h2{

        font-size:32px;
    }

    .footer-top{

        flex-direction:column;
    }
}

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

@media(max-width:520px){

    .hero-title{

        font-size:34px;
    }

    .logo-text{

        font-size:24px;
    }

    .section-title{

        font-size:30px;
    }

    .card h3{

        font-size:22px;
    }
}