/* ============================================================
   艾斯特拉旺 Estwang Global — 全站設計系統 v2「格」
   ------------------------------------------------------------
   依據：Lightdash 設計系統（violet pixel-grid on drafting paper）
   × 思源宋體（2026-07 定案）。示意稿原型：design_c（Artifact 5cdd3f67）。

   系統紀律（CRITICAL，改版時不可違反）：
   ・唯一彩色 --volt：每個畫面只有一顆紫色 CTA；次要按鈕一律墨色
   ・文字永不用純黑：標題 --graphite、內文 --slate
   ・卡片 1px --ash 細框、無陰影；陰影只給頁面主視覺（--shadow-hero）
   ・圓角只有兩值：卡 12px、按鈕 8px（999px 保留給 chip／FAB）
   ・裝飾語彙只有像素馬賽克（.px）與製圖紙格線（.grid-paper）
   ・內文置左；只有 hero 大標與推薦語可置中
   ============================================================ */

:root{
  /* 唯一彩色：品牌紫 #7B3FA0 的通電版（同 7B3F 字頭） */
  --volt:      #7B3FE4;
  --volt-deep: #6930C9;
  --wash:      #D4C4F2;
  --whisper:   #E9E0FA;
  --plum:      #4B2E83;  /* 深梅紫：夢幻絲緞版式的文字色（2026-07-14 參考圖） */
  --brandmark: #5B2682;  /* EW Logo 主色（不透明像素平均值），導航字標同色用 */

  /* 石板灰階（沿用 Lightdash 中性色） */
  --onyx:      #1A1B25;
  --ink:       #272835;
  --graphite:  #36394A;
  --slate:     #666D80;
  --steel:     #818898;
  --fog:       #A4ABB8;
  --mist:      #C1C7D0;
  --ash:       #CDD2D9;
  --frost:     #ECEFF3;
  --cloud:     #F6F8FA;
  --canvas:    #FFFFFF;

  /* 深色帶（aurora / 戰績）專用 */
  --stage:       #0F0B16;
  --on-dark-hi:  #F5F2FA;
  --on-dark:     #D6CCE6;
  --on-dark-dim: #A99BC4;

  --r-card: 12px;
  --r-btn:  8px;

  /* 陰影一律墨色 rgba；只給頁面主視覺 */
  --shadow-hero: 0 1px 2px rgba(39,40,53,.08),
                 0 8px 16px rgba(39,40,53,.08),
                 0 32px 64px -16px rgba(39,40,53,.22);

  /* 字體：思源宋體為全站聲音（Google Fonts CDN，見各頁 <head>） */
  --serif: "Noto Serif TC","Noto Serif CJK TC","PMingLiU",serif;
  --sans:  "Noto Sans TC","PingFang TC","Microsoft JhengHei","Segoe UI",sans-serif;

  --wrap: min(1160px, 92vw);
}

/* ============ Reset 與基底 ============ */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ background:var(--canvas); }
@media (prefers-reduced-motion: no-preference){ html{ scroll-behavior:smooth; } }

body{
  font-family:var(--serif);
  font-weight:500;                     /* CRITICAL: 宋體小字級 500 才夠穩 */
  font-size:16px; line-height:1.75;
  color:var(--slate);
  background:var(--canvas);
  -webkit-font-smoothing:antialiased;
}

::selection{ background:var(--volt); color:#fff; }
:focus-visible{ outline:2px solid var(--volt); outline-offset:3px; border-radius:2px; }
ul,ol{ list-style:none; }
img,video{ max-width:100%; }
a{ color:var(--volt); text-decoration:none; }
a:hover{ color:var(--volt-deep); }

h1,h2,h3{ color:var(--graphite); font-weight:900; }  /* 宋體大標吃 900 */
.lat{ letter-spacing:-0.025em; }                     /* 拉丁與數字的 display 壓縮 */

.wrap{ width:var(--wrap); margin-inline:auto; }

/* 跳至主內容（a11y） */
.skip{
  position:absolute; left:-999px; top:0; z-index:99;
  background:var(--volt); color:#fff;
  padding:.6rem 1.2rem; font-size:.85rem; border-radius:0 0 var(--r-btn) 0;
}
.skip:focus-visible{ left:0; }

/* ============ 文字語彙 ============ */
.kicker{
  font-size:.72rem; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--steel);
}
.chip{
  display:inline-flex; align-items:center; gap:.6rem;
  background:var(--whisper); color:var(--volt-deep);
  font-size:.76rem; font-weight:600; letter-spacing:.1em;
  padding:.4em 1em; border-radius:999px;   /* 999 保留給 chip */
}

