/* ============================================================
   CICLO FILMES — estilos
   Cores da marca: azul elétrico #0B5CFF sobre fundo escuro.
   ============================================================ */
:root{
  --bg:#07080A;
  --bg-2:#08090C;
  --accent:#0B5CFF;
  --accent-soft:#8FB4FF;
  --text:#F4F5F7;
  --text-dim:#C7CAD1;
  --muted:#9CA0A9;
  --muted-2:#6E727B;
  --line:rgba(255,255,255,.07);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:Archivo,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:#fff}
img{display:block}

/* ---------- keyframes ---------- */
@keyframes cicl4Fade{0%{opacity:0}4%{opacity:1}25%{opacity:1}31%{opacity:0}100%{opacity:0}}
@keyframes ciclKen{0%{transform:scale(1.08) translate(0,0)}100%{transform:scale(1.2) translate(-2%,-2%)}}
@keyframes ciclHint{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(7px);opacity:1}}
@keyframes ciclMarq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ---------- botões ---------- */
.btn-outline{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text);border:1px solid rgba(255,255,255,.28);
  padding:11px 20px;border-radius:100px;transition:all .25s;
}
.btn-outline:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-outline.lg{font-size:12px;letter-spacing:.2em;color:var(--text-dim);padding:15px 34px;border-color:rgba(255,255,255,.24)}
.btn-outline.lg:hover{color:var(--accent);border-color:var(--accent);background:transparent}
.btn-primary{
  display:inline-flex;align-items:center;gap:12px;margin-top:40px;
  font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#fff;
  background:rgba(11,92,255,.18);border:1px solid var(--accent);
  padding:18px 38px;border-radius:100px;transition:all .3s;
}
.btn-primary:hover{background:var(--accent);transform:translateY(-3px)}

/* ---------- header ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px clamp(20px,4vw,56px);
  backdrop-filter:blur(14px);
  background:linear-gradient(180deg,rgba(7,8,10,.8),rgba(7,8,10,0));
}
.brand img{height:23px;width:auto}
.nav{display:flex;align-items:center;gap:clamp(18px,2.6vw,40px);
  font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase}
.nav a{color:var(--text-dim);transition:color .25s}
.nav a:hover{color:var(--accent)}

/* ---------- hero ---------- */
.hero{position:relative;height:100vh;min-height:600px;width:100%;overflow:hidden;display:flex}
.hero-montage{position:absolute;inset:0;z-index:0}
.hero-montage img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  animation:cicl4Fade 24s infinite, ciclKen 14s ease-in-out infinite alternate;
}
.hero-video{position:absolute;inset:0;z-index:1;overflow:hidden;background:#000}
.hero-video iframe{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:100vw;height:56.25vw;min-height:100vh;min-width:177.78vh;
  border:0;pointer-events:none;
}
body.yt-blocked .hero-video{display:none}
.hero-overlay-1{position:absolute;inset:0;z-index:2;
  background:radial-gradient(120% 95% at 50% 14%,rgba(7,8,10,.12),rgba(7,8,10,.45) 68%,rgba(7,8,10,.9) 100%)}
.hero-overlay-2{position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,rgba(7,8,10,.55) 0%,rgba(7,8,10,.05) 26%,rgba(7,8,10,.12) 55%,rgba(7,8,10,.88) 100%)}
.hero-content{position:relative;z-index:5;margin:auto;text-align:center;padding:0 clamp(20px,6vw,40px);max-width:1120px}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:11px;font-weight:600;
  letter-spacing:.32em;text-transform:uppercase;color:var(--accent-soft);margin-bottom:30px}
