/* ================= Design Tokens ================= */
    :root{
      --container: 1200px;
      --radius: 12px;

      /* Cores base (modo escuro do print) */
      --bg-start: #0b1220;     /* topo */
      --bg-end:   #0e1628;     /* base */
      --text: #e6edf6;         /* texto principal */
      --muted: #8b9db7;        /* texto secundário */
      --muted-strong: #a8b3c7; /* título "Desenvolvedora Fullstack" */
      --primary-1: #7c3aed;    /* roxo */
      --primary-2: #a855f7;    /* roxo claro */
      --accent: #ec4899;       /* rosa (Olá, eu sou) */
      --border: rgba(148, 163, 184, .18);

      --card: rgba(255,255,255,.04);
      --shadow-lg: 0 20px 60px rgba(0,0,0,.45);
      --glow: 0 16px 40px rgba(168, 85, 247, .45);
    }

    html,body{height:100%}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
      color: var(--text);
      background-color: #0b1220;
      min-height:100%;
    }
    .container{max-width:var(--container); margin-inline:auto; padding-inline:24px}

    /* ================= Navbar ================= */
    .nav{
      position:fixed; inset:0 0 auto 0; height:64px; z-index:50;
      display:flex; align-items:center;
      background: rgba(10,16,28,.40);
      backdrop-filter: blur(10px) saturate(140%);
      -webkit-backdrop-filter: blur(10px) saturate(140%);
    }
    .nav-inner{display:flex; align-items:center; justify-content:space-between; width:100%}
    .brand{
      color:#cbd5e1; font-weight:700; letter-spacing:.3px; font-size:14px;
      opacity:.0; pointer-events:none; 
    }

    .links{display:flex; gap:28px; align-items:center}
    .link{
      color:#9fb0c9; font-weight:600; font-size:14px; text-decoration:none;
      transition:color .2s ease, opacity .2s ease;
    }
    .link:hover{ color:#d0d9e6 }

    .btn{
      display:inline-flex; align-items:center; justify-content:center; gap:10px;
      padding:10px 16px; border-radius: 999px; font-weight:700; font-size:14px;
      border:1px solid transparent; cursor:pointer; text-decoration:none;
      transition: filter .2s ease, transform .06s ease;
    }
    .btn:active{ transform: translateY(1px); }

    .btn-gradient{
      color:#fff;
      background-image: linear-gradient(135deg, var(--primary-1), var(--primary-2));
      box-shadow: var(--glow);
    }
    .btn-gradient:hover{ filter: brightness(1.06); }

    /* ================= Hero ================= */
    .hero{
      display:flex; align-items:center; justify-content:center;
      text-align:center; min-height: calc(100svh - 64px);
      padding-top:64px; /* compensar navbar */
      position: relative;
      min-height: calc(100vh - 64px);
    }

    .scroll-down{
    position: absolute;
    bottom: 30px; /* distância da borda inferior */
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    }

    .kicker{
      color: var(--accent);
      font-weight:700; font-size:14px; letter-spacing:.6px;
      margin-bottom:18px;
    }
    .title{
      font-size: clamp(40px, 6vw, 72px);
      font-weight: 700; line-height:1.05; margin:0 0 8px;
      background: linear-gradient(90deg, #c4b5fd, #a78bfa);
      -webkit-background-clip:text; background-clip:text; color: transparent;
    }
    .subtitle{
      margin:0 auto 22px;
      color: var(--muted-strong);
      font-size: clamp(18px, 2.8vw, 28px);
      font-weight: 700;
      max-width: 900px;
    }
    .lead{
      margin:0 auto 28px;
      color: var(--muted);
      font-size: clamp(15px, 2.2vw, 18px);
      line-height:1.7;
      max-width: 820px;
    }

    .cta{ display:flex; gap:14px; justify-content:center; margin-top:8px; flex-wrap:wrap; }
    .btn-outline{
      color:#d3d9e4;
      border:1px solid #263246;
      background: rgba(255,255,255,.02);
    }
    .btn-outline:hover{ border-color:#3a4a65; filter:brightness(1.05); }

    /* ================= Ícones sociais ================= */
    .socials{ display:flex; gap:14px; justify-content:center; margin-top:26px; }
    .social{
      width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
      border-radius:50%; background: rgba(255,255,255,.04);
      border:1px solid var(--border); color:#d9e1ee; text-decoration:none;
      transition: transform .06s ease, filter .2s ease, background .2s ease;
    }
    .social:hover {
        background: linear-gradient(135deg, #7c3aed, #a855f7); /* gradiente roxo */
        color: white;
        border-color: transparent;
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(168, 85, 247, 0.4);
        }
    .social:hover{ filter: brightness(1.1); background: rgba(255,255,255,.06); }
    .icon{ width:20px; height:20px; display:block; }

    /* ================= Seta para baixo ================= */
    .scroll-down{
      display:inline-flex; align-items:center; justify-content:center;
      width:28px; height:28px; margin:34px auto 0; color:var(--primary-2); opacity:.9;
      animation: float 2.4s ease-in-out infinite;
    }
    @keyframes float{
      0%,100%{ transform: translateY(0) }
      50%{ transform: translateY(6px) }
    }

    #particles-js {
  position: relative;        /* importante para posicionar o canvas dentro */
  isolation: isolate;        /* garante z-index independente do restante */
}

/* O canvas criado pelo particles.js fica fixo atrás do conteúdo */
#particles-js > canvas {
  position: absolute !important;
  inset: 0;                  /* top:0 right:0 bottom:0 left:0 */
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;     /* canvas atrás */
}


    /* ================= Responsividade ================= */
    @media (max-width: 820px){
      .links{ gap:18px }
      .link{ font-size:13px }
      .btn{ padding:9px 14px; font-size:13px }
    }
    @media (max-width: 640px){
      .subtitle{ max-width: 92% }
      .lead{ max-width: 92% }
      .footer{ font-size: 12px }
    }