/* =========================
   RESET
========================= */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
   
    ;
}

/* =========================
   BASE
========================= */
body{
    background:#f4f6fb;
    color:#1a1a1a;
    line-height:1.6;
    font-size: 16px;
    font-family: 'JetBrains Mono', monospace;
    /*font-family: 'Roboto', Arial, sans-serif*/
}

/* =========================
   HEADER
========================= */
header{
    background: linear-gradient(90deg, #ffffff 0%, #87c59e 50%, #125a39 100%);
    padding:12px 20px;
    font-size: 18px;
}

.header-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.logo-container img{
    width:150px;
}

/* =========================
   MENU
========================= */
.menu-toggle{
    width:30px;
    height:22px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    cursor:pointer;
}

.menu-toggle span{
    height:4px;
    width:100%;
    background:white;
    border-radius:4px;
    transition: transform 0.4s, opacity 0.4s;
}

.menu-toggle.active span:nth-child(1){
    transform: rotate(45deg) translate(5px,5px);
}

.menu-toggle.active span:nth-child(2){
    opacity:0;
}

.menu-toggle.active span:nth-child(3){
    transform: rotate(-45deg) translate(7px,-7px);
}

nav{
    max-height:0;
    overflow:hidden;
    transition:max-height 0.4s ease;
}

nav.active{
    max-height:400px;
}

.menu{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:10px;
    text-align:center;
    margin-top:10px;
}

.menu a{
    position:relative;
    text-decoration:none;
    color:white;
    font-weight:bold;
    padding:10px 14px;
}

.menu a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:5px;
    width:0%;
    height:3px;
    background:white;
    transition:width 0.3s;
}

.menu a:hover::after{
    width:100%;
}

/* =========================
   MAIN
========================= */
main{
    padding:40px 20px;
    max-width:900px;
    margin:auto;
}

section{
    /*background:white;*/
    padding:10px;
    border-radius:16px;
    margin-bottom:20px;
    box-shadow:0 8px 20px rgba(0,0,0,0.06);
}

/* =========================
   FORMULÁRIO ESTILO SAAS
========================= */

.contato{
    max-width:520px;
    margin:60px auto;
    padding:35px;
    border-radius:20px;
    background:white;
    box-shadow:
        0 20px 40px rgba(0,0,0,0.06),
        0 2px 6px rgba(0,0,0,0.04);
}

.contato h1{
    text-align:center;
    margin-bottom:30px;
    font-size:1.8rem;
    font-weight:600;
}

.form-saas{
    display:flex;
    flex-direction:column;
    gap:22px;
}

/* INPUT GROUP */
.input-group{
    position:relative;
}

.input-group input,
.input-group textarea{
    width:100%;
    padding:18px 14px 10px 14px;
    border-radius:12px;
    border:1px solid #e2e8f0;
    background:#f9fafc;
    font-size:0.95rem;
    transition: all 0.3s ease;
}

.input-group textarea{
    min-height:120px;
    resize:none;
}

/* LABEL */
.input-group label{
    position:absolute;
    left:14px;
    top:16px;
    font-size:0.9rem;
    color:#64748b;
    pointer-events:none;
    transition:0.2s ease;
}

/* Efeito floating */
.input-group input:focus + label,
.input-group input:not(:placeholder-shown) + label,
.input-group textarea:focus + label,
.input-group textarea:not(:placeholder-shown) + label{
    top:6px;
    font-size:0.75rem;
    color:#125a39;
}

/* Focus moderno */
.input-group input:focus,
.input-group textarea:focus{
    outline:none;
    border-color:#125a39;
    background:white;
    box-shadow:0 0 0 4px rgba(18,90,57,0.1);
}

/* BOTÃO MODERNO */
.form-saas button{
    padding:14px;
    border:none;
    border-radius:12px;
    font-weight:600;
    font-size:0.95rem;
    cursor:pointer;
    color:white;
    background: linear-gradient(135deg,#125a39,#1f8f5f);
    transition: all 0.3s ease;
}

.form-saas button:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 20px rgba(0,0,0,0.1);
}

.form-saas button:active{
    transform:translateY(0);
}

h1{
    margin-bottom:25px;
    color:#0d1b2a;
    font-size:2rem;
}

h2{
    margin:15px 0 10px;
    color:#7b2cbf;
}

ul{
    padding-left:20px;
}

/* =========================
   FORMULÁRIO
========================= */
form{
    display:flex;
    flex-direction:column;
    gap:18px;
}

input,
textarea{
    width:100%;
    padding:14px 16px;
    border:1px solid #ddd;
    border-radius:10px;
    font-size:1rem;
    transition: all 0.3s ease;
    background:#f9f9f9;
}

input:focus,
textarea:focus{
    outline:none;
    border-color:#125a39;
    background:white;
    box-shadow:0 0 0 3px rgba(18,90,57,0.15);
}

textarea{
    min-height:140px;
    resize:vertical;
}

button{
    padding:14px;
    border:none;
    border-radius:10px;
    font-size:1rem;
    font-weight:bold;
    cursor:pointer;
    background:#125a39;
    color:white;
    transition: all 0.3s ease;
}

