/* ============================================================
   Solve by Smile ｜ 服務網站 共用樣式 v2（2026-10-05）
   token 沿用品牌配色表 + 講師銷售頁：紙白 / 天空藍 / 墨藍 / 品牌藍 / 暖橘 CTA
   頁面：/ 、/factory/ 、/consult/
   ============================================================ */
:root{
  --paper:#FBFDFE; --sky:#EAF6FC; --ink:#16242E; --ink-soft:#4F636E;
  --blue:#31B2E6; --blue-deep:#0E72A3; --cta:#EF8043; --cta-hover:#DE6D2F;
  --yellow:#FBE40E; --green:#73BC4D; --red:#E83F4A;
  --card:#FFFFFF; --hair:rgba(22,36,46,.14); --line:#DCE6EB; --soft:#F2F6F8;
  --radius:24px; --maxw:1140px; --focus:#0E72A3;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--paper); color:var(--ink); overflow-x:hidden;
  font-family:'Noto Sans TC',-apple-system,system-ui,'PingFang TC',sans-serif;
  font-size:16px; line-height:1.8; -webkit-font-smoothing:antialiased;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
img{max-width:100%; display:block;}
a{color:inherit;}
p{margin:0 0 1em;}
:focus-visible{outline:3px solid var(--focus); outline-offset:3px; border-radius:8px;}
h1,h2,h3,h4{font-weight:800; line-height:1.25; letter-spacing:-.01em; margin:0; text-wrap:pretty;}
.num{font-family:'Baloo 2','Noto Sans TC',sans-serif; font-weight:800;}
.section{padding:clamp(56px,8vw,104px) 0;}
.section.alt{background:var(--sky);}
.section.tight{padding:clamp(40px,6vw,72px) 0;}
.kicker{display:block; font-size:14px; font-weight:700; color:var(--blue-deep); margin-bottom:12px;}
.head{margin:0 0 36px;}
.head h2{font-size:clamp(1.6rem,3.2vw,2.3rem); margin-bottom:12px; max-width:none;}
.lead{color:var(--ink-soft); font-size:clamp(1rem,1.4vw,1.12rem); max-width:60ch; margin:0;}
br.d{display:none;}
@media(min-width:700px){br.d{display:inline;}}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:15px 30px; border-radius:999px; background:var(--cta); color:var(--ink);
  font-weight:800; font-size:16px; text-decoration:none; border:none; cursor:pointer; font-family:inherit;
  box-shadow:0 10px 24px rgba(239,128,67,.3); transition:transform .15s, background .15s;}
.btn:hover{background:var(--cta-hover); transform:translateY(-2px);}
.btn.lg{padding:18px 36px; font-size:17px;}
.btn.ghost{background:var(--card); color:var(--blue-deep); border:1.5px solid var(--blue); box-shadow:none;}
.btn.ghost:hover{background:var(--sky);}
.btn[disabled]{opacity:.55; cursor:not-allowed; transform:none;}
.cta-row{display:flex; flex-wrap:wrap; gap:12px; align-items:center;}
.micro{font-size:14px; color:var(--ink-soft); margin:14px 0 0;}
@media(max-width:600px){.btn.lg{width:100%;} .cta-row .btn{width:100%;}}

/* NAV */
nav.top{position:sticky; top:0; z-index:50; background:rgba(251,253,254,.9);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid var(--hair);}
nav.top .wrap{display:flex; align-items:center; gap:22px; height:68px;}
.logo{display:flex; align-items:center; gap:12px; text-decoration:none;}
.logo img{height:34px; width:auto;}
.logo span{font-size:14px; color:var(--ink-soft); font-weight:500; white-space:nowrap;}
.navlinks{display:flex; gap:24px; margin-left:auto; font-size:15px; font-weight:500;}
.navlinks a{text-decoration:none; color:var(--ink-soft);}
.navlinks a:hover{color:var(--blue-deep);}
nav.top .btn{padding:11px 20px; font-size:15px; box-shadow:none;}
@media(max-width:900px){.navlinks{display:none;} .logo span{display:none;} nav.top .btn{margin-left:auto;}}

