/* Reference-inspired black-gold art direction and Arkie motion system */
.hero{
  background:
    radial-gradient(circle at 78% 45%,rgba(255,175,27,.18),transparent 25%),
    linear-gradient(115deg,transparent 54%,rgba(255,184,35,.05) 54.3%,transparent 55%),
    linear-gradient(70deg,transparent 65%,rgba(255,92,22,.06) 65.3%,transparent 66%);
}
.hero:before{
  content:"";position:absolute;inset:-20% -12% -20% 48%;z-index:-1;pointer-events:none;
  background:conic-gradient(from 245deg at 50% 50%,transparent 0 8deg,rgba(255,190,40,.09) 9deg 12deg,transparent 13deg 25deg,rgba(255,107,20,.07) 26deg 30deg,transparent 31deg 360deg);
  filter:blur(1px);animation:energy-rays 18s linear infinite;
}
.hero-copy h1{text-shadow:0 4px 0 rgba(70,36,3,.72),0 13px 30px rgba(0,0,0,.62)}
.hero-copy h1 em{background:linear-gradient(180deg,#fff9d2 0,#ffd74e 45%,#f7a41b 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 0 #5b2b05) drop-shadow(0 0 16px rgba(247,191,36,.12))}
.eyebrow{padding:9px 13px;border:1px solid rgba(247,191,36,.22);border-left:3px solid var(--orange);width:max-content;background:linear-gradient(90deg,rgba(255,156,21,.1),transparent);clip-path:polygon(0 0,96% 0,100% 50%,96% 100%,0 100%)}
.primary,.nav-cta{box-shadow:inset 0 1px rgba(255,255,255,.42),0 8px 24px rgba(255,159,28,.18);position:relative;overflow:hidden}
.primary:after,.nav-cta:after{content:"";position:absolute;inset:-80% auto -80% -30%;width:24%;background:rgba(255,255,255,.42);transform:rotate(18deg);animation:button-sheen 5s ease-in-out infinite}
.steps article,.day,.result-grid div{clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));box-shadow:inset 0 0 0 1px rgba(247,191,36,.03)}
.steps article.featured{box-shadow:inset 0 0 38px rgba(247,191,36,.055),0 18px 50px rgba(0,0,0,.28)}
.section-head h2 em,.result-copy h2 em{background:linear-gradient(180deg,#fff1a7,#f5b51e 62%,#d9760a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 rgba(72,35,0,.7))}
.hero-visual{--tilt-x:0deg;--tilt-y:0deg;perspective:1000px}
.mascot-card{transform-style:preserve-3d;animation:arkie-float 5.6s ease-in-out infinite;transition:transform .35s ease,box-shadow .35s ease;will-change:transform;box-shadow:0 40px 100px rgba(0,0,0,.52),0 0 0 1px rgba(255,202,63,.13),0 0 65px rgba(255,137,23,.1)}
.mascot-card:before{content:"";position:absolute;inset:-30%;z-index:2;background:linear-gradient(112deg,transparent 35%,rgba(255,239,177,.36) 48%,transparent 61%);transform:translateX(-65%) rotate(8deg);animation:helmet-gleam 6.8s ease-in-out infinite;pointer-events:none}
.mascot-card:after{z-index:3}
.mascot-card img{animation:arkie-breathe 4.2s ease-in-out infinite;transform-origin:50% 66%;will-change:transform}
.hero-visual.is-hovering .mascot-card{transform:rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(-8px) scale(1.025);box-shadow:0 55px 120px rgba(0,0,0,.56),0 0 70px rgba(247,191,36,.18)}
.hero-visual.is-hovering .mascot-card img{animation-play-state:paused;transform:translate(-4%,2%) scale(1.02)}
.orbit{will-change:transform;box-shadow:inset 0 0 22px rgba(255,170,25,.04),0 0 20px rgba(255,137,23,.03)}
.orbit:after{content:"";position:absolute;width:9px;height:9px;border-radius:50%;background:#fff1a2;box-shadow:0 0 8px #fff,0 0 22px 7px rgba(247,191,36,.72);top:50%;left:-5px}
.orbit-one{animation:orbit-one-spin 18s linear infinite}.orbit-two{animation:orbit-two-spin 24s linear infinite reverse}
.spark{animation:spark-pulse 2.4s ease-in-out infinite}.s1{animation-delay:-.4s}.s2{animation-delay:-1.2s}.s3{animation-delay:-1.8s}
.floating-tag{animation:tag-drift 4.8s ease-in-out infinite;border-color:rgba(255,194,54,.28);clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px))}.tag-one{animation-delay:-1.1s}.tag-two{animation-delay:-3.2s}
.ticker{background:linear-gradient(90deg,#0b0c0e,#1a1308,#0b0c0e);box-shadow:inset 0 1px rgba(255,209,90,.08),inset 0 -1px rgba(255,209,90,.08)}
@keyframes energy-rays{to{transform:rotate(360deg)}}
@keyframes button-sheen{0%,68%{left:-35%}82%,100%{left:135%}}
@keyframes arkie-float{0%,100%{transform:translateY(0) rotate(-.35deg)}50%{transform:translateY(-14px) rotate(.5deg)}}
@keyframes arkie-breathe{0%,100%{transform:translate(-4%,3%) scale(1)}48%{transform:translate(-4%,1.8%) scale(1.012)}58%{transform:translate(-4%,2.2%) scale(1.008)}}
@keyframes helmet-gleam{0%,62%{transform:translateX(-72%) rotate(8deg);opacity:0}70%{opacity:1}84%,100%{transform:translateX(72%) rotate(8deg);opacity:0}}
@keyframes orbit-one-spin{from{transform:rotate(-24deg)}to{transform:rotate(336deg)}}
@keyframes orbit-two-spin{from{transform:rotate(33deg)}to{transform:rotate(393deg)}}
@keyframes spark-pulse{0%,100%{opacity:.3;transform:scale(.65)}50%{opacity:1;transform:scale(1.25)}}
@keyframes tag-drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@media(max-width:600px){.eyebrow{margin-inline:auto}.mascot-card{animation-duration:6.4s}.orbit-one{animation-duration:24s}.orbit-two{animation-duration:30s}.floating-tag{animation-duration:6s}}
@media(prefers-reduced-motion:reduce){*{animation:none!important}.hero-visual.is-hovering .mascot-card{transform:none}.hero-visual.is-hovering .mascot-card img{transform:translate(-4%,3%)}}

/* Readability pass: clear Traditional/Simplified Chinese on dark backgrounds */
body{
  color:#fffdf7;
  font-family:"Microsoft JhengHei","Microsoft YaHei","PingFang TC","PingFang SC","Noto Sans CJK TC",system-ui,sans-serif;
  font-weight:500;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.nav nav{color:#e2e3e5;font-size:15px;font-weight:700}
.nav-cta,.primary,.secondary{font-weight:800;letter-spacing:.01em}
.hero-copy h1{letter-spacing:-.035em;text-shadow:0 3px 0 rgba(45,24,3,.55),0 10px 24px rgba(0,0,0,.42)}
.hero-copy h1 em{
  background:linear-gradient(180deg,#fffbe7 0,#ffe06b 42%,#ffb625 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 0 rgba(80,39,2,.78)) drop-shadow(0 0 12px rgba(247,191,36,.12));
}
.lead{color:#dedede;font-size:19px;font-weight:500;line-height:1.85}
.proof span{color:#c3c5c9;font-weight:600}.proof strong{color:#fffdf8}
.section-head p,.result-copy p{color:#cfd0d3;font-size:17px;font-weight:500}
.steps p{color:#c8c9cc;font-size:15px;font-weight:500}.steps small{color:#f0ca72;font-weight:700}
.industry{color:#d2d3d6;font-weight:700}.industry select{font-weight:700}
.day p{color:#c6c8cd;font-size:14px;font-weight:500}.day button{color:#f0f1f2;font-weight:700;font-size:13px}
.course-progress{color:#c5c7ca;font-size:13px;font-weight:700}
.floating-tag strong{color:#fff;font-weight:800}.floating-tag small{color:#ff8b5e}
.ticker{color:#eee7d7;font-weight:700}
.result-grid span{color:#fff;font-size:16px}.result-grid small{color:#c6c8cd;font-weight:600}
footer{color:#b8bbc1;font-size:13px;font-weight:600}
@media(max-width:600px){
  .hero-copy h1{font-size:41px;line-height:1.1;letter-spacing:-.03em;text-shadow:0 2px 0 rgba(45,24,3,.5)}
  .lead{font-size:16px;line-height:1.8;color:#e0e0e0}
  .section-head p,.result-copy p{font-size:16px}
  .day p{font-size:15px}
}