/*
Theme Name: Nextlight Entertainment
Theme URI: https://nextlightentertainment.com
Author: Hamza Saeed
Author URI: https://nextlightentertainment.com
Description: Custom landing page theme for Nextlight Entertainment — Illuminate the Stories of Tomorrow.
Version: 2.2
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: nextlight
*/

/* ==========================================================================
   FILE KA LAYOUT

   PART 1  DESKTOP   -> default styles (1024px aur usse bari screen)
                        (isme animations aur section backgrounds bhi hain)
   PART 2  TABLET    -> @media (max-width:1023px)  (768px se 1023px tak)
   PART 3  MOBILE    -> @media (max-width:767px)   (767px aur chhoti screen)

   Rules:
   - Tablet ya mobile ka koi bhi badlav sirf PART 2 ya PART 3 mein karo.
   - PART 3 hamesha file ke sabse neeche rahe, taake mobile ke rules jeetein.
   - Kuch bhi naya desktop ke liye ho to PART 1 mein, sahi section ke neeche.
   ========================================================================== */


/* ==========================================================================
   PART 1 — DESKTOP (default)
   ========================================================================== */

/* ---------- 1.1 Variables ---------- */
:root{
  --background: oklch(5% .005 60);
  --foreground: oklch(98% .005 60);
  --muted: oklch(15% .01 60);
  --muted-foreground: oklch(68% .02 60);
  --accent: oklch(72% .19 55);
  --accent-foreground: oklch(5% .005 60);
  --border: oklch(20% .01 60);
  --primary: oklch(72% .19 55);
  --primary-foreground: oklch(5% .005 60);

  --font-sans:'Inter', system-ui, sans-serif;
  --font-serif:'Cormorant Garamond', serif;
  --font-display:'Oswald', 'Bebas Neue', sans-serif;
}

/* ---------- 1.2 Base / reset ---------- */
*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  background-color:var(--background);
  color:var(--foreground);
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip; /* koi element bahar nikle to side scroll na aaye */
}

img{ max-width:100%; display:block; }

a{ color:inherit; text-decoration:none; }

ul{ list-style:none; }

/* Keyboard se navigate karne wale users ko focus dikhe (ADA) */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

/* ---------- 1.3 Layout helpers ---------- */
.wrap{ max-width:72rem; margin-inline:auto; }

.px{ padding-inline:3.5rem; }
.px-lg{ padding-inline:6rem; }

.section-pad{ padding-block:6rem; }

/* ---------- 1.4 Text helpers ---------- */
.text-display{
  font-family:var(--font-display);
  letter-spacing:-0.01em;
  text-transform:uppercase;
  line-height:.95;
}

.text-serif-display{
  font-family:var(--font-serif);
  letter-spacing:.02em;
  font-style:italic;
}

.accent{ color:var(--accent); }
.muted{ color:var(--muted-foreground); }
.white70{ color:rgba(255,255,255,.7); }
.white60{ color:rgba(255,255,255,.6); }
.white50{ color:rgba(255,255,255,.5); }

/* ---------- 1.5 Keyframes ---------- */
@keyframes sunrise{
  0%{ opacity:0; transform:translate(30%,40%) scale(.6); }
  60%{ opacity:1; }
  100%{ opacity:1; transform:translate(0) scale(1); }
}
@keyframes fade-up{
  0%{ opacity:0; transform:translateY(24px); }
  100%{ opacity:1; transform:translateY(0); }
}

/* ---------- 1.6 Header ---------- */
.site-header{
  position:absolute;
  top:0; left:0; right:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.5rem 3.5rem;
}

.logo{
  display:flex;
  align-items:center;
  gap:.75rem;
  opacity:1;
  transition:opacity .25s ease-out;
}

.logo-mark{
  width:140px;
  height:140px;
  object-fit:contain;
  flex-shrink:0;
}

.logo-text{ line-height:1.1; }
.logo-text .primary{
  font-family:var(--font-display);
  color:#fff;
  font-size:15px;
  letter-spacing:.25em;
}
.logo-text .secondary{
  font-size:10px;
  letter-spacing:.4em;
  color:var(--accent);
}

