/* ============================================
   AGÊNCIA BUZZ — Haute Couture Digital
   Inspired by: Chanel, Hermès, Cartier
   Typography: Cormorant Garamond (display) + Outfit (body)
   Palette: Noir + Ivory + Champagne Gold
   ============================================ */

/* --- CUSTOM PROPERTIES --- */
:root {
  --c-noir: #0b0b0b;
  --c-noir-rich: #141413;
  --c-charcoal: #1e1e1c;
  --c-graphite: #2a2a28;
  --c-ivory: #f8f5f0;
  --c-ivory-soft: #ede8e1;
  --c-cream: #d9d2c7;
  --c-gold: #c9a96e;
  --c-gold-light: #ddc08a;
  --c-gold-glow: rgba(201,169,110,.12);
  --c-text-light: #f8f5f0;
  --c-text-dark: #0b0b0b;
  --c-text-muted: #8a857d;
  --c-text-subtle: #6b665f;
  --c-border-light: rgba(248,245,240,.08);
  --c-border-dark: rgba(11,11,11,.08);

  --f-display: 'Cormorant Garamond', Georgia, serif;
  --f-body: 'Outfit', sans-serif;

  --s-section: clamp(60px, 10vw, 180px);
  --s-container: min(1200px, 88vw);

  --ease-luxe: cubic-bezier(.25,.46,.45,.94);
  --ease-smooth: cubic-bezier(.4,0,.2,1);
  --dur: .5s;

  --r-sm: 2px;
  --r-md: 4px;
}

/* --- RESET & BASE --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--f-body);
  background: var(--c-ivory);
  color: var(--c-text-dark);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--f-display);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.01em;
}
::selection { background: var(--c-gold); color: var(--c-noir); }

/* --- PAGE LOADER --- */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--c-noir);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .6s var(--ease-luxe), visibility .6s;
}
.page-loader.fade-out {
  opacity: 0;
  visibility: hidden;
}
.loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
  position: relative;
}
/* Soft radial halo */
.loader-inner::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(201,169,110,.08) 0%, transparent 65%);
  pointer-events: none;
  z-index: -1;
}

/* Orbit container — much larger */
.loader-orbit {
  position: relative;
  width: 240px;
  height: 240px;
  animation: loader-orbit-spin 9s linear infinite;
}
.loader-orbit::before {
  content: '';
  position: absolute;
  inset: -24px;
  border-radius: 50%;
  border: 1px dashed rgba(201,169,110,.18);
  animation: loader-orbit-spin 22s linear reverse infinite;
}
.loader-orbit::after {
  content: '';
  position: absolute;
  inset: 30px;
  border-radius: 50%;
  border: 1px solid rgba(201,169,110,.1);
  animation: loader-orbit-spin 14s linear infinite;
}
@keyframes loader-orbit-spin {
  to { transform: rotate(360deg); }
}

/* Orbit ring */
.loader-orbit-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(201,169,110,.18);
}
.loader-orbit-ring::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--c-gold);
  border-right-color: rgba(201,169,110,.4);
  animation: loader-ring-glow 1.8s var(--ease-luxe) infinite;
  filter: drop-shadow(0 0 8px rgba(201,169,110,.6));
}
@keyframes loader-ring-glow {
  0%, 100% { opacity: .5; }
  50% { opacity: 1; }
}

/* Central "B" mark (Buzz) */
.loader-orbit-ring::before {
  content: 'B';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--f-display);
  font-size: 4.6rem;
  font-weight: 300;
  color: var(--c-gold);
  letter-spacing: -.02em;
  text-shadow: 0 0 30px rgba(201,169,110,.6);
  animation: loader-mark-pulse 2.6s ease-in-out infinite;
}
@keyframes loader-mark-pulse {
  0%, 100% { opacity: .85; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
}

/* E-commerce icons */
.loader-icon {
  position: absolute;
  width: 36px;
  height: 36px;
  color: var(--c-gold);
  animation: loader-orbit-spin 9s linear infinite reverse;
  opacity: 0;
  filter: drop-shadow(0 0 6px rgba(201,169,110,.4));
}
.loader-icon svg {
  width: 100%;
  height: 100%;
}
/* Cart — top */
.loader-icon-1 {
  top: -18px;
  left: calc(50% - 18px);
  animation-delay: 0s;
}
/* Bag — right */
.loader-icon-2 {
  top: calc(50% - 18px);
  right: -18px;
  animation-delay: 0s;
}
/* Truck — bottom */
.loader-icon-3 {
  bottom: -18px;
  left: calc(50% - 18px);
  animation-delay: 0s;
}
/* Dollar — left */
.loader-icon-4 {
  top: calc(50% - 18px);
  left: -18px;
  animation-delay: 0s;
}

/* Icons fade in staggered */
.loader-icon-1 { animation: loader-orbit-spin 9s linear infinite reverse, loader-icon-in .6s var(--ease-luxe) .2s forwards; }
.loader-icon-2 { animation: loader-orbit-spin 9s linear infinite reverse, loader-icon-in .6s var(--ease-luxe) .4s forwards; }
.loader-icon-3 { animation: loader-orbit-spin 9s linear infinite reverse, loader-icon-in .6s var(--ease-luxe) .6s forwards; }
.loader-icon-4 { animation: loader-orbit-spin 9s linear infinite reverse, loader-icon-in .6s var(--ease-luxe) .8s forwards; }

@keyframes loader-icon-in {
  from { opacity: 0; transform: rotate(0deg) scale(.4); }
  to   { opacity: 1; transform: rotate(0deg) scale(1); }
}

/* Progress bar — wider, thicker */
.loader-progress {
  width: 260px;
  height: 2px;
  background: rgba(201,169,110,.15);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.loader-progress-bar {
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--c-gold), var(--c-gold-light), var(--c-gold));
  background-size: 200% 100%;
  animation: loader-fill 2.2s var(--ease-luxe) forwards, loader-shimmer 1.4s linear infinite;
  box-shadow: 0 0 12px rgba(201,169,110,.6);
}
@keyframes loader-fill {
  0% { width: 0; }
  100% { width: 100%; }
}
@keyframes loader-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.loader-label {
  font-family: var(--f-body);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .5em;
  text-transform: uppercase;
  color: var(--c-gold);
  opacity: 0;
  animation: loader-label-in .8s var(--ease-luxe) .3s forwards;
  text-shadow: 0 0 20px rgba(201,169,110,.3);
}
.loader-label::before,
.loader-label::after {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--c-gold);
  vertical-align: middle;
  opacity: .5;
  margin: 0 14px;
}
@keyframes loader-label-in {
  to { opacity: 1; }
}
/* Sub-tagline */
.loader-tagline {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1rem;
  font-weight: 300;
  color: var(--c-cream);
  opacity: 0;
  letter-spacing: .04em;
  animation: loader-label-in 1s var(--ease-luxe) .9s forwards;
  margin-top: -28px;
}

/* Mobile loader */
@media (max-width: 600px) {
  .loader-orbit { width: 180px; height: 180px; }
  .loader-orbit-ring::before { font-size: 3.4rem; }
  .loader-icon { width: 28px; height: 28px; }
  .loader-icon-1 { top: -14px; left: calc(50% - 14px); }
  .loader-icon-2 { top: calc(50% - 14px); right: -14px; }
  .loader-icon-3 { bottom: -14px; left: calc(50% - 14px); }
  .loader-icon-4 { top: calc(50% - 14px); left: -14px; }
  .loader-progress { width: 200px; }
  .loader-label { font-size: .68rem; letter-spacing: .38em; }
  .loader-label::before, .loader-label::after { width: 16px; margin: 0 8px; }
  .loader-tagline { font-size: .88rem; }
  .loader-inner { gap: 40px; }
}

/* Lock scroll during load */
body.is-loading { overflow: hidden; }

/* Hero entrance — hidden until loader ends */
body.is-loading .hero .reveal { opacity: 0; transform: translateY(40px); }

/* --- HERO AI TEXT — Typewriter + Shimmer --- */
.hero-ai-text {
  position: relative;
  color: var(--c-gold);
  font-style: italic;
  display: inline;
}

/* Blinking cursor */
.hero-ai-cursor {
  font-style: normal;
  font-weight: 200;
  color: var(--c-gold);
  animation: ai-cursor-blink .7s step-end infinite;
  margin-left: 2px;
}
@keyframes ai-cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* After typing completes, cursor fades out */
.hero-ai-text.typed .hero-ai-cursor {
  animation: ai-cursor-fade 1s var(--ease-luxe) forwards;
}
@keyframes ai-cursor-fade {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

/* After typing, shimmer sweep activates */
.hero-ai-text.typed .hero-ai-letter {
  background: linear-gradient(
    90deg,
    var(--c-gold) 0%,
    var(--c-gold-light) 40%,
    #f0dca4 50%,
    var(--c-gold-light) 60%,
    var(--c-gold) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer-gold 3.5s var(--ease-luxe) .5s infinite;
}
@keyframes shimmer-gold {
  0% { background-position: 100% 50%; }
  100% { background-position: -100% 50%; }
}

/* Glow pulse after typed */
.hero-ai-text.typed {
  animation: ai-glow-pulse 4s ease-in-out 1s infinite;
}
@keyframes ai-glow-pulse {
  0%, 100% { text-shadow: 0 0 0 transparent; }
  50% { text-shadow: 0 0 30px rgba(201,169,110,.3), 0 0 60px rgba(201,169,110,.15); }
}

/* Each letter entrance */
.hero-ai-letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s var(--ease-luxe), transform .25s var(--ease-luxe);
}
.hero-ai-letter.visible {
  opacity: 1;
  transform: translateY(0);
}
/* Word wrapper prevents mid-word line breaks */
.hero-ai-word { display: inline-block; white-space: nowrap; }
/* Whitespace letters need explicit width */
.hero-ai-letter.is-space { width: .3em; }

/* --- SCROLL ANIMATIONS --- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .5s var(--ease-luxe), transform .5s var(--ease-luxe);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }
.reveal-delay-4 { transition-delay: .32s; }
.reveal-delay-5 { transition-delay: .4s; }

/* --- CONTAINER --- */
.container { width: var(--s-container); margin: 0 auto; }

/* --- BUTTONS --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-body);
  font-weight: 500;
  font-size: .8rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 16px 40px;
  transition: all var(--dur) var(--ease-luxe);
  position: relative;
}

.btn-primary {
  background: var(--c-noir);
  color: var(--c-ivory);
}
.btn-primary:hover {
  background: var(--c-charcoal);
  transform: translateY(-1px);
  box-shadow: 0 12px 40px rgba(0,0,0,.15);
}

.btn-primary-light {
  background: var(--c-ivory);
  color: var(--c-noir);
}
.btn-primary-light:hover {
  background: var(--c-ivory-soft);
  transform: translateY(-1px);
  box-shadow: 0 12px 40px rgba(0,0,0,.2);
}

.btn-outline {
  border: 1px solid var(--c-noir);
  color: var(--c-noir);
  background: transparent;
}
.btn-outline:hover {
  background: var(--c-noir);
  color: var(--c-ivory);
}

.btn-outline-light {
  border: 1px solid rgba(248,245,240,.35);
  color: var(--c-ivory);
  background: transparent;
}
.btn-outline-light:hover {
  background: var(--c-ivory);
  color: var(--c-noir);
}

.btn-gold {
  background: var(--c-gold);
  color: var(--c-noir);
}
.btn-gold:hover {
  background: var(--c-gold-light);
  transform: translateY(-1px);
  box-shadow: 0 12px 40px var(--c-gold-glow);
}

.btn .arrow {
  transition: transform .4s var(--ease-luxe);
  font-size: .9em;
}
.btn:hover .arrow { transform: translateX(5px); }

/* --- THIN LINE DIVIDER --- */
.divider {
  width: 60px;
  height: 1px;
  background: var(--c-gold);
  margin: 24px 0;
}
.divider-center {
  margin-left: auto;
  margin-right: auto;
}

/* ============================================
   HEADER
   ============================================ */
.header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 0 5vw;
  transition: all .5s var(--ease-luxe);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  max-width: 1400px;
  margin: 0 auto;
  border-bottom: 1px solid transparent;
  transition: all .5s var(--ease-luxe);
}
.header.scrolled {
  /* Header não é mais fixo — scrolled styles desativados */
}
.header.scrolled .header-inner {
  /* Header não é mais fixo — scrolled styles desativados */
}
/* When over dark sections */
.header.header-dark .nav-link { color: var(--c-ivory); }
.header.scrolled.header-dark .nav-link { color: var(--c-text-dark); }

/* Logo */
.logo {
  display: flex;
  align-items: center;
  transition: opacity .4s;
}
.logo img {
  height: 32px;
  width: auto;
  object-fit: contain;
  transition: opacity .5s var(--ease-luxe);
}

/* Logo swap: light version (white text) visible on dark bg */
.logo .logo-light { display: block; }
.logo .logo-dark { display: none; }

/* When header scrolls → ivory bg → show dark logo */
.header.scrolled .logo .logo-light { display: none; }
.header.scrolled .logo .logo-dark { display: block; }

/* When header is NOT over dark section (already light bg) → show dark logo */
.header:not(.header-dark) .logo .logo-light { display: none; }
.header:not(.header-dark) .logo .logo-dark { display: block; }

/* Navigation */
.nav { display: flex; align-items: center; gap: 40px; }
.nav-link {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-text-dark);
  transition: color .3s;
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -6px; left: 0;
  width: 0; height: 1px;
  background: var(--c-gold);
  transition: width .4s var(--ease-luxe);
}
.nav-link:hover { color: var(--c-gold); }
.nav-link:hover::after { width: 100%; }

.nav-cta {
  padding: 10px 28px;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  border: 1px solid var(--c-text-dark);
  color: var(--c-text-dark);
  transition: all .4s var(--ease-luxe);
}
.header.scrolled .nav-cta {
  border-color: var(--c-text-dark);
  color: var(--c-text-dark);
}
.nav-cta:hover {
  background: var(--c-noir);
  color: var(--c-ivory);
  border-color: var(--c-noir);
}

/* Mobile toggle */
.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 6px;
  width: 28px;
  padding: 4px 0;
  z-index: 1001;
}
.menu-toggle span {
  display: block;
  height: 1px;
  background: var(--c-text-dark);
  transition: all .4s var(--ease-luxe);
  transform-origin: center;
}
.menu-toggle.active span { background: var(--c-text-dark); }
.menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 4px); }
.menu-toggle.active span:nth-child(2) { opacity: 0; }
.menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -4px); }

/* --- MOBILE NAV OVERLAY --- */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--c-ivory);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s var(--ease-luxe);
}
.mobile-nav.open { opacity: 1; pointer-events: auto; }
.mobile-nav a {
  font-family: var(--f-display);
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--c-text-dark);
  transition: color .3s;
}
.mobile-nav a:hover { color: var(--c-gold); }

/* ============================================
   HERO — Luxury Stage (noir × gold × IA)
   ============================================ */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: var(--c-noir);
  color: var(--c-ivory);
  overflow: hidden;
  text-align: center;
  padding: 140px 0 100px;
}

/* Photo backdrop — subtle luxury workspace */
.hero-photo {
  position: absolute;
  inset: 0;
  background-image: url('../assets/img/hero-bg.jpg');
  background-size: cover;
  background-position: center;
  filter: grayscale(85%) brightness(.28) contrast(1.1) sepia(.2);
  opacity: .35;
  z-index: 0;
  pointer-events: none;
}

/* Cosmos canvas */
.hero-cosmos {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.5s var(--ease-luxe);
  z-index: 1;
  mix-blend-mode: screen;
}
.hero-cosmos.active { opacity: 1; }

/* Subtle radial glow */
.hero::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 900px; height: 900px;
  background: radial-gradient(circle, rgba(201,169,110,.1) 0%, transparent 65%);
  pointer-events: none;
  z-index: 1;
}
/* Vignette for text readability */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 70% at 50% 50%, rgba(11,11,11,.1) 0%, rgba(11,11,11,.55) 60%, rgba(11,11,11,.85) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Fine grid pattern */
.hero-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(rgba(248,245,240,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(248,245,240,.025) 1px, transparent 1px);
  background-size: 100px 100px;
  pointer-events: none;
}

/* Stage gold corners */
.hero-corner {
  position: absolute;
  width: 56px;
  height: 56px;
  pointer-events: none;
  z-index: 3;
}
.hero-corner--tl { top: 28px; left: 28px; border-top: 1px solid var(--c-gold); border-left: 1px solid var(--c-gold); }
.hero-corner--tr { top: 28px; right: 28px; border-top: 1px solid var(--c-gold); border-right: 1px solid var(--c-gold); }
.hero-corner--bl { bottom: 28px; left: 28px; border-bottom: 1px solid var(--c-gold); border-left: 1px solid var(--c-gold); }
.hero-corner--br { bottom: 28px; right: 28px; border-bottom: 1px solid var(--c-gold); border-right: 1px solid var(--c-gold); }

/* HUD live badge */
.hero-hud {
  position: absolute;
  top: 110px;
  right: 60px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: rgba(11,11,11,.55);
  border: 1px solid rgba(201,169,110,.4);
  border-radius: 2px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 4;
  font-family: var(--f-body);
  font-size: .58rem;
  font-weight: 400;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--c-cream);
}
.hero-hud strong {
  font-weight: 500;
  color: var(--c-gold);
}
.hero-hud-dot {
  width: 7px;
  height: 7px;
  background: #25d366;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(37,211,102,.9);
  animation: ecom-pulse 1.6s ease-in-out infinite;
}

.hero .container { position: relative; z-index: 2; }
.hero-content { max-width: 820px; margin: 0 auto; }
.hero-italic {
  font-style: italic;
  color: var(--c-gold);
  font-weight: 400;
}

/* Tech stack micro-list */
.hero-stack {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 36px;
  padding: 10px 22px;
  background: rgba(11,11,11,.4);
  border: 1px solid rgba(201,169,110,.18);
  border-radius: 2px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: var(--f-body);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.hero-stack-label {
  color: var(--c-gold);
  font-weight: 500;
  letter-spacing: .26em;
}
.hero-stack-item {
  color: var(--c-cream);
  font-weight: 400;
  transition: color .3s;
}
.hero-stack-item:hover { color: var(--c-gold); }
.hero-stack-sep {
  color: rgba(201,169,110,.4);
}

/* Scroll cue */
.hero-scroll {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 3;
  opacity: .7;
}
.hero-scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(180deg, transparent, var(--c-gold));
  position: relative;
  overflow: hidden;
}
.hero-scroll-line::after {
  content: '';
  position: absolute;
  top: -20px;
  left: 0;
  width: 100%;
  height: 20px;
  background: linear-gradient(180deg, transparent, var(--c-gold-light));
  animation: hero-scroll-fall 2s var(--ease-luxe) infinite;
}
@keyframes hero-scroll-fall {
  0% { top: -20px; opacity: 0; }
  30% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
.hero-scroll-label {
  font-family: var(--f-body);
  font-size: .54rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--c-cream);
  opacity: .55;
}

.hero-label {
  font-family: var(--f-body);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: 40px;
  display: block;
}

.hero h1 {
  font-size: clamp(2.8rem, 6.5vw, 5.2rem);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -.02em;
  margin-bottom: 36px;
  color: var(--c-ivory);
}
.hero h1 em {
  font-style: italic;
  color: var(--c-gold);
}

.hero-text {
  font-size: clamp(.95rem, 1.3vw, 1.1rem);
  color: var(--c-cream);
  max-width: 540px;
  margin: 0 auto 48px;
  line-height: 1.8;
  font-weight: 300;
}

.hero-actions {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Hero bottom stats — luxe glow cards */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  max-width: 900px;
  margin: 64px auto 0;
  padding-top: 36px;
  position: relative;
}
.hero-stats::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,169,110,.4), transparent);
}
.hero-stat {
  text-align: center;
  padding: 22px 16px;
  background: linear-gradient(135deg, rgba(20,20,19,.55) 0%, rgba(11,11,11,.65) 100%);
  border: 1px solid rgba(201,169,110,.18);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: border-color .6s var(--ease-luxe), box-shadow .6s var(--ease-luxe), transform .6s var(--ease-luxe);
}
/* Corner accents */
.hero-stat::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 14px; height: 14px;
  border-top: 1px solid var(--c-gold);
  border-left: 1px solid var(--c-gold);
  pointer-events: none;
  opacity: .6;
  transition: opacity .5s var(--ease-luxe), width .5s var(--ease-luxe), height .5s var(--ease-luxe);
}
.hero-stat::after {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  width: 14px; height: 14px;
  border-bottom: 1px solid var(--c-gold);
  border-right: 1px solid var(--c-gold);
  pointer-events: none;
  opacity: .6;
  transition: opacity .5s var(--ease-luxe), width .5s var(--ease-luxe), height .5s var(--ease-luxe);
}
/* Sweeping shimmer on hover */
.hero-stat-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(201,169,110,.1) 50%, transparent 100%);
  transform: translateX(-100%);
  pointer-events: none;
  z-index: 0;
  transition: transform 1.2s var(--ease-luxe);
}
.hero-stat:hover .hero-stat-glow { transform: translateX(100%); }
.hero-stat:hover {
  border-color: var(--c-gold);
  box-shadow: 0 12px 40px rgba(0,0,0,.5), 0 0 40px rgba(201,169,110,.18);
  transform: translateY(-3px);
}
.hero-stat:hover::before,
.hero-stat:hover::after {
  opacity: 1;
  width: 22px;
  height: 22px;
}
.hero-stat .number {
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 4.5vw, 3.6rem);
  font-weight: 400;
  color: var(--c-gold);
  display: block;
  letter-spacing: -.02em;
  line-height: 1;
  text-shadow: 0 0 18px rgba(201,169,110,.18);
  transition: text-shadow .6s var(--ease-luxe);
  position: relative;
  z-index: 1;
}
.hero-stat:hover .number {
  text-shadow: 0 0 28px rgba(201,169,110,.5);
}
.hero-stat .label {
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-cream);
  margin-top: 12px;
  font-weight: 400;
  display: block;
  position: relative;
  z-index: 1;
  opacity: .8;
  transition: opacity .5s var(--ease-luxe);
}
.hero-stat:hover .label {
  opacity: 1;
}

