:root {
  color-scheme: dark;
  --navy-950: #070f1d;
  --navy-900: #0b1425;
  --navy-800: #111e33;
  --navy-700: #192b45;
  --gold: #d8b46c;
  --gold-soft: #ead39e;
  --cream: #f8f3e9;
  --muted: #aeb8c5;
  --line: rgba(216, 180, 108, 0.3);
  --panel: rgba(20, 36, 59, 0.58);
}

* { box-sizing: border-box; }

html, body { margin: 0; min-width: 320px; background: var(--navy-950); }

body {
  min-height: 100dvh;
  color: var(--cream);
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }

.landing-page {
  min-height: 100dvh;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% -12%, rgba(43, 72, 111, 0.55), transparent 38%),
    radial-gradient(circle at 12% 74%, rgba(17, 43, 75, 0.42), transparent 34%),
    linear-gradient(145deg, var(--navy-800) 0%, var(--navy-900) 50%, var(--navy-950) 100%);
}

.landing-page::before,
.landing-page::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border: 1px solid rgba(216, 180, 108, 0.12);
  border-radius: 999px;
  transform: rotate(-22deg);
}

.landing-page::before { width: 132vw; height: 50vw; top: 17%; left: -40%; }
.landing-page::after { width: 120vw; height: 44vw; bottom: 8%; right: -38%; border-color: rgba(216, 180, 108, 0.07); }

.ambient { position: absolute; z-index: -1; pointer-events: none; filter: blur(1px); }
.ambient--top { width: 35rem; height: 35rem; top: -24rem; right: -12rem; border-radius: 50%; background: rgba(216, 180, 108, 0.08); }
.ambient--bottom { width: 22rem; height: 22rem; left: -16rem; bottom: -12rem; border-radius: 50%; background: rgba(40, 87, 130, 0.22); }

.hero {
  width: min(100%, 430px);
  min-height: 100dvh;
  margin: 0 auto;
  padding: max(18px, env(safe-area-inset-top)) 20px max(14px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  position: relative;
}

.brand-lockup { text-align: center; animation: rise-in 700ms ease-out both; }
.brand-logo { display: block; width: clamp(58px, 18vw, 82px); height: auto; margin: 0 auto 4px; object-fit: contain; }
.brand-motto { margin: 0; color: var(--gold-soft); font-family: "Noto Serif TC", "Songti TC", "PMingLiU", serif; font-size: clamp(0.64rem, 2.3vw, 0.75rem); letter-spacing: 0.3em; }

.hero-copy { margin-top: clamp(9px, 2.4vh, 18px); text-align: center; animation: rise-in 700ms 80ms ease-out both; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 4px; color: var(--gold); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.22em; }
.eyebrow span { display: inline-block; width: 20px; height: 1px; background: var(--gold); }

h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 7px; color: var(--cream); font-family: "Noto Serif TC", "Songti TC", "PMingLiU", serif; font-size: clamp(1.68rem, 7.6vw, 2.35rem); font-weight: 500; letter-spacing: 0.08em; line-height: 1.24; }
h1 em { color: var(--gold-soft); font-style: normal; }
.hero-subtitle { margin-bottom: 0; color: var(--muted); font-size: clamp(0.68rem, 2.6vw, 0.8rem); line-height: 1.8; letter-spacing: 0.045em; }

.feature-panel { margin-top: clamp(13px, 3vh, 23px); animation: rise-in 700ms 160ms ease-out both; }
.section-heading { display: grid; grid-template-columns: auto 1fr auto; align-items: end; column-gap: 10px; margin-bottom: 8px; }
.section-kicker { align-self: center; color: var(--gold); font-size: 0.5rem; font-weight: 700; letter-spacing: 0.15em; white-space: nowrap; }
.section-heading h2 { margin: 0; color: var(--cream); font-family: "Noto Serif TC", "Songti TC", "PMingLiU", serif; font-size: clamp(1.16rem, 5.6vw, 1.42rem); font-weight: 500; letter-spacing: 0.18em; white-space: nowrap; }
.heading-rule { width: 100%; height: 1px; margin-bottom: 7px; background: linear-gradient(90deg, var(--line), transparent); }

