/* =========================================================
   CAPFLICK WEBSITE
   Premium Landing Page
=========================================================*/

:root{
    --bg:#090b10;
    --bg2:#111722;
    --card:#171f2c;
    --card2:#202b3c;

    --primary:#ffb000;
    --primary-dark:#ff9800;
    --primary-light:#ffd86a;

    --text:#ffffff;
    --muted:#9ea7b8;

    --border:rgba(255,255,255,.08);

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

    --radius:24px;

    --container:1200px;
}

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Inter',sans-serif;
    background:var(--bg);
    color:var(--text);
    overflow-x:hidden;
}

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

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

button{
    font-family:inherit;
}

.container{
    width:min(var(--container),92%);
    margin:auto;
}

.section{
    padding:120px 0;
}

.section-title{
    text-align:center;
    max-width:700px;
    margin:auto auto 70px;
}

.section-title span{

    display:inline-block;

    color:var(--primary);

    font-size:.8rem;

    letter-spacing:3px;

    font-weight:800;

    margin-bottom:20px;

    text-transform:uppercase;
}

.section-title h2{

    font-size:clamp(2rem,5vw,3.5rem);

    margin-bottom:20px;
}

.section-title p{

    color:var(--muted);

    line-height:1.8;

    font-size:1.1rem;
}

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

header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:999;

    backdrop-filter:blur(20px);

    background:rgba(9,11,16,.75);

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

header .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    height:82px;
}

.logo{

    display:flex;

    align-items:center;

    gap:12px;

    font-weight:800;

    font-size:1.4rem;
}

.logo img{

    width:46px;
}

nav{

    display:flex;

    gap:34px;
}

nav a{

    color:#d8d8d8;

    transition:.3s;
}

nav a:hover{

    color:var(--primary);
}

.btn-primary{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    );

    color:#111;

    padding:14px 26px;

    border-radius:999px;

    font-weight:700;

    transition:.35s;
}

.btn-primary:hover{

    transform:translateY(-3px);

    box-shadow:0 20px 40px rgba(255,176,0,.35);
}

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

.hero{

    position:relative;

    overflow:hidden;

    padding-top:170px;

    padding-bottom:120px;
}

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(circle at top left,
        rgba(255,176,0,.12),
        transparent 35%),

        radial-gradient(circle at bottom right,
        rgba(0,162,255,.12),
        transparent 30%);
}

.hero-layout{

    display:grid;

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

    align-items:center;

    gap:70px;

    position:relative;

    z-index:5;
}

.hero-tag{

    display:inline-flex;

    align-items:center;

    gap:8px;

    background:rgba(255,176,0,.1);

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

    color:var(--primary);

    padding:12px 18px;

    border-radius:999px;

    font-weight:700;

    margin-bottom:30px;
}

.hero h1{

    font-size:clamp(3rem,7vw,5.8rem);

    line-height:.95;

    margin-bottom:28px;

    font-weight:900;
}

.hero h1 span{

    color:var(--primary);
}

.hero p{

    color:var(--muted);

    line-height:1.9;

    font-size:1.15rem;

    max-width:580px;
}

.hero-buttons{

    display:flex;

    gap:20px;

    margin-top:45px;

    flex-wrap:wrap;
}

.store-btn{

    display:flex;

    align-items:center;

    gap:16px;

    background:#fff;

    color:#111;

    border-radius:18px;

    padding:15px 24px;

    transition:.35s;

    min-width:220px;

    box-shadow:var(--shadow);
}

.store-btn:hover{

    transform:translateY(-6px);
}

.store-btn i{

    font-size:34px;
}

.store-btn small{

    display:block;

    font-size:.7rem;

    font-weight:700;

    opacity:.7;
}

.store-btn strong{

    display:block;

    font-size:1rem;
}

.hero-stats{

    display:flex;

    gap:50px;

    margin-top:55px;
}

.hero-stats h2{

    color:var(--primary);

    font-size:2.2rem;
}

.hero-stats span{

    color:var(--muted);
}

/*==========================
PHONE
===========================*/

.hero-phone{

    position:relative;

    display:flex;

    justify-content:center;

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

.phone-shadow{

    position:absolute;

    bottom:-40px;

    width:280px;

    height:40px;

    background:#000;

    filter:blur(35px);

    opacity:.55;
}

.hero-phone img{

    width:360px;

    border-radius:42px;

    border:10px solid #141414;

    box-shadow:

        0 50px 80px rgba(0,0,0,.55),

        0 0 80px rgba(255,176,0,.15);
}

.hero-glow{

    position:absolute;

    width:500px;

    height:500px;

    border-radius:50%;

    filter:blur(120px);

    opacity:.15;
}

.hero-glow-left{

    background:#ffb000;

    left:-180px;

    top:120px;
}

.hero-glow-right{

    background:#2e8bff;

    right:-150px;

    bottom:-120px;
}

@keyframes float{

    0%{

        transform:translateY(0px);
    }

    50%{

        transform:translateY(-18px);
    }

    100%{

        transform:translateY(0px);
    }
}

/* ==========================================================
   FEATURES
========================================================== */

.features,
#features{
    background:
        linear-gradient(
            180deg,
            #0c1119 0%,
            #101722 100%
        );
}

