/* ==========================================================================
   MADVisual — Design System / Landing Page V1.0
   Black UI + White Typography + Red Accent + Motion + Grid + Data + Depth
   ========================================================================== */

:root{
  /* COLORS */
  --mad-black: #050505;
  --mad-black-2: #0A0A0A;
  --mad-black-3: #111111;

  --mad-white: #FFFFFF;
  --mad-white-80: #CCCCCC;
  --mad-white-55: #8C8C8C;
  --mad-white-20: #333333;

  --mad-red-900: #6F0000;
  --mad-red-700: #8E0000;
  --mad-red-500: #E11300;
  --mad-red-400: #FF2412;
  --mad-red-100: #FFDED9;

  --border-primary: rgba(255,255,255,.10);
  --border-secondary: rgba(255,255,255,.06);
  --border-active: #E11300;

  /* RADIUS */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* SPACING */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 80px;
  --space-10: 120px;
  --space-11: 160px;

  /* MOTION */
  --ease-mad: cubic-bezier(.16,1,.3,1);
  --dur-fast: 220ms;
  --dur-med: 600ms;

  /* GRID */
  --container-max: 1280px;
}

/* ==========================================================================
   RESET
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--mad-black);
  color: var(--mad-white);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; margin: 0; padding: 0; }
button{ font-family: inherit; cursor: pointer; }
svg{ display: block; }
::selection{ background: var(--mad-red-500); color: var(--mad-white); }

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */
h1,h2,h3,h4,p{ margin: 0; }
h1,h2,h3,.display-xl,.display-l{ text-wrap: balance; }

.font-display{
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 0.98;
}

.display-xl{ font-size: clamp(2.6rem, 6.2vw, 6rem); font-weight: 800; line-height: 0.96; letter-spacing: -0.02em; }
.display-l{ font-size: clamp(2.2rem, 5vw, 4.5rem); font-weight: 800; line-height: 0.98; letter-spacing: -0.02em; }
h1,.h1{ font-size: clamp(2.2rem, 4.6vw, 4rem); font-weight: 700; line-height: 1.02; letter-spacing: -0.02em; }
h2,.h2{ font-size: clamp(1.9rem, 3.4vw, 3rem); font-weight: 700; line-height: 1.06; letter-spacing: -0.015em; }
h3,.h3{ font-size: clamp(1.4rem, 2vw, 2rem); font-weight: 650; line-height: 1.15; }
.body-l{ font-size: clamp(1.1rem, 1.4vw, 1.35rem); font-weight: 400; line-height: 1.5; color: var(--mad-white-80); }
.body{ font-size: 1rem; font-weight: 400; line-height: 1.55; color: var(--mad-white-80); }
.caption{ font-size: 0.8rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mad-white-55); }

.eyebrow{
  display: inline-flex;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mad-red-500);
}

.text-white{ color: var(--mad-white); }
.text-muted{ color: var(--mad-white-80); }
.text-dim{ color: var(--mad-white-55); }
.text-red{ color: var(--mad-red-500); }

/* ==========================================================================
   LAYOUT / GRID
   ========================================================================== */
.container{
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
}
@media (max-width: 640px){
  .container{ padding: 0 var(--space-5); }
}

section{
  position: relative;
  padding: var(--space-10) 0;
}
@media (max-width: 900px){
  section{ padding: var(--space-8) 0; }
}

.section-head{
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 720px;
  margin-bottom: var(--space-9);
}
.section-head.center,
.solution-intro.center{ margin-left: auto; margin-right: auto; align-items: center; text-align: center; }

.grid-12{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}
@media (max-width: 900px){
  .grid-12{ grid-template-columns: repeat(4, 1fr); gap: 16px; }
}

.divider{
  height: 1px;
  background: var(--border-primary);
  border: none;
  width: 100%;
}

/* Utility */
.mx-auto{ margin-left: auto; margin-right: auto; }

/* ==========================================================================
   REVEAL MOTION
   ========================================================================== */
