/* ══════════════════════════════
   HOME — page styles
══════════════════════════════ */

/* Scroll indicator (hero-v2) */
.hero-scroll {
  position: absolute; right: var(--pad); bottom: 52px; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.hero-scroll-line {
  width: 1px; height: 56px;
  background: linear-gradient(to bottom, rgba(36,97,196,.6), rgba(245,113,26,.4), transparent);
  animation: scrollPulse 2.5s ease-in-out 2s infinite;
}
@keyframes scrollPulse {
  0%,100% { transform: translateY(0); opacity: 1; }
  50%      { transform: translateY(10px); opacity: .3; }
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

/* ── REEL ── */
.reel-wrap {
  position: relative; border-radius: 12px; overflow: hidden;
  aspect-ratio: 16/9; cursor: none;
  border: 1px solid rgba(255,255,255,.09);
  box-shadow:
    0 2px 0 rgba(255,255,255,.04) inset,
    0 48px 120px rgba(0,0,0,.75);
  background: #07070a;
}
/* Thumbnail image — fills the player */
.reel-placeholder {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--ease), filter .5s;
  filter: brightness(.88) saturate(.92);
}
.reel-wrap:hover .reel-placeholder {
  transform: scale(1.03);
  filter: brightness(.72) saturate(.88);
}
.reel-play-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 72px; height: 72px; border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .3s, transform .3s, border-color .3s;
}
.reel-play-btn:hover {
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.5);
  transform: translate(-50%, -50%) scale(1.08);
}
.reel-corner {
  position: absolute; font-size: 9px; font-weight: 600;
  letter-spacing: 3px; text-transform: uppercase;
  color: rgba(255,255,255,.18); z-index: 3;
}
.rc-tl { top: 24px; left: 28px; }
.rc-tr { top: 24px; right: 28px; }
.rc-bl { bottom: 24px; left: 28px; }
.rc-br { bottom: 24px; right: 28px; }

/* ── SERVICES ── */
.svcs-head {
  display: grid; grid-template-columns: 1.1fr .9fr;
  gap: 80px; align-items: end;
  margin-bottom: 80px;
}
.svcs-desc {
  font-size: 17px; font-weight: 300; line-height: 1.75;
  color: rgba(255,255,255,.46); padding-top: 6px;
}
.svcs-divider {
  height: 1px; margin-bottom: 64px;
  background: linear-gradient(to right, var(--c-blue), var(--c-purple), var(--c-orange), transparent);
  opacity: .3;
}
.svcs-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--border); }
.svc-item {
  background: var(--ink2);
  padding: 52px 44px;
  position: relative; overflow: hidden;
}
.svc-item::after {
  content: '';
  position: absolute; inset: 0; opacity: 0;
  transition: opacity .5s;
}
.svc-item:nth-child(1)::after { background: radial-gradient(circle at 0% 100%, rgba(36,97,196,.18), transparent 65%); }
.svc-item:nth-child(2)::after { background: radial-gradient(circle at 50% 100%, rgba(124,53,232,.16), transparent 65%); }
.svc-item:nth-child(3)::after { background: radial-gradient(circle at 100% 100%, rgba(245,113,26,.15), transparent 65%); }
.svc-item:hover::after { opacity: 1; }
.svc-num {
  font-family: 'Inter Tight', sans-serif;
  font-size: 96px; line-height: 1; letter-spacing: -3px;
  color: rgba(255,255,255,.04); display: block; margin-bottom: -20px;
  transition: color .4s;
}
.svc-item:hover .svc-num { color: rgba(255,255,255,.07); }
.svc-name {
  font-family: 'Inter Tight', sans-serif;
  font-size: 44px; letter-spacing: 1px; margin-bottom: 16px;
  position: relative; z-index: 1; transition: all .4s;
}
.svc-item:nth-child(1):hover .svc-name { color: var(--c-blue); }
.svc-item:nth-child(2):hover .svc-name { color: var(--c-purple); }
.svc-item:nth-child(3):hover .svc-name { color: var(--c-orange); }
.svc-text {
  font-size: 14px; font-weight: 300; line-height: 1.65;
  color: rgba(255,255,255,.4); max-width: 28ch;
  position: relative; z-index: 1;
}
.svc-link {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 28px;
  font-size: 9px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase;
  color: rgba(255,255,255,.2);
  position: relative; z-index: 1;
  transition: color .3s, gap .35s;
}
.svc-item:hover .svc-link { color: rgba(255,255,255,.7); gap: 14px; }

