/**
 * SisOS v1.0 — Landing Page Styles
 * Mobile-first, herda variáveis de theme.css
 * Referência: P037.SP01
 */

/* ═══════════════════════════════════════════════════════════
   NAVBAR LANDING
   ═══════════════════════════════════════════════════════════ */
.landing-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    padding: 0.75rem 0;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    background-color: transparent;
}

.landing-navbar.scrolled {
    background-color: var(--sisos-bg-surface);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

html.dark .landing-navbar.scrolled {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.landing-navbar .navbar-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--sisos-text-primary);
    text-decoration: none;
}

.landing-navbar .navbar-brand img {
    height: 36px;
    width: auto;
}

.landing-navbar .nav-link {
    color: var(--sisos-text-secondary);
    font-weight: 500;
    font-size: 0.9rem;
    padding: 0.5rem 0.75rem;
    transition: color 0.2s ease;
}

.landing-navbar .nav-link:hover,
.landing-navbar .nav-link:focus {
    color: var(--sisos-primary);
}

.landing-navbar .btn-outline-primary {
    border-width: 2px;
}

/* Theme toggle na landing */
.landing-theme-toggle {
    background: none;
    border: 1px solid var(--sisos-border-color);
    border-radius: var(--sisos-radius-md);
    padding: 0.375rem 0.5rem;
    color: var(--sisos-text-secondary);
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
    display: flex;
    align-items: center;
}

.landing-theme-toggle:hover {
    color: var(--sisos-primary);
    border-color: var(--sisos-primary);
}

/* ═══════════════════════════════════════════════════════════
   HERO SECTION
   ═══════════════════════════════════════════════════════════ */
.landing-hero {
    position: relative;
    padding: 8rem 0 4rem;
    background:
        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(124, 58, 237, 0.18) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 100% 50%, rgba(67, 97, 238, 0.14) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 0% 100%, rgba(236, 72, 153, 0.10) 0%, transparent 60%),
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    overflow: hidden;
}

html.dark .landing-hero {
    background:
        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(124, 58, 237, 0.30) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 100% 50%, rgba(67, 97, 238, 0.22) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 0% 100%, rgba(236, 72, 153, 0.18) 0%, transparent 60%),
        linear-gradient(180deg, #0b1020 0%, #050816 100%);
}

.hero-bg-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
}

.hero-bg-shape-1 {
    top: -100px;
    left: -100px;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, rgba(67, 97, 238, 0.35), transparent 70%);
}

.hero-bg-shape-2 {
    bottom: -120px;
    right: -120px;
    width: 460px;
    height: 460px;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.30), transparent 70%);
}

.landing-hero .container {
    position: relative;
    z-index: 1;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--sisos-primary);
    border: 1px solid rgba(67, 97, 238, 0.30);
    border-radius: 50px;
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 14px rgba(67, 97, 238, 0.10);
}

.hero-badge i {
    color: #f59e0b;
}

html.dark .hero-badge {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(124, 58, 237, 0.40);
}

.landing-hero h1 {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--sisos-text-primary);
    margin-bottom: 1.25rem;
    letter-spacing: -0.025em;
}

.hero-highlight {
    color: var(--sisos-primary);
    position: relative;
    display: inline;
    background-image: linear-gradient(180deg, transparent 70%, rgba(67, 97, 238, 0.18) 70%);
    padding: 0 0.05em;
}

.landing-hero .hero-subtitle {
    font-size: 1.05rem;
    color: var(--sisos-text-secondary);
    line-height: 1.65;
    margin-bottom: 1.75rem;
    max-width: 540px;
}

.landing-hero .hero-subtitle strong {
    color: var(--sisos-text-primary);
}

.hero-cta-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.75rem;
}

.btn-cta-primary {
    box-shadow: 0 8px 24px rgba(67, 97, 238, 0.30);
    font-weight: 600;
    padding: 0.75rem 1.6rem;
}

.btn-cta-primary:hover {
    box-shadow: 0 12px 32px rgba(67, 97, 238, 0.40);
    transform: translateY(-2px);
}

.btn-cta-secondary {
    color: var(--sisos-text-primary);
    text-decoration: none;
    font-weight: 600;
    padding: 0.75rem 1rem;
}

.btn-cta-secondary:hover {
    color: var(--sisos-primary);
}

.hero-trust-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.hero-trust-list li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--sisos-text-secondary);
    font-weight: 500;
}

.hero-trust-list i {
    color: var(--sisos-success);
    font-size: 1rem;
}

/* Mockup do hero */
.hero-mockup {
    position: relative;
    margin-top: 3rem;
    perspective: 1200px;
}

.hero-mockup-window {
    background: var(--sisos-bg-surface);
    border: 1px solid var(--sisos-border-color);
    border-radius: 16px;
    box-shadow:
        0 20px 60px rgba(67, 97, 238, 0.15),
        0 8px 24px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transform: rotateY(-4deg) rotateX(2deg);
    transition: transform 0.4s ease;
}

.hero-mockup-window:hover {
    transform: rotateY(-2deg) rotateX(1deg);
}

html.dark .hero-mockup-window {
    box-shadow:
        0 20px 60px rgba(67, 97, 238, 0.25),
        0 8px 24px rgba(0, 0, 0, 0.4);
}

.hero-mockup-bar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.7rem 1rem;
    background: var(--sisos-bg-body);
    border-bottom: 1px solid var(--sisos-border-color);
}

.hero-mockup-bar .dot,
.demo-mockup-bar .dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    display: inline-block;
}

