/* ============================================================
   ALVES & MELLO — Design System aplicado ao site
   v2.0 — Tokens oficiais do Brand Book
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,600&family=Inter:wght@300;400;500;600&display=swap');

/* === TOKENS OFICIAIS === */
:root {
  /* Brand core */
  --brand-black: #111010;
  --brand-gray:  #cdcfd2;
  --brand-light: #e7e7e8;

  /* Aliases para compatibilidade com HTML legado */
  --black:       #111010;
  --ink:         #111010;

  /* Backgrounds */
  --white:        #ffffff;
  --bg-page:      #f7f7f8;
  --bg-soft:      #f1f2f3;
  --surface:      #ffffff;
  --surface-alt:  #f7f7f8;
  --surface-card: #ffffff;
  --surface-dark: #111010;

  /* Text */
  --text-primary:  #111010;
  --text-body:     #3c3f44;
  --text-secondary:#4a4d52;
  --text-muted:    #6a7078;
  --text-inverse:  #ffffff;

  /* Aliases legado */
  --text-main:  #111010;
  --text-sec:   #3c3f44;
  --text-soft:  #6a7078;
  --text-xsoft: #8a9098;
  --gray-neutral: #6a7078;

  /* Gray scale (aliases para compatibilidade) */
  --gray-900: #1a1a1a;
  --gray-700: #3c3f44;
  --gray-500: #6a7078;
  --gray-300: #cdcfd2;
  --gray-200: #d9dbde;
  --gray-100: #e7e7e8;
  --gray-50:  #f7f7f8;

  /* Borders */
  --border-subtle:  #e7e7e8;
  --border-default: #d9dbde;
  --border-strong:  #cdcfd2;

  /* CSS var aliases usadas inline no HTML */
  --border:       #d9dbde;
  --border-light: #e7e7e8;
  --border-dark:  rgba(205, 207, 210, 0.15);

  /* Cinza accents — identidade preto, branco e cinza */
  --accent-mineral: #6a7078;
  --accent-stone:   #4a4d52;
  --accent-sand:    #cdcfd2;

  /* Feedback */
  --success: #2f6b4f;
  --warning: #a06a2c;
  --error:   #9a3e3e;
  --info:    #4b5e7a;

  /* Fonts */
  --font-head: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Radius — Design System oficial */
  --radius-sm:  8px;
  --radius:     12px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-2xl: 24px;

  /* Shadows */
  --shadow-sm:    0 8px 24px rgba(17, 16, 16, 0.06);
  --shadow-md:    0 12px 32px rgba(17, 16, 16, 0.10);
  --shadow-focus: 0 0 0 4px rgba(17, 16, 16, 0.10);

  /* Aliases usados no CSS original */
  --shadow-ring:  0 0 0 1px rgba(17, 16, 16, 0.07);
  --shadow-card:  var(--shadow-sm);
  --shadow-hover: var(--shadow-md);
  --shadow-float: 0 16px 48px rgba(17, 16, 16, 0.12);
  --shadow-lg:    var(--shadow-md);

  /* Motion */
  --ease:        cubic-bezier(.25,.46,.45,.94);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --ease-in:     cubic-bezier(.55,.055,.675,.19);
  --duration:    .15s;
  --duration-std: .28s;

  /* Layout */
  --max-w:      1200px;
  --max-w-text: 680px;

  /* Spacing (base 4px) */
  --space-4:  4px;  --space-8: 8px;   --space-12: 12px;
  --space-16: 16px; --space-24: 24px; --space-32: 32px;
  --space-48: 48px; --space-64: 64px; --space-80: 80px;
  --space-96: 96px; --space-120: 120px;

  /* Alias legado */
  --bg: #f7f7f8;
}

/* === RESET === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; font-size: 16px }
body {
  font-family: var(--font-body);
  color: var(--text-body);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
}
img { max-width: 100%; display: block }
a { color: inherit; text-decoration: none }
ul, ol { list-style: none }
button { cursor: pointer; border: none; background: none; font-family: inherit }
input, textarea, select { font-family: inherit; font-size: inherit }

/* === LAYOUT === */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 32px }
.section { padding: 96px 0 }
.section--alt { background: var(--bg-page) }
.section--dark { background: var(--surface-dark) }

/* === TIPOGRAFIA === */
h1, h2, h3, h4 {
  font-family: var(--font-head);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 5vw, 3.2rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.025em }
h2 { font-size: clamp(1.8rem, 3.2vw, 2.4rem); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); font-weight: 600; font-family: var(--font-body); letter-spacing: -0.01em }
h4 { font-size: 1rem; font-weight: 600; font-family: var(--font-body); letter-spacing: -0.01em }
p { color: var(--text-body); line-height: 1.75; letter-spacing: -0.01em; text-wrap: pretty }
.lead { font-size: clamp(1rem, 1.6vw, 1.1rem); color: var(--text-body); line-height: 1.75; letter-spacing: -0.01em }

.section-label {
  display: inline-block;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-mineral);
  margin-bottom: 12px;
  font-family: var(--font-body);
  font-feature-settings: "kern" 1, "cpsp" 1;
}
.section-title { margin-bottom: 16px }
.section-intro { max-width: var(--max-w-text); margin-bottom: 48px; font-size: 1rem; color: var(--text-secondary); line-height: 1.75 }

/* === SKIP LINK === */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  background: var(--brand-black);
  color: var(--white);
  padding: 10px 18px;
  border-radius: 0 0 var(--radius) var(--radius);
  font-size: .85rem;
  font-weight: 600;
  z-index: 9999;
  transition: top var(--duration) var(--ease);
}
.skip-link:focus { top: 0 }

/* === TOP BAR === */
.topbar {
  background: var(--brand-black);
  color: var(--brand-gray);
  font-size: .75rem;
  text-align: center;
  padding: 9px 24px;
  letter-spacing: .01em;
  font-family: var(--font-body);
}

/* === HEADER === */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border-subtle);
  transition: box-shadow var(--duration) var(--ease);
}
.header.scrolled {
  box-shadow: var(--shadow-sm);
}

.header-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 20px }
.logo img { height: 44px; width: auto }

.nav { display: flex; align-items: center; gap: 2px }
.nav-link {
  padding: 6px 12px;
  font-size: .8rem;
  font-weight: 500;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
  white-space: nowrap;
}
.nav-link:hover { background: var(--bg-soft); color: var(--text-primary) }
.nav-link.active { color: var(--text-primary); font-weight: 600 }

/* Dropdown */
.nav-item { position: relative }
.nav-item:hover .dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0) }
.dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  min-width: 220px;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease), visibility var(--duration);
  z-index: 200;
  padding: 8px;
}
.dropdown a {
  display: block;
  padding: 9px 14px;
  font-size: .85rem;
  font-weight: 500;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}
.dropdown a:hover { background: var(--bg-soft); color: var(--text-primary) }

/* Mobile nav */
.hamburger { display: none; flex-direction: column; gap: 5px; padding: 8px; width: 40px; min-width: 44px; min-height: 44px; align-items: center; justify-content: center }
.hamburger span { display: block; height: 1.5px; background: var(--brand-black); border-radius: 2px; width: 20px; transition: var(--duration) var(--ease) }
.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(20px);
  z-index: 300;
  padding: 28px 32px;
  overflow-y: auto;
  flex-direction: column;
}
.mobile-nav.open { display: flex }
.mobile-nav-close {
  align-self: flex-end;
  font-size: 1.2rem;
  padding: 8px;
  color: var(--text-muted);
  margin-bottom: 24px;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mobile-nav-link {
  display: block;
  padding: 15px 0;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-subtle);
}
.mobile-nav-sub a {
  display: block;
  padding: 10px 16px;
  font-size: .95rem;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-subtle);
}
.mobile-nav-actions { margin-top: 36px; display: flex; flex-direction: column; gap: 12px }

/* === BOTÕES — Design System: 12px radius, não pílula === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: var(--radius);   /* 12px — Design System */
  font-weight: 600;
  font-size: .875rem;
  font-family: var(--font-body);
  transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease), transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
  white-space: nowrap;
  border: 1.5px solid transparent;
  letter-spacing: -0.01em;
  cursor: pointer;
}

.btn-primary {
  background: var(--brand-black);
  color: var(--white);
  border-color: var(--brand-black);
}
.btn-primary:hover { background: #2a2828; border-color: #2a2828 }
.btn-primary:active { transform: scale(.97) }

.btn-outline {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--brand-black);
}
.btn-outline:hover { background: var(--bg-soft) }
.btn-outline:active { transform: scale(.97) }

.btn-white { background: var(--white); color: var(--brand-black) }
.btn-white:hover { background: var(--brand-light) }
.btn-white:active { transform: scale(.97) }

.btn-white-outline {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, .5);
}
.btn-white-outline:hover { border-color: rgba(255, 255, 255, .8); background: rgba(255, 255, 255, .08) }
.btn-white-outline:active { transform: scale(.97) }

.btn-whatsapp { background: #25d366; color: #fff; border-color: #25d366 }
.btn-whatsapp:hover { background: #1fc55e }
.btn-whatsapp:active { transform: scale(.97) }

.btn-lg { padding: 13px 28px; font-size: .95rem }
.btn-sm { padding: 7px 14px; font-size: .8rem }
.btn-group { display: flex; flex-wrap: wrap; gap: 12px; align-items: center }

/* === HERO === */
.hero {
  padding: 96px 0 80px;
  background: var(--bg-page);
  position: relative;
  overflow: hidden;
}
.hero-content { max-width: 760px }
.hero-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 24px;
}
.hero-label::before { content: ''; display: block; width: 24px; height: 1px; background: var(--brand-gray) }
.hero h1 { margin-bottom: 24px; max-width: 720px }
.hero .lead { margin-bottom: 40px; max-width: 540px }
.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--border-subtle);
}

