/* ===== Theme Variables ===== */
:root, [data-theme="light"] {
    --bg-body: #f3f6f8;
    --bg-section: #ffffff;
    --bg-section-alt: #e8eef1;
    --bg-card: #ffffff;
    --bg-card-hover: #ecfeff;
    --bg-surface: #f1f7f9;
    --bg-overlay: rgba(255,255,255,0.85);
    --bg-navbar: rgba(255,255,255,0.95);
    --bg-topbar: rgba(255,255,255,0.92);
    --bg-dropdown: rgba(255,255,255,0.97);
    --bg-modal: #ffffff;
    --bg-footer: #0a0a0f;
    --text-primary: #0b1220;
    --text-secondary: #334155;
    --text-muted: #64748b;
    --text-inverse: #ffffff;
    --border-color: rgba(15,23,42,0.12);
    --border-hover: rgba(6,182,212,0.45);
    --accent: #0891b2;
    --accent2: #0e7490;
    --shadow: rgba(15,23,42,0.08);
    --shadow-lg: rgba(15,23,42,0.14);
    /* SOC image */
    --soc-overlay-top: rgba(255,255,255,0.1);
    --soc-overlay-mid: rgba(0,0,0,0.2);
    --soc-overlay-bot: rgba(0,0,0,0.6);
    --soc-img-brightness: 0.95;
    /* CTI */
    --cti-bg: #f4f6fa;
    --cti-box-bg: rgba(255,255,255,0.9);
    --cti-box-border: rgba(0,0,0,0.06);
    --cti-map-bg: #e0e2e6;
    --cti-state-fill: #c8ccd4;
    --cti-state-stroke: #b0b6c0;
    --cti-state-hover: #bbc2cc;
    --cti-heatmap-low: #c0c6d0;
    --cti-heatmap-mid: #b0b6c4;
    --cti-heatmap-high: #a0a8b8;
    /* Platform */
    --platform-bg: #f8f9fc;
    --platform-tab-active: rgba(6,182,212,0.06);
    --platform-content-bg: linear-gradient(135deg, rgba(6,182,212,0.03), rgba(34,211,238,0.03));
    --platform-tag-bg: rgba(0,0,0,0.04);
    --platform-tag-border: rgba(0,0,0,0.08);
    /* Topbar */
    --topbar-text: #475569;
    --topbar-text-hover: #0f172a;
    --topbar-icon: #475569;
    --topbar-alert: #dc2626;
    --topbar-alert-hover: #b91c1c;
    /* Navbar */
    --nav-text: #475569;
    --nav-text-hover: #0f172a;
}

[data-theme="dark"] {
    --bg-body: #05070a;
    --bg-section: #05070a;
    --bg-section-alt: #080b10;
    --bg-card: rgba(255,255,255,0.03);
    --bg-card-hover: rgba(6,182,212,0.08);
    --bg-surface: rgba(255,255,255,0.03);
    --bg-overlay: rgba(10,10,15,0.9);
    --bg-navbar: rgba(10,10,15,0.9);
    --bg-topbar: rgba(0,0,0,0.5);
    --bg-dropdown: rgba(15,15,25,0.95);
    --bg-modal: linear-gradient(180deg, #12121f 0%, #0a0a0f 100%);
    --bg-footer: #050508;
    --text-primary: #ffffff;
    --text-secondary: rgba(255,255,255,0.6);
    --text-muted: rgba(255,255,255,0.35);
    --text-inverse: #0a0a0f;
    --border-color: rgba(255,255,255,0.08);
    --border-hover: rgba(6,182,212,0.4);
    --accent: #06b6d4;
    --accent2: #22d3ee;
    --shadow: rgba(0,0,0,0.3);
    --shadow-lg: rgba(0,0,0,0.5);
    --soc-overlay-top: rgba(10,10,15,0.7);
    --soc-overlay-mid: rgba(10,10,15,0.35);
    --soc-overlay-bot: rgba(10,10,15,0.8);
    --soc-img-brightness: 0.55;
    --cti-bg: linear-gradient(180deg, #0c0e1a 0%, #111625 50%, #0c0e1a 100%);
    --cti-box-bg: rgba(12,16,28,0.6);
    --cti-box-border: rgba(34,211,238,0.12);
    --cti-map-bg: #1a1e2a;
    --cti-state-fill: #252a38;
    --cti-state-stroke: #333a4a;
    --cti-state-hover: #2e3545;
    --cti-heatmap-low: #163040;
    --cti-heatmap-mid: #11515f;
    --cti-heatmap-high: #0e7490;
    --platform-bg: linear-gradient(180deg, #0a0a0f 0%, #0f0f1a 100%);
    --platform-tab-active: rgba(6,182,212,0.06);
    --platform-content-bg: linear-gradient(135deg, rgba(6,182,212,0.03), rgba(34,211,238,0.03));
    --platform-tag-bg: rgba(255,255,255,0.05);
    --platform-tag-border: rgba(255,255,255,0.08);
    /* Topbar */
    --topbar-text: rgba(255,255,255,0.85);
    --topbar-text-hover: #ffffff;
    --topbar-icon: #ffffff;
    --topbar-alert: #ff4d4d;
    --topbar-alert-hover: #ff6b6b;
    /* Navbar */
    --nav-text: rgba(255,255,255,0.85);
    --nav-text-hover: #ffffff;
}

/* Theme toggle button */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 4px 8px;
    cursor: pointer;
    color: var(--text-muted);
    transition: color 0.25s, border-color 0.25s;
}
.theme-toggle:hover {
    color: var(--accent);
    border-color: var(--border-hover);
}

/* Show moon in dark mode, sun in light mode */
.theme-icon-sun { display: none; }
.theme-icon-moon { display: none; }
[data-theme="dark"] .theme-icon-moon { display: block; }
[data-theme="light"] .theme-icon-sun { display: block; }
:root:not([data-theme]) .theme-icon-sun { display: block; }

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

body {
    font-family: 'General Sans', sans-serif;
    background-color: var(--bg-body);
    color: var(--text-primary);
    overflow-x: hidden;
    min-height: 100vh;
    transition: background-color 0.4s, color 0.4s;
}

html {
    scroll-behavior: smooth;
    /* Reserva o espaco da scrollbar sempre, mesmo quando ela some
       (ex: body overflow:hidden ao abrir modal). Evita o "shift" pra direita. */
    scrollbar-gutter: stable;
}

/* ===== Video Background ===== */
.video-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
}

.bg-video {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        180deg,
        rgba(10, 10, 15, 0.6) 0%,
        rgba(10, 10, 15, 0.4) 50%,
        rgba(10, 10, 15, 0.8) 100%
    );
}

/* ===== Main Content ===== */
.main-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* ===== Container ===== */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
}

/* ===== Top Bar ===== */
.topbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 101;
    background: var(--bg-topbar);
    border-bottom: 1px solid var(--border-color);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.topbar-inner {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 6px 80px;
    max-width: 100%;
}

.topbar-left {
    display: none;
}

.topbar-link {
    color: var(--topbar-text);
    font-size: 11px;
    font-weight: 500;
    text-decoration: none;
    padding: 3px 8px;
    border-radius: 4px;
    transition: color 0.25s, background-color 0.25s;
    display: flex;
    align-items: center;
    gap: 5px;
}

.topbar-link svg {
    color: var(--topbar-icon);
}

.topbar-link:hover {
    color: var(--topbar-text-hover);
    background: var(--bg-surface);
}

.topbar-link-alert {
    color: var(--topbar-alert);
}

.topbar-link-alert:hover {
    color: var(--topbar-alert-hover);
    background: rgba(239, 68, 68, 0.08);
}

.topbar-sep {
    color: var(--topbar-text);
    opacity: 0.3;
    font-size: 11px;
    user-select: none;
}

/* Language Selector */
.topbar-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

.topbar-lang {
    position: relative;
}

.topbar-lang-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px;
    padding: 4px 10px;
    color: var(--topbar-text);
    font-size: 11px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: color 0.25s, border-color 0.25s, background 0.25s;
}

[data-theme="light"] .topbar-lang-btn,
:root .topbar-lang-btn {
    border-color: var(--border-color);
}

.topbar-lang-btn:hover {
    color: var(--topbar-text-hover);
    border-color: var(--border-hover);
    background: var(--bg-surface);
}

.topbar-lang-chevron {
    transition: transform 0.25s;
}

.topbar-lang-dropdown.active + .topbar-lang-btn .topbar-lang-chevron.topbar-lang-btn:focus .topbar-lang-chevron {
    transform: rotate(180deg);
}

.topbar-lang-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--bg-dropdown);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 4px;
    min-width: 140px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.25s, visibility 0.25s, transform 0.25s;
    z-index: 300;
    box-shadow: 0 12px 32px var(--shadow-lg);
}

.topbar-lang-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.topbar-lang-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    transition: background 0.2s, color 0.2s;
}

.topbar-lang-option:hover {
    background: rgba(6, 182, 212, 0.12);
    color: var(--text-primary);
}

.topbar-lang-option.active {
    color: var(--accent);
}

.topbar-lang-label {
    color: var(--text-muted);
    font-weight: 400;
    font-size: 11px;
}

.flag-emoji {
    font-size: 14px;
    line-height: 1;
}

/* ===== Navbar ===== */
.navbar {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 32px;
    padding: 12px 56px;
    position: fixed;
    top: 30px;
    left: 0;
    z-index: 100;
    transition: background-color 0.4s ease, backdrop-filter 0.4s ease, box-shadow 0.4s ease;
}

.navbar-scrolled {
    background-color: var(--bg-navbar);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid var(--ds-color-border-brand, rgba(6,182,212,0.35));
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
}

/* Botao Incidente: escondido no desktop, so aparece no mobile (override em @media abaixo) */
.navbar .nav-incident-btn { display: none; }

/* Split header: left group | centered logo | right group */
.nav-side {
    display: flex;
    align-items: center;
    min-width: 0;
}
.nav-side--left  { justify-self: start; }
.nav-side--right { justify-self: end; gap: 14px; }

.nav-left {
    display: flex;
    align-items: center;
    gap: 48px;
}

/* Logo */
.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: opacity 0.3s;
}

.logo-link:hover {
    opacity: 0.85;
}

.logo-link--center {
    justify-self: center;
    position: relative;
}

.logo-frame {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 24px;
}

.logo-frame::before,
.logo-frame::after {
    content: '';
    position: absolute;
    width: 13px;
    height: 13px;
    border-color: var(--ds-hud-bracket, rgba(34,211,238,0.55));
    border-style: solid;
    border-width: 0;
    transition: width 0.32s cubic-bezier(0.22,1,0.36,1), height 0.32s cubic-bezier(0.22,1,0.36,1);
}
.logo-frame::before { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.logo-frame::after  { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }
.logo-link--center:hover .logo-frame::before,
.logo-link--center:hover .logo-frame::after { width: 22px; height: 22px; }

.logo-img {
    height: 40px;
    width: auto;
    display: block;
    filter: drop-shadow(0 0 10px rgba(34,211,238,0.22));
}

/* Nav Links */
.nav-links {
    display: flex;
    align-items: center;
    gap: 6px;
}

.nav-link {
    position: relative;
    color: var(--nav-text);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    padding: 10px 16px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: color 0.3s, background-color 0.3s;
}

/* Text scramble style */
.nav-link-text {
    position: relative;
    z-index: 2;
    display: inline-block;
    white-space: nowrap;
}

.nav-link-glow {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #06b6d4, #22d3ee);
    border-radius: 2px;
    transition: width 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 1;
}

.nav-link:hover {
    color: var(--nav-text-hover);
    background-color: var(--bg-surface);
}

.nav-link:hover .nav-link-glow {
    width: 60%;
}

.nav-chevron {
    transition: transform 0.3s ease;
    margin-left: -2px;
    z-index: 2;
}

/* Dropdown Container */
.nav-item-dropdown {
    position: relative;
}

.nav-item-dropdown:hover .nav-chevron {
    transform: rotate(180deg);
}

.nav-item-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

/* Dropdown Menu */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
                transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
                visibility 0.3s;
    z-index: 200;
    padding-top: 12px;
}

.dropdown-inner {
    background: var(--bg-dropdown);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--border-hover);
    border-radius: 16px;
    padding: 8px;
    min-width: 280px;
    box-shadow: 0 20px 60px var(--shadow-lg),
                0 0 40px rgba(6, 182, 212, 0.08);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--text-secondary);
    transition: background-color 0.25s, color 0.25s, transform 0.25s;
}

.dropdown-item:hover {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.15), rgba(34, 211, 238, 0.1));
    color: var(--text-primary);
    transform: translateX(4px);
}

.dropdown-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.15), rgba(34, 211, 238, 0.15));
    border: 1px solid rgba(6, 182, 212, 0.15);
    color: var(--accent);
    flex-shrink: 0;
    transition: border-color 0.25s, box-shadow 0.25s;
}

.dropdown-item:hover .dropdown-icon {
    border-color: rgba(6, 182, 212, 0.4);
    box-shadow: 0 0 16px rgba(6, 182, 212, 0.2);
}

.dropdown-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dropdown-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.dropdown-desc {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 400;
}

/* ===== Platform Dropdown - Elegant Cards ===== */
.nav-platform-dropdown:hover .platform-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.platform-menu {
    position: absolute;
    top: 100%;
    left: 0;
    transform: translateY(10px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.35s;
    z-index: 200;
    padding-top: 12px;
}

.nav-platform-dropdown:hover .platform-menu {
    transform: translateY(0);
}

.platform-menu-inner {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: linear-gradient(165deg, rgba(12,10,28,0.97) 0%, rgba(8,6,22,0.99) 100%);
    backdrop-filter: blur(32px) saturate(1.4);
    -webkit-backdrop-filter: blur(32px) saturate(1.4);
    border: 1px solid rgba(6,182,212,0.18);
    border-radius: 16px;
    padding: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.55),
                0 0 60px rgba(6,182,212,0.06),
                inset 0 1px 0 rgba(255,255,255,0.05);
    position: relative;
    overflow: hidden;
    width: 580px;
}

/* Linha decorativa superior */
.platform-menu-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(6,182,212,0.5), rgba(34,211,238,0.3), transparent);
    z-index: 1;
}

/* Divisor vertical entre cards */
.plat-divider {
    width: 1px;
    margin: 8px 0;
    background: linear-gradient(180deg, transparent, rgba(6,182,212,0.2), rgba(34,211,238,0.15), transparent);
    flex-shrink: 0;
}

/* ---- Card de Plataforma ---- */
.plat-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    border-radius: 12px;
    padding: 10px;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.plat-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    border: 1px solid transparent;
    transition: border-color 0.3s;
}

.plat-card:hover {
    background: rgba(6,182,212,0.06);
    transform: translateY(-2px);
}

.plat-card:hover::before {
    border-color: rgba(6,182,212,0.15);
}

/* Imagem da Plataforma */
.plat-card-img {
    position: relative;
    width: 100%;
    height: 120px;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(6,182,212,0.08), rgba(34,211,238,0.06));
    margin-bottom: 12px;
}

.plat-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.plat-card:hover .plat-card-img img {
    transform: scale(1.05);
}

/* Fallback quando imagem não carrega */
.plat-card-img--fallback {
    display: flex;
    align-items: center;
    justify-content: center;
}

.plat-card-img--fallback::after {
    content: '';
    width: 40px;
    height: 40px;
    border: 2px solid rgba(6,182,212,0.3);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(6,182,212,0.1), rgba(34,211,238,0.08));
}

/* Shine effect brilho diagonal que passa ao hover */
.plat-card-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.06) 45%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.06) 55%, transparent 60%);
    transition: none;
    z-index: 2;
}

.plat-card:hover .plat-card-shine {
    animation: platShine 0.7s ease forwards;
}

@keyframes platShine {
    0% { left: -100%; }
    100% { left: 150%; }
}

/* Info da plataforma */
.plat-card-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 4px;
}

/* Badge */
.plat-card-badge {
    display: inline-flex;
    align-self: flex-start;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 20px;
}

.plat-badge-sec365 {
    background: linear-gradient(135deg, rgba(6,182,212,0.2), rgba(34,211,238,0.15));
    color: #67e8f9;
    border: 1px solid rgba(6,182,212,0.25);
}

.plat-badge-crowd {
    background: linear-gradient(135deg, rgba(249,115,22,0.15), rgba(239,68,68,0.1));
    color: #fb923c;
    border: 1px solid rgba(249,115,22,0.2);
}

/* Nome */
.plat-card-name {
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    letter-spacing: -0.3px;
    transition: color 0.3s;
}

.plat-card-name sup {
    font-size: 9px;
    color: #06b6d4;
}

.plat-card:hover .plat-card-name {
    background: linear-gradient(90deg, #67e8f9, #67e8f9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Descrição */
.plat-card-desc {
    font-size: 12px;
    line-height: 1.5;
    color: rgba(255,255,255,0.5);
    margin: 0;
}

/* CTA */
.plat-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(6,182,212,0.6);
    margin-top: 4px;
    transition: all 0.3s;
}

.plat-card-cta svg {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.plat-card:hover .plat-card-cta {
    color: #06b6d4;
}

.plat-card:hover .plat-card-cta svg {
    transform: translateX(4px);
}

/* ===== Mega Menu - Two-Column Elegant ===== */
.nav-mega-dropdown:hover .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    transform: translateY(10px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.3s;
    z-index: 200;
    padding-top: 8px;
}

.mega-inner {
    display: flex;
    background: linear-gradient(165deg, rgba(12,10,28,0.97) 0%, rgba(8,6,22,0.99) 100%);
    backdrop-filter: blur(32px) saturate(1.4);
    -webkit-backdrop-filter: blur(32px) saturate(1.4);
    border: 1px solid rgba(6,182,212,0.18);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.55),
                0 0 60px rgba(6,182,212,0.06),
                inset 0 1px 0 rgba(255,255,255,0.05);
    position: relative;
}

/* Linha decorativa superior */
.mega-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(6,182,212,0.5), rgba(34,211,238,0.3), transparent);
    z-index: 1;
}

/* ---- Coluna Esquerda: Categorias em caixas ---- */
.mega-col-cats {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px;
    background: rgba(0,0,0,0.2);
    border-right: 1px solid rgba(6,182,212,0.1);
    min-width: 210px;
}

.mega-cat {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    text-decoration: none;
    color: inherit;
}

.mega-cat svg {
    color: rgba(255,255,255,0.3);
    flex-shrink: 0;
    transition: color 0.25s;
}

.mega-cat span {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: rgba(255,255,255,0.5);
    transition: color 0.25s;
    white-space: nowrap;
}

.mega-cat:hover {
    background: rgba(6,182,212,0.08);
}

.mega-cat:hover svg {
    color: rgba(6,182,212,0.7);
}

.mega-cat:hover span {
    color: rgba(255,255,255,0.8);
}

/* Categoria ativa */
.mega-cat.active {
    background: linear-gradient(135deg, rgba(6,182,212,0.15), rgba(34,211,238,0.08));
    border: 1px solid rgba(6,182,212,0.2);
}

.mega-cat.active svg {
    color: #06b6d4;
}

.mega-cat.active span {
    color: #fff;
}

/* Indicador lateral da categoria ativa */
.mega-cat.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20%;
    bottom: 20%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, #06b6d4, #22d3ee);
}

/* ---- Coluna Direita: Itens empilhados ---- */
.mega-col-items {
    flex: 1;
    padding: 12px 20px;
    min-width: 300px;
}

.mega-panel {
    display: none;
    flex-direction: column;
    gap: 2px;
    animation: megaFadeIn 0.25s ease;
}

.mega-panel.active {
    display: flex;
}

@keyframes megaFadeIn {
    from { opacity: 0; transform: translateX(6px); }
    to { opacity: 1; transform: translateX(0); }
}

.mega-item {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    border-radius: 10px;
    text-decoration: none;
    color: rgba(255,255,255,0.65);
    font-size: 13.5px;
    font-weight: 400;
    letter-spacing: 0.2px;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.mega-item-text {
    position: relative;
    z-index: 2;
}

/* Glow underline animado igual ao menu principal */
.mega-item-glow {
    position: absolute;
    bottom: 4px;
    left: 14px;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #06b6d4, #22d3ee);
    border-radius: 2px;
    transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.mega-item:hover {
    color: #fff;
    background: rgba(6,182,212,0.08);
}

.mega-item:hover .mega-item-glow {
    width: 50%;
}

/* Nav Right */
.nav-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Portal Button */
.portal-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 10px 24px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--nav-text-hover);
    font-size: 14px;
    font-weight: 500;
    overflow: hidden;
    border: 1px solid rgba(6, 182, 212, 0.35);
    transition: border-color 0.4s, box-shadow 0.4s, transform 0.25s;
}

.portal-btn-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.2), rgba(34, 211, 238, 0.15));
    opacity: 1;
    transition: opacity 0.4s;
    z-index: 0;
}

.portal-btn:hover .portal-btn-bg {
    opacity: 0;
}

.portal-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #06b6d4, #22d3ee);
    opacity: 0;
    transition: opacity 0.4s;
    z-index: 0;
}

.portal-btn:hover::before {
    opacity: 1;
}

.portal-btn:hover {
    border-color: transparent;
    box-shadow: 0 0 28px rgba(6, 182, 212, 0.35), 0 0 8px rgba(34, 211, 238, 0.2);
    transform: translateY(-1px);
}

.portal-btn-text {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Mobile Menu Button */
.mobile-menu-btn {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
}

.mobile-menu-btn span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--nav-text-hover);
    border-radius: 2px;
    transition: 0.3s;
}

/* Mobile Nav */
.mobile-nav {
    display: none;
    position: fixed;
    top: 66px;
    left: 0;
    width: 100%;
    background: var(--bg-overlay);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    padding: 16px 24px 24px;
    flex-direction: column;
    gap: 4px;
    z-index: 99;
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 20px 40px var(--shadow-lg);
}

.mobile-nav.active {
    display: flex;
}

.mobile-nav-link {
    color: var(--text-secondary);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    padding: 12px 16px;
    border-radius: 10px;
    transition: background-color 0.25s, color 0.25s;
}

.mobile-nav-link:hover {
    background: rgba(6, 182, 212, 0.12);
    color: var(--text-primary);
}

.mobile-nav-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mobile-nav-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(6, 182, 212, 0.7);
    padding: 12px 16px 4px;
}

.mobile-nav-sub {
    padding-left: 32px;
    font-size: 14px;
    color: var(--text-muted);
}

