:root{
  --bg:#090b16;
  --bg2:#101426;
  --text:#f6f7ff;
  --muted:#aab0c4;
  --line:rgba(255,255,255,.12);
  --glass:rgba(255,255,255,.07);
  --accent:#8ca7ff;
  --accent2:#b99cff;
  --success:#82e3ad;
  --shadow:0 26px 75px rgba(0,0,0,.34);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  background:
    radial-gradient(circle at 15% 5%,rgba(76,94,180,.35),transparent 28%),
    radial-gradient(circle at 88% 18%,rgba(129,77,177,.24),transparent 26%),
    linear-gradient(155deg,var(--bg),var(--bg2));
  font-family:"Manrope",sans-serif;
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.17;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:36px 36px;
  mask-image:linear-gradient(to bottom,#000,transparent 80%);
}
a{color:inherit;text-decoration:none}
.ambient{
  position:fixed;
  width:280px;height:280px;border-radius:50%;
  filter:blur(80px);pointer-events:none;opacity:.18;
}
.ambient-a{background:var(--accent);top:-80px;left:-80px}
.ambient-b{background:var(--accent2);right:-90px;bottom:10%}
.page-shell{
  width:min(100% - 24px,620px);
  margin:auto;
  padding:26px 0 48px;
}
.glass{
  border:1px solid var(--line);
  background:linear-gradient(145deg,rgba(255,255,255,.095),rgba(255,255,255,.035));
  backdrop-filter:blur(20px);
  box-shadow:var(--shadow);
}
.profile-card{
  text-align:center;
  border-radius:30px;
  padding:30px 24px 24px;
}
.profile-orbit{
  width:150px;height:150px;
  margin:2px auto 20px;
  position:relative;
  display:grid;place-items:center;
}
.ring{position:absolute;border:1px solid rgba(255,255,255,.2);border-radius:50%}
.ring-a{width:130px;height:130px}
.ring-b{width:155px;height:95px;transform:rotate(-20deg)}
.avatar {
  width: 98px;
  height: 98px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(185, 156, 255, 0.75);
  box-shadow: 0 0 35px rgba(140, 167, 255, 0.35);
  z-index: 2;
  background: #111525;
}
.avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
.status{
  display:inline-flex;align-items:center;
  padding:8px 11px;border-radius:999px;
  background:rgba(130,227,173,.08);
  border:1px solid rgba(130,227,173,.18);
  color:#c3f2d5;font-size:.72rem;
}
.status i{width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 12px var(--success);margin-right:7px}
h1,h2,h3{font-family:"Space Grotesk",sans-serif;letter-spacing:-.045em}
h1{font-size:clamp(2.25rem,9vw,3.6rem);margin:20px 0 8px}
.roles{color:#d4d9ea;font-size:.9rem;line-height:1.55;margin:0 auto;max-width:470px}
.intro{color:var(--muted);line-height:1.75;font-size:.9rem;max-width:490px;margin:18px auto 0}
.quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px}
.action{
  min-height:50px;
  padding:0 16px;
  display:flex;align-items:center;justify-content:space-between;
  border:1px solid var(--line);
  border-radius:15px;
  background:rgba(255,255,255,.045);
  font-size:.82rem;font-weight:700;
}
.action.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#09101d;border:0}
.action b{font-size:1rem}
.identity-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.info-card{padding:18px;border-radius:18px}
.info-card span{display:block;color:var(--muted);font-size:.67rem;margin-bottom:6px}
.info-card strong{font-size:.84rem;line-height:1.4}
.links-section,.work-section{margin-top:50px}
.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:17px}
.section-heading span{color:#bcc5df;text-transform:uppercase;letter-spacing:.13em;font-size:.67rem}
.section-heading h2{font-size:1.75rem;margin:7px 0 0}
.section-heading.compact h2{font-size:1.55rem}
.link-list{display:grid;gap:9px}
.link-list>a{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:17px 18px;
  border:1px solid var(--line);
  border-radius:17px;
  background:rgba(255,255,255,.04);
}
.link-list span{display:block;font-size:.86rem;font-weight:700;margin-bottom:3px}
.link-list small{color:var(--muted);font-size:.69rem}
.link-list b{font-size:1.1rem}
.project-card{
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  gap:0;
  border-radius:22px;
  overflow:hidden;
  margin-bottom:12px;
}
.project-visual{
  min-height:220px;
  padding:20px;
  display:flex;flex-direction:column;justify-content:flex-end;
}
.project-visual small{font-size:.61rem;letter-spacing:.12em}
.project-visual strong{font-size:2.1rem;line-height:.88;margin-top:11px}
.project-visual.jci{background:linear-gradient(135deg,#13214a,#1f4384 58%,#68a8ff)}
.project-visual.hotel{background:linear-gradient(155deg,#b7cadb 0 42%,#4a6855 42% 100%)}
.project-copy{padding:20px;display:flex;flex-direction:column;justify-content:center}
.project-copy>span{color:#b8c1dd;font-size:.63rem;text-transform:uppercase;letter-spacing:.12em}
.project-copy h3{font-size:1.35rem;margin:10px 0}
.project-copy p{color:var(--muted);line-height:1.55;font-size:.75rem;margin:0}
.project-copy b{font-size:.72rem;margin-top:20px;color:#d6def5}
.focus-section{margin-top:50px;border-radius:24px;padding:22px}
.focus-item{padding:15px 0;border-top:1px solid var(--line)}
.focus-item:first-of-type{margin-top:4px}
.focus-item>div:first-child{display:flex;justify-content:space-between;gap:14px;margin-bottom:10px}
.focus-item b{font-size:.78rem}
.focus-item span{color:var(--muted);font-size:.64rem;text-align:right}
.bar{height:6px;background:rgba(255,255,255,.07);border-radius:99px;overflow:hidden}
.bar i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:1.1s ease}
.focus-section.visible .bar i{width:var(--w)}
.footer{text-align:center;padding:40px 0 5px}
.footer p{font-size:.88rem;margin:0 0 8px}
.footer span{color:var(--muted);font-size:.68rem}
.reveal{opacity:0;transform:translateY(20px);filter:blur(5px);transition:.7s cubic-bezier(.2,.7,.2,1)}
.reveal.visible{opacity:1;transform:none;filter:none}
@media(max-width:460px){
  .page-shell{width:min(100% - 16px,620px);padding-top:10px}
  .profile-card{padding-left:18px;padding-right:18px;border-radius:24px}
  .quick-actions,.identity-grid{grid-template-columns:1fr}
  .project-card{grid-template-columns:1fr}
  .project-visual{min-height:190px}
  .project-copy{padding:18px}
  .focus-item>div:first-child{flex-direction:column}
  .focus-item span{text-align:left}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .reveal{opacity:1;transform:none;filter:none}
}