:root{
  --fg:#ffffff;
  --muted:rgba(255,255,255,.78);
  --muted2:rgba(255,255,255,.62);
  --bg:#0b0617;
  --purple:#360057;
  --purple2:#6A1B9A80;
  --cyan:#6fe7ff;
  --card:#220027;
  --card2:rgba(40, 0, 60, .6);
  --border:rgba(255,255,255,.18);
  --shadow:0 12px 40px rgba(0,0,0,.45);
  --shadowColor:0 18px 50px rgba(144, 73, 255, .35);
}

*{box-sizing:border-box}
html,body{height:100%;}

/* 基礎設定 */
html {
  font-size: 20px; /* 桌面端基礎字體 */
}
/* 重要優化：在手機端將基礎字體變小，避免內容過大導致擠壓 */
@media (max-width: 768px) {
  html { font-size: 16px; }
}

body{
  margin:0;
  font-family:"Noto Sans TC", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "PingFang TC", "Microsoft JhengHei", sans-serif;
  color:var(--fg);
  background:var(--bg);
  overflow-x:hidden;
}

a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}

.container{
  width:min(1440px, calc(100% - 48px));
  margin:0 auto;
}

/* 全頁背景 */
.page-bg{
  position:fixed;
  inset:0;
  z-index:-3;
  background: url("assets/bg-page.png") center bottom/cover no-repeat fixed;
}

/* Topbar */
.topbar{
  position:absolute;
  top:0;
  width: 100%;
  z-index:20;
  padding:14px 0;
  background:transparent;
}
.topbar__inner{
  display:flex !important;
  align-items:center;
  justify-content:space-between !important;
  gap:16px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
}
.brand__mark{
  width:56px;
  height:51px;
  background: url("assets/logo.png") center/contain no-repeat; 
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.35));
  transition: transform .25s ease, filter .25s ease, opacity .25s ease;
  flex-shrink: 0; 
}
.brand__text{
  font-weight:700;
  letter-spacing:.02em;
  color:#360057;
  text-shadow: 0 6px 18px rgba(0,0,0,.3);
  transition: color .25s ease;
  white-space: nowrap; 
}
.brand:hover .brand__text{ color: var(--purple2); }