.header-search{
  color:rgba(255,255,255,.8);
  background:none;
  border:none;
  cursor:pointer;
}
.header-search:hover{ color:var(--accent); }

.nl-search-form{
  position:fixed;
  top:0; left:0; right:0;
  z-index:49;
  display:none;
  padding:5.5rem 3.5rem 1.5rem;
  background:rgba(5,3,1,.97);
  border-bottom:1px solid var(--border);
}
.nl-search-form.open{ display:block; }
.nl-search-form input{
  width:100%;
  max-width:40rem;
  background:none;
  border:none;
  border-bottom:1px solid var(--border);
  color:#fff;
  font-family:var(--font-display);
  font-size:1.5rem;
  letter-spacing:.05em;
  padding:.5rem 0;
  outline:none;
}
.nl-search-form input:focus{ border-color:var(--accent); }

/* ---------- 1.7 Side section nav ---------- */
.section-nav{
  display:flex;
  position:fixed;
  right:2rem;
  top:50%;
  transform:translateY(-50%);
  z-index:40;
  flex-direction:column;
  gap:1.25rem;
}

.section-nav a{
  display:flex;
  align-items:center;
  gap:.75rem;
  font-family:var(--font-display);
  font-size:14px;
  letter-spacing:.05em;
  color:rgba(255,255,255,.5);
  transition:color .2s ease;
}
.section-nav a:hover{ color:#fff; }
.section-nav a .line{
  height:1px;
  width:0;
  background:rgba(255,255,255,.4);
  transition:width .2s ease;
  display:inline-block;
}
.section-nav a:hover .line{ width:1rem; }
.section-nav a.active{ color:var(--accent); }
.section-nav a.active .line{ width:2rem; background:var(--accent); }

/* ---------- 1.8 Hero (Section 01) ---------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:var(--background);
}

.hero-earth{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:right;
  transform-origin:center;
  will-change:transform, opacity;
  /* glow-pulse (filter animation) hata di gayi: wo GPU par nahi chalti thi aur PageSpeed
     score girata tha. Sirf sunrise animation rakhi hai. */
  animation:sunrise 2.4s cubic-bezier(0.16, 1, 0.3, 1) both;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, black 6%, black 100%, black 100%),
    linear-gradient(to bottom, transparent 0%, black 6%, black 94%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, black 6%, black 100%, black 100%),
    linear-gradient(to bottom, transparent 0%, black 6%, black 94%, transparent 100%);
  mask-composite: intersect;
}

.hero-fade-r{
  position:absolute; inset:0;
  background:linear-gradient(to right, var(--background) 0%, rgba(5,3,1,.7) 40%, transparent 100%);
}
.hero-fade-t{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(5,3,1,.8) 0%, transparent 60%);
}

.hero-content{
  position:relative;
  z-index:10;
  max-width:64rem;
  padding:0 6rem;
  animation:fade-up .9s ease-out both;
}

/* Parallax band: functions.php ka scroll JS hero ki image aur text ko scroll par
   hilata tha. Ye rule usko rok deta hai, taake hero ke neeche koi patti na bane.
   Parallax dobara chahiye ho to ye poora block delete kar do. */
.hero-earth,
.hero-content{ translate:none !important; }

.hero-heading{
  font-family:var(--font-display);
  font-weight:600;
  color:#fff;
  font-size:6.5vw;
  line-height:.9;
}

/* Hero heading ki har line (Illuminate / line2 / line3) alag row mein aur caps mein. */
.hero-heading > span{
  display:block;
  text-transform:uppercase;
}

.hero-heading .illuminate{
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:400;
  color:rgba(255,255,255,.95);
  text-shadow:0 0 30px oklch(72% .19 55 / .5);
}
.hero-heading .accent-dot{ color:var(--accent); }

.hero-rule{ margin-top:1.5rem; height:1px; width:6rem; background:var(--accent); }

.hero-tagline{
  margin-top:2rem;
  color:rgba(255,255,255,.92);
  letter-spacing:.3em;
  font-size:22px;   /* copywriter: tag line thodi bari (pehle 16px) */
  font-weight:400;
}

