/* ==========================================================================
   GrowMap — Camada PREMIUM (polish "wow")
   Carregada por último. Só adiciona profundidade, luz e movimento.
   Não altera conteúdo nem estrutura.
   ========================================================================== */

html { scroll-behavior: smooth; }

/* --------------------------------------------------------------------------
   HERO cinematográfico
   -------------------------------------------------------------------------- */
.hero-section { isolation: isolate; }

/* Brilho verde que respira sobre a foto */
.hero-home-lg::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(55% 45% at 12% 22%, rgba(52, 193, 122, .28), transparent 60%),
        radial-gradient(48% 42% at 88% 12%, rgba(199, 229, 154, .18), transparent 62%);
    mix-blend-mode: screen;
    animation: heroGlow 16s ease-in-out infinite alternate;
}
@keyframes heroGlow {
    0%   { transform: translate3d(0, 0, 0) scale(1); opacity: .85; }
    100% { transform: translate3d(0, -18px, 0) scale(1.08); opacity: 1; }
}

/* Vinheta sutil para focar o olhar no centro */
.hero-home-lg { position: relative; }
.hero-home-lg .container { position: relative; z-index: 2; }

/* Título maior e mais impactante só na home */
.hero-section.hero-home-lg .heading-xl {
    font-size: clamp(3rem, 6.6vw, 5.6rem);
    letter-spacing: -.045em;
    line-height: 1.0;
}

/* Destaque com gradiente animado (shimmer) */
.hero-home-lg .heading-xl span {
    background: linear-gradient(90deg, #c7e59a 0%, #7fdca7 35%, #eaf7c9 55%, #7fdca7 75%, #c7e59a 100%);
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: textShimmer 7s linear infinite;
}
@keyframes textShimmer { to { background-position: 220% center; } }

/* Entrada animada dos elementos do hero (no load) */
@media (prefers-reduced-motion: no-preference) {
    .hero-home-lg .hero-eyebrow,
    .hero-home-lg .heading-xl,
    .hero-home-lg .subheading,
    .hero-home-lg .d-flex,
    .hero-home-lg .hero-trust-row {
        animation: heroRise .95s cubic-bezier(.16, .84, .44, 1) both;
    }
    .hero-home-lg .heading-xl   { animation-delay: .10s; }
    .hero-home-lg .subheading   { animation-delay: .20s; }
    .hero-home-lg .d-flex        { animation-delay: .30s; }
    .hero-home-lg .hero-trust-row{ animation-delay: .42s; }
}
@keyframes heroRise {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: none; }
}

/* Selo do hero com brilho pulsante */
.hero-eyebrow {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18), inset 0 0 0 1px rgba(255,255,255,.04);
}
.hero-eyebrow i { color: #bce38a; animation: seedPulse 2.6s ease-in-out infinite; }
@keyframes seedPulse { 0%,100% { opacity: .75; } 50% { opacity: 1; transform: scale(1.12); } }

/* Indicador de rolagem */
.hero-scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    z-index: 3;
    width: 26px;
    height: 42px;
    border: 2px solid rgba(255, 255, 255, .55);
    border-radius: 16px;
    display: block;
    transition: border-color .3s;
}
.hero-scroll-cue::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 8px;
    width: 4px;
    height: 8px;
    border-radius: 4px;
    background: #fff;
    transform: translateX(-50%);
    animation: scrollDot 1.8s ease-in-out infinite;
}
.hero-scroll-cue:hover { border-color: #bce38a; }
@keyframes scrollDot {
    0%   { opacity: 0; transform: translate(-50%, 0); }
    35%  { opacity: 1; }
    75%  { opacity: 1; transform: translate(-50%, 14px); }
    100% { opacity: 0; transform: translate(-50%, 16px); }
}

/* --------------------------------------------------------------------------
   Botões com brilho (shine sweep)
   -------------------------------------------------------------------------- */
.btn-primary-green,
.btn-hero-secondary { position: relative; overflow: hidden; }
.btn-primary-green::after {
    content: '';
    position: absolute;
    top: 0;
    left: -130%;
    width: 55%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .38), transparent);
    transform: skewX(-22deg);
    pointer-events: none;
}
.btn-primary-green:hover::after { animation: btnShine .85s ease; }
@keyframes btnShine { to { left: 150%; } }

/* --------------------------------------------------------------------------
   Cards com resposta refinada (linha de acento + elevação)
   -------------------------------------------------------------------------- */
.card-feature,
.service-card,
.info-tile,
.values-card { position: relative; overflow: hidden; }

