/* ================================================================
   PONTO CEGO — DESIGN SYSTEM MASTER
   Nível: World-class boutique consultancy
   Inspiração: McKinsey + Oliver Wyman + Roland Berger digitais
   Paleta: Navy profundo · Ouro · Off-white
   Tipografia: Playfair Display + DM Sans + Space Mono
================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&family=Space+Mono:wght@400;700&display=swap');

/* ================================================================
   VARIÁVEIS
================================================================ */
:root {
  --navy-950: #010810;
  --navy-900: #020c1b;
  --navy-800: #041529;
  --navy-700: #071e3d;
  --navy-600: #0a2952;
  --navy-500: #0d3567;
  --gold:     #c9962a;
  --gold-lt:  #ddb04a;
  --gold-dim: rgba(201,150,42,.18);
  --gold-glow:rgba(201,150,42,.30);
  --white:    #ffffff;
  --off:      #e8e6e0;
  --muted:    rgba(232,230,224,.55);
  --faint:    rgba(255,255,255,.07);
  --glass:    rgba(4,21,45,.60);
  --border:   rgba(201,150,42,.18);
  --border-h: rgba(201,150,42,.55);

  --ff-display: 'Playfair Display', Georgia, serif;
  --ff-body:    'DM Sans', system-ui, sans-serif;
  --ff-mono:    'Space Mono', monospace;

  --ease-out-expo: cubic-bezier(0.16,1,0.3,1);
  --ease-back:     cubic-bezier(0.34,1.56,0.64,1);
  --ease-in-expo:  cubic-bezier(0.7,0,0.84,0);

  --r: 2px;
  --section-pad: clamp(80px, 10vw, 140px);
}

/* ================================================================
   RESET
================================================================ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; overflow-x:hidden; font-size:16px; }
body {
  font-family: var(--ff-body);
  background: var(--navy-900);
  color: var(--off);
  overflow-x: hidden;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
img { max-width:100%; height:auto; display:block; }
a   { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; }

/* ================================================================
   GRAIN — textura atmosférica
================================================================ */
body::before {
  content:'';
  position:fixed; inset:0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events:none; z-index:9999; opacity:.5;
}

/* ================================================================
   CONTAINER
================================================================ */
.container {
  width: min(92%, 1200px);
  margin: auto;
}

/* ================================================================
   LOGO SPLASH
================================================================ */
#logo-splash {
  position:fixed; inset:0;
  background: var(--navy-950);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:32px; z-index:100000;
  animation: splash-out .9s var(--ease-in-expo) 3.0s forwards;
}
#logo-splash img {
  width: clamp(200px, 28vw, 360px);
  animation: splash-img .9s var(--ease-out-expo) .2s both;
  filter: drop-shadow(0 0 80px rgba(201,150,42,.45));
}
.splash-bar {
  width:0; height:1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  animation: splash-bar-grow 1.4s var(--ease-out-expo) .7s forwards;
  max-width:320px;
}
.splash-tag {
  font-family:var(--ff-mono);
  font-size:11px; letter-spacing:.35em;
  text-transform:uppercase; color:var(--gold);
  opacity:0;
  animation: fade-up .7s var(--ease-out-expo) 1.4s both;
}
@keyframes splash-img { from{opacity:0;transform:scale(.75) translateY(24px)} to{opacity:1;transform:scale(1) translateY(0)} }
@keyframes splash-bar-grow { from{width:0} to{width:320px} }
@keyframes splash-out { from{opacity:1;pointer-events:all} to{opacity:0;pointer-events:none} }

