/* ===== Base ===== */
:root{
  --bg:#0f2a24;
  --text:#fff;
  --warm1:#ff4d4d; --warm2:#ff9a3c;
  --green1:#6be255; --green2:#23b536;
  --shadow:0 10px 28px rgba(0,0,0,.35);
  --anim:.45s cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',Inter,Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow:hidden;
}

/* ===== bg video & pattern ===== */
.bg-video{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;filter:brightness(.72) saturate(1.05) contrast(1.05)}
.pattern{position:fixed;inset:0;z-index:0;background:url('https://dq-landing.zenithstag.com/3v1/pattern.png') repeat 0 0/320px auto;opacity:.35;mix-blend-mode:normal}

/* ===== topbar ===== */
.topbar{position:fixed;z-index:2;left:0;right:0;top:calc(env(safe-area-inset-top) + 12px);padding:0 16px;display:flex;align-items:center}
.logo{width:120px;height:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35));transform:none;opacity:1;inset:0;z-index:1;display:flex;align-items:flex-start;justify-content:center;padding:0 16px}
.headline{
  margin-top: 36vh; /* 讓筆觸靠近中下方，貼近你的視覺 */
  position:relative; text-align:center; line-height:1.15; font-weight:900;
  font-size:clamp(22px,6.2vw,34px); letter-spacing:.5px; text-shadow:0 2px 8px rgba(0,0,0,.5);
  padding:18px 22px; transform:none; 
}
.headline::before{
  content:""; position:absolute; inset:-28px -18px; z-index:-1;
  background:url('https://dq-landing.zenithstag.com/3v1/brush.png') center/contain no-repeat;
  filter: drop-shadow(0 14px 28px rgba(0,0,0,.45));
}
.headline .line{display:block}

/* ===== cta area ===== */
.cta-area{
  position:fixed; z-index:2; left:0; right:0; bottom:calc(env(safe-area-inset-bottom) + 26px);
  display:flex; justify-content:space-between; gap:16px; padding:0 18px;
}
.cta{display:inline-block; text-decoration:none; color:#fff; font-weight:900; font-size:18px; letter-spacing:.5px}
.pill{
  min-width:44%; text-align:center; padding:16px 18px; border-radius:999px; position:relative;
  box-shadow: var(--shadow);
  transform:none; opacity:1; transition:transform .18s ease;
}
.pill::before{
  /* 內部高光層，營造立體 */
  content:""; position:absolute; inset:2px; border-radius:inherit; pointer-events:none;
  background: radial-gradient(120% 60% at 50% 0%, rgba(255,255,255,.35), rgba(255,255,255,0) 55%);
  mix-blend-mode:screen; opacity:.9;
}
.pill-warm{
  background: radial-gradient(140% 100% at 10% 20%, #ff6b6b, transparent 60%),
              linear-gradient(135deg, var(--warm1), var(--warm2));
  text-shadow:0 2px 0 rgba(178,29,29,.35), 0 6px 14px rgba(0,0,0,.35);
  
}
.pill-green{
  background: radial-gradient(140% 100% at 10% 20%, #8dfc75, transparent 60%),
              linear-gradient(135deg, var(--green1), var(--green2));
  text-shadow:0 2px 0 rgba(20,116,24,.35), 0 6px 14px rgba(0,0,0,.35);
  
}
.pill:active{transform:translateY(0) scale(.96)}

/* ===== animations ===== */
to{transform:translateX(0);opacity:1}}
to{transform:translateY(0)}}to{transform:translateY(0);opacity:1}}
60%{transform:translateY(-2px) scale(1.02)}100%{transform:translateY(0) scale(1)}}60%{transform:translateY(-2px) scale(1.02);opacity:1}100%{transform:translateY(0) scale(1)}}

/* ===== reduce motion ===== */
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important}
  .logo,.headline,.pill{opacity:1 !important; transform:none !important}
}


/* --- v3.1 fixes: iOS 重繪/疊圖問題導致 CTA 消失 --- */
body{ isolation:isolate; }
.pattern{ pointer-events:none; z-index:1 !important; }
.bg-video{ z-index:0 !important; }
.topbar{ z-index:3 !important; }
.hero{ z-index:2 !important; }
.cta-area{ z-index:3 !important;  -webkit-transform: translateZ(0); transform: translateZ(0); }
.pill{ backface-visibility: hidden; -webkit-transform: translateZ(0); transform: translateZ(0);  }

/* --- v3.2: 穩定層修補，移除不必要的 opacity 動畫 --- */
.bg-video{ pointer-events:none; }
.cta-area{ position:fixed; z-index:9999 !important; }
.pill{ position:relative; z-index:10000; }
.headline{ position:relative; z-index:9000; }

/* --- v3.3 static: 無進場動畫，元素常駐可見 --- */
.logo,.headline,.pill{opacity:1 !important; transform:none !important}
.cta-area{z-index: 9999 !important}
.hero{z-index: 9000 !important}
.topbar{z-index: 10000 !important}
.pattern{pointer-events:none; z-index:1 !important}
.bg-video{pointer-events:none; z-index:0 !important; filter: none;} /* 去除濾鏡以降低合成壓力 */

/* 圖層順序：video(0) < pattern(2) < hero(3) < CTA(4) < logo(5) */
.bg-video { 
  position: fixed; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0 !important;
}

/* 壓紋層：獨立覆蓋在影片上方 */
.pattern{
  position: fixed; inset: 0;
  background: url('https://dq-landing.zenithstag.com/3v1/3.png') repeat 0 0 / 320px auto; /* 你的 3.png */
  opacity: .30;                 /* 視覺強度自行調整 */
  mix-blend-mode: normal;       /* 若要更咬可試 overlay，但 iOS 可能不穩 */
  pointer-events: none;         /* 不攔截點擊 */
  z-index: 2 !important;
}

/* 內容層級（依你原本排版） */
.hero     { position: fixed; inset: 0; z-index: 3 !important; }
.cta-area { z-index: 4 !important; }
.topbar   { z-index: 5 !important; }

.headline img {
  max-width: 100%;   /* 寬度不超過容器 */
  height: auto;      /* 高度依比例縮放 */
  display: block;    /* 讓 margin: auto 生效 */
  margin: 0 auto;    /* 水平置中 */
}

/* ===== headline image 左→右進場 ===== */
.headline img {
  transform: translateX(-28px);     /* 起始在左側一點 */
  will-change: transform;            /* 提醒瀏覽器做合成層 */
  backface-visibility: hidden;
  -webkit-transform: translateX(-28px);
}

/* 觸發進場（由 JS 在載入後加上 .in） */
.headline img.in {
  animation: headline-sweep 520ms cubic-bezier(.2,.8,.2,1) both;
}

@keyframes headline-sweep {
  from { transform: translateX(-28px); }
  to   { transform: translateX(0); }
}

/* 使用者偏好減少動畫時，直接呈現最終狀態 */
@media (prefers-reduced-motion: reduce) {
  .headline img { transform: none !important; animation: none !important; }
}
.headline { position: relative; z-index: 9000 !important; }


/* CTA 按鈕進場動畫：由下往上彈出 */
.pill {
  transform: translateY(20px) scale(0.96);
  opacity: 0;
}

.pill.in {
  animation: cta-pop 0.5s cubic-bezier(.2,.8,.2,1) forwards;
}

@keyframes cta-pop {
  0%   { transform: translateY(20px) scale(0.96); opacity: 0; }
  60%  { transform: translateY(-2px) scale(1.02); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}