:root{
  --bg:#02050f;
  --bg-soft:#071426;
  --panel:rgba(8,20,38,.78);
  --panel-strong:rgba(8,20,38,.92);
  --line:rgba(90,195,255,.23);
  --line-soft:rgba(255,255,255,.10);
  --text:#f8fafc;
  --muted:#bed0df;
  --soft:#8fa7bd;
  --gold:#d8b45f;
  --cyan:#28d7ff;
  --green:#6ee7b7;
  --purple:#b56cff;
  --max:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 8% 18%,rgba(40,215,255,.22),transparent 28%),
    radial-gradient(circle at 88% 10%,rgba(216,180,95,.13),transparent 24%),
    radial-gradient(circle at 78% 84%,rgba(181,108,255,.15),transparent 28%),
    linear-gradient(180deg,#02050f,#071426 52%,#02050f);
  line-height:1.62;
  overflow-x:hidden;
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-2;
  background-image:
    linear-gradient(rgba(40,215,255,.052) 1px,transparent 1px),
    linear-gradient(90deg,rgba(40,215,255,.052) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.75),transparent 82%);
}
body:after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(120deg,transparent 20%,rgba(40,215,255,.06) 20.15%,transparent 20.35%),
    linear-gradient(34deg,transparent 42%,rgba(216,180,95,.055) 42.2%,transparent 42.45%);
  opacity:.85;
}
a{color:inherit;text-decoration:none}
.container{width:min(100% - 38px,var(--max));margin:auto}
.nav{
  height:84px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 38px;
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(2,5,15,.82);
  border-bottom:1px solid var(--line-soft);
  backdrop-filter:blur(16px);
}
.logo{display:flex;align-items:center;gap:14px;font-weight:900}
.logo-mark{
  width:48px;height:48px;border-radius:15px;border:1px solid var(--gold);
  color:var(--gold);display:grid;place-items:center;background:rgba(216,180,95,.06);
  box-shadow:0 0 24px rgba(216,180,95,.13);
}
.logo-name{font-size:1.28rem;line-height:1.05}
.logo-name span{color:var(--gold)}
.logo-sub{display:block;font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:#e5e7eb;margin-top:5px}
.links{display:flex;gap:22px;color:#edf2f7;font-weight:650;font-size:.96rem}
.links a:hover,.links a.active{color:var(--gold)}
.langs{display:flex;gap:8px}
.lang{border:1px solid rgba(216,180,95,.45);color:var(--gold);border-radius:14px;padding:8px 11px;font-weight:850;font-size:.86rem}

.hero{
  min-height:calc(100vh - 84px);
  padding:78px 0 46px;
  position:relative;
  display:grid;
  align-items:center;
}
.hero:after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:350px;
  background:
    radial-gradient(ellipse at 50% 30%,rgba(40,215,255,.21),transparent 34%),
    linear-gradient(170deg,transparent 40%,rgba(40,215,255,.15) 41%,transparent 43%);
  opacity:.86;
  pointer-events:none;
}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:58px;align-items:center;position:relative;z-index:2}
.eyebrow{color:var(--gold);letter-spacing:.17em;text-transform:uppercase;font-size:.78rem;font-weight:900;margin-bottom:18px}
h1{font-size:clamp(3.25rem,7vw,6.25rem);line-height:1.03;letter-spacing:-.075em;margin:0 0 18px}
h1 .gold{color:var(--gold)}
h1 .subline{display:block;color:#dbe3ee;font-weight:430;font-size:.61em;letter-spacing:-.04em}
.lead{font-size:1.18rem;color:#e5eef9;max-width:650px}
.manifesto{
  margin-top:22px;
  padding:18px 22px;
  border-left:3px solid var(--gold);
  background:rgba(216,180,95,.07);
  border-radius:0 18px 18px 0;
  color:#f2f5f9;
  max-width:660px;
  font-size:1.06rem;
}
.buttons{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.btn{display:inline-flex;align-items:center;gap:12px;border-radius:14px;padding:14px 22px;border:1px solid var(--line);font-weight:850}
.btn.primary{background:linear-gradient(135deg,#f2cc72,var(--gold));color:#06101f;border:0}
.btn.secondary{background:rgba(255,255,255,.04)}

.wheel-wrap{display:grid;justify-items:center;gap:18px}
.wheel{
  width:min(515px,100%);
  aspect-ratio:1;
  border-radius:50%;
  position:relative;
  display:grid;
  place-items:center;
  filter:drop-shadow(0 0 34px rgba(40,215,255,.18));
}
.wheel:before{
  content:"";
  position:absolute;inset:80px;
  border:1px solid rgba(40,215,255,.28);
  border-radius:28px;
  transform:rotate(45deg);
  background:rgba(2,6,18,.62);
}
.center{
  z-index:2;width:205px;height:205px;border-radius:30px;
  display:grid;place-items:center;text-align:center;
  background:rgba(2,6,18,.86);border:1px solid rgba(40,215,255,.36);
  font-size:1.35rem;font-weight:900;line-height:1.3;
  box-shadow:inset 0 0 30px rgba(40,215,255,.07);
}
.node{
  position:absolute;width:145px;height:105px;clip-path:polygon(22% 0,78% 0,100% 50%,78% 100%,22% 100%,0 50%);
  display:grid;place-items:center;text-align:center;padding:12px;
  border:1px solid rgba(40,215,255,.42);
  background:rgba(7,18,34,.82);
  font-size:.78rem;color:#edf7ff;
  transition:.25s ease;
}
.node:hover{transform:scale(1.05);filter:brightness(1.25);border-color:var(--gold)}
.node b{display:block;color:var(--cyan);font-size:1rem}
.n1{top:0;left:50%;transform:translateX(-50%)}.n1:hover{transform:translateX(-50%) scale(1.05)}
.n2{right:18px;top:78px}
.n3{right:18px;top:205px}
.n4{right:58px;bottom:56px}
.n5{bottom:0;left:50%;transform:translateX(-50%)}.n5:hover{transform:translateX(-50%) scale(1.05)}
.n6{left:58px;bottom:56px}
.n7{left:18px;top:205px}
.n8{left:18px;top:78px}
.framework-link{border:1px solid rgba(40,215,255,.75);border-radius:13px;padding:12px 20px;background:rgba(5,25,42,.72);box-shadow:0 0 22px rgba(40,215,255,.18)}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:36px;border:1px solid rgba(255,255,255,.12);border-radius:19px;background:rgba(7,18,34,.76);overflow:hidden;position:relative;z-index:2}
.stat{padding:18px 22px;border-right:1px solid rgba(255,255,255,.12)}
.stat:last-child{border-right:0}.stat strong{display:block;font-size:1.05rem}.stat span{font-size:.86rem;color:var(--muted)}

.section{padding:82px 0;border-top:1px solid rgba(255,255,255,.08)}
.section-header{max-width:930px;margin-bottom:34px}
h2{font-size:clamp(2.25rem,4vw,4.1rem);letter-spacing:-.055em;line-height:1.08;margin:0 0 18px}
.section-header p{font-size:1.14rem;color:var(--muted)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:22px;
  padding:24px;
  min-height:220px;
  box-shadow:0 20px 70px rgba(0,0,0,.18);
}
.card h3{margin:0 0 12px;line-height:1.18}
.card p{color:var(--muted);margin:0}
.card-icon{font-size:2rem;margin-bottom:14px}
.tag-row{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
.tag{border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:7px 10px;color:#dbeafe;font-size:.84rem;background:rgba(255,255,255,.04)}

.journey{display:grid;gap:24px;position:relative}
.journey:before{content:"";position:absolute;left:calc(50% - 1px);top:0;bottom:0;width:2px;background:linear-gradient(var(--cyan),var(--gold),var(--purple));opacity:.35}
.moment{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;position:relative}
.moment:nth-child(even) .moment-media{order:2}
.moment-card{background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:28px;box-shadow:0 28px 80px rgba(0,0,0,.22)}
.year{color:var(--gold);font-weight:950;letter-spacing:.12em;text-transform:uppercase;font-size:.84rem;margin-bottom:10px}
.moment-card h3{font-size:1.55rem;line-height:1.15;margin:0 0 12px}.moment-card p{color:var(--muted);margin:0}
.moment-media img{width:100%;max-height:430px;object-fit:cover;border-radius:24px;border:1px solid rgba(255,255,255,.14);box-shadow:0 28px 80px rgba(0,0,0,.24)}

.cert-dashboard{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.skillbar{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:18px}
.skillbar strong{display:flex;justify-content:space-between;margin-bottom:10px}
.bar{height:10px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--cyan),var(--gold))}
.notice{border:1px solid rgba(216,180,95,.33);background:rgba(216,180,95,.08);border-radius:22px;padding:22px;color:#e5eef9}
.footer{padding:34px;text-align:center;color:var(--soft);border-top:1px solid rgba(255,255,255,.10);background:rgba(2,6,18,.82)}
@media(max-width:1050px){
  .hero-grid,.moment,.grid-4,.grid-3,.cert-dashboard{grid-template-columns:1fr}
  .journey:before{display:none}.moment:nth-child(even) .moment-media{order:0}
  .stats{grid-template-columns:1fr}.stat{border-right:0;border-bottom:1px solid rgba(255,255,255,.12)}
  .links{display:none}.nav{padding:0 18px}.logo-sub{display:none}
  .node{display:none}.wheel{width:330px}.center{width:200px;height:200px}
}