/* ============================================================
   ARGUS — Estilos Específicos do Site
   Extensão do DS Apple para o produto ARGUS

   Organização:
   1. Variáveis ARGUS (extende tokens DS)
   2. Header overrides
   3. Hero
   4. Quem Somos
   5. Nossos Números
   6. Diferencial
   7. Depoimentos
   8. Fale Conosco
   9. Demonstração
   10. Footer
   11. Formulários ARGUS
   12. Utilitários ARGUS
   13. Responsivo
   ============================================================ */


/* ══════════════════════════════════════════
   1. VARIÁVEIS ARGUS
   Extende os tokens do DS sem sobrescrever
════════════════════════════════════════════ */

/* ──────────────────────────────────────────
   PALETA SAAS ARGUS
   Referência: Stripe (#0a2540), Linear, Salesforce
   Deep Navy substitui o preto/cinza genérico.
   Transmite: confiança · tecnologia · seriedade
─────────────────────────────────────────── */
:root {
    /* Fundos navy — hierarquia de profundidade */
    --argus-bg-navy-deep: #061220;
    /* footer, camada mais funda         */
    --argus-bg-navy: #0b1d3a;
    /* seções escuras principais (≈Stripe) */
    --argus-bg-navy-mid: #0e2548;
    /* cards e dobras alternadas escuras */
    --argus-bg-navy-light: #133060;
    /* destaques e gradientes secundários */

    /* Fundo de seção cinza — leve toque azul (SaaS premium) */
    --argus-bg-section-gray: #eef2f7;

    /* Nav escura — translúcida sobre navy */
    --argus-nav-dark-bg: rgba(6, 18, 32, 0.92);

    /* Gradiente do hero — navy rico com profundidade */
    --argus-gradient-hero: linear-gradient(135deg,
            #040f1e 0%,
            #0b1d3a 40%,
            #0d2655 75%,
            #071428 100%);

    /* Accent glow para título hero */
    --argus-glow-blue: 0 0 48px rgba(41, 151, 255, 0.4),
        0 0 96px rgba(41, 151, 255, 0.18);

    /* Feature cards — gradientes ricos sobre base navy */
    --argus-card-auto: linear-gradient(135deg, #0b1d3a 0%, #0d3166 100%);
    --argus-card-compliance: linear-gradient(135deg, #071830 0%, #0f3260 100%);
    /* badge-1: azul profundo */
    --argus-card-transparency: linear-gradient(135deg, #09082a 0%, #1a1858 100%);
    /* badge-3: índigo */
    --argus-card-integrations: linear-gradient(135deg, #073520 0%, #0a5c38 100%);
    --argus-card-support: linear-gradient(135deg, #2e1500 0%, #5c3500 100%);
    --argus-card-mobile: linear-gradient(135deg, #100820 0%, #28145a 100%);
    /* badge-5: violeta */
}


/* ══════════════════════════════════════════
   1b. NEUTRALIZAR DARK MODE AUTOMÁTICO do DS
   O DS Apple aplica prefers-color-scheme:dark
   trocando --color-text-primary para #f5f5f7.
   Em seções claras (gray/white) isso causa texto
   branco sobre fundo claro = invisível.
   ARGUS controla escuro/claro de forma explícita,
   então restauramos os tokens de modo claro aqui.
════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
    :root {
        /* Restaura fundos claros */
        --color-bg-primary: #ffffff;
        --color-bg-secondary: #f5f5f7;
        --color-bg-card: #ffffff;
        --color-bg-card-gray: #f5f5f7;
        --color-bg-nav: rgba(255, 255, 255, 0.85);
        /* Restaura texto escuro para seções claras */
        --color-text-primary: #1d1d1f;
        --color-text-secondary: #6e6e73;
        --color-text-tertiary: #86868b;
        /* Bordas e divisores de modo claro */
        --color-border-light: #d2d2d7;
        --color-divider: rgba(0, 0, 0, 0.1);
        /* Accent modo claro */
        --color-accent: #0071e3;
        --color-accent-hover: #0077ed;
        /* Sombras de modo claro */
        --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.08);
        --shadow-card-hover: 0 8px 32px rgba(0, 0, 0, 0.14);
    }
}


/* ══════════════════════════════════════════
   2. HEADER
════════════════════════════════════════════ */

/* Logo icon (img) dimensionada */
.argus-logo-icon {
    width: 26px;
    height: 26px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}

/* ── Header ARGUS: 80px, glassmorphism navy, links em azul accent ─── */
.ds-header.ds-header--dark {
    height: 80px;
    /* Estado padrão (topo): fundo branco */
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    box-shadow: 0 1px 12px rgba(0, 0, 0, 0.07);
    /* Transição suave entre estados */
    transition:
        background var(--duration-slow) var(--ease-default),
        border-color var(--duration-slow) var(--ease-default),
        box-shadow var(--duration-slow) var(--ease-default);
}

/* Links escuros no fundo branco */
.ds-header.ds-header--dark .ds-header__nav-link {
    color: #0b1d3a;
    height: 80px;
    font-weight: var(--font-weight-medium);
    letter-spacing: -0.01em;
    transition: color var(--duration-slow) var(--ease-default);
}

.ds-header.ds-header--dark .ds-header__nav-link:hover {
    color: var(--color-accent);
}

.ds-header.ds-header--dark .ds-header__nav-link.is-active {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}

/* Logo: texto escuro no fundo branco */
.ds-header.ds-header--dark .ds-header__logo-text {
    color: #0b1d3a;
    transition: color var(--duration-slow) var(--ease-default);
}

/* ── Estado scrollado: navy glassmorphism ── */
.ds-header.ds-header--dark.is-scrolled {
    background: rgba(6, 18, 32, 0.82);
    backdrop-filter: saturate(200%) blur(28px);
    -webkit-backdrop-filter: saturate(200%) blur(28px);
    border-bottom-color: rgba(41, 151, 255, 0.14);
    box-shadow: 0 2px 32px rgba(0, 0, 0, 0.35);
}

/* Links azul accent no fundo navy */
.ds-header.ds-header--dark.is-scrolled .ds-header__nav-link {
    color: var(--color-accent-dark);
}

.ds-header.ds-header--dark.is-scrolled .ds-header__nav-link:hover {
    color: #ffffff;
}

.ds-header.ds-header--dark.is-scrolled .ds-header__nav-link.is-active {
    color: #ffffff;
    border-bottom-color: var(--color-accent-dark);
}

/* Logo: texto branco no fundo navy */
.ds-header.ds-header--dark.is-scrolled .ds-header__logo-text {
    color: #ffffff;
}

/* Hamburger: escuro no fundo branco, branco no fundo navy */
.ds-header.ds-header--dark .ds-header__hamburger {
    color: #0b1d3a;
    transition: color var(--duration-slow) var(--ease-default);
}

.ds-header.ds-header--dark.is-scrolled .ds-header__hamburger {
    color: #ffffff;
}

/* Spacer acompanha a nova altura de 80px */
.ds-header-spacer {
    height: 80px;
}


/* ══════════════════════════════════════════
   3. HERO
════════════════════════════════════════════ */

.argus-hero {
    background: var(--argus-gradient-hero);
    text-align: left;
    /* Override do ds-section--hero que centraliza */
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* ─── Seções escuras: navy em vez de preto ─── */
.ds-section--dark {
    background-color: var(--argus-bg-navy);
}

.ds-section--dark-alt {
    background-color: var(--argus-bg-navy-mid);
}

/* ─── Seções cinza: leve toque azul (SaaS premium) ─── */
.ds-section--gray {
    background-color: var(--argus-bg-section-gray);
}

/* ─────────────────────────────────────────────────────
   CORREÇÃO DARK MODE (macOS / prefers-color-scheme)
   O DS Apple auto-troca tokens para modo escuro, o que
   causa texto branco (#f5f5f7) sobre fundo claro —
   praticamente invisível. Forçamos tokens de luz nas
   seções com fundo claro, independente da preferência.
───────────────────────────────────────────────────── */
.ds-section--gray,
.ds-section--white,
.ds-section--gray.ds-section--bordered,
.ds-section--white.ds-section--bordered {
    /* Texto escuro forçado em fundos claros */
    --color-text-primary: #1d1d1f;
    --color-text-secondary: #6e6e73;
    --color-text-tertiary: #86868b;
    /* Cards e bordas de modo claro */
    --color-bg-card: #ffffff;
    --color-bg-card-gray: #f5f5f7;
    --color-border-light: #d2d2d7;
    --color-divider: rgba(0, 0, 0, 0.1);
    /* Sombras de modo claro */
    --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.08);
    --shadow-card-hover: 0 8px 32px rgba(0, 0, 0, 0.14);
    /* Accent — modo claro */
    --color-accent: #0071e3;
    --color-accent-hover: #0077ed;
}

/* Fundo decorativo */
.argus-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* Orbs de luz */
.argus-hero__bg-orb {
    position: absolute;
    border-radius: var(--radius-circle);
    filter: blur(100px);
    opacity: 0.5;
}

.argus-hero__bg-orb--1 {
    width: 650px;
    height: 650px;
    background: radial-gradient(circle, rgba(13, 102, 208, 0.45) 0%, transparent 68%);
    top: -20%;
    left: -12%;
}

.argus-hero__bg-orb--2 {
    width: 520px;
    height: 520px;
    background: radial-gradient(circle, rgba(41, 151, 255, 0.22) 0%, transparent 70%);
    bottom: -12%;
    right: 18%;
}

/* Grade decorativa */
.argus-hero__bg-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 60px 60px;
}

/* Layout inner do hero */
.argus-hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: center;
    width: 100%;
}

/* Conteúdo textual */
.argus-hero__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    max-width: 600px;
}

/* Badge row do hero */
.argus-hero__badge-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.argus-hero__badge-text {
    font-size: var(--text-footnote);
}

/* Título com destaque italic */
.argus-hero__title {
    font-size: var(--text-hero);
    line-height: var(--line-height-hero);
    letter-spacing: var(--letter-spacing-hero);
}

.argus-hero__title em {
    font-style: italic;
    color: var(--color-accent-dark);
    text-shadow: var(--argus-glow-blue);
}

/* Subtítulo do hero */
.argus-hero__subtitle {
    font-size: var(--text-body-lg);
    line-height: var(--line-height-body);
    max-width: 52ch;
}

/* Agrupa os botões CTA */
.ds-btn-group--hero {
    margin-top: var(--space-2);
    flex-wrap: wrap;
}

/* Nota pequena sob os CTAs */
.argus-hero__note {
    font-size: var(--text-caption);
    color: var(--color-text-on-dark-muted);
    max-width: none;
}

/* ─────────────────────────────────────────────────────
   BOTÃO CTA — Efeito Heartbeat (batimento cardíaco)
   O botão inteiro escala: lub (forte) → valley →
   dub (suave) → pausa longa. Glow pulsa em sincronia.
───────────────────────────────────────────────────── */

@keyframes argus-heartbeat {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15) inset,
            0 0 22px rgba(249, 115, 22, 0.40),
            0 5px 16px rgba(234, 88, 12, 0.32);
    }

    50% {
        transform: scale(1.03);
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22) inset,
            0 0 48px rgba(249, 115, 22, 0.68),
            0 10px 30px rgba(234, 88, 12, 0.52);
    }
}

