body { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }

.hero-mesh {
    background-color: #060b14;
}
.hero-mesh.grid-lines {
    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
        radial-gradient(ellipse 80% 60% at 10% 20%, rgba(37, 99, 235, 0.22), transparent),
        radial-gradient(ellipse 60% 50% at 90% 10%, rgba(6, 182, 212, 0.14), transparent),
        radial-gradient(ellipse 50% 40% at 50% 100%, rgba(29, 78, 216, 0.18), transparent);
    background-size: 64px 64px, 64px 64px, auto, auto, auto;
}
.hero-mesh--indigo.grid-lines {
    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
        radial-gradient(ellipse 80% 60% at 10% 20%, rgba(79, 70, 229, 0.28), transparent),
        radial-gradient(ellipse 60% 50% at 90% 10%, rgba(6, 182, 212, 0.14), transparent),
        radial-gradient(ellipse 50% 40% at 50% 100%, rgba(67, 56, 202, 0.2), transparent);
    background-size: 64px 64px, 64px 64px, auto, auto, auto;
}
.hero-mesh--cyan.grid-lines {
    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
        radial-gradient(ellipse 80% 60% at 10% 20%, rgba(6, 182, 212, 0.24), transparent),
        radial-gradient(ellipse 60% 50% at 90% 10%, rgba(37, 99, 235, 0.18), transparent),
        radial-gradient(ellipse 50% 40% at 50% 100%, rgba(14, 116, 144, 0.2), transparent);
    background-size: 64px 64px, 64px 64px, auto, auto, auto;
}
.hero-mesh--indigo:not(.grid-lines) {
    background-image:
        radial-gradient(ellipse 80% 60% at 10% 20%, rgba(79, 70, 229, 0.28), transparent),
        radial-gradient(ellipse 60% 50% at 90% 10%, rgba(6, 182, 212, 0.14), transparent),
        radial-gradient(ellipse 50% 40% at 50% 100%, rgba(67, 56, 202, 0.2), transparent);
}
.hero-mesh--cyan:not(.grid-lines) {
    background-image:
        radial-gradient(ellipse 80% 60% at 10% 20%, rgba(6, 182, 212, 0.24), transparent),
        radial-gradient(ellipse 60% 50% at 90% 10%, rgba(37, 99, 235, 0.18), transparent),
        radial-gradient(ellipse 50% 40% at 50% 100%, rgba(14, 116, 144, 0.2), transparent);
}

.grid-lines:not(.hero-mesh) {
    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 64px 64px;
}

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.hero-mesh .reveal { opacity: 1; transform: none; }

.shadow-glow { box-shadow: 0 0 80px -20px rgba(37, 99, 235, 0.45); }
.shadow-card { box-shadow: 0 4px 24px -4px rgba(10, 22, 40, 0.12); }
.shadow-card-lg { box-shadow: 0 24px 48px -12px rgba(10, 22, 40, 0.18); }

.feature-card {
    transition: border-color .2s, box-shadow .2s, transform .15s;
}
.feature-card:hover {
    border-color: #2563eb;
    box-shadow: 0 8px 28px -8px rgba(37, 99, 235, 0.18);
    transform: translateY(-2px);
}

.platform-nav-btn { transition: background .2s, border-color .2s, box-shadow .2s; }
.platform-nav-btn.active {
    background: #fff;
    border-color: #2563eb;
    box-shadow: 0 4px 20px -4px rgba(37, 99, 235, 0.25);
}
.platform-nav-btn.active .platform-nav-icon { background: #2563eb; color: #fff; }

.platform-shot {
    position: absolute; inset: 0; opacity: 0;
    transform: scale(1.02);
    transition: opacity .45s ease, transform .5s ease;
    pointer-events: none;
}
.platform-shot.active { opacity: 1; transform: scale(1); pointer-events: auto; }

.platform-mock-inner {
    padding: 12px 14px; height: 100%; overflow: auto;
    background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
    font-family: Inter, sans-serif; font-size: 11px; color: #334155;
}

body.menu-open { overflow: hidden; }

.appcte-brand { display: block; line-height: 0; text-decoration: none; flex-shrink: 0; }
.appcte-brand__logo { display: block; height: 2.5rem; width: auto; }
.appcte-brand__logo--scrolled { display: none; }
.appcte-brand.is-scrolled .appcte-brand__logo--hero { display: none; }
.appcte-brand.is-scrolled .appcte-brand__logo--scrolled { display: block; }

@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}
.live-dot { animation: pulse-dot 2s ease-in-out infinite; }