/* ================================================================
   HEADER
================================================================ */
header {
  position:fixed; top:0; width:100%; z-index:1000;
  transition: background .5s, border-color .5s, box-shadow .5s;
}
header.scrolled {
  background: rgba(2,12,27,.94);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 8px 60px rgba(0,0,0,.6);
}
header .container {
  display:flex; align-items:center;
  justify-content:space-between;
  padding:20px 0; gap:24px;
  flex-wrap:wrap;
}
.logo { display:flex; align-items:center; gap:14px; }
.logo img {
  width:90px; height:auto; object-fit:contain;
  filter:drop-shadow(0 0 14px rgba(201,150,42,.35));
  transition:filter .4s;
}
.logo img:hover { filter:drop-shadow(0 0 28px rgba(201,150,42,.65)); }
.logo-text {
  font-family:var(--ff-display);
  font-size:22px; font-weight:700;
  letter-spacing:.1em; line-height:1;
}
.logo-text span { color:var(--gold); }

nav { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
nav a {
  font-size:12px; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase;
  color:rgba(232,230,224,.75);
  padding:8px 14px; border-radius:3px;
  position:relative; transition:color .3s;
}
nav a::after {
  content:''; position:absolute;
  bottom:5px; left:50%; transform:translateX(-50%);
  width:0; height:1px; background:var(--gold);
  transition:width .35s var(--ease-out-expo);
}
nav a:hover { color:var(--white); }
nav a:hover::after, nav a.active::after { width:55%; }
nav a.active { color:var(--white); }

.btn-header {
  font-size:11px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  background:linear-gradient(135deg,var(--gold),var(--gold-lt));
  color:var(--navy-900); padding:11px 22px;
  border-radius:var(--r); white-space:nowrap;
  transition:all .35s var(--ease-out-expo);
  box-shadow:0 0 0 0 var(--gold-glow);
}
.btn-header:hover {
  transform:translateY(-2px);
  box-shadow:0 8px 30px var(--gold-glow);
}

/* ================================================================
   HERO
================================================================ */
.hero {
  position:relative; min-height:100vh;
  display:flex; align-items:center;
  overflow:hidden;
}
.hero-bg {
  position:absolute; inset:0;
  background-image:url('img/ChatGPT\ Image\ 6\ de\ jun.\ de\ 2026\,\ 12_38_21.png');
  background-size:cover;
  background-position:right center;
  animation:hero-drift 18s ease-in-out infinite alternate;
}
@keyframes hero-drift { from{transform:scale(1.04) translateX(0)} to{transform:scale(1.07) translateX(-1%)} }

.hero-vignette {
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(105deg,
      rgba(1,8,16,.97) 0%,
      rgba(2,12,27,.88) 28%,
      rgba(4,21,45,.62) 55%,
      rgba(7,30,61,.22) 80%,
      rgba(7,30,61,.05) 100%
    );
}
/* faixa ouro esquerda */
.hero::before {
  content:''; position:absolute;
  left:0; top:0; bottom:0; width:3px; z-index:3;
  background:linear-gradient(to bottom, transparent 10%, var(--gold) 50%, transparent 90%);
}
.hero-content {
  position:relative; z-index:2;
  max-width:820px;
  padding:clamp(140px,16vw,200px) 0 clamp(80px,8vw,120px);
}
.hero-badge {
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--ff-mono); font-size:10px;
  letter-spacing:.32em; text-transform:uppercase;
  color:var(--gold);
  background:rgba(201,150,42,.08);
  border:1px solid var(--border);
  padding:8px 18px; border-radius:var(--r);
  margin-bottom:36px;
  opacity:0; animation:fade-up .8s var(--ease-out-expo) 3.2s both;
}
.hero-badge::before {
  content:''; width:6px; height:6px;
  background:var(--gold); border-radius:50%;
  animation:blink 2s ease-in-out infinite;
}
@keyframes blink { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.35;transform:scale(.65)} }

.hero h1 {
  font-family:var(--ff-display);
  font-size:clamp(38px,5.2vw,74px);
  font-weight:600; line-height:1.08;
  margin-bottom:28px; color:var(--white);
  opacity:0; animation:fade-up .9s var(--ease-out-expo) 3.4s both;
}
.hero h1 em { font-style:italic; color:var(--gold-lt); }