/* Hero — vídeo de fundo */
.hero--video {
  background: var(--brand-black);
  padding: 140px 0 80px;
  min-height: 72vh;
  display: flex;
  align-items: center;
}
.hero-video-bg {
  position: absolute;
  left: 0; right: 0;
  top: -15%;
  width: 100%;
  height: 130%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  will-change: transform;
  transform: translateY(var(--vpy, 0));
}
.hero--video::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(17, 16, 16, .82) 0%,
    rgba(17, 16, 16, .58) 55%,
    rgba(17, 16, 16, .38) 100%
  );
  z-index: 1;
}
.hero--video .container { position: relative; z-index: 2; width: 100% }
.hero--video .hero-deco { z-index: 2 }
.hero--video .hero-content { max-width: 680px; text-align: left; margin-right: auto }
.hero--video .hero-label { color: rgba(255, 255, 255, .5) }
.hero--video .hero-label::before { background: rgba(205, 207, 210, .3) }
.hero--video h1 { color: var(--white) }
.hero--video .lead { color: rgba(255, 255, 255, .72) }
.hero--video .hero-badges { border-top-color: rgba(255, 255, 255, .1) }
.hero--video .badge {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .68);
  backdrop-filter: blur(8px);
}
.hero--video .hero-deco--orb {
  background: radial-gradient(circle at 40% 40%, rgba(205, 207, 210, .05) 0%, transparent 60%);
}
.hero--video .hero-deco--ring { border-color: rgba(205, 207, 210, .08) }
.hero--video .hero-deco--line {
  background: linear-gradient(180deg, transparent, rgba(205, 207, 210, .07), transparent);
}
.hero-video-stats {
  display: flex;
  align-items: center;
  margin-top: 52px;
  padding-top: 36px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  max-width: 400px;
}
.hero-video-stat { flex: 1; text-align: center }

/* === BADGES === */
.badge {
  background: var(--white);
  border: 1px solid var(--border-default);
  border-radius: 6px;
  padding: 5px 14px;
  font-size: .75rem;
  font-weight: 500;
  color: var(--text-secondary);
}

/* === STATS BAR === */
.stats-bar { background: var(--brand-black); padding: 56px 0; border-top: 1px solid rgba(255, 255, 255, .04) }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 }
.stat-item {
  text-align: center;
  padding: 0 32px;
  border-right: 1px solid rgba(205, 207, 210, .12);
}
.stat-item:last-child { border: none }
.stat-number {
  display: block;
  font-family: var(--font-head);
  font-size: 3rem;
  font-weight: 600;
  color: var(--white);
  letter-spacing: -0.035em;
  line-height: 1;
  margin-bottom: 10px;
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-variant-numeric: tabular-nums lining-nums;
}
.stat-label { font-size: .72rem; color: var(--brand-gray); letter-spacing: .015em }

/* === DOIS COLUNAS === */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center }
.two-col--reverse .two-col-image { order: -1 }

/* === BENEFITS LIST === */
.benefits-list { display: flex; flex-direction: column; gap: 24px }
.benefit-item { display: flex; gap: 16px; align-items: flex-start }
.benefit-check {
  width: 22px;
  height: 22px;
  background: var(--brand-black);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s var(--ease-spring);
}
.benefit-check::after { content: '✓'; font-size: .6rem; color: var(--white); font-weight: 700 }
.benefit-item:hover .benefit-check { transform: scale(1.2) }
.benefit-item h4 { margin-bottom: 4px; font-size: .95rem; font-family: var(--font-body) }
.benefit-item p { font-size: .875rem; color: var(--text-muted) }

/* === CARDS === */
.cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px }
.cards-grid--2 { grid-template-columns: repeat(2, 1fr) }
.cards-grid--4 { grid-template-columns: repeat(4, 1fr) }

.card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-default);
  transition: background var(--duration-std) var(--ease), box-shadow var(--duration-std) var(--ease), transform var(--duration-std) var(--ease);
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px) }
.card-icon {
  width: 44px;
  height: 44px;
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: var(--text-secondary);
  font-size: 1.15rem;
  transition: transform 0.4s var(--ease-spring), background var(--duration-std) var(--ease);
}
.card-icon svg { flex-shrink: 0 }
.card:hover .card-icon,
.service-card:hover .card-icon {
  transform: scale(1.12) rotate(-4deg);
  background: var(--brand-light);
  color: var(--brand-black);
}
.card h3 { margin-bottom: 10px; font-size: 1.05rem; font-family: var(--font-body); font-weight: 600; letter-spacing: -0.01em; color: var(--text-primary) }
.card p { font-size: .875rem; margin-bottom: 20px }
.card-link {
  font-size: .85rem;
  font-weight: 600;
  color: var(--accent-mineral);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap var(--duration) var(--ease-spring), color var(--duration) var(--ease);
}
.card-link::after { content: '→' }
.card:hover .card-link { gap: 10px; color: var(--accent-stone) }

/* Service cards */
.service-card {
  display: block;
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-default);
  transition: box-shadow var(--duration-std) var(--ease), transform var(--duration-std) var(--ease);
  position: relative;
  touch-action: manipulation;
}
.service-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px) }
.service-card h3 { font-size: .95rem; margin-bottom: 8px; padding-right: 24px; font-family: var(--font-body); font-weight: 600; color: var(--text-primary) }
.service-card p { font-size: .85rem; color: var(--text-secondary) }
.service-card::after {
  content: '→';
  position: absolute;
  top: 28px;
  right: 24px;
  font-size: 1rem;
  color: var(--text-muted);
  transition: transform 0.4s var(--ease-spring), color 0.24s var(--ease);
}
.service-card:hover::after { transform: translate(4px, -4px); color: var(--accent-mineral) }

/* Card numbering */
.cards-grid { counter-reset: service-counter }
.service-card { counter-increment: service-counter }
.service-card::before {
  content: counter(service-counter, decimal-leading-zero);
  position: absolute;
  bottom: 24px;
  right: 28px;
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--border-default);
  font-family: var(--font-body);
  transition: color var(--duration) var(--ease);
}
.service-card:hover::before { color: var(--text-muted) }

/* === FAQ === */
.faq-list { display: flex; flex-direction: column }
.faq-item { border-bottom: 1px solid var(--border-subtle) }
.faq-question {
  width: 100%;
  text-align: left;
  padding: 22px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-weight: 600;
  font-size: .95rem;
  color: var(--text-primary);
  font-family: var(--font-body);
  transition: color var(--duration) var(--ease);
}
.faq-question:hover { color: var(--accent-mineral) }
.faq-icon {
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--border-default);
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 300;
  color: var(--text-muted);
  transition: transform 0.4s var(--ease-spring), background 0.24s var(--ease), border-color 0.24s var(--ease), color 0.24s var(--ease);
  min-width: 28px;
}
.faq-item.open .faq-icon {
  transform: rotate(45deg);
  background: var(--brand-black);
  border-color: var(--brand-black);
  color: var(--white);
}
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .36s var(--ease) }
.faq-answer p { padding-bottom: 22px; font-size: .9rem; color: var(--text-secondary) }

/* === CTA BAND === */
.cta-band {
  background: var(--bg-page);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  padding: 52px 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.cta-band h3 { font-size: 1.35rem; margin-bottom: 8px; font-family: var(--font-head); color: var(--text-primary) }
.cta-band p { font-size: .9rem; color: var(--text-secondary); max-width: 480px }

/* === PAGE HERO === */
.page-hero {
  background: var(--brand-black);
  padding: 72px 0 56px;
}
.page-hero-label {
  display: block;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand-gray);
  margin-bottom: 16px;
}
.page-hero h1 { color: var(--white); max-width: 700px; margin-bottom: 20px }
.page-hero .lead { color: var(--brand-gray); max-width: 580px }

.breadcrumb { display: flex; align-items: center; gap: 8px; margin-bottom: 32px; font-size: .78rem; color: var(--brand-gray) }
.breadcrumb a { color: var(--brand-gray); transition: color var(--duration) var(--ease) }
.breadcrumb a:hover { color: var(--white) }
.breadcrumb-sep { opacity: .4 }

/* === CTA SECTION === */
.cta-section { background: var(--brand-black); padding: 96px 0; text-align: center }
.cta-section h2 { color: var(--white); margin-bottom: 16px; max-width: 600px; margin-left: auto; margin-right: auto }
.cta-section p { color: var(--brand-gray); margin-bottom: 40px; max-width: 440px; margin-left: auto; margin-right: auto }

/* === VALUES GRID (dark section) === */
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px }
.value-item {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(205, 207, 210, .1);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.value-item:hover {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(205, 207, 210, .2);
  transform: translateY(-2px);
}
.value-item h4 { color: var(--white); margin-bottom: 8px; font-size: .95rem; font-family: var(--font-body) }
.value-item p { font-size: .85rem; color: var(--brand-gray) }

/* === STEPS — Vertical timeline com tracker ===
   Usado nas colunas laterais das calculadoras e outros contextos estreitos */
.steps-list {
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Linha vertical conectora */
.steps-list::before {
  content: '';
  position: absolute;
  left: 19px;
  top: 0; bottom: 0;
  width: 1.5px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--border-default) 8%,
    var(--border-default) 92%,
    transparent 100%
  );
  z-index: 0;
}

.step-item {
  display: flex;
  gap: 20px;
  padding: 18px 0;
  border-bottom: none;
  position: relative;
}

.step-item:last-child { border: none }

.step-num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brand-black);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .02em;
  flex-shrink: 0;
  margin-top: 2px;
  position: relative;
  z-index: 1;
  transition: transform .4s var(--ease-spring), background .24s var(--ease);
}

.step-item:hover .step-num { transform: scale(1.1) rotate(-5deg) }