.faq-item[open] summary { color: #2563eb; }
.faq-item summary { cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }

.landing-compare-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 640px) {
    .landing-compare-row { grid-template-columns: 1fr; }
}
.landing-step-line {
    position: absolute;
    left: 1.125rem;
    top: 2.5rem;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, rgba(99,102,241,.4), rgba(99,102,241,.05));
}
.landing-step-line--cyan {
    background: linear-gradient(180deg, rgba(6,182,212,.4), rgba(6,182,212,.05));
}

/* Hero — painel fiscal com DACTE em overlay */
        .hero-visual-composite {
            position: relative;
            min-height: 400px;
            background: #fff;
        }
        @media (min-width: 768px) {
            .hero-visual-composite { min-height: 460px; }
        }
        .fiscal-mock {
            font-size: 10px;
            display: flex;
            flex-direction: column;
            min-height: 400px;
            height: 100%;
        }
        @media (min-width: 768px) {
            .fiscal-mock { min-height: 460px; padding-right: 0; }
        }
        .fiscal-kpi-grid {
            display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
            padding: 8px; border-bottom: 1px solid #e2e8f0; background: #fafbfc;
        }
        @media (min-width: 640px) { .fiscal-kpi-grid { grid-template-columns: repeat(4, 1fr); } }
        .fiscal-kpi {
            background: #fff; border: 1px solid #e2e8f0; border-radius: 6px;
            padding: 6px 4px; text-align: center;
        }
        .fiscal-kpi strong { display: block; font-size: 13px; line-height: 1.1; }
        .fiscal-kpi span {
            font-size: 7px; text-transform: uppercase; font-weight: 700;
            color: #64748b; letter-spacing: 0.03em;
        }
        .fiscal-table { width: 100%; border-collapse: collapse; font-size: 9px; }
        .fiscal-table th {
            text-align: left; padding: 6px 8px; background: #f8fafc;
            font-size: 8px; text-transform: uppercase; color: #64748b;
            border-bottom: 1px solid #e2e8f0;
        }
        .fiscal-table td { padding: 6px 8px; border-bottom: 1px solid #f1f5f9; }
        .dacte-floating {
            position: absolute;
            z-index: 15;
            right: 0.75rem;
            bottom: 0.75rem;
            width: min(48%, 11rem);
            pointer-events: none;
        }
        @media (min-width: 640px) {
            .dacte-floating {
                right: 1rem;
                bottom: 1rem;
                width: 12.5rem;
            }
        }
        @media (min-width: 1024px) {
            .dacte-floating { width: 13.25rem; }
        }
        @media (max-width: 639px) {
            .hero-visual-composite {
                display: flex;
                flex-direction: column;
            }
            .fiscal-mock { min-height: auto; }
            .dacte-floating {
                position: relative;
                order: 2;
                right: auto;
                bottom: auto;
                width: 100%;
                max-width: 16rem;
                margin: 0.25rem auto 0.5rem;
                padding: 0 0.75rem;
            }
            .dacte-floating::before { display: none; }
            .dacte-doc {
                transform: rotate(-1deg);
                transform-origin: center;
                margin: 0 auto;
            }
        }
        .dacte-floating::before {
            content: '';
            position: absolute;
            inset: -8px -12px -12px -24px;
            background: linear-gradient(135deg, transparent 30%, rgba(241, 245, 249, 0.95) 70%);
            border-radius: 0.75rem;
            z-index: -1;
        }
        /* DACTE compacto — MOC 4.00 modal rodoviário */
        .dacte-doc {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 5px;
            line-height: 1.22;
            color: #000;
            background: #fff;
            border: 1px solid #000;
            box-shadow: 0 16px 40px -8px rgba(15, 23, 42, 0.28);
            width: 100%;
            transform: rotate(2.5deg);
            transform-origin: bottom right;
        }
        @media (min-width: 640px) {
            .dacte-doc { font-size: 5.4px; transform: rotate(3deg); }
        }
        .dacte-box { border: 1px solid #000; padding: 3px 4px; }
        .dacte-box__title {
            font-size: 5px;
            font-weight: 700;
            text-transform: uppercase;
            border-bottom: 1px solid #000;
            margin: -3px -4px 3px;
            padding: 2px 4px;
            background: #f5f5f5;
        }
        .dacte-top {
            display: grid;
            grid-template-columns: 1.1fr 0.9fr 0.75fr;
            border-bottom: 1px solid #000;
        }
        .dacte-top__emit .dacte-razao {
            font-size: 7px;
            font-weight: 700;
            line-height: 1.2;
            margin-bottom: 2px;
        }
        .dacte-top__center {
            text-align: center;
            border-left: 1px solid #000;
            border-right: 1px solid #000;
            padding: 4px 3px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .dacte-top__center h2 {
            margin: 0;
            font-size: 13px;
            font-weight: 900;
            letter-spacing: 0.02em;
            line-height: 1;
        }
        .dacte-top__center p {
            margin: 2px 0 0;
            font-size: 4.5px;
            line-height: 1.2;
        }
        .dacte-modal-badge {
            display: inline-block;
            margin-top: 3px;
            padding: 1px 6px;
            border: 1px solid #000;
            font-size: 5px;
            font-weight: 800;
            letter-spacing: 0.08em;
        }
        .dacte-top__id { font-size: 5px; }
        .dacte-top__id table { width: 100%; border-collapse: collapse; }
        .dacte-top__id td {
            border: 1px solid #000;
            padding: 2px 3px;
            vertical-align: top;
        }
        .dacte-top__id .lbl { font-size: 4px; font-weight: 700; text-transform: uppercase; display: block; }
        .dacte-top__id .val { font-size: 6px; font-weight: 700; }
        .dacte-chave-row {
            display: grid;
            grid-template-columns: 52px 1fr 42px;
            gap: 0;
            border-bottom: 1px solid #000;
            align-items: stretch;
        }
        .dacte-barcode {
            border-right: 1px solid #000;
            background: repeating-linear-gradient(
                90deg,
                #000 0 1.5px, #fff 1.5px 3px,
                #000 3px 4px, #fff 4px 6px
            );
            min-height: 32px;
        }
        .dacte-chave-block { padding: 3px 4px; border-right: 1px solid #000; }
        .dacte-chave-block .lbl {
            font-size: 4.5px;
            font-weight: 700;
            text-transform: uppercase;
        }
        .dacte-chave-digits {
            font-family: 'Courier New', monospace;
            font-size: 5.2px;
            font-weight: 700;
            letter-spacing: 0.04em;
            margin-top: 2px;
            line-height: 1.45;
        }
        .dacte-qr {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2px;
            background: #fff;
        }
        .dacte-qr-inner {
            width: 34px;
            height: 34px;
            border: 1px solid #000;
            background:
                linear-gradient(90deg, #000 2px, transparent 2px) 0 0 / 6px 6px,
                linear-gradient(#000 2px, transparent 2px) 0 0 / 6px 6px;
            background-color: #fff;
        }
        .dacte-tipo-row {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            border-bottom: 1px solid #000;
            font-size: 5px;
        }
        .dacte-tipo-row > div {
            padding: 2px 4px;
            border-right: 1px solid #000;
        }
        .dacte-tipo-row > div:last-child { border-right: none; }
        .dacte-tipo-row .lbl { font-weight: 700; text-transform: uppercase; font-size: 4.5px; }
        .dacte-pair-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            border-bottom: 1px solid #000;
        }
        .dacte-pair-row .dacte-box { border: none; border-right: 1px solid #000; }
        .dacte-pair-row .dacte-box:last-child { border-right: none; }
        .dacte-field { margin-bottom: 2px; }
        .dacte-field .k { font-weight: 700; }
        .dacte-protocol {
            padding: 3px 4px;
            border-top: 2px solid #000;
            font-size: 4.8px;
            font-weight: 700;
            text-align: center;
            background: #fafafa;
        }
        .dacte-valor-destaque {
            display: flex;
            justify-content: space-between;
            padding: 3px 5px;
            border-top: 1px solid #000;
            font-size: 5.5px;
            font-weight: 700;
        }
        .badge-aut { background: #ecfdf5; color: #047857; font-size: 8px; font-weight: 700; padding: 2px 6px; border-radius: 99px; }
        .badge-rasc { background: #f1f5f9; color: #475569; font-size: 8px; font-weight: 700; padding: 2px 6px; border-radius: 99px; }
        .badge-val { background: #eff6ff; color: #1d4ed8; font-size: 8px; font-weight: 700; padding: 2px 6px; border-radius: 99px; }

        .platform-mock-inner {
            padding: 12px 14px; height: 100%; overflow: auto;
            background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
            font-family: Inter, sans-serif; font-size: 11px; color: #334155;
        }