:root{
  --bg: #f5f7fb;
  --surface: #ffffff;
  --surface-soft: #eef2f8;
  --primary: #0f172a;
  --primary-2: #1e293b;
  --accent: #c8a96b;
  --accent-2: #e5d3ad;
  --text: #1f2937;
  --muted: #64748b;
  --line: rgba(15, 23, 42, 0.10);
  --shadow-lg: 0 30px 70px rgba(15, 23, 42, 0.12);
  --shadow-md: 0 16px 40px rgba(15, 23, 42, 0.10);
  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --container: 1180px;
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html{
  scroll-behavior: smooth;
}

body{
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
  background:
    radial-gradient(circle at top left, rgba(200, 169, 107, 0.10), transparent 28%),
    linear-gradient(180deg, #f9fbff 0%, #f5f7fb 35%, #eef3f9 100%);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
}

a{
  color: inherit;
  text-decoration: none;
}

img{
  max-width: 100%;
  display: block;
}

button,
input,
textarea{
  font: inherit;
}

.container{
  width: min(calc(100% - 32px), var(--container));
  margin: 0 auto;
}

.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(18px);
  background: rgba(255, 255, 255, 0.82);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.header-container{
  min-height: 86px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.brand{
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.brand-mark{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 100%);
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.08em;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}

.brand-text{
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.03em;
}

.main-nav{
  display: inline-flex;
  align-items: center;
  gap: 24px;
}

.main-nav a{
  color: var(--primary);
  font-weight: 600;
  font-size: 0.95rem;
  position: relative;
}

.main-nav a::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 100%;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--accent), transparent);
  transition: transform 0.28s ease;
}

.main-nav a:hover::after{
  transform: scaleX(1);
}

.header-cta{
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  box-shadow: var(--shadow-md);
  transition: transform 0.25s ease, background 0.25s ease;
}

.header-cta:hover{
  transform: translateY(-2px);
  background: #0b1324;
}

.hero{
  position: relative;
  padding: 92px 0 70px;
  overflow: hidden;
}

.hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, rgba(15, 23, 42, 0.035), transparent 40%),
    radial-gradient(circle at 80% 20%, rgba(200, 169, 107, 0.18), transparent 18%);
  pointer-events: none;
}

.hero-container{
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 32px;
  align-items: center;
}

.hero-copy,
.hero-card{
  position: relative;
  z-index: 1;
}

.hero-eyebrow,
.section-tag,
.card-label{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent);
}

.hero-eyebrow::before,
.section-tag::before,
.card-label::before{
  content: "";
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
}

.hero h1{
  margin-top: 18px;
  font-size: clamp(2.5rem, 5vw, 4.7rem);
  line-height: 1.05;
  color: var(--primary);
  letter-spacing: -0.04em;
  max-width: 13ch;
}

.hero h1 span{
  display: block;
  color: #334155;
}

.hero-description{
  margin-top: 22px;
  max-width: 670px;
  font-size: 1.06rem;
  color: var(--muted);
}

.hero-actions{
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 24px;
  border-radius: 999px;
  font-weight: 700;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  cursor: pointer;
  border: none;
}

.btn:hover{
  transform: translateY(-2px);
}

.btn-primary{
  background: linear-gradient(135deg, var(--primary) 0%, #1b2b49 100%);
  color: #fff;
  box-shadow: var(--shadow-md);
}

.btn-secondary{
  background: rgba(255,255,255,0.86);
  color: var(--primary);
  border: 1px solid rgba(15, 23, 42, 0.10);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
}

.btn-full{
  width: 100%;
}

.hero-highlights{
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
}

.hero-highlights li{
  padding: 11px 16px;
  background: rgba(255,255,255,0.82);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  color: #334155;
  font-size: 0.94rem;
  font-weight: 600;
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.04);
}

.hero-card{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.88));
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 24px;
}

.hero-card-inner{
  padding: 28px;
  border-radius: calc(var(--radius-xl) - 8px);
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 1) 0%, rgba(23, 37, 65, 0.96) 75%);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.hero-card-inner::before{
  content: "";
  position: absolute;
  inset: auto -40px -50px auto;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(200, 169, 107, 0.35), transparent 70%);
  pointer-events: none;
}

.hero-card h2{
  margin-top: 18px;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.hero-card p{
  margin-top: 16px;
  color: rgba(255,255,255,0.78);
}

.hero-stats{
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.stat-box{
  padding: 16px;
  border-radius: 18px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
}

.stat-title{
  display: block;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.62);
  margin-bottom: 8px;
}

.stat-box strong{
  font-size: 1rem;
  line-height: 1.3;
}

section{
  position: relative;
  padding: 92px 0;
}

.section-grid,
.contact-grid,
.trust-container{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: center;
}

.section-heading{
  max-width: 760px;
  margin-bottom: 34px;
}

.section-heading.center{
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-heading h2,
.section-copy h2,
.trust-copy h2,
.cta-section h2,
.contact-copy h2{
  margin-top: 14px;
  font-size: clamp(2rem, 4vw, 3.1rem);
  line-height: 1.08;
  color: var(--primary);
  letter-spacing: -0.03em;
}

.section-heading p,
.section-copy p,
.trust-copy p,
.contact-copy p,
.cta-section p{
  margin-top: 18px;
  color: var(--muted);
  font-size: 1rem;
}

.about-panel,
.cta-container{
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(248,250,252,0.92));
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

.about-box{
  padding: 34px;
}

.about-box h3{
  font-size: 1.6rem;
  color: var(--primary);
  line-height: 1.15;
}

.about-box p{
  margin-top: 14px;
  color: var(--muted);
}

.practice-areas{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.45), rgba(255,255,255,0.70));
}

.areas-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.area-card,
.differential-card,
.trust-box,
.contact-form{
  background: rgba(255,255,255,0.88);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 22px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
}

.area-card{
  padding: 28px;
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.area-card:hover,
.differential-card:hover,
.trust-box:hover{
  transform: translateY(-5px);
  box-shadow: 0 24px 50px rgba(15, 23, 42, 0.10);
  border-color: rgba(200, 169, 107, 0.38);
}

.area-card h3,
.differential-card h3{
  font-size: 1.28rem;
  color: var(--primary);
  line-height: 1.2;
}

.area-card p,
.differential-card p,
.trust-box span{
  margin-top: 12px;
  color: var(--muted);
}

.differentials-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.differential-card{
  padding: 28px 24px;
}

.trust-boxes{
  display: grid;
  gap: 16px;
}

.trust-box{
  padding: 22px 24px;
}

.trust-box strong{
  display: block;
  color: var(--primary);
  font-size: 1.1rem;
}

.cta-section{
  padding-top: 40px;
  padding-bottom: 40px;
}

.cta-container{
  text-align: center;
  padding: 54px 28px;
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 1) 0%, rgba(29, 43, 71, 0.96) 100%);
  color: #fff;
  overflow: hidden;
  position: relative;
}

.cta-container::before{
  content: "";
  position: absolute;
  inset: auto auto -70px -70px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(200, 169, 107, 0.25), transparent 70%);
  pointer-events: none;
}

.cta-section h2,
.cta-section p{
  color: #fff;
}