.pill-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 16px;
  border-radius:999px;
  background: linear-gradient(135deg, #360057 0%, #F3F3F3 100%);
  box-shadow: 0 10px 25px rgba(0,0,0,.25);
  font-weight:700;
  letter-spacing:.02em;
  text-shadow: 0 6px 18px rgba(0,0,0,.55);
  transition: background .25s ease, transform .25s ease, border-color .25s ease, color .25s ease;
  white-space: nowrap;
}
.pill-link__icon{width:16px;height:16px; opacity:.9}
.pill-link:hover{
  transform: translateY(-1px);
  background: linear-gradient(135deg, #F3F3F3 0%, #360057 100%);
  color: var(--purple);
}

.pill_next{
  border-radius:10px;
  background: #5D2D79;
}

.pill_next:hover{
  transform: translateY(-1px);
  background:  #F3F3F3;
  color: var(--purple);
}

/* Hero */
.hero{
  position:relative;
  overflow:hidden;          
  padding:28px 0 60px;
  min-height: 85vh;
  display: flex;
  flex-direction: column;
  justify-content: center; 
}
.hero__bg{
  position:absolute;
  inset:0;                 
  z-index:-2;
  background: url("assets/bg-hero.png") center/cover no-repeat;
  opacity:.9;
  pointer-events:none;
}
.hero__inner{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  align-items:center;
  gap:34px;
  padding-top: 60px; 
  position: relative;
  z-index: 2;
}
.hero__left{
  position:relative; 
  min-height:420px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero__phones{
  width:min(560px, 92%);
  filter: drop-shadow(0 40px 80px rgba(0,0,0,.55));
  transform: translateY(6px);
}
.hero__bigword {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 0; 
  width: 100vw;
  height: auto;
  opacity: 0.6;
  pointer-events: none;
  user-select: none;
  transform: translateY(10%); 
}

.hero__bigword-text{
  font-family: "Syne", sans-serif;
  font-weight: 800;
  font-size: 200px;
  letter-spacing: 0;
  dominant-baseline: alphabetic;
  fill: transparent;                 
  stroke: url(#bigStrokeGrad);       
  stroke-width: 1px;                 
  paint-order: stroke;
}

.hero__right{
  padding:10px 0;
  position: relative;
  z-index: 2;
}
.hero__title{
  font-size: clamp(36px, 4.4vw, 66px);
  line-height:1.12;
  margin:0 0 14px;
  font-weight:900;
  letter-spacing:.01em;
  text-shadow: 0 18px 40px rgba(0,0,0,.45);
}
.hero__subtitle{
  margin:0 0 22px;
  color:var(--muted);
  line-height:1.7;
  max-width: 520px;
}
.hero__cta-label{font-weight:800; margin:0 0 12px;}

/* Store Buttons 容器 */
.store-row{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}
.store-row--center{justify-content:center}

/* 單個按鈕 */
.store-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  border-radius:14px;
  background: linear-gradient(135deg, #A423E6, #85E4E2);
  box-shadow: 0 0 10.4px rgba(255, 255, 255, 0.5), var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  will-change: transform;
  color: #fff;
  flex-shrink: 0; 
}
.store-btn:nth-child(2){
  background: linear-gradient(135deg, #85E4E2, #A423E6);
}
.store-btn__icon{
  width:32px;height:32px;
  border-radius:8px;
  background: rgba(0,0,0,.2);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink: 0;
}
.store-btn__icon img{width:18px; height:18px; opacity:.95}
.store-btn__text{display:flex; flex-direction:column; line-height:1.1; text-align: left;}
.store-btn__small{font-size:10px; color:rgba(255,255,255,.86); white-space: nowrap;}
.store-btn__big{font-size:15px; font-weight:800; white-space: nowrap;}

.store-btn:hover{
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.8), 0 18px 60px rgba(0,0,0,.55);
}

.hero__stats{
  margin-top:24px;
  display:flex;
  align-items:baseline;
  gap:12px;
}
.hero__stats-label{font-size: 1.2rem; font-weight:700; color: var(--muted);}
.hero__stats-number{
  font-family: Inter, system-ui, sans-serif;
  font-weight:700;
  font-size: clamp(36px, 4.2vw, 72px);
  letter-spacing:.02em;
  text-shadow: 0 18px 40px rgba(0,0,0,.45);
  line-height: 1;
}
.hero__stats-plus{opacity:.9}

.hero__secure{
  position:absolute;
  left:50%;
  bottom:18px;                
  transform:translateX(-50%);
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  color: rgba(255,255,255,.86);
  font-size: 13px;
  letter-spacing: .02em;
  white-space: nowrap;
  z-index: 6;
  width: 100%;
  justify-content: center;
}

.hero__secure-icon{
  width:24px;
  height:24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.14);
  flex-shrink: 0;
}
.hero__secure-icon img{
  width:12px;
  height:12px;
  opacity:.95;
}

.hero__secure-text .dot{
  opacity:.7;
  margin:0 4px;
  font-size: 14px;
  font-weight: 400;
}

/* Features */
.features{
  position:relative;
  overflow:hidden;          
  padding:50px 0 52px;
  min-height: 70vh;
  display: flex;
  flex-direction: column;
}

.features > .container{
  flex: 1;                       
  display: flex;
  flex-direction: column;
  justify-content: center;        
}

.features__smoke{
  position:absolute;
  inset:0;                  
  background: url("assets/bg-smoke.png") center/cover no-repeat;
  opacity:.65;
  z-index:-1;
  pointer-events:none;
}

.features__head{
  text-align: center;
  margin-bottom: 26px;
}

.features__head .section-title{
  justify-content: center; 
}

.features__head .section-subtitle{
  margin: 16px auto 36px;
}

.section-title{
  margin:0;
  display:flex;
  align-items:center;
  gap:10px;
  font-size: clamp(24px, 2.6vw, 48px);
  font-weight:900;
}
.section-title__mark{
  width:72px;height:65px;
  background: var(--fg);
  -webkit-mask: url("assets/logo-white.png") center/contain no-repeat;
  mask: url("assets/logo-white.png") center/contain no-repeat;
  opacity:.95;
  filter: drop-shadow(0 10px 25px rgba(0,0,0,.35));
}
.section-subtitle{margin:30px 0 26px;}

.feature-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:24px;
}
.feature-card{
  background: var(--card);
  border:1px solid rgba(255,255,255,.16);
  border-radius:16px;
  padding:32px 22px;
  box-shadow: 
    0 0 20.8px rgba(235, 120, 255, 0.57),
    0 20px 30px rgba(0, 201, 224, 0.03),
    0 18px 60px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(8px);
  transition: transform .22s ease, background .22s ease, box-shadow .22s ease, border-color .22s ease;
  cursor:pointer;
}
.feature-card__icon{
  width:58px;height:58px;
  border-radius:14px;
  background: linear-gradient( 135deg, #161616, #47006B);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:14px;
  border:1px solid rgba(181,107,255,.25);
}
.feature-card__icon img{width:31px;height:31px;}
.feature-card__title{margin:0 0 10px; font-size:1.2rem; font-weight:900}
.feature-card__desc{margin:0; line-height:1.6; color: var(--muted); font-size: 0.95rem; }
.feature-card:hover{
  transform: translateY(-4px) scale(1.03);
  background: rgba(65, 0, 110, .52);
  border-color: rgba(181,107,255,.55);
  box-shadow: 
    0 0 30px rgba(235, 120, 255, 0.7),
    0 20px 40px rgba(0, 201, 224, 0.1),
    0 18px 60px rgba(0, 0, 0, 0.45);
}

/* Legal pill */
.legal{ padding:18px 0 18px; }
.notice{
  padding:12px 16px;
  border-radius:12px;
  background: linear-gradient(135deg, #4B1A75, #8B86F4);
  text-align:center;
  font-size:13px;
  color:rgba(255,255,255,.82);
}
.notice--legal{
  margin:0 auto;
  max-width: 980px;
}

/* Next Section */
#next .container{
  width: calc(100% - 40px); 
  max-width: 1400px;
  margin: 0 auto;
}

.next{padding:0px 0 40px}

.next__card{
  position:relative;
  border-radius:22px;
  background:#27252B;          
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 70px rgba(0,0,0,.45);
  overflow:hidden;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  align-items:stretch;
  padding:0;    
  min-height: 420px;               
}

.next__left{
  padding:40px 60px;
  position:relative;
  display: flex;
  flex-direction: column;
  justify-content: center;   
  align-items: flex-start;  
  min-height: 100%;          
}
.next__left::before{
  content:"";
  position:absolute;
  inset:0;
  background: url("assets/smoke.png") left center/cover no-repeat;
  opacity:.35;
  pointer-events:none;
}
.next__left > *{ position:relative; z-index:1; }

.next__badge{
  display:inline-flex;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.18);
  font-family: Inter, system-ui, sans-serif;
  font-size:12px;
  letter-spacing:.12em;
  opacity:.9;
  margin-bottom:14px;
}
.next__title{
  margin:0 0 10px;
  font-family: Inter, "Noto Sans TC", system-ui, sans-serif;
  font-weight:800;
  font-size: clamp(28px, 3vw, 40px);
  color: rgba(255,255,255,.88);
}
.next__desc{margin:0 0 24px; color:rgba(255,255,255,.68); line-height:1.7}

.next__right{
  display:flex;
  justify-content:center;
  align-items:center;
  padding: 40px;
}

.poster{
  width: 100%;
  max-width: 340px; 
  border-radius:18px;
  overflow:hidden;
  box-shadow: 0 18px 70px rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.2);
}
.poster__img{
  width:100%;
  height:auto;
  transform: scale(1);
  transition: transform .22s ease;
  will-change: transform;
}
.poster:hover .poster__img{ transform: scale(1.06); }