/* ============================================
   SECTION COMMON
   ============================================ */
.section { padding: var(--s-section) 0; position: relative; }

.section-label {
  font-family: var(--f-body);
  font-size: .65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .28em;
  color: var(--c-gold);
  margin-bottom: 16px;
  display: block;
}

.section-title {
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  font-weight: 300;
  line-height: 1.12;
  margin-bottom: 20px;
}

.section-desc {
  font-size: clamp(.92rem, 1.2vw, 1.05rem);
  color: var(--c-text-subtle);
  max-width: 560px;
  line-height: 1.85;
  font-weight: 300;
}

/* ============================================
   ABOUT — Starfield Hyperspace + Parallax Photo
   ============================================ */
.about {
  position: relative;
  overflow: hidden;
  background: var(--c-noir);
  min-height: 100vh;
  display: flex;
  align-items: center;
}
/* Parallax photo backdrop */
.about-photo {
  position: absolute;
  inset: -10% 0;
  width: 100%;
  height: 120%;
  background-image: url('../assets/img/about-bg.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  filter: grayscale(60%) brightness(.42) contrast(1.05) sepia(.18);
  opacity: .38;
  z-index: 0;
  will-change: transform;
  transition: transform 1.6s var(--ease-luxe);
}
/* Canvas starfield */
.starfield-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  mix-blend-mode: screen;
  opacity: .85;
}

/* Radial overlay — depth + text readability */
.about-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 55% 60% at 50% 50%,
      rgba(11,11,11,.1) 0%,
      rgba(11,11,11,.4) 45%,
      rgba(11,11,11,.82) 100%
    );
  z-index: 2;
}

/* Centered content layer */
.about-content {
  position: relative;
  z-index: 3;
  text-align: center;
  max-width: 1040px;
  margin: 0 auto;
  padding: clamp(80px, 12vh, 140px) 24px;
}

/* Override label/title colors for dark bg */
.about .section-label {
  color: var(--c-gold);
}
.about .divider {
  background: var(--c-gold);
  margin: 16px auto 0;
}
.about-title {
  color: var(--c-ivory);
  text-shadow: 0 2px 40px rgba(0,0,0,.5);
}
.about-title em {
  font-style: italic;
  color: var(--c-gold);
  font-weight: 400;
  text-shadow: 0 0 30px rgba(201,169,110,.4);
}

/* Stage gold corners */
.about-corner {
  position: absolute;
  width: 56px;
  height: 56px;
  pointer-events: none;
  z-index: 4;
}
.about-corner--tl { top: 28px; left: 28px; border-top: 1px solid var(--c-gold); border-left: 1px solid var(--c-gold); }
.about-corner--tr { top: 28px; right: 28px; border-top: 1px solid var(--c-gold); border-right: 1px solid var(--c-gold); }
.about-corner--bl { bottom: 28px; left: 28px; border-bottom: 1px solid var(--c-gold); border-left: 1px solid var(--c-gold); }
.about-corner--br { bottom: 28px; right: 28px; border-bottom: 1px solid var(--c-gold); border-right: 1px solid var(--c-gold); }

/* HUD live badge */
.about-hud {
  position: absolute;
  top: 110px;
  left: 60px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: rgba(11,11,11,.55);
  border: 1px solid rgba(201,169,110,.4);
  border-radius: 2px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 4;
  font-family: var(--f-body);
  font-size: .58rem;
  font-weight: 400;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--c-cream);
}
.about-hud strong { font-weight: 500; color: var(--c-gold); }
.about-hud-dot {
  width: 7px;
  height: 7px;
  background: var(--c-gold);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(201,169,110,.9);
  animation: ecom-pulse 1.6s ease-in-out infinite;
}

/* Text on dark bg with glass layer */
.about .about-text {
  color: rgba(248,245,240,.88);
  line-height: 1.9;
  font-weight: 300;
  font-size: clamp(.92rem, 1.1vw, 1rem);
  max-width: 700px;
  margin: 0 auto;
  background: linear-gradient(135deg, rgba(11,11,11,.55) 0%, rgba(20,20,19,.45) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(201,169,110,.22);
  border-radius: 4px;
  padding: clamp(28px, 4vw, 44px) clamp(28px, 4vw, 44px);
  position: relative;
  text-align: left;
}
.about .about-text::before,
.about .about-text::after {
  content: '';
  position: absolute;
  width: 22px; height: 22px;
  pointer-events: none;
}
.about .about-text::before {
  top: -1px; left: -1px;
  border-top: 1px solid var(--c-gold);
  border-left: 1px solid var(--c-gold);
}
.about .about-text::after {
  bottom: -1px; right: -1px;
  border-bottom: 1px solid var(--c-gold);
  border-right: 1px solid var(--c-gold);
}
.about .about-text p + p { margin-top: 18px; }
.about .about-text strong {
  color: var(--c-gold-light);
  font-weight: 500;
}

/* Founder mini-card */
.about-founder {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin-top: 32px;
  padding: 14px 22px 14px 14px;
  background: linear-gradient(135deg, rgba(20,20,19,.65) 0%, rgba(11,11,11,.55) 100%);
  border: 1px solid rgba(201,169,110,.28);
  border-radius: 80px 4px 4px 80px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all .5s var(--ease-luxe);
}
.about-founder:hover {
  border-color: var(--c-gold);
  box-shadow: 0 10px 36px rgba(0,0,0,.4), 0 0 30px rgba(201,169,110,.15);
}
.about-founder-photo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-image: url('../assets/img/about-team.jpg');
  background-size: cover;
  background-position: center;
  filter: grayscale(20%) brightness(.95);
  border: 1px solid var(--c-gold);
  flex-shrink: 0;
  box-shadow: 0 0 16px rgba(201,169,110,.3);
}
.about-founder-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
}
.about-founder-name {
  font-family: var(--f-display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--c-ivory);
  letter-spacing: .01em;
  line-height: 1;
}
.about-founder-role {
  font-family: var(--f-body);
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-gold);
}
.about-founder-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 12px;
  padding: 9px 18px;
  background: var(--c-gold);
  color: var(--c-noir);
  font-family: var(--f-body);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  border-radius: 2px;
  transition: all .4s var(--ease-luxe);
}
.about-founder-cta:hover {
  background: var(--c-gold-light);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(201,169,110,.4);
}
.about-founder-cta .arrow {
  transition: transform .3s var(--ease-luxe);
}
.about-founder-cta:hover .arrow { transform: translateX(3px); }

/* Principles row */
.about-principles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 48px;
  max-width: 100%;
}
.about-principle {
  position: relative;
  background: linear-gradient(135deg, rgba(20,20,19,.6) 0%, rgba(11,11,11,.5) 100%);
  border: 1px solid rgba(201,169,110,.22);
  border-radius: 4px;
  padding: 24px 20px 22px;
  text-align: left;
  overflow: hidden;
  isolation: isolate;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all .6s var(--ease-luxe);
}
.about-principle::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 14px; height: 14px;
  border-top: 1px solid var(--c-gold);
  border-left: 1px solid var(--c-gold);
  opacity: .6;
  transition: opacity .5s, width .5s, height .5s;
}
.about-principle::after {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  width: 14px; height: 14px;
  border-bottom: 1px solid var(--c-gold);
  border-right: 1px solid var(--c-gold);
  opacity: .6;
  transition: opacity .5s, width .5s, height .5s;
}
.about-principle-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(201,169,110,.08) 50%, transparent 100%);
  transform: translateX(-100%);
  pointer-events: none;
  z-index: 0;
  transition: transform 1.2s var(--ease-luxe);
}
.about-principle:hover .about-principle-glow { transform: translateX(100%); }
.about-principle:hover {
  border-color: var(--c-gold);
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0,0,0,.5), 0 0 30px rgba(201,169,110,.15);
}
.about-principle:hover::before,
.about-principle:hover::after {
  opacity: 1;
  width: 22px;
  height: 22px;
}
.about-principle-num {
  display: block;
  font-family: var(--f-display);
  font-size: 2rem;
  font-weight: 300;
  color: transparent;
  -webkit-text-stroke: 1px rgba(201,169,110,.5);
  letter-spacing: -.02em;
  line-height: 1;
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}
.about-principle h4 {
  font-family: var(--f-display);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--c-ivory);
  margin-bottom: 6px;
  letter-spacing: -.01em;
  line-height: 1.2;
  position: relative;
  z-index: 1;
}
.about-principle p {
  font-family: var(--f-body);
  font-size: .78rem;
  color: var(--c-cream);
  line-height: 1.5;
  font-weight: 300;
  position: relative;
  z-index: 1;
  opacity: .85;
}

/* CTA on dark bg */
.about-btn {
  border-color: var(--c-gold) !important;
  color: var(--c-ivory) !important;
}
.about-btn:hover {
  background: var(--c-gold) !important;
  color: var(--c-noir) !important;
}

/* ============================================
   SERVICES — Futuristic Slideshow (IA × Chanel)
   ============================================ */
.services {
  background: var(--c-noir);
  color: var(--c-ivory);
  position: relative;
  overflow: hidden;
}
.services::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(201,169,110,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,169,110,.02) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
  z-index: 0;
}
.services > .container { position: relative; z-index: 1; }

.services-header {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 56px;
}
.services-header .section-desc {
  color: var(--c-cream);
  margin: 0 auto;
}
.services-header .divider { margin: 24px auto; }

/* Slideshow shell */
.services-slideshow {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  border-radius: 4px;
}
.services-stage {
  position: relative;
  border: 1px solid rgba(201,169,110,.22);
  border-radius: 4px;
  background: linear-gradient(135deg, rgba(20,20,19,.85) 0%, rgba(11,11,11,.95) 100%);
  overflow: hidden;
  min-height: 460px;
  box-shadow: 0 32px 80px rgba(0,0,0,.4), inset 0 1px 0 rgba(201,169,110,.12);
}
/* corner accents */
.services-stage::before,
.services-stage::after {
  content: '';
  position: absolute;
  width: 36px; height: 36px;
  pointer-events: none;
  z-index: 3;
}
.services-stage::before {
  top: 0; left: 0;
  border-top: 1px solid var(--c-gold);
  border-left: 1px solid var(--c-gold);
}
.services-stage::after {
  bottom: 0; right: 0;
  border-bottom: 1px solid var(--c-gold);
  border-right: 1px solid var(--c-gold);
}
/* HUD-style scanline */
.services-stage .stage-scan {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(201,169,110,.04) 49%,
    rgba(201,169,110,.10) 50%,
    rgba(201,169,110,.04) 51%,
    transparent 100%);
  background-size: 100% 200%;
  animation: services-scan 7s linear infinite;
  pointer-events: none;
  z-index: 2;
  opacity: .6;
  mix-blend-mode: screen;
}
@keyframes services-scan {
  0% { background-position: 0 -100%; }
  100% { background-position: 0 200%; }
}
/* radial spotlight */
.services-stage::before,
.services-stage::after { z-index: 4; }
.services-stage .stage-glow {
  position: absolute;
  top: 50%; left: 50%;
  width: 70%; height: 80%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, rgba(201,169,110,.10) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  filter: blur(40px);
}

.services-slides {
  position: relative;
  width: 100%;
  min-height: 460px;
  z-index: 1;
}
.service-slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 56px;
  align-items: center;
  padding: 64px 56px;
  opacity: 0;
  transform: translateX(40px) scale(.98);
  transition: opacity .8s var(--ease-luxe), transform .8s var(--ease-luxe);
  pointer-events: none;
}
.service-slide.active {
  opacity: 1;
  transform: translateX(0) scale(1);
  pointer-events: auto;
}
.service-slide-text {
  position: relative;
}
.service-slide-num {
  font-family: var(--f-display);
  font-size: clamp(3.6rem, 7vw, 5.4rem);
  font-weight: 300;
  color: transparent;
  -webkit-text-stroke: 1px rgba(201,169,110,.5);
  letter-spacing: -.02em;
  line-height: 1;
  margin-bottom: 18px;
  display: block;
}
.service-slide-tag {
  display: inline-block;
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--c-gold);
  padding: 6px 14px;
  border: 1px solid rgba(201,169,110,.4);
  border-radius: 2px;
  margin-bottom: 24px;
  background: rgba(201,169,110,.06);
}
.service-slide h3 {
  font-family: var(--f-display);
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.15;
  margin-bottom: 22px;
  color: var(--c-ivory);
}
.service-slide h3 em {
  font-style: italic;
  color: var(--c-gold);
}
.service-slide p {
  font-size: .96rem;
  color: var(--c-cream);
  line-height: 1.8;
  font-weight: 300;
  margin-bottom: 28px;
  max-width: 480px;
}
.service-slide-features {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
}
.service-slide-features li {
  font-family: var(--f-body);
  font-size: .82rem;
  color: var(--c-cream);
  line-height: 1.4;
  padding: 8px 0 8px 22px;
  position: relative;
  font-weight: 300;
  letter-spacing: .02em;
  border-bottom: 1px solid rgba(201,169,110,.06);
}
.service-slide-features li:last-child { border-bottom: none; }
.service-slide-features li::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 12px; height: 1px;
  background: var(--c-gold);
}
.service-slide-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-body);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-gold);
  padding: 12px 28px;
  border: 1px solid var(--c-gold);
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
  transition: all .5s var(--ease-luxe);
}
.service-slide-cta:hover {
  background: var(--c-gold);
  color: var(--c-noir);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(201,169,110,.25);
}
.service-slide-cta .arrow {
  transition: transform .3s var(--ease-luxe);
}
.service-slide-cta:hover .arrow { transform: translateX(4px); }

/* Visual side — animated holographic */
.service-slide-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.svc-hologram {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(201,169,110,.2);
  animation: svc-rotate 28s linear infinite;
}
.svc-hologram::before,
.svc-hologram::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(201,169,110,.12);
}
.svc-hologram::before { inset: 10%; }
.svc-hologram::after { inset: 22%; border-color: rgba(201,169,110,.18); }
@keyframes svc-rotate {
  to { transform: rotate(360deg); }
}
.svc-hologram-2 {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  border: 1px dashed rgba(201,169,110,.2);
  animation: svc-rotate 40s linear reverse infinite;
}
.svc-hologram-core {
  position: relative;
  width: 56%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(201,169,110,.4) 0%, rgba(201,169,110,.08) 40%, transparent 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.svc-hologram-core::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 1px solid var(--c-gold);
  box-shadow: 0 0 40px rgba(201,169,110,.4), inset 0 0 40px rgba(201,169,110,.2);
}
.svc-icon-big {
  font-family: var(--f-display);
  font-size: clamp(2.6rem, 6vw, 4rem);
  font-weight: 300;
  color: var(--c-gold);
  text-shadow: 0 0 30px rgba(201,169,110,.6);
  letter-spacing: -.02em;
}
/* orbiting dots */
.svc-orbit-dot {
  position: absolute;
  width: 6px; height: 6px;
  background: var(--c-gold);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(201,169,110,.8);
}
.svc-orbit-dot:nth-child(1) { top: 0; left: 50%; transform: translateX(-50%); }
.svc-orbit-dot:nth-child(2) { right: 0; top: 50%; transform: translateY(-50%); }
.svc-orbit-dot:nth-child(3) { bottom: 0; left: 50%; transform: translateX(-50%); }
.svc-orbit-dot:nth-child(4) { left: 0; top: 50%; transform: translateY(-50%); }

/* Slideshow controls */
.services-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 32px;
  gap: 24px;
}
.services-dots {
  display: flex;
  gap: 14px;
  align-items: center;
}
.services-dot {
  width: 28px;
  height: 2px;
  background: rgba(201,169,110,.2);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all .5s var(--ease-luxe);
}
.services-dot.active {
  background: var(--c-gold);
  width: 56px;
  box-shadow: 0 0 12px rgba(201,169,110,.5);
}
.services-nav {
  display: flex;
  gap: 12px;
}
.services-nav-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(201,169,110,.3);
  background: transparent;
  color: var(--c-gold);
  cursor: pointer;
  border-radius: 2px;
  transition: all .4s var(--ease-luxe);
  font-size: 1rem;
}
.services-nav-btn:hover {
  border-color: var(--c-gold);
  background: var(--c-gold);
  color: var(--c-noir);
}
.services-counter {
  font-family: var(--f-display);
  font-size: 1rem;
  color: var(--c-gold);
  letter-spacing: .1em;
  font-weight: 400;
}
.services-counter span {
  color: rgba(201,169,110,.4);
  margin: 0 6px;
}

/* ============================================
   SERVICES GRID — 3 cards visíveis simultaneamente
   ============================================ */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 1240px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.services-card {
  display: flex;
  flex-direction: column;
}

.services-card-stage {
  position: relative;
  background: linear-gradient(160deg, rgba(20,20,19,.92) 0%, rgba(11,11,11,.96) 60%, rgba(20,20,19,.92) 100%);
  border: 1px solid rgba(201,169,110,.22);
  border-radius: 4px;
  padding: 40px 32px 36px;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: border-color .6s var(--ease-luxe),
              transform .6s var(--ease-luxe),
              box-shadow .6s var(--ease-luxe);
  box-shadow: 0 20px 60px rgba(0,0,0,.32),
              inset 0 1px 0 rgba(201,169,110,.08);
  overflow: hidden;
}
.services-card-stage::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,169,110,.4), transparent);
  opacity: .6;
}
.services-card:hover .services-card-stage {
  border-color: rgba(201,169,110,.55);
  transform: translateY(-5px);
  box-shadow: 0 30px 80px rgba(0,0,0,.5),
              0 0 0 1px rgba(201,169,110,.15),
              inset 0 1px 0 rgba(201,169,110,.22);
}

/* Gold corner accents (subtle) */
.services-card-corner {
  position: absolute;
  width: 18px; height: 18px;
  pointer-events: none;
  opacity: .55;
  transition: width .5s var(--ease-luxe),
              height .5s var(--ease-luxe),
              opacity .5s var(--ease-luxe);
}
.services-card-corner--tl { top: -1px; left: -1px;
  border-top: 1px solid var(--c-gold); border-left: 1px solid var(--c-gold); }
.services-card-corner--tr { top: -1px; right: -1px;
  border-top: 1px solid var(--c-gold); border-right: 1px solid var(--c-gold); }
.services-card-corner--bl { bottom: -1px; left: -1px;
  border-bottom: 1px solid var(--c-gold); border-left: 1px solid var(--c-gold); }
.services-card-corner--br { bottom: -1px; right: -1px;
  border-bottom: 1px solid var(--c-gold); border-right: 1px solid var(--c-gold); }
.services-card:hover .services-card-corner {
  width: 28px; height: 28px; opacity: 1;
}

/* Top row: number + icon */
.services-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.services-card-num {
  font-family: var(--f-display);
  font-size: 3rem;
  font-weight: 300;
  color: transparent;
  -webkit-text-stroke: 1px rgba(201,169,110,.55);
  letter-spacing: -.02em;
  line-height: 1;
  display: block;
  transition: color .5s var(--ease-luxe), -webkit-text-stroke .5s var(--ease-luxe);
}
.services-card:hover .services-card-num {
  color: rgba(201,169,110,.18);
  -webkit-text-stroke: 1px rgba(201,169,110,.85);
}
.services-card-icon {
  font-family: var(--f-display);
  font-size: 1.6rem;
  font-weight: 300;
  color: var(--c-gold);
  width: 44px;
  height: 44px;
  border: 1px solid rgba(201,169,110,.35);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0 0 12px rgba(201,169,110,.3);
  transition: all .5s var(--ease-luxe);
}
.services-card:hover .services-card-icon {
  border-color: var(--c-gold);
  background: rgba(201,169,110,.1);
  box-shadow: 0 0 20px rgba(201,169,110,.35);
}

.services-card-tag {
  display: inline-block;
  font-family: var(--f-body);
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--c-gold);
  padding: 7px 14px;
  border: 1px solid rgba(201,169,110,.4);
  background: rgba(201,169,110,.06);
  border-radius: 2px;
  margin-bottom: 22px;
  align-self: flex-start;
}

.services-card h3 {
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 1.9vw, 1.85rem);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -.01em;
  color: var(--c-ivory);
  margin-bottom: 16px;
}
.services-card h3 em {
  font-style: italic;
  color: var(--c-gold);
}

.services-card-desc {
  font-family: var(--f-body);
  font-size: .9rem;
  color: var(--c-cream);
  line-height: 1.7;
  font-weight: 300;
  margin-bottom: 26px;
}

/* Tech stack — destaque visual de plataformas */
.services-tech {
  margin-bottom: 26px;
  padding: 18px 0;
  border-top: 1px solid rgba(201,169,110,.15);
  border-bottom: 1px solid rgba(201,169,110,.15);
}
.services-tech-label {
  display: block;
  font-family: var(--f-body);
  font-size: .56rem;
  font-weight: 500;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: 12px;
}
.services-tech-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.services-tech-badge {
  font-family: var(--f-body);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--c-ivory);
  background: rgba(201,169,110,.08);
  border: 1px solid rgba(201,169,110,.28);
  padding: 6px 12px;
  border-radius: 2px;
  transition: all .35s var(--ease-luxe);
  cursor: default;
}
.services-card:hover .services-tech-badge {
  border-color: rgba(201,169,110,.45);
}
.services-tech-badge:hover {
  background: var(--c-gold);
  color: var(--c-noir);
  border-color: var(--c-gold);
  transform: translateY(-1px);
}

