/* ===== Visarte Filmes — Design tokens (DNA v1.1) ===== */
:root{
  --primary:#FC5C19;
  --primary-light:#FE8C5C;
  --primary-dark:#C24610;
  --secondary:#11061E;
  --bg-light:#FFFFFF;
  --bg-light-alt:#FBF1E7;
  --bg-dark:#11061E;
  --text-on-light:#1A1A1A;
  --text-on-dark:#F2E9E0;
  --border:#E8E1D8;
  --surface:#F7F2EA;

  --font-display:'Poppins', sans-serif;
  --font-body:'Poppins', sans-serif;
  --font-accent:'Caveat', cursive;
  --font-mono:'JetBrains Mono', monospace;

  --ease-out-spring: cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  color:var(--text-on-light);
  background:var(--bg-light);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}

.accent{font-family:var(--font-accent); color:var(--primary); font-weight:700; font-style:normal;}

/* ===== Reveal-on-scroll ===== */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .5s var(--ease-out-spring), transform .5s var(--ease-out-spring);
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* ===== Nav ===== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:18px 0;
  transition:background .3s ease, padding .3s ease, box-shadow .3s ease;
}
.nav.scrolled{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  padding:12px 0;
  box-shadow:0 1px 0 var(--border);
}
.nav-inner{
  max-width:1200px; margin:0 auto; padding:0 24px;
  display:flex; align-items:center; justify-content:space-between;
}
.nav-logo img{height:58px; width:auto;}
.nav-logo .logo-scrolled{display:none;}
.nav.scrolled .logo-top{display:none;}
.nav.scrolled .logo-scrolled{display:block;}
@media (max-width:900px){ .nav-logo img{height:46px;} }
.nav-links{display:flex; align-items:center; gap:32px;}
.nav-links a{
  font-size:14px; font-weight:500; color:var(--text-on-dark);
  transition:color .2s ease;
}
.nav.scrolled .nav-links a{color:var(--text-on-light);}
.nav-links a:hover{color:var(--primary);}
.nav-cta{
  background:var(--primary); color:#fff !important;
  padding:10px 20px; border-radius:999px; font-weight:600;
}
.nav-cta:hover{background:var(--primary-dark); color:#fff !important;}
.nav-toggle{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px;}
.nav-toggle span{width:22px; height:2px; background:var(--text-on-dark);}
.nav.scrolled .nav-toggle span{background:var(--text-on-light);}

/* ===== Hero ===== */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  overflow:hidden;
  background:var(--bg-dark);
}
.hero-bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center 35%;
  transform:translateY(-6%) scale(1.18); transform-origin:56% 32%;
  opacity:.55;
}
.hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(17,6,30,.55) 0%, rgba(17,6,30,.75) 60%, rgba(17,6,30,.95) 100%);
}
.hero-content{
  position:relative; z-index:1;
  max-width:820px; padding:0 24px;
  color:var(--text-on-dark);
}
.tag{
  font-family:var(--font-mono);
  font-size:12px; letter-spacing:3px; text-transform:uppercase;
  color:var(--primary-light);
  margin-bottom:20px;
}
.hero-title{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(48px, 8.6vw, 112px);
  line-height:1.05; letter-spacing:-2px;
  margin-bottom:24px;
}
.hero-sub{
  font-size:clamp(16px,2vw,20px);
  color:var(--text-on-dark);
  opacity:.85;
  max-width:560px; margin:0 auto 36px;
}
.hero-actions{display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}

.scroll-hint{
  position:absolute; bottom:32px; left:50%; transform:translateX(-50%);
  z-index:1; display:flex; flex-direction:column; align-items:center; gap:10px;
  color:var(--text-on-dark); opacity:.6;
}
.scroll-hint span{font-family:var(--font-mono); font-size:11px; letter-spacing:2px; text-transform:uppercase;}
.scroll-line{width:1px; height:36px; background:var(--text-on-dark); overflow:hidden; position:relative;}
.scroll-line::after{
  content:''; position:absolute; top:-36px; left:0; width:100%; height:100%;
  background:var(--primary);
  animation:scrollLine 1.8s ease-in-out infinite;
}
@keyframes scrollLine{ to{ top:36px; } }

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 28px; border-radius:999px;
  font-weight:600; font-size:15px;
  cursor:pointer; border:1px solid transparent;
  transition:transform .25s var(--ease-out-spring), background .25s ease, color .25s ease, border-color .25s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--primary); color:#fff;}
