/* Hero inspired by the supplied reference, with Soeiro's own identity. */
:root{--ink:#17213b;--blue:#3154df;--muted:#596477;--paper:#fbfbff;--line:#e2e5f2;--violet:#7753e6}
body{background:var(--paper)}
.header{min-height:96px;border-bottom:0}
.brand{font-size:29px;letter-spacing:-1.5px}
nav{gap:28px;font-size:13px}
.nav-contact{border-bottom:0}
nav .nav-cv{padding:10px 19px;color:white;border-radius:30px;background:var(--blue);box-shadow:0 5px 16px #3154df16;display:inline-flex;gap:13px;align-items:center}
nav .nav-cv:hover{background:#2544c4;color:white}
.hero{padding:34px 0 0;grid-template-columns:1.06fr 1fr;gap:14px 24px;position:relative}
.hero-copy{position:relative;z-index:2;padding:20px 0 32px}
.eyebrow{font-size:23px;line-height:1.3;color:var(--violet);font-weight:600;letter-spacing:-.03em;text-transform:none}
.hero h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(66px,6.65vw,92px);font-weight:700;line-height:1.08;letter-spacing:-.06em;margin:8px 0 16px;white-space:nowrap}
.hero h1>span{color:var(--blue)}
.name-dot{color:var(--violet)}
.role{font-size:23px;line-height:1.4;letter-spacing:-.03em;max-width:none}
.hero-rule{width:42px;height:3px;margin:22px 0 17px;background:var(--violet);border-radius:3px}
.hero-description{font-size:16px;line-height:1.7;color:var(--muted);max-width:385px}
.hero-actions{display:flex;align-items:center;gap:14px;margin:28px 0 24px;flex-wrap:wrap}
.hero .button{border-radius:28px;padding:12px 22px;gap:23px;font-size:14px;line-height:1.6;min-height:48px;background:linear-gradient(110deg,#3154df,#6651e7);box-shadow:0 7px 20px #3154df18}
.hero .button:hover{background:var(--blue)}
.hero .button-secondary{background:transparent;color:#4f42b7;border:1px solid #c9c6ee;box-shadow:none}
.hero .button-secondary:hover{background:#eeedff;color:#3c36a0}
.hero-links{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.social-link{display:flex;align-items:center;justify-content:center;width:33px;height:33px;border:1px solid #cfcaee;border-radius:50%;color:#5847b3;font-weight:700;font-size:14px}
.social-link:hover{background:#eeedff}
.contact-divider{width:1px;height:13px;background:#d4d7e5;margin:0 2px}
.hero-phone{white-space:nowrap}
.avatar-scene{position:relative;aspect-ratio:1;min-width:0;isolation:isolate}
.avatar-backdrop{position:absolute;inset:11% 0 3% 11%;background:linear-gradient(145deg,#eeebff 4%,#dcd4ff 65%,#dae7ff);border-radius:44% 56% 42% 58% / 47% 48% 52% 53%;transform:rotate(-9deg);z-index:-1}
.avatar{position:absolute;width:104%;height:auto;max-width:none;left:-1%;bottom:0;filter:none}
.spark{position:absolute;fill:var(--violet);width:21px;z-index:2}
.spark-one{top:11%;left:6%;transform:rotate(8deg)}
.spark-two{width:17px;right:-1%;bottom:22%;fill:#91b8fa}
.orbit-ring{position:absolute;bottom:18%;left:-1%;width:30px;height:30px;border:3px solid #9568ee;border-radius:50%;z-index:2}
.orbit-dot{position:absolute;left:5%;bottom:33%;width:9px;height:9px;background:#ad8df1;border-radius:50%}
.growth-note{position:absolute;top:25%;left:-1%;color:#6c57b4;transform:rotate(-10deg);z-index:2}
.growth-note span{display:block;font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:17px;line-height:1.25}
.growth-note svg{width:51px;height:40px;margin-left:15px}
.focus-badge{position:absolute;top:6%;right:-2%;z-index:3;display:flex;align-items:center;gap:9px;padding:12px 16px;background:#ffffffee;border:1px solid #e6e0fa;border-radius:17px;box-shadow:0 7px 24px #665d8e0b;font-size:11px;line-height:1.5;color:#677087;transform:rotate(7deg)}
.focus-badge strong{font-size:12px;font-weight:600;color:var(--ink)}
.badge-symbol{display:flex;justify-content:center;align-items:center;background:#eeebff;border-radius:50%;width:30px;height:30px;color:var(--violet);font-size:19px}
.hero-footnote{grid-column:1/-1;display:flex;justify-content:space-between;padding:25px 0 28px;margin-top:29px;border-top:1px solid var(--line);gap:24px;color:#5b6280;font-size:13px;letter-spacing:.015em}
.hero-footnote span{display:flex;align-items:center;gap:14px}
.hero-footnote i{font-style:normal;font-size:11px;color:#8b7fca;font-variant-numeric:tabular-nums}
.about{padding-top:68px}
.service{border-top-color:#a69aea}
.skills-section{background:#192441}
.tool{box-shadow:0 4px 18px #24273f03}
@media(min-width:1500px){.hero{padding-top:48px;padding-bottom:0}}
@media(max-width:1100px){.hero h1{font-size:clamp(62px,7vw,80px)}.role{font-size:21px}.hero-description{max-width:345px}.growth-note{left:-3%;font-size:14px}.focus-badge{right:0;top:1%;padding:10px 12px}.avatar-scene{align-self:center}.header nav{gap:20px}}
@media(max-width:850px) and (min-width:721px){.hero h1{font-size:61px}.hero-links{gap:9px;font-size:11px}.contact-divider{display:none}.hero-phone{margin-left:42px}.focus-badge{right:-2%;padding:9px}.growth-note span{font-size:14px}.orbit-ring{width:24px;height:24px}}
@media(max-width:720px){
  .header{min-height:94px;justify-content:space-between;gap:14px;padding:23px 0 15px}
  .header nav{justify-content:space-between;gap:12px;font-size:12px;width:100%;padding-top:5px}
  nav .nav-cv{padding:7px 12px;gap:6px}
  .header .brand{font-size:27px}
  .hero{grid-template-columns:minmax(0,1fr);padding:34px 0 0;gap:13px}
  .hero-copy{padding:0;min-width:0}
  .eyebrow{font-size:21px}
  .hero h1{font-size:clamp(60px,12vw,86px);margin:8px 0 12px}
  .role{font-size:22px}
  .hero-rule{margin:20px 0 16px}
  .hero-description{font-size:16px;max-width:420px}
  .hero-actions{margin:23px 0 22px}
  .hero-links{font-size:12px;gap:10px}
  .hero-phone{margin-left:0}
  .avatar-scene{width:min(100%,470px);justify-self:center;margin-top:13px}
  .avatar-backdrop{right:4%}
  .growth-note{top:22%;left:0}
  .growth-note span{font-size:15px}
  .focus-badge{display:none}
  .spark-one{top:8%;left:7%;width:17px}
  .spark-two{right:0}
  .orbit-ring{left:1%;width:25px;height:25px}
  .hero-footnote{gap:8px;padding:20px 0 24px;margin-top:13px;font-size:11px}
  .hero-footnote span{gap:7px}
  .hero-footnote i{font-size:9px}
  .about{padding-top:46px}
}
@media(max-width:359px){.header nav{gap:9px;font-size:11px}nav .nav-cv{padding:7px 9px}.hero h1{font-size:48px}.hero .button{font-size:13px;padding:10px 16px;gap:16px}.role{font-size:20px}.hero-links{font-size:11px}.contact-divider{display:none}.hero-phone{margin-left:43px}.focus-badge{padding:9px}.hero-footnote{font-size:10px;gap:6px}.hero-footnote span{gap:5px}}
@media print{.hero{display:block;padding:20px 0}.avatar-scene,.hero-actions,.hero-links,.hero-footnote,.nav-cv{display:none}.hero h1{font-size:44pt}.hero h1>span{color:var(--ink)}}