.services-card-features {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
}
.services-card-features li {
  font-family: var(--f-body);
  font-size: .8rem;
  color: var(--c-cream);
  line-height: 1.5;
  padding: 7px 0 7px 22px;
  position: relative;
  font-weight: 300;
}
.services-card-features li::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 12px; height: 1px;
  background: var(--c-gold);
  opacity: .7;
}

.services-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-body);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-gold);
  padding: 12px 22px;
  border: 1px solid var(--c-gold);
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
  transition: all .5s var(--ease-luxe);
  margin-top: auto;
  align-self: flex-start;
}
.services-card-cta:hover {
  background: var(--c-gold);
  color: var(--c-noir);
  box-shadow: 0 10px 24px rgba(201,169,110,.2);
}
.services-card-cta .arrow {
  transition: transform .3s var(--ease-luxe);
}
.services-card-cta:hover .arrow { transform: translateX(4px); }

/* Hide legacy slideshow controls/stage when grid is used */
.services-slideshow { display: none; }

/* Responsivo */
@media (max-width: 1100px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 760px;
  }
  .services-card:nth-child(3) {
    grid-column: 1 / -1;
    max-width: 380px;
    margin: 0 auto;
    width: 100%;
  }
}
@media (max-width: 720px) {
  .services-grid {
    grid-template-columns: 1fr;
    max-width: 440px;
    gap: 22px;
  }
  .services-card:nth-child(3) {
    grid-column: auto;
    max-width: none;
    margin: 0;
  }
  .services-card-stage {
    padding: 32px 24px 30px;
  }
  .services-card-num { font-size: 2.4rem; }
}

/* ============================================
   SERVICE HERO — Individual service pages
   ============================================ */
.srv-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(80px, 12vh, 140px) 0;
}
.srv-bg-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.srv-hero > .container {
  position: relative;
  z-index: 1;
}
.srv-hero--light {
  background: var(--c-ivory);
}
.srv-hero--dark {
  background: var(--c-noir);
}
/* E-commerce specific — dark stage for falling boxes */
.srv-hero--ecom {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(201,169,110,.08) 0%, transparent 50%),
    linear-gradient(180deg, #0a0a0a 0%, #141413 60%, #0b0b0b 100%);
  color: var(--c-ivory);
}
.srv-hero--ecom::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(201,169,110,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,169,110,.02) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
  z-index: 0;
}
/* Marketing — control room / data terminal vibe */
.srv-hero--mkt {
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(110,170,220,.06) 0%, transparent 70%),
    radial-gradient(ellipse at 20% 100%, rgba(201,169,110,.08) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 5%, rgba(100,200,120,.05) 0%, transparent 45%),
    radial-gradient(ellipse at 100% 50%, rgba(110,170,220,.04) 0%, transparent 60%),
    linear-gradient(180deg, #07070a 0%, #0d0e12 50%, #050507 100%);
  color: var(--c-ivory);
}
/* Mesh dot pattern (terminal feel) */
.srv-hero--mkt::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(201,169,110,.18) 1px, transparent 1px),
    radial-gradient(circle, rgba(110,170,220,.1) 1px, transparent 1px);
  background-size: 36px 36px, 72px 72px;
  background-position: 0 0, 18px 18px;
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 90%);
  opacity: .55;
}
/* CRT scan-line overlay */
.srv-hero--mkt::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg,
      transparent 0px,
      transparent 2px,
      rgba(201,169,110,.018) 3px,
      rgba(201,169,110,.018) 4px);
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: overlay;
}
/* Slow vertical sweep beam */
.srv-hero--mkt .container {
  position: relative;
  z-index: 1;
}
.srv-hero--mkt .container::before {
  content: '';
  position: absolute;
  inset: -40vh -50vw;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(201,169,110,.04) 49%,
    rgba(201,169,110,.08) 50%,
    rgba(201,169,110,.04) 51%,
    transparent 100%);
  background-size: 100% 220%;
  animation: ia-photo-scan 14s linear infinite;
  pointer-events: none;
  z-index: -1;
  mix-blend-mode: screen;
  opacity: .45;
}
/* Corner reticles (top-left + bottom-right tickmarks) */
.srv-hero--mkt > .container::after {
  content: '';
  position: absolute;
  top: -20px; right: 0;
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,169,110,.4), transparent);
  pointer-events: none;
  z-index: 0;
}
/* IA specific — dark stage for AI ops pipeline */
.srv-hero--ia {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(201,169,110,.12) 0%, transparent 55%),
    radial-gradient(ellipse at 90% 100%, rgba(140,110,220,.05) 0%, transparent 50%),
    linear-gradient(180deg, #0a0a0a 0%, #12120f 60%, #0b0b0b 100%);
  color: var(--c-ivory);
}
.srv-hero--ia::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(201,169,110,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,169,110,.02) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
  z-index: 0;
}

/* Grid: content + visual side-by-side */
.srv-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 8vw, 100px);
  align-items: center;
}
.srv-hero-grid--reverse {
  direction: rtl;
}
.srv-hero-grid--reverse > * {
  direction: ltr;
}

/* Content side */
.srv-hero-content {
  position: relative;
  z-index: 2;
}
#srv-ecommerce .srv-hero-content {
  background: linear-gradient(135deg, rgba(11,11,11,.82) 0%, rgba(20,20,19,.78) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 4px;
  padding: 44px 40px;
  border: 1px solid rgba(201,169,110,.28);
  box-shadow: 0 24px 60px rgba(0,0,0,.4);
  position: relative;
}
#srv-ecommerce .srv-hero-content::before,
#srv-ecommerce .srv-hero-content::after {
  content: '';
  position: absolute;
  width: 28px; height: 28px;
  pointer-events: none;
}
#srv-ecommerce .srv-hero-content::before {
  top: -1px; left: -1px;
  border-top: 1px solid var(--c-gold);
  border-left: 1px solid var(--c-gold);
}
#srv-ecommerce .srv-hero-content::after {
  bottom: -1px; right: -1px;
  border-bottom: 1px solid var(--c-gold);
  border-right: 1px solid var(--c-gold);
}
/* E-commerce photo card */
.srv-hero-visual--ecom {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.ecom-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(201,169,110,.28);
  box-shadow: 0 18px 50px rgba(0,0,0,.5);
}
.ecom-photo-img {
  position: absolute;
  inset: 0;
  background-image: url('../assets/img/ecom-package.jpg');
  background-size: cover;
  background-position: center;
  filter: grayscale(35%) brightness(.78) sepia(.1) contrast(1.05);
  transition: transform 8s ease-out;
}
.ecom-photo:hover .ecom-photo-img {
  transform: scale(1.06);
}
.ecom-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, transparent 0%, transparent 50%, rgba(11,11,11,.75) 100%);
  pointer-events: none;
  z-index: 1;
}
.ecom-photo::after {
  content: '';
  position: absolute;
  top: 12px; left: 12px;
  width: 22px; height: 22px;
  border-top: 1px solid var(--c-gold);
  border-left: 1px solid var(--c-gold);
  z-index: 2;
}
.ecom-photo-overlay {
  position: absolute;
  bottom: 14px;
  right: 14px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.ecom-photo-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-body);
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--c-noir);
  background: var(--c-gold);
  padding: 4px 10px;
  border-radius: 2px;
}
.ecom-photo-tag::before {
  content: '';
  width: 6px; height: 6px;
  background: #25d366;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(37,211,102,.8);
  animation: ecom-pulse 1.6s ease-in-out infinite;
}
@keyframes ecom-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .5; transform: scale(.85); }
}
.ecom-photo-label {
  font-family: var(--f-display);
  font-size: .85rem;
  font-weight: 400;
  font-style: italic;
  color: var(--c-ivory);
  text-shadow: 0 2px 8px rgba(0,0,0,.8);
}
.srv-hero-visual--ecom .srv-hero-card {
  background: linear-gradient(135deg, rgba(20,20,19,.92) 0%, rgba(11,11,11,.95) 100%);
  border-color: rgba(201,169,110,.22);
  padding: 18px 22px;
  gap: 16px;
}
.srv-hero-visual--ecom .srv-hero-card .srv-hero-card-label {
  color: var(--c-cream);
}
.srv-hero-visual--ecom .srv-hero-card-stat {
  font-size: 1.7rem;
  text-shadow: 0 0 18px rgba(201,169,110,.3);
}
.srv-hero-visual--ecom .srv-hero-card:hover {
  border-color: var(--c-gold);
  box-shadow: 0 14px 40px rgba(0,0,0,.5), 0 0 40px rgba(201,169,110,.18);
}

/* Marketing dashboard — canvas as contained panel */
.srv-hero-visual--mkt {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.mkt-dashboard {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  background: linear-gradient(135deg, rgba(11,11,11,.92) 0%, rgba(20,20,19,.88) 100%);
  border: 1px solid rgba(201,169,110,.32);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 0 40px rgba(201,169,110,.08);
  isolation: isolate;
  display: flex;
  flex-direction: column;
}
/* Stage corners */
.mkt-dashboard-corner {
  position: absolute;
  width: 22px;
  height: 22px;
  pointer-events: none;
  z-index: 4;
}
.mkt-dashboard-corner--tl { top: 0; left: 0; border-top: 1px solid var(--c-gold); border-left: 1px solid var(--c-gold); }
.mkt-dashboard-corner--tr { top: 0; right: 0; border-top: 1px solid var(--c-gold); border-right: 1px solid var(--c-gold); }
.mkt-dashboard-corner--bl { bottom: 0; left: 0; border-bottom: 1px solid var(--c-gold); border-left: 1px solid var(--c-gold); }
.mkt-dashboard-corner--br { bottom: 0; right: 0; border-bottom: 1px solid var(--c-gold); border-right: 1px solid var(--c-gold); }

/* Dashboard header bar */
.mkt-dashboard-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(201,169,110,.18);
  background: linear-gradient(90deg, rgba(201,169,110,.05) 0%, rgba(248,245,240,.02) 50%, rgba(201,169,110,.05) 100%);
  position: relative;
  z-index: 3;
}
.mkt-dashboard-dot {
  width: 7px;
  height: 7px;
  background: #25d366;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(37,211,102,.9);
  animation: ecom-pulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
.mkt-dashboard-title {
  font-family: var(--f-body);
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--c-gold);
  flex: 1;
}
.mkt-dashboard-stamp {
  font-family: var(--f-display);
  font-size: .8rem;
  color: var(--c-cream);
  letter-spacing: .08em;
  opacity: .65;
}

/* Canvas inside dashboard — flush fill via flex */
.mkt-dashboard-canvas {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: block;
  background: transparent;
}

/* Override: socialCanvas is no longer a section background */
#srv-marketing > .srv-bg-canvas,
#srv-marketing .srv-bg-canvas { display: none; }

/* ============================================
   ECOM & IA DASHBOARD — Shared contained-canvas pattern
   ============================================ */
.ecom-dashboard,
.ia-dashboard {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  background: linear-gradient(135deg, rgba(11,11,11,.92) 0%, rgba(20,20,19,.88) 100%);
  border: 1px solid rgba(201,169,110,.32);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 0 40px rgba(201,169,110,.08);
  isolation: isolate;
  display: flex;
  flex-direction: column;
}
.ecom-dashboard-corner,
.ia-dashboard-corner {
  position: absolute;
  width: 22px;
  height: 22px;
  pointer-events: none;
  z-index: 4;
}
.ecom-dashboard-corner--tl,
.ia-dashboard-corner--tl { top: 0; left: 0; border-top: 1px solid var(--c-gold); border-left: 1px solid var(--c-gold); }
.ecom-dashboard-corner--tr,
.ia-dashboard-corner--tr { top: 0; right: 0; border-top: 1px solid var(--c-gold); border-right: 1px solid var(--c-gold); }
.ecom-dashboard-corner--bl,
.ia-dashboard-corner--bl { bottom: 0; left: 0; border-bottom: 1px solid var(--c-gold); border-left: 1px solid var(--c-gold); }
.ecom-dashboard-corner--br,
.ia-dashboard-corner--br { bottom: 0; right: 0; border-bottom: 1px solid var(--c-gold); border-right: 1px solid var(--c-gold); }

.ecom-dashboard-header,
.ia-dashboard-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(201,169,110,.18);
  background: linear-gradient(90deg, rgba(201,169,110,.05) 0%, rgba(248,245,240,.02) 50%, rgba(201,169,110,.05) 100%);
  position: relative;
  z-index: 3;
}
.ecom-dashboard-dot,
.ia-dashboard-dot {
  width: 7px;
  height: 7px;
  background: #25d366;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(37,211,102,.9);
  animation: ecom-pulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
.ecom-dashboard-title,
.ia-dashboard-title {
  font-family: var(--f-body);
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--c-gold);
  flex: 1;
}
.ecom-dashboard-stamp,
.ia-dashboard-stamp {
  font-family: var(--f-display);
  font-size: .8rem;
  color: var(--c-cream);
  letter-spacing: .08em;
  opacity: .65;
}
.ecom-dashboard-canvas,
.ia-dashboard-canvas {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: block;
  background: transparent;
}

/* Override: stockCanvas and nodesCanvas no longer section bgs */
#srv-ecommerce > .srv-bg-canvas,
#srv-ecommerce .srv-bg-canvas,
#srv-ia > .srv-bg-canvas,
#srv-ia .srv-bg-canvas { display: none; }

/* Reset visual--ecom and visual--ia layouts to a single contained dashboard */
.srv-hero-visual--ecom,
.srv-hero-visual--ia {
  display: block;
}

/* IA photo card */
.srv-hero-visual--ia {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.ia-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(201,169,110,.28);
  box-shadow: 0 18px 50px rgba(0,0,0,.5);
}
.ia-photo-img {
  position: absolute;
  inset: 0;
  background-image: url('../assets/img/ai-tech.jpg');
  background-size: cover;
  background-position: center;
  filter: grayscale(40%) brightness(.65) sepia(.15) contrast(1.08);
  transition: transform 8s ease-out, filter 8s ease-out;
}
.ia-photo:hover .ia-photo-img {
  transform: scale(1.06);
}
.ia-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, transparent 0%, transparent 45%, rgba(11,11,11,.8) 100%);
  pointer-events: none;
  z-index: 1;
}
/* Animated scan-line overlay for IA feel */
.ia-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(201,169,110,.06) 49%,
    rgba(201,169,110,.14) 50%,
    rgba(201,169,110,.06) 51%,
    transparent 100%);
  background-size: 100% 220%;
  animation: ia-photo-scan 6s linear infinite;
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: screen;
}
@keyframes ia-photo-scan {
  0% { background-position: 0 -100%; }
  100% { background-position: 0 220%; }
}
/* corner accent */
.ia-photo .ia-photo-corner {
  position: absolute;
  top: 12px; left: 12px;
  width: 22px; height: 22px;
  border-top: 1px solid var(--c-gold);
  border-left: 1px solid var(--c-gold);
  z-index: 3;
  pointer-events: none;
}
.ia-photo-overlay {
  position: absolute;
  bottom: 14px;
  right: 14px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.ia-photo-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-body);
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--c-noir);
  background: var(--c-gold);
  padding: 4px 10px;
  border-radius: 2px;
}
.ia-photo-tag::before {
  content: '';
  width: 6px; height: 6px;
  background: #25d366;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(37,211,102,.8);
  animation: ecom-pulse 1.6s ease-in-out infinite;
}
.ia-photo-label {
  font-family: var(--f-display);
  font-size: .85rem;
  font-weight: 400;
  font-style: italic;
  color: var(--c-ivory);
  text-shadow: 0 2px 8px rgba(0,0,0,.8);
}
.srv-hero-visual--ia .srv-hero-card {
  padding: 18px 22px;
  gap: 16px;
}
.srv-hero-visual--ia .srv-hero-card-stat {
  font-size: 1.7rem;
  text-shadow: 0 0 18px rgba(201,169,110,.3);
}
.srv-hero-visual--ia .srv-hero-card:hover {
  border-color: var(--c-gold);
  box-shadow: 0 14px 40px rgba(0,0,0,.5), 0 0 40px rgba(201,169,110,.18);
}
#srv-ecommerce .srv-hero-content .section-title {
  color: var(--c-ivory);
}
#srv-ecommerce .srv-hero-content .section-desc {
  color: var(--c-cream);
}
#srv-ecommerce .srv-hero-content .section-desc strong {
  color: var(--c-gold-light);
  font-weight: 500;
}
#srv-ecommerce .srv-hero-content .srv-hero-list li {
  color: var(--c-cream);
}
/* srv-ecommerce button — gold outline for proper contrast on dark panel */
#srv-ecommerce .srv-hero-content .btn-outline {
  border-color: var(--c-gold);
  color: var(--c-gold);
}
#srv-ecommerce .srv-hero-content .btn-outline:hover {
  background: var(--c-gold);
  color: var(--c-noir);
}

#srv-ia .srv-hero-content {
  background: linear-gradient(135deg, rgba(11,11,11,.82) 0%, rgba(20,20,19,.78) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 4px;
  padding: 44px 40px;
  border: 1px solid rgba(201,169,110,.28);
  box-shadow: 0 24px 60px rgba(0,0,0,.4);
  position: relative;
}
#srv-ia .srv-hero-content::before,
#srv-ia .srv-hero-content::after {
  content: '';
  position: absolute;
  width: 28px; height: 28px;
  pointer-events: none;
}
#srv-ia .srv-hero-content::before {
  top: -1px; left: -1px;
  border-top: 1px solid var(--c-gold);
  border-left: 1px solid var(--c-gold);
}
#srv-ia .srv-hero-content::after {
  bottom: -1px; right: -1px;
  border-bottom: 1px solid var(--c-gold);
  border-right: 1px solid var(--c-gold);
}
/* Marketing desktop content panel */
#srv-marketing .srv-hero-content {
  background: linear-gradient(135deg, rgba(11,11,11,.78) 0%, rgba(20,20,19,.72) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 4px;
  padding: 44px 40px;
  border: 1px solid rgba(201,169,110,.28);
  box-shadow: 0 24px 60px rgba(0,0,0,.4);
  position: relative;
}
#srv-marketing .srv-hero-content::before,
#srv-marketing .srv-hero-content::after {
  content: '';
  position: absolute;
  width: 28px; height: 28px;
  pointer-events: none;
}
#srv-marketing .srv-hero-content::before {
  top: -1px; right: -1px;
  border-top: 1px solid var(--c-gold);
  border-right: 1px solid var(--c-gold);
}
#srv-marketing .srv-hero-content::after {
  bottom: -1px; left: -1px;
  border-bottom: 1px solid var(--c-gold);
  border-left: 1px solid var(--c-gold);
}
#srv-ia .srv-hero-content .section-title {
  color: var(--c-ivory);
}
#srv-ia .srv-hero-content .section-title em {
  font-style: italic;
  color: var(--c-gold);
}
#srv-ia .srv-hero-content .section-desc,
#srv-ia .srv-hero-content .srv-hero-list li {
  color: var(--c-cream);
}
#srv-ia .srv-hero-content .section-desc strong {
  color: var(--c-gold-light);
  font-weight: 500;
}
.srv-hero-content .section-label {
  color: var(--c-gold);
}
.srv-hero--dark .srv-hero-content .section-desc {
  color: var(--c-cream);
}

/* Feature list */
.srv-hero-list {
  list-style: none;
  padding: 0;
  margin: 32px 0 40px;
}
.srv-hero-list li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 14px;
  font-family: var(--f-body);
  font-size: .92rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--c-text-subtle);
}
.srv-hero--dark .srv-hero-list li {
  color: var(--c-cream);
}
.srv-hero-list li::before {
  content: '◆';
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--c-gold);
  font-size: .55rem;
}

/* Visual side — stat cards (futuristic luxury) */
.srv-hero-visual {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.srv-hero-card {
  position: relative;
  background: linear-gradient(135deg, #ffffff 0%, var(--c-ivory) 100%);
  border: 1px solid rgba(201,169,110,.28);
  border-radius: 4px;
  padding: 26px 28px;
  display: flex;
  align-items: center;
  gap: 22px;
  transition: all .6s var(--ease-luxe);
  overflow: hidden;
  isolation: isolate;
}
/* corner gold accent */
.srv-hero-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 22px; height: 22px;
  border-top: 1px solid var(--c-gold);
  border-left: 1px solid var(--c-gold);
  pointer-events: none;
}
.srv-hero-card::after {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  width: 22px; height: 22px;
  border-bottom: 1px solid var(--c-gold);
  border-right: 1px solid var(--c-gold);
  pointer-events: none;
}
/* subtle scan line overlay */
.srv-hero-card .srv-hero-card-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(201,169,110,.06) 50%, transparent 100%);
  transform: translateX(-100%);
  pointer-events: none;
  z-index: 0;
  transition: transform 1s var(--ease-luxe);
}
.srv-hero-card:hover .srv-hero-card-glow {
  transform: translateX(100%);
}
.srv-hero-card:hover {
  border-color: var(--c-gold);
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(11,11,11,.10), 0 0 30px rgba(201,169,110,.12);
}
.srv-hero-card--dark {
  background: linear-gradient(135deg, var(--c-noir-rich) 0%, var(--c-charcoal) 100%);
  border-color: rgba(201,169,110,.22);
}
.srv-hero-card--dark:hover {
  border-color: var(--c-gold);
  box-shadow: 0 14px 40px rgba(0,0,0,.4), 0 0 40px rgba(201,169,110,.18);
}

.srv-hero-card-icon {
  color: var(--c-gold);
  font-size: .7rem;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  text-shadow: 0 0 12px rgba(201,169,110,.5);
}
.srv-hero-card-stat {
  font-family: var(--f-display);
  font-size: 2rem;
  font-weight: 400;
  color: var(--c-gold);
  min-width: 64px;
  flex-shrink: 0;
  letter-spacing: -.01em;
  line-height: 1;
  position: relative;
  z-index: 1;
  text-shadow: 0 0 20px rgba(201,169,110,.18);
}
.srv-hero-card-label {
  font-family: var(--f-body);
  font-size: .82rem;
  font-weight: 400;
  color: var(--c-text-dark);
  letter-spacing: .04em;
  line-height: 1.4;
  position: relative;
  z-index: 1;
}
.srv-hero-card--dark .srv-hero-card-label {
  color: var(--c-cream);
}

