/* ============================================================
   KOTECH 科德技術有限公司 — 網站設計系統 v2
   純 CSS，無框架相依。繁體中文單語版本。
   ============================================================ */

/* ---------- 1. 設計代幣 ---------- */
:root{
  /* 品牌色（取自官方商標） */
  --brand:       #14AEE4;
  --brand-deep:  #0B7FB8;
  --brand-ink:   #0A5C86;
  --brand-soft:  #E1F4FC;
  --lime:        #A6CE1D;
  --lime-deep:   #7FA80E;

  /* 五色取碼（黑・橙・藍・綠・紫）
     色值直接取自產品的官方拆碼圖，與《五色學倉頡》系列一致。
     -ink 為深色版本，供白底文字使用（官方綠與橙作文字時對比度不足）。 */
  --code1: #4D4D4D;  --code1-ink: #3A3A3A;
  --code2: #F7722D;  --code2-ink: #C4501A;
  --code3: #0070BE;  --code3-ink: #005C9C;
  --code4: #8CD73F;  --code4-ink: #5B9418;
  --code5: #93278D;  --code5-ink: #7A1F75;

  /* 速成兩色：首碼與尾碼 */
  --quick-first: #E65E78;  --quick-first-ink: #C63E58;
  --quick-last:  #38B0A8;  --quick-last-ink:  #1F8880;

  /* 中性色 */
  --ink:      #16324A;
  --ink-soft: #4C6478;
  --ink-mute: #7B8FA1;
  --line:     #DCE9F1;
  --line-soft:#EDF4F8;
  --bg:       #FFFFFF;
  --bg-tint:  #F2F9FD;
  --bg-warm:  #FDFAF3;
  --bg-dark:  #103A55;

  /* 頁面重點色：各產品頁可覆寫 --accent 系列 */
  --accent:      var(--brand);
  --accent-deep: var(--brand-deep);
  --accent-soft: var(--brand-soft);

  --radius-sm: 10px;
  --radius:    18px;
  --radius-lg: 26px;
  --shadow-sm: 0 2px 10px rgba(16,58,85,.07);
  --shadow-md: 0 10px 30px rgba(16,58,85,.12);
  --shadow-lg: 0 24px 60px rgba(16,58,85,.16);

  /* 改用系統內建繁中字型：Apple 用 PingFang TC，Windows 用微軟正黑，
     Android 用內建 Noto Sans CJK。省下約 1.3MB 網絡字型，且即時顯示、無字型閃爍。 */
  --font: "PingFang TC","Microsoft JhengHei","Noto Sans TC","Hiragino Sans TC",
          system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --container: 1180px;
  --header-h: 74px;
}

