/* ── Global ─────────────────────────────────────────────────── */
    html, body { scroll-behavior: smooth; overflow-x: hidden; width: 100%; max-width: 100%; }
    img { max-width: 100%; height: auto; }

    /* ── Tab Styles ────────────────────────────────────────────── */
    .tab-active {
      background: #2563EB;
      color: #fff;
      font-weight: 600;
      border-radius: 9999px;
      box-shadow: 0 4px 15px rgba(99,102,241,0.4);
    }
    .tab-inactive { color: #6b7280; border-radius: 9999px; }
    .tab-inactive:hover { color: #374151; background: rgba(99,102,241,0.08); }

    /* ── Premium Backgrounds ──────────────────────────────────── */
    .premium-bg { background: linear-gradient(135deg, rgba(11,30,54,0.97), rgba(26,54,93,0.93)); }
    .premium-card {
      background: #0f1f3d;
      border: 1px solid rgba(99,102,241,0.15);
      border-radius: 24px;
      transition: all 0.5s cubic-bezier(0.4,0,0.2,1);
    }
    .premium-card:hover {
      transform: translateY(-8px);
      border-color: rgba(99,102,241,0.5);
      box-shadow: 0 20px 50px rgba(0,0,0,0.4), 0 0 30px rgba(99,102,241,0.1);
    }

    /* ── Popular card glow ────────────────────────────────────── */
    .popular-card {
      position: relative;
      overflow: visible;
    }
    /* Mobile: prevent horizontal overflow in results */
    #resultado-analise { max-width: 100%; overflow-x: hidden; }
    #lista-marcas > div, #conflitos-foneticos-container > div > div { overflow: hidden; text-overflow: ellipsis; }
    @media (max-width: 639px) {
      .popular-card { transform: none !important; }
    }
    .popular-card::before {
      content: '';
      position: absolute;
      inset: -2px;
      border-radius: 26px;
      background: linear-gradient(135deg, #2563EB, #3B82F6, #2563EB);
      background-size: 300% 300%;
      animation: borderGlow 4s ease infinite;
      z-index: -1;
    }
    @keyframes borderGlow {
      0%, 100% { background-position: 0% 50%; opacity: 0.7; }
      50% { background-position: 100% 50%; opacity: 1; }
    }

    .manifesto-bg { background: linear-gradient(135deg, #0F172A 0%, #1E1B4B 60%, #0F172A 100%); }

    /* ── Animations ────────────────────────────────────────────── */
    @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
    .animate-fadein { animation: fadeIn 0.4s ease; }
    .loading-dots::after { content: '...'; animation: dots 1.5s infinite; }
    @keyframes dots { 0%,20%{content:'.'} 40%{content:'..'} 60%,100%{content:'...'} }

    /* ── Scroll reveal ─────────────────────────────────────────── */
    .reveal {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1);
    }
    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }
    .reveal-delay-1 { transition-delay: 0.1s; }
    .reveal-delay-2 { transition-delay: 0.2s; }
    .reveal-delay-3 { transition-delay: 0.3s; }
    .reveal-delay-4 { transition-delay: 0.4s; }

    /* ── Toast ─────────────────────────────────────────────────── */
    .toast-msg {
      position: fixed; bottom: 2rem; left: 2rem; z-index: 999;
      background: #1E1B4B; color: white; padding: 1rem 1.5rem;
      border-radius: 12px; font-size: 0.9rem; box-shadow: 0 10px 30px rgba(0,0,0,0.3);
      animation: slideIn 0.3s ease;
    }
    @keyframes slideIn { from { transform: translateX(100px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

    /* ── Score bars ────────────────────────────────────────────── */
    .score-bar { height: 8px; background: #E2E8F0; border-radius: 4px; overflow: hidden; }
    .score-fill { height: 100%; border-radius: 4px; background: linear-gradient(135deg, #4F46E5, #6366F1); transition: width 1s ease; }

    /* ── Recommendation badges ─────────────────────────────────── */
    .rec-registrar { background: #F0FDF4; color: #059669; border: 1px solid #BBF7D0; }
    .rec-ajustar { background: #FFFBEB; color: #D97706; border: 1px solid #FDE68A; }
    .rec-risco { background: #FEF2F2; color: #DC2626; border: 1px solid #FECACA; }
    .classes-badge { display: inline-block; background: rgba(99,102,241,0.2); color: #A5B4FC; border: 1px solid rgba(99,102,241,0.3); border-radius: 6px; padding: 0.2rem 0.6rem; font-size: 0.8rem; margin: 0.2rem; }

    /* ── Mobile menu ───────────────────────────────────────────── */
    #mobileMenu { display: none; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: rgba(255,255,255,0.98); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid #e5e7eb; box-shadow: 0 20px 50px rgba(0,0,0,0.15); padding: 1rem; gap: 0.5rem; z-index: 9999; }
    #mobileMenu.show { display: flex !important; }

    /* ── Mobile overrides ─────────────────────────────────────── */
    @media (max-width: 767px) {
      .desktop-only { display: none !important; }
      .hero-glow-1, .hero-glow-2 { display: none !important; }
      .md-label { min-width: 90px; font-size: 11px; }
      .md-value { font-size: 13px; }
    }

    /* ── Hero grid pattern ─────────────────────────────────────── */
    .hero-grid {
      background-image:
        radial-gradient(circle at 1px 1px, rgba(99,102,241,0.08) 1px, transparent 0);
      background-size: 40px 40px;
    }

    /* ── Hero gradient mesh ────────────────────────────────────── */
    .hero-glow-1 {
      position: absolute;
      width: 600px; height: 600px;
      background: radial-gradient(circle, rgba(99,102,241,0.15) 0%, transparent 70%);
      top: -200px; right: -100px;
      border-radius: 50%;
      pointer-events: none;
      filter: blur(40px);
    }
    .hero-glow-2 {
      position: absolute;
      width: 500px; height: 500px;
      background: radial-gradient(circle, rgba(139,92,246,0.1) 0%, transparent 70%);
      bottom: -200px; left: -100px;
      border-radius: 50%;
      pointer-events: none;
      filter: blur(40px);
    }

    /* ── Gradient text ─────────────────────────────────────────── */
    .gradient-text {
      background: linear-gradient(135deg, #2563EB 0%, #3B82F6 50%, #A78BFA 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    /* ── Frosted navbar ────────────────────────────────────────── */
    .frosted-nav {
      backdrop-filter: blur(16px) saturate(180%);
      -webkit-backdrop-filter: blur(16px) saturate(180%);
      background: rgba(255,255,255,0.82);
      transition: all 0.3s ease;
    }
    .frosted-nav.scrolled {
      box-shadow: 0 1px 40px rgba(0,0,0,0.08);
    }

    /* ── CTA glow ──────────────────────────────────────────────── */
    .cta-glow {
      box-shadow: 0 0 30px rgba(99,102,241,0.35);
      transition: all 0.3s ease;
    }
    .cta-glow:hover {
      box-shadow: 0 0 50px rgba(99,102,241,0.5), 0 10px 40px rgba(99,102,241,0.3);
      transform: translateY(-2px);
    }

    /* ── Stat counter pulse ────────────────────────────────────── */
    @keyframes statPulse {
      0% { opacity: 0; transform: scale(0.9); }
      60% { opacity: 1; transform: scale(1.05); }
      100% { opacity: 1; transform: scale(1); }
    }
    .stat-loaded { animation: statPulse 0.6s ease forwards; }

    /* ── Pillar card hover ─────────────────────────────────────── */
    .pillar-card {
      transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
      position: relative;
      overflow: hidden;
    }
    .pillar-card::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(99,102,241,0.05) 0%, transparent 50%);
      opacity: 0;
      transition: opacity 0.4s ease;
      border-radius: inherit;
    }
    .pillar-card:hover {
      transform: translateY(-4px);
      border-color: rgba(99,102,241,0.3);
      box-shadow: 0 12px 40px rgba(0,0,0,0.2);
    }
    .pillar-card:hover::after { opacity: 1; }

    /* ── Input focus ring ──────────────────────────────────────── */
    .input-premium {
      transition: all 0.3s ease;
      border: 1.5px solid #e5e7eb;
    }
    .input-premium:focus {
      border-color: #2563EB;
      box-shadow: 0 0 0 4px rgba(99,102,241,0.12), 0 2px 8px rgba(99,102,241,0.08);
    }

    /* ── Search card ───────────────────────────────────────────── */
    .search-card {
      background: white;
      border: 1px solid rgba(0,0,0,0.06);
      box-shadow: 0 4px 6px -1px rgba(0,0,0,0.03), 0 20px 60px -15px rgba(99,102,241,0.1);
    }

    /* ── Newsletter input ──────────────────────────────────────── */
    .newsletter-input:focus { outline: none; box-shadow: 0 0 0 3px rgba(99,102,241,0.3); }

    /* ── Floating shapes ───────────────────────────────────────── */
    @keyframes float {
      0%, 100% { transform: translateY(0px) rotate(0deg); }
      50% { transform: translateY(-20px) rotate(3deg); }
    }
    .float-shape { animation: float 6s ease-in-out infinite; }
    .float-shape-2 { animation: float 8s ease-in-out infinite reverse; }

    /* ── Modal Processo Styles ─────────────────────────────────── */
    .md-row { display: flex; justify-content: space-between; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid #F1F5F9; }
    .md-row:last-child { border-bottom: none; }
    .md-label { font-size: 12px; color: #64748B; font-weight: 500; min-width: 120px; flex-shrink: 0; text-transform: uppercase; letter-spacing: 0.5px; }
    .md-value { font-size: 14px; color: #1E293B; text-align: right; word-break: break-word; }
    .md-badge { display: inline-block; padding: 2px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; }
    .md-despacho { background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 12px; padding: 14px 16px; }