/*======================================================
                EXPERIENCE PAGE
======================================================*/

:root{

    --experience-bg:#07111f;
    --experience-card:#0c1729;
    --experience-border:rgba(255,255,255,.08);

}

body{

    margin:0;

    background:var(--experience-bg);

    color:#fff;

    font-family:Inter,sans-serif;

    overflow-x:hidden;

}

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

.header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:9999;

}

.experience-hero{

    padding:20px 0 100px;

}

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

.experience-hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    background:
    radial-gradient(circle at top right,
    rgba(0,255,255,.08),
    transparent 30%),

    linear-gradient(135deg,#07111f,#081a32);

}

/* Animated background */

.hero-overlay{

    position:absolute;

    inset:0;

    background-image:

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

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

    background-size:70px 70px;

    opacity:.45;

}

.hero-container{

    width:90%;

    max-width:1400px;

    margin:auto;

    display:grid;

    grid-template-columns:1.15fr .85fr;

    gap:80px;

    align-items:center;

    position:relative;

    z-index:2;

}

.hero-tag{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 24px;

    border-radius:100px;

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

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

    color:#74efff;

    font-size:.85rem;

    letter-spacing:1px;

    text-transform:uppercase;

    margin-bottom:30px;

}

.hero-left h1{

    font-size:72px;

    line-height:1;

    margin:0;

    font-weight:800;

}

.hero-left h1 span{

    color:#3de3ff;

}

.hero-left h2{

    margin-top:18px;

    font-size:30px;

    color:#d8e6f7;

    font-weight:500;

}

.hero-left p{

    margin-top:35px;

    font-size:19px;

    color:#b7c6d8;

    line-height:2;

    max-width:720px;

}

.hero-buttons{

    display:flex;

    gap:20px;

    margin-top:45px;

}

.btn-primary{

    padding:18px 36px;

    background:#21d4fd;

    color:#07111f;

    text-decoration:none;

    border-radius:12px;

    font-weight:700;

    transition:.35s;

}

.btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:0 15px 40px rgba(33,212,253,.35);

}

.btn-secondary{

    padding:18px 36px;

    border-radius:12px;

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

    text-decoration:none;

    color:white;

    transition:.35s;

}

.btn-secondary:hover{

    background:white;

    color:#07111f;

}

.hero-stats{

    display:flex;

    gap:22px;

    margin-top:60px;

}

.stat-box{

    padding:26px;

    min-width:170px;

    border-radius:20px;

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

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

    backdrop-filter:blur(18px);

    transition:.3s;

}

.stat-box:hover{

    transform:translateY(-8px);

}

.stat-box h3{

    margin:0;

    color:#3de3ff;

    font-size:40px;

}

.stat-box span{

    display:block;

    margin-top:8px;

    color:#c6d2df;

}

.hero-right{

    display:flex;

    justify-content:center;

}

.founder-card{

    width:520px;

    border-radius:30px;

    overflow:hidden;

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

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

    backdrop-filter:blur(30px);

    box-shadow:0 40px 100px rgba(0,0,0,.45);

    transition:.4s;

}

.founder-card:hover{

    transform:translateY(-10px);

}

.founder-card img{

    width:100%;

    display:block;

}

/*======================================================
                SCROLL INDICATOR
======================================================*/

.scroll-indicator{

    position:absolute;

    left:50%;

    bottom:40px;

    transform:translateX(-50%);

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:12px;

    z-index:10;

}

.scroll-indicator span{

    color:#9db3c8;

    font-size:.8rem;

    letter-spacing:3px;

    text-transform:uppercase;

}

.scroll-mouse{

    width:28px;

    height:46px;

    border:2px solid rgba(255,255,255,.4);

    border-radius:30px;

    display:flex;

    justify-content:center;

    padding-top:8px;

}

.scroll-wheel{

    width:4px;

    height:10px;

    border-radius:10px;

    background:#3de3ff;

    animation:scrollWheel 2s infinite;

}

@keyframes scrollWheel{

    0%{

        opacity:0;

        transform:translateY(0);

    }

    40%{

        opacity:1;

    }

    100%{

        opacity:0;

        transform:translateY(15px);

    }

}