/* Wrapper — mantido para compatibilidade de layout */
.argus-btn-pulse {
    position: relative;
    display: inline-flex;
    border-radius: var(--radius-pill);
    flex-shrink: 0;
}

/* Remove os pseudo-elementos de anel */
.argus-btn-pulse::before,
.argus-btn-pulse::after {
    content: none;
}

/* O botão: gradiente âmbar-laranja + heartbeat contínuo */
.argus-btn-cta.ds-btn--primary {
    background: linear-gradient(105deg,
            #f59e0b 0%,
            #f97316 45%,
            #ea580c 78%,
            #dc4308 100%);
    color: #ffffff;
    letter-spacing: -0.01em;
    position: relative;
    z-index: 1;
    animation: argus-heartbeat 3.6s ease-in-out infinite;
    transform-origin: center;
    text-shadow: none;
}

/* Hover: pausa o heartbeat e eleva o botão */
.argus-btn-cta.ds-btn--primary:hover {
    animation-play-state: paused;
    transform: translateY(-2px) scale(1.04);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.25) inset,
        0 0 64px rgba(249, 115, 22, 0.80),
        0 14px 40px rgba(234, 88, 12, 0.65);
    color: #ffffff;
    transition:
        transform var(--duration-base) var(--ease-out),
        box-shadow var(--duration-base) var(--ease-out);
}

