/* ============================================================
   clearwater — 三源淨水設備 小官網視覺模板
   主張「看得見的乾淨」：有紀錄、可驗證的安裝。
   深湛藍綠 × 水青 × 淺瀨白。cw-* prefix，最後載入覆寫 gomag.css。
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root{
  --cw-deep:#0E3A4A;      /* 深湛 — 標題／深色底 */
  --cw-water:#12A5C4;     /* 水青 — accent／CTA */
  --cw-water-2:#3FC5DF;   /* 淺水青 — 漸層高光 */
  --cw-shallow:#E9F5F8;   /* 淺瀨 — 卡片／區塊底 */
  --cw-mist:#CFE6EC;      /* 霧 — 細線／邊框 */
  --cw-ink:#2A3B40;       /* 墨 — 內文 */
  --cw-ink-soft:#5C7379;  /* 灰墨 — 次要文字 */
  --cw-white:#ffffff;
  --cw-display:"Space Grotesk","Noto Sans TC",sans-serif;
  --cw-han:"Noto Sans TC",sans-serif;
}

/* ── 全站基底 ───────────────────────────── */
.cw main,.cw-page{background:var(--cw-white);color:var(--cw-ink);}
.cw-page *{box-sizing:border-box;}
.cw-wrap{max-width:1120px;margin:0 auto;padding:0 24px;}

/* 共用段落骨架 */
.cw-sec{padding:96px 0;}
.cw-sec.tint{background:var(--cw-shallow);}
.cw-sec-head{margin-bottom:44px;}
.cw-kicker{font-family:var(--cw-display);font-size:.78rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--cw-water);display:flex;align-items:center;gap:10px;margin:0 0 14px;}
.cw-kicker::before{content:"";width:26px;height:1.5px;background:var(--cw-water);display:inline-block;}
.cw-sec-head h2{font-family:var(--cw-han);font-weight:900;color:var(--cw-deep);
  font-size:clamp(1.7rem,3.6vw,2.5rem);line-height:1.3;letter-spacing:.02em;margin:0;}
.cw-sec-head .lead{color:var(--cw-ink-soft);font-size:1.02rem;line-height:1.9;margin:14px 0 0;max-width:52ch;}