/* Passo com somente um parágrafo: estilo de título */
.step-item > div:last-child > p:only-child {
  font-size: .92rem;
  font-weight: 600;
  color: var(--text-primary);
  font-family: var(--font-body);
  letter-spacing: -.01em;
  line-height: 1.45;
}

.step-item h4 { margin-bottom: 4px; font-size: .95rem; font-family: var(--font-body); font-weight: 600 }
.step-item p  { font-size: .875rem; color: var(--text-secondary); line-height: 1.65; margin: 0 }

/* ============================================================
   PROCESS FLOW — Blocos "Como funciona"
   Horizontal no desktop (fluxo da esquerda para direita)
   Vertical no mobile (timeline com tracker)
   ============================================================ */

.process-flow {
  display: flex;
  align-items: flex-start;
  gap: 0;
  position: relative;
  margin-top: 52px;
}

/* ---- Trilha horizontal que conecta os círculos ---- */
.process-flow::before {
  content: '';
  position: absolute;
  top: 19px;          /* centro vertical do círculo de 40px */
  left: 0; right: 0;
  height: 1.5px;
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--border-default) 5%,
    var(--border-default) 95%,
    transparent 100%
  );
  z-index: 0;
}

/* ---- Cada passo ---- */
.process-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 10px;
  min-width: 0;
  cursor: default;
}

/* ---- Círculo numerado ---- */
.process-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brand-black);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  font-variant-numeric: lining-nums;
  position: relative;
  z-index: 1;
  margin-bottom: 20px;
  flex-shrink: 0;
  /* Anel que separa o círculo da trilha — usa a cor de fundo da seção */
  box-shadow: 0 0 0 4px var(--white);
  transition:
    transform .4s var(--ease-spring),
    background .24s var(--ease),
    box-shadow .24s var(--ease);
}

/* Quando a seção tem fundo cinza, o anel usa a mesma cor */
.section--alt .process-circle             { box-shadow: 0 0 0 4px var(--bg-page) }
.section--alt .process-step:hover .process-circle { box-shadow: 0 0 0 4px var(--bg-page), 0 6px 20px rgba(106,112,120,.3) }

.process-step:hover .process-circle {
  transform: scale(1.12) rotate(-6deg);
  background: var(--accent-mineral);
  box-shadow: 0 0 0 4px var(--white), 0 6px 20px rgba(106,112,120,.3);
}

/* ---- Título do passo ---- */
.process-step h4 {
  font-size: .84rem;
  font-weight: 600;
  color: var(--text-secondary);
  font-family: var(--font-body);
  letter-spacing: -0.01em;
  line-height: 1.5;
  margin: 0;
  transition: color var(--duration) var(--ease);
}

.process-step:hover h4 { color: var(--text-primary) }

/* Descrição opcional */
.process-step p {
  font-size: .78rem;
  color: var(--text-muted);
  margin-top: 6px;
  line-height: 1.6;
}

/* ============================================================
   PROCESS FLOW — Responsivo
   ============================================================ */

/* Tablet: 3 passos por linha */
@media (max-width: 960px) {
  .process-flow {
    flex-wrap: wrap;
    gap: 0;
  }

  .process-flow::before { display: none }

  .process-step {
    flex: 0 0 33.333%;
    padding: 0 12px 36px;
  }
}

/* Mobile: vertical com trilha no lado esquerdo */
@media (max-width: 600px) {
  .process-flow {
    flex-direction: column;
    gap: 0;
  }

  /* Trilha vertical */
  .process-flow::before {
    display: block;
    top: 0; bottom: 0;
    left: 19px; right: auto;
    width: 1.5px; height: auto;
    background: linear-gradient(
      to bottom,
      transparent 0%,
      var(--border-default) 5%,
      var(--border-default) 95%,
      transparent 100%
    );
  }

  .process-step {
    flex: none;
    flex-direction: row;
    text-align: left;
    align-items: flex-start;
    gap: 16px;
    padding: 0 0 28px;
  }

  .process-step:last-child { padding-bottom: 0 }

  .process-circle {
    margin-bottom: 0;
    flex-shrink: 0;
    box-shadow: 0 0 0 4px var(--bg-page);
  }

  .process-step h4 { padding-top: 9px; font-size: .88rem }
}

/* === FORMULÁRIO === */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
.form-group { display: flex; flex-direction: column; gap: 7px }
.form-group.full { grid-column: 1 / -1 }
.form-group label { font-size: .82rem; font-weight: 500; color: var(--text-primary) }
.form-group input,
.form-group select,
.form-group textarea {
  padding: 12px 14px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  font-size: .9rem;
  color: var(--text-primary);
  background: var(--white);
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
  outline: none;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--text-muted) }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--brand-black);
  box-shadow: var(--shadow-focus);
  transform: translateY(-1px);
}
.form-group textarea { resize: vertical; min-height: 120px }
.form-checkbox { display: flex; align-items: flex-start; gap: 10px; font-size: .8rem; color: var(--text-secondary) }
.form-checkbox input { margin-top: 2px; flex-shrink: 0; accent-color: var(--brand-black) }

/* === CALCULADORA === */
.calc-box {
  background: var(--bg-page);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  padding: 44px;
}
.calc-result {
  background: var(--brand-black);
  border-radius: var(--radius-lg);
  padding: 32px;
  margin-top: 24px;
  display: none;
}
.calc-result.show { display: block }
.calc-result-sn { display: none }
.calc-result-sn.show { display: block }
.result-row { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid rgba(205, 207, 210, .1); font-size: .9rem }
.result-row:last-child { border: none; padding-top: 18px; margin-top: 8px }
.result-row span:first-child { color: var(--brand-gray) }
.result-row span:last-child { color: var(--white); font-weight: 600 }
.result-row.total span { font-size: 1.05rem; color: var(--white); font-weight: 700 }

/* === FOOTER === */
.footer { background: var(--brand-black); padding: 64px 0 0 }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 48px }
.footer-brand p { font-size: .82rem; color: var(--brand-gray); margin-top: 16px; max-width: 240px; line-height: 1.75 }
.footer-logo { height: 38px; width: auto }
.footer-col h5 {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--brand-gray);
  margin-bottom: 16px;
  font-family: var(--font-body);
}
.footer-col a {
  display: block;
  font-size: .82rem;
  color: var(--brand-gray);
  margin-bottom: 8px;
  line-height: 2;
  transition: color var(--duration) var(--ease);
}
.footer-col a:hover { color: var(--white); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px }
.footer-contact { font-size: .82rem; color: var(--brand-gray); margin-bottom: 8px; display: flex; gap: 8px }
.footer-bottom {
  border-top: 1px solid rgba(205, 207, 210, .1);
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-bottom p,
.footer-bottom a { font-size: .74rem; color: var(--text-muted) }
.footer-bottom a:hover { color: var(--brand-gray) }

/* === WHATSAPP FLOAT === */
.whatsapp-float {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 10px;
}
.whatsapp-label {
  background: rgba(17, 16, 16, .90);
  backdrop-filter: blur(12px);
  color: var(--white);
  font-size: .78rem;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: var(--radius);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(8px);
  transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease);
  pointer-events: none;
}
.whatsapp-float:hover .whatsapp-label { opacity: 1; transform: translateX(0) }
.whatsapp-btn {
  width: 52px;
  height: 52px;
  background: #25d366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(37, 211, 102, .4);
  transition: transform var(--duration) var(--ease-spring), box-shadow var(--duration) var(--ease);
}
.whatsapp-btn:hover { transform: scale(1.1); box-shadow: 0 8px 32px rgba(37, 211, 102, .5) }
.whatsapp-btn svg { width: 26px; height: 26px; fill: #fff }

/* === COOKIE BAR === */
.cookie-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: rgba(17, 16, 16, .96);
  backdrop-filter: blur(20px);
  color: var(--white);
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  z-index: 600;
  transform: translateY(100%);
  transition: transform .4s var(--ease);
}
.cookie-bar.show { transform: translateY(0) }
.cookie-bar p { font-size: .82rem; color: var(--brand-gray) }
.cookie-bar a { color: var(--white); text-decoration: underline; text-underline-offset: 2px }
.cookie-bar-actions { flex-shrink: 0 }

/* === PILLAR GRID === */
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.pillar-item {
  padding: 36px 32px;
  border-right: 1px solid var(--border-default);
  transition: background var(--duration) var(--ease);
  overflow: hidden;
}
.pillar-item:last-child { border: none }
.pillar-item:hover { background: var(--bg-soft) }
.pillar-item > * { transition: transform 0.35s var(--ease-spring) }
.pillar-item:hover > * { transform: translateX(5px) }
.pillar-item h4 { margin-bottom: 8px; font-family: var(--font-body) }
.pillar-item p { font-size: .875rem; color: var(--text-secondary) }

/* === HERO LAYOUT === */
.hero-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 64px;
  align-items: center;
}

/* === HERO MEDIA === */
.hero-media {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  animation: am-scale-in .9s var(--ease) both;
  animation-delay: .52s;
  box-shadow: var(--shadow-float);
}
.hero-media img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  object-position: center 15%;
  display: block;
}
.hero-media::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 45%, rgba(17, 16, 16, .72) 100%);
  z-index: 1;
}
.hero-media-stats {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 2;
  padding: 28px 24px;
  display: flex;
  align-items: center;
}
.hero-media-stat { flex: 1; text-align: center }
.hero-media-num {
  display: block;
  font-family: var(--font-head);
  font-size: 1.9rem;
  font-weight: 600;
  color: var(--white);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 5px;
}
.hero-media-label {
  display: block;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}
.hero-media-sep {
  width: 1px;
  height: 40px;
  background: rgba(255, 255, 255, .18);
  flex-shrink: 0;
}

