:root{
  --bg:#f4f1ec;
  --bg-2:#eeeae3;
  --ink:#0e0e0e;
  --ink-2:#1a1a1a;
  --ink-3:#3a3a3a;
  --line:#d8d4cd;
  --blue:#0033ff;
  --blue-2:#1f44ff;
  --yellow:#e9a91b;
  --cream:#f6f1e7;
  --red:#ec4226;
  --rad:18px;
  --easeOut:cubic-bezier(.22,.9,.34,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--ink);font-family:"Noto Sans SC","Inter",system-ui,sans-serif;-webkit-font-smoothing:antialiased;font-feature-settings:"kern","liga","palt"}
html{scroll-behavior:smooth}
body{overflow-x:hidden;overscroll-behavior-y:none}
a{color:inherit;text-decoration:none}
button{font:inherit;border:none;background:none;cursor:pointer;color:inherit}
img{max-width:100%;display:block}

/* ================ cursor ================ */
.cursor,.cursor-dot{position:fixed;top:0;left:0;pointer-events:none;z-index:999;border-radius:50%;mix-blend-mode:difference}
.cursor{width:36px;height:36px;border:1.5px solid #fff;transform:translate(-50%,-50%);transition:width .25s,height .25s,background .25s}
.cursor-dot{width:6px;height:6px;background:#fff;transform:translate(-50%,-50%)}
.cursor.hover{width:64px;height:64px;background:rgba(255,255,255,.12)}
@media (hover:none){.cursor,.cursor-dot{display:none}}

/* ================ header ================ */
.header{
  position:fixed;top:0;left:0;right:0;z-index:40;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:32px;
  padding:14px 28px;background:rgba(244,241,236,.9);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.logo{display:inline-flex}
.logo-circle{
  width:38px;height:38px;border-radius:50%;background:#0a0a0a;color:#fff;
  display:grid;place-items:center;font-family:"Bebas Neue";font-size:22px;letter-spacing:.05em;
  transition:transform .4s var(--easeOut);
}
.logo:hover .logo-circle{transform:rotate(-12deg) scale(1.07)}
.logo-letter{display:block;line-height:1;transform:translateY(1px)}

.nav{display:flex;gap:34px;justify-self:start;font-size:14.5px}
.nav a{position:relative;color:var(--ink-2)}
.nav a::after{
  content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;background:var(--blue);
  transition:width .35s var(--easeOut);
}
.nav a:hover::after{width:100%}

.title-right{display:flex;align-items:center;gap:14px;justify-self:end;font-size:18px}
.title-cn{font-style:italic;font-weight:500}
.title-en{font-family:"Space Grotesk";font-style:italic}
.up-btn{
  width:34px;height:34px;border-radius:50%;border:1px solid var(--ink);
  display:grid;place-items:center;font-size:14px;
  transition:background .3s,color .3s,transform .3s;
}
.up-btn:hover{background:var(--ink);color:#fff;transform:translateY(-2px)}

/* ================ HERO ================ */
.hero{padding:110px 28px 60px;min-height:100vh;display:flex;flex-direction:column;justify-content:center;position:relative}
.hero-grid{
  display:grid;grid-template-columns:0.85fr 1.4fr;gap:36px;align-items:center;
}
.hero-left{display:flex;flex-direction:column;gap:28px;padding-left:8px}
.tags{display:flex;flex-wrap:wrap;gap:10px;max-width:380px}
.tag{
  padding:8px 14px;border:1px solid var(--ink);border-radius:999px;font-size:13px;
  background:var(--bg);transition:transform .35s,background .35s,color .35s;
  will-change:transform;
}
.tag:hover{background:var(--ink);color:var(--bg);transform:translateY(-3px) rotate(-2deg)}

.arrow{width:140px;height:140px;margin-top:6px}
.arrow svg{width:100%;height:100%}

/* blue block + falling */
.hero-right{position:relative}
.blue-block{
  position:relative;background:var(--blue);border-radius:8px;
  height:62vh;min-height:430px;overflow:hidden;
  box-shadow:0 30px 60px -25px rgba(0,51,255,.45);
}
.bb-noise{
  position:absolute;inset:0;opacity:.13;mix-blend-mode:overlay;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.4) 1px,transparent 1px);
  background-size:3px 3px;
}
.bb-meta{
  position:absolute;top:16px;right:18px;display:flex;flex-direction:column;align-items:flex-end;gap:4px;
  font-family:"Space Grotesk";font-size:11px;letter-spacing:.18em;color:#cfd6ff;z-index:3;
}
.bb-meta::before{
  content:"";position:absolute;left:-22px;top:50%;width:14px;height:1px;background:#cfd6ff;
}

/* hero name overlay inside the blue block */
.hero-name{
  position:absolute;top:24px;left:26px;z-index:4;color:#fff;
  display:flex;flex-direction:column;gap:6px;
  pointer-events:none;
  mix-blend-mode:normal;
}
.hn-eyebrow{
  font-family:"Space Grotesk";font-size:11px;letter-spacing:.3em;color:rgba(255,255,255,.7);
}
.hn-name{
  font-family:"Bebas Neue","Inter";font-weight:900;
  font-size:clamp(36px,5.5vw,68px);line-height:.92;letter-spacing:.01em;
  color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.04);
}

.falling{
  position:absolute;left:0;right:0;bottom:32px;
  display:flex;flex-wrap:wrap;justify-content:center;gap:0 6px;padding:0 12px;
  font-family:"Bebas Neue","Inter";font-weight:900;color:#0a0a0a;
  line-height:.86;
}
.falling .ch{
  font-size:clamp(70px,13vw,180px);display:inline-block;transform:translateY(-110vh) rotate(0);
  filter:drop-shadow(0 8px 0 rgba(0,0,0,.05));
  will-change:transform;
}
.falling .ch.break{flex-basis:100%;height:0}

.floor{position:absolute;left:0;right:0;bottom:0;height:8px;background:#0a0a0a}

.scroll-cue{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:0;
  animation:bob 1.6s ease-in-out infinite;opacity:.6;
}
.scroll-cue svg{width:20px;height:12px}
.scroll-cue svg+svg{margin-top:-6px;opacity:.5}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,6px)}}