/* ══ HERO ══ 招牌：深水漸層 + 焦散光波 + 底部水波分隔 */
.cw-hero{position:relative;overflow:hidden;color:var(--cw-white);
  background:radial-gradient(120% 120% at 20% 0%,#155a6e 0%,var(--cw-deep) 55%,#092935 100%);}
/* 官網 banner 照片層 + 深色遮罩（維持白字對比）*/
.cw-hero-photo{position:absolute;inset:0;background:center/cover no-repeat;}
.cw-hero-veil{position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(9,41,53,.94) 0%,rgba(14,58,74,.82) 42%,rgba(21,90,110,.55) 100%);}
.cw-hero-caustics{position:absolute;inset:-20% -10% 0;pointer-events:none;opacity:.5;
  background:
    radial-gradient(40% 22% at 25% 30%,rgba(63,197,223,.55),transparent 70%),
    radial-gradient(35% 20% at 75% 55%,rgba(18,165,196,.5),transparent 70%),
    radial-gradient(30% 18% at 55% 20%,rgba(120,225,240,.4),transparent 70%);
  filter:blur(6px);animation:cw-drift 16s ease-in-out infinite alternate;}
@keyframes cw-drift{
  0%{transform:translate3d(0,0,0) scale(1);}
  50%{transform:translate3d(-3%,2%,0) scale(1.06);}
  100%{transform:translate3d(3%,-2%,0) scale(1.03);}
}
/* 細水平光紋，暗示水面 */
.cw-hero-lines{position:absolute;inset:0;pointer-events:none;opacity:.14;
  background:repeating-linear-gradient(0deg,transparent 0 38px,rgba(255,255,255,.6) 38px 39px);
  mask-image:linear-gradient(180deg,transparent,#000 40%,#000 75%,transparent);}
.cw-hero-inner{position:relative;max-width:1120px;margin:0 auto;padding:118px 24px 140px;}
.cw-hero .cw-eyebrow{font-family:var(--cw-display);font-size:.82rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cw-water-2);font-weight:600;margin:0 0 22px;}
.cw-hero h1{font-family:var(--cw-han);font-weight:900;color:#fff;margin:0;
  font-size:clamp(2.6rem,7vw,4.6rem);line-height:1.08;letter-spacing:.03em;}
.cw-hero h1 .drop{color:var(--cw-water-2);}
.cw-hero .cw-hero-sub{font-size:clamp(1rem,2vw,1.18rem);line-height:1.9;color:rgba(233,245,248,.9);
  margin:26px 0 0;max-width:40ch;}
.cw-hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin:38px 0 0;}
.cw-cta{display:inline-flex;align-items:center;gap:10px;font-family:var(--cw-han);font-weight:800;
  font-size:1.02rem;text-decoration:none;padding:15px 30px;border-radius:999px;transition:.25s;}
.cw-cta.solid{background:var(--cw-water);color:#04222b;box-shadow:0 12px 30px -8px rgba(18,165,196,.7);}
.cw-cta.solid:hover{background:var(--cw-water-2);transform:translateY(-2px);}
.cw-cta.ghost{border:1.5px solid rgba(255,255,255,.4);color:#fff;}
.cw-cta.ghost:hover{border-color:#fff;background:rgba(255,255,255,.08);}
.cw-cta .arw{font-family:var(--cw-display);}
/* Hero 事實條 */
.cw-hero-facts{position:relative;max-width:1120px;margin:0 auto;padding:0 24px;
  display:flex;flex-wrap:wrap;gap:10px 26px;transform:translateY(-46px);}
.cw-hero-facts span{font-family:var(--cw-display);font-size:.86rem;letter-spacing:.04em;
  color:rgba(255,255,255,.86);display:inline-flex;align-items:center;gap:8px;}
.cw-hero-facts span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cw-water-2);}
@media(max-width:640px){.cw-hero-facts{display:none;}}
/* 底部水波 svg 分隔（在 markup 內） */
.cw-hero-wave{position:absolute;left:0;right:0;bottom:-1px;line-height:0;color:var(--cw-white);}
.cw-hero-wave svg{width:100%;height:70px;display:block;}

/* ══ ABOUT / thesis ══ */
.cw-about{display:grid;grid-template-columns:1fr;gap:26px;}
.cw-about .lede{font-family:var(--cw-han);font-weight:800;color:var(--cw-deep);
  font-size:clamp(1.35rem,3vw,1.9rem);line-height:1.6;letter-spacing:.02em;margin:0;}
.cw-about .body{color:var(--cw-ink-soft);font-size:1.04rem;line-height:2;max-width:60ch;}
@media(min-width:860px){.cw-about{grid-template-columns:1.1fr 1fr;gap:56px;align-items:start;}}

/* ══ SERVICES grid ══ */
.cw-svc{display:grid;grid-template-columns:1fr;gap:16px;}
@media(min-width:640px){.cw-svc{grid-template-columns:1fr 1fr;}}
@media(min-width:960px){.cw-svc{grid-template-columns:1fr 1fr 1fr;}}
.cw-svc-card{position:relative;background:var(--cw-white);border:1px solid var(--cw-mist);
  border-radius:16px;padding:28px 26px 30px;transition:.25s;overflow:hidden;}
.cw-svc-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(var(--cw-water),var(--cw-water-2));transform:scaleY(0);transform-origin:top;transition:.3s;}
.cw-svc-card:hover{border-color:var(--cw-water);box-shadow:0 20px 40px -22px rgba(14,58,74,.4);transform:translateY(-3px);}
.cw-svc-card:hover::before{transform:scaleY(1);}
.cw-svc-card .cw-svc-img{height:200px;margin:-28px -26px 20px;background:var(--cw-shallow) center/cover no-repeat;border-bottom:1px solid var(--cw-mist);}
.cw-svc-card .no{font-family:var(--cw-display);font-size:.8rem;font-weight:600;color:var(--cw-water);letter-spacing:.1em;}
/* 社群連結列 */
.cw-social{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 0;}
.cw-social a{display:inline-flex;align-items:center;gap:7px;font-family:var(--cw-display);font-weight:500;font-size:.9rem;
  text-decoration:none;padding:9px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.28);color:#fff;transition:.2s;}
.cw-social a:hover{background:rgba(255,255,255,.1);border-color:#fff;}
.cw-svc-card h3{font-family:var(--cw-han);font-weight:800;color:var(--cw-deep);font-size:1.16rem;margin:12px 0 10px;line-height:1.5;}
.cw-svc-card p{color:var(--cw-ink-soft);font-size:.95rem;line-height:1.85;margin:0;}

/* ══ PROCESS — 招牌：可紀錄安裝流程量測式時間軸 ══ */
.cw-flow{position:relative;}
.cw-flow-track{display:grid;grid-template-columns:1fr;gap:0;}
.cw-step{position:relative;display:grid;grid-template-columns:64px 1fr;gap:22px;
  padding:26px 0;border-top:1px solid var(--cw-mist);}
.cw-step:last-child{border-bottom:1px solid var(--cw-mist);}
.cw-step .cw-step-no{font-family:var(--cw-display);font-weight:700;font-size:1.5rem;color:var(--cw-water);
  line-height:1;position:relative;}
.cw-step .cw-step-no::after{content:"";position:absolute;left:50%;top:2.4rem;bottom:-26px;width:1.5px;
  background:linear-gradient(var(--cw-mist),transparent);transform:translateX(-50%);}
.cw-step:last-child .cw-step-no::after{display:none;}
.cw-step h3{font-family:var(--cw-han);font-weight:800;color:var(--cw-deep);font-size:1.14rem;margin:0 0 7px;}
.cw-step p{color:var(--cw-ink-soft);font-size:.97rem;line-height:1.8;margin:0;max-width:56ch;}
.cw-step .cw-tag{display:inline-block;font-family:var(--cw-display);font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--cw-water);background:var(--cw-shallow);
  border:1px solid var(--cw-mist);border-radius:999px;padding:3px 11px;margin-top:12px;}
@media(min-width:760px){
  .cw-step{grid-template-columns:88px 1fr;gap:32px;padding:32px 0;}
  .cw-step .cw-step-no{font-size:1.9rem;}
}

/* ══ 產品項目目錄 ══ */
.cw-prod-group{margin-top:56px;}
.cw-prod-group:first-child{margin-top:0;}
.cw-prod-group-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:0 0 22px;padding-bottom:14px;border-bottom:2px solid var(--cw-deep);}
.cw-prod-group-head h3{font-family:var(--cw-han);font-weight:900;color:var(--cw-deep);font-size:1.3rem;letter-spacing:.02em;margin:0;}
.cw-prod-group-head .cnt{font-family:var(--cw-display);font-size:.8rem;font-weight:600;letter-spacing:.1em;color:var(--cw-water);}
.cw-prod-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
@media(min-width:640px){.cw-prod-grid{grid-template-columns:repeat(3,1fr);}}
@media(min-width:960px){.cw-prod-grid{grid-template-columns:repeat(4,1fr);}}
.cw-prod-card{background:var(--cw-white);border:1px solid var(--cw-mist);border-radius:14px;overflow:hidden;transition:.2s;display:flex;flex-direction:column;text-decoration:none;color:inherit;}
.cw-prod-card:hover{border-color:var(--cw-water);box-shadow:0 16px 34px -20px rgba(14,58,74,.4);transform:translateY(-3px);}
.cw-prod-card .ph{aspect-ratio:1/1;background:#fff center/contain no-repeat;border-bottom:1px solid var(--cw-mist);}
.cw-prod-card .body{padding:13px 14px 15px;flex:1;display:flex;flex-direction:column;gap:5px;}
.cw-prod-card .nm{font-family:var(--cw-han);font-weight:700;color:var(--cw-deep);font-size:.9rem;line-height:1.5;}
.cw-prod-card .md{font-family:var(--cw-display);font-size:.74rem;letter-spacing:.04em;color:var(--cw-ink-soft);}
.cw-prod-card .pr{font-family:var(--cw-display);font-weight:700;font-size:1rem;color:var(--cw-deep);margin-top:auto;padding-top:8px;}
.cw-prod-card .go{font-family:var(--cw-display);font-size:.76rem;font-weight:600;letter-spacing:.04em;color:var(--cw-water);display:inline-flex;align-items:center;gap:5px;}
.cw-prod-card:hover .go{color:var(--cw-water-2);}
.cw-prod-card:hover .go .arw{transform:translateX(2px);}
.cw-prod-card .go .arw{transition:.2s;}

/* ══ 代理品牌 chips ══ */
.cw-brands{display:flex;flex-wrap:wrap;gap:10px;}
.cw-brands span{font-family:var(--cw-display);font-weight:500;font-size:.92rem;color:var(--cw-deep);
  background:var(--cw-white);border:1px solid var(--cw-mist);border-radius:10px;padding:9px 16px;letter-spacing:.02em;}

/* 條列賣點 */
.cw-list{list-style:none;margin:0;padding:0;display:grid;gap:14px;}
.cw-list li{position:relative;padding-left:30px;color:var(--cw-ink);font-size:1rem;line-height:1.7;}
.cw-list li::before{content:"";position:absolute;left:0;top:.5em;width:12px;height:12px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff 0 22%,var(--cw-water) 24% 100%);
  box-shadow:0 0 0 4px rgba(18,165,196,.14);}