/* === ABOUT MEDIA === */
.about-media {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-float);
}
.about-media img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform .8s var(--ease);
}
.about-media:hover img { transform: scale(1.03) }
.about-media-tag {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(16px);
  border-radius: var(--radius);
  padding: 8px 16px;
  font-size: .74rem;
  color: var(--text-primary);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: var(--shadow-sm);
}

/* === DIFFERENTIALS LIST === */
.differentials-list { display: flex; flex-direction: column; gap: 20px }
.differential-item {
  padding-left: 20px;
  border-left: 2.5px solid var(--accent-mineral);
}
.differential-item h4 { margin-bottom: 5px; font-size: .95rem; font-family: var(--font-body); color: var(--text-primary) }
.differential-item p { font-size: .875rem; color: var(--text-secondary); margin: 0 }

/* === ATMOSPHERE SECTION === */
.section-atmosphere { padding: 0 0 96px }
.atmosphere-wrap {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  margin: 0 32px;
  box-shadow: var(--shadow-float);
}
.atmosphere-wrap img {
  width: 100%;
  aspect-ratio: 16/6;
  object-fit: cover;
  object-position: center 35%;
  display: block;
}
.atmosphere-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    rgba(17, 16, 16, .82) 0%,
    rgba(17, 16, 16, .55) 50%,
    rgba(17, 16, 16, .15) 100%
  );
  z-index: 1;
}
.atmosphere-overlay {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 64px;
  z-index: 2;
  max-width: 540px;
}
.atmosphere-overlay h2 {
  color: var(--white);
  margin-top: 12px;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .3);
}

/* Parallax */
[data-parallax] { transform: translateY(var(--py, 0)); will-change: transform }

/* === HERO DECO === */
.hero-deco {
  position: absolute;
  pointer-events: none;
  will-change: transform;
  transform: translate(var(--mx, 0), calc(var(--my, 0) + var(--py, 0)));
}
.hero-deco--orb {
  width: 560px; height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, rgba(205, 207, 210, .04) 0%, transparent 60%);
  right: -80px; top: -160px;
}
.hero-deco--ring {
  width: 280px; height: 280px;
  border-radius: 50%;
  border: 1px solid rgba(205, 207, 210, .08);
  right: 160px; bottom: -80px;
}
.hero-deco--line {
  width: 1px; height: 200px;
  background: linear-gradient(180deg, transparent, rgba(205, 207, 210, .09), transparent);
  left: 44%; top: 10%;
}

/* === PROOF CARD === */
.hero-proof { animation: am-scale-in .9s var(--ease) both; animation-delay: .55s; position: relative; z-index: 1 }
.proof-card {
  background: var(--brand-black);
  border-radius: var(--radius-xl);
  padding: 36px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(205, 207, 210, .08), var(--shadow-float);
}
.proof-card::before {
  content: '';
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .12), transparent);
}
.proof-header { margin-bottom: 28px }
.proof-tag { font-size: .64rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .32) }
.proof-stats { display: flex; flex-direction: column }
.proof-stat { padding: 18px 0 }
.proof-number {
  display: block;
  font-family: var(--font-head);
  font-size: 2.8rem;
  font-weight: 600;
  color: var(--white);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 5px;
}
.proof-label { font-size: .7rem; color: rgba(255, 255, 255, .35); letter-spacing: .01em }
.proof-divider { height: 1px; background: rgba(205, 207, 210, .1) }
.proof-footer {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(205, 207, 210, .1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.proof-badge { display: flex; align-items: center; gap: 7px; font-size: .7rem; color: rgba(255, 255, 255, .4) }
.proof-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
  animation: proof-pulse 2.5s ease-in-out infinite;
}
.proof-tagline { font-size: .65rem; color: rgba(255, 255, 255, .25); letter-spacing: .02em }
@keyframes proof-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55) }
  50%       { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0) }
}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 960px) {
  .container { padding: 0 24px }
  .hero { padding: 72px 0 56px }
  .hero--video { padding: 110px 0 72px; min-height: 65vh }
  .hero-layout { grid-template-columns: 1fr; gap: 40px }
  .hero-media { max-width: 480px; margin: 0 auto }
  .hero-media img { aspect-ratio: 3/2 }
  .hero-deco { display: none }
  .two-col { grid-template-columns: 1fr; gap: 40px }
  .atmosphere-wrap { margin: 0 24px }
  .atmosphere-overlay { left: 40px; right: 40px }
  .atmosphere-wrap img { aspect-ratio: 4/3 }
  .cards-grid, .cards-grid--4 { grid-template-columns: 1fr 1fr }
  .stats-grid { grid-template-columns: repeat(2, 1fr) }
  .stat-item { padding: 28px 24px; border-right: none; border-bottom: 1px solid rgba(205, 207, 210, .12) }
  .stat-item:nth-child(3), .stat-item:last-child { border-bottom: none }
  .footer-grid { grid-template-columns: 1fr 1fr }
  .nav, .header .btn-primary { display: none }
  .hamburger { display: flex }
  .cta-band { flex-direction: column; text-align: center; padding: 40px 36px }
  .values-grid { grid-template-columns: 1fr 1fr }
  .pillar-grid { grid-template-columns: 1fr 1fr }
  .pillar-item { border-bottom: 1px solid var(--border-default) }
  .pillar-item:nth-child(2) { border-right: none }
  .pillar-item:nth-child(3) { border-right: 1px solid var(--border-default) }
  .pillar-item:last-child { border-right: none; border-bottom: none }
  .pillar-item:nth-child(3) { border-bottom: none }
}

@media (max-width: 600px) {
  html { font-size: 15px }
  .container { padding: 0 20px }
  .section { padding: 64px 0 }
  .section-atmosphere { padding: 0 0 64px }
  .hero { padding: 56px 0 48px }
  .hero--video { padding: 88px 0 64px; min-height: auto }
  .hero-media img { aspect-ratio: 1/1 }
  .atmosphere-wrap { margin: 0 16px; border-radius: var(--radius-lg) }
  .atmosphere-wrap img { aspect-ratio: 1/1; object-position: center 20% }
  .atmosphere-overlay { left: 28px; right: 28px; top: auto; transform: none; bottom: 32px }
  .atmosphere-overlay h2 { font-size: 1.35rem }
  .about-media img { aspect-ratio: 3/2 }
  h1 { font-size: 2.2rem; letter-spacing: -0.025em }
  h2 { font-size: 1.65rem }
  .btn-lg { padding: 12px 22px }
  .cards-grid, .cards-grid--2, .cards-grid--4 { grid-template-columns: 1fr }
  .stats-grid { grid-template-columns: 1fr 1fr }
  .stat-item { padding: 24px 16px; border-right: none; border-bottom: 1px solid rgba(205, 207, 210, .12) }
  .stat-item:nth-child(3), .stat-item:last-child { border-bottom: none }
  .stat-number { font-size: 2.4rem }
  .footer-grid { grid-template-columns: 1fr }
  .footer-bottom { flex-direction: column; text-align: center }
  .values-grid { grid-template-columns: 1fr }
  .cta-band { padding: 28px 24px }
  .calc-box { padding: 24px 20px }
  .page-hero { padding: 48px 0 36px }
  .pillar-grid { grid-template-columns: 1fr }
  .pillar-item { border-right: none; border-bottom: 1px solid var(--border-default) }
  .pillar-item:last-child { border-bottom: none }
  .cookie-bar { flex-direction: column; text-align: center; gap: 12px }
  .form-grid { grid-template-columns: 1fr }
  .form-group.full { grid-column: 1 }
  .stats-bar { padding: 48px 0 }
  .two-col { gap: 32px }
  .whatsapp-float { bottom: 20px; right: 20px }
}

@media (max-width: 380px) {
  .btn-group { flex-direction: column; width: 100% }
  .btn-group .btn { width: 100%; justify-content: center }
  .stats-grid { grid-template-columns: 1fr }
  .stat-item { border-bottom: 1px solid rgba(205, 207, 210, .12); border-right: none }
  .stat-item:last-child { border-bottom: none }
}

/* ============================================================
   MOTION — Framer-inspired, alinhado ao Design System
   ============================================================ */

@keyframes am-fade-up {
  from { opacity: 0; transform: translateY(20px) }
  to   { opacity: 1; transform: translateY(0) }
}
@keyframes am-fade-in {
  from { opacity: 0 }
  to   { opacity: 1 }
}
@keyframes am-scale-in {
  from { opacity: 0; transform: scale(.97) }
  to   { opacity: 1; transform: scale(1) }
}
@keyframes am-float {
  0%, 100% { transform: translateY(0) }
  50%       { transform: translateY(-5px) }
}

/* Entrada do hero */
.hero-content .hero-label { animation: am-fade-up .7s var(--ease) both; animation-delay: .05s }
.hero-content h1 { animation: am-fade-up .8s var(--ease) both; animation-delay: .18s }
.hero-content .lead { animation: am-fade-up .8s var(--ease) both; animation-delay: .30s }
.hero-content .btn-group { animation: am-fade-up .8s var(--ease) both; animation-delay: .42s }
.hero-content .hero-badges { animation: am-fade-up .8s var(--ease) both; animation-delay: .54s }

