@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&family=Space+Mono:wght@400;700&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#050d1a;--card:rgba(8,22,55,.55);--border:rgba(100,149,237,.14);
  --txt:#e4eeff;--txt2:rgba(180,200,240,.68);--txt3:rgba(130,160,210,.45);
  --cyan:#06b6d4;--blue:#3b82f6;
  --p1:#f59e0b;--p2:#06b6d4;--p3:#10b981;--p4:#8b5cf6;--p5:#f43f5e;
  --serif:'Noto Serif SC',serif;--sans:'Noto Sans SC',sans-serif;--mono:'Space Mono',monospace;
}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--bg);color:var(--txt);line-height:1.7;overflow-x:hidden;min-height:100vh}

/* BG */
#bg{position:fixed;inset:0;z-index:-2;overflow:hidden}
#bg::before{content:'';position:absolute;inset:-60%;
  background:radial-gradient(ellipse 55% 38% at 18% 42%,rgba(29,78,216,.17) 0%,transparent 65%),
    radial-gradient(ellipse 48% 36% at 82% 18%,rgba(6,182,212,.11) 0%,transparent 65%),
    radial-gradient(ellipse 48% 36% at 62% 82%,rgba(99,102,241,.09) 0%,transparent 65%);
  animation:drift 28s ease-in-out infinite alternate}
#bg::after{content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(100,149,237,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(100,149,237,.025) 1px,transparent 1px);
  background-size:64px 64px}
@keyframes drift{
  0%{transform:translate(-4%,-4%) scale(1)}
  50%{transform:translate(4%,3%) scale(1.04)}
  100%{transform:translate(2%,-2%) scale(.98)}}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 48px;background:rgba(5,13,26,.72);
  backdrop-filter:blur(18px);border-bottom:1px solid var(--border)}
.logo{font-family:var(--serif);font-size:13px;letter-spacing:2px;color:var(--txt2);text-decoration:none}
.nav-links{display:flex;gap:6px;list-style:none}
.nav-links a{font-size:11px;color:var(--txt3);text-decoration:none;letter-spacing:.5px;
  padding:6px 14px;border-radius:6px;transition:color .25s,background .25s}
.nav-links a:hover{color:var(--txt);background:rgba(255,255,255,.06)}
.nav-links a.cur{color:var(--cyan);background:rgba(6,182,212,.08)}

/* WRAP */
.wrap{max-width:1180px;margin:0 auto;padding:0 48px}

/* GLASS */
.glass{background:var(--card);backdrop-filter:blur(14px);border:1px solid var(--border);border-radius:16px}

/* SECTION HEADER */
.sec-label{font-family:var(--mono);font-size:10px;letter-spacing:3px;color:var(--cyan);
  display:flex;align-items:center;gap:10px;margin-bottom:14px}
.sec-label::before{content:'';display:block;width:22px;height:1px;background:var(--cyan)}
.sec-title{font-family:var(--serif);font-size:42px;font-weight:700;line-height:1.25}
.sec-sub{font-size:14px;color:var(--txt2);margin-top:12px;max-width:580px;line-height:1.75}
.sh{margin-bottom:52px}

/* REVEAL */
.r{opacity:0;transform:translateY(26px);transition:opacity .65s ease,transform .65s ease}
.r.on{opacity:1;transform:translateY(0)}
.d1{transition-delay:.08s}.d2{transition-delay:.18s}.d3{transition-delay:.28s}
.d4{transition-delay:.38s}.d5{transition-delay:.48s}

/* PAGE SHELL */
.page{padding:110px 0 80px}

/* PAGE NAV BOTTOM */
.pnav{display:flex;justify-content:space-between;align-items:center;
  margin-top:60px;padding-top:32px;border-top:1px solid var(--border)}
.pnav a{display:flex;align-items:center;gap:10px;text-decoration:none;
  font-size:12px;color:var(--txt3);letter-spacing:1px;transition:color .25s}
.pnav a:hover{color:var(--cyan)}
.pnav .arrow{font-size:16px;color:var(--cyan)}
.pnav .lbl{font-family:var(--mono);font-size:9px;letter-spacing:2px;
  color:var(--txt3);display:block;margin-bottom:2px}
.pnav .name{font-size:13px;color:var(--txt2)}

@keyframes fdUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}}