.cta-section p{
  opacity: 0.82;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.cta-actions{
  margin-top: 26px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}

.contact-info{
  margin-top: 28px;
  display: grid;
  gap: 14px;
}

.contact-item{
  padding: 18px 20px;
  border-radius: 18px;
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(15, 23, 42, 0.08);
}

.contact-item strong{
  display: block;
  color: var(--primary);
  margin-bottom: 6px;
}

.contact-form{
  padding: 28px;
}

.form-group + .form-group{
  margin-top: 16px;
}

.form-group label{
  display: inline-block;
  margin-bottom: 8px;
  color: var(--primary);
  font-weight: 700;
}

.form-group input,
.form-group textarea{
  width: 100%;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #fff;
  border-radius: 14px;
  padding: 14px 16px;
  color: var(--text);
  outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.form-group input:focus,
.form-group textarea:focus{
  border-color: rgba(200, 169, 107, 0.85);
  box-shadow: 0 0 0 4px rgba(200, 169, 107, 0.12);
}

.site-footer{
  padding: 28px 0 34px;
  background: #0c1322;
  color: rgba(255,255,255,0.74);
}

.footer-container{
  display: grid;
  gap: 16px;
  justify-items: center;
  text-align: center;
}

.footer-links{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
}

.footer-links a{
  color: rgba(255,255,255,0.82);
}

.footer-copy{
  max-width: 880px;
  font-size: 0.94rem;
}

.floating-whatsapp{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  min-width: 148px;
  min-height: 54px;
  padding: 0 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0f172a 0%, #1f3c66 100%);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.24);
}

@media (max-width: 1100px){
  .hero-container,
  .section-grid,
  .contact-grid,
  .trust-container{
    grid-template-columns: 1fr;
  }

  .areas-grid{
    grid-template-columns: repeat(2, 1fr);
  }

  .differentials-grid{
    grid-template-columns: repeat(2, 1fr);
  }

  .hero h1{
    max-width: 100%;
  }
}

@media (max-width: 860px){
  .main-nav,
  .header-cta{
    display: none;
  }

  .hero{
    padding-top: 72px;
  }

  section{
    padding: 72px 0;
  }

  .areas-grid,
  .differentials-grid,
  .hero-stats{
    grid-template-columns: 1fr;
  }

  .cta-actions,
  .hero-actions{
    flex-direction: column;
    align-items: stretch;
  }

  .btn{
    width: 100%;
  }
}

@media (max-width: 640px){
  .container{
    width: min(calc(100% - 22px), var(--container));
  }

  .hero-card,
  .about-box,
  .area-card,
  .differential-card,
  .contact-form,
  .cta-container{
    padding-left: 20px;
    padding-right: 20px;
  }

  .hero-card-inner{
    padding: 22px;
  }

  .hero h1{
    font-size: clamp(2.1rem, 11vw, 3.1rem);
  }

  .section-heading h2,
  .section-copy h2,
  .trust-copy h2,
  .cta-section h2,
  .contact-copy h2{
    font-size: clamp(1.7rem, 9vw, 2.3rem);
  }

  .floating-whatsapp{
    right: 12px;
    bottom: 12px;
    min-width: 132px;
    min-height: 50px;
    font-size: 0.92rem;
  }
}


/* ===== HERO VIDEO OVERRIDE ===== */
.hero{
  position: relative !important;
  min-height: 100vh !important;
  padding: 120px 0 80px !important;
  overflow: hidden !important;
  background: #0f172a !important;
}

.hero::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(90deg, rgba(7, 12, 24, 0.82) 0%, rgba(7, 12, 24, 0.68) 38%, rgba(7, 12, 24, 0.45) 62%, rgba(7, 12, 24, 0.58) 100%),
    radial-gradient(circle at 80% 20%, rgba(200, 169, 107, 0.12), transparent 20%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.hero-video-wrap{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
  overflow: hidden !important;
}

.hero-video{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: scale(1.03) !important;
}

.hero-video-overlay{
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(180deg, rgba(10, 15, 28, 0.18) 0%, rgba(10, 15, 28, 0.12) 30%, rgba(10, 15, 28, 0.30) 100%) !important;
}

.hero-container{
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-columns: 1.15fr 0.85fr !important;
  gap: 40px !important;
  align-items: center !important;
  min-height: calc(100vh - 120px) !important;
}

.hero-copy,
.hero-card{
  position: relative !important;
  z-index: 3 !important;
}

.hero h1{
  color: #ffffff !important;
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.28) !important;
}

.hero h1 span{
  color: rgba(255, 255, 255, 0.86) !important;
}

.hero-description{
  color: rgba(255, 255, 255, 0.82) !important;
  text-shadow: 0 8px 22px rgba(0, 0, 0, 0.22) !important;
}

.hero-highlights li{
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.10) !important;
  backdrop-filter: blur(8px) !important;
}

@media (max-width: 1100px){
  .hero-container{
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
}

@media (max-width: 860px){
  .hero{
    min-height: auto !important;
    padding: 90px 0 70px !important;
  }
}

/* ===== HERO REFINO FINAL V1 ===== */

.site-header{
  background: rgba(10, 16, 30, 0.58) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(16px) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.10) !important;
}

.brand-mark{
  width: 46px !important;
  height: 46px !important;
  border-radius: 13px !important;
  background: linear-gradient(135deg, #0d1730 0%, #1f3158 100%) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.18) !important;
}

.brand-text{
  color: #ffffff !important;
  font-size: 1.02rem !important;
}

.main-nav a{
  color: rgba(255,255,255,0.84) !important;
  font-weight: 600 !important;
}

.main-nav a:hover{
  color: #ffffff !important;
}

.header-cta{
  background: linear-gradient(135deg, #ffffff 0%, #e9edf5 100%) !important;
  color: #0f172a !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.16) !important;
}

.header-cta:hover{
  background: #ffffff !important;
}

.hero{
  min-height: 100vh !important;
  padding: 118px 0 72px !important;
}

.hero::before{
  background:
    linear-gradient(90deg, rgba(6, 10, 20, 0.90) 0%, rgba(6, 10, 20, 0.74) 28%, rgba(6, 10, 20, 0.48) 58%, rgba(6, 10, 20, 0.54) 100%),
    radial-gradient(circle at 18% 30%, rgba(200, 169, 107, 0.12), transparent 26%) !important;
}

.hero-video{
  transform: scale(1.08) !important;
  filter: saturate(0.94) brightness(0.72) contrast(1.08) !important;
}

.hero-video-overlay{
  background:
    linear-gradient(180deg, rgba(8, 12, 24, 0.18) 0%, rgba(8, 12, 24, 0.08) 24%, rgba(8, 12, 24, 0.26) 100%) !important;
}

.hero-container{
  grid-template-columns: minmax(0, 1.1fr) minmax(340px, 460px) !important;
  gap: 54px !important;
  min-height: calc(100vh - 118px) !important;
}

.hero-copy{
  max-width: 760px !important;
}

.hero-eyebrow{
  color: #d6b279 !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.18em !important;
  margin-bottom: 14px !important;
}

.hero h1{
  margin-top: 0 !important;
  max-width: 10.5ch !important;
  font-size: clamp(3rem, 5.3vw, 5.5rem) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.05em !important;
  font-weight: 800 !important;
}

.hero h1 span{
  margin-top: 12px !important;
  max-width: 11ch !important;
  font-size: 0.90em !important;
  line-height: 1.00 !important;
  color: rgba(255,255,255,0.90) !important;
}

.hero-description{
  margin-top: 26px !important;
  max-width: 610px !important;
  font-size: 1.08rem !important;
  line-height: 1.72 !important;
  color: rgba(255,255,255,0.84) !important;
}

.hero-actions{
  margin-top: 32px !important;
  gap: 16px !important;
}

.btn{
  min-height: 58px !important;
  padding: 0 26px !important;
  border-radius: 999px !important;
  font-size: 0.97rem !important;
}

.btn-primary{
  background: linear-gradient(135deg, #ffffff 0%, #e9edf5 100%) !important;
  color: #0f172a !important;
  box-shadow: 0 16px 38px rgba(0,0,0,0.18) !important;
}

.btn-secondary{
  background: rgba(255,255,255,0.10) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.12) !important;
}

.hero-highlights{
  margin-top: 22px !important;
  gap: 10px !important;
}

.hero-highlights li{
  padding: 10px 15px !important;
  font-size: 0.88rem !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  color: rgba(255,255,255,0.96) !important;
  backdrop-filter: blur(12px) !important;
}

.hero-card{
  padding: 14px !important;
  border-radius: 30px !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.84)) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  box-shadow: 0 26px 70px rgba(0,0,0,0.22) !important;
  backdrop-filter: blur(12px) !important;
}

.hero-card-inner{
  padding: 30px !important;
  border-radius: 22px !important;
  background:
    linear-gradient(135deg, rgba(12, 23, 45, 0.96) 0%, rgba(28, 43, 74, 0.92) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06) !important;
}

.card-label{
  color: #d6b279 !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.14em !important;
}

.hero-card h2{
  margin-top: 16px !important;
  font-size: clamp(1.9rem, 2.6vw, 2.45rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.04em !important;
  color: #ffffff !important;
}

.hero-card p{
  margin-top: 16px !important;
  color: rgba(255,255,255,0.78) !important;
  line-height: 1.74 !important;
}

.hero-stats{
  margin-top: 24px !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
}

.stat-box{
  padding: 16px 14px !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  backdrop-filter: blur(8px) !important;
}

.stat-title{
  font-size: 0.76rem !important;
  color: rgba(255,255,255,0.64) !important;
}

.stat-box strong{
  font-size: 0.98rem !important;
  color: #ffffff !important;
}

@media (max-width: 1200px){
  .hero-container{
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    min-height: auto !important;
  }

  .hero-copy{
    max-width: 100% !important;
  }

  .hero h1{
    max-width: 12ch !important;
  }

  .hero-card{
    max-width: 560px !important;
  }
}

@media (max-width: 860px){
  .site-header{
    background: rgba(10, 16, 30, 0.74) !important;
  }

  .hero{
    padding: 96px 0 68px !important;
  }

  .hero h1{
    font-size: clamp(2.5rem, 11vw, 4rem) !important;
    max-width: 100% !important;
  }

  .hero h1 span{
    max-width: 100% !important;
  }

  .hero-description{
    font-size: 1rem !important;
  }

  .hero-card{
    max-width: 100% !important;
  }
}


/* ===== HERO CARD MINI STATS REFINO ===== */
.hero-stats{
  margin-top: 22px !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
}

.stat-box{
  padding: 12px 11px !important;
  border-radius: 14px !important;
  min-height: 88px !important;
}

.stat-title{
  font-size: 0.72rem !important;
  margin-bottom: 6px !important;
}

.stat-box strong{
  font-size: 0.90rem !important;
  line-height: 1.25 !important;
}

/* ===== HERO CARD ENERGY ===== */
.hero-card{
  animation: heroCardFloat 5.2s ease-in-out infinite !important;
}

.hero-card-inner{
  position: relative !important;
  overflow: hidden !important;
}

.hero-card-inner::after{
  content: "" !important;
  position: absolute !important;
  inset: -20% auto auto -35% !important;
  width: 70% !important;
  height: 160% !important;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.00) 0%,
    rgba(255,255,255,0.04) 42%,
    rgba(255,255,255,0.10) 50%,
    rgba(255,255,255,0.04) 58%,
    rgba(255,255,255,0.00) 100%
  ) !important;
  transform: rotate(8deg) translateX(-120%) !important;
  animation: heroCardSweep 5.8s ease-in-out infinite !important;
  pointer-events: none !important;
}

.hero-card-inner::before{
  content: "" !important;
  position: absolute !important;
  right: -40px !important;
  bottom: -40px !important;
  width: 180px !important;
  height: 180px !important;
  background: radial-gradient(circle, rgba(214,178,121,0.22), rgba(214,178,121,0.00) 68%) !important;
  filter: blur(4px) !important;
  pointer-events: none !important;
}

.card-label{
  position: relative !important;
}

.card-label::after{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  bottom: -10px !important;
  width: 120px !important;
  height: 1px !important;
  background: linear-gradient(90deg, rgba(214,178,121,0.75), rgba(214,178,121,0.00)) !important;
}

.hero-card h2{
  text-shadow: 0 8px 24px rgba(0,0,0,0.18) !important;
}

.hero-stats{
  position: relative !important;
}

.stat-box{
  position: relative !important;
  overflow: hidden !important;
  transition: transform 0.35s ease, border-color 0.35s ease, background 0.35s ease, box-shadow 0.35s ease !important;
  animation: statPulse 4.6s ease-in-out infinite !important;
}

.stat-box:nth-child(2){
  animation-delay: 0.5s !important;
}

.stat-box:nth-child(3){
  animation-delay: 1s !important;
}

.stat-box::after{
  content: "" !important;
  position: absolute !important;
  inset: auto -20% -40% auto !important;
  width: 90px !important;
  height: 90px !important;
  background: radial-gradient(circle, rgba(255,255,255,0.10), rgba(255,255,255,0.00) 70%) !important;
  pointer-events: none !important;
}

.stat-box:hover{
  transform: translateY(-4px) !important;
  border-color: rgba(255,255,255,0.18) !important;
  background: rgba(255,255,255,0.10) !important;
  box-shadow: 0 16px 30px rgba(0,0,0,0.14) !important;
}

@keyframes heroCardFloat{
  0%{ transform: translateY(0px); }
  50%{ transform: translateY(-6px); }
  100%{ transform: translateY(0px); }
}

@keyframes heroCardSweep{
  0%{ transform: rotate(8deg) translateX(-120%); opacity: 0; }
  18%{ opacity: 1; }
  48%{ opacity: 1; }
  70%{ transform: rotate(8deg) translateX(240%); opacity: 0; }
  100%{ transform: rotate(8deg) translateX(240%); opacity: 0; }
}