/* ── STATS ── */
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.stat-card {
  border-radius: 16px; padding: 64px 56px;
  min-height: 300px;
  display: flex; flex-direction: column; justify-content: flex-end;
  position: relative; overflow: hidden;
  border: 1px solid rgba(255,255,255,.05);
}
.stat-card:nth-child(1) { background: linear-gradient(135deg, rgba(36,97,196,.12), rgba(124,53,232,.06)); }
.stat-card:nth-child(2) { background: linear-gradient(135deg, rgba(245,113,26,.1), rgba(212,40,32,.06)); }
.stat-ghost {
  position: absolute; top: -28px; right: -8px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 280px; line-height: 1; letter-spacing: -10px;
  color: rgba(255,255,255,.024); pointer-events: none; user-select: none;
}
.stat-number {
  font-family: 'Inter Tight', sans-serif;
  font-size: clamp(80px, 9vw, 120px); line-height: 1; letter-spacing: -3px;
  position: relative; z-index: 1;
}
.stat-label {
  font-size: 10px; font-weight: 600; letter-spacing: 4px; text-transform: uppercase;
  color: rgba(255,255,255,.3); margin-top: 12px;
  position: relative; z-index: 1;
}

/* ── FEATURED WORK preview ── */
.featured-section{background: var(--ink3);}
.featured-section .container{position:relative;}
.featured-h2 {
  font-family: 'Inter Tight', sans-serif;
  margin-bottom: 64px;
}
.featured-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  grid-template-rows: auto auto;
  gap: 16px;
}
.feat-card {
  position: relative; border-radius: 14px; overflow: hidden;
  background: #0f0f18; cursor: none;
  border: 1px solid rgba(255,255,255,.05);
  transition: border-color .4s, transform .5s var(--ease);
}
.feat-card:hover { border-color: rgba(255,255,255,.1); transform: scale(1.015); }
.feat-card--large { grid-row: span 2; aspect-ratio: 9/11; }
.feat-card--small { aspect-ratio: 16/9; }
/* REPLACE: add background-image: url() to each .feat-card-media */
.feat-card-media {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #14141e, #0a0a10);
  transition: transform .6s var(--ease);
}
.feat-card-glow {
  position: absolute; inset: 0; opacity: 0; transition: opacity .5s;
}
.feat-card:nth-child(1) .feat-card-glow { background: radial-gradient(circle at 30% 70%, rgba(36,97,196,.2), transparent 60%); }
.feat-card:nth-child(2) .feat-card-glow { background: radial-gradient(circle at 70% 70%, rgba(124,53,232,.18), transparent 60%); }
.feat-card:nth-child(3) .feat-card-glow { background: radial-gradient(circle at 50% 80%, rgba(245,113,26,.15), transparent 60%); }
.feat-card:hover .feat-card-media { transform: scale(1.05); }
.feat-card:hover .feat-card-glow  { opacity: 1; }
.feat-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.8) 0%, transparent 55%);
  opacity: 0; transition: opacity .4s;
  display: flex; align-items: flex-end; padding: 28px;
}
.feat-card:hover .feat-card-overlay { opacity: 1; }
.feat-card-tag {
  font-size: 8px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase;
  color: rgba(255,255,255,.5); margin-bottom: 7px;
}
.feat-card-title { font-size: 20px; font-weight: 700; line-height: 1.2; }

.featured-cta { margin-top: 48px; text-align: center; }