.hero p {
  font-size:clamp(15px,1.55vw,19px);
  line-height:1.8; color:var(--muted);
  max-width:620px; font-weight:300;
  margin-bottom:44px;
  opacity:0; animation:fade-up .9s var(--ease-out-expo) 3.6s both;
}
.hero-btns {
  display:flex; flex-wrap:wrap; gap:16px;
  opacity:0; animation:fade-up .9s var(--ease-out-expo) 3.8s both;
}
/* scroll hint */
.hero-scroll {
  position:absolute; bottom:44px; left:50%;
  transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  opacity:0; animation:fade-up .8s var(--ease-out-expo) 4.1s both;
}
.hero-scroll span { font-family:var(--ff-mono); font-size:9px; letter-spacing:.3em; color:var(--muted); text-transform:uppercase; }
.scroll-line { width:1px; height:52px; background:linear-gradient(to bottom, var(--gold), transparent); animation:scroll-line 2.2s ease-in-out infinite; }
@keyframes scroll-line { 0%{transform:scaleY(0);transform-origin:top} 50%{transform:scaleY(1);transform-origin:top} 51%{transform:scaleY(1);transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }

/* ================================================================
   BOTÕES GLOBAIS
================================================================ */
.btn-primary {
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  background:linear-gradient(135deg,var(--gold) 0%,var(--gold-lt) 100%);
  color:var(--navy-900); padding:18px 38px;
  border-radius:var(--r); position:relative; overflow:hidden;
  transition:all .35s var(--ease-out-expo);
}
.btn-primary::before {
  content:''; position:absolute; inset:0;
  background:rgba(255,255,255,.14);
  transform:translateX(-101%);
  transition:transform .45s var(--ease-out-expo);
}
.btn-primary:hover::before { transform:translateX(0); }
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 18px 44px rgba(201,150,42,.42); color:var(--navy-900); }

.btn-secondary {
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--off); border:1px solid rgba(232,230,224,.35);
  padding:18px 38px; border-radius:var(--r);
  transition:all .35s var(--ease-out-expo);
}
.btn-secondary:hover {
  border-color:var(--gold); color:var(--gold);
  background:rgba(201,150,42,.06);
  transform:translateY(-3px);
}
.btn-ghost {
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold); border:1px solid var(--gold);
  padding:14px 28px; border-radius:var(--r);
  transition:all .35s var(--ease-out-expo);
}
.btn-ghost:hover { background:var(--gold); color:var(--navy-900); box-shadow:0 8px 32px var(--gold-glow); }

/* ================================================================
   UTILITY: SECTION LABELS
================================================================ */
.section-label {
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--ff-mono); font-size:10px;
  letter-spacing:.32em; text-transform:uppercase;
  color:var(--gold); margin-bottom:20px;
}
.section-label::before {
  content:''; display:inline-block;
  width:28px; height:1px; background:var(--gold);
}
.section-title {
  font-family:var(--ff-display);
  font-size:clamp(34px,4vw,58px);
  font-weight:600; line-height:1.1;
  margin-bottom:20px; color:var(--white);
}
.section-title em { font-style:italic; color:var(--gold-lt); }
.section-sub {
  font-size:clamp(15px,1.5vw,18px);
  line-height:1.75; color:var(--muted);
  font-weight:300; max-width:600px;
  margin-bottom:60px;
}

/* ================================================================
   SCROLL REVEAL
================================================================ */
.reveal {
  opacity:0; transform:translateY(36px);
  transition:opacity .85s var(--ease-out-expo), transform .85s var(--ease-out-expo);
}
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-d1 { transition-delay:.08s; }
.reveal-d2 { transition-delay:.16s; }
.reveal-d3 { transition-delay:.24s; }
.reveal-d4 { transition-delay:.32s; }
.reveal-d5 { transition-delay:.40s; }
.reveal-d6 { transition-delay:.48s; }