.hero-desc{
  margin-top:1.5rem;
  max-width:32rem;
  color:rgba(255,255,255,.7);
  font-size:16px;
  line-height:1.7;
}

/* Hero description: bari screen par ek hi line mein, size screen ke hisaab se.
   (Pehle ye rules file ke bilkul aakhir mein thay. Selector lamba hi rakha hai
   taake mobile par bhi pehle jaisa hi dikhe.) */
.hero .hero-content .hero-desc{ font-size:clamp(16px,1.45vw,21px); }
@media (min-width:1100px){
  .hero .hero-content .hero-desc{ max-width:none; white-space:nowrap; }
}

/* ---------- 1.9 Section headings (eyebrow / h2 / lede / kicker) ---------- */
.eyebrow{
  display:flex;
  align-items:baseline;
  gap:1.5rem;
  margin-bottom:2.5rem;
}
.eyebrow .num{ font-family:var(--font-display); color:var(--accent); font-size:1.5rem; }
.eyebrow .label{ font-family:var(--font-display); color:rgba(255,255,255,.7); font-size:13px; letter-spacing:.4em; }

.h2{
  font-family:var(--font-display);
  color:#fff;
  font-size:3.75rem;
  line-height:1.15;
  max-width:56rem;
  text-transform: uppercase;
  font-weight: 400;
}

.h2-lg{ font-size:4.5rem; } /* hamesha .h2 ke baad rahe */

.lede{ margin-top:2rem; max-width:42rem; color:rgba(255,255,255,.7); line-height:1.65; }

/* Heading ke neeche wali tag lines (har section ke liye): thodi bari aur ek line mein.
   Font size screen ki chaudai ke hisaab se khud adjust hota hai, taake lambi
   line bhi desktop par ek hi line mein aaye. (Ye .lede ke BAAD rahe.) */
.lede-tag{
  max-width:none;
  font-size:clamp(.95rem, calc((100vw - 7rem) / 59), 1.25rem);
  line-height:1.55;
  color:rgba(255,255,255,.78);
}

.kicker{
  font-family:var(--font-display);
  color:rgba(255,255,255,.5);
  font-size:12px;
  letter-spacing:.4em;
  margin-bottom:1.5rem;
}

/* ---------- 1.10 Cards grid ---------- */
.grid-cards{
  display:grid;
  gap:1px;
  background:var(--border);
  margin-top:1.5rem;
}
.grid-cards.cols-3{ grid-template-columns:repeat(3,1fr); }
.grid-cards.cols-2{ grid-template-columns:repeat(2,1fr); }
.grid-cards.cols-4{ grid-template-columns:repeat(4,1fr); }

.card{
  background:var(--background);
  padding:2rem;
  transition:background-color .2s ease;
}
.card:hover{ background:rgba(255,255,255,.03); }