/* ================ ABOUT ================ */
.about{padding:80px 28px 60px;border-top:1px solid var(--line)}
.about-grid{display:grid;grid-template-columns:380px 1fr;gap:48px;align-items:start}

.hello-card{
  position:relative;border-radius:var(--rad);overflow:hidden;height:600px;
  background:#1a1a1a;color:#fff;
}
.hello-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:grayscale(.55) contrast(1.05) brightness(.85);transition:transform 1.4s var(--easeOut)}
.hello-card:hover .hello-bg{transform:scale(1.05)}
.hello-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,.15) 35%,rgba(0,0,0,.7) 75%,rgba(0,0,0,.92) 100%)}
.hello-content{position:absolute;inset:0;padding:30px;display:flex;flex-direction:column;justify-content:flex-end;gap:18px}
.hello{position:absolute;top:30px;left:30px;font-family:"Space Grotesk";font-size:18px;letter-spacing:.05em}
.hello-name{
  font-family:"Space Grotesk","Inter";font-size:46px;line-height:1.05;font-weight:600;letter-spacing:-.01em;
}
.hello-name .italic{font-style:italic;font-weight:500}
.micro-tags{display:flex;flex-wrap:wrap;gap:7px;max-width:300px}
.micro-tags span{
  padding:5px 10px;border:1px solid rgba(255,255,255,.45);border-radius:99px;font-size:11px;
  color:rgba(255,255,255,.85);
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(2px);
}
.signature{font-family:"Space Grotesk";font-size:13px;letter-spacing:.04em;color:#cfd2d7}

/* intro right */
.intro{padding-top:6px}
.sec-title{
  font-size:28px;font-weight:800;letter-spacing:.01em;margin-bottom:22px;
  position:relative;display:inline-block;
}
.sec-title::after{
  content:"";position:absolute;left:0;right:-8px;bottom:-4px;height:8px;
  background:var(--blue);opacity:.13;border-radius:2px;
}
.quote-box{
  border:1px solid var(--ink);border-radius:14px;padding:22px 26px;margin-bottom:18px;
  background:var(--bg);position:relative;
}
.quote-box .qmark{
  position:absolute;top:-16px;left:18px;background:var(--bg);padding:0 8px;font-size:32px;font-family:"Inter";color:var(--blue);
}
.quote-box p{font-size:18px;font-weight:500}
.intro-p{font-size:14.5px;line-height:1.85;color:var(--ink-2);margin-top:12px}
.intro-p b{font-weight:700;color:var(--ink)}

/* contact */
.contact{margin-top:58px}
.contact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px}
.ct-card{
  position:relative;display:flex;align-items:center;gap:16px;padding:22px 24px;border-radius:18px;
  border:1px solid var(--ink-2);min-height:120px;overflow:hidden;
  transition:transform .4s var(--easeOut),box-shadow .4s;
}
.ct-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -22px rgba(0,0,0,.3)}
.ct-mail{background:#0e0e0e;color:#fff;border-color:#0e0e0e}
.ct-phone{background:var(--blue);color:#fff;border-color:var(--blue)}
.ct-loc{background:#fff;color:var(--ink)}
.ct-ico{width:54px;height:54px;border-radius:14px;background:rgba(255,255,255,.1);display:grid;place-items:center;flex-shrink:0}
.ct-ico-light{background:#ffe7e2;color:#ec4226}
.ct-ico svg{width:30px;height:30px}
.xhs-mark{font-size:12px;font-weight:700;line-height:1.1;color:#ec4226;text-align:center}
.ct-body{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.ct-label{font-size:12px;opacity:.7;letter-spacing:.05em}
.ct-value{font-family:"Space Grotesk";font-size:15px;letter-spacing:.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ct-arrow{font-size:20px;opacity:.7;transition:transform .35s}
.ct-card:hover .ct-arrow{transform:translate(3px,-3px)}

/* ================ RESUME GRID ================ */
.resume{padding:80px 28px 60px;border-top:1px solid var(--line)}
.resume-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;align-items:start}
.col{display:flex;flex-direction:column;gap:18px}
.col-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.more-btn{
  width:34px;height:34px;border-radius:10px;border:1px solid var(--line);
  display:grid;place-items:center;font-size:14px;color:var(--ink-3);
  transition:background .3s,color .3s;
}
.more-btn:hover{background:var(--ink);color:#fff}

.job{
  background:#fff;border:1px solid var(--line);border-radius:var(--rad);padding:20px 22px;
  position:relative;transition:transform .4s var(--easeOut),box-shadow .4s;
}
.job:hover{transform:translateY(-3px);box-shadow:0 20px 40px -25px rgba(0,0,0,.18)}
.job-tag{
  display:inline-block;padding:6px 12px;border-radius:99px;background:var(--bg-2);color:var(--ink-2);
  font-size:12px;margin-bottom:10px;
}
.tag-active{background:var(--blue);color:#fff}
.job-company{display:flex;align-items:center;gap:8px;font-weight:600;margin-bottom:12px}
.dot-blue{width:8px;height:8px;border-radius:50%;background:var(--blue)}
.job-points{list-style:none;display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--ink-2)}
.job-points li{position:relative;padding-left:14px;line-height:1.55}
.job-points li::before{content:"";position:absolute;left:0;top:.7em;width:6px;height:1px;background:var(--ink-3)}
.job-time{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:11.5px;color:var(--ink-3);font-family:"Space Grotesk"}
.job-time .ln{flex:1;height:1px;background:var(--line)}

/* skills */
.skills{
  background:#fff;border:1px solid var(--line);border-radius:var(--rad);padding:22px 24px;
  display:flex;flex-direction:column;gap:12px;font-size:13.5px;line-height:1.75;color:var(--ink-2);
}
.skills b{font-weight:700;color:var(--ink);text-decoration:underline;text-decoration-color:var(--blue);text-underline-offset:3px}

/* radar */
.radar{
  background:#fff;border:1px solid var(--line);border-radius:var(--rad);padding:18px;
  display:grid;place-items:center;
}
.radar-svg{width:100%;max-width:380px;height:auto;display:block}

/* phone card */
.phone-card{
  background:#0e0e0e;color:#fff;border-radius:24px;padding:24px;
  display:flex;flex-direction:column;align-items:center;gap:18px;
  position:relative;overflow:hidden;
}
.phone-card::before{
  content:"";position:absolute;top:-40px;right:-40px;width:160px;height:160px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,51,255,.5) 0%,transparent 70%);filter:blur(10px);
}
.phone{
  width:200px;height:380px;background:#1a1a1a;border-radius:30px;padding:18px 14px 14px;
  position:relative;border:2px solid #2a2a2a;box-shadow:0 20px 50px -20px rgba(0,0,0,.6);
}
.phone-notch{
  position:absolute;top:8px;left:50%;transform:translateX(-50%);
  width:60px;height:18px;background:#0a0a0a;border-radius:99px;
}
.phone-time{
  position:absolute;top:14px;left:18px;font-size:11px;color:#fff;font-family:"Space Grotesk";
}
.phone-screen{margin-top:32px;display:flex;flex-direction:column;align-items:center;gap:8px}
.phone-avatar{
  width:56px;height:56px;border-radius:50%;background:url('assets/avatar.jpg');background-size:cover;background-position:center;
  border:2px solid #fff;
}
.phone-name{font-size:13px;font-weight:600}
.phone-bio{font-size:10px;color:#9ca0a8;text-align:center;line-height:1.5}
.phone-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin-top:8px;width:100%}
.phone-grid div{aspect-ratio:1;background:#2a2a2a;border-radius:3px;background-image:linear-gradient(135deg,#252525 25%,#333 50%,#252525 75%);background-size:200% 200%;animation:shimmer 3s infinite}
.phone-grid div:nth-child(2){animation-delay:.4s}
.phone-grid div:nth-child(3){animation-delay:.8s}
.phone-grid div:nth-child(4){animation-delay:1.2s}
.phone-grid div:nth-child(5){animation-delay:1.6s}
.phone-grid div:nth-child(6){animation-delay:2s}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

.stats{display:flex;justify-content:space-between;width:100%;padding:0 4px}
.stats > div{display:flex;flex-direction:column;align-items:center;gap:4px}
.stats .num{font-family:"Space Grotesk";font-size:22px;font-weight:600;color:#fff}
.stats .lab{font-size:11px;color:#9ca0a8}

/* edu */
.edu{
  background:#fff;border:1px solid var(--line);border-radius:var(--rad);padding:18px 22px;
  transition:transform .4s var(--easeOut);
}
.edu:hover{transform:translateY(-3px)}
.edu-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.edu-time{font-family:"Space Grotesk";font-size:13px;background:#0e0e0e;color:#fff;padding:5px 12px;border-radius:99px;letter-spacing:.04em}
.check{width:24px;height:24px;border-radius:50%;background:var(--bg-2);display:grid;place-items:center;font-size:12px;color:var(--ink-3)}
.edu-school{font-weight:700;font-size:14.5px;margin-bottom:4px}
.edu-major{font-size:13px;color:var(--ink-3)}
.paren{margin-left:6px;font-size:12px}

/* lang */
.lang-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--rad);padding:22px 24px;
  display:flex;flex-direction:column;gap:18px;
}
.lang-row{display:grid;grid-template-columns:120px 1fr 70px;gap:14px;align-items:center}
.lang-name{font-size:14px;font-weight:600;display:flex;gap:6px;align-items:center}
.lang-name .flag{font-size:16px}
.lang-bar{height:6px;border-radius:99px;background:var(--bg-2);overflow:hidden}
.lang-bar span{display:block;height:100%;width:var(--p);background:linear-gradient(90deg,var(--blue),#5577ff);border-radius:99px;transform:scaleX(0);transform-origin:left;animation:langbar 1.4s var(--easeOut) forwards}
@keyframes langbar{to{transform:scaleX(1)}}
.lang-level{font-size:12px;color:var(--ink-3);text-align:right;font-family:"Space Grotesk"}

/* ================ WORKS ================ */
.works{padding:60px 28px 100px;border-top:1px solid var(--line);scroll-margin-top:80px}
.work{padding:60px 0;border-bottom:1px dashed var(--line);scroll-margin-top:80px}
.work:last-of-type{border-bottom:none}
.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.work.alt .work-grid{grid-template-columns:1fr 1fr}
.work.alt .work-text{order:2}
.work.alt .work-vis{order:1}

.work-no{
  font-family:"Space Grotesk";font-size:64px;font-weight:300;color:var(--ink-3);
  letter-spacing:-.02em;margin-bottom:8px;line-height:1;
}
.work-title{
  font-family:"Space Grotesk","Inter";font-size:54px;font-weight:700;letter-spacing:-.01em;line-height:1.05;
  color:var(--ink);
}
.work-sub{font-size:18px;font-weight:500;color:var(--ink-2);margin-top:14px;letter-spacing:.005em}
.work-desc{font-size:14.5px;line-height:1.85;color:var(--ink-2);margin-top:22px;max-width:520px}
.kpi{list-style:none;margin-top:18px}
.kpi li{display:flex;flex-wrap:wrap;gap:8px}
.kpi li span{
  padding:5px 12px;background:var(--bg-2);border-radius:99px;font-size:12px;color:var(--ink-2);
}
.ghost-btn{
  display:inline-flex;align-items:center;gap:10px;padding:14px 28px;border:1.5px solid var(--ink);border-radius:99px;
  font-size:15px;font-weight:600;margin-top:30px;background:transparent;
  transition:background .35s,color .35s,transform .35s;
}
.ghost-btn:hover{background:var(--ink);color:#fff;transform:translateY(-2px)}
.ghost-btn span{font-size:18px}

/* visuals */
.work-vis{display:flex;justify-content:center;align-items:center;min-height:380px;position:relative}

/* monitor work01 */
.device{position:relative;display:flex;flex-direction:column;align-items:center}
.monitor{}
.monitor .screen{
  width:420px;height:260px;border-radius:14px;background:var(--yellow);
  position:relative;overflow:hidden;border:2px solid #1a1a1a;
  box-shadow:0 25px 50px -25px rgba(233,169,27,.6);
}
.screen-yellow{background:linear-gradient(135deg,#e9a91b,#d99412)}
.beer-mug{
  position:absolute;left:30px;bottom:30px;width:100px;height:140px;
  background:linear-gradient(180deg,#fff7d2 0%,#ffd66e 60%,#c98807 100%);
  border-radius:8px 8px 4px 4px;border:3px solid #4a2810;
}
.beer-mug::before{
  content:"";position:absolute;top:-20px;left:10px;right:10px;height:30px;border-radius:50%;background:#fff;
  box-shadow:0 -4px 0 #f3e6c0;
}
.beer-mug::after{
  content:"";position:absolute;right:-22px;top:20px;width:24px;height:60px;border:3px solid #4a2810;border-left:none;border-radius:0 8px 8px 0;
}
.screen-title{
  position:absolute;right:36px;top:36px;font-family:"Bebas Neue";font-size:54px;line-height:1;color:#4a2810;letter-spacing:.04em;
}
.screen-leaf{
  position:absolute;top:0;right:0;width:60%;height:50px;
  background:radial-gradient(ellipse at top,rgba(74,40,16,.25),transparent 70%);
}
.stand{width:100px;height:30px;background:linear-gradient(180deg,#bdbdbd,#888);clip-path:polygon(20% 0,80% 0,100% 100%,0% 100%);margin-top:-2px}
.base{width:160px;height:14px;background:#888;border-radius:6px;margin-top:-2px}

/* tablet work02 */
.tablet{}
.tablet .screen{
  width:340px;height:430px;border-radius:24px;background:#f6f1e7;
  border:3px solid #1a1a1a;position:relative;overflow:hidden;padding:32px 26px;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.4);
}
.screen-cream{background:linear-gradient(180deg,#f6f1e7,#ece7da)}
.cream-headline{
  font-family:"Inter","Space Grotesk";font-weight:900;font-size:42px;line-height:.95;
  color:var(--red);letter-spacing:-.02em;
}
.cream-bubble{
  position:absolute;right:30px;top:34px;width:36px;height:36px;border-radius:50%;background:var(--red);
  display:grid;place-items:center;
}
.cream-bubble::after{content:"→";color:#fff;font-weight:700}
.cream-stick{
  position:absolute;left:50%;bottom:120px;width:22px;height:60px;border:2px solid #1a1a1a;border-radius:50% 50% 30% 30%;
  transform:translateX(-90px);
}
.cream-stick.s2{transform:translateX(-30px);bottom:140px}
.cream-stick.s3{transform:translateX(40px);bottom:110px}
.cream-line{
  position:absolute;left:30px;right:30px;bottom:90px;height:2px;background:var(--red);border-radius:99px;
  transform-origin:left;
}
.cream-tagline{
  position:absolute;left:30px;right:30px;bottom:30px;font-size:13px;color:var(--ink-2);text-decoration:underline;
}
.phone-mini{margin-left:-80px;margin-top:60px;align-self:flex-end}
.phone-mini .screen{
  width:180px;height:330px;border-radius:24px;background:#1a1a1a;padding:24px 12px;
  border:2px solid #1a1a1a;display:flex;flex-direction:column;gap:8px;
  box-shadow:0 25px 50px -22px rgba(0,0,0,.5);
}
.mini-list{height:50px;background:#2a2a2a;border-radius:6px;background-image:linear-gradient(90deg,#262626 25%,#3a3a3a 50%,#262626 75%);background-size:400% 100%;animation:shimmer 3s infinite}

/* poster work03 */
.poster{
  width:340px;height:480px;background:linear-gradient(180deg,#f7e8d2 0%,#e6c89c 100%);border:2px solid #1a1a1a;border-radius:6px;
  position:relative;overflow:hidden;padding:30px;display:flex;flex-direction:column;justify-content:flex-end;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.5);
}
.rainbow{
  position:absolute;left:0;right:0;top:80px;height:160px;
  background:linear-gradient(180deg,
    #f44336 0,#f44336 20%,
    #ff9800 20%,#ff9800 36%,
    #ffeb3b 36%,#ffeb3b 52%,
    #4caf50 52%,#4caf50 68%,
    #2196f3 68%,#2196f3 84%,
    #9c27b0 84%,#9c27b0 100%);
  clip-path:polygon(0 6%,12% 0,28% 8%,46% 0,62% 7%,80% 0,100% 5%,100% 95%,82% 100%,64% 92%,42% 100%,26% 91%,10% 100%,0 94%);
  opacity:.85;
}
.poster-headline{
  font-family:"Bebas Neue","Inter";font-weight:900;font-size:90px;line-height:.85;letter-spacing:-.02em;
  color:#1a1a1a;position:relative;z-index:2;
}
.poster-headline span{color:var(--red)}
.poster-sub{font-size:13px;font-style:italic;color:#3a2a14;margin-top:14px;position:relative;z-index:2}
.poster-tear{
  position:absolute;left:0;right:0;top:54%;height:24px;
  background:#fffbef;clip-path:polygon(0 0,5% 60%,12% 20%,20% 80%,28% 30%,38% 70%,48% 25%,58% 75%,68% 35%,78% 65%,88% 30%,96% 70%,100% 30%,100% 100%,0 100%);
}

/* belt work04 */
.belt-stage{
  width:380px;height:380px;display:grid;place-items:center;
  background:radial-gradient(circle,#f7f5f0 30%,transparent 70%);
  position:relative;
}
.belt{
  width:280px;height:50px;background:linear-gradient(90deg,#3a3a3a,#1a1a1a 50%,#3a3a3a);
  border-radius:99px;position:relative;
  box-shadow:0 20px 40px -10px rgba(0,0,0,.4),inset 0 -3px 0 rgba(255,255,255,.05);
}
.belt::before{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:60px;height:60px;background:linear-gradient(135deg,#0033ff,#5577ff);border-radius:14px;
  box-shadow:0 8px 16px -4px rgba(0,51,255,.5);
}
.belt::after{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:14px;height:14px;background:#fff;border-radius:50%;animation:blip 1.4s infinite;
}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.3}}
.belt-pulse{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:100px;height:100px;border:2px solid var(--blue);border-radius:50%;
  animation:pulse-ring 2.4s infinite;
}
.belt-pulse.p2{animation-delay:1.2s}
@keyframes pulse-ring{0%{width:60px;height:60px;opacity:.7}100%{width:240px;height:240px;opacity:0}}
.belt-tag{
  position:absolute;bottom:30px;left:50%;transform:translateX(-50%);
  font-family:"Space Grotesk";font-size:11px;letter-spacing:.2em;color:var(--ink-3);
  padding:6px 12px;background:#fff;border:1px solid var(--line);border-radius:99px;
}

/* ================ FOOTER ================ */
.footer{padding:60px 0 24px;background:#0a0a0a;color:#fff;overflow:hidden}
.ft-marquee{overflow:hidden;padding:8px 0;border-top:1px solid #1a1a1a;border-bottom:1px solid #1a1a1a}
.ft-track{display:flex;gap:36px;white-space:nowrap;animation:marq 30s linear infinite;font-family:"Bebas Neue","Inter";font-size:48px;letter-spacing:.04em}
.ft-track span{flex-shrink:0}
@keyframes marq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.ft-bottom{display:flex;justify-content:space-between;padding:30px 28px 0;font-size:12px;color:#9ca0a8;flex-wrap:wrap;gap:14px}

/* ================ reveal ================ */
.reveal{opacity:0;transform:translateY(40px);transition:opacity 1s var(--easeOut),transform 1s var(--easeOut)}
.reveal.is-in{opacity:1;transform:none}

/* ================ responsive ================ */
@media (max-width:1100px){
  .resume-grid{grid-template-columns:1fr 1fr}
  .resume-grid .col:nth-child(3){grid-column:span 2}
  .work-title{font-size:42px}
}
@media (max-width:880px){
  .header{grid-template-columns:auto auto 1fr;gap:14px;padding:10px 16px}
  .header .nav{justify-self:end;gap:18px}
  .title-right{display:none}
  .hero{padding:120px 16px 40px}
  .hero-grid{grid-template-columns:1fr;gap:24px}
  .arrow{width:80px;height:80px}
  .blue-block{height:50vh;min-height:340px}
  .about{padding:60px 16px}
  .about-grid{grid-template-columns:1fr;gap:30px}
  .hello-card{height:520px}
  .contact-cards{grid-template-columns:1fr}
  .resume{padding:60px 16px}
  .resume-grid{grid-template-columns:1fr}
  .resume-grid .col:nth-child(3){grid-column:span 1}
  .works{padding:40px 16px 80px}
  .work-grid{grid-template-columns:1fr;gap:30px}
  .work.alt .work-text{order:1}
  .work.alt .work-vis{order:2}
  .work-title{font-size:34px}
  .work-no{font-size:48px}
  .ft-track{font-size:32px}
  .notice{font-size:10.5px;padding:0 14px}
  .nav{font-size:13px}
  .ct-value{font-size:13px}
}
@media (max-width:520px){
  .tags{max-width:100%}
  .monitor .screen{width:300px;height:200px}
  .tablet .screen{width:260px;height:340px}
  .phone-mini{display:none}
  .poster{width:260px;height:360px}
  .belt-stage{width:300px;height:300px}
  .belt{width:220px}
  .hello-name{font-size:36px}
  .work-title{font-size:28px}
  .sec-title{font-size:22px}
}