.reveal{
  opacity: 0;
  transform: translateY(24px) scale(.97);
  transition: opacity var(--dur-med) var(--ease-mad), transform var(--dur-med) var(--ease-mad);
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0) scale(1);
}
.reveal-stagger > * { transition-delay: calc(var(--i, 0) * 70ms); }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  padding: 0 26px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-mad), border-color var(--dur-fast) var(--ease-mad),
              transform var(--dur-fast) var(--ease-mad), box-shadow var(--dur-fast) var(--ease-mad), color var(--dur-fast) var(--ease-mad);
}
.btn svg{ width: 18px; height: 18px; transition: transform var(--dur-fast) var(--ease-mad); }

.btn-primary{
  background: var(--mad-red-500);
  color: var(--mad-white);
}
.btn-primary:hover{
  background: var(--mad-red-400);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px -8px rgba(225,19,0,.55);
}
.btn-primary:hover svg{ transform: translate(2px,-2px); }
.btn-primary:active{ transform: translateY(0); }

.btn-secondary{
  background: transparent;
  color: var(--mad-white);
  height: auto;
  padding: 0;
  font-weight: 600;
  border-radius: 0;
}
.btn-secondary svg{ color: var(--mad-red-500); }
.btn-secondary .btn-label{
  background-image: linear-gradient(var(--mad-white), var(--mad-white));
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--dur-fast) var(--ease-mad);
  padding-bottom: 3px;
}
.btn-secondary:hover .btn-label{ background-size: 100% 1px; }
.btn-secondary:hover svg{ transform: translate(2px,-2px); }

.btn-ghost{
  background: transparent;
  color: var(--mad-white);
  border-color: rgba(255,255,255,.15);
  font-weight: 600;
  height: 48px;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.btn-ghost:hover{
  border-color: var(--mad-white);
}

.btn-sm{ height: 44px; padding: 0 18px; font-size: 13px; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: 76px;
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--dur-fast) var(--ease-mad), border-color var(--dur-fast) var(--ease-mad), backdrop-filter var(--dur-fast) var(--ease-mad), height var(--dur-fast) var(--ease-mad);
}
.site-header.scrolled{
  background: rgba(5,5,5,.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-primary);
  height: 68px;
}
.site-header .container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.logo{
  display: flex;
  align-items: center;
}
.logo img{ width: 34px; height: 34px; border-radius: 7px; display: block; }

.btn-header{ height: 46px; padding: 0 20px; font-size: 14px; }

@media (max-width: 560px){
  .btn-header{ height: 42px; padding: 0 16px; font-size: 13px; }
  .btn-header svg{ width: 15px; height: 15px; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  padding-top: calc(76px + var(--space-10));
  padding-bottom: var(--space-10);
  position: relative;
  overflow: hidden;
}
.hero .container{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-8);
  align-items: center;
}
@media (max-width: 1024px){
  .hero .container{ grid-template-columns: 1fr; }
  .hero{ padding-top: calc(68px + var(--space-7)); }
}

.hero-copy{ max-width: 620px; }
.hero-copy .eyebrow{ margin-bottom: var(--space-5); }
.hero-copy h1{ margin-bottom: var(--space-5); }
.hero-copy .body-l{ margin-bottom: var(--space-7); max-width: 520px; }

.hero-cta-row{ display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; margin-bottom: var(--space-5); }
.hero-meta{
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--mad-white-55);
  font-size: 13px;
  font-weight: 500;
  flex-wrap: wrap;
}
.hero-meta span{ display: inline-flex; align-items: center; gap: 8px; }
.hero-meta .sep{ width: 4px; height: 4px; border-radius: 50%; background: var(--mad-white-20); }
.hero-meta svg{ width: 14px; height: 14px; color: var(--mad-red-500); }