.feature-grid{

    display:grid;

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

    gap:28px;
}

.feature-card{

    position:relative;

    overflow:hidden;

    background:linear-gradient(
        180deg,
        rgba(255,255,255,.04),
        rgba(255,255,255,.02)
    );

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

    border-radius:28px;

    padding:40px 34px;

    transition:.35s;

    backdrop-filter:blur(16px);

    min-height:280px;
}

.feature-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(
        circle at top right,
        rgba(255,176,0,.18),
        transparent 45%
    );

    opacity:0;

    transition:.4s;
}

.feature-card:hover{

    transform:translateY(-12px);

    border-color:rgba(255,176,0,.4);

    box-shadow:

        0 30px 70px rgba(0,0,0,.35),

        0 0 40px rgba(255,176,0,.12);
}

.feature-card:hover::before{

    opacity:1;
}

.feature-card i{

    width:72px;

    height:72px;

    display:grid;

    place-items:center;

    border-radius:20px;

    background:rgba(255,176,0,.12);

    color:var(--primary);

    font-size:30px;

    margin-bottom:28px;
}

.feature-card h3{

    font-size:1.45rem;

    margin-bottom:16px;
}

.feature-card p{

    color:var(--muted);

    line-height:1.8;
}

/* ==========================================================
   GAMEPLAY
========================================================== */

.gameplay{

    background:#090d13;
}

.video-wrapper{

    max-width:1050px;

    margin:auto;

    border-radius:30px;

    overflow:hidden;

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

    box-shadow:

        0 40px 90px rgba(0,0,0,.45);
}

.video-wrapper iframe{

    display:block;

    width:100%;

    aspect-ratio:16/9;

    border:none;
}

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

.download{

    position:relative;

    overflow:hidden;

    text-align:center;

    padding:120px 0;

    background:

    linear-gradient(
        180deg,
        #101722,
        #0b1018
    );
}

.download::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    background:

        radial-gradient(
            circle,
            rgba(255,176,0,.18),
            transparent 60%
        );

    left:50%;

    top:-250px;

    transform:translateX(-50%);
}

.download .container{

    position:relative;

    z-index:2;
}

.download h2{

    font-size:clamp(2.5rem,5vw,4.5rem);

    margin-bottom:18px;
}

.download p{

    max-width:700px;

    margin:auto;

    color:var(--muted);

    font-size:1.15rem;

    line-height:1.8;
}

.download .hero-buttons{

    justify-content:center;

    margin-top:55px;
}

/* ==========================================================
   FAQ
========================================================== */

.faq{

    max-width:900px;

    margin:auto;

    display:flex;

    flex-direction:column;

    gap:18px;
}

.faq details{

    background:

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

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

    border-radius:22px;

    overflow:hidden;

    transition:.3s;
}

.faq details:hover{

    border-color:rgba(255,176,0,.3);
}

.faq summary{

    cursor:pointer;

    padding:24px 28px;

    list-style:none;

    font-weight:700;

    font-size:1.05rem;

    position:relative;
}

.faq summary::-webkit-details-marker{

    display:none;
}

.faq summary::after{

    content:"+";

    position:absolute;

    right:28px;

    top:22px;

    font-size:28px;

    color:var(--primary);

    transition:.3s;
}

.faq details[open] summary::after{

    transform:rotate(45deg);
}

.faq p{

    padding:

        0 28px 28px;

    color:var(--muted);

    line-height:1.8;
}

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

footer{

    padding:

        90px 0 40px;

    border-top:

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

    background:#07090d;
}

.footer-grid{

    display:grid;

    grid-template-columns:

        2fr 1fr 1fr 1fr;

    gap:50px;
}

.footer-grid h3{

    font-size:1.8rem;

    margin-bottom:18px;
}

.footer-grid h4{

    margin-bottom:20px;

    color:var(--primary);
}

.footer-grid p{

    color:var(--muted);

    line-height:1.8;
}

.footer-grid a{

    display:block;

    color:var(--muted);

    margin-bottom:14px;

    transition:.3s;
}

.footer-grid a:hover{

    color:var(--primary);

    transform:translateX(4px);
}

.copyright{

    text-align:center;

    margin-top:70px;

    padding-top:30px;

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

    color:#7f8898;

    font-size:.95rem;
}