/* 資訊定義列 */
.cw-info{display:grid;gap:0;}
.cw-info div{display:grid;grid-template-columns:96px 1fr;gap:16px;padding:15px 0;border-top:1px solid var(--cw-mist);}
.cw-info div:last-child{border-bottom:1px solid var(--cw-mist);}
.cw-info dt,.cw-info .k{font-family:var(--cw-display);font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cw-water);align-self:center;}
.cw-info dd,.cw-info .v{margin:0;color:var(--cw-ink);font-size:1rem;line-height:1.7;}
.cw-info a{color:var(--cw-deep);text-decoration:none;border-bottom:1px solid var(--cw-mist);}
.cw-info a:hover{color:var(--cw-water);border-color:var(--cw-water);}

/* ══ CONTACT band ══ */
.cw-contact{position:relative;overflow:hidden;color:#fff;
  background:radial-gradient(120% 140% at 80% 0%,#155a6e,var(--cw-deep) 60%,#092935);}
.cw-contact .cw-kicker{color:var(--cw-water-2);}
.cw-contact .cw-kicker::before{background:var(--cw-water-2);}
.cw-contact h2{color:#fff;}
.cw-contact-grid{display:grid;grid-template-columns:1fr;gap:44px;align-items:start;}
@media(min-width:840px){.cw-contact-grid{grid-template-columns:1fr 1fr;gap:64px;}}
.cw-contact .big{font-family:var(--cw-han);font-weight:900;font-size:clamp(1.9rem,4.5vw,2.8rem);line-height:1.25;margin:0 0 26px;letter-spacing:.02em;}
.cw-contact .cw-info div{border-color:rgba(255,255,255,.16);}
.cw-contact .cw-info dt,.cw-contact .cw-info .k{color:var(--cw-water-2);}
.cw-contact .cw-info dd,.cw-contact .cw-info .v{color:rgba(255,255,255,.94);}
.cw-contact .cw-info a{color:#fff;border-color:rgba(255,255,255,.3);}
.cw-contact .cw-info a:hover{color:var(--cw-water-2);border-color:var(--cw-water-2);}

/* ══ subpage hero（服務／關於）══ */
.cw-subhero{position:relative;overflow:hidden;color:#fff;
  background:radial-gradient(120% 120% at 15% 0%,#155a6e,var(--cw-deep) 60%,#092935);}
.cw-subhero-inner{max-width:1120px;margin:0 auto;padding:88px 24px 78px;position:relative;}
.cw-subhero .cw-eyebrow{font-family:var(--cw-display);font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cw-water-2);font-weight:600;margin:0 0 16px;}
.cw-subhero h1{font-family:var(--cw-han);font-weight:900;color:#fff;font-size:clamp(2rem,5vw,3.1rem);line-height:1.2;letter-spacing:.03em;margin:0;}
.cw-subhero p{color:rgba(233,245,248,.88);font-size:1.05rem;line-height:1.9;margin:18px 0 0;max-width:54ch;}

/* ══ header/nav 微調（clearwater 質感）══ */
.site-nav .btn-contact{background:var(--cw-water)!important;color:#04222b!important;font-weight:800;}
.site-nav .btn-contact:hover{background:var(--cw-water-2)!important;filter:none;}

/* 進場淡入（尊重 reduce-motion） */
.cw-reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease;}
.cw-reveal.in{opacity:1;transform:none;}

@media (prefers-reduced-motion: reduce){
  .cw-hero-caustics{animation:none;}
  .cw-reveal{opacity:1;transform:none;transition:none;}
  .cw-cta,.cw-svc-card{transition:none;}
}