:root{
    --navy:#062c50;
    --teal:#fabc3a; /*#008dff;/*#22cda7;*/
    --ink:#15324d;
    --muted:#60758a;
}
*{
    scroll-behavior:smooth
}
body{
    font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
    color:var(--ink);
    padding-top:76px
}
.navbar{
    background:black; /*var(--navy);*/
    padding:0;
    transition:all .25s;
    box-shadow:0 2px 8px cadetblue;
}
.navbar.compact{
    padding:5px 0
}
.navbar-toggler-icon-color{
    color: var(--bs-navbar-color);
}
.brand-mark{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg,#00b99c,#1684d8);
    color:white;
    font-size:27px;
    font-weight:900;
    border-radius:5px 13px 5px 5px
}
.brand-name{
    font-weight:800;
    letter-spacing:1px;
    line-height:1;
    color:#fff
}
.brand-name{
    width: 75%;
}
.brand-name small{
    display:block;
    font-size:9px;
    letter-spacing:.6px;
    font-weight:500;
    margin-top:5px
}
.nav-link{
    color:#eaf4fc!important;
    font-weight:500
}
.btn-teal{
    background: linear-gradient(110deg, #d58129, #a55304);
    color: #fff3cd;
    border: 0;
    font-weight: 700;
/*    background:linear-gradient(110deg,#29d5ae,#12b99a);
    color:#062b45;
    border:0;
    font-weight:700*/
}
.btn-teal:hover{
    background:#17b994;
    color:#062b45;
    transform:translateY(-1px)
}
.hero{
    min-height:570px;
    background:linear-gradient(270deg,#041d35f2 0%,#041d35d9 10%,#041d3550 30%),url('../img/systemdeveloperoffice.avif') center/cover;
    display:flex;
    align-items:center;
    color:#fff
}
.hero h1{
    font-size:clamp(2.5rem,5vw,4.5rem);
    font-weight:800;
    line-height:1.08;
    max-width:700px
}
.hero h1 span{
    color:var(--teal)
}
.hero p{
    font-size:1.15rem;
    max-width:570px;
    color:#e2edf6;
}
.eyebrow{
    text-transform:uppercase;
    letter-spacing:2px;
    font-size:1.18rem;
    font-weight:800;
    color:var(--teal);/*#1bc8a4*/
}
.hero .eyebrow{
    color:#70e8cf
}
.service-hub{
    background:#f5f9fc;
    padding:44px 0 36px
}
.hub-card{
    height:100%;
    padding:22px 14px;
    text-align:center;
    border-right:1px solid #d2e0eb;
    color:var(--ink);
    text-decoration:none;
    display:block;
    transition:.2s
}
.hub-card:hover{
    transform:translateY(-5px);
    color:#0878d1
}
.hub-icon{
    width:68px;
    height:68px;
    margin:16px auto 16px;
    border-radius:50%;
    display:grid;
    place-items:center;
    color:#fff;
    font-size:1.8rem;
    box-shadow:0 8px 18px #102c461a
}
.hub-card strong{
    display:block;
    min-height:52px
}
.hub-card small{
    color:#0878d1
}
.hub-card-img {
    width: 98%;
}
.service-row{
    align-items:center;
    min-height:390px
}
.service-row:nth-child(even){
    background:#f2f8fc
}
.service-photo{
    height:320px;
    width:100%;
    object-fit:cover;
    border-radius:18px;
    box-shadow:0 18px 45px #12304b20
}
.service-copy{
    padding:35px
}
.service-copy h3{
    font-weight:800;
    color:var(--navy)
}
.service-copy p{
    color:var(--muted);
    line-height:1.8
}
.check-list{
    padding:0;
    list-style:none
}
.check-list li{
    margin:.6rem 0
}
.check-list i{
    color:#11ad91;
    margin-right:10px
}
.feature-box{
    background:#fff;
    border:1px solid #e3edf5;
    border-radius:18px;
    padding:28px;
    height:100%;
    box-shadow:0 12px 35px #14334d0b
}
.feature-box i{
    font-size:2rem;
    color:#10b89a
}
.section-pad{
    padding:90px 0
}
.section-title{
    font-weight:800;
    font-size:clamp(2rem,3vw,3rem);
    color:var(--navy);
    letter-spacing:-1px
}
.testimonials{
    background:linear-gradient(120deg,#071f37,#0d3d60);
    color:#fff
}
.quote-card{
    background:#fff;
    color:var(--ink);
    border-radius:15px;
    padding:26px;
    height:100%
}
.cta-band{
    background:linear-gradient(100deg,#062b4d,#087e91);
    color:black;
}
.page-hero{
    background:linear-gradient(120deg,#062b4d,#0b5574);
    color:white;
    padding:85px 0 70px
}
.page-hero h1{
    font-weight:800;
    font-size:clamp(2rem,4vw,3.5rem)
}
.detail-panel{
    background:#fff;
    border:1px solid #e5edf4;
    border-radius:18px;
    padding:30px;
    box-shadow:0 15px 40px #0a2a4310
}
.plan-card{
    height:100%;
    border:1px solid #dce8f0;
    border-radius:18px;
    padding:30px;
    background:#fff
}
.plan-card.featured{
    border:2px solid #16bfa0;
    box-shadow:0 18px 45px #0c9c8018
}
.plan-price{
    font-size:2.1rem;
    font-weight:800;
    color:var(--navy)
}
.site-footer{
    background:#061f37;
    color:#d4e3ef
}
.footer-links a{
    color:#d4e3ef;
    text-decoration:none;
    margin:0 9px;
    font-size:.9rem
}
.footer-links a:hover{
    color:var(--teal)
}
.reveal{
    opacity:0;
    transform:translateY(24px);
    transition:opacity .65s,transform .65s
}
.reveal.visible{
    opacity:1;
    transform:none
}
.contact-card{
    background:#f4f9fc;
    border-radius:18px;
    padding:32px
}
/* ============================================================
   HERO CAROUSEL
   ============================================================ */
.hero-carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
}
/* Altura dos slides */
.hero-carousel .carousel-item {
    height: 680px;
    position: relative;
}
/* Imagem */
.hero-carousel .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
/* ============================================================
   CAMADA SOBRE A IMAGEM
   ============================================================ */
.hero-overlay {
    position: absolute;
    inset: 0;
    background:linear-gradient(90deg,rgba(5, 20, 40, 0.60) 10%,rgba(5, 20, 40, 0.40) 30%,rgba(5, 20, 40, 0.20) 60%,rgba(5, 20, 40, 0.10) 100%);
    z-index: 1;
}
/* ============================================================
   CONTEÚDO DO CARROSSEL
   ============================================================ */
.hero-carousel .carousel-caption {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;
    padding: 0 70px;
    display: flex;
    align-items: center;
    text-align: left;
    z-index: 2;
}
/* Conteúdo */
.hero-content {
    max-width: 700px;
    animation: heroContentAnimation 1s ease;
}
/* Badge */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 17px;
    margin-bottom: 20px;
    border-radius: 30px;
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.25);
    backdrop-filter: blur(8px);
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}
/* Título */
.hero-content h1,.hero-content h2 {
    margin-bottom: 22px;
    color: #ffffff;
    font-size: clamp(2.4rem, 5vw, 4.4rem);
    font-weight: 300;
    line-height: 1.08;
    letter-spacing: -1px;
}
/* Destaque */
.hero-content h1 strong,.hero-content h2 strong {
    display: block;
    color: #4fd1c5;
    font-weight: 700;
}
/* Texto */
.hero-content p {
    max-width: 650px;
    margin-bottom: 30px;
    color: rgba(255,255,255,0.92);
    font-size: 1.15rem;
    line-height: 1.7;
}
/* Botão */
.hero-button {
    padding: 13px 25px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    transition:transform 0.5s ease,box-shadow 0.5s ease;
}
.hero-button:hover {
    transform: translate(-3px, -3px);
    box-shadow: 10px 10px 36px 3px rgba(255,255,255,0.55);
}
.hero-button i {
    margin-left: 8px;
    transition: transform 0.25s ease;
}
.hero-button:hover i {
    transform: translateX(5px);
}
/* ============================================================
   INDICADORES
   ============================================================ */
.hero-carousel .carousel-indicators {
    z-index: 5;
    bottom: 28px;
    margin-bottom: 0;
}
.hero-carousel .carousel-indicators button {
    width: 35px;
    height: 4px;
    margin: 0 4px;
    border: none;
    border-radius: 5px;
    opacity: 0.55;
    transition: width 0.3s ease, opacity 0.3s ease;
}
.hero-carousel .carousel-indicators button.active {
    width: 60px;
    opacity: 1;
}
/* ============================================================
   SETAS
   ============================================================ */
.hero-carousel .carousel-control-prev,.hero-carousel .carousel-control-next {
    width: 70px;
    z-index: 5;
    opacity: 0.75;
    transition: opacity 0.25s ease;
}
.hero-carousel .carousel-control-prev:hover,.hero-carousel .carousel-control-next:hover {
    opacity: 1;
}
.hero-carousel .carousel-control-prev-icon,.hero-carousel .carousel-control-next-icon {
    width: 45px;
    height: 45px;
    padding: 10px;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.14);
    backdrop-filter: blur(5px);
}
/* ============================================================
   ANIMAÇÃO DO CONTEÚDO
   ============================================================ */
@keyframes heroContentAnimation {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* ============================================================
   TABLET
   ============================================================ */
@media (max-width: 930px) {
    .hero-carousel .carousel-item {
        height: 600px;
    }
    .hero-carousel .carousel-caption {
        padding-left: 55px;
        padding-right: 55px;
    }
    .hero-content {
        max-width: 620px;
    }
}
/* ============================================================
   CELULAR
   ============================================================ */
@media (max-width: 767px) {
    .hero-carousel .carousel-item {
        height: 650px;
    }
    .hero-carousel .carousel-caption {
        padding: 0 30px;
    }
    .hero-content h1,
    .hero-content h2 {
        font-size: 2.35rem;
        letter-spacing: -0.5px;
    }
    .hero-content p {
        font-size: 1rem;
        line-height: 1.6;
    }
    .hero-carousel .carousel-control-prev,
    .hero-carousel .carousel-control-next {
        width: 45px;
    }
    .hero-carousel .carousel-control-prev-icon, .hero-carousel .carousel-control-next-icon {
        width: 35px;
        height: 35px;
    }
}
/* ============================================================
   CELULAR PEQUENO
   ============================================================ */
@media (max-width: 480px) {
    .hero-carousel .carousel-item {
        height: 620px;
    }
    .hero-carousel .carousel-caption {
        padding: 0 25px;
    }
    .hero-badge {
        font-size: 0.8rem;
        padding: 7px 13px;
    }
    .hero-content h1,.hero-content h2 {
        font-size: 2rem;
    }
    .hero-content p {
        font-size: 0.95rem;
    }

}@media(max-width:767px){
    .hero{
        min-height:570px
    }
    .hub-card{
        border:0;
        border-bottom:1px solid #d2e0eb
    }
    .service-copy{
        padding:28px 12px
    }
    .section-pad{
        padding:65px 0
    }
    .navbar .btn-teal{
        margin-top:12px
    }
    .service-photo{
        height:260px
    }
}
#mainNav .container {
    flex-wrap: nowrap;
}

#mainNav .navbar-brand {
    flex: 1 1 auto;
    min-width: 0;
    margin-right: 1rem;
}

#mainNav .brand-logo {
    display: block;
    width: clamp(180px, 52vw, 460px);
    max-width: 100%;
    height: auto;
}

#mainNav .navbar-toggler {
    flex: 0 0 auto;
}

@media (max-width: 575.98px) {
    #mainNav .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    #mainNav .navbar-brand {
        margin-right: .5rem;
        max-width: calc(100% - 55px);
    }

    #mainNav .brand-logo {
        width: 100%;
    }
}