:root {
    --bg-color: #0d0d0d;
    --card-color: #141414;
    --primary-color: #3b82f6;
    --primary-glow: rgba(59, 130, 246, 0.15);
    --primary-dim: rgba(59, 130, 246, 0.08);
    --text-main: #f0f4ff;
    --text-dim: #8896aa;
    --border: rgba(59, 130, 246, 0.12);
    --font-family: 'Plus Jakarta Sans', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; scroll-behavior: smooth; }

body {
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: var(--font-family);
    line-height: 1.6;
    overflow-x: hidden;
}

#bg-canvas {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none; z-index: 0;
}

header, main, footer { position: relative; z-index: 1; }

.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

/* ── KEYFRAMES ── */
@keyframes fadeInDown  { from { opacity:0; transform:translateY(-30px) } to { opacity:1; transform:translateY(0) } }
@keyframes fadeInUp    { from { opacity:0; transform:translateY(40px)  } to { opacity:1; transform:translateY(0) } }
@keyframes fadeInLeft  { from { opacity:0; transform:translateX(-50px) } to { opacity:1; transform:translateX(0) } }
@keyframes fadeInRight { from { opacity:0; transform:translateX(50px)  } to { opacity:1; transform:translateX(0) } }
@keyframes scaleIn     { from { opacity:0; transform:scale(0.85)       } to { opacity:1; transform:scale(1)     } }
@keyframes floatY      { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-12px) } }
@keyframes pulseDot    { 0%,100%{ opacity:1; transform:scale(1) } 50%{ opacity:.5; transform:scale(1.4) } }
@keyframes pulseRing   {
    0%   { box-shadow: 0 0 0 0 rgba(59,130,246,0.4); }
    70%  { box-shadow: 0 0 0 18px rgba(59,130,246,0); }
    100% { box-shadow: 0 0 0 0 rgba(59,130,246,0); }
}
@keyframes shimmer {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}
@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@keyframes borderGlow {
    0%,100% { border-color: rgba(59,130,246,0.12); }
    50%      { border-color: rgba(59,130,246,0.4);  }
}

/* ── HEADER ── */
header { padding: 30px 0; animation: fadeInDown 0.7s ease both; }
nav { display:flex; justify-content:space-between; align-items:center; }
.logo { font-size:1.5rem; font-weight:800; transition:transform .3s; }
.logo:hover { transform:scale(1.05); }
.logo span { color:var(--primary-color); }
.nav-links { display:flex; list-style:none; gap:30px; }
.nav-links a { text-decoration:none; color:var(--text-dim); transition:color .3s, transform .3s; display:inline-block; }
.nav-links a:hover, .nav-links a.active { color:var(--primary-color); transform:translateY(-2px); }