/* ==========================================================
   SCROLL ANIMATIONS
========================================================== */

.reveal{

    opacity:0;

    transform:translateY(60px);

    transition:

        opacity .8s ease,

        transform .8s ease;
}

.reveal.active{

    opacity:1;

    transform:translateY(0);
}

/* ==========================================================
   HOVER EFFECTS
========================================================== */

.store-btn:hover{

    box-shadow:

        0 30px 60px rgba(255,176,0,.18);

    transform:

        translateY(-8px)

        scale(1.03);
}

.btn-primary:hover{

    transform:

        translateY(-4px)

        scale(1.03);
}

.hero-phone img:hover{

    transform:

        rotate(-1deg)

        scale(1.02);

    transition:.4s;
}

/* ==========================================================
   RESPONSIVE DESIGN
========================================================== */

@media (max-width: 1200px) {

    .hero-layout {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 70px;
    }

    .hero-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hero p {
        max-width: 700px;
    }

    .hero-stats {
        justify-content: center;
    }

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

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

}

@media (max-width: 768px) {

    header .container {

        height: 72px;
    }

    nav {

        display: none;
    }

    .btn-primary {

        display: none;
    }

    .hero {

        padding-top: 130px;
        padding-bottom: 80px;
    }

    .hero h1 {

        font-size: 3rem;
    }

    .hero p {

        font-size: 1rem;
    }

    .hero-phone img {

        width: 280px;
    }

    .hero-buttons {

        flex-direction: column;
        width: 100%;
        align-items: center;
    }

    .store-btn {

        width: 100%;
        max-width: 340px;
        justify-content: center;
    }

    .hero-stats {

        gap: 30px;
        flex-wrap: wrap;
    }

    .feature-grid {

        grid-template-columns: 1fr;
    }

    .section {

        padding: 80px 0;
    }

    .download {

        padding: 90px 0;
    }

    .download h2 {

        font-size: 2.5rem;
    }

    .footer-grid {

        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-grid a:hover {

        transform: none;
    }

}

@media (max-width: 500px) {

    .container {

        width: 92%;
    }

    .hero h1 {

        font-size: 2.4rem;
    }

    .hero-tag {

        font-size: .75rem;
        padding: 10px 16px;
    }

    .hero-phone img {

        width: 230px;
    }

    .hero-stats {

        flex-direction: column;
        gap: 20px;
    }

    .section-title h2 {

        font-size: 2rem;
    }

    .section-title p {

        font-size: 1rem;
    }

    .feature-card {

        padding: 28px;
        min-height: auto;
    }

    .feature-card h3 {

        font-size: 1.25rem;
    }

    .feature-card i {

        width: 60px;
        height: 60px;
        font-size: 24px;
    }

    .faq summary {

        padding: 20px;
        padding-right: 50px;
    }

    .faq summary::after {

        right: 20px;
    }

}

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

::-webkit-scrollbar {

    width: 10px;
}

::-webkit-scrollbar-track {

    background: #0b0f15;
}

::-webkit-scrollbar-thumb {

    background: linear-gradient(
        var(--primary),
        var(--primary-dark)
    );

    border-radius: 100px;
}

::-webkit-scrollbar-thumb:hover {

    background: var(--primary-light);
}

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

::selection {

    background: var(--primary);
    color: #111;
}

/* ==========================================================
   SOFT ANIMATIONS
========================================================== */

@keyframes fadeUp {

    from {

        opacity: 0;
        transform: translateY(40px);
    }

    to {

        opacity: 1;
        transform: translateY(0);
    }

}

@keyframes fadeIn {

    from {

        opacity: 0;
    }

    to {

        opacity: 1;
    }

}

.hero-content {

    animation: fadeUp .8s ease;
}

.hero-phone {

    animation:
        float 5s ease-in-out infinite,
        fadeIn 1.2s ease;
}

.feature-card {

    animation: fadeUp .8s ease both;
}

.feature-card:nth-child(2) {

    animation-delay: .08s;
}

.feature-card:nth-child(3) {

    animation-delay: .16s;
}

.feature-card:nth-child(4) {

    animation-delay: .24s;
}

.feature-card:nth-child(5) {

    animation-delay: .32s;
}

.feature-card:nth-child(6) {

    animation-delay: .40s;
}

/* ==========================================================
   GLASS UTILITIES
========================================================== */

.glass {

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

    backdrop-filter: blur(18px);

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

    border-radius: var(--radius);
}

/* ==========================================================
   SMALL POLISH
========================================================== */

section {

    position: relative;
}

section::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 1px;

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

footer::after {

    display: none;
}

.store-btn,
.btn-primary,
.feature-card,
details,
.hero-phone img {

    transition: all .35s ease;
}

iframe {

    background: #000;
}

body {

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}