.argus-btn-cta.ds-btn--primary:active {
    animation-play-state: paused;
    transform: scale(0.97);
}


/* ── Dashboard preview (decorativo) ── */

.argus-dashboard-preview {
    display: flex;
    align-items: center;
    justify-content: center;
}

.argus-dashboard {
    background: rgba(13, 37, 72, 0.70);
    backdrop-filter: blur(var(--blur-md));
    -webkit-backdrop-filter: blur(var(--blur-md));
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-2xl);
    width: 100%;
    max-width: 460px;
    overflow: hidden;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(41, 151, 255, 0.12);
    animation: ds-float 5s var(--ease-in-out) infinite;
}

.argus-dashboard__header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.argus-dashboard__dots {
    display: flex;
    gap: 5px;
}

.argus-dashboard__dots span {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-circle);
    background: rgba(255, 255, 255, 0.2);
}

.argus-dashboard__dots span:nth-child(1) {
    background: #ff5f57;
}

.argus-dashboard__dots span:nth-child(2) {
    background: #febc2e;
}

.argus-dashboard__dots span:nth-child(3) {
    background: #28c840;
}

.argus-dashboard__title {
    font-size: var(--text-footnote);
    color: rgba(255, 255, 255, 0.55);
    font-weight: var(--font-weight-medium);
    flex: 1;
    text-align: center;
}