/* shared animation */
@keyframes fade-up {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ================================================================
   STATS BELT
================================================================ */
.stats-belt {
  background:var(--navy-800);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:0; overflow:hidden; position:relative;
}
/* marquee faixa */
.stats-belt::before {
  content:'PONTO CEGO · LOGÍSTICA · SUPPLY CHAIN · EFICIÊNCIA · GOVERNANÇA · ESG · NETWORK DESIGN · S&OP · ';
  position:absolute; top:0; width:300%; left:0;
  font-family:var(--ff-mono); font-size:9px;
  letter-spacing:.3em; color:rgba(201,150,42,.06);
  white-space:nowrap;
  animation:ticker 30s linear infinite;
}
@keyframes ticker { from{transform:translateX(0)} to{transform:translateX(-33.33%)} }

.stats-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
}
.stat-item {
  padding:56px 28px;
  text-align:center;
  border-right:1px solid rgba(255,255,255,.06);
  position:relative; overflow:hidden;
  transition:background .4s;
}
.stat-item:last-child { border-right:none; }
.stat-item::before {
  content:''; position:absolute; bottom:0; left:0; right:0;
  height:2px; background:var(--gold);
  transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease-out-expo);
}
.stat-item:hover::before { transform:scaleX(1); }
.stat-item:hover { background:rgba(201,150,42,.04); }

.stat-num {
  font-family:var(--ff-display);
  font-size:clamp(48px,5vw,76px);
  font-weight:700; line-height:1;
  color:var(--gold);
  letter-spacing:-.02em; margin-bottom:10px;
}
.stat-label {
  font-size:11px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted);
}

/* ================================================================
   COMPARE SECTION — Ponto Cego vs Mercado
================================================================ */
.compare {
  padding:var(--section-pad) 0;
  background: linear-gradient(180deg, var(--navy-900) 0%, var(--navy-800) 100%);
  position:relative; overflow:hidden;
}
.compare::after {
  content:''; position:absolute;
  top:-300px; right:-300px;
  width:700px; height:700px;
  border:1px solid rgba(201,150,42,.04);
  border-radius:50%; pointer-events:none;
}
.compare-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2px;
  border:1px solid var(--border);
  border-radius:4px;
  overflow:hidden;
}
.compare-col {
  background:var(--faint);
  padding:48px 44px;
}
.compare-col.highlight {
  background:linear-gradient(160deg, rgba(201,150,42,.10) 0%, rgba(201,150,42,.04) 100%);
  border-left:2px solid var(--gold);
}
.compare-col h3 {
  font-family:var(--ff-display);
  font-size:22px; font-weight:600;
  margin-bottom:8px;
  display:flex; align-items:center; gap:12px;
}
.compare-col h3 .badge-col {
  font-family:var(--ff-mono);
  font-size:9px; letter-spacing:.2em;
  padding:4px 10px; border-radius:2px;
  text-transform:uppercase;
}
.col-market  .badge-col { background:rgba(255,255,255,.08); color:var(--muted); }
.col-pc      .badge-col { background:var(--gold-dim); color:var(--gold); }
.compare-col .col-sub { font-size:13px; color:var(--muted); margin-bottom:36px; }
.compare-row {
  display:flex; align-items:flex-start; gap:16px;
  padding:20px 0; border-bottom:1px solid rgba(255,255,255,.05);
}
.compare-row:last-child { border-bottom:none; }
.compare-icon {
  width:28px; height:28px; flex-shrink:0;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:13px; margin-top:2px;
}
.icon-x  { background:rgba(220,50,50,.12);  color:#e05555; }
.icon-ok { background:rgba(201,150,42,.15);  color:var(--gold); }
.compare-row-text strong {
  display:block; font-size:14px; font-weight:600;
  color:var(--off); margin-bottom:4px;
}
.compare-row-text span { font-size:13px; color:var(--muted); line-height:1.6; }

/* ================================================================
   PROBLEMS
================================================================ */
.problems {
  padding:var(--section-pad) 0;
  background:var(--navy-900);
}
.problems-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:20px;
}
.problem-card {
  background:var(--faint);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:44px 36px;
  position:relative; overflow:hidden;
  transition:all .4s var(--ease-out-expo);
  cursor:default;
}
.problem-card::after {
  content:''; position:absolute;
  bottom:0; left:0; width:0; height:2px;
  background:var(--gold);
  transition:width .5s var(--ease-out-expo);
}
.problem-card:hover { transform:translateY(-8px); border-color:var(--border-h); box-shadow:0 24px 70px rgba(0,0,0,.55); }
.problem-card:hover::after { width:100%; }
.problem-icon { font-size:28px; margin-bottom:20px; }
.problem-card h3 { font-family:var(--ff-display); font-size:20px; font-weight:600; color:var(--white); margin-bottom:12px; }
.problem-card p  { font-size:14px; line-height:1.7; color:var(--muted); font-weight:300; }

