:root {
  --navy: #031b3c;
  --navy-2: #06275d;
  --deep: #073b82;
  --blue: #087ef5;
  --blue-2: #0b62d4;
  --cyan: #04c8f4;
  --cyan-soft: #75eaff;
  --text: #18324a;
  --muted: #60758b;
  --soft: #f1f8fc;
  --surface: #ffffff;
  --line: #cfe1ed;
  --white: #ffffff;
}
* {
  box-sizing : border-box
}
html {
  scroll-behavior : smooth
}
body {
  margin : 0;
  font-family : Inter, Segoe UI, Arial, sans-serif;
  color : var(--text);
  background : #fff;
  line-height : 1.6
}
img {
  max-width : 100%;
  height : auto
}
a {
  color : inherit;
  text-decoration : none
}
.container {
  width : min(1160px, calc(100% - 40px));
  margin : auto
}
.skip-link {
  position : absolute;
  left : -999px;
  top : 8px;
  background : #fff;
  padding : 10px;
  z-index : 100
}
  .skip-link:focus {
  left : 8px
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(100deg, rgba(3, 27, 60, .99), rgba(6, 39, 93, .98) 62%, rgba(8, 86, 180, .96));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(117, 234, 255, .22);
  box-shadow: 0 8px 24px rgba(3, 27, 60, .16);
}
.header-inner {
  min-height: 112px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.brand img {
  display: block;
  width: 250px;
  height: 100px;
  max-width: none;
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 7px 16px rgba(0, 0, 0, .16));
}
.main-nav {
  display: flex;
  gap: 25px;
  align-items: center;
  color: #e8f5ff;
  font-size: .9rem;
  font-weight: 750;
}
  .main-nav a:hover {
  color : var(--cyan)
}
.nav-cta {
  padding: 10px 16px;
  border: 1px solid rgba(117, 234, 255, .55);
  border-radius: 10px;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(8, 126, 245, .24);
}
.menu-toggle {
  display : none;
  width : 45px;
  height : 45px;
  border : 1px solid rgba(255, 255, 255, .22);
  border-radius : 10px;
  background : transparent;
  padding : 10px;
  cursor : pointer
}
.menu-toggle span {
  display : block;
  height : 2px;
  margin : 5px 0;
  background : #fff;
  transition : .2s
}
  .menu-toggle[aria-expanded=true] span : nth-child(1) {
  transform : translateY(7px) rotate(45deg)
}
  .menu-toggle[aria-expanded=true] span : nth-child(2) {
  opacity : 0
}
  .menu-toggle[aria-expanded=true] span : nth-child(3) {
  transform : translateY(-7px) rotate(-45deg)
}
.section {
  padding : 94px 0
}
.kicker {
  display : inline-block;
  margin-bottom : 13px;
  color: var(--blue-2);
  font-size : .72rem;
  font-weight : 900;
  letter-spacing : .18em;
  text-transform : uppercase
}
.display {
  max-width : 820px;
  margin : 0;
  color : var(--navy);
  font-size : clamp(2.1rem, 4.5vw, 4rem);
  line-height : 1.05;
  letter-spacing : -.045em
}
.lead {
  max-width : 750px;
  margin : 20px 0 0;
  color : #466078;
  font-size : clamp(1.02rem, 1.6vw, 1.22rem);
  line-height : 1.7
}
.btn {
  display : inline-flex;
  min-height : 48px;
  align-items : center;
  justify-content : center;
  padding : 12px 20px;
  border : 1px solid var(--blue);
  border-radius : 10px;
  background : var(--blue);
  color : #fff;
  font-weight : 850
}
.btn-outline {
  background : #fff;
  color : var(--deep);
  border-color : #b4cddd
}
.hero {
  position : relative;
  min-height : 680px;
  display : flex;
  align-items : center;
  background: var(--soft);
  isolation : isolate
}
  .hero::before {
  content : "";
  position : absolute;
  inset : 0;
  z-index : -2;
  background-image : image-set(url('../img/hero-dexpert.webp') type('image/webp'), url('../img/hero-dexpert.jpg') type('image/jpeg'));
  background-size : cover;
  background-position : 68% center
}
  .hero::after {
  content : "";
  position : absolute;
  inset : 0;
  z-index : -1;
  background : linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .97) 42%, rgba(247, 251, 254, .76) 70%, rgba(247, 251, 254, .36) 100%)
}
.hero-content {
  padding : 108px 0 90px
}
.hero-actions {
  display : flex;
  gap : 12px;
  flex-wrap : wrap;
  margin-top : 30px
}
.tags {
  display : flex;
  gap : 8px;
  flex-wrap : wrap;
  margin-top : 28px
}
.tags span {
  padding : 8px 11px;
  border : 1px solid var(--line);
  border-radius : 999px;
  background : rgba(255, 255, 255, .92);
  color : var(--deep);
  font-size : .76rem;
  font-weight : 750
}
.grid-2 {
  display : grid;
  grid-template-columns : 1fr 1fr;
  gap : 72px;
  align-items : center
}
.media {
  display : block;
  width : 100%;
  aspect-ratio : 4/3;
  object-fit : cover;
  border-radius : 20px;
  box-shadow : 0 18px 44px rgba(3, 27, 60, .11)
}
.stats {
  display : grid;
  grid-template-columns : repeat(3, 1fr);
  gap : 12px;
  margin-top : 28px
}
.stat {
  padding : 15px 0;
  border-top : 2px solid var(--cyan)
}
.stat strong {
  display : block;
  color : var(--blue);
  font-size : 1.4rem
}
.stat span {
  font-size : .78rem;
  color : var(--muted)
}
.dark {
  background : var(--navy)
}
.dark .kicker {
  color : #6ce5ff
}
.dark .display {
  color : #fff
}
.dark .lead {
  color : #bdd1e3
}
.cards {
  display : grid;
  grid-template-columns : repeat(3, 1fr);
  gap : 16px;
  margin-top : 40px
}
.card {
  padding : 25px;
  border : 1px solid rgba(137, 214, 248, .2);
  border-radius : 16px;
  background : rgba(255, 255, 255, .045)
}
.card small {
  color : var(--cyan);
  font-weight : 900
}
.card h3 {
  margin : 26px 0 8px;
  color : #fff
}
.card p {
  margin : 0;
  color : #bed2e3;
  font-size : .92rem
}
.soft {
  background : var(--soft)
}
.steps {
  display : grid;
  grid-template-columns : repeat(5, 1fr);
  gap : 12px;
  margin-top : 40px
}
.step {
  padding : 23px;
  border : 1px solid var(--line);
  border-radius : 15px;
  background : #fff
}
.step b {
  display : grid;
  width : 36px;
  height : 36px;
  place-items : center;
  border-radius : 50%;
  background : #edf7ff;
  color : var(--blue)
}
.step h3 {
  color : var(--deep);
  margin : 20px 0 8px
}
.step p {
  margin : 0;
  color : var(--muted);
  font-size : .85rem
}
.benefits {
  display : grid;
  grid-template-columns : repeat(4, 1fr);
  gap : 15px;
  margin-top : 40px
}
.benefit {
  padding : 23px;
  border-top : 3px solid var(--cyan);
  background : var(--soft)
}
.benefit h3 {
  margin : 0 0 7px;
  color : var(--deep)
}
.benefit p {
  margin : 0;
  color : var(--muted);
  font-size : .89rem
}
.page-hero {
  padding : 82px 0;
  background : linear-gradient(120deg, var(--navy), var(--deep));
  color : #fff
}
.page-hero .display {
  color : #fff
}
.page-hero .lead {
  color : #d5e7f5
}
.service-list {
  display : grid;
  grid-template-columns : repeat(2, 1fr);
  gap : 18px;
  margin-top : 38px
}
.service-item {
  padding : 26px;
  border : 1px solid var(--line);
  border-radius : 16px;
  background : #fff
}
.service-item h2 {
  margin : 0 0 8px;
  color : var(--deep);
  font-size : 1.25rem
}
.service-item p {
  margin : 0;
  color : var(--muted)
}
.form-shell {
  max-width : 840px;
  margin : auto
}
.form {
  padding : 30px;
  border : 1px solid var(--line);
  border-radius : 20px;
  background : #fff;
  box-shadow : 0 15px 40px rgba(3, 27, 60, .08)
}
.form h2 {
  color : var(--deep);
  margin-top : 30px;
  border-bottom : 1px solid var(--line);
  padding-bottom : 9px
}
.form label {
  display : block;
  margin : 13px 0 6px;
  font-size : .82rem;
  font-weight : 800
}
.form input, .form select, .form textarea {
  width : 100%;
  padding : 13px;
  border : 1px solid #cbdce7;
  border-radius : 10px;
  font : inherit
}
  .form input:focus, .form select:focus, .form textarea:focus {
  outline : 3px solid rgba(4, 200, 244, .17);
  border-color : var(--cyan)
}
.form-row {
  display : grid;
  grid-template-columns : 1fr 1fr;
  gap : 15px
}
.hp {
  position : absolute!important;
  left : -9999px!important
}
.alert {
  padding : 13px;
  border-radius : 9px;
  margin-bottom : 15px
}
.success {
  background : #e7fbf3;
  color : #087654
}
.error {
  background : #fff0f1;
  color : #a51d32
}
.consent {
  display : flex!important;
  gap : 9px;
  align-items : flex-start;
  font-weight : 500!important
}
.consent input {
  width : auto
}
.cta {
  padding : 68px 0;
  background : var(--blue);
  color : #fff
}
.cta-inner {
  display : flex;
  align-items : center;
  justify-content : space-between;
  gap : 28px
}
.cta h2 {
  margin : 0;
  font-size : clamp(2rem, 4vw, 3.2rem)
}
.cta p {
  color : #ddecf8
}
.cta .btn {
  background : #fff;
  color : var(--deep);
  border-color : #fff
}
.site-footer {
  padding : 55px 0 15px;
  background: linear-gradient(120deg, var(--navy), var(--navy-2));
  color : #cfe1f0
}
.footer-grid {
  display : grid;
  grid-template-columns : 1.4fr .7fr 1fr;
  gap : 45px
}
.footer-logo {
  width : 190px;
  height : 105px;
  object-fit : contain;
  object-position : left
}
.site-footer h2 {
  font-size : 1rem;
  color : #fff
}
.site-footer a {
  display : block;
  margin : 7px 0
}
.footer-bottom {
  margin-top : 35px;
  padding-top : 14px;
  border-top : 1px solid rgba(255, 255, 255, .11);
  font-size : .75rem
}
.whatsapp {
  position : fixed;
  right : 18px;
  bottom : 18px;
  z-index : 40;
  padding : 12px 17px;
  border-radius : 999px;
  background : #1ebd68;
  color : #fff;
  font-weight : 850;
  box-shadow : 0 8px 25px rgba(0, 0,0, .2)
}
  @media(max-width : 900px) {
  .menu-toggle{display : block
}
.main-nav {
  display : none;
  position : absolute;
  top : 100%;
  left : 0;
  right : 0;
  flex-direction : column;
  align-items : stretch;
  gap : 0;
  padding : 12px 20px 20px;
  background : var(--navy);
  box-shadow : 0 18px 30px rgba(3, 27, 60, .2)
}
.main-nav.open {
  display : flex
}
.main-nav a {
  padding : 12px
}
.header-inner {
  position : relative
}
.section {
  padding : 72px 0
}
.grid-2 {
  gap : 40px
}
.cards {
  grid-template-columns : repeat(2, 1fr)
}
.steps {
  grid-template-columns : repeat(3, 1fr)
}
.benefits {
  grid-template-columns : repeat(2, 1fr)
}
  .hero::after {
  background : rgba(255, 255, 255, .84)
}
  }@media(max-width : 700px) {
  .container{width : min(100% - 28px, 1160px)
}
.section {
  padding : 60px 0
}
.hero {
  min-height : auto
}
.hero-content {
  padding : 78px 0 66px
}
  .hero::before {
  background-position : 70% center
}
  .hero::after {
  background : rgba(255, 255, 255, .91)
}
.grid-2, .service-list, .form-row {
  grid-template-columns : 1fr
}
.grid-2 {
  gap : 32px
}
.cards, .steps, .benefits, .stats {
  grid-template-columns : 1fr
}
.hero-actions {
  flex-direction : column
}
.hero-actions .btn {
  width : 100%
}
.cta-inner {
  align-items : flex-start;
  flex-direction : column
}
.cta .btn {
  width : 100%
}
.footer-grid {
  grid-template-columns : 1fr
}
.form {
  padding : 20px
}
.whatsapp {
  font-size : .78rem
}
}

