/* ==========================================================================
   2026 AMD  — style.css
   ========================================================================== */

:root{
  --navy-950:#05081a;
  --cyan:#00e0ff;
  --cyan-soft:#4de8ff;
  --teal:#036385;
  --container:1200px;
  --font-cjk:'Noto Sans TC', sans-serif;
  --font-en:'Poppins','Noto Sans TC', sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:100px; }
body{
  margin:0;
  font-family:var(--font-cjk);
  color:#fff;
  background:var(--navy-950);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }
.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 24px; }

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
.reveal{
  opacity:0;
  transform:translateY(32px);
  transition:opacity .7s cubic-bezier(.2,.65,.2,1), transform .7s cubic-bezier(.2,.65,.2,1);
  will-change:opacity, transform;
}
.reveal.in-view{ opacity:1; transform:translateY(0); }

.challenge-cards .reveal:nth-child(1){ transition-delay:.05s; }
.challenge-cards .reveal:nth-child(2){ transition-delay:.15s; }
.challenge-cards .reveal:nth-child(3){ transition-delay:.25s; }
.compute-icons .icon-item:nth-child(1){ transition-delay:.05s; }
.compute-icons .icon-item:nth-child(2){ transition-delay:.13s; }
.compute-icons .icon-item:nth-child(3){ transition-delay:.21s; }
.compute-icons .icon-item:nth-child(4){ transition-delay:.29s; }
.persona-grid .reveal:nth-child(1){ transition-delay:.05s; }
.persona-grid .reveal:nth-child(2){ transition-delay:.12s; }
.persona-grid .reveal:nth-child(3){ transition-delay:.19s; }
.persona-grid .reveal:nth-child(4){ transition-delay:.26s; }
.persona-grid .reveal:nth-child(5){ transition-delay:.33s; }

@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:200;
  background:transparent;
  transition:background .3s;
}
.site-header.scrolled{ background:rgba(3,6,20,.92); backdrop-filter:blur(6px); }
.header-inner{
  max-width:1600px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px;
}
.logo{ display:block; }
.logo img{ height:32px; width:auto; display:block; }
.main-nav ul{ display:flex; align-items:center; gap:34px; }
.main-nav a{ font-size:22px; font-weight:500; color:#fff; white-space:nowrap; transition:color .25s; }
.main-nav a:hover{ color:var(--cyan); }

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:36px; height:32px; background:none; border:0; padding:0;
}
.nav-toggle span{ display:block; width:100%; height:2px; background:#fff; transition:all .3s; }
.nav-toggle.active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2){ opacity:0; }
.nav-toggle.active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }


