*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

:root{
--accent:#8b5cf6;
--accent2:#22d3ee;
--border:rgba(255,255,255,.15);
}

/* ================= BODY ================= */

body{
font-family:Inter,Arial,Helvetica,sans-serif;
color:#e5e7eb;
overflow-x:hidden;
background:
radial-gradient(circle at 15% 20%, #1f2937 0%, transparent 40%),
radial-gradient(circle at 85% 30%, #312e81 0%, transparent 45%),
radial-gradient(circle at 40% 80%, #0f766e 0%, transparent 40%),
#070b12;
}

/* moving grid bg */

body::before{
content:"";
position:fixed;
inset:0;
background:
linear-gradient(rgba(168,85,247,.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(168,85,247,.06) 1px, transparent 1px);
background-size:80px 80px;
animation:gridMove 18s linear infinite;
z-index:-3;
}

@keyframes gridMove{
0%{background-position:0 0,0 0;}
100%{background-position:80px 80px,80px 80px;}
}

/* ================= LOADER ================= */

#loader{
position:fixed;
inset:0;
background:#000;
display:flex;
align-items:center;
justify-content:center;
z-index:9999;
transition:.8s;
}

.loader-text{
font-size:40px;
letter-spacing:6px;
animation:pulse 1.2s infinite;
}

@keyframes pulse{
0%,100%{opacity:.3}
50%{opacity:1}
}

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

.header{
position:sticky;
top:0;
background:rgba(0,0,0,.45);
backdrop-filter:blur(12px);
border-bottom:1px solid var(--border);
padding:16px 20px;
z-index:100;
}

.nav{
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
gap:10px;
}

.logo{
font-weight:700;
text-decoration:none;
color:#fff;
font-size:18px;
}

.nav nav a{
margin-left:16px;
text-decoration:none;
color:#cbd5f1;
font-size:14px;
}

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

.intro-hero{
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
position:relative;
overflow:hidden;
}

/* hero bg video */

.video-hero{position:relative;overflow:hidden;}

.yt-bg{
position:absolute;
inset:0;
z-index:-2;
}

.yt-bg iframe{
width:100vw;
height:56.25vw;
min-height:100vh;
min-width:177.77vh;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
pointer-events:none;
}

.hero-overlay{
position:absolute;
inset:0;
background:rgba(0,0,0,.6);
z-index:-1;
}

/* hero content */

.hero-content{
position:relative;
z-index:2;
max-width:900px;
padding:20px;
}

.intro-title{
font-size:clamp(38px,7vw,82px);
font-weight:800;
letter-spacing:1px;
color:#fff;
}

.intro-title span{
background:linear-gradient(90deg,#8b5cf6,#22d3ee);
-webkit-background-clip:text;
color:transparent;
}

.intro-sub{
margin-top:14px;
font-size:20px;
opacity:.9;
}

.scroll-down{
margin-top:40px;
font-size:16px;
text-decoration:none;
color:#e5e7eb;
border:1px solid rgba(255,255,255,.35);
padding:14px 26px;
border-radius:999px;
display:inline-block;
transition:.25s;
}

.scroll-down:hover{
background:rgba(255,255,255,.1);
transform:translateY(-3px);
}

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

.page{
min-height:100vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
padding:80px 20px;
position:relative;
z-index:1;
}

.page > *{
width:100%;
max-width:1100px;
}

/* ================= GRID ================= */

.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:22px;
width:100%;
margin-top:30px;
}

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

.card{
background:rgba(255,255,255,.06);
border:1px solid var(--border);
padding:28px;
border-radius:18px;
color:white;
transition:.25s;
}

.card:hover{
transform:translateY(-6px);
background:rgba(255,255,255,.12);
}

/* ================= BUTTON ================= */

.btn{
display:inline-block;
margin-top:24px;
padding:14px 34px;
border-radius:999px;
background:linear-gradient(135deg,var(--accent),var(--accent2));
text-decoration:none;
color:white;
font-weight:600;
transition:.25s;
}

.btn:hover{transform:translateY(-3px);}

/* ================= WHITE SECTION ================= */

.white-section{
background:#ffffff;
color:#111;
border-radius:28px;
box-shadow:0 30px 80px rgba(0,0,0,0.25);
}

.white-section h2{color:#111;}

.white-section .card{
background:#f3f4f8;
color:#111;
border:1px solid rgba(0,0,0,0.08);
}

.white-section .card:hover{background:#e7e9f2;}

/* ================= VIDEO GRID ================= */

.video-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:22px;
padding:30px 0;
width:100%;
}

.video-grid iframe{
width:100%;
aspect-ratio:16/9;
border-radius:14px;
background:#000;
}

/* ================= REELS GRID ================= */

.reel-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:26px;
max-width:900px;
margin:40px auto;
}

.reel-grid iframe{
width:100%;
aspect-ratio:9/16;
border-radius:16px;
background:#000;
}

/* ================= GALLERY ================= */

.gallery{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:20px;
padding:30px 0;
width:100%;
}

.gallery img{
width:100%;
height:260px;
object-fit:contain;
background:#fff;
border-radius:16px;
padding:10px;
}

/* ================= CONTACT ================= */

.contact-card{
max-width:520px;
width:100%;
display:flex;
flex-direction:column;
gap:14px;
}

.contact-card input,
.contact-card textarea{
padding:14px;
border-radius:10px;
border:1px solid var(--border);
background:#0f172a;
color:white;
}

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

.footer{
text-align:center;
padding:40px;
opacity:.6;
border-top:1px solid var(--border);
margin-top:40px;
}

/* ================= FLOATING LOGOS ================= */

.bg-logos{
position:fixed;
inset:0;
pointer-events:none;
z-index:-2;
overflow:hidden;
}

.bg-logos img{
position:absolute;
width:90px;
opacity:.22;
animation:logoLoop linear infinite;
}

.bg-logos img:nth-child(1){left:8%;animation-duration:28s;}
.bg-logos img:nth-child(2){left:30%;animation-duration:34s;}
.bg-logos img:nth-child(3){left:65%;animation-duration:30s;}
.bg-logos img:nth-child(4){left:85%;animation-duration:38s;}

@keyframes logoLoop{
0%{transform:translateY(120vh) rotate(0deg);}
100%{transform:translateY(-20vh) rotate(360deg);}
}

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

@media(max-width:768px){

.nav nav{
display:flex;
flex-wrap:wrap;
justify-content:center;
}

.nav nav a{
margin:6px 8px;
}

.intro-sub{font-size:16px;}

}