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

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Inter',sans-serif;
    color:#222;
    background:#fff;
    line-height:1.6;
}

/* ========= CONTAINER ========= */

.container{
    width:min(1180px,92%);
    margin:auto;
}

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

header{
    position:sticky;
    top:0;
    z-index:1000;

    background:rgba(255,255,255,.92);
    backdrop-filter:blur(12px);

    border-bottom:1px solid #eee;
}

.navbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    height:76px;

}

.logo{

    font-size:28px;

    font-weight:800;

}

.menu{

    display:flex;

    gap:36px;

    list-style:none;

}

.menu a{

    color:#333;

    text-decoration:none;

    font-weight:600;

    transition:.25s;

}

.menu a:hover{

    color:#000;

}

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

.hero{

    min-height:90vh;

    display:flex;

    align-items:center;

}

.hero-content{

    display:grid;

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

    gap:70px;

    align-items:center;

}

.hero h1{

    font-size:68px;

    line-height:1.05;

    margin-bottom:24px;

}

.hero p{

    font-size:22px;

    color:#666;

    max-width:650px;

    margin-bottom:40px;

}

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

.buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 34px;

    border-radius:999px;

    font-weight:700;

    text-decoration:none;

    transition:.3s;

}

.btn-primary{

    background:#111;

    color:#fff;

    box-shadow:0 12px 35px rgba(0,0,0,.15);

}

.btn-primary:hover{

    transform:translateY(-3px);

    box-shadow:0 18px 45px rgba(0,0,0,.22);

}

.btn-secondary{

    border:2px solid #ddd;

    color:#333;

}

.btn-secondary:hover{

    border-color:#111;

}

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

.placeholder{

    width:360px;

    height:360px;

    margin:auto;

    background:#f7f7f7;

    border-radius:32px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:170px;

    box-shadow:0 20px 60px rgba(0,0,0,.08);

    transition:.4s;

}

.placeholder:hover{

    transform:translateY(-10px);

}

/* ========= SECTIONS ========= */

.section{

    padding:110px 0;

}

.section:nth-child(even){

    background:#fafafa;

}

.section h2{

    font-size:42px;

    margin-bottom:26px;

}

.section>div>p{

    max-width:820px;

    color:#666;

    margin-bottom:18px;

}

/* ========= CARDS ========= */

.cards{

    margin-top:40px;

    display:grid;

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

    gap:28px;

}

.card{

    background:#fff;

    padding:34px;

    border-radius:24px;

    border:1px solid #ececec;

    transition:.3s;

}

.card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 50px rgba(0,0,0,.08);

}

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

.faq h3{

    margin-top:30px;

    margin-bottom:10px;

}

.faq p{

    color:#666;

}

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

.cta{

    padding:120px 0;

    text-align:center;

}

.cta h2{

    font-size:54px;

    margin-bottom:20px;

}

.cta p{

    color:#666;

    margin-bottom:40px;

}

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

footer{

    padding:50px 0;

    border-top:1px solid #eee;

    text-align:center;

    color:#888;

}

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

@media(max-width:900px){

.hero-content{

grid-template-columns:1fr;

text-align:center;

}

.hero h1{

font-size:46px;

}

.hero p{

margin-left:auto;
margin-right:auto;

font-size:19px;

}

.placeholder{

width:260px;

height:260px;

font-size:120px;

}

.menu{

display:none;

}

.section{

padding:80px 0;

}

.section h2{

font-size:34px;

}

.cta h2{

font-size:40px;

}

}
/* ===== GAME SCENE ===== */

.game-scene{
    position:relative;
    width:450px;
    height:380px;
    margin:auto;
}

.ground{
    position:absolute;
    left:0;
    right:0;
    bottom:40px;
    height:4px;
    background:#333;
}

.dino{
    position:absolute;
    left:70px;
    bottom:44px;
    width:110px;
    animation:bounce 2s infinite ease-in-out;
}

.cactus{
    position:absolute;
    bottom:44px;
    width:48px;
}

.cactus1{
    left:260px;
}

.cactus2{
    left:360px;
}

.cloud{
    position:absolute;
    width:90px;
    height:30px;
    background:#f3f3f3;
    border-radius:30px;
}

.cloud::before,
.cloud::after{
    content:"";
    position:absolute;
    background:#f3f3f3;
    border-radius:50%;
}

.cloud::before{
    width:34px;
    height:34px;
    left:10px;
    top:-12px;
}

.cloud::after{
    width:44px;
    height:44px;
    right:10px;
    top:-18px;
}

.cloud1{
    top:40px;
    left:40px;
    animation:cloudMove 18s linear infinite;
}

.cloud2{
    top:110px;
    left:220px;
    animation:cloudMove 24s linear infinite;
}

@keyframes cloudMove{

0%{
transform:translateX(0);
}

50%{
transform:translateX(30px);
}

100%{
transform:translateX(0);
}

}

@keyframes bounce{

0%,100%{
transform:translateY(0);
}

50%{
transform:translateY(-12px);
}

}