/* ============================================
   CLIENTES & PARCEIROS — Marquee Belts
   ============================================ */
.clients {
  background: var(--c-ivory);
  position: relative;
  overflow: hidden;
  padding: var(--s-section) 0;
}
.clients::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(201,169,110,.06) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 100%, rgba(201,169,110,.04) 0%, transparent 60%);
  pointer-events: none;
}

/* Subtle gold corner accents on light bg */
.clients-corner {
  position: absolute;
  width: 48px;
  height: 48px;
  pointer-events: none;
  z-index: 4;
}
.clients-corner--tl { top: 28px; left: 28px; border-top: 1px solid var(--c-gold); border-left: 1px solid var(--c-gold); }
.clients-corner--tr { top: 28px; right: 28px; border-top: 1px solid var(--c-gold); border-right: 1px solid var(--c-gold); }
.clients-corner--bl { bottom: 28px; left: 28px; border-bottom: 1px solid var(--c-gold); border-left: 1px solid var(--c-gold); }
.clients-corner--br { bottom: 28px; right: 28px; border-bottom: 1px solid var(--c-gold); border-right: 1px solid var(--c-gold); }

/* HUD live badge — light theme variant */
.clients-hud {
  position: absolute;
  top: 100px;
  right: 60px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: rgba(11,11,11,.9);
  border: 1px solid rgba(201,169,110,.5);
  border-radius: 2px;
  z-index: 4;
  font-family: var(--f-body);
  font-size: .58rem;
  font-weight: 400;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--c-cream);
}
.clients-hud strong { color: var(--c-gold); font-weight: 500; }
.clients-hud-dot {
  width: 7px;
  height: 7px;
  background: var(--c-gold);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(201,169,110,.9);
  animation: ecom-pulse 1.6s ease-in-out infinite;
}

.clients-header {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 48px;
  position: relative;
  z-index: 1;
}
.clients .section-label {
  color: var(--c-gold);
  text-shadow: 0 1px 2px rgba(201,169,110,.2);
}
.clients .section-title {
  color: var(--c-noir);
  text-shadow: 0 2px 8px rgba(11,11,11,.06);
}
.clients-title em {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  color: var(--c-gold);
  text-shadow: 0 1px 12px rgba(201,169,110,.3);
}
.clients-header .section-desc { color: var(--c-text-subtle); }

/* Marquee belt */
.clients-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 14px 0;
  margin-bottom: 6px;
}
.clients-marquee:nth-of-type(even) { margin-bottom: 6px; }
/* Edge fade */
.clients-marquee::before,
.clients-marquee::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 120px;
  z-index: 3;
  pointer-events: none;
}
.clients-marquee::before {
  left: 0;
  background: linear-gradient(90deg, var(--c-ivory) 0%, transparent 100%);
}
.clients-marquee::after {
  right: 0;
  background: linear-gradient(270deg, var(--c-ivory) 0%, transparent 100%);
}
.clients-track {
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  animation: clients-scroll-left 60s linear infinite;
}
.clients-marquee[data-dir="right"] .clients-track {
  animation: clients-scroll-right 75s linear infinite;
}
.clients-marquee[data-speed="65"] .clients-track { animation-duration: 65s; }
.clients-marquee[data-speed="75"] .clients-track { animation-duration: 75s; }

.clients-marquee:hover .clients-track {
  animation-play-state: paused;
}

@keyframes clients-scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes clients-scroll-right {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

/* Logo cards — luxe treatment */
.clients-track .client-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 180px;
  height: 90px;
  flex-shrink: 0;
  padding: 18px 26px;
  background: #fff;
  border: 1px solid rgba(11,11,11,.06);
  border-radius: 3px;
  transition: all .5s var(--ease-luxe);
  cursor: pointer;
  position: relative;
}
.clients-track .client-logo:hover {
  border-color: var(--c-gold);
  box-shadow: 0 14px 36px rgba(11,11,11,.1), 0 0 24px rgba(201,169,110,.15);
  transform: translateY(-3px);
}
.clients-track .client-logo img {
  max-width: 100%;
  max-height: 44px;
  width: auto;
  object-fit: contain;
  filter: grayscale(100%) brightness(.85) contrast(1.05);
  opacity: .6;
  transition: filter .5s var(--ease-luxe), opacity .5s var(--ease-luxe), transform .5s var(--ease-luxe);
}
.clients-track .client-logo:hover img {
  filter: grayscale(0%) brightness(1) contrast(1);
  opacity: 1;
  transform: scale(1.06);
}

/* Bottom stats row */
.clients-bottom {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 40px;
  margin-top: 56px;
  padding: 32px 24px;
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(201,169,110,.18);
  border-bottom: 1px solid rgba(201,169,110,.18);
  max-width: 760px;
}
.clients-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
  text-align: center;
}
.clients-stat-num {
  font-family: var(--f-display);
  font-size: clamp(2rem, 3.5vw, 2.6rem);
  font-weight: 400;
  color: var(--c-gold);
  line-height: 1;
  letter-spacing: -.02em;
  text-shadow: 0 0 18px rgba(201,169,110,.2);
}
.clients-stat-label {
  font-family: var(--f-body);
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--c-text-subtle);
}
.clients-stat-divider {
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--c-gold), transparent);
  opacity: .4;
}

/* ============================================
   DIFFERENTIALS — Flip 3D Cards
   ============================================ */
.differentials {
  background: var(--c-noir);
  color: var(--c-ivory);
  border-top: 1px solid rgba(201,169,110,.08);
  border-bottom: 1px solid rgba(201,169,110,.08);
  position: relative;
  overflow: hidden;
}
.differentials::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(201,169,110,.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(201,169,110,.05) 0%, transparent 50%);
  pointer-events: none;
}
/* Subtle moving grid overlay */
.differentials::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(201,169,110,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,169,110,.025) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}

/* Stage gold corners */
.diff-corner-stage {
  position: absolute;
  width: 56px;
  height: 56px;
  pointer-events: none;
  z-index: 4;
}
.diff-corner-stage--tl { top: 28px; left: 28px; border-top: 1px solid var(--c-gold); border-left: 1px solid var(--c-gold); }
.diff-corner-stage--tr { top: 28px; right: 28px; border-top: 1px solid var(--c-gold); border-right: 1px solid var(--c-gold); }
.diff-corner-stage--bl { bottom: 28px; left: 28px; border-bottom: 1px solid var(--c-gold); border-left: 1px solid var(--c-gold); }
.diff-corner-stage--br { bottom: 28px; right: 28px; border-bottom: 1px solid var(--c-gold); border-right: 1px solid var(--c-gold); }

/* HUD live badge */
.diff-hud {
  position: absolute;
  top: 100px;
  right: 60px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: rgba(11,11,11,.55);
  border: 1px solid rgba(201,169,110,.45);
  border-radius: 2px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 4;
  font-family: var(--f-body);
  font-size: .58rem;
  font-weight: 400;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--c-cream);
}
.diff-hud strong { color: var(--c-gold); font-weight: 500; }
.diff-hud-dot {
  width: 7px;
  height: 7px;
  background: var(--c-gold);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(201,169,110,.9);
  animation: ecom-pulse 1.6s ease-in-out infinite;
}

.differentials > .container { position: relative; z-index: 1; }
.differentials-header {
  text-align: center;
  max-width: 660px;
  margin: 0 auto 56px;
}
.differentials-header .section-title { color: var(--c-ivory); }
.differentials-header .section-title em {
  font-style: italic;
  color: var(--c-gold);
  text-shadow: 0 0 30px rgba(201,169,110,.4);
}
.differentials-header .section-desc { color: var(--c-cream); margin: 0 auto; }
.differentials-header .divider { margin: 24px auto; }

.differentials-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  background: transparent;
  perspective: 1400px;
}

/* The card — flip wrapper */
.diff-item {
  position: relative;
  min-height: 320px;
  background: transparent;
  border: none;
  padding: 0;
  perspective: 1400px;
  transition: transform .6s var(--ease-luxe);
}
.diff-inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
  transform-style: preserve-3d;
  transition: transform 1s var(--ease-luxe);
}
/* Flip on hover (desktop) or .flipped class (touch) */
.diff-item:hover .diff-inner,
.diff-item.flipped .diff-inner {
  transform: rotateY(180deg);
}

/* Both faces share base styling */
.diff-face {
  position: absolute;
  inset: 0;
  background: var(--c-noir-rich);
  border: 1px solid rgba(201,169,110,.22);
  border-radius: 4px;
  overflow: hidden;
  isolation: isolate;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.diff-face--back {
  transform: rotateY(180deg);
  background: linear-gradient(135deg, var(--c-noir-rich) 0%, var(--c-charcoal) 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 22px;
}

/* Front face — image bg + vignette */
.diff-face--front {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px 22px 22px;
}
.diff-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: grayscale(60%) brightness(.55) contrast(1.05) sepia(.15);
  opacity: .65;
  transition: all 1.2s var(--ease-luxe);
  z-index: 0;
}
.diff-item:hover .diff-bg { transform: scale(1.06); }
.diff-face--front::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,11,11,.35) 0%, rgba(11,11,11,.85) 70%, var(--c-noir) 100%);
  z-index: 1;
  pointer-events: none;
}

/* Gold corner brackets on both faces */
.diff-face .diff-corner {
  position: absolute;
  width: 16px;
  height: 16px;
  border-color: var(--c-gold);
  border-style: solid;
  border-width: 0;
  z-index: 3;
  pointer-events: none;
  transition: width .5s var(--ease-luxe), height .5s var(--ease-luxe);
}
.diff-face .diff-corner.tl { top: 10px; left: 10px; border-top-width: 1px; border-left-width: 1px; }
.diff-face .diff-corner.tr { top: 10px; right: 10px; border-top-width: 1px; border-right-width: 1px; }
.diff-face .diff-corner.bl { bottom: 10px; left: 10px; border-bottom-width: 1px; border-left-width: 1px; }
.diff-face .diff-corner.br { bottom: 10px; right: 10px; border-bottom-width: 1px; border-right-width: 1px; }
.diff-item:hover .diff-face--front .diff-corner { width: 22px; height: 22px; }

/* Front content */
.diff-content {
  position: relative;
  z-index: 2;
}
.diff-icon {
  position: absolute;
  top: -180px;
  right: 0;
  font-family: var(--f-display);
  font-size: 2rem;
  font-weight: 300;
  color: var(--c-gold);
  letter-spacing: -.01em;
  line-height: 1;
  text-shadow: 0 0 24px rgba(201,169,110,.5);
}
.diff-content h4 {
  font-family: var(--f-display);
  font-size: 1.3rem;
  font-weight: 500;
  margin-bottom: 12px;
  color: var(--c-ivory);
  line-height: 1.15;
  letter-spacing: -.01em;
}
.diff-hint {
  display: inline-flex;
  align-items: center;
  font-family: var(--f-body);
  font-size: .56rem;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-top: 4px;
  opacity: .75;
  transition: opacity .4s, transform .4s;
}
.diff-item:hover .diff-hint { opacity: 0; transform: translateX(-6px); }

/* Gold tag */
.diff-tag {
  display: inline-block;
  font-family: var(--f-body);
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--c-gold);
  padding: 4px 10px;
  border: 1px solid rgba(201,169,110,.4);
  border-radius: 2px;
  margin-bottom: 14px;
  background: rgba(201,169,110,.06);
  align-self: flex-start;
}

/* Back face content */
.diff-back-content {
  position: relative;
  z-index: 2;
}
.diff-back-content h4 {
  font-family: var(--f-display);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--c-ivory);
  line-height: 1.2;
  margin-bottom: 8px;
  letter-spacing: -.01em;
}
.diff-back-content p {
  font-size: .78rem;
  color: var(--c-cream);
  line-height: 1.5;
  font-weight: 300;
  margin-bottom: 14px;
  opacity: .85;
}
.diff-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
}
.diff-bullets li {
  font-family: var(--f-body);
  font-size: .72rem;
  color: var(--c-cream);
  line-height: 1.45;
  padding: 5px 0 5px 16px;
  position: relative;
  font-weight: 300;
  letter-spacing: .01em;
}
.diff-bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 1px;
  background: var(--c-gold);
}
.diff-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-body);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-gold);
  padding: 9px 16px;
  border: 1px solid var(--c-gold);
  border-radius: 2px;
  transition: all .4s var(--ease-luxe);
  align-self: flex-start;
}
.diff-cta em {
  font-style: normal;
  transition: transform .3s var(--ease-luxe);
}
.diff-cta:hover {
  background: var(--c-gold);
  color: var(--c-noir);
}
.diff-cta:hover em { transform: translateX(3px); }

/* Subtle hover lift on whole card */
.diff-item:hover {
  transform: translateY(-4px);
}

/* ============================================
   POSITIONING / TIMELINE — Magazine Spread
   ============================================ */
.positioning {
  background: var(--c-noir);
  color: var(--c-ivory);
  text-align: center;
  overflow: hidden;
  position: relative;
}
.positioning::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 800px; height: 800px;
  background: radial-gradient(circle, var(--c-gold-glow) 0%, transparent 60%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}
/* Subtle grid pattern */
.positioning::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(201,169,110,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,169,110,.02) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  z-index: 0;
}

/* Stage gold corners */
.positioning-corner {
  position: absolute;
  width: 56px;
  height: 56px;
  pointer-events: none;
  z-index: 4;
}
.positioning-corner--tl { top: 28px; left: 28px; border-top: 1px solid var(--c-gold); border-left: 1px solid var(--c-gold); }
.positioning-corner--tr { top: 28px; right: 28px; border-top: 1px solid var(--c-gold); border-right: 1px solid var(--c-gold); }
.positioning-corner--bl { bottom: 28px; left: 28px; border-bottom: 1px solid var(--c-gold); border-left: 1px solid var(--c-gold); }
.positioning-corner--br { bottom: 28px; right: 28px; border-bottom: 1px solid var(--c-gold); border-right: 1px solid var(--c-gold); }

/* HUD live badge */
.positioning-hud {
  position: absolute;
  top: 100px;
  left: 60px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: rgba(11,11,11,.55);
  border: 1px solid rgba(201,169,110,.45);
  border-radius: 2px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 4;
  font-family: var(--f-body);
  font-size: .58rem;
  font-weight: 400;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--c-cream);
}
.positioning-hud strong { color: var(--c-gold); font-weight: 500; }
.positioning-hud-dot {
  width: 7px;
  height: 7px;
  background: var(--c-gold);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(201,169,110,.9);
  animation: ecom-pulse 1.6s ease-in-out infinite;
}

.positioning > .container { position: relative; z-index: 1; }
.positioning-content {
  position: relative;
  z-index: 1;
  max-width: 700px;
  margin: 0 auto;
}
.positioning-content .section-desc {
  color: var(--c-cream);
  margin: 0 auto;
}
.positioning-content .section-title em {
  font-style: italic;
  color: var(--c-gold);
  text-shadow: 0 0 30px rgba(201,169,110,.4);
}
.positioning-content .divider { margin: 24px auto; }

/* Magazine timeline — vertical alternating chapters */
.timeline-magazine {
  position: relative;
  max-width: 1100px;
  margin: 80px auto 0;
  padding: 40px 0;
}
/* Central vertical gold line */
.timeline-magazine::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(201,169,110,.4) 8%,
    rgba(201,169,110,.4) 92%,
    transparent 100%);
  z-index: 0;
}
/* Animated progress line */
.timeline-magazine::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 0;
  background: linear-gradient(180deg, var(--c-gold), var(--c-gold-light));
  box-shadow: 0 0 14px rgba(201,169,110,.7);
  transition: height 1.6s var(--ease-luxe);
  z-index: 0;
}
.timeline-magazine.tl-progress-1::after { height: 20%; }
.timeline-magazine.tl-progress-2::after { height: 40%; }
.timeline-magazine.tl-progress-3::after { height: 60%; }
.timeline-magazine.tl-progress-4::after { height: 80%; }
.timeline-magazine.tl-progress-5::after { height: 100%; }

.tl-chapter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  margin-bottom: 100px;
  position: relative;
  z-index: 1;
  opacity: 0;
  transition: opacity .9s var(--ease-luxe), transform .9s var(--ease-luxe);
}
.tl-chapter:last-child { margin-bottom: 0; }
.tl-chapter--left { transform: translateX(-30px); }
.tl-chapter--right { transform: translateX(30px); }
.tl-chapter.revealed { opacity: 1; transform: translateX(0); }

/* Reverse content order on right chapters */
.tl-chapter--right .tl-photo { order: 2; }
.tl-chapter--right .tl-text { order: 1; text-align: right; align-items: flex-end; }

/* Connecting dot at center */
.tl-chapter::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  background: var(--c-noir);
  border: 1px solid rgba(201,169,110,.5);
  border-radius: 50%;
  z-index: 2;
  transition: all .8s var(--ease-luxe);
}
.tl-chapter.revealed::before {
  background: var(--c-gold);
  border-color: var(--c-gold-light);
  box-shadow: 0 0 24px rgba(201,169,110,.7), 0 0 48px rgba(201,169,110,.3);
  transform: translate(-50%, -50%) scale(1.2);
}
.tl-chapter.revealed::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  border: 1px solid rgba(201,169,110,.4);
  border-radius: 50%;
  animation: timeline-pulse 2.6s ease-out infinite;
  z-index: 2;
}
@keyframes timeline-pulse {
  0% { transform: translate(-50%, -50%) scale(.6); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; }
}

/* Photo card */
.tl-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid rgba(201,169,110,.28);
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
  isolation: isolate;
}
.tl-photo-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: grayscale(50%) brightness(.75) contrast(1.08) sepia(.12);
  transition: transform 1.6s var(--ease-luxe), filter 1.2s var(--ease-luxe);
  z-index: 0;
}
.tl-chapter:hover .tl-photo-img {
  transform: scale(1.06);
  filter: grayscale(20%) brightness(.85) contrast(1.05) sepia(.08);
}
.tl-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 0%, transparent 55%, rgba(11,11,11,.7) 100%);
  pointer-events: none;
  z-index: 1;
}
.tl-photo::after {
  content: '';
  position: absolute;
  top: 12px; left: 12px;
  width: 22px; height: 22px;
  border-top: 1px solid var(--c-gold);
  border-left: 1px solid var(--c-gold);
  z-index: 2;
}
.tl-chapter--right .tl-photo::after {
  left: auto; right: 12px;
  border-left: none;
  border-right: 1px solid var(--c-gold);
}
.tl-photo-tag {
  position: absolute;
  bottom: 14px;
  right: 14px;
  font-family: var(--f-body);
  font-size: .56rem;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--c-noir);
  background: var(--c-gold);
  padding: 4px 12px;
  border-radius: 2px;
  z-index: 3;
}
.tl-chapter--right .tl-photo-tag {
  right: auto; left: 14px;
}

/* Text side */
.tl-text {
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.tl-year {
  font-family: var(--f-display);
  font-size: clamp(4.6rem, 8vw, 7rem);
  font-weight: 300;
  color: var(--c-gold);
  letter-spacing: -.03em;
  line-height: 1;
  text-shadow: 0 0 40px rgba(201,169,110,.35);
  transition: text-shadow .8s var(--ease-luxe);
}
.tl-chapter.revealed .tl-year {
  text-shadow: 0 0 60px rgba(201,169,110,.55);
}
.tl-label {
  display: inline-block;
  font-family: var(--f-body);
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--c-gold);
  padding: 5px 12px;
  border: 1px solid rgba(201,169,110,.35);
  border-radius: 2px;
  background: rgba(201,169,110,.06);
  margin-top: 10px;
}
.tl-text h3 {
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--c-ivory);
  letter-spacing: -.01em;
  margin-top: 14px;
  margin-bottom: 14px;
}
.tl-text h3 em {
  font-style: italic;
  color: var(--c-gold);
}
.tl-text p {
  font-family: var(--f-body);
  font-size: .92rem;
  color: var(--c-cream);
  line-height: 1.7;
  font-weight: 300;
  max-width: 460px;
  margin-bottom: 24px;
}
.tl-chapter--right .tl-text p { margin-left: auto; }

/* Stat block */
.tl-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  padding: 14px 22px;
  background: linear-gradient(135deg, rgba(20,20,19,.6) 0%, rgba(11,11,11,.5) 100%);
  border: 1px solid rgba(201,169,110,.28);
  border-radius: 4px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  position: relative;
}
.tl-stat::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 12px; height: 12px;
  border-top: 1px solid var(--c-gold);
  border-left: 1px solid var(--c-gold);
}
.tl-stat::after {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  width: 12px; height: 12px;
  border-bottom: 1px solid var(--c-gold);
  border-right: 1px solid var(--c-gold);
}
.tl-stat-num {
  font-family: var(--f-display);
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--c-gold);
  letter-spacing: -.01em;
  line-height: 1;
  text-shadow: 0 0 18px rgba(201,169,110,.3);
}
.tl-stat-label {
  font-family: var(--f-body);
  font-size: .64rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-cream);
  line-height: 1.4;
  max-width: 180px;
}

/* Current chapter glow */
.tl-chapter--current .tl-photo {
  border-color: var(--c-gold);
  box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 0 50px rgba(201,169,110,.2);
}
.tl-chapter--current .tl-year {
  text-shadow: 0 0 50px rgba(201,169,110,.6);
}

/* Closing line */
.tl-closing {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 80px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.tl-closing-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,169,110,.5), transparent);
}
.tl-closing-text {
  font-family: var(--f-body);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--c-cream);
  white-space: nowrap;
}
.tl-closing-text em {
  font-style: italic;
  color: var(--c-gold);
  font-family: var(--f-display);
  font-size: .9rem;
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: none;
  text-shadow: 0 0 12px rgba(201,169,110,.4);
}