/* ── CTA BANNER ── */
.cta-section {
  position: relative; overflow: hidden;
}
.cta-section::before {
  content: '';
  position: absolute; width: 900px; height: 900px;
  border-radius: 50%; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  background: conic-gradient(from 0deg, rgba(36,97,196,.07), rgba(124,53,232,.07), rgba(245,113,26,.06), rgba(36,97,196,.07));
  filter: blur(80px);
  animation: breathe3 10s ease-in-out infinite;
}
.cta-divider {
  width: 1px; height: 60px;
  background: linear-gradient(to bottom, var(--c-blue), var(--c-orange));
  margin: 0 auto 60px; opacity: .4;
}
.cta-h2 {
  font-family: 'Inter Tight', sans-serif;
  margin-bottom: 20px;
  position: relative; z-index: 1;
}
.cta-sub {
  font-size: 18px; font-weight: 300;
  color: rgba(255,255,255,.4);
  margin-bottom: 52px;
  position: relative; z-index: 1;
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .hero-year, .hero-side { display: none; }
  .hero-scroll { right: var(--pad); }
  .svcs-head { grid-template-columns: 1fr; gap: 24px; }
  .svcs-grid { grid-template-columns: 1fr; }
  .svc-item { padding: 40px 28px; }
  .stats-grid { grid-template-columns: 1fr; }
  .featured-grid { grid-template-columns: 1fr; }
  .feat-card--large { aspect-ratio: 16/9; }
}

/* ══════════════════════════════
   WORK GRID — 2×2 layout
══════════════════════════════ */

.work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 40px;
}

/* Cards in the grid are 16:9, work as links */
.work-grid .work-card {
  aspect-ratio: 16 / 9;
  flex: none;
  cursor: pointer;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform .4s var(--ease), box-shadow .4s;
}
.work-grid .work-card:hover {
  transform: scale(1.015);
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
}

/* Info always visible */
.work-grid .work-card-info {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 700px) {
  .work-grid { grid-template-columns: 1fr; }
  .work-grid .work-card { aspect-ratio: 16 / 9; }
}

/* ══════════════════════════════
   HERO — intro + inline player
══════════════════════════════ */

.hv2-content {
  max-width: none !important;
  padding-top: calc(var(--nav-h) + 20px) !important;
}

/* ── Intro headline block ── */
.hv2-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  max-width: none;          /* título preenche a largura do hero */
  padding: 0 var(--pad);
  margin: 0 auto 40px;
}

/* Título grande — preenche o espaço disponível */
.hv2-intro .hv2-h1 {
  font-size: clamp(56px, 12vw, 160px) !important;
  line-height: .88 !important;
  width: 100%;
}

/* Subtítulo com largura limitada para leitura */
.hv2-intro-sub {
  font-size: 16px;
  color: rgba(255,255,255,.55);
  line-height: 1.6;
  margin: 0;
  max-width: 480px;
}

.hv2-intro-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ── Stats strip ── */
.stats-strip {
  display: flex;
  border-top: 1px solid rgba(255,255,255,.07);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.ss-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 16px;
  border-right: 1px solid rgba(255,255,255,.07);
  gap: 4px;
}
.ss-stat:last-child { border-right: none; }
.ss-n {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  letter-spacing: -.5px;
}
.ss-l {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,255,255,.38);
  text-align: center;
}

/* Trust section — centrar labels */
.trust-metric { align-items: center !important; text-align: center; }
.trust-l { text-align: center !important; }

/* ── Responsive ── */
@media (max-width: 700px) {
  .hv2-intro { margin-bottom: 28px; }
  .hv2-intro-sub { font-size: 14px; }
  .hv2-intro-actions { flex-direction: column; align-items: center; }
  .hero-player-btn { width: 60px; height: 60px; }
  .hero-player-caption { display: none; }
  .stats-strip { overflow-x: auto; scrollbar-width: none; }
  .stats-strip::-webkit-scrollbar { display: none; }
  .ss-stat { min-width: 100px; flex: none; }
}