.dot-red { background: #ef4444; }
.dot-yellow { background: #f59e0b; }
.dot-green { background: #10b981; }

.hero-mockup-body {
    padding: 1.25rem;
}

.hero-mockup-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.hero-stat {
    display: flex;
    flex-direction: column;
    background: var(--sisos-bg-body);
    border: 1px solid var(--sisos-border-color);
    border-radius: 10px;
    padding: 0.75rem;
}

.hero-stat-label {
    font-size: 0.7rem;
    color: var(--sisos-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hero-stat-value {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--sisos-text-primary);
    margin-top: 0.15rem;
}

.hero-stat-trend {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.7rem;
    font-weight: 600;
    margin-top: 0.25rem;
}

.hero-stat-trend.up { color: var(--sisos-success); }

.hero-mockup-chart {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    height: 100px;
    padding: 0.5rem 0;
}

.hero-mockup-chart .bar {
    flex: 1;
    background: linear-gradient(180deg, var(--sisos-primary), rgba(67, 97, 238, 0.4));
    border-radius: 6px 6px 0 0;
    min-height: 8%;
    transition: opacity 0.3s;
}

.hero-mockup-chart .bar[data-h="40"] { height: 40%; }
.hero-mockup-chart .bar[data-h="48"] { height: 48%; }
.hero-mockup-chart .bar[data-h="55"] { height: 55%; }
.hero-mockup-chart .bar[data-h="62"] { height: 62%; }
.hero-mockup-chart .bar[data-h="65"] { height: 65%; }
.hero-mockup-chart .bar[data-h="72"] { height: 72%; }
.hero-mockup-chart .bar[data-h="78"] { height: 78%; }
.hero-mockup-chart .bar[data-h="85"] { height: 85%; }
.hero-mockup-chart .bar[data-h="95"] { height: 95%; }

/* Cards flutuantes do mockup */
.hero-mockup-card {
    position: absolute;
    background: var(--sisos-bg-surface);
    border: 1px solid var(--sisos-border-color);
    border-radius: 12px;
    padding: 0.65rem 0.85rem;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.8rem;
    z-index: 2;
}

.hero-mockup-card i {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
}

.hero-mockup-card div {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.hero-mockup-card strong {
    color: var(--sisos-text-primary);
    font-size: 0.85rem;
}

.hero-mockup-card small {
    color: var(--sisos-text-muted);
    font-size: 0.7rem;
}

.hero-mockup-card-1 {
    top: -18px;
    left: -16px;
    animation: floatY 4s ease-in-out infinite;
}

.hero-mockup-card-1 i {
    background: rgba(67, 97, 238, 0.12);
    color: var(--sisos-primary);
}

.hero-mockup-card-2 {
    bottom: -22px;
    right: -16px;
    animation: floatY 4s ease-in-out 1.5s infinite;
}

.hero-mockup-card-2 i {
    background: rgba(16, 185, 129, 0.12);
    color: var(--sisos-success);
}

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

@media (max-width: 991.98px) {
    .hero-mockup-card-1 { left: 8px; top: -14px; }
    .hero-mockup-card-2 { right: 8px; bottom: -16px; }
}

@media (max-width: 575.98px) {
    .hero-mockup-card-1,
    .hero-mockup-card-2 { display: none; }
}

@media (min-width: 768px) {
    .landing-hero {
        padding: 9rem 0 5rem;
    }
    .landing-hero h1 {
        font-size: 3.5rem;
    }
    .landing-hero .hero-subtitle {
        font-size: 1.15rem;
    }
}

@media (min-width: 1200px) {
    .landing-hero h1 {
        font-size: 4rem;
    }
}

/* Hero 2026 — command center visual */
.landing-hero {
    --hero-blue: #2563eb;
    --hero-green: #10b981;
    --hero-violet: #7c3aed;
    --hero-ink: #142033;
}

.hero-layout-row {
    min-height: 620px;
}

.landing-hero h1 {
    max-width: 680px;
}

.hero-highlight {
    color: var(--hero-violet);
    background-image: linear-gradient(180deg, transparent 68%, rgba(16, 185, 129, 0.22) 68%);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.landing-hero .btn-cta-primary {
    background: linear-gradient(135deg, var(--hero-blue), var(--hero-violet)) !important;
    border: 0 !important;
    color: #ffffff !important;
    border-radius: 14px;
    box-shadow: 0 16px 34px rgba(37, 99, 235, 0.28);
}

.landing-hero .btn-cta-primary i,
.landing-hero .btn-cta-primary span {
    color: #ffffff !important;
}

.landing-hero .btn-cta-primary:hover,
.landing-hero .btn-cta-primary:focus {
    color: #ffffff !important;
    box-shadow: 0 22px 44px rgba(124, 58, 237, 0.32);
}

.landing-hero .btn-cta-secondary {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(37, 99, 235, 0.16);
    border-radius: 14px;
    color: var(--hero-ink) !important;
    box-shadow: 0 10px 26px rgba(20, 32, 51, 0.08);
}

.landing-hero .btn-cta-secondary:hover,
.landing-hero .btn-cta-secondary:focus {
    background: #ffffff;
    color: var(--hero-blue) !important;
}

.hero-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
    margin-top: 1.7rem;
    max-width: 560px;
}

.hero-metrics div {
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid rgba(37, 99, 235, 0.12);
    border-radius: 14px;
    padding: 0.85rem;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
}

.hero-metrics strong {
    display: block;
    color: var(--hero-ink);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.1;
}

.hero-metrics span {
    display: block;
    color: var(--sisos-text-secondary);
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

.hero-visual-scene {
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
}

.hero-visual-scene::before {
    content: '';
    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%, rgba(37, 99, 235, 0.24), transparent 34%),
        radial-gradient(circle at 68% 34%, rgba(16, 185, 129, 0.18), transparent 28%),
        radial-gradient(circle at 55% 75%, rgba(124, 58, 237, 0.22), transparent 34%);
    filter: blur(6px);
    opacity: 0.95;
    animation: heroPulse 7s ease-in-out infinite;
    z-index: -2;
}

.hero-orbit-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(37, 99, 235, 0.16);
    z-index: -1;
}

.hero-orbit-ring-1 {
    width: 430px;
    height: 430px;
    animation: heroRotate 24s linear infinite;
}

.hero-orbit-ring-2 {
    width: 330px;
    height: 330px;
    border-color: rgba(16, 185, 129, 0.18);
    animation: heroRotate 18s linear infinite reverse;
}

.hero-orbit-ring::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    top: 11%;
    left: 50%;
    background: linear-gradient(135deg, var(--hero-green), var(--hero-blue));
    box-shadow: 0 0 0 8px rgba(16, 185, 129, 0.12);
}

.hero-command-panel {
    width: min(100%, 590px);
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(37, 99, 235, 0.14);
    border-radius: 24px;
    overflow: hidden;
    box-shadow:
        0 34px 80px rgba(37, 99, 235, 0.16),
        0 18px 44px rgba(15, 23, 42, 0.10);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transform: perspective(1000px) rotateY(-4deg) rotateX(2deg);
    animation: heroPanelFloat 6s ease-in-out infinite;
}

.hero-command-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1rem;
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.08), rgba(124, 58, 237, 0.07));
    border-bottom: 1px solid rgba(37, 99, 235, 0.12);
}

.hero-command-dots {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.hero-command-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--hero-green);
    background: rgba(16, 185, 129, 0.10);
    border: 1px solid rgba(16, 185, 129, 0.18);
    border-radius: 999px;
    padding: 0.32rem 0.72rem;
    font-size: 0.76rem;
    font-weight: 700;
}

.hero-command-body {
    padding: 1.25rem;
}

.hero-command-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.hero-command-card {
    position: relative;
    border-radius: 16px;
    padding: 1rem;
    overflow: hidden;
    min-height: 126px;
    color: #ffffff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.14);
}

.hero-command-card::after {
    content: '';
    position: absolute;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    right: -34px;
    top: -34px;
    background: rgba(255, 255, 255, 0.18);
}