/* MAD GRID visual */
.hero-visual-parallax{ will-change: transform; }
.mad-grid-visual{
  position: relative;
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  background: var(--mad-black-2);
  aspect-ratio: 1 / 0.82;
  overflow: hidden;
  padding: var(--space-5);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 12px;
}
.grid-cell{
  position: relative;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-secondary);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-3);
  background: var(--mad-black-3);
  transition: border-color var(--dur-fast) var(--ease-mad);
  z-index: 1;
}
.grid-cell:hover{ border-color: rgba(225,19,0,.4); }
.grid-cell .label{ font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mad-white-55); }
.grid-cell .value{ font-size: clamp(18px, 2.4vw, 26px); font-weight: 800; letter-spacing: -0.02em; }
.grid-cell .value.up{ color: var(--mad-red-500); }
.grid-cell .value.down{ color: var(--mad-white); }
.grid-cell.wide{ grid-column: span 2; }
.grid-cell.full3{ grid-column: span 3; justify-content: center; gap: var(--space-4); }
.grid-cell.tall{ grid-row: span 3; }
.grid-cell.accent{ background: linear-gradient(160deg, rgba(225,19,0,.12), transparent 60%); border-color: rgba(225,19,0,.25); }
.grid-cell .spark{ display:flex; align-items:flex-end; gap:3px; height:22px; }
.grid-cell .spark i{
  display:block; width:4px; background: var(--mad-red-500); border-radius: 2px; opacity:.85;
  transform-origin: bottom;
  animation: sparkPulse 2.2s ease-in-out infinite;
}
.grid-cell .spark i:nth-child(1){ animation-delay: 0s; }
.grid-cell .spark i:nth-child(2){ animation-delay: .12s; }
.grid-cell .spark i:nth-child(3){ animation-delay: .24s; }
.grid-cell .spark i:nth-child(4){ animation-delay: .36s; }
.grid-cell .spark i:nth-child(5){ animation-delay: .48s; }
.grid-cell .spark i:nth-child(6){ animation-delay: .6s; }
@keyframes sparkPulse{
  0%, 100%{ transform: scaleY(.7); opacity: .6; }
  50%{ transform: scaleY(1); opacity: 1; }
}

/* MAD Growth Engine cell */
.engine-cell{ padding: var(--space-4); }
.engine-head{ display: flex; align-items: center; gap: 10px; }
.engine-icon{ width: 22px; height: 22px; border-radius: 5px; opacity: .95; }
.engine-title{ font-size: 13px; font-weight: 700; letter-spacing: -0.01em; color: var(--mad-white); }
.engine-steps{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: var(--space-3);
}
.engine-steps span{
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--mad-white-80);
  white-space: nowrap;
}
.engine-steps svg{ width: 12px; height: 12px; color: var(--mad-red-500); flex-shrink: 0; }
@media (max-width: 640px){
  .mad-grid-visual{ aspect-ratio: auto; grid-template-rows: repeat(3, minmax(84px, auto)); }
  .engine-steps{ gap: 5px 8px; }
  .engine-steps span{ font-size: 9.5px; }
}

/* ==========================================================================
   SOCIAL PROOF
   ========================================================================== */
.social-proof{ padding: var(--space-8) 0; border-top: 1px solid var(--border-secondary); border-bottom: 1px solid var(--border-secondary); overflow: hidden; }
.social-proof .caption{ margin-bottom: var(--space-6); text-align: center; }

.logo-marquee{
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logo-track{
  display: flex;
  align-items: center;
  width: max-content;
  gap: var(--space-7);
  animation: marquee 26s linear infinite;
}
.logo-marquee:hover .logo-track{ animation-play-state: paused; }
@keyframes marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
.logo-item{
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--mad-white-55);
  filter: grayscale(1);
  opacity: .6;
  transition: opacity var(--dur-fast) var(--ease-mad), color var(--dur-fast) var(--ease-mad);
  white-space: nowrap;
}
.logo-item:hover{ opacity: 1; color: var(--mad-white); }

/* ==========================================================================
   PROBLEM (compact)
   ========================================================================== */
.problem-list-compact{
  display: flex;
  flex-direction: column;
  max-width: 760px;
  margin-bottom: var(--space-9);
}
.problem-compact-item{
  display: flex;
  align-items: baseline;
  gap: var(--space-5);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--border-secondary);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-weight: 600;
  color: var(--mad-white);
  letter-spacing: -0.01em;
}
.problem-list-compact .problem-compact-item:last-child{ border-bottom: 1px solid var(--border-secondary); }
.pc-num{
  font-size: 14px;
  font-weight: 700;
  color: var(--mad-red-500);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.solution-intro{ max-width: 640px; margin-bottom: var(--space-7); }
.solution-intro .eyebrow{ margin-bottom: var(--space-4); }
.solution-intro h3{ margin-bottom: var(--space-3); }

/* ==========================================================================
   SOLUTION / SERVICE CARDS
   ========================================================================== */
.service-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 1024px){ .service-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .service-grid{ grid-template-columns: 1fr; } }
.service-grid-compact .service-card{ min-height: 210px; padding: var(--space-5); }
.service-grid-compact .service-card h3{ margin-top: var(--space-5); font-size: clamp(1.15rem, 1.7vw, 1.4rem); }