/* Scroll entrance */
.am-hidden {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.am-hidden.am-scale { transform: scale(.97) }
.am-visible { opacity: 1 !important; transform: translateY(0) !important }

/* WhatsApp float */
.whatsapp-btn { animation: am-float 3.5s ease-in-out infinite }
.whatsapp-btn:hover { animation: none; transform: scale(1.1) }

/* ============================================================
   FOCO, TOQUE & ACESSIBILIDADE
   ============================================================ */

:focus { outline: none }
:focus-visible {
  outline: 2.5px solid var(--brand-black);
  outline-offset: 3px;
  border-radius: 4px;
}

.stats-bar :focus-visible,
.section--dark :focus-visible,
.page-hero :focus-visible,
.cta-section :focus-visible,
.footer :focus-visible { outline-color: var(--white) }

.btn:focus-visible { border-radius: var(--radius) }

.btn, .nav-link, .mobile-nav-link, .mobile-nav-sub a,
button, a, .service-card, .faq-question, .hamburger,
.dropdown a, .card, .card-link { touch-action: manipulation }

.hamburger { min-width: 44px; min-height: 44px }
.mobile-nav-close { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center }
.faq-icon { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; width: auto; padding: 0 8px }

.section-title, .hero h1, .page-hero h1,
.cta-band h3, .cta-section h2, .section-intro { text-wrap: balance }

[data-numeric], .result-row span:last-child {
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-variant-numeric: tabular-nums lining-nums;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .am-hidden { opacity: 1 !important; transform: none !important }
  .whatsapp-btn { animation: none }
}

/* ============================================================
   DESIGN ENHANCEMENTS v2.1
   Design Chief × Brad Frost × Design System Architect × UI Engineer
   ============================================================ */

/* --- Gradient tokens & extras --- */
:root {
  --gradient-mineral:  linear-gradient(135deg, #6a7078 0%, #4a4d52 100%);
  --gradient-sand:     linear-gradient(135deg, #cdcfd2 0%, #6a7078 100%);
  --gradient-dark:     linear-gradient(180deg, #111010 0%, #1d1b1a 100%);
  --gradient-subtle:   linear-gradient(135deg, rgba(106,112,120,.04) 0%, transparent 60%);
  --radius-full:       9999px;
}

/* --- Global base additions --- */
::selection { background: rgba(106,112,120,.14); color: var(--text-primary) }
hr { border: none; height: 1px; background: var(--border-subtle); margin: 32px 0 }

::-webkit-scrollbar { width: 6px; height: 6px }
::-webkit-scrollbar-track { background: var(--bg-page) }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted) }

/* ============================================================
   SERVICES SECTION v5 — Dark Cards Imersivos
   Design Chief × Brad Frost × UI Engineer
   Cards altos, fundos temáticos, ícone amplificado, texto branco
   ============================================================ */

.services-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: end;
  margin-bottom: 40px;
}
.services-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.services-header-right p {
  color: var(--text-secondary);
  line-height: 1.75;
  margin: 0;
  font-size: .95rem;
}

/* Wrapper — full-width, fora do container */
.svc-section { padding-bottom: 0 }

.svc-carousel-wrap {
  width: 100%;
  overflow: hidden;
}

/* Track scrollável — full-width, drag habilitado em todos os tamanhos */
.svc-carousel {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 12px 32px 36px;
  scrollbar-width: none;
  cursor: grab;
  /* Padding dinâmico: alinha primeiro card com o container em telas largas */
  padding-left: max(32px, calc((100vw - 1200px) / 2 + 32px));
  padding-right: max(32px, calc((100vw - 1200px) / 2 + 32px));
}
.svc-carousel:active { cursor: grabbing }
/* Estado de drag ativo via JS */
.svc-carousel.is-dragging { cursor: grabbing; scroll-behavior: auto; user-select: none }
.svc-carousel::-webkit-scrollbar { display: none }

/* ---- Card base — dark premium ---- */
.svc-slide {
  flex: 0 0 320px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--brand-black);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,.07);
  overflow: hidden;
  position: relative;
  min-height: 480px;
  touch-action: pan-y;
  text-decoration: none;
  color: inherit;
  transition:
    box-shadow var(--duration-std) var(--ease),
    transform var(--duration-std) var(--ease),
    border-color var(--duration-std) var(--ease);
}

/* Accent line cinza no topo */
.svc-slide::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(135deg, #cdcfd2 0%, #6a7078 100%);
  opacity: 0;
  z-index: 3;
  transition: opacity .35s var(--ease);
}
.svc-slide:hover::before { opacity: 1 }
.svc-slide:hover {
  box-shadow: 0 24px 64px -12px rgba(0,0,0,.55);
  transform: translateY(-8px);
  border-color: rgba(205,207,210,.22);
}

/* ---- Camada de fundo temática por serviço ---- */
.svc-slide-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  transition: transform .8s var(--ease);
}
.svc-slide:hover .svc-slide-bg { transform: scale(1.06) }

/* Foto de capa dentro do card */
.svc-slide-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  opacity: .55;
  transition: opacity .6s var(--ease);
}

.svc-slide:hover .svc-slide-bg img { opacity: .72 }

/* Overlay gradiente sobre o fundo — garante legibilidade */
.svc-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(17,16,16,.25) 0%,
    rgba(17,16,16,.45) 40%,
    rgba(17,16,16,.88) 72%,
    rgba(17,16,16,.97) 100%
  );
  z-index: 1;
  transition: opacity .5s var(--ease);
}
.svc-slide:hover::after {
  background: linear-gradient(
    to bottom,
    rgba(17,16,16,.18) 0%,
    rgba(17,16,16,.38) 38%,
    rgba(17,16,16,.82) 68%,
    rgba(17,16,16,.97) 100%
  );
}

/* ---- Fundos temáticos por serviço — paleta fria: navy, slate, prata ---- */

/* Serviços Contábeis — grade de linhas prata/cinza */
.svc-slide[data-svc="contabeis"] .svc-slide-bg {
  background:
    radial-gradient(ellipse 90% 55% at 80% 10%, rgba(180,185,200,.10) 0%, transparent 55%),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 28px,
      rgba(180,185,200,.05) 28px,
      rgba(180,185,200,.05) 29px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 56px,
      rgba(180,185,200,.04) 56px,
      rgba(180,185,200,.04) 57px
    ),
    linear-gradient(145deg, #181618 0%, #111010 65%);
}