.hero-command-card-blue { background: linear-gradient(135deg, #2563eb, #38bdf8); }
.hero-command-card-green { background: linear-gradient(135deg, #059669, #22c55e); }
.hero-command-card-purple { background: linear-gradient(135deg, #7c3aed, #a855f7); }

.hero-command-card span,
.hero-command-card small,
.hero-command-card strong {
    position: relative;
    z-index: 1;
    color: #ffffff;
}

.hero-command-card span {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.84;
}

.hero-command-card strong {
    display: block;
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.1;
    margin-top: 0.35rem;
}

.hero-command-card small {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    font-size: 0.72rem;
    font-weight: 600;
    opacity: 0.9;
    margin-top: 0.45rem;
}

.hero-flow-board {
    display: grid;
    gap: 0.55rem;
    background: rgba(248, 250, 252, 0.86);
    border: 1px solid rgba(37, 99, 235, 0.10);
    border-radius: 18px;
    padding: 0.85rem;
}

.hero-flow-row {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    align-items: center;
    gap: 0.7rem;
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 12px;
    padding: 0.72rem 0.85rem;
    color: var(--hero-ink);
}

.hero-flow-row.active {
    border-color: rgba(37, 99, 235, 0.35);
    box-shadow: 0 12px 28px rgba(37, 99, 235, 0.12);
}

.hero-flow-row i {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(37, 99, 235, 0.10);
    color: var(--hero-blue);
}

.hero-flow-row span {
    font-size: 0.88rem;
    font-weight: 700;
}

.hero-flow-row strong {
    color: var(--hero-violet);
    font-size: 0.82rem;
    font-weight: 800;
}

.hero-floating-pill {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(37, 99, 235, 0.12);
    border-radius: 16px;
    padding: 0.72rem 0.9rem;
    box-shadow: 0 18px 46px rgba(15, 23, 42, 0.12);
    z-index: 3;
    animation: heroPillFloat 4.8s ease-in-out infinite;
}

.hero-floating-pill i {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: linear-gradient(135deg, var(--hero-blue), var(--hero-violet));
}

.hero-floating-pill div {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.hero-floating-pill strong {
    color: var(--hero-ink);
    font-size: 0.85rem;
}

.hero-floating-pill small {
    color: var(--sisos-text-muted);
    font-size: 0.7rem;
}

.hero-floating-pill-1 {
    top: 40px;
    left: -8px;
}

.hero-floating-pill-2 {
    right: -10px;
    bottom: 88px;
    animation-delay: 1.4s;
}

.hero-floating-pill-2 i {
    background: linear-gradient(135deg, var(--hero-green), #22c55e);
}

.hero-floating-pill-3 {
    left: 52px;
    bottom: 18px;
    animation-delay: 2.1s;
}

.hero-floating-pill-3 i {
    background: linear-gradient(135deg, var(--hero-violet), #ec4899);
}

@keyframes heroPulse {
    0%, 100% { transform: scale(0.96); opacity: 0.72; }
    50% { transform: scale(1.05); opacity: 1; }
}

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

@keyframes heroPanelFloat {
    0%, 100% { transform: perspective(1000px) rotateY(-4deg) rotateX(2deg) translateY(0); }
    50% { transform: perspective(1000px) rotateY(-2deg) rotateX(1deg) translateY(-10px); }
}

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

html.dark .hero-command-panel,
html.dark .hero-floating-pill,
html.dark .hero-metrics div,
html.dark .landing-hero .btn-cta-secondary {
    background: rgba(15, 23, 42, 0.82);
    border-color: rgba(148, 163, 184, 0.18);
}

html.dark .hero-flow-board,
html.dark .hero-flow-row {
    background: rgba(15, 23, 42, 0.72);
}

html.dark .hero-flow-row span,
html.dark .hero-floating-pill strong,
html.dark .hero-metrics strong,
html.dark .landing-hero .btn-cta-secondary {
    color: #f8fafc !important;
}

@media (max-width: 991.98px) {
    .hero-layout-row { min-height: auto; }
    .hero-visual-scene { min-height: 500px; margin-top: 1rem; }
    .hero-command-panel { transform: none; animation: heroPanelFloatMobile 6s ease-in-out infinite; }
    @keyframes heroPanelFloatMobile {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-8px); }
    }
}

@media (max-width: 575.98px) {
    .hero-metrics { grid-template-columns: 1fr; }
    .hero-visual-scene { min-height: auto; padding: 1.5rem 0 0; }
    .hero-command-grid { grid-template-columns: 1fr; }
    .hero-floating-pill { display: none; }
    .hero-orbit-ring, .hero-visual-scene::before { display: none; }
    .hero-command-panel { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════
   TRUST BAR (estatísticas sociais)
   ═══════════════════════════════════════════════════════════ */
.landing-trustbar {
    padding: 2rem 0;
    background: var(--sisos-bg-surface);
    border-top: 1px solid var(--sisos-border-color);
    border-bottom: 1px solid var(--sisos-border-color);
}

.trust-stat {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.trust-stat-value {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--sisos-primary);
    line-height: 1.1;
}

.trust-stat-label {
    font-size: 0.85rem;
    color: var(--sisos-text-secondary);
    font-weight: 500;
}

@media (min-width: 768px) {
    .landing-trustbar { padding: 2.5rem 0; }
    .trust-stat-value { font-size: 2.25rem; }
}

/* ═══════════════════════════════════════════════════════════
   SEÇÕES — BASE
   ═══════════════════════════════════════════════════════════ */
.landing-section {
    padding: 4rem 0;
}

.landing-section-alt {
    background-color: var(--sisos-bg-surface);
}

.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(67, 97, 238, 0.10);
    color: var(--sisos-primary);
    border: 1px solid rgba(67, 97, 238, 0.20);
    border-radius: 50px;
    padding: 0.3rem 0.8rem;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 auto 0.85rem;
    text-align: center;
}

.landing-section .container > .section-eyebrow {
    display: flex;
    width: max-content;
    margin-left: auto;
    margin-right: auto;
}

html.dark .section-eyebrow {
    background: rgba(67, 97, 238, 0.18);
}

.landing-section .section-title {
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--sisos-text-primary);
    margin-bottom: 0.85rem;
    text-align: center;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.landing-section .section-subtitle {
    font-size: 1rem;
    color: var(--sisos-text-secondary);
    text-align: center;
    max-width: 640px;
    margin: 0 auto 2.5rem;
    line-height: 1.65;
}

@media (min-width: 768px) {
    .landing-section {
        padding: 5.5rem 0;
    }
    .landing-section .section-title {
        font-size: 2.5rem;
    }
    .landing-section .section-subtitle {
        font-size: 1.1rem;
    }
}

/* ═══════════════════════════════════════════════════════════
   FEATURES / MÓDULOS
   ═══════════════════════════════════════════════════════════ */
.feature-card {
    position: relative;
    background: var(--sisos-bg-surface);
    border: 1px solid var(--sisos-border-color);
    border-radius: 16px;
    padding: 1.5rem;
    height: 100%;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    overflow: hidden;
}

.feature-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(67, 97, 238, 0.04) 100%);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

.feature-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.10);
    border-color: rgba(67, 97, 238, 0.30);
}

.feature-card:hover::before {
    opacity: 1;
}

html.dark .feature-card:hover {
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

.feature-card .feature-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 1.1rem;
    color: #fff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

/* Variações de cor para os ícones — gradientes */
.feature-card-blue   .feature-icon { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.feature-card-purple .feature-icon { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.feature-card-cyan   .feature-icon { background: linear-gradient(135deg, #06b6d4, #0e7490); }
.feature-card-orange .feature-icon { background: linear-gradient(135deg, #fb923c, #ea580c); }
.feature-card-red    .feature-icon { background: linear-gradient(135deg, #f87171, #dc2626); }
.feature-card-green  .feature-icon { background: linear-gradient(135deg, #34d399, #059669); }
.feature-card-pink   .feature-icon { background: linear-gradient(135deg, #f472b6, #db2777); }
.feature-card-indigo .feature-icon { background: linear-gradient(135deg, #818cf8, #4f46e5); }
.feature-card-teal   .feature-icon { background: linear-gradient(135deg, #2dd4bf, #0f766e); }
.feature-card-yellow .feature-icon { background: linear-gradient(135deg, #facc15, #ca8a04); }

.feature-card h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--sisos-text-primary);
    margin-bottom: 0.5rem;
    position: relative;
    z-index: 1;
}

.feature-card p {
    font-size: 0.9rem;
    color: var(--sisos-text-secondary);
    margin-bottom: 0;
    line-height: 1.6;
    position: relative;
    z-index: 1;
}

.feature-card-arrow {
    position: absolute;
    top: 1.5rem;
    right: 1.25rem;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--sisos-bg-body);
    color: var(--sisos-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.25s, transform 0.25s, background 0.25s, color 0.25s;
}

.feature-card:hover .feature-card-arrow {
    opacity: 1;
    transform: translateX(0);
    background: var(--sisos-primary);
    color: #fff;
}

/* ═══════════════════════════════════════════════════════════
   COMO FUNCIONA
   ═══════════════════════════════════════════════════════════ */
.steps-row {
    position: relative;
}

.how-it-works-step {
    position: relative;
    background: var(--sisos-bg-surface);
    border: 1px solid var(--sisos-border-color);
    border-radius: 16px;
    padding: 2rem 1.5rem 1.75rem;
    text-align: center;
    height: 100%;
    transition: transform 0.25s, box-shadow 0.25s;
}

.how-it-works-step:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08);
}

.step-icon-wrap {
    position: relative;
    width: 72px;
    height: 72px;
    margin: 0 auto 1.25rem;
}

.step-icon {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    background: linear-gradient(135deg, #4361ee 0%, #7c3aed 100%);
    background-color: #4361ee;
    color: #ffffff;
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 28px rgba(67, 97, 238, 0.30);
}

.step-icon i {
    color: #ffffff;
    line-height: 1;
    display: inline-flex;
}

.step-number {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--sisos-bg-surface);
    color: var(--sisos-primary);
    border: 2px solid var(--sisos-primary);
    font-size: 0.85rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.how-it-works-step h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--sisos-text-primary);
    margin-bottom: 0.65rem;
}

.how-it-works-step p {
    font-size: 0.92rem;
    color: var(--sisos-text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   DEMO TABS — VEJA NA PRÁTICA
   ═══════════════════════════════════════════════════════════ */
.demo-nav {
    border: 1px solid var(--sisos-border-color);
    background: var(--sisos-bg-surface);
    border-radius: 50px;
    padding: 0.35rem;
    gap: 0.15rem;
    display: inline-flex;
    margin: 0 auto;
}

.demo-nav.justify-content-center {
    width: max-content;
    max-width: 100%;
}

.demo-nav .nav-item {
    flex: 0 0 auto;
}

.demo-nav .nav-link {
    font-weight: 600;
    color: var(--sisos-text-secondary);
    border-radius: 50px;
    padding: 0.55rem 1.1rem;
    white-space: nowrap;
    font-size: 0.88rem;
    transition: all 0.2s;
    background: transparent;
}

.demo-nav .nav-link:hover {
    color: var(--sisos-text-primary);
    background: var(--sisos-bg-body);
}

.demo-nav .nav-link.active,
.demo-nav.nav-pills .nav-link.active,
.demo-nav .nav-link.active:hover,
.demo-nav .nav-link.active:focus,
ul.demo-nav button.nav-link.active {
    background-color: #4361ee !important;
    background-image: linear-gradient(135deg, #4361ee 0%, #6b8afd 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 18px rgba(67, 97, 238, 0.40);
    border-color: transparent !important;
}

.demo-nav .nav-link.active i,
.demo-nav .nav-link.active span,
ul.demo-nav button.nav-link.active i {
    color: #ffffff !important;
}

.demo-tab-content {
    background: var(--sisos-bg-surface);
    border: 1px solid var(--sisos-border-color);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06);
}

html.dark .demo-tab-content {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.30);
}

/* ── Demo Card: novo layout (mockup em cima, info abaixo) ────── */
.demo-card {
    border-radius: 18px;
    border: 1px solid var(--sisos-border-color);
    overflow: hidden;
    background: var(--sisos-bg-surface);
    box-shadow: 0 20px 56px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
}

html.dark .demo-card {
    box-shadow: 0 20px 56px rgba(0, 0, 0, 0.32);
}

.demo-card-body {
    position: relative;
    overflow: hidden;
}

/* Fade gradiente na borda inferior do mockup */
.demo-card-body::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 48px;
    background: linear-gradient(to bottom, transparent, var(--sisos-bg-surface));
    pointer-events: none;
    z-index: 2;
}

/* Barra de info abaixo do mockup */
.demo-card-info {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 1.25rem 1.75rem;
    border-top: 1px solid var(--sisos-border-color);
    background: var(--sisos-bg-body);
}

.demo-card-info-main {
    flex: 1;
    min-width: 0;
}

.demo-card-info-main h3 {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--sisos-text-primary);
    margin-bottom: 0.2rem;
    line-height: 1.3;
}

.demo-card-info-main p {
    font-size: 0.85rem;
    color: var(--sisos-text-secondary);
    margin: 0;
    line-height: 1.5;
}

.demo-card-info-side {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-shrink: 0;
}

.demo-chips {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.demo-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.65rem;
    border-radius: 50px;
    font-size: 0.73rem;
    font-weight: 500;
    background: rgba(67, 97, 238, 0.07);
    color: var(--sisos-primary);
    border: 1px solid rgba(67, 97, 238, 0.12);
    white-space: nowrap;
}

.demo-chip i {
    color: #10b981;
    font-size: 0.7rem;
}

.demo-cta-btn {
    white-space: nowrap;
    flex-shrink: 0;
    padding: 0.45rem 1.1rem;
}

/* ── Mockup: app layout com sidebar ─────────────────────────── */
.mockup-app-layout {
    display: flex;
    min-height: 320px;
    overflow: hidden;
}

.mockup-sidebar {
    width: 46px;
    background: var(--sisos-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.85rem 0 0.6rem;
    gap: 0.3rem;
    flex-shrink: 0;
}

.mockup-sidebar-brand {
    color: rgba(255, 255, 255, 0.95);
    font-size: 1rem;
    margin-bottom: 0.6rem;
    line-height: 1;
}

.mockup-sidebar-ico {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.42);
    flex-shrink: 0;
}

.mockup-sidebar-ico.active {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.mockup-sidebar-spacer {
    flex: 1;
}

.mockup-main {
    flex: 1;
    min-width: 0;
    padding: 0.9rem;
    background: var(--sisos-bg-body);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    overflow: hidden;
}

/* Page header row inside mockup */
.mockup-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.mockup-page-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--sisos-text-primary);
}

.mockup-header-actions {
    display: flex;
    gap: 0.3rem;
}

.mockup-btn-xs {
    padding: 0.18rem 0.5rem;
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: 600;
    border: 1px solid var(--sisos-border-color);
    color: var(--sisos-text-secondary);
    background: var(--sisos-bg-surface);
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

.mockup-btn-xs.primary {
    background: var(--sisos-primary);
    border-color: var(--sisos-primary);
    color: #fff;
}

/* ── Demo mockup bar label (replaces URL) ────────────────────── */
.demo-mockup-label {
    margin-left: 0.65rem;
    background: var(--sisos-bg-surface);
    border: 1px solid var(--sisos-border-color);
    border-radius: 6px;
    padding: 0.15rem 0.75rem;
    font-size: 0.7rem;
    color: var(--sisos-text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-weight: 500;
    flex-grow: 1;
    max-width: 200px;
}

/* Responsivo */
@media (max-width: 767.98px) {
    .demo-card-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.85rem;
        padding: 1rem 1.25rem;
    }
    .demo-card-info-side {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        gap: 0.6rem;
    }
    .demo-chips { justify-content: flex-start; }
    .demo-cta-btn { width: 100%; text-align: center; justify-content: center; }
    .mockup-app-layout { min-height: 270px; }
    .mockup-sidebar { width: 38px; }
    .mockup-sidebar-ico { width: 24px; height: 24px; font-size: 0.75rem; }
}

.demo-mockup-bar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 0.85rem;
    background: var(--sisos-bg-body);
    border-bottom: 1px solid var(--sisos-border-color);
}

.demo-mockup-url {
    margin-left: 0.65rem;
    background: var(--sisos-bg-surface);
    border: 1px solid var(--sisos-border-color);
    border-radius: 6px;
    padding: 0.15rem 0.6rem;
    font-size: 0.7rem;
    color: var(--sisos-text-muted);
    flex-grow: 1;
    text-align: center;
    max-width: 280px;
}

.demo-mockup-url i {
    color: var(--sisos-text-muted);
    font-size: 0.7rem;
    margin-right: 0.2rem;
}

/* .demo-card-body: definido no bloco acima (demo-card) */

/* Mockup: stats row genérico */
.mockup-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.65rem;
}

.mockup-stats-row {
    margin-bottom: 1rem;
}

.mockup-stat-card {
    background: var(--sisos-bg-body);
    border: 1px solid var(--sisos-border-color);
    border-radius: 10px;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
}

.mockup-stat-label {
    font-size: 0.7rem;
    color: var(--sisos-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.mockup-stat-value {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--sisos-text-primary);
    margin-top: 0.15rem;
}

.mockup-stat-value.money-green { color: #059669; }
.mockup-stat-value.money-red { color: #dc2626; }

.mockup-stat-trend {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.7rem;
    font-weight: 600;
    margin-top: 0.25rem;
}

.mockup-stat-trend.up { color: var(--sisos-success); }

.mockup-chart-area {
    background: var(--sisos-bg-body);
    border: 1px solid var(--sisos-border-color);
    border-radius: 10px;
    padding: 0.85rem;
}

.mockup-chart-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--sisos-text-secondary);
    margin-bottom: 0.6rem;
}

.mockup-bars {
    display: flex;
    align-items: flex-end;
    gap: 0.4rem;
    height: 90px;
}

.mockup-bar {
    flex: 1;
    background: linear-gradient(180deg, var(--sisos-primary), rgba(67, 97, 238, 0.4));
    border-radius: 4px 4px 0 0;
    min-height: 10%;
}

.mockup-bar[data-h="40"] { height: 40%; }
.mockup-bar[data-h="48"] { height: 48%; }
.mockup-bar[data-h="50"] { height: 50%; }
.mockup-bar[data-h="55"] { height: 55%; }
.mockup-bar[data-h="60"] { height: 60%; }
.mockup-bar[data-h="62"] { height: 62%; }
.mockup-bar[data-h="65"] { height: 65%; }
.mockup-bar[data-h="72"] { height: 72%; }
.mockup-bar[data-h="74"] { height: 74%; }
.mockup-bar[data-h="78"] { height: 78%; }
.mockup-bar[data-h="80"] { height: 80%; }
.mockup-bar[data-h="85"] { height: 85%; }
.mockup-bar[data-h="92"] { height: 92%; }

/* Mockup: tabela de chamados */
.mockup-table {
    background: var(--sisos-bg-body);
    border: 1px solid var(--sisos-border-color);
    border-radius: 10px;
    overflow: hidden;
}

.mockup-table-row {
    display: grid;
    grid-template-columns: 60px 1fr 80px 90px;
    gap: 0.5rem;
    padding: 0.55rem 0.85rem;
    align-items: center;
    font-size: 0.78rem;
    border-bottom: 1px solid var(--sisos-border-color);
}

.mockup-table-row:last-child { border-bottom: none; }

.mockup-table-header {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.66rem;
    letter-spacing: 0.04em;
    background: var(--sisos-bg-surface);
    color: var(--sisos-text-muted);
}

.badge-pill {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 50px;
    font-size: 0.68rem;
    font-weight: 600;
    text-align: center;
    width: max-content;
}

.badge-red { background: rgba(239, 68, 68, 0.14); color: #dc2626; }
.badge-orange { background: rgba(251, 146, 60, 0.18); color: #ea580c; }
.badge-blue { background: rgba(67, 97, 238, 0.14); color: var(--sisos-primary); }
.badge-green { background: rgba(16, 185, 129, 0.14); color: #059669; }
.badge-gray { background: rgba(107, 114, 128, 0.14); color: #4b5563; }

.sla-bar {
    height: 6px;
    background: var(--sisos-border-color);
    border-radius: 50px;
    overflow: hidden;
    display: block;
}

.sla-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #ef4444, #f59e0b);
    border-radius: 50px;
}

.sla-fill.ok {
    background: linear-gradient(90deg, #10b981, #059669);
}

.sla-fill[data-w="22"] { width: 22%; }
.sla-fill[data-w="48"] { width: 48%; }
.sla-fill[data-w="72"] { width: 72%; }
.sla-fill[data-w="88"] { width: 88%; }

/* Mockup: OS card */
.mockup-os-card {
    background: var(--sisos-bg-body);
    border: 1px solid var(--sisos-border-color);
    border-radius: 12px;
    padding: 1rem;
}

.mockup-os-head {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 0.65rem;
}

.mockup-os-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--sisos-text-primary);
    margin-bottom: 0.6rem;
}

.mockup-os-progress {
    height: 8px;
    background: var(--sisos-border-color);
    border-radius: 50px;
    overflow: hidden;
    margin-bottom: 0.85rem;
}

.mockup-os-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--sisos-primary), #7c3aed);
    border-radius: 50px;
}

.mockup-os-progress-fill[data-w="65"] { width: 65%; }

.mockup-checklist {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.mockup-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.83rem;
    color: var(--sisos-text-secondary);
}

.mockup-check.done {
    color: var(--sisos-text-primary);
}

.mockup-check.done i {
    color: var(--sisos-success);
}

.mockup-check i {
    font-size: 0.95rem;
    color: var(--sisos-text-muted);
}

/* Mockup: inventário */
.mockup-inv-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.65rem;
}

.mockup-inv-card {
    background: var(--sisos-bg-body);
    border: 1px solid var(--sisos-border-color);
    border-radius: 10px;
    padding: 0.85rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
}

.mockup-inv-qr {
    width: 48px;
    height: 48px;
    background: var(--sisos-bg-surface);
    border: 1px solid var(--sisos-border-color);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.65rem;
    color: var(--sisos-text-primary);
    margin-bottom: 0.3rem;
}

.mockup-inv-card strong {
    font-size: 0.85rem;
    color: var(--sisos-text-primary);
}

.mockup-inv-card small {
    font-size: 0.7rem;
    color: var(--sisos-text-muted);
}

/* Mockup: gráfico de linhas (financeiro) */
.mockup-line-chart {
    height: 90px;
    width: 100%;
}

.mockup-line-chart svg {
    width: 100%;
    height: 100%;
}

.mockup-line-chart .line-receita { stroke: #10b981; }
.mockup-line-chart .line-despesa { stroke: #ef4444; stroke-dasharray: 3,2; }

.mockup-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--sisos-text-muted);
    padding: 3rem 1rem;
}

.mockup-empty i {
    font-size: 2.5rem;
    opacity: 0.4;
    margin-bottom: 0.6rem;
}

/* ── KPI card enhancements ─────────────────────────────────── */
.mockup-stat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.4rem;
}

.mockup-stat-ico {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.mockup-ico-blue   { background: rgba(67,97,238,.15);  color: var(--sisos-primary); }
.mockup-ico-purple { background: rgba(124,58,237,.15); color: #7c3aed; }
.mockup-ico-green  { background: rgba(16,185,129,.15); color: #059669; }
.mockup-ico-red    { background: rgba(239,68,68,.15);  color: #dc2626; }
.mockup-ico-orange { background: rgba(249,115,22,.15); color: #ea580c; }

.mockup-stat-delta {
    font-size: 0.67rem;
    font-weight: 700;
    padding: 0.1rem 0.4rem;
    border-radius: 50px;
}
.mockup-stat-delta.up   { background: rgba(16,185,129,.12); color: #059669; }
.mockup-stat-delta.down { background: rgba(239,68,68,.12);  color: #dc2626; }

/* ── Chart header + legend ─────────────────────────────────── */
.mockup-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.mockup-chart-legend {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.67rem;
    color: var(--sisos-text-muted);
}

.mockup-ldot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.mockup-ldot-primary { background: var(--sisos-primary); }
.mockup-ldot-success { background: #10b981; }
.mockup-ldot-danger  { background: #ef4444; }

/* ── Dual bar chart ─────────────────────────────────────────── */
.mockup-bars-dual {
    display: flex;
    align-items: flex-end;
    gap: 0.35rem;
    height: 68px;
}

.mockup-bgroup {
    flex: 1;
    display: flex;
    align-items: flex-end;
    height: 100%;
    gap: 2px;
}

.mbar-a, .mbar-b {
    flex: 1;
    border-radius: 3px 3px 0 0;
    min-height: 6%;
}
.mbar-a { background: rgba(67,97,238,.70); }
.mbar-b { background: rgba(16,185,129,.60); }

/* ── X-axis labels ──────────────────────────────────────────── */
.mockup-xlabels {
    display: flex;
    justify-content: space-around;
    margin-top: 0.3rem;
    font-size: 0.61rem;
    color: var(--sisos-text-muted);
}

/* ── Activity feed ──────────────────────────────────────────── */
.mockup-activity {
    background: var(--sisos-bg-body);
    border: 1px solid var(--sisos-border-color);
    border-radius: 8px;
    margin-top: 0.65rem;
    overflow: hidden;
}

.mockup-activity-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.38rem 0.7rem;
    font-size: 0.75rem;
    border-bottom: 1px solid var(--sisos-border-color);
}
.mockup-activity-row:last-child { border-bottom: none; }

.mockup-act-text {
    flex: 1;
    color: var(--sisos-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mockup-act-time {
    font-size: 0.63rem;
    color: var(--sisos-text-muted);
    flex-shrink: 0;
}

/* ── Avatar initials ────────────────────────────────────────── */
.mockup-ava {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 0.62rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
    letter-spacing: 0;
}
.mockup-ava-sm { width: 20px; height: 20px; font-size: 0.55rem; }

.mockup-ava-red    { background: #ef4444; }
.mockup-ava-orange { background: #f97316; }
.mockup-ava-blue   { background: var(--sisos-primary); }
.mockup-ava-purple { background: #7c3aed; }
.mockup-ava-green  { background: #10b981; }
.mockup-ava-gray   { background: #6b7280; }

/* ── Toolbar (chamados / inventário) ────────────────────────── */
.mockup-toolbar {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.7rem;
    border-bottom: 1px solid var(--sisos-border-color);
    background: var(--sisos-bg-surface);
}

.mockup-search-area {
    flex: 1;
    background: var(--sisos-bg-body);
    border: 1px solid var(--sisos-border-color);
    border-radius: 6px;
    padding: 0.27rem 0.6rem;
    font-size: 0.71rem;
    color: var(--sisos-text-muted);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.mockup-tool-btns {
    display: flex;
    gap: 0.25rem;
}

.mockup-tool-btn {
    padding: 0.22rem 0.55rem;
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 600;
    cursor: default;
    background: var(--sisos-bg-body);
    border: 1px solid var(--sisos-border-color);
    color: var(--sisos-text-muted);
}
.mockup-tool-btn.active {
    background: var(--sisos-primary);
    border-color: var(--sisos-primary);
    color: #fff;
}

/* ── Chamados table variant ─────────────────────────────────── */
.mockup-table-chamados .mockup-table-row {
    grid-template-columns: 46px 1fr 66px 68px 24px;
}

/* ── Table footer + pagination ──────────────────────────────── */
.mockup-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.38rem 0.85rem;
    font-size: 0.69rem;
    color: var(--sisos-text-muted);
    border-top: 1px solid var(--sisos-border-color);
    background: var(--sisos-bg-surface);
}

.mockup-pagination {
    display: flex;
    gap: 0.2rem;
    align-items: center;
}

.mockup-page {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--sisos-bg-body);
    border: 1px solid var(--sisos-border-color);
    color: var(--sisos-text-secondary);
    font-size: 0.66rem;
    font-weight: 600;
}
.mockup-page.active {
    background: var(--sisos-primary);
    border-color: var(--sisos-primary);
    color: #fff;
}

/* ── OS: meta rows ──────────────────────────────────────────── */
.mockup-os-meta {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    margin-bottom: 0.7rem;
    padding: 0.45rem 0.6rem;
    background: var(--sisos-bg-surface);
    border-radius: 7px;
    border: 1px solid var(--sisos-border-color);
}

.mockup-os-meta-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: var(--sisos-text-secondary);
}

.mockup-os-meta-row i {
    font-size: 0.75rem;
    color: var(--sisos-text-muted);
    flex-shrink: 0;
}

/* ── OS: progress with % label ──────────────────────────────── */
.mockup-os-progress-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.7rem;
}

.mockup-os-progress-wrap .mockup-os-progress {
    flex: 1;
    margin-bottom: 0;
}

.mockup-os-pct {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--sisos-primary);
    flex-shrink: 0;
}

/* ── OS: footer action tags ─────────────────────────────────── */
.mockup-os-footer {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.7rem;
    flex-wrap: wrap;
}

.mockup-os-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 500;
    background: var(--sisos-bg-surface);
    border: 1px solid var(--sisos-border-color);
    color: var(--sisos-text-muted);
}

.mockup-os-tag-active {
    background: rgba(67,97,238,.10);
    border-color: var(--sisos-primary);
    color: var(--sisos-primary);
    font-weight: 700;
}

/* ── Inventário: asset rows ─────────────────────────────────── */
.mockup-asset-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.48rem 0.75rem;
    border-bottom: 1px solid var(--sisos-border-color);
    font-size: 0.77rem;
}
.mockup-asset-row:last-of-type { border-bottom: none; }

.mockup-asset-ico {
    width: 28px;
    height: 28px;
    background: var(--sisos-bg-surface);
    border: 1px solid var(--sisos-border-color);
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    color: var(--sisos-text-secondary);
    flex-shrink: 0;
}

.mockup-asset-info {
    flex: 1;
    min-width: 0;
}
.mockup-asset-info strong {
    display: block;
    font-size: 0.77rem;
    color: var(--sisos-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mockup-asset-info small {
    font-size: 0.67rem;
    color: var(--sisos-text-muted);
}

/* ── Financeiro: area chart ─────────────────────────────────── */
.mockup-area-chart {
    height: 78px;
    width: 100%;
    overflow: hidden;
    border-radius: 4px;
}
.mockup-area-chart svg {
    width: 100%;
    height: 100%;
}
.area-receita { fill: rgba(16,185,129,.12); }
.area-despesa { fill: rgba(239,68,68,.08); }
.line-receita { stroke: #10b981; }
.line-despesa { stroke: #ef4444; stroke-dasharray: 4,2; }

/* ── Financeiro: transaction list ───────────────────────────── */
.mockup-fin-txlist {
    background: var(--sisos-bg-body);
    border: 1px solid var(--sisos-border-color);
    border-radius: 8px;
    margin-top: 0.6rem;
    overflow: hidden;
}

.mockup-fin-tx {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.42rem 0.7rem;
    border-bottom: 1px solid var(--sisos-border-color);
    font-size: 0.75rem;
}
.mockup-fin-tx:last-child { border-bottom: none; }

.mockup-fin-tx-icon {
    font-size: 1rem;
    flex-shrink: 0;
    line-height: 1;
}
.mockup-fin-tx-icon.tx-in  { color: #10b981; }
.mockup-fin-tx-icon.tx-out { color: #ef4444; }

.mockup-fin-tx-info {
    flex: 1;
    min-width: 0;
}
.mockup-fin-tx-info strong {
    display: block;
    font-size: 0.75rem;
    color: var(--sisos-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mockup-fin-tx-info small {
    font-size: 0.64rem;
    color: var(--sisos-text-muted);
}

.mockup-fin-tx-val {
    font-size: 0.77rem;
    font-weight: 700;
    flex-shrink: 0;
    white-space: nowrap;
}
.mockup-fin-tx-val.tx-in  { color: #10b981; }
.mockup-fin-tx-val.tx-out { color: #ef4444; }

/* ── Relatórios: lista de relatórios disponíveis ────────────── */
.mockup-rep-list {
    background: var(--sisos-bg-body);
    border: 1px solid var(--sisos-border-color);
    border-radius: 8px;
    overflow: hidden;
}
.mockup-rep-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.7rem;
    border-bottom: 1px solid var(--sisos-border-color);
    font-size: 0.75rem;
}
.mockup-rep-row:last-child { border-bottom: none; }
.mockup-rep-ico {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}
.mockup-rep-info { flex: 1; min-width: 0; }
.mockup-rep-info strong {
    display: block;
    font-size: 0.76rem;
    color: var(--sisos-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mockup-rep-info small {
    font-size: 0.64rem;
    color: var(--sisos-text-muted);
}

@media (max-width: 575.98px) {
    .mockup-row { grid-template-columns: 1fr; }
    .mockup-inv-grid { grid-template-columns: 1fr 1fr; }
    .mockup-table-row { grid-template-columns: 50px 1fr 70px; }
    .mockup-table-row > :nth-child(4) { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   PRICING
   ═══════════════════════════════════════════════════════════ */
.pricing-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}

.pricing-toggle label {
    font-weight: 600;
    color: var(--sisos-text-secondary);
    cursor: pointer;
    transition: color 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.pricing-toggle label.active {
    color: var(--sisos-text-primary);
}

.pricing-save-badge {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pricing-card {
    background: var(--sisos-bg-surface);
    border: 1px solid var(--sisos-border-color);
    border-radius: 18px;
    padding: 2rem 1.5rem;
    text-align: center;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

.pricing-card.popular {
    border-color: var(--sisos-primary);
    border-width: 2px;
    transform: scale(1.04);
    box-shadow: 0 16px 48px rgba(67, 97, 238, 0.20);
    background: linear-gradient(180deg, var(--sisos-bg-surface) 0%, rgba(67, 97, 238, 0.04) 100%);
    padding-top: 2.5rem;
}

html.dark .pricing-card.popular {
    background: linear-gradient(180deg, var(--sisos-bg-surface) 0%, rgba(67, 97, 238, 0.10) 100%);
    box-shadow: 0 16px 48px rgba(67, 97, 238, 0.30);
}

.pricing-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.10);
    border-color: rgba(67, 97, 238, 0.40);
}

.pricing-card.popular:hover {
    transform: translateY(-6px) scale(1.04);
    box-shadow: 0 24px 56px rgba(67, 97, 238, 0.28);
}

.pricing-card .badge-popular {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    background: #4361ee !important;
    background-image: linear-gradient(135deg, #4361ee 0%, #7c3aed 100%) !important;
    color: #ffffff !important;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.45rem 1.1rem;
    border-radius: 50px;
    box-shadow: 0 8px 22px rgba(67, 97, 238, 0.40);
    white-space: nowrap;
    z-index: 5;
}

.pricing-card .plan-name {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--sisos-text-primary);
    margin-bottom: 0.4rem;
    margin-top: 0.5rem;
}

.pricing-card .plan-description {
    font-size: 0.88rem;
    color: var(--sisos-text-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.5;
    min-height: 2.6em;
}

.pricing-card .plan-price {
    font-size: 2.75rem;
    font-weight: 800;
    color: var(--sisos-text-primary);
    line-height: 1;
    margin-bottom: 0.4rem;
    letter-spacing: -0.02em;
}

.pricing-card .plan-price .currency {
    font-size: 1.2rem;
    vertical-align: super;
    font-weight: 700;
    margin-right: 0.15rem;
}

.pricing-card .plan-price .period {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--sisos-text-muted);
}

.pricing-card .plan-features {
    text-align: left;
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
    flex-grow: 1;
}

.pricing-card .plan-features li {
    padding: 0.45rem 0;
    font-size: 0.88rem;
    color: var(--sisos-text-primary);
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    border-bottom: 1px dashed var(--sisos-border-color);
}

.pricing-card .plan-features li:last-child {
    border-bottom: none;
}

.pricing-card .plan-features li i {
    color: var(--sisos-success);
    font-size: 0.95rem;
    margin-top: 0.15rem;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.14);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
}

.pricing-card .plan-features li.disabled {
    color: var(--sisos-text-muted);
    text-decoration: line-through;
}

.pricing-card .plan-features li.disabled i {
    color: var(--sisos-text-muted);
    background: rgba(107, 114, 128, 0.14);
}

/* Linha de herança "Tudo do plano X +" */
.pricing-card .plan-features li.feature-inherits {
    background: linear-gradient(90deg, rgba(67, 97, 238, 0.08), rgba(124, 58, 237, 0.04));
    border: 1px solid rgba(67, 97, 238, 0.18);
    border-radius: 8px;
    padding: 0.55rem 0.7rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid rgba(67, 97, 238, 0.18);
    color: var(--sisos-text-primary);
}

.pricing-card .plan-features li.feature-inherits i {
    background: linear-gradient(135deg, #4361ee, #7c3aed);
    color: #fff;
}

.pricing-card .plan-features li.feature-inherits strong {
    font-weight: 700;
    color: var(--sisos-text-primary);
}

/* Anchor scroll-offset (compensar navbar fixa) */
section[id] {
    scroll-margin-top: 80px;
}

.pricing-card .btn {
    font-weight: 600;
    padding: 0.7rem 1rem;
    border-radius: 10px;
}

.pricing-card.popular .btn-primary {
    box-shadow: 0 8px 22px rgba(67, 97, 238, 0.30);
}

/* Garantias e benefícios pós-pricing */
.pricing-guarantees {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin: 3rem auto 0;
    max-width: 980px;
}

.pricing-guarantee {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background: var(--sisos-bg-surface);
    border: 1px solid var(--sisos-border-color);
    border-radius: 12px;
    padding: 0.85rem 1rem;
}

.pricing-guarantee i {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(67, 97, 238, 0.10);
    color: var(--sisos-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.pricing-guarantee div {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.pricing-guarantee strong {
    font-size: 0.9rem;
    color: var(--sisos-text-primary);
}

.pricing-guarantee small {
    font-size: 0.75rem;
    color: var(--sisos-text-muted);
}

/* Skeleton loaders nos cards de pricing */
.pricing-skeleton {
    background: var(--sisos-bg-surface);
    border: 2px solid var(--sisos-border-color);
    border-radius: 18px;
    padding: 2rem 1.5rem;
    text-align: center;
    height: 100%;
}

.pricing-skeleton .skeleton-line {
    background: linear-gradient(90deg,
        var(--sisos-border-color) 25%,
        rgba(67, 97, 238, 0.05) 50%,
        var(--sisos-border-color) 75%
    );
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s infinite;
    border-radius: var(--sisos-radius-sm);
    height: 1rem;
    margin-bottom: 0.75rem;
}

.pricing-skeleton .skeleton-price {
    height: 3rem;
    width: 60%;
    margin: 1rem auto;
}

.pricing-skeleton .skeleton-btn {
    height: 2.5rem;
    margin-top: 1rem;
}

/* Larguras utilitárias do skeleton (evitam style inline em JS) */
.pricing-skeleton .skeleton-line-w60 { width: 60%; margin-left: auto; margin-right: auto; margin-bottom: 1rem; }
.pricing-skeleton .skeleton-line-w65 { width: 65%; }
.pricing-skeleton .skeleton-line-w70 { width: 70%; }
.pricing-skeleton .skeleton-line-w80 { width: 80%; }
.pricing-skeleton .skeleton-line-w90 { width: 90%; }

/* Espaçador equivalente ao badge "Mais Popular" */
.pricing-card .badge-popular-spacer {
    height: 1.5rem;
}

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

/* Cupom inline */
.pricing-coupon {
    text-align: center;
    margin-top: 1.5rem;
}

.pricing-coupon .coupon-trigger {
    font-size: 0.85rem;
    color: var(--sisos-primary);
    cursor: pointer;
    text-decoration: underline;
    background: none;
    border: none;
    padding: 0;
}

.pricing-coupon .coupon-input-group {
    max-width: 360px;
    margin: 0.75rem auto 0;
}

/* ═══════════════════════════════════════════════════════════
   CTA TRIAL
   ═══════════════════════════════════════════════════════════ */
.landing-cta {
    position: relative;
    background: linear-gradient(135deg, #1e1b4b 0%, #4338ca 50%, #6d28d9 100%);
    padding: 4.5rem 0;
    text-align: center;
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}

.landing-cta-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.landing-cta-bg::before,
.landing-cta-bg::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.5;
}

.landing-cta-bg::before {
    width: 380px;
    height: 380px;
    background: rgba(168, 85, 247, 0.55);
    top: -120px;
    right: -80px;
}

.landing-cta-bg::after {
    width: 320px;
    height: 320px;
    background: rgba(59, 130, 246, 0.55);
    bottom: -100px;
    left: -60px;
}

.cta-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    color: #fff;
    border-radius: 50px;
    padding: 0.35rem 0.9rem;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
}

.landing-cta h2 {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 0.85rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #fff;
}

.cta-highlight {
    color: #fde047;
    text-shadow: 0 2px 12px rgba(253, 224, 71, 0.35);
}

.landing-cta p {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 1.75rem;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.cta-actions {
    display: flex;
    gap: 0.85rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 1.75rem;
}

.landing-cta .btn-cta-primary {
    background: #fff;
    color: var(--sisos-primary);
    border: none;
    padding: 0.85rem 1.85rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1rem;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.30);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.landing-cta .btn-cta-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.40);
    color: var(--sisos-primary);
}

.btn-outline-light {
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    padding: 0.85rem 1.85rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: #fff;
    color: #fff;
    transform: translateY(-2px);
}

.cta-trust-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.cta-trust-list li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.92);
    font-weight: 500;
}

.cta-trust-list i {
    color: #4ade80;
    font-size: 1rem;
}

@media (min-width: 768px) {
    .landing-cta {
        padding: 6rem 0;
    }
    .landing-cta h2 {
        font-size: 2.75rem;
    }
    .landing-cta p {
        font-size: 1.15rem;
    }
}

/* ═══════════════════════════════════════════════════════════
   FAQ
   ═══════════════════════════════════════════════════════════ */
.faq-accordion .accordion-item {
    border: 1px solid var(--sisos-border-color);
    margin-bottom: 0.5rem;
    border-radius: var(--sisos-radius-md) !important;
    overflow: hidden;
}

.faq-accordion .accordion-button {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--sisos-text-primary);
    background: var(--sisos-bg-surface);
    padding: 1rem 1.25rem;
}

.faq-accordion .accordion-button:not(.collapsed) {
    background: var(--sisos-bg-surface);
    color: var(--sisos-primary);
    box-shadow: none;
}

.faq-accordion .accordion-button:focus {
    box-shadow: 0 0 0 0.2rem rgba(67, 97, 238, 0.15);
}

.faq-accordion .accordion-body {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--sisos-text-secondary);
    background: var(--sisos-bg-surface);
}

/* ═══════════════════════════════════════════════════════════
   FOOTER LANDING
   ═══════════════════════════════════════════════════════════ */
.landing-footer {
    background: var(--sisos-bg-surface);
    border-top: 1px solid var(--sisos-border-color);
    padding: 3.5rem 0 1.5rem;
}

.landing-footer .footer-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--sisos-text-primary);
}

.landing-footer .footer-brand img {
    height: 30px;
    width: auto;
}

.landing-footer .footer-description {
    font-size: 0.88rem;
    color: var(--sisos-text-secondary);
    line-height: 1.6;
    margin-bottom: 1rem;
    max-width: 320px;
}

.footer-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.footer-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--sisos-bg-body);
    border: 1px solid var(--sisos-border-color);
    border-radius: 50px;
    padding: 0.3rem 0.7rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--sisos-text-secondary);
}

.footer-badge i {
    color: var(--sisos-success);
    font-size: 0.85rem;
}

.landing-footer .footer-heading {
    color: var(--sisos-text-primary);
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.landing-footer .footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.landing-footer .footer-links li {
    margin-bottom: 0.55rem;
}

.landing-footer .footer-links a {
    font-size: 0.9rem;
    color: var(--sisos-text-secondary);
    text-decoration: none;
    transition: color 0.2s, padding-left 0.2s;
    display: inline-block;
}

.landing-footer .footer-links a:hover {
    color: var(--sisos-primary);
    padding-left: 0.25rem;
}

.landing-footer .footer-copyright {
    font-size: 0.82rem;
    color: var(--sisos-text-muted);
    border-top: 1px solid var(--sisos-border-color);
    padding-top: 1.5rem;
    margin-top: 2.5rem;
}

/* ═══════════════════════════════════════════════════════════
   SCROLL ANIMATIONS
   ═══════════════════════════════════════════════════════════ */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Delay sequencial para items em grid */
.animate-on-scroll[data-delay="1"] { transition-delay: 0.1s; }
.animate-on-scroll[data-delay="2"] { transition-delay: 0.2s; }
.animate-on-scroll[data-delay="3"] { transition-delay: 0.3s; }
.animate-on-scroll[data-delay="4"] { transition-delay: 0.4s; }
.animate-on-scroll[data-delay="5"] { transition-delay: 0.5s; }

/* Respeitar prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .animate-on-scroll {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ═══════════════════════════════════════════════════════════
   TERMOS PÚBLICO — LAYOUT STANDALONE
   ═══════════════════════════════════════════════════════════ */
.termos-publico-content {
    min-height: 60vh;
    padding: 6rem 0 3rem;
}

.termos-publico-content .document-body {
    background: var(--sisos-bg-surface);
    border: 1px solid var(--sisos-border-color);
    border-radius: var(--sisos-radius-lg);
    padding: 2rem;
    line-height: 1.7;
    color: var(--sisos-text-primary);
}

.termos-publico-content .document-body h1,
.termos-publico-content .document-body h2,
.termos-publico-content .document-body h3 {
    color: var(--sisos-text-primary);
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.termos-publico-content .document-body p {
    margin-bottom: 1rem;
}

.termos-publico-content .document-empty {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--sisos-text-muted);
}

.termos-publico-content .document-empty i {
    font-size: 3rem;
    opacity: 0.4;
    margin-bottom: 1rem;
}