:root{
    --primary:#2563eb;
    --secondary:#7c3aed;
    --accent:#06b6d4;

    --bg:#050816;
    --surface:rgba(255,255,255,0.08);

    --text:#ffffff;
    --text-light:#cbd5e1;

    --border:rgba(255,255,255,0.12);

    --shadow:
    0 10px 40px rgba(0,0,0,.35);

    --radius:20px;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    background:var(--bg);
    color:var(--text);
    overflow-x:hidden;
}

/* Animated Background */

body::before{
    content:'';
    position:fixed;
    width:700px;
    height:700px;
    top:-300px;
    left:-200px;

    background:
    radial-gradient(
    circle,
    rgba(37,99,235,.3),
    transparent 70%);

    filter:blur(60px);
    z-index:-2;
}

body::after{
    content:'';
    position:fixed;
    width:700px;
    height:700px;
    bottom:-300px;
    right:-200px;

    background:
    radial-gradient(
    circle,
    rgba(124,58,237,.25),
    transparent 70%);

    filter:blur(60px);
    z-index:-2;
}

/* NAVBAR */

.navbar{
    position:fixed;
    width:100%;
    top:0;
    left:0;
    z-index:999;
    backdrop-filter:blur(20px);
    background:rgba(5,8,22,.72);
    border-bottom:1px solid var(--border);
    transition:box-shadow .3s, background .3s;
}

.navbar.scrolled{
    background:rgba(5,8,22,.92);
    box-shadow:0 10px 30px rgba(0,0,0,.35);
}

.navbar-inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
    height:85px;
    gap:20px;
}

.logo{
    display:flex;
    align-items:center;
    flex-shrink:0;
    text-decoration:none;
}

.logo img{
    height:50px;
    width:auto;
    display:block;
}

.nav-menu ul{
    display:flex;
    gap:8px;
    list-style:none;
}

.nav-link{
    display:inline-block;
    text-decoration:none;
    color:var(--text-light);
    font-weight:500;
    font-size:.95rem;
    padding:10px 16px;
    border-radius:50px;
    transition:color .3s, background .3s;
}

.nav-link:hover,
.nav-link.active{
    color:white;
    background:rgba(96,165,250,.12);
}

.navbar-actions{
    display:flex;
    align-items:center;
    gap:14px;
}

.nav-cta{
    white-space:nowrap;
    padding:12px 22px;
    font-size:.92rem;
}

.mobile-nav-cta{
    display:none;
}

.nav-toggle{
    display:none;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    width:44px;
    height:44px;
    border:1px solid var(--border);
    border-radius:12px;
    background:rgba(255,255,255,.04);
    cursor:pointer;
    padding:0 10px;
}

.nav-toggle span{
    display:block;
    height:2px;
    width:100%;
    background:white;
    border-radius:2px;
    transition:transform .3s, opacity .3s;
}

.nav-toggle.active span:nth-child(1){
    transform:translateY(7px) rotate(45deg);
}

.nav-toggle.active span:nth-child(2){
    opacity:0;
}

.nav-toggle.active span:nth-child(3){
    transform:translateY(-7px) rotate(-45deg);
}

/* Buttons */

.btn-primary,
.btn-secondary{
    padding:14px 28px;
    border-radius:50px;
    text-decoration:none;
    font-weight:600;
}

.btn-primary{
    background:
    linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));
    color:white;
}

.btn-primary:hover{
    transform:translateY(-3px);
}

.btn-secondary{
    border:1px solid var(--border);
    color:white;
}

.container{
    width:90%;
    max-width:1400px;
    margin:auto;
}

/* HERO */

.hero{
    min-height:100vh;

    display:grid;
    grid-template-columns:
    repeat(2,1fr);

    align-items:center;

    gap:80px;

    width:90%;
    max-width:1400px;

    margin:auto;
}

.hero h1{
    font-size:4rem;
    line-height:1.1;
}