/* ===== Mobile Nav v2 — animations ===== */
@keyframes mn-slide-in {
    from { opacity: 0; transform: translateY(-12px); filter: blur(4px); }
    to   { opacity: 1; transform: translateY(0);     filter: blur(0); }
}
@keyframes mn-row-in {
    from { opacity: 0; transform: translateX(-14px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes mn-row-in-nested {
    from { opacity: 0; transform: translateX(10px); }
    to   { opacity: 1; transform: translateX(0); }
}
.mobile-nav.active .mobile-nav-inner {
    animation: mn-slide-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.mobile-nav.active .mobile-nav-inner > * {
    opacity: 0;
    animation: mn-row-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.mobile-nav.active .mobile-nav-inner > *:nth-child(1) { animation-delay: 60ms; }
.mobile-nav.active .mobile-nav-inner > *:nth-child(2) { animation-delay: 110ms; }
.mobile-nav.active .mobile-nav-inner > *:nth-child(3) { animation-delay: 160ms; }
.mobile-nav.active .mobile-nav-inner > *:nth-child(4) { animation-delay: 210ms; }
.mobile-nav.active .mobile-nav-inner > *:nth-child(5) { animation-delay: 260ms; }
.mobile-nav.active .mobile-nav-inner > *:nth-child(6) { animation-delay: 310ms; }
.mobile-nav.active .mobile-nav-inner > *:nth-child(7) { animation-delay: 360ms; }
.mobile-nav.active .mobile-nav-inner > *:nth-child(8) { animation-delay: 410ms; }

/* Quando accordion abre, items internos entram em stagger */
.mn-acc.open > .mn-acc-body > * {
    opacity: 0;
    animation: mn-row-in-nested 0.32s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.mn-acc.open > .mn-acc-body > *:nth-child(1) { animation-delay: 40ms; }
.mn-acc.open > .mn-acc-body > *:nth-child(2) { animation-delay: 75ms; }
.mn-acc.open > .mn-acc-body > *:nth-child(3) { animation-delay: 110ms; }
.mn-acc.open > .mn-acc-body > *:nth-child(4) { animation-delay: 145ms; }
.mn-acc.open > .mn-acc-body > *:nth-child(5) { animation-delay: 180ms; }
.mn-acc.open > .mn-acc-body > *:nth-child(6) { animation-delay: 215ms; }
.mn-acc.open > .mn-acc-body > *:nth-child(7) { animation-delay: 250ms; }
.mn-acc.open > .mn-acc-body > *:nth-child(8) { animation-delay: 285ms; }

/* Reduz movimento se usuario preferir */
@media (prefers-reduced-motion: reduce) {
    .mobile-nav.active .mobile-nav-inner,
    .mobile-nav.active .mobile-nav-inner > *,
    .mn-acc.open > .mn-acc-body > * {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}

/* ===== Mobile Nav v2 — accordion ===== */
.mobile-nav[data-mobile-nav] {
    /* posicao e display ja vem do .mobile-nav original; aqui so refinamos */
    padding: 22px 16px 28px;
    gap: 2px;
    max-height: calc(100vh - 66px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.mobile-nav .mobile-nav-inner {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}
.mn-acc {
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
    overflow: hidden;
    border: 1px solid rgba(34, 211, 238, 0.08);
}
.mn-acc-head {
    width: 100%;
    background: transparent;
    border: 0;
    color: var(--text-primary, #e2e8f0);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    letter-spacing: 0.02em;
    transition: background-color 0.2s, color 0.2s;
}
.mn-acc-head:hover,
.mn-acc-head:focus-visible {
    background: rgba(34, 211, 238, 0.08);
    color: #22d3ee;
    outline: none;
}
.mn-acc-head--cat {
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(34, 211, 238, 0.95);
    padding: 12px 14px;
}
.mn-acc .mn-chev {
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    opacity: 0.7;
    flex-shrink: 0;
}
.mn-acc.open > .mn-acc-head .mn-chev {
    transform: rotate(180deg);
    opacity: 1;
}
.mn-acc-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    display: flex;
    flex-direction: column;
}
.mn-acc.open > .mn-acc-body {
    max-height: 2000px; /* generoso o suficiente pra qualquer accordion */
}
.mn-acc--nested.open > .mn-acc-body {
    max-height: 800px;
}
/* itens folha (links) */
.mn-leaf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    text-decoration: none;
    color: var(--text-secondary, #cbd5e1);
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.2s, color 0.2s, transform 0.15s;
}
.mn-leaf:hover,
.mn-leaf:focus-visible {
    background: rgba(34, 211, 238, 0.10);
    color: #22d3ee;
    outline: none;
}
.mn-leaf:active { transform: scale(0.99); }
.mn-leaf .mn-arr {
    opacity: 0.5;
    transition: opacity 0.2s, transform 0.2s;
}
.mn-leaf:hover .mn-arr,
.mn-leaf:focus-visible .mn-arr {
    opacity: 1;
    transform: translateX(2px);
}
.mn-leaf--top {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary, #e2e8f0);
    padding: 14px 16px;
    border: 1px solid rgba(34, 211, 238, 0.08);
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
}
.mn-leaf--top:hover { background: rgba(34, 211, 238, 0.10); }
.mn-leaf--deep {
    padding: 10px 14px 10px 30px;
    font-size: 13px;
    color: rgba(203, 213, 225, 0.85);
    position: relative;
}
.mn-leaf--deep::before {
    content: '';
    position: absolute;
    left: 18px;
    top: 50%;
    width: 6px;
    height: 1px;
    background: rgba(34, 211, 238, 0.4);
}
.mn-leaf--all {
    padding: 11px 14px 11px 18px;
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(34, 211, 238, 0.95);
    letter-spacing: 0.04em;
    border-bottom: 1px dashed rgba(34, 211, 238, 0.12);
    border-radius: 0;
    margin: 0 4px 4px;
}
.mn-acc-body--cats {
    padding: 4px;
    background: rgba(0, 0, 0, 0.2);
}
/* Categoria de Solucoes como link direto (substitui o sub-accordion) */
.mn-leaf--cat {
    padding: 12px 14px;
    margin: 2px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(34, 211, 238, 0.95);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(34, 211, 238, 0.06);
}
.mn-leaf--cat:hover,
.mn-leaf--cat:focus-visible {
    background: rgba(34, 211, 238, 0.10);
    color: #22d3ee;
    border-color: rgba(34, 211, 238, 0.25);
}
[data-theme="light"] .mn-leaf--cat {
    color: #0e7490;
    background: rgba(15, 23, 42, 0.03);
    border-color: rgba(8, 145, 178, 0.08);
}
[data-theme="light"] .mn-leaf--cat:hover {
    background: rgba(8, 145, 178, 0.10);
    color: #0e7490;
    border-color: rgba(8, 145, 178, 0.25);
}
.mn-acc--nested {
    border-radius: 8px;
    border-color: rgba(34, 211, 238, 0.06);
    margin: 2px 0;
}
.mn-acc--nested .mn-acc-body {
    background: rgba(0, 0, 0, 0.18);
}
.mn-acc--nested .mn-acc-body > * {
    margin: 0 4px;
}
/* Tema light */
[data-theme="light"] .mn-acc {
    background: rgba(15, 23, 42, 0.03);
    border-color: rgba(8, 145, 178, 0.12);
}
[data-theme="light"] .mn-acc-head { color: #0f172a; }
[data-theme="light"] .mn-acc-head:hover { background: rgba(8, 145, 178, 0.08); color: #0e7490; }
[data-theme="light"] .mn-acc-head--cat { color: #0e7490; }
[data-theme="light"] .mn-leaf { color: #475569; }
[data-theme="light"] .mn-leaf:hover { background: rgba(8, 145, 178, 0.08); color: #0e7490; }
[data-theme="light"] .mn-leaf--top { color: #0f172a; background: rgba(15, 23, 42, 0.03); border-color: rgba(8, 145, 178, 0.12); }
[data-theme="light"] .mn-leaf--deep { color: rgba(71, 85, 105, 0.95); }
[data-theme="light"] .mn-leaf--all  { color: #0e7490; }
[data-theme="light"] .mn-acc-body--cats { background: rgba(15, 23, 42, 0.04); }

/* ===== Notification Bell ===== */
.notif-bell {
    position: relative;
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 9px;
    cursor: pointer;
    color: var(--nav-text);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s, border-color 0.3s, background-color 0.3s, transform 0.25s;
}

.notif-bell:hover {
    color: var(--nav-text-hover);
    border-color: rgba(6, 182, 212, 0.5);
    background: rgba(6, 182, 212, 0.1);
    transform: translateY(-1px);
}

.notif-bell.has-notif {
    animation: bellShake 0.8s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes bellShake {
    0%   { transform: rotate(0); }
    15%  { transform: rotate(14deg); }
    30%  { transform: rotate(-12deg); }
    45%  { transform: rotate(10deg); }
    60%  { transform: rotate(-8deg); }
    75%  { transform: rotate(4deg); }
    100% { transform: rotate(0); }
}

.notif-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 10px;
    height: 10px;
    background: #ef4444;
    border-radius: 50%;
    border: 2px solid var(--bg-body);
    display: none;
}

.notif-badge.active {
    display: block;
    animation: badgePop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes badgePop {
    0%   { transform: scale(0); }
    60%  { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* ===== Notification Modal ===== */
.notif-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s, visibility 0.35s;
}

.notif-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.notif-modal-overlay.active .notif-modal {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.notif-modal {
    position: relative;
    background: var(--bg-modal);
    border: 1px solid var(--border-hover);
    border-radius: 20px;
    padding: 40px;
    max-width: 520px;
    width: 90%;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6),
                0 0 60px rgba(6, 182, 212, 0.1);
    transform: translateY(20px) scale(0.95);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.4s;
}

.notif-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 6px;
    cursor: pointer;
    color: var(--text-muted);
    transition: color 0.2s, background 0.2s;
    display: flex;
}

.notif-modal-close:hover {
    color: var(--text-primary);
    background: var(--bg-card-hover);
}

.notif-modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.notif-modal-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 12px;
    color: #ef4444;
}

.notif-modal-tag {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #ef4444;
}

.notif-modal-title {
    font-size: 22px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
    line-height: 1.3;
}

.notif-modal-body {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 12px;
}

.notif-modal-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.notif-modal-date {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
}

.notif-modal-severity {
    font-size: 12px;
    font-weight: 600;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    padding: 4px 12px;
    border-radius: 20px;
}

/* ===== Pill Buttons ===== */
.pill-btn {
    position: relative;
    display: inline-flex;
    border-radius: 9999px;
    padding: 1px;
    text-decoration: none;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}

.pill-btn:hover {
    transform: translateY(-1px);
}

.pill-btn-glow {
    border: 1px solid rgba(6, 182, 212, 0.5);
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.2), rgba(34, 211, 238, 0.2));
}

.pill-btn-glow:hover {
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.3);
}

.pill-btn-glow .pill-btn-inner {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.3), rgba(34, 211, 238, 0.3));
    color: var(--text-primary);
}

.pill-btn-light {
    border: 1px solid var(--border-color);
    background-color: var(--bg-surface);
}

.pill-btn-light:hover {
    box-shadow: 0 0 25px rgba(6, 182, 212, 0.4);
}

.pill-btn-light .pill-btn-inner {
    background: var(--text-primary);
    color: var(--bg-body);
}

.pill-btn-outline {
    border: 1px solid var(--border-color);
    background: transparent;
}

.pill-btn-outline:hover {
    border-color: rgba(6, 182, 212, 0.6);
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.2);
}

.pill-btn-outline .pill-btn-inner {
    background: transparent;
    color: var(--text-primary);
}

.pill-btn-inner {
    position: relative;
    z-index: 2;
    padding: 12px 30px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pill-glow {
    position: absolute;
    top: 0;
    left: 20%;
    width: 60%;
    height: 4px;
    background: radial-gradient(ellipse at center,
        rgba(6, 182, 212, 1) 0%,
        rgba(34, 211, 238, 0.5) 50%,
        rgba(6, 182, 212, 0) 100%);
    filter: blur(3px);
    z-index: 1;
    pointer-events: none;
}

/* ===== Hero (removed - SOC is hero) ===== */

/* Glow overlay */
.hero-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 40%,
        rgba(6, 182, 212, 0.08) 0%,
        transparent 60%);
    z-index: 2;
    pointer-events: none;
}

/* Foreground content */
.hero-fg {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 28px;
    padding: 0 24px;
    padding-top: 60px;
}

/* Badge */
.hero-badge {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.15), rgba(34, 211, 238, 0.15));
    border: 1px solid rgba(6, 182, 212, 0.3);
    border-radius: 20px;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 500;
    gap: 8px;
    opacity: 0;
    animation: fadeUp 0.8s ease forwards;
    animation-delay: 0.3s;
}

.badge-dot {
    width: 6px;
    height: 6px;
    background: #22c55e;
    border-radius: 50%;
    display: inline-block;
    animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.badge-text-dim { color: rgba(255, 255, 255, 0.6); }
.badge-text-bright { color: #ffffff; }

/* Title with glitch word reveal */
.hero-title {
    font-size: 56px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.5px;
    color: #ffffff;
    max-width: 750px;
}

.hero-word {
    display: inline-block;
    opacity: 0;
    animation: glitchReveal 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: calc(0.5s + var(--i) * 0.18s);
    position: relative;
}

@keyframes glitchReveal {
    0% {
        opacity: 0;
        transform: translateY(40px) skewX(-8deg);
        filter: blur(8px);
        color: #ef4444;
    }
    30% {
        opacity: 1;
        transform: translateY(-4px) skewX(4deg);
        filter: blur(2px);
        color: #ef4444;
        text-shadow: -3px 0 #06b6d4, 3px 0 #22d3ee;
    }
    50% {
        transform: translateY(2px) skewX(-2deg);
        filter: blur(0);
        text-shadow: -1px 0 #06b6d4, 1px 0 #22d3ee;
    }
    70% {
        color: #ffffff;
        text-shadow: 0 0 20px rgba(6, 182, 212, 0.4);
    }
    100% {
        opacity: 1;
        transform: translateY(0) skewX(0);
        filter: blur(0);
        color: #ffffff;
        text-shadow: none;
    }
}

/* Subtitle */
.hero-sub {
    max-width: 600px;
    font-size: 16px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.65;
    opacity: 0;
    animation: fadeUp 0.8s ease forwards;
    animation-delay: 1.4s;
}

@keyframes fadeUp {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Buttons */
.hero-buttons {
    display: flex;
    gap: 16px;
    align-items: center;
    opacity: 0;
    animation: fadeUp 0.8s ease forwards;
    animation-delay: 1.8s;
}

/* Scroll indicator */
.hero-scroll {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.3);
    opacity: 0;
    animation: fadeUp 0.8s ease forwards;
    animation-delay: 2.4s;
}

.hero-scroll svg {
    animation: scrollBounce 2s ease-in-out infinite;
}

@keyframes scrollBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(6px); }
}

/* ===== Bloco 2 - SOC Command Center ===== */
.soc-block {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-top: 0;
}

.main-content + .soc-block {
    /* No extra spacing needed */
}

.soc-full-image {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    overflow: hidden;
}

.soc-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    display: block;
    filter: brightness(var(--soc-img-brightness)) saturate(0.9) contrast(1.05);
}

/* SOC Hero Text */
.soc-hero-text {
    position: absolute;
    z-index: 5;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
    max-width: 720px;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.soc-hero-heading {
    font-size: 44px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.15;
    text-shadow: 0 2px 30px rgba(0,0,0,0.6);
}

.soc-cursor {
    color: #22d3ee;
    animation: cursorBlink 1s step-end infinite;
}

@keyframes cursorBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.soc-hero-sub {
    font-size: 15px;
    color: rgba(255,255,255,0.65);
    line-height: 1.65;
    max-width: 560px;
    text-shadow: 0 1px 10px rgba(0,0,0,0.5);
}

.soc-hero-buttons {
    display: flex;
    gap: 16px;
    margin-top: 8px;
}

@media (max-width: 768px) {
    .soc-hero-heading {
        font-size: 26px;
    }
    .soc-hero-sub {
        font-size: 13px;
    }
    .soc-hero-buttons {
        flex-direction: column;
        width: 100%;
    }
    .soc-hero-buttons .pill-btn {
        width: 100%;
        justify-content: center;
    }
}

.soc-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, var(--soc-overlay-top) 0%, var(--soc-overlay-mid) 25%, var(--soc-overlay-mid) 55%, var(--soc-overlay-bot) 100%),
        linear-gradient(90deg, rgba(0,0,0,0.3) 0%, transparent 25%, transparent 75%, rgba(0,0,0,0.3) 100%);
    z-index: 1;
}

/* ===== HUD Overlay ===== */
.hud {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

/* Corner Brackets */
.hud-corner {
    position: absolute;
    width: 40px;
    height: 40px;
    z-index: 3;
}
.hud-tl { top: 62px; left: 20px; border-top: 2px solid rgba(34,211,238,0.5); border-left: 2px solid rgba(34,211,238,0.5); }
.hud-tr { top: 62px; right: 20px; border-top: 2px solid rgba(34,211,238,0.5); border-right: 2px solid rgba(34,211,238,0.5); }
.hud-bl { bottom: 70px; left: 20px; border-bottom: 2px solid rgba(34,211,238,0.5); border-left: 2px solid rgba(34,211,238,0.5); }
.hud-br { bottom: 70px; right: 20px; border-bottom: 2px solid rgba(34,211,238,0.5); border-right: 2px solid rgba(34,211,238,0.5); }

/* Scan Line */
.hud-scanline {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(34,211,238,0.15) 20%, rgba(34,211,238,0.35) 50%, rgba(34,211,238,0.15) 80%, transparent 100%);
    box-shadow: 0 0 20px 4px rgba(34,211,238,0.08);
    animation: hudScan 6s ease-in-out infinite;
    z-index: 3;
}
@keyframes hudScan {
    0%, 100% { top: 5%; opacity: 0.6; }
    50% { top: 85%; opacity: 1; }
}

/* HUD Panels */
.hud-panel {
    position: absolute;
    top: 40px;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(34, 211, 238, 0.15);
    border-radius: 8px;
    padding: 16px 20px;
    min-width: 200px;
    font-family: 'General Sans', monospace;
    animation: hudFadeIn 1s ease forwards;
}
.hud-panel-left { left: 40px; top: 120px; bottom: 60px; margin: auto 0; height: max-content; max-height: calc(100% - 200px); animation-delay: 0.5s; opacity: 0; overflow-y: auto; scrollbar-width: none; }
.hud-panel-left::-webkit-scrollbar { display: none; }
.hud-panel-right { right: 40px; top: 120px; bottom: 60px; margin: auto 0; height: max-content; max-height: calc(100% - 200px); animation-delay: 0.8s; opacity: 0; overflow-y: auto; scrollbar-width: none; }
.hud-panel-right::-webkit-scrollbar { display: none; }

@keyframes hudFadeIn {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

.hud-panel-header {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    color: rgba(34, 211, 238, 0.7);
    text-transform: uppercase;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.hud-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}
.hud-dot-green {
    background: #22d3ee;
    box-shadow: 0 0 6px #22d3ee;
    animation: pulse-dot 2s ease-in-out infinite;
}
.hud-dot-blue {
    background: #22d3ee;
    box-shadow: 0 0 6px #22d3ee;
    animation: pulse-dot 2s ease-in-out infinite 0.5s;
}

.hud-data-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.hud-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 400;
}

.hud-value {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    font-variant-numeric: tabular-nums;
}
.hud-value-green { color: #22d3ee; }
.hud-value-red { color: #ef4444; }

/* HUD Group separators & labels */
.hud-group-sep {
    height: 1px;
    background: linear-gradient(90deg, rgba(34,211,238,0.15), rgba(34,211,238,0.15), transparent);
    margin: 8px 0 6px;
}

.hud-group-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(6, 182, 212, 0.8);
    margin-bottom: 4px;
}

/* Status dot (pulsing green) */
.hud-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22d3ee;
    box-shadow: 0 0 6px #22d3ee, 0 0 12px rgba(34,211,238,0.3);
    animation: statusPulse 2.5s ease-in-out infinite;
    flex-shrink: 0;
}
.hud-status-dot:nth-child(2) { animation-delay: 0.3s; }
.hud-status-dot:nth-child(4) { animation-delay: 0.6s; }
.hud-status-dot:nth-child(6) { animation-delay: 0.9s; }

@keyframes statusPulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 6px #22d3ee, 0 0 12px rgba(34,211,238,0.3); }
    50% { opacity: 0.5; box-shadow: 0 0 3px #22d3ee; }
}

/* ── HUD Indicators (replacing green dots) ── */
.hud-indicator {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255,255,255,0.75);
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.hud-indicator small {
    font-weight: 400;
    color: rgba(255,255,255,0.35);
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Sparkline (text-based animated) */
.hud-sparkline {
    font-size: 9px;
    letter-spacing: 1px;
    color: #22d3ee;
    text-shadow: 0 0 6px rgba(34,211,238,0.4);
    animation: sparkGlow 3s ease-in-out infinite;
}
@keyframes sparkGlow {
    0%, 100% { text-shadow: 0 0 6px rgba(34,211,238,0.4); }
    50% { text-shadow: 0 0 12px rgba(34,211,238,0.7), 0 0 20px rgba(34,211,238,0.2); }
}

/* Counter */
.hud-counter {
    color: rgba(255,255,255,0.8);
}
.hud-flash {
    animation: counterFlash 2s ease-in-out infinite;
}
@keyframes counterFlash {
    0%, 100% { color: rgba(255,255,255,0.8); }
    50% { color: #facc15; }
}

/* Color variants */
.hud-value-amber { color: #f59e0b !important; }

/* Mini progress bar */
.hud-minibar {
    display: flex;
    align-items: center;
    gap: 6px;
}
.hud-minibar-track {
    width: 50px;
    height: 3px;
    background: rgba(255,255,255,0.08);
    border-radius: 2px;
    overflow: hidden;
}
.hud-minibar-fill {
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg, #22d3ee, #22d3ee);
    transition: width 2s cubic-bezier(0.4, 0, 0.2, 1);
}
.hud-minibar-fill.hud-minibar-green {
    background: linear-gradient(90deg, #22d3ee, #10b981);
}
.hud-minibar-fill.hud-minibar-blue {
    background: linear-gradient(90deg, #22d3ee, #06b6d4);
}
.hud-minibar-pct {
    font-size: 9px;
    font-weight: 600;
    color: rgba(255,255,255,0.6);
    min-width: 28px;
    text-align: right;
}

/* Stars rating */
.hud-stars {
    font-size: 9px;
    color: #f59e0b;
    letter-spacing: 1px;
    text-shadow: 0 0 4px rgba(245,158,11,0.3);
}

/* Status OK badge */
.hud-status-ok {
    font-size: 9px;
    font-weight: 600;
    color: #22d3ee;
    letter-spacing: 0.5px;
}

/* Progress bars */
.hud-bar-container {
    margin-top: 8px;
}
.hud-bar-label {
    font-size: 9px;
    color: rgba(255,255,255,0.3);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}
.hud-bar-track {
    height: 3px;
    background: rgba(255,255,255,0.08);
    border-radius: 2px;
    overflow: hidden;
}
.hud-bar-fill {
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg, #22d3ee, #22d3ee);
    width: 0%;
}
.hud-bar-anim {
    animation: barFill 3s ease forwards 1.2s;
}
.hud-bar-anim2 {
    animation: barFill2 3s ease forwards 1.5s;
}
@keyframes barFill {
    0% { width: 0%; }
    100% { width: 42%; }
}
@keyframes barFill2 {
    0% { width: 0%; }
    100% { width: 67%; }
}

/* ===== Bloco 3 - SmartSEC/CTI 3-Column ===== */
.cti-section {
    background: var(--cti-bg);
    padding: 60px 40px;
    overflow: visible;
}

.cti-box {
    border: 1px solid var(--cti-box-border);
    border-radius: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    box-shadow: 0 8px 40px var(--shadow-lg);
    background: var(--cti-box-bg);
    backdrop-filter: blur(8px);
}

/* Top bar */
.cti-topbar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 24px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-color);
}

.cti-topbar-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: linear-gradient(135deg, #06b6d4, #22d3ee);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    white-space: nowrap;
}

.cti-topbar-sep {
    font-size: 16px;
    color: var(--text-primary);
    opacity: 0.15;
    white-space: nowrap;
}

.cti-topbar-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-primary);
    white-space: nowrap;
}

.cti-topbar-desc {
    font-size: 13px;
    font-weight: 400;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cti-4col {
    display: grid;
    grid-template-columns: 200px 1fr 260px 200px;
    gap: 0;
    height: 480px;
    min-width: 960px;
}

/* Legacy alias */
.cti-3col { display: none; }

.cti-col {
    border-right: 1px solid rgba(255,255,255,0.05);
    overflow: hidden;
}
.cti-col:last-child { border-right: none; }

/* Col 1 - TOP 10 Attack Origins */
.cti-col-kpi {
    padding: 8px 8px;
    display: flex;
    flex-direction: column;
    gap: 0;
    justify-content: space-between;
    overflow: hidden;
}

.cti-top10-title {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 4px 4px 6px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 2px;
}

.cti-top10-list {
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: space-evenly;
}

.cti-top10-row {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 3px 4px;
    border-radius: 4px;
    transition: background 0.2s;
}
.cti-top10-row:hover {
    background: rgba(255,255,255,0.04);
}

.cti-top10-rank {
    font-size: 7px;
    font-weight: 700;
    color: var(--text-muted);
    width: 12px;
    text-align: right;
    flex-shrink: 0;
}

.cti-top10-flag {
    font-size: 10px;
    flex-shrink: 0;
    line-height: 1;
}

.cti-top10-name {
    font-size: 8px;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 42px;
    flex-shrink: 0;
}

.cti-top10-bar {
    flex: 1;
    height: 4px;
    background: rgba(255,255,255,0.06);
    border-radius: 2px;
    overflow: hidden;
    min-width: 20px;
}

.cti-top10-fill {
    display: block;
    height: 100%;
    border-radius: 2px;
    transition: width 0.8s ease;
}

.cti-top10-pct {
    font-size: 7px;
    font-weight: 700;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    width: 22px;
    text-align: right;
    flex-shrink: 0;
}

.cti-top10-divider {
    height: 1px;
    background: rgba(255,255,255,0.06);
    margin: 4px 0 2px;
}

.cti-top10-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Col 2 - Project Highlight */
.cti-col-project {
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    background: linear-gradient(160deg, rgba(9,26,32,0.94) 0%, rgba(7,12,18,0.95) 100%);
    border: 1px solid rgba(6,182,212,0.25);
    box-shadow: inset 0 0 40px rgba(6,182,212,0.06);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    position: relative;
    overflow: hidden;
}
.cti-col-project::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #06b6d4, #22d3ee, #06b6d4);
    background-size: 200% 100%;
    animation: projectBarShimmer 3s ease-in-out infinite;
}
@keyframes projectBarShimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.cti-project-badge {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #fff;
    background: linear-gradient(135deg, #06b6d4, #22d3ee);
    padding: 6px 16px;
    border-radius: 6px;
    box-shadow: 0 0 20px rgba(6,182,212,0.4), 0 0 40px rgba(6,182,212,0.15);
    animation: badgeGlow 2.5s ease-in-out infinite alternate;
}
@keyframes badgeGlow {
    0% { box-shadow: 0 0 15px rgba(6,182,212,0.3), 0 0 30px rgba(6,182,212,0.1); }
    100% { box-shadow: 0 0 25px rgba(6,182,212,0.5), 0 0 50px rgba(6,182,212,0.2); }
}

.cti-project-icon {
    opacity: 1;
    filter: drop-shadow(0 0 12px rgba(6,182,212,0.5));
}

.cti-project-text {
    font-size: 12px;
    color: rgba(255,255,255,0.8);
    line-height: 1.6;
}

.cti-project-text strong {
    color: #fff;
    font-weight: 700;
    background: linear-gradient(135deg, #67e8f9, #67e8f9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.cti-project-partners {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-top: 4px;
}

.cti-project-tag {
    font-size: 9px;
    font-weight: 700;
    color: #67e8f9;
    background: rgba(6,182,212,0.1);
    border: 1px solid rgba(6,182,212,0.3);
    padding: 3px 10px;
    border-radius: 4px;
    transition: all 0.3s ease;
}
.cti-project-tag:hover {
    background: rgba(6,182,212,0.2);
    border-color: rgba(6,182,212,0.5);
    box-shadow: 0 0 10px rgba(6,182,212,0.2);
}

.cti-kpi {
    text-align: center;
    padding: 8px 4px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.cti-kpi-val {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.cti-kpi-unit {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
}

.cti-kpi-label {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-top: 2px;
}

.cti-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #22d3ee;
    background: rgba(34,211,238,0.06);
    border: 1px solid rgba(34,211,238,0.15);
    padding: 5px 14px;
    border-radius: 6px;
    width: fit-content;
}

.cti-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.cti-desc {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.55;
}

.cti-red { color: #ef4444; }

.cti-info-stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    margin-top: 8px;
}

.cti-info-stat {
    text-align: center;
    padding: 12px 4px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.cti-info-number {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: #22d3ee;
    font-variant-numeric: tabular-nums;
}

.cti-info-label {
    font-size: 9px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cti-info-bar { margin-top: 4px; }
.cti-info-bar-label {
    font-size: 9px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}
.cti-info-bar-track {
    height: 4px;
    background: var(--bg-surface);
    border-radius: 2px;
    overflow: hidden;
}
.cti-info-bar-fill {
    height: 100%;
    border-radius: 2px;
}

/* Col 2 - Brazil Map */
.cti-col-map {
    position: relative;
    background: var(--cti-map-bg);
    overflow: hidden;
}

#ctiSvgMap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

#ctiSvgMap .state {
    fill: var(--cti-state-fill);
    stroke: var(--cti-state-stroke);
    stroke-width: 0.8;
    transition: fill 0.4s ease, filter 0.4s ease;
    cursor: pointer;
}

#ctiSvgMap .state:hover {
    fill: var(--cti-state-hover);
    stroke: #22d3ee;
    stroke-width: 1.2;
    filter: drop-shadow(0 0 4px rgba(34,211,238,0.4));
}

#ctiSvgMap .state.under-attack {
    animation: stateFlash 0.6s ease;
}

@keyframes stateFlash {
    0% { fill: #131e35; }
    30% { fill: #3b1520; filter: drop-shadow(0 0 12px rgba(239,68,68,0.5)); }
    100% { fill: #131e35; filter: none; }
}

#ctiSvgMap .attack-arc {
    fill: none;
    stroke-linecap: round;
}

#ctiSvgMap .city-dot {
    fill: rgba(100,180,255,0.8);
}

#ctiSvgMap .city-pulse {
    fill: none;
    stroke: rgba(100,180,255,0.3);
    stroke-width: 1;
}

#ctiSvgMap .impact-ring {
    fill: none;
    stroke-width: 2;
}

/* Tooltip */
.cti-tooltip {
    position: absolute;
    z-index: 20;
    background: var(--bg-overlay);
    backdrop-filter: blur(8px);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 12px;
    color: var(--text-primary);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
    white-space: nowrap;
    font-family: 'General Sans', sans-serif;
    box-shadow: 0 4px 16px var(--shadow);
}

.cti-tooltip.visible { opacity: 1; }

.cti-tooltip-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.cti-tooltip-chart {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
}

.cti-tooltip-chart svg {
    display: block;
}

.cti-tooltip-label {
    font-size: 9px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cti-tooltip-stat {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: 11px;
    color: var(--text-secondary);
}

.cti-tooltip-val {
    color: #22d3ee;
    font-weight: 600;
}

.cti-brazil-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* Col 3 - Logs */
.cti-col-logs {
    display: flex;
    flex-direction: column;
    background: var(--bg-surface);
    overflow: hidden;
}

.cti-logs-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.cti-feed-slots {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cti-slot {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    border-bottom: 1px solid var(--border-color);
    position: relative;
    min-height: 0;
    transition: background 0.3s;
}

.cti-slot.active {
    border-left: 2px solid var(--slot-color, #22d3ee);
}

.cti-slot.cti-slot-ddos {
    border-left-width: 3px;
    animation: ddosFlicker 0.3s linear infinite;
}

@keyframes ddosFlicker {
    0%, 100% { background: transparent; }
    50% { background: rgba(239,68,68,0.04); }
}

.cti-slot.empty {
    border-left: 2px solid transparent;
}

.cti-slot-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    animation: slotIn 0.25s ease;
}

.cti-slot-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.cti-slot-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

@keyframes slotIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.cti-feed-flag {
    font-size: 16px;
    flex-shrink: 0;
    line-height: 1;
}

.cti-feed-info {
    flex: 1;
    min-width: 0;
}

.cti-feed-type {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

.cti-feed-sev {
    font-size: 8px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.cti-sev-critica { background: rgba(239,68,68,0.15); color: #ef4444; }
.cti-sev-alta { background: rgba(249,115,22,0.15); color: #f97316; }
.cti-sev-media { background: rgba(234,179,8,0.12); color: #ca8a04; }
/* Legacy */
.cti-sev-critical { background: rgba(239,68,68,0.15); color: #ef4444; }
.cti-sev-high { background: rgba(249,115,22,0.15); color: #f97316; }
.cti-sev-medium { background: rgba(234,179,8,0.12); color: #ca8a04; }

.cti-feed-timer {
    flex-shrink: 0;
    font-size: 9px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    min-width: 20px;
    text-align: right;
    opacity: 0.6;
}

/* Bottom Stats Bar */
.hud-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 20px 40px;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.7) 100%);
    animation: hudFadeIn 1s ease forwards 1s;
    opacity: 0;
}

.hud-bottom-item {
    flex: 1;
    text-align: center;
    padding: 0 24px;
}

.hud-bottom-number {
    display: block;
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
    font-family: 'General Sans', monospace;
    margin-bottom: 4px;
}

.hud-bottom-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
}

.hud-bottom-divider {
    width: 1px;
    height: 36px;
    background: rgba(255, 255, 255, 0.1);
}

/* Targeting Reticle */
.hud-reticle {
    position: absolute;
    top: 45%;
    right: 30%;
    transform: translate(50%, -50%);
}

.hud-reticle-ring {
    width: 80px;
    height: 80px;
    border: 1px solid rgba(34, 211, 238, 0.3);
    border-radius: 50%;
    position: relative;
    animation: reticlePulse 3s ease-in-out infinite;
}
.hud-reticle-ring::before {
    content: '';
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(34, 211, 238, 0.15);
    border-radius: 50%;
}
.hud-reticle-ring::after {
    content: '+';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(34, 211, 238, 0.5);
    font-size: 18px;
    font-weight: 300;
}

@keyframes reticlePulse {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.1); opacity: 1; }
}

.hud-reticle-label {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 8px;
    white-space: nowrap;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    color: rgba(34, 211, 238, 0.6);
    text-align: center;
    text-transform: uppercase;
}
.hud-reticle-label span {
    display: block;
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 1px;
    color: rgba(255,255,255,0.35);
    margin-top: 2px;
}

/* ===== Section Box reusable bordered container ===== */
.section-box {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 24px var(--shadow);
    background: var(--bg-card);
    padding: 40px;
}
.section-border-glow {
    position: absolute;
    inset: 0;
    border-radius: 16px;
    z-index: 10;
    pointer-events: none;
    padding: 1px;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    overflow: hidden;
}
.section-border-glow::before {
    content: '';
    position: absolute;
    inset: -50%;
    background: conic-gradient(
        from 0deg at 50% 50%,
        transparent 0deg,
        transparent 280deg,
        rgba(6,182,212,0.2) 300deg,
        rgba(6,182,212,0.6) 320deg,
        rgba(34,211,238,0.9) 335deg,
        rgba(255,255,255,1) 345deg,
        rgba(6,182,212,0.9) 350deg,
        rgba(34,211,238,0.6) 355deg,
        rgba(6,182,212,0.2) 360deg
    );
    animation: glowSpin 5s linear infinite;
}

/* ===== Bloco 3 - Platform Services ===== */
.platform-section {
    padding: 40px 40px;
    background: var(--platform-bg);
}

/* Platform box with animated green border */
.platform-box {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 24px var(--shadow);
    background: var(--bg-card);
}

/* Light reflection on border ::before rotating inside masked container */
.platform-border-glow {
    position: absolute;
    inset: 0;
    border-radius: 16px;
    z-index: 10;
    pointer-events: none;
    padding: 1px;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    overflow: hidden;
}

.platform-border-glow::before {
    content: '';
    position: absolute;
    inset: -50%;
    background: conic-gradient(
        from 0deg at 50% 50%,
        transparent 0deg,
        transparent 280deg,
        rgba(6,182,212,0.2) 300deg,
        rgba(6,182,212,0.6) 320deg,
        rgba(34,211,238,0.9) 335deg,
        rgba(255,255,255,1) 345deg,
        rgba(6,182,212,0.9) 350deg,
        rgba(34,211,238,0.6) 355deg,
        rgba(6,182,212,0.2) 360deg
    );
    animation: glowSpin 5s linear infinite;
}

@keyframes glowSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Platform topbar */
.platform-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 24px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-surface);
    position: relative;
    z-index: 2;
}

.platform-topbar-tag {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: linear-gradient(135deg, #06b6d4, #22d3ee);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    white-space: nowrap;
}

.platform-topbar-sep {
    font-size: 14px;
    color: var(--text-primary);
    opacity: 0.15;
}

.platform-topbar-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
}

.platform-topbar-desc {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-muted);
    line-height: 1.4;
}

.platform-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 0;
    min-height: 420px;
    position: relative;
    z-index: 2;
}

/* Tabs */
.platform-tabs {
    display: flex;
    flex-direction: column;
    background: var(--bg-surface);
    border-right: 1px solid var(--border-color);
    justify-content: stretch;
}

.platform-tab {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 56px 0 20px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--border-color);
    color: rgba(255,255,255,0.85);
    font-family: 'General Sans', sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: left;
    position: relative;
    flex: 1;
}

.platform-tab:last-child {
    border-bottom: none;
}

/* Icon wrapper glow */
.platform-tab svg {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    padding: 4px;
    border-radius: 8px;
    background: rgba(6,182,212,0.06);
    border: 1px solid rgba(6,182,212,0.1);
    transition: all 0.3s ease;
}

/* Idle animation icon color pulse to attract attention */
.platform-tab:not(.active) svg {
    animation: tabIconPulse 3s ease-in-out infinite;
    animation-delay: calc(var(--tab-idx, 0) * 0.4s);
}

@keyframes tabIconPulse {
    0%, 100% {
        stroke: var(--text-muted);
        background: rgba(6,182,212,0.06);
        border-color: rgba(6,182,212,0.1);
        box-shadow: none;
    }
    40% {
        stroke: #06b6d4;
        background: rgba(6,182,212,0.15);
        border-color: rgba(6,182,212,0.35);
        box-shadow: 0 0 10px rgba(6,182,212,0.25);
    }
    60% {
        stroke: #22d3ee;
        background: rgba(34,211,238,0.12);
        border-color: rgba(34,211,238,0.3);
        box-shadow: 0 0 10px rgba(34,211,238,0.2);
    }
}

.platform-tab:nth-child(1) { --tab-idx: 0; }
.platform-tab:nth-child(2) { --tab-idx: 1; }
.platform-tab:nth-child(3) { --tab-idx: 2; }
.platform-tab:nth-child(4) { --tab-idx: 3; }
.platform-tab:nth-child(5) { --tab-idx: 4; }
.platform-tab:nth-child(6) { --tab-idx: 5; }
.platform-tab:nth-child(7) { --tab-idx: 6; }

/* Removido: dica pulsante "click aqui" no canto das tabs (incomodava a leitura) */
.platform-tab::after,
.platform-tab:not(.active)::after,
.platform-tab.active::after {
    content: none !important;
    display: none !important;
    animation: none !important;
}

.platform-tab::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: transparent;
    border-radius: 0 4px 4px 0;
    transition: all 0.3s ease;
}

.platform-tab:hover {
    color: #f97316;
    background: linear-gradient(90deg, rgba(249,115,22,0.08) 0%, transparent 100%);
}

.platform-tab:hover svg {
    background: rgba(6,182,212,0.12);
    border-color: rgba(6,182,212,0.25);
    stroke: #06b6d4;
}

.platform-tab.active {
    color: var(--text-primary);
    background: linear-gradient(90deg, rgba(6,182,212,0.1) 0%, rgba(6,182,212,0.02) 100%);
    font-weight: 700;
}

.platform-tab.active::before {
    background: linear-gradient(180deg, #06b6d4, #22d3ee);
    box-shadow: 0 0 12px rgba(6,182,212,0.4);
}

.platform-tab.active svg {
    stroke: #fff;
    background: linear-gradient(135deg, #06b6d4, #22d3ee);
    border-color: transparent;
    box-shadow: 0 0 12px rgba(6,182,212,0.3);
}

/* Tab label styling */
.platform-tab span {
    background: linear-gradient(135deg, var(--text-muted), var(--text-muted));
    -webkit-background-clip: text;
    background-clip: text;
    transition: all 0.3s ease;
}

.platform-tab.active span {
    background: linear-gradient(135deg, #06b6d4, #22d3ee);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Panels */
.platform-content {
    position: relative;
    padding: 32px;
    background: var(--platform-content-bg);
    display: flex;
    align-items: stretch;
    justify-content: center;
    height: 420px;
    overflow: hidden;
}

/* Sol Overview Grid painel default de Soluções */
/* (Old sol-overview / fusion styles removed) */

.platform-panel {
    display: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    animation: panelFadeIn 0.4s ease;
    width: 100%;
}

.platform-panel.active {
    display: flex;
}

@keyframes panelFadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}


.platform-panel-badge {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 4px;
}

.platform-panel-title {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 6px;
}

/* ===== Default Panel Modern Card Grid ===== */
.sol-default-inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
    padding: 8px 0;
}

.sol-default-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.sol-default-icon-ring {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(6,182,212,0.18), rgba(34,211,238,0.06) 70%);
    flex-shrink: 0;
    position: relative;
    box-shadow: 0 0 24px rgba(6,182,212,0.25), inset 0 0 12px rgba(6,182,212,0.15);
}

/* ===== CrowdStrike Falcon Hero FUSION-CORE-style centerpiece ===== */
.cs-falcon-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    padding-top: 4px;
}

.cs-falcon-visual {
    position: relative;
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Concentric rotating rings */
.cs-falcon-ring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.cs-falcon-ring-1 {
    inset: 0;
    border: 1.5px solid rgba(6,182,212,0.45);
    animation: csFalconSpin 14s linear infinite;
    box-shadow: 0 0 20px rgba(6,182,212,0.18) inset;
}

.cs-falcon-ring-2 {
    inset: 22px;
    border: 1.5px dashed rgba(34,211,238,0.55);
    animation: csFalconSpin 9s linear infinite reverse;
}

.cs-falcon-ring-3 {
    inset: 42px;
    border: 1.5px solid rgba(6,182,212,0.6);
    animation: csFalconSpin 18s linear infinite;
    box-shadow: 0 0 14px rgba(6,182,212,0.25);
}

@keyframes csFalconSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Orbiting particles */
.cs-falcon-orbit {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.cs-falcon-orbit-1 {
    inset: 0;
    animation: csFalconSpin 7s linear infinite;
}

.cs-falcon-orbit-2 {
    inset: 22px;
    animation: csFalconSpin 5s linear infinite reverse;
}

.cs-falcon-dot {
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #a5f3fc;
    box-shadow:
        0 0 8px #06b6d4,
        0 0 18px rgba(6,182,212,0.7),
        0 0 28px rgba(6,182,212,0.35);
}

.cs-falcon-dot-blue {
    background: #a5f3fc;
    box-shadow:
        0 0 8px #22d3ee,
        0 0 18px rgba(34,211,238,0.7),
        0 0 28px rgba(34,211,238,0.35);
}

/* Center pill the brand core */
.cs-falcon-center {
    position: relative;
    z-index: 3;
    padding: 14px 28px;
    border-radius: 999px;
    background: linear-gradient(135deg, #06b6d4 0%, #155e75 45%, #22d3ee 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 0 30px rgba(6,182,212,0.55),
        0 0 60px rgba(34,211,238,0.25),
        inset 0 1px 1px rgba(255,255,255,0.3),
        inset 0 -1px 1px rgba(0,0,0,0.25);
    animation: csFalconPulse 3.2s ease-in-out infinite;
    overflow: hidden;
}

.cs-falcon-center::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%);
    animation: csFalconShine 4s ease-in-out infinite;
}

@keyframes csFalconPulse {
    0%, 100% {
        box-shadow:
            0 0 30px rgba(6,182,212,0.55),
            0 0 60px rgba(34,211,238,0.25),
            inset 0 1px 1px rgba(255,255,255,0.3),
            inset 0 -1px 1px rgba(0,0,0,0.25);
    }
    50% {
        box-shadow:
            0 0 45px rgba(6,182,212,0.75),
            0 0 90px rgba(34,211,238,0.45),
            inset 0 1px 1px rgba(255,255,255,0.35),
            inset 0 -1px 1px rgba(0,0,0,0.25);
    }
}

@keyframes csFalconShine {
    0% { transform: translateX(-120%); }
    60%, 100% { transform: translateX(120%); }
}

.cs-falcon-label {
    position: relative;
    z-index: 1;
    font-size: 19px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 3.5px;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
    white-space: nowrap;
}

.cs-falcon-sub {
    position: relative;
    z-index: 1;
    font-size: 9px;
    font-weight: 700;
    color: rgba(255,255,255,0.9);
    letter-spacing: 5px;
    margin-top: 5px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
    white-space: nowrap;
}

/* Caption row below the visual */
.cs-falcon-caption {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.cs-falcon-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(6,182,212,0.22), rgba(34,211,238,0.22));
    border: 1px solid rgba(6,182,212,0.4);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: #a5f3fc;
    box-shadow: 0 0 14px rgba(6,182,212,0.25);
}

.cs-falcon-tagline {
    font-size: 12px;
    color: rgba(255,255,255,0.7);
    letter-spacing: 0.3px;
}

[data-theme="light"] .cs-falcon-tagline { color: var(--text-muted); }
[data-theme="light"] .cs-falcon-badge { color: #155e75; }

.sol-default-icon-ring svg {
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 0 6px rgba(6,182,212,0.55));
}

/* Rotating rings around the icon FUSION-style */
.sol-ring {
    position: absolute;
    border-radius: 50%;
    border: 1.5px solid;
    pointer-events: none;
}

.sol-ring-1 {
    inset: -4px;
    border-color: rgba(6,182,212,0.35);
    border-style: solid;
    animation: solRingSpin 8s linear infinite;
    border-top-color: transparent;
    border-right-color: transparent;
}

.sol-ring-2 {
    inset: -10px;
    border-color: rgba(34,211,238,0.30);
    border-style: dashed;
    animation: solRingSpin 6s linear infinite reverse;
}

.sol-ring-3 {
    inset: -16px;
    border-color: rgba(6,182,212,0.18);
    border-style: solid;
    animation: solRingSpin 12s linear infinite;
    border-bottom-color: transparent;
    border-left-color: transparent;
}

@keyframes solRingSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.sol-default-title {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.3px;
    color: #fff;
}

/* Animated gradient shine flowing through the name */
.sol-title-shine {
    background: linear-gradient(
        90deg,
        #ffffff 0%,
        #ffffff 30%,
        #a5f3fc 45%,
        #a5f3fc 55%,
        #ffffff 70%,
        #ffffff 100%
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: solTitleShine 4s ease-in-out infinite;
    display: inline-block;
}

@keyframes solTitleShine {
    0% { background-position: 200% 0; }
    100% { background-position: -100% 0; }
}

.sol-default-sub {
    font-size: 12px;
    color: rgba(255,255,255,0.45);
    margin-top: 2px;
    letter-spacing: 0.3px;
}

.sol-default-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
    align-content: center;
}

.sol-default-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 12px;
    padding: 20px 12px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.sol-default-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(6,182,212,0.08), rgba(34,211,238,0.08));
    opacity: 0;
    transition: opacity 0.3s;
}

.sol-default-card:hover {
    border-color: rgba(6,182,212,0.35);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(6,182,212,0.12);
}

.sol-default-card:hover::before {
    opacity: 1;
}

.sol-default-card-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(6,182,212,0.12), rgba(34,211,238,0.12));
    color: #67e8f9;
    flex-shrink: 0;
    transition: all 0.35s ease;
    position: relative;
    z-index: 1;
}

.sol-default-card:hover .sol-default-card-icon {
    background: linear-gradient(135deg, rgba(6,182,212,0.25), rgba(34,211,238,0.25));
    color: #a5f3fc;
    box-shadow: 0 0 16px rgba(6,182,212,0.2);
    transform: translateY(-2px);
}

.sol-default-card-name {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    line-height: 1.3;
    letter-spacing: 0.2px;
    transition: color 0.3s;
    position: relative;
    z-index: 1;
}

.sol-default-card:hover .sol-default-card-name {
    color: #fff;
}

.sol-default-hint {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    margin-top: 16px;
    font-size: 11px;
    color: rgba(255,255,255,0.3);
    letter-spacing: 0.5px;
}

.sol-default-hint-pulse {
    width: 6px;
    height: 6px;
    background: #06b6d4;
    border-radius: 50%;
    animation: solPulse 2s ease-in-out infinite;
}

@keyframes solPulse {
    0%, 100% { opacity: 0.4; box-shadow: 0 0 0 0 rgba(6,182,212,0.3); }
    50% { opacity: 1; box-shadow: 0 0 0 6px rgba(6,182,212,0); }
}

/* ===== Category Panels Detail Layout (list left + desc right) ===== */
.sol-panel-top {
    display: none;
}

.sol-detail-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 0;
    flex: 1;
    min-height: 0;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.06);
}

