/* Base */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;font-family:Arial,Helvetica,sans-serif;background:#000;color:#fff}
a{color:#ffd700;text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:0 20px}

/* Video deck behind everything */
#videoContainer video{
  display:none;position:fixed;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:-1; /* cinematic desktop look */
}

/* Page overlay content */
.content{min-height:100vh;display:flex;flex-direction:column;justify-content:space-between}

/* Navbar (matches pilot.css) */
.navbar{
  width:100%;padding:15px;background:rgba(0,0,0,.7);
  display:flex;justify-content:center;gap:20px;font-size:1.1em;
  position:sticky;top:0;z-index:5;border-bottom:1px solid rgba(255,255,255,.08)
}
.navbar a{color:#fff;transition:color .3s}
.navbar a:hover{color:#ffd700}
.navbar .active{color:#ffd700}

/* Hero */
.hero{position:relative;display:flex;align-items:center;min-height:68vh;text-align:center}
.hero-inner{padding:60px 20px;position:relative;z-index:2}
.title{font-size:2.8rem;line-height:1.1}
.subtitle{font-size:1.15rem;opacity:.95;margin-top:6px}
.brand{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:16px}
.logo{width:64px;height:64px;border-radius:12px;object-fit:cover;border:1px solid rgba(255,255,255,.2)}
.brand-text .title{margin:0}
.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:18px}

.btn{
  display:inline-block;padding:12px 18px;border:1px solid #ffd700;
  color:#000;background:#ffd700;border-radius:6px;font-weight:bold
}
.btn.secondary{background:transparent;color:#ffd700}

/* Gradient overlay for legibility over bright frames */
.hero-gradient{
  position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(120% 120% at 50% 10%, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 60%, rgba(0,0,0,.6) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.2), rgba(0,0,0,.6))
}

/* Footer */
.footer{font-size:.95rem;padding:24px;text-align:center;color:#ddd;opacity:.9}

/* Spacer to keep fold composition tidy */
.spacer{height:8vh}

/* YouTube section (consistent with pilot page) */
.youtube-section{padding:64px 0;background:#0b0b0b;border-top:1px solid rgba(255,255,255,.08)}
.section-title{font-size:1.8rem;margin-bottom:10px;text-align:center}
.section-sub{opacity:.85;margin:0 auto 24px;text-align:center;max-width:740px}
.youtube-container{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:1100px;margin:0 auto;border-radius:12px;border:1px dashed rgba(255,255,255,.25)}
.youtube-container iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:12px}
.yt-cta{display:flex;gap:12px;justify-content:center;margin-top:18px}

/* Mobile adjustments */
@media(max-width:900px){
  .title{font-size:2.2rem}
  .subtitle{font-size:1rem}
}

/* If you want to avoid horizontal cropping on phones, switch to contain */
@media(max-width:600px){
  #videoContainer video{object-fit:contain;background:#000}
  .hero{min-height:60vh}
}