/* ============================================
   CASES — Tilt 3D + Filter (Dark luxe)
   ============================================ */
.cases {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(201,169,110,.08) 0%, transparent 50%),
    linear-gradient(180deg, #0a0a0a 0%, #14130f 50%, #0b0b0b 100%);
  color: var(--c-ivory);
  position: relative;
  overflow: hidden;
}
.cases-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 80% 20%, rgba(201,169,110,.08) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 80%, rgba(201,169,110,.06) 0%, transparent 50%);
  pointer-events: none;
}
/* Subtle grid pattern */
.cases::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(201,169,110,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,169,110,.025) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 85%);
  z-index: 0;
}
.cases > .container { position: relative; z-index: 1; }
.cases .section-title { color: var(--c-ivory); }
.cases-header .section-desc { color: var(--c-cream); }
/* Filter pills — dark variant */
.cases-filter {
  border-color: rgba(248,245,240,.15);
  color: var(--c-cream);
}
.cases-filter:hover {
  border-color: var(--c-gold);
  color: var(--c-gold);
}
.cases-filter.active {
  border-color: var(--c-gold);
  color: var(--c-noir);
}
.cases-filter::before {
  background: linear-gradient(135deg, var(--c-gold) 0%, var(--c-gold-light) 100%);
}
.cases-filter-count {
  background: rgba(201,169,110,.18);
  border-color: rgba(201,169,110,.35);
  color: var(--c-gold);
}
.cases-filter.active .cases-filter-count {
  background: rgba(11,11,11,.25);
  border-color: rgba(11,11,11,.3);
  color: var(--c-noir);
}
/* Sub-heading dark */
.cases-subhead-line {
  background: linear-gradient(90deg, transparent, rgba(248,245,240,.18), transparent);
}
/* Featured nav dark variant */
.cases-featured-nav {
  border-color: rgba(248,245,240,.18);
  color: var(--c-cream);
}
.cases-featured-dot { background: rgba(248,245,240,.15); }
.cases-featured-counter { color: var(--c-cream); }
/* HUD live badge */
.cases-hud {
  position: absolute;
  top: 100px;
  left: 60px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: rgba(11,11,11,.9);
  border: 1px solid rgba(201,169,110,.5);
  border-radius: 2px;
  z-index: 4;
  font-family: var(--f-body);
  font-size: .58rem;
  font-weight: 400;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--c-cream);
}
.cases-hud strong { color: var(--c-gold); font-weight: 500; }
.cases-hud-dot {
  width: 7px;
  height: 7px;
  background: var(--c-gold);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(201,169,110,.9);
  animation: ecom-pulse 1.6s ease-in-out infinite;
}
.cases-header {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 48px;
  position: relative;
  z-index: 1;
}

/* ----- Featured carousel ----- */
.cases-featured {
  position: relative;
  margin: 0 auto 80px;
  max-width: 1180px;
}
.cases-featured-stage {
  position: relative;
  background: linear-gradient(135deg, var(--c-noir-rich) 0%, var(--c-charcoal) 100%);
  border: 1px solid rgba(201,169,110,.32);
  border-radius: 4px;
  overflow: hidden;
  min-height: 480px;
  box-shadow: 0 36px 90px rgba(0,0,0,.45), 0 0 60px rgba(201,169,110,.08);
}
.cases-featured-corner {
  position: absolute;
  width: 36px;
  height: 36px;
  pointer-events: none;
  z-index: 5;
}
.cases-featured-corner--tl { top: 0; left: 0; border-top: 1px solid var(--c-gold); border-left: 1px solid var(--c-gold); }
.cases-featured-corner--tr { top: 0; right: 0; border-top: 1px solid var(--c-gold); border-right: 1px solid var(--c-gold); }
.cases-featured-corner--bl { bottom: 0; left: 0; border-bottom: 1px solid var(--c-gold); border-left: 1px solid var(--c-gold); }
.cases-featured-corner--br { bottom: 0; right: 0; border-bottom: 1px solid var(--c-gold); border-right: 1px solid var(--c-gold); }

.cases-slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 0;
  align-items: stretch;
  opacity: 0;
  transform: translateX(40px);
  transition: opacity .9s var(--ease-luxe), transform .9s var(--ease-luxe);
  pointer-events: none;
}
.cases-slide.active {
  position: relative;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
.cases-slide:not(.active) {
  position: absolute;
}

/* Visual side */
.cases-slide-visual {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.cases-slide-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: grayscale(35%) brightness(.78) sepia(.1) contrast(1.05);
  transform: scale(1.02);
  transition: transform 8s var(--ease-luxe);
  z-index: 0;
}
.cases-slide.active .cases-slide-img {
  transform: scale(1.08);
}
.cases-slide-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 30%, rgba(11,11,11,.75) 100%);
  pointer-events: none;
  z-index: 1;
}
.cases-slide-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(201,169,110,.08) 49%,
    rgba(201,169,110,.16) 50%,
    rgba(201,169,110,.08) 51%,
    transparent 100%);
  background-size: 100% 220%;
  animation: ia-photo-scan 6s linear infinite;
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: screen;
  opacity: .6;
}
.cases-slide-tag {
  position: absolute;
  top: 24px; left: 24px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--c-gold);
  color: var(--c-noir);
  font-family: var(--f-body);
  font-size: .56rem;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  border-radius: 2px;
  z-index: 3;
}
.cases-slide-tag::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--c-noir);
  border-radius: 50%;
  animation: ecom-pulse 1.6s ease-in-out infinite;
}

/* Content side */
.cases-slide-content {
  padding: 56px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  color: var(--c-ivory);
  background: linear-gradient(135deg, rgba(11,11,11,.55) 0%, rgba(20,20,19,.65) 100%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.cases-slide-num {
  font-family: var(--f-display);
  font-size: 3rem;
  font-weight: 300;
  color: transparent;
  -webkit-text-stroke: 1px rgba(201,169,110,.55);
  letter-spacing: -.02em;
  line-height: 1;
  display: block;
  margin-bottom: 8px;
}
.cases-slide-cat {
  display: inline-block;
  font-family: var(--f-body);
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--c-gold);
  padding: 4px 12px;
  border: 1px solid rgba(201,169,110,.4);
  border-radius: 2px;
  background: rgba(201,169,110,.06);
  margin-bottom: 16px;
  align-self: flex-start;
}
.cases-slide-title {
  font-family: var(--f-display);
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -.01em;
  margin-bottom: 18px;
  color: var(--c-ivory);
}
.cases-slide-title em {
  font-style: italic;
  color: var(--c-gold);
  text-shadow: 0 0 24px rgba(201,169,110,.35);
}
.cases-slide-desc {
  font-family: var(--f-body);
  font-size: .9rem;
  color: var(--c-cream);
  line-height: 1.65;
  font-weight: 300;
  margin-bottom: 26px;
  max-width: 500px;
}

/* Metrics row */
.cases-slide-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
.cases-metric {
  position: relative;
  padding: 14px 14px 12px;
  background: rgba(11,11,11,.55);
  border: 1px solid rgba(201,169,110,.22);
  border-radius: 4px;
  text-align: left;
}
.cases-metric::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 10px; height: 10px;
  border-top: 1px solid var(--c-gold);
  border-left: 1px solid var(--c-gold);
}
.cases-metric::after {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  width: 10px; height: 10px;
  border-bottom: 1px solid var(--c-gold);
  border-right: 1px solid var(--c-gold);
}
.cases-metric-num {
  font-family: var(--f-display);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--c-gold);
  letter-spacing: -.01em;
  line-height: 1;
  display: block;
  text-shadow: 0 0 18px rgba(201,169,110,.3);
}
.cases-metric-label {
  display: block;
  margin-top: 6px;
  font-family: var(--f-body);
  font-size: .56rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-cream);
  line-height: 1.3;
  opacity: .8;
}

/* Stack list */
.cases-slide-stack {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 26px;
  font-family: var(--f-body);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-cream);
  font-weight: 400;
}
.cases-stack-label {
  color: var(--c-gold);
  font-weight: 500;
  letter-spacing: .26em;
  margin-right: 10px;
}
.cases-slide-stack > span:nth-child(2n+1) { color: rgba(201,169,110,.4); }

.cases-slide-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  align-self: flex-start;
  padding: 14px 26px;
  background: var(--c-gold);
  color: var(--c-noir);
  font-family: var(--f-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  border-radius: 2px;
  text-decoration: none;
  transition: all .4s var(--ease-luxe);
  box-shadow: 0 8px 24px rgba(201,169,110,.25);
}
.cases-slide-cta:hover {
  background: var(--c-gold-light);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(201,169,110,.4);
}
.cases-slide-arrow {
  transition: transform .3s var(--ease-luxe);
}
.cases-slide-cta:hover .cases-slide-arrow { transform: translateX(4px); }

/* Featured controls */
.cases-featured-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-top: 26px;
  font-family: var(--f-body);
}
.cases-featured-nav {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(11,11,11,.18);
  background: transparent;
  color: var(--c-text-subtle);
  font-size: 1rem;
  border-radius: 50%;
  cursor: pointer;
  transition: all .4s var(--ease-luxe);
}
.cases-featured-nav:hover {
  border-color: var(--c-gold);
  background: var(--c-gold);
  color: var(--c-noir);
}
.cases-featured-dots {
  display: flex;
  gap: 12px;
  align-items: center;
}
.cases-featured-dot {
  width: 26px;
  height: 2px;
  background: rgba(11,11,11,.2);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all .5s var(--ease-luxe);
}
.cases-featured-dot.active {
  background: var(--c-gold);
  width: 52px;
  box-shadow: 0 0 10px rgba(201,169,110,.5);
}
.cases-featured-counter {
  font-family: var(--f-display);
  font-size: .92rem;
  color: var(--c-text-subtle);
  letter-spacing: .1em;
  font-weight: 400;
}
.cases-featured-counter .cases-featured-now { color: var(--c-gold); }

/* Sub-heading between featured and grid */
.cases-subhead {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin: 0 auto 32px;
  max-width: 420px;
}
.cases-subhead-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(11,11,11,.18), transparent);
}
.cases-subhead-text {
  font-family: var(--f-body);
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--c-gold);
  white-space: nowrap;
}

/* Mini metrics on small cards */
.case-mini-metrics {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 10px;
  margin-bottom: 6px;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity .5s var(--ease-luxe) .1s, max-height .6s var(--ease-luxe) .1s;
}
.case-item:hover .case-mini-metrics {
  opacity: 1;
  max-height: 40px;
}
@media (hover: none) {
  .case-mini-metrics { opacity: 1; max-height: 40px; }
}
.case-mini-num {
  font-family: var(--f-display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--c-gold);
  letter-spacing: -.01em;
  line-height: 1;
}
.case-mini-label {
  font-family: var(--f-body);
  font-size: .56rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-cream);
}

/* Closing CTA strip */
.cases-closing {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 56px;
  padding: 26px 32px;
  background: linear-gradient(135deg, var(--c-noir) 0%, var(--c-charcoal) 100%);
  border: 1px solid rgba(201,169,110,.3);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
.cases-closing::before,
.cases-closing::after {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  pointer-events: none;
}
.cases-closing::before { top: 0; left: 0; border-top: 1px solid var(--c-gold); border-left: 1px solid var(--c-gold); }
.cases-closing::after { bottom: 0; right: 0; border-bottom: 1px solid var(--c-gold); border-right: 1px solid var(--c-gold); }
.cases-closing-text {
  font-family: var(--f-display);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 400;
  color: var(--c-ivory);
  letter-spacing: -.01em;
}
.cases-closing-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  background: transparent;
  color: var(--c-gold);
  border: 1px solid var(--c-gold);
  font-family: var(--f-body);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  white-space: nowrap;
  transition: all .4s var(--ease-luxe);
}
.cases-closing-cta:hover {
  background: var(--c-gold);
  color: var(--c-noir);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(201,169,110,.3);
}
.cases-closing-cta .arrow {
  font-style: normal;
  transition: transform .3s var(--ease-luxe);
}
.cases-closing-cta:hover .arrow { transform: translateX(4px); }
.cases-header .divider { margin: 24px auto; }
.cases-header .section-title em {
  font-family: var(--f-display);
  font-style: italic;
  color: var(--c-gold);
}

/* Filter pills */
.cases-filters {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 32px;
}
.cases-filter {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  background: transparent;
  border: 1px solid rgba(11,11,11,.12);
  border-radius: 30px;
  font-family: var(--f-body);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-text-subtle);
  cursor: pointer;
  transition: all .5s var(--ease-luxe);
  position: relative;
  overflow: hidden;
}
.cases-filter::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--c-noir), var(--c-charcoal));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease-luxe);
  z-index: 0;
}
.cases-filter > * { position: relative; z-index: 1; }
.cases-filter:hover {
  border-color: var(--c-gold);
  color: var(--c-gold);
}
.cases-filter.active {
  border-color: var(--c-noir);
  color: var(--c-ivory);
}
.cases-filter.active::before {
  transform: scaleX(1);
}
.cases-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  background: rgba(201,169,110,.15);
  border: 1px solid rgba(201,169,110,.3);
  border-radius: 9px;
  font-size: .55rem;
  color: var(--c-gold);
  font-weight: 500;
}
.cases-filter.active .cases-filter-count {
  background: rgba(201,169,110,.25);
  color: var(--c-gold-light);
}

/* Grid */
.cases-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  perspective: 1200px;
}
.case-item {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid rgba(11,11,11,.06);
  cursor: pointer;
  isolation: isolate;
  transition: opacity .5s var(--ease-luxe), transform .5s var(--ease-luxe);
  transform-style: preserve-3d;
  will-change: transform;
  background: var(--c-noir);
}
/* Filtered-out */
.case-item.case-hidden {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  width: 0; height: 0;
  margin: 0;
  border: 0;
}
/* Tilt is driven by JS via CSS vars (--rx, --ry, --tx, --ty) */
.case-item[data-tilt] {
  transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
}
.case-item[data-tilt]:hover {
  box-shadow: 0 30px 80px rgba(11,11,11,.25), 0 0 60px rgba(201,169,110,.15);
}
.case-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: grayscale(50%) brightness(.85) sepia(.05);
  transition: filter 1s var(--ease-luxe), transform 1.2s var(--ease-luxe);
  z-index: 0;
}
.case-item:hover .case-bg {
  filter: grayscale(0%) brightness(.95);
  transform: scale(1.1) translate(var(--tx, 0), var(--ty, 0));
}
/* Shine layer that follows mouse */
.case-shine {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(circle 240px at var(--mx, 50%) var(--my, 50%),
    rgba(201,169,110,.22) 0%,
    rgba(201,169,110,.05) 30%,
    transparent 60%);
  opacity: 0;
  transition: opacity .5s var(--ease-luxe);
  mix-blend-mode: screen;
}
.case-item:hover .case-shine { opacity: 1; }

/* Bottom vignette */
.case-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(11,11,11,.2) 0%,
    transparent 30%,
    rgba(11,11,11,.6) 65%,
    rgba(11,11,11,.95) 100%);
  z-index: 1;
  pointer-events: none;
}
/* 4 gold corners (start hidden, animate on hover) */
.case-corner {
  position: absolute;
  width: 0; height: 0;
  pointer-events: none;
  z-index: 3;
  transition: width .6s var(--ease-luxe), height .6s var(--ease-luxe), opacity .5s;
  opacity: 0;
}
.case-corner--tl { top: 12px; left: 12px; border-top: 1px solid var(--c-gold); border-left: 1px solid var(--c-gold); }
.case-corner--tr { top: 12px; right: 12px; border-top: 1px solid var(--c-gold); border-right: 1px solid var(--c-gold); }
.case-corner--bl { bottom: 12px; left: 12px; border-bottom: 1px solid var(--c-gold); border-left: 1px solid var(--c-gold); }
.case-corner--br { bottom: 12px; right: 12px; border-bottom: 1px solid var(--c-gold); border-right: 1px solid var(--c-gold); }
.case-item:hover .case-corner { opacity: 1; width: 28px; height: 28px; }

.case-content {
  position: absolute;
  inset: auto 0 0 0;
  padding: 24px 22px 22px;
  z-index: 2;
  color: var(--c-ivory);
  transform: translateZ(40px);
}
.case-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.case-tag {
  display: inline-block;
  font-family: var(--f-body);
  font-size: .56rem;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--c-gold);
  padding: 4px 10px;
  border: 1px solid rgba(201,169,110,.5);
  border-radius: 2px;
  background: rgba(11,11,11,.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.case-num {
  font-family: var(--f-display);
  font-size: 1.5rem;
  font-weight: 300;
  color: transparent;
  -webkit-text-stroke: 1px rgba(201,169,110,.6);
  letter-spacing: -.02em;
  line-height: 1;
}
.case-title {
  font-family: var(--f-display);
  font-size: 1.4rem;
  font-weight: 500;
  margin-bottom: 8px;
  color: var(--c-ivory);
  letter-spacing: -.01em;
  line-height: 1.2;
  transform: translateY(8px);
  transition: transform .6s var(--ease-luxe);
}
.case-title em {
  font-style: italic;
  color: var(--c-gold);
  font-weight: 400;
}
.case-item:hover .case-title { transform: translateY(0); }
.case-desc {
  font-size: .74rem;
  color: var(--c-cream);
  line-height: 1.55;
  font-weight: 300;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transform: translateY(8px);
  transition: opacity .5s var(--ease-luxe), max-height .6s var(--ease-luxe), transform .5s var(--ease-luxe);
}
.case-item:hover .case-desc {
  opacity: 1;
  max-height: 100px;
  transform: translateY(0);
}
/* Tech stack chips reveal */
.case-stack {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
  font-family: var(--f-body);
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-gold-light);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity .5s var(--ease-luxe) .1s, max-height .6s var(--ease-luxe) .1s;
}
.case-stack > span:not(:nth-child(2n)) { color: var(--c-cream); font-weight: 400; }
.case-item:hover .case-stack {
  opacity: 1;
  max-height: 60px;
}
@media (hover: none) {
  .case-desc, .case-stack {
    opacity: 1;
    max-height: 100px;
    transform: translateY(0);
  }
  .case-corner { opacity: 1; width: 18px; height: 18px; }
}
.case-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-family: var(--f-body);
  font-size: .64rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-gold);
  font-weight: 600;
  position: relative;
  padding-left: 22px;
}
.case-meta::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 1px;
  background: var(--c-gold);
  transition: width .4s var(--ease-luxe);
}
.case-item:hover .case-meta::before { width: 22px; }
.case-meta-arrow {
  font-style: normal;
  transition: transform .3s var(--ease-luxe);
}
.case-item:hover .case-meta-arrow { transform: translateX(4px); }

/* ============================================
   CTA FINAL — Portal Dourado Cinematográfico
   ============================================ */
.cta-final {
  background:
    radial-gradient(ellipse at center, #14130f 0%, #0a0a0a 70%, #050505 100%);
  color: var(--c-ivory);
  text-align: center;
  position: relative;
  overflow: hidden;
  padding: clamp(120px, 18vw, 220px) 0;
}
/* Canvas with rays + particles */
.cta-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* Aurora gradient layers — slow drift */
.cta-aurora {
  position: absolute;
  inset: -50%;
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
  mix-blend-mode: screen;
  opacity: .8;
}
.cta-aurora--1 {
  background:
    radial-gradient(ellipse 50% 40% at 50% 50%,
      rgba(201,169,110,.22) 0%,
      rgba(201,169,110,.06) 40%,
      transparent 70%);
  animation: cta-aurora-drift 22s ease-in-out infinite;
}
.cta-aurora--2 {
  background:
    radial-gradient(ellipse 40% 60% at 60% 40%,
      rgba(221,192,138,.12) 0%,
      rgba(221,192,138,.04) 50%,
      transparent 75%);
  animation: cta-aurora-drift 28s ease-in-out infinite reverse;
}
@keyframes cta-aurora-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(-3%, 2%) scale(1.05); }
  50% { transform: translate(2%, -3%) scale(.95); }
  75% { transform: translate(-2%, -2%) scale(1.08); }
}

/* Stage gold corners */
.cta-corner {
  position: absolute;
  width: 56px;
  height: 56px;
  pointer-events: none;
  z-index: 4;
}
.cta-corner--tl { top: 28px; left: 28px; border-top: 1px solid var(--c-gold); border-left: 1px solid var(--c-gold); }
.cta-corner--tr { top: 28px; right: 28px; border-top: 1px solid var(--c-gold); border-right: 1px solid var(--c-gold); }
.cta-corner--bl { bottom: 28px; left: 28px; border-bottom: 1px solid var(--c-gold); border-left: 1px solid var(--c-gold); }
.cta-corner--br { bottom: 28px; right: 28px; border-bottom: 1px solid var(--c-gold); border-right: 1px solid var(--c-gold); }

/* HUD live badge */
.cta-hud {
  position: absolute;
  top: 90px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  background: rgba(11,11,11,.7);
  border: 1px solid rgba(201,169,110,.5);
  border-radius: 2px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 4;
  font-family: var(--f-body);
  font-size: .58rem;
  font-weight: 400;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--c-cream);
}
.cta-hud strong { color: var(--c-gold); font-weight: 500; }
.cta-hud-dot {
  width: 7px;
  height: 7px;
  background: #25d366;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(37,211,102,.9);
  animation: ecom-pulse 1.6s ease-in-out infinite;
}

.cta-final > .container {
  position: relative;
  z-index: 2;
}
.cta-final-content {
  max-width: 760px;
  margin: 0 auto;
  position: relative;
}
.cta-final .section-label {
  color: var(--c-gold);
  text-shadow: 0 0 18px rgba(201,169,110,.4);
}
.cta-final .divider { margin: 24px auto; background: var(--c-gold); }

