/* =========================================
   Hero 首屏
   ========================================= */
:root{
  --color-bg-start:#eaeff6;--color-bg-end:#f6f8fb;
  --fs-eyebrow:clamp(1.125rem,1.2vw + .8rem,1.75rem);
  --fs-title:clamp(2rem,3.2vw + 1rem,3.75rem);
  --fs-desc:clamp(1rem,.9vw + .7rem,1.75rem);
}
.hero{
  position:relative;overflow:hidden;height:500px;min-height:500px;display:flex;align-items:center;
  /* 微弱代碼/光暈圖層 + 淡色漸層（沒有 hero-bg-code.png 可刪第一層） */
  background-image:url("../images/hero-bg-code.png"),linear-gradient(90deg,var(--color-bg-start) 0%,var(--color-bg-end) 55%,transparent 100%);
  background-repeat:no-repeat;background-position:left center,center;background-size:cover,cover;
}
.hero__inner{
  position:static;z-index:1;width:100%;max-width:1400px;height:100%;margin:0 auto;padding:3rem 2rem;
  display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:2rem;
}
.hero__content{position:relative;z-index:1;max-width:640px}
.hero__eyebrow{position:relative;padding-left:1.25rem;margin-bottom:1.5rem;font-size:20px;font-weight:700;color:#4d558a;letter-spacing:.04em}
.hero__eyebrow::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:4px;height:1.8em;background:var(--color-primary);border-radius:2px}
.hero__title{margin-bottom:1.75rem;font-size:50px;font-weight:900;line-height:1.25;color:var(--color-primary);letter-spacing:.02em}
.hero__desc{font-size:20px;font-weight:700;line-height:1.75}
.hero__visual{position:absolute;inset:0;display:flex;justify-content:center;align-items:center}
.hero__img{width:100%;height:100%;object-fit:cover}

@media (max-width:1024px){.hero__inner{padding:2.5rem 1.5rem;gap:1.5rem}}
@media (max-width:768px){
  .hero{height:430px;min-height:430px;background-image:linear-gradient(180deg,rgba(255,255,255,.88) 0%,rgba(255,255,255,.6) 40%,rgba(255,255,255,.15) 65%,rgba(255,255,255,0) 80%),url("../images/hero-phone.png");background-position:center,bottom center;background-size:cover,cover;background-repeat:no-repeat}
  .hero__inner{grid-template-columns:1fr;padding:5px 1.25rem 2rem;gap:1.5rem}
  .hero__content{max-width:100%;transform:translateY(-50px)}
  .hero__visual{display:none}
}
@media (max-width:480px){
  .hero__inner{padding:5px 1rem 1.5rem}
  .hero__eyebrow{margin-bottom:1rem}.hero__title{margin-bottom:1rem}.hero__desc{line-height:1.7}
}
/* 平板（768px ~ 1024px）：與電腦版相同排版，高度 350px
   首頁與課程大綱頁共用；選擇器加 .hero 前綴以覆寫各頁 max-width:768px 的手機設定 */
@media (min-width:768px) and (max-width:1024px){
  .hero{
    height:350px;min-height:350px;
    background-image:url("../images/hero-bg-code.png"),linear-gradient(90deg,var(--color-bg-start) 0%,var(--color-bg-end) 55%,transparent 100%);
    background-position:left center,center;background-size:cover,cover;
  }
  .hero .hero__inner{grid-template-columns:1fr 1fr;padding:1.5rem;gap:1.5rem}
  .hero .hero__content{max-width:640px;transform:none}
  .hero .hero__visual{display:flex}
  .hero .hero__eyebrow{margin-bottom:1rem;font-size:18px}
  .hero .hero__title{margin-bottom:1rem;font-size:clamp(36px,4.6vw,50px);font-weight:900}
  .hero .hero__desc{font-size:18px;line-height:1.7}
  .hero .desktop-copy{display:inline}
  .hero .mobile-copy{display:none}
}