/* ================= CINEMATIC SCROLLBAR ================= */

/* Chrome / Edge / Safari */

::-webkit-scrollbar{
width:10px;
}

::-webkit-scrollbar-track{
background:#050505;
}

::-webkit-scrollbar-thumb{
background:linear-gradient(
180deg,
#22A006,
#0f5a02
);
border-radius:8px;
box-shadow:0 0 10px rgba(34,160,6,.6);
}

::-webkit-scrollbar-thumb:hover{
background:linear-gradient(
180deg,
#2ed60a,
#22A006
);
}

/* Firefox */

*{
scrollbar-width:thin;
scrollbar-color:#22A006 #050505;
}

:root{
  --black:#0a0a0a;
  --white:#ffffff;
  --green:#22A006;
  --muted:#9a9a9a;
  --soft:rgba(255,255,255,.08);
}

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

html,body{
background:var(--black);
color:var(--white);
font-family:'Inter',sans-serif;
overflow-x:hidden;
cursor:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczMicgaGVpZ2h0PSczMicgdmlld0JveD0nMCAwIDMyIDMyJz48cGF0aCBmaWxsPScjMjJBMDA2JyBkPSdNNCAyIEw0IDI2IEwxMCAyMCBMMTQgMzAgTDE4IDI4IEwxNCAxOCBMMjIgMTggWicvPjwvc3ZnPg==") 4 4, auto;
}

/* ================= GRAIN ================= */

body::after{
content:"";
position:fixed;
inset:0;
background:url("https://grainy-gradients.vercel.app/noise.svg");
opacity:.07;
pointer-events:none;
z-index:999;
}

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

header{
position:fixed;
top:0;
left:0;
right:0;
height:90px;
padding:0 10%;
display:grid;
grid-template-columns:auto 1fr auto;
align-items:center;
background:linear-gradient(to bottom,rgb(2, 46, 11),transparent);
z-index:1000;
}

/* LOGO */

.logo img{
height:80px;
}

/* ================= NAV ================= */

.main-nav{
display:flex;
justify-content:center;
gap:48px;
align-items:center;
}

.main-nav a {
  text-decoration: none;
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.08em;
  font-size: 14px;
  position: relative;
}
/* underline animation */

.main-nav a::after{
content:"";
position:absolute;
left:0;
bottom:-6px;
width:0;
height:2px;
background:var(--green);
transition:.3s;
}

.main-nav a:hover{
color:#fff;
}

.main-nav a:hover::after{
width:100%;
}

/* active */

.main-nav a.active{
color:#fff;
}

.main-nav a.active::after{
width:100%;
background:linear-gradient(90deg,#fff,rgba(255,255,255,.3));
}

/* ================= DROPDOWN ================= */

.dropdown{
position:relative;
}

.dropbtn{
display:flex;
align-items:center;
gap:6px;
}

.arrow{
font-size:11px;
transition:transform .3s ease;
}

.dropdown-content{
position:absolute;
top:140%;
left:0;
background:rgba(0,0,0,.9);
backdrop-filter:blur(8px);
min-width:260px;
padding:12px 0;
display:none;
flex-direction:column;
border-radius:8px;
box-shadow:0 15px 40px rgba(0,0,0,.6);
z-index:999;
}

.dropdown-content a{
padding:12px 24px;
font-size:13px;
letter-spacing:.06em;
}

.dropdown-content a:hover{
background:rgba(255,255,255,.08);
}

.dropdown:hover .dropdown-content{
display:flex;
}

.dropdown:hover .arrow{
transform:rotate(180deg);
}

.dropdown-content a.active{
background:rgba(255,255,255,.12);
}

.dropbtn.active .arrow{
transform:rotate(180deg);
}

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

.socials{
display:flex;
gap:18px;
}

.socials a{
font-size:18px;
color:var(--muted);
transition:.3s;
}

.socials a:hover{
color:var(--green);
transform:translateY(-2px);
text-shadow:0 0 12px rgba(34,160,6,.45);
}

.socials i{
pointer-events:none;
}

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

.mobile-quick{
display:none;
gap:18px;
justify-self:center;
}

.mobile-quick a{
font-size:.7rem;
letter-spacing:2px;
color:var(--muted);
text-decoration:none;
position:relative;
}

.mobile-quick a::after{
content:"";
position:absolute;
left:0;
bottom:-6px;
width:0;
height:2px;
background:var(--green);
transition:.3s;
}

.mobile-quick a:hover{
color:#fff;
}

.mobile-quick a:hover::after{
width:100%;
}

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

#hero{
height:100vh;
padding-top:90px;
display:flex;
align-items:flex-end;
background:radial-gradient(circle at center,rgba(34,160,6,.22),transparent 65%);
}