.service-card{
  position: relative;
  background: var(--mad-black-2);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-5);
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease-mad), border-color var(--dur-fast) var(--ease-mad), background var(--dur-fast) var(--ease-mad);
}
.service-card:hover{
  transform: translateY(-4px);
  border-color: var(--mad-red-500);
  background: var(--mad-black-3);
}
.service-card .svc-num{
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--mad-white-55);
  transition: color var(--dur-fast) var(--ease-mad);
}
.service-card:hover .svc-num{ color: var(--mad-red-500); }
.service-card h3{
  margin-top: var(--space-6);
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.service-card p{ margin-top: var(--space-3); color: var(--mad-white-55); font-size: 14.5px; line-height: 1.5; }
.service-card .svc-arrow{
  align-self: flex-end;
  margin-top: var(--space-5);
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border-primary);
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--dur-fast) var(--ease-mad), border-color var(--dur-fast) var(--ease-mad), background var(--dur-fast) var(--ease-mad);
}
.service-card .svc-arrow svg{ width: 16px; height: 16px; }
.service-card:hover .svc-arrow{ transform: translate(3px,-3px); border-color: var(--mad-red-500); background: rgba(225,19,0,.1); }

/* ==========================================================================
   METHODOLOGY (estático, sem interação)
   ========================================================================== */
.method-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
}
.method-grid::before{
  content: "";
  position: absolute;
  top: 20px; left: 0; right: 0;
  height: 1px;
  background: var(--border-primary);
  z-index: 0;
}
.method-card{ position: relative; z-index: 1; }
.method-card .mc-num{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border-active);
  background: var(--mad-red-500);
  color: var(--mad-white);
  font-size: 14px; font-weight: 800;
  margin-bottom: var(--space-5);
}
.method-card h3{ font-size: 1.05rem; font-weight: 700; margin-bottom: var(--space-2); }
.method-card p{ color: var(--mad-white-55); font-size: 14px; line-height: 1.5; }

@media (max-width: 760px){
  .method-grid{ grid-template-columns: repeat(2, 1fr); gap: var(--space-7) var(--space-5); }
  .method-grid::before{ display: none; }
}

/* ==========================================================================
   CASES
   ========================================================================== */
.case-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 1024px){ .case-grid{ grid-template-columns: 1fr; } }
.case-grid-2{ grid-template-columns: repeat(2, 1fr); max-width: 920px; margin: 0 auto; }
@media (max-width: 760px){ .case-grid-2{ grid-template-columns: 1fr; } }

.case-card{
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--mad-black-2);
  transition: transform var(--dur-fast) var(--ease-mad), border-color var(--dur-fast) var(--ease-mad);
}
.case-card:hover{ transform: translateY(-4px); border-color: var(--mad-red-500); }

.case-visual{
  height: 220px;
  position: relative;
  overflow: hidden;
  background: var(--mad-black-3);
  border-bottom: 1px solid var(--border-primary);
}
.case-visual .glow{
  position: absolute; width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle, rgba(225,19,0,.35), transparent 70%);
  filter: blur(10px);
  transition: transform .8s var(--ease-mad);
  animation: glowPulse 5s ease-in-out infinite;
}
.case-card:hover .glow{ transform: scale(1.2); }
@keyframes glowPulse{
  0%, 100%{ opacity: .65; }
  50%{ opacity: 1; }
}
.case-visual .tag-big{
  position: absolute; bottom: var(--space-4); left: var(--space-5);
  font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mad-white-55);
}
.case-visual .mark-big{ position: absolute; top: var(--space-4); right: var(--space-5); font-size: 44px; font-weight: 800; color: rgba(255,255,255,.08); letter-spacing: -0.02em; }

