@font-face{font-family:"Unbounded";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/unbounded.ttf") format("truetype")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/ibm-plex-mono.ttf") format("truetype")}

:root{
  --bg:#070A12;
  --bg-hi:#0E1424;
  --fg:#ECEEF2;
  --muted:#8A93A6;
  --soft:#A3ABBC;
  --surface:#121826;
  --ring:rgba(236,238,242,.13);
  --line:rgba(236,238,242,.16);
  --accent:#F5B544;
  --display:"Unbounded","Arial Black",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{min-height:100%;background:var(--bg);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{min-height:100%;margin:0;background:var(--bg);color:var(--fg);font-family:var(--mono);overflow-x:hidden;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

.stage-wrap{
  --tx:0;--ty:0;
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  min-height:100vh;min-height:100svh;
  padding:max(80px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(80px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
  background:radial-gradient(ellipse 80% 70% at 50% 45%,var(--bg-hi),var(--bg) 70%)}
.stage-wrap::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 80% 70% at 50% 45%,#0E0F22,#05060D 70%);opacity:var(--palette,0);will-change:opacity}
#net{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none}

main{position:relative;z-index:2;width:100%;max-width:820px;display:flex;flex-direction:column;align-items:center;gap:40px;text-align:center;
  transform:perspective(1200px) translate3d(calc(var(--tx) * -8px),calc(var(--ty) * -8px),0) rotateX(calc(var(--ty) * 3deg)) rotateY(calc(var(--tx) * -3deg));
  transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.rise{animation:rise .9s cubic-bezier(.2,.8,.2,1) both}

.photo-wrap{position:relative;width:clamp(200px,52vw,280px);max-width:100%;aspect-ratio:1;animation-delay:.05s}
.halo{position:absolute;inset:-5px;border-radius:50%;background:conic-gradient(from 0deg,transparent 0deg,var(--accent) 70deg,transparent 140deg,transparent 200deg,var(--accent) 250deg,transparent 320deg);animation:spin 6s linear infinite;filter:blur(.4px)}
.halo-soft{position:absolute;inset:-28px;border-radius:50%;background:radial-gradient(circle,var(--accent) 0%,transparent 65%);opacity:.12;animation:breathe 5s ease-in-out infinite}
.orbit-wrap{position:absolute;inset:-80px;perspective:900px;pointer-events:none}
.plane{position:absolute;inset:0;transform-style:preserve-3d}
.p1{transform:rotateX(72deg) rotateY(-12deg)}
.p2{transform:rotateX(64deg) rotateY(38deg)}
.p3{transform:rotateX(78deg) rotateY(-50deg)}
.ring{position:absolute;inset:0;border-radius:50%;border:1px solid var(--ring)}
.r1{animation:spin 16s linear infinite}
.r2{inset:30px;animation:spin 11s linear infinite reverse}
.r3{inset:-30px;animation:spin 24s linear infinite}
.dot{position:absolute;top:-4px;left:calc(50% - 4px);width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent),0 0 2px var(--fg)}
.dot.sm{width:5px;height:5px;top:-3px;left:calc(50% - 2.5px);background:var(--fg);box-shadow:0 0 8px rgba(236,238,242,.8)}
.photo{position:absolute;inset:0;border-radius:50%;border:6px solid var(--bg);background:var(--surface);overflow:hidden}
.photo img{display:block;width:100%;height:100%;object-fit:cover}

.who{display:flex;flex-direction:column;align-items:center;gap:14px}
h1{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(34px,6vw,68px);line-height:1.05;text-wrap:balance}
.reveal{display:inline-block;animation:reveal 1.3s cubic-bezier(.7,0,.2,1) .35s both}
.caret{display:inline-block;width:.5em;height:.12em;margin-left:.12em;background:var(--accent);vertical-align:baseline;animation:blink 1.05s steps(1) infinite}
.handle{margin:0;font-size:clamp(15px,1.8vw,18px);letter-spacing:.12em;color:var(--soft);animation-delay:1s}
.handle span{color:var(--accent)}

.contacts{display:grid;grid-template-columns:16px minmax(0,1fr) 44px;align-items:center;gap:4px 12px;width:max-content;max-width:100%;font-size:16px;text-align:left;animation-delay:1.2s}
.phone,.email{display:contents}
.phone>svg,.email>svg{color:var(--muted)}
.contact-link{color:var(--soft);text-decoration:none;line-height:1.5;letter-spacing:.02em;white-space:nowrap;transition:color .2s}
.contact-link:hover{color:var(--accent)}
.copy{display:inline-flex;align-items:center;justify-content:center;width:44px;min-height:44px;padding:0;border-radius:10px;border:1px solid rgba(236,238,242,.2);background:rgba(236,238,242,.025);color:var(--soft);font:inherit;font-size:13px;cursor:pointer;transition:color .2s,border-color .2s,background .2s}
.copy:hover{color:var(--fg);border-color:var(--accent)}
.copy .ok{display:none}
.copy.done{color:var(--accent);border-color:var(--accent)}
.copy.done svg:not(.ok){display:none}
.copy.done .ok{display:block;animation:pop .35s cubic-bezier(.2,1.6,.4,1)}

nav{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:640px}
.pill{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:rgba(7,10,18,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--fg);text-decoration:none;font-size:14px;letter-spacing:.04em;transition:transform .25s,border-color .25s,background .25s}
.pill:nth-child(1){animation-delay:1.4s}
.pill:nth-child(2){animation-delay:1.5s}
.pill:nth-child(3){animation-delay:1.6s}
.pill:nth-child(4){animation-delay:1.7s}
.pill:hover{transform:translateY(-3px);border-color:var(--accent);background:rgba(14,20,36,.8)}
.arr{transition:transform .25s}
.pill:hover .arr{transform:translate(2px,-2px)}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.is-paused *,.is-paused *::before,.is-paused *::after{animation-play-state:paused!important}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes breathe{0%,100%{transform:scale(.94);opacity:.10}50%{transform:scale(1.04);opacity:.18}}
@keyframes rise{from{opacity:0;transform:translateY(18px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes reveal{from{clip-path:inset(0 100% 0 0);letter-spacing:.2em}to{clip-path:inset(0 0 0 0);letter-spacing:-.01em}}
@keyframes blink{50%{opacity:0}}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}

@media(min-width:601px){
  .contacts{grid-template-columns:16px auto 44px 40px auto 44px}
  .email>svg{justify-self:end}
}
@media(min-width:601px) and (hover:hover) and (pointer:fine){
  .copy{border-color:transparent;background:transparent}
  .copy:hover,.copy:focus-visible{border-color:var(--line);background:rgba(236,238,242,.04);color:var(--accent)}
  .copy.done{border-color:transparent;background:rgba(245,181,68,.07)}
}
@media(max-width:600px){
  .stage-wrap{padding-top:max(64px,env(safe-area-inset-top,0px));padding-bottom:max(48px,env(safe-area-inset-bottom,0px))}
  main{gap:32px}
  h1{font-size:clamp(24px,7.7vw,34px);white-space:nowrap}
  .contacts{font-size:15px;column-gap:10px}
  nav{gap:10px;max-width:360px}
  .pill{padding:0 15px;-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media(hover:none),(pointer:coarse){main{transform:none;transition:none}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  main{transform:none!important}
  .stage-wrap::before{opacity:0;will-change:auto}
}