/* Abertura de Empresa — navy/índigo radial */
.svc-slide[data-svc="abertura"] .svc-slide-bg {
  background:
    radial-gradient(ellipse 120% 80% at 80% 15%, rgba(55,65,120,.38) 0%, transparent 58%),
    radial-gradient(ellipse 70% 50% at 15% 85%, rgba(40,48,95,.20) 0%, transparent 45%),
    linear-gradient(160deg, #0e1020 0%, #111010 60%);
}

/* Escrituração Fiscal — diagonal prata, aspecto de documento */
.svc-slide[data-svc="fiscal"] .svc-slide-bg {
  background:
    radial-gradient(ellipse 100% 60% at 85% 10%, rgba(160,168,185,.14) 0%, transparent 52%),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 18px,
      rgba(160,168,185,.05) 18px,
      rgba(160,168,185,.05) 19px
    ),
    linear-gradient(150deg, #161618 0%, #111010 58%);
}

/* Departamento Pessoal — violeta/slate suave */
.svc-slide[data-svc="pessoal"] .svc-slide-bg {
  background:
    radial-gradient(ellipse 95% 70% at 70% 8%, rgba(90,80,140,.28) 0%, transparent 55%),
    radial-gradient(ellipse 60% 45% at 15% 85%, rgba(65,58,110,.15) 0%, transparent 40%),
    linear-gradient(145deg, #131118 0%, #111010 62%);
}

/* Imposto de Renda — prata metálico, brilho frio */
.svc-slide[data-svc="ir"] .svc-slide-bg {
  background:
    radial-gradient(ellipse 110% 65% at 75% 5%, rgba(200,205,215,.16) 0%, transparent 55%),
    radial-gradient(ellipse 50% 38% at 25% 88%, rgba(150,158,175,.10) 0%, transparent 40%),
    repeating-linear-gradient(
      60deg,
      transparent,
      transparent 32px,
      rgba(180,185,200,.04) 32px,
      rgba(180,185,200,.04) 33px
    ),
    linear-gradient(145deg, #161618 0%, #111010 58%);
}

/* Fiscalização — navy profundo, proteção */
.svc-slide[data-svc="fiscalizacao"] .svc-slide-bg {
  background:
    radial-gradient(ellipse 100% 65% at 80% 10%, rgba(35,55,110,.42) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 10% 80%, rgba(25,40,85,.22) 0%, transparent 45%),
    linear-gradient(155deg, #0a0e1c 0%, #111010 60%);
}

/* Certidões Negativas — azul-prata, limpeza/validação */
.svc-slide[data-svc="certidoes"] .svc-slide-bg {
  background:
    radial-gradient(ellipse 90% 60% at 75% 12%, rgba(130,150,190,.22) 0%, transparent 52%),
    radial-gradient(ellipse 60% 44% at 20% 78%, rgba(100,120,160,.12) 0%, transparent 42%),
    linear-gradient(148deg, #10121c 0%, #111010 60%);
}

/* Contabilidade Comercial — slate médio com grade */
.svc-slide[data-svc="comercial"] .svc-slide-bg {
  background:
    radial-gradient(ellipse 100% 65% at 85% 10%, rgba(80,95,120,.30) 0%, transparent 55%),
    radial-gradient(ellipse 65% 44% at 15% 85%, rgba(60,75,100,.16) 0%, transparent 42%),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 40px,
      rgba(120,135,160,.04) 40px,
      rgba(120,135,160,.04) 41px
    ),
    linear-gradient(150deg, #0f1218 0%, #111010 60%);
}

/* Contabilidade Industrial — aço/xadrez frio */
.svc-slide[data-svc="industrial"] .svc-slide-bg {
  background:
    radial-gradient(ellipse 95% 60% at 80% 15%, rgba(55,75,100,.30) 0%, transparent 52%),
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 22px,
      rgba(80,100,125,.06) 22px,
      rgba(80,100,125,.06) 23px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 22px,
      rgba(80,100,125,.04) 22px,
      rgba(80,100,125,.04) 23px
    ),
    linear-gradient(140deg, #0e1218 0%, #111010 60%);
}

/* Contabilidade Rural — slate neutro, terra fria */
.svc-slide[data-svc="rural"] .svc-slide-bg {
  background:
    radial-gradient(ellipse 110% 70% at 85% 5%, rgba(90,100,115,.28) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 10% 80%, rgba(70,80,95,.18) 0%, transparent 45%),
    radial-gradient(ellipse 40% 30% at 50% 50%, rgba(110,120,140,.08) 0%, transparent 35%),
    linear-gradient(150deg, #111318 0%, #111010 60%);
}

/* ---- Ícone — glassmorphism box, top-left ---- */
.svc-slide-icon {
  position: absolute;
  top: 28px;
  left: 28px;
  width: 60px;
  height: 60px;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 2;
  color: rgba(255,255,255,.90);
  transition:
    transform .4s var(--ease-spring),
    background .3s var(--ease),
    border-color .3s var(--ease),
    box-shadow .3s var(--ease);
}
.svc-slide-icon svg {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}
.svc-slide:hover .svc-slide-icon {
  transform: scale(1.1) rotate(-4deg);
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.25);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}

/* ---- Tag de categoria ---- */
.svc-slide-tag {
  display: inline-flex;
  align-items: center;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand-gray);
  opacity: .65;
  transition: opacity .3s var(--ease);
  font-family: var(--font-body);
}
.svc-slide:hover .svc-slide-tag { opacity: 1 }

/* ---- Content — fundo escuro, texto branco ---- */
.svc-slide-content {
  position: relative;
  z-index: 3;
  padding: 0 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.svc-slide-content h3 {
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--white);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
  text-shadow: 0 2px 12px rgba(0,0,0,.3);
}
.svc-slide-content p {
  font-size: .82rem;
  color: rgba(205,207,210,.72);
  line-height: 1.68;
  margin: 0;
}

/* ---- CTA pill — branca sobre escuro ---- */
.svc-slide-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 9px 18px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--radius);
  font-size: .78rem;
  font-weight: 600;
  color: rgba(255,255,255,.82);
  width: fit-content;
  transition:
    background var(--duration) var(--ease),
    border-color var(--duration) var(--ease),
    color var(--duration) var(--ease),
    gap var(--duration) var(--ease-spring);
  backdrop-filter: blur(8px);
}
.svc-slide:hover .svc-slide-cta {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.35);
  color: var(--white);
  gap: 13px;
}
.svc-cta-arr {
  transition: transform var(--duration) var(--ease-spring);
}
.svc-slide:hover .svc-cta-arr { transform: translateX(4px) }

/* Navegação */
.svc-carousel-nav {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 32px;
  margin-top: 8px;
}

.svc-nav-btn {
  width: 44px; height: 44px;
  flex-shrink: 0;
  border: 1.5px solid var(--border-default);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  background: var(--white);
  cursor: pointer;
  transition:
    background var(--duration) var(--ease),
    border-color var(--duration) var(--ease),
    color var(--duration) var(--ease),
    transform var(--duration) var(--ease-spring);
}
.svc-nav-btn:hover {
  background: var(--brand-black);
  color: var(--white);
  border-color: var(--brand-black);
  transform: scale(1.08);
}
.svc-nav-btn:disabled { opacity: .3; pointer-events: none }

/* Barra de progresso mineral */
.svc-progress {
  flex: 1;
  height: 2px;
  background: var(--border-subtle);
  border-radius: 1px;
  overflow: hidden;
}
.svc-progress-bar {
  height: 100%;
  background: linear-gradient(135deg, #cdcfd2 0%, #6a7078 100%);
  border-radius: 1px;
  width: 10%;
  transition: width .4s var(--ease);
}

/* Desktop: cards maiores, mais visíveis por vez */
@media (min-width: 961px) {
  .svc-slide { flex: 0 0 340px; min-height: 500px }
}

/* Responsivo */
@media (max-width: 960px) {
  .services-header { grid-template-columns: 1fr; gap: 20px; margin-bottom: 32px }
  .svc-carousel { padding: 8px 24px 28px; padding-left: 24px; padding-right: 24px }
  .svc-carousel-nav { padding: 0 }
  .svc-slide { flex: 0 0 292px; min-height: 400px }
}
@media (max-width: 600px) {
  .services-header { margin-bottom: 24px }
  .svc-carousel { padding: 8px 20px 20px; padding-left: 20px; padding-right: 20px; gap: 14px }
  .svc-carousel-nav { padding: 0 }
  .svc-slide { flex: 0 0 272px; min-height: 360px }
  .svc-slide-content { padding: 0 22px 22px }
  .svc-slide-icon { top: 22px; left: 22px; width: 52px; height: 52px }
  .svc-slide-content h3 { font-size: 1.3rem }
}

/* --- Hero label: mineral em fundo claro --- */
.hero-label { color: var(--accent-mineral) }
.hero-label::before { background: var(--accent-sand) }
.hero--video .hero-label { color: rgba(255,255,255,.5) }
.hero--video .hero-label::before { background: rgba(205,207,210,.3) }

/* --- Atmosphere h2: itálica elegante sobre foto --- */
.atmosphere-overlay h2 { font-style: italic; font-weight: 400; letter-spacing: -0.015em }

/* --- Card hover: mineral border + transição --- */
.card {
  transition: background var(--duration-std) var(--ease),
              box-shadow var(--duration-std) var(--ease),
              transform var(--duration-std) var(--ease),
              border-color var(--duration-std) var(--ease);
}
.card:hover { border-color: rgba(106,112,120,.2) }

.service-card {
  transition: box-shadow var(--duration-std) var(--ease),
              transform var(--duration-std) var(--ease),
              border-color var(--duration-std) var(--ease);
}
.service-card:hover { border-color: rgba(106,112,120,.3) }

/* --- Benefit check: mineral no hover --- */
.benefit-item:hover .benefit-check { background: var(--accent-mineral) }

/* --- Step num: mineral no hover --- */
.step-item:hover .step-num { background: var(--accent-mineral) }


/* --- Differential: hover indent suave --- */
.differential-item {
  transition: border-left-color var(--duration-std) var(--ease),
              padding-left var(--duration-std) var(--ease-spring);
}
.differential-item:hover { border-left-color: var(--accent-stone); padding-left: 26px }

/* --- Stats: lift + sand no hover --- */
.stat-item {
  transition: transform var(--duration-std) var(--ease);
  cursor: default;
}
.stat-item:hover { transform: translateY(-3px) }
.stat-item:hover .stat-number { color: var(--accent-sand); transition: color var(--duration-std) var(--ease) }

/* --- CTA Band: mineral left accent --- */
.cta-band { border-left: 3px solid var(--accent-mineral) }

/* --- CTA Section: mineral glow radial --- */
.cta-section {
  background:
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(106,112,120,.07) 0%, transparent 65%),
    var(--brand-black);
}

/* --- About media tag: mineral left border --- */
.about-media-tag { border-left: 2px solid var(--accent-mineral) }

/* --- Footer: mineral accent line no topo --- */
.footer { position: relative }
.footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--accent-mineral) 25%,
    var(--accent-sand)    50%,
    var(--accent-stone)   75%,
    transparent 100%
  );
}

/* ============================================================
   NOVOS COMPONENTES — Design System v2.1
   ============================================================ */

/* --- Mineral button variant --- */
.btn-mineral { background: var(--accent-mineral); color: var(--white); border-color: var(--accent-mineral) }
.btn-mineral:hover { background: var(--accent-stone); border-color: var(--accent-stone) }
.btn-mineral:active { transform: scale(.97) }

.btn-ghost { background: transparent; color: var(--text-primary); border-color: var(--border-default) }
.btn-ghost:hover { background: var(--bg-soft); border-color: var(--border-strong) }

/* --- Tag --- */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: var(--bg-soft);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  font-size: .72rem;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: .01em;
  white-space: nowrap;
}
.tag--mineral { background: rgba(106,112,120,.08); border-color: rgba(106,112,120,.22); color: var(--accent-mineral) }
.tag--dark { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); color: rgba(255,255,255,.7) }
.tags-group { display: flex; flex-wrap: wrap; gap: 8px }

/* --- Dividers --- */
.divider { height: 1px; background: var(--border-subtle) }
.divider--mineral { height: 2px; background: var(--gradient-mineral); border-radius: 1px; width: 48px }
.divider--full { width: 100%; height: 1px; background: var(--border-subtle) }

/* --- Quote / Depoimento --- */
.quote-block {
  position: relative;
  padding: 36px 40px;
  background: var(--bg-page);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-default);
  overflow: hidden;
}
.quote-block::before {
  content: '\201C';
  position: absolute;
  top: -10px; left: 28px;
  font-family: var(--font-head);
  font-size: 6rem;
  color: var(--accent-mineral);
  line-height: 1;
  opacity: .15;
  pointer-events: none;
}
.quote-block blockquote {
  font-family: var(--font-head);
  font-size: 1.1rem;
  font-style: italic;
  font-weight: 400;
  color: var(--text-primary);
  line-height: 1.65;
  position: relative;
  z-index: 1;
}
.quote-cite {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-muted);
}
.quote-cite::before {
  content: '';
  display: block;
  width: 24px; height: 1px;
  background: var(--brand-gray);
  flex-shrink: 0;
}

/* --- Notice / Aviso --- */
.notice {
  display: flex;
  gap: 14px;
  padding: 16px 20px;
  border-radius: var(--radius);
  background: rgba(106,112,120,.05);
  border: 1px solid rgba(106,112,120,.18);
  border-left: 3px solid var(--accent-mineral);
  font-size: .875rem;
  color: var(--text-secondary);
  line-height: 1.65;
}
.notice--info  { background: rgba(75,94,122,.05); border-color: rgba(75,94,122,.18); border-left-color: var(--info) }
.notice--success { background: rgba(47,107,79,.05); border-color: rgba(47,107,79,.18); border-left-color: var(--success) }