/* ============ 按鈕 ============ */
.btn{
  display:inline-block;
  background:var(--volt); color:#fff;
  font-size:.88rem; font-weight:700; letter-spacing:.06em;
  padding:.72em 1.5em; border-radius:var(--r-btn);
  border:none; cursor:pointer; font-family:inherit;
  transition:background .2s ease;
}
.btn:hover{ background:var(--volt-deep); color:#fff; }
.btn-ink{ background:var(--ink); }
.btn-ink:hover{ background:var(--onyx); }
.btn-nav{ font-size:.8rem; padding:.55em 1.15em; }

.link-arrow{ font-size:.88rem; font-weight:600; letter-spacing:.04em; }
.link-arrow .arr{ display:inline-block; margin-left:.35em; transition:transform .2s ease; }
.link-arrow:hover .arr{ transform:translateX(3px); }

/* ============ 像素馬賽克（唯一裝飾語彙） ============ */
.px{ display:grid; grid-template-columns:repeat(4,10px); gap:2px; width:max-content; }
.px i{ width:10px; height:10px; }
.px .v{ background:var(--volt); }
.px .w{ background:var(--wash); }
.px .h{ background:var(--whisper); }
.px .c{ background:transparent; }

/* 製圖紙格線底（hero / CTA 卡用） */
.grid-paper{
  background-image:
    linear-gradient(rgba(39,40,53,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(39,40,53,.045) 1px, transparent 1px);
  background-size:24px 24px;
}

/* ============ 公告列 + 導航（由 nav.js 注入） ============ */
.bar{ background:var(--ink); color:#E6E8F0; }
.bar-in{
  display:flex; align-items:center; justify-content:center; gap:.7rem;
  padding:.55rem 1rem;
  font-size:.78rem; letter-spacing:.08em;
}
.bar .dot{ width:8px; height:8px; background:var(--volt); flex:none; }
.bar a{ color:#fff; border-bottom:1px solid rgba(255,255,255,.35); padding-bottom:1px; }
.bar a:hover{ border-bottom-color:#fff; color:#fff; }

#main-nav{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--ash);
}
.nav-in{ display:flex; align-items:center; gap:2.2rem; padding:.65rem 0; }
.nav-logo{ display:flex; align-items:center; gap:.7rem; margin-right:auto; }
.nav-logo img{ height:46px; width:auto; display:block; flex:none; }  /* EW Logo（素材/logo-ew.png，透明底） */
/* 2026-08-11 使用者指定：移除英文小標，中文放大（原 1.02rem） */
.nav-logo b{ color:var(--brandmark); font-size:1.35rem; letter-spacing:.08em; display:block; line-height:1.1; }  /* 與 Logo 同色（2026-07-22） */
.nav-links{ display:flex; gap:1.6rem; }
.nav-links a{
  color:var(--slate); font-size:.85rem; font-weight:600; letter-spacing:.05em;
  padding:.3rem 0;
}
.nav-links a:hover{ color:var(--graphite); }
.nav-links a.active{ color:var(--volt); }

/* 漢堡與手機選單（CRITICAL: 依賴 nav.js 的 click handler） */
.hamburger{
  display:none;
  background:none; border:1px solid var(--ash); border-radius:var(--r-btn);
  width:44px; height:40px; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:7px;
}
.hamburger span{ width:18px; height:2px; background:var(--graphite); display:block; transition:transform .25s ease; }
.hamburger.open span:first-child{ transform:translateY(4.5px) rotate(45deg); }
.hamburger.open span:last-child{ transform:translateY(-4.5px) rotate(-45deg); }

.mobile-menu{
  display:none;
  background:var(--canvas);
  border-bottom:1px solid var(--ash);
  padding:.6rem 4vw 1.6rem;
}
.mobile-menu.open{ display:block; }
.mobile-menu a{
  display:block; padding:.85rem 0;
  color:var(--graphite); font-size:.95rem; font-weight:600; letter-spacing:.08em;
  border-bottom:1px solid var(--frost);
}
.mobile-menu .btn{ margin-top:1.2rem; }
/* CRITICAL: .mobile-menu a 的深灰字會蓋過 .btn 的白字（選擇器權重較高），此處強制按鈕白字 */
.mobile-menu a.btn{ color:#fff; border-bottom:none; }

@media (max-width:1024px){
  .nav-links, #main-nav .btn-nav{ display:none; }
  .hamburger{ display:flex; }
}

/* ============ 版面骨架 ============ */
.sec{ padding:5.5rem 0; }
.sec-head{ max-width:none; margin-bottom:3.2rem; }
.sec-head .px{ margin-bottom:1.3rem; }
.sec-head h2{
  font-size:clamp(1.8rem,3.6vw,2.6rem); line-height:1.25;
  margin-top:.9rem;
  text-wrap:pretty;
}
.sec-head p{ margin-top:1rem; max-width:none; text-wrap:pretty; }  /* 2026-07-22 使用者指定：導語不提早折行 */
.sec-head p.kicker{ margin-top:0; max-width:none; }  /* kicker 不受導語寬限（2026-07-22 修：長 kicker 曾被折成兩行） */

/* 子頁頁首（page hero） */
.page-hero{
  padding:4.2rem 0 3.6rem;
  border-bottom:1px solid var(--ash);
}
.page-hero h1{
  font-size:clamp(2.2rem,5vw,3.6rem); line-height:1.2;
  margin-top:1rem; text-wrap:pretty;
}
.page-hero .lead{ margin-top:1.2rem; max-width:none; text-wrap:pretty; font-size:1.02rem; }
.page-hero .chip{ margin-bottom:.4rem; }

/* ============ 卡片 ============ */
.card{
  background:var(--canvas);
  border:1px solid var(--ash); border-radius:var(--r-card);
  padding:1.9rem 1.9rem 1.7rem;
}
.card h3{ font-size:1.3rem; letter-spacing:.02em; }

/* 可點擊卡（服務卡）：hover 紫框 */
a.card{ display:block; color:inherit; transition:border-color .2s ease, background .2s ease; }
a.card:hover{ border-color:var(--volt); background:linear-gradient(0deg, rgba(123,63,228,.025), rgba(123,63,228,.025)) var(--canvas); }

/* 標籤：紫色底（2026-07-14 使用者指定，全站統一） */
.scope{
  display:inline-block;
  background:var(--whisper); color:var(--volt-deep);
  border:1px solid var(--wash);
  font-size:.68rem; font-weight:600; letter-spacing:.14em;
  padding:.3em .9em; border-radius:999px;
  margin-bottom:1.1rem;
}
a.card:hover .scope{ background:var(--wash); color:var(--volt-deep); }

/* 卡片內的「了解○○」連結字樣：滑過卡片變紫、箭頭右滑（2026-07-14 使用者指定） */
a.card .link-arrow{ transition:color .2s ease; }
a.card:hover .link-arrow{ color:var(--volt); }
a.card:hover .link-arrow .arr{ transform:translateX(3px); }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }

/* ============ Aurora card（深色帶 + 滑鼠追蹤紫光暈；需 fx.js） ============ */
.dark-band{ background:var(--stage); padding:4.5rem 0; }
.aurora-card{
  position:relative;
  --mx:50%; --my:50%;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.09);
  border-radius:var(--r-card);
  padding:1.7rem 1.6rem 1.5rem;
  overflow:hidden;
  isolation:isolate;
}
.aurora-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  padding:1px;
  background:radial-gradient(240px circle at var(--mx) var(--my),
      rgba(155,92,228,.95), rgba(123,63,228,.45) 40%, transparent 72%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask-composite:exclude;
  opacity:0; transition:opacity .35s ease;
  pointer-events:none; z-index:1;
}
.aurora-card::after{
  content:""; position:absolute; inset:-40%;
  background:
    radial-gradient(300px circle at var(--mx) var(--my), rgba(123,63,228,.28), transparent 65%),
    radial-gradient(420px circle at calc(var(--mx) + 120px) calc(var(--my) - 80px), rgba(212,196,242,.10), transparent 70%);
  opacity:0; transition:opacity .35s ease;
  pointer-events:none; z-index:0;
}
.aurora-card:hover::before, .aurora-card:hover::after{ opacity:1; }
.aurora-card > *{ position:relative; z-index:2; }
@media (hover:none){
  .aurora-card::after{ opacity:1; animation:aurora-drift 9s ease-in-out infinite alternate; }
}
@keyframes aurora-drift{
  from{ transform:translate3d(-6%, -4%, 0); }
  to  { transform:translate3d( 6%,  5%, 0); }
}

/* 深色帶上的數字卡內容 */
.stat-num{
  display:block;
  font-size:clamp(2rem,3.6vw,2.8rem); font-weight:900; line-height:1;
  letter-spacing:-0.025em;
  color:var(--on-dark-hi);
  font-variant-numeric:tabular-nums;
}
.stat-num small{ font-size:.55em; font-weight:700; letter-spacing:0; }
.stat-label{
  display:block; margin-top:.7rem;
  font-size:1.375rem; font-weight:700; letter-spacing:.08em;  /* 22px（2026-07-13 定案） */
  color:var(--on-dark);
}
.stat-desc{ margin-top:.8rem; font-size:.9rem; color:var(--on-dark-dim); text-wrap:pretty; }
.dark-band .sec-head h2{ color:var(--on-dark-hi); }
.dark-band .sec-head p{ color:var(--on-dark-dim); }
.dark-band .kicker{ color:var(--on-dark-dim); }
.dark-band .note{ margin-top:2.2rem; font-size:.74rem; letter-spacing:.1em; color:#7C819A; }

/* ============ 表單（contact / checkout 共用） ============ */
form label{
  font-size:.83rem; font-weight:700; color:var(--graphite);
  display:block; margin-bottom:6px;
}
.req::after{ content:' *'; color:var(--volt); }
input, select, textarea{
  width:100%; padding:11px 15px;
  border:1px solid var(--ash); border-radius:var(--r-btn);
  font-size:.9rem; font-family:inherit; color:var(--graphite); background:var(--canvas);
  transition:border-color .2s;
}
input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--volt); }
textarea{ min-height:110px; resize:vertical; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }

/* ============ 表格（通路表等） ============ */
.table-wrap{ overflow-x:auto; }
table.tbl{ width:100%; border-collapse:collapse; font-size:.92rem; }
.tbl th{
  text-align:left; font-size:.72rem; font-weight:700; letter-spacing:.14em;
  color:var(--steel); text-transform:uppercase;
  padding:.7rem .9rem; border-bottom:1px solid var(--ash);
}
.tbl td{ padding:.85rem .9rem; border-bottom:1px solid var(--frost); color:var(--graphite); }
.tbl tr:hover td{ background:var(--cloud); }

/* ============ 步驟流程（合作流程等） ============ */
.steps{ counter-reset:step; display:grid; gap:.9rem; }
.step{
  counter-increment:step;
  display:flex; gap:1.1rem; align-items:baseline;
  padding:1rem 1.2rem;
  border:1px solid var(--ash); border-radius:var(--r-card);
  background:var(--canvas);
}
.step::before{
  content:counter(step);
  font-weight:900; font-size:1.1rem; color:var(--volt);
  font-variant-numeric:tabular-nums;
  flex:none;
}
.step b{ color:var(--graphite); }

/* ============ 推薦語（2026-07-14 加質感：紙紋底＋巨大引號＋關鍵詞強調） ============ */
.quote-band{
  background:
    linear-gradient(rgba(39,40,53,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(39,40,53,.035) 1px, transparent 1px),
    var(--cloud);
  background-size:24px 24px, 24px 24px, auto;
  border-block:1px solid var(--ash); text-align:center;
  overflow:hidden;
}
.quote-band .px{ margin:0 auto 1.6rem; }
.quote-band blockquote p{
  position:relative;
  font-size:clamp(1.3rem,2.6vw,1.85rem); font-weight:600; line-height:1.6;
  color:var(--graphite); letter-spacing:.01em;
  max-width:26em; margin-inline:auto;
}
/* 巨大淡紫引號襯在文字左上（z-index:-1 沉到文字後、浮在底紋上） */
.quote-band blockquote p::before{
  content:"「";
  position:absolute; top:-.52em; left:-.5em;
  font-size:3.4em; font-weight:900; line-height:1;
  color:var(--wash); opacity:.55;
  pointer-events:none; z-index:-1;
}
.quote-band em{ font-style:normal; color:var(--volt); }
.quote-band cite{
  display:block; margin-top:1.8rem; font-style:normal;
  font-size:.78rem; font-weight:600; letter-spacing:.2em; color:var(--steel);
}
.quote-band cite::before{
  content:""; display:block;
  width:2.4rem; height:1px; background:var(--wash);
  margin:0 auto 1.1rem;
}
.quote-band cite b{ color:var(--graphite); }
@media (max-width:700px){
  .quote-band blockquote p::before{ left:0; }   /* 窄螢幕引號不出血到版心外 */
}

/* 字標列（合作品牌） */
.wordmarks{ display:flex; align-items:baseline; gap:3rem; flex-wrap:wrap; }
.wm-a{ font-weight:700; font-size:1.15rem; letter-spacing:.2em; color:var(--graphite); }
.wm-b{ font-weight:400; font-size:1rem; letter-spacing:.38em; color:var(--graphite); }
.wm-more{ font-size:.78rem; letter-spacing:.1em; color:var(--fog); }

/* ============ 結尾 CTA 卡 ============ */
.finale-card{
  position:relative;
  background:var(--canvas);
  border:1px solid var(--ash); border-radius:var(--r-card);
  padding:clamp(2.2rem,5vw,3.8rem);
  overflow:hidden;
}
.finale-card .px{ position:absolute; top:1.4rem; right:1.4rem; }
.finale-card h2{ font-size:clamp(1.7rem,3.4vw,2.5rem); line-height:1.3; max-width:20em; text-wrap:pretty; }
.finale-card p{ margin-top:1rem; max-width:none; }
.finale-actions{ display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap; margin-top:2rem; }

/* ============ Footer（由 nav.js 注入） ============ */
footer.site-foot{ border-top:1px solid var(--ash); padding:3.6rem 0 2.4rem; }
.foot-grid{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:2.5rem; }
.foot-grid h4{
  font-size:.66rem; font-weight:600; letter-spacing:.26em; text-transform:uppercase;
  color:var(--fog); margin-bottom:.9rem;
}
.foot-brand b{ display:block; color:var(--graphite); font-size:1rem; letter-spacing:.08em; }
.foot-brand small{ display:block; font-size:.66rem; letter-spacing:.28em; color:var(--steel); text-transform:uppercase; margin-top:.3rem; }
.foot-grid p, .foot-grid li{ font-size:.88rem; }
.foot-grid li{ margin-bottom:.4rem; }
.foot-grid a{ color:var(--slate); }
.foot-grid a:hover{ color:var(--volt); }

/* 社群圖示列（2026-08-11 由文字連結改為 icon；單色 currentColor 隨連結色） */
.foot-social{ display:flex; gap:1.1rem; align-items:center; margin-top:.1rem; }
.foot-social a{ display:inline-flex; color:var(--steel); transition:color .2s ease; }
.foot-social a:hover{ color:var(--volt); }
.foot-social svg{ display:block; }
.foot-bottom{
  margin-top:3.2rem; padding-top:1.3rem;
  border-top:1px solid var(--frost);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--fog);
}

/* ============ 購物車浮動按鈕（nav.js 注入於全站） ============ */
.cart-fab{
  position:fixed; bottom:32px; right:32px; z-index:60;
  display:none; align-items:center; gap:.5rem;
  background:var(--ink); color:#fff;
  font-size:.85rem; font-weight:700; letter-spacing:.06em;
  padding:.7em 1.2em; border-radius:999px;
  box-shadow:0 8px 24px -8px rgba(39,40,53,.4);
}
.cart-fab:hover{ background:var(--onyx); color:#fff; }
.cart-badge{
  background:var(--volt); color:#fff;
  font-size:.72rem; font-weight:700;
  min-width:1.5em; text-align:center;
  padding:.1em .45em; border-radius:999px;
}

/* ============ 進場動效（需 fx.js；尊重 reduced-motion） ============ */
.rv{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; transition-delay:var(--d,0s); }
.rv.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .rv{ opacity:1 !important; transform:none !important; transition:none !important; }
  .aurora-card::after{ animation:none; }
  *{ transition-duration:.01ms !important; }
}

/* ============ RWD ============ */
@media (max-width:1020px){
  .grid-4{ grid-template-columns:1fr 1fr; }
}
@media (max-width:860px){
  .sec{ padding:3.5rem 0; }

  /* 手機點擊目標加大（2026-07-22 手機體檢）：不改視覺大小，用內距擴大可點範圍 */
  .link-arrow{ display:inline-block; padding-block:.55rem; }
  .foot-grid a, .foot-bottom a{ display:inline-block; padding-block:.4rem; }
  .bar a{ display:inline-block; padding-block:.45rem; }

  /* 手機內文放大（2026-08-11 使用者指定）：
     基準 16→17px；有寫死 rem 字級的內文元素同步上調，維持層次比例 */
  body{ font-size:17px; line-height:1.8; }
  .page-hero .lead{ font-size:1.1rem; }
  .stat-desc{ font-size:.96rem; }
  .foot-grid p, .foot-grid li{ font-size:.94rem; }
  .link-arrow{ font-size:.92rem; }
  table.tbl{ font-size:.96rem; }
  .card .desc{ font-size:.94rem; }

  /* 手機最小字級底線：11px（裝飾性小標在小螢幕看不清） */
  .foot-bottom{ font-size:.72rem; }
  .scope{ font-size:.75rem; }
  .dark-band{ padding:3rem 0; }
  .page-hero{ padding:3rem 0 2.6rem; }
  .grid-2, .grid-3{ grid-template-columns:1fr; }
  .grid-4{ grid-template-columns:1fr 1fr; gap:.9rem; }
  .form-row{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; gap:1.8rem; }
  .cart-fab{ bottom:20px; right:20px; }
}