.elementor-34200 .elementor-element.elementor-element-c7e89af{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}body.elementor-page-34200:not(.elementor-motion-effects-element-type-background), body.elementor-page-34200 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}/* Start custom CSS */:root{
    --bg: #030305; /* Fundo mais escuro */
    --bg-soft: #08080a;
    --card: #101014; /* Cor de fundo dos cards */
    --border: rgba(255, 255, 255, 0.1); /* Borda mais visível */
    --grid: rgba(255, 255, 255, 0.03); /* Linhas de grade mais sutis */
    --text: #fff;
    --muted: #c0c0c8;
    --sub: #8b8b94;
    
    /* Paleta de Cores AlphaSignage */
    --alpha-blue-dark: #213754;
    --alpha-blue-medium: #2D5386;
    --alpha-blue-light: #2C5184;
    --alpha-blue-lighter: #294E80;
    --alpha-blue-lightest: #284D7F;
    --alpha-gray-blue: #40526B;

    /* Cores de Destaque (Accent) - Usando a paleta fornecida */
    --accent-primary: var(--alpha-blue-medium); /* #2D5386 - Cor principal para botões, etc. */
    --accent-primary-hover: #3a68a5; /* Um tom um pouco mais claro para hover */
    --accent-secondary: var(--alpha-blue-dark); /* #213754 - Cor secundária para detalhes */
    
    --shadow-primary: 0 0 15px rgba(45, 83, 134, 0.4); /* Sombra baseada no accent-primary */
    --shadow-soft: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* RESET E BASE */
*{margin:0;padding:0;box-sizing:border-box}
body{
    font-family: 'Inter', system-ui, sans-serif;
    color: var(--text);
    background-color: var(--bg);
    background-image: 
        linear-gradient(to right, var(--grid) 1px, transparent 1px),
        linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
    background-size: 40px 40px;
    min-height: 100vh;
    overflow-x: hidden;
}

.container{max-width:1200px;margin:auto;padding:0 24px}
section{padding:120px 0}
h1,h2,h3{font-weight:800;line-height:1.2}
h2{font-size:clamp(32px, 3.5vw, 48px);margin-bottom:24px;}
h3{font-size:clamp(24px, 2.5vw, 32px);margin-bottom:16px;}
p{line-height:1.8;color:var(--muted);font-size:1.1rem;}
a{text-decoration:none;color:inherit}

/* COMPONENTES GERAIS */
.tag{
    font-size: 14px;
    letter-spacing: .3em;
    color: var(--accent-primary);
    margin-bottom: 16px;
    text-transform: uppercase;
    font-weight: 600;
}

.cta{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    background: var(--accent-primary);
    border-radius: 10px;
    font-weight: 700;
    color: var(--text);
    box-shadow: var(--shadow-primary);
    transition: all .3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.cta:hover{
    background: var(--accent-primary-hover);
    box-shadow: 0 0 25px rgba(45, 83, 134, 0.6);
    transform: translateY(-2px);
}

/* HERO */
.hero{min-height:90vh;display:flex;align-items:center}
.hero-grid{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap: 80px;
    align-items: center;
}
.logo-placeholder { margin-bottom: 10px; }
.hero h1{
    font-size: clamp(40px, 5vw, 64px);
    margin-bottom: 24px;
    background: linear-gradient(90deg, #ffffff, var(--muted));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.hero p{ font-size: 1.3rem; margin-bottom: 40px; }

.hero-visual, .video{
    height: 480px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sub);
    font-weight: 600;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}

/* CHANNELS BOX */
.channels-box{
    margin-top: 32px;
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--bg-soft);
    max-width: 520px;
    box-shadow: var(--shadow-soft);
}
.channels-title{ font-size: 16px; font-weight: 700; margin-bottom: 16px; color: var(--text); }
.channels-list{display:flex;gap:30px;flex-wrap:wrap}
.channel-item{ display:flex; align-items:center; gap: 8px; font-size: 16px; color: var(--muted); font-weight: 500; transition: color 0.3s; }
.channel-item:hover{color: var(--accent-primary);}
.channel-item i{ width: 20px; height: 20px; color: var(--accent-primary); transition: transform 0.3s; }
.channel-item:hover i{ transform: scale(1.1); color: var(--accent-primary-hover); }

/* BULLETS SECTION */
.bullets-section { background-color: var(--bg-soft); padding: 120px 0; }
.section-title-highlight { text-align: center; font-size: clamp(32px, 3.5vw, 48px); margin-bottom: 60px; }
.text-center { text-align: center; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 30px; }

.bullet{
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 36px;
    font-weight: 600;
    font-size: 1.2rem;
    text-align: center;
    transition: all 0.3s ease;
    color: var(--text);
}
.bullet:hover{ border-color: var(--accent-primary); box-shadow: var(--shadow-primary); transform: translateY(-5px); }
.bullet i { font-size: 36px; color: var(--accent-primary); margin-bottom: 10px; display: block; }

/* BENEFITS GRID */
.benefits-grid { grid-auto-rows: 1fr; justify-content: center; }
.benefits-grid .bullet { height: 100%; display: flex; flex-direction: column; justify-content: flex-start; }
.benefits-grid .bullet strong { font-size: 1.2rem; display: block; margin-bottom: 8px; }
.benefits-grid .bullet p { font-size: 1rem; line-height: 1.5; color: var(--muted); }

/* FEATURES TABS */
.tabs-header{text-align:center;margin-bottom:60px}
.tabs-nav{ display:flex; gap: 20px; justify-content:center; flex-wrap:wrap; margin-bottom: 60px; }
.tab-btn{
    padding: 14px 28px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-soft);
    color: var(--muted);
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
}
.tab-btn:hover{ border-color: var(--accent-primary); color: var(--accent-primary); }
.tab-btn.active{ background: var(--accent-primary); color: var(--text); border-color: var(--accent-primary); box-shadow: var(--shadow-primary); }

.tab-content{ display:none; max-width: 1100px; margin: auto; background: var(--card); border: 1px solid var(--border); border-radius: 24px; padding: 60px; box-shadow: var(--shadow-soft); }
.tab-content.active{display:block}
.tab-content-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 60px; align-items: center; }
.tab-content-grid.reverse-grid { grid-template-columns: 1fr 1.5fr; }
.tab-content-grid h3 { font-size: 2.2rem; margin-bottom: 20px; color: var(--accent-primary); }
.tab-content-grid p { font-size: 1.1rem; margin-bottom: 30px; }
.tab-visual { height: 350px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 16px; display: flex; align-items: center; justify-content: center; color: var(--sub); font-weight: 500; box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5); }
.tab-content ul{ margin-top: 30px; list-style: none; padding-left: 0; }
.tab-content ul li{ padding: 12px 0; border-bottom: 1px dashed rgba(255, 255, 255, 0.08); color: var(--muted); position: relative; padding-left: 30px; font-size: 1.05rem; }
.tab-content ul li::before { content: '»'; color: var(--accent-primary); font-weight: 900; position: absolute; left: 0; }