.hero h1 span{
    background:
    linear-gradient(
    135deg,
    #60a5fa,
    #a855f7);

    -webkit-background-clip:text;
    color:transparent;
}

.hero p{
    margin:25px 0;
    color:var(--text-light);
    font-size:1.1rem;
}

.hero-buttons{
    display:flex;
    gap:15px;
}

/* Glass Dashboard */

.hero-image{
    position:relative;
}

.hero-image-frame{
    position:relative;
    padding:14px;
    border-radius:24px;
    background:var(--surface);
    border:1px solid var(--border);
    box-shadow:
    0 25px 60px rgba(37,99,235,.25),
    0 0 0 1px rgba(255,255,255,.05) inset;
    animation:float 5s ease-in-out infinite;
}

.hero-image-frame::before{
    content:'';
    position:absolute;
    inset:-20px;
    background:
    radial-gradient(
    circle,
    rgba(37,99,235,.25),
    transparent 70%);
    filter:blur(30px);
    z-index:-1;
}

.hero-image img{
    width:100%;
    display:block;
    border-radius:14px;
    object-fit:cover;
}

@keyframes float{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-20px);
    }
}

/* Stats */

.stats{
    padding:70px 0;
}

.stats .container{
    display:grid;
    grid-template-columns:
    repeat(auto-fit,minmax(220px,1fr));
    gap:25px;
}

.stat-card{
    text-align:center;
    padding:35px;

    background:var(--surface);

    backdrop-filter:blur(15px);

    border:
    1px solid var(--border);

    border-radius:var(--radius);

    box-shadow:var(--shadow);
}

.stat-card h2{
    font-size:2.5rem;
    color:#60a5fa;
}

/* Sections */

section{
    padding:80px 0;
}

/* Titles */

.section-title{
    text-align:center;
    margin-bottom:45px;
}

.section-title h2{
    font-size:3rem;
}

/* Solutions */

.solutions-toolbar{
    width:90%;
    max-width:1400px;
    margin:-30px auto 45px;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

.solution-filters{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.filter-btn{
    border:1px solid var(--border);
    background:rgba(255,255,255,.04);
    color:var(--text-light);
    padding:10px 18px;
    border-radius:50px;
    font-family:inherit;
    font-size:.88rem;
    font-weight:500;
    cursor:pointer;
    transition:all .3s;
}

.filter-btn:hover,
.filter-btn.active{
    color:white;
    border-color:rgba(96,165,250,.45);
    background:linear-gradient(
    135deg,
    rgba(37,99,235,.35),
    rgba(124,58,237,.35));
    box-shadow:0 8px 24px rgba(37,99,235,.2);
}

.solutions-count{
    color:var(--text-light);
    font-size:.92rem;
    margin:0;
}

.solutions-count span{
    color:#60a5fa;
    font-weight:700;
}

.solutions-grid{
    width:90%;
    max-width:1400px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
    gap:24px;
}

.solution-card{
    background:var(--surface);
    backdrop-filter:blur(15px);
    border:1px solid var(--border);
    border-radius:22px;
    padding:28px;
    transition:transform .35s, box-shadow .35s, border-color .35s, opacity .35s;
    position:relative;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    min-height:100%;
}

.solution-card::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(
    135deg,
    rgba(37,99,235,.12),
    rgba(124,58,237,.1));
    opacity:0;
    transition:.35s;
    pointer-events:none;
}

.solution-card > *{
    position:relative;
    z-index:1;
}

.solution-card:hover{
    transform:translateY(-10px);
    border-color:rgba(96,165,250,.35);
    box-shadow:0 22px 50px rgba(37,99,235,.22);
}

.solution-card:hover::before{
    opacity:1;
}

.solution-card.hidden{
    display:none;
}

.solution-card-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    margin-bottom:20px;
}

.solution-badge{
    display:inline-block;
    padding:6px 12px;
    border-radius:50px;
    font-size:.72rem;
    font-weight:600;
    letter-spacing:.02em;
    text-transform:uppercase;
    color:#93c5fd;
    background:rgba(37,99,235,.15);
    border:1px solid rgba(96,165,250,.2);
}