/* ================================================================
   SERVICES
================================================================ */
.services {
  padding:var(--section-pad) 0;
  background:linear-gradient(180deg, var(--navy-800) 0%, var(--navy-900) 100%);
}
.service-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
  gap:20px;
}
.service {
  background:var(--faint);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:48px 36px;
  display:flex; flex-direction:column; gap:16px;
  transition:all .4s var(--ease-out-expo);
  position:relative; overflow:hidden;
}
.service::before, .service::after {
  content:''; position:absolute;
  width:36px; height:36px; opacity:0;
  transition:opacity .4s, width .4s, height .4s;
}
.service::before { top:0; left:0; border-top:2px solid var(--gold); border-left:2px solid var(--gold); }
.service::after  { bottom:0; right:0; border-bottom:2px solid var(--gold); border-right:2px solid var(--gold); }
.service:hover::before, .service:hover::after { opacity:1; }
.service:hover { transform:translateY(-10px); border-color:var(--border-h); box-shadow:0 28px 80px rgba(0,0,0,.55); background:rgba(201,150,42,.04); }
.service-num { font-family:var(--ff-mono); font-size:10px; letter-spacing:.2em; color:var(--gold); }
.service h3 { font-family:var(--ff-display); font-size:24px; font-weight:600; color:var(--gold-lt); line-height:1.2; }
.service p  { font-size:14px; line-height:1.75; color:var(--muted); font-weight:300; }
.service-arrow { margin-top:auto; font-size:13px; color:var(--gold); opacity:0; transition:opacity .3s; }
.service:hover .service-arrow { opacity:1; }

/* ================================================================
   PROCESSO
================================================================ */
.process {
  padding:var(--section-pad) 0;
  background:var(--navy-800);
  position:relative; overflow:hidden;
}
.process::before {
  content:''; position:absolute;
  top:-200px; right:-200px;
  width:550px; height:550px;
  border:1px solid rgba(201,150,42,.05);
  border-radius:50%; pointer-events:none;
}
.steps-row {
  display:flex; gap:12px; margin-bottom:40px;
  flex-wrap:wrap; position:relative;
}
.steps-row::before {
  content:''; position:absolute;
  top:40px; left:90px; right:90px; height:1px;
  background:linear-gradient(90deg, transparent, var(--border), transparent);
  pointer-events:none;
}
.step {
  flex:1; min-width:140px;
  padding:26px 18px; text-align:center;
  background:var(--faint);
  border:1px solid var(--border);
  border-radius:var(--r);
  cursor:pointer; position:relative; z-index:1;
  transition:all .35s var(--ease-out-expo);
}
.step:hover { transform:translateY(-6px); border-color:var(--border-h); }
.step.active {
  border-color:var(--gold);
  background:rgba(201,150,42,.10);
  box-shadow:0 0 40px rgba(201,150,42,.14), 0 16px 44px rgba(0,0,0,.4);
}
.step-num { font-family:var(--ff-display); font-size:46px; font-weight:700; color:var(--gold); line-height:1; margin-bottom:6px; }
.step-label { font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.step.active .step-label { color:var(--off); }

.process-detail {
  max-width:860px; margin:auto;
  background:rgba(4,21,45,.75);
  backdrop-filter:blur(24px);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:clamp(36px,5vw,64px) clamp(28px,5vw,72px);
  text-align:center; position:relative;
}
.process-detail::before {
  content:''; position:absolute;
  top:-1px; left:72px; right:72px; height:2px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
}
.process-detail h3 {
  font-family:var(--ff-display);
  font-size:clamp(22px,3vw,38px);
  font-weight:600; color:var(--gold);
  margin-bottom:18px;
  transition:opacity .3s;
}
.process-detail p {
  font-size:clamp(15px,1.5vw,18px);
  line-height:1.85; color:var(--muted); font-weight:300;
  transition:opacity .3s;
}
.process-detail.fading h3,
.process-detail.fading p { opacity:0; }

/* ================================================================
   CASES
================================================================ */
.cases {
  padding:var(--section-pad) 0;
  background:var(--navy-900);
}
.case-grid, .cases-page-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(320px,1fr));
  gap:20px;
}
.case {
  background:var(--faint);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:48px 38px;
  display:flex; flex-direction:column; gap:18px;
  transition:all .4s var(--ease-out-expo);
  position:relative; overflow:hidden;
}
.case-tag {
  font-family:var(--ff-mono); font-size:9px;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold); display:block; margin-bottom:-6px;
}
.case h3 { font-family:var(--ff-display); font-size:clamp(20px,2.2vw,26px); font-weight:600; color:var(--white); line-height:1.25; }
.case p  { font-size:14px; line-height:1.75; color:var(--muted); font-weight:300; }
.case-result {
  margin-top:auto;
  padding:18px 22px;
  background:rgba(201,150,42,.08);
  border:1px solid var(--border);
  border-radius:var(--r);
  font-family:var(--ff-mono); font-size:12px;
  letter-spacing:.05em; color:var(--gold);
  font-weight:700;
}
.case:hover { transform:translateY(-10px); border-color:var(--border-h); box-shadow:0 28px 80px rgba(0,0,0,.6); }