/* Headline with letter reveal */
.cta-title {
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--c-ivory);
  margin: 0 auto 32px;
  max-width: 720px;
  text-shadow: 0 0 40px rgba(0,0,0,.6);
}
.cta-title em {
  font-style: italic;
  color: var(--c-gold);
  font-weight: 400;
  text-shadow: 0 0 40px rgba(201,169,110,.5);
}
/* Each letter span injected by JS (visible class fades in) */
.cta-title .cta-letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) scale(.92);
  transition: opacity .8s var(--ease-luxe), transform .8s var(--ease-luxe);
}
.cta-title .cta-letter.is-space { width: .25em; }
.cta-title.lit .cta-letter {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.cta-final .section-desc {
  margin: 0 auto 56px;
  color: var(--c-cream);
  max-width: 600px;
  font-size: clamp(.95rem, 1.2vw, 1.05rem);
}
.cta-final .section-desc strong {
  color: var(--c-gold-light);
  font-weight: 500;
}

/* Portal container — pulse rings + button + badge */
.cta-portal {
  position: relative;
  display: inline-block;
  padding: 80px 40px;
  isolation: isolate;
}
.cta-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  border: 1px solid rgba(201,169,110,.4);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  z-index: 0;
}
.cta-ring--1 { animation: cta-ring-pulse 3.6s ease-out infinite; }
.cta-ring--2 { animation: cta-ring-pulse 3.6s ease-out .9s infinite; }
.cta-ring--3 { animation: cta-ring-pulse 3.6s ease-out 1.8s infinite; }
.cta-ring--4 { animation: cta-ring-pulse 3.6s ease-out 2.7s infinite; }
@keyframes cta-ring-pulse {
  0% {
    width: 200px; height: 200px;
    opacity: .7;
    border-color: rgba(201,169,110,.8);
  }
  100% {
    width: 480px; height: 480px;
    opacity: 0;
    border-color: rgba(201,169,110,0);
  }
}

/* Mega CTA button */
.cta-mega-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 26px 56px;
  background: linear-gradient(135deg, var(--c-gold) 0%, var(--c-gold-light) 50%, var(--c-gold) 100%);
  background-size: 200% 100%;
  color: var(--c-noir);
  font-family: var(--f-body);
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--c-gold-light);
  border-radius: 2px;
  cursor: pointer;
  overflow: hidden;
  z-index: 2;
  box-shadow:
    0 0 0 8px rgba(201,169,110,.15),
    0 0 50px rgba(201,169,110,.4),
    0 20px 60px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -1px 0 rgba(0,0,0,.2);
  animation: cta-btn-breath 3s ease-in-out infinite, cta-btn-shimmer 4s linear infinite;
  transition: all .5s var(--ease-luxe);
}
@keyframes cta-btn-breath {
  0%, 100% {
    box-shadow:
      0 0 0 8px rgba(201,169,110,.15),
      0 0 50px rgba(201,169,110,.4),
      0 20px 60px rgba(0,0,0,.6),
      inset 0 1px 0 rgba(255,255,255,.4),
      inset 0 -1px 0 rgba(0,0,0,.2);
  }
  50% {
    box-shadow:
      0 0 0 14px rgba(201,169,110,.25),
      0 0 80px rgba(201,169,110,.6),
      0 20px 70px rgba(0,0,0,.7),
      inset 0 1px 0 rgba(255,255,255,.5),
      inset 0 -1px 0 rgba(0,0,0,.25);
  }
}
@keyframes cta-btn-shimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.cta-mega-btn:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow:
    0 0 0 18px rgba(201,169,110,.3),
    0 0 100px rgba(201,169,110,.7),
    0 26px 80px rgba(0,0,0,.7),
    inset 0 1px 0 rgba(255,255,255,.5);
}
.cta-mega-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg,
    transparent 30%,
    rgba(255,255,255,.5) 50%,
    transparent 70%);
  transform: translateX(-100%);
  pointer-events: none;
  z-index: 0;
}
.cta-mega-btn:hover .cta-mega-shine {
  animation: cta-shine-sweep .9s var(--ease-luxe);
}
@keyframes cta-shine-sweep {
  to { transform: translateX(100%); }
}
.cta-mega-label,
.cta-mega-arrow {
  position: relative;
  z-index: 1;
}
.cta-mega-arrow {
  font-size: 1.2em;
  transition: transform .3s var(--ease-luxe);
}
.cta-mega-btn:hover .cta-mega-arrow {
  transform: translateX(8px);
}

/* Live badge under button */
.cta-badge {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-body);
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--c-cream);
  padding: 6px 14px;
  background: rgba(11,11,11,.6);
  border: 1px solid rgba(201,169,110,.3);
  border-radius: 30px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 2;
}
.cta-badge-dot {
  width: 6px; height: 6px;
  background: #25d366;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(37,211,102,.9);
  animation: ecom-pulse 1.6s ease-in-out infinite;
}

/* Quick contact row */
.cta-quick {
  display: inline-flex;
  align-items: stretch;
  gap: 28px;
  margin-top: 80px;
  padding: 18px 32px;
  background: rgba(11,11,11,.4);
  border: 1px solid rgba(201,169,110,.2);
  border-radius: 4px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.cta-quick-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  transition: transform .3s var(--ease-luxe);
}
.cta-quick-item:hover { transform: translateY(-2px); }
.cta-quick-label {
  font-family: var(--f-body);
  font-size: .56rem;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--c-gold);
}
.cta-quick-value {
  font-family: var(--f-display);
  font-size: .95rem;
  color: var(--c-ivory);
  font-weight: 400;
  letter-spacing: .01em;
  transition: color .3s;
}
.cta-quick-item:hover .cta-quick-value { color: var(--c-gold-light); }
.cta-quick-divider {
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(201,169,110,.3), transparent);
}

/* Closing signature */
.cta-signature {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 64px;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
}
.cta-signature-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,169,110,.4), transparent);
}
.cta-signature-text {
  font-family: var(--f-body);
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--c-cream);
  white-space: nowrap;
}
.cta-signature-text em {
  font-style: italic;
  color: var(--c-gold);
  font-family: var(--f-display);
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: lowercase;
  text-shadow: 0 0 12px rgba(201,169,110,.4);
  margin: 0 4px;
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
  background: var(--c-noir);
  color: var(--c-ivory);
  padding: 72px 0 36px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 56px;
}
.footer-brand { max-width: 260px; }
.footer-brand .logo {
  color: var(--c-ivory);
  margin-bottom: 20px;
}
.footer-brand p {
  font-size: .85rem;
  color: var(--c-text-muted);
  line-height: 1.8;
  font-weight: 300;
}

.footer-col h4 {
  font-family: var(--f-body);
  font-size: .65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--c-cream);
  margin-bottom: 24px;
}
.footer-col a {
  display: block;
  font-size: .85rem;
  color: var(--c-text-muted);
  padding: 5px 0;
  font-weight: 300;
  transition: color .3s;
}
.footer-col a:hover { color: var(--c-gold); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid rgba(248,245,240,.06);
  font-size: .75rem;
  color: var(--c-text-muted);
  font-weight: 300;
  letter-spacing: .04em;
}
.footer-socials { display: flex; gap: 24px; }
.footer-socials a {
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  transition: color .3s;
  font-weight: 400;
}
.footer-socials a:hover { color: var(--c-gold); }

/* ============================================
   RESPONSIVE
   ============================================ */
/* Notebook / small desktop (1280px) — tighter spacing, smaller fonts */
@media (max-width: 1280px) {
  :root {
    --s-section: clamp(56px, 7vw, 130px);
    --s-container: min(1180px, 92vw);
  }

  /* Hero — slightly tighter */
  .hero { padding: 120px 0 80px; }
  .hero h1 { font-size: clamp(2.6rem, 5.2vw, 4.2rem); }
  .hero-text { max-width: 500px; }
  .hero-stats { max-width: 820px; gap: 12px; }
  .hero-stat .number { font-size: clamp(2rem, 4vw, 3rem); }
  .hero-corner { width: 44px; height: 44px; top: 22px; left: 22px; }
  .hero-corner--tr { left: auto; right: 22px; }
  .hero-corner--bl { top: auto; bottom: 22px; }
  .hero-corner--br { top: auto; left: auto; bottom: 22px; right: 22px; }
  .hero-hud { top: 96px; right: 40px; }

  /* About — tighter */
  .about-content { max-width: 940px; padding: 80px 24px; }
  .about .about-text { padding: 28px 32px; font-size: .95rem; }
  .about-principle { padding: 20px 18px 18px; }
  .about-principle h4 { font-size: 1.05rem; }
  .about-principle p { font-size: .74rem; }
  .about-corner { width: 42px; height: 42px; }
  .about-hud { top: 96px; left: 40px; }

  /* Services slideshow */
  .service-slide { padding: 48px 40px; gap: 36px; }
  .service-slide h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
  .service-slide p { font-size: .9rem; }

  /* Service heroes */
  .srv-hero { padding: clamp(70px, 9vh, 120px) 0; }
  #srv-ecommerce .srv-hero-content,
  #srv-marketing .srv-hero-content,
  #srv-ia .srv-hero-content {
    padding: 34px 30px;
  }
  .srv-hero-content .section-title { font-size: clamp(1.7rem, 3vw, 2.6rem); }
  .srv-hero-content .section-desc { font-size: .92rem; }
  .srv-hero-list li { font-size: .86rem; padding-left: 22px; }
  .srv-hero-card { padding: 18px 22px; }
  .srv-hero-card-stat { font-size: 1.5rem; }
  .srv-hero-card-label { font-size: .78rem; }

  /* Cases */
  .cases-slide-content { padding: 40px 32px; }
  .cases-slide-title { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
  .cases-slide-desc { font-size: .85rem; }
  .cases-slide-num { font-size: 2.4rem; }
  .cases-metric-num { font-size: 1.4rem; }
  .cases-metric-label { font-size: .52rem; }
  .cases-featured-corner { width: 30px; height: 30px; }
  .cases-hud { top: 96px; left: 40px; }
  .case-content { padding: 22px 18px 18px; }
  .case-title { font-size: 1.2rem; }

  /* Diferenciais */
  .differentials-grid { gap: 12px; }
  .diff-item { min-height: 280px; }
  .diff-content h4 { font-size: 1.15rem; }
  .diff-back-content h4 { font-size: 1.1rem; }
  .diff-corner-stage { width: 44px; height: 44px; }
  .diff-hud { top: 96px; right: 40px; }

  /* Timeline */
  .tl-chapter { gap: 44px; margin-bottom: 80px; }
  .tl-year { font-size: clamp(3.6rem, 6.5vw, 5.6rem); }
  .tl-text h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
  .tl-text p { font-size: .88rem; }
  .positioning-corner { width: 44px; height: 44px; }
  .positioning-hud { top: 96px; left: 40px; }

  /* CTA Final — compact notebook */
  .cta-final { padding: 100px 0 110px; }
  .cta-corner { width: 44px; height: 44px; top: 22px; left: 22px; }
  .cta-corner--tr { left: auto; right: 22px; }
  .cta-corner--bl { top: auto; bottom: 22px; }
  .cta-corner--br { top: auto; left: auto; bottom: 22px; right: 22px; }
  .cta-hud { top: 76px; font-size: .54rem; padding: 7px 14px; letter-spacing: .22em; }

  .cta-final-content { max-width: 700px; }
  .cta-title {
    font-size: clamp(2.2rem, 4.6vw, 3.4rem);
    margin-bottom: 24px;
    max-width: 640px;
  }
  .cta-final .section-desc {
    font-size: .92rem;
    margin-bottom: 44px;
    max-width: 540px;
  }

  /* Portal scaled down */
  .cta-portal { padding: 60px 32px; }
  .cta-ring { width: 170px; height: 170px; }
  @keyframes cta-ring-pulse {
    0% {
      width: 170px; height: 170px;
      opacity: .7;
      border-color: rgba(201,169,110,.8);
    }
    100% {
      width: 420px; height: 420px;
      opacity: 0;
      border-color: rgba(201,169,110,0);
    }
  }
  .cta-mega-btn {
    padding: 22px 44px;
    font-size: .78rem;
    letter-spacing: .22em;
    gap: 12px;
  }
  .cta-badge {
    bottom: 22px;
    font-size: .54rem;
    padding: 5px 12px;
    letter-spacing: .22em;
  }

  /* Quick contacts row */
  .cta-quick {
    gap: 22px;
    margin-top: 60px;
    padding: 16px 28px;
  }
  .cta-quick-label { font-size: .54rem; letter-spacing: .24em; }
  .cta-quick-value { font-size: .88rem; }

  /* Signature */
  .cta-signature {
    margin-top: 48px;
    max-width: 360px;
    gap: 20px;
  }
  .cta-signature-text { font-size: .54rem; letter-spacing: .26em; }
  .cta-signature-text em { font-size: .82rem; }

  /* Footer — compact notebook */
  .footer { padding: 56px 0 28px; }
  .footer-grid {
    grid-template-columns: 1.8fr 1fr 1fr 1fr;
    gap: 40px;
  }
  .footer-brand { max-width: 280px; }
  .footer-brand .logo { margin-bottom: 14px; }
  .footer-brand p { font-size: .8rem; line-height: 1.65; }
  .footer-col h4 { font-size: .6rem; margin-bottom: 16px; letter-spacing: .22em; }
  .footer-col a { font-size: .78rem; padding: 4px 0; }
  .footer-bottom {
    margin-top: 36px;
    padding-top: 20px;
    font-size: .68rem;
  }
  .footer-socials { gap: 18px; }
  .footer-socials a { font-size: .62rem; letter-spacing: .16em; }
}

@media (max-width: 1024px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .services-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .srv-hero-grid,
  .srv-hero-grid--reverse { grid-template-columns: 1fr; gap: 36px; direction: ltr; }
  .differentials-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }

  /* Service hero — content + dashboard stacked on tablet */
  .srv-hero-grid > .srv-hero-content { order: 1; }
  .srv-hero-grid > .srv-hero-visual { order: 2; }
  .srv-hero-visual--ecom,
  .srv-hero-visual--ia,
  .srv-hero-visual--mkt {
    display: block;
  }
  /* All 3 service dashboards go landscape on tablet */
  .ecom-dashboard,
  .ia-dashboard,
  .mkt-dashboard {
    aspect-ratio: 16 / 9;
  }

  /* Services slideshow */
  .service-slide {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 40px 32px;
  }
  .service-slide-visual {
    max-width: 240px;
    margin: 0 auto;
    order: -1;
  }

  /* Cases */
  .cases-slide {
    grid-template-columns: 1fr;
  }
  .cases-slide-visual { aspect-ratio: 16 / 9; }
  .cases-slide-content { padding: 32px 28px; }
  .cases-grid { gap: 14px; }

  /* About principles 2x2 */
  .about-principles { grid-template-columns: 1fr 1fr; }

  /* Timeline gap */
  .tl-chapter { gap: 32px; }

  /* Hero stats */
  .hero-stats { max-width: 680px; }

  /* Hide HUDs on tablet to clean up */
  .hero-hud, .about-hud, .clients-hud, .cases-hud,
  .diff-hud, .positioning-hud { font-size: .52rem; padding: 7px 13px; letter-spacing: .22em; }
}

