/* =====================================================
   SONCY v2
   Premium Landing Page
===================================================== */

:root{

--bg:#070b13;
--bg2:#0b1220;

--card:rgba(15,22,35,.72);

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

--text:#ffffff;

--muted:#9ca9ba;

--blue:#39b7ff;

--blue2:#66d2ff;

--shadow:0 20px 60px rgba(0,170,255,.15);

}

*{

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;

min-height:100vh;

}

/* Scrollbar */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#070b13;

}

::-webkit-scrollbar-thumb{

background:#2baeff;

border-radius:20px;

}

/* ==========================
Background
========================== */

.background{

position:fixed;

inset:0;

z-index:-5;

background:

radial-gradient(circle at 15% 15%,
rgba(0,174,255,.18),
transparent 30%),

radial-gradient(circle at 85% 10%,
rgba(71,125,255,.12),
transparent 28%),

linear-gradient(
180deg,
#070b13,
#09111d,
#070b13);

}

/* Floating Glow */

.glow{

position:fixed;

border-radius:50%;

filter:blur(120px);

opacity:.45;

pointer-events:none;

z-index:-4;

}

.glow1{

width:350px;
height:350px;

left:-120px;
top:-80px;

background:#1ca7ff;

animation:floatGlow 12s infinite ease-in-out;

}

.glow2{

width:420px;
height:420px;

right:-160px;
bottom:-100px;

background:#3d72ff;

animation:floatGlow2 14s infinite ease-in-out;

}

@keyframes floatGlow{

0%{

transform:translate(0,0);

}

50%{

transform:translate(80px,60px);

}

100%{

transform:translate(0,0);

}

}

@keyframes floatGlow2{

0%{

transform:translate(0,0);

}

50%{

transform:translate(-90px,-70px);

}

100%{

transform:translate(0,0);

}

}

/* ==========================
Navbar
========================== */

header{

position:fixed;

width:100%;

top:0;

left:0;

z-index:999;

}

.navbar{

width:min(1200px,92%);

height:74px;

margin:22px auto;

display:flex;

justify-content:space-between;

align-items:center;

padding:0 24px;

background:rgba(11,18,30,.55);

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

backdrop-filter:blur(22px);

border-radius:18px;

transition:.35s;

}

.logo{

font-size:28px;

font-weight:800;

letter-spacing:2px;

text-decoration:none;

color:white;

}

.logo span{

color:var(--blue);

}

.navbar ul{

display:flex;

gap:36px;

list-style:none;

}

.navbar ul a{

text-decoration:none;

color:#d8e1ec;

font-size:15px;

font-weight:500;

transition:.25s;

}

.navbar ul a:hover{

color:var(--blue);

}

.playButton{

text-decoration:none;

padding:14px 26px;

border-radius:12px;

background:linear-gradient(
135deg,
#2196f3,
#53c7ff);

font-weight:700;

color:white;

box-shadow:

0 10px 30px rgba(0,160,255,.25);

transition:.3s;

}

.playButton:hover{

transform:translateY(-3px);

box-shadow:

0 18px 40px rgba(0,170,255,.35);

}

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

.hero{

width:min(1200px,92%);
margin:auto;

min-height:100vh;

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

align-items:center;

gap:70px;

padding-top:120px;

}

.left{

animation:fadeUp .9s ease;

}

.tag{

display:inline-flex;

align-items:center;

padding:10px 18px;

border-radius:999px;

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

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

color:var(--blue2);

font-size:14px;

font-weight:600;

margin-bottom:28px;

}

.left h1{

font-size:clamp(52px,6vw,86px);

font-weight:900;

line-height:1.05;

letter-spacing:-2px;

margin-bottom:24px;

}

.left p{

max-width:560px;

font-size:18px;

line-height:1.8;

color:var(--muted);

margin-bottom:40px;

}

.buttons{

display:flex;

gap:18px;

}

.primary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 34px;

border-radius:14px;

text-decoration:none;

font-weight:700;

color:white;

background:linear-gradient(135deg,#1ea7ff,#58d3ff);

transition:.35s;

box-shadow:0 15px 35px rgba(0,160,255,.25);

}

.primary:hover{

transform:translateY(-4px);

box-shadow:0 20px 45px rgba(0,170,255,.4);

}

.secondary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 34px;

border-radius:14px;

text-decoration:none;

font-weight:600;

color:white;

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

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

transition:.3s;

}

.secondary:hover{

border-color:#39b7ff;

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

}

/* =====================================================
   GAME PREVIEW
===================================================== */

.right{

display:flex;

justify-content:center;

animation:fadeUp 1.1s ease;

}

.preview{

width:560px;

border-radius:26px;

overflow:hidden;

background:rgba(18,24,36,.75);

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

backdrop-filter:blur(20px);

box-shadow:var(--shadow);

transition:.45s;

}

.preview:hover{

transform:
rotateX(3deg)
rotateY(-4deg)
scale(1.02);

box-shadow:

0 30px 70px rgba(0,170,255,.22);

}

.preview-header{

height:46px;

display:flex;

align-items:center;

gap:10px;

padding:0 20px;

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

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

}

.preview-header div{

width:12px;
height:12px;

border-radius:50%;

}

.preview-header div:nth-child(1){

background:#ff5f57;

}

.preview-header div:nth-child(2){

background:#febc2e;

}

.preview-header div:nth-child(3){

background:#28c840;

}

.preview img{

display:block;

width:100%;

height:100%;

object-fit:cover;

}

/* =====================================================
   TITLES
===================================================== */

.section-title{

text-align:center;

margin-bottom:70px;

}

.section-title span{

display:block;

margin-bottom:14px;

color:var(--blue);

font-size:14px;

letter-spacing:3px;

font-weight:700;

}

.section-title h2{

font-size:48px;

font-weight:800;

}

/* =====================================================
   ANIMATION
===================================================== */

@keyframes fadeUp{

from{

opacity:0;

transform:

translateY(35px);

}

to{

opacity:1;

transform:

translateY(0);

}

}

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

.features{

width:min(1200px,92%);
margin:80px auto 0;

}

.feature-grid{

display:grid;

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

gap:28px;

}

.feature-card{

background:var(--card);

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

border-radius:22px;

padding:35px;

transition:.35s;

backdrop-filter:blur(18px);

position:relative;

overflow:hidden;

}

.feature-card::before{

content:"";

position:absolute;

top:-60px;
right:-60px;

width:140px;
height:140px;

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

border-radius:50%;

filter:blur(20px);

transition:.4s;

}

.feature-card:hover{

transform:translateY(-10px);

border-color:rgba(57,183,255,.4);

box-shadow:0 25px 50px rgba(0,170,255,.18);

}

.feature-card:hover::before{

transform:scale(1.4);

}

.icon{

font-size:34px;

margin-bottom:20px;

}

.feature-card h3{

font-size:24px;

margin-bottom:12px;

}

.feature-card p{

color:var(--muted);

line-height:1.8;

}

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

.faq{

width:min(950px,92%);

margin:130px auto 0;

}

.faq-container{

display:flex;

flex-direction:column;

gap:18px;

}

.faq-item{

background:var(--card);

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

padding:28px;

border-radius:18px;

transition:.3s;

}

.faq-item:hover{

border-color:rgba(57,183,255,.45);

transform:translateX(6px);

}

.faq-item h3{

font-size:21px;

margin-bottom:12px;

}

.faq-item p{

color:var(--muted);

line-height:1.8;

}

/* =====================================================
   HELP
===================================================== */

.help{

width:min(900px,92%);

margin:130px auto;

text-align:center;

}

.help-text{

font-size:18px;

color:var(--muted);

max-width:650px;

margin:0 auto 35px;

line-height:1.8;

}

.help-buttons{

display:flex;

justify-content:center;

gap:18px;

flex-wrap:wrap;

}

.discord-btn,
.download-small{

padding:16px 34px;

border-radius:14px;

text-decoration:none;

font-weight:700;

transition:.3s;

}

.discord-btn{

background:#5865F2;

color:white;

}

.discord-btn:hover{

transform:translateY(-4px);

}

.download-small{

background:linear-gradient(135deg,#1ea7ff,#58d3ff);

color:white;

box-shadow:0 15px 35px rgba(0,170,255,.25);

}

.download-small:hover{

transform:translateY(-4px);

}

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

footer{

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

padding:40px 0;

margin-top:40px;

}

.footer-content{

width:min(1200px,92%);

margin:auto;

display:flex;

justify-content:space-between;

align-items:center;

color:var(--muted);

}

.footer-content h3{

color:white;

margin-bottom:8px;

}

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

@media (max-width:1000px){

.hero{

grid-template-columns:1fr;

text-align:center;

padding-top:140px;

}

.left p{

margin:auto;

}

.buttons{

justify-content:center;

}

.preview{

width:100%;

max-width:560px;

}

.feature-grid{

grid-template-columns:1fr;

}

.footer-content{

flex-direction:column;

gap:20px;

text-align:center;

}

}

@media (max-width:760px){

.navbar ul{

display:none;

}

.playButton{

display:none;

}

.left h1{

font-size:54px;

}

.section-title h2{

font-size:34px;

}

}

/* =====================================================
   SCROLL REVEAL
===================================================== */

.hidden{

opacity:0;

transform:translateY(50px);

transition:all .8s ease;

}

.visible{

opacity:1;

transform:translateY(0);

}