@keyframes statPulse{
  0%{ transform: translateY(0px); }
  50%{ transform: translateY(-2px); }
  100%{ transform: translateY(0px); }
}

/* ===== BLOCO 2 | QUEM SOMOS REFINO ===== */
.about{
  position: relative !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 12% 18%, rgba(214,178,121,0.10), transparent 22%),
    radial-gradient(circle at 82% 38%, rgba(15,23,42,0.06), transparent 26%),
    linear-gradient(180deg, #f5f7fb 0%, #eef3f9 100%) !important;
}

.about::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.18), rgba(255,255,255,0.00) 24%, rgba(255,255,255,0.00) 76%, rgba(255,255,255,0.12)) !important;
  pointer-events: none !important;
}

.about .section-copy{
  position: relative !important;
  z-index: 2 !important;
  max-width: 760px !important;
}

.about .section-tag{
  color: #7a8aa5 !important;
  letter-spacing: 0.16em !important;
}

.about .section-copy h2{
  max-width: 11ch !important;
  font-size: clamp(2.3rem, 4.2vw, 4rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.045em !important;
  color: #0f172a !important;
  margin-bottom: 18px !important;
}

.about .section-copy p{
  max-width: 650px !important;
  font-size: 1.02rem !important;
  line-height: 1.78 !important;
  color: #64748b !important;
}

.about-panel{
  position: relative !important;
  z-index: 2 !important;
  border-radius: 32px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,255,255,0.84)) !important;
  border: 1px solid rgba(15,23,42,0.07) !important;
  box-shadow:
    0 28px 70px rgba(15,23,42,0.10),
    inset 0 1px 0 rgba(255,255,255,0.65) !important;
  backdrop-filter: blur(14px) !important;
  overflow: hidden !important;
}

.about-panel::before{
  content: "" !important;
  position: absolute !important;
  top: -80px !important;
  right: -40px !important;
  width: 220px !important;
  height: 220px !important;
  background: radial-gradient(circle, rgba(214,178,121,0.18), rgba(214,178,121,0.00) 68%) !important;
  pointer-events: none !important;
}

.about-panel::after{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 1px !important;
  background: linear-gradient(90deg, rgba(214,178,121,0.00), rgba(214,178,121,0.75), rgba(214,178,121,0.00)) !important;
  pointer-events: none !important;
}

.about-box{
  position: relative !important;
  padding: 42px !important;
}

.about-box h3{
  font-size: 2rem !important;
  line-height: 1.05 !important;
  letter-spacing: -0.04em !important;
  color: #0f172a !important;
  max-width: 12ch !important;
}

.about-box p{
  margin-top: 16px !important;
  max-width: 46ch !important;
  font-size: 1rem !important;
  line-height: 1.75 !important;
  color: #64748b !important;
}

.about-box::before{
  content: "" !important;
  position: absolute !important;
  left: 42px !important;
  top: 30px !important;
  width: 72px !important;
  height: 2px !important;
  background: linear-gradient(90deg, #d6b279, rgba(214,178,121,0.00)) !important;
}

.about-panel{
  animation: aboutFloat 6s ease-in-out infinite !important;
}

@keyframes aboutFloat{
  0%{ transform: translateY(0px); }
  50%{ transform: translateY(-6px); }
  100%{ transform: translateY(0px); }
}

@media (max-width: 1100px){
  .about .section-copy h2{
    max-width: 100% !important;
  }

  .about-box h3{
    max-width: 100% !important;
  }
}

@media (max-width: 860px){
  .about{
    background:
      radial-gradient(circle at 12% 18%, rgba(214,178,121,0.08), transparent 24%),
      linear-gradient(180deg, #f5f7fb 0%, #eef3f9 100%) !important;
  }

  .about-box{
    padding: 30px !important;
  }

  .about-box::before{
    left: 30px !important;
    top: 24px !important;
  }

  .about .section-copy h2{
    font-size: clamp(2rem, 8vw, 3rem) !important;
  }

  .about-box h3{
    font-size: 1.65rem !important;
  }
}

/* ===== BLOCO 2 | ENERGIA EXTRA ===== */
.about{
  isolation: isolate !important;
}

.about::after{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(120deg, rgba(255,255,255,0.00) 0%, rgba(255,255,255,0.04) 22%, rgba(255,255,255,0.00) 40%),
    repeating-linear-gradient(
      90deg,
      rgba(15,23,42,0.00) 0px,
      rgba(15,23,42,0.00) 34px,
      rgba(15,23,42,0.025) 35px,
      rgba(15,23,42,0.00) 36px
    ) !important;
  opacity: 0.65 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.about .container{
  position: relative !important;
  z-index: 2 !important;
}

.about .section-copy{
  animation: aboutCopyFloat 6.8s ease-in-out infinite !important;
}

.about .section-copy h2{
  text-shadow: 0 10px 24px rgba(255,255,255,0.18) !important;
}

.about .section-copy p{
  transition: transform 0.35s ease, opacity 0.35s ease !important;
}

.about-panel{
  transform-style: preserve-3d !important;
  animation: aboutPanelFloat 6s ease-in-out infinite !important;
}

.about-panel::before{
  animation: aboutGlowPulse 5.8s ease-in-out infinite !important;
}

.about-panel::after{
  height: 2px !important;
  animation: aboutTopLinePulse 4.6s ease-in-out infinite !important;
}

.about-box{
  overflow: hidden !important;
}

.about-box::after{
  content: "" !important;
  position: absolute !important;
  top: -25% !important;
  left: -40% !important;
  width: 55% !important;
  height: 170% !important;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.00) 0%,
    rgba(255,255,255,0.00) 30%,
    rgba(255,255,255,0.09) 50%,
    rgba(255,255,255,0.00) 70%,
    rgba(255,255,255,0.00) 100%
  ) !important;
  transform: rotate(10deg) translateX(-140%) !important;
  animation: aboutSweep 6.2s ease-in-out infinite !important;
  pointer-events: none !important;
}

.about-box h3{
  position: relative !important;
}

.about-box h3::after{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  bottom: -14px !important;
  width: 120px !important;
  height: 1px !important;
  background: linear-gradient(90deg, rgba(15,23,42,0.28), rgba(15,23,42,0.00)) !important;
}

.about-box p{
  position: relative !important;
  z-index: 2 !important;
}

.about-energy-orb-1,
.about-energy-orb-2{
  position: absolute !important;
  border-radius: 999px !important;
  filter: blur(40px) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.about-energy-orb-1{
  width: 160px !important;
  height: 160px !important;
  left: 4% !important;
  top: 14% !important;
  background: rgba(214,178,121,0.10) !important;
  animation: aboutOrbOne 7.5s ease-in-out infinite !important;
}

.about-energy-orb-2{
  width: 200px !important;
  height: 200px !important;
  right: 6% !important;
  bottom: 8% !important;
  background: rgba(15,23,42,0.08) !important;
  animation: aboutOrbTwo 9.2s ease-in-out infinite !important;
}

@keyframes aboutCopyFloat{
  0%{ transform: translateY(0px); }
  50%{ transform: translateY(-4px); }
  100%{ transform: translateY(0px); }
}

@keyframes aboutPanelFloat{
  0%{ transform: translateY(0px) rotateX(0deg); }
  50%{ transform: translateY(-8px) rotateX(0.2deg); }
  100%{ transform: translateY(0px) rotateX(0deg); }
}

@keyframes aboutGlowPulse{
  0%{ opacity: 0.70; transform: scale(1); }
  50%{ opacity: 1; transform: scale(1.08); }
  100%{ opacity: 0.70; transform: scale(1); }
}

@keyframes aboutTopLinePulse{
  0%{ opacity: 0.55; }
  50%{ opacity: 1; }
  100%{ opacity: 0.55; }
}

@keyframes aboutSweep{
  0%{
    transform: rotate(10deg) translateX(-140%);
    opacity: 0;
  }
  18%{
    opacity: 1;
  }
  42%{
    opacity: 1;
  }
  65%{
    transform: rotate(10deg) translateX(280%);
    opacity: 0;
  }
  100%{
    transform: rotate(10deg) translateX(280%);
    opacity: 0;
  }
}

@keyframes aboutOrbOne{
  0%{ transform: translateY(0px) translateX(0px) scale(1); }
  50%{ transform: translateY(-16px) translateX(10px) scale(1.08); }
  100%{ transform: translateY(0px) translateX(0px) scale(1); }
}

@keyframes aboutOrbTwo{
  0%{ transform: translateY(0px) translateX(0px) scale(1); }
  50%{ transform: translateY(14px) translateX(-8px) scale(1.06); }
  100%{ transform: translateY(0px) translateX(0px) scale(1); }
}

@media (prefers-reduced-motion: reduce){
  .about .section-copy,
  .about-panel,
  .about-panel::before,
  .about-panel::after,
  .about-box::after,
  .about-energy-orb-1,
  .about-energy-orb-2{
    animation: none !important;
  }
}

/* ===== ABOUT CARD UNIFORME ===== */
.about-box{
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-height: 300px !important;
}

.about-box h3{
  max-width: 10ch !important;
  font-size: clamp(1.75rem, 2.2vw, 2.3rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.04em !important;
  margin-bottom: 14px !important;
}

.about-box p{
  max-width: 34ch !important;
  font-size: 1rem !important;
  line-height: 1.72 !important;
}

@media (max-width: 1100px){
  .about-box{
    min-height: auto !important;
  }

  .about-box h3{
    max-width: 100% !important;
  }

  .about-box p{
    max-width: 100% !important;
  }
}

/* ===== ABOUT CARD TITULO SEM QUEBRA EXCESSIVA ===== */
.about-box h3{
  max-width: 16ch !important;
  font-size: 2.05rem !important;
  line-height: 1.08 !important;
}

/* ===== BLOCO 3 | AREAS DE ATUAÇÃO COM VIDA ===== */
.practice-areas{
  position: relative !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 10% 20%, rgba(214,178,121,0.10), transparent 22%),
    radial-gradient(circle at 88% 70%, rgba(15,23,42,0.06), transparent 24%),
    linear-gradient(180deg, #f7f9fc 0%, #edf2f8 100%) !important;
}

.practice-areas::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(15,23,42,0.00) 0px,
      rgba(15,23,42,0.00) 42px,
      rgba(15,23,42,0.018) 43px,
      rgba(15,23,42,0.00) 44px
    ) !important;
  opacity: 0.6 !important;
  pointer-events: none !important;
}

.areas-grid{
  position: relative !important;
  z-index: 2 !important;
  gap: 18px !important;
}

.area-card{
  position: relative !important;
  overflow: hidden !important;
  border-radius: 24px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,255,255,0.82)) !important;
  border: 1px solid rgba(15,23,42,0.08) !important;
  box-shadow:
    0 20px 40px rgba(15,23,42,0.08),
    inset 0 1px 0 rgba(255,255,255,0.70) !important;
  backdrop-filter: blur(12px) !important;
  transition:
    transform 0.38s ease,
    box-shadow 0.38s ease,
    border-color 0.38s ease,
    background 0.38s ease !important;
  animation: areaFloat 6.5s ease-in-out infinite !important;
}