.sol-detail-list {
    display: flex;
    flex-direction: column;
    background: rgba(0,0,0,0.2);
    border-right: 1px solid rgba(255,255,255,0.06);
}

.sol-detail-item {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 14px 16px;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.sol-detail-item:last-child {
    border-bottom: none;
}

.sol-detail-bar {
    width: 3px;
    height: 0;
    background: linear-gradient(180deg, #06b6d4, #22d3ee);
    border-radius: 2px;
    margin-right: 0;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.sol-detail-item.active .sol-detail-bar.sol-detail-item:hover .sol-detail-bar {
    height: 20px;
    margin-right: 12px;
}

.sol-detail-name {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
    transition: all 0.25s;
    line-height: 1.3;
    text-align: left;
    white-space: nowrap;
}

.sol-detail-item:hover .sol-detail-name {
    color: rgba(255,255,255,0.8);
}

.sol-detail-item.active {
    background: rgba(6,182,212,0.08);
}

.sol-detail-item.active .sol-detail-name {
    color: #e0d4ff;
}

.sol-detail-content {
    padding: 22px 28px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: relative;
    overflow: hidden;
    min-width: 0;
}

/* Fixed category header inside the detail panel */
.sol-detail-head {
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
}

.sol-detail-head-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 17px;
    font-weight: 800;
    background: linear-gradient(90deg, #a5f3fc, #a5f3fc);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 0.5px;
    line-height: 1;
}

.sol-detail-head-title::before {
    content: '';
    width: 4px;
    height: 18px;
    background: linear-gradient(180deg, #06b6d4, #22d3ee);
    border-radius: 2px;
    -webkit-text-fill-color: initial;
}

.sol-detail-head-sub {
    font-size: 12px;
    font-weight: 600;
    color: #a5f3fc;
    margin: 6px 0 6px 14px;
    letter-spacing: 0.3px;
}

.sol-detail-head-text {
    font-size: 12px;
    line-height: 1.6;
    color: rgba(255,255,255,0.55);
    margin-left: 14px;
}

.sol-detail-body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding-right: 0;
}

[data-theme="light"] .sol-detail-head { border-bottom-color: rgba(0,0,0,0.08); }
[data-theme="light"] .sol-detail-head-title {
    background: linear-gradient(90deg, #155e75, #0e7490);
    -webkit-background-clip: text;
    background-clip: text;
}
[data-theme="light"] .sol-detail-head-sub { color: #155e75; }
[data-theme="light"] .sol-detail-head-text { color: var(--text-secondary); }

/* Description blocks */
.sol-desc {
    display: none;
    animation: solDescFadeIn 0.35s ease;
}

.sol-desc.active {
    display: block;
}

@keyframes solDescFadeIn {
    from { opacity: 0; transform: translateX(10px); }
    to   { opacity: 1; transform: translateX(0); }
}

.sol-desc-title {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sol-desc-title::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 18px;
    background: linear-gradient(180deg, #06b6d4, #22d3ee);
    border-radius: 2px;
    flex-shrink: 0;
}

.sol-desc-subtitle {
    font-size: 12px;
    font-weight: 600;
    color: #a5f3fc;
    margin: 0 0 8px 0;
    letter-spacing: 0.3px;
    text-align: left;
}

.sol-desc-text {
    font-size: 13px;
    line-height: 1.7;
    color: rgba(255,255,255,0.62);
    text-align: left;
}

/* ===== Light theme overrides ===== */
[data-theme="light"] .sol-default-title { color: var(--text-primary); }
[data-theme="light"] .sol-title-shine {
    background: linear-gradient(
        90deg,
        #1a1a2e 0%,
        #1a1a2e 30%,
        #06b6d4 45%,
        #22d3ee 55%,
        #1a1a2e 70%,
        #1a1a2e 100%
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
[data-theme="light"] .sol-default-sub { color: var(--text-muted); }
[data-theme="light"] .sol-default-card {
    background: rgba(0,0,0,0.02);
    border-color: rgba(0,0,0,0.06);
}
[data-theme="light"] .sol-default-card:hover {
    border-color: rgba(6,182,212,0.25);
    box-shadow: 0 6px 20px rgba(6,182,212,0.08);
}
[data-theme="light"] .sol-default-card-name { color: var(--text-primary); }
[data-theme="light"] .sol-default-card-count { color: var(--text-muted); }
[data-theme="light"] .sol-default-card-arrow { color: rgba(0,0,0,0.15); }
[data-theme="light"] .sol-default-card:hover .sol-default-card-arrow { color: var(--accent); }
[data-theme="light"] .sol-default-hint { color: var(--text-muted); }
[data-theme="light"] .sol-detail-layout { border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .sol-detail-list {
    background: rgba(0,0,0,0.02);
    border-right-color: rgba(0,0,0,0.06);
}
[data-theme="light"] .sol-detail-item { border-bottom-color: rgba(0,0,0,0.04); }
[data-theme="light"] .sol-detail-item.active { background: rgba(6,182,212,0.05); }
[data-theme="light"] .sol-detail-name { color: var(--text-secondary); }
[data-theme="light"] .sol-detail-item:hover .sol-detail-name { color: var(--text-primary); }
[data-theme="light"] .sol-detail-item.active .sol-detail-name { color: var(--accent); }
[data-theme="light"] .sol-desc-title { color: var(--text-primary); }
[data-theme="light"] .sol-desc-text { color: var(--text-secondary); }
[data-theme="light"] .sol-desc-subtitle { color: #155e75; }

/* Topbar CTA button */
.platform-topbar-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    background: linear-gradient(135deg, #ef4444, #f97316);
    border-radius: 8px;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: all 0.3s;
    box-shadow: 0 2px 10px rgba(239,68,68,0.3);
    white-space: nowrap;
    margin-left: auto;
    flex-shrink: 0;
}

.platform-topbar-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(239,68,68,0.45);
    background: linear-gradient(135deg, #dc2626, #ea580c);
}

.platform-topbar-cta span {
    transition: transform 0.3s;
}

.platform-topbar-cta:hover span {
    transform: translateX(3px);
}

.platform-panel-actions {
    display: flex;
    gap: 16px;
    margin-top: 12px;
    align-items: center;
}

.platform-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s;
}

.platform-btn-primary:hover {
    background: rgba(6,182,212,0.15);
    border-color: rgba(6,182,212,0.3);
}

.platform-btn-primary span {
    transition: transform 0.3s;
}

.platform-btn-primary:hover span {
    transform: translateX(4px);
}

.platform-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s;
}

.platform-btn-secondary:hover {
    color: var(--accent);
}

.platform-btn-secondary span {
    transition: transform 0.3s;
}

.platform-btn-secondary:hover span {
    transform: translateX(4px);
}

@media (max-width: 768px) {
    .platform-layout {
        grid-template-columns: 1fr;
    }

    .platform-tabs {
        flex-direction: row;
        overflow-x: auto;
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.07);
    }

    .platform-tab {
        white-space: nowrap;
        padding: 14px 16px;
        font-size: 12px;
        border-bottom: none;
        border-right: 1px solid rgba(255,255,255,0.04);
    }

    .platform-tab::before {
        left: 0; right: 0; top: auto; bottom: 0;
        width: auto; height: 3px;
        border-radius: 3px 3px 0 0;
    }

    .platform-content {
        padding: 20px;
        height: auto;
        min-height: 400px;
    }

    .platform-panel-title {
        font-size: 18px;
    }

    .sol-default-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sol-detail-layout {
        grid-template-columns: 1fr;
    }

    .sol-detail-list {
        flex-direction: row;
        flex-wrap: wrap;
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.06);
    }

    .sol-detail-item {
        border-bottom: none;
        border-right: 1px solid rgba(255,255,255,0.04);
    }

    .sol-detail-content {
        padding: 16px;
    }

    .platform-topbar-cta {
        display: none;
    }

    .platform-title {
        font-size: 26px;
    }
}

/* ===== Certificações Marquee ===== */
.certs-section {
    padding: 60px 40px;
    background: var(--bg-section);
    overflow: hidden;
    position: relative;
}
.certs-section > .container { padding: 0; }
.certs-section .section-box {
    overflow: hidden;
    padding: 40px 0;
}
.certs-section .section-header {
    padding: 0 40px;
}
.certs-section .cert-tooltip {
    margin: 0 40px;
}

.certs-marquee {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 20px 0;
}

.certs-marquee::before.certs-marquee::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100px;
    z-index: 2;
    pointer-events: none;
}

.certs-marquee::before {
    left: 0;
    background: linear-gradient(to right, var(--bg-card), transparent);
}

.certs-marquee::after {
    right: 0;
    background: linear-gradient(to left, var(--bg-card), transparent);
}

.certs-track {
    display: flex;
    align-items: center;
    gap: 24px;
    width: max-content;
    animation: certsScroll 45s linear infinite;
    cursor: grab;
}

.certs-track:active {
    cursor: grabbing;
}

.certs-track.dragging {
    animation: none !important;
    transition: none;
}

.certs-track.paused {
    animation-play-state: paused;
}

/* Cert Navigation Arrows */
.certs-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-secondary);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 16px var(--shadow);
}

.certs-arrow:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--bg-card-hover);
    box-shadow: 0 6px 20px var(--shadow-lg);
}

.certs-arrow-left {
    left: 16px;
}

.certs-arrow-right {
    right: 16px;
}

.cert-slide {
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
}

.certs-img {
    width: 90px;
    height: 90px;
    flex-shrink: 0;
    object-fit: contain;
    background: var(--bg-card);
    padding: 8px;
    border-radius: 12px;
    box-shadow: 0 2px 8px var(--shadow);
    transition: transform 0.3s, box-shadow 0.3s;
}

.cert-slide:hover .certs-img {
    transform: scale(1.12);
    box-shadow: 0 6px 24px rgba(6,182,212,0.18);
}

@keyframes certsScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* Cert Tooltip */
.cert-tooltip {
    position: fixed;
    z-index: 1000;
    width: 320px;
    padding: 20px 22px;
    border-radius: 16px;
    background: #0a1016;
    border: 1px solid rgba(34, 211, 238, 0.35);
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.6), 0 0 18px rgba(6, 182, 212, 0.10);
    pointer-events: none;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}
[data-theme="light"] .cert-tooltip {
    background: #ffffff;
    border-color: rgba(8, 145, 178, 0.4);
    box-shadow: 0 22px 50px rgba(15, 23, 42, 0.18), 0 0 18px rgba(8, 145, 178, 0.10);
}

.cert-tooltip.visible {
    opacity: 1;
    transform: translateY(0);
}

.cert-tooltip-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--text-primary);
}

.cert-tooltip-full {
    margin: 4px 0 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent);
    letter-spacing: 0.01em;
}