.card-feature::after,
.service-card::after {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 3px;
    background: var(--gm-grad-bright);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s cubic-bezier(.16, .84, .44, 1);
}
.card-feature:hover::after,
.service-card:hover::after { transform: scaleX(1); }

/* Brilho radial que segue o topo do card no hover */
.card-feature::before,
.service-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 80% at 50% -20%, rgba(52, 193, 122, .10), transparent 55%);
    opacity: 0;
    transition: opacity .45s ease;
    pointer-events: none;
}
.card-feature:hover::before,
.service-card:hover::before { opacity: 1; }

/* --------------------------------------------------------------------------
   Textura sutil de "dados" (dot-grid) nas seções escuras — profundidade
   -------------------------------------------------------------------------- */
.final-cta,
.ai-intelligence-section,
#commercial-analysis-section {
    position: relative;
}
.final-cta > .container,
.ai-intelligence-section > .container,
#commercial-analysis-section > .container { position: relative; z-index: 2; }

.final-cta::after {
    /* mantém o círculo existente e soma um dot-grid discreto */
    background-image:
        radial-gradient(circle, rgba(52,193,122,.18), transparent 70%),
        radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: auto, 22px 22px;
}

/* --------------------------------------------------------------------------
   Navbar flutuante refinada ao rolar
   -------------------------------------------------------------------------- */
.navbar.scrolled {
    box-shadow: 0 10px 40px rgba(18, 45, 30, .10);
}
.navbar-brand { transition: transform .3s cubic-bezier(.16,.84,.44,1); }
.navbar-brand:hover { transform: translateY(-1px); }
.navbar-brand:hover .brand-name { color: var(--gm-green-bright); }

/* --------------------------------------------------------------------------
   Reveal on scroll — refinamento (blur suave)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    .gm-reveal { filter: blur(6px); }
    .gm-reveal.is-visible { filter: blur(0); }
}

/* --------------------------------------------------------------------------
   Molduras de mapa da home — arredondamento premium consistente
   -------------------------------------------------------------------------- */
.map-demo-container.shadow-premium {
    border-radius: 24px !important;
    box-shadow: 0 30px 70px rgba(12, 42, 27, .18) !important;
    transition: transform .5s cubic-bezier(.16,.84,.44,1), box-shadow .5s;
}
.map-demo-container.shadow-premium:hover {
    transform: translateY(-6px);
    box-shadow: 0 40px 90px rgba(12, 42, 27, .24) !important;
}

/* --------------------------------------------------------------------------
   Responsivo premium
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .hero-scroll-cue { display: none; }
    .hero-section.hero-home-lg .heading-xl { font-size: clamp(2.5rem, 11vw, 3.8rem); }
}

/* === Folhas caindo nos heros escuros (.hero-leaves) — spawner: js/hero-leaves.js === */
.hero-leaves { position: relative; overflow: hidden; }
.hero-leaves > .container { position: relative; z-index: 2; }
.hero-leaves .hleaf {
    position: absolute;
    top: -40px;
    z-index: 1;
    pointer-events: none;
    animation-name: hleafFall, hleafSway;
    animation-timing-function: linear, ease-in-out;
    animation-iteration-count: 1, infinite;
    animation-fill-mode: forwards, none;
}
.hero-leaves .hleaf svg { width: 100%; height: 100%; display: block; }
@keyframes hleafFall { to { top: 104%; } }
@keyframes hleafSway {
    0%   { transform: translateX(0) rotate(0deg); }
    25%  { transform: translateX(38px) rotate(50deg); }
    50%  { transform: translateX(-22px) rotate(-30deg); }
    75%  { transform: translateX(30px) rotate(40deg); }
    100% { transform: translateX(0) rotate(0deg); }
}

/* === Painel "moldura de navegador" dos heros de serviço (padrão base-cnpj) === */
.gm-browser-frame {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: #10150f;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}
.gm-browser-frame .frame-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .9rem;
    background: rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.gm-browser-frame .frame-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.gm-browser-frame .frame-url { font-size: .8rem; color: rgba(255,255,255,.55); margin-left: .4rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-browser-frame .frame-chips { display: flex; flex-wrap: wrap; gap: .5rem; padding: .5rem .9rem; background: rgba(255,255,255,.03); }
.gm-browser-frame .frame-foot {
    display: flex; justify-content: space-between; align-items: center; gap: .5rem;
    padding: .5rem .9rem;
    background: rgba(255,255,255,.05);
    border-top: 1px solid rgba(255,255,255,.08);
    font-size: .85rem; color: #fff;
}