.area-card:nth-child(2){
  animation-delay: 0.45s !important;
}

.area-card:nth-child(3){
  animation-delay: 0.9s !important;
}

.area-card:nth-child(4){
  animation-delay: 1.35s !important;
}

.area-card:nth-child(5){
  animation-delay: 1.8s !important;
}

.area-card::before{
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 1px !important;
  background: linear-gradient(90deg, rgba(214,178,121,0.00), rgba(214,178,121,0.90), rgba(214,178,121,0.00)) !important;
  opacity: 0.85 !important;
}

.area-card::after{
  content: "" !important;
  position: absolute !important;
  top: -30% !important;
  left: -38% !important;
  width: 52% !important;
  height: 180% !important;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.00) 0%,
    rgba(255,255,255,0.00) 30%,
    rgba(255,255,255,0.12) 50%,
    rgba(255,255,255,0.00) 70%,
    rgba(255,255,255,0.00) 100%
  ) !important;
  transform: rotate(10deg) translateX(-150%) !important;
  animation: areaSweep 7.5s ease-in-out infinite !important;
  pointer-events: none !important;
}

.area-card h3{
  position: relative !important;
  font-size: 1.42rem !important;
  line-height: 1.12 !important;
  letter-spacing: -0.03em !important;
  color: #0f172a !important;
  margin-bottom: 14px !important;
  text-shadow: 0 4px 14px rgba(255,255,255,0.20) !important;
}

.area-card h3::after{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  bottom: -10px !important;
  width: 74px !important;
  height: 2px !important;
  background: linear-gradient(90deg, rgba(214,178,121,0.90), rgba(214,178,121,0.00)) !important;
}

.area-card p{
  position: relative !important;
  z-index: 2 !important;
  font-size: 1rem !important;
  line-height: 1.75 !important;
  color: #64748b !important;
}

.area-card:hover{
  transform: translateY(-12px) scale(1.02) !important;
  border-color: rgba(214,178,121,0.32) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,252,255,0.92)) !important;
  box-shadow:
    0 32px 65px rgba(15,23,42,0.14),
    0 0 0 1px rgba(214,178,121,0.12) inset !important;
}

.area-card:hover::before{
  opacity: 1 !important;
}

.area-card:hover h3{
  color: #16233d !important;
}

@keyframes areaFloat{
  0%{ transform: translateY(0px); }
  50%{ transform: translateY(-7px); }
  100%{ transform: translateY(0px); }
}

@keyframes areaSweep{
  0%{
    transform: rotate(10deg) translateX(-150%);
    opacity: 0;
  }
  16%{
    opacity: 1;
  }
  42%{
    opacity: 1;
  }
  68%{
    transform: rotate(10deg) translateX(285%);
    opacity: 0;
  }
  100%{
    transform: rotate(10deg) translateX(285%);
    opacity: 0;
  }
}

@media (max-width: 1100px){
  .area-card{
    animation-duration: 5.8s !important;
  }
}

@media (max-width: 860px){
  .area-card:hover{
    transform: translateY(-6px) scale(1.01) !important;
  }
}

@media (prefers-reduced-motion: reduce){
  .area-card,
  .area-card::after{
    animation: none !important;
  }
}

/* ===== BLOCO 3 | MODO ENERGIA ALTA ===== */
.practice-areas{
  position: relative !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 12% 22%, rgba(214,178,121,0.14), transparent 20%),
    radial-gradient(circle at 84% 26%, rgba(31,49,88,0.10), transparent 24%),
    radial-gradient(circle at 70% 80%, rgba(214,178,121,0.08), transparent 22%),
    linear-gradient(180deg, #f8fbff 0%, #edf3fa 100%) !important;
}

.practice-areas::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(15,23,42,0.00) 0px,
      rgba(15,23,42,0.00) 54px,
      rgba(15,23,42,0.022) 55px,
      rgba(15,23,42,0.00) 56px
    ),
    linear-gradient(90deg, rgba(255,255,255,0.20), rgba(255,255,255,0.00) 26%, rgba(255,255,255,0.00) 74%, rgba(255,255,255,0.15)) !important;
  opacity: 0.9 !important;
  pointer-events: none !important;
}

.practice-areas::after{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(circle at 24% 50%, rgba(255,255,255,0.30), transparent 30%),
    radial-gradient(circle at 78% 44%, rgba(255,255,255,0.24), transparent 26%) !important;
  mix-blend-mode: screen !important;
  opacity: 0.55 !important;
  pointer-events: none !important;
}

.areas-grid{
  position: relative !important;
  z-index: 2 !important;
  gap: 20px !important;
  align-items: stretch !important;
}

.area-card{
  position: relative !important;
  overflow: hidden !important;
  padding: 26px 22px !important;
  border-radius: 26px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,251,255,0.88)) !important;
  border: 1px solid rgba(31,49,88,0.08) !important;
  box-shadow:
    0 24px 50px rgba(15,23,42,0.10),
    inset 0 1px 0 rgba(255,255,255,0.80) !important;
  backdrop-filter: blur(14px) !important;
  transition:
    transform 0.40s ease,
    box-shadow 0.40s ease,
    border-color 0.40s ease,
    background 0.40s ease,
    filter 0.40s ease !important;
  animation: areaLift 4.4s ease-in-out infinite !important;
}

.area-card:nth-child(1){ animation-delay: 0s !important; }
.area-card:nth-child(2){ animation-delay: .35s !important; }
.area-card:nth-child(3){ animation-delay: .7s !important; }
.area-card:nth-child(4){ animation-delay: 1.05s !important; }
.area-card:nth-child(5){ animation-delay: 1.4s !important; }

.area-card:nth-child(1),
.area-card:nth-child(3),
.area-card:nth-child(5){
  transform-origin: center bottom !important;
}

.area-card:nth-child(2),
.area-card:nth-child(4){
  transform-origin: center top !important;
}

.area-card::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  padding: 1px !important;
  background: linear-gradient(
    135deg,
    rgba(214,178,121,0.00),
    rgba(214,178,121,0.65),
    rgba(31,49,88,0.25),
    rgba(255,255,255,0.00)
  ) !important;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  pointer-events: none !important;
  opacity: 0.7 !important;
}

.area-card::after{
  content: "" !important;
  position: absolute !important;
  top: -35% !important;
  left: -45% !important;
  width: 56% !important;
  height: 190% !important;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.00) 0%,
    rgba(255,255,255,0.00) 30%,
    rgba(255,255,255,0.18) 50%,
    rgba(255,255,255,0.00) 70%,
    rgba(255,255,255,0.00) 100%
  ) !important;
  transform: rotate(11deg) translateX(-150%) !important;
  animation: areaBeam 5.4s ease-in-out infinite !important;
  pointer-events: none !important;
}

.area-card h3{
  position: relative !important;
  font-size: 1.46rem !important;
  line-height: 1.08 !important;
  letter-spacing: -0.035em !important;
  color: #0f172a !important;
  margin-bottom: 16px !important;
}

.area-card h3::after{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  bottom: -11px !important;
  width: 92px !important;
  height: 2px !important;
  background: linear-gradient(90deg, rgba(214,178,121,0.95), rgba(214,178,121,0.00)) !important;
  box-shadow: 0 0 14px rgba(214,178,121,0.22) !important;
}

.area-card p{
  position: relative !important;
  z-index: 2 !important;
  font-size: 1rem !important;
  line-height: 1.78 !important;
  color: #5f718e !important;
}

.area-card:hover{
  transform: translateY(-16px) scale(1.04) !important;
  border-color: rgba(214,178,121,0.38) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,1), rgba(246,250,255,0.96)) !important;
  box-shadow:
    0 38px 80px rgba(15,23,42,0.16),
    0 0 0 1px rgba(214,178,121,0.10) inset,
    0 0 40px rgba(214,178,121,0.08) !important;
  filter: saturate(1.05) !important;
  z-index: 5 !important;
}

.area-card:hover::after{
  animation-duration: 2.2s !important;
}

.area-card:hover h3{
  color: #152542 !important;
}

@keyframes areaLift{
  0%{ transform: translateY(0px) scale(1); }
  50%{ transform: translateY(-10px) scale(1.012); }
  100%{ transform: translateY(0px) scale(1); }
}

@keyframes areaBeam{
  0%{
    transform: rotate(11deg) translateX(-150%);
    opacity: 0;
  }
  16%{
    opacity: 1;
  }
  46%{
    opacity: 1;
  }
  70%{
    transform: rotate(11deg) translateX(290%);
    opacity: 0;
  }
  100%{
    transform: rotate(11deg) translateX(290%);
    opacity: 0;
  }
}

@media (max-width: 1100px){
  .area-card{
    animation-duration: 4.2s !important;
  }

  .area-card:hover{
    transform: translateY(-10px) scale(1.02) !important;
  }
}

@media (max-width: 860px){
  .area-card{
    padding: 22px 18px !important;
  }

  .area-card h3{
    font-size: 1.28rem !important;
  }

  .area-card p{
    font-size: 0.96rem !important;
  }
}

@media (prefers-reduced-motion: reduce){
  .area-card,
  .area-card::after{
    animation: none !important;
  }
}

/* ===== DIREÇÃO NOVA | CONTRASTE ENTRE BLOCOS ===== */

/* BLOCO 2 ESCURO PREMIUM */
.about{
  position: relative !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 14% 20%, rgba(214,178,121,0.16), transparent 20%),
    radial-gradient(circle at 84% 34%, rgba(50,72,118,0.24), transparent 24%),
    linear-gradient(180deg, #09111f 0%, #0d1730 52%, #101d39 100%) !important;
}

