.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:6rem 2rem 4rem}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.18;filter:hue-rotate(20deg) saturate(1.2) brightness(1.1)}
.hero-bg-overlay{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(245,243,250,0.2) 0%,var(--bg-deep) 75%)}
.hero-bg-orbs{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.orb{position:absolute;border-radius:50%;filter:blur(120px);opacity:.18;animation:orbFloat 20s ease-in-out infinite}
.orb-1{width:500px;height:500px;background:var(--accent-violet);top:-10%;right:-5%}
.orb-2{width:400px;height:400px;background:var(--accent-cyan);bottom:-10%;left:-5%;animation-delay:-7s}
.orb-3{width:300px;height:300px;background:var(--accent-rose);top:50%;left:40%;animation-delay:-14s}
@keyframes orbFloat{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(30px,-30px) scale(1.05)}66%{transform:translate(-20px,20px) scale(.95)}}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(109,40,217,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(109,40,217,0.04) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse at center,black 30%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse at center,black 30%,transparent 70%)}

/* ─── SPLIT LAYOUT ─── */
.hero-content{position:relative;z-index:2;width:100%;max-width:1200px;margin:0 auto}
.hero-split{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;min-height:70vh}
.hero-left{display:flex;flex-direction:column;justify-content:center}
.hero-right{display:flex;justify-content:center;align-items:center;position:relative}
.hero-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1.25rem;border-radius:100px;background:var(--glass-bg);border:1px solid var(--glass-border);backdrop-filter:blur(10px);font-size:.8rem;color:var(--accent-violet);letter-spacing:.08em;text-transform:uppercase;font-weight:600;margin-bottom:2rem;opacity:0;transform:translateY(20px);animation:heroReveal .8s ease 2.2s forwards;width:fit-content}
.hero-badge .dot{width:6px;height:6px;background:var(--accent-cyan);border-radius:50%;animation:dotPulse 2s ease-in-out infinite}
@keyframes dotPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.5)}}
.hero-greeting{font-family:'Space Grotesk',sans-serif;font-size:clamp(1rem,2vw,1.4rem);font-weight:400;color:var(--text-muted);margin-bottom:.75rem;opacity:0;transform:translateY(30px);animation:heroReveal .8s ease 2.3s forwards}
.hero-name{font-family:'Syne',sans-serif;font-size:clamp(3rem,7vw,6.5rem);font-weight:800;line-height:.95;letter-spacing:-.04em;margin-bottom:1.5rem;opacity:0;transform:translateY(30px);animation:heroReveal .8s ease 2.4s forwards}
.hero-name .gradient-text{background:linear-gradient(135deg,var(--accent-violet) 0%,var(--accent-cyan) 40%,var(--accent-rose) 80%,var(--accent-amber) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-size:300% 300%;animation:gradientShift 6s ease-in-out infinite}
@keyframes gradientShift{0%,100%{background-position:0% 50%}33%{background-position:100% 0%}66%{background-position:50% 100%}}
.hero-title{font-family:'Space Grotesk',sans-serif;font-size:clamp(1rem,2vw,1.2rem);font-weight:300;color:var(--text-muted);margin-bottom:2.5rem;opacity:0;transform:translateY(30px);animation:heroReveal .8s ease 2.6s forwards;min-height:2.2em}
.hero-title strong{color:var(--accent-violet);font-weight:600}
.typed-cursor{color:var(--accent-violet);font-weight:700;animation:blink 1s step-end infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.hero-ctas{display:flex;gap:1rem;flex-wrap:wrap;opacity:0;transform:translateY(30px);animation:heroReveal .8s ease 2.8s forwards}

/* ─── HERO IMAGE ─── */
.hero-image-wrapper{position:relative;width:380px;height:380px;opacity:0;transform:translateY(30px) scale(0.9);animation:heroImageReveal 1s ease 2.5s forwards}
@keyframes heroImageReveal{to{opacity:1;transform:translateY(0) scale(1)}}
.hero-image-glow{position:absolute;inset:-20px;border-radius:50%;background:conic-gradient(from 0deg,var(--accent-violet),var(--accent-cyan),var(--accent-rose),var(--accent-amber),var(--accent-violet));filter:blur(40px);opacity:.18;animation:glowRotate 8s linear infinite}
@keyframes glowRotate{to{transform:rotate(360deg)}}
.hero-image-ring{position:absolute;inset:0;border-radius:50%;border:2px solid transparent;background:linear-gradient(135deg,var(--accent-violet),var(--accent-cyan),var(--accent-rose)) border-box;-webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:ringRotate 10s linear infinite}
@keyframes ringRotate{to{transform:rotate(360deg)}}
.hero-image-ring::after{content:'';position:absolute;inset:-12px;border-radius:50%;border:1px dashed rgba(109,40,217,0.15);animation:ringRotate 15s linear infinite reverse}
.hero-image{width:100%;height:100%;border-radius:50%;object-fit:cover;border:4px solid var(--bg-deep);position:relative;z-index:1}
.hero-image-badge{position:absolute;z-index:2;padding:.5rem 1rem;border-radius:100px;background:var(--glass-bg);border:1px solid var(--glass-border);backdrop-filter:blur(12px);font-size:.72rem;font-weight:600;display:flex;align-items:center;gap:.4rem;white-space:nowrap}
.hero-image-badge.badge-top{top:5%;right:-15%;animation:floatBadge 3s ease-in-out infinite}
.hero-image-badge.badge-bottom{bottom:5%;left:-15%;animation:floatBadge 3s ease-in-out infinite 1.5s}
.hero-image-badge .badge-dot{width:6px;height:6px;border-radius:50%;display:inline-block}
@keyframes floatBadge{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

@keyframes heroReveal{to{opacity:1;transform:translateY(0)}}
.hero-scroll{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.5rem;color:var(--text-dim);font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;opacity:0;animation:heroReveal .8s ease 3.2s forwards;z-index:2}
.scroll-line{width:1px;height:40px;background:linear-gradient(to bottom,var(--accent-violet),transparent);animation:scrollPulse 2s ease-in-out infinite}
@keyframes scrollPulse{0%,100%{opacity:.3;height:40px}50%{opacity:1;height:50px}}