/*
=========================================
Navigation
=========================================
*/

.header{

    position:sticky;

    top:0;

    z-index:100;

    background:rgba(11,17,32,.92);

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

    backdrop-filter:blur(15px);

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

}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){

    .header{

        background:rgba(11,17,32,.98);

    }

}

.header .container{

    height:80px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.logo{

    display:flex;

    align-items:center;

    gap:15px;

}

.logo img{

    width:54px;

    height:54px;

}

.logo-text{

    display:flex;

    flex-direction:column;

}

.logo-text span{

    font-size:1.3rem;

    font-weight:800;

}

.logo-text small{

    color:var(--muted);

}

nav{

    display:flex;

    gap:32px;

}

nav a{

    color:var(--muted);

    transition:var(--transition);

}

nav a:hover{

    color:white;

}

/*
=========================================
Hero
=========================================
*/

.hero{

    position:relative;

    padding:120px 0;

    overflow:hidden;

}

.hero-grid{

    display:grid;

    grid-template-columns:minmax(0,1.15fr) minmax(360px,540px);

    align-items:center;

    gap:clamp(40px,6vw,84px);

    min-width:0;

}

/* Badge */

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    border-radius:999px;

    background:rgba(37,99,235,.08);

    border:1px solid rgba(37,99,235,.30);

    color:#8DB8FF;

    margin-bottom:35px;

    font-size:.9rem;

}

/* Heading */

.hero h1{

    font-size:clamp(2.8rem,6vw,4rem);

    line-height:1.1;

    margin-bottom:25px;

}

.hero h1 span{

    display:block;

    color:var(--secondary);

}

/* Paragraph */

.hero p{

    max-width:650px;

    color:var(--muted);

    font-size:clamp(1rem,1.5vw,1.15rem);

    margin-bottom:40px;

}

/* Buttons */

.hero-buttons{

    display:flex;

    gap:18px;

}

/* Right Side */

.hero-image{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:520px;

    min-width:0;

}

/* Logo */

.hero-logo,
.hero-image img{

    position:relative;

    z-index:10;

}

.hero-logo img,
.hero-image img{

    width:min(100%,340px);

    height:auto;

    transform:translateY(-8px);

}

/* Glow */

.glow{

    position:absolute;

    border-radius:50%;

    filter:blur(90px);

    opacity:.45;

}

.glow-blue{

    width:250px;

    height:250px;

    background:#2563EB;

}

.glow-purple{

    width:180px;

    height:180px;

    background:#7C3AED;

    right:60px;

    top:50px;

}

/*
=========================================
Hero
=========================================
*/

@media(max-width:1000px){

    .hero-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero p{

        margin-inline:auto;

    }

    .hero-image{

        margin-top:60px;

    }

}

@media(max-width:700px){

    .hero{

        padding:80px 0;

    }

    .hero h1{

        font-size:2.6rem;

    }

    .hero-logo img{

        width:180px;

    }

}

/*
=========================================
Buttons
=========================================
*/

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:15px 30px;

    border-radius:14px;

    font-weight:600;

    transition:all .3s;

}

/* Primary */

.btn-primary{

    background:var(--primary);

    color:white;

}

.btn-primary:hover{

    background:var(--primary-hover);

    transform:translateY(-3px);

}

/* Secondary */

.btn-secondary{

    border:1px solid var(--border);

    background:transparent;

}

.btn-secondary:hover{

    background:var(--surface);

    transform:translateY(-3px);

}

/*
=========================================
Section Header
=========================================
*/

.section-header{

    max-width:760px;

    margin:0 auto 60px;

    text-align:center;

}

.section-tag{

    display:inline-block;

    padding:8px 18px;

    border-radius:999px;

    background:rgba(37,99,235,.08);

    border:1px solid rgba(37,99,235,.25);

    color:#7FB3FF;

    font-size:.9rem;

    margin-bottom:22px;

}

.section-header h2{

    font-size:2.5rem;

    margin-bottom:20px;

}

.section-header p{

    color:var(--muted);

    font-size:1.05rem;

}

/*
=========================================
Projects
=========================================
*/

.project-grid,
.projects-grid{

    display:grid;

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

    gap:28px;

}

.project-card{

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:18px;

    padding:30px;

    min-width:0;

    transition:.35s;

}

.project-card:hover{

    transform:translateY(-8px);

    border-color:var(--primary);

    box-shadow:0 20px 40px rgba(0,0,0,.30);

}

.project-icon{

    width:70px;

    height:70px;

    border-radius:18px;

    background:rgba(37,99,235,.08);

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:30px;

    margin-bottom:30px;

}

.project-body h3{

    margin-bottom:18px;

}

