/* =========================================================
   FirstPLAYER Website
   Main stylesheet
   ========================================================= */


/* ---------- RESET ---------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;
    padding: 0;

    font-family:
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif;

    color: #172033;

    background:
        #ffffff;

    line-height: 1.6;

    overflow-x: hidden;
}


img {
    max-width: 100%;
    display: block;
}


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


button {
    font-family: inherit;
}









/* =========================================================
   GLOBAL
   ========================================================= */


.page {

    min-height: 100vh;

    display: flex;
    flex-direction: column;

}


main {

    flex: 1;

}


.container {

    width: min(1180px, 92%);

    margin: 0 auto;

}



.reveal {

    opacity: 0;

    transform:
        translateY(35px);

    transition:
        opacity .7s ease,
        transform .7s ease;

}


.reveal.visible {

    opacity: 1;

    transform:
        translateY(0);

}









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


.navbar {

    position: sticky;

    top: 0;

    z-index: 1000;


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


    backdrop-filter:
        blur(18px);


    border-bottom:
        1px solid rgba(20,30,50,.06);

}



.nav-container {


    height: 78px;


    display:flex;

    align-items:center;

    justify-content:space-between;


}



.logo {


    display:flex;

    align-items:center;

    gap:10px;


    font-size:1.35rem;

    font-weight:700;


    letter-spacing:-.03em;

}
.logo img {width:35px}



.logo-play {


    display:flex;

    align-items:center;

    justify-content:center;


    width:36px;

    height:36px;


    color:white;


    background:
        linear-gradient(
            135deg,
            #4f7cff,
            #7c5cff
        );


    border-radius:12px;


    font-size:.9rem;


    box-shadow:
        0 8px 25px rgba(79,124,255,.25);

}





.nav-links {


    display:flex;

    gap:38px;


}



.nav-links a {


    font-size:.95rem;

    color:#667085;


    transition:
        color .25s ease;


}



.nav-links a:hover,
.nav-links a.active {


    color:#172033;

}



.nav-actions {


    display:flex;

    align-items:center;

    gap:12px;

}



.language-switch {


    border:none;

    background:#f4f6fb;


    padding:
        8px 14px;


    border-radius:12px;


    cursor:pointer;


    font-weight:600;

}



.menu-toggle {

    display:none;

    border:none;

    background:none;

    font-size:1.5rem;

}









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


.button {


    display:inline-flex;

    align-items:center;

    justify-content:center;


    padding:
        14px 28px;


    border-radius:16px;


    font-weight:600;


    transition:
        transform .25s ease,
        box-shadow .25s ease;


}



.button:hover {

    transform:
        translateY(-3px);

}



.button.primary {


    color:white;


    background:
        linear-gradient(
            135deg,
            #4f7cff,
            #755cff
        );


    box-shadow:

        0 15px 35px
        rgba(79,124,255,.28);

}




.button.secondary {


    background:#f4f6fb;


    color:#172033;


}









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


.hero {


    position:relative;


    padding:
        100px 0
        90px;


    overflow:hidden;


}



.hero-background {


    position:absolute;


    width:650px;

    height:650px;


    right:-250px;

    top:-200px;


    background:
        radial-gradient(
            circle,
            rgba(79,124,255,.16),
            transparent 70%
        );


}



.hero-container {


    display:grid;


    grid-template-columns:
        1fr
        1fr;


    align-items:center;


    gap:70px;


}



.version-badge {


    display:inline-flex;


    padding:
        8px 16px;


    border-radius:30px;


    background:#eef3ff;


    color:#4169e1;


    font-size:.85rem;


    font-weight:600;


    margin-bottom:25px;


}





.hero h1 {


    margin:0;


    font-size:

        clamp(
            2.8rem,
            5vw,
            4.5rem
        );


    line-height:1.08;


    letter-spacing:-.055em;


}



.hero .accent {


    background:

        linear-gradient(
            135deg,
            #4f7cff,
            #8b5cf6
        );


    -webkit-background-clip:text;

    background-clip:text;


    color:transparent;


}



.hero p {


    margin-top:28px;


    font-size:1.15rem;


    max-width:560px;


    color:#667085;


}