.hero-content{
padding:0 10% 8%;
max-width:900px;
}

.hero-content h1{
font-size:clamp(3rem,6vw,4.8rem);
margin-bottom:20px;
}

.hero-content p{
color:var(--muted);
font-size:1.1rem;
}

/* ================= GLOBAL ================= */

section{
padding:140px 10%;
max-width:1600px;
margin:auto;
}

/* so the "See More AI Work" link from ai.html lands below the fixed
   header instead of having its heading hidden behind it */
#ai-work{
scroll-margin-top:100px;
}

h2{
font-size:clamp(2rem,4vw,2.8rem);
margin-bottom:12px;
}

.divider{
width:120px;
height:2px;
background:var(--green);
margin:26px 0 46px;
}

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

.video-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
gap:50px;
}

.video-card{
opacity:0;
transform:translateY(80px) scale(.96);
filter:blur(14px);
}

.video-thumb{
position:relative;
aspect-ratio:16/9;
overflow:hidden;
border:1px solid var(--soft);
cursor:pointer;
}

.video-thumb img{
width:100%;
height:100%;
object-fit:cover;
filter:brightness(.85);
transition:.8s ease;
}

.video-thumb:hover img{
transform:scale(1.08);
filter:brightness(1);
}

.video-thumb::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(to top,rgba(0,0,0,.75),transparent 65%);
}

.play{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:70px;
height:70px;
border-radius:50%;
border:1px solid var(--green);
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 0 40px rgba(34,160,6,.45);
}

.play::before{
content:"";
border-left:18px solid var(--green);
border-top:12px solid transparent;
border-bottom:12px solid transparent;
margin-left:4px;
}

.video-frame{
position:absolute;
inset:0;
display:none;
z-index:5;
}

.video-frame iframe{
width:100%;
height:100%;
border:0;
}

.video-info{
margin-top:18px;
}

.video-info h3{
font-size:1rem;
margin-bottom:6px;
}

.video-info span{
font-size:.85rem;
color:var(--muted);
}

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

@media(max-width:768px){

header{
height:80px;
padding:0 6%;
grid-template-columns:auto auto auto auto;
column-gap:10px;
}

.logo img{
height:70px;
}

.mobile-quick{
display:flex;
}

.socials{
gap:12px;
}

#hero{
padding-top:70px;
}

section{
padding:100px 20px;
}

.video-grid{
gap:36px;
}

/* .video-card starts at opacity:0 and only reaches opacity:1 via a GSAP
   ScrollTrigger reveal - unlike the AI/TVCommercials/etc pages, this one
   has no CSS fallback at all, so any mobile timing miss leaves cards
   invisible permanently. Force them visible on mobile regardless. */
.video-card{
opacity:1 !important;
transform:none !important;
filter:none !important;
}

}


/* hamburger icon + mobile drawer + dropdown styles live in mobile-nav.css */

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

.mobile-socials{
display:none;
margin-top:40px;
gap:20px;
font-size:22px;
}

.mobile-socials a{
color:#9a9a9a;
transition:.3s;
}

.mobile-socials a:hover{
color:#22A006;
transform:translateY(-3px);
}

@media(max-width:768px){

.mobile-socials{
display:flex;
}

.socials{
display:none;
}

}