.btn-primary:hover{background:var(--primary-dark);}
.btn-ghost{background:transparent; color:var(--text-on-dark); border-color:rgba(242,233,224,.4);}
.btn-ghost:hover{border-color:var(--primary-light); color:var(--primary-light);}
.btn-outline{background:transparent; color:var(--text-on-light); border-color:var(--border);}
.btn-outline:hover{border-color:var(--primary); color:var(--primary);}
.btn-lg{padding:18px 40px; font-size:17px;}

/* ===== Sections ===== */
.section{padding:120px 0;}
.section-inner{max-width:1200px; margin:0 auto; padding:0 24px;}
.section-dark{background:var(--bg-dark); color:var(--text-on-dark);}
.section-alt{background:var(--bg-light-alt);}
.eyebrow{
  font-family:var(--font-mono); font-size:12px; letter-spacing:3px; text-transform:uppercase;
  color:var(--primary); margin-bottom:16px;
}
.section-title{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(32px,4.5vw,56px); letter-spacing:-1px;
  margin-bottom:20px;
}
.section-lead{
  font-size:18px; opacity:.8; max-width:560px; margin-bottom:48px;
}
.programa-title .programa-lead{font-size:.6em;}
.programa-title .accent{font-size:1.25em;}
.strategy-text{
  font-size:16px; opacity:.8; max-width:680px; margin:-24px 0 48px; line-height:1.7;
}

/* ===== Tabs ===== */
.tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:40px;}
.tab{
  font-family:var(--font-body); font-weight:500; font-size:14px;
  padding:10px 20px; border-radius:999px; border:1px solid var(--border);
  background:transparent; color:var(--text-on-light);
  cursor:pointer; transition:all .2s ease;
}
.tab:hover{border-color:var(--primary);}
.tab.active{background:var(--secondary); color:var(--text-on-dark); border-color:var(--secondary);}

.panel-note{font-size:14px; opacity:.6; margin-bottom:20px;}

.tab-panel{display:none;}
.tab-panel.active{display:block; animation:fadeIn .4s var(--ease-out-spring);}
@keyframes fadeIn{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }

/* ===== Grids & cards ===== */
.grid{display:grid; gap:24px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr); align-items:start;}

.card{
  border-radius:8px; overflow:hidden; background:var(--surface);
  border:1px solid var(--border);
}
.card-media{aspect-ratio:4/5; position:relative;}
.card-media.ar-9-16{aspect-ratio:9/16;}
.card-media.ar-1-1{aspect-ratio:1/1;}
.card-media.ar-16-9{aspect-ratio:16/9;}
.card-media img{width:100%; height:100%; object-fit:cover;}
.card-tag{
  position:absolute; bottom:12px; left:12px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:1px;
  background:rgba(17,6,30,.75); color:#fff; padding:5px 10px; border-radius:999px;
}

.video-placeholder, .photo-placeholder{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  text-align:center; padding:24px;
  background:linear-gradient(135deg, var(--secondary), #2a1240);
  color:var(--text-on-dark);
}
.video-placeholder span, .photo-placeholder span{font-weight:600; font-size:15px; color:var(--primary-light);}
.video-placeholder small{font-size:12px; opacity:.6; max-width:220px;}
.video-placeholder--large{aspect-ratio:16/9; border-radius:12px;}

/* ===== Video card — hover preview (padrão Lucas Allegretto) ===== */
.video-card{
  position:relative;
  background:var(--secondary);
  cursor:pointer;
}
.video-card .card-poster{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.video-card .preview-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .35s ease;
}
.video-card.is-playing .preview-video{opacity:1;}
.video-card .placeholder-label{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  text-align:center; padding:24px; height:100%;
  transition:opacity .35s ease;
}
.video-card.is-playing .placeholder-label{opacity:0;}
.video-card .placeholder-label span{font-weight:600; font-size:15px; color:var(--primary-light);}
.video-card .placeholder-label small{font-size:12px; opacity:.6; max-width:220px; color:var(--text-on-dark);}

/* ===== Vimeo card (portfólio Aftermovie) ===== */
.vimeo-card{position:relative; background:var(--secondary); cursor:pointer;}
.vimeo-card iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}

.video-card .play-icon{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:2; width:52px; height:52px; border-radius:50%;
  background:rgba(17,6,30,.55); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; padding-left:3px;
  backdrop-filter:blur(2px);
  transition:transform .25s var(--ease-out-spring), opacity .25s ease, background .25s ease;
}
.video-card:hover .play-icon{transform:translate(-50%,-50%) scale(1.15); background:var(--primary);}
.video-card.is-playing .play-icon{opacity:0;}