.solution-icon{
    width:54px;
    height:54px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:16px;
    background:linear-gradient(
    135deg,
    rgba(37,99,235,.25),
    rgba(124,58,237,.25));
    border:1px solid rgba(96,165,250,.25);
}

.solution-icon i{
    font-size:1.35rem;
    color:#60a5fa;
}

.solution-icon.whatsapp{
    background:linear-gradient(
    135deg,
    rgba(34,197,94,.25),
    rgba(22,163,74,.2));
    border-color:rgba(74,222,128,.25);
}

.solution-icon.whatsapp i{
    color:#4ade80;
}

.solution-card h3{
    font-size:1.25rem;
    margin-bottom:12px;
}

.solution-card p{
    color:var(--text-light);
    line-height:1.65;
    font-size:.94rem;
    margin-bottom:22px;
    flex-grow:1;
}

.solution-links{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:auto;
    padding-top:8px;
    border-top:1px solid rgba(255,255,255,.06);
}

.solution-links a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 18px;
    border-radius:50px;
    font-size:.88rem;
    font-weight:600;
    text-decoration:none;
    transition:.3s;
    position:relative;
    z-index:2;
    cursor:pointer;
}

.solution-links .link-classic{
    border:1px solid var(--border);
    color:var(--text-light);
}

.solution-links .link-classic:hover{
    border-color:#60a5fa;
    color:#60a5fa;
}

.solution-links .link-new{
    background:linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));
    color:white;
}

.solution-links .link-new:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(37,99,235,.3);
}

.solution-links .link-single{
    border:1px solid rgba(96,165,250,.35);
    color:#60a5fa;
}

.solution-links .link-single:hover{
    background:rgba(96,165,250,.12);
}

.solution-badge-soon{
    display:inline-block;
    padding:5px 12px;
    border-radius:50px;
    font-size:.72rem;
    font-weight:600;
    color:#fbbf24;
    background:rgba(251,191,36,.12);
    border:1px solid rgba(251,191,36,.35);
    margin-left:6px;
}

.solution-card.coming-soon-card .solution-icon{
    opacity:.85;
}

.solution-links .link-coming-soon{
    border:1px solid rgba(251,191,36,.35);
    color:#fbbf24;
    background:rgba(251,191,36,.1);
    cursor:default;
    pointer-events:none;
    gap:8px;
}

.footer-coming-soon{
    color:var(--text-light);
    font-size:.92rem;
}

.footer-coming-soon em{
    color:#fbbf24;
    font-style:normal;
    font-weight:600;
    margin-left:4px;
}

/* CRM Section */

.industry-crm{
    padding-top:100px;
}

.crm-toolbar{
    width:90%;
    max-width:1400px;
    margin:-30px auto 45px;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

.crm-filters{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.crm-filter-btn{
    border:1px solid var(--border);
    background:rgba(255,255,255,.04);
    color:var(--text-light);
    padding:10px 18px;
    border-radius:50px;
    font-family:inherit;
    font-size:.88rem;
    font-weight:500;
    cursor:pointer;
    transition:all .3s;
}

.crm-filter-btn:hover,
.crm-filter-btn.active{
    color:white;
    border-color:rgba(96,165,250,.45);
    background:linear-gradient(135deg,rgba(37,99,235,.35),rgba(124,58,237,.35));
    box-shadow:0 8px 24px rgba(37,99,235,.2);
}

.crm-count{
    color:var(--text-light);
    font-size:.92rem;
    margin:0;
}

.crm-count span{
    color:#60a5fa;
    font-weight:700;
}

.crm-grid{
    width:90%;
    max-width:1400px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
    gap:24px;
}

.crm-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:22px;
    padding:28px;
    transition:transform .35s, box-shadow .35s, border-color .35s;
    display:flex;
    flex-direction:column;
}

.crm-card:hover{
    transform:translateY(-8px);
    border-color:rgba(96,165,250,.35);
    box-shadow:0 20px 45px rgba(37,99,235,.18);
}

.crm-card-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    margin-bottom:16px;
}

