:root{
  --color-primary:#0378A6;
  --color-primary-600:#026790;
  --color-primary-700:#015a7e;
  --color-accent:#8bb422;
  --color-accent-700:#6f901b;
}

.text-white-70{color:rgba(255,255,255,.7)}

/* Tamanho do logo no navbar */
.brand-logo{height:32px; width:auto; display:block}
@media (min-width: 992px){
  .brand-logo{height:36px}
}

/* CTA laranja */
.btn-orange{
  --bs-btn-color:#fff;
  --bs-btn-bg:#ff8a00;
  --bs-btn-border-color:#ff8a00;
  --bs-btn-hover-color:#fff;
  --bs-btn-hover-bg:#ff7a00;
  --bs-btn-hover-border-color:#ff7a00;
  --bs-btn-focus-shadow-rgb:255,138,0;
  background: linear-gradient(180deg, #ff9e1a 0%, #ff8a00 100%);
  border-color:#ff8a00;
  box-shadow:0 8px 18px rgba(255,138,0,.35);
}
.btn-orange:hover{
  background: linear-gradient(180deg, #ff8f00 0%, #ff7a00 100%);
  border-color:#ff7a00;
  box-shadow:0 10px 22px rgba(255,122,0,.45);
  transform: translateY(-1px);
}
.btn-orange:active{
  transform: translateY(0);
  box-shadow:0 6px 14px rgba(255,122,0,.35);
}

.btn-accent{
  --bs-btn-color:#fff;
  --bs-btn-bg:var(--color-accent);
  --bs-btn-border-color:var(--color-accent);
  --bs-btn-hover-color:#fff;
  --bs-btn-hover-bg:var(--color-accent-700);
  --bs-btn-hover-border-color:var(--color-accent-700);
  --bs-btn-focus-shadow-rgb:139,180,34;
  background: linear-gradient(180deg, #a6d41f 0%, var(--color-accent) 100%);
  border-color: var(--color-accent);
  box-shadow: 0 8px 18px rgba(139,180,34,.35);
}
.btn-accent:hover{
  background: linear-gradient(180deg, #8fc118 0%, var(--color-accent-700) 100%);
  border-color: var(--color-accent-700);
  box-shadow: 0 10px 22px rgba(111,144,27,.45);
  transform: translateY(-1px);
}
.btn-accent:active{
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(111,144,27,.35);
}

.hero{
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-600) 60%);
}

/* Shapes de fundo do hero */
.hero-shape{position:absolute; pointer-events:none; filter:blur(40px); opacity:.25; z-index:0}
.hero-shape-1{width:320px; height:320px; background:var(--color-accent); border-radius:50%; top:-60px; right:-80px}
/* trocando o branco por primária escura com leve transparência via opacity do shape */
.hero-shape-2{width:320px; height:320px; background:var(--color-primary-700); border-radius:50%; bottom:-100px; left:-80px; opacity:.18}

.hero-card,.hero-device{border:1px solid rgba(3,120,166,.1)}

.text-accent{color:var(--color-accent)!important}

.pricing-card{border-color:rgba(3,120,166,.2)!important; transition:transform .2s ease, box-shadow .2s ease}
.pricing-card:hover{transform:translateY(-4px); box-shadow:0 16px 32px rgba(0,0,0,.08)}
.pricing-card.featured{border-color:rgba(255,138,0,.5)!important; box-shadow:0 18px 36px rgba(255,138,0,.18)}
.badge-recommended{background:#ff8a00; color:#fff; padding:.35rem .6rem; border-radius:999px; font-size:.7rem; letter-spacing:.3px}

.navbar-brand{letter-spacing:.2px}

a{transition:color .2s ease, background-color .2s ease, border-color .2s ease, transform .15s ease}

/* Visual com bolhas de ícones */
.hero-visual{max-width:620px; position:relative; z-index:1}
.hero-device{border-radius:16px; color:#fff}
.hero-device .text-secondary{color:rgba(255,255,255,.7)!important}
.hero-device .bi{color:#fff!important}
.icon-bubble{position:absolute; font-size:26px; color:#fff; opacity:.95; background:transparent; border:1px solid rgba(255,255,255,.35); width:52px; height:52px; display:flex; align-items:center; justify-content:center; border-radius:12px; animation:float 6s ease-in-out infinite; z-index:2; text-shadow:0 0 8px rgba(3,120,166,.5)}
/* Reposicionamento para espalhar mais pela seção */
.icon-bubble:nth-of-type(2){top:-30px; right:100px; animation-delay:.4s}
.icon-bubble:nth-of-type(3){top:22%; right:-60px; animation-delay:.8s}
.icon-bubble:nth-of-type(4){bottom:-40px; left:28%}
.icon-bubble:nth-of-type(5){top:6%; left:-70px; animation-delay:1.2s}

.icon-bubble:hover{transform:scale(1.08); box-shadow:0 10px 24px rgba(0,0,0,.15)}

@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}

/* Barra de progresso acento */
.bg-accent{background-color:var(--color-accent)!important}

/* Footer moderno */
.footer-modern{background:linear-gradient(180deg, #0d1b24 0%, #0a141a 100%)}
.footer-modern .link-footer{color:rgba(255,255,255,.7); text-decoration:none}
.footer-modern .link-footer:hover{color:#fff}
.footer-modern .social-btn{width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border-color:rgba(255,255,255,.35)!important; color:#fff}
.footer-modern .social-btn:hover{background:#fff; color:#0a141a}

/* Segmentos - cartões interativos */
.segment-card{border-color:rgba(3,120,166,.15)!important; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.segment-card:hover{transform:translateY(-4px) rotateX(2deg) rotateY(-2deg); box-shadow:0 16px 32px rgba(0,0,0,.08); border-color:rgba(3,120,166,.35)!important}
.segment-card .segment-icon{width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:rgba(3,120,166,.08); color:var(--color-primary); font-size:22px}
.segment-image{width:100%; height:140px; object-fit:cover; border-top-left-radius:.5rem; border-top-right-radius:.5rem}

/* Section Estoque (bg verde, textos brancos) */
.section-estoque{background:linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-700) 80%)}
.section-estoque .text-white-70{color:rgba(255,255,255,.85)}
.bg-white-10{background:rgba(255,255,255,.10)}
.border-white-20{border:1px solid rgba(255,255,255,.20)}

/* Títulos H2 dinâmicos */
.section-title{position:relative; display:inline-block; transform:translateY(6px); opacity:0; transition:transform .4s cubic-bezier(.2,.7,.2,1), opacity .4s ease, letter-spacing .2s ease}
.section-title.in-view{transform:translateY(0); opacity:1}
.section-title:hover{letter-spacing:.3px}
.section-title::after{content:""; display:block; width:64px; height:4px; margin:.5rem auto 0; border-radius:999px; background:linear-gradient(90deg, var(--color-accent), var(--color-primary)); box-shadow:0 6px 18px rgba(3,120,166,.25)}
/* Variante em áreas escuras */
.bg-dark .section-title::after, .hero .section-title::after, .section-estoque .section-title::after{background:linear-gradient(90deg, #fff, rgba(255,255,255,.85))}
.section-title-icon{opacity:.9}
.hero .section-title-icon, .section-estoque .section-title-icon, .bg-dark .section-title-icon{color:#fff}

/* WhatsApp flutuante */
.whatsapp-float{position:fixed; right:16px; bottom:16px; width:56px; height:56px; border-radius:50%; background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 12px 24px rgba(37,211,102,.35); z-index:1050; transition:transform .15s ease, box-shadow .2s ease}
.whatsapp-float:hover{transform:translateY(-2px); box-shadow:0 16px 32px rgba(37,211,102,.45)}
.whatsapp-float i{font-size:28px; line-height:1}
@media (max-width: 575.98px){.whatsapp-float{right:12px; bottom:12px; width:52px; height:52px}}