.card h3, .card h4{
  font-family:var(--font-display);
  color:var(--accent);
  font-size:14px;
  letter-spacing:.2em;
  margin-bottom:1rem;
  text-transform: uppercase;
  font-weight: 400;
}
.card h4.white{ color:#fff; font-size:1.125rem; letter-spacing:normal; text-transform:uppercase; font-weight: 400;  }

.card-icon{
  width:52px;
  height:52px;
  object-fit:contain;
  display:block;
  margin-bottom:1rem;
  mix-blend-mode:screen;
}
.card p{ color:rgba(255,255,255,.7); font-size:14px; line-height:1.6; }

.divider{ border-top:1px solid var(--border); margin-top:5rem; padding-top:4rem; }

/* ---------- 1.11 Links / buttons ---------- */
.cta-link{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-family:var(--font-display);
  letter-spacing:.2em;
  font-size:14px;
  color:#fff;
  transition:color .2s ease;
}
.cta-link:hover{ color:var(--accent); }

.cta-links{ display:flex; flex-wrap:wrap; gap:2rem; margin-top:2rem; }

.btn-accent{
  display:inline-flex;
  align-items:center;
  gap:.75rem;
  border:1px solid var(--accent);
  padding:1rem 2rem;
  font-family:var(--font-display);
  letter-spacing:.25em;
  font-size:14px;
  color:#fff;
  transition:background-color .2s ease, color .2s ease;
}
.btn-accent:hover{ background:var(--accent); color:var(--accent-foreground); }

.quote{
  margin-top:6rem;
  max-width:56rem;
  font-family:var(--font-serif);
  font-style:italic;
  color:rgba(255,255,255,.9);
  font-size:1.875rem;
  line-height:1.4;
}

/* ---------- 1.12 Section backgrounds (Cyfuno Studios + Cyfuno Ventures) ----------
   Studios (02)  -> film-set photo    (production.16.9-scaled.jpg)
   Ventures (03) -> starfield + man   (Starfield.16x9-scaled.jpg)
   (front-page.php mein .bg-studios #s2 par aur .bg-ventures #s3 "CYFUNO VENTURES" par
    honi chahiye. 01 wale options section par koi image nahi.)

   Image ek 16:9 frame ki tarah section ke upar baithti hai (client ke examples jaisa),
   poore lambe section par phailti nahi. Frame ke upar aur neeche ke kinare dheere
   kaale mein ghulte hain, isliye hard edge nahi dikhta.

   KNOBS (har section ke liye neeche alag):
     --bg-y        image kitni NEECHE hai. Zyada number = zyada neeche, minus = upar
     --bg-h        image frame ki unchai
     --bg-opacity  0 se 1: kam = halki image, zyada = tez image
     --bg-pos      image ka kaun sa hissa dikhe, jaise "center top" ya "85% top"
     --bg-flip     1 = seedha, -1 = left/right ulta
                   (Ventures mein aadmi LEFT par dikhe to -1 kar do) */
.bg-studios,
.bg-ventures{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background-color:var(--background);
}

.bg-studios::before,
.bg-ventures::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:var(--bg-y, 0px);
  height:min(var(--bg-h, 56.25vw), calc(100% - var(--bg-y, 0px)));
  z-index:-1;
  pointer-events:none;
  opacity:var(--bg-opacity, .5);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:var(--bg-pos, center top);
  transform:scaleX(var(--bg-flip, 1));
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 20%, #000 70%, transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0%, #000 20%, #000 70%, transparent 100%);
}

/* Cyfuno Studios (02): film-set photo */
.bg-studios{
  --bg-y:40px;
  --bg-h:clamp(600px, 56.25vw, 1200px);
  --bg-opacity:.5;
  --bg-pos:center top;
}
/* .bg-on class functions.php ka chhota JS tab lagata hai jab section screen ke
   qareeb aata hai. Isse image page load ke saath download nahi hoti (speed). */
.bg-studios.bg-on::before{
  background-image:url("https://nextlightentertainment.com/wp-content/uploads/2026/10/production.16.9-scaled.jpg");
}

/* Cyfuno Ventures (03): starfield + man (aadmi right side mein) */
.bg-ventures{
  --bg-y:40px;
  --bg-h:clamp(600px, 56.25vw, 1200px);
  --bg-opacity:.45;
  --bg-pos:center top;
  --bg-flip:1;
}
.bg-ventures.bg-on::before{
  background-image:url("https://nextlightentertainment.com/wp-content/uploads/2026/10/Starfield.16x9-scaled.jpg");
}

/* Image wale sections mein cards thode transparent hain, isliye image cards ke
   peeche tak jati hai aur cards ke upar wala hard edge nahi dikhta (copywriter ka note).
   Cards zyada/kam dhundle karne ke liye .62 badlo (0 = bilkul clear, 1 = solid kaala). */
.bg-ventures .grid-cards,
.bg-studios .grid-cards{ background:transparent; }

.bg-ventures .grid-cards .card,
.bg-studios .grid-cards .card{
  background:rgba(5,3,1,.62);
  box-shadow:0 0 0 1px rgba(255,255,255,.07);
}
.bg-ventures .grid-cards .card:hover,
.bg-studios .grid-cards .card:hover{ background:rgba(28,18,10,.72); }

.section-bg{
  position:relative;
  overflow:hidden;
}
/* Purani PHP wali Studios image layer (studios_bg_image) ab use nahi hoti */
.section-bg .bg-layer{ display:none; }