/* ===== Hero: escrita surgindo ===== */
.hero-title .accent{font-size:1.4em; line-height:.9; font-weight:400;}
.hero-title .word{display:inline-block; white-space:nowrap;}
.hero-title .ltr{
  display:inline-block; opacity:0;
  animation:heroLetter 1.3s cubic-bezier(.25,.6,.3,1) forwards;
  animation-delay:calc(.3s + var(--i) * 65ms);
}
.hero-title .accent .ltr{animation-name:heroLetterMove; animation-duration:1.6s;}
.hero-title .accent{
  text-shadow:0 0 0 rgba(252,92,25,0);
  animation:neonText 3.2s ease-in-out 2.2s infinite, neonOn 1.4s ease-out 2.2s backwards;
}
@keyframes heroLetter{
  from{opacity:0; transform:translateY(10px); filter:blur(4px);}
  to{opacity:1; transform:none; filter:blur(0);}
}
@keyframes heroLetterMove{
  from{opacity:0; transform:translateX(-22px) skewX(-10deg); filter:blur(5px);}
  to{opacity:1; transform:none; filter:blur(0);}
}
@keyframes neonOn{
  from{text-shadow:0 0 0 rgba(252,92,25,0);}
}
@keyframes neonText{
  0%, 100%{text-shadow:0 0 6px rgba(252,92,25,.75), 0 0 16px rgba(252,92,25,.55), 0 0 34px rgba(252,92,25,.4);}
  50%{text-shadow:0 0 9px rgba(252,92,25,.95), 0 0 24px rgba(252,92,25,.7), 0 0 50px rgba(252,92,25,.5);}
}
.hero-sub{opacity:0; animation:heroSubIn 1.8s cubic-bezier(.25,.6,.3,1) 2.3s forwards;}
@keyframes heroSubIn{
  from{opacity:0; transform:translateY(10px); filter:blur(4px);}
  to{opacity:1; transform:none; filter:blur(0);}
}
@media (prefers-reduced-motion:reduce){ .hero-title .ltr{animation:none; opacity:1;} .hero-title .accent{animation:none;} .hero-sub{animation:none; opacity:1;} }

/* ===== Faixa de reels verticais (Pacotes) ===== */
.reels-strip{
  display:flex; gap:16px; margin:0 0 56px;
  overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none;
  padding:4px 0 8px;
}
.reels-strip::-webkit-scrollbar{display:none;}
.reel-card{
  position:relative; flex:1 1 0; min-width:150px; aspect-ratio:9/16;
  border-radius:6px; overflow:hidden; cursor:pointer; scroll-snap-align:start;
  background:var(--secondary);
  transition:transform .3s var(--ease-out-spring), box-shadow .3s ease;
}
.reel-card:hover{transform:translateY(-6px); box-shadow:0 10px 30px rgba(0,0,0,.45);}
.reel-poster, .reel-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.reel-video{opacity:0; transition:opacity .35s ease;}
.reel-card.is-playing .reel-video{opacity:1;}
.reel-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:44px; height:44px; border-radius:50%; background:rgba(17,6,30,.55); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:14px; padding-left:3px;
  backdrop-filter:blur(2px); transition:opacity .25s ease, background .25s ease;
}
.reel-card:hover .reel-play{background:var(--primary);}
.reel-card.is-playing .reel-play{opacity:0;}
@media (max-width:600px){ .reel-card{flex:0 0 52vw;} }