.crm-badge{
    display:inline-block;
    padding:6px 12px;
    border-radius:50px;
    font-size:.72rem;
    font-weight:600;
    color:#93c5fd;
    background:rgba(37,99,235,.15);
    border:1px solid rgba(96,165,250,.2);
}

.crm-card-icon{
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    background:linear-gradient(135deg,rgba(37,99,235,.25),rgba(124,58,237,.25));
    border:1px solid rgba(96,165,250,.25);
    flex-shrink:0;
}

.crm-card-icon i{
    font-size:1.2rem;
    color:#60a5fa;
}

.crm-card-icon .fa-whatsapp{
    color:#4ade80;
}

.crm-card h3{
    font-size:1.15rem;
    margin-bottom:14px;
}

.crm-card ul{
    list-style:none;
    margin:0 0 20px;
    padding:0;
    flex-grow:1;
}

.crm-card li{
    position:relative;
    padding-left:18px;
    margin-bottom:8px;
    color:var(--text-light);
    font-size:.9rem;
    line-height:1.5;
}

.crm-card li::before{
    content:'';
    position:absolute;
    left:0;
    top:8px;
    width:7px;
    height:7px;
    border-radius:50%;
    background:#60a5fa;
}

.crm-card-links{
    margin-top:auto;
    padding-top:8px;
    border-top:1px solid rgba(255,255,255,.06);
}

.crm-error{
    grid-column:1 / -1;
    text-align:center;
    color:var(--text-light);
    padding:40px;
}

/* FAQ */

.faq-list{
    width:90%;
    max-width:900px;
    margin:auto;
    display:flex;
    flex-direction:column;
    gap:14px;
}

.faq-item{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:16px;
    padding:0 22px;
    transition:border-color .3s, box-shadow .3s;
}

.faq-item[open]{
    border-color:rgba(96,165,250,.35);
    box-shadow:0 12px 30px rgba(37,99,235,.12);
}

.faq-item summary{
    cursor:pointer;
    list-style:none;
    padding:20px 0;
    font-weight:600;
    font-size:1rem;
    position:relative;
    padding-right:30px;
}

.faq-item summary::-webkit-details-marker{
    display:none;
}

.faq-item summary::after{
    content:'+';
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);
    color:#60a5fa;
    font-size:1.4rem;
    font-weight:400;
}

.faq-item[open] summary::after{
    content:'−';
}

.faq-item p{
    color:var(--text-light);
    line-height:1.7;
    font-size:.95rem;
    padding-bottom:20px;
    margin:0;
}

/* Features */

.features-grid{
    width:90%;
    max-width:1200px;
    margin:auto;

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:25px;
}

.feature-card{
    background:var(--surface);
    border:1px solid var(--border);
    padding:32px;
    border-radius:20px;
    transition:transform .3s, box-shadow .3s, border-color .3s;
}

.feature-card:hover{
    transform:translateY(-8px);
    border-color:rgba(96,165,250,.35);
    box-shadow:0 20px 45px rgba(37,99,235,.18);
}

.feature-icon{
    width:58px;
    height:58px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:18px;
    border-radius:16px;
    background:linear-gradient(
    135deg,
    rgba(37,99,235,.2),
    rgba(124,58,237,.2));
    border:1px solid rgba(96,165,250,.25);
}

.feature-icon i{
    font-size:1.5rem;
    color:#60a5fa;
}

.feature-card h3{
    font-size:1.15rem;
    margin-bottom:12px;
}

.feature-card p{
    color:var(--text-light);
    line-height:1.65;
    font-size:.95rem;
}

/* Testimonials */

.testimonials-grid{
    width:90%;
    max-width:1200px;
    margin:auto;

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:25px;
}

.testimonial-card{
    text-align:left;
    background:var(--surface);
    border:1px solid var(--border);
    padding:32px;
    border-radius:20px;
    transition:transform .3s, box-shadow .3s, border-color .3s;
    position:relative;
    overflow:hidden;
}

