/* Theme variables from homepage */
:root{
  --bg:#05060a;
  --bg2:#070812;
  --panel:rgba(255,255,255,.04);
  --panel2:rgba(255,255,255,.06);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.66);
  --line:rgba(255,255,255,.10);

  --accent:#ff3b30;      /* subtle cinema red */
  --accent2:#06b6d4;     /* cool highlight */
  --shadow: 0 18px 60px rgba(0,0,0,.55);

  --radius:18px;
  --radius2:26px;
  --max:1140px;
}

/* === Cinematic overrides === */
:root{
  --bg:#05060a;
  --panel:#0b0d13;
  --text:#f3f6ff;
  --muted:rgba(243,246,255,.72);
  --line:rgba(255,255,255,.10);
  --glow1:#ff3b30;
  --glow2:#06b6d4;
  --shadow: 0 18px 60px rgba(0,0,0,.55);
}

/* background + grain */
body{
  background:
    radial-gradient(900px 600px at 12% 12%, rgba(255,59,48,.12), transparent 55%),
    radial-gradient(900px 600px at 88% 22%, rgba(6,182,212,.10), transparent 55%),
    radial-gradient(700px 500px at 55% 92%, rgba(255,255,255,.05), transparent 58%),
    var(--bg);
}
body::before{
  content:"";
  position:fixed;
  inset:-40px;
  pointer-events:none;
  opacity:.10;
  mix-blend-mode: overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  background-size:220px 220px;
  transform: rotate(1deg);
}

/* serif headlines */
.h-title, .page-hero h1, .section-title h2, h1{
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
  letter-spacing:-0.03em;
}

/* richer spacing (safe) */
.section{padding: 54px 0;}
.hero{padding-top: 64px;}
.card{background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));}

/* film-strip motion band */
.filmstrip{
  margin-top: 18px;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 10px, transparent 10px 22px);
  border-radius: 18px;
  overflow:hidden;
}
.filmstrip .track{
  display:flex;
  gap: 20px;
  padding: 12px 16px;
  width: max-content;
  animation: filmrun 18s linear infinite;
}
.filmstrip .tag{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  font-weight:900;
  letter-spacing:.01em;
  text-transform: lowercase;
  color: rgba(243,246,255,.90);
}
.filmstrip .dot{
  width:6px;height:6px;border-radius:999px;
  background: linear-gradient(135deg,var(--glow1),var(--glow2));
}
@keyframes filmrun{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* keep within viewport */
html,body{width:100%}
body{overflow-x:hidden}
*{min-width:0}
h1,h2,h3,p{overflow-wrap:anywhere}

/* === Header Contact Button (cinematic) === */
.header-contact{
  background: rgba(255,255,255,.06) !important;
  color: var(--text) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.35) !important;
}
.header-contact:hover{
  background: linear-gradient(135deg, rgba(255,59,48,.30), rgba(6,182,212,.22)) !important;
  border-color: rgba(255,255,255,.24) !important;
  transform: translateY(-1px);
}
.header-contact:active{ transform: translateY(0px); }


/* Keep toggle and dropdown within viewport */
@media (max-width: 860px){
  .nav{ position: relative; }
  .nav-list{
    right: 0 !important;
    left: 0 !important;
    margin: 0 auto;
    width: min(340px, calc(100vw - 28px)) !important;
    max-width: calc(100vw - 28px) !important;
  }
}

/* Prevent accidental horizontal scroll caused by header */
html, body{ width:100%; overflow-x:hidden; }
.site-header, .header-inner{ max-width:100%; }


/* Ensure header never creates horizontal scroll */
html, body{ overflow-x: hidden; }

/* === Mobile menu centered dropdown (v7) === */
@media (max-width: 900px){
  /* keep toggle safely inside header */
  .site-header .container{
    width: 100% !important;
    margin: 0 auto !important;
    padding-left: max(16px, env(safe-area-inset-left)) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
  }

  /* center dropdown under header */
  .nav{ position: relative !important; }
  .nav-list{
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: 62px !important;
    transform: translateX(-50%) !important;

    width: min(360px, calc(100vw - 32px)) !important;
    max-height: calc(100vh - 120px) !important;
    overflow: auto !important;

    padding: 14px !important;
    border-radius: 20px !important;
    background: rgba(8,9,14,.98) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    box-shadow: 0 22px 70px rgba(0,0,0,.65) !important;

    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    z-index: 1002 !important;
  }
  .nav-list.open{ display: flex !important; }

  .nav-list a{
    color: rgba(243,246,255,.92) !important;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.10);
  }
  .nav-list a.btn{
    background: linear-gradient(135deg, rgba(255,59,48,.92), rgba(6,182,212,.82)) !important;
    color: #05060a !important;
    border: 1px solid rgba(255,255,255,.14) !important;
  }

  /* remove any blur backdrop behavior */
  body.nav-open::after{ content: none !important; }
  body.nav-open{ overflow: auto !important; }
}

/* prevent horizontal scroll */
html, body{ overflow-x: hidden; }