/* ================================================================
   ABOUT STRIP
================================================================ */
.about {
  padding:var(--section-pad) 0;
  background:linear-gradient(160deg, var(--navy-800) 0%, var(--navy-900) 100%);
  position:relative; overflow:hidden;
}
.about::before {
  content:'"'; position:absolute;
  top:40px; left:-30px;
  font-family:var(--ff-display);
  font-size:380px; line-height:1;
  color:rgba(201,150,42,.025); pointer-events:none;
}
.about-body { max-width:820px; }
.about-body p {
  font-size:clamp(16px,1.6vw,20px);
  line-height:1.9; color:var(--muted);
  font-weight:300; margin-bottom:24px;
}
.about-body p strong { color:var(--off); font-weight:600; }

/* pillar grid inside about */
.pillars-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:20px; margin-top:60px;
}
.pillar {
  background:var(--faint);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:40px 32px;
  transition:all .4s var(--ease-out-expo);
}
.pillar:hover { border-color:var(--border-h); transform:translateY(-6px); box-shadow:0 20px 60px rgba(0,0,0,.4); }
.pillar h3 { font-family:var(--ff-display); font-size:22px; font-weight:600; color:var(--gold); margin-bottom:14px; }
.pillar p  { font-size:14px; line-height:1.7; color:var(--muted); font-weight:300; }

/* ================================================================
   CTA
================================================================ */
.cta {
  padding:clamp(100px,14vw,160px) 0;
  background:var(--navy-800); text-align:center;
  position:relative; overflow:hidden;
}
.cta::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at center, rgba(201,150,42,.07) 0%, transparent 68%);
  pointer-events:none;
}
.cta-inner { position:relative; z-index:1; }
.cta h2 {
  font-family:var(--ff-display);
  font-size:clamp(32px,4.5vw,60px);
  font-weight:600; line-height:1.15;
  max-width:720px; margin:0 auto 40px;
  color:var(--white);
}
.cta h2 em { font-style:italic; color:var(--gold-lt); }