/* ---------- 1.13 Featured Releases (Section 05) ---------- */
.featured-grid{
  display:grid;
  grid-template-columns:.85fr 1.6fr;
  align-items:start;
  gap:3rem;
  margin-top:3.5rem;
}

.featured-stat-number{
  font-family:var(--font-display);
  color:var(--accent);
  font-size:6rem;
  line-height:1;
  font-weight:600;
}

.featured-stat-label{
  font-family:var(--font-display);
  color:#fff;
  font-size:1.5rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  margin-top:.25rem;
  margin-bottom:1.5rem;
}

.featured-stat-block p{ color:rgba(255,255,255,.7); line-height:1.65; margin-top:.75rem; max-width:24rem; }

.browse-catalog-link{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-family:var(--font-display);
  letter-spacing:.2em;
  font-size:13px;
  color:#fff;
  text-transform:uppercase;
  margin-top:2rem;
  padding-bottom:.4rem;
  border-bottom:1px solid var(--accent);
  transition:color .2s ease;
}
.browse-catalog-link:hover{ color:var(--accent); }

.featured-filmstrip-wrap{
  background:rgba(255,255,255,.02);
  border:1px solid var(--border);
  padding:1.5rem;
}
.featured-filmstrip{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(0,1fr));
  gap:2px;
  background:var(--border);
}
.featured-filmstrip img{
  width:100%;
  aspect-ratio:2/3;
  object-fit:cover;
  display:block;
  background:var(--background);
}
.featured-filmstrip .no-poster{
  width:100%;
  aspect-ratio:2/3;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--background);
  color:rgba(255,255,255,.6);
  font-size:11px;
  text-align:center;
  padding:.5rem;
}
.featured-film-link{ display:block; }
.featured-film-link img{ transition:opacity .2s ease; }
.featured-film-link:hover img{ opacity:.85; }

.featured-filmstrip-captions{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(120px,1fr));
  gap:1rem;
  margin-top:1.25rem;
}
.featured-filmstrip-captions span{
  display:block;
  font-family:var(--font-display);
  font-size:11px;
  letter-spacing:.1em;
  color:rgba(255,255,255,.6);
  text-transform:uppercase;
  line-height:1.8;
  transition:color .2s ease;
}
.featured-film-caption-link:hover span{ color:var(--accent); }

/* ---------- 1.14 Catalog stat block ---------- */
.stat-grid{
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:2.5rem;
  margin-top:3.5rem;
  align-items:center;
}

.stat-number{
  font-family:var(--font-display);
  color:var(--accent);
  font-size:6rem;
  line-height:1;
}

.stat-label{
  font-family:var(--font-display);
  color:#fff;
  font-size:1.5rem;
  letter-spacing:.2em;
  margin-top:.5rem;
}

.film-tags{
  margin-top:1rem;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.25rem 1.5rem;
  color:rgba(255,255,255,.6);
  font-size:11px;
  letter-spacing:.15em;
  text-transform:uppercase;
}

.img-frame{ border:1px solid var(--border); width:100%; height:auto; aspect-ratio:16/8; object-fit:cover; background:var(--muted); }

/* ---------- 1.15 Catalog (Section 06, Film CPT grid) ---------- */
.catalog-searchbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  flex-wrap:wrap;
  margin-top:2.5rem;
}
.catalog-search-input{
  flex:1;
  min-width:240px;
  max-width:36rem;
  background:rgba(255,255,255,.03);
  border:1px solid var(--border);
  color:#fff;
  font-size:14px;
  padding:.9rem 1.1rem;
  outline:none;
}
.catalog-search-input::placeholder{ color:rgba(255,255,255,.55); }
.catalog-search-input:focus{ border-color:var(--accent); }

.catalog-count{
  font-family:var(--font-display);
  color:rgba(255,255,255,.6);
  font-size:13px;
  letter-spacing:.15em;
  white-space:nowrap;
}

.catalog-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:1.5rem 1.25rem;
  margin-top:2.5rem;
}

