:root{
  --bg:#06111e;
  --panel:#0b1a2d;
  --panel2:#0f2238;
  --text:#f6f9ff;
  --muted:#aab7c8;
  --gold:#ffd24b;
  --cyan:#30cfff;
  --green:#16d27d;
  --line:rgba(255,255,255,.09);
  --shadow:0 18px 50px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  min-width:320px;
  background:
    radial-gradient(circle at 85% 0%,rgba(28,120,255,.18),transparent 28%),
    radial-gradient(circle at 0 35%,rgba(0,210,160,.08),transparent 22%),
    var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang TC","Microsoft JhengHei",Arial,sans-serif;
  line-height:1.7;
  overflow-x:hidden;
  padding-bottom:96px;
}

img{max-width:100%;height:auto}
a{color:inherit;-webkit-tap-highlight-color:transparent}
.wrap{width:min(1080px,calc(100% - 28px));margin:0 auto}

.top-visual{
  width:100%;
  background:#06111e;
  overflow:hidden;
}
.top-visual img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}

.hero{padding:34px 0 26px}
.badge{
  display:inline-flex;
  align-items:center;
  padding:7px 13px;
  border-radius:999px;
  border:1px solid rgba(48,207,255,.28);
  background:rgba(48,207,255,.08);
  color:#c8f4ff;
  font-size:13px;
  font-weight:800;
  line-height:1.2;
}

h1{
  font-size:clamp(34px,6vw,64px);
  line-height:1.08;
  margin:18px 0 14px;
  letter-spacing:-1.2px;
}
h1 span{color:var(--gold)}

.lead{
  max-width:850px;
  margin:0 0 24px;
  color:#d5deeb;
  font-size:clamp(17px,2.2vw,21px);
}

.hero-grid{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:18px;
  align-items:stretch;
}

.card{
  background:linear-gradient(145deg,rgba(15,35,59,.97),rgba(7,18,32,.97));
  border:1px solid var(--line);
  border-radius:22px;
  box-shadow:var(--shadow);
}

.copy{padding:25px}
.copy p{margin:0 0 13px}
.copy strong{color:var(--gold)}

.quick{
  padding:22px;
  display:grid;
  gap:12px;
}
.quick .item{
  padding:17px;
  border-radius:16px;
  background:rgba(255,255,255,.045);
  border:1px solid var(--line);
}
.quick b{
  display:block;
  font-size:20px;
  line-height:1.25;
  margin-bottom:4px;
}
.quick span{
  display:block;
  font-size:13px;
  color:var(--muted);
  line-height:1.55;
}

.cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:54px;
  text-decoration:none;
  background:linear-gradient(135deg,#24df8b,#12b86e);
  color:#04130c;
  font-weight:900;
  padding:15px 24px;
  border-radius:14px;
  box-shadow:0 12px 28px rgba(22,210,125,.22);
  transition:transform .18s ease,filter .18s ease;
  text-align:center;
}
.cta:hover{transform:translateY(-2px);filter:brightness(1.03)}
.cta:active{transform:translateY(0)}
.cta-sub{
  font-size:12px;
  color:var(--muted);
  margin-top:9px;
}

.section{padding:22px 0}
.kicker{
  color:var(--cyan);
  font-weight:900;
  font-size:13px;
  letter-spacing:1.2px;
}

.section h2{
  font-size:clamp(27px,4vw,42px);
  line-height:1.2;
  margin:7px 0 17px;
}

.grid3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}

.info{padding:21px}
.info .num{
  font-size:12px;
  color:var(--cyan);
  font-weight:900;
}
.info h3{
  font-size:19px;
  line-height:1.25;
  margin:7px 0;
}
.info p{
  margin:0;
  color:var(--muted);
  font-size:15px;
}