button:hover{
    background:#0f4c30;
    transform: translateY(-2px);
}

button:active{
    transform: translateY(0);
}

/* =========================
   FOOTER
========================= */
footer{
    text-align:center;
    padding:20px;
    color:#666;
}

/* =========================
   DESKTOP
========================= */
@media(min-width:768px){

    .menu-toggle{
        display:none;
    }

    nav{
        max-height:none;
    }

    .menu{
        flex-direction:row;
        gap:25px;
        margin-top:0;
    }

    header{
        display:flex;
        justify-content:space-between;
        align-items:center;
    }
}


/* ===============================
   PREMIUM CONTACT SECTION
================================ */

.premium-contact{
    min-height:85vh;
    margin-top: 1px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:1px 2px 0px 2px;
    /*background: linear-gradient(135deg, #e9f5ef, #f4f6fb);*/
}

/* CARD */
.contact-card{
    width:100%;
    max-width:520px;
    padding:30px 25px;
    border-radius:15px;
    background: rgba(255,255,255,0.75);
    backdrop-filter: blur(14px);
    box-shadow:
        0 30px 60px rgba(0,0,0,0.08),
        0 10px 20px rgba(0,0,0,0.04);
    animation: fadeUp 0.6s ease forwards;
    opacity:0;
}

/* Animação suave */
@keyframes fadeUp{
    from{
        transform:translateY(20px);
        opacity:0;
    }
    to{
        transform:translateY(0);
        opacity:1;
    }
}

/* HEADER */
.contact-header{
    text-align:center;
    margin-bottom:15px;
}

.contact-header h1{
    font-size:2rem;
    font-weight:600;
    color:#0d1b2a;
    margin-bottom:8px;
}

.contact-header p{
    font-size:0.95rem;
    color:#64748b;
}

/* FORM */
.premium-form{
    display:flex;
    flex-direction:column;
    
    gap:24px;
}

/* FIELD */
.field{
    position:relative;


}

.field input,
.field textarea{
    width:100%;
    padding:18px 14px 10px 14px;
    border-radius:14px;
    border:1px solid rgba(0,0,0,0.08);
    background: rgba(255,255,255,0.85);
    font-size:0.95rem;
    transition: all 0.3s ease;
}

.field textarea{
    min-height:130px;
    resize:none;
}

/* LABEL FLOAT */
.field label{
    position:absolute;
    left:14px;
    top:16px;
    font-size:0.85rem;
    color:#94a3b8;
    pointer-events:none;
    transition:0.25s ease;
}

.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label{
    top:6px;
    font-size:0.7rem;
    color:#125a39;
}

/* FOCUS */
.field input:focus,
.field textarea:focus{
    outline:none;
    border-color:#125a39;
    box-shadow:0 0 0 4px rgba(18,90,57,0.08);
}