.catalog-card{ display:block; }
.catalog-card img{
  width:100%;
  aspect-ratio:2/3;
  object-fit:cover;
  border:1px solid var(--border);
  background:var(--muted);
  transition:opacity .2s ease;
}
.catalog-card:hover img{ opacity:.85; }
.catalog-card-noimg{
  aspect-ratio:2/3;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  padding:1rem;
  border:1px solid var(--border);
  background:var(--muted);
  color:rgba(255,255,255,.6);
  font-family:var(--font-display);
  font-size:13px;
  text-transform:uppercase;
}
.catalog-card .title{
  margin-top:.6rem;
  color:#fff;
  font-weight:600;
  font-size:13px;
  line-height:1.3;
}

/* ---------- 1.16 Shop (Section 07) ---------- */
.shop-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4rem;
  align-items:center;
}

.merch-img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border:1px solid var(--border); background:var(--muted); }

.coming-soon-badge{
  display:inline-block;
  border:1px solid var(--border);
  color:rgba(255,255,255,.6);
  font-family:var(--font-display);
  font-size:12px;
  letter-spacing:.2em;
  padding:.6rem 1.25rem;
}

/* ---------- 1.17 Contact (Section 08) ---------- */
/* PHP mein h2 par class="text-display contact-heading" honi chahiye
   (inline style="font-size:170px" hata dena). */
.contact-heading{
  color:#fff;
  font-size:170px;
  line-height:.9;
  max-width:56rem;
  font-weight:400;
  overflow-wrap:break-word;
}

.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3rem;
  margin-top:4rem;
  border-top:1px solid var(--border);
  padding-top:3rem;
}

.contact-tiles{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1rem;
  margin-top:2.5rem;
}
.contact-tiles div{
  border:1px solid var(--border);
  padding:1.5rem;
  text-align:center;
  font-family:var(--font-display);
  letter-spacing:.25em;
  font-size:13px;
  transition:border-color .2s ease;
  text-transform: uppercase;
  font-weight: 400;
}
.contact-tiles div:hover{ border-color:var(--accent); }

/* ---------- 1.18 Footer ---------- */
.site-footer{
  border-top:1px solid var(--border);
  padding:4rem 3.5rem;
}

.footer-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:2.5rem;
}

.footer-brand p{ margin-top:1.5rem; font-family:var(--font-serif); font-style:italic; color:rgba(255,255,255,.7); }

.footer-social{ display:flex; gap:.75rem; margin-top:1.5rem; }
.footer-social a{
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border);
  color:rgba(255,255,255,.7);
  border-radius:50%;
  transition:border-color .2s ease, color .2s ease;
}
.footer-social a:hover{ border-color:var(--accent); color:var(--accent); }

.site-footer h4{
  font-family:var(--font-display);
  color:rgba(255,255,255,.6);
  font-size:12px;
  letter-spacing:.3em;
  margin-bottom:1rem;
}
.site-footer ul li{ margin-bottom:.5rem; font-size:14px; color:rgba(255,255,255,.8); }
.site-footer ul li a:hover{ color:var(--accent); }

.newsletter-form{
  display:flex;
  align-items:center;
  border-bottom:1px solid var(--border);
  padding-bottom:.5rem;
}
.newsletter-form:focus-within{ border-color:var(--accent); }
.newsletter-form input{
  flex:1;
  background:none;
  border:none;
  outline:none;
  color:#fff;
  font-size:14px;
  padding:.5rem 0;
}
.newsletter-form input::placeholder{ color:rgba(255,255,255,.55); }
.newsletter-form button{
  background:none;
  border:none;
  color:var(--accent);
  cursor:pointer;
}

.footer-bottom{
  max-width:72rem;
  margin:3.5rem auto 0;
  padding-top:1.5rem;
  border-top:1px solid var(--border);
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  gap:.5rem;
  color:rgba(255,255,255,.55);
  font-size:12px;
}

/* ---------- 1.19 Legal pages (Privacy Policy / Terms of Service) ---------- */
.legal-page{
  max-width:48rem;
  margin:0 auto;
  padding:9rem 3.5rem 6rem;
}