.story{padding:27px}
.story p{margin:0 0 14px;color:#dce5f0}
.story .big{
  font-size:clamp(21px,3vw,30px);
  font-weight:900;
  line-height:1.4;
  color:#fff;
}
.story .big span{color:var(--gold)}

.steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin:18px 0;
}
.step{
  padding:16px;
  border-radius:16px;
  background:rgba(255,255,255,.045);
  border:1px solid var(--line);
}
.step b{display:block;color:#fff;margin-bottom:4px}
.step span{font-size:13px;color:var(--muted)}

.linebox{
  padding:24px;
  border:1px solid rgba(22,210,125,.25);
  background:linear-gradient(135deg,rgba(22,210,125,.09),rgba(255,255,255,.03));
  border-radius:20px;
}
.linebox h3{
  font-size:clamp(23px,3vw,34px);
  line-height:1.25;
  margin:0 0 8px;
}
.linebox p{color:#dbe5ef;margin:0 0 16px}

.notice{
  margin:18px 0 0;
  padding:17px 19px;
  border:1px solid rgba(255,210,75,.16);
  background:rgba(255,210,75,.055);
  border-radius:16px;
  color:#adb8c6;
  font-size:12px;
}

.sticky{
  position:fixed;
  z-index:50;
  left:0;
  right:0;
  bottom:0;
  background:rgba(4,10,18,.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
}

.sticky-inner{
  width:min(1080px,100%);
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.sticky b{display:block;line-height:1.25}
.sticky span{font-size:12px;color:var(--muted)}
.sticky .cta{min-width:210px}

/* 平板 */
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .quick{grid-template-columns:repeat(3,1fr)}
}

/* 手機端重點優化 */
@media(max-width:760px){
  body{padding-bottom:88px}

  .wrap{
    width:calc(100% - 20px);
  }

  .top-visual{
    border-bottom:1px solid rgba(255,255,255,.06);
  }

  .top-visual img{
    width:100%;
    height:auto;
    object-fit:contain;
  }

  .hero{
    padding:22px 0 16px;
  }

  .badge{
    font-size:12px;
    padding:7px 11px;
  }

  h1{
    font-size:clamp(30px,9vw,40px);
    line-height:1.12;
    letter-spacing:-.6px;
    margin:14px 0 12px;
  }

  .lead{
    font-size:16px;
    line-height:1.65;
    margin-bottom:18px;
  }

  .hero-grid,
  .grid3,
  .steps,
  .quick{
    grid-template-columns:1fr;
  }

  .hero-grid{
    gap:12px;
  }

  .card{
    border-radius:18px;
  }

  .copy,
  .quick,
  .info,
  .story,
  .linebox{
    padding:18px;
  }

  .copy p{
    font-size:15px;
    line-height:1.65;
  }

  .quick{
    gap:10px;
  }

  .quick .item{
    padding:14px 15px;
    border-radius:14px;
  }

  .quick b{
    font-size:18px;
  }

  .section{
    padding:16px 0;
  }

  .section h2{
    font-size:28px;
    margin-bottom:14px;
  }

  .info h3{
    font-size:18px;
  }

  .info p,
  .story p,
  .linebox p{
    font-size:15px;
  }

  .story .big{
    font-size:23px;
    line-height:1.42;
  }

  .steps{
    gap:9px;
    margin:14px 0;
  }

  .step{
    padding:14px 15px;
  }

  .cta{
    width:100%;
    min-height:56px;
    padding:15px 16px;
    font-size:17px;
    border-radius:14px;
  }

  .cta-sub{
    text-align:center;
    font-size:12px;
  }

  .notice{
    font-size:11.5px;
    line-height:1.65;
    padding:14px 15px;
  }

  .sticky{
    padding:9px 10px calc(9px + env(safe-area-inset-bottom));
  }

  .sticky-inner>div{
    display:none;
  }

  .sticky .cta{
    width:100%;
    min-width:0;
    min-height:54px;
    font-size:16px;
    border-radius:13px;
  }
}

/* 小螢幕手機 */
@media(max-width:390px){
  .wrap{width:calc(100% - 16px)}
  h1{font-size:29px}
  .section h2{font-size:25px}
  .copy,.quick,.info,.story,.linebox{padding:16px}
  .story .big{font-size:21px}
}