.argus-dashboard__body {
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

/* KPI cards */
.argus-dashboard__kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
}

.argus-kpi {
    background: rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.argus-kpi__label {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-caps);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.argus-kpi__value {
    font-family: var(--font-display);
    font-size: var(--text-callout);
    font-weight: var(--font-weight-semibold);
    color: #ffffff;
    line-height: 1.1;
}

.argus-kpi__delta {
    font-size: 0.6rem;
    font-weight: var(--font-weight-semibold);
}

.argus-kpi__delta--up {
    color: var(--color-success);
}

.argus-kpi__delta--down {
    color: var(--color-error);
}

/* Chart simulado */
.argus-dashboard__chart {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.argus-dashboard__chart-label {
    font-size: var(--text-footnote);
    color: rgba(255, 255, 255, 0.4);
}

.argus-bar-group {
    display: flex;
    gap: 6px;
    align-items: flex-end;
    height: 50px;
}

.argus-bar {
    flex: 1;
    height: var(--h);
    background: rgba(41, 151, 255, 0.3);
    border-radius: 3px 3px 0 0;
    transition: height 0.4s var(--ease-out);
}

.argus-bar--active {
    background: var(--color-accent-dark);
}

/* Atividade recente */
.argus-dashboard__activity {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.argus-activity-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-footnote);
    color: rgba(255, 255, 255, 0.55);
}

.argus-activity-dot {
    width: 7px;
    height: 7px;
    border-radius: var(--radius-circle);
    flex-shrink: 0;
}

.argus-activity-dot--green {
    background: var(--color-success);
}

.argus-activity-dot--blue {
    background: var(--color-accent-dark);
}

.argus-activity-dot--orange {
    background: var(--color-warning);
}


/* ══════════════════════════════════════════
   4. QUEM SOMOS
════════════════════════════════════════════ */

/* Grid de pilares */
.argus-pillar-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

/* Cada pilar é um card-info sem sobrescrever o DS */
.argus-pillar {
    /* herda ds-card-info */
}

/* Contentor do ícone SVG outline nos pilares */
.argus-pillar .ds-card-info__icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 113, 227, 0.07);
    border-radius: var(--radius-lg);
    color: var(--color-accent);
    flex-shrink: 0;
    font-size: 0;
    /* neutraliza resíduo de emoji */
    transition: background var(--duration-base) var(--ease-out),
        color var(--duration-base) var(--ease-out);
}

.argus-pillar.ds-card--interactive:hover .ds-card-info__icon {
    background: rgba(0, 113, 227, 0.14);
    color: var(--color-accent-hover);
}

/* ── Gradientes dos pilares — espelham a paleta da seção Diferencial ── */
.argus-pillar--eficiencia {
    background: var(--argus-card-auto);
}

.argus-pillar--conformidade {
    background: var(--argus-card-compliance);
}

.argus-pillar--governanca {
    background: var(--argus-card-transparency);
}

.argus-pillar--acessibilidade {
    background: var(--argus-card-mobile);
}

/* Fundos escuros: borda sutil e texto em branco */
.argus-pillar--eficiencia,
.argus-pillar--conformidade,
.argus-pillar--governanca,
.argus-pillar--acessibilidade {
    border-color: rgba(255, 255, 255, 0.10);
}

.argus-pillar--eficiencia .ds-card-info__title,
.argus-pillar--conformidade .ds-card-info__title,
.argus-pillar--governanca .ds-card-info__title,
.argus-pillar--acessibilidade .ds-card-info__title {
    color: #ffffff;
}

.argus-pillar--eficiencia .ds-card-info__body,
.argus-pillar--conformidade .ds-card-info__body,
.argus-pillar--governanca .ds-card-info__body,
.argus-pillar--acessibilidade .ds-card-info__body {
    color: rgba(255, 255, 255, 0.62);
}

