@import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@400;500;600;700;800&display=swap');

:root { --ink:#07080a; --blue:#c8d0db; --silver-bright:#f5f8fc; --acid:#e7ff00; --muted:#89929e; --line:rgba(200,208,219,.2); --gutter:clamp(22px,4vw,64px); }
* { box-sizing:border-box; }
html, body, .single-screen { width:100%; height:100%; overflow:hidden; }
body { margin:0; color:#f4f8ff; background:var(--ink); font-family:'Oxanium', Arial, Helvetica, sans-serif; }
a { color:inherit; }

.topbar { position:fixed; inset:0 0 auto; z-index:3; display:flex; align-items:center; height:70px; padding:0 var(--gutter); color:#fff; mix-blend-mode:screen; pointer-events:none; }
.brand { pointer-events:auto; font-size:25px; font-weight:900; line-height:1; letter-spacing:-.1em; text-decoration:none; }

.hero { position:relative; display:block; height:100svh; overflow:hidden; background:var(--ink); }
.hero::before { position:absolute; inset:-25%; z-index:0; content:''; background:radial-gradient(ellipse at 18% 52%,rgba(214,225,241,.16),transparent 32%),radial-gradient(ellipse at 78% 44%,rgba(155,169,190,.14),transparent 35%),radial-gradient(ellipse at 48% 85%,rgba(211,220,233,.1),transparent 30%); animation:silver-drift 14s ease-in-out infinite alternate; pointer-events:none; }
.hero-fx { position:absolute; inset:0; z-index:0; width:100%; height:100%; pointer-events:none; }
.hero-copy, .portrait-wrap, .profile-data, .contact-strip { position:absolute; z-index:1; }
.hero-copy { top:clamp(136px,20vh,240px); right:var(--gutter); left:var(--gutter); }
h1 { margin:0; color:var(--silver-bright); font-size:clamp(52px,min(10.5vw,20svh),168px); font-weight:800; line-height:.82; letter-spacing:-.025em; white-space:nowrap; }
.hero-letter { display:inline-block; margin-right:.02em; background:linear-gradient(180deg,#fff 0%,#c3ccd8 32%,#f9fbff 53%,#a0aab8 78%,#e8edf4 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; text-shadow:0 0 30px rgba(255,255,255,.07); transition:filter .16s ease,transform .16s ease; }
.hero-letter.is-lit { background:none; -webkit-text-fill-color:var(--acid); filter:drop-shadow(0 0 7px rgba(231,255,0,.9)) drop-shadow(0 0 18px rgba(231,255,0,.35)); transform:translateY(-.025em); }
.intro { max-width:350px; margin:clamp(20px,3vw,38px) 0 0; color:#dbe3ee; font-size:clamp(12px,1vw,15px); line-height:1.45; }

.portrait-wrap { right:var(--gutter); bottom:18%; width:clamp(104px,12vw,185px); aspect-ratio:.74; margin:0; overflow:hidden; border:1px solid rgba(168,178,193,.4); background:#0c0e12; box-shadow:0 0 0 6px rgba(0,0,0,.6),0 0 30px rgba(255,255,255,.06); }
.portrait { display:block; width:100%; height:100%; object-fit:cover; object-position:50% 52%; filter:saturate(.85) contrast(1.15) brightness(.9); user-select:none; -webkit-user-drag:none; }
.portrait-wrap::after { position:absolute; inset:0; content:''; background:linear-gradient(135deg,transparent 45%,rgba(168,178,193,.12)); mix-blend-mode:screen; pointer-events:none; }
figcaption { position:absolute; z-index:1; right:7px; bottom:8px; font-size:7px; font-weight:700; letter-spacing:.1em; writing-mode:vertical-rl; }

.profile-data { bottom:13%; left:var(--gutter); display:flex; gap:clamp(24px,5vw,90px); }
.profile-data p { margin:0; color:#e2e7f0; font-size:clamp(9px,.8vw,11px); font-weight:700; line-height:1.25; letter-spacing:.08em; }
.profile-data span { display:block; margin-bottom:7px; color:var(--blue); font-size:.78em; }

.contact-strip { right:var(--gutter); bottom:22px; left:var(--gutter); display:flex; align-items:center; justify-content:space-between; padding-top:14px; border-top:1px solid var(--line); color:var(--muted); font-size:clamp(8px,.75vw,10px); font-weight:700; letter-spacing:.09em; }
.contact-strip a { color:var(--blue); font-size:clamp(13px,1.7vw,21px); text-decoration:none; }
.contact-strip b { margin-left:9px; font-size:20px; }

@keyframes silver-drift {
  from { transform:translate3d(-3%,-2%,0) scale(1); }
  to { transform:translate3d(4%,3%,0) scale(1.08); }
}

@media (hover:hover) and (pointer:fine) {
  body, a, button { cursor:none; }
  .cursor { position:fixed; z-index:10; top:0; left:0; width:18px; height:18px; border:2px solid var(--acid); border-radius:50%; background:var(--ink); opacity:0; pointer-events:none; transform:translate(-50%,-50%); transition:width .18s ease,height .18s ease,background-color .18s ease,opacity .18s ease; }
  .cursor.is-visible { opacity:1; }
  .cursor.is-active { width:26px; height:26px; background:#131609; }
}

@media (max-width:700px) {
  .hero-copy { top:20%; right:22px; left:22px; }
  h1 { font-size:clamp(44px,min(15.3vw,17svh),76px); line-height:.78; }
  .intro { max-width:245px; margin-top:18px; font-size:12px; }
  .portrait-wrap { right:22px; bottom:25%; width:98px; }
  .profile-data { right:22px; bottom:15%; left:22px; justify-content:space-between; gap:8px; }
  .profile-data p { font-size:8px; }
  .profile-data span { font-size:7px; }
  .contact-strip { right:22px; bottom:14px; left:22px; padding-top:10px; font-size:7px; }
  .contact-strip a { font-size:11px; }
  .contact-strip b { font-size:13px; }
}

@media (prefers-reduced-motion:reduce) { .hero::before { animation:none; } .hero-fx { display:none; } }