.zone{ position:relative; background-repeat:no-repeat; background-position:top center; background-size:100% auto; }
.zone-1{ background:url(../images/bg_01.gif) center top no-repeat; background-color:#061a32; }
.zone-2{ background:url(../images/bg_03.jpg) center top no-repeat; background-color:#d1d1d3; }
.zone-3{ background:url(../images/bg_04.jpg) center top no-repeat; background-color:#173645; }
.zone-4{ background:url(../images/bg_05.jpg) center top no-repeat; background-color:#8a9196; background-size:cover}
.zone-5{ background:url(../images/bg_06.jpg) center top no-repeat; background-color:#080505; background-size:cover}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{ padding:130px 0 50px; text-align:center; }
.hero-inner{ animation:heroFadeUp 1s cubic-bezier(.2,.65,.2,1) both; }
@keyframes heroFadeUp{ from{ opacity:0; transform:translateY(28px); } to{ opacity:1; transform:translateY(0); } }
.kv-title{ width: 920px; max-width:100%; margin:0 auto 26px; }
.kv-sub{ width: 900px; max-width:100%; margin:0 auto 20px; }
.kv-desc{ width: 840px; max-width:100%; margin:0 auto 50px; }

.hero-stats{ display:flex; justify-content:center; align-items:center; gap:64px; flex-wrap:wrap; }
.stat img{ height:90px; width:auto; display:block; }

/* ==========================================================================
   Section 1 — 3大運算平台挑戰
   ========================================================================== */
.challenge{ min-height: 765px; background: url(../images/bg_02.jpg) center top no-repeat;  padding:60px 0 196px; text-align:center; }
.sec-title{ max-width:640px; margin:0 auto 46px; }
.challenge-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:46px; }

/* ==========================================================================
   Section 2 — 彈性運算架構
   ========================================================================== */
.compute{ padding:20px 0 50px 0px; text-align:center; }
.compute-title{ max-width:760px; margin:0 auto 30px; }
.compute-icons{ width: 1000px; max-width:100%; margin:0 auto 40px; }
.btn-img{ display:inline-block; transition:transform .2s; }
.btn-img:hover{ transform:translateY(-2px); }
.btn-img img{ height:120px; width:auto; margin:0 auto; }
.compute .btn-img img{ height:62px; width:auto; margin:0 auto; }
.whitepaper .btn-img img{ height:62px; width:auto; margin:0 auto; }

/* ==========================================================================
   Section 3 — 升級運算環境
   ========================================================================== */
.upgrade{ padding:75px 0 153px; text-align:center; }
.upgrade-title{ max-width:760px; margin:0 auto 44px; }
.upgrade-stats{ width: 1080px; max-width:100%; margin:0 auto 0px; }
.upgrade-quote{ width: 1080px; max-width:100%; margin:0 auto; border-radius:12px; overflow:hidden; }

/* ==========================================================================
   Section 4 — 下載白皮書
   ========================================================================== */
.whitepaper{ padding:30px 0 60px; text-align:center; }
.whitepaper-title{ max-width:760px; margin:0 auto 50px; }
.whitepaper-body{width: 1102px; max-width:100%; margin:0 auto 46px; }

/* ==========================================================================
   Section 5 — 這份白皮書適合...
   ========================================================================== */
.personas{ padding:60px 0 80px; text-align:center; }
.personas-title{ max-width:760px; margin:0 auto 50px; }
.persona-grid{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
.persona-grid img{ width:215px; height:auto; }

/* ==========================================================================
   Section 6 — 免費取得白皮書 + 表單
   ========================================================================== */
.final-cta{background: url(../images/bg_07.jpg) no-repeat center top; background-size:cover ;padding:60px 0 60px; text-align:center; }
.final-cta-inner{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:40px; flex-wrap:wrap; text-align:left; margin-bottom:34px;
}
.final-left{ flex:1 1 480px; max-width:640px; }
.final-banner{ width:100%; margin:0; }
.final-right{ flex:0 0 auto; text-align:left; margin-top:56px; }
.final-btn{ display:block; margin:0 0 16px; }
.final-privacy{ color:#fff; font-size:16px; line-height:1.7; max-width:340px; }
.form-embed{ max-width:1100px; margin:0 auto; }
.form-embed iframe{ width:100%; border:#ddd 1px solid; border-radius:8px; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background:#040202; padding:26px 24px; text-align:center; }
.site-footer img{ max-width:260px; margin:0 auto; }

/* ==========================================================================
   Floating CTA buttons
   ========================================================================== */
.fix-btn{ position:fixed; z-index:150; transition:opacity .3s, visibility .3s; }
.fix-btn.pc{ right:26px; bottom:30px; width:100px; }
.fix-btn.mb{ display:none; left:0; right:0; bottom:0; width:100%; }
.fix-btn img{ width:100%; }
.fix-btn.pc img{ transform-origin:center; animation:fixBtnPulse 1.8s ease-in-out infinite; }
.fix-btn.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
@keyframes fixBtnPulse{
  0%, 100%{ transform:scale(1); }
  50%{ transform:scale(1.08); }
}

/* ==========================================================================
   Mobile / Desktop variant toggle
   ========================================================================== */
.mb-only{ display:none; }

.mb-sec{
  background-repeat:no-repeat; background-position:top center; background-size:100% 100%;
  justify-content:center; padding:0;
}
.mb-sec img{ width:100%; max-width:720px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px){
  .hero-stats{ gap:20px; }
    .stat img{ height: 80px;    }
  .persona-grid{ gap:16px; }
  .persona-grid img{ width:170px; }
    .challenge{ background-position: bottom center; padding-top: 100px;}
}

@media (max-width: 860px){
  html{ scroll-padding-top:70px; }
  .dt-only{ display:none; }
  .mb-only{ display:block; }
  .mb-sec.mb-only{ display:flex; }
    .mb-sec{ padding:50px 30px}
 .zone-1 .mb-sec{ padding: 100px 40px 20px;}

  .main-nav{
    position:fixed; top:0; right:0; height:100vh; width:78%; max-width:320px;
    background:var(--navy-950); padding:100px 30px 30px;
    transform:translateX(100%); transition:transform .35s; overflow-y:auto;
  }
  .main-nav.open{ transform:translateX(0); }
  .main-nav ul{ flex-direction:column; align-items:flex-start; gap:0; }
  .main-nav ul > li{ width:100%; border-bottom:1px solid rgba(255,255,255,.08); }
  .main-nav a{ display:block; padding:16px 0; font-size:16px; }
  .nav-toggle{ display:flex; }

  .fix-btn.pc{ display:none; }
  .fix-btn.mb{ display:block; }
  body{ padding-bottom:0; }

  .form-embed{ padding:0 20px; margin-top: 30px; }
  .final-cta{ padding-bottom:0; }
}

@media (max-width: 480px){
  .header-inner{ padding:12px 16px; }
}