/* Ícone: fundo e stroke adaptados ao fundo escuro */
.argus-pillar--eficiencia .ds-card-info__icon,
.argus-pillar--conformidade .ds-card-info__icon,
.argus-pillar--governanca .ds-card-info__icon,
.argus-pillar--acessibilidade .ds-card-info__icon {
    background: rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.90);
}

.argus-pillar--eficiencia.ds-card--interactive:hover .ds-card-info__icon,
.argus-pillar--conformidade.ds-card--interactive:hover .ds-card-info__icon,
.argus-pillar--governanca.ds-card--interactive:hover .ds-card-info__icon,
.argus-pillar--acessibilidade.ds-card--interactive:hover .ds-card-info__icon {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}


/* ══════════════════════════════════════════
   5. NOSSOS NÚMEROS
════════════════════════════════════════════ */

/* Background distinto do dark padrão (#0b1d3a) */
.argus-section--numbers {
    background-color: var(--argus-bg-navy-deep);
    /* #061220 */
}

/* Separador do strip de logos — versão escura */
.argus-section--numbers .argus-clients-strip {
    border-top-color: rgba(255, 255, 255, 0.08);
}

.argus-section--numbers .argus-clients-strip .ds-caption {
    color: rgba(255, 255, 255, 0.38);
}

/* Logo placeholders — base glass no escuro */
.argus-section--numbers .argus-logo-placeholder {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.72);
}

.argus-section--numbers .argus-logo-placeholder:hover {
    border-color: rgba(41, 151, 255, 0.45);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(41, 151, 255, 0.18);
}