/* ===== Comparativo de pacotes ===== */
.compare{overflow-x:auto; padding:30px 4px 16px; margin:0 -4px; scrollbar-width:thin;}
.compare-grid{
  display:grid; grid-template-columns:140px repeat(3,minmax(210px,1fr));
  grid-template-rows:auto repeat(8,minmax(78px,auto)) auto;
  column-gap:14px; min-width:880px;
}
.cmp-labels, .pkg{grid-row:1 / -1; display:grid; grid-template-rows:subgrid;}
.pkg{
  position:relative; border-radius:16px; border:1px solid rgba(252,92,25,.55);
  background:rgba(255,255,255,.04);
}
.pkg-head{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:22px 12px 16px;}
.pkg-price{display:flex; flex-direction:column; align-items:center; line-height:1.15; color:var(--offwhite,#f5efe6);}
.pkg-price small{font-size:12px; opacity:.7; letter-spacing:.04em;}
.pkg-price strong{font-family:var(--font-display); font-size:24px; font-weight:800;}
.pkg-head h3{font-family:var(--font-display); font-size:30px; font-weight:800; color:var(--primary);}
.cell{
  display:flex; align-items:center; gap:12px; padding:12px 16px;
  font-size:14px; line-height:1.4; border-top:1px solid rgba(242,233,224,.1);
}
.cmp-labels .cell{font-weight:800; font-size:13px; letter-spacing:.8px; text-transform:uppercase; padding-left:4px;}
.cell--no{justify-content:center;}
.ico{flex:none; width:28px; height:28px; display:inline-flex;}
.ico svg{width:100%; height:100%;}
.pkg-foot{display:flex; align-items:center; justify-content:center; padding:18px 12px 22px; border-top:1px solid rgba(242,233,224,.1);}
.pkg .btn{opacity:0; transition:opacity .25s ease;}
.pkg:hover .btn{opacity:1;}
@media (hover:none){ .pkg .btn{opacity:1;} }
.pkg--hl{
  background:linear-gradient(160deg, var(--primary), #d6440f);
  border-color:transparent; animation:neonPulse 3s ease-in-out infinite;
}
.pkg--hl .pkg-head h3{color:#fff;}
.pkg--hl .cell{border-top-color:rgba(255,255,255,.22);}
.pkg--hl .pkg-foot{border-top-color:rgba(255,255,255,.22);}
.pkg--hl .btn-primary{
  opacity:1;
  background:var(--secondary); border:1.5px solid #6d3bd9;
  animation:neonPulsePurple 3s ease-in-out infinite;
}
.pkg--hl .btn-primary:hover{background:#000;}
.pkg-badge{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%); z-index:2;
  font-family:var(--font-mono); font-size:11px; letter-spacing:1.5px; text-transform:uppercase;
  background:rgba(17,6,30,.9); color:#fff; padding:5px 12px; border-radius:999px; white-space:nowrap;
}

/* ===== Pricing ===== */
.pricing-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.price-card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(242,233,224,.15);
  border-radius:16px; padding:40px 32px;
  display:flex; flex-direction:column; gap:20px;
}
.price-card h3{font-family:var(--font-display); font-size:22px; font-weight:800;}
.price{font-family:var(--font-display); font-size:36px; font-weight:800;}
.price span{font-size:14px; font-weight:400; opacity:.6;}
.price-card ul{display:flex; flex-direction:column; gap:10px; font-size:14px; opacity:.85;}
.price-card ul li{padding-left:18px; position:relative;}
.price-card ul li::before{content:'—'; position:absolute; left:0; color:var(--primary);}
.price-card .btn{margin-top:auto; align-self:flex-start; opacity:0; transition:opacity .25s ease;}
.price-card:hover .btn{opacity:1;}
.price-card--highlight{
  background:linear-gradient(160deg, var(--primary), #d6440f);
  border-color:transparent;
  transform:scale(1.03);
}
.price-card--highlight .btn-primary{
  background:var(--secondary);
  border:1.5px solid #6d3bd9;
  animation:neonPulsePurple 3s ease-in-out infinite;
}
.price-card--highlight .btn-primary:hover{background:#000;}
@keyframes neonPulsePurple{
  0%, 100%{
    box-shadow:
      0 0 6px rgba(109,59,217,.85),
      0 0 18px rgba(109,59,217,.6),
      0 0 36px rgba(109,59,217,.4);
  }
  50%{
    box-shadow:
      0 0 10px rgba(109,59,217,1),
      0 0 26px rgba(109,59,217,.75),
      0 0 48px rgba(109,59,217,.5);
  }
}
.price-card--highlight{
  animation:neonPulse 3s ease-in-out infinite;
}
.price-badge{
  font-family:var(--font-mono); font-size:11px; letter-spacing:1.5px; text-transform:uppercase;
  background:rgba(17,6,30,.85); color:#fff; padding:5px 12px; border-radius:999px; width:fit-content;
}

/* ===== Fundo com vídeos rodando (avulsos) ===== */
.section-video-bg{position:relative; color:var(--text-on-dark); overflow:hidden;}
.bg-video-layer{position:absolute; inset:0;}
.bg-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.2s ease;
}
.bg-video.active{opacity:1;}
.bg-video-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(17,6,30,.72) 0%, rgba(17,6,30,.86) 55%, rgba(17,6,30,.95) 100%);
}
.section-video-bg .section-inner{position:relative; z-index:1;}
.section-video-bg .offer-card{background:rgba(255,255,255,.06); border-color:rgba(242,233,224,.2);}
.section-video-bg .offer-card p{color:var(--text-on-dark); opacity:.9;}

/* ===== Offer cards (avulsos) ===== */
.offer-card{
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  padding:40px; display:flex; flex-direction:column; gap:16px; align-items:flex-start;
}
.offer-card h3{font-family:var(--font-display); font-size:24px; font-weight:800;}
.offer-card p{opacity:.8;}
.offer-card--single{max-width:640px; align-items:flex-start;}
.offer-card--single p{font-size:17px;}

.section-video-bg .offer-card--single .btn-primary{
  border:1.5px solid var(--primary);
  animation:neonPulse 3s ease-in-out infinite;
}
@keyframes neonPulse{
  0%, 100%{
    box-shadow:
      0 0 6px rgba(252,92,25,.8),
      0 0 18px rgba(252,92,25,.55),
      0 0 36px rgba(252,92,25,.35);
  }
  50%{
    box-shadow:
      0 0 10px rgba(252,92,25,.95),
      0 0 26px rgba(252,92,25,.7),
      0 0 48px rgba(252,92,25,.45);
  }
}

/* ===== About ===== */
.about-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; align-items:center;}
.about-photo img{border-radius:16px;}
.about-carousel{position:relative; aspect-ratio:3/4; border-radius:16px; overflow:hidden;}
.about-carousel img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .8s ease;}
.about-carousel img.active{opacity:1;}
.about-text{margin-bottom:16px; opacity:.85; font-size:16px;}