.cert-tooltip-desc {
    margin: 10px 0 0;
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

@media (max-width: 768px) {
    .certs-section {
        padding: 40px 0;
    }

    .cert-tooltip {
        width: 260px;
        padding: 16px;
    }
}

/* ===== KPI Dashboard Section ===== */
.kpi-section {
    padding: 80px 40px;
    background: var(--bg-section-alt);
    overflow: hidden;
}
.kpi-section > .container { padding: 0; }

.kpi-dashboard-box {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 24px;
    overflow: hidden;
}

.kpi-dashboard {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    position: relative;
    z-index: 2;
}

/* Gauge Cards */
.kpi-gauge-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 28px 20px 24px;
    text-align: center;
    position: relative;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.kpi-gauge-card:hover {
    border-color: var(--border-hover);
    box-shadow: 0 8px 32px var(--shadow-lg);
}

.kpi-gauge-wrap {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 16px;
}

.kpi-gauge-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.kpi-gauge-bg {
    fill: none;
    stroke: var(--border-color);
    stroke-width: 8;
}

.kpi-gauge-fill {
    fill: none;
    stroke: var(--accent);
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset 2s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] .kpi-gauge-fill {
    filter: none;
}

.kpi-gauge-center {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.kpi-gauge-num {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.kpi-gauge-suffix {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-muted);
}

.kpi-gauge-label {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* LED indicator */
.kpi-gauge-led {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 8px #10b981;
}

.kpi-led-pulse {
    animation: ledPulse 2s ease-in-out infinite;
}

@keyframes ledPulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 6px #10b981; }
    50% { opacity: 0.4; box-shadow: 0 0 2px #10b981; }
}

/* Bar Cards */
.kpi-bar-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 22px 20px;
    position: relative;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.kpi-bar-card:hover {
    border-color: var(--border-hover);
    box-shadow: 0 8px 32px var(--shadow-lg);
}

.kpi-bar-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 6px;
}

.kpi-bar-value {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.kpi-bar-tag {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--bg-surface);
    color: var(--text-muted);
}

.kpi-bar-label {
    margin: 0 0 12px;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.kpi-bar-track {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: var(--bg-surface);
    overflow: hidden;
}

.kpi-bar-fill {
    height: 100%;
    width: 0%;
    border-radius: 3px;
    background: var(--bar-color, var(--accent));
    box-shadow: 0 0 10px var(--bar-color, var(--accent));
    transition: width 2s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 980px) {
    .kpi-section {
        padding: 60px 0;
    }

    .kpi-dashboard {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

@media (max-width: 480px) {
    .kpi-dashboard {
        grid-template-columns: 1fr;
    }
}

/* ===== Partners Carousel ===== */
.partners-section {
    padding: 80px 40px;
    background: var(--bg-section-alt);
    overflow: hidden;
}
.partners-section > .container { padding: 0; }

.partners-carousel {
    position: relative;
    margin: 0 auto;
    padding: 0;
}

.partners-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 20px;
    cursor: grab;
    user-select: none;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-x: contain;
    /* Fade gradient nas bordas - suaviza o "corte" dos cards parciais
       e indica visualmente que tem mais conteudo pra cada lado */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%);
}
.partners-viewport::-webkit-scrollbar { display: none; }
.partners-viewport.dragging { cursor: grabbing; }

.partners-track {
    display: flex;
    gap: 16px;
    width: max-content;
}

.partners-track:hover.partners-track.paused {
    animation-play-state: paused;
}

@keyframes partnersScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.partner-slide {
    flex: 0 0 280px;
    min-width: 280px;
    padding: 28px 20px;
    border-radius: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Partner card border glow */
.partner-border-glow {
    position: absolute;
    inset: 0;
    border-radius: 20px;
    z-index: 1;
    pointer-events: none;
    padding: 1px;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.partner-slide:hover .partner-border-glow {
    opacity: 1;
}

.partner-border-glow::before {
    content: '';
    position: absolute;
    inset: -50%;
    background: conic-gradient(
        from 0deg at 50% 50%,
        transparent 0deg,
        transparent 280deg,
        rgba(6,182,212,0.2) 300deg,
        rgba(6,182,212,0.6) 320deg,
        rgba(34,211,238,0.9) 335deg,
        rgba(255,255,255,1) 345deg,
        rgba(6,182,212,0.9) 350deg,
        rgba(34,211,238,0.6) 355deg,
        rgba(6,182,212,0.2) 360deg
    );
    animation: glowSpin 5s linear infinite;
}

/* ── Generic card border glow (reusable) ── */
.card-border-glow {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    padding: 1px;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.card-border-glow::before {
    content: '';
    position: absolute;
    inset: -50%;
    background: conic-gradient(
        from 0deg at 50% 50%,
        transparent 0deg,
        transparent 280deg,
        rgba(6,182,212,0.2) 300deg,
        rgba(6,182,212,0.6) 320deg,
        rgba(34,211,238,0.9) 335deg,
        rgba(255,255,255,1) 345deg,
        rgba(6,182,212,0.9) 350deg,
        rgba(34,211,238,0.6) 355deg,
        rgba(6,182,212,0.2) 360deg
    );
    animation: glowSpin 5s linear infinite;
}

/* Per-section radius + hover trigger */
.kpi-gauge-card .card-border-glow { border-radius: 20px; opacity: 1; }

.test-flip-slot .card-border-glow { border-radius: 16px; opacity: 1; }

.news-card .card-border-glow { border-radius: 16px; opacity: 1; }

.newsletter-card .card-border-glow { border-radius: 24px; opacity: 1; }

.partner-icon-wrap {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    display: grid;
    place-items: center;
    padding: 12px;
    margin: 0 auto 16px;
    transition: all 0.3s ease;
}

.partner-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: grayscale(20%) opacity(0.85);
    transition: filter 0.3s ease;
}

.partner-name {
    margin: 0 0 8px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
}

.partner-desc {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--text-muted);
    text-align: center;
}

.partner-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(6,182,212,0.05), rgba(34,211,238,0.05));
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.partner-slide:hover {
    border-color: var(--border-hover);
    box-shadow: 0 16px 40px var(--shadow-lg), 0 0 24px rgba(6,182,212,0.15);
}

.partner-slide:hover::after {
    opacity: 1;
}

.partner-slide:hover .partner-icon-wrap {
    border-color: var(--border-hover);
    background: var(--bg-card-hover);
}

.partner-slide:hover .partner-icon {
    filter: grayscale(0%) opacity(1);
}

.partner-slide:hover .partner-desc {
    color: var(--text-secondary);
}


@media (max-width: 980px) {
    .partners-section {
        padding: 50px 0;
    }

    .partners-carousel {
        padding: 0 16px;
    }

    .partner-slide {
        flex: 0 0 250px;
        min-width: 250px;
    }
}

@media (max-width: 580px) {
    .partners-carousel {
        padding: 0 8px;
    }

    .partner-slide {
        flex: 0 0 230px;
        min-width: 230px;
    }
}

/* ===== Testimonials Marquee ===== */
.testimonials-section {
    padding: 60px 40px 50px;
    background: var(--bg-section);
    overflow: hidden;
}
.testimonials-section > .container { padding: 0; }

.test-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
}

.test-flip-slot {
    position: relative;
    min-height: 260px;
    perspective: 1200px;
    overflow: hidden;
    border-radius: 16px;
}

.test-card {
    position: absolute;
    inset: 0;
    padding: 28px 24px;
    border-radius: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    backface-visibility: hidden;
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.7s ease;
    opacity: 0;
    pointer-events: none;
}

.test-card:hover {
    border-color: var(--border-hover);
    box-shadow: 0 8px 24px var(--shadow-lg);
}

/* Direções de entrada card novo entra DE determinada direção */
.test-flip-slot[data-dir="left"] .test-card:not(.active):not(.exit) { transform: translateX(-100%) rotateY(45deg); }
.test-flip-slot[data-dir="right"] .test-card:not(.active):not(.exit) { transform: translateX(100%) rotateY(-45deg); }
.test-flip-slot[data-dir="top"] .test-card:not(.active):not(.exit) { transform: translateY(-100%) rotateX(-45deg); }
.test-flip-slot[data-dir="bottom"] .test-card:not(.active):not(.exit) { transform: translateY(100%) rotateX(45deg); }

/* Card ativo visível e centralizado */
.test-card.active {
    opacity: 1;
    transform: translate(0, 0) rotateX(0) rotateY(0) !important;
    pointer-events: auto;
}

/* Card saindo vai para a direção oposta */
.test-flip-slot[data-dir="left"] .test-card.exit { transform: translateX(100%) rotateY(-45deg) !important; opacity: 0; }
.test-flip-slot[data-dir="right"] .test-card.exit { transform: translateX(-100%) rotateY(45deg) !important; opacity: 0; }
.test-flip-slot[data-dir="top"] .test-card.exit { transform: translateY(100%) rotateX(45deg) !important; opacity: 0; }
.test-flip-slot[data-dir="bottom"] .test-card.exit { transform: translateY(-100%) rotateX(-45deg) !important; opacity: 0; }

.test-stars {
    font-size: 0.85rem;
    letter-spacing: 2px;
    color: #f59e0b;
    margin-bottom: 12px;
}

.test-quote {
    margin: 0 0 16px;
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--text-secondary);
    font-style: italic;
    flex: 1;
}

.test-footer {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.test-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
}

.test-company {
    font-size: 0.75rem;
    color: var(--text-muted);
}

@media (max-width: 768px) {
    .testimonials-section {
        padding: 40px 0 30px;
    }

    .test-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        max-width: 400px;
    }

    .test-flip-slot {
        min-height: 240px;
    }
}

/* ===== News Section ===== */
.news-section {
    padding: 80px 40px;
    background: var(--bg-section-alt);
}
.news-section > .container { padding: 0; }

.news-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
@media (max-width: 1200px) {
    .news-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===== Notícias Carrossel infinito ===== */
.news-carousel {
    position: relative;
    padding: 0 56px; /* espaço pros botões laterais */
}
.news-carousel-viewport {
    overflow: hidden;
}
.news-carousel-track {
    display: flex;
    gap: 24px;
    align-items: stretch;
    will-change: transform;
}
.news-carousel-track > .news-card {
    flex: 0 0 calc((100% - 24px * 3) / 4);
    min-width: 0;
}
.news-carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-primary);
    cursor: pointer;
    display: grid;
    place-items: center;
    z-index: 3;
    transition: all 0.25s ease;
    backdrop-filter: blur(10px);
}
.news-carousel-btn:hover {
    background: linear-gradient(135deg, rgba(6,182,212,0.2), rgba(34,211,238,0.2));
    border-color: rgba(6,182,212,0.4);
    transform: translateY(-50%) scale(1.08);
    box-shadow: 0 6px 20px rgba(6,182,212,0.25);
}
.news-carousel-btn:active { transform: translateY(-50%) scale(0.96); }
.news-carousel-btn--prev { left: 0; }
.news-carousel-btn--next { right: 0; }

@media (max-width: 1200px) {
    .news-carousel-track > .news-card { flex: 0 0 calc((100% - 24px) / 2); }
}
@media (max-width: 700px) {
    .news-carousel { padding: 0 44px; }
    .news-carousel-track > .news-card { flex: 0 0 100%; }
    .news-carousel-btn { width: 38px; height: 38px; }
}

.news-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.news-card:hover {
    border-color: var(--border-hover);
    transform: translateY(-4px);
    box-shadow: 0 16px 40px var(--shadow-lg);
}

.news-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.news-img-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--bg-surface), var(--bg-section-alt));
    display: grid;
    place-items: center;
}

.news-img-placeholder svg {
    color: var(--text-muted);
}

.news-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.news-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: nowrap;
    white-space: nowrap;
}
.news-meta .news-category {
    white-space: nowrap;
}

.news-date {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.news-category {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 3px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(6,182,212,0.1), rgba(34,211,238,0.1));
    color: var(--accent);
}

.news-title {
    margin: 0 0 10px;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(1.05rem * 1.4 * 2); /* reserva 2 linhas mesmo se o título tiver só 1 */
}

.news-excerpt {
    margin: 0 0 16px;
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(0.88rem * 1.6 * 6); /* reserva 6 linhas mesmo se o texto for curto */
}

.news-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    transition: gap 0.2s ease;
}

.news-link:hover {
    gap: 10px;
}

/* Featured news card (RNP) */
.news-card-featured {
    border-color: rgba(34,211,238,0.3);
    background: linear-gradient(160deg, var(--bg-card) 60%, rgba(34,211,238,0.05) 100%);
}
.news-card-featured::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #22d3ee, #06b6d4);
}
.news-img-rnp {
    position: relative;
    background: linear-gradient(135deg, #f8fafc, #e8f0fe) !important;
    overflow: hidden;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}
.news-img-rnp::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('img/soc-rnp.png');
    background-size: cover;
    background-position: center;
    filter: blur(20px) brightness(0.75);
    transform: scale(1.15);
    z-index: 1;
}
.news-rnp-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    padding: 8px;
    z-index: 2;
    display: block;
}
.news-partner-logo {
    max-width: 70%;
    max-height: 80%;
    object-fit: contain;
}
.news-category-gov {
    background: linear-gradient(135deg, rgba(16,185,129,0.12), rgba(34,211,238,0.12)) !important;
    color: #10b981 !important;
}
.news-img-cop30 {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}
.news-category-cop30 {
    background: linear-gradient(135deg, rgba(16,185,129,0.15), rgba(5,150,105,0.15)) !important;
    color: #059669 !important;
    font-weight: 800 !important;
}
.news-org-badge-cop30 {
    color: #059669 !important;
    background: rgba(16,185,129,0.08) !important;
    border-color: rgba(16,185,129,0.25) !important;
}
.news-img-rnp-startup {
    background: linear-gradient(135deg, #f8fafc, #e8f0fe) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* Startup Summit card */
.news-img-startup {
    background: linear-gradient(135deg, #fffbeb, #fef3c7) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}
.news-category-startup {
    background: linear-gradient(135deg, rgba(245,158,11,0.15), rgba(234,88,12,0.12)) !important;
    color: #d97706 !important;
    font-weight: 800 !important;
}
.news-org-badge-startup {
    color: #d97706 !important;
    background: rgba(245,158,11,0.08) !important;
    border-color: rgba(245,158,11,0.25) !important;
}
.news-card-startup::after {
    background: linear-gradient(90deg, #f59e0b, #ef4444) !important;
}

/* Carrossel de imagens Startup Summit (fundo desfocado + imagem nítida) */
.news-summit-carousel {
    position: relative;
    overflow: hidden;
    padding: 0 !important;
    background: #0a0a0f !important;
}
.news-summit-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.7s ease-in-out;
    z-index: 1;
}
.news-summit-slide::before {
    /* camada de blur sobre o background da própria imagem */
    content: '';
    position: absolute;
    inset: 0;
    backdrop-filter: blur(22px) brightness(0.6);
    -webkit-backdrop-filter: blur(22px) brightness(0.6);
    background: rgba(10, 10, 15, 0.25);
    z-index: 1;
}
.news-summit-slide.is-active {
    opacity: 1;
    z-index: 2;
}
.news-summit-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    padding: 8px;
    z-index: 2;
    display: block;
}

/* Láurea de Mérito Polícia Civil do Pará (dourado + tricolor) */
.news-img-medalha {
    position: relative;
    background: radial-gradient(circle at center, #1a1410 0%, #0a0a0f 75%) !important;
    overflow: hidden;
    padding: 0 !important;
}
.news-img-medalha::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('img/medalha_pc_pa.jpg');
    background-size: cover;
    background-position: center;
    filter: blur(18px) brightness(0.55);
    transform: scale(1.15);
    z-index: 1;
}
.news-medalha-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    padding: 8px;
    z-index: 2;
    display: block;
}
.news-category-medalha {
    background: linear-gradient(135deg, rgba(212,175,55,0.18), rgba(239,68,68,0.14)) !important;
    color: #d4af37 !important;
    font-weight: 800 !important;
}
.news-org-badge-medalha {
    color: #d4af37 !important;
    background: rgba(212,175,55,0.08) !important;
    border-color: rgba(212,175,55,0.28) !important;
}
.news-card-medalha {
    border-color: rgba(212,175,55,0.3) !important;
    background: linear-gradient(160deg, var(--bg-card) 60%, rgba(212,175,55,0.05) 100%) !important;
}
.news-card-medalha::after {
    background: linear-gradient(90deg, #ef4444 0%, #ef4444 33%, #ffffff 33%, #ffffff 66%, #1e40af 66%, #1e40af 100%) !important;
}

/* SBPC Sociedade Brasileira para o Progresso da Ciência (cyan/ciência) */
.news-img-sbpc {
    position: relative;
    background: linear-gradient(135deg, #ecfeff, #cffafe) !important;
    overflow: hidden;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}
.news-img-sbpc::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('img/sbpc.png');
    background-size: cover;
    background-position: center;
    filter: blur(20px) brightness(0.75);
    transform: scale(1.15);
    z-index: 1;
}
.news-sbpc-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    padding: 8px;
    z-index: 2;
    display: block;
}
.news-sbpc-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.news-sbpc-brand {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: 3px;
    color: #0891b2;
    text-shadow: 0 2px 4px rgba(6,182,212,0.15);
}
.news-category-sbpc {
    background: linear-gradient(135deg, rgba(6,182,212,0.18), rgba(14,165,233,0.14)) !important;
    color: #0891b2 !important;
    font-weight: 800 !important;
}
.news-org-badge-sbpc {
    color: #0891b2 !important;
    background: rgba(6,182,212,0.08) !important;
    border-color: rgba(6,182,212,0.28) !important;
}
.news-card-sbpc {
    border-color: rgba(6,182,212,0.3) !important;
    background: linear-gradient(160deg, var(--bg-card) 60%, rgba(6,182,212,0.05) 100%) !important;
}
.news-card-sbpc::after {
    background: linear-gradient(90deg, #06b6d4, #22d3ee) !important;
}

.news-org-badge {
    display: inline-block;
    align-self: flex-start;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #22d3ee;
    background: rgba(34,211,238,0.08);
    border: 1px solid rgba(34,211,238,0.2);
    padding: 5px 12px;
    border-radius: 6px;
    margin-top: auto; /* empurra a badge para o fim do card */
}

@media (max-width: 980px) {
    .news-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin: 0 auto;
    }
}

/* ===== Addresses Section ===== */
.addresses-section {
    padding: 60px 40px;
    background: var(--platform-bg, var(--bg-body));
}
.addresses-section > .container { padding: 0; }

.addr-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin: 0 auto;
}

.addr-card {
    position: relative;
    aspect-ratio: 2.15 / 1;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #0a0a1a;
    border: 1px solid var(--border-color);
}

.addr-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10,10,30,0.3) 0%, rgba(10,10,30,0.7) 100%);
    transition: opacity 0.4s;
    z-index: 1;
}

.addr-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    z-index: 2;
    transition: opacity 0.4s, transform 0.4s;
}

.addr-card:hover .addr-content {
    opacity: 0;
    transform: translateY(-20px);
}

.addr-card:hover .addr-overlay {
    opacity: 0;
}

.addr-pin-icon {
    animation: addrFloat 3s ease-in-out infinite;
}

@keyframes addrFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.addr-city {
    font-size: 32px;
    font-weight: 800;
    color: #fff;
    margin: 0;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.addr-state {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(4px);
    padding: 4px 16px;
    border-radius: 20px;
    letter-spacing: 2px;
}

.addr-info {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    z-index: 3;
    background: rgba(10,10,30,0.92);
    backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.4s;
    padding: 16px;
}

.addr-card:hover .addr-info {
    opacity: 1;
}

.addr-info-pin {
    margin-bottom: 4px;
}

.addr-info-city {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

.addr-full {
    font-size: 14px;
    color: rgba(255,255,255,0.75);
    text-align: center;
    line-height: 1.7;
    margin: 4px 0 0;
}

.addr-divider {
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, #06b6d4, #22d3ee);
    border-radius: 2px;
    margin: 8px 0;
}

.addr-label {
    font-size: 11px;
    font-weight: 700;
    color: #22d3ee;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.addr-sublabel {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255,255,255,0.45);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

@media (max-width: 768px) {
    .addr-grid {
        grid-template-columns: 1fr;
    }
    .addr-card {
        aspect-ratio: 2.15 / 1;
    }
    .addresses-section {
        padding: 40px 20px;
    }
}

/* ===== Newsletter Section ===== */
.newsletter-section {
    padding: 80px 40px;
    background: var(--bg-section);
}
.newsletter-section > .container { padding: 0; }

.newsletter-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    padding: 48px 56px;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(6,182,212,0.06), rgba(34,211,238,0.06));
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
}

.newsletter-card::before {
    content: '';
    position: absolute;
    top: -80px;
    right: -80px;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(6,182,212,0.12), transparent 70%);
    pointer-events: none;
}

.newsletter-content {
    flex: 1;
    min-width: 0;
}

.newsletter-title {
    margin: 8px 0 10px;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
}

.newsletter-desc {
    margin: 0;
    font-size: 0.92rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.newsletter-form {
    flex: 0 0 auto;
    min-width: 340px;
}

.newsletter-input-wrap {
    display: flex;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    transition: border-color 0.2s;
}

.newsletter-input-wrap:focus-within {
    border-color: var(--accent);
}

.newsletter-input {
    flex: 1;
    padding: 14px 18px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.92rem;
    font-family: inherit;
    outline: none;
    min-width: 0;
}

.newsletter-input::placeholder {
    color: var(--text-muted);
}

.newsletter-btn {
    padding: 14px 28px;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    color: #fff;
    border: none;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.2s, transform 0.2s;
}

.newsletter-btn:hover {
    opacity: 0.9;
    transform: scale(1.02);
}

.newsletter-disclaimer {
    margin: 10px 0 0;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: center;
}

@media (max-width: 768px) {
    .newsletter-section {
        padding: 50px 0;
    }

    .newsletter-card {
        flex-direction: column;
        padding: 32px 24px;
        gap: 24px;
        text-align: center;
    }

    .newsletter-form {
        min-width: 0;
        width: 100%;
    }

    .newsletter-input-wrap {
        flex-direction: column;
        border-radius: 12px;
    }

    .newsletter-input {
        text-align: center;
    }

    .newsletter-btn {
        border-radius: 0 0 11px 11px;
    }
}

/* ===== Orbital Hub ===== */
.orbital-section {
    width: 100%;
    overflow: hidden;
}

.orbital-iframe {
    width: 100%;
    height: 90vh;
    min-height: 700px;
    border: none;
    display: block;
}

/* ===== Sections ===== */
.section {
    padding: 100px 40px;
    position: relative;
}
.section > .container { padding: 0; }

.section-dark {
    background-color: var(--bg-section);
}

.section-gradient {
    background: var(--bg-section-alt);
}

.section-header {
    text-align: center;
    margin-bottom: 64px;
}

.section-tag {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3px;
    background: linear-gradient(135deg, #06b6d4, #22d3ee);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 16px;
}

.section-title {
    font-size: 40px;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--text-primary);
}

.section-subtitle {
    font-size: 16px;
    color: var(--text-secondary);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.5;
}

/* ===== Services Grid ===== */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.service-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 32px;
    transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}

.service-card:hover {
    border-color: rgba(6, 182, 212, 0.4);
    box-shadow: 0 0 30px rgba(6, 182, 212, 0.1);
    transform: translateY(-4px);
}

.service-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.1), rgba(34, 211, 238, 0.1));
    border-radius: 12px;
    margin-bottom: 20px;
}

.service-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--text-primary);
}

.service-desc {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* ===== Consultoria Grid ===== */
.consult-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.consult-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 32px;
    transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}

.consult-card:hover {
    border-color: rgba(34, 211, 238, 0.4);
    box-shadow: 0 0 30px rgba(34, 211, 238, 0.1);
    transform: translateY(-4px);
}

.consult-number {
    font-size: 48px;
    font-weight: 700;
    background: linear-gradient(135deg, #06b6d4, #22d3ee);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 16px;
    line-height: 1;
}

.consult-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--text-primary);
}