@media (max-width: 768px) {
  .nav { display: none; }
  .menu-toggle { display: flex; }

  /* HERO compact mobile */
  .hero { min-height: auto; padding: 120px 0 80px; }
  .hero h1 { font-size: clamp(2rem, 8.5vw, 3rem); margin-bottom: 24px; }
  .hero-label { margin-bottom: 24px; }
  .hero-text { margin-bottom: 28px; }
  .hero-corner { width: 26px; height: 26px; }
  .hero-corner--tl { top: 14px; left: 14px; }
  .hero-corner--tr { top: 14px; right: 14px; }
  .hero-corner--bl { bottom: 14px; left: 14px; }
  .hero-corner--br { bottom: 14px; right: 14px; }
  .hero-hud { display: none; }
  .hero-stack {
    margin-top: 24px;
    padding: 8px 14px;
    font-size: .56rem;
    gap: 6px;
    letter-spacing: .1em;
  }
  .hero-stack-label { letter-spacing: .2em; }
  .hero-scroll { display: none; }
  .hero-stats {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 36px;
    padding-top: 24px;
  }
  .hero-stats::before { left: 25%; right: 25%; }
  .hero-stat {
    padding: 14px 10px;
    border-radius: 2px;
  }
  .hero-stat::before,
  .hero-stat::after { width: 10px; height: 10px; opacity: .8; }
  .hero-stat .number {
    font-size: clamp(1.5rem, 7vw, 1.9rem);
  }
  .hero-stat .label {
    font-size: .54rem;
    letter-spacing: .14em;
    margin-top: 6px;
    line-height: 1.3;
  }

  /* ABOUT compact */
  .about { min-height: auto; padding: 60px 0; }
  .about-content { padding: 40px 16px; }
  .about .about-text { padding: 22px; font-size: .9rem; }
  .about .about-text p + p { margin-top: 14px; }
  .about-photo {
    background-attachment: scroll;
    opacity: .3;
  }
  .about-corner { width: 26px; height: 26px; }
  .about-corner--tl { top: 14px; left: 14px; }
  .about-corner--tr { top: 14px; right: 14px; }
  .about-corner--bl { bottom: 14px; left: 14px; }
  .about-corner--br { bottom: 14px; right: 14px; }
  .about-hud { display: none; }
  .about-founder {
    width: 100%;
    margin-top: 24px;
    padding: 12px 16px 12px 12px;
    border-radius: 60px 4px 4px 60px;
    flex-wrap: wrap;
    gap: 12px;
  }
  .about-founder-photo { width: 44px; height: 44px; }
  .about-founder-name { font-size: .92rem; }
  .about-founder-role { font-size: .52rem; letter-spacing: .18em; }
  .about-founder-cta {
    margin-left: auto;
    padding: 8px 14px;
    font-size: .56rem;
  }
  .about-principles {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 32px;
  }
  .about-principle { padding: 16px 14px 14px; }
  .about-principle-num { font-size: 1.6rem; margin-bottom: 8px; }
  .about-principle h4 { font-size: .92rem; }
  .about-principle p { font-size: .7rem; }

  /* SECTION padding global compact */
  .section { padding: 56px 0; }
  .section-title { margin-bottom: 14px; }

  /* SERVICES slideshow mobile */
  .services-header { margin: 0 auto 32px; }
  .services-stage { min-height: 0; border-radius: 4px; }
  .services-slides { min-height: 0; }
  .service-slide {
    position: relative;
    padding: 28px 22px 32px;
    gap: 22px;
    grid-template-columns: 1fr;
    transform: translateX(20px) scale(.98);
  }
  .service-slide:not(.active) { display: none; }
  .service-slide.active { display: grid; position: relative; }
  .service-slide-visual {
    max-width: 180px;
    margin: 0 auto;
    order: -1;
  }
  .service-slide-num { font-size: 2.4rem; margin-bottom: 10px; }
  .service-slide h3 { font-size: 1.5rem; margin-bottom: 14px; }
  .service-slide p { font-size: .88rem; margin-bottom: 18px; }
  .service-slide-features li { font-size: .76rem; padding: 6px 0 6px 18px; }
  .service-slide-cta { padding: 11px 22px; font-size: .68rem; }
  .services-controls { margin-top: 20px; gap: 12px; flex-wrap: wrap; justify-content: center; }
  .services-dot { width: 22px; }
  .services-dot.active { width: 40px; }
  .services-nav-btn { width: 36px; height: 36px; font-size: .85rem; }

  /* SRV HERO mobile */
  .srv-hero { padding: 48px 0; min-height: 0; }
  .srv-hero-grid,
  .srv-hero-grid--reverse {
    gap: 32px;
    grid-template-columns: 1fr;
  }
  #srv-ecommerce .srv-hero-content,
  #srv-ia .srv-hero-content {
    padding: 24px 20px;
    border-radius: 4px;
  }
  .srv-hero-content .section-title { font-size: clamp(1.7rem, 7vw, 2.2rem); }
  .srv-hero-content .section-desc { font-size: .92rem; line-height: 1.7; }
  .srv-hero-list { margin: 22px 0 26px; }
  .srv-hero-list li { font-size: .86rem; margin-bottom: 8px; padding-left: 20px; }

  .srv-hero-visual {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .srv-hero-card {
    padding: 16px 18px;
    flex-direction: row;
    text-align: left;
    gap: 16px;
    border-radius: 4px;
  }
  .srv-hero-card-stat { font-size: 1.6rem; min-width: 56px; }
  .srv-hero-card-label { font-size: .8rem; }
  .srv-hero-card-icon { font-size: .6rem; }
  .srv-hero-card::before,
  .srv-hero-card::after { width: 14px; height: 14px; }

  /* SRV-marketing mobile — larger more legible */
  #srv-marketing { overflow: hidden; }
  #srv-marketing .srv-hero-content .section-title { font-size: clamp(1.8rem, 7.5vw, 2.4rem); }
  #srv-marketing .srv-bg-canvas { opacity: .85; }
  #srv-marketing .srv-hero-list li { font-size: .9rem; }
  #srv-marketing .srv-hero-content {
    background: linear-gradient(180deg, rgba(11,11,11,.78) 0%, rgba(11,11,11,.62) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(201,169,110,.28);
    border-radius: 4px;
    padding: 26px 22px;
    box-shadow: 0 16px 40px rgba(0,0,0,.5);
    position: relative;
  }
  #srv-marketing .srv-hero-content::before,
  #srv-marketing .srv-hero-content::after {
    content: '';
    position: absolute;
    width: 22px; height: 22px;
    pointer-events: none;
  }
  #srv-marketing .srv-hero-content::before {
    top: -1px; left: -1px;
    border-top: 1px solid var(--c-gold);
    border-left: 1px solid var(--c-gold);
  }
  #srv-marketing .srv-hero-content::after {
    bottom: -1px; right: -1px;
    border-bottom: 1px solid var(--c-gold);
    border-right: 1px solid var(--c-gold);
  }
  .srv-hero-visual--mkt { gap: 10px; }
  .mkt-dashboard { aspect-ratio: 4 / 5; }
  .mkt-dashboard-header { padding: 10px 14px; }
  .mkt-dashboard-title { font-size: .54rem; letter-spacing: .22em; }
  .mkt-dashboard-stamp { font-size: .72rem; }
  .mkt-dashboard-corner { width: 16px; height: 16px; }

  /* SRV-ia mobile — contained dashboard */
  #srv-ia { overflow: hidden; }
  #srv-ia .srv-hero-content {
    padding: 26px 22px;
    border-radius: 4px;
  }
  .ia-dashboard { aspect-ratio: 4 / 5; }
  .ia-dashboard-header { padding: 10px 14px; }
  .ia-dashboard-title { font-size: .54rem; letter-spacing: .22em; }
  .ia-dashboard-stamp { font-size: .72rem; }
  .ia-dashboard-corner { width: 16px; height: 16px; }

  /* SRV-ecommerce mobile — contained dashboard */
  #srv-ecommerce { overflow: hidden; }
  #srv-ecommerce .srv-hero-content {
    background: linear-gradient(180deg, rgba(11,11,11,.86) 0%, rgba(11,11,11,.7) 100%);
    border-color: rgba(201,169,110,.32);
    box-shadow: 0 16px 40px rgba(0,0,0,.5);
    padding: 26px 22px;
  }
  .ecom-dashboard { aspect-ratio: 4 / 5; }
  .ecom-dashboard-header { padding: 10px 14px; }
  .ecom-dashboard-title { font-size: .54rem; letter-spacing: .22em; }
  .ecom-dashboard-stamp { font-size: .72rem; }
  .ecom-dashboard-corner { width: 16px; height: 16px; }

  /* CLIENTS — marquee mobile (v1.42 — logos maiores, sem caixote, 2 esteiras) */
  .clients-corner { width: 24px; height: 24px; }
  .clients-corner--tl { top: 14px; left: 14px; }
  .clients-corner--tr { top: 14px; right: 14px; }
  .clients-corner--bl { bottom: 14px; left: 14px; }
  .clients-corner--br { bottom: 14px; right: 14px; }
  .clients-hud { display: none; }
  .clients { padding: 56px 0 48px; }
  .clients-header { margin-bottom: 28px; }

  /* Hide 3rd belt — seção ficava longa demais no mobile com 3 esteiras */
  .clients-marquee[data-speed="65"] { display: none; }
  .clients-marquee {
    padding: 10px 0;
    margin-bottom: 2px;
  }
  /* Fade lateral menor — antes escondia ~28% da tela em celular pequeno */
  .clients-marquee::before,
  .clients-marquee::after { width: 28px; }
  /* Acelera levemente a marquee no mobile para sensação mais viva */
  .clients-marquee[data-speed="60"] .clients-track,
  .clients-marquee:not([data-speed]) .clients-track { animation-duration: 42s; }
  .clients-marquee[data-speed="75"] .clients-track { animation-duration: 52s; }

  /* Remove "caixote" — logos flutuam diretamente no ivory */
  .clients-track { gap: 30px; }
  .clients-track .client-logo {
    width: auto;
    min-width: 100px;
    max-width: 170px;
    height: 80px;
    padding: 4px 8px;
    background: transparent;
    border: none;
    border-radius: 0;
    cursor: default;
  }
  .clients-track .client-logo:hover {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    transform: none;
  }

  /* Logos maiores e mais legíveis */
  .clients-track .client-logo img {
    max-height: 52px;
    max-width: 150px;
    filter: grayscale(60%) brightness(.55) contrast(1.1);
    opacity: .82;
    transition: filter .3s var(--ease-luxe), opacity .3s var(--ease-luxe);
  }
  .clients-track .client-logo:hover img,
  .clients-track .client-logo:active img {
    filter: grayscale(0%) brightness(1) contrast(1);
    opacity: 1;
    transform: none;
  }

  /* Bottom stats compactos, alinhados horizontal */
  .clients-bottom {
    flex-direction: row;
    gap: 10px;
    margin-top: 30px;
    padding: 18px 12px;
    flex-wrap: wrap;
    justify-content: space-around;
    max-width: 100%;
  }
  .clients-stat { gap: 4px; min-width: 90px; }
  .clients-stat-num { font-size: 1.55rem; }
  .clients-stat-label { font-size: .52rem; letter-spacing: .16em; }
  .clients-stat-divider { display: none; }

  /* DIFFERENTIALS mobile — flip cards 2-col, tap to flip */
  .differentials-header { margin-bottom: 32px; }
  .diff-corner-stage { width: 24px; height: 24px; }
  .diff-corner-stage--tl { top: 14px; left: 14px; }
  .diff-corner-stage--tr { top: 14px; right: 14px; }
  .diff-corner-stage--bl { bottom: 14px; left: 14px; }
  .diff-corner-stage--br { bottom: 14px; right: 14px; }
  .diff-hud { display: none; }
  .differentials-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    perspective: 1000px;
  }
  .diff-item { min-height: 240px; }
  .diff-face--front { padding: 16px 14px 14px; }
  .diff-face--back { padding: 18px 14px; }
  .diff-content h4 { font-size: 1rem; }
  .diff-icon { font-size: 1.3rem; top: -120px; }
  .diff-tag { font-size: .52rem; padding: 3px 8px; margin-bottom: 10px; }
  .diff-hint { font-size: .48rem; letter-spacing: .18em; }
  .diff-back-content h4 { font-size: .95rem; }
  .diff-back-content p { font-size: .68rem; margin-bottom: 10px; }
  .diff-bullets li { font-size: .64rem; padding: 3px 0 3px 14px; }
  .diff-cta { font-size: .54rem; padding: 7px 12px; letter-spacing: .18em; }
  .diff-bg { filter: grayscale(40%) brightness(.55) contrast(1.05) sepia(.1); opacity: .8; }
  .diff-face .diff-corner.tl, .diff-face .diff-corner.tr,
  .diff-face .diff-corner.bl, .diff-face .diff-corner.br { width: 12px; height: 12px; }

  /* CASES — featured + grid mobile */
  .cases-hud { display: none; }
  .cases-filters { gap: 6px; margin-top: 22px; }
  .cases-filter { padding: 7px 12px; font-size: .54rem; letter-spacing: .14em; gap: 6px; }
  .cases-filter-count { min-width: 16px; height: 14px; font-size: .48rem; }

  /* Featured carousel mobile — stack vertical */
  .cases-featured { margin-bottom: 48px; }
  .cases-featured-stage { min-height: 0; }
  .cases-slide {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }
  .cases-slide:not(.active) { display: none; }
  .cases-slide.active { display: grid; position: relative; }
  .cases-slide-visual { aspect-ratio: 16 / 10; }
  .cases-slide-tag { top: 12px; left: 12px; font-size: .5rem; padding: 4px 10px; letter-spacing: .22em; }
  .cases-slide-visual::before { background: linear-gradient(180deg, transparent 40%, rgba(11,11,11,.8) 100%); }
  .cases-slide-content { padding: 24px 20px; }
  .cases-slide-num { font-size: 2rem; margin-bottom: 6px; }
  .cases-slide-cat { font-size: .5rem; letter-spacing: .22em; padding: 3px 9px; margin-bottom: 12px; }
  .cases-slide-title { font-size: 1.35rem; margin-bottom: 14px; }
  .cases-slide-desc { font-size: .82rem; margin-bottom: 18px; }
  .cases-slide-metrics { gap: 8px; margin-bottom: 18px; }
  .cases-metric { padding: 10px 8px 9px; }
  .cases-metric-num { font-size: 1.1rem; }
  .cases-metric-label { font-size: .46rem; letter-spacing: .14em; }
  .cases-slide-stack { font-size: .54rem; gap: 4px; margin-bottom: 18px; }
  .cases-stack-label { letter-spacing: .2em; margin-right: 6px; }
  .cases-slide-cta { padding: 11px 20px; font-size: .62rem; letter-spacing: .2em; }
  .cases-featured-controls { gap: 12px; margin-top: 18px; flex-wrap: wrap; }
  .cases-featured-nav { width: 34px; height: 34px; font-size: .85rem; }
  .cases-featured-dot { width: 18px; }
  .cases-featured-dot.active { width: 36px; }
  .cases-featured-counter { font-size: .8rem; }

  /* Sub-heading */
  .cases-subhead { gap: 14px; max-width: 320px; }
  .cases-subhead-text { font-size: .54rem; letter-spacing: .24em; }

  /* Grid */
  .cases-grid { grid-template-columns: 1fr 1fr; gap: 10px; perspective: none; }
  .case-item { aspect-ratio: 4 / 5; transform: none !important; }
  .case-item[data-tilt]:hover { transform: translateY(-2px) !important; }
  .case-content { padding: 18px 14px 14px; transform: none; }
  .case-top { margin-bottom: 8px; }
  .case-title { font-size: 1rem; }
  .case-num { font-size: 1.1rem; }
  .case-desc { font-size: .68rem; }
  .case-tag { font-size: .52rem; padding: 3px 7px; }
  .case-stack { font-size: .5rem; gap: 4px; }
  .case-meta { font-size: .58rem; margin-top: 8px; padding-left: 16px; }
  .case-meta::before { width: 10px; }
  .case-mini-num { font-size: .9rem; }
  .case-mini-label { font-size: .48rem; }

  /* Closing strip */
  .cases-closing { flex-direction: column; gap: 14px; padding: 22px 20px; margin-top: 36px; text-align: center; }
  .cases-closing-text { font-size: 1rem; }
  .cases-closing-cta { width: 100%; justify-content: center; padding: 12px 20px; font-size: .62rem; }

  /* TIMELINE mobile — magazine vertical (single column) */
  .positioning-corner { width: 24px; height: 24px; }
  .positioning-corner--tl { top: 14px; left: 14px; }
  .positioning-corner--tr { top: 14px; right: 14px; }
  .positioning-corner--bl { bottom: 14px; left: 14px; }
  .positioning-corner--br { bottom: 14px; right: 14px; }
  .positioning-hud { display: none; }

  .timeline-magazine {
    margin-top: 48px;
    padding: 20px 0 20px 30px;
  }
  /* Move central line to the left side */
  .timeline-magazine::before {
    left: 8px;
    right: auto;
  }
  .timeline-magazine::after {
    left: 8px;
  }
  .tl-chapter {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 50px;
    transform: translateY(20px);
  }
  .tl-chapter--left,
  .tl-chapter--right {
    transform: translateY(20px);
  }
  .tl-chapter.revealed { transform: translateY(0); }
  /* Reset alignment — all chapters left-aligned on mobile */
  .tl-chapter--right .tl-photo { order: 0; }
  .tl-chapter--right .tl-text { order: 1; text-align: left; align-items: flex-start; }
  .tl-chapter--right .tl-text p { margin-left: 0; }
  /* Move dot to left line */
  .tl-chapter::before {
    left: -22px;
    top: 36px;
    transform: none;
    width: 12px;
    height: 12px;
  }
  .tl-chapter.revealed::before {
    transform: scale(1.15);
  }
  .tl-chapter.revealed::after {
    left: -22px;
    top: 36px;
    transform: none;
    width: 22px;
    height: 22px;
  }
  @keyframes timeline-pulse {
    0% { transform: scale(.6); opacity: 1; }
    100% { transform: scale(2.2); opacity: 0; }
  }
  .tl-photo {
    aspect-ratio: 16 / 10;
  }
  .tl-chapter--right .tl-photo::after {
    left: 12px; right: auto;
    border-right: none;
    border-left: 1px solid var(--c-gold);
  }
  .tl-chapter--right .tl-photo-tag {
    left: auto; right: 14px;
  }
  .tl-text { gap: 0; }
  .tl-year {
    font-size: clamp(3rem, 14vw, 4.5rem);
    margin-top: 6px;
  }
  .tl-label {
    font-size: .54rem;
    letter-spacing: .26em;
    padding: 4px 10px;
    margin-top: 6px;
  }
  .tl-text h3 {
    font-size: clamp(1.3rem, 5.5vw, 1.7rem);
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .tl-text p {
    font-size: .86rem;
    margin-bottom: 18px;
  }
  .tl-stat {
    padding: 10px 16px;
    gap: 10px;
  }
  .tl-stat-num { font-size: 1.4rem; }
  .tl-stat-label { font-size: .56rem; letter-spacing: .16em; max-width: 140px; }

  .tl-closing { gap: 14px; margin-top: 48px; }
  .tl-closing-text { font-size: .56rem; letter-spacing: .22em; }
  .tl-closing-text em { font-size: .7rem; }

  /* CTA Final compact mobile */
  .cta-final { padding: 80px 0 90px; }
  .cta-corner { width: 26px; height: 26px; }
  .cta-corner--tl { top: 14px; left: 14px; }
  .cta-corner--tr { top: 14px; right: 14px; }
  .cta-corner--bl { bottom: 14px; left: 14px; }
  .cta-corner--br { bottom: 14px; right: 14px; }
  .cta-hud {
    top: 30px;
    font-size: .5rem;
    padding: 6px 12px;
    letter-spacing: .2em;
    width: max-content;
    max-width: 90%;
  }
  .cta-title { font-size: clamp(1.8rem, 8.5vw, 2.6rem); margin-bottom: 22px; }
  .cta-final .section-desc { font-size: .9rem; margin-bottom: 40px; }
  .cta-portal { padding: 50px 20px; }
  .cta-ring { width: 140px; height: 140px; }
  @keyframes cta-ring-pulse {
    0% { width: 140px; height: 140px; opacity: .7; border-color: rgba(201,169,110,.8); }
    100% { width: 320px; height: 320px; opacity: 0; border-color: rgba(201,169,110,0); }
  }
  .cta-mega-btn {
    padding: 18px 32px;
    font-size: .68rem;
    letter-spacing: .2em;
    gap: 10px;
  }
  .cta-badge { font-size: .5rem; bottom: 14px; padding: 5px 11px; }
  .cta-quick {
    flex-direction: column;
    gap: 0;
    padding: 16px 22px;
    margin-top: 50px;
    width: 100%;
    max-width: 100%;
  }
  .cta-quick-item { padding: 12px 0; }
  .cta-quick-value { font-size: .85rem; }
  .cta-quick-divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201,169,110,.3), transparent);
  }
  .cta-signature { gap: 12px; margin-top: 40px; }
  .cta-signature-text { font-size: .5rem; letter-spacing: .2em; }
  .cta-signature-text em { font-size: .7rem; }

  /* FOOTER — 2-col compact mobile */
  .footer { padding: 40px 0 24px; }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px 20px;
  }
  .footer-brand {
    grid-column: 1 / -1;
    max-width: 100%;
    margin-bottom: 8px;
  }
  .footer-brand p { font-size: .78rem; }
  .footer-col h4 { font-size: .58rem; margin-bottom: 14px; }
  .footer-col a { font-size: .78rem; padding: 3px 0; }
  .footer-bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center;
    margin-top: 32px;
    padding-top: 20px;
    font-size: .68rem;
  }
  .footer-socials { gap: 18px; }
  .footer-socials a { font-size: .62rem; }
}

@media (max-width: 480px) {
  .differentials-grid { grid-template-columns: 1fr; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .srv-hero { min-height: 0; }
  .srv-hero-visual { grid-template-columns: 1fr; gap: 10px; }
  .srv-hero-card { padding: 14px 16px; gap: 14px; }
  .srv-hero-card-stat { font-size: 1.5rem; min-width: 54px; }
  #srv-ia .srv-hero-content { padding: 22px 18px; }
  #srv-marketing .srv-hero-content { padding: 22px 18px; }
  #srv-ecommerce .srv-hero-content { padding: 22px 18px; }
  .clients-grid { grid-template-columns: repeat(3, 1fr); }
  /* Em telas muito pequenas mantém tamanho confortável (sobrescreve só padding) */
  .clients-track .client-logo {
    padding: 4px 6px;
    min-width: 90px;
    max-width: 150px;
    height: 72px;
  }
  .clients-track .client-logo img {
    max-width: 130px;
    max-height: 46px;
  }
  .clients-track { gap: 24px; }

  .wpp-tooltip { right: 0; width: calc(100vw - 40px); max-width: none; }

  /* Hero stats — keep 2x2 grid */
  .hero-stats { grid-template-columns: 1fr 1fr; gap: 6px; }
  .hero-stat .number { font-size: 1.5rem; }
  .hero-stat .label { font-size: .54rem; }

  /* Slideshow — even tighter */
  .service-slide { padding: 24px 16px 28px; }
  .service-slide-visual { max-width: 150px; }
  .service-slide-num { font-size: 2rem; }
  .service-slide h3 { font-size: 1.35rem; }
  .service-slide p { font-size: .84rem; }
  .services-counter { font-size: .85rem; }
}

/* ============================================
   AI PROMPT — EXPLODED 3D BUILD (STICKY)
   Luxury stage: noir × gold × IA
   ============================================ */

/* Tall runway that gives scroll distance */
.ai-scroll-runway {
  height: 250vh;
  position: relative;
  background: var(--c-noir);
}

/* Sticky viewport — stays in view during scroll */
.ai-prompt-section {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(201,169,110,.14) 0%, transparent 45%),
    radial-gradient(ellipse at 15% 25%, rgba(201,169,110,.06) 0%, transparent 40%),
    radial-gradient(ellipse at 85% 75%, rgba(140,110,220,.04) 0%, transparent 40%),
    linear-gradient(180deg, #0a0a0a 0%, #14130f 50%, #0b0b0b 100%);
}
/* Grid pattern overlay (subtle gold) */
.ai-prompt-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(201,169,110,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,169,110,.025) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}
/* Slow animated scan-line beam */
.ai-prompt-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(201,169,110,.04) 49%,
    rgba(201,169,110,.1) 50%,
    rgba(201,169,110,.04) 51%,
    transparent 100%);
  background-size: 100% 220%;
  animation: ai-stage-scan 12s linear infinite;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
  opacity: .5;
}
@keyframes ai-stage-scan {
  0% { background-position: 0 -110%; }
  100% { background-position: 0 220%; }
}

/* Stage gold corners */
.ai-prompt-section .ai-stage-corner {
  position: absolute;
  width: 64px;
  height: 64px;
  pointer-events: none;
  z-index: 2;
}
.ai-prompt-section .ai-stage-corner--tl { top: 40px; left: 40px; border-top: 1px solid var(--c-gold); border-left: 1px solid var(--c-gold); }
.ai-prompt-section .ai-stage-corner--tr { top: 40px; right: 40px; border-top: 1px solid var(--c-gold); border-right: 1px solid var(--c-gold); }
.ai-prompt-section .ai-stage-corner--bl { bottom: 40px; left: 40px; border-bottom: 1px solid var(--c-gold); border-left: 1px solid var(--c-gold); }
.ai-prompt-section .ai-stage-corner--br { bottom: 40px; right: 40px; border-bottom: 1px solid var(--c-gold); border-right: 1px solid var(--c-gold); }

/* Floating ambient particles (CSS-only) */
.ai-prompt-section .ai-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--c-gold);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(201,169,110,.7);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  animation: ai-particle-float 14s linear infinite;
}
.ai-prompt-section .ai-particle:nth-child(1) { left: 8%;  top: 100%; animation-delay: 0s;   animation-duration: 16s; }
.ai-prompt-section .ai-particle:nth-child(2) { left: 22%; top: 100%; animation-delay: 3s;   animation-duration: 18s; }
.ai-prompt-section .ai-particle:nth-child(3) { left: 38%; top: 100%; animation-delay: 6s;   animation-duration: 14s; }
.ai-prompt-section .ai-particle:nth-child(4) { left: 56%; top: 100%; animation-delay: 1.5s; animation-duration: 17s; }
.ai-prompt-section .ai-particle:nth-child(5) { left: 72%; top: 100%; animation-delay: 4.5s; animation-duration: 15s; }
.ai-prompt-section .ai-particle:nth-child(6) { left: 88%; top: 100%; animation-delay: 8s;   animation-duration: 19s; }
.ai-prompt-section .ai-particle:nth-child(7) { left: 15%; top: 100%; animation-delay: 10s;  animation-duration: 16s; }
.ai-prompt-section .ai-particle:nth-child(8) { left: 65%; top: 100%; animation-delay: 12s;  animation-duration: 18s; }
@keyframes ai-particle-float {
  0%   { transform: translateY(0) scale(.5); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(-110vh) scale(1.2); opacity: 0; }
}

/* HUD label above prompt window */
.ai-prompt-section .ai-hud {
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  background: rgba(11,11,11,.6);
  border: 1px solid rgba(201,169,110,.45);
  border-radius: 2px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 3;
  font-family: var(--f-body);
  font-size: .58rem;
  font-weight: 400;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--c-cream);
}
.ai-prompt-section .ai-hud strong { color: var(--c-gold); font-weight: 500; }
.ai-prompt-section .ai-hud-dot {
  width: 7px;
  height: 7px;
  background: #25d366;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(37,211,102,.9);
  animation: ecom-pulse 1.6s ease-in-out infinite;
}

/* 3D Stage with perspective */
.ai-stage {
  position: relative;
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  perspective: 1200px;
  perspective-origin: 50% 50%;
}

/* --- Decorative Floating Fragments --- */
.ai-frag {
  position: absolute;
  pointer-events: none;
  will-change: transform, opacity;
  z-index: 0;
}
.ai-frag--line1, .ai-frag--line2 {
  width: 80px; height: 1px;
  background: var(--c-gold);
  opacity: 0;
}
.ai-frag--line1 { top: 10%; left: -60px; }
.ai-frag--line2 { top: 20%; right: -60px; }

