:root {
    --iara-blue: #0349D6;
    --iara-green: #4AC900;
    --iara-green-hover: #269168;
    --iara-dark: #06132a;
    --iara-deeper: #0A192F;
    --iara-yellow: #EFE300;
    --iara-white: #ffffff;
    --iara-dark-blue: #0A192F;
    --iara-light-bg: #F8FAFC;
    --muted: #6c757d;
    --ink: #dbe4ee;
    --divider: rgba(255, 255, 255, .15);
    --primary-color: #2eaf7d;
    --primary-hover: #269168;
    --primary-hover-color: #269168;
    --primary-light-bg: #eaf7f2;
    --bg: #f8f9fa;
    --border: #e9ecef;
    --border-color: #e9ecef;
    --light: #F8FAFC;
    --text: #212529;
    --text-color: #212529;
    --text-dark: #212529;
    --text-muted: #6c757d;
    --sidebar-w: 300px;
    --sidebar-width: 280px;
}

body {
    font-family: 'Montserrat', sans-serif;
    background: url("/assets/images/IARA_Backgrounds_4.png") no-repeat center center fixed;
    color: var(--iara-dark);
    min-height: 100vh;
    display: flex;
    flex-direction: column
}

/* ===== NAVBAR (mantido) ===== */
.app-header {
    background: #fff;
    border-bottom: 1px solid #e9ecef;
    padding: .75rem 1rem
}

.navbar-brand img {
    height: 60px;
    width: auto
}

.navbar-nav {
    gap: .85rem
}

.nav-link {
    padding: .5rem .9rem !important;
    border-radius: .5rem;
    color: #6c757d;
    font-weight: 500
}

.nav-link:hover,
.nav-link.active {
    background: #0349d6;
    color: var(--iara-light-bg) !important
}

@media (max-width: 991.98px) {
    .navbar-brand img {
        height: 40px
    }
}

/* ==== TÍTULO ==== */
.page-hero {
    padding: 0px 0 24px
}

.page-hero h1 {
    font-weight: 800;
    letter-spacing: .02em
}

.hero-bullets {
    color: #4f4f4f;
    font-size: .95rem
}

.hero-bullets .bi {
    color: var(--iara-green)
}

/* ===== BG de dados + espaçamento do card ===== */
.stage {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding-top: clamp(40px, 8vh, 96px);
    /* desgruda do header */
    padding-bottom: clamp(40px, 8vh, 96px);
    /* desgruda do footer */
}

.stage::before,
.stage::after {
    content: "";
    position: absolute;
    inset: -20% -10% auto -10%;
    height: 120%;
    mix-blend-mode: screen;
    pointer-events: none;
}

.grid {
    position: absolute;
    inset: 0;
    opacity: .25;
    pointer-events: none;
    background-size: 42px 42px;
    animation: gridMove 26s linear infinite;
}

@keyframes gridMove {
    from {
        background-position: 0 0, 0 0
    }

    to {
        background-position: 0 42px, 42px 0
    }
}

.flow {
    position: absolute;
    inset: 0;
    opacity: .18;
    pointer-events: none;
    background: ;
    animation: floatDots 18s linear infinite;
}

@keyframes floatDots {
    from {
        transform: translateX(0)
    }

    to {
        transform: translateX(-80px)
    }
}

/* Card glass */
.glass {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 980px;
    margin-inline: auto;
    background: rgba(255, 255, 255, .04);
    backdrop-filter: blur(8px);
    border-radius: 24px;
    padding: 32px 26px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
    border: 1px solid rgba(255, 255, 255, .12);
}

.glass::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 24px;
    padding: 1px;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.badge-pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .8rem;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: .02em;
    background: linear-gradient(135deg, rgba(26, 71, 159, .25), rgba(46, 175, 125, .25));
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .15)
}

.hero-title {
    font-weight: 800;
    letter-spacing: .02em;
    margin: .25rem 0 .5rem 0
}

.lead {

    color: var(--muted)
}

/* CTA */
.notify .form-control {
    background: #0c1f3f;
    border: 1px solid #1f355f;
    color: var(--ink);
    padding: .9rem 1rem;
}

.notify .form-control::placeholder {
    color: #a7b6cf
}

.notify .btn-success {
    background: var(--iara-green);
    border-color: var(--iara-green);
    font-weight: 700
}

/* Chips */
.features-mini {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 18px;

}

.feature-chip {
    display: flex;
    align-items: center;
    gap: .75rem;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .12);
    padding: .8rem 1rem;
    border-radius: 14px;
    color: var(--iara-dark);
    font-weight: 600
}

.feature-chip i {
    font-size: 1.2rem;
    color: var(--iara-green)
}

/* Timeline (sem “beta”) */
.timeline {
    margin-top: 28px
}

.step-list {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px
}

.step {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--iara-dark);
    background: rgba(255, 255, 255, .05);
    padding: .4rem .7rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .12)
}

.step i {
    color: var(--iara-green)
}


/* Footer */
.footer {
    background: var(--iara-white);
    border-top: 1px solid var(--divider)
}

.footer .footer-logo {
    height: 40px;
    width: auto
}

.footer a {
    color: var(--iara-dark-blue);
    text-decoration: none
}

.footer a:hover {
    color: var(--iara-dark-blue);
}

.footer .container .row>div {
    text-align: center;
}

.footer-bottom {
    border-top: 1px solid var(--divider);
    padding: 1rem 0
}

/* ===== Responsivo ===== */
@media (max-width: 991.98px) {
    .features-mini {
        grid-template-columns: 1fr 1fr
    }
}

@media (max-width: 575.98px) {
    .features-mini {
        grid-template-columns: 1fr
    }

    .hero-title {
        font-size: 1.8rem
    }

    /* input e botão empilham no mobile */
    .notify .input-group {
        flex-direction: column;
        gap: 10px
    }

    .notify .btn-success {
        width: 100%;
        border-radius: .5rem !important
    }

    .notify .form-control {
        border-radius: .5rem !important
    }
}