/* ================================================================
   CONTACT SECTION
================================================================ */
.contato { padding:var(--section-pad) 0; background:var(--navy-900); }
.contato h2 { font-family:var(--ff-display); color:var(--white); font-size:clamp(32px,4vw,54px); font-weight:600; margin-bottom:60px; }
.contato-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:20px;
}
.contato-card {
  background:var(--faint);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:48px 40px;
  display:flex; flex-direction:column; gap:20px;
  transition:all .4s var(--ease-out-expo);
}
.contato-card:hover { transform:translateY(-8px); border-color:var(--border-h); box-shadow:0 20px 60px rgba(0,0,0,.5); background:rgba(201,150,42,.04); }
.contato-card h3 { font-family:var(--ff-display); font-size:28px; font-weight:600; color:var(--gold); }
.contato-card a { font-size:16px; color:var(--muted); transition:color .3s; }
.contato-card a:hover { color:var(--gold); }
.btn-agendar { @extend .btn-ghost; }

/* ================================================================
   FORM
================================================================ */
.contato-form { max-width:720px; margin:0 auto; }
.form-group { display:flex; flex-direction:column; gap:8px; margin-bottom:24px; }
.form-group label {
  font-size:10px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
}
.form-group input,
.form-group textarea {
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:16px 20px; color:var(--off);
  font-family:var(--ff-body); font-size:15px;
  transition:all .3s; outline:none;
  width:100%;
}
.form-group input:focus,
.form-group textarea:focus {
  border-color:var(--gold);
  background:rgba(201,150,42,.04);
  box-shadow:0 0 0 3px rgba(201,150,42,.10);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color:rgba(255,255,255,.25); }
.form-group textarea { min-height:150px; resize:vertical; }
.btn-form {
  width:100%; padding:20px 40px;
  background:linear-gradient(135deg,var(--gold),var(--gold-lt));
  color:var(--navy-900); font-family:var(--ff-body);
  font-size:12px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  border:none; border-radius:var(--r);
  transition:all .35s var(--ease-out-expo);
}
.btn-form:hover { transform:translateY(-3px); box-shadow:0 18px 44px rgba(201,150,42,.42); }

/* ================================================================
   PAGE HERO (páginas internas)
================================================================ */
.page-hero {
  padding:clamp(150px,18vw,220px) 0 clamp(70px,8vw,110px);
  text-align:center;
  background:var(--navy-900);
  position:relative; overflow:hidden;
}
.page-hero::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 120%, rgba(201,150,42,.06) 0%, transparent 55%);
  pointer-events:none;
}
.page-hero::after {
  content:''; position:absolute;
  bottom:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--border), transparent);
}
.page-hero h1 {
  font-family:var(--ff-display);
  font-size:clamp(42px,6.5vw,80px);
  font-weight:600; line-height:1.06;
  color:var(--white); margin-bottom:20px;
}
.page-hero p {
  font-size:clamp(16px,1.8vw,20px);
  color:var(--muted); font-weight:300;
  max-width:560px; margin:0 auto;
}

/* ================================================================
   ABOUT PAGE
================================================================ */
.about-page { padding-bottom:var(--section-pad); }
.about-page section { margin-bottom:80px; }
.about-page h2 { font-family:var(--ff-display); font-size:clamp(28px,3.5vw,46px); font-weight:600; color:var(--gold); margin-bottom:28px; }
.about-page p  { font-size:clamp(15px,1.5vw,18px); line-height:1.9; color:var(--muted); font-weight:300; margin-bottom:20px; max-width:980px; }
.about-page p strong { color:var(--off); font-weight:600; }

/* process-card in about */
.process-card, .commitment-card {
  background:rgba(4,21,45,.75);
  backdrop-filter:blur(20px);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:clamp(32px,4vw,60px);
  text-align:center; position:relative;
}
.commitment-card::before {
  content:''; position:absolute;
  top:-1px; left:60px; right:60px; height:2px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
}
.commitment-card h3 { font-family:var(--ff-display); font-size:clamp(22px,3vw,36px); font-weight:600; color:var(--gold); margin-bottom:20px; }
.commitment-card p  { font-size:17px; line-height:1.85; color:var(--muted); font-weight:300; }
.commitment-card strong { color:var(--off); }