.consult-desc {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* ===== Academia (Cyber Academy) ===== */

/* Header */
.academy-header {
    text-align: center;
    margin-bottom: 16px;
}
.academy-badge {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, #06b6d4, #22d3ee);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    box-shadow: 0 0 30px rgba(6,182,212,0.3);
}
.academy-title {
    font-size: 32px;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 8px;
    letter-spacing: -0.5px;
}
.academy-subtitle-tag {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #f97316;
    background: rgba(249,115,22,0.08);
    border: 1px solid rgba(249,115,22,0.2);
    padding: 6px 20px;
    border-radius: 8px;
}
.academy-desc {
    text-align: center;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.7;
    max-width: 700px;
    margin: 0 auto 32px;
}

/* Grid 4 cards */
.academy-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* Card */
.academy-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}
.academy-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 16px 16px 0 0;
    transition: opacity 0.3s;
}
.academy-card:nth-child(1)::before { background: linear-gradient(90deg, #f97316, #fb923c); }
.academy-card:nth-child(2)::before { background: linear-gradient(90deg, #22d3ee, #67e8f9); }
.academy-card:nth-child(3)::before { background: linear-gradient(90deg, #06b6d4, #67e8f9); }
.academy-card:nth-child(4)::before { background: linear-gradient(90deg, #10b981, #34d399); }

.academy-card:hover {
    transform: translateY(-4px);
    border-color: var(--border-hover);
    box-shadow: 0 12px 40px var(--shadow-lg);
}

/* Card icon */
.academy-card-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.academy-card-icon-orange { background: linear-gradient(135deg, #f97316, #fb923c); box-shadow: 0 4px 15px rgba(249,115,22,0.3); }
.academy-card-icon-blue   { background: linear-gradient(135deg, #22d3ee, #67e8f9); box-shadow: 0 4px 15px rgba(34,211,238,0.3); }
.academy-card-icon-purple { background: linear-gradient(135deg, #06b6d4, #67e8f9); box-shadow: 0 4px 15px rgba(6,182,212,0.3); }
.academy-card-icon-green  { background: linear-gradient(135deg, #10b981, #34d399); box-shadow: 0 4px 15px rgba(16,185,129,0.3); }

/* Card content */
.academy-card-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.academy-card-desc {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
    flex: 1;
}
.academy-card-list {
    list-style: none;
    padding: 0;
    margin: 4px 0 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.academy-card-list li {
    font-size: 12px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
}
.academy-card-list li::before {
    content: '✓';
    font-size: 10px;
    font-weight: 800;
    color: #06b6d4;
    background: rgba(6,182,212,0.1);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.academy-card:nth-child(1) .academy-card-list li::before { color: #f97316; background: rgba(249,115,22,0.1); }
.academy-card:nth-child(2) .academy-card-list li::before { color: #22d3ee; background: rgba(34,211,238,0.1); }
.academy-card:nth-child(4) .academy-card-list li::before { color: #10b981; background: rgba(16,185,129,0.1); }

/* CTA button */
.academy-card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    color: var(--text-primary);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
    margin-top: auto;
}
.academy-card:nth-child(1) .academy-card-btn:hover { background: #f97316; color: #fff; border-color: #f97316; }
.academy-card:nth-child(2) .academy-card-btn:hover { background: #22d3ee; color: #fff; border-color: #22d3ee; }
.academy-card:nth-child(3) .academy-card-btn:hover { background: #06b6d4; color: #fff; border-color: #06b6d4; }
.academy-card:nth-child(4) .academy-card-btn:hover { background: #10b981; color: #fff; border-color: #10b981; }

@media (max-width: 1024px) {
    .academy-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .academy-grid { grid-template-columns: 1fr; }
    .academy-title { font-size: 24px; }
}

/* Legacy compat */
.academia-content {
    display: flex;
    justify-content: center;
}

.academia-card-featured {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.08), rgba(34, 211, 238, 0.08));
    border: 1px solid rgba(6, 182, 212, 0.2);
    border-radius: 20px;
    padding: 48px;
    max-width: 800px;
    width: 100%;
    text-align: center;
}

.academia-icon {
    margin-bottom: 24px;
}

.academia-title {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--text-primary);
}

.academia-desc {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 32px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.academia-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    text-align: left;
    max-width: 500px;
    margin: 0 auto;
}

.academia-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--text-secondary);
}

/* ===== About / Stats ===== */
.about-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 48px;
}

.about-stat {
    text-align: center;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 40px 24px;
    transition: border-color 0.3s;
}

.about-stat:hover {
    border-color: rgba(6, 182, 212, 0.3);
}

.stat-value {
    font-size: 42px;
    font-weight: 700;
    background: linear-gradient(135deg, #06b6d4, #22d3ee);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 8px;
}

.stat-label {
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 500;
}

.about-text {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.about-text p {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.7;
}

/* ===== Footer ===== */
.footer {
    background-color: var(--bg-footer);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 80px 0 32px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 48px;
    margin-bottom: 48px;
}

.logo-text-footer {
    font-size: 28px;
    margin-bottom: 16px;
    display: inline-block;
}
.footer-logo-link {
    display: inline-block;
    margin-bottom: 16px;
}
.footer-logo-img {
    height: 40px;
    width: auto;
    filter: brightness(1.1);
}

.footer-desc {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.6;
    max-width: 280px;
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-heading {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-link {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    transition: color 0.2s;
}

.footer-link:hover {
    color: #06b6d4;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 24px;
    text-align: center;
}

.footer-bottom p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.35);
}

.footer-legal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}

.footer-legal-link {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.3);
    text-decoration: none;
    transition: color 0.2s;
}

.footer-legal-link:hover {
    color: #06b6d4;
}

.footer-legal-sep {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.15);
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
    .navbar {
        padding: 14px 32px;
        top: 30px;
    }

    .topbar-inner {
        padding: 6px 32px;
    }

    .services-grid.consult-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }
}

@media (max-width: 768px) {
    .topbar {
        display: none;
    }

    .navbar {
        padding: 12px 20px;
        top: 0;
    }

    .mobile-nav {
        top: 54px;
    }

    .logo-img {
        height: 30px;
    }

    .nav-links {
        display: none;
    }

    .portal-btn {
        display: none;
    }

    .notif-bell {
        padding: 8px;
    }

    .mobile-menu-btn {
        display: flex;
    }

    .hero-futuristic {
        min-height: 100vh;
    }

    .hero-title {
        font-size: 32px;
        letter-spacing: 0;
    }

    .hero-sub {
        font-size: 14px;
    }

    .hero-buttons {
        flex-direction: column;
        width: 100%;
        padding: 0 24px;
    }

    .hero-buttons .pill-btn {
        width: 100%;
        justify-content: center;
    }

    .hero-scroll {
        bottom: 24px;
    }

    .soc-full-image {
        height: 60vh;
        min-height: 400px;
    }

    .hud-panel {
        display: none;
    }

    .hud-reticle {
        display: none;
    }

    .hud-corner {
        width: 24px;
        height: 24px;
    }

    .hud-bottom {
        padding: 16px 16px;
        gap: 0;
        flex-wrap: wrap;
    }

    .hud-bottom-number {
        font-size: 16px;
    }

    .hud-bottom-label {
        font-size: 9px;
    }

    .hud-bottom-divider {
        height: 24px;
    }

    /* CTI block: keep fixed layout, allow horizontal scroll */

    .cti-title { font-size: 22px; }

    .section {
        padding: 64px 0;
    }

    .section-title {
        font-size: 28px;
    }

    .services-grid.consult-grid {
        grid-template-columns: 1fr;
    }

    .about-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .academia-card-featured {
        padding: 32px 24px;
    }

    .academia-features {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .stat-value {
        font-size: 32px;
    }
}

/* ===== Produtos e Serviços ===== */
.products-section {
    padding: 80px 40px;
    background: var(--bg-body);
}
.products-section > .container { padding: 0; }
.products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 48px;
}
.product-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
    position: relative;
    overflow: hidden;
}
.product-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #06b6d4, #22d3ee);
    opacity: 0;
    transition: opacity 0.3s;
}
.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(6,182,212,0.12);
    border-color: rgba(6,182,212,0.3);
}
.product-card:hover::before {
    opacity: 1;
}
.product-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(6,182,212,0.1), rgba(34,211,238,0.1));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #06b6d4;
    flex-shrink: 0;
}
.product-name {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.3;
}
.product-desc {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
    flex: 1;
}
.product-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.product-features li {
    font-size: 12px;
    color: var(--text-secondary);
    padding-left: 18px;
    position: relative;
}
.product-features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #06b6d4, #22d3ee);
}
.product-cta {
    display: inline-block;
    text-align: center;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #06b6d4;
    border: 1px solid rgba(6,182,212,0.3);
    text-decoration: none;
    transition: all 0.2s;
    margin-top: auto;
}
.product-cta:hover {
    background: #06b6d4;
    color: #fff;
    border-color: #06b6d4;
}
@media (max-width: 1024px) {
    .products-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .products-grid { grid-template-columns: 1fr; }
    .products-section { padding: 48px 0; }
}

/* ===== Reconhecimento ===== */
/* ===== Reconhecimento (compact marquee) ===== */
.recog-section {
    padding: 30px 40px;
    background: var(--bg-section-alt);
}
.recog-section > .container { padding: 0; }

.recog-box {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    box-shadow: 0 4px 24px var(--shadow);
    overflow: hidden;
}

.recog-left {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 28px;
    background: linear-gradient(135deg, rgba(251,191,36,0.10), rgba(217,119,6,0.05));
    border-right: 1px solid var(--border-color);
    flex-shrink: 0;
    min-width: 260px;
}

/* Medalha de mérito: círculo dourado metálico com highlight em cima e sombra embossada embaixo */
.recog-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 25%, #fef3c7 0%, #fbbf24 35%, #d97706 75%, #92400e 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #5a2c0a;
    border: 2px solid rgba(255, 235, 180, 0.85);
    box-shadow:
        0 0 24px rgba(251, 191, 36, 0.45),
        inset 0 2px 4px rgba(255, 255, 255, 0.6),
        inset 0 -3px 6px rgba(124, 77, 3, 0.5),
        0 4px 10px rgba(0, 0, 0, 0.35);
}
.recog-icon svg { filter: drop-shadow(0 1px 0 rgba(255,235,180,0.6)); }

.recog-tag {
    display: block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #fbbf24;
    margin-bottom: 2px;
}

.recog-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
    white-space: nowrap;
}

/* Marquee area */
.recog-marquee {
    flex: 1;
    overflow: hidden;
    position: relative;
    padding: 16px 0;
}
.recog-marquee::before.recog-marquee::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 60px;
    z-index: 2;
    pointer-events: none;
}
.recog-marquee::before {
    left: 0;
    background: linear-gradient(to right, var(--bg-card), transparent);
}
.recog-marquee::after {
    right: 0;
    background: linear-gradient(to left, var(--bg-card), transparent);
}

.recog-track {
    display: flex;
    gap: 16px;
    animation: recogScroll 30s linear infinite;
    width: max-content;
}
.recog-track:hover {
    animation-play-state: paused;
}

@keyframes recogScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.recog-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.3s ease;
}
.recog-item:hover {
    border-color: rgba(251, 191, 36, 0.45);
    background: rgba(251, 191, 36, 0.06);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(251, 191, 36, 0.15), 0 4px 12px var(--shadow);
}

/* Mini selo dourado metálico (mesmo aspecto dos badges de medalha) */
.recog-badge {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #5a2c0a;
    background: linear-gradient(135deg, #fde68a 0%, #fbbf24 45%, #d97706 100%);
    padding: 4px 10px;
    border-radius: 5px;
    border: 1px solid rgba(255, 235, 180, 0.6);
    flex-shrink: 0;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -1px 2px rgba(124, 77, 3, 0.45),
        0 1px 3px rgba(0, 0, 0, 0.25);
}
.recog-badge-blue {
    /* Variante "ouro antigo / bronze" pra diferenciar levemente sem sair do tema medalha */
    background: linear-gradient(135deg, #f3d068 0%, #d97706 50%, #a16207 100%);
}

.recog-text {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

@media (max-width: 768px) {
    .recog-box { flex-direction: column; }
    .recog-left {
        min-width: auto;
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        justify-content: center;
    }
}

/* Legacy recognition (keep for compat) */
.recognition-section {
    padding: 80px 40px;
    background: var(--platform-bg, var(--bg-body));
}
.recognition-section > .container { padding: 0; }
.recognition-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 48px;
}
.recognition-category {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.recognition-cat-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(6,182,212,0.1), rgba(34,211,238,0.1));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #06b6d4;
}
.recognition-cat-title {
    font-size: 17px;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
}
.recognition-cat-desc {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: -4px 0 0;
}
.recognition-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.recognition-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border-radius: 10px;
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.recognition-item:hover {
    border-color: rgba(6,182,212,0.3);
    box-shadow: 0 4px 16px rgba(6,182,212,0.08);
}
.recognition-year {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #06b6d4;
    background: rgba(6,182,212,0.1);
    padding: 4px 8px;
    border-radius: 6px;
    white-space: nowrap;
    margin-top: 2px;
}
.recognition-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.recognition-info strong {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
}
.recognition-info span {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
}
@media (max-width: 1024px) {
    .recognition-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .recognition-section { padding: 48px 0; }
}

/* ===== Legal Modal ===== */
.modal-box-legal {
    max-width: 780px;
    max-height: 85vh;
}
.modal-box-legal h2 {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 4px;
    text-align: center;
}
.modal-box-legal h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 20px 0 8px;
}
.modal-box-legal h4 {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    margin: 14px 0 6px;
}
.modal-box-legal p {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0 0 10px;
}
.modal-box-legal ul {
    padding-left: 20px;
    margin: 8px 0 12px;
}
.modal-box-legal li {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 4px;
}
.legal-updated {
    text-align: center;
    color: var(--text-muted) !important;
    font-style: italic;
    font-size: 12px !important;
    margin-bottom: 20px !important;
}

/* ===== Cookie Preferences ===== */
.cookie-pref-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.cookie-pref-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--bg-body);
    border: 1px solid var(--border-color);
}
.cookie-pref-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cookie-pref-info strong {
    font-size: 13px;
    color: var(--text-primary);
}
.cookie-pref-info span {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
}
.cookie-toggle {
    position: relative;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
    cursor: pointer;
}
.cookie-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}
.cookie-slider {
    position: absolute;
    inset: 0;
    background: rgba(150,150,150,0.3);
    border-radius: 24px;
    transition: background 0.3s;
}
.cookie-slider::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.3s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.cookie-toggle input:checked + .cookie-slider {
    background: #06b6d4;
}
.cookie-toggle input:checked + .cookie-slider::before {
    transform: translateX(20px);
}
.cookie-toggle input:disabled + .cookie-slider {
    background: rgba(6,182,212,0.5);
    cursor: not-allowed;
}

/* ===== Footer Legal Links ===== */
.footer-legal {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.footer-legal-link {
    font-size: 12px;
    color: rgba(255,255,255,0.4);
    text-decoration: none;
    transition: color 0.2s;
}
.footer-legal-link:hover {
    color: #06b6d4;
}
.footer-legal-sep {
    font-size: 12px;
    color: rgba(255,255,255,0.15);
}

/* ===== Floating Action Buttons ===== */
.fab-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
}
.fab-wrapper {
    position: relative;
}
.fab-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 14px rgba(0,0,0,0.25);
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
}
.fab-btn svg {
    width: 20px;
    height: 20px;
}
.fab-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.fab-btn:active {
    transform: scale(0.95);
}

/* Pulsing orange glow on FAB buttons */
.fab-btn {
    animation: fabGlowPulse 2s ease-in-out infinite;
}
@keyframes fabGlowPulse {
    0%, 100% { box-shadow: 0 2px 12px rgba(0,0,0,0.2), 0 0 0 0 rgba(249,115,22,0.6); }
    50% { box-shadow: 0 2px 12px rgba(0,0,0,0.2), 0 0 0 6px rgba(249,115,22,0); }
}

/* WhatsApp */
.fab-btn-whatsapp {
    background: #25d366;
}
.fab-btn-whatsapp:hover {
    background: #20bd5a;
}

/* Astra AI */
.fab-btn-astra {
    background: linear-gradient(135deg, #06b6d4, #22d3ee);
    position: relative;
}
.fab-astra-pulse {
    display: none;
}

/* Tooltips */
.fab-tooltip {
    position: absolute;
    bottom: 68px;
    right: 0;
    width: 300px;
    background: rgba(18, 26, 36, 0.96);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
    border: 1px solid rgba(34, 211, 238, 0.22);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.55), 0 0 12px rgba(34, 211, 238, 0.10);
    opacity: 0;
    transform: translateY(10px) scale(0.95);
    pointer-events: none;
    transition: opacity 0.3s, transform 0.3s;
}
[data-theme="light"] .fab-tooltip {
    background: rgba(255, 255, 255, 0.97);
    border-color: rgba(8, 145, 178, 0.22);
    box-shadow: 0 14px 44px rgba(15, 23, 42, 0.18), 0 0 12px rgba(8, 145, 178, 0.10);
}
.fab-tooltip.show {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.fab-tooltip.dismissed {
    display: none;
}
.fab-tooltip-close {
    position: absolute;
    top: 10px;
    right: 14px;
    background: none;
    border: none;
    font-size: 20px;
    color: var(--text-muted, #888);
    cursor: pointer;
    line-height: 1;
}
.fab-tooltip-close:hover {
    color: var(--text-primary, #333);
}
.fab-tooltip p {
    font-size: 13px;
    color: var(--text-secondary, #555);
    margin: 0 0 8px;
    line-height: 1.5;
}
.fab-tooltip p strong {
    color: var(--text-primary, #1a1a2e);
}
.fab-tooltip-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 10px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
}
.fab-tooltip-btn:hover {
    transform: translateY(-1px);
}
.fab-tooltip-btn-green {
    background: #25d366;
    color: #fff;
    box-shadow: 0 4px 12px rgba(37,211,102,0.3);
}
.fab-tooltip-btn-green:hover {
    box-shadow: 0 6px 20px rgba(37,211,102,0.4);
}

/* Astra Tooltip */
.fab-tooltip-astra {
    width: 320px;
}
.fab-astra-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.fab-astra-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(6,182,212,0.15), rgba(34,211,238,0.15));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.fab-astra-header strong {
    font-size: 15px;
    color: var(--text-primary, #1a1a2e);
    display: block;
}
.fab-astra-status {
    font-size: 11px;
    color: #22c55e;
    display: flex;
    align-items: center;
    gap: 4px;
}
.fab-astra-msg {
    font-size: 13px;
    color: var(--text-secondary, #555);
    line-height: 1.6;
    margin: 0 0 14px !important;
    padding: 12px;
    background: var(--bg-body, #f4f6fa);
    border-radius: 12px;
    border: 1px solid var(--border-color, rgba(0,0,0,0.06));
}
.fab-astra-actions {
    display: flex;
    gap: 8px;
}
.fab-astra-action {
    flex: 1;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid rgba(6,182,212,0.3);
    background: transparent;
    color: #06b6d4;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}
.fab-astra-action:hover {
    background: #06b6d4;
    color: #fff;
    border-color: #06b6d4;
}

/* Mobile */
@media (max-width: 600px) {
    .fab-container {
        bottom: 16px;
        right: 16px;
        gap: 10px;
    }
    .fab-btn {
        width: 36px;
        height: 36px;
    }
    .fab-tooltip {
        width: 280px;
        right: -8px;
    }
    .fab-tooltip-astra {
        width: 290px;
    }
}

/* ===== Modal Contato ===== */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0,0,0,0.78);
    /* removido o backdrop-filter pra nao gerar efeito "vidro" no resto da pagina */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}
.modal-box {
    /* Fundo unificado opaco escuro (mesmo tom dos cards). Sem vidro. */
    background: #0f1a23;
    border: 1px solid rgba(34, 211, 238, 0.18);
    border-radius: 16px;
    width: 90%;
    max-width: 720px;
    max-height: 92vh;
    overflow-y: auto;
    padding: 28px 32px;
    position: relative;
    transform: translateY(20px) scale(0.97);
    transition: transform 0.3s ease;
    box-shadow: 0 24px 64px rgba(0,0,0,0.55), 0 0 0 1px rgba(34, 211, 238, 0.06) inset;
    /* Scrollbar customizada (visivel) pra deixar claro que rola */
    scrollbar-width: thin;
    scrollbar-color: rgba(34, 211, 238, 0.4) transparent;
}
.modal-box::-webkit-scrollbar { width: 8px; }
.modal-box::-webkit-scrollbar-track { background: transparent; }
.modal-box::-webkit-scrollbar-thumb { background: rgba(34, 211, 238, 0.3); border-radius: 4px; }
.modal-box::-webkit-scrollbar-thumb:hover { background: rgba(34, 211, 238, 0.5); }

/* Viewports baixos APENAS DESKTOP/TABLET (>720px). No mobile NAO compactamos,
   deixamos rolar naturalmente pra nao ficar tudo apertado. */
@media (max-height: 920px) and (min-width: 721px) {
    .modal-box {
        padding: 20px 26px;
        max-height: 95vh;
    }
    .modal-header { margin-bottom: 16px !important; }
    .modal-title { font-size: 19px !important; }
    .modal-sub { font-size: 12.5px !important; }
    .modal-form { gap: 12px !important; }
    .modal-row { gap: 12px !important; }
    .modal-field label { font-size: 11px !important; }
    .modal-field input,
    .modal-field select,
    .modal-field textarea { padding: 9px 11px !important; font-size: 13px !important; }
    .modal-field textarea { height: 80px !important; min-height: 80px !important; max-height: 80px !important; }
    .modal-submit { padding: 11px !important; font-size: 15px !important; }
    .modal-legal { font-size: 9.5px !important; }
    .modal-checkbox { font-size: 10.5px !important; }
    .modal-urgent-badge,
    .modal-demo-badge { top: 10px !important; padding: 2px 8px !important; font-size: 9px !important; }
    .modal-box--urgent .modal-header,
    .modal-box--demo .modal-header { margin-top: 12px !important; }
    .modal-chips { gap: 6px !important; }
    .modal-chip { padding: 4px 9px !important; font-size: 11px !important; }
}
@media (max-height: 700px) and (min-width: 721px) {
    .modal-box {
        padding: 16px 22px;
        max-height: 96vh;
    }
    .modal-header { margin-bottom: 12px !important; }
    .modal-title { font-size: 17px !important; }
    .modal-form { gap: 10px !important; }
    .modal-row { gap: 10px !important; }
    .modal-field textarea { height: 70px !important; min-height: 70px !important; max-height: 70px !important; }
}
.modal-overlay.active .modal-box {
    transform: translateY(0) scale(1);
}
.modal-close {
    position: absolute;
    top: 16px;
    right: 20px;
    background: none;
    border: none;
    font-size: 28px;
    color: rgba(255,255,255,0.55);
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
    z-index: 2;
}
.modal-close:hover {
    color: #22d3ee;
}
.modal-header {
    text-align: center;
    margin-bottom: 24px;
}
.modal-title {
    font-size: 22px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 6px;
}
.modal-sub {
    font-size: 13px;
    color: rgba(255,255,255,0.6);
    margin: 0;
}
.modal-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.modal-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.modal-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.modal-field label {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255,255,255,0.78);
    text-transform: none;
}
/* Inputs/selects/textarea com mesmo fundo do modal (tom ligeiramente mais profundo).
   Bug anterior: seletor estava sem virgula entao nenhum estilo aplicava. */
.modal-field input,
.modal-field select,
.modal-field textarea {
    padding: 11px 12px;
    border: 1px solid rgba(34, 211, 238, 0.18);
    border-radius: 8px;
    font-size: 14px;
    background: #07121a;
    color: #ffffff;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    outline: none;
    font-family: inherit;
}
.modal-field input:hover,
.modal-field select:hover,
.modal-field textarea:hover {
    border-color: rgba(34, 211, 238, 0.35);
}
.modal-field input:focus,
.modal-field select:focus,
.modal-field textarea:focus {
    border-color: #22d3ee;
    background: #0a1a25;
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.15);
}
.modal-field input::placeholder,
.modal-field textarea::placeholder {
    color: rgba(255,255,255,0.32);
}
.modal-field select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2322d3ee' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}
.modal-field select option {
    background: #07121a;
    color: #ffffff;
}
.modal-field textarea {
    /* Sem handle de redimensionamento; conteudo excedente rola dentro do textarea */
    resize: none;
    height: 100px;
    min-height: 100px;
    max-height: 100px;
    overflow-y: auto;
    line-height: 1.5;
}
.modal-phone {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid rgba(34, 211, 238, 0.18);
    border-radius: 8px;
    overflow: hidden;
    background: #07121a;
    transition: border-color 0.2s;
}
.modal-phone:hover { border-color: rgba(34, 211, 238, 0.35); }
.modal-phone:focus-within {
    border-color: #22d3ee;
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.15);
}
.modal-phone-flag {
    padding: 10px 12px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    border-right: 1px solid rgba(34, 211, 238, 0.18);
    white-space: nowrap;
    flex-shrink: 0;
    background: rgba(34, 211, 238, 0.04);
}
.modal-phone input {
    border: none !important;
    border-radius: 0 !important;
    flex: 1;
    background: transparent !important;
}
.modal-phone input:focus {
    box-shadow: none !important;
    background: transparent !important;
}
.modal-field-consent {
    justify-content: center;
}
.modal-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 11px;
    font-weight: 400;
    color: rgba(255,255,255,0.6);
    line-height: 1.4;
    cursor: pointer;
}
.modal-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: #22d3ee;
}
/* Botao ENVIAR: verde "emergencia" (radioactive lime+cyan) - clean sem gradient */
.modal-submit {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 10px;
    background: #22c55e;
    color: #04111a;
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s, filter 0.2s;
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.5),
                0 6px 20px rgba(34, 197, 94, 0.35),
                0 0 30px rgba(34, 197, 94, 0.18);
}
.modal-submit:hover {
    background: #16a34a;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.6),
                0 8px 28px rgba(34, 197, 94, 0.5),
                0 0 40px rgba(34, 197, 94, 0.28);
    filter: brightness(1.05);
}
.modal-submit:active {
    transform: translateY(0);
    filter: brightness(0.95);
}
.modal-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}
/* Campo invalido (aria-invalid) destaca em vermelho */
.modal-field input[aria-invalid="true"],
.modal-field select[aria-invalid="true"],
.modal-field textarea[aria-invalid="true"],
.modal-phone:has(input[aria-invalid="true"]) {
    border-color: rgba(239, 68, 68, 0.6) !important;
    background: rgba(239, 68, 68, 0.05) !important;
    animation: ms-shake 0.32s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
.modal-field input[aria-invalid="true"]:focus,
.modal-field select[aria-invalid="true"]:focus,
.modal-field textarea[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.20) !important;
}
@keyframes ms-shake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-3px); }
    40%, 60% { transform: translateX(3px); }
}

/* Honeypot anti-spam invisivel pra humanos, visivel pra bots */
.modal-honeypot {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}
/* Mensagem de erro inline acima do botao Enviar */
.modal-error {
    display: none;
    background: rgba(239, 68, 68, 0.10);
    border: 1px solid rgba(239, 68, 68, 0.45);
    color: #fca5a5;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    margin-top: 4px;
}
.modal-legal {
    font-size: 10px;
    color: var(--text-muted, #888);
    text-align: center;
    line-height: 1.5;
    margin: 0;
}
.modal-legal-link {
    color: #06b6d4;
    text-decoration: none;
}
.modal-legal-link:hover {
    text-decoration: underline;
}
/* ============================================================
   Tela de sucesso: checkmark animado + halo pulsante + texto
   Centralizada vertical/horizontal dentro do modal-box.
   ============================================================ */
.modal-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 36px 24px 28px;
    gap: 14px;
    min-height: 320px;
    animation: ms-fade-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.modal-success-icon {
    position: relative;
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 6px;
}
.modal-success-icon::before {
    /* Halo radial de fundo */
    content: '';
    position: absolute;
    inset: -8px;
    background: radial-gradient(circle, rgba(34,197,94,0.28) 0%, rgba(34,197,94,0.08) 45%, transparent 70%);
    border-radius: 50%;
    opacity: 0;
    animation: ms-halo 0.6s ease-out 0.15s forwards;
}
.modal-success-pulse {
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    border: 2px solid #22c55e;
    opacity: 0;
    transform: scale(0.6);
    animation: ms-pulse 1.6s ease-out 0.6s infinite;
}
.modal-success-pulse--2 {
    animation-delay: 1.2s;
}
.modal-success-svg {
    width: 88px;
    height: 88px;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 0 12px rgba(34,197,94,0.4));
}
.modal-success-circle {
    fill: rgba(34,197,94,0.10);
    stroke: #22c55e;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 152;     /* 2*PI*24 ≈ 150.8 */
    stroke-dashoffset: 152;
    transform-origin: center;
    transform: rotate(-90deg);
    animation: ms-draw-circle 0.55s cubic-bezier(0.65, 0, 0.45, 1) 0.1s forwards;
}
.modal-success-check {
    fill: none;
    stroke: #22c55e;
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 36;
    stroke-dashoffset: 36;
    animation: ms-draw-check 0.32s cubic-bezier(0.65, 0, 0.45, 1) 0.55s forwards;
}
.modal-success-title {
    font-size: 22px;
    font-weight: 800;
    color: #22c55e;
    margin: 0;
    letter-spacing: 0.02em;
    text-shadow: 0 0 18px rgba(34,197,94,0.35);
    opacity: 0;
    animation: ms-fade-up-small 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.75s forwards;
}
.modal-success-text {
    font-size: 14.5px;
    color: rgba(255,255,255,0.82);
    margin: 0;
    line-height: 1.5;
    max-width: 380px;
    opacity: 0;
    animation: ms-fade-up-small 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.9s forwards;
}
.modal-success-sub {
    font-size: 12px;
    color: rgba(34, 211, 238, 0.85);
    margin: 4px 0 0;
    font-family: var(--ds-font-family-mono, 'JetBrains Mono', monospace);
    letter-spacing: 0.04em;
    opacity: 0;
    animation: ms-fade-up-small 0.5s cubic-bezier(0.22, 1, 0.36, 1) 1.05s forwards;
}

