#hero{
  position:relative;
  overflow:hidden;
  background:radial-gradient(ellipse 90% 90% at 65% 20%,#2a1a80 0%,#1a1060 30%,var(--navy) 70%);
  padding:100px 0 110px;
  min-height:90vh;
  display:flex;
  align-items:center;
}
.hero-orb{position:absolute;border-radius:50%;pointer-events:none;filter:blur(90px)}
.o1{width:600px;height:600px;background:var(--orange-20);top:-150px;right:-80px}
.o2{width:400px;height:400px;background:var(--indigo-15);bottom:-100px;left:-60px}
.o3{width:280px;height:280px;background:var(--orange-10);top:40%;left:40%}

.hero-dots{
  position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle,rgba(200,180,255,.08) 1px,transparent 1px);
  background-size:38px 38px;
  mask-image:radial-gradient(ellipse 90% 90% at 50% 50%,black 30%,transparent 100%);
}
.hero-line{
  position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--orange) 50%,transparent);
  opacity:.6;
}

.hero-inner{
  position:relative;z-index:2;
  display:grid;
  grid-template-columns:1fr 450px;
  gap:0;
  align-items:stretch;
}
.hero-text{
  position:relative;z-index:5;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.hero-text .tag{align-self:flex-start}

.hero-pre{margin-bottom:10px;font-size:14px;color:var(--text-dim);font-weight:500}
.hero-h1{
  font-size:clamp(26px,3.6vw,48px);
  font-weight:900;line-height:1.08;margin-bottom:24px;color:#fff;text-wrap:pretty;
}
.hero-h1 em{color:var(--orange);font-style:normal}
.hero-sub{font-size:17px;color:var(--text-dim);line-height:1.7;margin-bottom:36px;text-wrap:pretty}
.hero-cta-wrap{
  background:var(--card-bg);
  border:1px solid var(--border-bright);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-radius:var(--radius-lg);padding:28px;
}
.hero-micro{display:flex;flex-wrap:wrap;gap:16px;margin-top:14px}
.micro{display:flex;align-items:center;gap:6px;font-size:12px;color:rgba(255,255,255,.5);font-weight:500}
.micro .dot{font-size:14px}

.hero-visual{position:relative;align-self:stretch;overflow:visible;min-height:520px}
.hero-person-wrap{
  position:absolute;
  inset:0;
  overflow:hidden;
}
.hero-author-img{
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  height:105%;
  width:auto;
  max-width:none;
  display:block;
  z-index:1;
}
.hero-person-glow{
  position:absolute;bottom:0;left:0;right:0;height:45%;
  background:linear-gradient(to top,var(--navy) 0%,transparent 100%);
  z-index:0;pointer-events:none;
}
.hero-badge{
  position:absolute;top:20px;right:10px;
  background:var(--orange-15);backdrop-filter:blur(10px);
  border:1px solid var(--orange-35);border-radius:30px;
  padding:8px 16px;font-size:12px;font-weight:700;color:var(--orange-light);
  display:flex;align-items:center;gap:6px;z-index:4;
  box-shadow:0 4px 20px var(--orange-20);
}

.float-chip{
  position:absolute;z-index:3;
  background:rgba(12,32,64,.75);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid var(--border-bright);border-radius:30px;
  padding:10px 20px;font-size:13px;font-weight:600;color:#fff;
  box-shadow:0 8px 28px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.06);
  display:flex;align-items:center;gap:8px;white-space:nowrap;opacity:0;
}
.fc1{bottom:180px;left:-60px}
.fc2{top:100px;left:-50px}
.fc3{top:240px;right:-60px}
.fc4{bottom:110px;right:-50px}

@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes chipIn{from{opacity:0;transform:translateY(14px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes heroFadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes heroFadeRight{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
@keyframes typeReveal{to{clip-path:inset(0 0% 0 0)}}
@keyframes cursorBlink{0%,100%{opacity:1}50%{opacity:0}}

.hero-anim{opacity:0}
.hero-type{display:inline-block;overflow:hidden;vertical-align:bottom;clip-path:inset(0 100% 0 0)}
.hero-type::after{content:'|';color:var(--orange);font-style:normal;font-weight:300;opacity:0}

body.site-ready .ha-1{animation:heroFadeUp .65s var(--curve) .1s forwards}
body.site-ready .ha-2{animation:heroFadeUp .65s var(--curve) .28s forwards}
body.site-ready .ha-3{animation:heroFadeUp .65s var(--curve) .46s forwards}
body.site-ready .ha-4{animation:heroFadeUp .65s var(--curve) .66s forwards}
body.site-ready .ha-5{animation:heroFadeUp .65s var(--curve) .86s forwards}
body.site-ready .ha-right{animation:heroFadeRight .8s var(--curve) .25s forwards}
body.site-ready .hero-type{animation:typeReveal .3s steps(20,end) .55s forwards}
body.site-ready .hero-type::after{animation:cursorBlink .4s step-end 1.1s 3}
body.site-ready .fc1{animation:chipIn .6s var(--curve) 1.1s both,floatY 4s ease-in-out 1.7s infinite}
body.site-ready .fc2{animation:chipIn .6s var(--curve) 1.3s both,floatY 4s ease-in-out 2.1s infinite}
body.site-ready .fc3{animation:chipIn .6s var(--curve) 1.5s both,floatY 4s ease-in-out 2.4s infinite}
body.site-ready .fc4{animation:chipIn .6s var(--curve) 1.7s both,floatY 4s ease-in-out 2.8s infinite}

@media(prefers-reduced-motion:reduce){
  body.site-ready .ha-1,body.site-ready .ha-2,body.site-ready .ha-3,
  body.site-ready .ha-4,body.site-ready .ha-5,body.site-ready .ha-right{animation:none;opacity:1}
  body.site-ready .hero-type{animation:none;clip-path:none}
  body.site-ready .hero-type::after{display:none}
  body.site-ready .fc1,body.site-ready .fc2,body.site-ready .fc3,body.site-ready .fc4{animation:none;opacity:1}
}

@media(max-width:780px){
  #hero{padding:60px 0 70px;min-height:auto}
  .hero-inner{grid-template-columns:1fr}
  .hero-visual{display:none}
  .hero-text{width:100%}
  .hero-h1{font-size:clamp(22px,7vw,34px)}
  .hero-pre{font-size:13px}
  .hero-sub{font-size:15px}
  .hero-cta-wrap{padding:18px}
  .hero-micro{gap:10px}
  .micro{font-size:11px}
}
@media(max-width:1100px) and (min-width:781px){
  .hero-inner{grid-template-columns:1fr 360px}
  .fc1{left:-30px}.fc2{left:-20px}.fc3{right:-30px}.fc4{right:-20px}
}