*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#070b16;color:#f4f6fb;font-family:Inter,system-ui,sans-serif;line-height:1.6;overflow-x:hidden}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}.container{width:min(1180px,calc(100% - 40px));margin:auto}.section{padding:88px 0;position:relative}.section-alt{background:linear-gradient(180deg,rgba(12,19,37,.78),rgba(8,13,26,.92));border-top:1px solid rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.04)}.ambient{position:fixed;border-radius:999px;filter:blur(90px);opacity:.14;pointer-events:none;z-index:-1}.ambient-1{width:420px;height:420px;background:#6c4cff;top:-130px;right:-110px}.ambient-2{width:360px;height:360px;background:#2c8cff;bottom:10%;left:-120px}.site-header{position:sticky;top:0;z-index:20;background:rgba(5,9,18,.78);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.07)}.nav{height:74px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px}.brand-icon{color:#8b63ff;font-size:24px}.nav-links{display:flex;gap:30px;font-size:14px;color:#c8cde0}.nav-links a{position:relative;transition:.2s}.nav-links a:hover{color:#fff}.nav-links a:after{content:"";position:absolute;left:0;bottom:-9px;width:0;height:2px;background:#7b5cff;transition:.2s}.nav-links a:hover:after{width:100%}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;border-radius:7px;font-weight:600;font-size:14px;transition:.2s;border:1px solid transparent}.btn:hover{transform:translateY(-2px)}.btn-primary{background:linear-gradient(135deg,#5d62ff,#9b4dff);box-shadow:0 10px 30px rgba(111,81,255,.22)}.btn-outline{border-color:#707991;background:rgba(10,15,28,.35)}.btn-outline:hover{border-color:#9a83ff;background:rgba(124,92,255,.08)}.btn.small{min-height:40px}.hero{padding-top:78px;min-height:700px;display:flex;align-items:center}.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:46px}.eyebrow{display:inline-block;color:#a689ff;font-size:12px;font-weight:700;letter-spacing:.08em;margin-bottom:18px}.hero h1{font-size:clamp(42px,5.1vw,68px);line-height:1.06;margin:0 0 18px;letter-spacing:-.04em;max-width:760px}.hero h1 span{color:#745cff}.lead{font-size:17px;color:#aeb6cb;max-width:650px}.hero-actions{display:flex;gap:14px;margin:30px 0 34px}.tech-row{border-top:1px solid rgba(255,255,255,.07);padding-top:22px}.tech-title{font-size:11px;color:#8c94aa;letter-spacing:.08em}.tech-icons{display:flex;align-items:center;flex-wrap:wrap;gap:22px;margin-top:17px}.tech-logo{width:34px;height:34px;display:grid;place-items:center;position:relative;transition:.25s;filter:drop-shadow(0 0 10px rgba(118,92,255,.12))}.tech-logo:hover{transform:translateY(-3px) scale(1.08);filter:drop-shadow(0 0 14px rgba(118,92,255,.38))}.tech-logo img{width:32px;height:32px;object-fit:contain}.tech-logo svg{width:34px;height:34px}.sql-logo svg{fill:none;stroke:#66cfff;stroke-width:3.1;stroke-linecap:round;stroke-linejoin:round}.ibm-logo{width:48px}.ibm-logo svg{width:48px;height:34px;fill:#b7c5e8}.hero-visual{position:relative;min-height:510px;isolation:isolate}.portrait-orbit{position:relative;height:510px;display:flex;align-items:flex-end;justify-content:center;overflow:visible}.hero-image-fade{position:absolute;left:7%;right:2%;bottom:-2px;height:140px;z-index:4;pointer-events:none;background:linear-gradient(to bottom,rgba(7,11,22,0),#070b16 88%)}.glow-circle{position:absolute;width:390px;height:390px;background:radial-gradient(circle at 50% 40%,#784dff 0%,#6635db 42%,rgba(72,38,165,.15) 70%,transparent 76%);border-radius:50%;top:10px;left:50%;transform:translateX(-50%);box-shadow:0 0 100px rgba(115,66,255,.32);z-index:0}.portrait{position:relative;z-index:2;max-height:520px;width:auto;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 22px 38px rgba(0,0,0,.62));border-radius:0;-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 82%,rgba(0,0,0,.94) 89%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 82%,rgba(0,0,0,.94) 89%,transparent 100%)}.code-card{position:absolute;z-index:5;right:-20px;top:165px;width:245px;background:rgba(9,13,25,.92);border:1px solid #303955;border-radius:9px;box-shadow:0 20px 45px rgba(0,0,0,.4);overflow:hidden}.code-head{height:42px;border-bottom:1px solid #283149;display:flex;align-items:center;justify-content:space-between;padding:0 14px;color:#aeb7ce;font:12px "JetBrains Mono",monospace}.status-dot{width:8px;height:8px;border-radius:50%;background:#52eb79}.code-card pre{margin:0;padding:18px;color:#ccd3e4;font:12px/1.75 "JetBrains Mono",monospace;white-space:pre-wrap}.kw{color:#d174ff}.bool{color:#52d6ff}.about-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:80px;align-items:center}.about-grid h2,.contact-grid h2{font-size:34px;line-height:1.25;margin:0 0 18px}.about-grid p,.contact-grid p{color:#aeb6cb}.stats{display:grid;grid-template-columns:1fr 1fr;gap:14px}.stat-card{display:flex;align-items:center;gap:16px;padding:24px;border:1px solid #263149;background:linear-gradient(160deg,#10172b,#0a1020);border-radius:10px}.stat-icon{width:50px;height:50px;display:grid;place-items:center;border-radius:9px;background:linear-gradient(135deg,#554dff,#8c43ff);font-weight:800}.stat-card strong{font-size:24px;display:block}.stat-card span{font-size:12px;color:#9ea7bc}.section-heading{text-align:center;margin-bottom:42px}.section-heading .eyebrow{margin-bottom:5px}.section-heading h2{font-size:34px;margin:0}.skills-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 48px}.skill-top{display:flex;justify-content:space-between;font-size:14px;margin-bottom:10px}.skill-top span:last-child{color:#aeb6cb}.bar{height:6px;background:#1b2337;border-radius:99px;overflow:hidden}.bar i{display:block;height:100%;width:var(--level);background:linear-gradient(90deg,#775cff,#9d5cff);border-radius:inherit}.projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.project-card{background:#0b1120;border:1px solid #26314a;border-radius:10px;overflow:hidden;transition:.25s}.project-card:hover{transform:translateY(-7px);border-color:#6d58c8;box-shadow:0 20px 45px rgba(0,0,0,.3)}.project-cover{height:185px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}.project-cover:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 60%,rgba(68,139,255,.36),transparent 55%)}.project-cover.postgres{background:linear-gradient(135deg,#06223d,#0c355a)}.project-cover.cloud{background:linear-gradient(135deg,#073739,#0c565d)}.project-cover.informix{background:linear-gradient(135deg,#09182d,#082b53)}.project-number{position:absolute;top:12px;left:12px;background:#160f37;color:#b487ff;border:1px solid rgba(150,109,255,.25);padding:4px 10px;border-radius:6px;font-size:12px}.db-art{font-size:54px;font-weight:800;z-index:1;text-shadow:0 0 25px rgba(94,162,255,.45)}.project-cover strong{z-index:1;margin-top:5px}.project-body{padding:22px}.project-body h3{font-size:18px;margin:0 0 9px}.project-body p{color:#a9b0c2;font-size:13px;min-height:84px}.project-body span{color:#a875ff;font-size:13px}.contact-section{padding-bottom:65px}.contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:70px;align-items:center}.contact-card{padding:28px;background:#0d1426;border:1px solid #26314a;border-radius:10px}.contact-card h3{margin-top:0}.contact-card a{display:flex;gap:12px;align-items:center;padding:11px 0;color:#cbd1df;border-bottom:1px solid rgba(255,255,255,.06)}.contact-card a:last-child{border-bottom:0}.contact-card a span{width:26px;color:#8b6cff;font-weight:700}footer{border-top:1px solid rgba(255,255,255,.07);padding:25px 0;color:#7f889f;font-size:12px}.footer-inner{display:flex;justify-content:space-between}.menu-btn{display:none;background:transparent;border:0;padding:8px}.menu-btn span{display:block;width:24px;height:2px;background:#fff;margin:5px 0}.reveal{opacity:0;transform:translateY(22px);transition:.65s ease}.reveal.visible{opacity:1;transform:none}@media (max-width:980px){.nav-links{position:absolute;top:74px;left:0;right:0;background:#070b16;border-bottom:1px solid #222a40;display:none;flex-direction:column;gap:0;padding:12px 20px}.nav-links.open{display:flex}.nav-links a{padding:13px 0}.nav-cta{display:none}.menu-btn{display:block}.hero-grid,.about-grid,.contact-grid{grid-template-columns:1fr}.hero{padding-top:50px}.hero-visual{order:-1;min-height:450px}.portrait-orbit{height:450px}.portrait{max-height:440px}.code-card{right:4%;top:135px}.about-grid{gap:42px}.skills-grid{grid-template-columns:1fr 1fr}.projects-grid{grid-template-columns:1fr}.project-body p{min-height:0}}@media (max-width:640px){.container{width:min(100% - 28px,1180px)}.section{padding:68px 0}.hero h1{font-size:42px}.hero-visual{min-height:390px}.portrait-orbit{height:390px}.portrait{max-height:380px}.glow-circle{width:290px;height:290px}.code-card{width:190px;right:-4px;top:185px}.code-card pre{font-size:9px;padding:12px}.hero-actions{flex-direction:column;align-items:stretch}.skills-grid,.stats{grid-template-columns:1fr}.footer-inner{flex-direction:column;gap:6px}.about-grid h2,.contact-grid h2,.section-heading h2{font-size:28px}}
/* ===== V3: retrato 3D integrado + botões sociais ===== */
.hero-visual{perspective:1200px;isolation:isolate}
.portrait-orbit{overflow:visible!important;transform-style:preserve-3d}
.portrait{
  max-height:545px!important;
  width:auto!important;
  border-radius:0!important;
  filter:drop-shadow(0 32px 44px rgba(0,0,0,.72)) drop-shadow(0 0 22px rgba(108,76,255,.22))!important;
  transform:translateZ(42px) rotateY(-2deg);
  -webkit-mask-image:none!important;
  mask-image:none!important;
}
.portrait-orbit::before{
  content:"";position:absolute;width:390px;height:390px;border-radius:50%;top:22px;left:50%;
  transform:translateX(-50%) translateZ(-20px);
  background:radial-gradient(circle at 38% 35%,rgba(162,115,255,.98),rgba(93,51,237,.8) 43%,rgba(51,31,139,.28) 66%,transparent 75%);
  box-shadow:0 0 75px rgba(112,74,255,.44),inset 0 0 42px rgba(255,255,255,.08);z-index:0
}
.portrait-orbit::after{
  content:"";position:absolute;left:12%;right:6%;bottom:0;height:3px;border-radius:99px;z-index:7;
  background:linear-gradient(90deg,transparent,#7557ff,#b76cff,#7557ff,transparent);
  box-shadow:0 0 22px #714cff,0 0 52px rgba(112,76,255,.7)
}
.glow-circle{display:none!important}
.hero-image-fade{z-index:5!important;height:92px!important;left:3%!important;right:0!important;background:linear-gradient(to bottom,transparent,#070b16 92%)!important}
.code-card{transform:translateZ(85px) rotateY(-5deg) rotateX(1deg);box-shadow:0 25px 70px rgba(0,0,0,.62),0 0 30px rgba(101,77,255,.13)!important}
.hero-depth-card{
  position:absolute;width:82px;height:82px;display:grid;place-items:center;border-radius:16px;
  border:1px solid rgba(143,119,255,.34);background:linear-gradient(145deg,rgba(27,34,63,.92),rgba(7,12,25,.9));
  box-shadow:0 20px 40px rgba(0,0,0,.44),inset 0 1px 0 rgba(255,255,255,.08),0 0 25px rgba(110,79,255,.2);
  backdrop-filter:blur(12px);z-index:8;animation:float3d 5s ease-in-out infinite
}
.hero-depth-card img{width:50px;height:50px;object-fit:contain}
.depth-postgres{left:4%;top:72px;transform:rotateY(18deg) rotateZ(-4deg)}
.depth-linux{right:3%;top:68px;transform:rotateY(-18deg) rotateZ(4deg);animation-delay:.8s}
.depth-git{right:0;bottom:48px;width:68px;height:68px;transform:rotateY(-16deg) rotateZ(8deg);animation-delay:1.5s}
.depth-git img{width:42px;height:42px}
@keyframes float3d{0%,100%{margin-top:0}50%{margin-top:-10px}}

.social-buttons{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0 20px}
.social-btn{
  min-height:62px;display:flex;align-items:center;gap:12px;padding:0 16px;border:1px solid #303b59;border-radius:12px;
  background:linear-gradient(145deg,#11182c,#0a1020);transition:.24s ease
}
.social-btn svg{width:27px;height:27px;flex:none}.social-btn span{font-weight:700}.social-btn b{margin-left:auto;font-weight:500;color:#9a81ff}
.social-btn:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.35)}
.social-btn.linkedin svg{color:#0a66c2}.social-btn.linkedin:hover{border-color:#0a66c2;box-shadow:0 12px 30px rgba(10,102,194,.14)}
.contact-line{display:flex!important;align-items:center;gap:12px;padding:12px 0!important;color:#cbd1df!important;border-bottom:1px solid rgba(255,255,255,.06)!important}
.contact-line:last-child{border-bottom:0!important}.contact-line span{width:26px;color:#8b6cff;font-weight:700}

@media(max-width:980px){
  .hero-depth-card{transform:scale(.88)}
  .depth-postgres{left:3%;top:55px}.depth-linux{right:3%;top:55px}
}
@media(max-width:640px){
  .portrait{max-height:400px!important}
  .hero-depth-card{width:58px;height:58px;border-radius:12px}.hero-depth-card img{width:34px;height:34px}
  .depth-postgres{left:0;top:70px}.depth-linux{right:0;top:74px}.depth-git{display:none}
  .social-buttons{grid-template-columns:1fr}
}

/* ===== V4: tecnologias + sociais somente por ícone ===== */
.tech-icons{display:flex;align-items:center;flex-wrap:wrap;gap:22px;margin-top:17px}
.tech-logo{width:36px;height:36px;display:grid;place-items:center;transition:.25s;filter:drop-shadow(0 0 10px rgba(118,92,255,.14))}
.tech-logo:hover{transform:translateY(-3px) scale(1.08);filter:drop-shadow(0 0 14px rgba(118,92,255,.38))}
.tech-logo img{width:34px;height:34px;object-fit:contain}
.tech-logo svg{width:36px;height:36px}
.sql-logo svg{fill:none;stroke:#66cfff;stroke-width:3.1;stroke-linecap:round;stroke-linejoin:round}
.github-tech img{filter:invert(1)}
.social-buttons{grid-template-columns:64px 64px!important;justify-content:start}
.social-btn{width:64px;min-height:60px;justify-content:center;padding:0!important}
.social-btn svg{width:30px;height:30px}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* ===== V5: ícones nas habilidades ===== */
.skill-name{
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-width:0;
  font-weight:500;
}
.skill-name img,
.skill-inline-icon{
  width:21px;
  height:21px;
  flex:0 0 21px;
  display:grid;
  place-items:center;
  object-fit:contain;
  filter:drop-shadow(0 0 7px rgba(118,92,255,.16));
}
.skill-name img.skill-icon-invert{filter:invert(1) drop-shadow(0 0 7px rgba(118,92,255,.16))}
.skill-inline-icon svg{width:21px;height:21px}
.sql-skill-icon svg{fill:none;stroke:#66cfff;stroke-width:3.1;stroke-linecap:round;stroke-linejoin:round}
.cloud-skill-icon svg{fill:none;stroke:#7aa7ff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:640px){.skill-name img,.skill-inline-icon{width:19px;height:19px;flex-basis:19px}.skill-inline-icon svg{width:19px;height:19px}}


/* ===== V6: hero com retrato funcional + cards ao redor ===== */
.hero-grid{align-items:center}
.hero-visual{position:relative;min-height:590px;display:flex;align-items:center;justify-content:center;perspective:1200px;isolation:isolate}
.hero-visual::before{content:"";position:absolute;inset:36px 44px 58px;background:
  radial-gradient(circle at 50% 46%,rgba(118,92,255,.28),transparent 32%),
  radial-gradient(circle at 50% 48%,rgba(64,86,255,.18),transparent 48%),
  linear-gradient(135deg,rgba(18,26,51,.55),rgba(7,11,22,0));
  border-radius:30px;pointer-events:none;z-index:0}
.hero-visual::after{content:"";position:absolute;width:430px;height:430px;border-radius:50%;left:50%;top:64px;transform:translateX(-50%);border:1px solid rgba(140,119,255,.22);box-shadow:0 0 0 34px rgba(124,92,255,.05),0 0 0 76px rgba(124,92,255,.03);z-index:0;pointer-events:none}
.portrait-orbit{position:relative;width:min(100%,580px);height:560px;display:flex;align-items:flex-end;justify-content:center;overflow:visible!important;transform-style:preserve-3d}
.portrait-orbit::before{top:42px!important;width:400px!important;height:400px!important}
.portrait{position:relative;z-index:5;max-height:530px!important;width:auto!important;transform:translateZ(40px)!important;filter:drop-shadow(0 28px 55px rgba(0,0,0,.62)) drop-shadow(0 0 18px rgba(108,76,255,.18))!important}
.code-card{right:0!important;top:95px!important;width:275px;z-index:9;border-color:rgba(125,111,255,.36)!important;background:rgba(10,14,28,.92)!important}
.code-card pre{font-size:11px!important;line-height:1.7!important}
.hero-depth-card{display:flex;flex-direction:column;justify-content:center;gap:4px;z-index:8}
.hero-depth-card img,.hero-depth-card svg{width:46px;height:46px;object-fit:contain}
.hero-depth-card small{font-size:11px;color:#d8def5;line-height:1}
.hero-depth-card strong{font-size:20px;line-height:1;color:#f4f6fb}
.hero-depth-card svg{fill:none;stroke:#70b7ff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.depth-postgres{left:4%;top:86px}
.depth-linux{left:16%;top:176px}
.depth-informix{left:2%;top:290px;width:96px;height:96px;align-items:flex-start;padding-left:16px}
.depth-github{right:7%;top:90px}
.depth-cloud{right:0;top:204px}
.depth-sql{right:8%;top:328px;width:82px;height:82px}
.depth-git{right:14%;bottom:34px}
.github-tech img,.depth-github img{filter:invert(1)}
.text-card strong{font-size:24px;letter-spacing:.03em}
.informix-card strong{font-size:24px;letter-spacing:.04em}
.informix-card small{font-size:13px}
.cloud-card small{margin-top:1px}

/* ===== V7: contato mais alinhado e centralizado ===== */
.contact-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:34px 28px}
.contact-card h3{margin-bottom:8px}
.contact-subtitle{margin:0 0 18px;color:#aeb6cb;max-width:320px}
.social-buttons-centered{display:flex!important;justify-content:center;align-items:center;gap:16px;width:100%;margin:8px 0 20px!important}
.social-buttons-centered .social-btn{width:72px;height:72px;min-height:72px;border-radius:18px;padding:0!important;justify-content:center;background:linear-gradient(145deg,#141c33,#0b1122);border:1px solid #33405f;box-shadow:0 14px 30px rgba(0,0,0,.22)}
.social-buttons-centered .social-btn.github svg{color:#ffffff}
.social-buttons-centered .social-btn.linkedin svg{color:#0a66c2}
.social-buttons-centered .social-btn:hover{transform:translateY(-4px) scale(1.02)}
.contact-list{width:100%;display:flex;flex-direction:column;gap:0;align-items:center}
.contact-line{justify-content:center!important;text-align:center;width:100%;max-width:360px;padding:14px 0!important}
.contact-line span{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(123,92,255,.14);color:#a78cff!important}

@media (max-width:980px){
  .hero-visual{min-height:520px}
  .portrait-orbit{height:500px;width:min(100%,520px)}
  .portrait{max-height:470px!important}
  .code-card{top:88px!important;right:10px!important;width:240px}
  .depth-postgres{left:6%;top:62px}
  .depth-linux{left:16%;top:126px}
  .depth-informix{left:2%;top:232px}
  .depth-github{right:8%;top:62px}
  .depth-cloud{right:2%;top:168px}
  .depth-sql{right:8%;top:268px}
  .depth-git{right:18%;bottom:32px}
}
@media (max-width:640px){
  .hero-visual{min-height:450px}
  .hero-visual::after{width:280px;height:280px;top:92px;box-shadow:0 0 0 22px rgba(124,92,255,.05),0 0 0 44px rgba(124,92,255,.03)}
  .portrait-orbit{height:430px;width:100%}
  .portrait{max-height:395px!important}
  .code-card{width:185px!important;top:145px!important;right:-2px!important}
  .code-card pre{font-size:9px!important}
  .hero-depth-card{width:58px;height:58px;border-radius:12px}
  .hero-depth-card img,.hero-depth-card svg{width:30px;height:30px}
  .hero-depth-card strong{font-size:13px}
  .hero-depth-card small{font-size:9px}
  .depth-postgres{left:0;top:88px}
  .depth-linux{left:8%;top:144px}
  .depth-informix{left:0;top:214px;width:72px;height:72px;padding-left:10px}
  .depth-github{right:0;top:88px}
  .depth-cloud{right:0;top:146px}
  .depth-sql{right:2%;top:224px;width:58px;height:58px}
  .depth-git{display:none}
}



/* ===== V9: hero limpa, rosto livre e icones flutuantes ao redor ===== */
.hero-visual{
  overflow:visible;
  isolation:isolate;
}

.portrait-orbit{
  z-index:5;
  position:relative;
}

.portrait{
  z-index:10 !important;
}

/* O card permanece fora da area do rosto e abaixo do retrato como protecao. */
.code-card{
  right:-36px !important;
  top:110px !important;
  width:215px !important;
  z-index:6 !important;
  transform:translateZ(24px) rotateY(-2deg) rotateX(.5deg) !important;
  border-color:rgba(125,111,255,.30) !important;
  background:rgba(10,14,28,.94) !important;
  box-shadow:0 20px 48px rgba(0,0,0,.48),0 0 24px rgba(101,77,255,.10) !important;
}

.code-card pre{
  padding:15px !important;
  font-size:10px !important;
  line-height:1.65 !important;
}

/* Cards decorativos ficam no perimetro e nunca acima do retrato. */
.hero-depth-card{
  width:68px;
  height:68px;
  border-radius:16px;
  z-index:2 !important;
  opacity:.88;
  pointer-events:none;
  align-items:center;
  justify-content:center;
  background:linear-gradient(145deg,rgba(18,24,45,.68),rgba(8,12,25,.56)) !important;
  border:1px solid rgba(126,109,255,.18) !important;
  box-shadow:0 10px 24px rgba(0,0,0,.24),0 0 20px rgba(92,76,255,.08) !important;
  backdrop-filter:blur(8px);
  animation-name:heroGentleFloat !important;
  animation-timing-function:ease-in-out !important;
  animation-iteration-count:infinite !important;
  will-change:translate;
}

.hero-depth-card img,
.hero-depth-card svg{
  width:34px;
  height:34px;
  object-fit:contain;
}

.depth-github img{filter:invert(1)}
.cloud-card svg{fill:none;stroke:#72b5ff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.sql-card svg{fill:none;stroke:#66cfff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

/* Posicoes externas: esquerda, topo e direita da silhueta. */
.depth-html{
  left:-2%;
  top:92px;
  transform:rotateY(10deg) rotateZ(-5deg);
  animation-duration:19s !important;
  animation-delay:-4s !important;
}
.depth-css{
  left:0;
  top:218px;
  transform:rotateY(8deg) rotateZ(-2deg);
  animation-duration:22s !important;
  animation-delay:-11s !important;
}
.depth-java{
  left:5%;
  bottom:62px;
  transform:rotateY(10deg) rotateZ(-4deg);
  animation-duration:24s !important;
  animation-delay:-7s !important;
}
.depth-github{
  left:24%;
  top:24px;
  transform:rotateY(7deg) rotateZ(-5deg);
  animation-duration:21s !important;
  animation-delay:-14s !important;
}
.depth-linux{
  right:12%;
  top:24px;
  transform:rotateY(-8deg) rotateZ(4deg);
  animation-duration:23s !important;
  animation-delay:-9s !important;
}
.depth-cloud{
  right:-4%;
  top:225px;
  transform:rotateY(-10deg) rotateZ(3deg);
  animation-duration:20s !important;
  animation-delay:-3s !important;
}
.depth-sql{
  right:-1%;
  bottom:116px;
  transform:rotateY(-8deg) rotateZ(5deg);
  animation-duration:25s !important;
  animation-delay:-17s !important;
}
.depth-git{
  right:17%;
  bottom:20px;
  transform:rotateY(-7deg) rotateZ(6deg);
  animation-duration:22.5s !important;
  animation-delay:-6s !important;
}

@keyframes heroGentleFloat{
  0%,100%{translate:0 0}
  25%{translate:2px -2px}
  50%{translate:0 -4px}
  75%{translate:-2px -2px}
}

@media (max-width:980px){
  .hero-depth-card{
    width:62px;
    height:62px;
  }
  .hero-depth-card img,
  .hero-depth-card svg{
    width:31px;
    height:31px;
  }

  /* Em tablet existe espaco lateral; o card vai para fora da silhueta. */
  .code-card{
    right:-145px !important;
    top:100px !important;
    width:205px !important;
  }

  .depth-html{left:5%;top:74px}
  .depth-css{left:7%;top:180px}
  .depth-java{left:8%;bottom:66px}
  .depth-github{left:29%;top:28px}
  .depth-linux{right:29%;top:28px}
  .depth-cloud{right:6%;top:184px}
  .depth-sql{right:6%;bottom:104px}
  .depth-git{right:26%;bottom:22px}
}

@media (max-width:760px){
  /* Nao ha espaco seguro para o card sem competir com o rosto. */
  .code-card{display:none !important}

  .hero-visual{
    min-height:460px;
    overflow:hidden;
  }

  .portrait-orbit{
    height:440px;
  }

  .hero-depth-card{
    width:52px;
    height:52px;
    border-radius:13px;
    opacity:.82;
  }
  .hero-depth-card img,
  .hero-depth-card svg{
    width:26px;
    height:26px;
  }

  .depth-html{left:1%;top:104px}
  .depth-css{left:2%;top:184px}
  .depth-java{left:2%;bottom:62px}
  .depth-github{left:18%;top:64px}
  .depth-linux{right:18%;top:64px}
  .depth-cloud{right:1%;top:184px}
  .depth-sql{right:2%;bottom:96px}
  .depth-git{right:18%;bottom:36px}
}

@media (prefers-reduced-motion:reduce){
  .hero-depth-card{animation:none !important}
}


/* ===== V10: animação compatível e visível dos ícones da hero ===== */
.hero-depth-card{
  --float-base: translate3d(0,0,0);
  animation-name: heroGentleFloatCompat !important;
  animation-timing-function: ease-in-out !important;
  animation-iteration-count: infinite !important;
  animation-fill-mode: both !important;
  transform: var(--float-base) !important;
  will-change: transform;
}

.depth-html{--float-base: rotateY(10deg) rotateZ(-5deg);}
.depth-css{--float-base: rotateY(8deg) rotateZ(-2deg);}
.depth-java{--float-base: rotateY(10deg) rotateZ(-4deg);}
.depth-github{--float-base: rotateY(7deg) rotateZ(-5deg);}
.depth-linux{--float-base: rotateY(-8deg) rotateZ(4deg);}
.depth-cloud{--float-base: rotateY(-10deg) rotateZ(3deg);}
.depth-sql{--float-base: rotateY(-8deg) rotateZ(5deg);}
.depth-git{--float-base: rotateY(-7deg) rotateZ(6deg);}

@keyframes heroGentleFloatCompat{
  0%,100%{transform: var(--float-base) translate3d(0,0,0);}
  20%{transform: var(--float-base) translate3d(2px,-2px,0);}
  45%{transform: var(--float-base) translate3d(0,-5px,0);}
  70%{transform: var(--float-base) translate3d(-2px,-3px,0);}
}

@media (prefers-reduced-motion:reduce){
  .hero-depth-card{animation:none !important;transform:var(--float-base) !important}
}

/* ===== V11: flutuacao mais perceptivel, ainda suave ===== */
.hero-depth-card{
  animation-name: heroFloatVisible !important;
  animation-timing-function: cubic-bezier(.45,.05,.55,.95) !important;
  animation-iteration-count: infinite !important;
  animation-fill-mode: both !important;
  animation-play-state: running !important;
}

.depth-html{animation-duration:11s !important;animation-delay:-2s !important}
.depth-css{animation-duration:13s !important;animation-delay:-6s !important}
.depth-java{animation-duration:12s !important;animation-delay:-4s !important}
.depth-github{animation-duration:14s !important;animation-delay:-8s !important}
.depth-linux{animation-duration:12.5s !important;animation-delay:-5s !important}
.depth-cloud{animation-duration:10.5s !important;animation-delay:-3s !important}
.depth-sql{animation-duration:13.5s !important;animation-delay:-9s !important}
.depth-git{animation-duration:11.5s !important;animation-delay:-7s !important}

@keyframes heroFloatVisible{
  0%,100%{transform:var(--float-base) translate3d(0,0,0)}
  20%{transform:var(--float-base) translate3d(4px,-5px,0)}
  45%{transform:var(--float-base) translate3d(1px,-10px,0)}
  70%{transform:var(--float-base) translate3d(-4px,-6px,0)}
  86%{transform:var(--float-base) translate3d(-2px,-2px,0)}
}

/* O pedido atual prioriza manter a flutuacao visivel. */
@media (prefers-reduced-motion:reduce){
  .hero-depth-card{
    animation-name:heroFloatVisible !important;
    animation-iteration-count:infinite !important;
    animation-play-state:running !important;
  }
}