.hero{min-height:100vh;display:flex;align-items:center;padding-top:var(--nav-h);position:relative;overflow:hidden}
.hero-bg{position:absolute;inset:0;pointer-events:none}
.hero-bg::before{content:'';position:absolute;top:-120px;right:-120px;width:480px;height:480px;border-radius:50%;background:rgba(16,185,129,.08);filter:blur(60px)}
.hero-bg::after{content:'';position:absolute;bottom:-120px;left:-120px;width:480px;height:480px;border-radius:50%;background:rgba(16,185,129,.05);filter:blur(60px)}
body.dark .hero-bg::before{background:rgba(16,185,129,.1)}
body.dark .hero-bg::after{background:rgba(16,185,129,.06)}
.hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;position:relative;z-index:1}
.hero-label{font-family:'JetBrains Mono',monospace;font-size:.85rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.hero-name{font-size:clamp(2.2rem,5vw,3.6rem);font-weight:800;line-height:1.15;margin-bottom:8px}
.hero-role{font-size:1.2rem;color:var(--text-secondary);font-weight:500;margin-bottom:16px;min-height:32px}
.cursor{color:var(--accent);animation:blink 1s step-end infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.hero-desc{font-size:1rem;color:var(--text-secondary);max-width:520px;margin-bottom:28px;line-height:1.7}
.hero-btns{display:flex;gap:14px;margin-bottom:28px;flex-wrap:wrap}
@media(max-width:400px){.hero-btns{flex-direction:column;align-items:center}.hero-btns .btn{width:100%;max-width:240px;justify-content:center}}
.hero-socials{display:flex;gap:12px}
.hero-socials a{width:44px;height:44px;border-radius:var(--radius-sm);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text-secondary);transition:all .25s}
.hero-socials a:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-3px);box-shadow:0 6px 16px rgba(16,185,129,.15)}
.hero-visual{display:flex;justify-content:center;align-items:center}
.hero-circle{position:relative}
.hero-circle-inner{width:260px;height:260px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:6rem;font-weight:800;color:var(--accent);border:2px dashed var(--border);background:var(--card);overflow:hidden}
.hero-circle-inner img{width:100%;height:100%;object-fit:cover}
.floating-badge{position:absolute;padding:6px 14px;border-radius:var(--radius-sm);font-family:'JetBrains Mono',monospace;font-size:.75rem;font-weight:600;white-space:nowrap;background:var(--card);color:var(--accent);border:1px solid var(--border);box-shadow:var(--shadow);animation:float 5s ease-in-out infinite}
.b1{top:-10px;right:-10px}.b2{bottom:-10px;left:-10px}.b3{top:50%;right:-30px}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media(max-width:900px){
  .hero-inner{grid-template-columns:1fr;text-align:center}
  .hero-desc{margin:0 auto 28px}
  .hero-btns,.hero-socials{justify-content:center}
  .hero-visual{margin-top:40px}
  .hero-circle-inner{width:200px;height:200px;font-size:4.5rem}
}
@media(max-width:400px){
  .hero{min-height:auto;padding-top:calc(var(--nav-h) + 20px);padding-bottom:40px}
  .hero-circle-inner{width:160px;height:160px;font-size:3.5rem}
  .hero-name{font-size:1.8rem}
  .hero-desc{font-size:.88rem}
  .floating-badge{font-size:.65rem;padding:4px 10px}
  .b1{top:-8px;right:-4px}.b2{bottom:-8px;left:-4px}.b3{top:50%;right:-16px}
}