.testimonial-card::before{
    content:'"';
    position:absolute;
    top:10px;
    right:22px;
    font-size:5rem;
    line-height:1;
    color:rgba(96,165,250,.12);
    font-family:Georgia,serif;
    pointer-events:none;
}

.testimonial-card:hover{
    transform:translateY(-8px);
    border-color:rgba(96,165,250,.35);
    box-shadow:0 20px 45px rgba(37,99,235,.18);
}

.testimonial-stars{
    display:flex;
    gap:4px;
    margin-bottom:18px;
    color:#fbbf24;
    font-size:.95rem;
}

.testimonial-card p{
    color:var(--text-light);
    line-height:1.7;
    margin-bottom:22px;
    position:relative;
    z-index:1;
}

.testimonial-author{
    display:flex;
    flex-direction:column;
    gap:4px;
    position:relative;
    z-index:1;
}

.testimonial-author strong{
    color:var(--text);
    font-size:1rem;
}

.testimonial-author span{
    color:#94a3b8;
    font-size:.88rem;
}

/* Contact */

.contact-wrapper{
    width:90%;
    max-width:1100px;
    margin:auto;

    display:grid;
    grid-template-columns:280px 1fr;
    gap:30px;
    align-items:start;
}

.contact-info{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.contact-info-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:20px;
    padding:24px;
}

.contact-info-card i{
    font-size:1.6rem;
    color:#60a5fa;
    margin-bottom:12px;
}

.contact-info-card h3{
    font-size:1.05rem;
    margin-bottom:8px;
}

.contact-info-card p{
    color:var(--text-light);
    font-size:.95rem;
    line-height:1.5;
}

.contact-form{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:25px;
    padding:35px;

    display:flex;
    flex-direction:column;
    gap:18px;
}

.form-row{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
}