/* ===== Contact ===== */
.contact-split{display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center;}
.contact-inner{text-align:left; display:flex; flex-direction:column; align-items:flex-start;}
.contact-inner .section-lead{margin-bottom:32px;}
.contact-mosaic{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; align-items:start;}
.mosaic-col{display:flex; flex-direction:column; gap:14px;}
.mosaic-col--b{margin-top:56px;}
.mosaic-col--c{margin-top:24px;}
.mosaic-col img{
  width:100%; aspect-ratio:var(--ar,1/1); object-fit:cover; display:block;
  border-radius:10px; border:1px solid rgba(252,92,25,.45);
  box-shadow:0 0 10px rgba(252,92,25,.4), 0 0 28px rgba(252,92,25,.22);
  transition:transform .35s var(--ease-out-spring), box-shadow .35s ease;
}
.mosaic-col img:hover{transform:scale(1.03); box-shadow:0 0 14px rgba(252,92,25,.7), 0 0 40px rgba(252,92,25,.4);}
@media (max-width:900px){
  .contact-split{grid-template-columns:1fr; gap:48px;}
  .contact-inner{order:-1;}
  .mosaic-col--b, .mosaic-col--c{margin-top:0;}
}
.contact-instagram{
  margin-top:24px; font-family:var(--font-mono); font-size:14px;
  color:var(--text-on-dark); opacity:.7; border-bottom:1px solid transparent;
}
.contact-instagram:hover{opacity:1; border-color:var(--primary);}

/* ===== Footer ===== */
.footer{
  padding:32px 24px; text-align:center; background:var(--secondary); color:var(--text-on-dark);
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.footer-mark{height:32px; opacity:.6;}
.footer p{font-size:12px; opacity:.5;}

/* ===== Showreel modal ===== */
.showreel-modal{
  position:fixed; inset:0; z-index:200;
  background:rgba(17,6,30,.92);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  opacity:0; visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
}
.showreel-modal.open{opacity:1; visibility:visible;}
.showreel-inner{position:relative; width:100%; max-width:960px; max-height:90vh;}
.showreel-inner video{max-height:90vh; object-fit:contain;}
.showreel-close{
  position:absolute; top:12px; right:12px; z-index:5;
  width:40px; height:40px; border-radius:50%;
  background:rgba(17,6,30,.7); border:none; color:#fff; font-size:24px; cursor:pointer;
  line-height:1; display:flex; align-items:center; justify-content:center;
}
.showreel-close:hover{background:var(--primary);}

/* ===== Responsive ===== */
@media (max-width:1100px){
  .grid-4{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:900px){
  .nav-links{
    position:fixed; top:0; right:0; height:100vh; width:min(320px,80vw);
    background:var(--secondary); flex-direction:column; align-items:flex-start;
    padding:100px 32px 32px; gap:24px;
    transform:translateX(100%); transition:transform .3s var(--ease-out-spring);
  }
  .nav-links.open{transform:translateX(0);}
  .nav-links a{color:var(--text-on-dark) !important;}
  .nav-toggle{display:flex;}
  .grid-4, .grid-3, .grid-2{grid-template-columns:1fr;}
  .pricing-grid{grid-template-columns:1fr;}
  .price-card--highlight{transform:none;}
  .about-grid{grid-template-columns:1fr; gap:32px;}
  .section{padding:80px 0;}
}