.case-body{ padding: var(--space-5); }
.case-body h3{ font-size: 1.35rem; font-weight: 800; letter-spacing: -0.01em; text-transform: uppercase; }
.case-body .case-tags{ margin-top: var(--space-2); color: var(--mad-white-55); font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; }
.case-body .case-result{ margin-top: var(--space-4); font-size: 14.5px; color: var(--mad-white-80); line-height: 1.5; }
.case-body .case-result strong{ color: var(--mad-red-500); }
.case-body .case-link{
  margin-top: var(--space-5);
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.case-body .case-link svg{ width: 14px; height: 14px; color: var(--mad-red-500); transition: transform var(--dur-fast) var(--ease-mad); }
.case-card:hover .case-link svg{ transform: translate(3px,-3px); }

/* ==========================================================================
   PROVA: MÉTRICAS + DEPOIMENTO (combinados)
   ========================================================================== */
.proof{ border-top: 1px solid var(--border-secondary); border-bottom: 1px solid var(--border-secondary); }
.proof-grid{
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--space-9);
  align-items: center;
}
@media (max-width: 900px){
  .proof-grid{ grid-template-columns: 1fr; gap: var(--space-8); }
}

.proof-metrics{ display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-7) var(--space-5); }
.metric-item .metric-num{
  font-size: clamp(2.4rem, 4.4vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.metric-item .metric-num .unit{ color: var(--mad-red-500); }
.metric-item .metric-label{ margin-top: var(--space-3); font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mad-white-55); }

.proof-testimonial{
  position: relative;
  border-left: 1px solid var(--border-primary);
  padding-left: var(--space-8);
}
.quote-mark-inline{
  display: block;
  font-size: 42px;
  font-weight: 800;
  line-height: 1;
  color: var(--mad-red-500);
  opacity: .55;
  margin-bottom: var(--space-3);
  user-select: none;
}
.proof-testimonial blockquote{
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--mad-white);
  margin: 0 0 var(--space-5);
}
.testimonial-author{ position: relative; display: flex; flex-direction: column; gap: 2px; }
.testimonial-author .name{ font-weight: 700; font-size: 15px; }
.testimonial-author .company{ font-size: 13px; color: var(--mad-white-55); text-transform: uppercase; letter-spacing: .06em; }

@media (max-width: 900px){
  .proof-testimonial{ border-left: none; padding-left: 0; border-top: 1px solid var(--border-primary); padding-top: var(--space-7); }
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-list{ max-width: 820px; margin: 0 auto; }
.faq-item{ border-bottom: 1px solid var(--border-primary); }
.faq-item:first-child{ border-top: 1px solid var(--border-primary); }
.faq-question{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-6) 4px;
  background: none;
  border: none;
  color: var(--mad-white);
  text-align: left;
}
.faq-question .q-index{ color: var(--mad-white-55); font-weight: 700; font-size: 14px; margin-right: var(--space-4); }
.faq-question .q-text{ flex: 1; font-size: clamp(1rem, 1.6vw, 1.2rem); font-weight: 600; }
.faq-question .q-icon{
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--border-primary);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  transition: border-color var(--dur-fast) var(--ease-mad), background var(--dur-fast) var(--ease-mad);
}
.faq-question .q-icon::before, .faq-question .q-icon::after{
  content: "";
  position: absolute;
  background: var(--mad-white);
  transition: transform var(--dur-fast) var(--ease-mad);
}
.faq-question .q-icon::before{ width: 12px; height: 1.5px; }
.faq-question .q-icon::after{ width: 1.5px; height: 12px; }
.faq-item.open .faq-question .q-icon{ border-color: var(--mad-red-500); background: var(--mad-red-500); }
.faq-item.open .faq-question .q-icon::after{ transform: rotate(90deg) scaleY(0); }

.faq-answer{
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-med) var(--ease-mad);
}
.faq-answer-inner{ padding: 0 4px var(--space-6) 52px; color: var(--mad-white-80); font-size: 15px; line-height: 1.6; max-width: 640px; }

/* ==========================================================================
   FINAL CTA
   ========================================================================== */