.legal-page h1{
  font-family:var(--font-display);
  color:#fff;
  font-size:clamp(2rem,5vw,3rem);
  line-height:1.1;
  text-transform:uppercase;
}
.legal-page .legal-date{
  margin-top:.75rem;
  color:rgba(255,255,255,.5);
  font-size:13px;
  letter-spacing:.05em;
}
.legal-page h2{
  font-family:var(--font-display);
  color:var(--accent);
  font-size:1.25rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  margin-top:3rem;
  margin-bottom:1rem;
}
.legal-page h3{
  font-family:var(--font-display);
  color:#fff;
  font-size:1rem;
  letter-spacing:.03em;
  margin-top:1.75rem;
  margin-bottom:.5rem;
}
.legal-page p{
  color:rgba(255,255,255,.75);
  font-size:15px;
  line-height:1.75;
  margin-bottom:1rem;
}
.legal-page ul{
  margin:0 0 1rem 0;
  padding-left:0;
}
.legal-page ul li{
  color:rgba(255,255,255,.75);
  font-size:15px;
  line-height:1.7;
  padding-left:1.25rem;
  position:relative;
  margin-bottom:.5rem;
}
.legal-page ul li::before{
  content:"—";
  position:absolute;
  left:0;
  color:var(--accent);
}
.legal-page a{ color:var(--accent); text-decoration:underline; }

/* ---------- 1.20 Scroll animations ----------
   JS (functions.php) ye classes khud lagata hai: .reveal, .reveal-zoom, .is-visible */

/* Upar ki patli scroll progress line */
.nl-progress{
  position:fixed;
  top:0; left:0;
  width:100%;
  height:2px;
  background:var(--accent);
  transform-origin:0 50%;
  transform:scaleX(0);
  z-index:60;
  pointer-events:none;
}

/* Shuru mein chhupa hua aur neeche, scroll par upar aata hai */
.nl-js .reveal{
  opacity:0;
  transform:translateY(32px);
  transition:
    opacity .8s cubic-bezier(.16,1,.3,1) var(--reveal-delay, 0ms),
    transform .8s cubic-bezier(.16,1,.3,1) var(--reveal-delay, 0ms),
    background-color .2s ease 0ms,
    border-color .2s ease 0ms,
    color .2s ease 0ms;
  will-change:opacity, transform;
}

/* Images / posters ke liye halka zoom */
.nl-js .reveal.reveal-zoom{
  transform:translateY(20px) scale(.95);
}

/* Screen mein aane par */
.nl-js .reveal.is-visible{
  opacity:1;
  transform:none;
  will-change:auto;
}

/* Accessibility (ADA): jis user ne device par "reduce motion" on kiya ho,
   usko koi animation nahi dikhegi. */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .hero-earth,
  .hero-content{ animation:none !important; }
  .nl-js .reveal{ opacity:1; transform:none; transition:none; }
  .nl-progress{ display:none; }
}

/* ---------- 1.21 Spacing (paragraphs / sections ke beech ka kaala space) ----------
   Sirf ek number badlo: --space-scale
   1 = purani spacing, .7 = thoda tight (abhi), .5 = bahut tight
   Ye block purani margins/paddings ko override karta hai (is ke upar wali values
   ki jagah yehi chalti hain). */
:root{ --space-scale:.7; }

.section-pad{ padding-block:calc(6rem * var(--space-scale)); }
.eyebrow{ margin-bottom:calc(2.5rem * var(--space-scale)); }
.lede{ margin-top:calc(2rem * var(--space-scale)); }
.kicker{ margin-bottom:calc(1.5rem * var(--space-scale)); }
.divider{
  margin-top:calc(5rem * var(--space-scale));
  padding-top:calc(4rem * var(--space-scale));
}
.quote{ margin-top:calc(6rem * var(--space-scale)); }
.featured-grid,
.stat-grid{ margin-top:calc(3.5rem * var(--space-scale)); }
.catalog-searchbar,
.catalog-grid{ margin-top:calc(2.5rem * var(--space-scale)); }
.contact-grid{
  margin-top:calc(4rem * var(--space-scale));
  padding-top:calc(3rem * var(--space-scale));
}
.shop-grid{ gap:calc(4rem * var(--space-scale)); }

