/* ==========================================================================
   生活智庫 izfuture.com — CI v2 Stylesheet
   Heritage Teal #0E4640 | Paper #F4F0E6 | Ember #D8723A | Ink #1A1A1A
   ========================================================================== */

/* ─── Reset ─── */
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0}
.wrap{max-width:1160px;margin:0 auto;padding:0 clamp(20px,5vw,48px)}
img,svg{max-width:100%;display:block}
.blk{padding:72px 0}.pt0{padding-top:0}
h1,h2,h3{margin:0 0 .4em}p{margin:0 0 1em}
@media(prefers-reduced-motion:no-preference){.reveal{opacity:0;transform:translateY(14px);transition:.7s}.reveal.in{opacity:1;transform:none}}

/* ─── CI v2 tokens (global :root for services.html compat) ─── */
:root{
  --bg:#F4F0E6;--surface:#FBF9F1;--text:#1A1A1A;--heading:#0E4640;
  --muted:#5C5647;--accent:#D8723A;--gold:#C79A5A;
  --line:rgba(14,70,64,.14);--line-s:rgba(14,70,64,.26);
  --serif:'Noto Serif TC',serif;--sans:'Noto Sans TC',sans-serif;
  --disp:'Spectral',serif;--mono:'JetBrains Mono',monospace;
  --deep:#08302B;
}

