*{margin:0;padding:0;box-sizing:border-box}
    html{overflow-x:hidden}
    body{font-family:Poppins,sans-serif;background:#0f172a;color:#e5e7eb;scroll-behavior:smooth;overflow-x:hidden}

    /* ===================== CANVAS GLOBAL (toda a página) ===================== */
    #particles-canvas {
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      z-index: 0;
      pointer-events: none;
    }

    /* Todo conteúdo acima do canvas */
    nav, header, section, footer, .scroll-to-top { position: relative; z-index: 1; }

    /* ===================== HEADER ===================== */
    header{
      min-height:100vh;
      display:flex;
      flex-direction:column;
      justify-content:center;
      align-items:center;
      text-align:center;
      padding:0 20px;
    }

    /* Gradiente decorativo só no hero */
    header::before{
      content:'';
      position:absolute;
      inset:0;
      background:
        radial-gradient(ellipse 70% 55% at 20% 30%, rgba(56,189,248,0.14) 0%, transparent 65%),
        radial-gradient(ellipse 55% 45% at 80% 70%, rgba(99,102,241,0.12) 0%, transparent 65%),
        radial-gradient(ellipse 45% 40% at 55% 10%, rgba(14,165,233,0.10) 0%, transparent 60%);
      z-index: 0;
      pointer-events: none;
      animation: bgShift 12s ease-in-out infinite alternate;
    }
    @keyframes bgShift {
      0%   { opacity: 1;   transform: scale(1); }
      100% { opacity: 0.6; transform: scale(1.05); }
    }

    /* Cartão glassmorphism */
    .hero-glass {
      position: relative;
      z-index: 2;
      background: rgba(15, 23, 42, 0.5);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border: 1px solid rgba(56,189,248,0.18);
      border-radius: 28px;
      padding: 60px 70px;
      max-width: 750px;
      width: 100%;
      box-shadow:
        0 8px 32px rgba(0,0,0,0.45),
        0 0 0 1px rgba(255,255,255,0.04) inset,
        0 1px 0 rgba(255,255,255,0.08) inset;
    }
    .hero-glass::before {
      content:'';
      position:absolute;
      top:0; left:50%;
      transform:translateX(-50%);
      width:60%; height:1px;
      background:linear-gradient(90deg, transparent, rgba(56,189,248,0.45), transparent);
    }

    @media (max-width:600px) {
      .hero-glass { padding:40px 24px; }
      h1 { font-size:2.2rem; }
    }

    /* ===================== TIPOGRAFIA & LAYOUT ===================== */
    h1{font-size:3rem;background:linear-gradient(90deg,#38bdf8,#0ea5e9);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
    p{color:#94a3b8;margin-top:10px}
    section{max-width:1200px;margin:auto;padding:80px 20px}
    .section-title{text-align:center;font-size:2.5rem;margin-bottom:50px;color:#f8fafc}
    .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,360px));gap:30px;justify-content:center}

    /* ===================== CARDS ===================== */
    .card{background:rgba(2,6,23,0.75);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:16px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.3);transition:transform 0.4s ease,box-shadow 0.4s ease,border-color 0.4s ease;cursor:pointer;position:relative;border:1px solid #1e293b;height:100%;display:flex;flex-direction:column}
    .card:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(56,189,248,0.15);border-color:#38bdf8}
    .card img{width:100%;height:200px;object-fit:cover;transition:transform 0.5s ease}
    .card:hover img{transform:scale(1.08)}
    .content{flex:1;display:flex;flex-direction:column;padding:25px}
    .content h3{font-size:1.4rem;margin-bottom:15px;color:#f1f5f9;min-height:3em}
    .content p{color:#94a3b8;font-size:0.95rem;line-height:1.6;margin-bottom:20px;flex:1;min-height:4.5em}

    /* ===================== BOTÃO ===================== */
    .btn-saber-mais{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;background:linear-gradient(90deg,#1e40af,#3b82f6);color:white;border-radius:8px;font-weight:600;transition:all 0.3s ease;font-size:0.95rem;margin-top:auto;width:100%;text-align:center;text-decoration:none}
    .btn-saber-mais:hover{background:linear-gradient(90deg,#3b82f6,#60a5fa);transform:translateY(-2px);box-shadow:0 5px 15px rgba(59,130,246,0.3);text-decoration:none}

    /* ===================== TAGS ===================== */
    .tech-tags{display:flex;gap:8px;flex-wrap:wrap;margin:15px 0}
    .tech-tag{background:#1e293b;padding:6px 12px;border-radius:12px;font-size:0.75rem;color:#94a3b8}

    /* ===================== SOCIAL ===================== */
    .social-icons{display:flex;gap:20px;margin-top:30px;justify-content:center}
    .social-icons a{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:rgba(30,41,59,0.7);backdrop-filter:blur(8px);color:#38bdf8;font-size:1.3rem;transition:all 0.3s ease;text-decoration:none;border:1px solid rgba(56,189,248,0.15)}
    .social-icons a:hover{background:#38bdf8;color:#0f172a;transform:scale(1.1) rotate(5deg);text-decoration:none}

    /* ===================== FOOTER ===================== */
    footer{text-align:center;padding:40px 20px;color:#64748b;border-top:1px solid #1e293b;margin-top:60px}

    /* ===================== SCROLL TO TOP ===================== */
    @keyframes ringRotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
    .scroll-to-top{position:fixed;bottom:30px;right:30px;width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;color:#f0c060;background:rgba(15,23,42,0.65);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:none;box-shadow:0 5px 20px rgba(0,0,0,0.35),inset 0 1px 0 rgba(255,255,255,0.07);z-index:1000;transition:color 0.3s ease,box-shadow 0.3s ease,background 0.3s ease,opacity 0.3s ease,visibility 0.3s ease;opacity:0;visibility:hidden;text-decoration:none}
    .scroll-to-top::before{content:'';position:absolute;inset:-3px;border-radius:50%;padding:3px;background:conic-gradient(from 0deg,transparent 0%,transparent 30%,#f0c060 50%,#fde68a 60%,#f0c060 70%,transparent 85%,transparent 100%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:ringRotate 2.8s linear infinite;pointer-events:none}
    .scroll-to-top.visible{opacity:1;visibility:visible}
    .scroll-to-top:hover{background:rgba(240,192,96,0.15);color:#fde68a;box-shadow:0 8px 28px rgba(240,192,96,0.3),inset 0 1px 0 rgba(255,255,255,0.1);text-decoration:none}
    .scroll-to-top:focus{outline:none;text-decoration:none}

    /* ===================== NAV ===================== */
    .nav-menu{position:fixed;top:0;width:100%;background:rgba(15,23,42,0.92);backdrop-filter:blur(12px);z-index:1000;padding:18px 0;border-bottom:1px solid rgba(56,189,248,0.1);transition:all 0.3s ease}
    .nav-container{max-width:1200px;margin:0 auto;padding:0 20px;display:flex;justify-content:center;align-items:center}
    .nav-links{display:flex;gap:35px}
    .nav-links a{color:#cbd5e1;text-decoration:none;transition:all 0.3s;font-weight:600;font-size:1rem;position:relative;padding:5px 0}
    .nav-links a:hover{color:#38bdf8}
    .nav-links a::after{content:'';position:absolute;bottom:0;left:0;width:0;height:2px;background:linear-gradient(90deg,#38bdf8,#0ea5e9);transition:width 0.3s ease}
    .nav-links a:hover::after{width:100%}

    .hero-subtitle{font-size:1.1rem;max-width:520px;margin:18px auto 0;line-height:1.7;color:#94a3b8}
    .card-link{text-decoration:none;color:inherit;display:flex;flex-direction:column;height:100%}

    /* ===================== SOBRE ===================== */
    .sobre-container{background:rgba(30,41,59,0.6);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:24px;margin:60px auto;display:flex;align-items:center;justify-content:center;min-height:450px;text-align:center;padding:60px 40px;box-shadow:0 15px 40px rgba(0,0,0,0.2);border:1px solid rgba(56,189,248,0.08)}
    .sobre-texto{max-width:800px;color:#cbd5e1;line-height:1.8;font-size:1.1rem;padding:0 20px}
    @media(max-width:600px){
      .sobre-container{min-height:unset;padding:40px 20px;margin:30px auto}
      .sobre-texto{font-size:0.95rem;padding:0}
    }

    /* ===================== SEARCH BAR ===================== */
    .search-wrapper{max-width:680px;margin:0 auto 48px}
    .search-bar{display:flex;align-items:center;background:rgba(2,6,23,0.7);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(56,189,248,0.25);border-radius:14px;padding:0 18px;transition:border-color 0.3s,box-shadow 0.3s;box-shadow:0 4px 20px rgba(0,0,0,0.25)}
    .search-bar:focus-within{border-color:#38bdf8;box-shadow:0 0 0 3px rgba(56,189,248,0.12),0 4px 20px rgba(0,0,0,0.3)}
    .search-icon{color:#38bdf8;font-size:1rem;flex-shrink:0}
    .search-input{flex:1;background:transparent;border:none;outline:none;color:#f1f5f9;font-family:Poppins,sans-serif;font-size:1rem;padding:16px 14px;caret-color:#38bdf8}
    .search-input::placeholder{color:#475569}
    .search-clear{background:transparent;border:none;color:#475569;cursor:pointer;font-size:0.9rem;padding:6px;border-radius:6px;display:none;transition:color 0.2s;flex-shrink:0}
    .search-clear.visible{display:block}
    .search-clear:hover{color:#38bdf8}
    .search-meta{margin-top:12px;text-align:center;font-size:0.85rem;color:#475569;min-height:20px}
    .search-meta span{color:#38bdf8;font-weight:600}
    /* ===================== EMPTY STATE ===================== */
    .empty-state{display:none;flex-direction:column;align-items:center;justify-content:center;padding:80px 20px;text-align:center;gap:12px}
    .empty-state.visible{display:flex}

    /* ===================== ANIMAÇÃO SEQUENCIAL DOS CARDS ===================== */
    .card-appear {
      opacity: 0;
      transform: translateY(30px);
    }
    .card-appear.card-visible {
      opacity: 1;
      transform: translateY(0);
      transition: opacity 0.5s ease, transform 0.5s ease;
    }
    .empty-icon{width:72px;height:72px;background:rgba(56,189,248,0.08);border:1px solid rgba(56,189,248,0.18);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.8rem;color:#38bdf8;margin-bottom:8px}
    .empty-state h3{color:#f1f5f9;font-size:1.25rem;margin:0}
    .empty-state p{color:#64748b;margin:0;font-size:0.95rem}
    .empty-reset{background:none;border:none;color:#38bdf8;cursor:pointer;font-family:Poppins,sans-serif;font-size:0.95rem;font-weight:600;padding:0;text-decoration:underline}
    .empty-reset:hover{color:#7dd3fc}

    /* ===================== POPUP DE AVISO ===================== */
    .popup-overlay {
      position: fixed; inset: 0; z-index: 9999;
      background: rgba(2, 6, 23, 0.75);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      display: flex; align-items: center; justify-content: center;
      padding: 20px;
      animation: popupFadeIn 0.4s ease forwards;
    }
    .popup-overlay.hiding {
      animation: popupFadeOut 0.3s ease forwards;
    }
    @keyframes popupFadeIn {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
    @keyframes popupFadeOut {
      from { opacity: 1; }
      to   { opacity: 0; }
    }
    .popup-card {
      position: relative;
      background: rgba(15, 23, 42, 0.85);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border: 1px solid rgba(56,189,248,0.2);
      border-radius: 20px;
      padding: 44px 48px 40px;
      max-width: 460px;
      width: 100%;
      box-shadow: 0 8px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04) inset;
      animation: popupSlideIn 0.4s cubic-bezier(0.34,1.56,0.64,1) forwards;
    }
    @keyframes popupSlideIn {
      from { opacity: 0; transform: translateY(24px) scale(0.97); }
      to   { opacity: 1; transform: translateY(0)    scale(1);    }
    }
    .popup-card::before {
      content: '';
      position: absolute;
      top: 0; left: 50%;
      transform: translateX(-50%);
      width: 55%; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(56,189,248,0.45), transparent);
      border-radius: 1px;
    }
    .popup-close {
      position: absolute;
      top: 14px; right: 14px;
      width: 32px; height: 32px;
      background: rgba(30,41,59,0.7);
      border: 1px solid rgba(56,189,248,0.12);
      border-radius: 8px;
      color: #64748b;
      font-size: 0.85rem;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: all 0.2s ease;
    }
    .popup-close:hover {
      background: rgba(56,189,248,0.12);
      color: #38bdf8;
      border-color: rgba(56,189,248,0.35);
    }
    .popup-badge {
      display: inline-flex; align-items: center; gap: 6px;
      background: rgba(56,189,248,0.1);
      border: 1px solid rgba(56,189,248,0.25);
      border-radius: 20px;
      padding: 4px 12px;
      font-size: 0.75rem;
      font-weight: 600;
      color: #38bdf8;
      letter-spacing: 0.05em;
      margin-bottom: 18px;
    }
    .popup-badge i { font-size: 0.7rem; }
    .popup-card h2 {
      font-size: 1.3rem;
      font-weight: 700;
      color: #f1f5f9;
      margin-bottom: 12px;
      line-height: 1.4;
    }
    .popup-card p {
      color: #94a3b8;
      font-size: 0.92rem;
      line-height: 1.7;
      margin: 0 0 24px;
    }
    .popup-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: linear-gradient(90deg, #0ea5e9, #38bdf8);
      color: #0f172a;
      padding: 11px 22px;
      border-radius: 10px;
      font-weight: 700;
      font-size: 0.9rem;
      text-decoration: none;
      transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s;
      box-shadow: 0 4px 16px rgba(56,189,248,0.25);
    }
    .popup-link:hover {
      opacity: 0.9;
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(56,189,248,0.35);
      text-decoration: none;
      color: #0f172a;
    }
    @media (max-width: 500px) {
      .popup-card { padding: 36px 24px 28px; }
    }