.form-group{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.form-group label{
    font-size:.9rem;
    font-weight:500;
    color:var(--text-light);
}

.contact-form input,
.contact-form textarea{
    width:100%;
    background:rgba(255,255,255,.05);
    border:1px solid var(--border);
    padding:14px 16px;
    border-radius:12px;
    color:white;
    font-family:inherit;
    font-size:.95rem;
    transition:border-color .3s, box-shadow .3s;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder{
    color:rgba(203,213,225,.65);
}

.contact-form input:focus,
.contact-form textarea:focus{
    outline:none;
    border-color:#60a5fa;
    box-shadow:0 0 0 3px rgba(96,165,250,.15);
}

.contact-form input:invalid:not(:placeholder-shown),
.contact-form textarea:invalid:not(:placeholder-shown){
    border-color:rgba(248,113,113,.6);
}

.contact-form textarea{
    resize:vertical;
    min-height:130px;
}

/* Custom Select */

.custom-select{
    position:relative;
    width:100%;
}

.native-select-hidden{
    position:absolute;
    opacity:0;
    pointer-events:none;
    width:0;
    height:0;
}

.custom-select-trigger{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    background:rgba(255,255,255,.05);
    border:1px solid var(--border);
    padding:14px 16px;
    border-radius:12px;
    color:white;
    font-family:inherit;
    font-size:.95rem;
    cursor:pointer;
    transition:border-color .3s, box-shadow .3s, border-radius .3s;
    text-align:left;
}

.custom-select-value.placeholder{
    color:rgba(203,213,225,.65);
}

.custom-select-trigger i{
    color:#60a5fa;
    font-size:.85rem;
    transition:transform .3s;
}

.custom-select.open .custom-select-trigger{
    border-color:#60a5fa;
    box-shadow:0 0 0 3px rgba(96,165,250,.15);
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
}

.custom-select.open .custom-select-trigger i{
    transform:rotate(180deg);
}

.custom-select.invalid .custom-select-trigger{
    border-color:rgba(248,113,113,.6);
}

.custom-select-menu{
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    max-height:240px;
    overflow-y:auto;
    margin:0;
    padding:6px;
    list-style:none;
    background:#0b1228;
    border:1px solid #60a5fa;
    border-top:none;
    border-radius:0 0 12px 12px;
    box-shadow:0 16px 40px rgba(0,0,0,.45);
    z-index:20;
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px);
    transition:opacity .25s, transform .25s, visibility .25s;
}

.custom-select.open .custom-select-menu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.custom-select-option{
    padding:11px 14px;
    border-radius:8px;
    color:var(--text-light);
    font-size:.92rem;
    cursor:pointer;
    transition:background .2s, color .2s;
}

.custom-select-option:hover,
.custom-select-option.focused{
    background:rgba(96,165,250,.15);
    color:white;
}

.custom-select-option.selected{
    background:linear-gradient(
    135deg,
    rgba(37,99,235,.45),
    rgba(124,58,237,.35));
    color:white;
    font-weight:600;
}

.custom-select-menu::-webkit-scrollbar{
    width:8px;
}

.custom-select-menu::-webkit-scrollbar-track{
    background:rgba(255,255,255,.04);
    border-radius:8px;
}

.custom-select-menu::-webkit-scrollbar-thumb{
    background:rgba(96,165,250,.35);
    border-radius:8px;
}

.form-message{
    min-height:1.25rem;
    font-size:.9rem;
    margin:0;
}

.form-message.success{
    color:#34d399;
}

.form-message.error{
    color:#f87171;
}

.contact-info-card p a{
    color:var(--text-light);
    text-decoration:none;
    transition:color .3s;
}

.contact-info-card p a:hover{
    color:#60a5fa;
}

.contact-info-card .fa-whatsapp,
.contact-info-card .fab.fa-whatsapp{
    color:#4ade80;
}

.hp-field{
    position:absolute;
    left:-9999px;
    opacity:0;
    height:0;
    width:0;
    pointer-events:none;
}

.form-actions{
    margin-top:-6px;
}

.notify-status{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:8px;
    margin:0 0 8px;
    padding:14px 16px;
    border-radius:12px;
    background:rgba(255,255,255,.04);
    border:1px solid var(--border);
}

.notify-status li{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:.88rem;
}

.notify-status li.sent{
    color:#34d399;
}

.notify-status li.failed{
    color:#fbbf24;
}

.notify-status li i{
    width:18px;
    text-align:center;
}

.whatsapp-followup{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:12px 20px;
    border-radius:50px;
    text-decoration:none;
    color:white;
    font-weight:600;
    font-size:.92rem;
    background:linear-gradient(135deg,#22c55e,#16a34a);
    transition:transform .3s, box-shadow .3s;
}

.whatsapp-followup:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(34,197,94,.35);
}

.contact-form button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    background:
    linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));
    border:none;
    padding:16px 28px;
    border-radius:50px;
    color:white;
    font-weight:600;
    font-size:1rem;
    cursor:pointer;
    transition:transform .3s, box-shadow .3s;
}

.contact-form button:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 30px rgba(37,99,235,.35);
}

.contact-form button:disabled{
    opacity:.7;
    cursor:not-allowed;
    transform:none;
    box-shadow:none;
}

/* CRM Hub */

.crm-hub{
    padding:100px 0;
}

.crm-hub-layout{
    width:90%;
    max-width:1200px;
    margin:50px auto 0;
    display:grid;
    grid-template-columns:1fr 480px;
    gap:60px;
    align-items:center;
}

.crm-hub-features{
    display:flex;
    flex-direction:column;
    gap:32px;
}

.crm-feature-item{
    display:flex;
    gap:20px;
    align-items:flex-start;
}

.crm-feature-icon{
    flex-shrink:0;
    width:52px;
    height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    background:linear-gradient(135deg,rgba(37,99,235,.25),rgba(124,58,237,.25));
    border:1px solid rgba(96,165,250,.25);
    font-size:1.3rem;
    color:#60a5fa;
}