/* ================================================================
   FOOTER
================================================================ */
footer {
  padding:60px 40px;
  text-align:center;
  border-top:1px solid var(--border);
  background:var(--navy-950);
  display:flex; flex-direction:column; gap:14px;
}
.footer-logo { font-family:var(--ff-display); font-size:20px; font-weight:600; letter-spacing:.1em; color:var(--white); }
.footer-logo span { color:var(--gold); }
footer p { color:var(--muted); font-size:13px; letter-spacing:.05em; }

/* ================================================================
   CARD BASE (genérico)
================================================================ */
.card {
  background:var(--faint);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:44px 36px;
  transition:all .4s var(--ease-out-expo);
}
.card:hover { transform:translateY(-8px); border-color:var(--border-h); box-shadow:0 20px 60px rgba(0,0,0,.5); }
.card h3 { font-family:var(--ff-display); font-size:22px; font-weight:600; color:var(--gold); margin-bottom:14px; }
.card p  { font-size:14px; line-height:1.75; color:var(--muted); font-weight:300; }

/* btn-agendar standalone */
a.btn-agendar, .btn-agendar {
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold); border:1px solid var(--gold);
  padding:14px 28px; border-radius:var(--r);
  transition:all .35s var(--ease-out-expo);
}
a.btn-agendar:hover, .btn-agendar:hover {
  background:var(--gold); color:var(--navy-900);
  box-shadow:0 8px 32px var(--gold-glow);
}

/* ================================================================
   RESPONSIVIDADE — TABLET
================================================================ */
@media(max-width:1024px){
  .stats-grid       { grid-template-columns:repeat(2,1fr); }
  .stat-item        { border-bottom:1px solid rgba(255,255,255,.06); }
  .compare-grid     { grid-template-columns:1fr; }
  .compare-col.highlight { border-left:none; border-top:2px solid var(--gold); }
  .steps-row::before{ display:none; }
  .process-detail   { padding:40px 32px; }
}

/* ================================================================
   RESPONSIVIDADE — MOBILE
================================================================ */
@media(max-width:768px){
  header .container { flex-direction:column; text-align:center; padding:16px 0; gap:14px; }
  .logo img         { width:80px; }
  .logo-text        { font-size:20px; }
  nav               { flex-wrap:wrap; justify-content:center; gap:6px; }
  nav a             { font-size:11px; padding:6px 11px; }
  .btn-header       { width:100%; text-align:center; }

  .hero-content     { padding:160px 0 100px; text-align:center; max-width:100%; }
  .hero-badge       { margin:0 auto 32px; }
  .hero p           { margin:0 auto 36px; }
  .hero-btns        { flex-direction:column; align-items:center; }
  .btn-primary, .btn-secondary { width:100%; max-width:360px; justify-content:center; }
  .hero-scroll      { display:none; }
  .hero-bg          { background-position:70% center; }

  .stats-grid       { grid-template-columns:1fr 1fr; }
  .stat-item        { padding:36px 18px; }

  .steps-row        { flex-direction:column; align-items:center; }
  .step             { width:100%; max-width:320px; }

  .page-hero        { padding:150px 0 70px; }

  .contato h2       { font-size:clamp(26px,5vw,38px); }
  .cta h2           { font-size:clamp(26px,5vw,38px); }

  .about::before    { font-size:220px; }
  footer            { padding:40px 20px; }
}

/* ================================================================
   RESPONSIVIDADE — SMALL MOBILE
================================================================ */
@media(max-width:480px){
  .container        { width:95%; }
  .stats-grid       { grid-template-columns:1fr; }
  .case-grid, .cases-page-grid, .service-grid, .problems-grid, .pillars-grid { grid-template-columns:1fr; }
  .service, .case, .card, .contato-card, .pillar, .problem-card { padding:30px 22px; }
  .compare-col      { padding:30px 22px; }
}

@media(max-width:360px){
  .logo-text  { font-size:17px; }
  nav a       { font-size:10px; }
  .stat-num   { font-size:44px; }
}