@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Syne:wght@400;500;600;700;800&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0e0c12; --panel:#16121f; --panel2:#1c1729;
  --amber:#d4b8ff; --amber-soft:rgba(212,184,255,.13); --amber-border:rgba(212,184,255,.30);
  --pink:#f5b8d4;
  --txt:#f0eaff; --muted:rgba(210,195,240,.55); --line:rgba(220,200,255,.10);
  --green:#9be8c0; --maxw:1080px;
  --serif:'Cormorant Garamond',Georgia,serif;
  --glow:rgba(180,140,255,.16);
  --lang-active-bg:rgba(212,184,255,.22);
  --lang-active-border:rgba(212,184,255,.62);
  --lang-active-glow:rgba(212,184,255,.25);
}
html{scroll-behavior:smooth}

html,body{ cursor:url('Star Normal.cur'), auto; }
a,button,[onclick],[role="button"],.btn,.proj-card,.contact-card{ cursor:url('Star Link.cur'), pointer; }

body{
  background:
    radial-gradient(1100px 640px at 82% -8%, var(--glow) 0%, transparent 55%),
    radial-gradient(760px 520px at 8% 12%, rgba(245,184,212,.06) 0%, transparent 55%),
    var(--bg);
  color:var(--txt); font-family:'Syne',system-ui,sans-serif; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
.mono{font-family:'DM Mono',monospace}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}

.nav{
  position:sticky; top:0; z-index:900;
  background:rgba(14,12,18,.66); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-inner{display:flex; align-items:center; gap:18px; height:64px; max-width:var(--maxw); margin:0 auto; padding:0 22px}
.nav-logo{font-family:var(--serif); font-style:italic; font-weight:600; font-size:24px; letter-spacing:-.01em}
.nav-logo span{color:var(--amber)}
.nav-links{display:none; gap:24px; margin-left:auto; font-family:'DM Mono',monospace; font-size:13.5px; letter-spacing:.02em}
.nav-links a{color:var(--muted); transition:color .15s}
.nav-links a:hover{color:var(--txt)}
.nav-cta{margin-left:auto; display:flex; gap:10px; align-items:center}
@media(min-width:860px){ .nav-links{display:flex} .nav-cta{margin-left:24px} }
.btn{
  display:inline-flex; align-items:center; gap:8px; font-family:'DM Mono',monospace;
  font-size:13.5px; font-weight:500; padding:10px 17px; border-radius:11px;
  border:1px solid transparent; transition:transform .18s, background .18s, border-color .18s, box-shadow .18s;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:linear-gradient(120deg,var(--amber),var(--pink)); color:#1a1023; font-weight:600; box-shadow:0 8px 24px rgba(212,184,255,.18)}
.btn-primary:hover{box-shadow:0 12px 30px rgba(212,184,255,.28)}
.btn-ghost{background:transparent; border-color:var(--line); color:var(--txt)}
.btn-ghost:hover{border-color:var(--amber-border); color:var(--amber)}

.hero{padding:78px 0 56px; text-align:left}
.hero h1{font-size:clamp(40px,7vw,72px); font-weight:800; line-height:1.02; letter-spacing:-.02em; margin:6px 0 8px}
.hero h1 span:last-child{
  font-family:var(--serif); font-style:italic; font-weight:500; letter-spacing:0;
  background:linear-gradient(120deg,var(--amber),var(--pink));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.hero-role{font-family:var(--serif); font-style:italic; color:var(--muted); font-size:clamp(18px,2.8vw,24px); margin-bottom:22px}
.hero-lead{color:var(--muted); font-size:clamp(15px,2.3vw,18px); max-width:680px}
.hero-lead strong{color:var(--txt); font-weight:600}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}

section{padding:56px 0; border-top:1px solid var(--line); animation:proRise .6s cubic-bezier(.2,.7,.2,1) both}
.sec-eyebrow{font-family:'DM Mono',monospace; color:var(--amber); font-size:12.5px; letter-spacing:.2em; text-transform:uppercase}
.sec-title{font-family:var(--serif); font-style:italic; font-weight:600; font-size:clamp(30px,5vw,46px); letter-spacing:-.01em; margin:6px 0 26px}
.lead-text{color:var(--muted); max-width:760px; font-size:16px}

.skills-grid{display:grid; grid-template-columns:1fr; gap:16px}
@media(min-width:680px){.skills-grid{grid-template-columns:repeat(2,1fr)}}
.skill-card{background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01)); border:1px solid var(--line); border-radius:18px; padding:24px; transition:border-color .2s, transform .2s}
.skill-card:hover{border-color:var(--amber-border); transform:translateY(-2px)}
.skill-card h3{font-size:14.5px; margin-bottom:16px; font-family:'DM Mono',monospace; color:var(--amber); letter-spacing:.04em}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{font-family:'DM Mono',monospace; font-size:13px; padding:6px 12px; border-radius:999px; background:var(--amber-soft); border:1px solid var(--line); color:var(--txt)}
.chip em{color:var(--muted); font-style:italic}