/* Join */
.join{ padding:54px 0 28px; }
.join__inner{text-align:center}
.join__title{
  margin:0;
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight:900;
  text-shadow: 0 18px 40px rgba(0,0,0,.45);
}
.join__subtitle{margin:14px 0 24px; line-height:1.8; }
.join__fineprint{margin:18px 0 0; font-size:12px; }

/* Footer */
.footer{margin-top:40px; padding:18px 0 18px}
.footer__inner{display:flex; align-items:center; justify-content:space-between; gap:16px}

/* =========================================
   Responsive 響應式調整 
   ========================================= */

@media (max-width: 980px){
  .hero__inner{
    display: flex;
    flex-direction: column; 
    text-align: center;
    padding-top: 50px;
  }
  .hero__left{
    min-height: unset; 
    width: 100%;
    margin-bottom: 20px;
  }
  .hero__phones{
    width: min(400px, 80%); 
    margin: 0 auto;
    transform: none;
  }
  

  .hero__bigword {
    width: 100vw;
    opacity: 0.4; 
  }

  .hero__right{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .hero__subtitle{ margin-left: auto; margin-right: auto; }
  
  .feature-grid{grid-template-columns:repeat(2, 1fr)}
  .section-subtitle{font-size: 14px; line-height: 1.5;}
  
  .next__card{grid-template-columns:1fr}
  .next__left{ padding: 40px 30px; }
  .next__right{ padding: 0 30px 40px; }
}

@media (max-width: 560px){
  .container{width:calc(100% - 32px)}
  
  /* Topbar */
  .topbar{padding:12px 0}
  .brand__mark{ width: 42px; height: 38px; }
  .brand__text{ font-size: 1rem; }
  .pill-link{ padding: 8px 12px; font-size: 13px; }
  .pill-link__icon{ width: 12px; height: 12px; }

  /* Hero */
  .hero{ padding: 10px 0 0 0; min-height: auto; }
  .hero__inner { gap: 10px; }
  .hero__phones { width: 90%; }
  
  .store-row{
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 10px;
    width: 100%;
    max-width: 400px; 
  }
  
  .store-btn{
    width: 100%; 
    justify-content: center; 
    padding: 8px 10px;
    flex-direction: row; 
  }
  .store-btn__icon{ width: 28px; height: 28px; margin-right: 4px; }
  .store-btn__icon img{ width: 14px; height: 14px; }
  .store-btn__text{ align-items: flex-start; }
  .store-btn__small{ font-size: 9px; }
  .store-btn__big{ font-size: 13px; }

  .hero__stats{ flex-direction: column; gap: 0; align-items: center; margin-top: 20px;}
  .hero__stats-label{ font-size: 1rem; margin-bottom: 0;}
  .hero__stats-number{ font-size: 48px; }

  .hero__secure{
    position: relative;
    bottom: 0;
    padding: 12px 0;
    font-size: 11px;
    width: 100%;
  }

  /* Features */
  .feature-grid{ grid-template-columns: 1fr; gap: 16px; }
  
  /* Next Section Poster */
  .next__card{ margin: 0; width: 100%; border-radius: 16px; }
  .next__left{ padding: 30px 20px; }
  .next__right{ padding: 0 20px 30px; }
  .poster{ max-width: 100%; }

  .footer{ margin-top: 20px; padding-bottom: 30px; }
  .footer__inner{
    flex-direction: row; 
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap; 
  }
}

/* 針對超小螢幕的微調 */
@media (max-width: 360px) {
  .store-btn__big { font-size: 11px; }
  .pill-link span { display: none; } 
  .pill-link { padding: 8px; border-radius: 50%; }
}

@media (prefers-reduced-motion: reduce){
  .store-btn, .feature-card, .poster__img, .brand__mark, .pill-link{transition:none !important}
}