.hero-buttons {


    display:flex;

    gap:16px;


    margin-top:35px;


}







.hero-stats {


    display:flex;

    gap:35px;


    margin-top:55px;


}



.stat {


    display:flex;

    flex-direction:column;


}



.stat strong {


    font-size:1.8rem;

    letter-spacing:-.05em;


}



.stat span {


    color:#667085;

    font-size:.85rem;

}









/* =========================================================
   PLAYER MOCKUP
   ========================================================= */



.player-window {


    width:100%;


    max-width:520px;


    margin:auto;


    border-radius:24px;


    background:#111827;


    overflow:hidden;


    box-shadow:

        0 40px 80px
        rgba(15,23,42,.25);


    transform:

        perspective(1000px)
        rotateY(-8deg);


}



.window-header {


    height:45px;


    background:#1f2937;


    display:flex;

    gap:8px;


    align-items:center;


    padding-left:18px;


}



.window-header span {


    width:12px;

    height:12px;


    border-radius:50%;


    background:#64748b;


}



.player-screen {


    height:290px;


    display:flex;


    justify-content:center;

    align-items:center;


    background:

        linear-gradient(
            135deg,
            #111827,
            #334155
        );


}



.play-circle {


    width:80px;

    height:80px;


    border-radius:50%;


    background:white;


    color:#4f7cff;


    display:flex;


    align-items:center;

    justify-content:center;


    font-size:1.8rem;


}



.player-controls {


    height:55px;


    background:#111827;


    display:flex;

    align-items:center;


    gap:12px;


    padding:15px;


}



.player-controls div {


    height:6px;

    background:#475569;

    border-radius:10px;


    flex:1;

}









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


.why {


    padding:
        100px 0;


    background:#fafbff;


}



.section-title {


    text-align:center;


    max-width:650px;


    margin:
        0 auto
        60px;


}



.section-title h2,
.story h2,
.cta h2 {


    font-size:

        clamp(
            2rem,
            4vw,
            3rem
        );


    letter-spacing:-.04em;


    margin-bottom:15px;


}



.section-title p {


    color:#667085;

}



.cards {


    display:grid;


    grid-template-columns:

        repeat(4,1fr);


    gap:25px;


}




.feature-card {


    background:white;


    padding:32px;


    border-radius:28px;


    border:

        1px solid
        rgba(15,23,42,.05);


    transition:.3s ease;


}



.feature-card:hover {


    transform:

        translateY(-8px);


    box-shadow:

        0 25px 60px
        rgba(15,23,42,.08);


}



.icon {


    font-size:2.3rem;


    margin-bottom:20px;


}






.feature-card h3 {


    margin-top:0;


    letter-spacing:-.03em;


}


.feature-card p {


    color:#667085;


}









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


.story {


    padding:
        120px 0;


}



.story-grid {


    display:grid;


    grid-template-columns:
        1fr
        1fr;


    gap:80px;


    align-items:center;


}



.image-placeholder {


    height:420px;


    border-radius:35px;


    background:

        linear-gradient(
            135deg,
            #eef3ff,
            #f5f3ff
        );


    display:flex;

    align-items:center;

    justify-content:center;


    font-size:2rem;

    font-weight:700;


    color:#4f7cff;


}



.story-text p {


    color:#667085;


    font-size:1.1rem;


}









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


.cta {


    padding:
        60px 0
        100px;


}



.cta-box {


    padding:

        70px 40px;


    text-align:center;


    border-radius:35px;


    background:

        linear-gradient(
            135deg,
            #eef3ff,
            #f7f5ff
        );


}



.cta-box p {


    color:#667085;


    margin-bottom:30px;


}









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


.footer {


    margin-top:auto;


    padding:
        35px 0;


    border-top:

        1px solid
        rgba(15,23,42,.06);


}



.footer-content {


    display:flex;


    justify-content:space-between;


    align-items:center;


}



.footer-links {


    display:flex;

    gap:25px;


    color:#667085;


}

/* Scroll reveal */

.reveal {

    opacity:0;

    transform:
        translateY(30px);

    transition:
        opacity .6s ease,
        transform .6s ease;

}



.reveal.visible {

    opacity:1;

    transform:
        translateY(0);

}