/* ── BADGE ── */
.available-badge {
    display:inline-flex; align-items:center; gap:8px;
    background:rgba(34,197,94,.08); border:1px solid rgba(34,197,94,.25);
    color:#4ade80; padding:6px 14px; border-radius:20px;
    font-size:.8rem; font-weight:600; margin-bottom:20px;
    animation:fadeInLeft .5s ease .1s both;
}
.pulse-dot { width:8px; height:8px; background:#4ade80; border-radius:50%; animation:pulseDot 1.5s infinite; }

/* ── HERO ── */
.hero { display:flex; align-items:center; justify-content:space-between; padding:60px 0; min-height:70vh; }
.hero-content { max-width:550px; }
.greeting { color:var(--primary-color); font-weight:600; letter-spacing:2px; font-size:.8rem; display:block; animation:fadeInLeft .6s ease .2s both; }

.name {
    font-size:4rem; font-weight:800; line-height:1.1; margin:10px 0;
    background: linear-gradient(90deg, var(--text-main) 0%, var(--text-main) 35%, #93c5fd 50%, var(--text-main) 65%, var(--text-main) 100%);
    background-size: 200% auto;
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    animation: fadeInLeft .6s ease .35s both, shimmer 5s linear 1.5s infinite;
}
.role        { font-size:2rem; color:var(--text-dim); margin-bottom:25px; animation:fadeInLeft .6s ease .5s both; }
.description { color:var(--text-dim); font-size:1.1rem; margin-bottom:40px; animation:fadeInLeft .6s ease .65s both; }
.description strong { color:var(--primary-color); }
.hero-btns   { display:flex; gap:15px; margin-bottom:30px; animation:fadeInUp .6s ease .8s both; }
.social-links { display:flex; gap:20px; animation:fadeInUp .6s ease .95s both; }

/* ── BOTÕES ── */
.btn { padding:14px 28px; border-radius:8px; text-decoration:none; font-weight:600; transition:transform .3s, box-shadow .3s; position:relative; overflow:hidden; }
.btn::after { content:''; position:absolute; inset:0; background:rgba(255,255,255,.06); opacity:0; transition:opacity .3s; }
.btn:hover::after { opacity:1; }
.btn-primary { background:var(--primary-color); color:#fff; border:1px solid var(--primary-color); }
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 10px 30px rgba(59,130,246,.45); }
.btn-outline { border:1px solid var(--text-dim); color:var(--text-main); }
.btn-outline:hover { border-color:var(--primary-color); color:var(--primary-color); transform:translateY(-3px); box-shadow:0 10px 25px var(--primary-glow); }

/* ── SOCIAL LINKS COM CORES ── */
.social-links a { color:var(--text-dim); font-size:1.6rem; transition:color .3s, transform .35s cubic-bezier(.34,1.56,.64,1); }
.social-links a:hover { transform:translateY(-7px) scale(1.15); }

/* Cores específicas no hover */
.social-links a[title="GitHub"]:hover { color: #ffffff !important; filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3)); }
.social-links a[title="LinkedIn"]:hover { color: #0077b5 !important; filter: drop-shadow(0 0 8px rgba(0, 119, 181, 0.4)); }
.social-links a[title="WhatsApp"]:hover, .social-links a.whatsapp-link:hover { color: #25d366 !important; filter: drop-shadow(0 0 8px rgba(37, 211, 102, 0.4)); }

/* ── FOTO ── */
.hero-visual { animation:fadeInRight .8s ease .4s both; }

.photo-wrapper {
    position:relative;
    width:380px; height:380px;
    border-radius:50%;
    overflow:hidden;
    border:3px solid rgba(59,130,246,0.3);
    box-shadow: 0 20px 50px rgba(0,0,0,.6), 0 0 40px rgba(59,130,246,.08);
    animation: floatY 5s ease-in-out 1.5s infinite, pulseRing 3s ease 2s infinite;
    transition: box-shadow .4s;
}
.photo-wrapper:hover {
    box-shadow: 0 25px 60px rgba(59,130,246,.2), 0 0 0 6px rgba(59,130,246,.1);
}
.photo-wrapper img {
    width:100%; height:100%;
    object-fit:cover;
    transition:transform .5s ease;
}
.photo-wrapper:hover img { transform:scale(1.05); }

.glow-ring {
    position:absolute; width:100%; height:100%;
    background:radial-gradient(circle, rgba(59,130,246,.1), transparent 70%);
    z-index:1; pointer-events:none;
}

/* ── MARQUEE ── */
.marquee-wrapper {
    border-top:1px solid rgba(255,255,255,.05);
    border-bottom:1px solid rgba(255,255,255,.05);
    padding:18px 0; overflow:hidden;
    background:rgba(59,130,246,.02);
}
.marquee-track {
    display:flex; gap:50px; width:max-content;
    animation:marquee 22s linear infinite;
    white-space:nowrap;
}
.marquee-track span {
    font-size:.9rem; font-weight:600; color:var(--text-dim);
    display:flex; align-items:center; gap:8px; transition:color .3s;
}
.marquee-track span:hover { color:var(--primary-color); }
.marquee-track i { color:var(--primary-color); }

/* ── MANIFESTO ── */
.manifesto-section { padding:100px 0; }
.manifesto-card {
    position:relative; background:var(--card-color);
    border:1px solid var(--border); border-radius:24px; padding:60px; overflow:hidden;
    opacity:0; transform:translateY(40px); transition:opacity .6s ease, transform .6s ease;
}
.manifesto-card.visible { opacity:1; transform:translateY(0); }
.manifesto-card::before {
    content:''; position:absolute; left:0; top:0;
    width:4px; height:100%;
    background:linear-gradient(180deg, var(--primary-color), transparent);
    border-radius:24px 0 0 24px;
}
.manifesto-quote {
    position:absolute; top:10px; right:36px;
    font-size:9rem; font-weight:800; color:rgba(59,130,246,.06);
    line-height:1; font-family:Georgia,serif; pointer-events:none;
}
.manifesto-content h2 { font-size:2rem; font-weight:800; margin-bottom:24px; }
.manifesto-content h2 span { color:var(--primary-color); }
.manifesto-text { color:var(--text-dim); font-size:1.1rem; line-height:1.9; max-width:680px; margin-bottom:36px; }
.manifesto-text strong { color:var(--primary-color); }
.manifesto-pillars { display:flex; gap:16px; flex-wrap:wrap; }

/* ── TOOLTIP PILARES ── */
.pillar {
    display:flex; align-items:center; gap:8px;
    background:rgba(59,130,246,.07); border:1px solid rgba(59,130,246,.15);
    padding:10px 20px; border-radius:50px; font-size:.9rem; font-weight:600; color:var(--text-dim);
    transition:background .3s, color .3s, transform .3s;
    position: relative; cursor: help;
}
.pillar:hover { background:rgba(59,130,246,.15); color:var(--text-main); transform:translateY(-2px); }
.pillar i { color:var(--primary-color); }

.pillar::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 130%; left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: #1a1a1a; color: #fff;
    padding: 12px 16px; border-radius: 10px;
    font-size: 0.75rem; font-weight: 500;
    line-height: 1.4; width: 220px;
    text-align: center; opacity: 0;
    visibility: hidden; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    border: 1px solid var(--primary-color);
    pointer-events: none; z-index: 100;
}

.pillar::before {
    content: '';
    position: absolute;
    bottom: 115%; left: 50%;
    transform: translateX(-50%);
    border-width: 8px 8px 0 8px;
    border-style: solid;
    border-color: var(--primary-color) transparent transparent transparent;
    opacity: 0; visibility: hidden;
    transition: all 0.3s ease; z-index: 100;
}

.pillar:hover::after, .pillar:hover::before {
    opacity: 1; visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* ── SEÇÕES ── */
.services { padding:0 0 100px; }
.section-title {
    font-size:2.5rem; font-weight:800; margin-top:10px;
    opacity:0; transform:translateY(30px); transition:opacity .6s ease, transform .6s ease;
}
.section-title.visible { opacity:1; transform:translateY(0); }
.section-title span { color:var(--primary-color); }

/* ── CARDS DE SERVIÇO ── */
.services-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:30px; margin-top:40px; }
.service-card {
    background:var(--card-color); padding:40px; border-radius:16px;
    border:1px solid var(--border);
    transition:border-color .3s, transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
    opacity:0; transform:translateY(40px); position:relative; overflow:hidden;
}
.service-card::before { content:''; position:absolute; bottom:0; left:0; width:0; height:3px; background:var(--primary-color); transition:width .4s ease; }
.service-card:hover::before { width:100%; }
.service-card.visible { animation:fadeInUp .6s ease forwards; }
.service-card i { font-size:2.5rem; color:var(--primary-color); margin-bottom:20px; display:block; transition:transform .35s cubic-bezier(.34,1.56,.64,1); }
.service-card:hover { border-color:rgba(59,130,246,.4); transform:translateY(-8px); box-shadow:0 20px 40px rgba(0,0,0,.4), 0 0 30px var(--primary-glow); }
.service-card:hover i { transform:scale(1.2) rotate(-5deg); }

/* ── HABILIDADES ── */
.skills-section { padding-bottom:100px; }
.skills-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:30px; margin-top:40px; }
.skill-item { opacity:0; transform:translateY(20px); transition:opacity .5s, transform .5s; }
.skill-item.visible { opacity:1; transform:translateY(0); }
.skill-header { display:flex; justify-content:space-between; margin-bottom:10px; font-weight:600; font-size:.95rem; }
.skill-header i { color:var(--primary-color); margin-right:6px; }
.skill-pct { color:var(--primary-color); font-weight:700; }
.skill-bar { background:rgba(255,255,255,.05); border-radius:50px; height:7px; overflow:hidden; }
.skill-fill { height:100%; background:linear-gradient(90deg, var(--primary-color), #93c5fd); border-radius:50px; width:0; transition:width 1.2s cubic-bezier(.4,0,.2,1); }

/* ── FERRAMENTAS ── */
.tools-section { padding-bottom:100px; }
.tools-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:40px; }
.tool-card {
    background:var(--card-color); border:1px solid var(--border); border-radius:12px;
    padding:24px 16px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px;
    transition:border-color .3s, transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
    opacity:0; transform:translateY(20px);
}
.tool-card.visible { animation:fadeInUp .5s ease forwards; }
.tool-card:hover { border-color:var(--primary-color); transform:translateY(-6px); box-shadow:0 12px 30px var(--primary-glow); }
.tool-card i { font-size:1.8rem; color:var(--primary-color); }
.tool-card span { font-size:.85rem; font-weight:600; color:var(--text-dim); }

/* ── PROCESSO ── */
.process-section { padding-bottom:100px; }
.process-steps { display:flex; align-items:flex-start; gap:10px; margin-top:50px; flex-wrap:wrap; }
.process-step {
    flex:1; min-width:200px; background:var(--card-color); border:1px solid var(--border);
    border-radius:16px; padding:30px 24px;
    transition:border-color .3s, transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
    opacity:0; transform:translateY(30px);
}
.process-step.visible { animation:fadeInUp .6s ease forwards; }
.process-step:hover { border-color:rgba(59,130,246,.4); transform:translateY(-6px); box-shadow:0 15px 35px var(--primary-glow); }
.step-number { font-size:3rem; font-weight:800; color:rgba(59,130,246,.12); line-height:1; margin-bottom:16px; transition:color .3s; }
.process-step:hover .step-number { color:rgba(59,130,246,.3); }
.step-content i { font-size:1.6rem; color:var(--primary-color); margin-bottom:12px; display:block; }
.step-content h3 { font-size:1.1rem; margin-bottom:8px; }
.step-content p  { color:var(--text-dim); font-size:.9rem; line-height:1.6; }
.process-connector { display:flex; align-items:center; justify-content:center; color:rgba(59,130,246,.3); font-size:1.2rem; padding-top:60px; flex-shrink:0; }

/* ── SOBRE (ATUALIZADO PARA ÍCONES) ── */
.about-summary { padding-bottom:100px; }
.about-grid { display:flex; justify-content:space-between; gap:50px; align-items: center; }
.about-text { opacity:0; transform:translateX(-40px); transition:opacity .7s ease, transform .7s ease; }
.about-text.visible { opacity:1; transform:translateX(0); }
.about-list { list-style:none; margin-top:25px; }
.about-list li { margin-bottom:12px; color:var(--text-dim); display:flex; align-items:center; gap:10px; transition:color .3s, transform .3s; }
.about-list li:hover { color:var(--text-main); transform:translateX(6px); }
.about-list i { color:var(--primary-color); font-size:.8rem; }

/* Novo grid de ícones no lugar das estatísticas */
.about-stats { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    gap: 20px; 
}

.stat-card {
    background:var(--card-color); 
    padding:25px; 
    border-radius:12px; 
    text-align:center; 
    min-width:140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    border:1px solid var(--border);
    transition:border-color .3s, transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
    opacity:0; transform:scale(.85);
}

.stat-card i {
    font-size: 2.8rem;
    color: var(--primary-color);
}

.stat-card.visible { animation:scaleIn .5s ease forwards, borderGlow 4s ease .5s infinite; }
.stat-card:hover { transform:scale(1.06); box-shadow:0 10px 30px var(--primary-glow); border-color:var(--primary-color); }

/* ── CTA ── */
.cta-section {
    padding:100px 0; text-align:center;
    border-top:1px solid rgba(255,255,255,.04);
    background:radial-gradient(ellipse 60% 50% at 50% 100%, rgba(59,130,246,.05), transparent);
}
.cta-section h2 { font-size:2.5rem; margin-bottom:20px; opacity:0; transform:translateY(30px); transition:opacity .6s ease, transform .6s ease; }
.cta-section h2.visible { opacity:1; transform:translateY(0); }
.cta-section p { color:var(--text-dim); opacity:0; transform:translateY(20px); transition:opacity .6s ease .15s, transform .6s ease .15s; margin-bottom:30px; }
.cta-section p.visible { opacity:1; transform:translateY(0); }

/* ── PROJETOS ── */
.projects-hero { text-align:center; padding:60px 0; animation:fadeInDown .7s ease .2s both; }
.filter-btns { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:36px; }
.filter-btn {
    background:var(--card-color); border:1px solid var(--border);
    color:var(--text-dim); padding:8px 20px; border-radius:50px;
    font-family:var(--font-family); font-size:.85rem; font-weight:600;
    cursor:pointer; transition:all .3s;
}
.filter-btn:hover { border-color:var(--primary-color); color:var(--primary-color); transform:translateY(-2px); }
.filter-btn.active { background:var(--primary-color); border-color:var(--primary-color); color:#fff; }

.projects-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:25px; padding-bottom:80px; margin-top:40px; }
.project-card {
    background:var(--card-color); padding:30px; border-radius:16px; border:1px solid var(--border);
    transition:transform .35s cubic-bezier(.34,1.56,.64,1), border-color .3s, box-shadow .3s;
    display:flex; flex-direction:column; opacity:0; transform:translateY(40px); position:relative; overflow:hidden;
}
.project-card::before { content:''; position:absolute; top:0; left:0; width:100%; height:3px; background:linear-gradient(90deg,var(--primary-color),transparent); transform:scaleX(0); transform-origin:left; transition:transform .4s; }
.project-card:hover::before { transform:scaleX(1); }
.project-card.visible { animation:fadeInUp .6s ease forwards; }
.project-card:hover { transform:translateY(-10px); border-color:rgba(59,130,246,.35); box-shadow:0 20px 40px rgba(0,0,0,.4), 0 0 30px var(--primary-glow); }
.project-header { display:flex; justify-content:space-between; margin-bottom:20px; font-size:1.5rem; color:var(--primary-color); }
.project-links a { color:var(--text-dim); margin-left:10px; font-size:1.2rem; transition:color .3s, transform .3s; display:inline-block; }
.project-links a:hover { color:var(--primary-color); transform:scale(1.2); }
.project-tags { display:flex; gap:10px; margin-top:auto; padding-top:20px; flex-wrap:wrap; }
.project-tags span { background:rgba(59,130,246,.08); color:var(--primary-color); padding:4px 12px; border-radius:20px; font-size:.75rem; font-weight:700; border:1px solid rgba(59,130,246,.2); transition:background .3s; }
.project-tags span:hover { background:rgba(59,130,246,.18); }

/* ── FOOTER ── */
footer { padding:40px 0; text-align:center; border-top:1px solid rgba(255,255,255,.04); color:var(--text-dim); font-size:.9rem; }

/* ── RESPONSIVO ── */
@media (max-width: 768px) {
    .hero { flex-direction:column-reverse; text-align:center; padding:40px 0; }
    .hero-btns, .social-links { justify-content:center; }
    .photo-wrapper { width:260px; height:260px; margin-bottom:20px; }
    .name { font-size:2.8rem; }
    .role { font-size:1.5rem; }
    .manifesto-card { padding:30px; }
    .manifesto-pillars { flex-direction:column; gap:10px; }
    .pillar::after, .pillar::before { display: none; }
    .skills-grid { grid-template-columns:1fr; }
    .tools-grid { grid-template-columns:repeat(2,1fr); }
    .process-steps { flex-direction:column; }
    .process-connector { padding:0; transform:rotate(90deg); }
    .about-grid { flex-direction:column; text-align:center; }
    .about-stats { justify-content:center; }
    .nav-links { display:none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}