.about::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.00) 18%, rgba(255,255,255,0.00) 82%, rgba(255,255,255,0.03)),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.00) 0px,
      rgba(255,255,255,0.00) 48px,
      rgba(255,255,255,0.022) 49px,
      rgba(255,255,255,0.00) 50px
    ) !important;
  opacity: 0.9 !important;
  pointer-events: none !important;
}

.about .section-tag{
  color: #d6b279 !important;
}

.about .section-copy h2{
  color: #ffffff !important;
  text-shadow: 0 14px 34px rgba(0,0,0,0.20) !important;
}

.about .section-copy p{
  color: rgba(226,234,248,0.74) !important;
}

.about-panel{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.06)) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow:
    0 32px 80px rgba(0,0,0,0.26),
    inset 0 1px 0 rgba(255,255,255,0.10) !important;
  backdrop-filter: blur(16px) !important;
}

.about-panel::after{
  background: linear-gradient(90deg, rgba(214,178,121,0.00), rgba(214,178,121,0.95), rgba(214,178,121,0.00)) !important;
}

.about-box h3{
  color: #ffffff !important;
}

.about-box h3::after{
  background: linear-gradient(90deg, rgba(214,178,121,0.95), rgba(214,178,121,0.00)) !important;
}

.about-box p{
  color: rgba(226,234,248,0.74) !important;
}

.about-energy-orb-1{
  background: rgba(214,178,121,0.16) !important;
  filter: blur(56px) !important;
}

.about-energy-orb-2{
  background: rgba(66,98,155,0.20) !important;
  filter: blur(60px) !important;
}

/* BLOCO 3 AZUL PROFUNDO + ENERGIA */
.practice-areas{
  position: relative !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 12% 18%, rgba(214,178,121,0.15), transparent 18%),
    radial-gradient(circle at 82% 24%, rgba(58,87,140,0.22), transparent 22%),
    radial-gradient(circle at 70% 76%, rgba(255,255,255,0.06), transparent 20%),
    linear-gradient(180deg, #0c1730 0%, #132444 48%, #172c53 100%) !important;
}

.practice-areas::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.00) 20%, rgba(255,255,255,0.00) 80%, rgba(255,255,255,0.03)),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.00) 0px,
      rgba(255,255,255,0.00) 54px,
      rgba(255,255,255,0.024) 55px,
      rgba(255,255,255,0.00) 56px
    ) !important;
  opacity: 0.95 !important;
  pointer-events: none !important;
}

.practice-areas::after{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(circle at 18% 48%, rgba(214,178,121,0.08), transparent 24%),
    radial-gradient(circle at 78% 40%, rgba(255,255,255,0.07), transparent 22%) !important;
  pointer-events: none !important;
}

.practice-areas .section-tag{
  color: #d6b279 !important;
}

.practice-areas .section-heading h2{
  color: #ffffff !important;
  text-shadow: 0 18px 40px rgba(0,0,0,0.22) !important;
}

.practice-areas .section-heading p{
  color: rgba(227,235,248,0.78) !important;
}

.practice-areas .section-heading strong{
  color: #ffffff !important;
}

.area-card{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.97), rgba(247,250,255,0.90)) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow:
    0 26px 54px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.82) !important;
}

.area-card:hover{
  box-shadow:
    0 42px 90px rgba(0,0,0,0.28),
    0 0 34px rgba(214,178,121,0.14),
    inset 0 1px 0 rgba(255,255,255,0.88) !important;
}

.practice-areas-energy-orb-1,
.practice-areas-energy-orb-2{
  position: absolute !important;
  border-radius: 999px !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.practice-areas-energy-orb-1{
  width: 220px !important;
  height: 220px !important;
  left: 3% !important;
  top: 16% !important;
  background: rgba(214,178,121,0.12) !important;
  filter: blur(64px) !important;
  animation: practiceOrbA 8s ease-in-out infinite !important;
}

.practice-areas-energy-orb-2{
  width: 280px !important;
  height: 280px !important;
  right: 4% !important;
  bottom: 10% !important;
  background: rgba(93,127,194,0.16) !important;
  filter: blur(74px) !important;
  animation: practiceOrbB 10s ease-in-out infinite !important;
}

@keyframes practiceOrbA{
  0%{ transform: translateY(0px) translateX(0px) scale(1); }
  50%{ transform: translateY(-18px) translateX(8px) scale(1.08); }
  100%{ transform: translateY(0px) translateX(0px) scale(1); }
}

@keyframes practiceOrbB{
  0%{ transform: translateY(0px) translateX(0px) scale(1); }
  50%{ transform: translateY(16px) translateX(-10px) scale(1.06); }
  100%{ transform: translateY(0px) translateX(0px) scale(1); }
}

/* ===== BLOCO 3 | CONTRASTE REAL COM BLOCO 2 ===== */
.practice-areas{
  position: relative !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 12% 18%, rgba(214,178,121,0.12), transparent 18%),
    radial-gradient(circle at 82% 24%, rgba(71,103,163,0.10), transparent 20%),
    radial-gradient(circle at 70% 78%, rgba(255,255,255,0.55), transparent 22%),
    linear-gradient(180deg, #f8fbff 0%, #eef4fb 52%, #e8f0f9 100%) !important;
}

.practice-areas::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.38), rgba(255,255,255,0.00) 18%, rgba(255,255,255,0.00) 82%, rgba(255,255,255,0.28)),
    repeating-linear-gradient(
      90deg,
      rgba(15,23,42,0.00) 0px,
      rgba(15,23,42,0.00) 54px,
      rgba(15,23,42,0.020) 55px,
      rgba(15,23,42,0.00) 56px
    ) !important;
  opacity: 0.95 !important;
  pointer-events: none !important;
}

.practice-areas::after{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(circle at 24% 46%, rgba(255,255,255,0.48), transparent 24%),
    radial-gradient(circle at 78% 42%, rgba(255,255,255,0.34), transparent 22%) !important;
  pointer-events: none !important;
}

.practice-areas .section-tag{
  color: #7c8ca8 !important;
}

.practice-areas .section-heading h2{
  color: #0f172a !important;
  text-shadow: none !important;
}

.practice-areas .section-heading p{
  color: #64748b !important;
}

.practice-areas .section-heading strong{
  color: #0f172a !important;
}

.area-card{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(252,253,255,0.86)) !important;
  border: 1px solid rgba(15,23,42,0.08) !important;
  box-shadow:
    0 22px 46px rgba(15,23,42,0.10),
    inset 0 1px 0 rgba(255,255,255,0.86) !important;
}

.area-card h3{
  color: #0f172a !important;
}

.area-card p{
  color: #64748b !important;
}

.area-card:hover{
  transform: translateY(-16px) scale(1.04) !important;
  border-color: rgba(214,178,121,0.36) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,1), rgba(248,251,255,0.94)) !important;
  box-shadow:
    0 34px 80px rgba(15,23,42,0.16),
    0 0 34px rgba(214,178,121,0.08),
    inset 0 1px 0 rgba(255,255,255,0.92) !important;
}

.practice-areas-energy-orb-1{
  background: rgba(214,178,121,0.14) !important;
  filter: blur(70px) !important;
}

.practice-areas-energy-orb-2{
  background: rgba(82,119,191,0.12) !important;
  filter: blur(78px) !important;
}

/* ===== TROCA DE FUNDO ENTRE BLOCO 2 E BLOCO 3 ===== */

/* BLOCO 2 CLARO */
.about{
  background:
    radial-gradient(circle at 12% 18%, rgba(214,178,121,0.10), transparent 22%),
    radial-gradient(circle at 82% 38%, rgba(15,23,42,0.06), transparent 26%),
    linear-gradient(180deg, #f5f7fb 0%, #eef3f9 100%) !important;
}

.about::before{
  background:
    linear-gradient(90deg, rgba(255,255,255,0.18), rgba(255,255,255,0.00) 24%, rgba(255,255,255,0.00) 76%, rgba(255,255,255,0.12)) !important;
}

.about .section-tag{
  color: #7a8aa5 !important;
}

.about .section-copy h2{
  color: #0f172a !important;
  text-shadow: none !important;
}

.about .section-copy p{
  color: #64748b !important;
}

.about-panel{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,255,255,0.84)) !important;
  border: 1px solid rgba(15,23,42,0.07) !important;
  box-shadow:
    0 28px 70px rgba(15,23,42,0.10),
    inset 0 1px 0 rgba(255,255,255,0.65) !important;
}

.about-box h3{
  color: #0f172a !important;
}

.about-box p{
  color: #64748b !important;
}

.about-energy-orb-1{
  background: rgba(214,178,121,0.10) !important;
}

.about-energy-orb-2{
  background: rgba(15,23,42,0.08) !important;
}

/* BLOCO 3 ESCURO */
.practice-areas{
  background:
    radial-gradient(circle at 12% 18%, rgba(214,178,121,0.15), transparent 18%),
    radial-gradient(circle at 82% 24%, rgba(58,87,140,0.22), transparent 22%),
    radial-gradient(circle at 70% 76%, rgba(255,255,255,0.06), transparent 20%),
    linear-gradient(180deg, #0c1730 0%, #132444 48%, #172c53 100%) !important;
}

.practice-areas::before{
  background:
    linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.00) 20%, rgba(255,255,255,0.00) 80%, rgba(255,255,255,0.03)),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.00) 0px,
      rgba(255,255,255,0.00) 54px,
      rgba(255,255,255,0.024) 55px,
      rgba(255,255,255,0.00) 56px
    ) !important;
}

.practice-areas::after{
  background:
    radial-gradient(circle at 18% 48%, rgba(214,178,121,0.08), transparent 24%),
    radial-gradient(circle at 78% 40%, rgba(255,255,255,0.07), transparent 22%) !important;
}

.practice-areas .section-tag{
  color: #d6b279 !important;
}

.practice-areas .section-heading h2{
  color: #ffffff !important;
}

.practice-areas .section-heading p{
  color: rgba(227,235,248,0.78) !important;
}

.practice-areas .section-heading strong{
  color: #ffffff !important;
}

.area-card{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.97), rgba(247,250,255,0.90)) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow:
    0 26px 54px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.82) !important;
}

.area-card h3{
  color: #0f172a !important;
}

.area-card p{
  color: #5f718e !important;
}

.area-card:hover{
  box-shadow:
    0 42px 90px rgba(0,0,0,0.28),
    0 0 34px rgba(214,178,121,0.14),
    inset 0 1px 0 rgba(255,255,255,0.88) !important;
}

.practice-areas-energy-orb-1{
  background: rgba(214,178,121,0.12) !important;
}