.proj-grid{display:grid; grid-template-columns:1fr; gap:18px}
@media(min-width:720px){.proj-grid{grid-template-columns:repeat(2,1fr)}}
.proj-card{position:relative; overflow:hidden; background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01)); border:1px solid var(--line); border-radius:18px; padding:24px; display:flex; flex-direction:column; gap:11px; transition:transform .24s cubic-bezier(.2,.7,.2,1), border-color .24s, box-shadow .24s}
.proj-card::after{content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; background:radial-gradient(360px 180px at 50% -10%, var(--glow), transparent 70%); opacity:0; transition:opacity .3s}
.proj-card:hover{transform:translateY(-4px); border-color:var(--amber-border); box-shadow:0 22px 50px rgba(0,0,0,.42)}
.proj-card:hover::after{opacity:1}
.proj-top{display:flex; justify-content:space-between; align-items:center; gap:10px}
.proj-tag{font-family:'DM Mono',monospace; font-size:12px; color:var(--muted)}
.proj-state{font-family:'DM Mono',monospace; font-size:11px; padding:3px 10px; border-radius:999px}
.proj-state--live{background:rgba(155,232,192,.13); color:var(--green); border:1px solid rgba(155,232,192,.28)}
.proj-state--wip{background:var(--amber-soft); color:var(--amber); border:1px solid var(--amber-border)}
.proj-card h3{font-family:var(--serif); font-style:italic; font-size:24px; font-weight:600}
.proj-card p{color:var(--muted); font-size:14.5px; flex:1; font-family:'Syne',sans-serif}
.proj-stack{display:flex; flex-wrap:wrap; gap:6px; margin-top:4px}
.proj-stack span{font-family:'DM Mono',monospace; font-size:11.5px; color:var(--muted); border:1px solid var(--line); padding:3px 8px; border-radius:7px}

.contact-grid{display:grid; grid-template-columns:1fr; gap:14px; margin-top:8px}
@media(min-width:680px){.contact-grid{grid-template-columns:repeat(3,1fr)}}
.contact-card{display:flex; align-items:center; gap:14px; background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01)); border:1px solid var(--line); border-radius:15px; padding:18px; transition:border-color .2s, transform .2s}
.contact-card:hover{border-color:var(--amber-border); transform:translateY(-2px)}
.contact-ic{display:inline-flex;color:var(--amber)}
.contact-ic svg{width:22px;height:22px;stroke-width:1.7}
.contact-k{font-family:'DM Mono',monospace; font-size:12px; color:var(--muted)}
.contact-v{font-weight:600; font-size:15px}

.foot{padding:38px 0 64px; text-align:center; color:var(--muted); font-family:'DM Mono',monospace; font-size:13px; border-top:1px solid var(--line)}
.foot a{color:var(--amber)}


.lang-bar{ top:auto !important; bottom:20px !important; right:20px !important; }

@keyframes proRise{
  from{opacity:0; transform:translateY(18px)}
  to{opacity:1; transform:translateY(0)}
}
@media (prefers-reduced-motion:reduce){
  section{animation:none}
  .proj-card,.skill-card,.contact-card,.btn{transition:none}
}