/* HERO */
.hero{padding:clamp(44px,7vw,92px) 0 clamp(40px,6vw,72px);}
.hero .wrap{display:grid; grid-template-columns:1.08fr .92fr; gap:48px; align-items:center;}
.hero h1{font-size:clamp(2rem,5vw,3.4rem); line-height:1.18; margin:12px 0 20px;}
.hero .sub{font-size:clamp(1.05rem,1.6vw,1.2rem); color:var(--ink-soft); max-width:32em; margin:0 0 28px;}
.hero .sub b{color:var(--ink); font-weight:700;}
.flow-wrap{position:relative;}
.flow{width:100%; height:auto;}
.flow text{font-family:inherit; font-size:14px; font-weight:700; fill:var(--ink);}
.flow .draw{stroke-dasharray:420; stroke-dashoffset:420; animation:draw 1.4s ease-out forwards .35s;}
.flow .draw.d2{animation-delay:.55s;} .flow .draw.d3{animation-delay:.75s;}
.flow .pop{opacity:0; animation:pop .4s ease-out forwards 1.5s;}
.flow .pop.p2{animation-delay:1.9s;}
@keyframes draw{to{stroke-dashoffset:0;}}
@keyframes pop{to{opacity:1;}}
.flow-cap{font-size:14px; color:var(--ink-soft); margin:10px 0 0; text-align:center;}
@media(max-width:860px){.hero .wrap{grid-template-columns:1fr; gap:32px;} .flow-wrap{max-width:480px;}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .flow .draw{animation:none; stroke-dashoffset:0;} .flow .pop{animation:none; opacity:1;}
  .btn{transition:none;}
}

/* TRUST STRIP */
.trust{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--soft);}
.trust .wrap{display:flex; flex-wrap:wrap; gap:10px 40px; padding-top:18px; padding-bottom:18px;
  font-size:15px; font-weight:500; color:var(--ink-soft);}
.trust span::before{content:""; display:inline-block; width:10px; height:10px; border-radius:50%;
  background:var(--blue); margin-right:10px; vertical-align:middle;}