/* Tema light */
[data-theme="light"] .modal-success-text { color: rgba(15, 23, 42, 0.72); }
[data-theme="light"] .modal-success-sub  { color: #0e7490; }

@keyframes ms-fade-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes ms-fade-up-small {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes ms-draw-circle {
    to { stroke-dashoffset: 0; }
}
@keyframes ms-draw-check {
    to { stroke-dashoffset: 0; }
}
@keyframes ms-halo {
    from { opacity: 0; transform: scale(0.6); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes ms-pulse {
    0%   { opacity: 0.6; transform: scale(0.85); }
    100% { opacity: 0;   transform: scale(1.6);  }
}

/* Reduzir movimento */
@media (prefers-reduced-motion: reduce) {
    .modal-success,
    .modal-success-icon::before,
    .modal-success-pulse,
    .modal-success-circle,
    .modal-success-check,
    .modal-success-title,
    .modal-success-text,
    .modal-success-sub {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        stroke-dashoffset: 0 !important;
    }
}

/* ============================================================
   MODAL URGENTE (INCIDENTE) — tema vermelho / alerta
   ============================================================ */
.modal-box.modal-box--urgent {
    background: #1a0c0c;
    border: 1px solid rgba(239, 68, 68, 0.32);
    box-shadow:
        0 24px 64px rgba(0,0,0,0.65),
        0 0 0 1px rgba(239, 68, 68, 0.10) inset,
        0 0 80px rgba(239, 68, 68, 0.10);
    position: relative;
    /* overflow-x hidden pra clipar; overflow-y auto pra deixar rolar
       (touch scroll no mobile precisa disso, mesma logica do modal demo). */
    overflow-x: hidden;
    overflow-y: auto;
}
/* Linha pulsante vermelha no topo (vibe de "sirene")
   Inset 12px pra nao vazar do border-radius arredondado. */
.modal-urgent-stripe {
    position: absolute;
    top: 0; left: 12px; right: 12px;
    height: 3px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(90deg,
        rgba(239,68,68,0) 0%,
        #ef4444 30%,
        #fca5a5 50%,
        #ef4444 70%,
        rgba(239,68,68,0) 100%);
    background-size: 200% 100%;
    animation: urgentStripe 2.2s linear infinite;
    z-index: 1;
    pointer-events: none;
}
@keyframes urgentStripe {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Badge "RESPOSTA RAPIDA 24/7"  posicao ABSOLUTA no topo pra nao somar altura
   (assim o modal-box tem a mesma altura do modal de contato). */
.modal-urgent-badge {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: 999px;
    color: #fca5a5;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    z-index: 2;
    white-space: nowrap;
}
/* Compensa o espaço da badge: o header do modal de incidente comeca um pouco mais embaixo */
.modal-box--urgent .modal-header {
    margin-top: 16px;
}
.modal-urgent-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.9);
    animation: urgentDot 1.2s ease-in-out infinite;
}
@keyframes urgentDot {
    0%, 100% { opacity: 1;    transform: scale(1); }
    50%      { opacity: 0.35; transform: scale(0.8); }
}

.modal-title--urgent {
    color: #fee2e2;
    text-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
    font-size: 22px;
    letter-spacing: 0.01em;
}
.modal-sub--urgent {
    color: rgba(254, 226, 226, 0.78);
    font-size: 13px;
    line-height: 1.5;
    max-width: 560px;
    margin: 0 auto;
}
.modal-sub--urgent strong {
    color: #fca5a5;
    font-weight: 800;
}

.modal-field-hint {
    font-weight: 400;
    font-size: 10.5px;
    color: rgba(252, 165, 165, 0.7);
    margin-left: 4px;
    letter-spacing: 0;
    text-transform: none;
}

/* Inputs/selects do modal urgente recebem borda vermelha sutil.
   ATENCAO: usar `background-color`, NUNCA `background` (shorthand reseta
   background-repeat/position e a setinha do select vira textura repetida). */
.modal-box--urgent .modal-field input,
.modal-box--urgent .modal-field select,
.modal-box--urgent .modal-field textarea {
    background-color: #0d0606;
    border-color: rgba(239, 68, 68, 0.20);
}
.modal-box--urgent .modal-field input:hover,
.modal-box--urgent .modal-field select:hover,
.modal-box--urgent .modal-field textarea:hover {
    border-color: rgba(239, 68, 68, 0.4);
}
.modal-box--urgent .modal-field input:focus,
.modal-box--urgent .modal-field select:focus,
.modal-box--urgent .modal-field textarea:focus {
    border-color: #ef4444;
    background-color: #160808;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18);
}
.modal-box--urgent .modal-field label {
    color: rgba(254, 226, 226, 0.85);
}
.modal-box--urgent .modal-field select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23fca5a5' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
}
.modal-box--urgent .modal-field select option { background: #0d0606; color: #fee2e2; }
.modal-box--urgent .modal-phone {
    background-color: #0d0606;
    border-color: rgba(239, 68, 68, 0.20);
}
.modal-box--urgent .modal-phone-flag {
    background-color: rgba(239, 68, 68, 0.06);
    border-right-color: rgba(239, 68, 68, 0.20);
    color: rgba(254, 226, 226, 0.7);
}
.modal-box--urgent .modal-phone:focus-within {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18);
}
.modal-box--urgent .modal-checkbox {
    color: rgba(254, 226, 226, 0.65);
}
.modal-box--urgent .modal-checkbox input[type="checkbox"] {
    accent-color: #ef4444;
}
.modal-box--urgent .modal-close {
    color: rgba(252, 165, 165, 0.6);
}
.modal-box--urgent .modal-close:hover { color: #fca5a5; }
.modal-box--urgent .modal-legal {
    color: rgba(254, 226, 226, 0.5);
}

/* Botao SUBMIT urgente (vermelho com pulse animado + texto chamativo) */
.modal-submit--urgent {
    position: relative;
    background: linear-gradient(135deg, #dc2626, #ef4444);
    color: #ffffff;
    letter-spacing: 1.4px;
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(239, 68, 68, 0.55),
        0 8px 24px rgba(239, 68, 68, 0.4),
        0 0 40px rgba(239, 68, 68, 0.25);
    animation: urgentBtnGlow 2s ease-in-out infinite;
}
.modal-submit--urgent:hover {
    background: linear-gradient(135deg, #b91c1c, #dc2626);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow:
        0 0 0 1px rgba(239, 68, 68, 0.7),
        0 10px 30px rgba(239, 68, 68, 0.55),
        0 0 50px rgba(239, 68, 68, 0.35);
    filter: brightness(1.05);
}
.modal-submit--urgent:active { transform: translateY(0); }
@keyframes urgentBtnGlow {
    0%, 100% {
        box-shadow:
            0 0 0 1px rgba(239, 68, 68, 0.55),
            0 8px 24px rgba(239, 68, 68, 0.4),
            0 0 40px rgba(239, 68, 68, 0.25);
    }
    50% {
        box-shadow:
            0 0 0 1px rgba(239, 68, 68, 0.75),
            0 8px 28px rgba(239, 68, 68, 0.6),
            0 0 60px rgba(239, 68, 68, 0.45);
    }
}
.modal-submit--urgent .modal-submit-pulse {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.18) 50%,
        transparent 100%);
    animation: urgentBtnSweep 2.4s ease-in-out infinite;
    pointer-events: none;
}
@keyframes urgentBtnSweep {
    0%   { transform: translate(-100%, -50%); }
    100% { transform: translate(100%,  -50%); }
}
.modal-submit--urgent .modal-submit-text { position: relative; z-index: 1; }
.modal-submit--urgent:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    animation: none;
    transform: none;
}

/* Tela de sucesso variante urgente: cor vermelha (mesma animacao) */
.modal-success-circle--urgent { stroke: #ef4444 !important; fill: rgba(239, 68, 68, 0.10) !important; }
.modal-success-check--urgent  { stroke: #ef4444 !important; }
.modal-success-pulse--urgent  { border-color: #ef4444 !important; }
.modal-success-svg--urgent    { filter: drop-shadow(0 0 12px rgba(239, 68, 68, 0.55)) !important; }
.modal-success-icon--urgent::before {
    background: radial-gradient(circle, rgba(239,68,68,0.32) 0%, rgba(239,68,68,0.08) 45%, transparent 70%) !important;
}
.modal-success-title--urgent { color: #fca5a5 !important; text-shadow: 0 0 18px rgba(239, 68, 68, 0.5) !important; }
.modal-success-sub--urgent   { color: rgba(252, 165, 165, 0.95) !important; }

/* Variante de sucesso DEMO (roxo SmartSEC) */
.modal-success-circle--demo { stroke: #6366f1 !important; fill: rgba(99, 102, 241, 0.10) !important; }
.modal-success-check--demo  { stroke: #6366f1 !important; }
.modal-success-pulse--demo  { border-color: #6366f1 !important; }
.modal-success-svg--demo    { filter: drop-shadow(0 0 12px rgba(99, 102, 241, 0.55)) !important; }
.modal-success-icon--demo::before {
    background: radial-gradient(circle, rgba(99,102,241,0.32) 0%, rgba(99,102,241,0.08) 45%, transparent 70%) !important;
}
.modal-success-title--demo { color: #a5b4fc !important; text-shadow: 0 0 18px rgba(99, 102, 241, 0.5) !important; }
.modal-success-sub--demo   { color: rgba(165, 180, 252, 0.95) !important; }

/* ====================================================================
   MODAL DEMO (roxo / cyan) - tema personalizado, global
   ==================================================================== */
.modal-box.modal-box--demo {
    background: #0b0a1a;
    border: 1px solid rgba(99, 102, 241, 0.32);
    box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.65),
        0 0 0 1px rgba(99, 102, 241, 0.10) inset,
        0 0 80px rgba(99, 102, 241, 0.12);
    position: relative;
    /* overflow-x hidden pra clipar a stripe horizontal; overflow-y auto pra deixar
       o usuario rolar o conteudo (essencial no mobile). */
    overflow-x: hidden;
    overflow-y: auto;
}
.modal-demo-stripe {
    /* Absolute pra colar no topo do modal-box (acima do padding-top).
       Largura total via left/right: 0 com inset pra acompanhar border-radius. */
    position: absolute;
    top: 0;
    left: 12px;
    right: 12px;
    height: 3px;
    background: linear-gradient(90deg,
        rgba(99,102,241,0) 0%, #6366f1 25%, #06b6d4 50%, #6366f1 75%, rgba(99,102,241,0) 100%);
    background-size: 200% 100%;
    animation: demoStripe 4.5s linear infinite;
    border-radius: 0 0 999px 999px;
    z-index: 3; pointer-events: none;
}
@keyframes demoStripe {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.modal-demo-badge {
    position: absolute;
    top: 14px; left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    background: rgba(99, 102, 241, 0.12);
    border: 1px solid rgba(99, 102, 241, 0.4);
    border-radius: 999px;
    color: #a5b4fc;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    z-index: 2;
    white-space: nowrap;
}
.modal-demo-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #6366f1;
    box-shadow: 0 0 6px rgba(99, 102, 241, 0.9);
    animation: demoDot 1.6s ease-in-out infinite;
}
@keyframes demoDot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.4; transform: scale(0.75); }
}
.modal-box--demo .modal-header { margin-top: 16px; }
.modal-title--demo {
    color: #e0e7ff;
    text-shadow: 0 0 20px rgba(99, 102, 241, 0.4);
    font-size: 22px;
    letter-spacing: 0.01em;
    background: linear-gradient(135deg, #a5b4fc, #67e8f9);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.modal-sub--demo {
    color: rgba(224, 231, 255, 0.78);
    font-size: 13px;
    line-height: 1.5;
    max-width: 560px;
    margin: 0 auto;
}
.modal-sub--demo strong { color: #67e8f9; font-weight: 700; }

.modal-box--demo .modal-field input,
.modal-box--demo .modal-field select,
.modal-box--demo .modal-field textarea {
    background-color: #07061a;
    border-color: rgba(99, 102, 241, 0.20);
}
.modal-box--demo .modal-field input:hover,
.modal-box--demo .modal-field select:hover,
.modal-box--demo .modal-field textarea:hover { border-color: rgba(99, 102, 241, 0.4); }
.modal-box--demo .modal-field input:focus,
.modal-box--demo .modal-field select:focus,
.modal-box--demo .modal-field textarea:focus {
    border-color: #6366f1;
    background-color: #0d0c25;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}
.modal-box--demo .modal-field label { color: rgba(224, 231, 255, 0.85); }
.modal-box--demo .modal-field select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a5b4fc' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
}
.modal-box--demo .modal-field select option { background: #07061a; color: #e0e7ff; }
.modal-box--demo .modal-phone {
    background-color: #07061a;
    border-color: rgba(99, 102, 241, 0.20);
}
.modal-box--demo .modal-phone-flag {
    background-color: rgba(99, 102, 241, 0.06);
    border-right-color: rgba(99, 102, 241, 0.20);
    color: rgba(224, 231, 255, 0.7);
}
.modal-box--demo .modal-phone:focus-within {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}
.modal-box--demo .modal-checkbox { color: rgba(224, 231, 255, 0.65); }
.modal-box--demo .modal-checkbox input[type="checkbox"] { accent-color: #6366f1; }
.modal-box--demo .modal-close { color: rgba(165, 180, 252, 0.6); }
.modal-box--demo .modal-close:hover { color: #a5b4fc; }
.modal-box--demo .modal-legal { color: rgba(224, 231, 255, 0.5); }

.modal-chips {
    display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px;
}
.modal-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    background: rgba(99, 102, 241, 0.06);
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: 999px;
    font-size: 12px; font-weight: 600;
    color: rgba(224, 231, 255, 0.75);
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.18s;
    user-select: none;
}
.modal-chip:hover {
    border-color: rgba(99, 102, 241, 0.55);
    color: #e0e7ff;
}
.modal-chip input[type="checkbox"] {
    position: absolute; opacity: 0; pointer-events: none;
}
.modal-chip:has(input:checked) {
    background: rgba(99, 102, 241, 0.22);
    border-color: #6366f1;
    color: #ffffff;
    box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.4), 0 0 12px rgba(99, 102, 241, 0.25);
}
.modal-chip:active { transform: scale(0.97); }

.modal-submit--demo {
    position: relative;
    background: linear-gradient(135deg, #6366f1, #06b6d4);
    color: #ffffff;
    letter-spacing: 1.4px;
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(99, 102, 241, 0.55),
        0 8px 24px rgba(99, 102, 241, 0.4),
        0 0 40px rgba(99, 102, 241, 0.22);
    animation: demoBtnGlow 2.5s ease-in-out infinite;
}
.modal-submit--demo:hover {
    background: linear-gradient(135deg, #4f46e5, #0891b2);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow:
        0 0 0 1px rgba(99, 102, 241, 0.7),
        0 10px 30px rgba(99, 102, 241, 0.5),
        0 0 50px rgba(99, 102, 241, 0.32);
    filter: brightness(1.05);
}
.modal-submit--demo:active { transform: translateY(0); }
@keyframes demoBtnGlow {
    0%, 100% {
        box-shadow:
            0 0 0 1px rgba(99, 102, 241, 0.55),
            0 8px 24px rgba(99, 102, 241, 0.4),
            0 0 40px rgba(99, 102, 241, 0.22);
    }
    50% {
        box-shadow:
            0 0 0 1px rgba(99, 102, 241, 0.75),
            0 8px 28px rgba(99, 102, 241, 0.55),
            0 0 55px rgba(99, 102, 241, 0.4);
    }
}
.modal-submit--demo .modal-submit-pulse {
    position: absolute;
    top: 50%; left: 0;
    transform: translateY(-50%);
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.18) 50%, transparent 100%);
    animation: demoBtnSweep 3s ease-in-out infinite;
    pointer-events: none;
}
@keyframes demoBtnSweep {
    0%   { transform: translate(-100%, -50%); }
    100% { transform: translate(100%, -50%); }
}
.modal-submit--demo .modal-submit-text { position: relative; z-index: 1; }
.modal-submit--demo:disabled {
    opacity: 0.55; cursor: not-allowed; animation: none; transform: none;
}

@media (max-width: 600px) {
    .modal-box {
        padding: 24px 20px;
        width: 95%;
    }
    .modal-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .modal-title {
        font-size: 18px;
    }
}

/* ==========================================================================
   Active nav link state (used em subpáginas via data-ds-current no <body>)
   ========================================================================== */
.nav-link.nav-link-active .nav-link-text {
    background: linear-gradient(135deg, #06b6d4, #22d3ee);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
}

.nav-link.nav-link-active .nav-link-glow {
    opacity: 1;
}



/* ============================================================================
   BLOCO INSTITUCIONAL Posicionamento estratégico SEC365
   Substitui o antigo "Quem Somos" com identidade ciber-institucional.
   ============================================================================ */
.inst {
    position: relative;
    padding: 120px 0 100px;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(ellipse at top, rgba(6, 182, 212, 0.05), transparent 55%),
        radial-gradient(ellipse at bottom right, rgba(6, 182, 212, 0.04), transparent 55%),
        #06070b;
}

/* ----- Background decorativo: grid + glow + scan ----- */
.inst__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.inst__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(34, 211, 238, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(34, 211, 238, 0.06) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, #000 35%, transparent 90%);
            mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, #000 35%, transparent 90%);
    opacity: 0.6;
}
.inst__glow {
    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    filter: blur(110px);
    opacity: 0.45;
}
.inst__glow--1 {
    top: -180px;
    left: -120px;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.55), transparent 65%);
}
.inst__glow--2 {
    bottom: -200px;
    right: -140px;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.45), transparent 65%);
}
.inst__scan {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.7), rgba(6, 182, 212, 0.5), transparent);
    box-shadow: 0 0 18px rgba(34, 211, 238, 0.6);
    animation: inst-scan-down 9s linear infinite;
}
@keyframes inst-scan-down {
    0%   { top: 0;    opacity: 0; }
    8%   { opacity: 1; }
    92%  { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

.inst__container {
    position: relative;
    z-index: 1;
    max-width: 1180px;
}

/* ============== INTRO (tag + headline + subhead) ============== */
.inst__intro {
    text-align: center;
    max-width: 880px;
    margin: 0 auto 60px;
}
.inst__tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    border-radius: 999px;
    border: 1px solid rgba(34, 211, 238, 0.25);
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.08), rgba(6, 182, 212, 0.06));
    color: #a5f3fc;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 28px;
    backdrop-filter: blur(10px);
}
.inst__tag-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22d3ee;
    box-shadow: 0 0 10px #22d3ee;
    animation: inst-tag-pulse 2s ease-in-out infinite;
}
@keyframes inst-tag-pulse {
    0%, 100% { opacity: 0.5; transform: scale(0.85); }
    50%      { opacity: 1;   transform: scale(1.15); }
}

.inst__headline {
    font-size: clamp(2rem, 4.2vw, 3.4rem);
    line-height: 1.12;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: #f8fafc;
    margin: 0 0 24px;
}
.inst__headline-grad {
    background: linear-gradient(135deg, #06b6d4 0%, #22d3ee 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}
.inst__headline-grad--cyan {
    background: linear-gradient(135deg, #22d3ee 0%, #06b6d4 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}
.inst__subheadline {
    font-size: clamp(1rem, 1.4vw, 1.18rem);
    line-height: 1.6;
    color: rgba(226, 232, 240, 0.78);
    margin: 0;
    max-width: 720px;
    margin-inline: auto;
}
.inst__subheadline strong {
    color: #f1f5f9;
    font-weight: 600;
}

/* ============== STATEMENT (texto institucional curto) ============== */
.inst__statement {
    position: relative;
    max-width: 880px;
    margin: 0 auto 80px;
    padding: 36px 40px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.55), rgba(10, 14, 24, 0.35));
    border: 1px solid rgba(34, 211, 238, 0.14);
    backdrop-filter: blur(14px);
    text-align: center;
}
.inst__statement-line {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.7), transparent);
}
.inst__statement-line:first-child { top: 0; }
.inst__statement-line:last-child  { bottom: 0; }
.inst__statement-text {
    margin: 0;
    font-size: clamp(0.95rem, 1.2vw, 1.05rem);
    line-height: 1.72;
    color: rgba(203, 213, 225, 0.88);
    letter-spacing: 0.005em;
}

/* ============== CARDS ESTRATÉGICOS ============== */
.inst__cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}
.inst__card {
    position: relative;
    padding: 32px 26px 28px;
    border-radius: 16px;
    background:
        linear-gradient(160deg, rgba(15, 23, 42, 0.65) 0%, rgba(10, 14, 24, 0.45) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(18px);
    overflow: hidden;
    transition:
        transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1),
        border-color 0.45s ease;
    isolation: isolate;
    cursor: default;
}
.inst__card-glow {
    position: absolute;
    inset: -1px;
    border-radius: 16px;
    background: radial-gradient(circle at 50% 0%, rgba(34, 211, 238, 0.18), transparent 60%);
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 0;
    pointer-events: none;
}
/* Borda gradiente animada via mask-composite */
.inst__card-border {
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.55), rgba(34, 211, 238, 0.45) 50%, rgba(6, 182, 212, 0.4));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.45s ease;
    z-index: 1;
    pointer-events: none;
}

.inst__card-icon {
    position: relative;
    z-index: 2;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.16), rgba(34, 211, 238, 0.16));
    border: 1px solid rgba(34, 211, 238, 0.28);
    color: #a5f3fc;
    margin-bottom: 22px;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), color 0.3s ease, border-color 0.3s ease;
}
.inst__card-marker {
    position: absolute;
    top: 22px;
    right: 24px;
    z-index: 2;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: rgba(148, 163, 184, 0.45);
    font-variant-numeric: tabular-nums;
    transition: color 0.35s ease;
}
.inst__card-title {
    position: relative;
    z-index: 2;
    margin: 0 0 12px;
    font-size: 1.12rem;
    font-weight: 700;
    color: #f8fafc;
    letter-spacing: -0.01em;
}
.inst__card-desc {
    position: relative;
    z-index: 2;
    margin: 0 0 20px;
    font-size: 0.88rem;
    line-height: 1.6;
    color: rgba(203, 213, 225, 0.72);
}
.inst__card-bar {
    position: relative;
    z-index: 2;
    height: 2px;
    width: 28px;
    border-radius: 2px;
    background: linear-gradient(90deg, #06b6d4, #22d3ee);
    transition: width 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Hover ----------------------------------------------------------- */
.inst__card:hover {
    transform: translateY(-6px);
    border-color: transparent;
}
.inst__card:hover .inst__card-glow.inst__card:hover .inst__card-border {
    opacity: 1;
}
.inst__card:hover .inst__card-icon {
    transform: scale(1.06) rotate(-2deg);
    color: #ffffff;
    border-color: rgba(6, 182, 212, 0.55);
    box-shadow: 0 8px 22px rgba(34, 211, 238, 0.2);
}
.inst__card:hover .inst__card-marker { color: #a5f3fc; }
.inst__card:hover .inst__card-bar { width: 64px; }

/* ============== REVEAL ON SCROLL ============== */
[data-inst-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s cubic-bezier(0.25, 0.8, 0.25, 1),
                transform 0.7s cubic-bezier(0.25, 0.8, 0.25, 1);
}
[data-inst-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============== RESPONSIVO ============== */
@media (max-width: 1100px) {
    .inst__cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
    .inst { padding: 80px 0 72px; }
    .inst__intro { margin-bottom: 40px; }
    .inst__statement { padding: 28px 22px; margin-bottom: 56px; }
    .inst__cards { grid-template-columns: 1fr; gap: 16px; }
    .inst__card { padding: 26px 22px; }
}

/* Acessibilidade */
@media (prefers-reduced-motion: reduce) {
    [data-inst-reveal] { opacity: 1; transform: none; transition: none; }
    .inst__scan.inst__tag-pulse { animation: none; }
}


/* ============================================================================
   QUEM SOMOS extensões: 5 cards, Pilares (M/V/V), Diferenciais, Quote
   ============================================================================ */

/* 5 cards manter consistência visual */
@media (min-width: 1101px) {
    .inst__cards { grid-template-columns: repeat(5, 1fr); }
    .inst__card { padding: 30px 22px 26px; }
    .inst__card-icon { width: 48px; height: 48px; margin-bottom: 18px; }
    .inst__card-marker { top: 20px; right: 20px; }
}

/* ================== PILARES (Missão / Visão / Valores) ================== */
.inst__pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 90px;
}
.inst__pillar {
    position: relative;
    padding: 36px 32px;
    border-radius: 18px;
    background:
        linear-gradient(160deg, rgba(15, 23, 42, 0.7) 0%, rgba(10, 14, 24, 0.45) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(18px);
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.4s ease;
}
.inst__pillar::before {
    /* faixa de cor superior identificadora */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 1;
    background: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.7), rgba(34, 211, 238, 0.7), transparent);
}
.inst__pillar--mission::before { background: linear-gradient(90deg, transparent, #06b6d4, #22d3ee, transparent); }
.inst__pillar--vision::before  { background: linear-gradient(90deg, transparent, #22d3ee, #06b6d4, transparent); }
.inst__pillar--values::before  { background: linear-gradient(90deg, transparent, #06b6d4, #10b981, transparent); }
.inst__pillar:hover {
    transform: translateY(-4px);
    border-color: rgba(34, 211, 238, 0.22);
}

.inst__pillar-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}
.inst__pillar-icon {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.18), rgba(34, 211, 238, 0.18));
    border: 1px solid rgba(34, 211, 238, 0.3);
    color: #a5f3fc;
}
.inst__pillar--vision .inst__pillar-icon  { background: linear-gradient(135deg, rgba(34, 211, 238, 0.18), rgba(6, 182, 212, 0.18)); }
.inst__pillar--values .inst__pillar-icon  { background: linear-gradient(135deg, rgba(6, 182, 212, 0.18), rgba(16, 185, 129, 0.18)); color: #67e8f9; }
.inst__pillar-label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(226, 232, 240, 0.72);
}
.inst__pillar-text {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.65;
    color: rgba(203, 213, 225, 0.84);
}

.inst__values {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 11px;
}
.inst__values li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.93rem;
    color: rgba(226, 232, 240, 0.88);
    font-weight: 500;
    letter-spacing: 0.005em;
}
.inst__values-bullet {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, #06b6d4, #10b981);
    box-shadow: 0 0 8px rgba(6, 182, 212, 0.6);
    flex-shrink: 0;
}

/* ================== DIFERENCIAIS ESTRATÉGICOS ================== */
.inst__diffs-block {
    margin-top: 90px;
}
.inst__diffs-header {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 36px;
}
.inst__diffs-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.3), transparent);
}
.inst__diffs-title {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: #a5f3fc;
    white-space: nowrap;
}

.inst__diffs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.inst__diff {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 22px 22px;
    border-radius: 14px;
    background: linear-gradient(160deg, rgba(15, 23, 42, 0.45), rgba(10, 14, 24, 0.25));
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.inst__diff:hover {
    transform: translateY(-3px);
    border-color: rgba(34, 211, 238, 0.3);
    background: linear-gradient(160deg, rgba(15, 23, 42, 0.7), rgba(10, 14, 24, 0.45));
}
.inst__diff-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.16), rgba(34, 211, 238, 0.16));
    border: 1px solid rgba(34, 211, 238, 0.25);
    color: #a5f3fc;
    flex-shrink: 0;
    transition: transform 0.35s ease, color 0.3s ease;
}
.inst__diff:hover .inst__diff-icon {
    transform: scale(1.06);
    color: #ffffff;
}
.inst__diff-title {
    margin: 0 0 4px;
    font-size: 0.94rem;
    font-weight: 700;
    color: #f1f5f9;
    letter-spacing: -0.005em;
}
.inst__diff-desc {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.55;
    color: rgba(203, 213, 225, 0.7);
}

/* ================== FRASE INSTITUCIONAL DE IMPACTO ================== */
.inst__quote {
    position: relative;
    margin: 100px auto 0;
    max-width: 880px;
    padding: 56px 44px 40px;
    border-radius: 20px;
    background:
        radial-gradient(ellipse at top, rgba(6, 182, 212, 0.1), transparent 60%),
        linear-gradient(160deg, rgba(15, 23, 42, 0.6), rgba(10, 14, 24, 0.35));
    border: 1px solid rgba(6, 182, 212, 0.18);
    backdrop-filter: blur(18px);
    text-align: center;
    overflow: hidden;
    isolation: isolate;
}
.inst__quote::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 140px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #06b6d4, #22d3ee, transparent);
}
.inst__quote-mark {
    position: absolute;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 6rem;
    font-weight: 700;
    line-height: 1;
    color: rgba(6, 182, 212, 0.25);
    user-select: none;
    pointer-events: none;
}
.inst__quote-mark--open  { top: 18px; left: 32px; }
.inst__quote-mark--close { bottom: 30px; right: 32px; }

.inst__quote-text {
    margin: 0 auto;
    max-width: 680px;
    font-size: clamp(1.2rem, 2.4vw, 1.85rem);
    line-height: 1.4;
    font-weight: 600;
    color: #f8fafc;
    letter-spacing: -0.015em;
}
.inst__quote-emph {
    background: linear-gradient(135deg, #06b6d4, #22d3ee 50%, #06b6d4);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}
.inst__quote-source {
    margin-top: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.55);
}
.inst__quote-line {
    width: 32px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.5));
}

