:root {
  --ink: #10273b;
  --muted: #617483;
  --paper: #f5f8f4;
  --white: #fff;
  --green: #3d866c;
  --green-deep: #215b4b;
  --lime: #d9ee9a;
  --sky: #dceef4;
  --line: rgba(16, 39, 59, .12);
  --shadow: 0 24px 70px rgba(25, 54, 70, .12);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Inter, "Noto Sans TC", "PingFang TC", system-ui, sans-serif; }
a { color: inherit; text-decoration: none; }
.wrap { width: min(1180px, calc(100% - 48px)); margin: auto; }
.nav { height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 800; letter-spacing: -.02em; }
.brand-mark { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: white; background: var(--green-deep); box-shadow: inset -7px -7px 0 var(--green); }
.menu { display: flex; align-items: center; gap: 30px; font-size: 14px; color: #385166; }
.nav-cta, .button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px; border-radius: 99px; font-weight: 700; transition: .2s ease; }
.nav-cta, .button.primary { background: var(--ink); color: white; }
.button.secondary { border: 1px solid var(--line); background: rgba(255,255,255,.5); }
.button:hover, .nav-cta:hover { transform: translateY(-2px); }
.hero { min-height: 680px; padding: 58px 0 80px; overflow: hidden; position: relative; }
.hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 70px; }
.eyebrow { font-size: 12px; letter-spacing: .16em; font-weight: 800; color: var(--green); margin-bottom: 20px; }
h1 { white-space: pre-line; font-size: clamp(54px, 7vw, 92px); line-height: .98; letter-spacing: -.065em; margin: 0 0 28px; }
.lead { font-size: 19px; line-height: 1.75; color: var(--muted); max-width: 560px; }
.actions { display: flex; gap: 12px; margin-top: 34px; }
.visual { min-height: 510px; position: relative; display: grid; place-items: center; }
.orb { position: absolute; width: 450px; height: 450px; border-radius: 50%; background: linear-gradient(145deg, var(--lime), var(--sky)); filter: saturate(.9); }
.dashboard { width: min(510px, 100%); padding: 18px; border-radius: 28px; position: relative; background: rgba(255,255,255,.88); backdrop-filter: blur(20px); box-shadow: var(--shadow); transform: rotate(-2deg); }
.dash-top { display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); padding:8px 6px 18px; font-weight:800; }
.dots { display:flex; gap:5px; }.dots i { width:7px;height:7px;border-radius:50%;background:#cfd9d6; }
.dash-body { display:grid; grid-template-columns: 90px 1fr; gap:18px; padding-top:18px; }
.dash-side { border-radius:16px; background:#eef3ef; padding:12px; display:grid; gap:10px; align-content:start; }
.dash-side i { height:8px;border-radius:5px;background:#cedcd5; }.dash-side i:first-child{background:var(--green);width:70%;}
.metric-row { display:grid;grid-template-columns:repeat(3,1fr);gap:10px; }
.metric { padding:15px;border:1px solid var(--line);border-radius:15px;background:white; }
.metric b { display:block;font-size:23px;margin-top:8px; }.metric span{font-size:10px;color:var(--muted);}
.chart { margin-top:12px;height:190px;border-radius:17px;background:linear-gradient(180deg,#f7faf8,#fff);border:1px solid var(--line);position:relative;overflow:hidden; }
.chart:after { content:"";position:absolute;left:8%;right:7%;bottom:24%;height:42%;border-top:4px solid var(--green);border-radius:50%;transform:skewY(-8deg); }
.float-card { position:absolute;right:-8px;bottom:28px;padding:16px 20px;border-radius:18px;background:var(--ink);color:white;box-shadow:var(--shadow);font-size:13px; }
.trust-bar { background: var(--ink); color: white; }
.trust-inner { min-height: 120px; display:grid; grid-template-columns: 1.3fr 1fr; align-items:center; gap:60px; }
.trust-inner h2 { font-size:24px; margin:0; }.trust-inner p{color:#b9c8d0;line-height:1.7;margin:0;}
.section { padding: 110px 0; }
.section.white { background: white; }
.section-head { display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:44px; }
.section-head h2 { font-size:clamp(38px,5vw,60px);letter-spacing:-.045em;line-height:1.05;margin:0;max-width:680px; }
.section-head p { max-width:440px;color:var(--muted);line-height:1.7; }
.cards { display:grid;grid-template-columns:repeat(4,1fr);gap:15px; }
.card { padding:30px;min-height:300px;border-radius:24px;background:white;border:1px solid var(--line);display:flex;flex-direction:column;transition:.25s ease; }
.card:hover { transform:translateY(-6px);box-shadow:0 18px 45px rgba(30,70,75,.09); }
.card:nth-child(2n) { background:#eff6f1; }.card-index{font-size:12px;color:var(--green);font-weight:800;}
.card h3{font-size:23px;letter-spacing:-.025em;margin:55px 0 13px;}.card p{color:var(--muted);line-height:1.65;margin:0;}.card small{margin-top:auto;padding-top:22px;color:var(--green-deep);font-weight:700;}
.product-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:14px; }
.product { padding:26px;border-radius:20px;background:var(--paper);border:1px solid transparent; }
.product:hover{border-color:var(--line);}.product .tag{font-size:11px;color:var(--green);font-weight:800;}.product h3{margin:28px 0 10px;font-size:22px}.product p{color:var(--muted);line-height:1.6;margin:0;}
.statement { border-radius:32px;padding:70px;background:linear-gradient(120deg,#1e5749,#17384a);color:white;display:grid;grid-template-columns:1.3fr .7fr;gap:70px;align-items:end; }
.statement h2{font-size:clamp(38px,5vw,64px);letter-spacing:-.05em;line-height:1.06;margin:0;}.statement p{color:#d1e2de;line-height:1.75;}
.faq { max-width:880px;margin:auto; }.faq-item{border-top:1px solid var(--line);padding:24px 0;}.faq-item summary{font-size:19px;font-weight:700;cursor:pointer;}.faq-item p{color:var(--muted);line-height:1.8;max-width:720px;}
footer { padding:55px 0 38px;background:#0c2132;color:white; }.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:50px}.footer-grid p,.footer-grid a{color:#aebdc8;line-height:1.8;font-size:14px}.footer-title{font-weight:800;margin-bottom:14px}.copyright{border-top:1px solid rgba(255,255,255,.1);margin-top:40px;padding-top:22px;color:#8295a3;font-size:12px;}
.page-hero { padding:85px 0 100px;background:linear-gradient(145deg,#eff6e8,#e4f1f5); }.page-hero .crumb{font-size:12px;color:var(--green);font-weight:800;letter-spacing:.1em}.page-hero h1{font-size:clamp(48px,7vw,82px);max-width:850px;margin-top:28px}.page-hero p{font-size:19px;max-width:650px;color:var(--muted);line-height:1.75}.journey{display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:step}.journey-item{padding:28px;border-left:1px solid var(--line);counter-increment:step}.journey-item:before{content:"0" counter(step);font-size:11px;color:var(--green);font-weight:800}.journey-item h3{margin:45px 0 12px}.journey-item p{color:var(--muted);line-height:1.65;font-size:14px}
.status-note { position:fixed;right:18px;bottom:18px;padding:9px 13px;background:#fff8d9;color:#675710;border:1px solid #eee0a8;border-radius:9px;font-size:11px;display:none;z-index:20; }
@media(max-width:900px){.menu{display:none}.hero-grid,.trust-inner,.statement{grid-template-columns:1fr}.hero{padding-top:35px}.visual{min-height:420px}.cards,.journey{grid-template-columns:repeat(2,1fr)}.product-grid{grid-template-columns:1fr 1fr}.footer-grid{grid-template-columns:1fr}.section{padding:75px 0}}
@media(max-width:580px){.wrap{width:min(100% - 28px,1180px)}.nav{height:70px}.nav-cta{display:none}h1{font-size:52px}.hero{padding-bottom:50px}.visual{min-height:340px}.orb{width:320px;height:320px}.dashboard{padding:12px}.dash-body{grid-template-columns:65px 1fr}.metric-row{grid-template-columns:1fr}.metric:nth-child(n+2){display:none}.cards,.product-grid,.journey{grid-template-columns:1fr}.section-head{display:block}.statement{padding:38px}.actions{flex-direction:column}.button{width:100%}}