/* FINAL CTA */
.final{ background: var(--bg-soft); text-align:center; padding: 100px 0; border-top: 1px solid var(--border); }
.final-grid { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; }
.final-text h2 { margin-bottom: 0; }
.final-text p { margin-bottom: 0; }
.final-cta-buttons { display: flex; gap: 20px; }
.cta.secondary { background: none; border: 2px solid var(--accent-primary); box-shadow: none; }
.cta.secondary:hover { background: var(--accent-primary); color: var(--text); box-shadow: var(--shadow-primary); }

/* RESPONSIVIDADE */
@media(max-width: 1024px){
    .final-grid { grid-template-columns: 1fr; }
    .hero-grid, .tab-content-grid, .tab-content-grid.reverse-grid, .final-grid { grid-template-columns: 1fr; gap: 60px; }
    .hero-visual, .tab-visual { height: 350px; }
    .final-grid { flex-direction: column; text-align: center; gap: 40px; }
    .final-cta-buttons { flex-direction: column; width: 100%; }
    .final-cta-buttons .cta { width: 100%; justify-content: center; }
    section{ padding: 80px 0; }
}

@media(max-width: 600px){
    .container{ padding: 0 16px; }
    .hero h1{ font-size: 2.8rem; }
    .grid-3 { grid-template-columns: 1fr; }
    .tab-content{ padding: 30px; }
}/* End custom CSS */