/*======================================================
                ABOUT FOUNDER
======================================================*/

.about-founder{

    padding:70px 0 20px;

}

.about-founder .section-header{

    max-width:1000px;

    margin:auto;

    text-align:center;

}

.about-founder h2{

    font-size:56px;

    margin:25px 0;

}

.about-founder h2 span{

    color:#21d4fd;

}

.about-founder p{

    font-size:20px;

    line-height:2;

    color:#b8c6d9;

}

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

.story-section{

    padding:20px 0 20px;

}

.story-content{

    max-width:950px;

    margin:30px auto 0;

}

.story-content p{

    font-size:20px;

    line-height:2;

    color:#b8c6d9;

    margin-bottom:35px;

}

.story-content blockquote{

    margin:60px 0;

    padding:40px;

    border-left:5px solid #21d4fd;

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

    border-radius:16px;

    font-size:30px;

    font-weight:700;

    color:#fff;

    line-height:1.6;

}
/*======================================================
                ACHIEVEMENTS
======================================================*/

.achievement-section{

    padding:50px 0;

}

.achievement-grid{

    display:grid;

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

    gap:30px;

    margin-top:70px;

}

.achievement-card{

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

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

    border-radius:20px;

    padding:50px 30px;

    text-align:center;

    transition:.4s;

}

.achievement-card:hover{

    transform:translateY(-8px);

    border-color:#21d4fd;

    box-shadow:0 20px 50px rgba(33,212,253,.18);

}

.achievement-card h3{

    font-size:52px;

    color:#21d4fd;

    margin-bottom:18px;

}

.achievement-card span{

    font-size:20px;

    color:#c7d2e3;

    line-height:1.6;

}

/*======================================================
                TIMELINE
======================================================*/

.timeline-section{

    padding:70px 0 20px;

}

.timeline{

    position:relative;

    max-width:900px;

    margin:70px auto 0;

}

.timeline:before{

    content:"";

    position:absolute;

    left:80px;

    top:0;

    bottom:0;

    width:3px;

    background:#21d4fd;

    opacity:.3;

}

.timeline-item{

    display:flex;

    gap:40px;

    margin-bottom:70px;

    position:relative;

}

.timeline-year{

    min-width:80px;

    height:80px;

    border-radius:50%;

    background:#21d4fd;

    color:#08121f;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

    font-size:20px;

    z-index:2;

}

.timeline-content{

    flex:1;

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

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

    border-radius:20px;

    padding:30px;

}

.timeline-content h3{

    font-size:28px;

    margin-bottom:15px;

}

.timeline-content p{

    color:#b8c6d9;

    line-height:1.8;

}

/*======================================================
                RESEARCH PHILOSOPHY
======================================================*/

.philosophy-section{

    padding:30px 0 100px;

}

.philosophy-grid{

    display:grid;

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

    gap:30px;

    margin-top:70px;

}

.philosophy-card{

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

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

    border-radius:20px;

    padding:40px;

    transition:.4s;

}

.philosophy-card:hover{

    transform:translateY(-8px);

    border-color:#21d4fd;

    box-shadow:0 20px 50px rgba(33,212,253,.18);

}

.philosophy-card .icon{

    font-size:42px;

    margin-bottom:20px;

}

.philosophy-card h3{

    font-size:28px;

    margin-bottom:15px;

}

.philosophy-card p{

    color:#b8c6d9;

    line-height:1.8;

}

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

.experience-cta{

    padding:100px 0 140px;

}

.cta-box{

    max-width:950px;

    margin:auto;

    text-align:center;

    background:linear-gradient(135deg,#0d1626,#131f35);

    border:1px solid rgba(33,212,253,.15);

    border-radius:30px;

    padding:80px;

}

.cta-box h2{

    font-size:56px;

    margin:25px 0;

}

.cta-box h2 span{

    color:#21d4fd;

}

.cta-box p{

    max-width:750px;

    margin:0 auto 50px;

    font-size:20px;

    line-height:1.9;

    color:#b8c6d9;

}

.cta-buttons{

    display:flex;

    justify-content:center;

    gap:25px;

}