/* ─── .iz namespace (index.html) ─── */
.iz{--bg:#F4F0E6;--surface:#FBF9F1;--text:#1A1A1A;--heading:#0E4640;--muted:#5C5647;
--accent:#D8723A;--gold:#C79A5A;--line:rgba(14,70,64,.14);--line-s:rgba(14,70,64,.26);
--serif:'Noto Serif TC',serif;--sans:'Noto Sans TC',sans-serif;--disp:'Spectral',serif;--mono:'JetBrains Mono',monospace;
--logo-s:#0E4640;--n1:#0E4640;--n2:#D8723A;--n3:#C79A5A;--edge:rgba(14,70,64,.22);--edge2:rgba(14,70,64,.42);
--ring:rgba(199,154,90,.26);--ring2:rgba(199,154,90,.4);--core:#0E4640;--totem-core:#F4F0E6;--ico:#0E4640;
background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.75}
.iz h1,.iz h2,.iz h3{font-family:var(--serif);color:var(--heading);letter-spacing:-.01em}
.iz h2{font-size:clamp(1.7rem,3.4vw,2.3rem);font-weight:600}.iz h3{font-weight:600}
/* nav */
.iz .nav{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.iz .navin{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.iz .logo{display:flex;align-items:center;gap:11px;text-decoration:none}.iz .logo svg{width:40px;height:40px}
.iz .logo .wm b{font-family:var(--serif);font-weight:600;color:var(--heading);font-size:1.05rem;display:block;line-height:1.1}
.iz .logo .wm span{font-family:var(--disp);font-size:.62rem;letter-spacing:.28em;color:var(--muted)}
.iz .links{display:flex;gap:26px;align-items:center}
.iz .links a:not(.btn){color:var(--text);text-decoration:none;font-size:.92rem;font-weight:500}
.iz .links a:not(.btn):hover{color:var(--heading)}
.iz .btn{display:inline-flex;align-items:center;gap:.5em;font-weight:600;font-size:.92rem;padding:.62em 1.25em;border-radius:11px;text-decoration:none;border:1px solid transparent;transition:.2s;cursor:pointer}
.iz .btn-cta{background:var(--accent);color:#1A1A1A}
.iz .btn-ghost{background:transparent;color:var(--heading);border-color:var(--line-s)}
.iz .btn:hover{transform:translateY(-1px)}
/* hero */
.iz .hero{position:relative;overflow:hidden;padding:64px 0 60px}
.iz .herobg{position:absolute;inset:0;opacity:.5;pointer-events:none}.iz .herobg svg{width:100%;height:100%}
.iz .herogrid{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:center}
.iz .badge{display:inline-flex;align-items:center;font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--muted);border:1px solid var(--line-s);border-radius:100px;padding:.35em .9em}
.iz .hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(2.2rem,5vw,3.4rem);line-height:1.18;margin:20px 0 .5em}
.iz .hl{position:relative;white-space:nowrap}.iz .hl::after{content:"";position:absolute;left:-2px;right:-2px;bottom:.08em;height:.3em;background:rgba(216,114,58,.24);z-index:-1;border-radius:3px}
.iz .sub{font-size:1.08rem;line-height:1.85;color:var(--text);max-width:50ch}.iz .sub strong{color:var(--heading);font-weight:600}
.iz .cta{display:flex;gap:14px;flex-wrap:wrap;margin:26px 0 18px}.iz .cta .btn{padding:.78em 1.4em;font-size:1rem}
.iz .trust{display:flex;gap:18px;flex-wrap:wrap;font-family:var(--mono);font-size:.72rem;color:var(--muted)}
.iz .trust span{display:inline-flex;align-items:center;gap:.4em}.iz .trust i{color:var(--heading);font-weight:700;font-style:normal}
.iz .heroart{display:flex;justify-content:center}.iz .heroart .totem{width:min(100%,420px)}.iz .herophoto{display:none}
/* stats */
.iz .stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface)}
.iz .statsin{display:grid;grid-template-columns:repeat(4,1fr)}
.iz .stat{padding:28px 18px;text-align:center;border-left:1px solid var(--line)}.iz .stat:first-child{border-left:0}
.iz .sk{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;color:var(--gold)}
.iz .num{font-family:var(--mono);font-weight:600;font-size:2rem;color:var(--heading);line-height:1;margin-top:6px}.iz .num em{font-style:normal;color:var(--accent)}
.iz .sl{font-size:.8rem;color:var(--muted);margin-top:7px}
/* section header */
.iz .eye{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.iz .vol{font-family:var(--mono);font-size:.74rem;color:var(--accent);font-weight:600}
.iz .et{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;color:var(--muted)}
.iz .eye .rule{flex:1;height:1px;background:var(--line);max-width:120px}
.iz .ssub{color:var(--muted);margin-bottom:30px;max-width:60ch}
/* founder */
.iz .founder{display:grid;grid-template-columns:.82fr 1.18fr;gap:44px;align-items:center}
.iz .fphoto{position:relative;border-radius:16px;overflow:hidden}.iz .fphoto img{width:100%;aspect-ratio:4/5;object-fit:cover}
.iz .frole{position:absolute;top:12px;left:12px;font-family:var(--mono);font-size:.6rem;color:#F4F0E6;background:rgba(14,70,64,.72);padding:.3em .7em;border-radius:6px;letter-spacing:.04em}
.iz .quote{font-family:var(--serif);font-weight:500;font-size:1.5rem;line-height:1.5;color:var(--heading);border-left:3px solid var(--accent);padding-left:20px;margin-bottom:22px}
.iz .fname{font-family:var(--serif);font-weight:600;font-size:1.4rem;color:var(--heading)}
.iz .ftt{font-family:var(--mono);font-size:.72rem;color:var(--muted);margin-bottom:16px}
.iz .ftext p{color:var(--text);font-size:.98rem}.iz .ftext strong{color:var(--heading)}.iz .last{margin-bottom:0}
/* case */
.iz .case{position:relative;background:var(--heading);color:#F4F0E6;border-radius:16px;overflow:hidden}
.iz .casebg{position:absolute;inset:0;opacity:.4}.iz .casebg svg circle{fill:#C79A5A}.iz .casein{position:relative;padding:clamp(28px,4vw,46px)}
.iz .case h3{color:#F4F0E6;font-size:1.4rem}.iz .case p{color:rgba(244,240,230,.86);max-width:64ch;font-size:.98rem}
.iz .cbadge{display:inline-flex;font-family:var(--mono);font-size:.7rem;color:#C79A5A;border:1px solid rgba(199,154,90,.4);border-radius:100px;padding:.3em .8em;margin-bottom:16px}
.iz .pull{font-family:var(--serif);font-weight:500;font-size:1.3rem;color:#F4F0E6;border-left:3px solid #E68A4E;padding-left:18px;margin:20px 0}
.iz .attr{font-family:var(--mono);font-size:.74rem;color:#B3AB98}
/* table */
.iz .tblscroll{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.iz .cmp{width:100%;border-collapse:collapse;min-width:640px}
.iz .cmp th,.iz .cmp td{padding:14px 16px;text-align:center;border-bottom:1px solid var(--line);font-size:.9rem}
.iz .cmp thead th{font-family:var(--serif);font-weight:600;color:var(--heading);background:#E4E9E3}
.iz .cmp thead th.us{background:var(--heading);color:#F4F0E6}
.iz .cmp td.lbl{text-align:left;font-weight:500;color:var(--text)}
.iz .cmp td.us{background:rgba(14,70,64,.05);color:var(--heading);font-weight:600}
.iz .cmp .yes{color:var(--heading);font-weight:700}.iz .cmp .no{color:var(--muted)}
.iz .cmp tr.hi td{background:rgba(216,114,58,.08)}.iz .cmp tr.hi td.us{background:var(--heading);color:#F4F0E6}
/* cards */
.iz .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.iz .card{border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:28px 24px;transition:.2s}
.iz .card:hover{transform:translateY(-3px);border-color:var(--line-s)}
.iz .svic{width:52px;height:52px;margin-bottom:16px}
.iz .card h3{font-size:1.15rem}.iz .card p{font-size:.9rem;color:var(--muted)}.iz .card strong{color:var(--heading)}
.iz .more{font-weight:600;font-size:.86rem;color:var(--heading);text-decoration:none;border-bottom:2px solid var(--accent);padding-bottom:1px}
/* steps */
.iz .steps{display:grid;grid-template-columns:repeat(5,1fr);position:relative}
.iz .steps::before{content:"";position:absolute;top:22px;left:10%;right:10%;height:1.5px;background:var(--line)}
.iz .step{padding:0 12px;text-align:center;position:relative}
.iz .sn{width:44px;height:44px;border-radius:50%;background:var(--surface);border:1.5px solid var(--heading);color:var(--heading);font-family:var(--mono);font-weight:600;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;position:relative;z-index:2}
.iz .step:first-child .sn{background:var(--heading);color:#F4F0E6}
.iz .step h3{font-size:1rem}.iz .step p{font-size:.82rem;color:var(--muted)}
/* media */
.iz .media{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.iz .mcard{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surface);transition:.2s}
.iz .mcard:hover{transform:translateY(-3px);border-color:var(--line-s)}
.iz .mtop{position:relative;aspect-ratio:16/10;overflow:hidden}.iz .mtop img{width:100%;height:100%;object-fit:cover}
.iz .mtag{position:absolute;bottom:10px;left:12px;font-family:var(--mono);font-size:.62rem;color:#F4F0E6;background:rgba(8,48,43,.72);padding:.3em .7em;border-radius:6px;letter-spacing:.03em}
.iz .mbody{padding:14px 16px}.iz .mbody b{font-family:var(--serif);font-weight:600;color:var(--heading);font-size:.95rem;display:block;margin-bottom:4px}.iz .mbody p{font-size:.82rem;color:var(--muted);margin:0}
/* contact */
.iz .contact{position:relative;background:#08302B;color:#F4F0E6;border-radius:16px;overflow:hidden;text-align:center;padding:clamp(30px,4vw,52px)}
.iz .contactbg{position:absolute;inset:0;opacity:.35}.iz .contactin{position:relative}
.iz .contact h2{color:#F4F0E6}.iz .contact p{color:#B3AB98}
.iz .cbadge2{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;color:#C79A5A}
.iz .crows{display:flex;gap:34px;justify-content:center;flex-wrap:wrap;margin:26px 0;text-align:left}
.iz .crow b{font-family:var(--serif);font-weight:600;color:#F4F0E6;display:block}
.iz .crow a,.iz .crow span{color:#C79A5A;font-family:var(--mono);font-size:.86rem;text-decoration:none;display:block}
.iz .crow small{color:#B3AB98;font-size:.72rem;display:block}
/* footer */
.iz .foot{padding:34px 0 48px;border-top:1px solid var(--line)}
.iz .footin{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.iz .co{font-family:var(--serif);color:var(--heading);font-weight:600}.iz .meta{font-family:var(--mono);font-size:.72rem;color:var(--muted)}
@media(max-width:860px){.iz .links{display:none}.iz .herogrid,.iz .founder{grid-template-columns:1fr;gap:24px}.iz .heroart{order:-1}.iz .heroart .totem{width:min(66%,280px)}
.iz .grid3,.iz .media{grid-template-columns:1fr}.iz .statsin{grid-template-columns:1fr 1fr}.iz .stat:nth-child(odd){border-left:0}
.iz .steps{grid-template-columns:1fr 1fr}.iz .steps::before{display:none}.iz .step{margin-bottom:22px}}

/* ==========================================================================
   Legacy selectors — services.html (CI v2 colours, no .iz wrapper)
   ========================================================================== */
body{font-family:var(--sans);background:var(--bg);color:var(--text);line-height:1.75;overflow-x:hidden}
h1,h2,h3{font-family:var(--serif);color:var(--heading)}

/* nav / logo */
nav{padding:16px 0;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40;background:rgba(244,240,230,.93);backdrop-filter:blur(10px)}
.logo{font-family:var(--serif);font-size:1.15rem;font-weight:700;color:var(--heading);text-decoration:none;letter-spacing:.02em}
.logo span{color:var(--accent)}
.nav-links a{color:var(--text);text-decoration:none;font-size:.9rem;font-weight:500;margin-left:26px;transition:.15s}
.nav-links a:hover,.nav-links a.active{color:var(--heading)}
.hamburger{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px;padding:8px}
.hamburger span{display:block;width:24px;height:2px;background:var(--heading)}

/* container */
.container{max-width:1160px;margin:0 auto;padding:0 clamp(20px,5vw,48px)}

/* section */
.section{padding:72px 0}
.section-title{font-family:var(--serif);color:var(--heading);text-align:center;font-size:clamp(1.6rem,3.2vw,2.2rem);font-weight:600;margin-bottom:.3em}
.section-subtitle{color:var(--muted);text-align:center;margin-bottom:40px;font-size:.98rem;max-width:60ch;margin-left:auto;margin-right:auto}
.section-header{text-align:center;margin-bottom:40px}

/* page hero */
.page-hero{background:var(--bg);border-bottom:1px solid var(--line);padding:80px 0 60px;text-align:center}
.page-hero h1{font-family:var(--serif);color:var(--heading);font-size:clamp(2rem,4vw,3rem);font-weight:600;margin-bottom:.5em}
.page-hero p{color:var(--text);font-size:1.05rem;max-width:55ch;margin:0 auto}
.page-hero strong{color:var(--heading)}

/* glass-card */
.glass-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:32px;box-shadow:0 2px 12px rgba(8,48,43,.06);transition:.2s}
.glass-card:hover{transform:translateY(-3px);border-color:var(--line-s)}

/* buttons */
.btn-tech,.btn-pink{display:inline-flex;align-items:center;gap:.5em;background:var(--accent);color:#1A1A1A;font-family:var(--sans);font-weight:700;font-size:.95rem;padding:.78em 1.6em;border-radius:11px;text-decoration:none;border:none;cursor:pointer;transition:.2s}
.btn-tech:hover,.btn-pink:hover{transform:translateY(-2px)}
.btn-outline{display:inline-flex;align-items:center;background:transparent;color:var(--heading);border:1.5px solid var(--line-s);padding:.72em 1.4em;border-radius:11px;font-family:var(--sans);font-weight:600;font-size:.95rem;text-decoration:none;cursor:pointer;transition:.2s}
.btn-outline:hover{border-color:var(--heading)}
.btn-full{display:block;text-align:center;padding:.82em 1.2em;border-radius:10px;font-family:var(--sans);font-weight:700;font-size:.92rem;text-decoration:none;transition:.2s;margin-top:20px;cursor:pointer;border:none}
.btn-outline-pink{background:transparent;color:var(--heading);border:1.5px solid var(--line-s)}
.btn-outline-pink:hover{border-color:var(--heading)}
.btn-gold{background:var(--accent);color:#1A1A1A}
.btn-gold:hover{transform:translateY(-2px)}

/* employee grid */
.employee-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.employee-card img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;margin-bottom:14px}
.employee-role{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:var(--muted);margin-bottom:10px}
.employee-card ul{padding-left:18px;font-size:.88rem;color:var(--text);margin:0 0 14px}
.employee-card li{margin-bottom:.3em}
.employee-quote{font-family:var(--serif);font-style:italic;font-size:.9rem;color:var(--heading);border-left:2px solid var(--accent);padding-left:14px;margin-top:14px}

/* demo */
.demo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.toggle-container{display:flex;gap:8px;margin-bottom:16px}
.toggle-btn{padding:.5em 1em;border-radius:8px;border:1px solid var(--line);cursor:pointer;font-size:.86rem;color:var(--muted);background:var(--bg);font-family:var(--sans)}
.toggle-btn.active-bad{background:rgba(216,114,58,.1);border-color:var(--accent);color:var(--accent)}
.toggle-btn.active-good{background:rgba(14,70,64,.1);border-color:var(--heading);color:var(--heading)}
.chat-bubble{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px;font-size:.9rem;color:var(--text)}

/* pricing */
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;align-items:stretch}
.pricing-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:28px 24px;display:flex;flex-direction:column}
.pricing-card.featured{background:var(--heading);color:#F4F0E6;border-color:var(--heading)}
.pricing-card.featured h3{color:#F4F0E6!important}
.pricing-card.featured .price-target,.pricing-card.featured .pricing-features li{color:rgba(244,240,230,.8)}
.pricing-card.featured .price-value{color:#F4F0E6}
.pricing-card.featured .btn-outline-pink{color:#F4F0E6;border-color:rgba(244,240,230,.4)}
.pricing-badge{display:inline-flex;background:var(--accent);color:#1A1A1A;font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.06em;padding:.3em .8em;border-radius:100px;margin-bottom:12px}
.price-header h3{font-family:var(--serif);font-weight:600;color:var(--heading);font-size:1.2rem;margin-bottom:.2em}
.price-target{font-size:.82rem;color:var(--muted);margin-top:4px;margin-bottom:14px}
.price-row{display:flex;flex-direction:column;gap:2px}
.price-label{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:var(--muted)}
.price-value{font-family:var(--mono);font-weight:600;font-size:2rem;color:var(--heading);line-height:1.1}
.price-value small{font-size:.9rem;color:var(--muted)}
.pricing-card.featured .price-value small{color:rgba(244,240,230,.6)}
.pricing-features{list-style:none;padding:0;margin:16px 0;flex:1}
.pricing-features li{font-size:.88rem;padding:.45em 0;border-bottom:1px solid var(--line);color:var(--text)}
.pricing-features li:last-child{border-bottom:none}
.pricing-features li b{color:var(--heading)}
.pricing-card.featured .pricing-features li{border-color:rgba(244,240,230,.18)}
.pricing-card.featured .pricing-features li b{color:#F4F0E6}

/* timeline */
.timeline{position:relative;padding:10px 0}
.timeline::before{content:"";position:absolute;left:22px;top:0;bottom:0;width:1.5px;background:var(--line)}
.timeline-item{position:relative;padding:0 0 28px 64px}
.timeline-content h3{font-family:var(--serif);color:var(--heading);font-weight:600;font-size:1.05rem}
.timeline-content p{color:var(--text);font-size:.9rem}

/* FAQ */
.faq-section{max-width:780px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--line)}
.faq-question{width:100%;text-align:left;background:none;border:none;padding:18px 0;font-size:.98rem;font-weight:600;color:var(--text);cursor:pointer;font-family:var(--sans)}
.faq-question:hover{color:var(--heading)}
.faq-answer{padding:0 0 18px;color:var(--muted);font-size:.92rem;display:none}
.faq-answer p,.faq-answer ul{font-size:.92rem}
.faq-answer.open,.faq-answer[style*="display: block"]{display:block}

/* contact section */
.contact-section{background:#08302B;color:#F4F0E6;padding:72px 0;text-align:center}
.contact-section .section-header h2{font-family:var(--serif);color:#F4F0E6}
.contact-section .section-subtitle{color:rgba(244,240,230,.72)}
.contact-section .btn-tech{margin-top:10px}

/* footer */
footer{background:var(--surface);border-top:1px solid var(--line);padding:44px 0;text-align:center;color:var(--muted);font-size:.88rem}
footer p{margin-bottom:8px}

/* RWD */
@media(max-width:860px){
  .employee-grid,.demo-grid{grid-template-columns:1fr}
  .pricing-grid{grid-template-columns:1fr}
  .nav-links{display:none}
  .hamburger{display:flex}
  .nav-links.open{display:block;position:absolute;top:100%;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--line);padding:20px clamp(20px,5vw,48px)}
  .nav-links.open a{display:block;margin:0 0 14px}
}