/* ========== VARS / DESIGN SYSTEM ========== */
:root {
  --developer-section-p-color: #cbd5e1;
  /* Dark mode (padrão) */
  --service-card-bg: linear-gradient(145deg, #0d1117, #1b1f2a);
  --service-card-text: #c0d6ff;
  --service-card-shadow:
    0 10px 25px rgba(0, 0, 0, 0.5), 0 0 10px rgba(0, 130, 255, 0.2);
  --service-card-hover-shadow:
    0 15px 35px rgba(0, 0, 0, 0.7), 0 0 25px rgba(0, 180, 255, 0.5);
  --service-desc-color: #a8c0ff;
  --service-btn-bg: linear-gradient(90deg, #00c6ff, #0072ff);
  --service-btn-color: #fff;
  --service-btn-hover-shadow: 0 6px 15px rgba(0, 130, 255, 0.5);

  --bg: #071018;
  --panel: rgba(18, 24, 32, 0.94);
  --panel-2: #0f1622;
  --card: linear-gradient(180deg, rgba(14, 20, 28, 0.7), rgba(8, 10, 14, 0.55));
  --card-border: 1px solid rgba(255, 255, 255, 0.02);
  --pricing-card: linear-gradient(
    180deg,
    rgba(14, 20, 28, 0.85),
    rgba(6, 10, 14, 0.7)
  );
  --princing-card-border: 1px solid rgba(255, 255, 255, 0.06);
  --pricing-card-highlight-border: 1px solid rgba(94, 234, 212, 0.25);
  --pricing-card-highlight-box-shadow: 0 20px 50px rgba(46, 54, 66, 0.5);
  --pricing-card-hover:
    0 24px 60px rgba(0, 0, 0, 0.45), 0 0 14px rgba(59, 130, 246, 0.3);

  /* ===== PRICING SECTION ===== */
  --pricing-bg-section: #0a0a0a;
  --pricing-text: #fff;
  --pricing-muted: #aaa;
  --pricing-surface: #111;
  --pricing-accent-free: #33ff99;
  --pricing-accent-premium: #00ffe0;
  --pricing-accent-light-free: #66ffbb;
  --pricing-accent-light-premium: #33fff0;
  --pricing-border: rgba(255, 255, 255, 0.15);
  --pricing-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  --pricing-hover-shadow: 0 20px 50px rgba(0, 255, 224, 0.25);
  --pricing-radius: 20px;
  --pricing-transition: 0.35s ease;
  --scroll-thumb: #33ff99; /* dark */
  --scroll-track: #111; /* dark */

  --header-bg: linear-gradient(
    180deg,
    rgba(6, 10, 14, 0.6),
    rgba(8, 12, 18, 0.45)
  );

  --muted: #93a8b8;
  --text: #eef6fb;
  --primary: #3b82f6;
  --primary-600: #2563eb;
  --secondary: #0c47b7;
  --secondary-600: #1a73e8;

  --taga: #551a8b;
  --accent: #5eead4;
  --danger: #ef4444;
  --glass: rgba(255, 255, 255, 0.03);
  --border: rgba(255, 255, 255, 0.04);
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --shadow-sm: 0 6px 18px rgba(3, 8, 14, 0.6);
  --shadow-lg: 0 20px 60px rgba(3, 8, 14, 0.7);
  --bg-gradient: linear-gradient(180deg, #04101a 0%, #071018 60%, #04131e 100%);
  --bg-gradient-primary: linear-gradient(
    180deg,
    #04101a 0%,
    #04101a 50%,
    /*071018*/ #04101a 100% /*05121a*/
  );
  --maxw: 1150px;
  --easing: cubic-bezier(0.16, 0.84, 0.37, 1);
  --glass-blur: 6px;
  --gap: 18px;

  --about-color: #1a73e8;

  /*HERO*/
  --hero-bg-grad: linear-gradient(
    135deg,
    rgba(40, 40, 50, 0.396),
    rgba(25, 25, 35, 0.396)
  );
  --hero-bg-grad-hover: linear-gradient(
    135deg,
    rgba(50, 50, 70, 0.418),
    rgba(30, 30, 45, 0.418)
  );

  --hero-shadow-li: rgba(0, 0, 0, 0.3);
  --hero-shadow-li-hover: rgba(100, 100, 255, 0.25);

  --hero-icon-li: #9bc9ff;
  --hero-text-li: #f4f4f8;

  --hero-brush-start: rgba(140, 180, 255, 0.25);
  --hero-brush-mid: rgba(255, 255, 255, 0.08);
  --hero-brush-end: transparent;

  /*SECURITY*/
  --primary-color: #00bfa6;
  --bg-card: rgba(255, 255, 255, 0.05);
  --bg-card-hover: rgba(255, 255, 255, 0.1);
  --text-color: #eaeaea;
  --shadow-color: rgba(0, 0, 0, 0.08);

  --footer-subtext: #cbd5e1;

  /*Testimonial*/
  --testimonials-text: #fff;
  --testimonials-text-muted: #ccc;
  --testimonials-card-bg: rgba(255, 255, 255, 0.05);
  --testimonials-text-light: #ddd;
  --testimonials-accent: #1a73e8;

  /* Demo Section */
  --demo-text: #ffffff;
  --demo-subtext: #cccccc;
  --demo-shadow-soft: rgba(0, 0, 0, 0.2);
  --demo-shadow-strong: rgba(0, 0, 0, 0.5);

  /* Stats Section */
  --stats-text: #ffffff;
  --stats-card-bg: #1e1e2f;
  --stats-accent: #00bfa6;
  --stats-shadow-soft: rgba(0, 0, 0, 0.2);
  --stats-shadow-strong: rgba(0, 0, 0, 0.5);
  --stats-subtext: #cccccc;

  /* Cases Section */
  --cases-accent: #1a73e8;
  --cases-shadow-soft: rgba(0, 0, 0, 0.2);
  --cases-shadow-strong: rgba(0, 0, 0, 0.5);

  /* Newsletter Section */
  --newsletter-text: #ffffff;
  --newsletter-subtext: #cccccc;
  --newsletter-input-bg: #2b2b3c;
  --newsletter-border: #444;
  --newsletter-accent: #1a73e8;
  --newsletter-accent-light: rgba(74, 118, 222, 0.5);

  /* Social Links */
  --social-shadow-soft: rgba(0, 0, 0, 0.2);
  --social-shadow-strong: rgba(0, 0, 0, 0.5);

  /* Suporte Alert - Dark Theme */
  --support-bg: #2a2a2a;
  --support-border: #ff9f43;
  --support-text: #f0d9b5;
  --support-link: #ffc966;
  --support-link-hover: #ffb84d;

  /* ===== Plan Card ===== */
  --plan-bg: #1f1f1f;
  --plan-border: #333;
  --plan-text: #f0f0f0;
  --plan-status-ativo: #4caf50;
  --plan-status-expirado: #f44336;
  --plan-status-sem: #ff9800;
  --plan-btn-bg: #4caf50;
  --plan-btn-text: #fff;
  --plan-btn-hover: #45a049;
  --shine-color: rgba(255, 255, 255, 0.4);

  /* ===== Variáveis de cores para feedback ===== */
  --feedback-form-bg: #1e1e1e;
  --feedback-form-text: #f7f7f7;
  --feedback-form-border: #333;
  --feedback-input-bg: #2a2a2a;
  --feedback-input-text: #f7f7f7;
  --feedback-input-border: #555;
  --feedback-btn-bg: #ffc002;
  --feedback-btn-text: #222;
  --feedback-btn-hover: #ffb800;

  /* ================== VARIÁVEIS DE BURGER ================== */
  --burger-hover-bg: #333;
  --burger-icon-color: #fff;

  /* ================== CARD (DARK THEME) ================== */
  --card-bg: rgba(20, 20, 20, 0.7);
  --card-border: rgba(255, 255, 255, 0.08);
  --card-corner: rgba(0, 170, 255, 0.2);
  --card-corner-hover: rgba(0, 170, 255, 0.6);
  --card-shadow: 0 6px 25px rgba(0, 0, 0, 0.4);
  --text-color: rgba(255, 255, 255, 0.9);
  --text-muted: rgba(11, 11, 11, 0.826);
  --card-icon-color: rgba(255, 215, 0, 0.7);
  --card-icon-hover: #ffd700;
}

/* ========== BUTTON VARIABLES ========== */
:root {
  /* cores base */
  --btn-text: #000000;
  --btn-bg: #ffffff;
  --btn-radius: 12px;

  /* gradientes */
  --btn-gradient-hover: linear-gradient(120deg, #5eead4, #3b82f6);
  --btn-gradient-accent: linear-gradient(135deg, #5eead4, #26d6bf);
  --btn-gradient-warn: linear-gradient(135deg, #fbbf24, #f97316);

  /* sombras */
  --btn-shadow: 0 8px 26px rgba(59, 130, 246, 0.12);
  --btn-shadow-hover:
    0 18px 40px rgba(59, 130, 246, 0.3), 0 0 8px rgba(94, 234, 212, 0.25);

  /* estados */
  --btn-hover-bg: #e14040;
  --btn-hover-opacity: 0.15;
  --btn-hover-opacity-strong: 0.2;

  /* ghost */
  --btn-ghost-bg-hover: rgba(255, 255, 255, 0.04);
  --btn-ghost-border: var(--border);
  --btn-ghost-text: var(--text);

  /* focus */
  --btn-outline: 3px solid rgba(59, 130, 246, 0.14);
  --btn-outline-offset: 3px;

  /* espaçamentos */
  --btn-padding-y: 10px;
  --btn-padding-x: 16px;
  --btn-gap: 8px;
  --btn-font-weight: 700;
  --btn-font-size-lg: 1.05rem;
  --btn-padding-y-lg: 14px;
  --btn-padding-x-lg: 22px;

  /* animação */
  --btn-easing: var(--easing, cubic-bezier(0.4, 0, 0.2, 1));
  --btn-transition: all 0.25s var(--btn-easing);
}

/* ========== FORM / AUTH VARIABLES ========== */
:root {
  /* containers */
  --auth-max-width: 720px;
  --auth-padding: 20px;
  --auth-margin-y: 20px;

  /* tabs */
  --tab-gap: 10px;
  --tab-padding: 10px;
  --tab-radius: 10px;
  --tab-bg: transparent;
  --tab-text: var(--muted);
  --tab-border: 1px solid transparent;
  --tab-transition: all 0.14s var(--easing);

  /* active tab */
  --tab-active-bg: linear-gradient(
    180deg,
    rgba(59, 130, 246, 0.12),
    rgba(59, 130, 246, 0.06)
  );
  --tab-active-text: var(--text);
  --tab-active-shadow: 0 8px 24px rgba(3, 8, 14, 0.5);

  /* labels */
  --label-font-size: 0.9rem;
  --label-color: var(--muted);
  --label-margin-bottom: 6px;

  /* inputs */
  --input-padding-y: 12px;
  --input-padding-x: 14px;
  --input-radius: 10px;
  --input-border: 1px solid rgba(255, 255, 255, 0.04);
  --input-bg: rgba(6, 8, 12, 0.4);
  --input-color: var(--text);
  --input-font-size: 0.95rem;
  --input-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.35);

  /* placeholder */
  --placeholder-color: rgba(255, 255, 255, 0.18);

  /* textarea */
  --textarea-min-height: 100px;

  /* form row */
  --form-gap: 12px;
}

/* ========== TOAST VARIABLES ========== */
:root {
  /* wrapper */
  --toast-wrap-right: 18px;
  --toast-wrap-bottom: 18px;
  --toast-gap: 12px;

  /* base toast */
  --toast-min-width: 260px;
  --toast-bg: linear-gradient(
    180deg,
    rgba(12, 18, 24, 0.9),
    rgba(6, 10, 14, 0.86)
  );
  --toast-radius: 12px;
  --toast-padding-y: 12px;
  --toast-padding-x: 14px;
  --toast-border: 1px solid rgba(255, 255, 255, 0.02);
  --toast-shadow: var(--shadow-lg);
  --toast-gap-inner: 6px;

  /* muted text */
  --toast-muted-color: var(--muted);
  --toast-muted-size: 0.92rem;

  /* border indicators */
  --toast-ok: #16a34a;
  --toast-err: var(--danger);
  --toast-warn: #f59e0b;

  /* progress bar */
  --toast-progress-height: 6px;
  --toast-progress-bg: rgba(255, 255, 255, 0.03);
  --toast-progress-radius: 6px;
  --toast-progress-duration: 4.2s;
}

/* ========== CONTEXT VARIABLES ========== */
:root {
  /* FOOTER */
  --footer-bg: transparent; /* se necessário no futuro */
  --footer-border: rgba(255, 255, 255, 0.02);
  --footer-text: var(--muted);

  /* IMAGES */
  --img-border-radius: 8px;

  /* FOCUS / ACCESSIBILITY */
  --focus-shadow:
    0 0 0 4px rgba(59, 130, 246, 0.12), 0 8px 20px rgba(3, 8, 14, 0.45);
  --focus-radius: 10px;

  /* HERO BUTTON */
  --hero-btn-hover-transform: translateY(-6px) scale(1.01);

  /* CARD TILT */
  --card-tilt-transform: translateY(-8px) rotateX(1deg);

  /* LOADING */
  --loading-bg: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.01),
    rgba(255, 255, 255, 0.015)
  );
  --loading-text: var(--muted);

  /* PLAN INFO */
  --plan-bg: rgba(255, 255, 255, 0.06);
  --plan-border: var(--border);
  --plan-text: var(--accent);
}

:root {
  /* HERO */
  --hero-overlay-start: rgba(6, 12, 20, 0.7);
  --hero-overlay-end: rgba(6, 12, 20, 0.8);
  --hero-text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
  --hero-sub-color: var(--muted);
  --hero-color: #ffffff;
  --hero-color-li: #070707;
  --hero-benefits-li-hover: rgba(158, 158, 158, 0.718);
  --hero-benefits-color-li-hover: rgb(0, 0, 0);

  /* CARD ICON */
  --card-icon-color: #4a90e2;

  /* FOOTER */
  --footer-bg: rgba(10, 16, 24, 0.8);
  --footer-border: var(--border);
  --footer-text: var(--muted);
  --footer-link: var(--primary);
  --footer-link-hover: var(--primary-600);

  /* SIDE BUTTON */
  --side-btn-bg: rgba(0, 0, 0, 0.6);
  --side-btn-bg-hover: rgba(0, 0, 0, 0.7);
  --side-btn-color: #fff;
  --side-btn-arrow-move: translateX(3px);

  /* ACCORDION */
  --accordion-border: var(--border);
  --accordion-bg: var(--panel);
  --accordion-header-hover: rgba(255, 255, 255, 0.05);
  --accordion-header-color: var(--text);
  --accordion-body-color: var(--muted);
}

:root {
  /* ========== COLORS WHATSAPP ========== */
  --whatsapp-bg: #25d366;
  --whatsapp-color: #fff;

  /* ========== COLORS HELP BUTTON ========== */
  --help-bg: #007bff;
  --help-color: #fff;
  --help-shadow: 0 8px 26px rgba(59, 130, 246, 0.12);
  --help-shadow-hover:
    0 18px 40px rgba(59, 130, 246, 0.3), 0 0 8px rgba(94, 234, 212, 0.25);

  /* ========== COLORS SCROLLSPY ========== */
  --scrollspy-bg: rgba(0, 0, 0, 0.85);
  --scrollspy-color: #fff;
  --scrollspy-color-hover: #ffce00;

  /* ========== COLORS CHAT ========== */
  --chat-bg: #0a74da;
  --chat-popup-bg: var(--panel);
  --chat-popup-border: #494949;
  --chat-header-bg: var(--secondary-600);
  --chat-header-bg-2: #0a74da;
  --chat-header-text: white;
  --chat-text-color: #909090;
  --chat-header-bg: white;

  /* ========== COLORS BUTTONS ========== */
  --btn-bg-hover: var(--primary-600);
  --btn-color-hover: #fff;

  /* ========== COLORS LINKS ========== */
  --link-color: var(--text);
  --link-hover-color: var(--accent);

  /* ========== COLORS CARDS ========== */
  --card-bg: rgba(15, 18, 25, 0.8);
  --card-border: rgba(255, 255, 255, 0.05);
  --card-hover-border: var(--accent);
  --card-hover-shadow: 0 8px 20px rgba(0, 174, 255, 0.25);
  --card-radial-gradient: rgba(0, 174, 255, 0.15);
  --card-title-color: #fff;
  --card-meta-color: var(--muted);
  --card-url-color: var(--accent);
  --card-btn-bg: var(--accent);
  --card-btn-hover-bg: #00a2ff;
  --card-btn-color: #fff;

  /*========== ACTIVATION NOTICE ==========*/
  --activation-notice-bg: #2a9df4;
}

/* ========== LIGHT THEME MODERN / SOFT ========== */
:root[data-theme="light"] {
  --developer-section-p-color: #212833;

  --service-card-bg: linear-gradient(145deg, #f9fbff, #e6ebf5);
  --service-card-text: #1e293b;
  --service-card-shadow:
    0 8px 20px rgba(0, 0, 0, 0.08), 0 0 8px rgba(0, 140, 255, 0.15);
  --service-card-hover-shadow:
    0 12px 28px rgba(0, 0, 0, 0.12), 0 0 18px rgba(0, 160, 255, 0.3);
  --service-desc-color: #475569;
  --service-btn-bg: linear-gradient(90deg, #0099ff, #0066ff);
  --service-btn-color: #fff;
  --service-btn-hover-shadow: 0 6px 15px rgba(0, 102, 255, 0.4);

  /* ===== DESIGN SYSTEM / BASE ===== */
  --bg: #f5f7fa;
  --panel: linear-gradient(
    180deg,
    rgba(255, 253, 250, 0.97),
    rgba(245, 248, 252, 0.88)
  ); /*rgba(255, 255, 255, 0.95)*/
  --panel-2: #e8edf3;
  --card: linear-gradient(
    180deg,
    rgba(254, 249, 236, 0.97),
    rgba(245, 248, 252, 0.88)
  );
  --card-border: 1px solid rgba(0, 0, 0, 0.06);

  --pricing-card: linear-gradient(
    180deg,
    rgba(252, 246, 231, 0.97) rgba(240, 243, 248, 0.88)
  );
  --pricing-card-border: 1px solid rgba(0, 0, 0, 0.08);
  --pricing-card-highlight-border: 1px solid rgba(6, 182, 212, 0.25);
  --pricing-card-highlight-box-shadow: 0 20px 50px rgba(100, 180, 220, 0.3);
  --pricing-card-hover:
    0 20px 50px rgba(0, 0, 0, 0.08), 0 0 12px rgba(6, 182, 212, 0.15);

  /* ===== PRICING SECTION ===== */
  --pricing-bg-section: #f7f7f7;
  --pricing-text: #111;
  --pricing-muted: #555;
  --pricing-surface: #fff;
  --pricing-accent-free: #28a745;
  --pricing-accent-premium: #007bff;
  --pricing-accent-light-free: #5cd37f;
  --pricing-accent-light-premium: #339dff;
  --pricing-border: rgba(0, 0, 0, 0.1);
  --pricing-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
  --pricing-hover-shadow: 0 20px 50px rgba(51, 157, 255, 0.2);
  --scroll-thumb: #28a745; /* light */
  --scroll-track: #fff; /* light */

  --header-bg: linear-gradient(
    180deg,
    rgba(255, 250, 239, 0.97),
    rgba(245, 248, 252, 0.85)
  );

  --muted: #38393c; /* texto secundário suave */ /*#494c52*/
  --text: #1e293b; /* texto principal escuro, não preto puro */
  --primary: #2563eb; /* azul principal */
  --primary-600: #000000; /* hover/active */
  --secondary: #3b82f6; /* azul claro */
  --secondary-600: #1e40af;

  --taga: #7c3aed; /* roxo acentuado */
  --accent: #06b6d4;
  --danger: #b91c1c; /* vermelho alerta */
  --glass: rgba(255, 255, 255, 0.25); /* vidro leve */
  --border: rgba(0, 0, 0, 0.08); /* bordas claras */

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;

  --shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.12);

  --bg-gradient: linear-gradient(180deg, #f5f7fa 0%, #e8edf3 60%, #f2f4f8 100%);
  --bg-gradient-primary: linear-gradient(
    180deg,
    #e6ebf1 0%,
    #e6ebf1 50%,
    #e6ebf1 100%
  );

  --maxw: 1150px;
  --easing: cubic-bezier(0.16, 0.84, 0.37, 1);
  --glass-blur: 6px;
  --gap: 18px;

  /* ===== BUTTON VARIABLES ===== #eb2525*/
  --btn-text: #ffffff;
  --btn-bg: #2563eb; /*2563eb*/ /*#e14040*/
  --about-color: #e14040;
  --btn-radius: 12px;
  --btn-gradient-hover: linear-gradient(120deg, #3b82f6, #60a5fa);
  --btn-gradient-accent: linear-gradient(135deg, #00bfa6f4, #f6d13bf0);
  --btn-gradient-warn: linear-gradient(135deg, #fcd34d, #f97316);
  --btn-shadow: 0 8px 26px rgba(19, 35, 71, 0.12);
  --btn-shadow-hover:
    0 18px 40px rgba(37, 99, 235, 0.3), 0 0 8px rgba(6, 182, 212, 0.25);
  --btn-hover-bg: #000000; /*1d4ed8*/
  --btn-hover-opacity: 0.15;
  --btn-hover-opacity-strong: 0.2;
  --btn-ghost-bg-hover: rgba(0, 0, 0, 0.04);
  --btn-ghost-border: rgba(0, 0, 0, 0.1);
  --btn-ghost-text: var(--text);
  --btn-outline: 3px solid #e1404035; /*rgba(37, 99, 235, 0.14);*/
  --btn-outline-offset: 3px;
  --btn-padding-y: 10px;
  --btn-padding-x: 16px;
  --btn-gap: 8px;
  --btn-font-weight: 700;
  --btn-font-size-lg: 1.05rem;
  --btn-padding-y-lg: 14px;
  --btn-padding-x-lg: 22px;
  --btn-easing: var(--easing);
  --btn-transition: all 0.25s var(--btn-easing);

  /* ===== FORMS / AUTH VARIABLES ===== */
  --auth-max-width: 720px;
  --auth-padding: 20px;
  --auth-margin-y: 20px;
  --tab-gap: 10px;
  --tab-padding: 10px;
  --tab-radius: 10px;
  --tab-bg: transparent;
  --tab-text: #6b7280;
  --tab-border: 1px solid transparent;
  --tab-transition: all 0.14s var(--easing);
  --tab-active-bg: linear-gradient(
    180deg,
    rgba(37, 99, 235, 0.12),
    rgba(37, 99, 235, 0.06)
  );
  --tab-active-text: var(--text);
  --tab-active-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  --label-font-size: 0.9rem;
  --label-color: #6b7280;
  --label-margin-bottom: 6px;
  --input-padding-y: 12px;
  --input-padding-x: 14px;
  --input-radius: 10px;
  --input-border: 1px solid rgba(0, 0, 0, 0.08);
  --input-bg: rgba(255, 255, 255, 0.95);
  --input-color: var(--text);
  --input-font-size: 0.95rem;
  --input-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.08);
  --placeholder-color: rgba(0, 0, 0, 0.2);
  --textarea-min-height: 100px;
  --form-gap: 12px;

  /* ===== TOAST VARIABLES ===== */
  --toast-wrap-right: 18px;
  --toast-wrap-bottom: 18px;
  --toast-gap: 12px;
  --toast-min-width: 260px;
  --toast-bg: linear-gradient(
    180deg,
    rgba(250, 241, 218, 0.969),
    rgba(245, 248, 252, 0.9)
  );
  --toast-radius: 12px;
  --toast-padding-y: 12px;
  --toast-padding-x: 14px;
  --toast-border: 1px solid rgba(0, 0, 0, 0.05);
  --toast-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
  --toast-gap-inner: 6px;
  --toast-muted-color: #6b7280;
  --toast-muted-size: 0.92rem;
  --toast-ok: #16a34a;
  --toast-err: #b91c1c;
  --toast-warn: #d97706;
  --toast-progress-height: 6px;
  --toast-progress-bg: rgba(0, 0, 0, 0.03);
  --toast-progress-radius: 6px;
  --toast-progress-duration: 4.2s;

  /* ===== FOOTER / CONTEXT ===== */
  --footer-bg: rgba(255, 255, 255, 0.92);
  --footer-border: rgba(0, 0, 0, 0.05);
  --footer-text: #4b5563;
  --footer-link: #2563eb;
  --footer-link-hover: #d81d1d;
  --img-border-radius: 8px;
  --focus-shadow:
    0 0 0 4px rgba(12, 48, 125, 0.12), 0 8px 20px rgba(0, 0, 0, 0.12);
  --focus-radius: 10px;

  /* HERO / CARD ICON */
  --hero-overlay-start: rgba(255, 255, 255, 0.7);
  --hero-overlay-end: rgba(255, 255, 255, 0.85);
  --hero-text-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  --hero-sub-color: #151515;
  --hero-color: #000000;
  --hero-color-li: #f7f7f7;
  --hero-benefits-li-hover: rgba(0, 0, 0, 0.716);
  --hero-benefits-color-li-hover: rgb(255, 255, 255);
  --card-icon-color: #2563eb;

  /* SIDE BUTTON */
  --side-btn-bg: rgba(255, 255, 255, 0.85);
  --side-btn-bg-hover: rgba(255, 255, 255, 0.95);
  --side-btn-color: #2563eb;
  --side-btn-arrow-move: translateX(3px);

  /* LOADING / PLAN INFO */
  --loading-bg: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.95),
    rgba(245, 248, 252, 0.9)
  );
  --loading-text: #4b5563;
  --plan-bg: rgb(0, 0, 0);
  --plan-border: rgba(255, 255, 255, 0.05);
  --plan-text: #f6d13bf0;

  /* ===== CONTEXT / COMPONENTES ===== */
  --whatsapp-bg: #25d366;
  --whatsapp-color: #fff;
  --help-bg: #3b82f6;
  --help-color: #fff;
  --help-shadow: 0 8px 26px rgba(59, 130, 246, 0.12);
  --help-shadow-hover:
    0 18px 40px rgba(59, 130, 246, 0.3), 0 0 8px rgba(6, 182, 212, 0.25);
  --scrollspy-bg: rgba(0, 0, 0, 0.05);
  --scrollspy-color: #1e293b;
  --scrollspy-color-hover: #facc15;
  --chat-bg: #2563eb;
  --chat-popup-bg: var(--panel);
  --chat-popup-border: rgba(0, 0, 0, 0.08);
  --chat-header-bg: rgb(255, 254, 239);
  --chat-text-color: #374151;
  --chat-header-color: #fff;
  --btn-bg-hover: var(--primary-600);
  --btn-color-hover: #fff;
  --link-color: var(--text);
  --link-hover-color: var(--accent);
  --card-bg: var(--card);
  --card-border: rgba(0, 0, 0, 0.06);
  --card-hover-border: #00bfa6;
  --card-hover-shadow: 0 8px 20px rgba(6, 182, 212, 0.15);
  --card-radial-gradient: rgba(6, 182, 212, 0.12);
  --card-title-color: #1e293b;
  --card-meta-color: #6b7280;
  --card-url-color: var(--accent);
  --card-btn-bg: var(--accent);
  --card-btn-hover-bg: #000000; /*#3b82f6*/
  --card-btn-color: #fff;

  /*========== ACTIVATION NOTICE ==========*/
  --activation-notice-bg: #000000;

  /*========== HERO ==========*/
  /* Fundo dos cards */
  --hero-bg-grad: linear-gradient(
    135deg,
    rgba(255, 245, 230, 0.516),
    rgba(255, 250, 240, 0.516)
  );
  --hero-bg-grad-hover: linear-gradient(
    135deg,
    rgba(255, 240, 200, 0.5),
    rgba(255, 255, 255, 0.5)
  );

  /* Sombras */
  --hero-shadow-li: rgba(0, 0, 0, 0.08);
  --hero-shadow-li-hover: rgba(255, 200, 120, 0.25);

  /* Ícones e texto */
  --hero-icon-li: #e6a100;
  --hero-text-li: #333;

  /* "Brilho" pincelado */
  --hero-brush-start: rgba(255, 230, 160, 0.35);
  --hero-brush-mid: rgba(255, 255, 255, 0.1);
  --hero-brush-end: transparent;

  /*SECURITY*/
  --primary-color: #00786f;
  --bg-card: rgba(0, 0, 0, 0.04);
  --bg-card-hover: rgba(0, 0, 0, 0.08);
  --text-color: #333333;
  --shadow-color: rgba(0, 0, 0, 0.12);

  --footer-subtext: #1e1e1e;

  /*Testimonial*/
  --testimonials-text: #222;
  --testimonials-text-muted: #555;
  --testimonials-card-bg: rgba(0, 0, 0, 0.05);
  --testimonials-text-light: #333;
  --testimonials-accent: #1a73e8;

  /* Demo Section */
  --demo-text: #111111;
  --demo-subtext: #555555;
  --demo-shadow-soft: rgba(0, 0, 0, 0.1);
  --demo-shadow-strong: rgba(0, 0, 0, 0.3);

  /* Stats Section */
  --stats-text: #111111;
  --stats-card-bg: #ffffff;
  --stats-accent: #00bfa6; /* #16a34a;*/
  --stats-shadow-soft: rgba(0, 0, 0, 0.1);
  --stats-shadow-strong: rgba(0, 0, 0, 0.3);
  --stats-subtext: #555555;

  /* Cases Section */
  --cases-accent: #1a73e8;
  --cases-shadow-soft: rgba(0, 0, 0, 0.1);
  --cases-shadow-strong: rgba(0, 0, 0, 0.3);

  /* Newsletter Section */
  --newsletter-text: #111111;
  --newsletter-subtext: #555555;
  --newsletter-input-bg: #f4f4f5;
  --newsletter-border: #ccc;
  --newsletter-accent: #1a73e8;
  --newsletter-accent-light: rgba(22, 38, 163, 0.3);

  /* Social Links */
  --social-shadow-soft: rgba(0, 0, 0, 0.1);
  --social-shadow-strong: rgba(0, 0, 0, 0.3);

  /* Suporte Alert - Light Theme */
  --support-bg: #fff4e5;
  --support-border: #ff9f43;
  --support-text: #7a4d2b;
  --support-link: #7a4d2b;
  --support-link-hover: #ff6f00;

  /* ===== Plan Card ===== */
  --plan-bg: #fff;
  --plan-border: #ccc;
  --plan-text: #222;
  --plan-status-ativo: #388e3c;
  --plan-status-expirado: #d32f2f;
  --plan-status-sem: #f57c00;
  --plan-btn-bg: #388e3c;
  --plan-btn-text: #fff;
  --plan-btn-hover: #2e7d32;
  --shine-color: rgba(0, 0, 0, 0.15);

  /* ===== Variáveis de cores para feedback ===== */
  --feedback-form-bg: #fff;
  --feedback-form-text: #222;
  --feedback-form-border: #ddd;
  --feedback-input-bg: #f9f9f9;
  --feedback-input-text: #111;
  --feedback-input-border: #ccc;
  --feedback-btn-bg: #ffca28;
  --feedback-btn-text: #111;
  --feedback-btn-hover: #ffb300;

  /* ================== VARIÁVEIS DE BURGER ================== */
  --burger-hover-bg: #eee;
  --burger-icon-color: #333;

  /* ================== CARD ================== */
  --card-bg: rgba(255, 255, 255, 0.7);
  --card-border: rgba(0, 0, 0, 0.1);
  --card-corner: rgba(0, 0, 0, 0.2);
  --card-corner-hover: rgba(0, 0, 0, 0.5);
  --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  --text-color: rgba(20, 20, 20, 0.9);
  --text-muted: rgba(255, 255, 255, 0.826);
  --card-icon-color: rgba(184, 134, 11, 0.8);
  --card-icon-hover: #daa520;
}

/* =======================================================
   SYNCRON SOLUTIONS VARIABLES
======================================================= */

:root {
  /* ===================================================
     SURFACE / BACKGROUND
  =================================================== */

  --solutions-surface: var(--panel);

  --solutions-surface-2: rgba(255, 255, 255, 0.03);

  --solutions-card-bg: var(--pricing-card);

  /* ===================================================
     BORDERS
  =================================================== */

  --solutions-border: var(--pricing-border);

  --solutions-border-hover: rgba(94, 234, 212, 0.2);

  --solutions-divider: rgba(255, 255, 255, 0.06);

  --solutions-highlight-border: var(--pricing-card-highlight-border);

  /* ===================================================
     TEXT
  =================================================== */

  --solutions-title: var(--text);

  --solutions-text: #dbe4ee;

  --solutions-muted: var(--muted);

  /* ===================================================
     BADGE
  =================================================== */

  --solutions-badge-bg: rgba(94, 234, 212, 0.12);

  --solutions-badge-border: rgba(94, 234, 212, 0.2);

  --solutions-badge-text: var(--accent);

  /* ===================================================
     ICON
  =================================================== */

  --solutions-icon-bg: rgba(255, 255, 255, 0.04);

  --solutions-icon-border: rgba(255, 255, 255, 0.06);

  --solutions-icon-color: var(--accent);

  /* ===================================================
     GLOW
  =================================================== */

  --solutions-glow-1: rgba(59, 130, 246, 0.16);

  --solutions-glow-2: rgba(94, 234, 212, 0.12);

  /* ===================================================
     SHADOW
  =================================================== */

  --solutions-shadow: var(--shadow-lg);

  --solutions-shadow-hover: var(--pricing-card-hover);

  /* ===================================================
     CHECK
  =================================================== */

  --solutions-check-bg: var(--accent);

  --solutions-check-color: #041018;

  /* ===================================================
     CTA / FOOTER
  =================================================== */

  --solutions-bottom-bg: rgba(255, 255, 255, 0.03);

  --solutions-bottom-border: rgba(255, 255, 255, 0.06);

  /* ===================================================
     CARD FEATURED
  =================================================== */

  --solutions-featured-shadow: var(--pricing-card-highlight-box-shadow);
}

:root[data-theme="light"] {
  /* ===================================================
     SURFACE / BACKGROUND
  =================================================== */

  --solutions-surface: var(--panel);

  --solutions-surface-2: rgba(15, 23, 42, 0.03);

  --solutions-card-bg: var(--pricing-card);

  /* ===================================================
     BORDERS
  =================================================== */

  --solutions-border: var(--pricing-border);

  --solutions-border-hover: rgba(6, 182, 212, 0.22);

  --solutions-divider: rgba(15, 23, 42, 0.08);

  --solutions-highlight-border: var(--pricing-card-highlight-border);

  /* ===================================================
     TEXT
  =================================================== */

  --solutions-title: var(--text);

  --solutions-text: #475569;

  --solutions-muted: var(--muted);

  /* ===================================================
     BADGE
  =================================================== */

  --solutions-badge-bg: rgba(6, 182, 212, 0.08);

  --solutions-badge-border: rgba(6, 182, 212, 0.14);

  --solutions-badge-text: var(--accent);

  /* ===================================================
     ICON
  =================================================== */

  --solutions-icon-bg: rgba(255, 255, 255, 0.55);

  --solutions-icon-border: rgba(0, 0, 0, 0.06);

  --solutions-icon-color: var(--accent);

  /* ===================================================
     GLOW
  =================================================== */

  --solutions-glow-1: rgba(37, 99, 235, 0.08);

  --solutions-glow-2: rgba(6, 182, 212, 0.08);

  /* ===================================================
     SHADOW
  =================================================== */

  --solutions-shadow: var(--shadow-lg);

  --solutions-shadow-hover: var(--pricing-card-hover);

  /* ===================================================
     CHECK
  =================================================== */

  --solutions-check-bg: var(--accent);

  --solutions-check-color: #ffffff;

  /* ===================================================
     CTA / FOOTER
  =================================================== */

  --solutions-bottom-bg: rgba(255, 255, 255, 0.55);

  --solutions-bottom-border: rgba(0, 0, 0, 0.06);

  /* ===================================================
     CARD FEATURED
  =================================================== */

  --solutions-featured-shadow: var(--pricing-card-highlight-box-shadow);
}

/* =======================================================
   PRICING THEME VARIABLES
======================================================= */
:root {
  /* Surface */
  --pricing-surface: rgba(10, 16, 24, 0.88);
  --pricing-surface-2: rgba(255, 255, 255, 0.03);

  /* Borders */
  --pricing-border: rgba(255, 255, 255, 0.08);
  --pricing-border-hover: rgba(94, 234, 212, 0.18);
  --pricing-divider: rgba(255, 255, 255, 0.06);

  /* Text */
  --pricing-title: #f8fafc;
  --pricing-text: #dbe4ee;
  --pricing-muted: #94a3b8;

  /* Label */
  --pricing-label-bg: rgba(255, 255, 255, 0.05);
  --pricing-label-border: rgba(255, 255, 255, 0.08);
  --pricing-label-text: #dbeafe;

  /* Highlight */
  --pricing-highlight-border: rgba(94, 234, 212, 0.25);

  /* Glow */
  --pricing-glow-1: rgba(59, 130, 246, 0.18);
  --pricing-glow-2: rgba(94, 234, 212, 0.12);

  --pricing-highlight-glow-1: rgba(0, 255, 224, 0.22);
  --pricing-highlight-glow-2: rgba(59, 130, 246, 0.16);

  /* Shadow */
  --pricing-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);

  --pricing-shadow-hover: 0 28px 80px rgba(0, 0, 0, 0.45);

  /* Check */
  --pricing-check-bg: var(--accent);
  --pricing-check-color: #041018;

  /* Decorative */
  --pricing-top-line: rgba(255, 255, 255, 0.85);

  /* Note */
  --pricing-note-bg: rgba(255, 255, 255, 0.03);
  --pricing-note-border: rgba(255, 255, 255, 0.06);
}

:root[data-theme="light"] {
  /* Surface */
  --pricing-surface: rgba(255, 255, 255, 0.92);
  --pricing-surface-2: rgba(15, 23, 42, 0.03);

  /* Borders */
  --pricing-border: rgba(15, 23, 42, 0.08);
  --pricing-border-hover: rgba(59, 130, 246, 0.18);
  --pricing-divider: rgba(15, 23, 42, 0.08);

  /* Text */
  --pricing-title: #0f172a;
  --pricing-text: #334155;
  --pricing-muted: #64748b;

  /* Label */
  --pricing-label-bg: rgba(59, 130, 246, 0.08);
  --pricing-label-border: rgba(59, 130, 246, 0.12);
  --pricing-label-text: #1d4ed8;

  /* Highlight */
  --pricing-highlight-border: rgba(59, 130, 246, 0.18);

  /* Glow */
  --pricing-glow-1: rgba(59, 130, 246, 0.08);
  --pricing-glow-2: rgba(16, 185, 129, 0.08);

  --pricing-highlight-glow-1: rgba(59, 130, 246, 0.12);
  --pricing-highlight-glow-2: rgba(16, 185, 129, 0.1);

  /* Shadow */
  --pricing-shadow: 0 12px 40px rgba(15, 23, 42, 0.08);

  --pricing-shadow-hover: 0 20px 50px rgba(15, 23, 42, 0.14);

  /* Check */
  --pricing-check-bg: var(--accent);
  --pricing-check-color: #ffffff;

  /* Decorative */
  --pricing-top-line: rgba(59, 130, 246, 0.45);

  /* Note */
  --pricing-note-bg: rgba(59, 130, 246, 0.04);
  --pricing-note-border: rgba(59, 130, 246, 0.08);
}

/* =======================================================
   PRICING THEME VARIABLES
   (somente para planos.html)
======================================================= */
.planos-page {
  /* Surface */
  --pricing-surface: rgba(10, 16, 24, 0.88);
  --pricing-surface-2: rgba(255, 255, 255, 0.03);

  /* Borders */
  --pricing-border: rgba(255, 255, 255, 0.08);
  --pricing-border-hover: rgba(94, 234, 212, 0.18);
  --pricing-divider: rgba(255, 255, 255, 0.06);

  /* Text */
  --pricing-title: #f8fafc;
  --pricing-text: #dbe4ee;
  --pricing-muted: #94a3b8;

  /* Label */
  --pricing-label-bg: rgba(255, 255, 255, 0.05);
  --pricing-label-border: rgba(255, 255, 255, 0.08);
  --pricing-label-text: #dbeafe;

  /* Highlight */
  --pricing-highlight-border: rgba(94, 234, 212, 0.25);

  /* Glow */
  --pricing-glow-1: rgba(59, 130, 246, 0.18);
  --pricing-glow-2: rgba(94, 234, 212, 0.12);

  --pricing-highlight-glow-1: rgba(0, 255, 224, 0.22);
  --pricing-highlight-glow-2: rgba(59, 130, 246, 0.16);

  /* Shadow */
  --pricing-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);

  --pricing-shadow-hover: 0 28px 80px rgba(0, 0, 0, 0.45);

  /* Check */
  --pricing-check-bg: var(--accent);
  --pricing-check-color: #041018;

  /* Decorative */
  --pricing-top-line: rgba(255, 255, 255, 0.85);

  /* Note */
  --pricing-note-bg: rgba(255, 255, 255, 0.03);
  --pricing-note-border: rgba(255, 255, 255, 0.06);
}

:root[data-theme="light"] .planos-page {
  /* Surface */
  --pricing-surface: rgba(255, 255, 255, 0.92);
  --pricing-surface-2: rgba(15, 23, 42, 0.03);

  /* Borders */
  --pricing-border: rgba(15, 23, 42, 0.08);
  --pricing-border-hover: rgba(59, 130, 246, 0.18);
  --pricing-divider: rgba(15, 23, 42, 0.08);

  /* Text */
  --pricing-title: #0f172a;
  --pricing-text: #334155;
  --pricing-muted: #64748b;

  /* Label */
  --pricing-label-bg: rgba(59, 130, 246, 0.08);
  --pricing-label-border: rgba(59, 130, 246, 0.12);
  --pricing-label-text: #1d4ed8;

  /* Highlight */
  --pricing-highlight-border: rgba(59, 130, 246, 0.18);

  /* Glow */
  --pricing-glow-1: rgba(59, 130, 246, 0.08);
  --pricing-glow-2: rgba(16, 185, 129, 0.08);

  --pricing-highlight-glow-1: rgba(59, 130, 246, 0.12);
  --pricing-highlight-glow-2: rgba(16, 185, 129, 0.1);

  /* Shadow */
  --pricing-shadow: 0 12px 40px rgba(15, 23, 42, 0.08);

  --pricing-shadow-hover: 0 20px 50px rgba(15, 23, 42, 0.14);

  /* Check */
  --pricing-check-bg: var(--accent);
  --pricing-check-color: #ffffff;

  /* Decorative */
  --pricing-top-line: rgba(59, 130, 246, 0.45);

  /* Note */
  --pricing-note-bg: rgba(59, 130, 246, 0.04);
  --pricing-note-border: rgba(59, 130, 246, 0.08);
}

/* =======================================================
   PRICING EXTRA STYLES
======================================================= */

:root {
  --pricing-card: rgba(15, 23, 42, 0.75);

  --pricing-border: rgba(255, 255, 255, 0.08);

  --pricing-text: #f8fafc;

  --pricing-note-bg: rgba(255, 255, 255, 0.03);

  --pricing-note-border: rgba(255, 255, 255, 0.06);

  --pricing-accent-free: #5eead4;

  --pricing-accent-premium: #00ffe0;

  --scroll-track: rgba(255, 255, 255, 0.05);

  --scroll-thumb: rgba(255, 255, 255, 0.18);
}

:root[data-theme="light"] {
  --pricing-card: rgba(255, 255, 255, 0.92);

  --pricing-border: rgba(15, 23, 42, 0.08);

  --pricing-text: #0f172a;

  --pricing-note-bg: rgba(15, 23, 42, 0.03);

  --pricing-note-border: rgba(15, 23, 42, 0.08);

  --scroll-track: rgba(15, 23, 42, 0.06);

  --scroll-thumb: rgba(15, 23, 42, 0.18);
}

/* =========================
   DARK THEME
========================= */

:root {
  --bg: #060816;
  --panel: #0f172a;
  --panel-2: #131d35;

  --text: #f5f7ff;
  --muted-text: #94a3b8;

  --border: rgba(255, 255, 255, 0.08);

  --accent: #2563eb;
  --accent-hover: #3b82f6;

  --input-bg: rgba(255, 255, 255, 0.03);

  --shadow: 0 10px 40px rgba(0, 0, 0, 0.35);

  --glass: rgba(255, 255, 255, 0.03);

  --success-bg: rgba(37, 99, 235, 0.12);
}

/* =========================
   LIGHT THEME
========================= */

:root[data-theme="light"] {
  --bg: #f4f7fb;
  --panel: #ffffff;
  --panel-2: #f8fafc;

  --text: #0f172a;
  --muted-text: #64748b;

  --border: rgba(15, 23, 42, 0.08);

  --accent: #2563eb;
  --accent-hover: #1d4ed8;

  --input-bg: rgba(15, 23, 42, 0.03);

  --shadow: 0 10px 30px rgba(15, 23, 42, 0.08);

  --glass: rgba(255, 255, 255, 0.7);

  --success-bg: rgba(37, 99, 235, 0.08);
}

/* ========== TOASTS ========== */
:root {
  --toast-width: 340px;

  --toast-bg: linear-gradient(
    180deg,
    rgba(18, 28, 44, 0.96),
    rgba(10, 16, 28, 0.98)
  );

  --toast-border: 1px solid rgba(255, 255, 255, 0.08);

  --toast-radius: 22px;

  --toast-padding-y: 18px;
  --toast-padding-x: 18px;

  --toast-gap: 14px;
  --toast-gap-inner: 14px;

  --toast-shadow:
    0 14px 40px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(255, 255, 255, 0.03);

  --toast-backdrop: blur(16px);

  --toast-title: var(--text);
  --toast-text: var(--text-soft);
  --toast-muted: var(--text-muted);

  --toast-progress-bg: rgba(255, 255, 255, 0.06);

  --toast-ok: #22c55e;
  --toast-err: #ef4444;
  --toast-warn: #f59e0b;
  --toast-info: var(--primary);

  --toast-icon-bg: rgba(255, 255, 255, 0.04);

  --toast-progress-height: 5px;
  --toast-progress-radius: 999px;

  --toast-progress-duration: 5s;

  --toast-wrap-right: 24px;
  --toast-wrap-bottom: 24px;
}

/* ========== CHAT ========== */
:root {
  --accent-chat: #7c5cff;
  --bubble: #111422;
  --bubble-2: #15182a;
  --bot: #e6e9ff;
}

/* =========================================================
   LIGHT MODE
========================================================= */

:root[data-theme="light"] .loading-overlay {
  background:
    radial-gradient(circle at top, rgba(139, 92, 246, 0.1), transparent 35%),
    rgba(255, 255, 255, 0.72);
}

:root[data-theme="light"] .spinner {
  border: 3px solid rgba(15, 23, 42, 0.08);

  border-top: 3px solid var(--accent);

  border-right: 3px solid rgba(139, 92, 246, 0.35);
}

:root[data-theme="light"] .loading-message {
  color: rgba(15, 23, 42, 0.82);
}

:root {
  --bg-color: #0d0f12;
  --border-color: #4cafef;
  --shadow-color: rgba(0, 0, 0, 0.3);
  --shadow-hover-color: rgba(0, 0, 0, 0.5);
}

:root[data-theme="light"] {
  --bg-color: #ffffff;
  --border-color: #1a73e8;
  --shadow-color: rgba(0, 0, 0, 0.2);
  --shadow-hover-color: rgba(0, 0, 0, 0.35);
}

/* =========================================================
   LIGHT MODE Support
========================================================= */

:root[data-theme="light"] .support-alert {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.92),
    rgba(248, 250, 252, 0.96)
  );
}

/* ========================== VARIÁVEIS DARK / TECH SEÇÃO APPS DESKTOP ========================== */

:root {
  --apps-bg: #0d0d0d; /*121212*/
  --apps-card-bg: #0d0d0d; /*1e1e1e*/
  --apps-card-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
  --apps-title-color: #00ffcc;
  --apps-text-color: #e0e0e0;
  --apps-btn-bg: #00ffcc;
  --apps-btn-color: #121212;
  --apps-btn-hover: #00e6b8;
  --apps-sub-color: #a0a0a0;
}

/* Tema light alternativo */
:root[data-theme="light"] {
  --apps-bg: #f5f5f5;
  --apps-card-bg: #ffffff;
  --apps-card-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  --apps-title-color: #009999;
  --apps-text-color: #1e1e1e;
  --apps-btn-bg: #009999;
  --apps-btn-color: #ffffff;
  --apps-btn-hover: #008080;
  --apps-sub-color: #606060;
}

/*download page*/
/* Tema Padrão (Dark) */
:root {
  --bg-color: #0e0e10;
  --panel-bg: #0d0d0d;
  --header-app-bg: #1b1b1f;
  --border-color: #2e2e33;
  --text-primary: #f0f0f0;
  --text-secondary: #b5b5b5;
  --accent-color: #007bff;
  --shadow-color: rgba(0, 0, 0, 0.5);

  --btn-bg-accent: var(--accent-color);
  --btn-bg-ghost: transparent;
  --btn-text-accent: #fff;
  --btn-text-ghost: var(--accent-color);
}

/* Tema Claro (Light) */
:root[data-theme="light"] {
  --bg-color: #f5f5f5;
  --panel-bg: #ffffff;
  --header-app-bg: #ffffff;
  --border-color: #d9d9d9;
  --text-primary: #1e1e1e;
  --text-secondary: #555;
  --accent-color: #0066cc;
  --shadow-color: rgba(0, 0, 0, 0.08);

  --btn-bg-accent: var(--accent-color);
  --btn-bg-ghost: transparent;
  --btn-text-accent: #fff;
  --btn-text-ghost: var(--accent-color);
}

/* =========================================================
   SERVICES AREA — SYNCRON DASHBOARD - THEME TOKENS
========================================================= */

/* DARK */
:root {
  --bg: #071018;
  --bg-secondary: #0f1622;

  --card: rgba(18, 24, 32, 0.88);
  --card-solid: #121820;

  --text: #eef6fb;
  --text-soft: #d8e6f3;

  --muted: #93a8b8;
  --muted-2: #6f8597;

  --border: rgba(255, 255, 255, 0.04);
  --border-strong: rgba(255, 255, 255, 0.08);

  --glass: rgba(255, 255, 255, 0.03);
  --glass-strong: rgba(255, 255, 255, 0.06);

  --shadow: 0 20px 45px rgba(0, 0, 0, 0.45);
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.28);

  /* cores principais alinhadas ao sistema */
  --accent: #5eead4;
  --accent-2: #3b82f6;

  --purple: #9047f2;
  --cyan: #00c6ff;
  --green: #10b981;
  --orange: #fb923c;
  --yellow: #facc15;

  --success-bg: rgba(16, 185, 129, 0.16);
  --warning-bg: rgba(249, 115, 22, 0.14);

  --cyan-bg: rgba(0, 198, 255, 0.12);
  --purple-bg: rgba(94, 234, 212, 0.12);

  --input-bg: rgba(255, 255, 255, 0.04);
  --input-focus: rgba(255, 255, 255, 0.07);

  --hover-bg: rgba(255, 255, 255, 0.05);

  --plan-gradient: linear-gradient(
    135deg,
    rgba(94, 234, 212, 0.14),
    rgba(59, 130, 246, 0.1)
  );

  --hero-gradient: linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.14),
    rgba(94, 234, 212, 0.08)
  );
}
/* LIGHT */
:root[data-theme="light"] {
  --bg: #f3f6fb;
  --bg-secondary: #ffffff;

  --card: rgba(255, 255, 255, 0.88);
  --card-solid: #ffffff;

  --text: #0f172a;
  --text-soft: #1e293b;

  --muted: #64748b;
  --muted-2: #94a3b8;

  --border: rgba(15, 23, 42, 0.08);
  --border-strong: rgba(15, 23, 42, 0.12);

  --glass: rgba(255, 255, 255, 0.72);
  --glass-strong: rgba(255, 255, 255, 0.88);

  --shadow: 0 20px 45px rgba(15, 23, 42, 0.08);

  --shadow-soft: 0 10px 25px rgba(15, 23, 42, 0.06);

  --accent: #7c3aed;
  --accent-2: #06b6d4;

  --purple: #9333ea;
  --cyan: #0891b2;
  --green: #059669;
  --orange: #ea580c;
  --yellow: #ca8a04;

  --success-bg: rgba(16, 185, 129, 0.12);
  --warning-bg: rgba(249, 115, 22, 0.12);
  --cyan-bg: rgba(6, 182, 212, 0.12);
  --purple-bg: rgba(124, 58, 237, 0.12);

  --input-bg: rgba(15, 23, 42, 0.04);
  --input-focus: rgba(15, 23, 42, 0.07);

  --hover-bg: rgba(15, 23, 42, 0.05);

  --plan-gradient: linear-gradient(
    135deg,
    rgba(124, 58, 237, 0.12),
    rgba(6, 182, 212, 0.08)
  );

  --hero-gradient: linear-gradient(
    135deg,
    rgba(124, 58, 237, 0.08),
    rgba(6, 182, 212, 0.05)
  );
}

