/* EnergyOS Landing — 所有樣式以 .eos 為命名空間 */
.eos {
  --eos-ink: #18241f;
  --eos-ink-2: #41504a;
  --eos-muted: #5d6b65;
  --eos-faint: #8a968f;
  --eos-bg: #f5f6f3;
  --eos-green: #1f7a63;
  --eos-green-dark: #145a48;
  --eos-green-light: #2fa37f;
  --eos-line: rgba(24, 36, 31, .07);
  --eos-mono: 'IBM Plex Mono', monospace;

  min-height: 100vh;
  background: var(--eos-bg);
  color: var(--eos-ink);
  font-family: "Noto Sans TC", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body { margin: 0; background: #f5f6f3; }
.eos *, .eos *::before, .eos *::after { box-sizing: border-box; }
.eos a { color: var(--eos-green); text-decoration: none; transition: color .2s, background .2s, border-color .2s; }
.eos a:hover { color: var(--eos-green-dark); }
.eos img { max-width: 100%; }
.eos section[id] { scroll-margin-top: 72px; }

/* layout */
.eos-wrap, .eos-header__inner { width: 100%; margin: 0 auto; padding-left: 12px; padding-right: 12px; }
/* 對齊官網 Bootstrap .container 寬度 */
@media (min-width: 576px) { .eos-wrap, .eos-header__inner { max-width: 540px; } }
@media (min-width: 768px) { .eos-wrap, .eos-header__inner { max-width: 720px; } }
@media (min-width: 992px) { .eos-wrap, .eos-header__inner { max-width: 960px; } }
@media (min-width: 1200px) { .eos-wrap, .eos-header__inner { max-width: 1140px; } }
@media (min-width: 1400px) { .eos-wrap, .eos-header__inner { max-width: 1320px; } }
.eos-accent { color: var(--eos-green); }
.eos-nowrap { white-space: nowrap; }
.eos-muted { color: var(--eos-muted); line-height: 1.75; font-size: 15px; }

.eos-eyebrow { font: 500 12px var(--eos-mono); letter-spacing: .14em; color: var(--eos-green); margin-bottom: 18px; }
.eos-eyebrow--tight { margin-bottom: 0; }
.eos-eyebrow--purple { color: #8a55c2; }
.eos-h2 { margin: 12px 0 0; font-size: clamp(28px, 3.6vw, 40px); font-weight: 700; line-height: 1.3; text-wrap: balance; }
.eos-h2--sm { font-size: 26px; line-height: 1.4; }

/* buttons */
.eos .eos-btn { transition: color .2s, background .2s, border-color .2s, translate .25s, box-shadow .25s; display: inline-block; padding: 14px 26px; border-radius: 999px; white-space: nowrap; font-weight: 500; font-size: 16px; }
.eos .eos-btn--sm { padding: 9px 16px; font-size: 14px; }
.eos .eos-btn--dark { background: var(--eos-ink); color: #fff; }
.eos .eos-btn--dark:hover { background: var(--eos-green); color: #fff; }
.eos .eos-btn--primary { background: var(--eos-green); color: #fff; }
.eos .eos-btn--primary:hover { background: var(--eos-green-dark); color: #fff; }
.eos .eos-btn--ghost { background: #fff; color: var(--eos-ink); border: 1px solid rgba(24, 36, 31, .12); }
.eos .eos-btn--ghost:hover { border-color: var(--eos-green); color: var(--eos-green); }

/* header */
.eos-header {
  transition: box-shadow .3s;
  position: sticky; top: 0; z-index: 10;
  background: rgba(245, 246, 243, .88);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(24, 36, 31, .06);
}
.eos-header__inner { padding-top: 14px; padding-bottom: 14px; display: flex; align-items: center; gap: 24px; }
.eos .eos-brand { display: flex; align-items: center; gap: 10px; color: var(--eos-ink); }
.eos-brand__mark { width: 32px; height: 32px; border-radius: 9px; background: var(--eos-green); display: grid; place-items: center; }
.eos-brand__name { font-weight: 700; font-size: 18px; letter-spacing: .01em; }
.eos-brand__sub { font-weight: 500; color: var(--eos-ink-2); margin-left: 2px; }
.eos-nav { display: flex; gap: 22px; margin-left: auto; font-size: 14px; flex-wrap: wrap; }
.eos .eos-nav a { color: var(--eos-ink-2); }
.eos .eos-nav a:hover, .eos .eos-nav a.is-active { color: var(--eos-green); }

/* hero */
.eos-hero {
  padding-top: 72px; padding-bottom: 56px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: 56px; align-items: center;
}
.eos-hero__title { margin: 0; font-size: clamp(44px, 7vw, 80px); line-height: 1.1; font-weight: 900; letter-spacing: -.01em; text-wrap: balance; }
.eos-hero__lead { margin: 24px 0 0; font-size: 18px; line-height: 1.8; color: var(--eos-ink-2); max-width: 520px; text-wrap: pretty; }
.eos-hero__ctas { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }

.eos-mock {
  background: #fff; border-radius: 20px; padding: 22px;
  box-shadow: 0 1px 2px rgba(24, 36, 31, .05), 0 24px 60px -24px rgba(24, 36, 31, .18);
  border: 1px solid rgba(24, 36, 31, .06);
}
.eos-mock__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.eos-mock__sub { font-size: 12px; color: var(--eos-muted); }
.eos-mock__title { font-size: 18px; font-weight: 700; margin-top: 2px; }
.eos-status { display: flex; align-items: center; gap: 6px; background: #eef8f3; color: var(--eos-green); font-size: 12px; font-weight: 500; padding: 5px 10px; border-radius: 999px; white-space: nowrap; }
.eos-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--eos-green-light); animation: eos-pulse 1.8s ease-in-out infinite; }
@keyframes eos-pulse { 50% { opacity: .35; } }

.eos-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.eos-kpi { border-radius: 14px; padding: 14px; border: 1px solid; }
.eos-kpi--green { background: #eef8f3; border-color: #d6efe3; }
.eos-kpi--blue { background: #eef3fb; border-color: #dbe5f5; }
.eos-kpi--yellow { background: #fdf8e6; border-color: #f4e9bf; }
.eos-kpi--purple { background: #f5f0fb; border-color: #e6dbf4; }
.eos-kpi__label { font-size: 12px; color: var(--eos-ink-2); font-weight: 500; }
.eos-kpi__value { margin-top: 10px; display: flex; align-items: baseline; gap: 4px; }
.eos-kpi__num { font-size: 28px; font-weight: 300; font-variant-numeric: tabular-nums; transition: color .4s; }
.eos-kpi__num.is-tick { color: var(--eos-green); }
.eos-kpi__unit { font-size: 12px; color: var(--eos-muted); }

.eos-chart { margin-top: 16px; border: 1px solid var(--eos-line); border-radius: 14px; padding: 14px 14px 8px; }
.eos-chart__head { display: flex; justify-content: space-between; font-size: 12px; color: var(--eos-muted); }
.eos-chart__title { font-weight: 500; color: var(--eos-ink); }
.eos-chart__svg { width: 100%; height: auto; display: block; margin-top: 6px; }
.eos-chart__axis { display: flex; justify-content: space-between; font: 500 10px var(--eos-mono); color: var(--eos-faint); margin-top: 4px; }

.eos-banner { display: block; width: 100%; height: auto; aspect-ratio: 12 / 5; object-fit: cover; border-radius: 24px; }

/* who */
.eos-who { padding-top: 40px; }
.eos-who__grid {
  border-top: 1px solid rgba(24, 36, 31, .1); padding-top: 40px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
}
.eos-who__head { grid-column: 1 / -1; }
.eos-seg { display: flex; flex-direction: column; gap: 10px; }
.eos-seg__media { overflow: hidden; border-radius: 16px; margin-bottom: 6px; }
.eos-seg__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.eos-seg__title { font-size: 18px; font-weight: 700; }

/* how */
.eos-how { padding-top: 80px; padding-bottom: 80px; }
.eos-how__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; }
.eos-how__note { margin: 0; max-width: 380px; color: var(--eos-muted); line-height: 1.8; }
.eos-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.eos-step { background: #fff; border: 1px solid var(--eos-line); border-radius: 18px; padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.eos-step__n { font: 500 13px var(--eos-mono); color: var(--eos-green); }
.eos-step__title { font-size: 20px; font-weight: 700; }
.eos-how__bottom { margin-top: 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; }
.eos-how__photo { min-height: 300px; position: relative; overflow: hidden; border-radius: 18px; }
.eos-how__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.eos-stats {
  background: var(--eos-ink); color: #fff; border-radius: 18px; padding: 32px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px 20px; align-content: center;
}
.eos-stats__label { font-size: 13px; color: #a9bab2; }
.eos-stats__value { margin-top: 6px; display: flex; align-items: baseline; gap: 6px; }
.eos-stats__num { font-size: 44px; font-weight: 300; }
.eos-stats__num--hi { color: #7fe0b8; }
.eos-stats__unit { color: #a9bab2; }
.eos-stats__foot { grid-column: 1 / -1; font-size: 12px; color: #7d8f87; border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 16px; }

/* features */
.eos-features { background: #fff; border-top: 1px solid rgba(24, 36, 31, .06); border-bottom: 1px solid rgba(24, 36, 31, .06); }
.eos-features__inner { padding-top: 88px; padding-bottom: 88px; }
.eos-features__title { margin-bottom: 56px; max-width: 640px; }
.eos-features__list { display: flex; flex-direction: column; gap: 72px; }
.eos-feature { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 48px; align-items: center; }
.eos-feature--reverse .eos-feature__text { order: 1; }
.eos-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; padding: 5px 12px; border-radius: 999px; }
.eos-tag--green { background: #eef8f3; color: #1f7a63; }
.eos-tag--blue { background: #eef3fb; color: #3d6bb3; }
.eos-tag--purple { background: #f5f0fb; color: #7a48b3; }
.eos-feature__title { margin: 16px 0 0; font-size: 28px; font-weight: 700; line-height: 1.35; }
.eos-feature__desc { margin: 14px 0 0; color: var(--eos-ink-2); line-height: 1.85; font-size: 16px; max-width: 460px; }
.eos-points { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.eos-points li { display: flex; gap: 10px; align-items: baseline; font-size: 15px; color: var(--eos-ink); }
.eos-points li::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--eos-green); flex: none; transform: translateY(-2px); }
.eos-shot { background: var(--eos-bg); border-radius: 18px; padding: 18px; border: 1px solid rgba(24, 36, 31, .06); }
.eos-shot img { width: 100%; display: block; border-radius: 10px; box-shadow: 0 10px 30px -14px rgba(24, 36, 31, .25); }

/* app */
.eos-app { padding-top: 88px; padding-bottom: 88px; }
.eos-app__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 48px; align-items: center; }
.eos-app__lead { margin: 16px 0 0; color: var(--eos-ink-2); line-height: 1.85; font-size: 16px; max-width: 480px; }
.eos-app__cards { margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.eos-mini { background: #fff; border: 1px solid var(--eos-line); border-radius: 14px; padding: 16px; }
.eos-mini__title { font-weight: 700; }
.eos-mini__desc { font-size: 14px; color: var(--eos-muted); margin-top: 6px; line-height: 1.6; }
.eos .eos-app__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; }
.eos-app__photo { display: block; width: 100%; aspect-ratio: 8 / 5; object-fit: cover; border-radius: 16px; }
/* 欄寬比例對應兩張截圖的長寬比（約 3.95 : 2.48），讓兩張等高 */
.eos-app__shots { margin-top: 48px; display: grid; grid-template-columns: 8fr 5fr; gap: 16px; align-items: start; }
.eos-frame { margin: 0; background: #fff; border-radius: 16px; padding: 10px; border: 1px solid rgba(24, 36, 31, .06); box-shadow: 0 20px 50px -28px rgba(24, 36, 31, .3); }
.eos-frame img { width: 100%; display: block; border-radius: 8px; }
.eos-frame figcaption { padding: 10px 4px 2px; font-size: 13px; font-weight: 500; color: var(--eos-muted); }

/* cta */
.eos-contact { padding-bottom: 88px; }
.eos-cta {
  background: var(--eos-green); color: #fff; border-radius: 28px; overflow: hidden;
  display: grid; grid-template-columns: 5fr 6fr; align-items: stretch;
}
.eos-cta__media { position: relative; min-height: 320px; }
.eos-cta__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.eos-cta__body { padding: clamp(32px, 5vw, 64px); display: flex; flex-direction: column; justify-content: center; }
.eos-cta__title { margin: 0; font-size: clamp(28px, 3.4vw, 40px); font-weight: 900; line-height: 1.25; text-wrap: balance; }
.eos-cta__lead { margin: 14px 0 28px; color: #d4efe4; line-height: 1.8; font-size: 16px; text-wrap: pretty; }
.eos-form { background: #fff; border-radius: 18px; padding: 24px; display: flex; flex-direction: column; gap: 12px; color: var(--eos-ink); }
.eos-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.eos-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.eos-field > label { font-size: 14px; font-weight: 700; }
.eos-required { color: #a3342b; font-size: 12px; font-weight: 400; }
.eos-input {
  font: inherit; font-size: 15px; padding: 13px 14px; min-width: 0; width: 100%;
  border: 1px solid rgba(24, 36, 31, .15); border-radius: 10px; outline: none;
  background: #fff; color: var(--eos-ink); transition: border-color .2s;
}
.eos-input:focus { border-color: var(--eos-green); }
textarea.eos-input { resize: vertical; min-height: 120px; }
.eos-input.is-invalid { border-color: #c2453a; }
.eos-submit { font: inherit; font-weight: 500; font-size: 16px; padding: 14px; border: 0; border-radius: 10px; background: var(--eos-ink); color: #fff; cursor: pointer; transition: background .2s; }
.eos-submit:hover { background: #0e1713; }
.eos-submit:disabled { background: var(--eos-green-dark); cursor: default; }

/* footer */
.eos-footer { border-top: 1px solid rgba(24, 36, 31, .08); }
.eos-footer__inner { padding-top: 40px; padding-bottom: 40px; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.eos-footer__info { display: flex; flex-direction: column; gap: 14px; }
.eos-footer__company { font-size: 20px; font-weight: 700; color: var(--eos-ink); letter-spacing: .02em; }
.eos-footer__contact { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 15px; color: var(--eos-muted); }
.eos .eos-footer__contact a { color: var(--eos-muted); padding: 10px 0; }
.eos .eos-footer__contact a:hover { color: var(--eos-green); }
.eos-footer__sep { width: 1px; height: 14px; background: var(--eos-green); }
.eos-footer__slogan { font-size: 14px; color: var(--eos-muted); }
.eos-footer__tag { font-size: 13px; color: var(--eos-faint); }

/* 語意標籤重設（改成 h3 / ol / address 後維持原本外觀） */
.eos-seg__title, .eos-step__title, .eos-mini__title { margin: 0; }
.eos-mini__title { font-size: 16px; }
.eos-steps { list-style: none; margin: 0; padding: 0; }
.eos-step p { margin: 0; }
.eos address { font-style: normal; }

/* FAQ */
.eos-faq { padding-top: 88px; padding-bottom: 88px; }
.eos-faq__grid { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: start; }
.eos-faq__aside { position: sticky; top: 96px; }
.eos-faq__intro { margin: 16px 0 0; color: var(--eos-ink-2); line-height: 1.85; font-size: 16px; }
.eos-facts { margin-top: 28px; background: #fff; border: 1px solid var(--eos-line); border-radius: 18px; padding: 20px 22px 8px; }
.eos-facts__title { font: 500 12px var(--eos-mono); letter-spacing: .14em; color: var(--eos-green); margin-bottom: 6px; }
.eos-facts dl { margin: 0; }
.eos-facts dl > div { display: grid; grid-template-columns: 76px 1fr; gap: 12px; padding: 11px 0; border-top: 1px solid var(--eos-line); }
.eos-facts dl > div:first-child { border-top: 0; }
.eos-facts dt { font-size: 13px; color: var(--eos-muted); }
.eos-facts dd { margin: 0; font-size: 14px; line-height: 1.6; color: var(--eos-ink); }
.eos-faq__list { display: flex; flex-direction: column; gap: 12px; }
.eos-faq__item {
  background: #fff; border: 1px solid var(--eos-line); border-radius: 16px;
  transition: border-color .3s, box-shadow .3s;
}
.eos-faq__item[open] { border-color: rgba(31, 122, 99, .3); box-shadow: 0 16px 36px -26px rgba(24, 36, 31, .4); }
.eos-faq__item summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 22px; border-radius: 16px;
}
.eos-faq__item summary::-webkit-details-marker { display: none; }
.eos-faq__item summary:focus-visible { outline: 2px solid var(--eos-green); outline-offset: 2px; }
.eos-faq__q { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.5; }
.eos-faq__icon {
  flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: #eef8f3; color: var(--eos-green); transition: transform .3s var(--eos-ease, ease), background .3s, color .3s;
}
.eos-faq__item[open] .eos-faq__icon { transform: rotate(45deg); background: var(--eos-green); color: #fff; }
.eos-faq__a { margin: 0; padding: 0 22px 22px; color: var(--eos-ink-2); line-height: 1.85; font-size: 15px; }
/* 支援的瀏覽器展開時有高度動畫，不支援的直接展開 */
.eos { interpolate-size: allow-keywords; }
.eos-faq__item::details-content { block-size: 0; overflow: hidden; transition: block-size .35s ease, content-visibility .35s allow-discrete; }
.eos-faq__item[open]::details-content { block-size: auto; }
@media (hover: hover) {
  .eos-faq__item:not([open]):hover { border-color: rgba(31, 122, 99, .25); }
  .eos-faq__item:not([open]):hover .eos-faq__icon { background: #d6efe3; }
}

/* ---------- 動態效果 ---------- */
.eos { --eos-ease: cubic-bezier(.2, .7, .2, 1); }

/* 滾動淡入：只有 JS 啟用時才先隱藏，避免 JS 失效時內容消失 */
.eos-js .eos-reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity .8s var(--eos-ease) var(--eos-delay, 0s), transform .8s var(--eos-ease) var(--eos-delay, 0s),
              translate .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.eos-js .eos-reveal--zoom { transform: scale(.95); }
.eos-js .eos-reveal.is-in { opacity: 1; transform: none; }

/* 頁首捲動後加陰影 */
.eos-header.is-scrolled { box-shadow: 0 8px 24px -16px rgba(24, 36, 31, .35); }

/* 趨勢圖描線 */
.eos-js #eos-chart-area { opacity: 0; transition: opacity 1.2s ease .9s; }
.eos-js .is-drawn #eos-chart-area { opacity: 1; }

/* Hero 後台卡片緩慢浮動（桌機） */
@keyframes eos-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@media (min-width: 992px) { .eos-mock.is-in { animation: eos-float 7s ease-in-out 1.2s infinite; } }

/* hover（僅限有滑鼠的裝置） */
@media (hover: hover) {
  .eos .eos-btn--primary:hover, .eos .eos-btn--dark:hover { translate: 0 -2px; box-shadow: 0 10px 22px -10px rgba(31, 122, 99, .7); }
  .eos .eos-btn--ghost:hover { translate: 0 -2px; }
  .eos-app__link svg { transition: translate .25s; }
  .eos-app__link:hover svg { translate: 2px -2px; }
  .eos-step:hover, .eos-mini:hover { translate: 0 -6px; border-color: rgba(31, 122, 99, .35); box-shadow: 0 18px 36px -22px rgba(24, 36, 31, .35); }
  .eos-step:hover .eos-step__n { color: var(--eos-green-light); }
  .eos-seg:hover .eos-seg__img, .eos-how__photo:hover img { transform: scale(1.05); }
  .eos-shot:hover, .eos-frame:hover { translate: 0 -6px; box-shadow: 0 28px 50px -26px rgba(24, 36, 31, .4); }
  .eos-submit:hover { box-shadow: 0 10px 22px -12px rgba(24, 36, 31, .8); }
}
.eos-step__n { transition: color .3s; }
.eos-mini { transition: translate .3s ease, box-shadow .3s ease, border-color .3s ease; }

@media (prefers-reduced-motion: reduce) {
  .eos-js .eos-reveal { opacity: 1; transform: none; transition: none; }
  .eos-js #eos-chart-area { opacity: 1; transition: none; }
  .eos-mock.is-in, .eos-dot { animation: none; }
}

/* RWD */
@media (max-width: 991px) {
  .eos-faq__grid { grid-template-columns: 1fr; gap: 32px; }
  .eos-faq__aside { position: static; }
  .eos-feature--reverse .eos-feature__text { order: 0; }
  .eos-app__shots { grid-template-columns: 1fr; }
  .eos-cta { grid-template-columns: 1fr; }
  .eos-cta__media { min-height: 0; aspect-ratio: 16 / 9; }
}
@media (max-width: 720px) {
  .eos-who__grid { grid-template-columns: 1fr; }
  /* 手機導覽：logo 下方一排可橫向滑動的膠囊 */
  .eos-header__inner { flex-wrap: wrap; row-gap: 10px; padding-top: 10px; padding-bottom: 10px; }
  .eos .eos-header .eos-btn { margin-left: auto; }
  .eos-nav {
    order: 3; flex-wrap: nowrap; gap: 8px; margin: 0 -12px; padding: 0 12px 2px; width: calc(100% + 24px);
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .eos-nav::-webkit-scrollbar { display: none; }
  .eos .eos-nav a {
    flex: 1 0 auto; text-align: center; padding: 7px 14px; border-radius: 999px; font-size: 13px;
    background: #fff; border: 1px solid rgba(24, 36, 31, .1); color: var(--eos-ink-2);
  }
  .eos .eos-nav a.is-active { background: var(--eos-green); border-color: var(--eos-green); color: #fff; }
  .eos section[id] { scroll-margin-top: 110px; }
}
@media (max-width: 560px) {
  .eos-hero { padding-top: 48px; gap: 40px; }
  .eos-hero__lead { font-size: 16px; }
  .eos-mock { padding: 16px; }
  .eos-kpi__num { font-size: 22px; }
  .eos-banner { border-radius: 16px; aspect-ratio: 4 / 3; }
  .eos-stats { padding: 24px; }
  .eos-stats__num { font-size: 34px; }
  .eos-app__cards, .eos-form__row { grid-template-columns: 1fr; }
  .eos-cta { border-radius: 20px; }
  /* 手機版壓縮區塊間距 */
  .eos-who { padding-top: 24px; }
  .eos-who__grid { padding-top: 32px; gap: 28px; }
  .eos-seg__img { aspect-ratio: 16 / 10; }
  .eos-how, .eos-app { padding-top: 56px; padding-bottom: 56px; }
  .eos-how__head { margin-bottom: 28px; }
  .eos-steps { gap: 12px; }
  .eos-step { padding: 20px; gap: 10px; }
  .eos-how__photo { min-height: 240px; }
  .eos-features__inner { padding-top: 56px; padding-bottom: 56px; }
  .eos-features__title { margin-bottom: 36px; }
  .eos-features__list { gap: 48px; }
  .eos-feature { gap: 24px; }
  .eos-feature__title { font-size: 24px; }
  .eos-shot { padding: 10px; }
  .eos-app__grid { gap: 32px; }
  .eos-app__shots { margin-top: 24px; }
  .eos-contact { padding-bottom: 56px; }
  .eos-cta__body { padding: 28px 20px; }
  .eos-form { padding: 18px; }
  .eos-footer__company { font-size: 18px; }
  .eos-faq { padding-top: 56px; padding-bottom: 56px; }
  .eos-faq__item summary { padding: 16px 18px; }
  .eos-faq__q { font-size: 16px; }
  .eos-faq__a { padding: 0 18px 18px; }
  .eos-facts { padding: 16px 18px 6px; }
}

.eos-consent { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; }
.eos-consent input { margin-top: 5px; flex-shrink: 0; }
#eos-form-status { display: none; padding: 20px; border: 2px solid #46738b; border-radius: 12px; background: #eff7fc; color: #254c61; line-height: 1.7; }
#eos-form-status.is-visible { display: block; }
#eos-form-status.is-success { border-color: #258267; background: #edf9f2; color: #175c46; }
#eos-form-status.is-error { border-color: #ba4b3e; background: #fff2ef; color: #8b3026; }
.eos-status-title { display: block; font-size: 16px; font-weight: 700; }
.eos-status-message { margin: 8px 0 0; font-size: 15px; }
.eos-status-message:empty { display: none; }