.final-cta{
  text-align: center;
  position: relative;
  overflow: hidden;
  padding: var(--space-11) 0;
  border-top: 1px solid var(--border-secondary);
}
.final-cta .container{ position: relative; z-index: 1; max-width: 780px; }
.final-cta h2{ margin-bottom: var(--space-5); }
.final-cta .body-l{ margin: 0 auto var(--space-8); max-width: 560px; }
.final-cta .glow-bg{
  position: absolute; top: 50%; left: 50%;
  width: 800px; height: 500px;
  transform: translate(-50%,-50%);
  background: radial-gradient(ellipse, rgba(225,19,0,.14), transparent 65%);
  pointer-events: none;
  animation: glowBreathe 6s ease-in-out infinite;
}
@keyframes glowBreathe{
  0%, 100%{ opacity: .75; transform: translate(-50%,-50%) scale(1); }
  50%{ opacity: 1; transform: translate(-50%,-50%) scale(1.08); }
}
.final-cta-actions{ display: flex; align-items: center; justify-content: center; gap: var(--space-6); flex-wrap: wrap; margin-bottom: var(--space-6); }
.final-cta .hero-meta{ justify-content: center; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ background: var(--mad-black); padding: var(--space-8) 0 var(--space-6); }
.footer-main{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding-bottom: var(--space-7);
}
.footer-brand{ display: flex; align-items: center; gap: var(--space-4); }
.footer-brand .logo img{ width: 28px; height: 28px; }
.footer-brand .caption{ letter-spacing: .08em; }

.footer-links{ display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; }
.footer-links a{
  font-size: 14px;
  font-weight: 500;
  color: var(--mad-white-80);
  transition: color var(--dur-fast) var(--ease-mad);
}
.footer-links a:hover{ color: var(--mad-red-500); }

@media (max-width: 640px){
  .footer-main{ flex-direction: column; align-items: flex-start; gap: var(--space-5); }
  .footer-links{ gap: var(--space-4) var(--space-5); }
}

.footer-bottom{
  padding-top: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.footer-bottom .copy{ color: var(--mad-white-55); font-size: 13px; }
.footer-bottom .tagline{ font-weight: 800; letter-spacing: .04em; font-size: 14px; }
.footer-bottom .tagline .accent{ color: var(--mad-red-500); }

/* ==========================================================================
   CURSOR (desktop only)
   ========================================================================== */
.mad-cursor{
  position: fixed;
  top: 0; left: 0;
  width: 7px; height: 7px;
  background: var(--mad-red-500);
  border: none;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%,-50%);
  opacity: 0;
  transition: width var(--dur-fast) var(--ease-mad), height var(--dur-fast) var(--ease-mad), background var(--dur-fast) var(--ease-mad), border-color var(--dur-fast) var(--ease-mad), opacity var(--dur-fast) var(--ease-mad);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mad-cursor.active{ opacity: 1; }
.mad-cursor svg{ width: 11px; height: 11px; opacity: 0; transition: opacity var(--dur-fast) var(--ease-mad); color: var(--mad-red-500); }
.mad-cursor.hover{ width: 30px; height: 30px; background: rgba(225,19,0,.12); border: 1.5px solid var(--mad-red-500); }
.mad-cursor.hover svg{ opacity: 1; }
@media (hover: none), (max-width: 900px){ .mad-cursor{ display: none; } }

/* ==========================================================================
   WHATSAPP FLOAT
   ========================================================================== */
.wa-float{
  position: fixed;
  bottom: var(--space-6); right: var(--space-6);
  z-index: 90;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--mad-black-2);
  border: 1px solid var(--border-primary);
  display: flex; align-items: center; justify-content: center;
  color: var(--mad-white);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-mad), transform var(--dur-fast) var(--ease-mad), border-color var(--dur-fast) var(--ease-mad), background var(--dur-fast) var(--ease-mad);
}
.wa-float.visible{ opacity: 1; transform: translateY(0); pointer-events: auto; }
.wa-float:hover{ border-color: var(--mad-red-500); background: var(--mad-red-500); }
.wa-float svg{ width: 24px; height: 24px; }
@media (max-width: 640px){
  .wa-float{ width: 46px; height: 46px; bottom: var(--space-5); right: var(--space-5); }
}

/* Utility */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

@media (prefers-reduced-motion: reduce){
  .logo-track, .grid-cell .spark i, .case-visual .glow, .final-cta .glow-bg{ animation: none !important; }
  .reveal{ transition-duration: 1ms !important; }
}