:root{
  --bg:#02070c;
  --line:rgba(117,190,255,.34);
  --blue:#78bfff;
  --white:#f5f7fb;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#02070c;color:var(--white);font-family:Arial,Helvetica,sans-serif}
body{overflow-x:hidden}
.site-header{
  height:72px; position:fixed; inset:0 0 auto 0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 4.2vw; background:rgba(1,6,11,.94);
  border-bottom:1px solid rgba(115,180,235,.12);
  backdrop-filter:blur(10px);
}
.brand{text-decoration:none;color:white;line-height:1}
.brand-name{display:block;font-size:20px;letter-spacing:.34em;font-weight:300}
.brand-tag{display:block;margin-top:8px;font-size:8px;letter-spacing:.38em;color:#9bcdf5}
.nav{display:flex;align-items:center;gap:38px}
.nav a{color:#f3f6fa;text-decoration:none;font-size:13px;position:relative;padding:27px 0 24px}
.nav a:hover,.nav a.active{color:white}
.nav a.active:after,.nav a:hover:after{
 content:"";position:absolute;left:0;right:0;bottom:15px;height:2px;
 background:#75baff;box-shadow:0 0 8px #4aa6ff;
}
.menu-btn{display:none;background:none;border:0;color:white;font-size:25px;cursor:pointer}

.hero{
  position:relative; min-height:100vh; padding-top:72px;
  display:flex; align-items:stretch; background:#02070c;
}
.hero-art{
  position:absolute; inset:72px 0 0 0;
  background-image:
    linear-gradient(to bottom,rgba(0,0,0,0) 76%,rgba(1,6,11,.26) 100%),
    url("images/home-hero.jpg");
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
}
/* Transparent real link positioned over the Book Trailer button in the current art.
   If a future hero image moves the button, adjust these four values. */
.trailer-hotspot{
 position:absolute; z-index:5;
 left:65%; top:62%; width:24%; height:13%;
 border:1px solid transparent; border-radius:2px;
}
.trailer-hotspot:focus,.trailer-hotspot:hover{
 border-color:rgba(126,194,255,.9);
 box-shadow:0 0 18px rgba(65,157,255,.55);
 outline:none;
}
.hero-edge{
 position:absolute;z-index:4;left:0;right:0;bottom:0;height:1px;
 background:linear-gradient(90deg,transparent,var(--blue),transparent);
 box-shadow:0 0 10px rgba(93,173,255,.65)
}
.placeholder{
 min-height:100vh;padding:140px 8vw 80px;
 background:radial-gradient(circle at 50% 20%,#10213a 0,#06101b 35%,#02070c 75%);
}
.placeholder h1{font-family:Georgia,serif;font-weight:400;letter-spacing:.12em;font-size:clamp(36px,6vw,76px);margin:0 0 20px}
.placeholder p{max-width:700px;color:#b8c4d0;line-height:1.7;font-size:17px}
.back{color:#8fc9ff;text-decoration:none}
@media(max-width:850px){
 .site-header{height:66px;padding:0 20px}
 .brand-name{font-size:16px}
 .brand-tag{font-size:7px}
 .menu-btn{display:block}
 .nav{
   display:none;position:absolute;top:66px;left:0;right:0;
   flex-direction:column;gap:0;background:rgba(1,6,11,.98);
   border-bottom:1px solid var(--line);padding:8px 0 16px;
 }
 .nav.open{display:flex}
 .nav a{width:100%;text-align:center;padding:14px}
 .nav a.active:after,.nav a:hover:after{bottom:5px;left:40%;right:40%}
 .hero{padding-top:66px}
 .hero-art{inset:66px 0 0 0;background-position:42% center}
 .trailer-hotspot{left:58%;top:63%;width:34%;height:12%}
}
@media(max-width:560px){
 .brand-name{font-size:14px;letter-spacing:.25em}
 .brand-tag{letter-spacing:.26em}
 .hero-art{background-position:38% center}
 .trailer-hotspot{left:51%;top:63%;width:44%;height:12%}
}


/* ===== Mailing List ===== */
.mailing-list{
  position:relative;
  background:
    radial-gradient(circle at 50% 0%,rgba(29,104,170,.12),transparent 45%),
    #02070c;
  border-top:1px solid rgba(117,190,255,.34);
  border-bottom:1px solid rgba(117,190,255,.20);
}
.mailing-list:before{
  content:"";
  position:absolute;
  left:50%;top:-1px;
  width:110px;height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,#8dccff,transparent);
  box-shadow:0 0 12px #4ba9ff;
}
.mailing-inner{
  max-width:1400px;
  margin:0 auto;
  padding:30px 4.2vw 28px;
  display:grid;
  grid-template-columns:minmax(280px,.85fr) minmax(430px,1.15fr);
  gap:64px;
  align-items:center;
}
.mailing-copy h2{
  margin:0 0 10px;
  font-size:15px;
  font-weight:400;
  letter-spacing:.42em;
  color:#a8d6fa;
}
.mailing-copy p{
  margin:0;
  max-width:540px;
  color:#c3ccd5;
  font-size:13px;
  line-height:1.55;
}
.mailing-form{
  display:flex;
  width:100%;
  min-height:46px;
}
.mailing-form input{
  flex:1;
  min-width:0;
  border:1px solid rgba(147,195,235,.45);
  border-right:0;
  background:rgba(0,0,0,.28);
  color:#fff;
  padding:0 18px;
  font-size:13px;
  outline:none;
}
.mailing-form input:focus{
  border-color:#75baff;
  box-shadow:inset 0 0 12px rgba(75,169,255,.10);
}
.mailing-form input::placeholder{color:#7f8993}
.mailing-form button{
  min-width:180px;
  border:1px solid #66aff0;
  background:linear-gradient(180deg,#214d74,#173854);
  color:#fff;
  font-size:11px;
  letter-spacing:.26em;
  padding:0 24px;
  cursor:pointer;
  transition:.18s ease;
}
.mailing-form button:hover{
  background:linear-gradient(180deg,#2c6595,#1d486c);
  box-shadow:0 0 14px rgba(75,169,255,.28);
}
.mailing-note{
  margin:9px 0 0;
  text-align:center;
  color:#8e9aa5;
  font-size:10px;
  letter-spacing:.03em;
}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
@media(max-width:850px){
  .mailing-inner{
    grid-template-columns:1fr;
    gap:22px;
    padding:28px 22px;
  }
}
@media(max-width:560px){
  .mailing-form{flex-direction:column;gap:10px}
  .mailing-form input{min-height:46px;border-right:1px solid rgba(147,195,235,.45)}
  .mailing-form button{min-height:46px;width:100%}
  .mailing-copy h2{font-size:13px;letter-spacing:.3em}
}


/* ===== Header Social Links ===== */
.social-links{
  display:flex;
  align-items:center;
  gap:14px;
  margin-left:24px;
  padding-left:24px;
  border-left:1px solid rgba(147,195,235,.22);
}
.social-links a{
  width:18px;
  height:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#b9c3cc;
  opacity:.86;
  transition:color .18s ease, opacity .18s ease, filter .18s ease, transform .18s ease;
}
.social-links svg{
  width:17px;
  height:17px;
  fill:currentColor;
}
.social-links a:hover,
.social-links a:focus{
  color:#8dccff;
  opacity:1;
  filter:drop-shadow(0 0 5px rgba(75,169,255,.8));
  transform:translateY(-1px);
  outline:none;
}
@media(max-width:1100px){
  .nav{gap:22px}
  .social-links{gap:11px;margin-left:16px;padding-left:16px}
}
@media(max-width:850px){
  .social-links{
    position:absolute;
    right:58px;
    margin:0;
    padding:0 16px 0 0;
    border-left:0;
    border-right:1px solid rgba(147,195,235,.22);
  }
}
@media(max-width:480px){
  .social-links{gap:9px;right:52px;padding-right:11px}
  .social-links a{width:16px;height:16px}
  .social-links svg{width:15px;height:15px}
}


/* ===== Site Footer ===== */
.site-footer{
  position:relative;
  background:#01060b;
  padding:34px 4.2vw 20px;
  border-top:1px solid rgba(117,190,255,.12);
}
.footer-main{
  max-width:1400px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:40px;
}
.footer-brand{
  justify-self:start;
  color:#f5f7fb;
  text-decoration:none;
  font-size:17px;
  font-weight:300;
  letter-spacing:.32em;
}
.footer-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:26px;
}
.footer-nav a,
.footer-legal a{
  color:#9da9b4;
  text-decoration:none;
  font-size:11px;
  transition:color .18s ease, text-shadow .18s ease;
}
.footer-nav a:hover,
.footer-nav a:focus,
.footer-legal a:hover,
.footer-legal a:focus{
  color:#8dccff;
  text-shadow:0 0 8px rgba(75,169,255,.55);
  outline:none;
}
.footer-social{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:15px;
}
.footer-social a{
  width:18px;
  height:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#aab5bf;
  transition:color .18s ease, filter .18s ease, transform .18s ease;
}
.footer-social svg{
  width:17px;
  height:17px;
  fill:currentColor;
}
.footer-social a:hover,
.footer-social a:focus{
  color:#8dccff;
  filter:drop-shadow(0 0 5px rgba(75,169,255,.75));
  transform:translateY(-1px);
  outline:none;
}
.footer-rule{
  max-width:1400px;
  height:1px;
  margin:28px auto 17px;
  background:linear-gradient(90deg,transparent,rgba(117,190,255,.42),transparent);
  box-shadow:0 0 8px rgba(75,169,255,.12);
}
.footer-bottom{
  max-width:1400px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  color:#687580;
}
.footer-bottom p{
  margin:0;
  font-size:10px;
  letter-spacing:.04em;
}
.footer-legal{
  display:flex;
  align-items:center;
  gap:9px;
}
.footer-legal a{font-size:10px}
.footer-legal span{color:#4e5963}
@media(max-width:900px){
  .footer-main{
    grid-template-columns:1fr;
    justify-items:center;
    gap:22px;
  }
  .footer-brand,.footer-social{justify-self:center}
  .footer-nav{flex-wrap:wrap;gap:14px 22px}
}
@media(max-width:560px){
  .site-footer{padding:30px 22px 18px}
  .footer-brand{font-size:15px}
  .footer-bottom{
    flex-direction:column;
    justify-content:center;
    text-align:center;
    gap:10px;
  }
}

/* Keep the complete homepage artwork visible on every screen. */
.hero{
  width:100%;max-width:1600px;min-height:0;
  aspect-ratio:1981 / 794;margin:72px auto 0;padding:0;
}
.hero-art{inset:0;background-size:contain;background-position:center;}
@media(max-width:850px){
  .hero{margin-top:66px;padding:0;}
  .hero-art{inset:0;background-position:center;}
}
@media(max-width:560px){
  .hero-art{background-position:center;}
}