.practice-areas-energy-orb-2{
  background: rgba(93,127,194,0.16) !important;
}

/* ===== BLOCO 4 | SHOWCASE DIFERENCIAIS ===== */
.showcase-differentials{
  position: relative !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 12% 18%, rgba(79,155,255,0.10), transparent 18%),
    radial-gradient(circle at 86% 20%, rgba(214,178,121,0.12), transparent 18%),
    linear-gradient(180deg, #03101f 0%, #041427 46%, #071a31 100%) !important;
  padding: 110px 0 !important;
}

.showcase-differentials::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.00) 16%, rgba(255,255,255,0.00) 84%, rgba(255,255,255,0.03)),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.00) 0px,
      rgba(255,255,255,0.00) 58px,
      rgba(255,255,255,0.022) 59px,
      rgba(255,255,255,0.00) 60px
    ) !important;
  opacity: 0.95 !important;
  pointer-events: none !important;
}

.showcase-differentials::after{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00) 22%, rgba(255,255,255,0.00) 78%, rgba(255,255,255,0.02)) !important;
  pointer-events: none !important;
}

.showcase-differentials-container{
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr) !important;
  gap: 64px !important;
  align-items: start !important;
}

.showcase-copy{
  position: relative !important;
}

.showcase-tag{
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 18px !important;
  border-radius: 999px !important;
  background: rgba(34,95,180,0.12) !important;
  border: 1px solid rgba(76,150,255,0.22) !important;
  color: #b9d8ff !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.12) !important;
}

.showcase-tag::before{
  content: "" !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: #7fd3ff !important;
  box-shadow: 0 0 14px rgba(127,211,255,0.7) !important;
}

.showcase-copy h2{
  margin-top: 22px !important;
  max-width: 11ch !important;
  font-size: clamp(3rem, 5vw, 5.4rem) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.055em !important;
  color: #f6fbff !important;
  text-shadow: 0 18px 44px rgba(0,0,0,0.24) !important;
}

.showcase-description{
  margin-top: 24px !important;
  max-width: 640px !important;
  font-size: 1.08rem !important;
  line-height: 1.78 !important;
  color: rgba(220,232,248,0.76) !important;
}

.showcase-description strong{
  color: #ffffff !important;
}

.showcase-actions{
  margin-top: 30px !important;
}

.showcase-actions .btn-primary{
  background: linear-gradient(135deg, #55a8ff 0%, #2f76f1 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 18px 44px rgba(47,118,241,0.30) !important;
}

.showcase-metrics{
  position: relative !important;
  border-top: 1px solid rgba(116,176,255,0.20) !important;
}

.metric-row{
  position: relative !important;
  display: grid !important;
  grid-template-columns: 180px 1fr !important;
  gap: 24px !important;
  align-items: center !important;
  min-height: 98px !important;
  padding: 18px 0 !important;
  border-bottom: 1px solid rgba(116,176,255,0.18) !important;
  transition: transform 0.35s ease, background 0.35s ease, box-shadow 0.35s ease !important;
  animation: metricPulse 5.2s ease-in-out infinite !important;
}

.metric-row:nth-child(2){ animation-delay: .35s !important; }
.metric-row:nth-child(3){ animation-delay: .7s !important; }
.metric-row:nth-child(4){ animation-delay: 1.05s !important; }
.metric-row:nth-child(5){ animation-delay: 1.4s !important; }

.metric-row::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: 0 !important;
  background: linear-gradient(90deg, rgba(76,150,255,0.12), rgba(76,150,255,0.00)) !important;
  transition: width 0.35s ease !important;
}

.metric-row::after{
  content: "" !important;
  position: absolute !important;
  top: -30% !important;
  left: -16% !important;
  width: 18% !important;
  height: 180% !important;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.00) 0%,
    rgba(255,255,255,0.00) 35%,
    rgba(127,211,255,0.16) 50%,
    rgba(255,255,255,0.00) 65%,
    rgba(255,255,255,0.00) 100%
  ) !important;
  transform: skewX(-18deg) translateX(-220%) !important;
  animation: metricSweep 6.2s ease-in-out infinite !important;
  pointer-events: none !important;
}

.metric-value{
  font-size: clamp(2.8rem, 4.5vw, 4.2rem) !important;
  line-height: 0.95 !important;
  font-weight: 800 !important;
  letter-spacing: -0.05em !important;
  color: #7fc3ff !important;
  text-shadow: 0 0 22px rgba(79,155,255,0.18) !important;
}

.metric-text strong{
  display: block !important;
  font-size: 1.18rem !important;
  line-height: 1.1 !important;
  color: #ffffff !important;
  margin-bottom: 6px !important;
}

.metric-text span{
  display: block !important;
  font-size: 1rem !important;
  line-height: 1.55 !important;
  color: rgba(220,232,248,0.72) !important;
}

.metric-row:hover{
  transform: translateX(8px) !important;
  box-shadow: inset 0 0 0 1px rgba(127,211,255,0.04) !important;
}

.metric-row:hover::before{
  width: 100% !important;
}

.differentials-orb{
  position: absolute !important;
  border-radius: 999px !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.differentials-orb.orb-left{
  width: 240px !important;
  height: 240px !important;
  left: -40px !important;
  top: 90px !important;
  background: rgba(88,165,255,0.16) !important;
  filter: blur(82px) !important;
  animation: diffOrbLeft 8s ease-in-out infinite !important;
}

.differentials-orb.orb-right{
  width: 280px !important;
  height: 280px !important;
  right: -60px !important;
  bottom: 30px !important;
  background: rgba(214,178,121,0.12) !important;
  filter: blur(92px) !important;
  animation: diffOrbRight 10s ease-in-out infinite !important;
}

@keyframes metricPulse{
  0%{ transform: translateX(0px); }
  50%{ transform: translateX(3px); }
  100%{ transform: translateX(0px); }
}

@keyframes metricSweep{
  0%{
    transform: skewX(-18deg) translateX(-220%);
    opacity: 0;
  }
  16%{
    opacity: 1;
  }
  42%{
    opacity: 1;
  }
  65%{
    transform: skewX(-18deg) translateX(620%);
    opacity: 0;
  }
  100%{
    transform: skewX(-18deg) translateX(620%);
    opacity: 0;
  }
}

@keyframes diffOrbLeft{
  0%{ transform: translateY(0px) scale(1); }
  50%{ transform: translateY(-18px) scale(1.08); }
  100%{ transform: translateY(0px) scale(1); }
}

@keyframes diffOrbRight{
  0%{ transform: translateY(0px) scale(1); }
  50%{ transform: translateY(18px) scale(1.06); }
  100%{ transform: translateY(0px) scale(1); }
}

@media (max-width: 1100px){
  .showcase-differentials-container{
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  .showcase-copy h2{
    max-width: 100% !important;
  }

  .metric-row{
    grid-template-columns: 140px 1fr !important;
  }
}

@media (max-width: 860px){
  .showcase-differentials{
    padding: 86px 0 !important;
  }

  .showcase-copy h2{
    font-size: clamp(2.4rem, 10vw, 4rem) !important;
  }

  .metric-row{
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    min-height: auto !important;
    padding: 18px 0 !important;
  }

  .metric-value{
    font-size: 2.6rem !important;
  }

  .metric-text strong{
    font-size: 1.06rem !important;
  }

  .metric-text span{
    font-size: 0.96rem !important;
  }
}

/* ===== BLOCO 4 | LINHAS MAIS FORTES + CONTADORES ===== */
.showcase-metrics{
  border-top: 1px solid rgba(127,211,255,0.34) !important;
  box-shadow: inset 0 1px 0 rgba(127,211,255,0.08) !important;
}

.metric-row{
  min-height: 112px !important;
  border-bottom: 1px solid rgba(127,211,255,0.28) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02) !important;
}

.metric-row::before{
  background: linear-gradient(90deg, rgba(76,150,255,0.18), rgba(76,150,255,0.00)) !important;
}

.metric-row::after{
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.00) 0%,
    rgba(255,255,255,0.00) 35%,
    rgba(127,211,255,0.28) 50%,
    rgba(255,255,255,0.00) 65%,
    rgba(255,255,255,0.00) 100%
  ) !important;
}

.metric-value{
  font-size: clamp(3.2rem, 4.8vw, 4.8rem) !important;
  color: #86c8ff !important;
  text-shadow:
    0 0 16px rgba(79,155,255,0.20),
    0 0 30px rgba(79,155,255,0.12) !important;
  white-space: nowrap !important;
}

.metric-text strong{
  font-size: 1.22rem !important;
}

.metric-text span{
  font-size: 1rem !important;
  line-height: 1.55 !important;
}

.metric-row.is-visible{
  animation: metricRevealPulse 1.2s ease forwards !important;
}

.metric-row.is-visible .metric-value{
  animation: metricValueGlow 1.4s ease forwards !important;
}

@keyframes metricRevealPulse{
  0%{
    transform: translateX(0px);
    background: rgba(127,211,255,0.00);
  }
  50%{
    transform: translateX(10px);
    background: rgba(127,211,255,0.05);
  }
  100%{
    transform: translateX(0px);
    background: rgba(127,211,255,0.00);
  }
}

@keyframes metricValueGlow{
  0%{
    transform: scale(0.92);
    opacity: 0.45;
  }
  60%{
    transform: scale(1.06);
    opacity: 1;
  }
  100%{
    transform: scale(1);
    opacity: 1;
  }
}

/* ===== BLOCO 4 | ENQUADRAMENTO DO LADO DIREITO ===== */
.showcase-differentials-container{
  grid-template-columns: minmax(0, 0.9fr) minmax(560px, 1.1fr) !important;
  gap: 72px !important;
}

.showcase-metrics{
  max-width: 100% !important;
  width: 100% !important;
}

.metric-row{
  grid-template-columns: 220px 1fr !important;
  gap: 26px !important;
  min-height: 118px !important;
  padding: 20px 4px !important;
}

.metric-value{
  font-size: clamp(2.4rem, 3.2vw, 3.6rem) !important;
  line-height: 0.95 !important;
  letter-spacing: -0.05em !important;
}

.metric-text{
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-width: 0 !important;
}

.metric-text strong{
  font-size: 1.06rem !important;
  line-height: 1.1 !important;
  margin-bottom: 6px !important;
}

.metric-text span{
  font-size: 0.92rem !important;
  line-height: 1.5 !important;
  max-width: 34ch !important;
}

