.site-nav a[aria-current="page"]{color:#187b89}
.how-hero{position:relative;overflow:hidden;background:radial-gradient(circle at 71% 43%,#164657 0%,#0a2938 48%,#071d2a 100%);color:#fff;padding:92px 0 43px}
.how-hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;background:linear-gradient(115deg,transparent 51%,rgba(126,194,204,.06) 51.1%,transparent 51.3%),linear-gradient(25deg,transparent 68%,rgba(126,194,204,.07) 68.1%,transparent 68.3%)}
.how-hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:center;gap:clamp(34px,5vw,82px)}
.how-hero-copy h1{max-width:650px;margin:0;font-size:clamp(3.15rem,5.1vw,5.35rem);line-height:1.035;letter-spacing:-.065em;font-weight:800}.how-hero-copy h1 em{display:block;margin-top:.08em;color:#a9dce1;font-style:normal}.how-hero-copy>p:not(.eyebrow){max-width:550px;margin:28px 0 0;color:#bad3d9;font-size:1.02rem;line-height:1.82}
.integration-card{position:relative;min-width:0;overflow:hidden;border:1px solid rgba(166,223,230,.41);border-radius:17px;background:linear-gradient(145deg,rgba(32,82,96,.82),rgba(8,31,43,.94) 42%,rgba(6,25,37,.96));box-shadow:0 33px 72px rgba(0,12,23,.38),0 0 40px rgba(87,187,203,.12),inset 0 1px rgba(232,252,254,.15);backdrop-filter:blur(19px);-webkit-backdrop-filter:blur(19px);transform:perspective(1300px) rotateY(-3deg);transition:transform .4s,box-shadow .4s}.integration-card:hover,.integration-card:focus-within{transform:perspective(1300px) rotateY(0);box-shadow:0 39px 80px rgba(0,12,23,.47),0 0 50px rgba(87,187,203,.18)}.integration-card::before{content:"";position:absolute;z-index:2;top:0;left:12%;width:45%;height:1px;background:linear-gradient(90deg,transparent,#c3f4f8,transparent);box-shadow:0 0 15px #a8e5ec;pointer-events:none}
.integration-card-head,.integration-card-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 19px;border-bottom:1px solid rgba(174,219,226,.16);color:#a8ccd2;font-size:.55rem;font-weight:800;letter-spacing:.13em}.integration-card-head span:first-child{display:flex;align-items:center;gap:9px}.integration-card-head span:last-child{color:#729ba5}.integration-card-head .status-dot{width:6px;height:6px}.integration-card-body{padding:24px 23px 19px}
.integration-visual{display:grid;grid-template-columns:107px minmax(0,1fr) 120px;align-items:center;gap:7px;min-height:190px;padding:16px 12px;border:1px solid rgba(156,210,220,.2);border-radius:11px;background:radial-gradient(circle at 53% 45%,rgba(95,180,197,.15),rgba(5,28,39,.28) 65%)}
.integration-node{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:121px;padding:12px 5px;border:1px solid rgba(177,227,234,.33);border-radius:12px;background:linear-gradient(140deg,rgba(144,208,217,.18),rgba(44,103,118,.08));box-shadow:0 15px 27px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.09);text-align:center}.integration-node-kicker{color:#89bbc5;font-size:.48rem;font-weight:800;letter-spacing:.13em}.integration-node strong{margin:5px 0;color:#effbfc;font-size:1.32rem;letter-spacing:-.04em}.integration-node small{color:#9fc3cb;font-size:.56rem;line-height:1.25}.integration-quantix{border-color:rgba(133,219,225,.55);background:linear-gradient(140deg,rgba(110,204,217,.23),rgba(34,91,107,.12))}.integration-quantix img{height:34px;width:auto;object-fit:contain}.integration-quantix strong{font-size:.74rem;letter-spacing:.12em}
.integration-lanes{display:flex;flex-direction:column;gap:25px;min-width:0}.integration-lane{position:relative;height:32px;border-bottom:1px solid rgba(164,225,232,.31)}.integration-lane::before{content:"";position:absolute;bottom:-2px;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,rgba(121,215,227,.5),transparent);filter:blur(5px)}.integration-lane span{display:block;color:#a9d3d9;text-align:center;font-size:.44rem;font-weight:800;letter-spacing:.07em;white-space:nowrap}.integration-lane i{position:absolute;bottom:-4px;left:0;width:7px;height:7px;border-radius:50%;background:#a9edf1;box-shadow:0 0 10px #81d5de,0 0 18px rgba(129,213,222,.5);animation:data-in 3.2s linear infinite}.integration-lane i:nth-of-type(2){animation-delay:1.05s}.integration-lane i:nth-of-type(3){animation-delay:2.1s}.integration-out i{left:auto;right:0;background:#e8b45e;box-shadow:0 0 10px #eab963,0 0 18px rgba(234,185,99,.5);animation-name:data-out}.integration-out::before{background:linear-gradient(90deg,transparent,rgba(234,185,99,.5),transparent)}.integration-card[data-flow-stage="input"] .integration-out i,.integration-card[data-flow-stage="count"] .integration-out i{opacity:.36}.integration-card[data-flow-stage="return"] .integration-in i{opacity:.36}
.integration-state{min-height:123px;margin-top:14px;padding:14px 15px;border:1px solid rgba(159,216,224,.19);border-radius:9px;background:rgba(107,182,196,.08)}.integration-state span{color:#8fd0d8;font-size:.53rem;font-weight:800;letter-spacing:.14em}.integration-state strong{display:block;margin-top:8px;color:#f0fbfb;font-size:.86rem;line-height:1.25}.integration-state p{margin:6px 0 0;color:#a4c6cd;font-size:.65rem;line-height:1.55}.integration-controls{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:11px}.integration-controls button{min-height:37px;border:1px solid rgba(159,216,224,.2);border-radius:7px;background:rgba(113,192,205,.06);color:#a8cad1;font-size:.65rem;font-weight:800;transition:background .2s,border-color .2s,color .2s}.integration-controls button:hover{background:rgba(113,192,205,.16);color:#fff}.integration-controls button[aria-pressed="true"]{border-color:rgba(143,221,230,.65);background:rgba(111,203,217,.2);color:#e8fbfc;box-shadow:inset 0 -2px #96dbe2}.integration-card-foot{border-top:1px solid rgba(174,219,226,.16);border-bottom:0;padding-block:13px;color:#729ba5;font-size:.44rem}
.integration-disclaimer{position:relative;margin-top:33px;color:#82aeb8;font-size:.71rem;line-height:1.65;text-align:right}
.how-section-head{margin-bottom:40px}.how-stages{background:#f4f9f9}.how-stage-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.how-stage-card{position:relative;display:flex;flex-direction:column;min-height:262px;padding:27px;border:1px solid #d5e6e8;border-radius:14px;background:#fff;box-shadow:0 18px 35px rgba(12,59,73,.045);transition:transform .3s,border-color .3s,box-shadow .3s}.how-stage-card:hover{transform:translateY(-5px);border-color:#85c2ca;box-shadow:0 25px 42px rgba(12,59,73,.1)}.how-stage-card>span,.how-role-card>span{color:#398b97;font-size:.62rem;font-weight:800;letter-spacing:.17em}.how-stage-card h3{max-width:265px;margin:59px 0 10px;color:#113745;font-size:1.19rem;letter-spacing:-.035em}.how-stage-card p{margin:0;color:#587681;font-size:.83rem;line-height:1.7}.how-stage-card small{margin-top:auto;padding-top:19px;color:#2b818d;font-size:.62rem;font-weight:800}.how-stage-symbol{position:absolute;top:18px;right:22px;color:#6cb1bb;font-size:2.05rem;font-weight:300}
.how-roles{background:#e9f2f3}.how-role-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}.how-role-card{min-height:230px;padding:25px;border:1px solid #cce1e4;border-radius:13px;background:linear-gradient(140deg,#fff,#f5fbfb);box-shadow:0 18px 32px rgba(12,59,73,.04)}.how-role-card h3{margin:53px 0 10px;color:#113745;font-size:1.08rem;line-height:1.25;letter-spacing:-.03em}.how-role-card p{margin:0;color:#587681;font-size:.79rem;line-height:1.65}
.how-erp{background:#fff}.how-erp-grid{display:grid;grid-template-columns:1fr .8fr;gap:75px}.how-erp-grid>div:last-child{padding-top:45px}.how-erp-grid p:not(.eyebrow){margin:0 0 18px;color:#587681;font-size:1rem;line-height:1.85}
@keyframes data-in{0%{left:0;opacity:0}15%,85%{opacity:1}100%{left:calc(100% - 7px);opacity:0}}@keyframes data-out{0%{right:0;opacity:0}15%,85%{opacity:1}100%{right:calc(100% - 7px);opacity:0}}
@media(max-width:1100px){.how-hero-grid{gap:25px}.integration-card-body{padding:17px}.integration-visual{grid-template-columns:86px minmax(0,1fr) 98px;padding-inline:7px}.integration-node{min-height:106px}.integration-lane span{font-size:.39rem}.how-role-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:800px){.how-hero{padding-top:72px}.how-hero-grid{grid-template-columns:1fr}.how-hero-copy{max-width:720px}.how-hero-copy h1{font-size:clamp(3.1rem,8vw,5rem)}.integration-card{max-width:660px;transform:none}.integration-card:hover,.integration-card:focus-within{transform:none}.integration-visual{grid-template-columns:107px minmax(0,1fr) 120px}.integration-disclaimer{text-align:left}.how-stage-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.how-erp-grid{grid-template-columns:1fr;gap:20px}.how-erp-grid>div:last-child{padding-top:0}}
@media(max-width:560px){.how-hero{padding-top:60px}.how-hero-copy h1{font-size:clamp(2.8rem,11vw,4rem)}.how-hero-copy>p:not(.eyebrow){font-size:.96rem}.integration-card-head{padding:13px 12px;font-size:.46rem}.integration-card-body{padding:12px}.integration-visual{grid-template-columns:78px minmax(0,1fr) 84px;min-height:160px;padding:9px 5px;gap:4px}.integration-node{min-height:93px;padding:7px 3px}.integration-node strong{font-size:1.02rem}.integration-node small{font-size:.43rem}.integration-node-kicker{font-size:.39rem}.integration-quantix img{height:26px}.integration-quantix strong{font-size:.59rem}.integration-lanes{gap:21px}.integration-lane span{font-size:.32rem;letter-spacing:0;white-space:normal}.integration-state{min-height:139px}.integration-card-foot{padding:11px 8px;font-size:.35rem;letter-spacing:.04em}.integration-disclaimer{font-size:.67rem}.how-stage-grid,.how-role-grid{grid-template-columns:1fr}.how-stage-card{min-height:225px}.how-stage-card h3{margin-top:48px}.how-role-card{min-height:0}.how-role-card h3{margin-top:35px}}
@media(max-width:370px){.integration-visual{grid-template-columns:70px minmax(0,1fr) 76px}.integration-quantix strong{font-size:.5rem}.integration-lane span{font-size:.3rem}.integration-card-head span:last-child{display:none}}
@media(prefers-reduced-motion:reduce){.integration-lane i{animation:none;opacity:1;left:50%;right:auto}.integration-card,.how-stage-card{transition:none}}