/* --- Feature block (escuro com mineral glow) --- */
.feature-block {
  background: var(--brand-black);
  border-radius: var(--radius-xl);
  padding: 56px;
  position: relative;
  overflow: hidden;
}
.feature-block::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 70% at 80% 50%, rgba(106,112,120,.07) 0%, transparent 60%);
  pointer-events: none;
}
.feature-block > * { position: relative; z-index: 1 }

/* --- Team card --- */
.team-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--duration-std) var(--ease),
              transform var(--duration-std) var(--ease),
              border-color var(--duration-std) var(--ease);
}
.team-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: rgba(106,112,120,.2) }
.team-card-img { width: 100%; aspect-ratio: 3/4; object-fit: cover; transition: transform .8s var(--ease) }
.team-card:hover .team-card-img { transform: scale(1.03) }
.team-card-info { padding: 20px 24px }
.team-card-name { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; font-family: var(--font-body) }
.team-card-role { font-size: .78rem; color: var(--accent-mineral); font-weight: 500; letter-spacing: .02em }

/* --- Insight card --- */
.insight-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--duration-std) var(--ease),
              transform var(--duration-std) var(--ease),
              border-color var(--duration-std) var(--ease);
}
.insight-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: rgba(106,112,120,.22) }
.insight-card-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; transition: transform .8s var(--ease) }
.insight-card:hover .insight-card-img { transform: scale(1.03) }
.insight-card-body { padding: 24px; flex: 1; display: flex; flex-direction: column }
.insight-card-meta { font-size: .72rem; color: var(--text-muted); margin-bottom: 10px; display: flex; gap: 12px; align-items: center }
.insight-card h3 { font-size: 1rem; font-family: var(--font-body); font-weight: 600; color: var(--text-primary); margin-bottom: 10px; line-height: 1.4 }
.insight-card p { font-size: .875rem; color: var(--text-secondary); flex: 1; margin-bottom: 16px }
.insight-card-link {
  font-size: .82rem; font-weight: 600; color: var(--accent-mineral);
  display: inline-flex; align-items: center; gap: 6px;
  transition: gap var(--duration) var(--ease-spring), color var(--duration) var(--ease);
  margin-top: auto;
}
.insight-card-link::after { content: '→' }
.insight-card:hover .insight-card-link { gap: 10px; color: var(--accent-stone) }

/* --- Client logos grid --- */
.clients-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.client-logo { background: var(--surface); padding: 32px 24px; display: flex; align-items: center; justify-content: center; transition: background var(--duration) var(--ease) }
.client-logo:hover { background: var(--bg-soft) }
.client-logo img { max-height: 40px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .5; transition: filter var(--duration) var(--ease), opacity var(--duration) var(--ease) }
.client-logo:hover img { filter: none; opacity: 1 }

/* --- Pagination --- */
.pagination { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 48px }
.page-btn {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  font-size: .82rem; font-weight: 500;
  color: var(--text-secondary);
  transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease), color var(--duration) var(--ease);
}
.page-btn:hover { background: var(--bg-soft); border-color: var(--border-strong); color: var(--text-primary) }
.page-btn.active { background: var(--brand-black); color: var(--white); border-color: var(--brand-black) }
.page-btn[disabled] { opacity: .4; pointer-events: none }

/* --- Tabelas --- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); border: 1px solid var(--border-default) }
table { width: 100%; border-collapse: collapse; font-size: .875rem }
thead { background: var(--bg-soft) }
th { text-align: left; padding: 11px 16px; font-size: .7rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--border-default); white-space: nowrap }
td { padding: 13px 16px; color: var(--text-secondary); border-bottom: 1px solid var(--border-subtle) }
tbody tr:last-child td { border-bottom: none }
tbody tr:hover td { background: var(--bg-soft) }
.table-mineral thead { background: rgba(106,112,120,.05) }
.table-mineral th { color: var(--accent-mineral) }

/* --- Content body (Insights / blog) --- */
.content-body h2 { margin: 48px 0 20px; font-size: clamp(1.5rem, 2.5vw, 1.9rem) }
.content-body h3 { margin: 32px 0 14px; font-size: clamp(1.1rem, 1.8vw, 1.3rem) }
.content-body p  { margin-bottom: 20px; color: var(--text-secondary) }
.content-body ul, .content-body ol { padding-left: 20px; margin-bottom: 20px }
.content-body ul { list-style: disc }
.content-body ol { list-style: decimal }
.content-body li { margin-bottom: 8px; line-height: 1.75; color: var(--text-secondary) }
.content-body a { color: var(--accent-mineral); text-decoration: underline; text-underline-offset: 2px }
.content-body a:hover { color: var(--accent-stone) }
.content-body strong { color: var(--text-primary); font-weight: 600 }
.content-body blockquote {
  border-left: 3px solid var(--accent-mineral);
  padding: 10px 20px;
  margin: 32px 0;
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-style: italic;
  color: var(--text-secondary);
  background: rgba(106,112,120,.04);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.content-body hr { margin: 40px 0 }
.content-body code { font-family: 'Courier New', monospace; font-size: .85em; background: var(--bg-soft); color: var(--text-primary); padding: 2px 6px; border-radius: 4px; border: 1px solid var(--border-subtle) }
.content-body pre { background: var(--brand-black); color: var(--brand-light); padding: 24px; border-radius: var(--radius); overflow-x: auto; margin-bottom: 24px; font-size: .85rem; line-height: 1.65 }
.content-body pre code { background: none; border: none; padding: 0; color: inherit }

/* --- Icon list --- */
.icon-list { display: flex; flex-direction: column; gap: 16px }
.icon-list-item { display: flex; gap: 14px; align-items: flex-start }
.icon-list-icon {
  width: 36px; height: 36px;
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-mineral);
  flex-shrink: 0;
  transition: background var(--duration) var(--ease), transform var(--duration) var(--ease-spring);
}
.icon-list-item:hover .icon-list-icon { background: rgba(106,112,120,.1); transform: scale(1.08) }

/* --- Numbered list styled --- */
.numbered-list { counter-reset: item; display: flex; flex-direction: column; gap: 20px; padding: 0 }
.numbered-list > li { display: flex; gap: 16px; align-items: flex-start; counter-increment: item }
.numbered-list > li::before {
  content: counter(item, decimal-leading-zero);
  font-size: .68rem; font-weight: 700; letter-spacing: .06em;
  color: var(--accent-mineral); flex-shrink: 0; min-width: 28px;
  margin-top: 3px; font-family: var(--font-body);
}

/* --- Highlight text inline --- */
.text-highlight {
  background: linear-gradient(transparent 55%, rgba(106,112,120,.16) 55%);
  padding: 0 2px;
}

/* --- Utilities --- */
.text-mineral  { color: var(--accent-mineral) }
.text-sand     { color: var(--accent-sand) }
.text-serif    { font-family: var(--font-head) }
.heading-display { font-family: var(--font-head); font-style: italic; font-weight: 400; letter-spacing: -0.015em; line-height: 1.1 }
.bg-mineral-subtle { background: rgba(106,112,120,.04); border: 1px solid rgba(106,112,120,.1) }

/* ============================================================
   RESPONSIVO — NOVOS COMPONENTES
   ============================================================ */
@media (max-width: 960px) {
  .feature-block { padding: 40px }
  .quote-block   { padding: 28px 32px }
}
@media (max-width: 600px) {
  .feature-block { padding: 28px 24px }
  .quote-block   { padding: 24px 24px }
  .quote-block::before { font-size: 4rem; top: -4px }
  .quote-block blockquote { font-size: 1rem }
}

/* ============================================================
   SERVICES PAGE — GRID EDITORIAL v1.0
   ============================================================ */

/* ---- Grid estático para página /servicos (mesmo visual do carousel da home) ---- */
.svc-page-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
}
/* Dentro do grid, o svc-slide não é flex-item de carrossel */
.svc-page-grid .svc-slide {
  flex: none;
  width: 100%;
  min-height: 440px;
  scroll-snap-align: none;
}
@media (max-width: 960px) {
  .svc-page-grid { grid-template-columns: repeat(2, 1fr) }
  .svc-page-grid .svc-slide { min-height: 380px }
}
@media (max-width: 600px) {
  .svc-page-grid { grid-template-columns: 1fr; gap: 14px }
  .svc-page-grid .svc-slide { min-height: 340px }
}

/* Grid container */
.svc2-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-top: 48px;
  background: var(--border-default);
}

/* Card base */
.svc2-card {
  background: var(--surface);
  padding: 36px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  position: relative;
  transition:
    background var(--duration-std) var(--ease),
    box-shadow var(--duration-std) var(--ease);
}
.svc2-card:hover { background: var(--bg-soft) }

/* Top row: number + icon */
.svc2-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
}
.svc2-num {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--border-strong);
  font-family: var(--font-body);
  line-height: 1;
  margin-top: 4px;
  transition: color var(--duration-std) var(--ease);
}
.svc2-card:hover .svc2-num { color: var(--text-muted) }

/* Icon box */
.svc2-icon {
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-default);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  background: var(--white);
  flex-shrink: 0;
  transition:
    background var(--duration-std) var(--ease),
    border-color var(--duration-std) var(--ease),
    color var(--duration-std) var(--ease),
    transform .4s var(--ease-spring);
}
.svc2-icon svg { width: 20px; height: 20px; flex-shrink: 0 }
.svc2-card:hover .svc2-icon {
  background: var(--brand-black);
  border-color: var(--brand-black);
  color: var(--white);
  transform: scale(1.1) rotate(-5deg);
}

/* Tag */
.svc2-tag {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-family: var(--font-body);
}

/* Title */
.svc2-card h3 {
  font-size: .95rem;
  font-weight: 600;
  color: var(--text-primary);
  font-family: var(--font-body);
  letter-spacing: -.01em;
  line-height: 1.3;
  margin: 0;
}