/* ================== RESPONSIVO ================== */
@media (max-width: 1100px) {
    .inst__pillars { grid-template-columns: 1fr; }
    .inst__diffs   { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
    .inst__pillars { gap: 16px; margin-top: 60px; }
    .inst__pillar  { padding: 28px 24px; }
    .inst__diffs-block { margin-top: 60px; }
    .inst__diffs-header { gap: 14px; margin-bottom: 26px; }
    .inst__diffs-title { font-size: 0.74rem; letter-spacing: 0.22em; }
    .inst__diffs { grid-template-columns: 1fr; gap: 14px; }
    .inst__quote { margin-top: 64px; padding: 44px 24px 32px; }
    .inst__quote-mark { font-size: 4rem; }
    .inst__quote-mark--open  { top: 12px; left: 18px; }
    .inst__quote-mark--close { bottom: 18px; right: 18px; }
}

/* ============================================================
   LIGHT THEME Overrides finais para corrigir hardcoded whites
   ============================================================ */

/* CTI topbar (tela de Threat Intel) */
[data-theme="light"] .cti-topbar-desc { color: var(--text-secondary); }

/* Platform panel title (cards internos de plataforma) */
[data-theme="light"] .platform-panel-title { color: var(--text-primary); }

/* Plat-card dentro do dropdown da navbar:
   o fundo do dropdown (.platform-menu-inner) é SEMPRE escuro,
   portanto mantemos texto branco em ambos os temas sem override. */

/* Sol default card hover state visible em light mode */
[data-theme="light"] .sol-default-card:hover .sol-default-card-name { color: var(--accent); }

/* Sol detail item active state em light mode */
[data-theme="light"] .sol-detail-item.active .sol-detail-name { color: var(--accent); }

/* Sol default hint pulse text */
[data-theme="light"] .sol-default-hint { color: var(--text-muted); }

/* ============================================================
   LIGHT THEME Página /sobre/ (classes .inst__*)
   ============================================================ */

/* Headline + intro */
[data-theme="light"] .inst__headline { color: #0f172a; }
[data-theme="light"] .inst__subheadline { color: rgba(30, 41, 59, 0.80); }
[data-theme="light"] .inst__subheadline strong { color: #0f172a; }
[data-theme="light"] .inst__tag {
    border-color: rgba(34, 211, 238, 0.30);
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.10), rgba(6, 182, 212, 0.08));
    color: #0e7490;
}

/* Statement (bloco central) */
[data-theme="light"] .inst__statement {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(248, 250, 252, 0.70));
    border-color: rgba(34, 211, 238, 0.20);
}
[data-theme="light"] .inst__statement-text { color: rgba(30, 41, 59, 0.85); }

/* Cards estratégicos */
[data-theme="light"] .inst__card {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.90) 0%, rgba(248, 250, 252, 0.75) 100%);
    border-color: rgba(15, 23, 42, 0.08);
}
[data-theme="light"] .inst__card-title { color: #0f172a; }
[data-theme="light"] .inst__card-desc { color: rgba(30, 41, 59, 0.72); }
[data-theme="light"] .inst__card-marker { color: rgba(71, 85, 105, 0.55); }
[data-theme="light"] .inst__card:hover .inst__card-icon { color: #0e7490; }

/* Pilares (Missão / Visão / Valores) */
[data-theme="light"] .inst__pillar {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.92) 0%, rgba(248, 250, 252, 0.78) 100%);
    border-color: rgba(15, 23, 42, 0.08);
}
[data-theme="light"] .inst__pillar:hover { border-color: rgba(34, 211, 238, 0.30); }
[data-theme="light"] .inst__pillar-label { color: rgba(30, 41, 59, 0.70); }
[data-theme="light"] .inst__pillar-text { color: rgba(30, 41, 59, 0.80); }
[data-theme="light"] .inst__values li { color: rgba(15, 23, 42, 0.85); }