.ai-frag--circle1, .ai-frag--circle2 {
  width: 40px; height: 40px;
  border: 1px solid rgba(201,169,110,.3);
  border-radius: 50%;
  opacity: 0;
}
.ai-frag--circle1 { bottom: 15%; left: -40px; }
.ai-frag--circle2 { bottom: 25%; right: -50px; }

.ai-frag--bracket1, .ai-frag--bracket2 {
  font-family: var(--f-display);
  font-size: 3rem;
  font-weight: 300;
  color: rgba(201,169,110,.12);
  opacity: 0;
}
.ai-frag--bracket1 { top: 40%; left: -80px; }
.ai-frag--bracket1::after { content: '{'; }
.ai-frag--bracket2 { top: 35%; right: -80px; }
.ai-frag--bracket2::after { content: '}'; }

.ai-frag--dot1, .ai-frag--dot2 {
  width: 6px; height: 6px;
  background: var(--c-gold);
  border-radius: 50%;
  opacity: 0;
}
.ai-frag--dot1 { top: 5%; left: 20%; }
.ai-frag--dot2 { bottom: 10%; right: 15%; }

.ai-frag--code1, .ai-frag--code2 {
  font-family: monospace;
  font-size: .7rem;
  color: rgba(201,169,110,.2);
  letter-spacing: .1em;
  opacity: 0;
}
.ai-frag--code1 { top: 60%; left: -70px; }
.ai-frag--code2 { top: 15%; right: -50px; }

/* --- Prompt Window Container --- */
.ai-prompt-window {
  position: relative;
  z-index: 1;
}

/* Shell — main frame — refined metallic luxe */
.ai-prompt-shell {
  position: relative;
  background:
    linear-gradient(165deg, #1c1b18 0%, var(--c-noir-rich) 40%, #1a1916 100%);
  border: 1px solid rgba(201,169,110,.35);
  border-radius: 4px;
  overflow: hidden;
  box-shadow:
    0 50px 100px rgba(0,0,0,.6),
    0 20px 40px rgba(0,0,0,.4),
    0 0 80px rgba(201,169,110,.16),
    0 0 160px rgba(201,169,110,.06),
    inset 0 1px 0 rgba(201,169,110,.25),
    inset 0 -1px 0 rgba(0,0,0,.4);
}
/* Subtle gold inner border + corners */
.ai-prompt-shell::before {
  content: '';
  position: absolute;
  top: 8px; left: 8px;
  width: 22px; height: 22px;
  border-top: 1px solid rgba(201,169,110,.6);
  border-left: 1px solid rgba(201,169,110,.6);
  pointer-events: none;
  z-index: 10;
}
.ai-prompt-shell::after {
  content: '';
  position: absolute;
  bottom: 8px; right: 8px;
  width: 22px; height: 22px;
  border-bottom: 1px solid rgba(201,169,110,.6);
  border-right: 1px solid rgba(201,169,110,.6);
  pointer-events: none;
  z-index: 10;
}

/* Every piece that flies — JS drives inline transform+opacity */
.ai-piece {
  will-change: transform, opacity;
}
.ai-frag {
  will-change: transform, opacity;
}

/* Top bar — drops from above — luxe metallic */
.ai-prompt-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 24px;
  border-bottom: 1px solid rgba(201,169,110,.22);
  background:
    linear-gradient(90deg,
      rgba(201,169,110,.08) 0%,
      rgba(201,169,110,.04) 30%,
      rgba(248,245,240,.04) 50%,
      rgba(201,169,110,.04) 70%,
      rgba(201,169,110,.08) 100%);
  position: relative;
}
.ai-prompt-bar::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 20%;
  right: 20%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-gold), transparent);
  box-shadow: 0 0 8px rgba(201,169,110,.6);
}
.ai-prompt-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 8px currentColor;
}
.ai-prompt-dot--red { background: #ff5f57; color: rgba(255,95,87,.5); }
.ai-prompt-dot--yellow { background: #ffbd2e; color: rgba(255,189,46,.5); }
.ai-prompt-dot--green { background: #28c840; color: rgba(40,200,64,.5); }
.ai-prompt-bar-title {
  margin-left: auto;
  margin-right: auto;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--c-gold);
  text-shadow: 0 0 24px rgba(201,169,110,.5);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.ai-prompt-bar-title::before,
.ai-prompt-bar-title::after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 1px;
  background: var(--c-gold);
  opacity: .5;
  vertical-align: middle;
}

/* Body */
.ai-prompt-body {
  padding: 32px 28px 36px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* --- Chat Messages --- */
.ai-msg {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.ai-msg-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-charcoal) 0%, #2a2925 100%);
  border: 1px solid var(--c-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-gold);
  flex-shrink: 0;
  box-shadow:
    0 0 16px rgba(201,169,110,.3),
    inset 0 0 8px rgba(201,169,110,.1);
  position: relative;
}
.ai-msg-avatar::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid rgba(201,169,110,.2);
  animation: ai-avatar-ring 3s ease-in-out infinite;
}
@keyframes ai-avatar-ring {
  0%, 100% { opacity: .3; transform: scale(1); }
  50% { opacity: .8; transform: scale(1.1); }
}
.ai-msg-bubble {
  background:
    linear-gradient(135deg, rgba(42,41,37,.95) 0%, var(--c-charcoal) 100%);
  border: 1px solid rgba(201,169,110,.22);
  border-radius: 2px 10px 10px 10px;
  padding: 14px 20px;
  font-size: .92rem;
  color: var(--c-ivory);
  line-height: 1.65;
  font-weight: 300;
  max-width: 100%;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
  position: relative;
}
.ai-msg-bubble::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, var(--c-gold), transparent);
  border-radius: 2px 0 0 2px;
}

/* Typing cursor */
.ai-cursor {
  color: var(--c-gold);
  animation: ai-blink .8s step-end infinite;
  font-weight: 300;
  margin-left: 1px;
}
@keyframes ai-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
.ai-piece.typed .ai-cursor,
.ai-response.typed .ai-cursor { display: none; }

/* --- 4 Options Grid --- */
.ai-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding-left: 46px;
}
.ai-option {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: linear-gradient(145deg, #232220 0%, var(--c-charcoal) 100%);
  border: 1px solid rgba(201,169,110,.22);
  border-radius: 4px;
  text-align: left;
  cursor: pointer;
  transition: border-color .4s var(--ease-luxe), box-shadow .4s var(--ease-luxe), background .4s, transform .3s var(--ease-luxe);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.ai-option::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(201,169,110,.18), rgba(221,192,138,.06), transparent);
  opacity: 0;
  transition: opacity .4s;
  z-index: 0;
}
/* Corner accent on hover */
.ai-option::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 0; height: 0;
  border-top: 1px solid transparent;
  border-right: 1px solid transparent;
  transition: width .4s var(--ease-luxe), height .4s var(--ease-luxe), border-color .4s;
  pointer-events: none;
  z-index: 2;
}
.ai-option:hover {
  border-color: var(--c-gold);
  box-shadow:
    0 10px 30px rgba(0,0,0,.4),
    0 0 28px rgba(201,169,110,.18);
  transform: translateY(-3px);
}
.ai-option:hover::before { opacity: 1; }
.ai-option:hover::after {
  width: 18px; height: 18px;
  border-top-color: var(--c-gold);
  border-right-color: var(--c-gold);
}

/* --- Icon container — 56x56 circle with gold glow + pulse --- */
.ai-option-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-gold);
  background:
    radial-gradient(circle at 30% 30%, rgba(201,169,110,.18) 0%, rgba(201,169,110,.04) 50%, transparent 70%),
    linear-gradient(135deg, rgba(20,20,19,.9) 0%, rgba(11,11,11,.95) 100%);
  border: 1px solid rgba(201,169,110,.35);
  box-shadow:
    0 0 18px rgba(201,169,110,.18),
    inset 0 0 12px rgba(201,169,110,.08);
  position: relative;
  z-index: 1;
  transition: all .5s var(--ease-luxe);
}
/* Subtle continuous pulse ring (always on) */
.ai-option-icon::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid rgba(201,169,110,.25);
  animation: ai-icon-ring 3.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ai-icon-ring {
  0%, 100% { opacity: .3; transform: scale(1); }
  50% { opacity: .8; transform: scale(1.08); }
}
.ai-option-icon svg {
  width: 32px;
  height: 32px;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 0 6px rgba(201,169,110,.35));
}
.ai-option:hover .ai-option-icon {
  border-color: var(--c-gold);
  box-shadow:
    0 0 28px rgba(201,169,110,.45),
    0 0 60px rgba(201,169,110,.18),
    inset 0 0 16px rgba(201,169,110,.18);
  transform: scale(1.04);
  color: var(--c-gold-light);
}
.ai-option:hover .ai-option-icon svg {
  filter: drop-shadow(0 0 10px rgba(201,169,110,.65));
}

/* --- Per-option icon animations --- */

/* ECOM — wheels spin (continuous slow, faster on hover) */
.ai-svg-spin {
  transform-origin: center;
  transform-box: fill-box;
  animation: ai-spin 6s linear infinite;
}
.ai-option--ecom:hover .ai-svg-spin {
  animation-duration: 1.6s;
}
@keyframes ai-spin {
  to { transform: rotate(360deg); }
}

/* General pulse — for dollar sign, robot antenna */
.ai-svg-pulse {
  transform-origin: center;
  transform-box: fill-box;
  animation: ai-svg-pulse 2.2s ease-in-out infinite;
}
@keyframes ai-svg-pulse {
  0%, 100% { opacity: .65; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.18); }
}

/* AUTO — robot eyes blink */
.ai-svg-blink {
  transform-origin: center;
  transform-box: fill-box;
  animation: ai-blink-eye 3.2s ease-in-out infinite;
}
.ai-svg-blink--alt {
  animation-delay: .15s;
}
@keyframes ai-blink-eye {
  0%, 92%, 100% { transform: scaleY(1); opacity: 1; }
  94%, 96%      { transform: scaleY(.1); opacity: .6; }
}

/* INTEGRA & WEB — lines draw with dashoffset */
.ai-svg-draw {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: ai-svg-draw 2.6s var(--ease-luxe) infinite;
}
.ai-svg-draw--1 { animation-delay: 0s; }
.ai-svg-draw--2 { animation-delay: .5s; }
.ai-svg-draw--3 { animation-delay: 1s; }
@keyframes ai-svg-draw {
  0%        { stroke-dashoffset: 30; opacity: .4; }
  35%, 65%  { stroke-dashoffset: 0;  opacity: 1; }
  100%      { stroke-dashoffset: -30; opacity: .4; }
}

/* --- Option content typography (tightened) --- */
.ai-option-content {
  flex: 1;
  min-width: 0;
}
.ai-option-content strong {
  display: block;
  font-family: var(--f-display);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--c-ivory);
  margin-bottom: 4px;
  letter-spacing: .005em;
  line-height: 1.2;
  position: relative;
  z-index: 1;
}
.ai-option-content p {
  font-family: var(--f-body);
  font-size: .76rem;
  color: var(--c-cream);
  line-height: 1.4;
  font-weight: 300;
  letter-spacing: .02em;
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
}
.ai-opt-sep {
  color: rgba(201,169,110,.55);
  margin: 0 4px;
}

/* Mini tech tags below each option's description */
.ai-option-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  position: relative;
  z-index: 1;
}
.ai-option-tags span {
  font-family: var(--f-body);
  font-size: .56rem;
  font-weight: 500;
  letter-spacing: .14em;
  color: var(--c-gold);
  padding: 3px 7px;
  border: 1px solid rgba(201,169,110,.28);
  background: rgba(201,169,110,.05);
  border-radius: 1px;
  transition: all .35s var(--ease-luxe);
}
.ai-option:hover .ai-option-tags span {
  border-color: rgba(201,169,110,.55);
  color: var(--c-gold-light);
}

/* --- Stack badge in chat bar header --- */
.ai-prompt-bar-stack {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-family: var(--f-body);
  font-size: .54rem;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--c-cream);
  opacity: .65;
}
.ai-prompt-bar-stack > span:not(.ai-prompt-bar-stack-sep) {
  padding: 3px 7px;
  border: 1px solid rgba(201,169,110,.28);
  background: rgba(201,169,110,.04);
  border-radius: 1px;
  color: var(--c-gold);
  letter-spacing: .14em;
}
.ai-prompt-bar-stack-sep {
  color: rgba(201,169,110,.4);
}
/* Push title to the left (was auto centered) to make room for stack */
.ai-prompt-bar-title {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Mobile: hide stack in bar */
@media (max-width: 720px) {
  .ai-prompt-bar-stack { display: none; }
  .ai-option-icon { width: 48px; height: 48px; }
  .ai-option-icon svg { width: 26px; height: 26px; }
  .ai-option { padding: 14px 14px; gap: 12px; }
  .ai-option-content strong { font-size: 1rem; }
}

/* Selected state */
.ai-option.selected {
  border-color: var(--c-gold) !important;
  background: linear-gradient(145deg, rgba(201,169,110,.12) 0%, rgba(201,169,110,.05) 100%);
  box-shadow: 0 0 24px rgba(201,169,110,.12), 0 8px 24px rgba(0,0,0,.3);
}
.ai-option.selected .ai-option-icon {
  color: var(--c-gold-light);
  text-shadow: 0 0 10px rgba(201,169,110,.6);
}

/* --- AI Response (after selection) --- */
.ai-response {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s var(--ease-luxe), transform .6s var(--ease-luxe);
  pointer-events: none;
}
.ai-response.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* --- Confirm CTA Row --- */
.ai-confirm {
  padding-left: 46px;
  opacity: 0;
  transform: translateY(20px);
  transition: all .5s var(--ease-luxe) .3s;
  pointer-events: none;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.ai-confirm.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.ai-confirm-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  background: #25d366;
  color: #fff;
  font-family: var(--f-body);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all .4s var(--ease-luxe);
  position: relative;
  overflow: hidden;
}
.ai-confirm-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.15), transparent);
  opacity: 0;
  transition: opacity .3s;
}
.ai-confirm-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(37,211,102,.35);
}
.ai-confirm-btn:hover::before { opacity: 1; }
.ai-confirm-btn .arrow { transition: transform .3s var(--ease-luxe); }
.ai-confirm-btn:hover .arrow { transform: translateX(5px); }

/* "Ainda não" button */
.ai-skip-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: transparent;
  color: var(--c-text-muted);
  font-family: var(--f-body);
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1px solid rgba(248,245,240,.1);
  border-radius: 8px;
  cursor: pointer;
  transition: all .4s var(--ease-luxe);
}
.ai-skip-btn:hover {
  border-color: rgba(248,245,240,.25);
  color: var(--c-ivory);
  transform: translateY(-1px);
}
.ai-skip-btn .arrow-down {
  transition: transform .3s var(--ease-luxe);
  font-size: .7em;
}
.ai-skip-btn:hover .arrow-down { transform: translateY(3px); }

/* --- WhatsApp trigger flash effect --- */
.wpp-btn.flash {
  animation: wpp-flash .8s var(--ease-luxe);
}
@keyframes wpp-flash {
  0% { box-shadow: 0 0 0 0 rgba(37,211,102,.6); }
  40% { box-shadow: 0 0 0 20px rgba(37,211,102,.3), 0 0 40px rgba(37,211,102,.2); transform: scale(1.2); }
  100% { box-shadow: 0 4px 20px rgba(37,211,102,.35); transform: scale(1); }
}

/* Responsive */
@media (max-width: 768px) {
  /* Runway shorter on mobile — faster assemble */
  .ai-scroll-runway { height: 130vh; }
  .ai-stage {
    perspective: 800px;
    max-width: calc(100% - 24px);
    padding: 0 12px;
  }
  .ai-prompt-shell { border-radius: 4px; }
  .ai-prompt-shell::before,
  .ai-prompt-shell::after { width: 14px; height: 14px; }
  .ai-prompt-section .ai-stage-corner {
    width: 26px; height: 26px;
  }
  .ai-prompt-section .ai-stage-corner--tl { top: 14px; left: 14px; }
  .ai-prompt-section .ai-stage-corner--tr { top: 14px; right: 14px; }
  .ai-prompt-section .ai-stage-corner--bl { bottom: 14px; left: 14px; }
  .ai-prompt-section .ai-stage-corner--br { bottom: 14px; right: 14px; }
  .ai-prompt-section .ai-hud {
    top: 24px;
    padding: 6px 12px;
    font-size: .52rem;
    letter-spacing: .2em;
  }
  .ai-prompt-section .ai-particle:nth-child(n+5) { display: none; }
  .ai-prompt-bar { padding: 12px 16px; }
  .ai-prompt-body {
    padding: 18px 14px 22px;
    gap: 14px;
  }
  .ai-options {
    grid-template-columns: 1fr;
    padding-left: 0;
    gap: 8px;
  }
  .ai-option {
    padding: 12px 14px;
    gap: 10px;
  }
  .ai-option-content strong { font-size: .9rem; }
  .ai-option-content p { font-size: .72rem; }
  .ai-msg-avatar {
    width: 28px; height: 28px;
  }
  .ai-msg-avatar svg { width: 13px; height: 13px; }
  .ai-msg-bubble {
    padding: 12px 14px;
    font-size: .85rem;
  }
  .ai-confirm {
    padding-left: 0;
    flex-direction: column;
    gap: 10px;
  }
  .ai-confirm-btn, .ai-skip-btn {
    width: 100%;
    justify-content: center;
    padding: 12px 22px;
  }
  .ai-frag { display: none; }
}

/* Small phones */
@media (max-width: 400px) {
  .ai-scroll-runway { height: 120vh; }
  .ai-prompt-body { padding: 14px 12px 18px; }
  .ai-option { padding: 11px 12px; }
  .ai-msg-bubble { font-size: .78rem; padding: 10px 12px; }
  .ai-prompt-bar-title { font-size: .55rem; }
}

/* ============================================
   WHATSAPP CHAT BALLOON
   ============================================ */
.wpp-balloon {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9998;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
}

/* --- Floating Button --- */
.wpp-btn {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  box-shadow:
    0 4px 20px rgba(37,211,102,.35),
    0 2px 8px rgba(0,0,0,.15);
  transition: all .4s var(--ease-luxe);
  animation: wpp-entrance 1s var(--ease-luxe) .5s both;
}
@keyframes wpp-entrance {
  from {
    opacity: 0;
    transform: scale(0) rotate(-180deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

.wpp-btn:hover {
  transform: scale(1.08);
  box-shadow:
    0 8px 32px rgba(37,211,102,.45),
    0 4px 12px rgba(0,0,0,.2);
}

/* Icon swap */
.wpp-icon {
  transition: all .4s var(--ease-luxe);
  position: absolute;
}
.wpp-icon-close {
  transition: all .4s var(--ease-luxe);
  position: absolute;
  opacity: 0;
  transform: rotate(-90deg) scale(.5);
}
.wpp-balloon.open .wpp-icon {
  opacity: 0;
  transform: rotate(90deg) scale(.5);
}
.wpp-balloon.open .wpp-icon-close {
  opacity: 1;
  transform: rotate(0) scale(1);
}

/* --- Pulse Rings --- */
.wpp-ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid #25d366;
  opacity: 0;
  pointer-events: none;
}
.wpp-ring-1 {
  animation: wpp-pulse 3s ease-out 1.5s infinite;
}
.wpp-ring-2 {
  animation: wpp-pulse 3s ease-out 2.5s infinite;
}
@keyframes wpp-pulse {
  0% {
    transform: scale(1);
    opacity: .5;
  }
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}
.wpp-balloon.open .wpp-ring { animation: none; opacity: 0; }

/* --- Tooltip Card --- */
.wpp-tooltip {
  position: absolute;
  bottom: 76px;
  right: 0;
  width: 320px;
  background: var(--c-noir);
  border: 1px solid rgba(201,169,110,.15);
  border-radius: 16px 16px 4px 16px;
  padding: 28px 24px 24px;
  box-shadow:
    0 24px 64px rgba(0,0,0,.35),
    0 8px 24px rgba(0,0,0,.2);
  opacity: 0;
  transform: translateY(16px) scale(.92);
  transform-origin: bottom right;
  pointer-events: none;
  transition: all .5s var(--ease-luxe);
}
.wpp-balloon.open .wpp-tooltip {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Close button */
.wpp-tooltip-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--c-text-muted);
  cursor: pointer;
  border: none;
  background: none;
  transition: color .3s;
  line-height: 1;
}
.wpp-tooltip-close:hover { color: var(--c-ivory); }

/* Header with avatar */
.wpp-tooltip-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.wpp-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--c-charcoal);
  border: 1px solid var(--c-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-gold);
  flex-shrink: 0;
}
.wpp-name {
  display: block;
  font-family: var(--f-display);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--c-ivory);
  letter-spacing: .02em;
}
.wpp-role {
  display: block;
  font-size: .68rem;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-top: 2px;
}

/* Message */
.wpp-tooltip-msg {
  font-size: .9rem;
  color: var(--c-cream);
  line-height: 1.6;
  font-weight: 300;
  margin-bottom: 20px;
  padding-left: 2px;
}

/* CTA button */
.wpp-tooltip-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 20px;
  background: #25d366;
  color: #fff;
  font-family: var(--f-body);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 8px;
  transition: all .4s var(--ease-luxe);
}
.wpp-tooltip-btn:hover {
  background: #22c55e;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(37,211,102,.3);
}
.wpp-tooltip-btn span {
  transition: transform .3s var(--ease-luxe);
}
.wpp-tooltip-btn:hover span { transform: translateX(4px); }

/* --- Initial attention animation (after 3s) --- */
.wpp-balloon.attention .wpp-btn {
  animation: wpp-shake .6s var(--ease-luxe);
}
@keyframes wpp-shake {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(12deg) scale(1.1); }
  30% { transform: rotate(-10deg) scale(1.1); }
  45% { transform: rotate(8deg); }
  60% { transform: rotate(-6deg); }
  75% { transform: rotate(3deg); }
}