@media (max-width: 1200px){
  .showcase-differentials-container{
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  .metric-row{
    grid-template-columns: 180px 1fr !important;
  }
}

@media (max-width: 860px){
  .metric-row{
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    min-height: auto !important;
    padding: 18px 0 !important;
  }

  .metric-value{
    font-size: 2.4rem !important;
  }

  .metric-text span{
    max-width: 100% !important;
  }
}

/* ===== BLOCO 4 | AUMENTAR SEÇÃO E ENQUADRAR MÉTRICAS ===== */
.showcase-differentials{
  padding: 130px 0 130px !important;
  min-height: 980px !important;
  display: flex !important;
  align-items: center !important;
}

.showcase-differentials .container{
  width: min(calc(100% - 40px), 1380px) !important;
}

.showcase-differentials-container{
  grid-template-columns: minmax(420px, 0.85fr) minmax(760px, 1.15fr) !important;
  gap: 84px !important;
  align-items: center !important;
}

.showcase-copy{
  max-width: 640px !important;
}

.showcase-copy h2{
  max-width: 9.5ch !important;
}

.showcase-metrics{
  width: 100% !important;
  max-width: 860px !important;
  justify-self: stretch !important;
}

.metric-row{
  grid-template-columns: 280px 1fr !important;
  gap: 34px !important;
  min-height: 132px !important;
  padding: 24px 8px !important;
}

.metric-value{
  font-size: clamp(3rem, 3.8vw, 4.3rem) !important;
  display: flex !important;
  align-items: center !important;
}

.metric-text strong{
  font-size: 1.14rem !important;
}

.metric-text span{
  font-size: 0.98rem !important;
  max-width: 40ch !important;
}

@media (max-width: 1280px){
  .showcase-differentials{
    min-height: auto !important;
    padding: 110px 0 !important;
  }

  .showcase-differentials-container{
    grid-template-columns: 1fr !important;
    gap: 46px !important;
  }

  .showcase-metrics{
    max-width: 100% !important;
  }

  .metric-row{
    grid-template-columns: 220px 1fr !important;
  }
}

@media (max-width: 860px){
  .showcase-differentials{
    padding: 86px 0 !important;
  }

  .metric-row{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    min-height: auto !important;
    padding: 20px 0 !important;
  }

  .metric-value{
    font-size: 2.5rem !important;
  }

  .metric-text span{
    max-width: 100% !important;
  }
}

/* ===== BLOCO FINAL | TRUST BOXES COM MAIS BRILHO E MOVIMENTO ===== */
.trust-section{
  position: relative !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 14% 22%, rgba(214,178,121,0.10), transparent 20%),
    radial-gradient(circle at 84% 34%, rgba(71,103,163,0.08), transparent 24%),
    linear-gradient(180deg, #f6f8fc 0%, #eef3fa 100%) !important;
}

.trust-section::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(15,23,42,0.00) 0px,
      rgba(15,23,42,0.00) 48px,
      rgba(15,23,42,0.018) 49px,
      rgba(15,23,42,0.00) 50px
    ) !important;
  opacity: 0.65 !important;
  pointer-events: none !important;
}

.trust-boxes{
  gap: 18px !important;
}

.trust-box{
  position: relative !important;
  overflow: hidden !important;
  padding: 24px 26px !important;
  border-radius: 22px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.84)) !important;
  border: 1px solid rgba(15,23,42,0.08) !important;
  box-shadow:
    0 18px 40px rgba(15,23,42,0.08),
    inset 0 1px 0 rgba(255,255,255,0.80) !important;
  backdrop-filter: blur(10px) !important;
  transition:
    transform 0.38s ease,
    box-shadow 0.38s ease,
    border-color 0.38s ease,
    background 0.38s ease !important;
  animation: trustFloat 5.8s ease-in-out infinite !important;
}

.trust-box:nth-child(2){
  animation-delay: .4s !important;
}

.trust-box:nth-child(3){
  animation-delay: .8s !important;
}

.trust-box::before{
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 1px !important;
  background: linear-gradient(90deg, rgba(214,178,121,0.00), rgba(214,178,121,0.95), rgba(214,178,121,0.00)) !important;
  opacity: 0.85 !important;
}

.trust-box::after{
  content: "" !important;
  position: absolute !important;
  top: -28% !important;
  left: -38% !important;
  width: 52% !important;
  height: 180% !important;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.00) 0%,
    rgba(255,255,255,0.00) 32%,
    rgba(255,255,255,0.14) 50%,
    rgba(255,255,255,0.00) 68%,
    rgba(255,255,255,0.00) 100%
  ) !important;
  transform: rotate(10deg) translateX(-150%) !important;
  animation: trustSweep 6.4s ease-in-out infinite !important;
  pointer-events: none !important;
}

.trust-box strong{
  display: block !important;
  font-size: 1.14rem !important;
  line-height: 1.1 !important;
  color: #0f172a !important;
  margin-bottom: 8px !important;
  position: relative !important;
  z-index: 2 !important;
}

.trust-box span{
  display: block !important;
  font-size: 0.98rem !important;
  line-height: 1.6 !important;
  color: #64748b !important;
  position: relative !important;
  z-index: 2 !important;
}

.trust-box:hover{
  transform: translateY(-8px) scale(1.02) !important;
  border-color: rgba(214,178,121,0.28) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,1), rgba(248,251,255,0.92)) !important;
  box-shadow:
    0 26px 60px rgba(15,23,42,0.14),
    0 0 28px rgba(214,178,121,0.10),
    inset 0 1px 0 rgba(255,255,255,0.90) !important;
}

@keyframes trustFloat{
  0%{ transform: translateY(0px); }
  50%{ transform: translateY(-6px); }
  100%{ transform: translateY(0px); }
}

@keyframes trustSweep{
  0%{
    transform: rotate(10deg) translateX(-150%);
    opacity: 0;
  }
  16%{
    opacity: 1;
  }
  42%{
    opacity: 1;
  }
  68%{
    transform: rotate(10deg) translateX(285%);
    opacity: 0;
  }
  100%{
    transform: rotate(10deg) translateX(285%);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce){
  .trust-box,
  .trust-box::after{
    animation: none !important;
  }
}

/* ===== TRUST BOX HOVER AZUL DEGRADÊ ===== */
.trust-box{
  transition:
    transform 0.38s ease,
    box-shadow 0.38s ease,
    border-color 0.38s ease,
    background 0.38s ease,
    color 0.38s ease !important;
}

.trust-box:hover{
  transform: translateY(-8px) scale(1.02) !important;
  border-color: rgba(113,176,255,0.34) !important;
  background:
    linear-gradient(135deg, rgba(11,28,58,0.98) 0%, rgba(25,55,108,0.96) 55%, rgba(55,116,229,0.92) 100%) !important;
  box-shadow:
    0 28px 64px rgba(15,23,42,0.18),
    0 0 34px rgba(79,155,255,0.18),
    inset 0 1px 0 rgba(255,255,255,0.10) !important;
}

.trust-box:hover strong{
  color: #ffffff !important;
}

.trust-box:hover span{
  color: rgba(232,241,255,0.86) !important;
}

.trust-box:hover::before{
  background: linear-gradient(90deg, rgba(127,211,255,0.00), rgba(127,211,255,1), rgba(127,211,255,0.00)) !important;
}

.trust-box:hover::after{
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.00) 0%,
    rgba(255,255,255,0.00) 32%,
    rgba(127,211,255,0.20) 50%,
    rgba(255,255,255,0.00) 68%,
    rgba(255,255,255,0.00) 100%
  ) !important;
}

/* ===== ABOUT PANEL HOVER AZUL DEGRADÊ ===== */
.about-panel,
.about-box{
  transition:
    transform 0.38s ease,
    box-shadow 0.38s ease,
    border-color 0.38s ease,
    background 0.38s ease,
    color 0.38s ease !important;
}

.about-panel:hover{
  transform: translateY(-8px) scale(1.015) !important;
  border-color: rgba(113,176,255,0.30) !important;
  background:
    linear-gradient(135deg, rgba(11,28,58,0.98) 0%, rgba(25,55,108,0.96) 55%, rgba(55,116,229,0.92) 100%) !important;
  box-shadow:
    0 30px 70px rgba(15,23,42,0.18),
    0 0 34px rgba(79,155,255,0.16),
    inset 0 1px 0 rgba(255,255,255,0.10) !important;
}

.about-panel:hover .about-box h3{
  color: #ffffff !important;
}

.about-panel:hover .about-box p{
  color: rgba(232,241,255,0.86) !important;
}

.about-panel:hover .about-box::before{
  background: linear-gradient(90deg, rgba(127,211,255,0.00), rgba(127,211,255,1), rgba(127,211,255,0.00)) !important;
}

.about-panel:hover .about-box::after{
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.00) 0%,
    rgba(255,255,255,0.00) 32%,
    rgba(127,211,255,0.20) 50%,
    rgba(255,255,255,0.00) 68%,
    rgba(255,255,255,0.00) 100%
  ) !important;
}

/* ===== ABOUT PANEL TILT 3D LEVE ===== */
.about-panel{
  transform-style: preserve-3d !important;
  perspective: 1200px !important;
}

.about-panel:hover{
  transform: translateY(-10px) scale(1.018) rotateX(2deg) rotateY(-3deg) !important;
}

.about-panel:hover .about-box{
  transform: translateZ(8px) !important;
}

/* ===== TRUST BOXES | TILT 3D LEVE + HOVER PREMIUM ===== */
.trust-boxes{
  perspective: 1200px !important;
}

.trust-box{
  transform-style: preserve-3d !important;
}

.trust-box:hover{
  transform: translateY(-10px) scale(1.018) rotateX(2deg) rotateY(-3deg) !important;
}

.trust-box:hover strong,
.trust-box:hover span{
  transform: translateZ(8px) !important;
}

.trust-box strong,
.trust-box span{
  transition: transform 0.38s ease, color 0.38s ease !important;
}

/* ===== CTA FINAL | PAINEL DE FECHAMENTO PREMIUM ===== */
.cta-section{
  padding-top: 70px !important;
  padding-bottom: 90px !important;
  position: relative !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 10% 28%, rgba(214,178,121,0.10), transparent 16%),
    radial-gradient(circle at 88% 72%, rgba(79,155,255,0.08), transparent 18%),
    linear-gradient(180deg, #eef3fa 0%, #e7eef8 100%) !important;
}