/* Refinamentos de identidade DExpert */
.main-nav a { transition: color .18s ease, background .18s ease; }
.main-nav a:hover, .main-nav a:focus-visible { color: var(--cyan-soft); }
.btn { background: linear-gradient(135deg, var(--blue), var(--blue-2)); box-shadow: 0 8px 20px rgba(8,126,245,.18); transition: transform .18s ease, filter .18s ease; }
.btn:hover, .btn:focus-visible { transform: translateY(-1px); filter: brightness(1.06); }
.dark { background: linear-gradient(135deg, var(--navy), var(--navy-2)); }
.card { border-color: rgba(117,234,255,.22); background: rgba(255,255,255,.055); }
.card:hover { border-color: rgba(4,200,244,.55); background: rgba(255,255,255,.08); }
.page-hero { background: linear-gradient(120deg, var(--navy), var(--deep) 72%, var(--blue-2)); }
.cta { background: linear-gradient(105deg, var(--blue-2), var(--blue) 62%, #159fe9); }
.site-footer { background: linear-gradient(120deg, var(--navy), var(--navy-2)); }

@media (max-width: 900px) {
  .header-inner { min-height: 94px; }
  .brand img { width: 215px; height: 82px; }
  .main-nav { background: linear-gradient(135deg, var(--navy), var(--navy-2)); }
}

@media (max-width: 700px) {
  .header-inner { min-height: 84px; }
  .brand img { width: 185px; height: 72px; }
}

@media (max-width: 420px) {
  .brand img { width: 165px; height: 66px; }
  .menu-toggle { width: 42px; height: 42px; }
}