/* Micro-gradientes individuais — cada badge com cor própria */
.argus-logo--1 {
    background: linear-gradient(135deg, #071830 0%, #0f3260 100%);
}

.argus-logo--2 {
    background: linear-gradient(135deg, #061a25 0%, #0a3040 100%);
}

/* teal */
.argus-logo--3 {
    background: linear-gradient(135deg, #09082a 0%, #1a1858 100%);
}

/* índigo */
.argus-logo--4 {
    background: linear-gradient(135deg, #071a30 0%, #103060 100%);
}

/* azul-safira */
.argus-logo--5 {
    background: linear-gradient(135deg, #100820 0%, #28145a 100%);
}

/* violeta */
.argus-logo--6 {
    background: linear-gradient(135deg, #061820 0%, #093848 100%);
}

/* teal escuro */

/* Strip de logos de clientes */
.argus-clients-strip {
    margin-top: var(--space-20);
    padding-top: var(--space-12);
    border-top: 1px solid var(--color-border-light);
}

.argus-logos-row {
    display: flex;
    gap: var(--space-6);
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.argus-logo-placeholder {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-callout);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-tertiary);
    letter-spacing: var(--letter-spacing-caps);
    user-select: none;
    transition: all var(--duration-base) var(--ease-out);
}

.argus-logo-placeholder:hover {
    border-color: var(--color-border-light);
    color: var(--color-text-secondary);
    transform: translateY(-2px);
}

/* Correção do layout de stats em telas médias */
.ds-stats-row {
    margin-top: var(--space-4);
}


/* ══════════════════════════════════════════
   6. DIFERENCIAL — Cards de feature
════════════════════════════════════════════ */

/* Grid de features */
.argus-features-grid {
    margin-top: var(--space-4);
}

/* Cada card recebe o gradiente de fundo ARGUS */
.argus-card-feature--automation {
    background: var(--argus-card-auto);
}

.argus-card-feature--compliance {
    background: var(--argus-card-compliance);
}

.argus-card-feature--transparency {
    background: var(--argus-card-transparency);
}

.argus-card-feature--integrations {
    background: var(--argus-card-integrations);
}

.argus-card-feature--support {
    background: var(--argus-card-support);
}

.argus-card-feature--mobile {
    background: var(--argus-card-mobile);
}

/* CTA dentro do feature card */
.argus-feature-cta {
    align-self: flex-start;
    margin-top: var(--space-2);
}


/* ══════════════════════════════════════════
   7. DEPOIMENTOS
   DS não tem componente de testimonial —
   menor decisão: ds-card--gray + extensão
════════════════════════════════════════════ */

.argus-testimonial {
    background: var(--color-bg-card);
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    box-shadow: var(--shadow-card);
    transition:
        transform var(--duration-slow) var(--ease-out),
        box-shadow var(--duration-slow) var(--ease-out);
    position: relative;
}

.argus-testimonial:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
}

/* Variante em destaque */
.argus-testimonial--featured {
    background: var(--argus-bg-navy);
    box-shadow: var(--shadow-xl);
}

.argus-testimonial--featured .argus-testimonial__quote {
    color: var(--color-text-on-dark-muted);
}

.argus-testimonial--featured .argus-testimonial__name {
    color: var(--color-text-on-dark);
}

.argus-testimonial--featured .argus-testimonial__role,
.argus-testimonial--featured .argus-testimonial__org {
    color: var(--color-text-on-dark-muted);
}

.argus-testimonial--featured .argus-testimonial__stars {
    color: var(--color-warning);
}

/* Estrelas */
.argus-testimonial__stars {
    color: var(--color-warning);
    font-size: var(--text-callout);
    letter-spacing: 2px;
    line-height: 1;
}

/* Aspas e citação */
.argus-testimonial__quote {
    font-size: var(--text-body-lg);
    line-height: var(--line-height-body);
    color: var(--color-text-secondary);
    font-style: italic;
    max-width: none;
    flex: 1;
}

.argus-testimonial__quote::before {
    content: '\201C';
    font-size: 2.5rem;
    line-height: 0.5;
    vertical-align: -0.5rem;
    color: var(--color-accent);
    font-style: normal;
    font-family: var(--font-display);
    margin-right: var(--space-1);
}

/* Autor */
.argus-testimonial__author {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    border-top: 1px solid var(--color-border-light);
    padding-top: var(--space-6);
    margin-top: auto;
}

.argus-testimonial--featured .argus-testimonial__author {
    border-top-color: var(--color-border-dark);
}

/* Avatar com iniciais */
.argus-testimonial__avatar {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-circle);
    background: var(--color-accent);
    color: #ffffff;
    font-size: var(--text-callout);
    font-weight: var(--font-weight-bold);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: 0;
}

.argus-testimonial__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.argus-testimonial__name {
    font-size: var(--text-body);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    font-style: normal;
}

.argus-testimonial__role {
    font-size: var(--text-caption);
    color: var(--color-text-secondary);
}

.argus-testimonial__org {
    font-size: var(--text-caption);
    color: var(--color-accent);
    font-weight: var(--font-weight-medium);
}


/* ══════════════════════════════════════════
   8. FALE CONOSCO
════════════════════════════════════════════ */

/* Canais de contato — grade 2×2 quando ocupa largura total */
.argus-contact-channels {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

.argus-contact-channel {
    display: flex;
    align-items: flex-start;
    gap: var(--space-5);
    padding: var(--space-5) var(--space-6);
    background: var(--color-bg-card-gray);
    border-radius: var(--radius-xl);
    text-decoration: none;
    transition:
        transform var(--duration-base) var(--ease-out),
        box-shadow var(--duration-base) var(--ease-out),
        background var(--duration-base) var(--ease-out);
    border: 1px solid transparent;
    color: inherit;
}

.argus-contact-channel:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    text-decoration: none;
    border-color: var(--color-border-light);
    background: var(--color-bg-primary);
    color: inherit;
}


.argus-contact-channel__icon {
    font-size: 1.5rem;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 113, 227, 0.08);
    border-radius: var(--radius-lg);
    flex-shrink: 0;
}

.argus-contact-channel__info {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.argus-contact-channel__label {
    font-size: var(--text-headline);
    color: var(--color-text-primary);
}

.argus-contact-channel__value {
    font-size: var(--text-body-lg);
    color: var(--color-accent);
    font-weight: var(--font-weight-medium);
}

.argus-contact-channel__hours {
    font-size: var(--text-caption);
    color: var(--color-text-tertiary);
    line-height: var(--line-height-body);
}


/* ══════════════════════════════════════════
   9. DEMONSTRAÇÃO
════════════════════════════════════════════ */

.argus-demo-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-20);
    align-items: center;
}

/* Pitch (lado esquerdo) */
.argus-demo-pitch {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.argus-demo-pitch h2 {
    margin-bottom: var(--space-6);
}

.argus-demo-pitch>.ds-body-lg {
    color: var(--color-text-on-dark-muted);
    margin-bottom: var(--space-8);
}

/* Checklist de itens da demo */
.argus-demo-checklist {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    list-style: none;
}

.argus-demo-check {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    font-size: var(--text-body-lg);
    color: var(--color-text-on-dark-muted);
}

.argus-demo-check__icon {
    width: 22px;
    height: 22px;
    background: var(--color-accent-dark);
    color: #ffffff;
    border-radius: var(--radius-circle);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    flex-shrink: 0;
}

/* Trust badges */
.argus-demo-trust {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-top: var(--space-2);
}

.argus-trust-item {
    display: flex;
}

/* Card CTA de demonstração — gradiente de destaque */
.argus-demo-cta-card {
    position: relative;
    background: var(--argus-card-auto);
    border-radius: var(--radius-2xl);
    padding: var(--space-10);
    box-shadow: 0 24px 64px rgba(13, 49, 102, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.18);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-6);
    overflow: hidden;
}

/* Reflexo claro no topo */
.argus-demo-cta-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
}

