:root {
      --accent:    #6CA39A;
      --accent-lt: #8bbdb5;
      --accent-dk: #4e7f78;
      --bg:        #303030;
      --bg-2:      #272727;
      --bg-3:      #1e1e1e;
    }

    /* ── Base ── */
    html { scroll-behavior: smooth; }
    body { background-color: var(--bg); color: #e8e4dd; font-family: 'DM Sans', sans-serif; }
    h1, h2, h3, .font-display { font-family: 'Syne', sans-serif; }

    /* ── Utilitários de cor custom ── */
    .text-accent   { color: var(--accent) !important; }
    .text-accent-lt{ color: var(--accent-lt) !important; }
    .bg-2          { background-color: var(--bg-2); }
    .bg-3          { background-color: var(--bg-3); }
    .border-accent { border-color: var(--accent) !important; }

    /* ── Navbar blur ── */
    .navbar { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }

    /* ── Anel giratório da foto ── */
    .photo-ring {
      width: 220px; height: 220px;
      border: 2px dashed var(--accent-dk);
      border-radius: 50%;
      animation: spin 22s linear infinite;
      opacity: .5;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* ── Foto hover ── */
    .about-photo { transition: transform .4s, box-shadow .4s; }
    .about-photo:hover { transform: scale(1.05); box-shadow: 0 0 36px rgba(108,163,154,.35); }

    /* ── Skill pill hover ── */
    .skill-pill { transition: transform .2s, border-color .25s, background-color .25s; }
    .skill-pill:hover { transform: translateX(5px); border-color: var(--accent) !important; background-color: rgba(108,163,154,.1) !important; }

    /* ── Profile card hover ── */
    .profile-card { transition: transform .3s, box-shadow .3s, border-color .3s; }
    .profile-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,.35), 0 0 28px rgba(108,163,154,.2); border-color: var(--accent) !important; }
    .card-icon { transition: transform .3s; display: inline-block; }
    .profile-card:hover .card-icon { transform: scale(1.15); }

    /* ── Footer ícones hover ── */
    .footer-social { transition: color .2s, transform .2s; }
    .footer-social:hover { color: var(--accent) !important; transform: translateY(-3px); }

    /* ── Botões hover ── */
    .btn-main:hover   { opacity: .85; transform: translateY(-2px); }
    .btn-ghost:hover  { background-color: rgba(108,163,154,.12) !important; transform: translateY(-2px); }
    .btn-main, .btn-ghost { transition: opacity .2s, transform .2s, background-color .2s; }

    /* ── Nav link active ── */
    .nav-link { transition: color .2s, background-color .2s; }
    .nav-link:hover { color: var(--accent) !important; background-color: rgba(108,163,154,.08); }