.crm-feature-item .fab.fa-whatsapp{
    color:#4ade80;
}

.crm-feature-text h3{
    font-size:1.1rem;
    margin-bottom:6px;
}

.crm-feature-text p{
    color:var(--text-light);
    font-size:.93rem;
    line-height:1.65;
    margin:0;
}

/* CRM Preview Card */

.crm-hub-preview{
    perspective:1200px;
}

.crm-preview-card{
    background:rgba(11,18,40,.95);
    border:1px solid rgba(96,165,250,.25);
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04);
    transform:rotateY(-4deg) rotateX(2deg);
    transition:transform .4s;
}

.crm-preview-card:hover{
    transform:rotateY(0) rotateX(0);
}

.crm-preview-header{
    display:flex;
    align-items:center;
    gap:14px;
    padding:14px 18px;
    background:rgba(255,255,255,.04);
    border-bottom:1px solid rgba(255,255,255,.07);
}

.crm-preview-dots{
    display:flex;
    gap:7px;
}

.crm-preview-dots span{
    width:12px;
    height:12px;
    border-radius:50%;
}

.crm-preview-dots span:nth-child(1){background:#f87171;}
.crm-preview-dots span:nth-child(2){background:#fbbf24;}
.crm-preview-dots span:nth-child(3){background:#4ade80;}

.crm-preview-title{
    font-size:.88rem;
    color:#94a3b8;
    display:flex;
    align-items:center;
    gap:7px;
}

.crm-preview-title i{
    color:#60a5fa;
}

.crm-preview-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:0;
    border-bottom:1px solid rgba(255,255,255,.07);
}

.crm-stat{
    padding:16px 10px;
    text-align:center;
    border-right:1px solid rgba(255,255,255,.06);
}

.crm-stat:last-child{border-right:none;}

.crm-stat-num{
    display:block;
    font-size:1.6rem;
    font-weight:700;
    background:linear-gradient(135deg,#60a5fa,#a78bfa);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}

.crm-stat-label{
    font-size:.78rem;
    color:#64748b;
    margin-top:2px;
    display:block;
}

.crm-preview-leads{
    display:flex;
    flex-direction:column;
    padding:8px 0;
}

.crm-lead-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:11px 18px;
    border-bottom:1px solid rgba(255,255,255,.04);
    transition:background .2s;
}

.crm-lead-row:hover{
    background:rgba(255,255,255,.03);
}

.crm-lead-row:last-child{border-bottom:none;}

.crm-lead-info{
    display:flex;
    align-items:center;
    gap:10px;
}

.crm-lead-dot{
    width:9px;
    height:9px;
    border-radius:50%;
    flex-shrink:0;
}

.crm-lead-dot.new{background:#4ade80;box-shadow:0 0 6px #4ade80;}
.crm-lead-dot.contacted{background:#fbbf24;box-shadow:0 0 6px #fbbf24;}
.crm-lead-dot.done{background:#60a5fa;box-shadow:0 0 6px #60a5fa;}

.crm-lead-name{
    font-size:.9rem;
    font-weight:500;
    color:var(--text);
}

.crm-lead-product{
    font-size:.78rem;
    color:#64748b;
    padding:2px 8px;
    background:rgba(255,255,255,.05);
    border-radius:20px;
}

.crm-lead-time{
    font-size:.78rem;
    color:#64748b;
}

.crm-lead-row.crm-lead-new{
    background:rgba(74,222,128,.04);
    border-left:2px solid #4ade80;
}

.crm-preview-footer{
    padding:16px 18px;
    display:flex;
    align-items:center;
    gap:16px;
    border-top:1px solid rgba(255,255,255,.07);
    background:rgba(255,255,255,.02);
}

.crm-admin-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 20px;
    font-size:.88rem;
}

.crm-preview-hint{
    font-size:.8rem;
    color:#64748b;
}

/* Footer */

.site-footer{
    border-top:1px solid var(--border);
    background:rgba(255,255,255,.02);
}

.footer-top{
    padding:70px 0 50px;
}

.footer-grid{
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr 1.2fr;
    gap:40px;
}

.footer-logo{
    display:inline-block;
    margin-bottom:18px;
}

.footer-logo img{
    height:52px;
    width:auto;
}

.footer-brand p{
    color:var(--text-light);
    line-height:1.7;
    font-size:.95rem;
    max-width:320px;
}

.footer-links h4,
.footer-contact h4{
    font-size:1rem;
    margin-bottom:18px;
    color:white;
}

.footer-links ul,
.footer-contact ul{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:12px;
}

.footer-links a{
    color:var(--text-light);
    text-decoration:none;
    font-size:.92rem;
    transition:color .3s, transform .3s;
}

.footer-links a:hover{
    color:#60a5fa;
    transform:translateX(4px);
}

.footer-contact li{
    display:flex;
    align-items:flex-start;
    gap:10px;
    color:var(--text-light);
    font-size:.92rem;
    line-height:1.5;
}

.footer-contact i{
    color:#60a5fa;
    margin-top:3px;
    width:16px;
}

.footer-contact a{
    color:var(--text-light);
    text-decoration:none;
    transition:color .3s;
}

.footer-contact a:hover{
    color:#60a5fa;
}

.footer-cta{
    display:inline-flex;
    margin-top:20px;
    padding:12px 22px;
    border-radius:50px;
    text-decoration:none;
    color:white;
    font-weight:600;
    font-size:.9rem;
    background:linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));
    transition:transform .3s, box-shadow .3s;
}

.footer-cta:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(37,99,235,.3);
}

.footer-bottom{
    border-top:1px solid var(--border);
    padding:22px 0;
}

.footer-bottom-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}

.footer-bottom p{
    color:#94a3b8;
    font-size:.9rem;
    margin:0;
}

.back-to-top{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    border:1px solid var(--border);
    background:rgba(255,255,255,.04);
    color:white;
    text-decoration:none;
    transition:all .3s;
    opacity:0;
    visibility:hidden;
    transform:translateY(8px);
}

.back-to-top.visible{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.back-to-top:hover{
    background:rgba(96,165,250,.15);
    border-color:rgba(96,165,250,.4);
    color:#60a5fa;
    transform:translateY(-3px);
}

/* Responsive */

@media(max-width:991px){

.hero{
    grid-template-columns:1fr;
    text-align:center;
    padding-top:150px;
}

.hero-buttons{
    justify-content:center;
}

.hero h1{
    font-size:3rem;
}

.nav-menu{
    position:fixed;
    top:85px;
    left:0;
    width:100%;
    background:rgba(5,8,22,.96);
    border-bottom:1px solid var(--border);
    padding:20px 5% 24px;
    transform:translateY(-120%);
    opacity:0;
    visibility:hidden;
    transition:transform .35s, opacity .35s, visibility .35s;
}

.nav-menu.open{
    transform:translateY(0);
    opacity:1;
    visibility:visible;
}

.nav-menu ul{
    flex-direction:column;
    gap:6px;
}

.nav-link{
    display:block;
    width:100%;
}

.nav-toggle{
    display:flex;
}

.nav-cta{
    display:none;
}

.mobile-nav-cta{
    display:inline-flex;
    margin-top:14px;
    width:100%;
    justify-content:center;
}

.footer-grid{
    grid-template-columns:1fr 1fr;
    gap:30px;
}

.contact-wrapper{
    grid-template-columns:1fr;
}

.form-row{
    grid-template-columns:1fr;
}

.solutions-toolbar{
    flex-direction:column;
    align-items:stretch;
}

.solution-filters{
    justify-content:center;
}

.solutions-count{
    text-align:center;
}

.crm-hub-layout{
    grid-template-columns:1fr;
    gap:40px;
}

.crm-preview-card{
    transform:none;
}

}

@media(max-width:640px){

.footer-grid{
    grid-template-columns:1fr;
}

.footer-bottom-inner{
    flex-direction:column;
    text-align:center;
}

}