:root{
  /* Base (seguindo a logo) */
  --bg: #000010;          /* fundo muito escuro */
  --panel: #060a1f;       /* cartões */
  --panel-2: #05081a;
  --border: rgba(0, 176, 224, .18);

  /* Accent (azul/ciano da marca) */
  --aqua: #00B0E0;        /* ciano principal (aprox da logo) */
  --aqua-2: #00A0D0;
  --blue: #003090;        /* azul profundo */
  --ink: #dfe8ff;         /* texto */
  --soft: rgba(223, 232, 255, .72);

  --radius: 20px;
  --shadow: 0 10px 30px rgba(0, 0, 0, .55);
}

html, body{
  background: radial-gradient(1200px 600px at 30% -10%, rgba(0,176,224,.14), transparent 60%),
              radial-gradient(900px 600px at 90% 10%, rgba(0,48,144,.18), transparent 55%),
              var(--bg);
  color: var(--ink);
  scroll-behavior: smooth;
}

code{
  color: rgba(0,176,224,.95);
}

.text-soft{ color: var(--soft); }

.bg-glow{
  position: fixed;
  inset: -200px;
  pointer-events: none;
  background:
    radial-gradient(700px 350px at 20% 30%, rgba(0,176,224,.14), transparent 60%),
    radial-gradient(650px 360px at 80% 40%, rgba(0,48,144,.16), transparent 62%);
  filter: blur(2px);
  opacity: .9;
  z-index: -1;
}

/* NAV */
.nav-blur{
  backdrop-filter: blur(10px);
  background: rgba(0, 0, 16, .55);
  border-bottom: 1px solid rgba(0,176,224,.10);
}

.brand-logo{
  width: 74px;
  height: 44px;
  object-fit: contain;
  border-radius: 10px;
  filter: drop-shadow(0 0 12px rgba(0,176,224,.22));
}

/* Ajuste fino no mobile */
@media (max-width: 575px){
  .brand-logo{
    width: 62px;
    height: 38px;
  }
}
.brand-text{
  letter-spacing: .14em;
  font-weight: 700;
  font-size: .95rem;
  opacity: .95;
}

.navbar .nav-link{
  color: rgba(223,232,255,.75);
}
.navbar .nav-link:hover{
  color: rgba(0,176,224,.95);
}

/* HERO */
.hero{
  position: relative;
}
.pill{
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .45rem .75rem;
  border-radius: 999px;
  border: 1px solid rgba(0,176,224,.20);
  background: linear-gradient(90deg, rgba(0,176,224,.12), rgba(0,48,144,.10));
  color: rgba(223,232,255,.86);
  box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset;
}

.hero-stats{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
}
@media (max-width: 575px){
  .hero-stats{ grid-template-columns: 1fr; }
}

.stat{
  border: 1px solid rgba(0,176,224,.14);
  background: linear-gradient(180deg, rgba(6,10,31,.8), rgba(5,8,26,.7));
  border-radius: 16px;
  padding: .75rem .9rem;
}
.stat-top{
  font-weight: 600;
  font-size: .95rem;
}
.stat-bottom{
  color: var(--soft);
  font-size: .85rem;
  margin-top: .15rem;
}

/* Hero Card */
.hero-card{
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(0,176,224,.18);
  background: linear-gradient(180deg, rgba(6,10,31,.9), rgba(4,6,18,.85));
  box-shadow: var(--shadow);
}
.hero-card-header{
  display: flex;
  align-items: center;
  padding: .9rem 1rem;
  border-bottom: 1px solid rgba(0,176,224,.10);
}
.dot{
  width: 10px; height: 10px;
  border-radius: 999px;
  margin-right: 8px;
}
.dot-a{ background: rgba(0,176,224,.9); }
.dot-b{ background: rgba(0,160,208,.75); }
.dot-c{ background: rgba(0,48,144,.85); }

.hero-card-body{
  padding: 1rem;
}

.feature-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}
@media (max-width: 575px){
  .feature-grid{ grid-template-columns: 1fr; }
}
.feature{
  display: flex;
  gap: .75rem;
  padding: .75rem;
  border-radius: 16px;
  border: 1px solid rgba(0,176,224,.12);
  background: rgba(0,0,16,.25);
}
.feature-ico{
  width: 42px; height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(0,176,224,.18), rgba(0,48,144,.12));
  border: 1px solid rgba(0,176,224,.18);
}
.feature-ico i{ font-size: 1.15rem; color: rgba(0,176,224,.95); }
.feature-title{ font-weight: 650; }
.feature-desc{ color: var(--soft); font-size: .9rem; }

/* SECTIONS */
.section{
  border-top: 1px solid rgba(0,176,224,.06);
}
.section-title{
  font-weight: 750;
  letter-spacing: .02em;
}