/* Orb de profundidade no canto inferior */
.argus-demo-cta-card::after {
    content: '';
    position: absolute;
    bottom: -60px;
    right: -60px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.argus-demo-cta-card__icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-xl);
    color: #ffffff;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.argus-demo-cta-card__title {
    font-family: var(--font-display);
    font-size: var(--text-title-md);
    font-weight: var(--font-weight-semibold);
    color: #ffffff;
    line-height: var(--line-height-heading);
    letter-spacing: var(--letter-spacing-tight);
}

.argus-demo-cta-card__body {
    font-size: var(--text-body-lg);
    color: rgba(255, 255, 255, 0.82);
    line-height: var(--line-height-body);
    max-width: 38ch;
}

.argus-demo-cta-btn {
    width: 100%;
}

/* Etapas numeradas */
.argus-demo-cta-steps {
    list-style: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    text-align: left;
}

.argus-demo-cta-step {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}

.argus-demo-cta-step__num {
    width: 28px;
    height: 28px;
    min-width: 28px;
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    border-radius: var(--radius-circle);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-caption);
    font-weight: var(--font-weight-semibold);
    margin-top: 2px;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.argus-demo-cta-step__content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.argus-demo-cta-step__label {
    font-size: var(--text-body-md);
    font-weight: var(--font-weight-medium);
    color: #ffffff;
}

.argus-demo-cta-step__desc {
    font-size: var(--text-caption);
    color: rgba(255, 255, 255, 0.65);
}

/* Divisor entre etapas e botão */
.argus-demo-cta-steps+.argus-demo-cta-btn {
    margin-top: var(--space-2);
}

/* Social proof */
.argus-demo-cta-proof {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-caption);
    color: rgba(255, 255, 255, 0.75);
}

.argus-demo-cta-avatars {
    display: flex;
    flex-direction: row-reverse;
}

.argus-demo-cta-avatar {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-circle);
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
    font-size: 9px;
    font-weight: var(--font-weight-semibold);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(0, 65, 184, 0.6);
    margin-left: -8px;
}

.argus-demo-cta-avatar:last-child {
    margin-left: 0;
}

.argus-demo-cta-proof__text strong {
    color: #ffffff;
}

.argus-demo-cta-card__footnote {
    font-size: var(--text-caption);
    color: rgba(255, 255, 255, 0.6);
}

.argus-demo-cta-card__tel {
    color: #ffffff;
    font-weight: var(--font-weight-medium);
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.4);
    text-underline-offset: 2px;
}

.argus-demo-cta-card__tel:hover {
    text-decoration-color: #ffffff;
}


/* ══════════════════════════════════════════
   10. FOOTER
════════════════════════════════════════════ */

/* Footer navy profundo em vez de cinza escuro */
.ds-footer.ds-footer--dark {
    background: var(--argus-bg-navy-deep);
    border-top-color: rgba(255, 255, 255, 0.07);
}

/* Redes sociais */
.argus-footer-social {
    display: flex;
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.argus-social-link {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    color: rgba(255, 255, 255, 0.65);
    transition:
        background var(--duration-base) var(--ease-out),
        color var(--duration-base) var(--ease-out),
        transform var(--duration-fast) var(--ease-out);
    text-decoration: none;
}

.argus-social-link:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-2px);
}

/* Newsletter no footer */
.argus-newsletter-form__inner {
    display: flex;
    gap: var(--space-3);
}

.argus-newsletter-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

.argus-newsletter-input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.argus-newsletter-input:focus {
    border-color: var(--color-accent-dark);
    box-shadow: 0 0 0 3px rgba(41, 151, 255, 0.25);
}

.argus-newsletter-btn {
    flex-shrink: 0;
}

/* Overrides footer dark para funcionar bem com o ds-footer--dark */
.ds-footer--dark .ds-footer__cols {
    grid-template-columns: repeat(5, 1fr);
}


/* ══════════════════════════════════════════
   11. FORMULÁRIOS ARGUS
   Organização de grupos de campo, labels,
   erros e feedback
════════════════════════════════════════════ */