/* Description */
.svc2-card p {
  font-size: .85rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0;
  flex: 1;
}

/* CTA row */
.svc2-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 10px;
  transition:
    gap var(--duration) var(--ease-spring),
    color var(--duration) var(--ease);
}
.svc2-cta-arr { transition: transform var(--duration) var(--ease-spring) }
.svc2-card:hover .svc2-cta { gap: 10px; color: var(--text-primary) }
.svc2-card:hover .svc2-cta-arr { transform: translateX(3px) }

/* Responsive */
@media (max-width: 960px) {
  .svc2-grid { grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 600px) {
  .svc2-grid { grid-template-columns: 1fr; border-radius: var(--radius-lg) }
  .svc2-card { padding: 28px 24px 24px }
}

/* ============================================================
   DESIGN ENHANCEMENTS v3.0 — 21st.dev inspired
   ============================================================ */

/* --- Topbar marquee --- */
.topbar { overflow: hidden; padding: 0 }
.topbar-scroll { overflow: hidden; width: 100%; padding: 9px 0 }
.topbar-inner {
  display: inline-flex;
  align-items: center;
  gap: 32px;
  white-space: nowrap;
  animation: topbar-scroll 28s linear infinite;
}
.topbar-inner:hover { animation-play-state: paused }
.topbar-sep {
  display: inline-block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--brand-gray);
  opacity: 0.35;
  flex-shrink: 0;
}
@keyframes topbar-scroll {
  0%   { transform: translateX(0) }
  100% { transform: translateX(-50%) }
}

/* --- Hero: animated word rotation --- */
.hero-rotating-word {
  display: inline;
  color: var(--accent-sand);
  font-style: italic;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.hero-rotating-word.am-rw-out {
  opacity: 0;
  transform: translateY(6px);
  display: inline-block;
}
.hero-rotating-word.am-rw-in {
  opacity: 0;
  transform: translateY(-6px);
  display: inline-block;
}

/* --- Hero: mini stats strip --- */
.hero-video-stats { max-width: 480px }
.hero-video-sep {
  width: 1px; height: 36px;
  background: rgba(255,255,255,.14);
  flex-shrink: 0;
}
.hero-vs-num {
  display: block;
  font-family: var(--font-head);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--white);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 4px;
}
.hero-vs-lbl {
  display: block;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.42);
}

/* --- Hero: scroll indicator --- */
.hero-scroll-indicator {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  z-index: 2;
  opacity: .42;
  transition: opacity .4s var(--ease);
  cursor: pointer;
}
.hero-scroll-indicator:hover { opacity: .7 }
.hero-scroll-indicator.hidden { opacity: 0; pointer-events: none }
.hero-scroll-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,.65);
  animation: scroll-pulse 2s ease-in-out infinite;
}
.hero-scroll-indicator span {
  display: block;
  width: 1px; height: 36px;
  background: linear-gradient(to bottom, rgba(255,255,255,.65), transparent);
  animation: scroll-beam 2s ease-in-out infinite;
}
@keyframes scroll-pulse {
  0%, 100% { transform: scale(1); opacity: .6 }
  50%       { transform: scale(1.5); opacity: 1 }
}
@keyframes scroll-beam {
  0%, 100% { transform: scaleY(.8); opacity: .5 }
  50%       { transform: scaleY(1.1); opacity: 1 }
}
@media (max-width: 600px) { .hero-scroll-indicator { display: none } }

/* --- Stats bar: shimmer sweep on numbers --- */
.stat-number {
  position: relative;
  overflow: hidden;
}
.stat-number::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 55%;
  height: 100%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.07) 50%,
    transparent 100%
  );
  animation: stat-shimmer 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes stat-shimmer {
  0%       { left: -80% }
  60%, 100% { left: 160% }
}

/* --- Service cards: category glow on hover --- */
.svc-slide[data-svc="abertura"]:hover     { box-shadow: 0 24px 64px -12px rgba(0,0,0,.55), 0 0 40px -8px rgba(55,65,120,.45) }
.svc-slide[data-svc="pessoal"]:hover      { box-shadow: 0 24px 64px -12px rgba(0,0,0,.55), 0 0 40px -8px rgba(90,80,140,.4) }
.svc-slide[data-svc="fiscalizacao"]:hover { box-shadow: 0 24px 64px -12px rgba(0,0,0,.55), 0 0 40px -8px rgba(35,55,110,.45) }
.svc-slide[data-svc="certidoes"]:hover    { box-shadow: 0 24px 64px -12px rgba(0,0,0,.55), 0 0 40px -8px rgba(130,150,190,.35) }
.svc-slide[data-svc="comercial"]:hover    { box-shadow: 0 24px 64px -12px rgba(0,0,0,.55), 0 0 40px -8px rgba(80,95,120,.35) }
.svc-slide[data-svc="industrial"]:hover   { box-shadow: 0 24px 64px -12px rgba(0,0,0,.55), 0 0 40px -8px rgba(55,75,100,.35) }

/* --- Testimonials grid --- */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}
@media (max-width: 960px) { .testimonials-grid { grid-template-columns: 1fr 1fr } }
@media (max-width: 600px) { .testimonials-grid { grid-template-columns: 1fr } }

/* --- CTA section: animated mineral glow --- */
.cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 110%,
    rgba(106,112,120,.1) 0%, transparent 65%);
  pointer-events: none;
  animation: cta-glow 5s ease-in-out infinite;
}
.cta-section { position: relative }
@keyframes cta-glow {
  0%, 100% { opacity: .6 }
  50%       { opacity: 1 }
}

/* --- Benefit check: smoother spring --- */
.benefit-check {
  transition: transform 0.45s var(--ease-spring), background 0.25s var(--ease);
}

/* --- Reduced motion overrides --- */
@media (prefers-reduced-motion: reduce) {
  .topbar-inner,
  .stat-number::after,
  .hero-scroll-dot,
  .hero-scroll-indicator span,
  .cta-section::before { animation: none }
  .hero-rotating-word { transition: none }
}

/* ============================================================
   ÍCONES SVG — substitutos dos emojis e caracteres especiais
   ============================================================ */

/* ---- Nav chevron (dropdown indicator) ---- */
.nav-chevron {
  display: inline-block;
  vertical-align: middle;
  margin-left: 3px;
  margin-top: -1px;
  flex-shrink: 0;
  opacity: 0.55;
  transition: transform var(--duration) var(--ease), opacity var(--duration) var(--ease);
}
.nav-item:hover .nav-chevron { transform: rotate(180deg); opacity: 0.9 }
.nav-link.active .nav-chevron { opacity: 0.85 }

/* ---- Breadcrumb sep SVG ---- */
.breadcrumb-sep {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.breadcrumb-sep svg { display: block }

/* ---- Footer contact SVG ---- */
.footer-contact svg { flex-shrink: 0 }

/* ---- Mobile nav close ---- */
.mobile-nav-close svg { display: block }

/* ============================================================
   PAGE HERO — variante com imagem de fundo
   ============================================================ */

.page-hero--img {
  position: relative;
  overflow: hidden;
}

/* img direto ou picture dentro do hero */
.page-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.page-hero-bg img,
img.page-hero-bg {
  position: absolute;
  top: -18%;
  left: 0;
  right: 0;
  bottom: auto;
  width: 100%;
  height: 136%;
  object-fit: cover;
  object-position: center;
  will-change: transform;
  transform: translateY(var(--phpy, 0));
}

/* overlay escuro sobre a foto */
.page-hero--img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(17,16,16,.93) 0%,
    rgba(17,16,16,.80) 50%,
    rgba(17,16,16,.68) 100%
  );
  z-index: 1;
}

.page-hero--img .container { position: relative; z-index: 2 }

/* ============================================================
   CALC HUB — Página de listagem das calculadoras
   ============================================================ */

.calc-hub-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  padding: 36px;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-sm);
  transition:
    box-shadow var(--duration-std) var(--ease),
    transform var(--duration-std) var(--ease),
    border-color var(--duration-std) var(--ease);
}

.calc-hub-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  border-color: rgba(106,112,120,.22);
}

.calc-hub-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.calc-hub-icon {
  width: 48px;
  height: 48px;
  background: var(--brand-black);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--white);
  transition: transform .4s var(--ease-spring), background var(--duration-std) var(--ease);
}

.calc-hub-card:hover .calc-hub-icon {
  transform: scale(1.1) rotate(-4deg);
  background: var(--accent-mineral);
}

.calc-hub-eyebrow {
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-family: var(--font-body);
}

.calc-hub-title {
  font-family: var(--font-head);
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 12px;
}

.calc-hub-desc {
  font-size: .9rem;
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: 24px;
  flex: 1;
}

.calc-hub-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
  padding: 0;
}

.calc-hub-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .85rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.calc-hub-list svg {
  color: var(--text-primary);
  flex-shrink: 0;
  margin-top: 1px;
}

.calc-hub-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .875rem;
  font-weight: 600;
  color: var(--text-primary);
  padding: 12px 20px;
  border: 1.5px solid var(--brand-black);
  border-radius: var(--radius);
  margin-top: auto;
  transition:
    background var(--duration) var(--ease),
    gap var(--duration) var(--ease-spring);
  width: fit-content;
}

.calc-hub-card:hover .calc-hub-cta {
  background: var(--brand-black);
  color: var(--white);
  gap: 14px;
}

.calc-hub-arrow {
  transition: transform var(--duration) var(--ease-spring);
}

.calc-hub-card:hover .calc-hub-arrow { transform: translateX(3px) }

/* Grid responsivo */
.calc-hub-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  max-width: 960px;
  margin: 0 auto;
}

@media (max-width: 720px) {
  .calc-hub-grid { grid-template-columns: 1fr }
  .calc-hub-card { padding: 28px 24px }
}