:root{
  --bg:#fffdfb;
  --surface:#fffaf5;
  --surface-2:#f8eee5;
  --surface-3:#f2dfd0;
  --ink:#241a14;
  --muted:#6f5f54;
  --line:#ead8ca;
  --accent:#d95109;
  --accent-dark:#a53b08;
  --accent-soft:#f6c7a8;
  --dark:#201711;
  --dark-2:#312219;
  --white:#fff;
  --success:#78633f;
  --shadow:0 24px 70px rgba(73,39,19,.10);
  --shadow-sm:0 12px 34px rgba(73,39,19,.08);
  --radius:28px;
  --radius-md:20px;
  --radius-sm:14px;
  --max:1180px;
  --font-scale:1;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;font-size:calc(16px * var(--font-scale));scroll-padding-top:92px}
body{
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(circle at 9% 8%, rgba(246,199,168,.25), transparent 28rem),
    radial-gradient(circle at 92% 28%, rgba(217,81,9,.07), transparent 25rem),
    var(--bg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang TC","Noto Sans TC","Microsoft JhengHei",Arial,sans-serif;
  line-height:1.72;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
}
body.menu-open{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
::selection{background:var(--accent-soft);color:var(--dark)}

.skip-link{position:fixed;left:16px;top:-100px;z-index:999;background:var(--dark);color:#fff;padding:10px 14px;border-radius:10px;transition:top .2s}
.skip-link:focus{top:12px}

.container{width:min(calc(100% - 40px),var(--max));margin-inline:auto}
.section{padding:104px 0;position:relative}
.section-sm{padding:72px 0}
.section-soft{background:linear-gradient(180deg,rgba(248,238,229,.75),rgba(255,253,251,.8))}
.section-dark{background:var(--dark);color:#fff;overflow:hidden}
.section-dark::before,.section-dark::after{content:"";position:absolute;border:1px solid rgba(246,199,168,.18);border-radius:50%;pointer-events:none}
.section-dark::before{width:560px;height:560px;right:-260px;top:-260px}
.section-dark::after{width:390px;height:390px;left:-210px;bottom:-240px}

.eyebrow{display:inline-flex;align-items:center;gap:9px;margin:0 0 14px;color:var(--accent-dark);font-size:.78rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor}
.section-dark .eyebrow{color:#f5b184}
.display{font-size:clamp(2.65rem,6vw,5.6rem);line-height:1.01;letter-spacing:-.045em;margin:0;max-width:900px}
.h2{font-size:clamp(2rem,4.3vw,3.7rem);line-height:1.12;letter-spacing:-.035em;margin:0 0 20px}
.h3{font-size:clamp(1.25rem,2vw,1.7rem);line-height:1.25;margin:0 0 10px}
.lead{font-size:clamp(1.05rem,1.7vw,1.28rem);line-height:1.75;color:var(--muted);max-width:760px}
.section-dark .lead,.section-dark .muted{color:rgba(255,255,255,.72)}
.muted{color:var(--muted)}
.kicker{font-size:.82rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-dark)}

.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 20px;border:1px solid transparent;border-radius:999px;font-weight:780;transition:transform .2s,box-shadow .2s,background .2s,border-color .2s}
.btn:hover{transform:translateY(-2px)}
.btn:focus-visible,.nav-link:focus-visible,.icon-btn:focus-visible,.menu-toggle:focus-visible{outline:3px solid rgba(217,81,9,.28);outline-offset:3px}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 12px 26px rgba(217,81,9,.22)}
.btn-primary:hover{background:var(--accent-dark)}
.btn-secondary{background:#fff;border-color:var(--line);color:var(--ink)}
.btn-secondary:hover{border-color:var(--accent-soft);box-shadow:var(--shadow-sm)}
.btn-dark{background:#fff;color:var(--dark)}
.btn-ghost-light{border-color:rgba(255,255,255,.25);color:#fff}

.site-header{position:sticky;top:0;z-index:100;background:rgba(255,253,251,.84);backdrop-filter:blur(18px);border-bottom:1px solid rgba(234,216,202,.72)}
.header-inner{height:78px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand img{width:54px;height:44px;object-fit:contain}
.brand-copy{display:grid;line-height:1.12}
.brand-copy strong{font-size:.97rem;letter-spacing:.01em}
.brand-copy span{font-size:.72rem;color:var(--muted)}
.desktop-nav{display:flex;align-items:center;gap:5px}
.nav-link{padding:9px 11px;border-radius:999px;font-size:.88rem;font-weight:700;color:#4b3b31}
.nav-link:hover,.nav-link.active{background:var(--surface-2);color:var(--accent-dark)}
.header-actions{display:flex;align-items:center;gap:8px}
.icon-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:#fff;display:grid;place-items:center;color:var(--ink);font-weight:800}
.lang-switch{display:flex;align-items:center;border:1px solid var(--line);border-radius:999px;background:#fff;padding:3px;font-size:.78rem;font-weight:800}
.lang-switch a{padding:5px 8px;border-radius:999px;color:var(--muted)}
.lang-switch a[aria-current="page"]{background:var(--dark);color:#fff}
.menu-toggle{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:#fff;position:relative}
.menu-toggle span,.menu-toggle::before,.menu-toggle::after{content:"";position:absolute;left:12px;width:18px;height:2px;background:var(--ink);transition:.25s}
.menu-toggle::before{top:14px}.menu-toggle span{top:21px}.menu-toggle::after{top:28px}
.menu-toggle[aria-expanded="true"]::before{transform:translateY(7px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span{opacity:0}
.menu-toggle[aria-expanded="true"]::after{transform:translateY(-7px) rotate(-45deg)}
.mobile-panel{display:none}

.hero{padding:74px 0 80px;overflow:hidden;position:relative}
.hero::before{content:"";position:absolute;inset:auto -140px 20px auto;width:420px;height:420px;border:1px solid rgba(217,81,9,.14);border-radius:52% 48% 58% 42%;transform:rotate(18deg)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(340px,.72fr);gap:64px;align-items:center}
.hero-copy{position:relative;z-index:2}
.hero-copy .lead{margin-top:25px}
.hero-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.hero-tags span{padding:7px 11px;border-radius:999px;background:var(--surface-2);color:#674633;font-size:.76rem;font-weight:750}
.hero-note{display:flex;gap:12px;align-items:flex-start;margin-top:28px;padding-top:22px;border-top:1px solid var(--line);max-width:660px;color:var(--muted);font-size:.9rem}
.hero-note strong{color:var(--ink)}

.hero-visual{position:relative;min-height:560px;display:grid;place-items:center}
.hero-orbit{position:absolute;width:520px;height:520px;border-radius:50%;border:1px solid var(--line);animation:rotateSlow 28s linear infinite}
.hero-orbit::before,.hero-orbit::after{content:"";position:absolute;border-radius:50%;background:var(--accent)}
.hero-orbit::before{width:9px;height:9px;top:80px;right:42px;box-shadow:0 0 0 9px rgba(217,81,9,.08)}
.hero-orbit::after{width:6px;height:6px;bottom:88px;left:55px;box-shadow:0 0 0 7px rgba(217,81,9,.07)}
@keyframes rotateSlow{to{transform:rotate(360deg)}}
.phone{width:294px;border:9px solid var(--dark);border-radius:44px;background:#fff;box-shadow:0 40px 80px rgba(62,32,15,.24);padding:16px;position:relative;z-index:2;transform:rotate(2deg)}
.phone::before{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);width:74px;height:19px;border-radius:999px;background:var(--dark)}
.phone-screen{border-radius:29px;background:linear-gradient(180deg,#fffaf5,#fff);min-height:500px;padding:28px 15px 17px;overflow:hidden}
.phone-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.phone-logo{width:48px;height:48px;border-radius:15px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;overflow:hidden}
.phone-logo img{width:45px;height:38px;object-fit:contain}
.phone-pill{height:7px;width:58px;border-radius:999px;background:var(--surface-3)}
.phone-copy small{color:var(--accent-dark);font-weight:800}.phone-copy h3{font-size:1.35rem;line-height:1.2;margin:6px 0}.phone-copy p{font-size:.78rem;line-height:1.55;color:var(--muted);margin:0 0 16px}
.tool-mini{display:grid;gap:9px}
.tool-mini-item{display:flex;align-items:center;gap:11px;padding:11px;border:1px solid var(--line);background:#fff;border-radius:15px;box-shadow:0 7px 18px rgba(73,39,19,.05)}
.tool-mini-icon{width:35px;height:35px;border-radius:11px;background:var(--surface-2);display:grid;place-items:center;color:var(--accent-dark);font-weight:900}
.tool-mini-text{display:grid}.tool-mini-text strong{font-size:.8rem}.tool-mini-text span{font-size:.68rem;color:var(--muted)}
.phone-bottom{display:flex;justify-content:space-around;margin-top:16px;padding-top:12px;border-top:1px solid var(--line);font-size:.65rem;color:var(--muted)}
.floating-card{position:absolute;z-index:3;background:rgba(255,255,255,.91);backdrop-filter:blur(12px);border:1px solid rgba(234,216,202,.9);box-shadow:var(--shadow-sm);border-radius:17px;padding:14px 16px;max-width:190px}
.floating-card strong{display:block;font-size:.86rem}.floating-card span{font-size:.72rem;color:var(--muted)}
.floating-card.one{left:0;top:95px;transform:rotate(-5deg)}
.floating-card.two{right:-20px;bottom:93px;transform:rotate(4deg)}

.intro-strip{border-block:1px solid var(--line);background:rgba(255,255,255,.7)}
.intro-grid{display:grid;grid-template-columns:1.15fr repeat(3,.62fr);gap:24px;align-items:center;padding:28px 0}
.intro-title{font-size:1.08rem;font-weight:850;line-height:1.45}
.stat{border-left:1px solid var(--line);padding-left:24px}
.stat strong{display:block;font-size:1.38rem;color:var(--accent-dark)}
.stat span{font-size:.78rem;color:var(--muted)}

.section-head{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:44px}
.section-head>div:first-child{max-width:780px}
.section-head .lead{margin:0}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.path-card{padding:28px;border:1px solid var(--line);border-radius:var(--radius);background:rgba(255,255,255,.78);box-shadow:0 16px 42px rgba(73,39,19,.05);position:relative;overflow:hidden;min-height:350px;display:flex;flex-direction:column}
.path-card::after{content:"";width:160px;height:160px;border-radius:50%;position:absolute;right:-75px;top:-82px;background:var(--surface-2)}
.path-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm);transition:.25s}
.card-no{font-size:.75rem;font-weight:850;color:var(--accent-dark);letter-spacing:.12em;position:relative;z-index:1}
.path-icon{width:54px;height:54px;margin:22px 0;border-radius:17px;background:var(--surface-2);display:grid;place-items:center;color:var(--accent-dark)}
.path-card p{color:var(--muted)}
.clean-list{list-style:none;margin:14px 0 22px;padding:0;display:grid;gap:8px;color:#4f3d31;font-size:.9rem}
.clean-list li{display:flex;gap:9px;align-items:flex-start}
.clean-list li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);margin-top:.72em;flex:0 0 auto}
.text-link{display:inline-flex;align-items:center;gap:8px;margin-top:auto;font-weight:820;color:var(--accent-dark)}
.text-link svg{transition:transform .2s}.text-link:hover svg{transform:translateX(4px)}

.split{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:70px;align-items:center}
.story-panel{background:var(--dark);color:#fff;border-radius:36px;padding:40px;position:relative;overflow:hidden;min-height:500px;display:flex;flex-direction:column;justify-content:space-between}
.story-panel::before{content:"";position:absolute;right:-110px;top:-110px;width:300px;height:300px;border:1px solid rgba(255,255,255,.14);border-radius:50%}
.story-panel::after{content:"";position:absolute;right:40px;bottom:40px;width:110px;height:110px;border:1px solid rgba(246,199,168,.28);border-radius:44% 56% 58% 42%;transform:rotate(18deg)}
.story-quote{font-size:clamp(1.8rem,3.4vw,3rem);line-height:1.22;letter-spacing:-.025em;max-width:520px;position:relative;z-index:1}
.story-meta{position:relative;z-index:1;color:rgba(255,255,255,.72);font-size:.86rem}
.story-meta strong{display:block;color:#fff;font-size:1rem;margin-bottom:5px}
.badge-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.badge{padding:7px 10px;border-radius:999px;background:var(--surface-2);color:#5b3a27;font-size:.76rem;font-weight:760}

.method-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:42px}
.method-card{padding:24px 19px;border:1px solid rgba(255,255,255,.15);border-radius:22px;background:rgba(255,255,255,.055);min-height:240px;position:relative}
.method-card::before{content:attr(data-step);font-size:.7rem;letter-spacing:.12em;font-weight:850;color:#f5b184}
.method-card h3{font-size:1.18rem;margin:17px 0 9px}.method-card p{font-size:.86rem;color:rgba(255,255,255,.67);margin:0}

.tools-grid{display:grid;grid-template-columns:1.25fr .75fr .75fr;grid-template-rows:auto auto;gap:18px}
.tool-card{border:1px solid var(--line);border-radius:26px;background:#fff;padding:26px;min-height:240px;position:relative;overflow:hidden;display:flex;flex-direction:column}
.tool-card.featured{grid-row:span 2;min-height:510px;background:linear-gradient(155deg,var(--dark),var(--dark-2));color:#fff;border-color:transparent}
.tool-card.featured .muted{color:rgba(255,255,255,.7)}
.tool-card .tool-number{font-size:.72rem;font-weight:850;letter-spacing:.15em;color:var(--accent-dark)}
.tool-card.featured .tool-number{color:#f5b184}
.tool-card h3{font-size:1.48rem;margin:17px 0 10px}
.tool-card p{color:var(--muted);font-size:.9rem;margin:0 0 20px}
.tool-card .text-link{margin-top:auto}
.tool-visual{margin-top:auto;border-radius:22px;background:linear-gradient(135deg,#fff2e9,#f0c4a6);height:210px;padding:18px;display:grid;place-items:center;position:relative;overflow:hidden}
.tool-visual::before,.tool-visual::after{content:"";position:absolute;border:1px solid rgba(165,59,8,.18);border-radius:50%}
.tool-visual::before{width:180px;height:180px;left:-80px;bottom:-90px}.tool-visual::after{width:130px;height:130px;right:-50px;top:-60px}
.card-stack{position:relative;width:150px;height:130px}.mini-card{position:absolute;width:112px;height:146px;border-radius:15px;background:#fff;box-shadow:0 16px 30px rgba(60,30,12,.18);border:1px solid rgba(217,81,9,.14);padding:12px;display:flex;align-items:flex-end;font-size:.68rem;font-weight:800;color:var(--accent-dark)}
.mini-card:nth-child(1){transform:rotate(-10deg);left:2px;top:3px}.mini-card:nth-child(2){transform:rotate(8deg);right:0;top:0;background:#fff8f2}

.timeline{display:grid;gap:15px;margin-top:38px}
.timeline-row{display:grid;grid-template-columns:165px 1fr auto;gap:24px;align-items:center;padding:24px 26px;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.72)}
.timeline-level{font-size:.75rem;letter-spacing:.13em;font-weight:900;color:var(--accent-dark)}
.timeline-copy h3{margin:0 0 5px}.timeline-copy p{margin:0;color:var(--muted);font-size:.9rem}
.timeline-arrow{width:40px;height:40px;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;color:var(--accent-dark)}

.partner-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:34px}
.partner-card{padding:22px;border:1px solid var(--line);border-radius:20px;background:#fff;min-height:170px}
.partner-card svg{color:var(--accent-dark);margin-bottom:18px}.partner-card h3{font-size:1.02rem}.partner-card p{font-size:.82rem;color:var(--muted);margin:0}

.loop-wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:center}
.loop-diagram{background:var(--surface);border:1px solid var(--line);border-radius:36px;padding:26px;box-shadow:var(--shadow-sm)}
.loop-item{display:grid;grid-template-columns:42px 1fr;gap:13px;align-items:start;padding:15px 4px}
.loop-item+.loop-item{border-top:1px solid var(--line)}
.loop-no{width:34px;height:34px;border-radius:50%;background:var(--dark);color:#fff;display:grid;place-items:center;font-size:.75rem;font-weight:850}
.loop-item strong{display:block}.loop-item span{font-size:.82rem;color:var(--muted)}

.quote-block{display:grid;grid-template-columns:1fr .52fr;gap:40px;align-items:end;position:relative;z-index:1}
.quote-block blockquote{font-size:clamp(2.1rem,5vw,4.6rem);line-height:1.08;letter-spacing:-.04em;margin:0}
.quote-block p{color:rgba(255,255,255,.7);margin:0}

.faq-list{display:grid;gap:10px;max-width:880px;margin:38px auto 0}
.faq-item{border:1px solid var(--line);border-radius:18px;background:#fff;overflow:hidden}
.faq-q{width:100%;border:0;background:#fff;color:var(--ink);display:flex;justify-content:space-between;gap:18px;text-align:left;padding:20px 22px;font-weight:800}
.faq-q span:last-child{font-size:1.3rem;color:var(--accent-dark);transition:transform .2s}
.faq-q[aria-expanded="true"] span:last-child{transform:rotate(45deg)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease}
.faq-a>div{overflow:hidden}
.faq-q[aria-expanded="true"]+.faq-a{grid-template-rows:1fr}
.faq-a p{margin:0;padding:0 22px 21px;color:var(--muted)}

.contact-card{background:linear-gradient(145deg,var(--surface-2),#fff);border:1px solid var(--line);border-radius:38px;padding:54px;display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;position:relative;overflow:hidden}
.contact-card::after{content:"";position:absolute;width:240px;height:240px;border-radius:50%;border:1px solid rgba(217,81,9,.13);right:-95px;bottom:-135px}
.contact-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;position:relative;z-index:1}

.site-footer{background:#17110d;color:#fff;padding:58px 0 28px}
.footer-grid{display:grid;grid-template-columns:1.2fr .7fr .7fr;gap:52px}
.footer-brand{display:flex;align-items:center;gap:14px}.footer-brand img{width:64px;height:54px;object-fit:contain;background:#fff;border-radius:14px;padding:4px}
.footer-brand strong{display:block}.footer-brand span{font-size:.78rem;color:rgba(255,255,255,.62)}
.footer-copy{color:rgba(255,255,255,.62);max-width:510px;font-size:.86rem;margin-top:18px}
.footer-title{font-size:.75rem;color:#f5b184;font-weight:850;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px}
.footer-links{display:grid;gap:9px;font-size:.85rem;color:rgba(255,255,255,.76)}
.footer-links a:hover{color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:42px;padding-top:20px;display:flex;justify-content:space-between;gap:20px;color:rgba(255,255,255,.52);font-size:.74rem}

.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}
.reveal.is-visible{opacity:1;transform:none}

@media (max-width:1050px){
  .desktop-nav{display:none}.menu-toggle{display:block}.header-actions .btn{display:none}
  .mobile-panel{display:block;position:fixed;inset:78px 0 auto 0;background:rgba(255,253,251,.98);backdrop-filter:blur(18px);border-bottom:1px solid var(--line);padding:18px 20px 28px;transform:translateY(-120%);opacity:0;pointer-events:none;transition:.25s;max-height:calc(100vh - 78px);overflow:auto}
  .mobile-panel.open{transform:none;opacity:1;pointer-events:auto}
  .mobile-nav{display:grid;gap:6px}.mobile-nav a{padding:13px 14px;border-radius:14px;font-weight:800}.mobile-nav a:hover{background:var(--surface-2)}
  .mobile-tools{display:flex;gap:8px;align-items:center;border-top:1px solid var(--line);margin-top:14px;padding-top:16px}.mobile-tools .btn{flex:1}
  .hero-grid{grid-template-columns:1fr .78fr;gap:30px}.hero-visual{min-height:510px}.hero-orbit{width:430px;height:430px}.phone{width:270px}.floating-card.one{left:-30px}.floating-card.two{right:-20px}
  .intro-grid{grid-template-columns:1fr repeat(3,.5fr)}
  .method-grid{grid-template-columns:repeat(3,1fr)}
  .tools-grid{grid-template-columns:1fr 1fr}.tool-card.featured{grid-row:span 1;grid-column:span 2;min-height:430px}.tool-visual{height:170px}
  .partner-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:780px){
  html{scroll-padding-top:76px}.container{width:min(calc(100% - 28px),var(--max))}.section{padding:78px 0}.section-sm{padding:56px 0}
  .header-inner{height:72px}.mobile-panel{inset:72px 0 auto}.brand img{width:46px;height:38px}.brand-copy span{display:none}.header-actions .lang-switch{display:none}
  .hero{padding:44px 0 58px}.hero-grid{grid-template-columns:1fr}.hero-copy{text-align:left}.display{font-size:clamp(2.65rem,13vw,4.2rem)}.hero-copy .lead{font-size:1rem}.hero-visual{min-height:470px;margin-top:10px}.hero-orbit{width:390px;height:390px}.phone{width:266px;transform:none}.floating-card.one{left:0;top:55px}.floating-card.two{right:0;bottom:45px}
  .intro-grid{grid-template-columns:1fr 1fr;padding:22px 0}.intro-title{grid-column:1/-1}.stat{padding-left:0;border-left:0;border-top:1px solid var(--line);padding-top:14px}.stat:last-child{grid-column:1/-1}
  .section-head{display:block;margin-bottom:30px}.section-head .lead{margin-top:12px}
  .grid-3{grid-template-columns:1fr}.path-card{min-height:0}
  .split{grid-template-columns:1fr;gap:34px}.story-panel{min-height:420px;padding:30px;border-radius:28px}
  .method-grid{grid-template-columns:1fr 1fr}.method-card{min-height:210px}.method-card:last-child{grid-column:1/-1}
  .tools-grid{grid-template-columns:1fr}.tool-card.featured{grid-column:span 1;min-height:440px}.tool-card{min-height:230px}
  .timeline-row{grid-template-columns:1fr auto;gap:12px}.timeline-level{grid-column:1/-1}.timeline-arrow{grid-column:2;grid-row:2}.timeline-copy{grid-column:1;grid-row:2}
  .loop-wrap{grid-template-columns:1fr;gap:32px}.quote-block{grid-template-columns:1fr;gap:24px}
  .contact-card{padding:34px 24px;grid-template-columns:1fr;border-radius:28px}.contact-actions{justify-content:flex-start}
  .footer-grid{grid-template-columns:1fr;gap:30px}.footer-bottom{display:block}.footer-bottom span{display:block;margin-top:5px}
}

@media (max-width:500px){
  .header-actions{gap:5px}.icon-btn{display:none}.display{font-size:2.75rem}.h2{font-size:2.2rem}.btn-row{display:grid}.btn{width:100%}
  .hero-tags{gap:6px}.hero-tags span{font-size:.7rem}.hero-visual{min-height:410px}.hero-orbit{width:335px;height:335px}.phone{width:238px;border-width:7px;border-radius:37px;padding:12px}.phone-screen{min-height:430px}.floating-card{padding:10px 12px;max-width:145px}.floating-card span{display:none}.floating-card.one{top:35px}.floating-card.two{bottom:20px}
  .method-grid{grid-template-columns:1fr}.method-card:last-child{grid-column:auto}.partner-grid{grid-template-columns:1fr}.timeline-row{padding:20px}.contact-actions{display:grid}.contact-actions .btn{width:100%}
  .footer-brand img{width:56px;height:48px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
}

/* =========================================================
   V2.1 brand, accessibility and social-impact refinements
   ========================================================= */
:root{
  --bg:#fffdf9;
  --surface:#fff8f2;
  --surface-2:#fde9da;
  --surface-3:#f5cfb8;
  --ink:#2b1b13;
  --muted:#705a4c;
  --line:#efd2bf;
  --accent:#d55412;
  --accent-dark:#9d3b0d;
  --accent-deep:#7d2f0b;
  --accent-soft:#f6cdb7;
  --dark:#9d3b0d;
  --dark-2:#d55412;
  --shadow:0 24px 70px rgba(145,58,16,.11);
  --shadow-sm:0 12px 34px rgba(145,58,16,.09);
}

::selection{background:var(--accent-soft);color:var(--ink)}
.skip-link{background:var(--accent-dark)}
.section-dark{background:linear-gradient(145deg,var(--accent-deep),var(--accent));color:#fff}
.section-dark::before,.section-dark::after{border-color:rgba(255,238,226,.24)}
.section-dark .eyebrow{color:#ffe2cf}
.section-dark .lead,.section-dark .muted{color:rgba(255,255,255,.82)}
.lang-switch a[aria-current="page"]{background:var(--accent);color:#fff}

.site-header{background:rgba(255,253,249,.92)}
.header-inner{height:90px}
.brand{flex:0 0 auto}
.brand img{width:82px;height:82px;object-fit:contain;border-radius:14px}
.desktop-nav{margin-left:auto}
.phone{border-color:var(--accent-dark);box-shadow:0 38px 78px rgba(139,54,12,.22);animation:phoneBreathe 5.8s ease-in-out infinite}
.phone::before{background:var(--accent-dark)}
.phone-logo{width:50px;height:50px;border-radius:14px;padding:2px}
.phone-logo img{width:46px;height:46px;object-fit:contain}
@keyframes phoneBreathe{0%,100%{transform:rotate(1.5deg) translateY(0)}50%{transform:rotate(.2deg) translateY(-7px)}}

.hero{padding-top:62px}
.hero-eyebrow{display:flex;flex-wrap:wrap;row-gap:6px;letter-spacing:.11em}
.hero-eyebrow span{padding-left:10px;border-left:1px solid var(--accent-soft);font-weight:750;letter-spacing:.045em;text-transform:none;color:var(--muted)}
.hero-copy .display{max-width:850px}
.hero-orbit{border-color:rgba(213,84,18,.22)}

.thought-bubble{position:absolute;z-index:4;max-width:205px;padding:13px 15px;background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-sm);backdrop-filter:blur(10px);animation:bubbleFloat 5.4s ease-in-out infinite}
.thought-bubble::after{content:"";position:absolute;width:12px;height:12px;background:#fff;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transform:rotate(45deg)}
.thought-bubble strong{display:block;font-size:.84rem;line-height:1.45;color:var(--ink)}
.thought-bubble span{display:block;margin-top:3px;font-size:.7rem;line-height:1.5;color:var(--muted)}
.bubble-one{left:-28px;top:72px;transform:rotate(-3deg);animation-delay:-.8s}
.bubble-one::after{right:24px;bottom:-7px}
.bubble-two{right:-46px;top:220px;transform:rotate(3deg);animation-delay:-2.2s}
.bubble-two::after{left:22px;bottom:-7px}
.bubble-three{left:-12px;bottom:76px;transform:rotate(-2deg);animation-delay:-3.6s}
.bubble-three::after{right:20px;top:-7px;transform:rotate(225deg)}
@keyframes bubbleFloat{0%,100%{margin-top:0}50%{margin-top:-8px}}

.access-chips{position:absolute;z-index:5;right:-20px;bottom:30px;display:grid;gap:7px}
.access-chips span{display:block;padding:7px 11px;border-radius:999px;background:#fff8f2;border:1px solid var(--accent-soft);box-shadow:0 7px 18px rgba(145,58,16,.08);color:var(--accent-dark);font-size:.68rem;font-weight:850;text-align:center}
.tool-mini-item{animation:toolLift 4.8s ease-in-out infinite}
.tool-mini-item:nth-child(2){animation-delay:-1.1s}.tool-mini-item:nth-child(3){animation-delay:-2.2s}.tool-mini-item:nth-child(4){animation-delay:-3.3s}
@keyframes toolLift{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}

.story-panel{background:linear-gradient(150deg,var(--accent-deep),var(--accent));box-shadow:0 24px 60px rgba(145,58,16,.18)}
.story-panel::after{border-color:rgba(255,233,217,.38)}
.credential-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:26px}
.credential{padding:15px 16px;background:#fff;border:1px solid var(--line);border-radius:17px}
.credential strong{display:block;color:var(--accent-dark);font-size:.88rem}
.credential span{display:block;margin-top:4px;color:var(--muted);font-size:.76rem;line-height:1.5}

.section-warm{background:linear-gradient(180deg,#fff5ed 0%,#fde7d6 100%);color:var(--ink);overflow:hidden}
.section-warm::before{content:"";position:absolute;width:520px;height:520px;border:1px solid rgba(213,84,18,.13);border-radius:50%;right:-260px;top:-260px}
.section-warm .lead,.section-warm .muted{color:var(--muted)}
.section-warm .eyebrow{color:var(--accent-dark)}
.section-warm .method-card{background:rgba(255,255,255,.72);border-color:rgba(213,84,18,.15);box-shadow:0 12px 30px rgba(145,58,16,.06)}
.section-warm .method-card::before{color:var(--accent-dark)}
.section-warm .method-card h3{color:var(--ink)}
.section-warm .method-card p{color:var(--muted)}

.impact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:34px}
.impact-card{padding:25px 22px;border:1px solid var(--line);border-radius:23px;background:#fff;min-height:285px;position:relative;overflow:hidden}
.impact-card::after{content:"";position:absolute;width:100px;height:100px;border:1px solid rgba(213,84,18,.12);border-radius:50%;right:-50px;bottom:-50px}
.impact-card>span{display:inline-grid;place-items:center;width:35px;height:35px;border-radius:50%;background:var(--surface-2);color:var(--accent-dark);font-size:.72rem;font-weight:900}
.impact-card h3{font-size:1.08rem;line-height:1.35;margin:18px 0 9px}
.impact-card p{margin:0;color:var(--muted);font-size:.84rem;line-height:1.7}
.opportunity-panel,.training-access{display:grid;grid-template-columns:.82fr 1.18fr;gap:40px;align-items:center;margin-top:28px;padding:30px 32px;border:1px solid var(--accent-soft);border-radius:26px;background:linear-gradient(135deg,#fff7f1,#fbe2d1)}
.opportunity-panel p,.training-access>p{margin:0;color:var(--muted)}
.clinical-note{margin:22px 0 0;padding-left:15px;border-left:3px solid var(--accent-soft);color:var(--muted);font-size:.78rem}
.training-access{margin-top:35px}

.tool-card.featured{background:linear-gradient(150deg,var(--accent-deep),var(--accent));box-shadow:0 22px 55px rgba(145,58,16,.16)}
.tool-card.featured .tool-number{color:#ffe1cc}
.loop-no{background:var(--accent);color:#fff}
.contact-card{background:linear-gradient(145deg,#fde8d8,#fffaf6)}

.site-footer{background:linear-gradient(180deg,#fff5ed,#fde5d3);color:var(--ink);border-top:1px solid var(--line);padding-top:46px}
.footer-grid{grid-template-columns:1.2fr .7fr .8fr}
.footer-brand{display:block}
.footer-brand img{width:132px;height:132px;object-fit:contain;background:#fff;border-radius:22px;padding:5px;border:1px solid var(--line)}
.footer-copy{color:var(--muted);margin-top:14px}
.footer-title{color:var(--accent-dark)}
.footer-links{color:var(--muted)}
.footer-links a:hover{color:var(--accent-dark)}
.footer-bottom{border-color:rgba(157,59,13,.16);color:#8a6b58}
.footer-disclaimer{color:#927461;font-size:.7rem;margin:18px 0 0}

@media (max-width:1050px){
  .header-inner{height:82px}.mobile-panel{inset:82px 0 auto 0;max-height:calc(100vh - 82px)}
  .brand img{width:72px;height:72px}
  .bubble-one{left:-12px}.bubble-two{right:-22px}.bubble-three{left:0}.access-chips{right:-5px}
  .impact-grid{grid-template-columns:1fr 1fr}
}

@media (max-width:780px){
  .header-inner{height:72px}.mobile-panel{inset:72px 0 auto}.brand img{width:62px;height:62px}
  .hero-eyebrow span{width:100%;padding-left:0;border-left:0}
  .hero-visual{min-height:545px}.phone{width:262px}
  .bubble-one{left:0;top:30px}.bubble-two{right:0;top:225px}.bubble-three{left:0;bottom:30px}
  .access-chips{right:0;bottom:5px;display:flex;flex-wrap:wrap;justify-content:flex-end;max-width:240px}
  .credential-grid{grid-template-columns:1fr}
  .impact-grid{grid-template-columns:1fr 1fr}
  .opportunity-panel,.training-access{grid-template-columns:1fr;gap:10px;padding:25px 23px}
  .footer-brand img{width:118px;height:118px}
}

@media (max-width:500px){
  .hero-visual{min-height:525px}.phone{width:232px}
  .thought-bubble{max-width:148px;padding:9px 11px}.thought-bubble strong{font-size:.72rem}.thought-bubble span{font-size:.62rem}
  .bubble-one{top:12px}.bubble-two{top:215px;right:-2px}.bubble-three{left:-2px;bottom:40px}
  .access-chips{bottom:-4px;max-width:100%;justify-content:center}.access-chips span{font-size:.61rem;padding:5px 8px}
  .impact-grid{grid-template-columns:1fr}.impact-card{min-height:0}
  .footer-grid{grid-template-columns:1fr}.footer-brand img{width:108px;height:108px}
}

@media (prefers-reduced-motion:reduce){
  .phone,.thought-bubble,.tool-mini-item{animation:none!important}
}

/* =========================================================
   V2.2 visual clarity, icons and lightweight motion
   ========================================================= */
.inline-icon{width:22px;height:22px;display:block;flex:0 0 auto}
.button-icon{width:18px;height:18px}

/* Compact accessibility controls */
.font-control{display:inline-flex;align-items:center;height:30px;padding:2px;border:1px solid var(--line);border-radius:999px;background:#fff;box-shadow:0 4px 14px rgba(145,58,16,.05)}
.font-control .icon-btn{width:25px;height:24px;border:0;border-radius:999px;background:transparent;font-size:.66rem;line-height:1;color:var(--muted);font-weight:850}
.font-control .icon-btn:hover{background:var(--surface-2);color:var(--accent-dark)}
.header-cta{min-height:39px;padding:8px 14px;font-size:.78rem;box-shadow:0 8px 18px rgba(213,84,18,.16)}
.mobile-tools .font-control{flex:0 0 auto}
.mobile-tools .btn{min-height:39px;padding:8px 14px;font-size:.78rem}

/* A neutral black phone frame, while the interface remains in OM colours */
.phone{border-color:#171717;box-shadow:0 38px 78px rgba(20,20,20,.22)}
.phone::before{background:#171717}

/* Three-way visual map */
.pathway-map-wrap{position:relative;border-block:1px solid var(--line);background:linear-gradient(90deg,#fffdf9,#fff6ee 52%,#fffdf9);overflow:hidden}
.pathway-map-wrap::before{content:"";position:absolute;inset:50% -8% auto;height:1px;background:linear-gradient(90deg,transparent,var(--accent-soft) 15%,var(--accent) 50%,var(--accent-soft) 85%,transparent);opacity:.75}
.pathway-map{display:grid;grid-template-columns:1.1fr .82fr 34px .82fr 34px .82fr;gap:14px;align-items:center;padding:26px 0;position:relative;z-index:1}
.pathway-map-title span{display:block;color:var(--accent);font-size:.67rem;font-weight:900;letter-spacing:.18em}
.pathway-map-title strong{display:block;margin-top:4px;font-size:1.12rem;line-height:1.35}
.pathway-node{display:flex;align-items:center;gap:11px;padding:12px 13px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.93);box-shadow:0 10px 26px rgba(145,58,16,.06);transition:transform .22s,border-color .22s,box-shadow .22s}
.pathway-node:hover{transform:translateY(-3px);border-color:var(--accent-soft);box-shadow:0 15px 32px rgba(145,58,16,.1)}
.pathway-node .node-icon{width:39px;height:39px;border-radius:13px;background:var(--surface-2);color:var(--accent-dark);display:grid;place-items:center;flex:0 0 auto}
.pathway-node .node-icon svg{width:21px;height:21px}
.pathway-node strong,.pathway-node small{display:block}
.pathway-node strong{font-size:.85rem}
.pathway-node small{margin-top:2px;color:var(--muted);font-size:.68rem;line-height:1.35}
.pathway-pulse{position:relative;width:34px;height:16px}
.pathway-pulse::before{content:"";position:absolute;inset:7px 0 auto;height:2px;background:var(--accent-soft)}
.pathway-pulse::after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;top:4px;left:0;background:var(--accent);box-shadow:0 0 0 6px rgba(213,84,18,.08);animation:pathPulse 2.8s ease-in-out infinite}
@keyframes pathPulse{0%{left:0;opacity:.25}45%{opacity:1}100%{left:27px;opacity:.25}}

/* Sound-wave divider */
.sound-wave-divider{height:68px;display:flex;align-items:center;justify-content:center;gap:7px;overflow:hidden;color:var(--accent)}
.sound-wave-divider::before,.sound-wave-divider::after{content:"";width:min(20vw,210px);height:1px;background:linear-gradient(90deg,transparent,var(--line))}
.sound-wave-divider::after{transform:scaleX(-1)}
.sound-wave-divider i{display:block;width:3px;border-radius:999px;background:currentColor;opacity:.56;animation:waveBeat 2.2s ease-in-out infinite}
.sound-wave-divider i:nth-child(1),.sound-wave-divider i:nth-child(11){height:10px}
.sound-wave-divider i:nth-child(2),.sound-wave-divider i:nth-child(10){height:18px;animation-delay:-.2s}
.sound-wave-divider i:nth-child(3),.sound-wave-divider i:nth-child(9){height:30px;animation-delay:-.4s}
.sound-wave-divider i:nth-child(4),.sound-wave-divider i:nth-child(8){height:19px;animation-delay:-.6s}
.sound-wave-divider i:nth-child(5),.sound-wave-divider i:nth-child(7){height:40px;animation-delay:-.8s}
.sound-wave-divider i:nth-child(6){height:24px;animation-delay:-1s}
@keyframes waveBeat{0%,100%{transform:scaleY(.55);opacity:.35}50%{transform:scaleY(1);opacity:.8}}

/* Lighter brand evolution panel */
.story-panel{background:linear-gradient(145deg,#fff6ef,#fde1cf);color:var(--ink);border:1px solid var(--line);box-shadow:0 20px 55px rgba(145,58,16,.08)}
.story-panel::before{border-color:rgba(213,84,18,.12)}
.story-panel::after{border-color:rgba(213,84,18,.22)}
.story-panel .kicker{color:var(--accent-dark)}
.story-meta{color:var(--muted)}
.story-meta strong{color:var(--ink)}

/* More recognisable icon language */
.impact-icon,.tool-icon,.experience-icon,.step-icon{display:grid;place-items:center;color:var(--accent-dark);background:var(--surface-2);border:1px solid rgba(213,84,18,.12)}
.impact-card .impact-icon{width:46px;height:46px;border-radius:16px}
.impact-icon svg{width:24px;height:24px}
.tool-title-row{display:flex;align-items:flex-start;gap:13px;margin:15px 0 6px}
.tool-title-row h3{margin:0 0 6px}
.tool-title-row p{margin:0}
.tool-icon{width:43px;height:43px;border-radius:14px;flex:0 0 auto}
.tool-icon svg{width:23px;height:23px}
.small-tool-heading{display:flex;align-items:center;gap:12px;margin:15px 0 10px}
.small-tool-heading h3{margin:0}
.experience-icon{width:48px;height:48px;border-radius:16px;margin-top:22px}
.experience-icon svg{width:25px;height:25px}
.status-badge{display:inline-flex;width:max-content;margin:15px 0 0;padding:5px 9px;border-radius:999px;background:#fff1e6;color:var(--accent-dark);border:1px solid var(--accent-soft);font-size:.65rem;font-weight:900;letter-spacing:.08em}

/* App-like Subtraction Card feature */
.tool-card.featured{grid-row:span 2;display:grid;grid-template-columns:minmax(0,.9fr) minmax(280px,1.1fr);gap:28px;align-items:center;min-height:540px;background:linear-gradient(145deg,#fff8f2,#fbdcc7);color:var(--ink);border-color:var(--line);box-shadow:0 22px 55px rgba(145,58,16,.1)}
.tool-card.featured::after{content:"";position:absolute;width:260px;height:260px;border:1px solid rgba(213,84,18,.14);border-radius:50%;right:-130px;top:-130px}
.tool-card.featured .tool-number{color:var(--accent-dark)}
.tool-card.featured .muted{color:var(--muted)}
.tool-card.featured .clean-list{color:#4f3d31}
.tool-card.featured .text-link{color:var(--accent-dark);margin-top:22px}
.featured-copy{position:relative;z-index:2}
.card-app-demo{position:relative;z-index:2;max-width:360px;justify-self:end;width:100%;padding:16px;border:1px solid rgba(213,84,18,.18);border-radius:28px;background:rgba(255,255,255,.92);box-shadow:0 24px 48px rgba(116,53,18,.14);transform:rotate(1.2deg);animation:cardAppFloat 5.8s ease-in-out infinite}
@keyframes cardAppFloat{0%,100%{transform:rotate(1.2deg) translateY(0)}50%{transform:rotate(.2deg) translateY(-6px)}}
.card-app-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin-bottom:13px;color:var(--muted);font-size:.7rem}
.card-app-bar>span{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:15px 0 0 var(--accent-soft)}
.card-app-bar strong{text-align:center;color:var(--ink);font-size:.78rem}
.card-app-bar b{text-align:right;letter-spacing:.12em}
.card-app-demo>p{font-size:.78rem;margin:0 0 9px;color:var(--muted)}
.emotion-chips{display:flex;flex-wrap:wrap;gap:6px}
.emotion-chips span{padding:5px 8px;border-radius:999px;background:#fff5ee;border:1px solid var(--line);color:var(--muted);font-size:.64rem;font-weight:750}
.emotion-chips .active{background:var(--accent);border-color:var(--accent);color:#fff}
.draw-stage{position:relative;height:250px;margin:12px 0 15px;display:grid;place-items:center;perspective:800px}
.draw-card{position:absolute;width:164px;height:222px;border-radius:20px;box-shadow:0 20px 38px rgba(80,39,15,.15)}
.card-back{display:grid;place-items:center;background:linear-gradient(145deg,var(--accent),var(--accent-dark));border:5px solid #fff5ed;color:#fff;font-size:2.2rem;font-weight:900;letter-spacing:-.08em}
.card-back::before{content:"";position:absolute;inset:13px;border:1px solid rgba(255,255,255,.45);border-radius:13px}
.back-one{transform:translateX(-45px) rotate(-10deg);opacity:.62;animation:deckLeft 4.8s ease-in-out infinite}
.back-two{transform:translateX(45px) rotate(9deg);opacity:.78;animation:deckRight 4.8s ease-in-out infinite}
.card-front{z-index:2;padding:20px 17px;background:#fffdf9;border:1px solid var(--accent-soft);display:flex;flex-direction:column;justify-content:center;text-align:center;animation:frontCard 5.2s ease-in-out infinite}
.card-front::before{content:"";position:absolute;inset:9px;border:1px solid rgba(213,84,18,.15);border-radius:14px;pointer-events:none}
.card-front small{color:var(--accent);font-size:.62rem;font-weight:900;letter-spacing:.12em}
.card-front strong{margin:16px 0 14px;font-size:1.05rem;line-height:1.45}
.card-front span{color:var(--muted);font-size:.65rem;line-height:1.5}
@keyframes deckLeft{50%{transform:translateX(-51px) rotate(-13deg)}}
@keyframes deckRight{50%{transform:translateX(51px) rotate(12deg)}}
@keyframes frontCard{50%{transform:translateY(-5px) rotate(-.5deg)}}
.fake-draw-button{height:42px;border-radius:999px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;gap:8px;font-size:.78rem;font-weight:850;box-shadow:0 10px 22px rgba(213,84,18,.18)}
.fake-draw-button span svg{width:18px;height:18px}

/* Training staircase */
.training-staircase{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:end;margin:76px 0 44px;position:relative}
.training-staircase::before{content:"";position:absolute;left:5%;right:5%;bottom:0;height:1px;background:linear-gradient(90deg,var(--accent-soft),var(--accent),var(--accent-dark));opacity:.55}
.training-step{position:relative;padding:25px 24px;border:1px solid var(--line);border-radius:26px 26px 8px 8px;background:linear-gradient(160deg,#fff,#fff7f1);box-shadow:0 18px 45px rgba(145,58,16,.07);overflow:hidden}
.training-step::after{content:"";position:absolute;width:130px;height:130px;border:1px solid rgba(213,84,18,.12);border-radius:50%;right:-70px;top:-65px}
.step-one{min-height:270px}
.step-two{min-height:330px}
.step-three{min-height:390px;background:linear-gradient(160deg,#fff6ee,#fbdac3);border-color:var(--accent-soft)}
.step-top{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1}
.step-icon{width:48px;height:48px;border-radius:16px}
.step-icon svg{width:25px;height:25px}
.step-top b{font-size:2rem;line-height:1;color:rgba(213,84,18,.18)}
.step-label{display:block;margin:22px 0 10px;color:var(--accent-dark);font-size:.68rem;font-weight:900;letter-spacing:.1em}
.training-step h3{font-size:1.22rem;line-height:1.35;margin:0 0 11px}
.training-step p{margin:0;color:var(--muted);font-size:.84rem;line-height:1.7}
.training-step small{display:inline-flex;margin-top:22px;padding-top:12px;border-top:1px solid var(--line);color:var(--accent-dark);font-weight:800;font-size:.69rem}
.training-step+.training-step::before{content:"↗";position:absolute;left:-25px;bottom:32px;width:34px;height:34px;border-radius:50%;background:#fff;border:1px solid var(--line);display:grid;place-items:center;color:var(--accent);font-weight:900;z-index:3}
.training-use{padding:24px;border:1px solid var(--line);border-radius:24px;background:#fffaf6}

/* Contact and footer icon clarity */
.contact-actions .btn svg{width:19px;height:19px}
.footer-links a,.footer-address{display:flex;align-items:flex-start;gap:9px}
.footer-icon{width:17px;height:17px;flex:0 0 auto;margin-top:.18em;color:var(--accent-dark)}
.footer-address{line-height:1.6}

@media (max-width:1050px){
  .pathway-map{grid-template-columns:1fr 1fr 24px 1fr 24px 1fr}.pathway-map-title{grid-column:1/-1}.pathway-map-wrap::before{top:68%}
  .tool-card.featured{grid-column:span 2;grid-template-columns:1fr 1fr;min-height:500px}
}

@media (max-width:780px){
  .header-actions>.font-control{display:none}
  .mobile-tools .font-control{display:inline-flex}
  .pathway-map-wrap::before{display:none}
  .pathway-map{grid-template-columns:1fr;gap:9px;padding:22px 0}
  .pathway-map-title{margin-bottom:5px}
  .pathway-pulse{width:2px;height:18px;margin-left:20px}
  .pathway-pulse::before{inset:0 auto 0 0;width:2px;height:18px}
  .pathway-pulse::after{width:6px;height:6px;top:0;left:-2px;animation:pathPulseVertical 2.2s ease-in-out infinite}
  @keyframes pathPulseVertical{0%{top:0;opacity:.25}50%{opacity:1}100%{top:13px;opacity:.25}}
  .sound-wave-divider{height:52px;gap:5px}
  .sound-wave-divider::before,.sound-wave-divider::after{width:18vw}
  .tool-card.featured{grid-template-columns:1fr;gap:22px;min-height:0}
  .card-app-demo{justify-self:center;max-width:350px}
  .training-staircase{grid-template-columns:1fr;align-items:stretch;margin:38px 0 35px;padding-left:22px}
  .training-staircase::before{left:8px;right:auto;top:10px;bottom:10px;width:2px;height:auto;background:linear-gradient(var(--accent-soft),var(--accent),var(--accent-dark))}
  .training-step,.step-one,.step-two,.step-three{min-height:0;border-radius:22px}
  .training-step+.training-step::before{content:"↓";left:-31px;top:-24px;bottom:auto;width:28px;height:28px;font-size:.76rem}
}

@media (max-width:500px){
  .header-actions{gap:6px}.header-cta{display:none}
  .font-control .icon-btn{display:grid;width:25px}
  .mobile-tools{flex-wrap:wrap}.mobile-tools .font-control{order:1}.mobile-tools .btn{order:2}
  .pathway-node{padding:11px}.pathway-node .node-icon{width:36px;height:36px}
  .tool-card.featured{padding:22px}
  .card-app-demo{padding:13px;border-radius:24px}
  .draw-stage{height:225px}.draw-card{width:148px;height:202px}.card-front strong{font-size:.94rem}
  .training-step{padding:22px 20px}.step-top b{font-size:1.6rem}
}

@media (prefers-reduced-motion:reduce){
  .pathway-pulse::after,.sound-wave-divider i,.card-app-demo,.back-one,.back-two,.card-front{animation:none!important}
}

/* =========================================================
   V2.3 mobile stability fixes
   Prevent the illustrative phone and tools grid from creating
   implicit columns or excessive vertical growth on small screens.
   ========================================================= */

.tools-grid > *,
.hero-grid > *,
.tool-card,
.featured-copy,
.card-app-demo{
  min-width:0;
}

@media (max-width:780px){
  /* A one-column tools grid must not retain the desktop two-column span. */
  .tools-grid{
    grid-template-columns:minmax(0,1fr);
  }
  .tool-card.featured{
    grid-column:1 / -1;
    width:100%;
  }

  /* Keep the phone illustration compact and independent of A+/A- scaling. */
  .hero-visual{
    min-height:480px;
    width:100%;
    max-width:100%;
  }
  .hero-orbit{
    width:350px;
    height:350px;
  }
  .phone{
    width:224px;
    height:440px;
    padding:10px;
    border-width:7px;
    border-radius:36px;
    font-size:16px;
  }
  .phone::before{
    top:6px;
    width:60px;
    height:15px;
  }
  .phone-screen{
    height:100%;
    min-height:0;
    border-radius:24px;
    padding:23px 10px 9px;
    overflow:hidden;
  }
  .phone-head{
    margin-bottom:9px;
  }
  .phone-logo{
    width:36px;
    height:36px;
    border-radius:11px;
    padding:1px;
  }
  .phone-logo img{
    width:34px;
    height:34px;
  }
  .phone-pill{
    width:43px;
    height:5px;
  }
  .phone-copy small{
    font-size:9px;
    line-height:1.2;
    letter-spacing:.04em;
  }
  .phone-copy h3{
    margin:4px 0;
    font-size:20px;
    line-height:1.16;
  }
  .phone-copy p{
    margin:0 0 8px;
    font-size:10px;
    line-height:1.4;
  }
  .tool-mini{
    gap:6px;
  }
  .tool-mini-item{
    gap:7px;
    padding:7px;
    border-radius:11px;
  }
  .tool-mini-icon{
    width:28px;
    height:28px;
    border-radius:9px;
    font-size:12px;
    flex:0 0 auto;
  }
  .tool-mini-text strong{
    font-size:11px;
    line-height:1.25;
  }
  .tool-mini-text span{
    font-size:9px;
    line-height:1.35;
  }
  .phone-bottom{
    margin-top:8px;
    padding-top:7px;
    font-size:9px;
    line-height:1.2;
  }

  .thought-bubble{
    max-width:158px;
    padding:9px 11px;
    border-radius:15px;
  }
  .thought-bubble strong{
    font-size:12px;
    line-height:1.35;
  }
  .thought-bubble span{
    margin-top:2px;
    font-size:10px;
    line-height:1.35;
  }
  .bubble-one{
    left:0;
    top:42px;
  }
  .bubble-two{
    right:0;
    top:178px;
  }
  .bubble-three{
    left:2px;
    bottom:48px;
  }
  .access-chips{
    right:50%;
    bottom:5px;
    transform:translateX(50%);
    display:flex;
    gap:5px;
    width:max-content;
    max-width:100%;
  }
  .access-chips span{
    padding:5px 8px;
    font-size:9px;
    line-height:1.15;
    white-space:nowrap;
  }
}

@media (max-width:500px){
  .hero-visual{
    min-height:455px;
  }
  .hero-orbit{
    width:315px;
    height:315px;
  }
  .phone{
    width:214px;
    height:424px;
  }
  .thought-bubble{
    max-width:148px;
  }
  .bubble-one{top:33px}
  .bubble-two{top:164px}
  .bubble-three{bottom:44px}

  .tool-card,
  .tool-card.featured{
    width:100%;
    max-width:100%;
  }
  .card-app-demo{
    width:100%;
    max-width:330px;
  }
}

/* =========================================================
   V2.4 OM 隨行 main-site entry
   ========================================================= */
.app-entry-header{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:44px;
  padding:6px 12px 6px 8px;
  border:1px solid var(--accent-soft);
  border-radius:16px;
  background:#fff7f0;
  color:var(--accent-dark);
  box-shadow:0 8px 22px rgba(145,58,16,.08);
  transition:transform .2s ease,background .2s ease,border-color .2s ease;
}
.app-entry-header:hover{transform:translateY(-2px);background:#fff1e7;border-color:var(--accent)}
.app-entry-header-icon{
  width:32px;
  height:32px;
  border-radius:11px;
  display:grid;
  place-items:center;
  background:#fff;
  border:1px solid var(--line);
}
.app-entry-header-icon svg{width:18px;height:18px}
.app-entry-header strong,.app-entry-header small{display:block;white-space:nowrap}
.app-entry-header strong{font-size:.78rem;line-height:1.1}
.app-entry-header small{margin-top:3px;font-size:.56rem;color:var(--muted);font-weight:750;letter-spacing:.02em}

.mobile-app-entry{
  display:grid!important;
  grid-template-columns:42px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  margin-bottom:8px;
  padding:14px!important;
  border:1px solid var(--accent-soft);
  background:#fff4eb;
  color:var(--accent-dark);
}
.mobile-app-entry:hover{background:#ffeade!important}
.mobile-app-icon{
  width:42px;
  height:42px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:#fff;
  border:1px solid var(--line);
}
.mobile-app-icon svg{width:22px;height:22px}
.mobile-app-entry strong,.mobile-app-entry small{display:block}
.mobile-app-entry strong{font-size:.94rem}
.mobile-app-entry small{margin-top:3px;color:var(--muted);font-size:.7rem;line-height:1.4;font-weight:650}
.mobile-app-entry b{font-size:1.15rem}

.btn-app-launch{gap:8px}
.btn-app-launch>.inline-icon{width:19px;height:19px}
.hero-app-caption{
  margin:10px 0 0;
  color:var(--accent-dark);
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.025em;
}

.app-launch-strip{padding:0 0 28px;background:var(--bg)}
.app-launch-card{
  position:relative;
  display:grid;
  grid-template-columns:150px minmax(0,1fr) auto;
  align-items:center;
  gap:28px;
  padding:24px 28px;
  border:1px solid var(--line);
  border-radius:28px;
  background:#fff;
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.app-launch-card::after{
  content:"";
  position:absolute;
  width:230px;
  height:230px;
  border-radius:50%;
  border:1px solid rgba(213,84,18,.1);
  right:-110px;
  top:-145px;
  pointer-events:none;
}
.app-launch-visual{
  position:relative;
  min-height:116px;
  display:grid;
  place-items:center;
}
.app-launch-rings i{
  position:absolute;
  left:50%;
  top:45%;
  transform:translate(-50%,-50%);
  border:1px solid rgba(213,84,18,.2);
  border-radius:50%;
  animation:appEntryBreathe 5.8s ease-in-out infinite;
}
.app-launch-rings i:nth-child(1){width:64px;height:64px}
.app-launch-rings i:nth-child(2){width:94px;height:94px;animation-delay:-.8s}
.app-launch-rings i:nth-child(3){width:126px;height:126px;animation-delay:-1.6s}
.app-launch-logo{
  position:relative;
  z-index:2;
  width:58px;
  height:58px;
  padding:4px;
  border-radius:18px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 12px 28px rgba(145,58,16,.1);
}
.app-launch-logo img{width:100%;height:100%;object-fit:contain}
.app-launch-wave{
  position:absolute;
  left:2px;
  right:2px;
  bottom:0;
  width:100%;
  height:30px;
  color:var(--accent-soft);
  opacity:.85;
}
.app-launch-wave path{
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  animation:appWaveDrift 7s ease-in-out infinite;
}
.app-launch-copy{position:relative;z-index:1}
.app-launch-copy .eyebrow{margin-bottom:6px}
.app-launch-copy h2{margin:0;font-size:clamp(1.55rem,2.4vw,2.3rem);letter-spacing:-.035em;line-height:1.2}
.app-launch-copy>p:not(.eyebrow){margin:9px 0 0;max-width:720px;color:var(--muted);font-size:.9rem;line-height:1.7}
.app-launch-meta{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.app-launch-meta span{
  padding:5px 9px;
  border-radius:999px;
  background:var(--surface);
  border:1px solid var(--line);
  color:var(--accent-dark);
  font-size:.66rem;
  font-weight:850;
}
.app-launch-cta{position:relative;z-index:2;white-space:nowrap}
.footer-app-link{color:#fff!important;font-weight:850}
.footer-app-link svg{width:17px;height:17px;color:#f5b184}

@keyframes appEntryBreathe{
  0%,100%{transform:translate(-50%,-50%) scale(.85);opacity:.42}
  50%{transform:translate(-50%,-50%) scale(1.05);opacity:1}
}
@keyframes appWaveDrift{
  0%,100%{transform:translateX(-7px)}
  50%{transform:translateX(7px)}
}

@media (max-width:1180px){
  .app-entry-header small{display:none}
  .app-entry-header{padding-right:9px}
}
@media (max-width:1050px){
  .app-entry-header small{display:block}
  .app-launch-card{grid-template-columns:130px minmax(0,1fr) auto;gap:20px}
}
@media (max-width:780px){
  .app-entry-header{display:none}
  .app-launch-strip{padding-bottom:18px}
  .app-launch-card{grid-template-columns:96px minmax(0,1fr);padding:22px;border-radius:24px}
  .app-launch-visual{min-height:96px}
  .app-launch-rings i:nth-child(1){width:52px;height:52px}
  .app-launch-rings i:nth-child(2){width:76px;height:76px}
  .app-launch-rings i:nth-child(3){width:98px;height:98px}
  .app-launch-logo{width:50px;height:50px;border-radius:16px}
  .app-launch-cta{grid-column:1/-1;width:100%}
}
@media (max-width:500px){
  .app-launch-card{grid-template-columns:1fr;gap:14px;padding:22px 20px}
  .app-launch-visual{min-height:112px}
  .app-launch-copy{text-align:left}
  .app-launch-copy h2{font-size:1.65rem}
  .app-launch-meta{gap:6px}
  .hero-app-caption{font-size:.72rem}
}


/* V2.4.3 mobile header repair: keep only the icon and OM 隨行 / OM With You. */
@media (max-width:1050px){
  .site-header .app-entry-header{
    display:flex;
    align-items:center;
    min-height:40px;
    gap:7px;
    padding:4px 8px 4px 6px;
    border-color:transparent;
    background:transparent;
    box-shadow:none;
  }
  .site-header .app-entry-header:hover{
    transform:none;
    background:var(--surface);
    border-color:var(--line);
  }
  .site-header .app-entry-header-icon{
    width:30px;
    height:30px;
    border-radius:10px;
    background:var(--surface);
  }
  .site-header .app-entry-header-icon svg{
    width:17px;
    height:17px;
  }
  .site-header .app-entry-header strong{
    display:block;
    font-size:.88rem;
    line-height:1.05;
    white-space:nowrap;
  }
  .site-header .app-entry-header small{
    display:none!important;
  }
}
@media (max-width:500px){
  .site-header .app-entry-header{
    gap:5px;
    padding:3px 5px;
  }
  .site-header .app-entry-header-icon{
    width:28px;
    height:28px;
  }
  .site-header .app-entry-header strong{
    font-size:.82rem;
  }
}

/* =========================================================
   V2.4.5 compact mobile menu
   Matches the desktop navigation labels and keeps accessibility
   controls visible without a tall scrolling drawer.
   ========================================================= */
@media (max-width:1050px){
  .mobile-panel{
    display:block;
    position:fixed;
    inset:82px 0 0;
    z-index:95;
    max-height:none;
    overflow:hidden;
    padding:12px 14px calc(14px + env(safe-area-inset-bottom));
    background:rgba(255,253,249,.985);
    border-bottom:0;
    border-top:1px solid var(--line);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    transform:none;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .18s ease,visibility .18s ease;
  }
  .mobile-panel.open{
    transform:none;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
  .mobile-menu-shell{
    width:min(100%,680px);
    height:100%;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:10px;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .mobile-menu-shell::-webkit-scrollbar{display:none}
  .mobile-tools{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    flex:0 0 auto;
    margin:0;
    padding:0 0 9px;
    border-top:0;
    border-bottom:1px solid var(--line);
  }
  .mobile-tools .font-control{display:flex;align-items:center;gap:5px}
  .mobile-tools .icon-btn{
    display:grid!important;
    width:35px;
    height:35px;
    border-radius:999px;
    font-size:.74rem;
  }
  .mobile-lang-switch{display:flex!important;flex:0 0 auto}
  .mobile-lang-switch a{padding:5px 9px}
  .mobile-app-entry{
    display:grid!important;
    grid-template-columns:40px minmax(0,1fr) 20px;
    align-items:center;
    gap:10px;
    min-height:62px;
    padding:9px 12px!important;
    border:1px solid var(--accent-soft);
    border-radius:17px!important;
    background:linear-gradient(135deg,#fff8f2,#fff);
    color:var(--ink);
    box-shadow:0 8px 20px rgba(145,58,16,.06);
    flex:0 0 auto;
  }
  .mobile-app-entry:hover{background:var(--surface-2)!important}
  .mobile-app-icon{
    width:40px;
    height:40px;
    border-radius:13px;
    display:grid;
    place-items:center;
    background:#fff;
    color:var(--accent-dark);
    border:1px solid var(--line);
  }
  .mobile-app-icon svg{width:20px;height:20px}
  .mobile-app-entry strong{display:block;font-size:.9rem;line-height:1.2}
  .mobile-app-entry small{display:block;margin-top:2px;color:var(--muted);font-size:.68rem;line-height:1.3}
  .mobile-app-entry>b{color:var(--accent-dark);font-size:1rem;text-align:right}
  .mobile-nav{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
    flex:0 0 auto;
  }
  .mobile-nav a{
    min-height:44px;
    display:flex;
    align-items:center;
    padding:9px 11px;
    border:1px solid var(--line);
    border-radius:13px;
    background:#fff;
    color:var(--ink);
    font-size:.83rem;
    font-weight:780;
    line-height:1.25;
  }
  .mobile-nav a:hover{background:var(--surface-2)}
  .mobile-contact{
    min-height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:8px 14px;
    border-radius:13px;
    background:var(--accent);
    color:#fff;
    font-size:.84rem;
    font-weight:850;
    flex:0 0 auto;
  }
  .mobile-contact:hover{background:var(--accent-dark)}
}

@media (max-width:780px){
  .mobile-panel{inset:72px 0 0}
}

@media (max-width:500px){
  .mobile-panel{padding:10px 12px calc(12px + env(safe-area-inset-bottom))}
  .mobile-menu-shell{gap:8px}
  .mobile-tools{padding-bottom:8px}
  .mobile-tools .icon-btn{width:34px;height:34px}
  .mobile-app-entry{min-height:58px;padding:8px 10px!important;gap:8px}
  .mobile-app-icon{width:37px;height:37px;border-radius:12px}
  .mobile-app-entry strong{font-size:.86rem}
  .mobile-app-entry small{font-size:.64rem}
  .mobile-nav{gap:6px}
  .mobile-nav a{min-height:42px;padding:8px 10px;font-size:.8rem}
  .mobile-contact{min-height:40px}
}

@media (max-height:570px) and (max-width:1050px){
  .mobile-panel{padding-top:8px}
  .mobile-menu-shell{gap:6px}
  .mobile-tools{padding-bottom:6px}
  .mobile-app-entry{min-height:52px;padding-block:6px!important}
  .mobile-app-entry small{display:none}
  .mobile-nav a{min-height:38px;padding-block:6px}
  .mobile-contact{min-height:38px}
}