.argus-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.argus-form__group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.argus-form__label {
    font-size: var(--text-callout);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

/* Label dentro do card de demo (fundo claro) */
.argus-demo-form-card .argus-form__label {
    color: var(--color-text-primary);
}

/* Input inválido */
.ds-input.is-invalid {
    border-color: var(--color-error);
    box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.15);
}

/* Mensagem de erro inline */
.argus-form__error {
    font-size: var(--text-caption);
    color: var(--color-error);
    min-height: 1.2em;
    font-weight: var(--font-weight-medium);
}

/* Textarea */
.argus-form__textarea {
    resize: vertical;
    min-height: 120px;
}

/* Alerta de sucesso (reutiliza ds-alert) */
.argus-form__success {
    margin-top: var(--space-2);
}


/* ══════════════════════════════════════════
   12. UTILITÁRIOS ARGUS
════════════════════════════════════════════ */

/* Gradiente de texto azul */
.argus-text-accent-glow {
    background: linear-gradient(90deg, var(--color-accent-dark) 0%, #60c5ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Drawer CTA no mobile */
.argus-drawer-cta {
    text-align: center;
}


/* ══════════════════════════════════════════
   13. RESPONSIVO
════════════════════════════════════════════ */

/* ── Tablet ≤ 980px ── */
@media (max-width: 980px) {

    /* Hero */
    .argus-hero__inner {
        grid-template-columns: 1fr;
        gap: var(--space-12);
        text-align: center;
    }

    .argus-hero__content {
        max-width: 100%;
        align-items: center;
    }

    .argus-hero__subtitle {
        max-width: 100%;
    }

    .argus-dashboard-preview {
        max-width: 480px;
        margin-inline: auto;
    }

    /* Demo layout */
    .argus-demo-layout {
        grid-template-columns: 1fr;
        gap: var(--space-12);
    }

    /* Features  */
    .argus-features-grid.ds-grid--3 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Footer */
    .ds-footer--dark .ds-footer__cols {
        grid-template-columns: repeat(3, 1fr);
    }

    .ds-footer__brand-top {
        grid-template-columns: 1fr;
        gap: var(--space-10);
    }

    /* Pilares */
    .argus-pillar-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ── Mobile ≤ 660px ── */
@media (max-width: 660px) {

    /* Hero */
    .argus-hero {
        padding-block: var(--space-24) var(--space-16);
    }

    .argus-hero__title {
        font-size: var(--text-title-xl);
    }

    .argus-hero__bg-orb--1 {
        width: 300px;
        height: 300px;
    }

    .argus-hero__bg-orb--2 {
        display: none;
    }

    /* Dashboard preview menor no mobile */
    .argus-dashboard {
        max-width: 320px;
    }

    .argus-dashboard__kpis {
        grid-template-columns: 1fr 1fr;
    }

    .argus-dashboard__kpis .argus-kpi:last-child {
        grid-column: 1 / -1;
    }

    /* Features em coluna única */
    .argus-features-grid.ds-grid--3 {
        grid-template-columns: 1fr;
    }

    /* Depoimentos: empilhar */
    /* herda ds-grid--3 → 1fr */

    /* Contato */
    .argus-contact-channels {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }

    /* Demo */
    .argus-demo-form-card {
        padding: var(--space-6);
    }

    /* Footer */
    .ds-footer--dark .ds-footer__cols {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Pilares */
    .argus-pillar-grid {
        grid-template-columns: 1fr;
    }

    /* Newsletter form empilha */
    .argus-newsletter-form__inner {
        flex-direction: column;
    }

    /* Logo strip */
    .argus-logos-row {
        gap: var(--space-3);
    }

    .argus-logo-placeholder {
        font-size: var(--text-footnote);
        padding: var(--space-2) var(--space-4);
    }
}

/* ── Mobile pequeno ≤ 480px ── */
@media (max-width: 480px) {

    .argus-demo-layout .ds-grid--2 {
        grid-template-columns: 1fr;
    }

    .ds-footer--dark .ds-footer__cols {
        grid-template-columns: 1fr 1fr;
    }

    .argus-demo-trust {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ── Acessibilidade: pausa animações para quem prefere movimento reduzido ── */
@media (prefers-reduced-motion: reduce) {

    .argus-btn-cta.ds-btn--primary {
        animation: none;
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.12) inset,
            0 0 28px rgba(0, 113, 227, 0.45),
            0 6px 20px rgba(0, 86, 212, 0.35);
    }
}