.cta-container{
  position: relative !important;
  overflow: hidden !important;
  border-radius: 34px !important;
  padding: 68px 34px !important;
  background:
    linear-gradient(135deg, rgba(7,18,38,1) 0%, rgba(16,33,65,0.98) 52%, rgba(34,56,98,0.94) 100%) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow:
    0 34px 90px rgba(15,23,42,0.22),
    inset 0 1px 0 rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(12px) !important;
  animation: ctaPanelFloat 6.5s ease-in-out infinite !important;
}

.cta-container::before{
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 78% !important;
  height: 1px !important;
  background: linear-gradient(90deg, rgba(214,178,121,0.00), rgba(214,178,121,0.95), rgba(214,178,121,0.00)) !important;
  box-shadow: 0 0 18px rgba(214,178,121,0.18) !important;
}

.cta-container::after{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.00) 0px,
      rgba(255,255,255,0.00) 58px,
      rgba(255,255,255,0.022) 59px,
      rgba(255,255,255,0.00) 60px
    ),
    linear-gradient(120deg, rgba(255,255,255,0.00) 0%, rgba(255,255,255,0.035) 18%, rgba(255,255,255,0.00) 36%) !important;
  opacity: 0.75 !important;
  pointer-events: none !important;
}

.cta-section .section-tag{
  color: #d6b279 !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.16em !important;
  position: relative !important;
  z-index: 2 !important;
}

.cta-section h2{
  position: relative !important;
  z-index: 2 !important;
  max-width: 16ch !important;
  margin-left: auto !important;
  margin-right: auto !important;
  font-size: clamp(2.6rem, 5vw, 4.4rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.05em !important;
  color: #ffffff !important;
  text-shadow: 0 16px 36px rgba(0,0,0,0.24) !important;
}

.cta-section p{
  position: relative !important;
  z-index: 2 !important;
  max-width: 760px !important;
  margin-top: 18px !important;
  color: rgba(230,238,250,0.84) !important;
  font-size: 1.05rem !important;
  line-height: 1.75 !important;
}

.cta-actions{
  position: relative !important;
  z-index: 2 !important;
  margin-top: 30px !important;
  gap: 16px !important;
}

.cta-actions .btn-primary{
  background: linear-gradient(135deg, #ffffff 0%, #edf2fb 100%) !important;
  color: #0f172a !important;
  box-shadow: 0 18px 42px rgba(0,0,0,0.18) !important;
}

.cta-actions .btn-secondary{
  background: rgba(255,255,255,0.10) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,0.14) !important;
}

.cta-actions .btn-primary:hover{
  transform: translateY(-4px) scale(1.02) !important;
}

.cta-actions .btn-secondary:hover{
  transform: translateY(-4px) scale(1.02) !important;
  background: linear-gradient(135deg, rgba(11,28,58,0.98) 0%, rgba(25,55,108,0.96) 55%, rgba(55,116,229,0.92) 100%) !important;
  border-color: rgba(113,176,255,0.30) !important;
  box-shadow:
    0 20px 44px rgba(15,23,42,0.20),
    0 0 28px rgba(79,155,255,0.16) !important;
}

@keyframes ctaPanelFloat{
  0%{ transform: translateY(0px); }
  50%{ transform: translateY(-5px); }
  100%{ transform: translateY(0px); }
}

@media (max-width: 860px){
  .cta-container{
    padding: 52px 22px !important;
    border-radius: 26px !important;
  }

  .cta-section h2{
    max-width: 100% !important;
    font-size: clamp(2.1rem, 9vw, 3.3rem) !important;
  }

  .cta-section p{
    font-size: 1rem !important;
  }
}

/* ===== CTA FINAL | LUZES MAIS RÁPIDAS ===== */
.cta-container{
  animation: ctaPanelFloat 3.2s ease-in-out infinite !important;
}

.cta-container::after{
  animation: ctaScanFast 2.2s linear infinite !important;
}

.cta-container::before{
  animation: ctaTopGlowFast 1.8s ease-in-out infinite !important;
}

@keyframes ctaScanFast{
  0%{
    background:
      repeating-linear-gradient(
        90deg,
        rgba(255,255,255,0.00) 0px,
        rgba(255,255,255,0.00) 58px,
        rgba(255,255,255,0.022) 59px,
        rgba(255,255,255,0.00) 60px
      ),
      linear-gradient(120deg, rgba(255,255,255,0.00) 0%, rgba(255,255,255,0.07) 18%, rgba(255,255,255,0.00) 36%);
  }
  50%{
    background:
      repeating-linear-gradient(
        90deg,
        rgba(255,255,255,0.00) 0px,
        rgba(255,255,255,0.00) 58px,
        rgba(255,255,255,0.032) 59px,
        rgba(255,255,255,0.00) 60px
      ),
      linear-gradient(120deg, rgba(255,255,255,0.00) 22%, rgba(255,255,255,0.11) 40%, rgba(255,255,255,0.00) 58%);
  }
  100%{
    background:
      repeating-linear-gradient(
        90deg,
        rgba(255,255,255,0.00) 0px,
        rgba(255,255,255,0.00) 58px,
        rgba(255,255,255,0.022) 59px,
        rgba(255,255,255,0.00) 60px
      ),
      linear-gradient(120deg, rgba(255,255,255,0.00) 64%, rgba(255,255,255,0.07) 82%, rgba(255,255,255,0.00) 100%);
  }
}

@keyframes ctaTopGlowFast{
  0%{
    opacity: 0.55;
    box-shadow: 0 0 10px rgba(214,178,121,0.12);
  }
  50%{
    opacity: 1;
    box-shadow: 0 0 24px rgba(214,178,121,0.28);
  }
  100%{
    opacity: 0.55;
    box-shadow: 0 0 10px rgba(214,178,121,0.12);
  }
}

/* ===== CONTATO | PAINÉIS AZUL PREMIUM 3D ===== */
.contact{
  position: relative !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 12% 22%, rgba(214,178,121,0.10), transparent 18%),
    radial-gradient(circle at 84% 26%, rgba(79,155,255,0.08), transparent 20%),
    linear-gradient(180deg, #eef3fa 0%, #e7eef8 100%) !important;
}

.contact::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(15,23,42,0.00) 0px,
      rgba(15,23,42,0.00) 54px,
      rgba(15,23,42,0.018) 55px,
      rgba(15,23,42,0.00) 56px
    ) !important;
  opacity: 0.55 !important;
  pointer-events: none !important;
}

.contact-copy,
.contact-form{
  position: relative !important;
  z-index: 2 !important;
}

.contact-copy h2{
  max-width: 12ch !important;
}

.contact-item,
.contact-form{
  position: relative !important;
  overflow: hidden !important;
  border-radius: 24px !important;
  background:
    linear-gradient(135deg, rgba(11,28,58,0.98) 0%, rgba(25,55,108,0.96) 55%, rgba(55,116,229,0.92) 100%) !important;
  border: 1px solid rgba(113,176,255,0.24) !important;
  box-shadow:
    0 24px 54px rgba(15,23,42,0.16),
    0 0 24px rgba(79,155,255,0.08),
    inset 0 1px 0 rgba(255,255,255,0.10) !important;
  backdrop-filter: blur(12px) !important;
  transition:
    transform 0.38s ease,
    box-shadow 0.38s ease,
    border-color 0.38s ease,
    background 0.38s ease !important;
}

.contact-item::before,
.contact-form::before{
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 1px !important;
  background: linear-gradient(90deg, rgba(127,211,255,0.00), rgba(127,211,255,1), rgba(127,211,255,0.00)) !important;
  opacity: 0.9 !important;
}

.contact-item::after,
.contact-form::after{
  content: "" !important;
  position: absolute !important;
  top: -32% !important;
  left: -40% !important;
  width: 52% !important;
  height: 185% !important;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.00) 0%,
    rgba(255,255,255,0.00) 32%,
    rgba(127,211,255,0.14) 50%,
    rgba(255,255,255,0.00) 68%,
    rgba(255,255,255,0.00) 100%
  ) !important;
  transform: rotate(10deg) translateX(-150%) !important;
  animation: contactSweep 6.5s ease-in-out infinite !important;
  pointer-events: none !important;
}

.contact-item:hover,
.contact-form:hover{
  transform: translateY(-8px) scale(1.015) rotateX(2deg) rotateY(-3deg) !important;
  border-color: rgba(127,211,255,0.34) !important;
  box-shadow:
    0 30px 70px rgba(15,23,42,0.20),
    0 0 30px rgba(79,155,255,0.14),
    inset 0 1px 0 rgba(255,255,255,0.12) !important;
}

.contact-item strong,
.contact-item span,
.contact-form label{
  position: relative !important;
  z-index: 2 !important;
}

.contact-item strong{
  color: #ffffff !important;
}

.contact-item span{
  color: rgba(232,241,255,0.86) !important;
}

.contact-form{
  padding: 30px !important;
  transform-style: preserve-3d !important;
}

.contact-form label{
  color: #ffffff !important;
}

.form-group input,
.form-group textarea{
  position: relative !important;
  z-index: 2 !important;
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  color: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

.form-group input::placeholder,
.form-group textarea::placeholder{
  color: rgba(232,241,255,0.62) !important;
}

.form-group input:focus,
.form-group textarea:focus{
  border-color: rgba(127,211,255,0.55) !important;
  box-shadow:
    0 0 0 4px rgba(79,155,255,0.16),
    inset 0 1px 0 rgba(255,255,255,0.10) !important;
}

.contact-form .btn-primary{
  background: linear-gradient(135deg, #ffffff 0%, #edf2fb 100%) !important;
  color: #0f172a !important;
  box-shadow: 0 18px 42px rgba(0,0,0,0.18) !important;
}

.contact-form .btn-primary:hover{
  transform: translateY(-4px) scale(1.02) !important;
}

@keyframes contactSweep{
  0%{
    transform: rotate(10deg) translateX(-150%);
    opacity: 0;
  }
  16%{
    opacity: 1;
  }
  42%{
    opacity: 1;
  }
  68%{
    transform: rotate(10deg) translateX(285%);
    opacity: 0;
  }
  100%{
    transform: rotate(10deg) translateX(285%);
    opacity: 0;
  }
}

@media (max-width: 860px){
  .contact-form{
    padding: 22px !important;
  }
}

/* ===== FORM STATUS WA ===== */
.form-status{
  margin-top: 14px !important;
  font-size: 0.95rem !important;
  line-height: 1.5 !important;
  min-height: 24px !important;
}

.form-status.is-success{
  color: #bdf7d3 !important;
}

.form-status.is-error{
  color: #ffd3d3 !important;
}