/* BOTÃO PREMIUM */
.premium-form button{
    padding:16px;
    border:none;
    border-radius:14px;
    font-weight:600;
    font-size:0.95rem;
    letter-spacing:0.5px;
    cursor:pointer;
    color:white;
    background: linear-gradient(135deg,#125a39,#1f8f5f);
    transition: all 0.3s ease;
}

.premium-form button:hover{
    transform:translateY(-4px);
    box-shadow:0 15px 30px rgba(18,90,57,0.25);
}

.premium-form button:active{
    transform:translateY(0);
}

/* ===============================
   PREMIUM HOME
================================ */

.premium-home{
    background: linear-gradient(135deg, #eef7f1, #f4f6fb);
    margin-top:40px;
    
    
    /*padding:100px 10px 10px 20px;*/
    border-radius: 15px;

}

/* HERO */
.hero{
    max-width:855px;
    /*min-height:85vh;*/
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding: 40px;
    background: rgba(255,255,255,0.75);
}

.hero-content{
    max-width:800px; 
    animation: fadeUp 0.7s ease forwards;
}

.hero h1{
    font-size:2.5rem;
    font-weight:600;
    margin-bottom:20px;
    color:#0d1b2a;
}

.hero p{
    font-size:1.1rem;
    color:#64748b;
    margin-bottom:35px;
}

.hero-buttons{
    display:flex;
    gap:20px;
    justify-content:center;
    flex-wrap:wrap;
}

/* BOTÕES */
.btn-primary,
.btn-secondary{
    padding:14px 28px;
    border-radius:14px;
    text-decoration:none;
    font-weight:600;
    transition: all 0.3s ease;
}

.btn-primary{
    background: linear-gradient(135deg,#125a39,#1f8f5f);
    color:white;
}

.btn-primary:hover{
    transform:translateY(-4px);
    box-shadow:0 15px 30px rgba(18,90,57,0.25);
}

.btn-secondary{
    background:white;
    color:#125a39;
    border:1px solid rgba(18,90,57,0.2);
}

.btn-secondary:hover{
    background:#125a39;
    color:white;
    transform:translateY(-4px);
}

/* FEATURES */
.features{
    display:grid;
    grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
    gap:30px;
    padding:80px 20px;
    max-width:1100px;
    margin:auto;
}

.feature-card{
    padding:35px 30px;
    border-radius:15px;
    background: rgba(255,255,255,0.75);
    backdrop-filter: blur(14px);
    box-shadow:
        0 20px 40px rgba(0,0,0,0.06),
        0 8px 20px rgba(0,0,0,0.04);
    transition: all 0.3s ease;
}

.feature-card:hover{
    transform:translateY(-8px);
}

.feature-card h3{
    margin-bottom:15px;
    font-size:1.2rem;
    color:#0d1b2a;
}

.feature-card p{
    color:#64748b;
    font-size:0.95rem;
}

/* ABOUT */
.about{
    padding:60px 20px 100px;
    display:flex;
    justify-content:center;
}

.about-card{
    max-width:750px;
    text-align:center;
    padding:45px;
    border-radius:15px;
    background: rgba(255,255,255,0.8);
    backdrop-filter: blur(12px);
    box-shadow:
        0 25px 50px rgba(0,0,0,0.06),
        0 10px 20px rgba(0,0,0,0.04);
}

.about-card h2{
    margin-bottom:15px;
    font-size:1.8rem;
    color:#0d1b2a;
}

.about-card p{
    color:#64748b;
    font-size:1rem;
}


/* ============================
   FUNDO ANIMADO TECH
============================ */

#bg-canvas{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:-1;
    background: radial-gradient(circle at center, #0f172a, #0d1b2a 70%);
}


/* Ajuste de espaçamento entre seções */
.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    padding: 60px 20px 40px;  /* Aumentei o padding inferior */
    max-width: 1200px;
    margin: 0 auto;
}

.about {
    padding: 40px 20px 100px;  /* Adicionei padding-top para espaçamento */
    display: flex;
    justify-content: center;
}

/* Se precisar de mais espaçamento, pode adicionar um margin-top */
.about-card {
    margin-top: 20px;
}


/* =========================
   AJUSTES RESPONSIVOS - FUNDO COMPLETO
========================= */
@media(max-width:767px){
    main.premium-home {
        padding: 0;
        max-width: 100%;
        margin: 0;
        width: 100%;
    }
    
    .hero {
        padding: 5px 5px;
        min-height: auto;
        width: 100%;
        margin: 0;
    }
    
    .hero-content {
        padding: 30px 20px;
        width: 100%;
        max-width: 100%;
    }
    
    .hero h1 {
        font-size: 1.8rem;
    }
    
    .features {
        padding: 40px 15px 30px;
        gap: 20px;
        width: 100%;
        max-width: 100%;
    }
    
    .feature-card {
        padding: 25px 20px;
        width: 100%;
    }
    
    .about {
        padding: 30px 15px 60px;
        width: 100%;
    }
    
    .about-card {
        padding: 30px 20px;
        margin-top: 0;
        width: 100%;
        max-width: 100%;
    }
    
    /* Garantir que o glass-card ocupe toda largura */
    .glass-card {
        width: 100%;
        max-width: 100%;
        margin: 0;
       
       
    }
}

.video-modal-box video {
    position: relative;
    width: 80vh;
    max-width: 330px;
    aspect-ratio: 9 / 16;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

#videoModal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(6px);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

#videoModal.active {
    display: flex !important;
}

.video-trigger {
    cursor: pointer;
    /*text-decoration: underline green;*/
    text-underline-offset: 8px;
    transition: opacity 0.2s;
}

.video-trigger:hover {
    text-decoration: underline darkgreen;
    text-decoration-thickness: 2.5px;
    text-underline-offset: 8px;
    opacity: 0.75;
}

.video-trigger:hover {
    opacity: 0.75;
}

.video-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    color: white;
    font-size: 22px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    line-height: 1;
    backdrop-filter: blur(4px);
    transition: background 0.2s;
    z-index: 10;
}

.video-modal-close:hover {
    background: rgba(0, 0, 0, 0.8);
}

.video-trigger::after {
    content:'👈';
    margin-left: 1px;
    display: inline-block;
    animation: clickPulse 1.2s ease-in-out infinite;
}

@keyframes clickPulse {
    0%   { transform: scale(1)   rotate(0deg);   opacity: 1;   }
    30%  { transform: scale(0.8) rotate(-10deg); opacity: 0.6; }
    60%  { transform: scale(1.1) rotate(5deg);   opacity: 1;   }
    100% { transform: scale(1.3)   rotate(0deg);   opacity: 1;   }
}


.custom-alert {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}
.custom-alert.show {
  display: flex;
}
.alert-content {
  background: #fff;
  border-radius: 16px;
  padding: 40px 48px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0,0,0,0.2);
  animation: popIn 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes popIn {
  from { transform: scale(0.7); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.alert-icon {
  width: 56px;
  height: 56px;
  background: #22c55e;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #fff;
  margin: 0 auto 16px;
}
.alert-content h3 {
  font-size: 1.4rem;
  margin-bottom: 8px;
}
.alert-content p {
  color: #666;
  margin-bottom: 24px;
}
.alert-content button {
  padding: 10px 32px;
  background: #22c55e;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s;
}
.alert-content button:hover { background: #16a34a; }