.eyebrow .rule{width:24px;height:1px;background:var(--accent)}
.hero-content h1{font-weight:300;text-transform:uppercase;line-height:1.16;letter-spacing:.02em;
  font-size:clamp(1.55rem,4vw,3.9rem);color:#E8EAEE}
.hero-content h1 strong{font-weight:700;color:#fff}
.scroll-hint{position:absolute;bottom:30px;left:0;right:0;z-index:5;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;
  animation:ciclHint 2s ease-in-out infinite}
.scroll-hint span{font-size:10px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.scroll-hint .arrow{font-size:16px;letter-spacing:0}

/* ---------- section heads ---------- */
.section-head{text-align:center;padding:0 24px}
.kicker{font-size:11px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.portfolio h2,.clients h2{font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:#fff;line-height:1}
.portfolio h2{font-size:clamp(2rem,5.5vw,4.2rem)}
.clients h2{font-size:clamp(1.9rem,5vw,3.8rem)}
.section-head .sub{font-size:12px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--muted-2);margin-top:14px}

/* ---------- portfolio ---------- */
.portfolio{padding-top:clamp(64px,8vw,118px)}
.portfolio .section-head{margin-bottom:clamp(38px,5vw,58px)}
.folio-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;width:100%}
.folio-tile{position:relative;aspect-ratio:16/9;overflow:hidden;background:#101216}
.folio-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.3) brightness(.8)}
.folio-video{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:100%;height:100%;min-width:177.78%;min-height:100%;border:0;pointer-events:none}
body.yt-blocked .folio-video{display:none}
.folio-cta{text-align:center;padding:clamp(40px,5vw,62px) 24px 0}

/* ---------- clientes (carrossel) ---------- */
.clients{padding:clamp(64px,8vw,118px) 0 clamp(50px,6vw,90px);text-align:center}
.clients .section-head{margin-bottom:clamp(40px,5vw,58px)}
.marquee{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee-track{display:flex;align-items:center;gap:clamp(46px,6vw,90px);width:max-content;
  animation:ciclMarq 36s linear infinite}
.marquee-track img{height:120px;width:auto;object-fit:contain;flex-shrink:0;
  filter:brightness(0) invert(1);opacity:.5;transition:opacity .3s}
.marquee-track img:hover{opacity:1}

/* ---------- sobre ---------- */
.about{border-top:1px solid rgba(255,255,255,.06);padding:clamp(64px,8vw,118px) clamp(20px,4vw,56px)}
.about-grid{max-width:1340px;margin:0 auto;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));
  gap:clamp(36px,5vw,72px);align-items:center}
.about-figure{position:relative;aspect-ratio:4/5;border-radius:8px;overflow:hidden;background:#101216}
.about-figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.2) brightness(.9)}
.about-figure::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,8,10,0) 50%,rgba(7,8,10,.6))}
.about-stat{position:absolute;left:0;bottom:0;z-index:2;padding:clamp(22px,3vw,34px)}
.about-stat-num{font-weight:300;font-size:clamp(3rem,6vw,5rem);line-height:.9;color:#fff}
.about-stat-label{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-soft);margin-top:6px}
.about-body .kicker{margin-bottom:16px}
.about-body h2{font-weight:300;text-transform:uppercase;line-height:1.12;letter-spacing:.01em;
  font-size:clamp(1.7rem,3.4vw,3rem);color:#E8EAEE;margin-bottom:24px}
.about-body h2 strong{font-weight:700;color:#fff}
.about-body>p{font-size:clamp(15px,1.3vw,17px);line-height:1.7;color:var(--muted);max-width:560px}
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:1px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);border-radius:8px;overflow:hidden;margin-top:34px}
.pillar{background:var(--bg-2);padding:24px 22px;transition:background .25s}
.pillar:hover{background:#0C0E13}
.pillar h3{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:10px}
.pillar p{font-size:13.5px;line-height:1.6;color:var(--muted)}

/* ---------- cta ---------- */
.cta{position:relative;padding:clamp(90px,12vw,170px) clamp(20px,4vw,56px);text-align:center;overflow:hidden}
.cta-glow{position:absolute;inset:0;background:radial-gradient(58% 85% at 50% 52%,rgba(11,92,255,.18),rgba(7,8,10,0) 72%)}
.cta-fade{position:absolute;top:0;left:0;right:0;height:42%;
  background:linear-gradient(180deg,#07080A 0%,rgba(7,8,10,.6) 45%,rgba(7,8,10,0) 100%)}
.cta-inner{position:relative;z-index:2}
.cta-inner h2{font-weight:300;text-transform:uppercase;line-height:1.12;letter-spacing:.02em;
  font-size:clamp(1.9rem,5.5vw,4.6rem);color:#E8EAEE}
.cta-inner h2 strong{font-weight:700;color:var(--accent)}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid rgba(255,255,255,.08);padding:clamp(50px,6vw,80px) clamp(20px,4vw,56px) 40px;background:var(--bg-2)}
.footer-grid{max-width:1640px;margin:0 auto;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:44px 30px}
.footer-logo{height:26px;width:auto;margin-bottom:18px}
.footer-tagline{font-size:14px;line-height:1.6;color:var(--muted);max-width:280px}
.site-footer h4{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2);margin-bottom:16px}
.site-footer p{font-size:14px;line-height:1.7;color:var(--text-dim)}
.site-footer .footer-grid a{display:block;font-size:14px;color:var(--text-dim);margin-bottom:8px;transition:color .25s}
.site-footer .footer-grid a:hover{color:var(--accent)}
.footer-bottom{max-width:1640px;margin:48px auto 0;padding-top:24px;border-top:1px solid rgba(255,255,255,.06);
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.footer-bottom p{font-size:12px;color:var(--muted-2)}
.footer-bottom a{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);transition:color .25s}
.footer-bottom a:hover{color:var(--accent)}

/* ---------- responsivo ---------- */
@media (max-width:900px){
  .folio-grid{grid-template-columns:repeat(2,1fr)}
  .nav{display:none}
  .marquee-track img{height:84px}
}
@media (max-width:560px){
  .marquee-track img{height:66px}
}