/* =========================================================
   LIGHT MODE
========================================================= */

:root[data-theme="light"] #servicesArea .hero-stat-card {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.92),
    rgba(248, 250, 252, 0.96)
  );

  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}

:root[data-theme="light"] #servicesArea .hero-stat-card:hover {
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
}

:root[data-theme="light"] .plan-label {
  color: #7c3aed;
}

/* =========================================================
   DARK THEME (DEFAULT)
========================================================= */

:root {
  /* CARD */
  --card: linear-gradient(
    180deg,
    rgba(15, 23, 42, 0.96),
    rgba(17, 24, 39, 0.94)
  );

  /* CARD BORDER */
  --card-border: rgba(255, 255, 255, 0.06);

  /* CARD SHADOW */
  --card-shadow:
    0 12px 34px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.03);

  /* HOVER */
  --card-hover-border: rgba(139, 92, 246, 0.22);

  --card-hover-shadow:
    0 20px 46px rgba(0, 0, 0, 0.34), 0 0 0 1px rgba(139, 92, 246, 0.08);
}

/* =========================================================
   LIGHT THEME
========================================================= */

:root[data-theme="light"] {
  /* CARD */
  --card: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.96),
    rgba(248, 250, 252, 0.94)
  );

  /* CARD BORDER */
  --card-border: rgba(15, 23, 42, 0.08);

  /* CARD SHADOW */
  --card-shadow:
    0 10px 30px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);

  /* HOVER */
  --card-hover-border: rgba(139, 92, 246, 0.18);

  --card-hover-shadow:
    0 18px 38px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(139, 92, 246, 0.06);
}

:root {
  /* =========================
     ECOSYSTEM - DARK THEME
  ========================= */

  --eco-bg: rgba(255, 255, 255, 0.04);
  --eco-border: rgba(255, 255, 255, 0.08);
  --eco-border-soft: rgba(255, 255, 255, 0.12);

  --eco-text-muted: rgba(255, 255, 255, 0.75);
  --eco-text-dim: rgba(255, 255, 255, 0.7);

  --eco-glow: #3b82f655;
  --eco-primary: #3b82f6;
  --eco-secondary: #7c3aed;

  --eco-dot: #ffffff30;
}

:root {
  --eco-text-muted: var(--muted);
}