@font-face {
  font-family: Manrope;
  src: url("./fonts/manrope-variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}
:root { color-scheme: dark; --navy: #050d1b; --white: #f7f9ff; --blue: #076cff; --move-x: 0px; --move-y: 0px; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--navy); color: var(--white); font-family: Manrope, "Arial", sans-serif; -webkit-font-smoothing: antialiased; }
body::selection { background: #096cf0; color: white; }
.hero { position: relative; min-height: 740px; min-height: max(740px, 100svh); isolation: isolate; overflow: hidden; display: flex; align-items: center; padding: 4rem 3.5vw; background: radial-gradient(ellipse at 72% 42%, #10274a 0%, #081326 39%, #040b15 78%); }
.light-field { position: absolute; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
.light { position: absolute; border-radius: 50%; filter: blur(50px); transform: translateZ(0); }
.light-blue { width: 58vw; height: 65vh; top: 6%; left: 40%; background: radial-gradient(ellipse, #1268fa70, #14478935 45%, transparent 72%); animation: breathe 12s ease-in-out infinite alternate; }
.light-soft { width: 45vw; height: 60vh; top: 31%; left: 63%; background: radial-gradient(ellipse, #0077ff26, transparent 70%); animation: drift 16s ease-in-out infinite alternate; }
.portrait-stage { position: absolute; z-index: -1; pointer-events: none; right: -1.5vw; bottom: -12svh; width: 57vw; height: 110svh; min-height: 800px; }
.portrait-motion { height: 100%; width: 100%; transform: translate3d(var(--move-x), var(--move-y), 0); transition: transform 900ms cubic-bezier(.2,.8,.2,1); }
.portrait { display: block; width: 100%; height: 100%; object-fit: contain; object-position: bottom right; animation: portrait-enter 1500ms cubic-bezier(.18,.7,.18,1) both; }
.content { position: relative; z-index: 1; margin-top: 3.5vh; width: 75%; }
h1 { font-size: clamp(4rem, 8.6vw, 10rem); line-height: .98; letter-spacing: -.048em; text-transform: uppercase; margin: 0; font-weight: 800; }
.name-line { display: block; overflow: hidden; padding: .075em .04em; margin-left: -.04em; margin-top: -.075em; }
.name-word { display: inline-block; animation: name-enter 1150ms cubic-bezier(.16,1,.3,1) both; animation-delay: 90ms; }
.name-line:nth-child(2) .name-word { animation-delay: 230ms; }
.role { font-size: clamp(1.25rem, 2.3vw, 2.55rem); font-weight: 700; line-height: 1.4; letter-spacing: -.025em; margin: 1.8rem 0 2.8rem; max-width: 90%; animation: content-enter 1s cubic-bezier(.16,1,.3,1) 430ms both; }
.actions { display: flex; flex-wrap: wrap; gap: 1.1rem; animation: content-enter 1s cubic-bezier(.16,1,.3,1) 560ms both; }
.action { position: relative; display: inline-flex; justify-content: center; align-items: center; gap: .8rem; min-height: 84px; min-width: 255px; padding: 1.25rem 2.3rem; border: 1.5px solid transparent; border-radius: 13px; text-decoration: none; color: var(--white); font-size: clamp(1.375rem, 2vw, 1.875rem); font-weight: 800; letter-spacing: -.035em; transition: transform 250ms ease, background 250ms ease, border-color 250ms ease, box-shadow 250ms ease; -webkit-tap-highlight-color: transparent; }
.linkedin { background: var(--blue); box-shadow: 0 8px 35px #005cdb22; }
.tixer { border-color: #65a8fa; background: #08132594; min-width: 230px; }
.button-icon { width: 36px; height: 36px; flex: 0 0 36px; }
.tixer-icon { object-fit: contain; }
.action:focus-visible { outline: 3px solid white; outline-offset: 6px; }
.action:active { transform: translateY(1px) scale(.98); }
@media (hover: hover) and (pointer: fine) {
  .action:hover { transform: translateY(-5px); }
  .linkedin:hover { background: #2580ff; box-shadow: 0 12px 45px #066bff55; }
  .tixer:hover { background: #112742; border-color: #8bbfff; box-shadow: 0 12px 35px #1265ba22; }
}
@keyframes name-enter { from { transform: translateY(108%); } to { transform: translateY(0); } }
@keyframes portrait-enter { from { opacity: 0; transform: translateY(30px) scale(1.04); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes content-enter { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes breathe { from { transform: translate3d(-2%, 0, 0) scale(.97); opacity: .75; } to { transform: translate3d(4%, 3%, 0) scale(1.1); opacity: 1; } }
@keyframes drift { from { transform: translate3d(-3%, 3%, 0); opacity: .55; } to { transform: translate3d(3%, -4%, 0); opacity: 1; } }
@media (min-width: 1700px) { .hero { padding-left: max(3.5vw, calc((100vw - 1700px) / 2)); } .portrait-stage { right: 3vw; width: 50vw; } }
@media (max-width: 1050px) and (min-width: 761px) {
  .hero { min-height: max(690px, 100svh); }
  h1 { font-size: 8.6vw; }
  .portrait-stage { width: 60vw; right: -6vw; }
  .role { font-size: 1.65rem; max-width: 78%; }
  .action { min-width: 195px; min-height: 76px; padding: 1rem 1.4rem; }
  .button-icon { width: 29px; height: 29px; flex-basis: 29px; }
}
@media (max-width: 760px) {
  .hero { min-height: max(830px, 100svh); display: block; padding: 0 6vw 3rem; }
  .light-blue { width: 110vw; height: 65vh; top: -3%; left: -5%; }
  .light-soft { width: 85vw; left: 35%; top: 2%; }
  .portrait-stage { width: 100%; height: 660px; min-height: 0; top: 0; right: 0; bottom: auto; }
  .portrait { object-position: top center; object-fit: cover; mask-image: linear-gradient(black 0%, black 52%, transparent 94%); }
  .hero::after { content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none; background: linear-gradient(transparent 30%, #050d1b70 44%, #050d1bf5 66%, #050d1b 76%); }
  .content { width: 100%; margin-top: 0; padding-top: 440px; }
  h1 { font-size: clamp(2.6rem, 10vw, 4.7rem); line-height: 1.04; letter-spacing: -.05em; }
  .role { font-size: clamp(1.125rem, 4.4vw, 1.55rem); margin: 1.2rem 0 1.7rem; max-width: 100%; }
  .actions { gap: .75rem; }
  .action { min-width: 0; flex: 1 1 calc(50% - .75rem); min-height: 72px; padding: 1rem .75rem; gap: .6rem; border-radius: 11px; font-size: 1.25rem; }
  .button-icon { width: 28px; height: 28px; flex-basis: 28px; }
}
@media (max-width: 360px) {
  .hero { min-height: 800px; }
  .content { padding-top: 400px; }
  .portrait-stage { height: 610px; }
  .actions { flex-direction: column; }
  .action { flex: none; width: 100%; min-height: 66px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .portrait-motion { transform: none; }
}