/* front-page.php mein inline style="margin-top:5rem" wale blocks (01 Ventures / options section) */
.options-section div[style*="margin-top:5rem"],
.bg-ventures div[style*="margin-top:5rem"]{
  margin-top:calc(5rem * var(--space-scale)) !important;
}

/* ---------- 1.22 Section numbers ----------
   Numbering 01 se 06 tak hai. Catalog section (.catalog-section) ka apna number nahi hota,
   wo 04 Featured ke saath hi jura hai. */
.catalog-section .eyebrow .num{ display:none; }


/* ==========================================================================
   PART 2 — TABLET  (768px se 1023px tak)
   Sirf wahi cheezein jo desktop se alag hain.
   ========================================================================== */
@media (max-width:1023px){

  /* Padding */
  .px-lg{ padding-inline:3.5rem; }
  .hero-content{ padding:0 3.5rem; }

  /* Featured section: stat upar, posters neeche (ek column) */
  .featured-grid{ grid-template-columns:1fr; }

  /* Catalog stat block: ek column */
  .stat-grid{ grid-template-columns:1fr; }

  /* Catalog posters: 6 ki jagah 4 column */
  .catalog-grid{ grid-template-columns:repeat(4,1fr); }

  /* Shop: text upar, image neeche */
  .shop-grid{ grid-template-columns:1fr; }

  /* Contact heading: 170px tablet par bahut bara hai */
  .contact-heading{ font-size:14vw; }
}


/* ==========================================================================
   PART 3 — MOBILE  (767px aur chhoti screen)
   Ye hamesha file ke sabse neeche rahe.
   ========================================================================== */
@media (max-width:767px){

  /* Padding */
  /* Spacing: mobile par aur tight */
  :root{ --space-scale:.6; }

  .px,
  .px-lg{ padding-inline:2rem; }
  .site-header{ padding:1.5rem 2rem; }
  .nl-search-form{ padding:5.5rem 2rem 1.5rem; }
  .hero-content{ padding:0 2rem; }
  .site-footer{ padding:4rem 2rem; }
  .legal-page{ padding:9rem 2rem 6rem; }

  /* Side wali section nav mobile par nahi dikhani */
  .section-nav{ display:none; }

  /* Hero */
  .hero-heading{ font-size:13vw; }
  .hero-tagline{ font-size:15px; letter-spacing:.2em; }
  .hero-desc{ font-size:14px; }

  /* Headings (h2-lg hamesha h2 ke baad rahe) */
  .h2{ font-size:2.25rem; }
  .h2-lg{ font-size:3rem; }

  /* Section background images (mobile) */
  .bg-studios,
  .bg-ventures{
    --bg-h:clamp(520px, 130vw, 900px);
    --bg-opacity:.4;
  }
  .bg-studios{ --bg-y:30px; --bg-pos:center top; }
  .bg-ventures{ --bg-y:30px; --bg-pos:85% top; }

  /* Cards: sab ek column mein */
  .grid-cards.cols-2,
  .grid-cards.cols-3,
  .grid-cards.cols-4{ grid-template-columns:1fr; }

  /* Featured stat number */
  .featured-stat-number{ font-size:4.5rem; }

  /* Featured posters: chhoti screen par wrap hon */
  .featured-filmstrip{ grid-template-columns:repeat(auto-fit, minmax(110px,1fr)); }

  /* Quote */
  .quote{ font-size:1.5rem; }

  /* Catalog stat */
  .stat-number{ font-size:4.5rem; }
  .film-tags{ grid-template-columns:repeat(2,1fr); }

  /* Catalog posters: 2 column */
  .catalog-grid{ grid-template-columns:repeat(2,1fr); }

  /* Contact */
  .contact-heading{ font-size:clamp(3.5rem, 17vw, 6rem); }
  .contact-grid{ grid-template-columns:1fr; }
  .contact-tiles{ grid-template-columns:repeat(2,1fr); }

  /* Footer */
  .footer-grid{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; justify-content:flex-start; }
}