.project-body p{

    color:var(--muted);

    margin-bottom:35px;

}

.project-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:12px;

    margin-top:auto;

}

.project-footer a{

    color:#7FB3FF;

    font-weight:600;

}

.badge{

    padding:8px 16px;

    border-radius:999px;

    font-size:.82rem;

    font-weight:600;

}

/*
=========================================
Shared Sections
=========================================
*/

.stats-grid,
.core-grid,
.why-grid,
.updates-grid{

    display:grid;

    gap:24px;

}

.stats-grid{

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

}

.stat,
.about-card,
.core-card,
.why-card,
.update-card,
details,
.timeline-content{

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:18px;

    box-shadow:var(--shadow);

}

.stat{

    padding:28px;

    text-align:center;

}

.stat h3{

    font-size:clamp(2rem,4vw,2.6rem);

    margin-bottom:6px;

}

.stat p,
.about-content p,
.core-card p,
.why-card p,
.update-card p,
details p,
.timeline-content p{

    color:var(--muted);

}

.about-grid{

    display:grid;

    grid-template-columns:minmax(0,1.4fr) minmax(280px,.8fr);

    gap:30px;

    align-items:start;

}

.about-content p + p{

    margin-top:18px;

}

.about-card{

    padding:30px;

}

.about-card ul{

    list-style:none;

    display:grid;

    gap:14px;

    margin-top:20px;

}

.about-card li{

    position:relative;

    padding-left:22px;

}

.about-card li::before{

    content:"";

    position:absolute;

    left:0;

    top:.7em;

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--primary);

}

.core-grid{

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

}

.core-card,
.why-card,
.update-card,
details,
.timeline-content{

    padding:28px;

}

.core-card{

    min-width:0;

}

.core-icon,
.project-icon{

    width:64px;

    height:64px;

    border-radius:18px;

    background:rgba(37,99,235,.08);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.7rem;

}

.core-icon{

    margin-bottom:22px;

}

.core-card h3,
.why-card h3,
.update-card h3,
.timeline-content h3,
details summary,
.section-header h2{

    line-height:1.2;

}

.section-header h2{

    font-size:clamp(2rem,4vw,2.8rem);

}

.project-header{

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:16px;

    margin-bottom:24px;

}

.project-card h3{

    margin-bottom:14px;

}

.project-card p{

    color:var(--muted);

    margin-bottom:22px;

}

.tech-list{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-top:auto;

}

.tech-list span,
.technology-grid span{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 12px;

    border-radius:999px;

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

    border:1px solid var(--border);

    color:var(--muted);

    font-size:.92rem;

}

.technology-grid{

    display:grid;

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

    gap:14px;

}

.technology-grid span{

    text-align:center;

}

.why-grid{

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

}

.timeline{

    display:grid;

    gap:22px;

    position:relative;

    padding-left:28px;

}

.timeline::before{

    content:"";

    position:absolute;

    left:10px;

    top:8px;

    bottom:8px;

    width:1px;

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

}

.timeline-item{

    position:relative;

}

.timeline-dot{

    position:absolute;

    left:-28px;

    top:16px;

    width:16px;

    height:16px;

    border-radius:50%;

    border:3px solid var(--background);

    background:var(--muted);

}

.timeline-item.completed .timeline-dot{

    background:var(--success);

}

.timeline-item.progress .timeline-dot{

    background:var(--warning);

}

.timeline-item.planned .timeline-dot{

    background:var(--secondary);

}

.timeline-content span,
.update-date{

    display:inline-flex;

    margin-top:14px;

    color:var(--secondary);

    font-weight:600;

    font-size:.85rem;

    text-transform:uppercase;

    letter-spacing:.06em;

}

.updates-grid{

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

}

details{

    overflow:hidden;

}

details + details{

    margin-top:16px;

}

summary{

    cursor:pointer;

    font-weight:700;

    list-style:none;

}

summary::-webkit-details-marker{

    display:none;

}

details p{

    margin-top:14px;

}

.faq-list{

    display:grid;

    gap:16px;

}

@supports not (display:grid){

    .stats-grid,
    .about-grid,
    .core-grid,
    .why-grid,
    .updates-grid,
    .technology-grid,
    .project-grid,
    .projects-grid,
    .faq-list{

        display:block;

    }

    .project-card,
    .stat,
    .about-card,
    .core-card,
    .why-card,
    .update-card,
    details,
    .timeline-content{

        margin-bottom:24px;

    }

}

.success{

    background:rgba(34,197,94,.12);

    color:#4ADE80;

}

.warning{

    background:rgba(245,158,11,.12);

    color:#FBBF24;

}

.info{

    background:rgba(37,99,235,.12);

    color:#60A5FA;

}