/* CARDS */
.card-optivon{
  border-radius: var(--radius);
  border: 1px solid rgba(0,176,224,.14);
  background: linear-gradient(180deg, rgba(6,10,31,.85), rgba(4,6,18,.78));
  box-shadow: 0 0 0 1px rgba(0,0,0,.28) inset;
}
.card-kicker{
  display: inline-flex;
  align-items: center;
  font-weight: 650;
  font-size: .9rem;
  letter-spacing: .02em;
  color: rgba(0,176,224,.95);
  margin-bottom: .5rem;
}
.value{
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem 0;
  color: rgba(223,232,255,.80);
}

/* SERVICES */
.service-ico{
  width: 46px; height: 46px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  margin-bottom: .75rem;
  background: linear-gradient(135deg, rgba(0,176,224,.18), rgba(0,48,144,.12));
  border: 1px solid rgba(0,176,224,.18);
}
.service-ico i{ font-size: 1.25rem; color: rgba(0,176,224,.95); }

/* Buttons & links */
.btn-optivon{
  border: 1px solid rgba(0,176,224,.30);
  background: linear-gradient(135deg, rgba(0,176,224,.90), rgba(0,48,144,.78));
  color: #071022;
  font-weight: 700;
  border-radius: 14px;
  box-shadow: 0 10px 18px rgba(0,176,224,.12);
}
.btn-optivon:hover{
  filter: brightness(1.03);
  color: #071022;
}

.btn-outline-optivon{
  border: 1px solid rgba(0,176,224,.35);
  color: rgba(223,232,255,.88);
  border-radius: 14px;
}
.btn-outline-optivon:hover{
  background: rgba(0,176,224,.10);
  color: rgba(0,176,224,.95);
}

.link-optivon{
  color: rgba(0,176,224,.95);
  text-decoration: none;
}
.link-optivon:hover{
  text-decoration: underline;
}

.divider{
  height: 1px;
  background: rgba(0,176,224,.10);
}

/* CALLOUT */
.callout{
  border-radius: var(--radius);
  border: 1px solid rgba(0,176,224,.14);
  background: linear-gradient(90deg, rgba(0,176,224,.10), rgba(0,48,144,.10));
  overflow: hidden;
}
.callout-inner{
  padding: 1rem 1.1rem;
}
.callout-title{
  font-weight: 750;
  margin-bottom: .25rem;
  color: rgba(223,232,255,.92);
}

/* PROJECTS */
.project-card{
  height: 100%;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease;
}
.project-card:hover{
  transform: translateY(-2px);
  border-color: rgba(0,176,224,.30);
}
.project-thumb{
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0,176,224,.14);
  background: rgba(0,0,16,.25);
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
}
.project-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: .92;
}
.badge-optivon{
  border: 1px solid rgba(0,176,224,.25);
  background: rgba(0,176,224,.08);
  color: rgba(223,232,255,.85);
  border-radius: 999px;
  font-weight: 600;
}

/* FORM */
.form-control-optivon{
  background: rgba(0,0,16,.30);
  border: 1px solid rgba(0,176,224,.16);
  color: rgba(223,232,255,.90);
  border-radius: 14px;
}
.form-control-optivon:focus{
  background: rgba(0,0,16,.35);
  color: rgba(223,232,255,.95);
  border-color: rgba(0,176,224,.35);
  box-shadow: 0 0 0 .2rem rgba(0,176,224,.12);
}

.toast-optivon{
  padding: .75rem .9rem;
  border-radius: 14px;
  border: 1px solid rgba(0,176,224,.22);
  background: rgba(0,176,224,.08);
  color: rgba(223,232,255,.92);
}

/* CONTACT */
.contact-item{
  display: flex;
  gap: .75rem;
  align-items: center;
  padding: .6rem 0;
}
.contact-ico{
  width: 42px; height: 42px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(0,176,224,.18), rgba(0,48,144,.12));
  border: 1px solid rgba(0,176,224,.18);
}
.contact-ico i{ color: rgba(0,176,224,.95); font-size: 1.15rem; }
.contact-label{ font-weight: 700; }

/* MODAL */
.modal-optivon{
  border-radius: var(--radius);
  border: 1px solid rgba(0,176,224,.18);
  background: linear-gradient(180deg, rgba(6,10,31,.94), rgba(4,6,18,.92));
}
.modal-side{
  border: 1px solid rgba(0,176,224,.14);
  background: rgba(0,0,16,.25);
}
.carousel-item img{
  border-radius: 18px;
  border: 1px solid rgba(0,176,224,.14);
}

/* FOOTER */
.footer{
  border-top: 1px solid rgba(0,176,224,.08);
  background: rgba(0,0,16,.35);
}

.hero-logo-wrap{
  display: flex;
  justify-content: center;
  margin-bottom: 1.4rem; /* espaço antes do conteúdo */
}

.hero-logo{
  width: min(520px, 75vw);
  height: auto;
  object-fit: contain;

  /* “impacto” no visual sem ficar exagerado */
  filter:
    drop-shadow(0 0 18px rgba(0,176,224,.22))
    drop-shadow(0 0 46px rgba(0,48,144,.12));
  opacity: .98;
}

/* No mobile a logo não pode dominar a tela */
@media (max-width: 575px){
  .hero-logo-wrap{ margin-bottom: 1rem; }
  .hero-logo{ width: min(360px, 86vw); }
}