*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
margin:0;
font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
color:#fff;
line-height:1.5;
overflow-x:hidden;
background:#050505;
}

/* ================= BACKGROUND ================= */

.bg{
position:fixed;
inset:0;
z-index:-2;
background:
radial-gradient(circle at 20% 20%, #141414 0%, transparent 45%),
radial-gradient(circle at 80% 30%, #101010 0%, transparent 50%),
radial-gradient(circle at 50% 80%, #0a0a0a 0%, transparent 60%),
#050505;
animation:bgMove 18s ease-in-out infinite alternate;
}

@keyframes bgMove{
0%{transform:translate3d(0,0,0) scale(1)}
100%{transform:translate3d(-25px,15px,0) scale(1.05)}
}

body::before{
content:"";
position:fixed;
inset:0;
z-index:-1;
pointer-events:none;
background-image:url("https://grainy-gradients.vercel.app/noise.svg");
opacity:0.04;
mix-blend-mode:overlay;
}

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

header{
position:sticky;
top:0;
z-index:1000;
display:flex;
justify-content:space-between;
align-items:center;
padding:16px 6vw;
background:rgba(5,5,5,.7);
backdrop-filter:blur(16px);
border-bottom:1px solid rgba(255,255,255,.06);
}

.logo{
font-size:.85rem;
letter-spacing:.1em;
text-transform:uppercase;
opacity:.9;
}

nav{display:flex;gap:22px;align-items:center}

nav a{
color:#cfcfcf;
text-decoration:none;
font-size:.9rem;
}

nav a:hover{color:#fff}

.cta{
padding:10px 16px;
border:1px solid rgba(255,255,255,.15);
border-radius:999px;
font-size:.9rem;
}

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

.hero{
position:relative;
min-height:100vh;
overflow:hidden;
display:flex;
align-items:center;
padding:40px 6vw;
max-width:1200px;
margin:auto;
}

.hero-inner{max-width:780px}

.eyebrow{
font-size:.75rem;
letter-spacing:.25em;
text-transform:uppercase;
opacity:.6;
margin-bottom:12px;
}

h1{
font-size:clamp(2.6rem,6vw,5.2rem);
line-height:1;
letter-spacing:-.04em;
margin:0 0 18px;
}

.hero p{
font-size:1.05rem;
max-width:520px;
opacity:.75;
margin-bottom:24px;
}

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

.btns{display:flex;gap:12px;flex-wrap:wrap}

.btn{
padding:12px 18px;
border-radius:999px;
text-decoration:none;
font-weight:500;
font-size:.95rem;
}

.btn-primary{background:#fff;color:#000}

.btn-secondary{
border:1px solid rgba(255,255,255,.15);
background:rgba(255,255,255,0.03);
color:#fff;
}

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

section{
padding:72px 6vw;
max-width:1200px;
margin:auto;
}

.section-label{
font-size:.72rem;
letter-spacing:.3em;
text-transform:uppercase;
opacity:.5;
margin-bottom:12px;
}

.section-title{
font-size:clamp(1.8rem,4vw,3.2rem);
line-height:1.1;
letter-spacing:-.03em;
margin:0 0 16px;
}

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

.card{
display:flex;
flex-direction:column;
border-radius:16px;
overflow:hidden;
background:linear-gradient(145deg,#0d0d0d,#0a0a0a);
border:1px solid rgba(255,255,255,0.06);
transition:.25s ease;
box-shadow:0 10px 30px rgba(0,0,0,0.35);
}

.card:hover{
transform:translateY(-5px);
border-color:rgba(255,255,255,0.15);
box-shadow:0 20px 50px rgba(0,0,0,0.55);
}

.card-content{
padding:16px;
display:flex;
flex-direction:column;
gap:6px;
}

.card-tag{
font-size:.7rem;
letter-spacing:.2em;
opacity:.55;
text-transform:uppercase;
}

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

.video-box{
position:relative;
aspect-ratio:16/9;
background:#000;
}

.video-box iframe{
position:absolute;
inset:0;
width:100%;
height:100%;
border:0;
}

/* ================= SERVICES ================= */

.services{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:16px;
margin-top:24px;
}

.service{
padding:22px;
border-radius:18px;
background:#0b0b0b;
border:1px solid rgba(255,255,255,.06);
}

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

footer{
padding:60px 6vw;
text-align:center;
opacity:.6;
border-top:1px solid rgba(255,255,255,.06);
}

/* ================= CAROUSEL ================= */

.carousel-wrap{position:relative;margin-bottom:24px}

.carousel{
display:flex;
gap:22px;
overflow-x:auto;
scroll-snap-type:x mandatory;
scroll-behavior:smooth;
padding:10px 0 24px;
}

.carousel .card{
flex:0 0 auto;
width:min(80vw,820px);
scroll-snap-align:center;
}

.carousel::-webkit-scrollbar{height:5px}
.carousel::-webkit-scrollbar-thumb{
background:rgba(255,255,255,0.15);
border-radius:999px;
}

/* ================= SOCIALS ================= */

.socials{
display:flex;
gap:14px;
justify-content:center;
margin-top:18px;
}

.socials a{
width:44px;
height:44px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
border:1px solid rgba(255,255,255,0.12);
background:rgba(255,255,255,0.03);
backdrop-filter:blur(10px);
color:#fff;
font-size:1.1rem;
text-decoration:none;
transition:.25s ease;
}

.socials a:hover{
transform:translateY(-3px);
border-color:rgba(255,255,255,0.25);
background:rgba(255,255,255,0.06);
box-shadow:0 0 18px rgba(255,255,255,0.06),0 12px 30px rgba(0,0,0,0.6);
}

/* ================= HERO VIDEO BACKGROUND ================= */

.hero-bg{
position:absolute;
inset:0;
overflow:hidden;
z-index:0;
}

.hero-bg iframe{
position:absolute;
top:50%;
left:50%;
width:177.78vh;
height:100vh;
transform:translate(-50%,-50%);
border:0;
pointer-events:none;
}

.hero-overlay{
position:absolute;
inset:0;
background:
radial-gradient(circle at 30% 20%, rgba(0,0,0,0.2), transparent 50%),
linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0.85));
z-index:1;
pointer-events:none;
}

.hero-inner{
position:relative;
z-index:2;
max-width:780px;
}

.hero::after{
content:"";
position:absolute;
inset:0;
background:url("https://grainy-gradients.vercel.app/noise.svg");
opacity:0.05;
mix-blend-mode:overlay;
z-index:2;
pointer-events:none;
}

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

.reveal{
opacity:0;
transform:translateY(22px);
filter:blur(8px);
transition:opacity .7s ease, transform .7s ease, filter .7s ease;
will-change:opacity, transform, filter;
}

.reveal.active{
opacity:1;
transform:translateY(0);
filter:blur(0);
}

.hero{
opacity:1 !important;
transform:none !important;
filter:none !important;
}

/* ================= CONTACT MOBILE CENTER ================= */

@media (max-width:768px){

section{
padding:32px 4vw;
}

.hero{
padding:30px 10vw;
min-height:calc(100vh - 70px);
align-items:flex-start;
}

header{
padding:10px 4vw;
flex-direction:column;
gap:10px;
}

nav{
flex-wrap:wrap;
justify-content:center;
gap:14px;
}

.carousel{
gap:14px;
}

.btns{
flex-direction:column;
}

.btn{
width:100%;
text-align:center;
}

footer{
padding:40px 4vw;
}

#contact{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
}

#contact .btns,
#contact .socials{
justify-content:center;
}

#contact .section-label,
#contact .section-title{
text-align:center;
}
}