/* NUMBERS STRIP（工廠頁） */
.numbers{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.numbers div{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px;}
.numbers b{display:block; font-family:'Baloo 2','Noto Sans TC',sans-serif; font-size:2rem; line-height:1.1; color:var(--blue-deep);}
.numbers span{font-size:14px; color:var(--ink-soft);}
@media(max-width:760px){.numbers{grid-template-columns:1fr;}}

/* PAINS */
.pains{display:grid; grid-template-columns:repeat(2,1fr); gap:26px 48px;}
.pain{border-left:4px solid var(--blue); padding:2px 0 2px 20px;}
.pain h3{font-size:1.1rem; margin-bottom:8px;}
.pain p{margin:0; color:var(--ink-soft);}
.pains-after{margin:40px 0 0; font-size:1.15rem; font-weight:700; max-width:36ch; line-height:1.7;}
@media(max-width:700px){.pains{grid-template-columns:1fr;}}

/* PROSE */
.prose{max-width:60ch; font-size:clamp(1.02rem,1.5vw,1.15rem);}
.prose p{margin-bottom:1.15em;}
.prose .mark{background:linear-gradient(180deg,transparent 58%,rgba(251,228,14,.7) 58%,rgba(251,228,14,.7) 94%,transparent 94%); padding:0 .1em;}

/* SHOT：示意畫面外框 */
.shot{position:relative; margin:0;}
.shot img{width:100%; height:auto; border-radius:18px; border:1px solid var(--line); box-shadow:0 18px 40px rgba(33,90,120,.14); background:var(--sky);}
.shot figcaption{font-size:13px; color:var(--ink-soft); margin-top:10px;}
.shot .tag{position:absolute; top:12px; left:12px; background:rgba(22,36,46,.78); color:#fff; font-size:12px; font-weight:700; padding:4px 10px; border-radius:999px;}

/* SERVICES（有畫面） */
.svc{border-top:2px solid var(--ink); padding:40px 0 60px;}
.svc:last-of-type{padding-bottom:0;}
.svc-head{display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; margin-bottom:28px;}
.svc-head h3{font-size:clamp(1.5rem,2.8vw,2rem);}
.svc-head .for{color:var(--ink-soft); font-weight:500;}
.svc-grid{display:grid; grid-template-columns:1fr 1.15fr; gap:36px 56px; align-items:start;}
.svc-grid.flip > .shot{order:-1;}
.svc h4{font-size:14px; font-weight:700; color:var(--blue-deep); margin:0 0 10px;}
.svc .block{margin-bottom:26px;}
.painlist{list-style:none; padding:0; margin:0;}
.painlist li{position:relative; padding-left:18px; margin-bottom:8px;}
.painlist li::before{content:""; position:absolute; left:0; top:.72em; width:8px; height:8px; border-radius:50%; background:var(--red);}
.what p{margin-bottom:.5em;}
.steps{list-style:none; padding:0; margin:0; counter-reset:s;}
.steps li{display:flex; gap:14px; align-items:flex-start; margin-bottom:10px;}
.steps li::before{counter-increment:s; content:counter(s); font-family:'Baloo 2',sans-serif; font-weight:800;
  font-size:17px; color:var(--blue-deep); background:var(--sky); width:30px; height:30px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; flex:none; margin-top:2px;}
.plans{display:flex; flex-wrap:wrap; gap:10px;}
.plans span{border:1.5px solid var(--blue); color:var(--blue-deep); border-radius:999px; padding:5px 14px; font-weight:700; font-size:14px;}
.start{font-weight:700; color:var(--blue-deep); text-decoration:none; border-bottom:2px solid var(--blue); padding-bottom:1px;}
.start:hover{border-color:var(--blue-deep);}
.svc-side{display:flex; flex-direction:column; gap:22px;}
@media(max-width:860px){.svc-grid{grid-template-columns:1fr; gap:28px;} .svc-grid.flip > .shot{order:0;}}

/* CASES（畫面卡） */
.cases{display:grid; grid-template-columns:1fr 1fr; gap:36px 40px;}
.case{display:flex; flex-direction:column; gap:14px;}
.case .ind{font-size:14px; color:var(--ink-soft); font-weight:500;}
.case h3{font-size:1.2rem; margin-top:2px;}
.case p{margin:0; color:var(--ink-soft);}
.case .stat{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; padding-top:12px; border-top:1px solid var(--line);}
.case .stat b{font-family:'Baloo 2','Noto Sans TC',sans-serif; font-size:1.7rem; line-height:1.1; color:var(--blue-deep);}
.case .stat small{font-size:13px; color:var(--ink-soft);}
@media(max-width:800px){.cases{grid-template-columns:1fr;}}
.years{margin-top:48px; background:var(--sky); border-radius:var(--radius); padding:28px 32px;}
.years h3{font-size:1rem; color:var(--blue-deep); margin-bottom:16px;}
.years ul{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(4,1fr); gap:16px 24px;}
.years li b{display:block; font-family:'Baloo 2','Noto Sans TC',sans-serif; font-size:1.6rem; color:var(--ink); line-height:1.2;}
.years li span{font-size:14px; color:var(--ink-soft);}
@media(max-width:860px){.years ul{grid-template-columns:repeat(2,1fr);} .years li b{font-size:1.3rem;}}

/* HOW（工廠頁四段） */
.how{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; counter-reset:h;}
.how div{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:24px 22px;}
.how div::before{counter-increment:h; content:counter(h); font-family:'Baloo 2',sans-serif; font-weight:800; font-size:2rem; color:var(--blue-deep); line-height:1; display:block; margin-bottom:10px;}
.how h3{font-size:1.08rem; margin-bottom:8px;}
.how p{margin:0; color:var(--ink-soft); font-size:15px;}
@media(max-width:900px){.how{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.how{grid-template-columns:1fr;}}
.shots2{display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:36px;}
@media(max-width:800px){.shots2{grid-template-columns:1fr;}}

/* QUOTES */
.quotes{display:grid; grid-template-columns:1fr 1fr; gap:36px 56px;}
.quote{padding-left:24px; border-left:3px solid var(--yellow); margin:0;}
.quote p{font-size:1.05rem; margin-bottom:12px;}
.quote footer{font-size:14px; color:var(--ink-soft);}
.quote footer b{color:var(--ink);}
@media(max-width:760px){.quotes{grid-template-columns:1fr;}}

/* FIT */
.fit{display:grid; grid-template-columns:1fr 1fr; gap:28px;}
.fit > div{background:var(--card); border-radius:var(--radius); padding:30px 32px; border:1px solid var(--line);}
.fit h3{font-size:1.15rem; margin-bottom:14px;}
.fit ul{list-style:none; padding:0; margin:0;}
.fit li{padding-left:30px; position:relative; margin-bottom:10px;}
.fit li::before{position:absolute; left:0; top:0; font-weight:800;}
.fit .yes li::before{content:"✓"; color:var(--green);}
.fit .no li::before{content:"✕"; color:var(--ink-soft);}
@media(max-width:760px){.fit{grid-template-columns:1fr;}}

/* PROCESS */
.proc{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; counter-reset:p;}
.proc div{padding-top:18px; border-top:3px solid var(--blue);}
.proc div::before{counter-increment:p; content:counter(p); font-family:'Baloo 2',sans-serif; font-weight:800;
  font-size:2.2rem; color:var(--blue-deep); line-height:1; display:block; margin-bottom:10px;}
.proc h3{font-size:1.1rem; margin-bottom:6px;}
.proc p{margin:0; color:var(--ink-soft);}
@media(max-width:760px){.proc{grid-template-columns:1fr;}}

/* ABOUT */
.about .wrap{display:grid; grid-template-columns:300px 1fr; gap:52px; align-items:center;}
.portrait img{border-radius:var(--radius); background:var(--sky);}
.about p{font-size:1.05rem;}
@media(max-width:820px){.about .wrap{grid-template-columns:1fr; gap:28px;} .portrait{max-width:260px;}}

/* FAQ */
.faq{max-width:760px;}
.faq details{border-bottom:1px solid var(--line); padding:4px 0;}
.faq summary{cursor:pointer; font-weight:700; font-size:1.05rem; padding:14px 40px 14px 0; position:relative; list-style:none;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+"; position:absolute; right:0; top:10px; font-family:'Baloo 2',sans-serif; font-size:26px; color:var(--blue-deep); transition:transform .2s;}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq details p{margin:0 0 16px; color:var(--ink-soft); max-width:60ch;}

/* BOOKING FORM */
.booking{background:var(--sky);}
.booking .wrap{display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:start;}
@media(max-width:900px){.booking .wrap{grid-template-columns:1fr;}}
.form{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:30px 32px; box-shadow:0 18px 40px rgba(33,90,120,.1);}
.form .stepbar{display:flex; gap:8px; margin-bottom:22px; font-size:13px; color:var(--ink-soft); font-weight:700;}
.form .stepbar span{flex:1; padding-top:8px; border-top:3px solid var(--line);}
.form .stepbar span.on{border-color:var(--blue-deep); color:var(--blue-deep);}
.form .stepbar span.done{border-color:var(--green);}
.form fieldset{border:none; padding:0; margin:0 0 22px;}
.form legend{font-weight:700; margin-bottom:10px; padding:0;}
.form legend small{font-weight:500; color:var(--ink-soft);}
.chips{display:flex; flex-wrap:wrap; gap:8px;}
.chips label{position:relative; cursor:pointer;}
.chips input{position:absolute; opacity:0; inset:0; width:100%; height:100%; cursor:pointer;}
.chips span{display:inline-block; padding:9px 14px; border-radius:999px; border:1.5px solid var(--line); font-size:14px; font-weight:500; background:#fff; transition:background .12s, border-color .12s;}
.chips input:checked + span{background:var(--blue-deep); color:#fff; border-color:var(--blue-deep);}
.chips input:focus-visible + span{outline:3px solid var(--focus); outline-offset:2px;}
.form label.field{display:block; font-weight:700; margin-bottom:6px;}
.form label.field small{font-weight:500; color:var(--ink-soft);}
.form input[type=text],.form input[type=email],.form input[type=url],.form textarea{width:100%; font:inherit; padding:12px 14px; border:1.5px solid var(--line); border-radius:12px; background:#fff; color:var(--ink);}
.form textarea{min-height:120px; resize:vertical;}
.form input:focus,.form textarea:focus{outline:none; border-color:var(--blue-deep); box-shadow:0 0 0 3px rgba(14,114,163,.15);}
.form .field-wrap{margin-bottom:16px;}
.form .nav{display:flex; justify-content:space-between; gap:12px; margin-top:8px; flex-wrap:wrap;}
.form .err{color:var(--red); font-size:14px; margin:6px 0 0; display:none;}
.form .err.show{display:block;}
.form .step{display:none;}
.form .step.on{display:block;}
.form .done-msg{display:none; text-align:center; padding:20px 0;}
.form .done-msg.on{display:block;}
.form .done-msg h3{font-size:1.4rem; margin-bottom:10px;}
.form .fallback{font-size:13px; color:var(--ink-soft); margin-top:18px;}
.form .fallback a{color:var(--blue-deep);}

/* FINAL */
.final{background:linear-gradient(160deg,#1d3a4a,#16242E); color:#fff; padding:clamp(64px,9vw,112px) 0;}
.final h2{font-size:clamp(1.7rem,3.6vw,2.6rem); color:#fff; margin-bottom:14px;}
.final p{color:rgba(255,255,255,.82); max-width:40ch; font-size:1.1rem;}
.final .micro{color:rgba(255,255,255,.62);}

/* AUDIENCE LINKS（頁尾上方） */
.aud{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.aud a{display:block; text-decoration:none; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px; transition:border-color .15s;}
.aud a:hover{border-color:var(--blue);}
.aud b{display:block; font-size:1.05rem; margin-bottom:4px;}
.aud span{font-size:14px; color:var(--ink-soft);}
@media(max-width:760px){.aud{grid-template-columns:1fr;}}

/* FOOTER */
footer.site{padding:34px 0; font-size:14px; color:var(--ink-soft);}
footer.site .wrap{display:flex; flex-wrap:wrap; gap:14px 28px; align-items:center;}
footer.site img{height:28px; width:auto;}
footer.site a{text-decoration:none;}
footer.site a:hover{color:var(--blue-deep);}
footer.site .copy{margin-left:auto;}
@media(max-width:600px){footer.site .copy{margin-left:0;}}