:root{--navy:#0E1A1C;--deep:#081214;--ink:#0E1A1C;--slate:#4A5560;--blue:#0F55C8;--sky:#0E8FA0;--lime:#7DBA00;--violet:#0E8FA0;--line:#D9DEE3;--soft:#F3F5F7;--tint:#E8F0FB;--teal:#0E8FA0;--teal-d:#0A7280;--teal-l:#8FD0D9}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,"Noto Sans JP","Hiragino Sans","Yu Gothic UI",Meiryo,sans-serif;color:var(--ink);background:#fff;line-height:1.85;letter-spacing:.02em;font-size:17px;font-weight:400}
a{color:inherit;text-decoration:none}img{max-width:100%}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
.pill{display:inline-block;padding:12px 26px;border-radius:14px;font-weight:700;font-size:16px;color:#fff;background:radial-gradient(120% 120% at 0 0,var(--blue) 32%,var(--sky) 100%);transition:transform .15s,box-shadow .15s;white-space:nowrap}
.pill:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(2,82,215,.3)}
.pill.ghost{background:#fff;color:var(--slate);border:1.5px solid var(--slate)}
.pill.sm{padding:9px 20px;font-size:15px;border-radius:12px}
.pill.light{background:#fff;color:var(--navy)}
header{position:sticky;top:0;z-index:50;background:#fff;box-shadow:0 2px 14px rgba(19,35,45,.08)}
.hbar{display:flex;align-items:center;gap:16px;height:80px}
.logo img{height:32px;display:block}
nav{display:flex;flex:1;min-width:0}
nav>.it{position:relative}
nav>.it>a{display:block;padding:28px 10px;font-weight:700;color:#0E1A1C;font-size:16px;white-space:nowrap}
nav>.it>a.dd::after{content:"";display:inline-block;width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-3px);margin-left:8px}
.mega{display:none;position:absolute;left:-30px;top:80px;background:#fff;border-radius:0 0 18px 18px;box-shadow:0 18px 40px rgba(19,35,45,.18);padding:24px 28px;min-width:300px;gap:6px 34px;grid-template-columns:1fr}
.mega.two{min-width:560px;grid-template-columns:1fr 1fr}
nav>.it:hover .mega,nav>.it:focus-within .mega{display:grid}
.mega h4{margin:0 0 6px;font-size:12px;letter-spacing:.14em;color:var(--blue)}
.mega a{display:block;padding:4px 0;font-size:15px;color:#0E1A1C;font-weight:500}.mega a:hover{color:var(--blue)}
.lang{font-size:13px;color:var(--slate);border:1px solid var(--line);border-radius:10px;padding:5px 10px;white-space:nowrap}
.hero{padding:80px 0 0;text-align:center;background:radial-gradient(60% 55% at 50% 0,var(--tint) 0,#fff 72%)}
.eyebrow{font-weight:700;color:var(--blue);letter-spacing:.14em;font-size:14px;margin:0 0 14px}
.hero img.adra{height:84px;margin:0 auto 18px;display:block}
.hero h1{margin:0;font-size:clamp(30px,4.2vw,50px);line-height:1.4;font-weight:700;letter-spacing:.03em}
.hero .box{display:inline-block;margin-top:18px;padding:4px 30px;border-radius:20px;background:#fff;box-shadow:0 0 0 2px #E4ECFF,0 12px 40px rgba(2,82,215,.18);font-size:clamp(26px,3.6vw,44px);font-weight:700;line-height:1.5;background-image:linear-gradient(90deg,var(--blue),var(--sky));-webkit-background-clip:text;background-clip:text;color:transparent;position:relative}
.hero p.lead{max-width:760px;margin:26px auto 32px;color:var(--slate);font-size:18px}
.btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
section{padding:92px 0}
h2{font-size:clamp(26px,3vw,38px);line-height:1.45;font-weight:700;margin:0 0 16px;letter-spacing:.03em}
.sec-head{text-align:center;max-width:820px;margin:0 auto 48px}.sec-head p{color:var(--slate);font-size:18px;margin:0}
.soft{background:var(--soft)}
.pain{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:30px 28px}
.card h3{margin:0 0 10px;font-size:20px;line-height:1.55}.card p{margin:0;color:var(--slate);font-size:16px}
.card .tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--blue);margin-bottom:8px}
.mods{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.mod{position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:22px;padding:34px 34px 30px;transition:transform .15s,box-shadow .15s,border-color .15s}
.mod:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(19,35,45,.1);border-color:var(--sky)}
.mod .n{font-size:13px;font-weight:700;letter-spacing:.14em;color:var(--violet)}
.mod h3{margin:6px 0 4px;font-size:24px}.mod .en{font-size:14px;font-weight:700;color:var(--blue);letter-spacing:.06em}
.mod p{margin:12px 0 16px;color:var(--slate);font-size:16px}
.link{font-weight:700;color:var(--blue)}.link::after{content:" →"}
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;text-align:center}
.stat{padding:28px 12px;border-radius:20px;border:1px solid var(--line);background:#fff}
.stat b{display:block;font-size:52px;line-height:1.1;font-weight:700;letter-spacing:-.02em;background:linear-gradient(90deg,var(--blue),var(--sky));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{display:block;margin-top:10px;font-size:14px;color:var(--slate);line-height:1.6}
.note{text-align:center;color:var(--slate);font-size:13px;margin:18px 0 0}
.logos{text-align:center}.logos h3{font-size:14px;letter-spacing:.14em;color:var(--slate);margin:0 0 22px}
.logorow{display:flex;flex-wrap:wrap;gap:12px 36px;justify-content:center;font-weight:700;font-size:20px;color:#9AA7B4;letter-spacing:.04em}
.erp{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}.erp span{padding:10px 22px;border:1px solid var(--line);border-radius:999px;background:#fff;font-weight:700;color:#0E1A1C;font-size:15px}
.g2{display:flex;align-items:center;gap:36px;border:1px solid var(--line);border-radius:22px;padding:34px 40px;background:#fff}
.badge{flex:none;width:112px;height:112px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;text-align:center;font-weight:700;line-height:1.3}.badge small{display:block;font-size:12px;font-weight:500}
.g2 h3{margin:0 0 6px;font-size:22px}.g2 p{margin:0 0 10px;color:var(--slate);font-size:16px}
.case{border:2px dashed var(--line);border-radius:22px;padding:44px;text-align:center;color:var(--slate);background:#fff}
.cta{background:var(--navy);color:#fff;text-align:center;padding:90px 0;background-image:radial-gradient(60% 120% at 80% 0,rgba(65,181,229,.28),transparent 60%),radial-gradient(40% 100% at 10% 100%,rgba(153,128,250,.28),transparent 60%)}
.cta h2{color:#fff}.cta p{max-width:640px;margin:0 auto 28px;color:#CBD5F5;font-size:18px}
footer{background:linear-gradient(var(--deep) 0,var(--navy) 100%);color:#fff;padding:64px 0 28px}
.fg{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:36px}
footer img.fl{height:30px}
footer h5{margin:0 0 12px;font-size:12px;letter-spacing:.14em;color:var(--sky)}
footer a{display:block;padding:3px 0;color:#DCE3F7;font-size:15px}footer a:hover{color:#fff}
.legal{margin-top:42px;padding-top:20px;border-top:1px solid rgba(255,255,255,.18);font-size:13px;color:#B9C4E8;display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between}
.legal a{display:inline;font-size:13px;color:#DCE3F7;text-decoration:underline;text-underline-offset:3px}
.page-hero{padding:64px 0 44px;background:radial-gradient(60% 80% at 50% 0,var(--tint) 0,#fff 75%)}.page-hero h1{margin:0;font-size:clamp(28px,3.6vw,42px);font-weight:700}
.crumb{font-size:13px;color:var(--slate);margin-bottom:10px}
table.info{width:100%;border-collapse:collapse;font-size:16px}table.info th,table.info td{padding:18px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}table.info th{width:200px;color:var(--slate);font-weight:700;background:var(--soft)}
.op{display:flex;align-items:center;gap:28px;padding:30px;border:1px solid var(--line);border-radius:20px;margin-bottom:36px}.op img{height:44px}
@media(max-width:1100px){nav{display:none}.lang{display:none}.hbar{height:68px}.hbar .pill{margin-left:auto}.fg{grid-template-columns:1fr 1fr}.stats{grid-template-columns:repeat(2,1fr)}.pain,.mods{grid-template-columns:1fr}}
@media(max-width:640px){.hero h1{font-size:24px;letter-spacing:.01em}.wrap{padding:0 18px}section{padding:64px 0}.g2{flex-direction:column;text-align:center;padding:28px}.fg{grid-template-columns:1fr}.stat b{font-size:42px}.op{flex-direction:column;align-items:flex-start}table.info th{display:block;width:auto}table.info td{display:block}}

.hero-visual{display:block;width:100%;max-width:1040px;height:auto;margin:56px auto 0}
@media(max-width:640px){.hero{padding-top:56px}.hero-visual{margin-top:36px}}

/* demo form */
.lead{font-size:17px;color:#465561;line-height:1.9;margin:0 0 28px}
.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fld{margin-bottom:20px}.fld label,fieldset legend{display:block;font-weight:700;font-size:15px;margin-bottom:8px;color:#0E1A1C}
.fld b,legend b,.cons b{color:#d6336c;margin-left:2px}
.fld input,.fld textarea{width:100%;box-sizing:border-box;padding:12px 14px;border:1px solid #c9d2e6;border-radius:8px;font:inherit;font-size:16px}
.fld input:focus,.fld textarea:focus{outline:2px solid #0A7280;border-color:#0A7280}
fieldset{border:0;padding:0;margin:8px 0 20px}
.ck{display:flex;gap:10px;align-items:flex-start;margin:10px 0;font-size:15px;line-height:1.6}
.ck input{margin-top:5px;width:18px;height:18px}
.err{color:#c92a2a;min-height:1.4em;font-size:14px}
.form .pill{border:0;cursor:pointer;font-size:16px}.form .pill:disabled{opacity:.6}
.vid{position:relative;padding-top:56.25%;border-radius:12px;overflow:hidden;background:#000;margin:12px 0 36px}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media(max-width:600px){.form .row2{grid-template-columns:1fr}}
.policy h2{font-size:22px;color:#0E1A1C;margin:40px 0 12px;padding-bottom:8px;border-bottom:1px solid #dde3f2}
.policy p,.policy li{font-size:16px;line-height:1.9;color:#2b3a46}.policy ul{padding-left:22px}.policy .date{text-align:right;color:#6b7a86}

/* product pages */
.page-hero .lead{margin:14px 0 24px}.page-hero .eyebrow{margin:10px 0 6px}
.pain.feats{grid-template-columns:repeat(3,1fr)}
.stats.three{grid-template-columns:repeat(3,1fr)}
a.mod{display:block;color:inherit}
.ticks{list-style:none;margin:0;padding:0}.ticks li{position:relative;padding:14px 0 14px 38px;border-bottom:1px solid var(--line);font-size:17px}
.ticks li::before{content:"";position:absolute;left:6px;top:22px;width:10px;height:6px;border-left:3px solid var(--blue);border-bottom:3px solid var(--blue);transform:rotate(-45deg)}
@media(max-width:900px){.pain.feats,.stats.three{grid-template-columns:1fr}}
.page-hero .wrap.split{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center}
.hero-side img{width:100%;height:auto;display:block}
.vids{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.vcard h3{font-size:16px;line-height:1.6;margin:0}.vcard .vid{margin:0 0 12px}
@media(max-width:900px){.page-hero .wrap.split,.vids{grid-template-columns:1fr}}
.vids.two{grid-template-columns:repeat(2,1fr)}@media(max-width:900px){.vids.two{grid-template-columns:1fr}}
.benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.benefit{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px 22px}
.benefit h3{margin:0 0 8px;font-size:18px;color:var(--navy)}.benefit p{margin:0;font-size:15px;color:var(--slate);line-height:1.8}
@media(max-width:1000px){.benefits{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.benefits{grid-template-columns:1fr}}
.pfrow{display:grid;margin:0 auto}.pfrow.three{grid-template-columns:repeat(3,1fr)}.pfrow.two{grid-template-columns:repeat(2,1fr);max-width:820px;margin-top:0;border-top:1px solid var(--line);padding-top:36px}
.pfrow.three{padding-bottom:36px}
.pf{text-align:center;padding:8px 32px}.pfrow>.pf+.pf{border-left:1px solid var(--line)}
.pfi{display:flex;justify-content:center;margin-bottom:14px}
.pf h3{margin:0 0 10px;font-size:20px;color:var(--ink)}.pf p{margin:0;font-size:15px;color:var(--slate);line-height:1.9;text-align:left}
@media(max-width:900px){.pfrow.three,.pfrow.two{grid-template-columns:1fr}.pfrow>.pf+.pf{border-left:0;border-top:1px solid var(--line);margin-top:18px;padding-top:26px}}
@media(max-width:1320px){.lang{display:none}}
.modrow{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:36px 0;border-top:1px solid var(--line)}
.modrow:first-of-type{border-top:0}
.modrow.rev .mtxt{order:2}
.modrow h3{margin:4px 0 12px;font-size:30px;line-height:1.4}
.modrow .mtxt p:not(.eyebrow){margin:0 0 22px;color:var(--slate);font-size:17px}
.modrow .mimg img{width:100%;height:auto;display:block;border-radius:14px}
@media(max-width:900px){.modrow{grid-template-columns:1fr;gap:20px}.modrow.rev .mtxt{order:0}}
.hero-side img.round{border-radius:28px}
.diagram{margin:0;text-align:center}
.diagram img{width:100%;height:auto;display:block;border-radius:18px;border:1px solid var(--line);background:#fff}
.diagram figcaption{margin-top:10px;font-size:13px;color:var(--slate)}
.abt{background:#fff;border-radius:40px;box-shadow:0 6px 40px rgba(0,26,114,.08);padding:60px 64px 64px}
.abt .sec-head{margin-bottom:28px}
.abt-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 14px;margin:8px 0 26px}
.abt-tab{font:inherit;font-weight:700;font-size:16px;color:#0E1A1C;background:#fff;border:2px solid transparent;border-radius:999px;padding:12px 26px;cursor:pointer;transition:border-color .15s,color .15s}
.abt-tab:hover{color:var(--blue)}
.abt-tab.on{border-color:var(--blue);color:var(--blue)}
.abt-line{border:0;border-top:1px solid var(--line);margin:0 0 40px}
.abt-panel{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.abt-panel[hidden]{display:none}
.abt-txt h3{margin:0 0 18px;font-size:26px;line-height:1.55;color:var(--blue)}
.abt-txt p{margin:0 0 26px;color:#233436;font-size:16.5px;line-height:2}
.abt-img img{width:100%;height:auto;display:block;border-radius:20px}
.erpband{background:linear-gradient(135deg,#2F2A9E 0%,#4A4BC4 45%,#4F8FD6 80%,#3FD2B0 100%);border-radius:40px;padding:64px 56px 56px;color:#fff;text-align:center}
.erpband h2{margin:0 0 10px;font-size:34px;line-height:1.5;color:#fff}
.erpband .sub{margin:0 0 22px;font-weight:700;font-size:20px;color:#fff}
.erpband .body{max-width:860px;margin:0 auto 38px;font-size:16.5px;line-height:2;color:#fff}
.erptiles{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;max-width:960px;margin:0 auto}
.erptile{position:relative;overflow:hidden;aspect-ratio:1/1;border:0;border-radius:20px;background:#001A5C;color:#fff;font:inherit;cursor:pointer;text-align:left;padding:0;box-shadow:0 2px 6px rgba(0,0,0,.18);transition:transform .22s ease,box-shadow .22s ease}
.erptile .mark{position:absolute;right:-8%;top:-4%;font-size:150px;font-weight:800;line-height:1;color:#0A38C8;opacity:.9;letter-spacing:-.04em;white-space:nowrap}
.erptile .nm{position:absolute;left:14px;bottom:12px;font-size:13px;font-weight:700}
.erptile:hover{transform:translateY(-4px);box-shadow:0 12px 26px rgba(0,0,0,.28)}
.erptile[aria-pressed=true]{transform:translateY(-14px) scale(1.04);box-shadow:0 22px 38px rgba(0,0,0,.4);outline:2px solid #fff}
.erptile:focus-visible{outline:3px solid #fff;outline-offset:3px}
.erpband .note.light{color:#E6ECFF;margin-top:28px}
@media(max-width:900px){.abt{padding:36px 22px 40px;border-radius:28px}.abt-panel{grid-template-columns:1fr;gap:24px}.erpband{padding:44px 22px;border-radius:28px}.erptiles{grid-template-columns:repeat(2,1fr)}.erptile .mark{font-size:110px}}
@media (prefers-reduced-motion:reduce){.erptile{transition:none}}
.erptile img.mark{position:absolute;right:0;height:auto;font-size:0;opacity:1;max-width:none}
.g2sec{text-align:center;padding:24px 0 8px}
.g2head{display:flex;align-items:center;justify-content:center;gap:26px;margin-bottom:8px;text-align:left}
.g2no{font-size:104px;font-weight:900;line-height:1;color:#0E1A1C;letter-spacing:-.04em}
.g2ttl{font-size:34px;font-weight:800;line-height:1.35;color:#0E1A1C}
.g2main{display:block;width:100%;max-width:1100px;height:auto;margin:0 auto}
.g2sub{margin:20px 0 18px;font-size:22px;font-weight:600;color:#233436}
.g2more{display:block;width:100%;max-width:1100px;height:auto;margin:0 auto}
.g2sec .note{margin-top:18px}
@media(max-width:900px){.g2head{flex-direction:column;gap:6px;text-align:center}.g2no{font-size:76px}.g2ttl{font-size:24px}.g2sub{font-size:18px}}
.vgrp{margin:34px 0 14px;font-size:20px}
.vgrp:first-of-type{margin-top:8px}
.qa{background:#fff;border:1px solid var(--line);border-radius:16px;padding:0 22px;margin:0 auto 12px;max-width:860px}
.qa summary{cursor:pointer;list-style:none;padding:18px 28px 18px 0;font-weight:700;font-size:17px;position:relative}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:24px;color:var(--blue)}
.qa[open] summary::after{content:"−"}
.qa p{margin:0 0 18px;color:var(--slate);line-height:1.9}
.gloss{max-width:860px;margin:0 auto;display:grid;gap:0}
.gloss div{padding:16px 4px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:220px 1fr;gap:20px}
.gloss dt{font-weight:700}.gloss dd{margin:0;color:var(--slate)}
.smap{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.smap h3{margin:0 0 10px;font-size:18px}.smap ul{list-style:none;margin:0;padding:0}.smap li{margin:6px 0}
.smap a{color:var(--blue)}
@media(max-width:900px){.gloss div{grid-template-columns:1fr;gap:4px}.smap{grid-template-columns:1fr}}
.burger{display:none;background:none;border:0;padding:10px;margin-left:auto;cursor:pointer}
.burger span{display:block;width:24px;height:2px;background:#0E1A1C;margin:5px 0;border-radius:2px}
.mega{left:0}
.mega.two{min-width:520px}
@media(max-width:1100px){
.burger{display:block}
.hbar .pill{margin-left:0}
nav.open{display:block;position:absolute;top:68px;left:0;right:0;max-height:calc(100vh - 68px);overflow:auto;background:#fff;padding:8px 20px 20px;box-shadow:0 18px 30px rgba(19,35,45,.18)}
nav.open>.it>a{padding:14px 4px;border-bottom:1px solid var(--line)}
nav.open .mega{display:grid;position:static;box-shadow:none;min-width:0;padding:6px 0 10px 12px;grid-template-columns:1fr;gap:4px}
nav.open .mega.two{min-width:0;grid-template-columns:1fr}
nav.open>.it>a.dd::after{display:none}
header{position:sticky}
}
.rolegrid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:1000px;margin:0 auto}
.rolecard{background:#fff;border:1px solid var(--line);border-radius:24px;padding:32px 32px 28px;box-shadow:0 4px 24px rgba(0,26,114,.06)}
.rolecard .ri{margin-bottom:10px}
.rolecard h3{margin:0 0 6px;font-size:22px}
.rolecard .rs{margin:0 0 16px;color:var(--slate)}
.rolecard ul{list-style:none;margin:0;padding:0}
.rolecard li{border-top:1px solid var(--line)}
.rolecard li a{display:flex;justify-content:space-between;align-items:center;padding:12px 2px;font-weight:600;color:#0E1A1C}
.rolecard li a::after{content:"›";color:var(--blue);font-size:20px}
.rolecard li a:hover{color:var(--blue)}
.checklist{max-width:860px;margin:0 auto;list-style:none;padding:0}
.checklist li{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 20px 16px 52px;margin:0 0 10px;position:relative}
.checklist li::before{content:"✓";position:absolute;left:20px;top:14px;color:var(--blue);font-weight:800}
@media(max-width:900px){.rolegrid{grid-template-columns:1fr}}

.logos .sec-head{margin-bottom:8px}
.marquee{overflow:hidden;margin-top:6px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mtrack{display:flex;align-items:center;gap:56px;width:max-content;padding:10px 28px;animation:mq-rtl 70s linear infinite}
.mtrack img{height:36px;width:auto;flex:none;opacity:.9}
@keyframes mq-rtl{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.mtrack{animation:none;flex-wrap:wrap;width:auto;justify-content:center}.mtrack img[aria-hidden]{display:none}}

/* ===== v12 redesign: Finthesize ink + teal, ring motif, flat & editorial ===== */
body{font-family:Outfit,"Noto Sans JP","Hiragino Sans","Yu Gothic UI",Meiryo,sans-serif;background:#fff;color:var(--ink)}
h1,h2,h3,h4,.eyebrow,.stat b,.g2no,.pill,.abt-tab,.mod .n{font-family:Outfit,"Noto Sans JP",sans-serif}
h2{font-weight:600;letter-spacing:.01em}
/* buttons: flat, squared, ink / teal */
.pill{background:var(--blue);border-radius:8px;font-weight:600;letter-spacing:.03em;padding:13px 28px;box-shadow:none}
.pill:hover{transform:none;background:#0A3F9C;box-shadow:none}
.pill.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.pill.ghost:hover{background:var(--ink);color:#fff}
.pill.light{background:#fff;color:var(--ink)}.pill.light:hover{background:var(--teal-l);color:var(--ink)}
.pill.sm{border-radius:8px}
/* header */
header{box-shadow:none;border-bottom:1px solid var(--line)}
nav>.it>a{font-weight:500;color:var(--ink)}
nav>.it>a:hover{color:var(--blue)}
.mega{border-radius:0 0 12px 12px;border:1px solid var(--line);border-top:0;box-shadow:0 20px 40px rgba(14,26,28,.1)}
.mega h4{color:var(--blue);font-weight:600}
.lang{border-radius:8px}
/* eyebrow with the dot of the mark */
.eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--blue);font-weight:600;letter-spacing:.16em}
.eyebrow::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--teal);flex:none}
/* hero: left-aligned, ring decoration */
.hero{position:relative;overflow:hidden;text-align:left;padding:96px 0 0;background:var(--soft)}
.hero::before{content:"";position:absolute;right:-180px;top:-150px;width:620px;height:620px;border-radius:50%;border:40px solid rgba(15,85,200,.07);pointer-events:none}
.hero::after{content:"";position:absolute;right:150px;top:150px;width:64px;height:64px;border-radius:50%;background:var(--teal);pointer-events:none}
.hero .wrap{position:relative;z-index:1}
.hero h1{font-size:clamp(32px,4.4vw,56px);line-height:1.35;font-weight:600;letter-spacing:.01em;max-width:820px}
.hero .box{display:block;margin-top:14px;padding:0;border-radius:0;background:none;box-shadow:none;color:var(--blue);-webkit-text-fill-color:var(--blue);font-size:clamp(24px,3vw,36px);font-weight:600;position:relative;padding-left:22px;border-left:5px solid var(--teal)}
.hero p.lead{max-width:680px;margin:28px 0 34px;color:var(--slate)}
.btns{justify-content:flex-start}
.hero-visual{margin-top:64px;border-radius:12px 12px 0 0;box-shadow:0 -1px 0 var(--line),0 30px 60px rgba(14,26,28,.14)}
/* sections */
section{padding:104px 0}
.sec-head{text-align:left;max-width:none;margin:0 0 52px;padding-left:22px;border-left:5px solid;border-image:linear-gradient(var(--blue) 0 60%,var(--teal) 60% 100%) 1}
.sec-head h2{margin-bottom:10px}.sec-head p{max-width:760px}
.logos .sec-head,.g2sec{ }
.soft{background:var(--soft)}
.card,.mod,.stat,.benefit,.qa,.op,.rolecard,.checklist li,.case,.g2,.diagram img{border-radius:10px}
.card{border:1px solid var(--line);border-top:3px solid var(--blue);padding:28px 26px}
.pain .card{background:#fff}
.mod{border-radius:10px;border:1px solid var(--line);border-top:3px solid var(--blue);transition:border-color .15s,background .15s}
.mod:hover{transform:none;box-shadow:none;border-color:var(--teal);border-top-color:var(--teal);background:#fff}
.mod .n{color:var(--blue)}.mod .en{color:var(--blue)}
.link{color:var(--blue)}
/* stats: ring numerals, no gradient text */
.stats{gap:0;border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}
.stat{border:0;border-radius:0;background:transparent;padding:34px 14px;text-align:left;position:relative}
.stat+.stat{border-left:1px solid var(--line)}
.stat b{background:none;-webkit-text-fill-color:var(--ink);color:var(--ink);font-weight:500;font-size:54px;letter-spacing:-.02em}
.stat b::after{content:"";display:block;width:28px;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--blue) 0 60%,var(--teal) 60% 100%);margin-top:12px}
.stat span{color:var(--slate)}
/* about-adra tabs panel */
.abt{border-radius:14px;box-shadow:none;border:1px solid var(--line);background:#fff}
.abt .sec-head{text-align:left}
.abt-tabs{justify-content:flex-start;gap:0;border-bottom:1px solid var(--line);margin:8px 0 34px}
.abt-tab{border:0;border-bottom:3px solid transparent;border-radius:0;padding:14px 24px;margin-bottom:-1px;font-weight:500;color:var(--slate)}
.abt-tab:hover{color:var(--ink)}
.abt-tab.on{border-bottom-color:var(--blue);color:var(--ink);font-weight:600}
.abt-line{display:none}
.abt-txt h3{color:var(--ink);font-weight:600}
.abt-img img{border-radius:10px}
/* ERP band: solid ink */
.erpband{background:linear-gradient(135deg,#0E1A1C 0 62%,#10243F 100%);border-radius:14px;text-align:left;position:relative;overflow:hidden}
.erpband::after{content:"";position:absolute;right:-120px;top:-120px;width:360px;height:360px;border-radius:50%;border:34px solid rgba(143,208,217,.14);pointer-events:none}
.erpband h2{font-weight:600}.erpband .sub{color:#8FB4F2}
.erpband .body{margin-left:0;margin-right:0}
.erptiles{margin-left:0;margin-right:0;max-width:none}
.erptile{border-radius:10px;background:#1B2A33;box-shadow:none;border:1px solid rgba(255,255,255,.1)}
.erptile:hover{box-shadow:none;border-color:var(--teal)}
.erptile[aria-pressed=true]{transform:none;box-shadow:none;outline:2px solid var(--teal)}
.erpband .note.light{color:#B9CDD0;text-align:left}
/* G2 */
.g2sec{text-align:left}
.g2head{justify-content:flex-start}
.g2no{font-weight:500;color:var(--blue)}
.g2ttl{font-weight:600;color:var(--ink)}
/* CTA + footer: ink, ring motif */
.cta{background:var(--ink);background-image:none;text-align:left;position:relative;overflow:hidden}
.cta::after{content:"";position:absolute;right:6%;top:50%;width:260px;height:260px;margin-top:-130px;border-radius:50%;border:30px solid rgba(143,208,217,.16);pointer-events:none}
.cta::before{content:"";position:absolute;right:calc(6% + 95px);top:50%;width:70px;height:70px;margin-top:-35px;border-radius:50%;background:var(--teal);pointer-events:none}
.cta .wrap{position:relative;z-index:1}
.cta h2{font-weight:600}.cta p{margin-left:0;color:#B9CDD0}
footer{background:var(--deep)}
footer h5{color:var(--teal-l);font-weight:600}
footer a{color:#CFDCDE}
.legal{color:#8FA5A8;border-top-color:rgba(255,255,255,.14)}.legal a{color:#CFDCDE}
/* sub-page heroes */
.page-hero{background:var(--soft);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.page-hero::after{content:"";position:absolute;right:-90px;top:-90px;width:300px;height:300px;border-radius:50%;border:30px solid rgba(14,26,28,.05);pointer-events:none}
.page-hero h1{font-weight:600}
.hero-side img.round{border-radius:12px}
/* misc */
.badge{background:var(--ink)}
.ticks li::before{border-color:var(--teal)}
.qa summary::after{color:var(--blue)}
.smap a,.rolecard li a::after,.rolecard li a:hover,.checklist li::before{color:var(--blue)}
.fld input:focus,.fld textarea:focus{outline-color:var(--teal);border-color:var(--teal)}
.fld input,.fld textarea{border-color:#BFCFD1;border-radius:6px}
table.info th{background:var(--soft)}
.benefit h3{color:var(--ink)}
.case{border:1px dashed #A9BDBF}
@media(max-width:900px){.hero::after{width:90px;height:90px;right:24px;top:70px}.hero::before{width:380px;height:380px;border-width:36px}.stat+.stat{border-left:0}.stats{border-top:1px solid var(--ink)}.stat{border-bottom:1px solid var(--line)}.cta::before,.cta::after{display:none}}
.erptile img.mark{filter:brightness(0) invert(1);opacity:.3}
.erptile:hover img.mark,.erptile[aria-pressed=true] img.mark{opacity:.65}

/* ===== v13: consulting-firm tone — bold type, dark/light bands, short headlines ===== */
:root{--night:#0B1D2E}
h1,h2{letter-spacing:0}
h2{font-weight:700;font-size:clamp(28px,3.4vw,44px);line-height:1.35}
.eyebrow{font-size:13px;letter-spacing:.2em;text-transform:uppercase}
.hero{background:linear-gradient(135deg,#0A1416 0%,var(--night) 100%);color:#fff;padding:110px 0 0}
.hero::before{border-color:rgba(255,255,255,.07);border-width:44px;right:-200px;top:-190px;width:700px;height:700px}
.hero::after{right:210px;top:170px;width:56px;height:56px}
.hero h1{color:#fff;font-weight:700;font-size:clamp(34px,5vw,64px);line-height:1.3;max-width:900px}
.hero .box{color:var(--teal-l);-webkit-text-fill-color:var(--teal-l);border-left-color:var(--teal);font-weight:600}
.hero p.lead{color:#C4D2D6}
.hero .pill{background:var(--blue)}.hero .pill:hover{background:#fff;color:var(--ink)}
.hero .pill.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.hero .pill.ghost:hover{background:#fff;color:var(--ink)}
.hero-visual{box-shadow:0 -1px 0 rgba(255,255,255,.1),0 30px 70px rgba(0,0,0,.45)}
/* stats band goes dark */
section.soft:has(.stats){background:var(--ink);color:#fff}
section.soft:has(.stats) .sec-head h2{color:#fff}
section.soft:has(.stats) .sec-head p,section.soft:has(.stats) .stat span,section.soft:has(.stats) .note{color:#B9CDD0}
section.soft:has(.stats) .stats{border-top-color:rgba(255,255,255,.5);border-bottom-color:rgba(255,255,255,.18)}
section.soft:has(.stats) .stat+.stat{border-left-color:rgba(255,255,255,.18)}
section.soft:has(.stats) .stat b{color:#fff;-webkit-text-fill-color:#fff;font-weight:600;font-size:60px}
/* sub-page heroes go dark */
.page-hero{background:linear-gradient(135deg,#0A1416 0%,var(--night) 100%);border-bottom:0;color:#fff}
.page-hero::after{border-color:rgba(255,255,255,.07)}
.page-hero h1{color:#fff;font-weight:700;font-size:clamp(30px,4vw,50px);line-height:1.35}
.page-hero .lead,.page-hero p{color:#C4D2D6}
.page-hero .crumb,.page-hero .crumb a{color:#9FB5B8}
.page-hero .eyebrow{color:var(--teal-l)}
.page-hero .pill.ghost{color:#fff;border-color:rgba(255,255,255,.7);background:transparent}
.page-hero .pill.ghost:hover{background:#fff;color:var(--ink)}
.page-hero .stat b,.page-hero .stat span{color:#fff}
@media(max-width:900px){.hero{padding-top:72px}.hero::after{display:none}}

/* ===== v14: palette built from the two logos (Trintech green-teal #008078 + gray #888880, Finthesize ink #081818 + cyan-teal #0888A0) ===== */
:root{--tg:#008078;--fc:#0888A0;--brand:#0A7C84;--brand-d:#08636A;--wgray:#888880;--blue:#2A63B8;--bridge:linear-gradient(180deg,#008078,#0888A0)}
.pill{background:var(--brand)}.pill:hover{background:var(--brand-d)}
.hero .pill{background:var(--brand)}.hero .pill:hover{background:#fff;color:var(--ink)}
.pill.light:hover{background:var(--teal-l)}
.eyebrow{color:var(--brand)}.eyebrow::before{background:var(--bridge)}
.page-hero .eyebrow,.hero .eyebrow{color:var(--teal-l)}
.sec-head{border-image:var(--bridge) 1}
.card,.mod{border-top-color:var(--brand)}
.mod:hover{border-color:var(--brand);border-top-color:var(--brand)}
.mod .n,.mod .en,.link,.mega h4,.smap a,.qa summary::after,.g2no,.hero .box{color:var(--brand)}
.hero .box{color:var(--teal-l);-webkit-text-fill-color:var(--teal-l);border-left:5px solid #12A99C}
.abt-tab.on{border-bottom-color:var(--brand)}
.abt-txt h3{color:var(--ink)}
.stat b::after{background:linear-gradient(90deg,#008078,#0888A0)}
nav>.it>a:hover,.mega a:hover{color:var(--brand)}
.ticks li::before,.checklist li::before{border-color:var(--brand);color:var(--brand)}
.erpband{background:linear-gradient(135deg,#081818 0 60%,#0B2A33 100%)}
.erpband .sub{color:#7FD0C8}
.erpband::after{border-color:rgba(18,169,156,.18)}
.cta::after{border-color:rgba(18,169,156,.18)}.cta::before{background:#12A99C}
.hero::after{background:#12A99C}
.hero::before,.page-hero::after{border-color:rgba(255,255,255,.07)}
.hero{background:linear-gradient(135deg,#081818 0%,#0B2A33 100%)}
.page-hero{background:linear-gradient(135deg,#081818 0%,#0B2A33 100%)}
footer{background:#061111}
.legal,.legal a{color:#A3ADAB}
.crumb,.page-hero .crumb,.page-hero .crumb a{color:#A3ADAB}
.soft{background:#F3F5F4}
.note{color:#6E6E68}
.fld input:focus,.fld textarea:focus{outline-color:var(--brand);border-color:var(--brand)}
section.soft:has(.stats){background:#081818}
.logo img{height:36px}footer img.fl{height:34px}

/* ===== v15: on dark bands, text is white / near-white only; green stays as shapes (bars, dots, rings) ===== */
.hero .box{color:#fff;-webkit-text-fill-color:#fff;border-left:6px solid #1FC2B3}
.hero p.lead{color:#EEF4F5}
.page-hero .eyebrow,.hero .eyebrow{color:#fff}
.page-hero .eyebrow::before,.hero .eyebrow::before{background:#1FC2B3}
.page-hero .lead,.page-hero p{color:#EEF4F5}
.page-hero .crumb,.page-hero .crumb a{color:#DCE5E6}
.erpband .sub,.erpband .body,.erpband .note.light{color:#fff}
.erptile .nm{color:#fff;font-size:14px}
.erptile img.mark{opacity:.4}
.cta p{color:#EEF4F5}
section.soft:has(.stats) .sec-head p,section.soft:has(.stats) .stat span,section.soft:has(.stats) .note{color:#EEF4F5}
section.soft:has(.stats) .stat b{color:#fff}
section.soft:has(.stats) .sec-head{border-image:linear-gradient(180deg,#1FC2B3,#5AD6CA) 1}
footer h5{color:#fff}
footer a{color:#E6EEEF}
footer p{color:#DCE5E6!important}
.legal,.legal a{color:#DCE5E6}
.hero::after,.cta::before{background:#1FC2B3}
.hero::before,.page-hero::after{border-color:rgba(255,255,255,.1)}
.cta::after,.erpband::after{border-color:rgba(255,255,255,.1)}

/* ===== v16: Finthesize brand gradient (navy #003865 → green #008578) on dark bands ===== */
:root{--grad:linear-gradient(120deg,#003865 0%,#00506A 45%,#008578 100%);--grad-d:linear-gradient(120deg,#002B4D 0%,#003F55 50%,#00655B 100%)}
.hero,.page-hero{background:var(--grad)}
.cta{background:var(--grad);background-image:var(--grad)}
.erpband{background:var(--grad)}
section.soft:has(.stats){background:var(--grad)}
footer{background:var(--grad-d)}
.erptile{background:rgba(0,20,40,.38);border:1px solid rgba(255,255,255,.22)}
.erptile:hover{border-color:#fff}
.erptile[aria-pressed=true]{outline-color:#fff}
.erptile img.mark{opacity:.55}
.hero::after,.cta::before{background:#8FEBDD}
.hero .box{border-left-color:#8FEBDD}
.page-hero .eyebrow::before,.hero .eyebrow::before{background:#8FEBDD}
section.soft:has(.stats) .sec-head{border-image:linear-gradient(180deg,#8FEBDD,#fff) 1}
section.soft:has(.stats) .stats{border-top-color:rgba(255,255,255,.6);border-bottom-color:rgba(255,255,255,.3)}
section.soft:has(.stats) .stat+.stat{border-left-color:rgba(255,255,255,.3)}
.stat b::after{background:linear-gradient(90deg,#008578,#003865)}
section.soft:has(.stats) .stat b::after{background:#8FEBDD}
.hero::before,.page-hero::after,.cta::after,.erpband::after{border-color:rgba(255,255,255,.12)}
.legal{border-top-color:rgba(255,255,255,.25)}
.hero .pill:not(.ghost),.page-hero .pill:not(.ghost){background:#fff;color:#003865}
.hero .pill:not(.ghost):hover,.page-hero .pill:not(.ghost):hover{background:#8FEBDD;color:#003865}

/* v17: original illustrations */
.hero-visual{border-radius:0;box-shadow:none;filter:drop-shadow(0 -6px 30px rgba(0,20,40,.25))}
.abt-img img,.modrow .mimg img,.hero-side img{filter:none;border-radius:20px}
.hero-side img.round{border-radius:24px}
.hero-visual{max-width:1200px}

/* v18: tabs with color */
.abt-tabs{border-bottom:0;gap:10px;margin:8px 0 30px}
.abt-tab{border:0;border-radius:10px;padding:14px 26px;margin:0;background:#E3EEF0;color:#0E1A1C;font-weight:600;box-shadow:inset 0 0 0 1.5px #C5DADD}
.abt-tab:hover{background:#D3E7EA;color:#0E1A1C}
.abt-tab.on{background:linear-gradient(120deg,#003865,#008578);color:#fff;box-shadow:none}

/* v19: ERP tiles use plain names (no third-party logos) */
.erptiles{grid-template-columns:repeat(5,1fr);gap:16px}
.erptile{aspect-ratio:auto;height:92px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3)}
.erptile .nm{position:static;font-size:18px;font-weight:600;color:#fff;text-align:center;line-height:1.35;padding:0 10px}
.erptile:hover{background:rgba(255,255,255,.2);border-color:#fff}
.erptile[aria-pressed=true]{background:#fff;outline:0}
.erptile[aria-pressed=true] .nm{color:#003865}
@media(max-width:900px){.erptiles{grid-template-columns:repeat(2,1fr)}.erptile{height:76px}}

/* v20: hero fits one screen (two columns on desktop), full dashboard visible; G2 headline scales on phones */
.hero{padding-bottom:56px}
.hero-visual{filter:drop-shadow(0 18px 36px rgba(0,20,40,.35))}
@media(min-width:1000px){
.hero{padding:56px 0 56px}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);column-gap:40px;align-items:center}
.hero .wrap>h1,.hero .wrap>.box,.hero .wrap>.lead,.hero .wrap>.btns{grid-column:1}
.hero .wrap>.hero-visual{grid-column:2;grid-row:1/span 4;width:100%;max-width:none;margin:0}
.hero h1{font-size:clamp(30px,3.5vw,52px);line-height:1.3}
.hero .box{font-size:clamp(22px,2.2vw,30px)}
.hero p.lead{margin:20px 0 26px}
}
@media(max-width:999px){.hero .hero-visual{margin-top:32px}}
@media(max-width:640px){
.g2sec{padding-top:8px}
.g2head{flex-direction:column;gap:4px;text-align:center}
.g2no{font-size:68px}
.g2ttl{font-size:20px;line-height:1.45}
.g2sub{font-size:17px;margin:14px 0 12px}
}
@media(min-width:1000px){.hero h1{font-size:clamp(28px,2.9vw,46px)}}
@media(max-width:640px){.hero h1{font-size:25px;line-height:1.35}.hero .hero-visual{margin-top:28px}}

/* v21: hero line breaks (phrase-based) */
.nb{white-space:nowrap}.jp{word-break:keep-all;overflow-wrap:anywhere}
@media(min-width:1000px){.hero h1{font-size:clamp(26px,2.4vw,40px)}}
@media(max-width:640px){.hero h1{font-size:21px}.hero p.lead{font-size:16px}}
/* v22: comparison table */
table.cmp th,table.cmp td{vertical-align:top;font-size:15px;line-height:1.7}table.cmp thead th{background:var(--soft,#F2F5F5);font-weight:700}table.cmp tbody th{width:20%;white-space:nowrap}
@media(max-width:700px){table.cmp,table.cmp tbody,table.cmp tr,table.cmp th,table.cmp td{display:block;width:100%}table.cmp thead{display:none}table.cmp tbody th{white-space:normal;padding-bottom:4px;border-bottom:0}table.cmp td{padding:6px 16px}table.cmp td:nth-of-type(1)::before{content:"Trintech：";font-weight:700}table.cmp td:nth-of-type(2)::before{content:"BlackLine：";font-weight:700}table.cmp tr{border-bottom:1px solid var(--line)}}
@media(max-width:700px){table.cmp tbody th{width:100%!important;background:none;padding:14px 16px 4px;font-size:16px;color:var(--ink,#081818)}.cmph{font-size:22px!important}}

/* v23: comparison hub + pages */
.cmptag{font-size:clamp(20px,2.6vw,30px);font-weight:700;text-align:center;line-height:1.6;margin:0;color:var(--ink,#081818)}
.cmpcards{row-gap:28px}.cmpcards .pf{text-align:left}
.cmpboxes{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;max-width:960px;margin:0 auto}
.cmpbox{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 28px}.cmpbox.ok{border-color:#008078;background:#F3FAF9}
.cmpbox h3{margin:0 0 12px;font-size:19px}.cmpbox ul{margin:0;padding-left:1.2em;line-height:1.9}
.cmpmore{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;margin:28px 0 8px}.cmpmore span{font-size:13px;color:var(--slate)}
.cmpmore a{font-size:14px;border:1px solid var(--line);border-radius:999px;padding:7px 14px;background:#fff;color:var(--ink,#081818);text-decoration:none}
.cmpgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px}
.cmpcard{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--line);border-top:3px solid #008078;border-radius:16px;padding:26px 26px 22px;text-decoration:none;color:inherit;transition:transform .15s,box-shadow .15s}
.cmpcard:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,30,40,.10)}.cmpcard h3{margin:2px 0 0;font-size:20px}.cmpcard p{margin:0;color:var(--slate);line-height:1.7;flex:1}.cmpcard .more{font-weight:700;color:#008078;font-size:14px}
/* v24 compare art */
.cmpart{margin:28px auto 0;max-width:620px}.cmpart svg{width:100%;height:auto;display:block}