/* 產品頁重點色主題 */
.theme-schoolcj{ --accent:#E8622D; --accent-deep:#C24916; --accent-soft:#FDEDE6 }
.theme-fcj    { --accent:#2E7DE0; --accent-deep:#1B5CB0; --accent-soft:#E7F0FD }
.theme-typeai { --accent:#6C4BD8; --accent-deep:#4E32AA; --accent-soft:#EFEAFD }
.theme-dict   { --accent:#2FA84F; --accent-deep:#1F7C39; --accent-soft:#E7F6EC }
.theme-legacy { --accent:#8A7B62; --accent-deep:#6A5D48; --accent-soft:#F5F1E9 }
.theme-school { --accent:#0B7FB8; --accent-deep:#075D88; --accent-soft:#E1F4FC }

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
body{
  font-family:var(--font);color:var(--ink);background:var(--bg);
  line-height:1.8;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;border:0;background:none;cursor:pointer;color:inherit}
input,textarea,select{font:inherit;color:inherit}
strong,b{font-weight:700}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:4px}

.container{max-width:var(--container);margin-inline:auto;padding-inline:24px}
.container--narrow{max-width:860px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.br-desktop{display:none}
@media(min-width:760px){.br-desktop{display:inline}}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:.7rem 1.2rem;border-radius:0 0 10px 0;z-index:300}
.skip-link:focus{left:0}

/* ---------- 3. 文字 ---------- */
h1,h2,h3,h4{line-height:1.35;font-weight:900;letter-spacing:.01em}
.h-xl{font-size:clamp(2.1rem,4.8vw,3.5rem)}
.h-lg{font-size:clamp(1.7rem,3.4vw,2.4rem)}
.h-md{font-size:clamp(1.3rem,2.4vw,1.7rem)}
.lead{font-size:clamp(1rem,1.6vw,1.12rem);color:var(--ink-soft)}
.eyebrow{display:inline-block;font-size:.86rem;font-weight:700;color:var(--accent-deep);
  background:var(--accent-soft);border-radius:999px;padding:.28rem 1rem;margin-bottom:.9rem}
.eyebrow--onDark{background:rgba(255,255,255,.14);color:#BDE9FA}
.grad-text{background:linear-gradient(100deg,var(--accent) 10%,var(--accent-deep) 55%,var(--lime-deep) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.text-center{text-align:center}

/* ---------- 4. 按鈕 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  font-weight:700;line-height:1;white-space:nowrap;text-align:center;
  padding:.95rem 1.7rem;border-radius:999px;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease,border-color .18s ease;
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:linear-gradient(135deg,var(--accent) 0%,var(--accent-deep) 100%);color:#fff;
  box-shadow:0 6px 18px color-mix(in srgb,var(--accent) 38%,transparent)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 10px 26px color-mix(in srgb,var(--accent) 48%,transparent)}
.btn--outline{border:2px solid var(--accent);color:var(--accent-deep);background:#fff}
.btn--outline:hover{background:var(--accent-soft);transform:translateY(-2px)}
.btn--outline-light{border:2px solid rgba(255,255,255,.6);color:#fff}
.btn--outline-light:hover{background:rgba(255,255,255,.14)}
.btn--ghost{color:var(--accent-deep);font-weight:700}
.btn--ghost:hover{background:var(--accent-soft)}
.btn--lime{background:linear-gradient(135deg,var(--lime) 0%,var(--lime-deep) 100%);color:#12301A;
  box-shadow:0 6px 18px rgba(166,206,29,.4)}
.btn--lime:hover{transform:translateY(-2px)}
.btn--wa{background:#25D366;color:#fff;box-shadow:0 6px 18px rgba(37,211,102,.35)}
.btn--wa:hover{background:#1EBE5A;transform:translateY(-2px)}
.btn--lg{padding:1.1rem 2.1rem;font-size:1.05rem}
.btn--sm{padding:.6rem 1.15rem;font-size:.9rem}
.btn--block{width:100%}
.btn-row{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.4rem}

/* ---------- 5. 通告列 ---------- */
.promo-bar{
  display:flex;align-items:center;justify-content:center;gap:.9rem;flex-wrap:wrap;
  background:linear-gradient(90deg,#0E86BC,var(--brand) 55%,#29C1F0);
  color:#fff;text-align:center;padding:.5rem 1rem;font-size:.9rem;line-height:1.5;
}
.promo-bar strong{color:#FFF48A}
.promo-bar a{font-weight:700;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.promo-bar a:hover{color:#FFF48A}

/* ---------- 6. 頁首 ---------- */
.site-header{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid transparent;
  transition:border-color .2s ease,box-shadow .2s ease}
.site-header.is-stuck{border-color:var(--line);box-shadow:0 4px 24px rgba(16,58,85,.08)}
.site-header__inner{display:flex;align-items:center;gap:1rem;min-height:var(--header-h)}

.brand{display:flex;align-items:center;flex-shrink:0}
.brand__img{height:42px;width:auto}

.main-nav{display:flex;align-items:center;margin-inline:auto}
.main-nav__list{display:flex;align-items:center;gap:.1rem}
.main-nav__list > li > a,.main-nav__toggle{
  display:flex;align-items:center;gap:.3rem;white-space:nowrap;
  padding:.55rem .8rem;border-radius:10px;font-weight:500;color:var(--ink);font-size:.98rem}
.main-nav__list > li > a:hover,.main-nav__toggle:hover,
.main-nav__list > li > a[aria-current="page"]{background:var(--brand-soft);color:var(--brand-deep)}
.main-nav__list > li > a[aria-current="page"]{font-weight:700}
.caret{width:10px;flex-shrink:0;transition:transform .2s ease}

.has-sub{position:relative}
.sub-menu{position:absolute;top:calc(100% + 10px);left:0;min-width:280px;background:#fff;
  border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-md);padding:.5rem;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s}
.has-sub:hover .sub-menu,.has-sub:focus-within .sub-menu,.has-sub.is-open .sub-menu{
  opacity:1;visibility:visible;transform:translateY(0)}
.has-sub:hover .caret,.has-sub.is-open .caret{transform:rotate(180deg)}
.sub-menu a{display:block;padding:.6rem .8rem;border-radius:10px}
.sub-menu a:hover{background:var(--bg-tint)}
.sub-menu strong{display:block;font-size:.95rem;font-weight:700}
.sub-menu span{display:block;font-size:.78rem;color:var(--ink-soft);line-height:1.5}
.sub-menu .tag{display:inline-block;font-size:.68rem;font-weight:700;border-radius:999px;
  padding:.05rem .5rem;margin-left:.35rem;vertical-align:middle}
.tag--new{background:#FFE9E2;color:#C24916}
.tag--free{background:#E7F6EC;color:#1F7C39}

.site-header__actions{display:flex;align-items:center;gap:.5rem;margin-left:auto}
.nav-burger{display:none;flex-direction:column;gap:5px;padding:.6rem;border-radius:10px}
.nav-burger span{width:22px;height:2.5px;background:var(--ink);border-radius:2px;
  transition:transform .25s ease,opacity .2s ease}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.main-nav__mobile-actions{display:none}

/* ---------- 7. 區塊 ---------- */
.section{padding:5rem 0}
.section--sm{padding:3.4rem 0}
.section--tint{background:var(--bg-tint)}
/* 兩個淺色底區塊相連時沒有顏色分界，上下內距疊加會顯得空洞，收窄少許 */
.section--tint + .section--tint{padding-top:3rem}
.section--tint:has(+ .section--tint){padding-bottom:3rem}
/* 需要收窄上方留白的區塊 */
.section--tightTop{padding-top:3rem}
.section--warm{background:var(--bg-warm)}
.section--accent-soft{background:var(--accent-soft)}
.section--dark{background:
  radial-gradient(700px 400px at 85% 0%,rgba(20,174,228,.25),transparent 60%),
  radial-gradient(500px 350px at 0% 100%,rgba(166,206,29,.16),transparent 60%),
  var(--bg-dark);color:#fff}
.section--dark h1,.section--dark h2,.section--dark h3{color:#fff}
.section--dark p{color:#CFE6F2}

.section-head{max-width:680px;margin:0 auto 3rem;text-align:center}
/* 標題與說明各佔一行時，需要比預設更闊 */
.section-head--wide{max-width:min(1040px,100%)}
/* 只餘標籤、無標題的標題區，收窄下方留白 */
.section-head--slim{margin-bottom:1.6rem}
.section-head p{color:var(--ink-soft);margin-top:.7rem}
/* 深色底：.section-head p 排在 .section--dark p 之後會蓋過它，
   令說明文字變回淺色主題的顏色，對比度只有 2.4:1。以下明確補回。 */
.section--dark .section-head p{color:#CFE6F2}
.section--dark .section-head .eyebrow--onDark{color:#BDE9FA}
.section-head--left{margin-inline:0;text-align:left}
.section-head--row{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;max-width:none;text-align:left}

.split{display:grid;grid-template-columns:1fr 1fr;gap:3.4rem;align-items:center}
.split--media-right .split__media{order:2}
.split__copy > p{color:var(--ink-soft);margin-top:.9rem}
.split + .split{margin-top:4rem}

/* ---------- 8. 頁面標頭（內頁） ---------- */
.page-hero{position:relative;overflow:hidden;padding:3.4rem 0 3.6rem;
  background:linear-gradient(180deg,var(--accent-soft) 0%,#fff 100%)}
/* 只有標題、沒有副文的頁面標頭 */
.page-hero--slim{padding:2.6rem 0 1.2rem}
/* 標題之下不再留一大片空白，緊接下一節 */
.page-hero--slim + .section{padding-top:2.2rem}

.page-hero__inner{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center}
.page-hero__copy{max-width:640px}
.page-hero h1{margin:.6rem 0 .5rem}
.page-hero__lead{font-size:clamp(1.05rem,1.9vw,1.25rem);color:var(--ink-soft);font-weight:500}
.page-hero__meta{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.3rem}
.page-hero__meta li{background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:.32rem .9rem;font-size:.86rem;font-weight:500;box-shadow:var(--shadow-sm)}

/* 麵包屑 */
.crumbs{font-size:.85rem;color:var(--ink-mute)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.crumbs a:hover{color:var(--accent-deep);text-decoration:underline}
.crumbs li+li::before{content:"›";margin-right:.4rem;color:var(--ink-mute)}

/* ---------- 9. 首頁主視覺 ---------- */
.hero{position:relative;overflow:hidden;padding:4rem 0 4.4rem;
  background:linear-gradient(180deg,#EAF7FD 0%,#F7FCFF 68%,#fff 100%)}
.hero__inner{display:grid;grid-template-columns:1.06fr .94fr;gap:3rem;align-items:center}
.hero__copy{max-width:620px}

/* ── 全闊橫額：漸變背景鋪滿，文字與真實 App 畫面浮於其上 ── */
.hero--banner{
  padding:0;
  min-height:clamp(460px, 44vw, 600px);
  display:grid;
  align-items:center;
  background:linear-gradient(178deg,
    #BEE9FA 0%, #D6F1FB 34%, #E9F7F2 62%, #DCEFCF 86%, #CDE7B8 100%);
}
/* 背景裝飾：柔和雲朵與飄浮的五色方塊 */
.hero--banner__bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.bg-cloud{position:absolute;background:rgba(255,255,255,.78);border-radius:999px;filter:blur(.4px)}
.bg-cloud::before,.bg-cloud::after{content:"";position:absolute;background:inherit;border-radius:50%}
.bg-cloud--1{width:190px;height:52px;top:14%;left:6%}
.bg-cloud--1::before{width:78px;height:78px;left:34px;top:-34px}
.bg-cloud--1::after{width:54px;height:54px;right:34px;top:-22px}
.bg-cloud--2{width:140px;height:40px;top:30%;left:38%;opacity:.65}
.bg-cloud--2::before{width:60px;height:60px;left:26px;top:-26px}
.bg-cloud--3{width:110px;height:32px;top:9%;right:26%;opacity:.55}
.bg-cloud--3::before{width:46px;height:46px;left:20px;top:-20px}

.bg-tile{position:absolute;border-radius:12px;opacity:.9}
.bg-tile--1{width:46px;height:46px;background:var(--code2);top:16%;right:6%;transform:rotate(-12deg)}
.bg-tile--2{width:34px;height:34px;background:var(--code3);top:44%;right:2.5%;transform:rotate(9deg)}
.bg-tile--3{width:28px;height:28px;background:var(--code4);top:66%;right:9%;transform:rotate(-6deg)}
.bg-tile--4{width:38px;height:38px;background:var(--code5);top:8%;right:16%;transform:rotate(14deg)}
.bg-tile--5{width:24px;height:24px;background:var(--code2);top:56%;left:44%;transform:rotate(-16deg);opacity:.55}

.hero--banner__inner{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1.02fr .98fr;gap:2.4rem;align-items:center;
  padding-block:3rem;
}
.hero--banner .hero__copy{max-width:560px}
.hero--banner .hero__lead{color:var(--ink-soft)}

/* ── 裝置組合：學校平台（手提電腦）＋自學 App（手機） ── */
.hero-devices{position:relative;padding-bottom:12%}

/* 手提電腦外框 */
.device-laptop{position:relative;margin:0;width:100%;z-index:1}
.device-laptop__screen{
  background:linear-gradient(158deg,#2A4A66 0%,#122B3F 100%);
  border-radius:12px 12px 4px 4px;
  padding:9px 9px 0;
  box-shadow:0 26px 46px rgba(16,58,85,.28), 0 2px 6px rgba(16,58,85,.18);
}
.device-laptop__screen img{display:block;width:100%;height:auto;border-radius:6px 6px 0 0;background:#F2F8FC}
.device-laptop__base{
  height:13px;margin-inline:-5%;
  background:linear-gradient(180deg,#D3DEE6 0%,#A9BBC7 60%,#8CA1B0 100%);
  border-radius:0 0 12px 12px;
  box-shadow:0 12px 20px rgba(16,58,85,.22);
  position:relative;
}
.device-laptop__base::after{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:15%;height:5px;background:rgba(16,58,85,.22);border-radius:0 0 7px 7px;
}

/* 手機外框，疊在手提電腦左下角 */
.device{
  position:absolute;margin:0;
  border-radius:26px;
  background:linear-gradient(158deg,#24435E 0%,#0E2436 100%);
  padding:6px;
  box-shadow:0 20px 38px rgba(16,58,85,.36), 0 2px 6px rgba(16,58,85,.22);
}
.device img{display:block;width:100%;height:auto;border-radius:21px;background:#4FC3D1}
.device--back{
  width:25%;left:-2%;bottom:-4%;
  transform:rotate(-9deg);
  z-index:2;
}
.device--front{
  width:28%;left:19%;bottom:-9%;
  transform:rotate(4deg);
  z-index:3;
}
.hero h1{font-size:clamp(2.3rem,5vw,3.7rem);margin:.9rem 0 .6rem}
.hero__tagline{font-size:clamp(1.1rem,2.1vw,1.4rem);font-weight:700;color:var(--brand-ink);margin-bottom:.7rem}
.hero__lead{color:var(--ink-soft);margin-bottom:1.5rem}

/* 主視覺插圖 */
.hero-img{
  width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  background:linear-gradient(150deg,#DCF1FB,#EAF7E4);
}
/* 盒裝相：整個盒身要見齊，不能裁切 */
.hero-img--boxshot{
  aspect-ratio:4/3;
  object-fit:contain;
  padding:1.8rem;
  background:radial-gradient(78% 76% at 50% 42%,#EAF3F7 0%,#D9E8EF 100%);
}

/* 插圖外框的柔和光暈，令版面不會太平 */
.hero-figure{position:relative;isolation:isolate}
.hero-figure::before{
  content:"";position:absolute;z-index:-1;inset:-8% -6% -10% -6%;
  background:radial-gradient(60% 60% at 30% 25%, color-mix(in srgb,var(--accent) 26%,transparent), transparent 70%),
             radial-gradient(55% 55% at 75% 75%, rgba(166,206,29,.28), transparent 70%);
  filter:blur(38px);
}

/* 橫額佔位：未有正式圖時使用 */
.hero-slot{position:relative;border-radius:var(--radius-lg);overflow:hidden;
  background:linear-gradient(150deg,#DCF1FB,#EAF7E4);border:2px dashed #A8D4E8;
  min-height:340px;display:grid;place-items:center;text-align:center;padding:2rem}
.hero-slot__note{color:var(--brand-ink);font-weight:700;font-size:.95rem;opacity:.75}
.hero-slot__note span{display:block;font-weight:400;font-size:.82rem;color:var(--ink-soft);margin-top:.3rem}
.hero-slot > img,.hero-slot > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* 內文插圖 */
.section-img{width:100%;height:auto;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);
  background:var(--bg-tint)}

/* 產品卡縮圖 */
.product-card__img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:14px;
  margin-bottom:.9rem;background:var(--bg-tint);
  transition:transform .3s ease}
.product-card:hover .product-card__img{transform:scale(1.03)}
.product-card{overflow:hidden}

/* 直度手機截圖放進橫向框：對焦上半部，保留頂欄與影片 */
.product-card__img--tall{object-position:center top}

/* 實體包裝盒相片：直度，需完整顯示不可裁切 */
.product-card__img--boxshot{
  aspect-ratio:4/3;                 /* 直度盒身留高一點 */
  object-fit:contain;
  background:linear-gradient(155deg,#F4F8FA 0%,#EDF5F0 100%);
  padding:1rem;
}

/* ══════ 產品一覽：不規則拼貼（bento）══════
   七款產品重要性不一，部分有圖部分無圖，故用大小不一的方格排列，
   以面積表達主次，而非齊高齊闊的欄位。 */
.bento{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:minmax(186px,auto);
  gap:1.1rem;
}
.bento__item{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:1.4rem 1.4rem 1.5rem;box-shadow:var(--shadow-sm);overflow:hidden;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.bento__item:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--accent)}
/* 方格是 overflow:hidden，故緞帶要收入格內，唔可以用負數 top */
.bento__item .ribbon{top:14px;right:14px}

.bento__tag{
  font-size:.72rem;font-weight:700;letter-spacing:.06em;
  color:var(--accent-deep);text-transform:uppercase;
}
.bento__item h3{font-size:1.1rem;line-height:1.45}
.bento__item p{font-size:.9rem;color:var(--ink-soft);flex:1}
.bento__price{font-weight:900;font-size:1.15rem;color:var(--ink)}
.bento__price small{font-size:.76rem;font-weight:500;color:var(--ink-soft)}
.bento__price del{font-size:.8rem;font-weight:500;color:var(--ink-mute);margin-right:.3rem}

/* 圖片：主打大格用大截圖，包裝盒用完整顯示 */
.bento__shot{
  width:calc(100% + 2.8rem);margin:-1.4rem -1.4rem .8rem;
  max-width:none;                  /* 必須：否則 reset 的 img{max-width:100%} 會令圖闊唔到，變成偏左 */
  height:auto;                     /* 必須：否則 HTML height 屬性會蓋過 aspect-ratio */
  aspect-ratio:16/10;object-fit:cover;object-position:center top;
  background:var(--bg-tint);border-bottom:1px solid var(--line);
}
/* 包裝盒相：置中完整顯示，底色用產品自身色調 */
.bento__shot--box{
  aspect-ratio:4/3;object-fit:contain;object-position:center;padding:1.1rem;
  background:radial-gradient(80% 78% at 50% 42%, var(--box-bg-1,#EAF3F7) 0%, var(--box-bg-2,#D9E8EF) 100%);
}

/* ── App 產品格：直度手機畫面，用機身框住並斜放，唔裁切 ── */
.bento__item--app{
  background:linear-gradient(150deg,#FFF3EC 0%,#FDF7F0 46%,#F6FAF3 100%);
  padding-right:1.2rem;
}
.bento__appcopy{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;
  max-width:60%;
}
.bento__phone{
  position:absolute;right:-5%;bottom:-6%;width:53%;
  padding:6px;border-radius:24px;
  background:linear-gradient(158deg,#24435E 0%,#0E2436 100%);
  box-shadow:0 22px 40px rgba(16,58,85,.32);
  transform:rotate(-6deg);
  transition:transform .3s ease;
}
.bento__item--app:hover .bento__phone{transform:rotate(-3deg) translateY(-6px)}
.bento__phone img{display:block;width:100%;height:auto;border-radius:19px;background:#4FC3D1}

/* 淺色方格：唔似實色咁重，但足以同白色格區分 */
.bento__item--tint{
  background:linear-gradient(150deg,
    color-mix(in srgb, var(--accent) 13%, #fff) 0%,
    color-mix(in srgb, var(--accent) 5%,  #fff) 100%);
  border-color:color-mix(in srgb, var(--accent) 22%, transparent);
}
.bento__item--tint .bento__shot{border-bottom-color:color-mix(in srgb, var(--accent) 18%, transparent)}

/* 實色方格：令拼貼有節奏，唔會一片白 */
.bento__item--fill{
  background:linear-gradient(150deg,var(--accent) 0%,var(--accent-deep) 100%);
  border-color:transparent;color:#fff;
}
.bento__item--fill h3{color:#fff}
.bento__item--fill p{color:rgba(255,255,255,.9)}
.bento__item--fill .bento__tag{color:rgba(255,255,255,.85)}
.bento__item--fill .bento__price{color:#fff}
.bento__item--fill .bento__price small{color:rgba(255,255,255,.82)}
.bento__item--fill:hover{border-color:transparent}

/* 各格位置：以面積表達主次 */
.b-schoolcj{grid-column:1/3;grid-row:1/3}
.b-typeai  {grid-column:3/5;grid-row:1}
.b-online  {grid-column:3;  grid-row:2}
.b-dict    {grid-column:4;  grid-row:2}
.b-fcj2    {grid-column:1;  grid-row:3}
.b-pth2    {grid-column:2;  grid-row:3}
.b-school  {grid-column:3/5;grid-row:3}

@media(max-width:980px){
  .bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:minmax(170px,auto)}
  .b-schoolcj,.b-typeai,.b-school{grid-column:1/3}
  .b-schoolcj,.b-typeai,.b-online,.b-dict,.b-fcj2,.b-pth2,.b-school{grid-row:auto}
  .b-online,.b-dict,.b-fcj2,.b-pth2{grid-column:auto}
  .bento__appcopy{max-width:56%}
  .bento__phone{width:38%;right:2%;bottom:-8%}
}
@media(max-width:600px){
  .bento{grid-template-columns:1fr;grid-auto-rows:auto}
  .bento__item{grid-column:1 !important}
  .bento__item--app{padding-right:1.4rem}
  .bento__appcopy{max-width:100%}
  .bento__phone{position:static;width:min(190px,58%);margin:1.1rem auto 0;transform:none}
  .bento__item--app:hover .bento__phone{transform:none}
}

/* ---------- 10a. 首頁數據帶（有跳數動畫） ---------- */
/* 淺藍 → 淺綠橫向漸變，與上方橫額區隔開 */
.stat-band{
  position:relative;overflow:hidden;
  background:linear-gradient(102deg,
    #CFE9FA 0%, #D8EEF7 26%, #DFF2EC 52%, #E2F3DC 76%, #DCF0CB 100%);
  padding:2.6rem 0;
  border-top:1px solid rgba(16,58,85,.10);
  border-bottom:1px solid rgba(16,58,85,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(255,255,255,.45);
}
/* 背景光暈 */
.stat-band::before,.stat-band::after{
  content:"";position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;
}
.stat-band::before{width:420px;height:420px;background:rgba(20,174,228,.26);top:-58%;left:4%}
.stat-band::after{width:380px;height:380px;background:rgba(166,206,29,.3);bottom:-64%;right:6%}

.stat-grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;
}
.stat{
  position:relative;text-align:center;padding:.4rem 1rem;
  opacity:0;transform:translateY(18px);
  transition:opacity .55s ease, transform .55s ease;
}
.stat-band.is-in .stat{opacity:1;transform:none}
.stat-band.is-in .stat:nth-child(2){transition-delay:.1s}
.stat-band.is-in .stat:nth-child(3){transition-delay:.2s}
.stat-band.is-in .stat:nth-child(4){transition-delay:.3s}

/* 分隔線 */
.stat + .stat::before{
  content:"";position:absolute;left:0;top:18%;bottom:18%;width:1px;
  background:linear-gradient(180deg,transparent,rgba(16,58,85,.16),transparent);
}

.stat__icon{
  display:grid;place-items:center;width:46px;height:46px;margin:0 auto .6rem;
  border-radius:14px;
  background:#fff;
  border:1px solid color-mix(in srgb, var(--sc) 34%, transparent);
  /* 淺底用深色版本，確保對比度 */
  color:var(--sc-ink, var(--sc));
  box-shadow:0 3px 10px rgba(16,58,85,.09);
}
.stat__icon svg{width:24px;height:24px}

.stat__num{
  font-size:clamp(2rem,3.4vw,2.9rem);font-weight:900;line-height:1.1;color:var(--brand-deep);
  letter-spacing:.01em;display:flex;align-items:baseline;justify-content:center;gap:.06em;
}
.stat__unit{font-size:.5em;font-weight:700;color:var(--brand)}
.stat__label{margin-top:.35rem;font-size:.9rem;color:var(--ink-soft);font-weight:500}

.stat__val{display:inline-block;font-variant-numeric:tabular-nums}
/* 打字期間避免數字未打完時整行左右跳動 */
.stat__num{min-height:1.1em}

/* 打字游標 */
.stat__caret{
  display:inline-block;width:3px;height:.86em;margin-left:.07em;
  background:var(--brand);border-radius:1px;
  vertical-align:-.06em;opacity:0;
}
.stat__caret.is-typing{opacity:1}
/* 打完後閃兩下就消失，唔會一直留喺度 */
.stat__caret.is-done{animation:caretOut 1.5s steps(1,end) forwards}
@keyframes caretOut{
  0%{opacity:1} 22%{opacity:0} 44%{opacity:1} 66%{opacity:0}
  100%{opacity:0}
}

/* 打完最後一個字時輕微彈一下 */
.stat__num.is-typed{animation:statPop .4s cubic-bezier(.34,1.56,.64,1)}
@keyframes statPop{0%{transform:scale(1)}45%{transform:scale(1.08)}100%{transform:scale(1)}}

/* 標籤：該項打完後才淡入 */
.stat__label{opacity:0;transform:translateY(6px);
  transition:opacity .45s ease, transform .45s ease}
.stat__label.is-shown{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .stat{opacity:1;transform:none}
  .stat__num.is-typed{animation:none}
  .stat__caret{display:none}
  .stat__label{opacity:1;transform:none}
}

/* ---------- 10. 數據列 ---------- */
.stats-strip{background:#fff;border-block:1px solid var(--line);padding:1.6rem 0}
.stats{display:flex;gap:2rem;flex-wrap:wrap;justify-content:space-between}
.stats li{display:flex;flex-direction:column}
.stats strong{font-size:1.6rem;font-weight:900;color:var(--brand-deep);line-height:1.2}
.stats span{font-size:.86rem;color:var(--ink-soft)}
.section--dark .stats strong{color:#FFE477}
.section--dark .stats span{color:#9DC3D8}

/* ---------- 11. 卡片 ---------- */
.grid{display:grid;gap:1.3rem}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}

.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:1.7rem 1.5rem;box-shadow:var(--shadow-sm);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.card h3{font-size:1.1rem;margin-bottom:.35rem}
.card p{color:var(--ink-soft);font-size:.95rem}
.card__icon{display:grid;place-items:center;width:52px;height:52px;border-radius:15px;
  background:color-mix(in srgb,var(--ic,var(--accent)) 12%,#fff);color:var(--ic,var(--accent));margin-bottom:1rem}
.card__icon svg{width:27px;height:27px}

/* 卡片圖示（改用官方插圖，而非向量圖示） */
/* 介面截圖：完整顯示，不作裁切 */
.card__pic{display:block;width:auto;height:74px;max-width:100%;margin-bottom:1rem;object-fit:contain;object-position:left center}

/* 產品畫面（綠色場景插圖），本身已有留白，不用再加外框 */
.scene{width:100%;height:auto;display:block;border-radius:var(--radius-lg)}
/* 小怪獸裝飾 */
.mascot{display:block;height:88px;width:auto;margin:.4rem 0 0}

/* 卡片頂部畫面圖：滿版貼齊卡片邊緣 */
.card--shot{overflow:hidden;padding-top:0}
.card__shot{display:block;width:calc(100% + 3rem);max-width:none;height:auto;
  margin:0 -1.5rem 1.25rem;aspect-ratio:10/7;object-fit:cover;object-position:center top;
  border-bottom:1px solid var(--line);background:var(--bg-tint)}
/* 介面截圖：完整顯示，不作裁切，亦不滿版出血（滿版會被卡片邊緣切走內容） */
.card__shot--ui{aspect-ratio:auto;object-fit:contain;background:var(--bg-tint);
  width:100%;margin:0 0 1.15rem;border:1px solid var(--line);border-radius:10px}
.card--shot:has(.card__shot--ui){padding-top:1.7rem}


/* 產品卡 */
.product-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:.6rem;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.8rem 1.6rem;
  box-shadow:var(--shadow-sm);height:100%;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.product-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--accent)}
.product-card--feature{border:2px solid var(--accent);box-shadow:0 12px 34px color-mix(in srgb,var(--accent) 20%,transparent)}
.product-card__badge{font-size:.76rem;font-weight:700;border-radius:999px;padding:.2rem .75rem;
  background:var(--accent-soft);color:var(--accent-deep)}
.product-card h3,.product-card h2{font-size:1.2rem;line-height:1.35}
.product-card p{color:var(--ink-soft);font-size:.94rem;flex:1}
/* 聯絡卡片內容長短不一，段落若吸走剩餘空間會在段落與標籤之間留下一大片空白；
   改為將空位推到按鈕之上，兩張卡的按鈕亦可對齊 */
.product-card:has(.contact-list) p{flex:none}
.product-card:has(.contact-list) .btn-row{margin-top:auto}

.product-card__meta{display:flex;flex-wrap:wrap;gap:.35rem;margin:.2rem 0 .4rem}
.product-card__meta li{font-size:.76rem;color:var(--ink-soft);background:var(--bg-tint);
  border-radius:7px;padding:.16rem .55rem}
.product-card__price{font-size:1.35rem;font-weight:900;color:var(--ink)}
.product-card__price small{font-size:.8rem;font-weight:500;color:var(--ink-soft)}
.product-card__price del{font-size:.88rem;font-weight:500;color:var(--ink-mute);margin-right:.35rem}
.ribbon{position:absolute;top:-13px;right:16px;background:linear-gradient(135deg,#FF7A59,#F5576C);
  color:#fff;font-size:.76rem;font-weight:700;border-radius:999px;padding:.24rem .8rem;box-shadow:var(--shadow-sm)}

/* 功能列表 */
.check-list li{position:relative;padding-left:1.9rem;margin-bottom:.6rem;color:var(--ink)}
.check-list li::before{content:"";position:absolute;left:0;top:.36rem;width:19px;height:19px;border-radius:50%;
  background:var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4 8-9' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.section--dark .check-list li{color:#DFF1FA}

/* 編號列表 */
.step-list{counter-reset:step;display:grid;gap:1.1rem}
.step-list li{position:relative;padding-left:3.4rem;counter-increment:step}
.step-list li::before{content:counter(step);position:absolute;left:0;top:.1rem;
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent);color:#fff;font-weight:900;font-size:1rem}
.step-list h3{font-size:1.05rem;margin-bottom:.15rem}
.step-list p{color:var(--ink-soft);font-size:.94rem}

/* ---------- 12. 五色示範 ---------- */
.code-chip{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  width:52px;height:58px;border-radius:13px;background:#fff;
  border:2px solid var(--cc,var(--line));color:var(--cc-ink,var(--cc,var(--ink)));
  font-weight:900;font-size:1.3rem;line-height:1.1;box-shadow:var(--shadow-sm);
  transition:border-color .25s ease,color .25s ease}

/* 速成模式：首碼與尾碼改用官方兩色。
   注意：每個 chip 的 --cc 是寫在 inline style 上，優先度高過此處，
   所以要直接覆寫 border-color / color，而非再設一次 --cc。 */
.demo-card__codes.is-quick .code-chip:first-child{
  border-color:var(--quick-first);
  color:var(--quick-first-ink);
}
.demo-card__codes.is-quick .code-chip:last-child{
  border-color:var(--quick-last);
  color:var(--quick-last-ink);
}
.code-chip small{font-size:.6rem;font-weight:700;opacity:.75;letter-spacing:.06em}

.demo-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);padding:1.7rem;max-width:460px;margin-inline:auto}
.demo-card__head{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.demo-card__title{font-weight:700;color:var(--ink-soft);font-size:.9rem}
.seg{display:flex;background:var(--bg-tint);border-radius:999px;padding:4px;border:1px solid var(--line)}
.seg__btn{padding:.34rem 1rem;border-radius:999px;font-weight:700;font-size:.86rem;color:var(--ink-soft);
  transition:background .18s ease,color .18s ease}
.seg__btn.is-active{background:var(--ink);color:#fff}
.demo-card__char{font-size:6.6rem;font-weight:900;text-align:center;line-height:1.3;color:var(--ink)}

/* 官方五色／速成拆碼圖 */
.char-figure{display:grid;place-items:center;padding:.6rem 0 1rem}
.char-figure__img{width:min(230px,64%);height:auto;aspect-ratio:1;
  transition:opacity .25s ease}
.char-figure__img.is-swapping{opacity:0}
.demo-card__codes{display:flex;justify-content:center;gap:.5rem;min-height:60px}
.demo-card__codes .code-chip{opacity:.18;transform:translateY(6px) scale(.92);filter:grayscale(.9);
  transition:opacity .3s ease,transform .3s ease,filter .3s ease}
.demo-card__codes .code-chip.is-on{opacity:1;transform:none;filter:none}
.demo-card__codes .code-chip.is-dim{opacity:.25;filter:grayscale(.9)}
.demo-card__hint{text-align:center;color:var(--ink-soft);font-size:.88rem;margin-top:.9rem;min-height:2.4em}

/* 五色字示意（靜態） */
.colour-word{display:flex;gap:.4rem;justify-content:center;flex-wrap:wrap}
.colour-word b{font-size:2.2rem;font-weight:900}

/* ---------- 13. 價目表 ---------- */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;align-items:stretch}
.price-card{display:flex;flex-direction:column;gap:.5rem;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:1.8rem 1.6rem;box-shadow:var(--shadow-sm)}
.price-card--hl{border:2px solid var(--accent);box-shadow:0 12px 34px color-mix(in srgb,var(--accent) 22%,transparent);
  position:relative}
.price-card h3{font-size:1.05rem;color:var(--ink-soft);font-weight:700}
.price-card__amt{font-size:2rem;font-weight:900;color:var(--ink);line-height:1.15}
.price-card__amt small{font-size:.85rem;font-weight:500;color:var(--ink-soft)}
.price-card__sub{font-size:.88rem;color:var(--ink-soft)}
.price-card ul{margin-top:.4rem;flex:1}
.price-card .btn{margin-top:.9rem}

/* 深色版價目 */
.section--dark .price-card{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);backdrop-filter:blur(6px)}
.section--dark .price-card h3{color:#BDE9FA}
.section--dark .price-card__amt{color:#fff}
.section--dark .price-card__amt small,.section--dark .price-card__sub{color:#9DC3D8}

/* ── 紫色深色底（配合 AI 五色打字平台的主題色）── */
.section--purple{background:
  radial-gradient(720px 430px at 84% 0%,rgba(150,116,255,.38),transparent 62%),
  radial-gradient(520px 360px at 0% 100%,rgba(108,75,216,.30),transparent 62%),
  linear-gradient(165deg,#2A1A57 0%,#3B2585 54%,#291A55 100%)}
/* 價目卡改用較亮的紫，與底色分層 */
.section--purple .price-card--hl{
  background:linear-gradient(155deg,#7B5AE6 0%,#5334B4 100%);
  border:1px solid rgba(255,255,255,.24);
  box-shadow:0 20px 48px rgba(42,26,87,.55);
  backdrop-filter:none}
.section--purple .price-card h3{color:#DCD2FF}
.section--purple .price-card__amt{color:#fff}
.section--purple .price-card__sub{color:#E4DCFF}
.section--purple .section-head p{color:#D6CCFA}
.section--purple .section-head .eyebrow--onDark{color:#E2D9FF;background:rgba(255,255,255,.16)}
.section--purple .text-center{color:#C6B9F2}

/* ---------- 14. 表格 ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff;
  box-shadow:var(--shadow-sm)}
table.cmp{width:100%;border-collapse:collapse;min-width:640px;font-size:.94rem}
table.cmp th,table.cmp td{padding:.9rem 1rem;text-align:left;border-bottom:1px solid var(--line-soft);vertical-align:top}
table.cmp thead th{background:var(--bg-tint);font-weight:700;color:var(--ink);white-space:nowrap;
  position:sticky;top:0}
table.cmp tbody th{font-weight:700;color:var(--ink);white-space:nowrap}
table.cmp tr:last-child td,table.cmp tr:last-child th{border-bottom:0}
table.cmp td small{display:block;color:var(--ink-soft);font-size:.82rem}
.yes{color:var(--code4);font-weight:700}
.no{color:var(--ink-mute)}

/* ---------- 15. 常見問題 ---------- */
.faq{display:grid;gap:.8rem;max-width:820px;margin-inline:auto}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:1rem 1.3rem;box-shadow:var(--shadow-sm)}
.faq details[open]{border-color:var(--accent)}
.faq summary{font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;
  align-items:center;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4rem;font-weight:400;color:var(--accent);flex-shrink:0;line-height:1}
.faq details[open] summary::after{content:"−"}
.faq details p{color:var(--ink-soft);font-size:.95rem;margin-top:.7rem}

/* ---------- 15b. 媒體報導（左圖右文） ---------- */
.press-list{display:grid;gap:1.5rem;max-width:960px;margin-inline:auto}
.press-item{
  display:grid;grid-template-columns:38% 1fr;gap:0;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.press-item:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--pc,var(--brand))}

.press-item__media{position:relative;overflow:hidden;background:var(--bg-tint)}
.press-item__media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .4s ease;
}
.press-item:hover .press-item__media img{transform:scale(1.04)}

.press-item__body{
  display:flex;flex-direction:column;gap:.5rem;align-items:flex-start;
  padding:1.6rem 1.7rem;
}
.press-item__meta{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.press-item__outlet{font-weight:900;font-size:1rem;letter-spacing:.02em;color:var(--pc,var(--brand))}
.press-item__sep{color:var(--ink-mute)}
.press-item__meta time{font-size:.84rem;color:var(--ink-mute);letter-spacing:.03em}
.press-item h3{font-size:1.1rem;line-height:1.62;font-weight:700}
.press-item__excerpt{font-size:.92rem;color:var(--ink-soft);flex:1}
.press-item__more{font-size:.9rem;font-weight:700;color:var(--pc,var(--brand-deep));margin-top:.1rem}
.press-item:hover .press-item__more{text-decoration:underline;text-underline-offset:3px}

@media(max-width:720px){
  .press-item{grid-template-columns:1fr}
  .press-item__media{aspect-ratio:16/9}
  .press-item__body{padding:1.3rem 1.3rem 1.5rem}
}

/* ---------- 課堂試用卡 ---------- */
.trial-card{position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);transition:transform .2s ease,box-shadow .2s ease}
.trial-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.trial-card__badge{position:absolute;top:14px;left:14px;z-index:1;
  background:var(--lime);color:#12301A;font-weight:800;font-size:.8rem;
  border-radius:999px;padding:.24rem .8rem;box-shadow:0 3px 10px rgba(0,0,0,.16)}
.trial-card__link{display:block;line-height:0;overflow:hidden}
.trial-card__img{display:block;width:100%;height:auto;max-width:none;background:var(--bg-tint);
  border-bottom:1px solid var(--line);transition:transform .3s ease}
.trial-card__link:hover .trial-card__img{transform:scale(1.03)}
.trial-card__body{padding:1.6rem 1.5rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.trial-card__body p{color:var(--ink-soft);font-size:.95rem}
.trial-card__body .btn-row{margin-top:auto;padding-top:.6rem}

/* 主視覺上的標籤藥丸（首頁與 schoolcj 共用，先前未有定義） */
.chip{display:inline-flex;align-items:center;gap:.55rem;
  background:rgba(255,255,255,.74);border:1px solid rgba(255,255,255,.92);
  border-radius:999px;padding:.3rem .95rem .3rem .32rem;
  font-size:.85rem;font-weight:600;color:var(--ink-soft);
  box-shadow:0 2px 10px rgba(16,58,85,.09)}
.chip span{background:var(--accent);color:#fff;border-radius:999px;
  padding:.18rem .72rem;font-weight:800;font-size:.8rem;white-space:nowrap}

/* 官方標誌作為主標題 */
.hero-wordmark{margin:.7rem 0 .9rem;line-height:0}
.hero-wordmark img{width:min(360px,74%);height:auto;display:block}

/* 產品畫面：本身已帶透明背景與草木，直接疊在漸變上 */
.hero-cj-shot{position:relative}
.hero-cj-shot img{
  display:block;width:100%;height:auto;max-width:none;
  filter:drop-shadow(0 18px 30px rgba(26,74,48,.22));
}
@media(max-width:900px){
  .hero-wordmark img{width:min(300px,68%)}
  .hero-cj-shot{max-width:520px;margin-inline:auto}
}
/* 窄螢幕收起飄浮方塊，免得壓住文字 */
@media(max-width:760px){
  .hero--banner-cj .bg-tile{display:none}
}

/* ---------- 《五色學倉頡 Online》頁 ---------- */
.fob{position:relative;overflow:hidden;isolation:isolate;background:#FDF9EC}
.fob__bg{position:absolute;inset:0;width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:center bottom;z-index:0}
.fob__inner{position:relative;z-index:2;text-align:center;padding-block:1.5rem 0;
  display:flex;flex-direction:column;align-items:center}
.fob .crumbs{align-self:flex-start;margin-bottom:1rem}
.fob__title{font-size:clamp(2.3rem,5.4vw,3.9rem);font-weight:900;line-height:1.06;
  color:#14506A;margin:.3rem 0 .5rem}
.fob__title span{color:var(--accent-deep)}
.fob__tag{font-size:clamp(1.05rem,2.1vw,1.4rem);font-weight:800;color:var(--accent-deep)}
.fob__lead{max-width:600px;margin:.7rem auto 0;color:#4A5A52;font-size:.98rem}
.fob__btns{justify-content:center;margin-top:1.4rem}

/* 兩個畫面疊放，向下裁出畫面外 */
.fob__devices{position:relative;width:100%;max-width:820px;margin:2rem auto -4.5rem;
  aspect-ratio:16/8}
.fob__screen{position:absolute;margin:0;border-radius:12px;overflow:hidden;
  border:1px solid rgba(16,58,85,.16);box-shadow:0 22px 44px rgba(16,58,85,.28)}
.fob__screen img{display:block;width:100%;height:auto}
.fob__screen--back{width:66%;left:0;top:0;transform:rotate(-3deg)}
.fob__screen--front{width:66%;right:0;top:16%;transform:rotate(3deg);z-index:2}

@media(max-width:820px){
  .fob__devices{max-width:none;margin-bottom:-3rem;aspect-ratio:16/9.6}
  .fob__screen--back{width:74%}
  .fob__screen--front{width:74%;top:20%}
}
@media(max-width:520px){
  .fob__lead{display:none}
}

/* 手機截圖：控制高度，免得過長 */
.fo-shot{display:block;width:100%;max-width:300px;height:auto;margin-inline:auto;
  border-radius:18px;border:1px solid var(--line);box-shadow:var(--shadow-md)}

/* 影片格：細版縮圖 */
.video-embed--sm{aspect-ratio:4/3;border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.video-embed--sm .yt-play{width:52px;height:52px}
.video-embed--sm .yt-play svg{width:22px;height:22px}
.video-embed--sm .yt-label{font-size:.86rem}

/* 手機截圖：控制高度，免得過長 */
.fo-shot{display:block;width:100%;max-width:300px;height:auto;margin-inline:auto;
  border-radius:18px;border:1px solid var(--line);box-shadow:var(--shadow-md)}

/* 影片格：細版縮圖 */
/* 五段影片排成 3＋2 */
.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;max-width:820px;margin-inline:auto}
@media(max-width:760px){.video-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.video-grid{grid-template-columns:1fr}}
.video-embed--sm{aspect-ratio:4/3;border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.video-embed--sm .yt-play{width:52px;height:52px}
.video-embed--sm .yt-play svg{width:22px;height:22px}
.video-embed--sm .yt-label{font-size:.86rem}

/* ---------- 截圖輪播 ---------- */
.carousel{position:relative;max-width:960px;margin-inline:auto}
.carousel__track{display:flex;gap:1.1rem;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding:.4rem .2rem 1rem;
  scrollbar-width:none;-ms-overflow-style:none}
.carousel__track::-webkit-scrollbar{display:none}
.carousel__item{flex:0 0 auto;width:268px;margin:0;scroll-snap-align:start;text-align:center}
.carousel__item img{display:block;width:100%;height:auto;border-radius:16px;
  border:1px solid var(--line);box-shadow:var(--shadow-md);background:var(--bg-tint)}
.carousel__item figcaption{margin-top:.8rem;display:flex;flex-direction:column;gap:.15rem}
.carousel__item figcaption strong{font-size:.98rem;color:var(--ink)}
.carousel__item figcaption span{font-size:.85rem;color:var(--ink-soft);line-height:1.55}

.carousel__nav{position:absolute;top:34%;transform:translateY(-50%);z-index:2;
  width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  background:#fff;color:var(--ink);font-size:1.6rem;line-height:1;cursor:pointer;
  box-shadow:var(--shadow-md);transition:transform .18s ease,opacity .18s ease}
.carousel__nav:hover{transform:translateY(-50%) scale(1.07)}
.carousel__nav[disabled]{opacity:.32;cursor:default;transform:translateY(-50%)}
.carousel__nav--prev{left:-8px}
.carousel__nav--next{right:-8px}

.carousel__dots{display:flex;justify-content:center;gap:.45rem;margin-top:.2rem}
.carousel__dot{width:8px;height:8px;padding:0;border:0;border-radius:50%;
  background:color-mix(in srgb,var(--ink) 22%,transparent);cursor:pointer;transition:all .2s ease}
.carousel__dot.is-on{background:var(--accent);width:22px;border-radius:99px}

@media(max-width:640px){
  .carousel__nav{display:none}
  .carousel__item{width:208px}
}

/* ---------- 價目方案磚 ---------- */
.plan-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1.1rem;
  max-width:760px;margin-inline:auto}
.plan-tile{position:relative;text-align:center;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:1.9rem 1.2rem 1.6rem;box-shadow:var(--shadow-sm);
  transition:transform .2s ease,box-shadow .2s ease}
.plan-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.plan-tile--hl{border:2px solid var(--accent);box-shadow:0 12px 34px color-mix(in srgb,var(--accent) 20%,transparent)}
.plan-tile__flag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:var(--accent);color:#fff;font-size:.74rem;font-weight:800;
  border-radius:999px;padding:.22rem .75rem;white-space:nowrap}
.plan-tile__amt{font-size:2.6rem;font-weight:900;color:var(--ink);line-height:1}
.plan-tile__amt small{font-size:.86rem;font-weight:700;color:var(--ink-soft);margin-left:.3rem;vertical-align:super}
.plan-tile__period{margin-top:.5rem;color:var(--ink-soft);font-size:.95rem}

/* ---------- 付款方式 ---------- */
.pay-block{margin-top:2.4rem;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:1.8rem 1.6rem;max-width:860px;margin-inline:auto}
.pay-block__title{text-align:center;font-weight:800;color:var(--ink-soft);
  font-size:.92rem;margin-bottom:1.2rem}
.pay-logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1rem 1.8rem}
.pay-logos img{display:block;height:34px;width:auto}

/* ---------- 學校方案：置中標題 ---------- */
.sch-hero{position:relative;overflow:hidden;padding:2.6rem 0 1rem;
  background:
    radial-gradient(620px 300px at 50% -10%, color-mix(in srgb,var(--accent) 20%,transparent), transparent 70%),
    linear-gradient(180deg,var(--accent-soft) 0%,#fff 100%)}
.sch-hero__copy{max-width:820px;margin:1.4rem auto 0;text-align:center}
.sch-hero__title{font-size:clamp(2.6rem,6.4vw,4.4rem);font-weight:900;line-height:1.08;
  letter-spacing:-.01em;margin:.7rem 0 .8rem;color:var(--ink)}
.sch-hero__sub{font-size:clamp(1.05rem,2.2vw,1.42rem);font-weight:700;
  color:var(--accent-deep);max-width:680px;margin-inline:auto;line-height:1.55}
/* 單張緊接標題，只留少量間距 */
.sch-hero + .section{padding-top:1.4rem}

/* ---------- 學校推廣單張 ---------- */
.flyer{margin:0}
.flyer img{display:block;width:100%;max-width:820px;height:auto;margin-inline:auto;
  border-radius:var(--radius);border:1px solid var(--line);
  box-shadow:0 20px 50px rgba(16,58,85,.22);transition:transform .25s ease,box-shadow .25s ease}
.flyer a:hover img{transform:translateY(-4px);box-shadow:0 26px 60px rgba(16,58,85,.28)}
.flyer figcaption{margin-top:.9rem;text-align:center;font-size:.84rem;color:var(--ink-mute)}

/* 價目附註：字級加大，方便學校閱讀採購條款 */
.price-note{font-size:1.02rem;line-height:1.85;color:var(--ink-soft);max-width:820px}

/* ---------- 《AI 五色打字平台》主視覺橫額 ---------- */
.taib{
  position:relative;overflow:hidden;isolation:isolate;
  /* 底色取自插圖左邊緣，令圖與底色無縫銜接 */
  background:linear-gradient(100deg,#DFF0FE 0%,#D6EAFC 38%,#D1E7FB 100%);
}
/* 插圖本身左側已預留空白，故鋪滿整幅，讓那片空白正好落在文字下方 */
.taib__art{position:absolute;inset:0;z-index:0;pointer-events:none}
.taib__art img{display:block;width:100%;height:100%;object-fit:contain;object-position:right bottom;max-width:none}
/* 左邊再加一層柔化，確保任何闊度下文字都清晰 */
.taib__art::after{content:"";position:absolute;inset:0 auto 0 0;width:50%;
  background:linear-gradient(90deg,#D6EAFC 0%,rgba(214,234,252,.72) 46%,rgba(214,234,252,0) 100%)}

.taib__inner{position:relative;z-index:2;padding-block:1.6rem 3rem}
.taib__copy{max-width:560px}
.taib__tag{font-size:clamp(1.1rem,2.1vw,1.45rem);font-weight:800;color:var(--accent-deep);margin:.2rem 0 .8rem}
.taib__lead{color:#2A4A63;max-width:520px}

/* 試玩連結藥丸 */
.taib__demo{display:inline-flex;align-items:center;flex-wrap:wrap;gap:.55rem;
  margin-top:1.4rem;padding:.5rem 1.1rem .5rem .5rem;
  background:rgba(255,255,255,.86);border:1px solid rgba(255,255,255,.95);
  border-radius:999px;box-shadow:0 6px 18px rgba(20,60,90,.14);
  text-decoration:none;transition:transform .2s ease,box-shadow .2s ease}
.taib__demo:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(20,60,90,.2)}
.taib__demo-tag{background:var(--accent);color:#fff;font-weight:800;font-size:.82rem;
  border-radius:999px;padding:.26rem .8rem;white-space:nowrap}
.taib__demo strong{color:var(--accent-deep);font-size:1.02rem;font-weight:800}
.taib__demo em{font-style:normal;color:var(--ink-soft);font-size:.86rem}

.taib .page-hero__meta{margin-top:1.3rem}

@media(max-width:1020px){
  .taib__copy{max-width:60%}
  .taib__lead{max-width:none}
  .taib__art::after{width:76%}
}
/* 窄螢幕：插圖改放文字下方，成為整幅橫圖 */
@media(max-width:820px){
  /* 桌面用的強制斷行，在窄螢幕會造成半行空白，取消 */
  .taib__lead br{display:none}
  .taib{display:flex;flex-direction:column}
  .taib__inner{order:1;padding-bottom:0}
  .taib__copy{max-width:none}
  .taib__art{order:2;position:relative;inset:auto;width:auto;margin:1.5rem 0 0;height:180px}
  .taib__art::after{display:none}
  .taib__art img{object-fit:cover;object-position:center right}
}

/* ---------- 《中小學生學倉頡》主視覺橫額 ---------- */
.cjb{
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,#8FD8F2 0%,#B7E7F7 34%,#D9F2FA 62%,#EAF8F3 100%);
}
.cjb__scene{position:absolute;inset:0;pointer-events:none;z-index:0}

/* 雲 */
.cjb__cloud{position:absolute;background:#fff;border-radius:999px;opacity:.92}
.cjb__cloud::before,.cjb__cloud::after{content:"";position:absolute;background:inherit;border-radius:50%}
.cjb__cloud--1{width:190px;height:50px;top:12%;left:5%}
.cjb__cloud--1::before{width:80px;height:80px;left:32px;top:-36px}
.cjb__cloud--1::after{width:56px;height:56px;right:30px;top:-24px}
.cjb__cloud--2{width:140px;height:38px;top:24%;left:30%;opacity:.75}
.cjb__cloud--2::before{width:62px;height:62px;left:24px;top:-28px}
.cjb__cloud--3{width:170px;height:46px;top:9%;right:8%}
.cjb__cloud--3::before{width:72px;height:72px;left:30px;top:-32px}
.cjb__cloud--3::after{width:50px;height:50px;right:26px;top:-20px}
.cjb__cloud--4{width:110px;height:30px;top:46%;left:6%;opacity:.55}
.cjb__cloud--4::before{width:48px;height:48px;left:20px;top:-21px}

/* 層層草坡 */
.cjb__hill{position:absolute;left:-12%;right:-12%;border-radius:50% 50% 0 0 / 100% 100% 0 0}
.cjb__hill--far{bottom:0;height:46%;background:#BEE39A;opacity:.85}
.cjb__hill--mid{bottom:0;height:34%;background:#9BD47A;left:-24%;right:-4%}
.cjb__hill--near{bottom:0;height:24%;background:#7FC65C;left:-4%;right:-24%}

/* 兩旁小怪獸 */
.cjb__pal{position:absolute;bottom:2%;height:auto;max-width:none}
.cjb__pal--l{left:1.5%;width:min(210px,17vw)}
.cjb__pal--r{right:1.5%;width:min(180px,15vw)}

/* 內容 */
.cjb__inner{position:relative;z-index:2;text-align:center;
  padding-block:1.5rem 0;display:flex;flex-direction:column;align-items:center}
.cjb .crumbs--onBanner{align-self:flex-start;margin-bottom:.9rem}
.cjb__mark{margin:0 0 .7rem;line-height:0}
.cjb__mark img{width:min(400px,62vw);height:auto;display:block}
.cjb__tag{font-size:clamp(1.05rem,2vw,1.35rem);font-weight:800;color:#0E4E63;
  text-shadow:0 1px 0 rgba(255,255,255,.6)}
.cjb__lead{max-width:620px;margin:.6rem auto 0;color:#17566B;font-size:.98rem}
.cjb__btns{justify-content:center;margin-top:1.3rem}

/* 手機：置中並向下裁出畫面外 */
.cjb__devices{display:flex;justify-content:center;align-items:flex-end;gap:1.2rem;
  margin-top:1.6rem;margin-bottom:-5.5rem;width:100%}
.cjb__phone{margin:0;width:min(188px,21vw);border-radius:26px;padding:6px;
  background:linear-gradient(158deg,#24435E 0%,#0E2436 100%);
  box-shadow:0 22px 40px rgba(16,58,85,.34), 0 2px 6px rgba(16,58,85,.2)}
.cjb__phone img{display:block;width:100%;height:auto;border-radius:21px;background:#4FC3D1}
.cjb__phone--l{transform:rotate(-5deg) translateY(10px)}
.cjb__phone--r{transform:rotate(4deg)}

@media(max-width:900px){
  .cjb__pal--l{width:130px;left:-1%}
  .cjb__pal--r{width:115px;right:-1%}
  .cjb__phone{width:min(150px,32vw)}
  .cjb__devices{margin-bottom:-4rem;gap:.8rem}
}
@media(max-width:560px){
  .cjb__pal{opacity:.55}
  .cjb__lead{display:none}
}

/* ---------- 收費方案卡 ---------- */
.plan{display:flex;flex-direction:column;gap:.55rem;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);padding:1.9rem 1.7rem;
  box-shadow:var(--shadow-sm)}
.plan__tag{font-size:.8rem;font-weight:800;letter-spacing:.02em;color:var(--accent-deep);
  background:var(--accent-soft);border-radius:999px;padding:.24rem .8rem;align-self:flex-start}
.plan__note{color:var(--ink-soft);font-size:.92rem}
.plan__tiers{display:flex;flex-direction:column;gap:.5rem;margin:.9rem 0 .3rem}
.plan__tiers li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  border:1px solid var(--line);border-radius:12px;padding:.7rem 1rem;background:var(--bg-tint)}
.plan__tiers span{color:var(--ink-soft);font-size:.94rem}
.plan__tiers strong{font-size:1.4rem;font-weight:900;color:var(--ink)}
.plan .store-row{justify-content:flex-start;margin-top:auto;padding-top:1rem}
.plan .store-row img{height:46px}

/* 主打方案：橙色，呼應主視覺插圖 */
.plan--hl{color:#fff;border:0;
  background:linear-gradient(150deg,#FE852F 0%,#F0651C 100%);
  box-shadow:0 18px 44px rgba(240,101,28,.32)}
.plan--hl .plan__tag{background:rgba(255,255,255,.22);color:#fff}
.plan--hl .plan__note{color:rgba(255,255,255,.94)}
.plan__amt{font-size:clamp(2.3rem,5vw,3rem);font-weight:900;line-height:1.05;margin:.5rem 0 .1rem}
.plan__amt del{font-size:1.15rem;font-weight:500;opacity:.75;margin-right:.55rem}
.plan__amt small{font-size:1rem;font-weight:600;opacity:.9;margin-left:.25rem}
.plan__list{margin:.6rem 0 .2rem}
.plan--hl .check-list li{color:#fff}
.plan--hl .check-list li::before{background-color:rgba(255,255,255,.30)}  /* 只換底色，保留勾號圖 */
.plan--hl .btn-row{margin-top:auto;padding-top:1.1rem}
.plan--hl .btn{background:#fff;color:#C4500F;border:0}
.plan--hl .btn:hover{transform:translateY(-2px)}

/* ---------- 應用程式商店圖示 ---------- */
.store-row{display:flex;flex-wrap:wrap;gap:1.1rem;justify-content:center;align-items:center}
.store-row img{height:56px;width:auto;display:block;transition:transform .2s ease}
.store-row a:hover img{transform:translateY(-3px)}

/* ---------- 15c. YouTube 影片嵌入（點擊才載入） ---------- */
.video-embed{
  position:relative;aspect-ratio:16/9;width:100%;
  border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-lg);background:#0E2436;
}
/* 舊片以 4:3 拍攝，用回原來比例便不會出現黑邊 */
.video-embed--43{aspect-ratio:4/3}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-embed .yt-poster{
  position:absolute;inset:0;width:100%;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;
  background:
    radial-gradient(420px 260px at 78% 12%, color-mix(in srgb,var(--accent) 46%,transparent), transparent 66%),
    radial-gradient(320px 220px at 12% 88%, rgba(166,206,29,.3), transparent 62%),
    linear-gradient(160deg,#123B59,#0E2436);
  color:#fff;cursor:pointer;transition:transform .3s ease;
}
.video-embed .yt-poster:hover{transform:scale(1.02)}
/* YouTube 官方預覽圖；載入不到時仍會見到上面的漸變底色 */
.video-embed .yt-thumb{
  position:absolute;inset:0;width:100%;height:100%;max-width:none;
  object-fit:cover;border:0;border-radius:0;
}
/* 壓暗一層，令播放鍵與標題更清晰 */
.video-embed .yt-poster::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,22,36,.34) 0%,rgba(6,22,36,.12) 45%,rgba(6,22,36,.62) 100%);
}
.video-embed .yt-play,
.video-embed .yt-label{position:relative;z-index:1}

.video-embed .yt-play{
  display:grid;place-items:center;width:74px;height:74px;border-radius:50%;
  background:#fff;color:var(--accent-deep);box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.video-embed .yt-play svg{width:30px;height:30px;margin-left:3px}
.video-embed .yt-label{font-size:.95rem;font-weight:700;opacity:.95;padding:0 1.2rem;text-align:center}

/* 產品畫面小圖 */
.shot{width:100%;height:auto;border-radius:var(--radius);border:1px solid var(--line);
  background:#fff;box-shadow:var(--shadow-sm)}
.shot-grid{display:grid;gap:1rem}
.shot-grid--2{grid-template-columns:repeat(2,1fr)}
.shot-grid--3{grid-template-columns:repeat(3,1fr)}
@media(max-width:720px){
  .shot-grid--2,.shot-grid--3{grid-template-columns:1fr}
}

/* ---------- 16. 最新消息 ---------- */
.news-card{display:flex;flex-direction:column;gap:.5rem;align-items:flex-start;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem 1.5rem;box-shadow:var(--shadow-sm);
  height:100%;transition:transform .2s ease,box-shadow .2s ease}
.news-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.news-card time{font-size:.82rem;color:var(--ink-soft);letter-spacing:.04em}
.news-card__tag{font-size:.74rem;font-weight:700;border-radius:999px;padding:.16rem .7rem;
  background:var(--accent-soft);color:var(--accent-deep)}
.news-card h3{font-size:1.06rem;line-height:1.55}
.news-card p{color:var(--ink-soft);font-size:.92rem}

.news-item{display:grid;grid-template-columns:150px 1fr;gap:1.6rem;padding:1.8rem 0;
  border-bottom:1px solid var(--line)}
.news-item:last-child{border-bottom:0}
.news-item__date{font-size:.88rem;color:var(--ink-soft);font-weight:500}
.news-item h2{font-size:1.25rem;margin-bottom:.5rem}
.news-item p{color:var(--ink-soft);font-size:.96rem}
.news-item ul{margin-top:.6rem}

/* ---------- 17. 聯絡 ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:2.6rem;align-items:start}
.contact-list{display:grid;gap:1rem}
.contact-list li{display:flex;gap:.9rem;align-items:flex-start}
.contact-list__icon{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;border-radius:13px;
  background:#fff;border:1px solid var(--line);color:var(--accent-deep);box-shadow:var(--shadow-sm)}
.contact-list__icon svg{width:21px;height:21px}
.contact-list small{display:block;font-size:.78rem;color:var(--ink-soft)}
.contact-list a{font-weight:700}
.contact-list a:hover{color:var(--accent-deep);text-decoration:underline}
.contact-list__en{font-size:.8rem;color:var(--ink-soft)}

.map-frame{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-sm);margin-top:1.4rem}
.map-frame iframe{width:100%;height:250px;border:0;display:block}

.contact-form{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:2rem;
  box-shadow:var(--shadow-md)}
.field{display:flex;flex-direction:column;gap:.3rem;margin-bottom:1rem}
.field label{font-size:.88rem;font-weight:700}
.field input,.field textarea,.field select{border:2px solid var(--line);border-radius:12px;
  padding:.75rem 1rem;outline:none;background:var(--bg-tint);width:100%;
  transition:border-color .2s ease,background .2s ease}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent);background:#fff}
.field textarea{resize:vertical;min-height:120px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-note{font-size:.8rem;color:var(--ink-soft);margin-top:.7rem}
.hp-field{position:absolute;left:-9999px;height:0;overflow:hidden}
.form-status{margin:0 0 1rem;padding:.75rem 1rem;border-radius:12px;font-size:.9rem;white-space:pre-wrap}
.form-status.is-ok{background:#e8f7ee;color:#146c2e;border:1px solid #b7e0c2}
.form-status.is-err{background:#fdecea;color:#8a1f11;border:1px solid #f5c2c0}

/* ---------- 18. WhatsApp 浮動按鈕 ---------- */
.wa-float{position:fixed;right:20px;bottom:20px;z-index:120}
.wa-float__btn{display:flex;align-items:center;gap:.55rem;background:#25D366;color:#fff;
  border-radius:999px;padding:.85rem 1.3rem;font-weight:700;box-shadow:0 8px 26px rgba(37,211,102,.45);
  transition:transform .2s ease,box-shadow .2s ease}
.wa-float__btn:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(37,211,102,.55)}
.wa-float__btn svg{width:24px;height:24px;flex-shrink:0}
.wa-float__panel{position:absolute;right:0;bottom:calc(100% + 12px);width:310px;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);overflow:hidden;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .22s ease,transform .22s ease,visibility .22s}
.wa-float.is-open .wa-float__panel{opacity:1;visibility:visible;transform:translateY(0)}
.wa-float__head{background:#075E54;color:#fff;padding:.9rem 1.1rem}
.wa-float__head strong{display:block;font-size:.98rem}
.wa-float__head span{font-size:.78rem;opacity:.85}
.wa-float__body{padding:.9rem 1.1rem 1.1rem}
.wa-float__body p{font-size:.85rem;color:var(--ink-soft);margin-bottom:.7rem}
.wa-quick{display:grid;gap:.45rem}
.wa-quick a{display:block;border:1px solid var(--line);border-radius:12px;padding:.6rem .8rem;
  font-size:.88rem;font-weight:500;transition:background .18s ease,border-color .18s ease}
.wa-quick a:hover{background:#E8FBEF;border-color:#25D366}

/* ---------- 19. 行動呼籲橫幅 ---------- */
.cta-band{position:relative;overflow:hidden;background:
  linear-gradient(135deg,var(--accent-deep),var(--accent) 60%,#29C1F0);color:#fff;
  border-radius:var(--radius-lg);padding:clamp(2.2rem,5vw,3.4rem);text-align:center}
.cta-band h2{color:#fff;margin-bottom:.6rem}
.cta-band p{color:rgba(255,255,255,.9);max-width:640px;margin:0 auto}
.cta-band .btn-row{justify-content:center}

/* ---------- 20. 頁尾 ---------- */
.site-footer{background:var(--bg-dark);color:#B9D4E2;padding:3.6rem 0 0}
.site-footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.15fr;gap:2rem;padding-bottom:2.6rem}
.site-footer__brand .brand{background:#fff;padding:.55rem .9rem;border-radius:13px;display:inline-flex}
.site-footer__brand .brand__img{height:34px}
.site-footer__brand p{font-size:.87rem;margin-top:1rem;line-height:1.8}
.site-footer__col{display:flex;flex-direction:column;gap:.5rem}
.site-footer__col h3{color:#fff;font-size:.94rem;font-weight:700;margin-bottom:.3rem}
.site-footer__col a,.site-footer__col span{font-size:.88rem}
.site-footer__col a:hover{color:#fff;text-decoration:underline}
.site-footer__base{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.12);padding-block:1.3rem;font-size:.83rem}

/* ---------- 21. 動畫 ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
  .reveal{opacity:1;transform:none}
}

/* ---------- 22. 響應式 ---------- */
@media(max-width:1120px){
  .main-nav__list > li > a,.main-nav__toggle{padding:.55rem .6rem;font-size:.94rem}
}
@media(max-width:1020px){
  .main-nav{position:fixed;inset:0;z-index:150;flex-direction:column;align-items:stretch;
    background:#fff;padding:5.4rem 1.2rem 2rem;overflow-y:auto;
    transform:translateX(100%);transition:transform .3s ease;visibility:hidden}
  .main-nav.is-open{transform:translateX(0);visibility:visible}
  .main-nav__list{flex-direction:column;align-items:stretch;gap:.15rem}
  .main-nav__list > li > a,.main-nav__toggle{width:100%;justify-content:space-between;
    padding:.9rem 1rem;font-size:1.05rem;font-weight:700}
  .sub-menu{position:static;min-width:0;opacity:1;visibility:hidden;transform:none;box-shadow:none;
    border:0;background:var(--bg-tint);border-radius:12px;margin:0 .6rem .4rem;display:none;padding:.4rem}
  .has-sub.is-open .sub-menu{display:block;visibility:visible}
  .main-nav__mobile-actions{display:flex;gap:.8rem;margin:1rem;padding-top:1rem;border-top:1px solid var(--line)}
  .main-nav__mobile-actions .btn{flex:1}
  .nav-burger{display:flex;position:relative;z-index:160}
  body.nav-locked{overflow:hidden}
}
@media(max-width:960px){
  .section{padding:3.6rem 0}
  .hero{padding:2.6rem 0 3rem}
  .hero__inner,.page-hero__inner,.split,.contact-grid{grid-template-columns:1fr;gap:2.2rem}

  .hero--banner .hero__copy{max-width:72%}
  .split--media-right .split__media{order:0}
  .grid--3,.grid--4,.price-grid{grid-template-columns:repeat(2,1fr)}
  .site-footer__grid{grid-template-columns:repeat(2,1fr)}
  .site-footer__brand{grid-column:1/-1}
  .stats{justify-content:flex-start;gap:1.6rem}
}
/* 窄螢幕：改為上下佈局，文字在上、手機畫面在下 */
@media(max-width:860px){
  .hero--banner{min-height:auto}
  .hero--banner__inner{grid-template-columns:1fr;gap:1.6rem;padding-block:2.2rem 3.4rem}
  .hero--banner .hero__copy{max-width:100%}
  .hero-devices{padding-bottom:14%;max-width:520px;margin-inline:auto}
  .bg-tile--5{display:none}
}
@media(max-width:520px){
  /* 手機上三部裝置太擠：只保留手提電腦與一部手機 */
  .hero-devices{padding-bottom:16%}
  .device--back{display:none}
  .device--front{width:34%;left:2%;bottom:-10%}
  .bg-cloud--2{display:none}
}

@media(max-width:860px){
  .stat-grid{grid-template-columns:repeat(2,1fr);gap:1.6rem .5rem}
  /* 兩欄時只保留每行中間那條分隔線 */
  .stat:nth-child(odd)::before{display:none}
}

@media(max-width:640px){
  .container{padding-inline:18px}
  .stat-band{padding:2rem 0}
  .stat__icon{width:40px;height:40px;margin-bottom:.45rem}
  .stat__icon svg{width:21px;height:21px}
  .promo-bar{font-size:.8rem;gap:.5rem}
  .brand__img{height:36px}
  .grid--2,.grid--3,.grid--4,.price-grid,.field-row{grid-template-columns:1fr}
  .news-item{grid-template-columns:1fr;gap:.5rem}
  .stats{gap:1.2rem}
  .stats strong{font-size:1.3rem}
  .btn-row .btn{width:100%}
  .contact-form{padding:1.4rem}
  .wa-float{right:14px;bottom:14px}
  .wa-float__panel{width:calc(100vw - 40px)}
  .wa-float__btn span{display:none}
  .wa-float__btn{padding:1rem;border-radius:50%}
  .demo-card__char{font-size:5rem}
}