/* Diferenciais */
[data-theme="light"] .inst__diffs-title { color: #0e7490; }
[data-theme="light"] .inst__diff {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.75), rgba(248, 250, 252, 0.55));
    border-color: rgba(15, 23, 42, 0.06);
}
[data-theme="light"] .inst__diff:hover {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.80));
    border-color: rgba(34, 211, 238, 0.32);
}
[data-theme="light"] .inst__diff:hover .inst__diff-icon { color: #0e7490; }
[data-theme="light"] .inst__diff-title { color: #0f172a; }
[data-theme="light"] .inst__diff-desc { color: rgba(30, 41, 59, 0.72); }

/* Quote */
[data-theme="light"] .inst__quote {
    background:
        radial-gradient(ellipse at top, rgba(6, 182, 212, 0.08), transparent 60%),
        linear-gradient(160deg, rgba(255, 255, 255, 0.85), rgba(248, 250, 252, 0.65));
    border-color: rgba(6, 182, 212, 0.22);
}
[data-theme="light"] .inst__quote-text { color: #0f172a; }
[data-theme="light"] .inst__quote-source { color: rgba(71, 85, 105, 0.70); }
[data-theme="light"] .inst__quote-mark { color: rgba(6, 182, 212, 0.22); }

/* Grid decorativo (fundo) mais sutil em light mode */
[data-theme="light"] .inst__grid {
    background-image:
        linear-gradient(rgba(34, 211, 238, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(34, 211, 238, 0.08) 1px, transparent 1px);
    opacity: 0.4;
}
[data-theme="light"] .inst__glow--1 {
    background: radial-gradient(circle, rgba(6, 182, 212, 0.25), transparent 65%);
}
[data-theme="light"] .inst__glow--2 {
    background: radial-gradient(circle, rgba(6, 182, 212, 0.22), transparent 65%);
}

/* ============================================================
   LIGHT THEME Polish profissional global
   Acabamento: elevation, contraste, hierarquia visual
   ============================================================ */

/* Caixas-mãe (section-box / platform-box / kpi-dashboard-box) elevation maior */
[data-theme="light"] .section-box,
[data-theme="light"] .platform-box,
[data-theme="light"] .kpi-dashboard-box {
    background: #ffffff;
    border-color: rgba(15,23,42,0.10);
    box-shadow:
        0 1px 2px rgba(15,23,42,0.04),
        0 8px 32px rgba(15,23,42,0.06),
        0 24px 60px rgba(15,23,42,0.05);
}

/* ===== KPI Dashboard ===== */
[data-theme="light"] .kpi-section {
    background: #f1f4f9;
}
[data-theme="light"] .kpi-gauge-card,
[data-theme="light"] .kpi-bar-card {
    background: #ffffff;
    border-color: rgba(15,23,42,0.08);
    box-shadow:
        0 1px 2px rgba(15,23,42,0.04),
        0 4px 14px rgba(15,23,42,0.05);
}
[data-theme="light"] .kpi-gauge-card:hover,
[data-theme="light"] .kpi-bar-card:hover {
    border-color: rgba(6,182,212,0.35);
    box-shadow:
        0 8px 28px rgba(6,182,212,0.10),
        0 2px 6px rgba(15,23,42,0.06);
}
[data-theme="light"] .kpi-gauge-bg { stroke: rgba(15,23,42,0.08); }
[data-theme="light"] .kpi-gauge-num { color: #0b1220; }
[data-theme="light"] .kpi-gauge-suffix { color: #64748b; }
[data-theme="light"] .kpi-gauge-label { color: #334155; font-weight: 500; }
[data-theme="light"] .kpi-bar-value { color: #0b1220; }
[data-theme="light"] .kpi-bar-label { color: #475569; font-weight: 500; }
[data-theme="light"] .kpi-bar-tag {
    background: rgba(15,23,42,0.06);
    color: #334155;
    font-weight: 700;
}
[data-theme="light"] .kpi-bar-track { background: rgba(15,23,42,0.06); }

/* ===== Academy Cards ===== */
[data-theme="light"] .academy-card {
    background: #ffffff;
    border-color: rgba(15,23,42,0.09);
    box-shadow:
        0 1px 2px rgba(15,23,42,0.04),
        0 6px 18px rgba(15,23,42,0.05);
}
[data-theme="light"] .academy-card:hover {
    border-color: rgba(6,182,212,0.30);
    box-shadow:
        0 12px 32px rgba(6,182,212,0.10),
        0 4px 12px rgba(15,23,42,0.06);
}
[data-theme="light"] .academy-card-title { color: #0b1220; }
[data-theme="light"] .academy-card-desc { color: #475569; font-weight: 500; }
[data-theme="light"] .academy-card-list li { color: #334155; font-weight: 500; }
[data-theme="light"] .academy-card-btn {
    background: #f8fafc;
    border-color: rgba(15,23,42,0.10);
    color: #0b1220;
}
[data-theme="light"] .academy-desc { color: #475569; }

/* ===== Partners ===== */
[data-theme="light"] .partners-section { background: #f1f4f9; }
[data-theme="light"] .partner-slide {
    background: #ffffff;
    border-color: rgba(15,23,42,0.08);
    box-shadow:
        0 1px 2px rgba(15,23,42,0.04),
        0 4px 14px rgba(15,23,42,0.05);
}
[data-theme="light"] .partner-slide:hover {
    border-color: rgba(6,182,212,0.30);
    box-shadow:
        0 12px 32px rgba(6,182,212,0.10),
        0 4px 12px rgba(15,23,42,0.06);
}
[data-theme="light"] .partner-name { color: #0b1220; }
[data-theme="light"] .partner-desc { color: #475569; font-weight: 500; }

/* ===== Testimonials ===== */
[data-theme="light"] .testimonials-section { background: #ffffff; }

/* ===== About / Stats ===== */
[data-theme="light"] .about-stat {
    background: #ffffff;
    border-color: rgba(15,23,42,0.08);
    box-shadow:
        0 1px 2px rgba(15,23,42,0.04),
        0 4px 14px rgba(15,23,42,0.05);
}
[data-theme="light"] .stat-label { color: #475569; font-weight: 500; }
[data-theme="light"] .about-text p { color: #475569; }

/* ===== Section heading texts ===== */
[data-theme="light"] .section-title { color: #0b1220; }
[data-theme="light"] .section-subtitle,
[data-theme="light"] .section-desc { color: #475569; font-weight: 500; }

/* ===== Section tag (small uppercase pill) ===== */
[data-theme="light"] .section-tag {
    background: rgba(6,182,212,0.08);
    border: 1px solid rgba(6,182,212,0.20);
    color: #0891b2;
    font-weight: 700;
}

/* ===== Topbar text contrast ===== */
[data-theme="light"] .platform-topbar {
    background: #f8fafc;
    border-bottom: 1px solid rgba(15,23,42,0.08);
}
[data-theme="light"] .platform-topbar-tag { color: #0891b2; }
[data-theme="light"] .platform-topbar-title { color: #334155; font-weight: 500; }
[data-theme="light"] .platform-topbar-sep { color: rgba(15,23,42,0.20); }

/* ===== Solution tabs (left rail) ===== */
[data-theme="light"] .platform-tabs { background: #f8fafc; border-right: 1px solid rgba(15,23,42,0.06); }
[data-theme="light"] .platform-tab { color: #475569; font-weight: 500; }
[data-theme="light"] .platform-tab:hover { color: #0b1220; background: rgba(6,182,212,0.04); }
[data-theme="light"] .platform-tab.active {
    background: rgba(6,182,212,0.08);
    color: #0891b2;
    font-weight: 700;
}

/* ===== Cards genéricos com bg-surface ===== */
[data-theme="light"] .academy-subtitle-tag {
    background: rgba(249,115,22,0.10);
    border-color: rgba(249,115,22,0.30);
    color: #c2410c;
}

/* ===== News / Articles cards (Últimas Novidades) ===== */
[data-theme="light"] .news-card,
[data-theme="light"] .news-item {
    background: #ffffff;
    border-color: rgba(15,23,42,0.08);
    box-shadow:
        0 1px 2px rgba(15,23,42,0.04),
        0 6px 18px rgba(15,23,42,0.05);
}
[data-theme="light"] .news-card:hover,
[data-theme="light"] .news-item:hover {
    border-color: rgba(6,182,212,0.25);
    box-shadow:
        0 14px 36px rgba(6,182,212,0.10),
        0 4px 12px rgba(15,23,42,0.06);
}
[data-theme="light"] .news-title { color: #0b1220; }
[data-theme="light"] .news-excerpt,
[data-theme="light"] .news-meta { color: #475569; }

/* ===== Endereços / cards de localização ===== */
[data-theme="light"] .address-card,
[data-theme="light"] .location-card {
    background: #ffffff;
    border-color: rgba(15,23,42,0.08);
    box-shadow:
        0 1px 2px rgba(15,23,42,0.04),
        0 6px 18px rgba(15,23,42,0.05);
}

/* ===== Newsletter (Fique por dentro) ===== */
[data-theme="light"] .newsletter-section,
[data-theme="light"] .newsletter-box {
    background: linear-gradient(135deg, #faf7ff 0%, #f0f4ff 100%);
    border-color: rgba(6,182,212,0.20);
}
[data-theme="light"] .newsletter-title,
[data-theme="light"] .newsletter-headline { color: #0b1220; }
[data-theme="light"] .newsletter-desc { color: #475569; }
[data-theme="light"] .newsletter-input,
[data-theme="light"] input[type="email"] {
    background: #ffffff;
    border: 1px solid rgba(15,23,42,0.12);
    color: #0b1220;
}
[data-theme="light"] .newsletter-input::placeholder,
[data-theme="light"] input[type="email"]::placeholder { color: #94a3b8; }

/* ===== Section background variation: contraste sutil entre seções alternadas ===== */
[data-theme="light"] .ds-section--alt,
[data-theme="light"] .partners-section,
[data-theme="light"] .kpi-section { background: #f1f4f9; }

/* =====================================================================
   CAMADA ESTÉTICA "UNDERGROUND / MILITAR"
   Ciano + preto/branco · tipografia tática · grid · scanline · HUD
   ===================================================================== */

/* --- Tipografia de display (títulos) e mono (labels/HUD) --- */
.hero-title,
.section-title,
.section-title .gradient-text,
.ds-section-title,
.kpi-title,
.academy-section-title,
h1, h2 {
    font-family: var(--ds-font-family-display, 'Chakra Petch', sans-serif);
    letter-spacing: -0.01em;
    text-transform: none;
}

.section-tag,
.nav-link-text,
.topbar-link,
.topbar-lang-btn,
.plat-card-badge,
.mega-cat span,
.platform-tag,
.kpi-tag,
.hero-eyebrow,
.hud-label {
    font-family: var(--ds-font-family-mono, 'JetBrains Mono', monospace) !important;
    text-transform: uppercase;
    letter-spacing: 0.16em;
}

/* eyebrow das seções com marcadores táticos [ … ] */
.section-tag {
    letter-spacing: 0.22em;
    font-size: 11px;
}
.section-tag::before { content: '[ '; }
.section-tag::after  { content: ' ]'; }

/* --- Grid + scanline globais (sutil, fixo, atrás do conteúdo) --- */
body {
    background-image:
        linear-gradient(var(--ds-grid-line, rgba(6,182,212,0.06)) 1px, transparent 1px),
        linear-gradient(90deg, var(--ds-grid-line, rgba(6,182,212,0.06)) 1px, transparent 1px);
    background-size: var(--ds-grid-size, 38px) var(--ds-grid-size, 38px);
    background-position: center top;
    background-attachment: fixed;
}
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    background: repeating-linear-gradient(
        0deg,
        transparent 0,
        transparent 2px,
        var(--ds-scanline, rgba(6,182,212,0.04)) 3px,
        transparent 4px
    );
    mix-blend-mode: screen;
    opacity: 0.6;
}
[data-theme="light"] body::after { mix-blend-mode: multiply; opacity: 0.4; }

/* textura de grid também dentro dos cards grandes de seção */
.section-box {
    background-color: var(--bg-card);
    background-image:
        linear-gradient(var(--ds-grid-line, rgba(6,182,212,0.06)) 1px, transparent 1px),
        linear-gradient(90deg, var(--ds-grid-line, rgba(6,182,212,0.06)) 1px, transparent 1px);
    background-size: var(--ds-grid-size, 38px) var(--ds-grid-size, 38px);
    border-radius: 4px;
    border-top: 2px solid var(--ds-color-border-brand, rgba(6,182,212,0.35));
}
.section-border-glow { border-radius: 4px; }

/* --- Top bar = barra de comando --- */
.topbar {
    border-bottom: 1px solid rgba(6,182,212,0.16);
}
.topbar-link {
    font-size: 11px;
    letter-spacing: 0.14em;
}
.topbar-sep { color: rgba(6,182,212,0.45); }

/* --- Nav links táticos --- */
.nav-link-text { font-size: 12px; }
.nav-link-glow {
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--ds-color-brand-secondary, #22d3ee), transparent);
    box-shadow: 0 0 8px rgba(34,211,238,0.6);
}

/* --- Botões: mantidos, com recorte tático + glow ciano --- */
.pill-btn,
.ds-btn,
.portal-btn,
.academy-card-btn {
    border-radius: 3px !important;
    font-family: var(--ds-font-family-mono, 'JetBrains Mono', monospace);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.pill-btn,
.portal-btn {
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.pill-btn:hover,
.portal-btn:hover,
.ds-btn:hover {
    box-shadow: 0 0 22px rgba(34,211,238,0.45), inset 0 0 0 1px rgba(34,211,238,0.5);
}

/* --- Logo central: leve glitch ao passar o mouse --- */
@keyframes hudGlitch {
    0%, 100% { transform: translate(0,0); filter: drop-shadow(0 0 10px rgba(34,211,238,0.22)); }
    25%      { transform: translate(-1px,1px); }
    50%      { transform: translate(1px,-1px); filter: drop-shadow(0 0 16px rgba(34,211,238,0.5)); }
    75%      { transform: translate(-1px,-1px); }
}
.logo-link--center:hover .logo-img { animation: hudGlitch 0.45s steps(2) 1; }

@media (prefers-reduced-motion: reduce) {
    .logo-link--center:hover .logo-img { animation: none; }
    body::after { display: none; }
}

/* --- Ajustes de coesão modo claro --- */
[data-theme="light"] .newsletter-section,
[data-theme="light"] .newsletter-box {
    background: linear-gradient(135deg, #f4feff 0%, #eafaff 100%);
    border-color: rgba(8,145,178,0.22);
}

/* --- Cabeçalho: chrome de comando sempre legível sobre o hero --- */
.navbar {
    top: 38px;
    background: var(--bg-navbar);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(34,211,238,0.18);
}
.navbar-scrolled {
    box-shadow: 0 8px 30px rgba(0,0,0,0.45);
    border-bottom-color: rgba(34,211,238,0.35);
}
.topbar {
    border-bottom: 1px solid rgba(34,211,238,0.14);
}

/* Portal do Cliente: rótulo em uma linha (mono é mais largo) */
.portal-btn {
    white-space: nowrap;
    align-self: center;
}
.portal-btn-text { white-space: nowrap; }
.nav-side--right .nav-right { align-items: center; }

/* Nav links: contraste e respiro */
.nav-link {
    padding: 9px 13px;
}
.nav-links--left,
.nav-links--right { gap: 2px; }

/* Compactação para o layout simétrico caber sem sobrepor a logo */
.navbar { padding: 10px 26px; column-gap: 20px; }
.nav-link { padding: 8px 9px; }
.nav-link-text { font-size: 11px; letter-spacing: 0.1em; }
.nav-links--left,
.nav-links--right { gap: 0; }
.nav-side--right { gap: 8px; }
.logo-frame { padding: 6px 16px; }
.logo-img { height: 34px; }
.notif-bell { padding: 7px; }
.portal-btn {
    padding: 9px 15px !important;
    font-size: 11px;
    letter-spacing: 0.05em;
}

@media (max-width: 1240px) {
    .navbar { padding: 10px 16px; column-gap: 12px; }
    .nav-link-text { font-size: 10px; letter-spacing: 0.07em; }
    .nav-link { padding: 8px 7px; }
    .logo-img { height: 30px; }
    .portal-btn { padding: 8px 11px !important; }
}

/* Abaixo disso o menu vira hamburguer (evita aperto no layout central) */
@media (max-width: 1024px) {
    .nav-links--left,
    .nav-links--right { display: none; }
    .portal-btn { display: none; }
    .mobile-menu-btn { display: flex; }
    .navbar { grid-template-columns: 1fr auto 1fr; }
}

/* Responsivo: logo permanece centralizada */
@media (max-width: 768px) {
    .navbar { column-gap: 12px; top: 0; padding: 10px 16px; }
    .logo-frame { padding: 6px 12px; }
    .section-box { padding: 24px 18px; }
}

/* =====================================================================
   AJUSTES — RODADA 2 (feedback do usuário)
   ===================================================================== */

/* 1. Hero: remover as bordas/cantos verdes tipo overlay de câmera.
      O scan (hud-scanline) permanece — agora em ciano. */
.hud-corner { display: none !important; }

/* 2. Botões do hero: contorno unificado (antes 1 branco + 1 vazio).
      Agora os dois são "táticos ciano": primário com leve preenchimento
      e glow, secundário fantasma — mesmo contorno. */
.pill-btn,
.pill-btn-light,
.pill-btn-outline {
    border-radius: 3px !important;
    border: 1px solid rgba(34,211,238,0.55) !important;
    background: rgba(34,211,238,0.04) !important;
}
.pill-btn .pill-btn-inner {
    border-radius: 2px;
    background: transparent !important;
    color: var(--text-primary) !important;
    font-family: var(--ds-font-family-mono, 'JetBrains Mono', monospace);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.pill-btn-light {
    background: linear-gradient(135deg, rgba(6,182,212,0.22), rgba(34,211,238,0.14)) !important;
    box-shadow: 0 0 18px rgba(34,211,238,0.25);
}
.pill-btn-light .pill-btn-inner { color: #eafdff !important; font-weight: 600; }
.pill-btn:hover {
    border-color: rgba(34,211,238,0.95) !important;
    box-shadow: 0 0 22px rgba(34,211,238,0.45), inset 0 0 0 1px rgba(34,211,238,0.4) !important;
}

/* 3. SmartSEC — "Solicitar Proposta": vermelho/laranja -> ciano tático */
.platform-topbar-cta {
    background: linear-gradient(135deg, #06b6d4, #22d3ee) !important;
    color: #04181d !important;
    border-radius: 3px !important;
    box-shadow: 0 0 16px rgba(34,211,238,0.35) !important;
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.platform-topbar-cta:hover {
    background: linear-gradient(135deg, #22d3ee, #67e8f9) !important;
    box-shadow: 0 0 26px rgba(34,211,238,0.6) !important;
    transform: translateY(-2px);
}

/* 4. SmartSEC — remover o texto/pulso "Selecione uma categoria…" */
.sol-default-hint { display: none !important; }

/* 5. Hover dos menus: o decode (JS scramble) já roda; reforço com um
      leve "chiado / estática se corrigindo" via flicker cromático. */
@keyframes navStatic {
    0%   { text-shadow: -1px 0 rgba(34,211,238,0.7), 1px 0 rgba(6,182,212,0.5); clip-path: inset(0 0 60% 0); }
    20%  { clip-path: inset(40% 0 20% 0); }
    40%  { text-shadow: 1px 0 rgba(34,211,238,0.6), -1px 0 rgba(6,182,212,0.4); clip-path: inset(10% 0 50% 0); }
    60%  { clip-path: inset(55% 0 10% 0); }
    80%  { text-shadow: -1px 0 rgba(34,211,238,0.5); clip-path: inset(20% 0 30% 0); }
    100% { text-shadow: none; clip-path: inset(0 0 0 0); }
}
.nav-link:hover .nav-link-text { animation: navStatic 0.42s steps(2,end) 1; }

@media (prefers-reduced-motion: reduce) {
    .nav-link:hover .nav-link-text { animation: none; }
}

/* =====================================================================
   8. CERTIFICAÇÕES — layout circular (estilo menu Apple Watch)
   ===================================================================== */
.certs-orbit {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 0 36px;
    overflow: visible;
}
.certs-orbit-stage {
    position: relative;
    width: min(700px, 93vw);
    height: min(700px, 93vw);
    transform: rotate(var(--orbit-rot, 0deg));
    will-change: transform;
}
.certs-orbit-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    border: 1px dashed rgba(34, 211, 238, 0.16);
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.certs-orbit-ring--1 { width: 41%;  height: 41%; }
.certs-orbit-ring--2 { width: 82%;  height: 82%; border-style: solid; border-color: rgba(34,211,238,0.10); }

.certs-orbit-hub {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    transform: translate(-50%, -50%) rotate(calc(-1 * var(--orbit-rot, 0deg)));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 38%, rgba(34,211,238,0.20), rgba(6,182,212,0.04));
    border: 1px solid rgba(34, 211, 238, 0.45);
    box-shadow: 0 0 44px rgba(34,211,238,0.28), inset 0 0 30px rgba(34,211,238,0.10);
}
.certs-orbit-num {
    font-family: var(--ds-font-family-display, 'Chakra Petch', sans-serif);
    font-size: 46px;
    font-weight: 700;
    color: #22d3ee;
    line-height: 1;
    text-shadow: 0 0 18px rgba(34,211,238,0.5);
}
.certs-orbit-cap {
    font-family: var(--ds-font-family-mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 6px;
}
.certs-orbit-stage .cert-slide {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 104px;
    height: 104px;
    margin: 0;
    padding: 0;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: 0 0 12px rgba(34, 211, 238, 0.16);
    transform: translate(-50%, -50%) rotate(calc(-1 * var(--orbit-rot, 0deg)));
    transition: border-color 0.25s, box-shadow 0.25s, transform 0.2s var(--ds-ease-emphasize, cubic-bezier(0.22,1,0.36,1));
    cursor: pointer;
}
.certs-orbit-stage .cert-slide:hover {
    border-color: rgba(34, 211, 238, 0.9);
    box-shadow: 0 0 26px rgba(34, 211, 238, 0.5);
    transform: translate(-50%, -50%) rotate(calc(-1 * var(--orbit-rot, 0deg))) scale(1.12);
    z-index: 6;
}
/* O círculo recorta o PNG (máscara) e a imagem preenche todo o círculo */
.certs-orbit-stage .certs-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    filter: none;
}

@media (max-width: 560px) {
    .certs-orbit-stage .cert-slide { width: 74px; height: 74px; }
    .certs-orbit-hub { width: 118px; height: 118px; }
    .certs-orbit-num { font-size: 34px; }
}

/* =====================================================================
   9. Seções mais centralizadas + fonte "Roboto" operacional em partes
   ===================================================================== */
/* Cabeçalhos de seção centralizados, info ao redor */
.section-header {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.section-subtitle { margin-left: auto; margin-right: auto; }

/* Tipografia operacional: corpo em Roboto, telemetria em Roboto Mono.
   Títulos seguem Chakra Petch; labels/eyebrows seguem JetBrains Mono. */
body,
.soc-hero-sub,
.section-subtitle,
p {
    font-family: 'Roboto', 'General Sans', -apple-system, 'Segoe UI', sans-serif;
}
.kpi-gauge-num,
.kpi-gauge-suffix,
.kpi-bar-value,
.hud-value,
.hud-minibar-pct,
.cti-slot,
.cti-feed-time,
[id^="t10-"],
[id^="ta-"],
.hud-sparkline {
    font-family: 'Roboto Mono', 'JetBrains Mono', monospace !important;
    font-feature-settings: "tnum" 1;
}

/* =====================================================================
   SmartSEC — efeito "vidro líquido" que materializa no hover
   nos módulos i@DEFENSE / i@INTEL / i@RISK / i@CLOUD / i@DEV / ...
   ===================================================================== */
.sol-default-card {
    isolation: isolate;
    background: rgba(255,255,255,0.02);
}

/* Camada de vidro fosco que aparece (materializa) ao passar o mouse.
   O brilho radial segue o cursor via --mx/--my (definidos no JS). */
.sol-default-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%),
            rgba(255,255,255,0.22), rgba(255,255,255,0.04) 45%, transparent 65%),
        linear-gradient(135deg, rgba(34,211,238,0.16), rgba(6,182,212,0.05));
    -webkit-backdrop-filter: blur(7px) saturate(1.7);
    backdrop-filter: blur(7px) saturate(1.7);
    opacity: 0;
    transform: scale(1.05);
    transition: opacity 0.4s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 0;
    pointer-events: none;
}
.sol-default-card:hover::before {
    opacity: 1;
    transform: scale(1);
}

/* Reflexo especular "líquido" que varre o card no hover */
.sol-default-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(115deg,
        transparent 32%,
        rgba(255,255,255,0.28) 47%,
        rgba(255,255,255,0.06) 53%,
        transparent 70%);
    opacity: 0;
    transform: translateX(-75%);
    z-index: 0;
    pointer-events: none;
    mix-blend-mode: screen;
}
.sol-default-card:hover::after {
    opacity: 1;
    animation: solGlassSheen 1.15s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes solGlassSheen {
    0%   { transform: translateX(-75%); }
    100% { transform: translateX(75%); }
}

/* Borda/realce de vidro ao passar o mouse */
.sol-default-card:hover {
    border-color: rgba(255,255,255,0.24);
    background: rgba(255,255,255,0.05);
    box-shadow:
        0 10px 30px rgba(6,182,212,0.20),
        inset 0 1px 0 rgba(255,255,255,0.28),
        inset 0 0 24px rgba(34,211,238,0.10);
}

/* Modo claro: vidro com tinta ciano um pouco mais densa */
[data-theme="light"] .sol-default-card::before {
    background:
        radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%),
            rgba(255,255,255,0.65), rgba(255,255,255,0.15) 45%, transparent 65%),
        linear-gradient(135deg, rgba(8,145,178,0.18), rgba(34,211,238,0.07));
}
[data-theme="light"] .sol-default-card:hover {
    border-color: rgba(8,145,178,0.35);
    box-shadow:
        0 10px 30px rgba(8,145,178,0.16),
        inset 0 1px 0 rgba(255,255,255,0.7),
        inset 0 0 24px rgba(34,211,238,0.10);
}

@media (prefers-reduced-motion: reduce) {
    .sol-default-card:hover::after { animation: none; }
    .sol-default-card::before { transition: opacity 0.2s; transform: none; }
}

/* =====================================================================
   Hero: fade na base da imagem (transição suave para a próxima seção)
   ===================================================================== */
.soc-full-image::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 24%;
    background: linear-gradient(to bottom,
        rgba(0,0,0,0) 0%,
        var(--bg-body) 92%,
        var(--bg-body) 100%);
    z-index: 6;
    pointer-events: none;
}

/* =====================================================================
   Colunas HUD do hero: largura FIXA (não cresce quando o número aumenta)
   ===================================================================== */
.hud-panel-left,
.hud-panel-right {
    width: 256px;
    min-width: 256px;
    max-width: 256px;
    box-sizing: border-box;
}
.hud-data-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.hud-data-row .hud-value,
.hud-data-row .hud-indicator,
.hud-data-row .hud-label {
    white-space: nowrap;
}
.hud-data-row .hud-value {
    flex: 0 0 auto;
    text-align: right;
    min-width: 64px;
    font-variant-numeric: tabular-nums;
}
.hud-data-row .hud-label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =====================================================================
   Scroll-reveal: seções aparecem dinamicamente ao rolar
   ===================================================================== */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(34px);
    transition:
        opacity 0.75s var(--ds-ease-emphasize, cubic-bezier(0.22,1,0.36,1)),
        transform 0.75s var(--ds-ease-emphasize, cubic-bezier(0.22,1,0.36,1));
    will-change: opacity, transform;
}
.reveal-on-scroll.revealed {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .reveal-on-scroll {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* =====================================================================
   CORREÇÕES DO MODO CLARO  (o modo escuro permanece intacto)
   Objetivo: branco limpo e legível, sem lavado branco no hero.
   ===================================================================== */

/* 1. Hero: no claro a foto escura NÃO some em branco.
      Ela só escurece levemente na base e encontra a seção com borda limpa. */
[data-theme="light"] .soc-full-image::after {
    height: 15%;
    background: linear-gradient(to bottom,
        rgba(5,7,10,0) 0%,
        rgba(5,7,10,0.45) 100%);
}

/* 2. Scanline CRT só faz sentido no escuro — desliga no claro */
[data-theme="light"] body::after { display: none !important; }

/* 3. Texto em degradê ciano fica quase invisível no branco.
      No claro vira ciano escuro sólido (alto contraste). */
[data-theme="light"] .gradient-text,
[data-theme="light"] .section-title .gradient-text {
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: #0e7490 !important;
    color: #0e7490 !important;
}
[data-theme="light"] .section-tag {
    background: rgba(8,145,178,0.10) !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: #0e7490 !important;
    color: #0e7490 !important;
}

/* 4. Reforço de contraste de textos no claro (apenas seções no branco) */
[data-theme="light"] .section-subtitle { color: #475569 !important; }
[data-theme="light"] .section-title { color: #0b1220 !important; }

/* 4b. Hero fica SEMPRE sobre a foto escura -> textos brancos nos 2 temas.
       (Antes a regra de <p> do claro apagava o subtítulo e o botão
        secundário usava cor escura sobre fundo escuro.) */
.soc-hero-sub,
[data-theme="light"] .soc-hero-sub {
    color: rgba(255,255,255,0.92) !important;
}
.soc-hero-buttons .pill-btn .pill-btn-inner,
.soc-hero-buttons .pill-btn-light .pill-btn-inner,
.soc-hero-buttons .pill-btn-outline .pill-btn-inner,
[data-theme="light"] .soc-hero-buttons .pill-btn .pill-btn-inner {
    color: #ffffff !important;
}

/* 5. Glow/borda de seção no claro: mais discreto, sem "sujar" o branco */
[data-theme="light"] .section-box {
    border-top-color: rgba(8,145,178,0.25);
}

/* =====================================================================
   Logo do topo conforme o tema
   claro (padrão) -> logo "modo claro"  |  escuro -> logo "modo escuro"
   ===================================================================== */
.logo-img--dark { display: none !important; }
.logo-img--light { display: block !important; }
[data-theme="dark"] .logo-img--dark { display: block !important; }
[data-theme="dark"] .logo-img--light { display: none !important; }

/* Astra: cursor de digitação por IA */
.astra-cursor {
    display: inline-block;
    margin-left: 1px;
    color: #22d3ee;
    font-weight: 700;
    animation: astraBlink 0.85s steps(2) infinite;
}
@keyframes astraBlink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .astra-cursor { animation: none; }
}

/* =====================================================================
   Vidro líquido — Parceiros e Depoimentos
   Fundo semi-opaco (não 100% transparente) + leve brilho azul
   ===================================================================== */
.partner-slide,
.test-card {
    background: rgba(18, 26, 36, 0.38) !important;
    -webkit-backdrop-filter: blur(9px) saturate(1.2);
    backdrop-filter: blur(9px) saturate(1.2);
    border-color: rgba(34, 211, 238, 0.16);
    box-shadow: 0 0 9px rgba(34, 211, 238, 0.07), 0 10px 28px rgba(0, 0, 0, 0.28);
}
.partner-slide:hover,
.test-card:hover,
.test-card.active:hover {
    box-shadow: 0 0 13px rgba(34, 211, 238, 0.14), 0 14px 34px rgba(0, 0, 0, 0.36);
    border-color: rgba(34, 211, 238, 0.34);
}
[data-theme="light"] .partner-slide,
[data-theme="light"] .test-card {
    background: rgba(255, 255, 255, 0.45) !important;
    border-color: rgba(8, 145, 178, 0.18);
    box-shadow: 0 0 9px rgba(8, 145, 178, 0.07), 0 10px 26px rgba(15, 23, 42, 0.07);
}
[data-theme="light"] .partner-slide:hover,
[data-theme="light"] .test-card:hover {
    box-shadow: 0 0 13px rgba(8, 145, 178, 0.13), 0 14px 32px rgba(15, 23, 42, 0.11);
    border-color: rgba(8, 145, 178, 0.34);
}

/* Portal do Cliente: no hover o fundo vira ciano claro -> texto escuro
   pra não sumir (alto contraste em ambos os temas) */
.portal-btn:hover,
.portal-btn:hover .portal-btn-text,
.portal-btn:hover .portal-btn-text svg {
    color: #04181d !important;
}
.portal-btn:hover .portal-btn-text { position: relative; z-index: 2; }

/* =====================================================================
   Barra de cookies com efeito de "poeira" (SVG feTurbulence + feDisplacementMap)
   Inspirado no banner do hakaisecurity.io, em cores nossas (ciano underground)
   ===================================================================== */
#cookie-popup {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9500;
    padding: 22px 0;
    background: #05070a;
    border-top: 1px solid rgba(34, 211, 238, 0.55);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.55), 0 -1px 0 rgba(34, 211, 238, 0.10);
    color: rgba(255, 255, 255, 0.92);
    font-family: 'Roboto', 'General Sans', sans-serif;
    filter: url(#cookie-noise);
    -webkit-filter: url(#cookie-noise);
    transform: translateY(110%);
    animation: cookieSlideUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
    will-change: transform;
}
#cookie-popup.cookie-out {
    animation: cookieSlideDown 0.55s cubic-bezier(0.4, 0, 0.7, 0.2) forwards;
}
@keyframes cookieSlideUp   { from { transform: translateY(110%); } to { transform: translateY(0); } }
@keyframes cookieSlideDown { from { transform: translateY(0); }     to { transform: translateY(120%); } }

.cookie-popup-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
#cookie-popup p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    flex: 1 1 360px;
    color: rgba(255, 255, 255, 0.86);
}
#cookie-popup p a {
    color: #22d3ee;
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px dashed rgba(34, 211, 238, 0.5);
    transition: color 0.2s, border-color 0.2s;
}
#cookie-popup p a:hover {
    color: #67e8f9;
    border-bottom-color: #67e8f9;
}
.cookie-popup-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}
.cookie-decline {
    background: transparent;
    color: rgba(255, 255, 255, 0.78);
    border: 1px solid transparent;
    padding: 11px 16px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-family: var(--ds-font-family-mono, 'JetBrains Mono', monospace);
    border-radius: 3px;
    transition: color 0.25s, border-color 0.25s;
}
.cookie-decline:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.22);
}
.cookie-accept {
    background: linear-gradient(135deg, #06b6d4, #22d3ee);
    color: #04181d;
    border: none;
    padding: 12px 26px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    font-family: var(--ds-font-family-mono, 'JetBrains Mono', monospace);
    border-radius: 3px;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    box-shadow: 0 0 18px rgba(34, 211, 238, 0.35);
    transition: box-shadow 0.25s, transform 0.2s;
}
.cookie-accept:hover {
    background: linear-gradient(135deg, #22d3ee, #67e8f9);
    box-shadow: 0 0 28px rgba(34, 211, 238, 0.6);
    transform: translateY(-1px);
}

[data-theme="light"] #cookie-popup {
    background: #ffffff;
    color: #0f172a;
    border-top-color: rgba(8, 145, 178, 0.65);
    box-shadow: 0 -8px 32px rgba(15, 23, 42, 0.18), 0 -1px 0 rgba(8, 145, 178, 0.15);
}
[data-theme="light"] #cookie-popup p { color: #1e293b; }
[data-theme="light"] #cookie-popup p a { color: #0e7490; border-bottom-color: rgba(8, 145, 178, 0.5); }
[data-theme="light"] #cookie-popup p a:hover { color: #155e75; }
[data-theme="light"] .cookie-decline { color: rgba(15, 23, 42, 0.7); }
[data-theme="light"] .cookie-decline:hover { color: #0f172a; border-color: rgba(15, 23, 42, 0.2); }

@media (max-width: 768px) {
    .cookie-popup-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 0 18px;
    }
    .cookie-popup-actions { justify-content: flex-end; }
    #cookie-popup p { flex-basis: auto; }
}

@media (prefers-reduced-motion: reduce) {
    #cookie-popup { animation: none; transform: translateY(0); filter: none; -webkit-filter: none; }
    #cookie-popup.cookie-out { animation: none; opacity: 0; transition: opacity 0.3s; }
}

/* =====================================================================
   Certificações: descrição aparece DENTRO do hub central
   Hub cresce suavemente, default desaparece, detalhes aparecem com digitação
   ===================================================================== */
.certs-orbit-hub {
    transition:
        width 0.55s cubic-bezier(0.65, 0, 0.35, 1),
        height 0.55s cubic-bezier(0.65, 0, 0.35, 1),
        box-shadow 0.55s ease,
        border-color 0.55s ease,
        background 0.55s ease,
        filter 0.2s ease;
    z-index: 5;
    overflow: hidden;
    will-change: width, height;
}
.certs-orbit-ring {
    transition:
        width 0.55s cubic-bezier(0.65, 0, 0.35, 1),
        height 0.55s cubic-bezier(0.65, 0, 0.35, 1),
        opacity 0.4s ease;
}
.certs-orbit-stage.is-detail .certs-orbit-ring--1 { width: 60%; height: 60%; }
.certs-orbit-stage.is-detail .certs-orbit-ring--2 { width: 96%; height: 96%; }
.certs-orbit-stage.is-detail .cert-slide {
    transition:
        left 0.55s cubic-bezier(0.65, 0, 0.35, 1),
        top  0.55s cubic-bezier(0.65, 0, 0.35, 1),
        border-color 0.25s, box-shadow 0.25s, transform 0.2s var(--ds-ease-emphasize, cubic-bezier(0.22,1,0.36,1));
}
/* mesmo padrão quando volta (sem is-detail), só pra ter a transição também no retorno */
.certs-orbit-stage:not(.is-detail) .cert-slide {
    transition:
        left 0.55s cubic-bezier(0.65, 0, 0.35, 1),
        top  0.55s cubic-bezier(0.65, 0, 0.35, 1),
        border-color 0.25s, box-shadow 0.25s, transform 0.2s var(--ds-ease-emphasize, cubic-bezier(0.22,1,0.36,1));
}
.certs-orbit-hub.is-expanded {
    width: 290px;
    height: 290px;
    background: radial-gradient(circle at 50% 38%, rgba(34,211,238,0.28), rgba(6,182,212,0.06));
    border-color: rgba(34, 211, 238, 0.65);
    box-shadow: 0 0 60px rgba(34, 211, 238, 0.35), inset 0 0 40px rgba(34, 211, 238, 0.15);
}
.certs-orbit-hub__default,
.certs-orbit-hub__detail {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 18px;
    text-align: center;
    transition: opacity 0.25s ease;
}
.certs-orbit-hub__detail {
    opacity: 0;
    pointer-events: none;
    gap: 6px;
}
.certs-orbit-hub.is-expanded .certs-orbit-hub__default { opacity: 0; }
.certs-orbit-hub.is-expanded .certs-orbit-hub__detail { opacity: 1; }
.certs-detail-title {
    font-family: var(--ds-font-family-display, 'Chakra Petch', sans-serif);
    font-size: 26px;
    font-weight: 700;
    color: #22d3ee;
    line-height: 1.1;
    text-shadow: 0 0 14px rgba(34,211,238,0.5);
    min-height: 28px;
}
.certs-detail-sub {
    font-family: var(--ds-font-family-mono, 'JetBrains Mono', monospace);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(34, 211, 238, 0.9);
    line-height: 1.35;
    margin-bottom: 4px;
}
.certs-detail-desc {
    font-family: 'Roboto', 'General Sans', sans-serif;
    font-size: 13.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.92);
    max-height: 180px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
}

/* Esconde o tooltip flutuante antigo */
.cert-tooltip { display: none !important; }

[data-theme="light"] .certs-detail-title { color: #0e7490; text-shadow: 0 0 12px rgba(8,145,178,0.3); }
[data-theme="light"] .certs-detail-sub   { color: #0e7490; }
[data-theme="light"] .certs-detail-desc  { color: #1e293b; }
[data-theme="light"] .certs-orbit-hub.is-expanded {
    background: radial-gradient(circle at 50% 38%, rgba(8,145,178,0.18), rgba(34,211,238,0.05));
    border-color: rgba(8, 145, 178, 0.65);
    box-shadow: 0 0 60px rgba(8, 145, 178, 0.25), inset 0 0 40px rgba(34, 211, 238, 0.10);
}

@media (max-width: 560px) {
    .certs-orbit-hub.is-expanded { width: 220px; height: 220px; }
    .certs-detail-title { font-size: 18px; }
    .certs-detail-desc { font-size: 11px; line-height: 1.5; -webkit-line-clamp: 6; }
}

/* =====================================================================
   ============== AJUSTES MOBILE ONLY (<= 768px) ========================
   Tudo aqui é escopado em @media para nao mexer no desktop.
   ===================================================================== */
@media (max-width: 768px) {

    /* ---------- Container global mais respirado ---------- */
    .container { padding-left: 18px; padding-right: 18px; }

    /* ---------- Botões flutuantes menos invasivos ----------
       O container .fab-container e fixed+flex-col, espacamento via gap.
       bottom/right nos filhos eram ignorados (position: relative).
       Aproximamos via gap negativo no parent + scale. */
    .fab-container {
        gap: 2px !important;
        bottom: 14px !important;
        right: 10px !important;
    }
    .fab-wrapper.fab-whatsapp,
    .fab-wrapper.fab-astra {
        transform: scale(0.85);
        transform-origin: bottom right;
    }

    /* ---------- Botao "Incidente" na esquerda da navbar (mobile only) ---------- */
    .navbar .nav-incident-btn {
        display: inline-flex !important;
        align-items: center;
        gap: 4px;
        padding: 4px 8px;
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(239, 68, 68, 0.12);
        border: 1px solid rgba(239, 68, 68, 0.4);
        border-radius: 999px;
        color: #fca5a5;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        text-decoration: none;
        z-index: 250;
        white-space: nowrap;
        box-shadow: 0 0 10px rgba(239, 68, 68, 0.15);
        transition: background 0.2s, border-color 0.2s, transform 0.15s;
    }
    .navbar .nav-incident-btn svg { width: 11px; height: 11px; }
    .navbar .nav-incident-btn__dot { width: 5px; height: 5px; }
    .navbar .nav-incident-btn:hover,
    .navbar .nav-incident-btn:focus-visible {
        background: rgba(239, 68, 68, 0.22);
        border-color: rgba(239, 68, 68, 0.65);
        color: #fee2e2;
        outline: none;
    }
    .navbar .nav-incident-btn:active { transform: translateY(-50%) scale(0.97); }
    .navbar .nav-incident-btn__dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #ef4444;
        box-shadow: 0 0 6px rgba(239, 68, 68, 0.9);
        animation: nav-inc-pulse 1.4s ease-in-out infinite;
        flex-shrink: 0;
    }
    @keyframes nav-inc-pulse {
        0%, 100% { opacity: 1; transform: scale(1); }
        50%      { opacity: 0.45; transform: scale(0.75); }
    }
    .navbar .nav-incident-btn svg { flex-shrink: 0; }
    /* Em telas BEM pequenas (Galaxy Fold ~280px), esconde o texto e fica so o icone */
    @media (max-width: 360px) {
        .navbar .nav-incident-btn__text { display: none; }
        .navbar .nav-incident-btn { padding: 6px 8px; }
    }

    /* ---------- Navbar opaca no mobile (cobre o glow/cantos das secoes) ----------
       Bug: glow cyan brilhante das secoes vazava pelo bg semi-transparente
       (0.9) + backdrop-filter da navbar, fazendo aparecer "atras" da navbar. */
    .navbar,
    .navbar.navbar-scrolled {
        background-color: #04111a !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        z-index: 200 !important;
    }
    [data-theme="light"] .navbar,
    [data-theme="light"] .navbar.navbar-scrolled {
        background-color: #f7fdff !important;
    }
    /* nada de secao pode passar acima da navbar */
    .platform-border-glow,
    .section-border-glow,
    .hud-corner,
    .corner-marks {
        z-index: 1 !important;
    }

    /* ---------- SmartSEC: topbar + tabs ---------- */
    #solucoes .platform-topbar {
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 12px !important;
        align-items: flex-start;
    }
    #solucoes .platform-topbar > * { flex-shrink: 1; min-width: 0; }
    #solucoes .platform-topbar .topbar-title,
    #solucoes .platform-topbar [class*="title"] {
        font-size: 11px !important;
        letter-spacing: 0.04em !important;
        line-height: 1.25;
        max-width: 100%;
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* esconde elementos secundarios na topbar pra dar mais espaço */
    #solucoes .platform-topbar .topbar-meta,
    #solucoes .platform-topbar .topbar-stats,
    #solucoes .platform-topbar .topbar-time { display: none !important; }

    #solucoes .platform-tabs {
        gap: 8px !important;
        padding: 10px 12px !important;
        scroll-padding-left: 12px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        /* Touch: tabs so respondem a swipe horizontal; vertical passa pra pagina */
        touch-action: pan-x;
        overscroll-behavior-x: contain;
        /* Fade suave no fim pra indicar que tem mais tabs scrollaveis */
        -webkit-mask-image: linear-gradient(90deg, #000 0, #000 88%, transparent 100%);
                mask-image: linear-gradient(90deg, #000 0, #000 88%, transparent 100%);
    }
    #solucoes .platform-tabs::-webkit-scrollbar { height: 4px; }
    #solucoes .platform-tabs::-webkit-scrollbar-thumb { background: rgba(34,211,238,0.4); border-radius: 4px; }
    #solucoes .platform-tab {
        flex: 0 0 auto;
        scroll-snap-align: start;
        padding: 8px 12px !important;
        font-size: 11px !important;
    }
    /* primeira tab nao cortada */
    #solucoes .platform-tabs > :first-child { margin-left: 0 !important; }

    /* ---------- CTI: empilhar tudo verticalmente ---------- */
    .cti-section .cti-box {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        padding: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden;
    }
    .cti-section .cti-box > * {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        grid-column: auto !important;
    }
    /* converte o grid de 4 colunas em coluna unica */
    .cti-section .cti-4col {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        width: 100% !important;
        height: auto !important;
    }
    .cti-section .cti-4col > * {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        grid-column: auto !important;
        grid-row: auto !important;
    }
    /* esconde a linha separadora vertical que vira invisivel em coluna */
    .cti-section .cti-4col > [class*="divider"],
    .cti-section .cti-4col > [class*="separator"] { display: none !important; }
    /* topbar do CTI */
    .cti-section .cti-topbar {
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 10px 12px !important;
        font-size: 10.5px !important;
    }
    .cti-section .cti-topbar .topbar-time,
    .cti-section .cti-topbar .topbar-meta,
    .cti-section .cti-topbar .topbar-stats { display: none !important; }
    /* mapa caber */
    .cti-section .cti-col-map { min-height: 260px; }
    .cti-section svg,
    .cti-section .cti-map,
    .cti-section [class*="map"] {
        max-width: 100% !important;
        height: auto !important;
    }
    /* coluna de logs / kpi mais compactas */
    .cti-section .cti-col-logs,
    .cti-section .cti-col-kpi { max-height: none !important; }

    /* live threat feed: ALTURA FIXA pra nao tremer quando entram/saem incidentes.
       Cada slot (active/empty) tem altura uniforme e o container reserva o tamanho de todos os slots. */
    .cti-section .cti-feed-slots {
        height: 330px !important;
        max-height: 330px !important;
        min-height: 330px !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        padding: 4px 0 !important;
        box-sizing: border-box !important;
    }
    .cti-section .cti-slot {
        flex: 0 0 20px !important;
        height: 20px !important;
        min-height: 20px !important;
        max-height: 20px !important;
        line-height: 20px !important;
        padding: 0 6px !important;
        font-size: 10.5px !important;
        overflow: hidden !important;
        white-space: nowrap !important;
    }
    .cti-section .cti-slot.empty {
        opacity: 0 !important;
        visibility: hidden !important;
        /* mantem a mesma altura pra o container nao colapsar */
    }
    .cti-section .cti-slot.active {
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* ---------- Certs orbit: cabendo no viewport ---------- */
    .certs-orbit-stage {
        width: min(340px, 92vw) !important;
        height: min(340px, 92vw) !important;
        margin: 0 auto !important;
    }
    .certs-orbit-ring--1 { width: 50% !important; height: 50% !important; }
    .certs-orbit-ring--2 { width: 86% !important; height: 86% !important; }
    .certs-orbit-stage.is-detail .certs-orbit-ring--1 { width: 60% !important; height: 60% !important; }
    .certs-orbit-stage.is-detail .certs-orbit-ring--2 { width: 98% !important; height: 98% !important; }
    .certs-orbit-hub {
        width: 92px !important;
        height: 92px !important;
    }
    .certs-orbit-hub.is-expanded {
        width: 175px !important;
        height: 175px !important;
    }
    .certs-orbit-hub .certs-orbit-num { font-size: 28px !important; line-height: 1 !important; }
    .certs-orbit-hub .certs-orbit-cap { font-size: 7.5px !important; letter-spacing: 0.08em !important; }
    .certs-orbit-stage .cert-slide {
        width: 48px !important;
        height: 48px !important;
    }
    .certs-orbit-stage .cert-slide img,
    .certs-orbit-stage .cert-slide svg {
        max-width: 70% !important;
        max-height: 70% !important;
    }
    .certs-detail-title { font-size: 16px !important; }
    .certs-detail-sub   { font-size: 9.5px !important; }
    .certs-detail-desc  { font-size: 11px !important; line-height: 1.5 !important; -webkit-line-clamp: 7 !important; }

    /* ---------- Recog: garantir overflow controlado ---------- */
    .recog-section { overflow: hidden; }
    .recog-box {
        overflow: hidden !important;
        max-width: 100% !important;
    }
    .recog-left { padding: 14px !important; }
    .recog-title { font-size: 14px !important; line-height: 1.25 !important; }
    .recog-icon { width: 44px !important; height: 44px !important; }
    .recog-marquee { mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); }

    /* ---------- News carousel: card mais cheio + setas abaixo do card ----------
       Bug original: .news-section tinha padding 80px 40px e .news-carousel tinha
       padding 0 44px, comendo 168px do viewport (375 - 168 = 207 util) enquanto
       o card era 280px. O card overflowava 73px e era clipado pelo overflow:hidden
       do carousel, cortando o texto. Reduzimos drasticamente o padding no mobile. */
    .news-section {
        overflow: hidden;
        padding: 60px 12px !important;
    }
    .news-section .container { padding: 0 !important; }
    .news-carousel {
        position: relative;
        padding: 0 8px 70px !important;  /* gutter minimo + espaço pras setas abaixo */
        overflow: hidden !important;
    }
    .news-card {
        min-width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
    /* setas saem de cima do card e vao pro rodape do carrossel */
    .news-carousel-btn,
    .news-carousel-btn--prev,
    .news-carousel-btn--next {
        top: auto !important;
        bottom: 14px !important;
        transform: none !important;
        width: 42px !important;
        height: 42px !important;
        z-index: 5 !important;
    }
    .news-carousel-btn--prev { left: calc(50% - 60px) !important; right: auto !important; }
    .news-carousel-btn--next { right: calc(50% - 60px) !important; left: auto !important; }

    /* ---------- Cards genéricos / textos respirando ---------- */
    .section-title,
    .ds-section-title,
    h2.section-title {
        font-size: clamp(22px, 6vw, 28px) !important;
        line-height: 1.2 !important;
    }
    .section-subtitle,
    .ds-section-subtitle {
        font-size: 13px !important;
        line-height: 1.45 !important;
    }

    /* ---------- Hero ajustes leves ---------- */
    .hero-title { font-size: clamp(28px, 8vw, 38px) !important; line-height: 1.1 !important; }
    .hero-subtitle { font-size: 14px !important; line-height: 1.5 !important; }

    /* ---------- Hero SOC: empurra conteudo pra abaixo do navbar (bug Galaxy S24) ----------
       .soc-hero-text usa absolute+transform pra centralizar. Em viewports baixos a
       primeira linha do titulo fica atras da navbar fixa. Adicionamos padding-top
       interno + reduzimos o tamanho do titulo pra caber melhor em telas pequenas. */
    .soc-block {
        padding-top: 70px !important; /* offset da navbar */
        min-height: 540px !important;
    }
    .soc-hero-text {
        padding-top: 20px !important;
    }
    .soc-hero-heading {
        font-size: clamp(20px, 6.2vw, 26px) !important;
        line-height: 1.18 !important;
    }
    .soc-hero-desc,
    .soc-hero-text p {
        font-size: 13px !important;
        line-height: 1.55 !important;
    }
    .soc-hero-cta,
    .soc-hero-text a.btn,
    .soc-hero-text .btn {
        font-size: 12.5px !important;
        padding: 12px 18px !important;
    }

    /* ---------- Endereços (addresses) ---------- */
    .addresses-section .address-card,
    .addresses-section [class*="address-card"] {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* ---------- Footer mais respirado ---------- */
    .ds-footer .ds-container,
    .site-footer .ds-container { padding-left: 20px !important; padding-right: 20px !important; }

}