.feature-list { display: grid; gap: 6px; }
.feature-card { display: grid; grid-template-columns: 29px 1fr 17px; align-items: center; min-height: 52px; padding: 8px 10px 8px 11px; border: 1px solid rgba(216, 180, 108, 0.2); border-left: 2px solid rgba(216, 180, 108, 0.75); border-radius: 4px; background: linear-gradient(105deg, rgba(24, 44, 70, 0.82), rgba(11, 20, 37, 0.5)); box-shadow: 0 8px 22px rgba(1, 7, 16, 0.16); }
.feature-index { align-self: start; padding-top: 1px; color: var(--gold); font-family: Georgia, serif; font-size: 0.65rem; letter-spacing: 0.02em; }
.feature-copy h3 { margin: 0 0 2px; color: var(--cream); font-size: clamp(0.77rem, 3.1vw, 0.9rem); font-weight: 600; letter-spacing: 0.09em; }
.feature-copy p { margin: 0; color: var(--muted); font-size: clamp(0.59rem, 2.5vw, 0.7rem); line-height: 1.5; letter-spacing: 0.02em; }
.feature-mark { color: var(--gold); font-family: Georgia, serif; font-size: 0.8rem; opacity: 0.9; }

.cta-area { margin-top: auto; padding-top: clamp(10px, 2vh, 16px); text-align: center; animation: rise-in 700ms 240ms ease-out both; }
.cta-note { margin: 0 0 7px; color: var(--muted); font-size: 0.64rem; letter-spacing: 0.12em; }
.line-button { display: flex; width: 100%; min-height: 42px; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; border: 1px solid rgba(248, 243, 233, 0.25); border-radius: 4px; background: linear-gradient(110deg, var(--gold-soft), var(--gold)); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.35); color: var(--navy-950); font-size: clamp(0.73rem, 3.1vw, 0.88rem); font-weight: 700; letter-spacing: 0.08em; text-decoration: none; transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease; }
.line-button:hover { filter: brightness(1.04); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.line-button:active { transform: translateY(2px) scale(0.99); box-shadow: 0 5px 14px rgba(0, 0, 0, 0.25); }
.line-button:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }
.line-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 18px; border: 1.5px solid var(--navy-950); border-radius: 5px; font-size: 0.42rem; font-weight: 900; letter-spacing: -0.04em; }
.button-arrow { margin-left: auto; font-family: Georgia, serif; font-size: 0.9rem; }

.page-footer { margin-top: 9px; text-align: center; animation: rise-in 700ms 300ms ease-out both; }
.footer-brand { margin: 0 0 3px; color: var(--gold-soft); font-family: "Noto Serif TC", "Songti TC", "PMingLiU", serif; font-size: 0.59rem; letter-spacing: 0.12em; }
.disclaimer { max-width: 330px; margin: 0 auto; color: rgba(174, 184, 197, 0.72); font-size: 0.46rem; line-height: 1.5; letter-spacing: 0.02em; }

@keyframes rise-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

@media (max-height: 690px) {
  .hero { padding-top: max(10px, env(safe-area-inset-top)); padding-bottom: max(9px, env(safe-area-inset-bottom)); }
  .brand-logo { width: clamp(48px, 15vw, 64px); margin-bottom: 1px; }
  .hero-copy { margin-top: 5px; }
  h1 { margin-bottom: 3px; font-size: clamp(1.5rem, 7vw, 1.9rem); }
  .feature-panel { margin-top: 8px; }
  .feature-card { min-height: 46px; padding-top: 6px; padding-bottom: 6px; }
  .cta-area { padding-top: 7px; }
  .page-footer { margin-top: 5px; }
}

@media (min-width: 431px) {
  .hero { padding-left: 24px; padding-right: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}