/* GENERATED -- green theme, derived from the blue stylesheet of the same name.
Do not hand-edit: rebuild with `python3 tools/theme/build.py`.
Blue -> #00823b (the previous brand green #039746, deepened to clear AA);
purple/orange -> #8cc63f (logo lime);
no blue surfaces: navy fills become deep green, navy type stays navy.
Product --pa accents and .industry-card keep their variety, minus blue. */
*{box-sizing:border-box;margin:0;padding:0}
/* Light-only. `only` tells the browser not to run its own dark-mode transform
over the page — without it, a phone with force-dark on inverts every colour
here and the site arrives looking like a dark theme nobody designed. */
:root{color-scheme:only light}
:root{--blue:#0a2f73;--blue2:#00823b;--light:#f4f9f5;--text:#0b2450;--muted:#607664;--orange:#8cc63f;--purple:#548000;--green:#13a878;--border:#dfeae1}
html{scroll-behavior:smooth}
body{font-family:Inter,Arial,sans-serif;color:var(--text);background:#ffffff;line-height:1.55;overflow-x:hidden}
a{text-decoration:none;color:inherit}
button{font:inherit}
.container{width:min(1180px,92%);margin:auto}
.site-header{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.93);backdrop-filter:blur(16px);border-bottom:1px solid rgba(0,67,27,.07)}
.nav{height:76px;display:flex;align-items:center;gap:36px}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:20px;color:var(--blue)}
.brand-mark{position:relative;width:24px;height:24px;display:inline-block}
.brand-mark:before,.brand-mark:after,.brand-mark span,.brand-mark i{content:"";position:absolute;border-radius:2px;transform:skew(-18deg)}
.brand-mark:before{width:8px;height:20px;left:3px;top:2px;background:#007333}.brand-mark:after{width:8px;height:13px;right:2px;top:2px;background:var(--orange)}.brand-mark span{width:8px;height:9px;left:8px;bottom:1px;background:#4fb06a}.brand-mark i{width:8px;height:5px;right:7px;bottom:3px;background:#9bcf5e}
.desktop-nav{display:flex;gap:30px;margin-left:auto;font-size:14px;font-weight:600;color:#3f5b45}.desktop-nav a{transition:.2s}.desktop-nav a:hover{color:var(--blue2)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:13px 21px;border-radius:999px;font-size:13px;font-weight:700;transition:.25s;border:1px solid transparent;cursor:pointer}
.btn-primary{background:linear-gradient(100deg,#007333,#009243);color:#ffffff;box-shadow:0 10px 24px rgba(0,112,50,.22)}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(0,112,50,.3)}
.btn-outline{border-color:#a9c9af;color:var(--blue);background:#ffffff}.btn-outline:hover{border-color:var(--brand-deep);transform:translateY(-2px)}
.btn-light{background:#ffffff;color:var(--blue);margin-top:22px}.btn-orange{background:var(--orange);color:#ffffff;box-shadow:0 12px 30px rgba(140,198,63,.3)}.btn-orange:hover{transform:translateY(-2px)}
.menu-toggle{display:none;border:0;background:none;font-size:24px;color:var(--blue)}
.hero{position:relative;min-height:620px;display:flex;align-items:center;overflow:hidden;background:linear-gradient(135deg,#ffffff 0%,#f3f9f4 58%,#e9f4eb 100%)}
.hero:after{content:"";position:absolute;width:720px;height:720px;right:-300px;top:-270px;border-radius:50%;background:radial-gradient(circle,rgba(34,160,80,.18),transparent 67%)}
.hero-network{position:absolute;inset:0;opacity:.55;background-image:radial-gradient(#bad6bf 1px,transparent 1px);background-size:35px 35px;mask-image:linear-gradient(90deg,transparent 0%,#000000 40%,#000000 100%)}
.hero-network:after{content:"";position:absolute;right:0;top:0;width:65%;height:100%;background:linear-gradient(135deg,transparent 30%,rgba(60,157,89,.07));clip-path:polygon(20% 0,100% 0,100% 100%,0 100%)}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:46% 54%;align-items:center;gap:10px;padding:65px 0}
.eyebrow{font-size:11px;letter-spacing:1.4px;color:#2f8449;font-weight:800;margin-bottom:14px}.eyebrow.light{color:#98d7a5}
.hero h1{font-size:48px;line-height:1.05;letter-spacing:-2px;margin-bottom:22px;font-weight:800}.hero h1 span,h2 span{color:#00813b}
.hero-copy>p{max-width:510px;color:#536957;font-size:17px;margin-bottom:26px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.hero-benefits{display:flex;gap:20px;flex-wrap:wrap;margin-top:28px;color:#6f8573;font-size:11px;font-weight:600}
.hero-visual{position:relative;min-height:455px;display:flex;align-items:center;justify-content:center}.dashboard-window{width:min(590px,100%);background:#ffffff;border:1px solid #d6e8d9;border-radius:20px;box-shadow:0 30px 70px rgba(13,86,40,.2);display:flex;overflow:hidden;transform:perspective(1000px) rotateY(-4deg)}
.dash-sidebar{width:54px;background:#004b1f;color:#badac0;display:flex;flex-direction:column;align-items:center;gap:22px;padding:18px 0;font-size:15px}.side-logo{width:29px;height:29px;border-radius:8px;background:#ffffff;color:var(--blue);display:grid;place-items:center;font-weight:800;margin-bottom:14px}
.dash-content{padding:22px;width:calc(100% - 54px);background:#fcfefc}.dash-top{display:flex;justify-content:space-between}.dash-top small{color:#618568;font-size:11px}.dash-top h3{font-size:17px;margin-top:5px}.dash-top p{font-size:10px;color:#7b927f}.ai-orb{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#008d41,#5e8f00);color:#ffffff;box-shadow:0 0 25px rgba(0,146,67,.35)}
.metric-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:20px 0}.metric{padding:13px;background:#ffffff;border:1px solid #e4ece5;border-radius:11px}.metric small{display:block;color:#829585;font-size:9px}.metric b{display:block;font-size:14px;margin:3px 0}.metric em{font-style:normal;font-size:9px;color:#14a36f}.ask-box{padding:12px;background:#eef6ef;border-radius:12px}.ask-box>small{font-size:9px;color:#68856d}.ask-input{margin-top:7px;background:#ffffff;border:1px solid #dce8de;border-radius:8px;padding:10px;font-size:9px;color:#536957;display:flex;justify-content:space-between;align-items:center}.ask-input button{border:0;background:#00833b;color:#ffffff;border-radius:50%;width:24px;height:24px}.mini-chart{margin-top:14px;padding:12px;background:#ffffff;border:1px solid #e7efe8;border-radius:11px}.chart-head{display:flex;justify-content:space-between;font-size:9px}.chart-head b{font-weight:500;color:#819484}.bars{height:70px;display:flex;align-items:end;gap:9px;padding-top:10px}.bars i{display:block;flex:1;border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,#50aa68,#006e31);opacity:.85}
.floating-card{position:absolute;z-index:3;background:#ffffff;border:1px solid #dae8dc;border-radius:12px;padding:11px 14px;box-shadow:0 15px 30px rgba(29,84,46,.15);display:flex;gap:7px;flex-direction:column;font-size:11px;animation:float 4s ease-in-out infinite}.floating-card strong{font-size:17px;color:#15986d}.floating-card small{color:#738776}.sales{left:2%;top:14%}.orders{right:1%;top:9%;animation-delay:.8s}.payment{right:0;bottom:12%;animation-delay:1.4s}@keyframes float{50%{transform:translateY(-9px)}}
.trust-strip{background:#ffffff;border-bottom:1px solid #e7efe8}.trust-inner{display:grid;grid-template-columns:repeat(4,1fr);padding:24px 0;gap:20px}.trust-inner>div{text-align:center;border-right:1px solid #e8eee9;font-size:13px;color:#748978}.trust-inner>div:last-child{border:0}.trust-inner strong{font-size:25px;color:var(--blue);margin-right:5px}.trust-inner span{font-size:11px}
.section{padding:74px 0}.section-heading{max-width:750px;margin-bottom:45px}.section-heading.centered{margin-left:auto;margin-right:auto;text-align:center}.section-heading h2{font-size:37px;line-height:1.12;letter-spacing:-1.3px;margin-bottom:15px}.section-heading p{font-size:14px;color:var(--muted);max-width:720px}.centered p{margin:auto}
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.feature-card{padding:25px 20px;border:1px solid var(--border);border-radius:17px;background:linear-gradient(180deg,#ffffff,#f8fbf9);box-shadow:0 10px 30px rgba(19,73,37,.05);transition:.3s}.feature-card:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(19,73,37,.1)}.feature-icon{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-weight:800;margin-bottom:17px}.feature-icon.blue{background:#e7f3e8;color:#007d39}.feature-icon.purple{background:#e7f0df;color:#527e00}.feature-icon.green{background:#e3f8f0;color:#0b9d70}.feature-icon.orange{background:#eef4e8;color:#72a722}.feature-card h3{font-size:15px;margin-bottom:8px}.feature-card p{font-size:11px;color:#738776;min-height:52px}
.mini-ui{height:98px;border:1px solid #e6eee7;border-radius:10px;background:#ffffff;margin-top:18px;padding:10px;display:flex}.mini-side{width:18px;background:#e9f4eb;border-radius:5px;margin-right:8px}.mini-lines{flex:1}.mini-lines i{display:block;height:5px;background:#eef3ee;margin-bottom:6px;border-radius:3px}.mini-bars{display:flex;height:50px;gap:5px;align-items:end;margin-top:10px}.mini-bars b{width:18%;height:50%;background:#a1cea9;border-radius:3px}.mini-bars b:nth-child(2){height:80%}.mini-bars b:nth-child(3){height:65%}.mini-bars b:nth-child(4){height:92%}
.ai-answer{display:flex;gap:8px;background:#edf3e6;border:1px solid #d8e7cb;border-radius:10px;padding:12px;margin-top:18px}.ai-answer>span{color:#527e00}.ai-answer small{display:block;font-size:8px;color:#656f5b}.ai-answer b{font-size:9px;display:block;margin-top:5px}.workflow{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-top:20px;font-size:8px}.workflow span{padding:7px;background:#f1faf6;border:1px solid #d9f0e6;border-radius:6px}.workflow b{color:#54a486}.connected{position:relative;height:98px;margin-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:7px}.connected span{background:#f8fbf9;border:1px solid #e3ece4;border-radius:7px;display:grid;place-items:center;font-size:8px}
.products-section{background:#f6fbf7}.product-layout{display:grid;grid-template-columns:1.6fr 1fr;gap:18px}.product-feature{position:relative;min-height:430px;border-radius:22px;overflow:hidden;background:linear-gradient(135deg,#00431b,#007936);color:#ffffff;padding:40px}.product-bg{position:absolute;inset:0;background:radial-gradient(circle at 85% 45%,rgba(255,255,255,.15),transparent 30%),linear-gradient(135deg,transparent 30%,rgba(0,27,7,.25))}.product-copy{position:relative;z-index:2;width:52%}.product-tag{font-size:9px;letter-spacing:1.2px;color:#b7e2bf;font-weight:800}.product-copy h3{font-size:31px;margin:10px 0 12px}.product-copy p{font-size:12px;color:#d2e7d5}.check-list{display:flex;gap:7px;flex-wrap:wrap;margin-top:18px}.check-list span{font-size:9px;color:#e9f4eb}.erp-mock{position:absolute;z-index:2;right:25px;bottom:25px;width:47%;height:280px;background:#ffffff;border-radius:13px;color:#14315f;padding:15px;box-shadow:0 25px 50px rgba(0,0,0,.2);transform:perspective(800px) rotateY(-8deg)}.erp-top{display:flex;justify-content:space-between;font-size:10px}.erp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:15px 0}.erp-stats span{background:#f5f8f6;padding:8px;border-radius:6px;font-size:7px;color:#758778}.erp-stats strong{display:block;font-size:11px;color:#14315f;margin-top:4px}.erp-chart{height:145px;display:flex;align-items:end;gap:10px;border-bottom:1px solid #e3ebe4}.erp-chart i{flex:1;background:linear-gradient(#73ba83,#007937);border-radius:4px 4px 0 0}.product-side{display:grid;grid-template-columns:1fr 1fr;gap:18px}.small-product{border:1px solid var(--border);border-radius:18px;padding:24px;background:#ffffff;display:flex;align-items:center}.small-product.purple-card{grid-column:1/3;background:linear-gradient(135deg,#eff5e9,#ffffff)}.small-product h3{font-size:15px;margin-bottom:5px}.small-product p{font-size:10px;color:#728676;margin-bottom:10px}.small-product a{font-size:10px;color:#00803a;font-weight:700}
.ai-section{position:relative;padding:78px 0;background:linear-gradient(120deg,#00270c,#004b1f 58%,#003614);color:#ffffff;overflow:hidden}.ai-glow{position:absolute;width:700px;height:700px;right:-150px;top:-200px;border-radius:50%;background:radial-gradient(circle,rgba(0,149,69,.28),transparent 65%)}.ai-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.ai-copy h2{font-size:42px;line-height:1.1;letter-spacing:-1.5px;margin-bottom:12px}.ai-copy h2 span{color:#7ccd8f}.ai-copy h4{font-size:16px;margin-bottom:15px}.ai-copy>p{font-size:13px;color:#bcd5c0;max-width:540px}.question-pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:25px}.question-pills button{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);color:#dceddf;border-radius:999px;padding:9px 12px;font-size:9px;cursor:pointer;transition:.2s}.question-pills button:hover{background:rgba(255,255,255,.14)}
.ai-chat{background:#ffffff;border-radius:18px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.3);color:#1a3156}.chat-header{display:flex;align-items:center;gap:9px;padding:16px 18px;border-bottom:1px solid #e8eee9}.ai-avatar{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,#007f39,#5b8c00);color:#ffffff;font-weight:800}.ai-avatar.small{width:27px;height:27px;border-radius:8px;flex:none}.chat-header b{font-size:12px;display:block}.chat-header small{font-size:8px;color:#809484}.online{margin-left:auto;width:7px;height:7px;border-radius:50%;background:#19b37e}.chat-body{padding:25px 20px;min-height:245px;background:#fbfdfb}.chat-user{background:#eaf4eb;border-radius:13px 13px 3px 13px;padding:12px;margin-left:22%;font-size:10px;color:#365e3f}.chat-ai{display:flex;gap:10px;margin-top:18px}.chat-ai p{font-size:10px;color:#59715e;background:#ffffff;border:1px solid #e5ede6;border-radius:3px 13px 13px 13px;padding:12px}.chat-actions{display:flex;gap:7px;margin-top:9px}.chat-actions button{border:1px solid #abceb1;color:#00803a;background:#ffffff;border-radius:7px;padding:7px 9px;font-size:8px}.chat-input{margin:0 14px 14px;padding:12px;border:1px solid #dce6de;border-radius:9px;font-size:9px;color:#87978a;display:flex;justify-content:space-between}.chat-input span{background:#00833b;color:#ffffff;border-radius:50%;width:20px;height:20px;display:grid;place-items:center}
.steps{display:grid;grid-template-columns:1fr 35px 1fr 35px 1fr 35px 1fr;align-items:center}.step{border:1px solid var(--border);border-radius:16px;padding:24px;min-height:245px;background:#ffffff;box-shadow:0 8px 25px rgba(19,73,37,.04)}.step-num{font-size:10px;font-weight:800;color:#2f8449;margin-bottom:18px}.step h3{font-size:17px;margin-bottom:9px}.step p{font-size:10px;color:#738877}.step-arrow{text-align:center;font-size:25px;color:#9fc0a5}.step-icons{margin-top:28px;font-size:20px;letter-spacing:9px;color:#1f8d47}.ai-chip{margin-top:25px;border:1px solid #cddfbd;background:#eef5e8;color:#527e00;padding:12px;border-radius:10px;text-align:center;font-weight:800}.tiny-btn{margin-top:20px;border:0;background:#eaf4ec;color:#00803a;padding:9px 12px;border-radius:7px;font-size:9px;font-weight:700}.growth{margin-top:25px;padding:12px;background:#ecfaf4;border-radius:9px;color:#4e7a69;font-size:10px}.growth b{color:#0b9d70;margin:0 6px}
.why-section{background:linear-gradient(180deg,#f6faf7,#ffffff)}.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:35px;align-items:center}.why-statement h2{font-size:34px;line-height:1.12;letter-spacing:-1px;margin-bottom:12px}.blue-text{color:#00803a}.why-points{display:grid;grid-template-columns:1fr 1fr;gap:18px}.why-point{padding:18px;border:1px solid var(--border);border-radius:13px;background:#ffffff}.why-point b{display:block;font-size:12px;margin-bottom:6px}.why-point span{font-size:10px;color:#718574}.founder-visual{grid-column:1/3;height:170px;border-radius:18px;background:linear-gradient(110deg,#ddefe0,#ffffff);position:relative;overflow:hidden}.person-card{position:absolute;right:10%;bottom:0;display:flex;align-items:center;gap:15px}.person-avatar{width:115px;height:115px;border-radius:50% 50% 0 0;background:linear-gradient(145deg,#bbdcc1,#72a77d);display:grid;place-items:center;color:#ffffff;font-size:50px;font-weight:800}.person-card b{font-size:14px;display:block}.person-card small{font-size:10px;color:#677f6b}
.ecosystem{background:#ffffff}.ecosystem-wrap{height:470px;position:relative;max-width:850px;margin:20px auto}.orbit{position:absolute;border:1px dashed #bbd3bf;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%)}.orbit-1{width:320px;height:320px}.orbit-2{width:460px;height:460px}.eco-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:130px;height:130px;border-radius:50%;background:linear-gradient(135deg,#005d28,#00833b);color:#ffffff;display:grid;place-items:center;text-align:center;font-size:14px;font-weight:800;box-shadow:0 20px 50px rgba(0,111,49,.28);z-index:2}.eco-node{position:absolute;width:95px;min-height:64px;border:1px solid #dce8de;background:#ffffff;border-radius:12px;box-shadow:0 10px 25px rgba(27,87,45,.08);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:17px;z-index:3}.eco-node b{font-size:9px;margin-top:4px}.n1{left:50%;top:2%;transform:translateX(-50%)}.n2{left:12%;top:23%}.n3{right:12%;top:23%}.n4{right:5%;top:55%}.n5{right:23%;bottom:3%}.n6{left:23%;bottom:3%}.n7{left:5%;top:55%}.n8{left:13%;bottom:20%}
.problem-section{background:#f6fbf7}.problem-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.problem-card,.solution-card{border-radius:20px;padding:38px;min-height:350px}.problem-card{background:#ffffff;border:1px solid #e5dfe0}.solution-card{background:linear-gradient(135deg,#eff7f0,#ffffff);border:1px solid #d0e6d4}.problem-card h3,.solution-card h3{font-size:26px;line-height:1.2;margin-bottom:20px}.problem-card h3 span{color:#b64d4d}.solution-card h3 span{color:#00813b}.problem-card ul,.solution-card ul{list-style:none;display:grid;gap:12px;font-size:12px;color:#657869}.problem-card li:before{content:"×";color:#e16b6b;font-weight:800;margin-right:10px}.solution-card li{color:#4c6752}.solution-mini{margin-top:25px;border:1px solid #dae8dd;border-radius:12px;background:#ffffff;padding:13px;display:flex;align-items:center;gap:8px;font-size:10px}.pulse-dot{width:8px;height:8px;background:#20af7c;border-radius:50%;box-shadow:0 0 0 5px #e3f8f0}.solution-bars{margin-left:auto;display:flex;gap:4px;align-items:end;height:25px}.solution-bars i{width:8px;height:13px;background:#92c99d;border-radius:2px}.solution-bars i:nth-child(2){height:19px}.solution-bars i:nth-child(3){height:15px}.solution-bars i:nth-child(4){height:24px}
.industry-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:10px}.industry-card{height:190px;border-radius:13px;position:relative;overflow:hidden;padding:14px;color:#ffffff;background:linear-gradient(160deg,#074820,#198642);display:flex;flex-direction:column;justify-content:flex-end;box-shadow:0 10px 25px rgba(3,75,32,.13);transition:.3s}.industry-card:hover{transform:translateY(-5px)}.industry-card:nth-child(2){background:linear-gradient(160deg,#5b3d84,#9a6bdb)}.industry-card:nth-child(3){background:linear-gradient(160deg,#6b4b24,#c08b3f)}.industry-card:nth-child(4){background:linear-gradient(160deg,#33553b,#67a274)}.industry-card:nth-child(5){background:linear-gradient(160deg,#763f55,#c66c82)}.industry-card:nth-child(6){background:linear-gradient(160deg,#415b46,#6c9574)}.industry-card:nth-child(7){background:linear-gradient(160deg,#323e34,#68776b)}.industry-card:nth-child(8){background:linear-gradient(160deg,#4a554b,#869989)}.industry-card:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 30%,rgba(0,0,0,.55))}.industry-card div,.industry-card b,.industry-card span{position:relative;z-index:2}.industry-card div{font-size:30px;margin-bottom:auto}.industry-card b{font-size:12px}.industry-card span{font-size:8px;margin-top:3px;color:#ddefe0}
.cta-section{position:relative;background:linear-gradient(115deg,#003715,#007032 65%,#003f19);padding:70px 0;color:#ffffff;overflow:hidden}.cta-glow{position:absolute;right:-80px;top:-120px;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(110,188,129,.3),transparent 65%)}.cta-inner{position:relative;display:flex;align-items:center;justify-content:space-between}.cta-inner h2{font-size:38px;line-height:1.1;margin-bottom:12px}.cta-inner h2 span{color:#81ce93}.cta-inner p{font-size:12px;color:#c7decb;max-width:650px;margin-bottom:20px}.cta-ai{display:flex;align-items:center;gap:18px;font-weight:700;font-size:20px;line-height:1.15}.cta-ai>div{width:85px;height:85px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#00833b,#588800);font-size:34px;box-shadow:0 0 45px rgba(70,170,99,.5)}
.footer{background:#ffffff;padding:45px 0 18px}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px}.footer-grid p{font-size:10px;color:#819484;margin-top:9px}.footer-grid>div:not(:first-child){display:flex;flex-direction:column;gap:10px;font-size:11px;color:#657968}.footer-grid>div:not(:first-child) a:hover{color:#00813b}.footer-bottom{border-top:1px solid #e8eee9;margin-top:30px;padding-top:15px;display:flex;justify-content:space-between;color:#94a396;font-size:9px}
.reveal{opacity:0;transform:translateY(25px);transition:opacity .7s ease,transform .7s ease}.reveal.visible{opacity:1;transform:none}
@media(max-width:1000px){.desktop-nav{gap:18px}.feature-grid{grid-template-columns:repeat(2,1fr)}.industry-grid{grid-template-columns:repeat(4,1fr)}.steps{grid-template-columns:1fr 1fr;gap:15px}.step-arrow{display:none}.product-layout{grid-template-columns:1fr}.product-side{grid-template-columns:repeat(3,1fr)}.small-product.purple-card{grid-column:auto}.hero-grid{grid-template-columns:1fr}.hero-copy{text-align:center}.hero-copy>p{margin-left:auto;margin-right:auto}.hero-actions,.hero-benefits{justify-content:center}.hero-visual{max-width:700px;margin:auto;width:100%}.ai-grid{grid-template-columns:1fr}.why-grid{grid-template-columns:1fr}.founder-visual{grid-column:auto}.ecosystem-wrap{transform:scale(.9);transform-origin:center}.cta-inner{gap:30px}}
@media(max-width:700px){.nav{height:66px}.desktop-nav,.nav-cta{display:none}.menu-toggle{display:block;margin-left:auto}.mobile-menu{display:none;background:#ffffff;border-top:1px solid #e8efe9;padding:15px 4%;box-shadow:0 10px 20px rgba(0,0,0,.05)}.mobile-menu.open{display:flex;flex-direction:column;gap:15px;font-size:14px;font-weight:600}.hero{min-height:auto}.hero-grid{padding:55px 0 40px}.hero h1{font-size:38px}.hero-visual{min-height:360px}.dashboard-window{transform:none}.floating-card{display:none}.trust-inner{grid-template-columns:repeat(2,1fr)}.trust-inner>div:nth-child(2){border:0}.section{padding:54px 0}.section-heading h2{font-size:29px}.feature-grid{grid-template-columns:1fr}.product-feature{padding:28px;min-height:590px}.product-copy{width:100%}.erp-mock{width:88%;right:6%;bottom:25px}.product-side{grid-template-columns:1fr}.small-product.purple-card{grid-column:auto}.ai-copy h2{font-size:34px}.steps{grid-template-columns:1fr}.why-points{grid-template-columns:1fr}.founder-visual{height:130px}.person-card{right:4%}.person-avatar{width:90px;height:90px;font-size:38px}.ecosystem-wrap{height:390px;transform:scale(.72)}.problem-grid{grid-template-columns:1fr}.industry-grid{grid-template-columns:repeat(2,1fr)}.industry-card{height:160px}.cta-inner{flex-direction:column;align-items:flex-start}.cta-inner h2{font-size:31px}.cta-ai{align-self:flex-end}.footer-grid{grid-template-columns:1fr 1fr}.footer-grid>div:first-child{grid-column:1/3}.footer-bottom{flex-direction:column;gap:6px}.hero-benefits{gap:12px}.metric-row{gap:5px}.metric{padding:9px}.metric b{font-size:11px}}
/* ==========================================================================
GENZERP — INNER PAGES LAYER
Shared components for about.html / services.html / products.html / contact.html
Extends (never replaces) the homepage design system above.
========================================================================== */
/* --- Utilities, accessibility, shared bits ------------------------------- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:2000;background:var(--brand-deep);color:#ffffff;padding:12px 20px;border-radius:0 0 12px 0;font-size:13px;font-weight:700}
.skip-link:focus{left:0}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #00823b;outline-offset:3px;border-radius:6px}
.desktop-nav a.active{color:var(--blue2)}
.desktop-nav a.active:after{content:"";display:block;height:2px;border-radius:2px;margin-top:5px;background:linear-gradient(90deg,#00823b,#548000)}
.mobile-menu a.active{color:var(--blue2)}
.reveal.d1{transition-delay:.07s}.reveal.d2{transition-delay:.14s}.reveal.d3{transition-delay:.21s}
.reveal.d4{transition-delay:.28s}.reveal.d5{transition-delay:.35s}.reveal.d6{transition-delay:.42s}
.section-alt{background:#f6fbf7}
.section-tight{padding:74px 0}
.lede{font-size:15px;color:var(--muted);max-width:660px}
.eyebrow.purple{color:#527e00}
.mt-lg{margin-top:34px}
/* --- Inner page hero ----------------------------------------------------- */
.page-hero{position:relative;overflow:hidden;border-bottom:1px solid #e6f0e7;
background:linear-gradient(135deg,#ffffff 0%,#f3f9f4 55%,#e9f4eb 100%)}
.page-hero:after{content:"";position:absolute;width:760px;height:760px;right:-320px;top:-330px;border-radius:50%;
background:radial-gradient(circle,rgba(34,160,80,.18),transparent 67%);pointer-events:none}
.page-hero-dots{position:absolute;inset:0;opacity:.5;pointer-events:none;
background-image:radial-gradient(#bad6bf 1px,transparent 1px);background-size:34px 34px;
-webkit-mask-image:linear-gradient(90deg,transparent,#000000 45%,#000000);mask-image:linear-gradient(90deg,transparent,#000000 45%,#000000)}
.crumbs{position:relative;z-index:2;display:flex;gap:8px;align-items:center;font-size:11px;color:#7b927f;padding-top:20px;font-weight:600}
.crumbs a:hover{color:#00823b}.crumbs i{font-style:normal;color:#b6c7b9}
.page-hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:47% 53%;gap:44px;align-items:center;padding:52px 0 76px}
.page-hero-inner.solo{grid-template-columns:1fr;text-align:center;max-width:840px;margin:auto;padding:60px 0 74px}
.page-hero h1{font-size:46px;line-height:1.06;letter-spacing:-1.9px;font-weight:800;margin-bottom:18px}
.page-hero h1 span{color:#00813b}
.page-hero-copy>p{font-size:16px;color:#536957;max-width:530px;margin-bottom:26px}
.page-hero-inner.solo p{margin-left:auto;margin-right:auto}
.page-hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.page-hero-inner.solo .page-hero-actions{justify-content:center}
.hero-tags{display:flex;gap:18px;flex-wrap:wrap;margin-top:26px;font-size:11px;font-weight:600;color:#6f8573}
.page-hero-inner.solo .hero-tags{justify-content:center}
/* --- Value chain visual (About hero) ------------------------------------- */
.chain-card{position:relative;background:#ffffff;border:1px solid #d9e8db;border-radius:20px;padding:22px;
box-shadow:0 30px 70px rgba(13,86,40,.16)}
.chain-card:before{content:"";position:absolute;inset:-18px -18px auto auto;width:170px;height:170px;border-radius:50%;
background:radial-gradient(circle,rgba(84,128,0,.16),transparent 70%);z-index:-1}
.chain-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:14px;border-bottom:1px solid #eef3ee;margin-bottom:6px}
.chain-head span{font-size:9px;letter-spacing:1.3px;font-weight:800;color:#2f8449}
.chain-head b{font-size:11px;color:#7b927f;font-weight:600}
.chain{position:relative;padding:10px 0}
.chain-spine{position:absolute;left:19px;top:26px;bottom:26px;width:2px;border-radius:2px;
background:linear-gradient(180deg,#d0e4d3,#00823b 45%,#548000 75%,#13a878)}
.chain-pulse{position:absolute;left:-4px;width:10px;height:10px;border-radius:50%;background:#00823b;
box-shadow:0 0 0 5px rgba(0,130,59,.14);animation:chainPulse 4.4s linear infinite}
@keyframes chainPulse{0%{top:0;opacity:0}8%{opacity:1}88%{opacity:1}100%{top:100%;opacity:0}}
.chain-row{position:relative;display:flex;align-items:center;gap:13px;padding:9px 0}
.chain-icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:16px;flex:none;
background:#e7f3e8;color:#007d39;border:3px solid #ffffff;box-shadow:0 4px 12px rgba(19,73,37,.1)}
.chain-icon.purple{background:#e7f0df;color:#527e00}.chain-icon.green{background:#e3f8f0;color:#0b9d70}
.chain-icon.orange{background:#eef4e8;color:#72a722}.chain-icon.navy{background:#e4efe5;color:#0a2f73}
.chain-row b{display:block;font-size:13px}
.chain-row small{display:block;font-size:10px;color:#829585;margin-top:2px}
.chain-tag{margin-left:auto;font-size:9px;font-weight:700;color:#00803a;background:#eef6ef;border:1px solid #dceddf;
border-radius:999px;padding:5px 9px;white-space:nowrap}
.chain-tag.g{color:#0b9d70;background:#eefaf5;border-color:#d5f0e5}
.chain-spark{margin-left:auto;display:flex;align-items:flex-end;gap:3px;height:24px}
.chain-spark i{width:6px;border-radius:2px;background:#9fdcc6}
.chain-spark i:nth-child(1){height:38%}.chain-spark i:nth-child(2){height:56%}
.chain-spark i:nth-child(3){height:46%}.chain-spark i:nth-child(4){height:76%}.chain-spark i:nth-child(5){height:100%;background:#13a878}
/* --- Split section (copy + panel) ---------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split.wide-left{grid-template-columns:1.15fr 1fr}
.split h2{font-size:34px;line-height:1.14;letter-spacing:-1.2px;margin-bottom:16px}
.split p{font-size:14px;color:var(--muted);margin-bottom:14px;max-width:560px}
.split p strong{color:var(--text)}
/* --- Glance stats panel --------------------------------------------------- */
.glance{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.glance-stat{border:1px solid var(--border);border-radius:16px;padding:22px;background:linear-gradient(180deg,#ffffff,#f8fbf9);
box-shadow:0 10px 30px rgba(19,73,37,.05)}
.glance-stat b{display:block;font-size:30px;color:var(--blue);letter-spacing:-1px;line-height:1}
.glance-stat>span{display:block;font-size:11px;color:#738776;margin-top:8px}
.glance-stat.accent{background:linear-gradient(135deg,#00481e,#00823b);border-color:transparent;color:#ffffff}
.glance-stat.accent b{color:#ffffff}.glance-stat.accent>span{color:#c4e0c8}
/* --- Timeline ------------------------------------------------------------ */
.tl{position:relative}
.tl-track{position:relative;display:grid;grid-template-columns:repeat(7,1fr)}
.tl-track:before{content:"";position:absolute;left:2%;right:2%;top:50%;height:2px;border-radius:2px;
background:linear-gradient(90deg,#d0e4d3,#00823b 45%,#548000 80%,#13a878)}
.tl-item{position:relative;min-height:298px}
.tl-dot{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:15px;height:15px;border-radius:50%;
background:#ffffff;border:3px solid #00823b;box-shadow:0 0 0 5px rgba(0,130,59,.1);z-index:2}
.tl-item:nth-child(6) .tl-dot{border-color:#548000;box-shadow:0 0 0 5px rgba(84,128,0,.12)}
.tl-item:nth-child(7) .tl-dot{border-color:#13a878;box-shadow:0 0 0 5px rgba(19,168,120,.12)}
.tl-card{position:absolute;left:7px;right:7px;border:1px solid var(--border);border-radius:14px;background:#ffffff;
padding:15px 14px;box-shadow:0 10px 26px rgba(19,73,37,.06);transition:.3s}
.tl-card:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(19,73,37,.11)}
.tl-item:nth-child(odd) .tl-card{bottom:calc(50% + 30px)}
.tl-item:nth-child(even) .tl-card{top:calc(50% + 30px)}
.tl-stage{font-size:9px;font-weight:800;letter-spacing:1px;color:#2f8449}
.tl-card b{display:block;font-size:13px;margin:7px 0 5px}
.tl-card p{font-size:10px;color:#7b927f;line-height:1.5}
.tl-note{text-align:center;font-size:11px;color:#8a9c8d;margin-top:28px}
.tl-hint{display:none;align-items:center;gap:7px;font-size:10.5px;font-weight:700;letter-spacing:.4px;
color:#7b927f;margin-bottom:14px}
.tl-hint i{font-style:normal;animation:nudge 2s ease-in-out infinite;color:#00823b}
/* --- Belief / principle cards -------------------------------------------- */
.belief-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.belief-card{position:relative;overflow:hidden;padding:28px 22px 24px;border:1px solid var(--border);border-radius:18px;
background:linear-gradient(180deg,#ffffff,#f8fbf9);box-shadow:0 10px 30px rgba(19,73,37,.05);transition:.3s}
.belief-card:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(19,73,37,.1)}
.belief-num{position:absolute;right:16px;top:10px;font-size:42px;font-weight:800;color:#eef5ef;letter-spacing:-2px}
.belief-card h3{font-size:16px;margin:16px 0 9px;position:relative}
.belief-card p{font-size:12px;color:#738776;line-height:1.6;position:relative}
/* --- Vision band (dark) --------------------------------------------------- */
.vision-band{position:relative;overflow:hidden;padding:108px 0;color:#ffffff;text-align:center;
background:linear-gradient(120deg,#00270c,#004b1f 58%,#003614)}
.vision-net{position:absolute;inset:0;opacity:.5;
background-image:radial-gradient(rgba(128,194,142,.35) 1px,transparent 1px);background-size:30px 30px;
-webkit-mask-image:radial-gradient(circle at 50% 50%,#000000,transparent 72%);mask-image:radial-gradient(circle at 50% 50%,#000000,transparent 72%)}
.vision-ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:1px dashed rgba(144,201,156,.22);border-radius:50%}
.vision-ring.r1{width:460px;height:460px}.vision-ring.r2{width:700px;height:700px}.vision-ring.r3{width:940px;height:940px}
.vision-glow{position:absolute;width:620px;height:620px;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;
background:radial-gradient(circle,rgba(28,159,78,.28),transparent 66%);animation:breathe 8s ease-in-out infinite}
@keyframes breathe{50%{transform:translate(-50%,-50%) scale(1.12);opacity:.75}}
.vision-inner{position:relative;z-index:2;max-width:900px;margin:auto}
.vision-inner h2{font-size:40px;line-height:1.18;letter-spacing:-1.4px;margin:14px 0 20px;font-weight:800}
.vision-inner h2 span{color:#92d4a0}
.vision-inner p{font-size:14px;color:#bcd5c0;max-width:620px;margin:auto}
.vision-chips{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.vision-chips span{font-size:10px;font-weight:700;color:#dceddf;background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:9px 15px}
/* --- Mission list --------------------------------------------------------- */
.mission-list{display:grid;gap:12px}
.mission-item{display:flex;gap:14px;align-items:flex-start;padding:17px 18px;border:1px solid var(--border);
border-radius:14px;background:#ffffff;transition:.25s}
.mission-item:hover{border-color:#bddbc3;transform:translateX(4px)}
.mission-item .mi-ico{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;font-size:14px;
background:#e7f3e8;color:#007d39}
.mission-item:nth-child(2) .mi-ico{background:#e7f0df;color:#527e00}
.mission-item:nth-child(3) .mi-ico{background:#e3f8f0;color:#0b9d70}
.mission-item:nth-child(4) .mi-ico{background:#eef4e8;color:#72a722}
.mission-item:nth-child(5) .mi-ico{background:#e4efe5;color:#0a2f73}
.mission-item b{display:block;font-size:13px;margin-bottom:3px}
.mission-item span{font-size:11px;color:#7b927f}
/* --- Reason cards (Why Genzerp) ---------------------------------------- */
.reason-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.reason-card{padding:26px 22px;border:1px solid var(--border);border-radius:18px;background:#ffffff;transition:.3s;position:relative;overflow:hidden}
.reason-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,#00823b,#548000)}
.reason-card:nth-child(2):before{background:linear-gradient(180deg,#548000,#00823b)}
.reason-card:nth-child(3):before{background:linear-gradient(180deg,#13a878,#00823b)}
.reason-card:nth-child(4):before{background:linear-gradient(180deg,#8cc63f,#9bcf5e)}
.reason-card:hover{transform:translateY(-5px);box-shadow:0 20px 40px rgba(19,73,37,.09)}
.reason-card .r-ico{font-size:20px;color:#00803a;margin-bottom:14px;display:block}
.reason-card h3{font-size:15px;margin-bottom:8px}
.reason-card p{font-size:11px;color:#7b927f;line-height:1.6}
/* ==========================================================================
SERVICES PAGE
========================================================================== */
/* --- Platform stack visual (hero) ---------------------------------------- */
.stack-visual{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px 0}
.stack-visual:before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:520px;height:420px;
border-radius:50%;background:radial-gradient(circle,rgba(34,160,80,.2),transparent 66%);z-index:0}
.stack-layer{position:relative;z-index:1;display:flex;align-items:center;gap:13px;width:100%;padding:15px 18px;
border-radius:15px;border:1px solid #d9e8db;background:#ffffff;box-shadow:0 14px 34px rgba(13,86,40,.1);animation:float 6s ease-in-out infinite}
.stack-layer:nth-child(2){animation-delay:.4s}.stack-layer:nth-child(3){animation-delay:.8s}
.stack-layer:nth-child(4){animation-delay:1.2s}.stack-layer:nth-child(5){animation-delay:1.6s}
.stack-layer .sl-ico{width:36px;height:36px;flex:none;border-radius:11px;display:grid;place-items:center;font-size:15px;font-weight:800}
.stack-layer b{display:block;font-size:13px}
.stack-layer small{display:block;font-size:10px;color:#829585;margin-top:2px}
.stack-layer .sl-chip{margin-left:auto;font-size:9px;font-weight:700;padding:5px 9px;border-radius:999px;white-space:nowrap}
.sl-top{width:76%;background:linear-gradient(135deg,#ffffff,#f4faf5)}
.sl-top .sl-ico{background:#e4efe5;color:#0a2f73}.sl-top .sl-chip{background:#eef6ef;color:#00803a}
.sl-ai{width:84%}.sl-ai .sl-ico{background:#e7f0df;color:#527e00}.sl-ai .sl-chip{background:#edf4e7;color:#527e00}
.sl-auto{width:92%}.sl-auto .sl-ico{background:#e3f8f0;color:#0b9d70}.sl-auto .sl-chip{background:#eefaf5;color:#0b9d70}
.sl-soft{width:100%}.sl-soft .sl-ico{background:#e7f3e8;color:#007d39}.sl-soft .sl-chip{background:#eef6ef;color:#00803a}
.sl-base{width:100%;background:linear-gradient(120deg,#003614,#007032);border-color:transparent;color:#ffffff}
.sl-base b{color:#ffffff}.sl-base small{color:#b5d5bb}
.sl-base .sl-ico{background:rgba(255,255,255,.16);color:#ffffff}
.sl-base .sl-chip{background:rgba(255,255,255,.14);color:#dceddf}
/* --- Service index chips -------------------------------------------------- */
.svc-index{display:flex;gap:9px;flex-wrap:wrap;padding:22px 0 0}
.svc-index a{font-size:11px;font-weight:700;color:#405844;background:#ffffff;border:1px solid var(--border);
border-radius:999px;padding:9px 15px;transition:.22s}
.svc-index a:hover{border-color:#00823b;color:#00823b;transform:translateY(-2px);box-shadow:0 8px 18px rgba(19,73,37,.08)}
/* --- Alternating service rows -------------------------------------------- */
.svc-row{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;padding:66px 0;border-top:1px solid #eaf2eb}
.svc-row:first-of-type{border-top:0}
.svc-row.flip .svc-copy{order:2}
.svc-num{display:inline-flex;align-items:center;gap:9px;font-size:10px;font-weight:800;letter-spacing:1.3px;color:#2f8449;margin-bottom:14px}
.svc-num i{font-style:normal;width:26px;height:26px;border-radius:8px;background:#e7f3e8;display:grid;place-items:center;font-size:11px}
.svc-copy h2{font-size:31px;line-height:1.14;letter-spacing:-1.1px;margin-bottom:13px}
.svc-copy>p{font-size:14px;color:var(--muted);max-width:520px;margin-bottom:18px}
.svc-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.svc-chips span{font-size:10px;font-weight:600;color:#405844;background:#f4f9f5;border:1px solid #e2ede4;border-radius:8px;padding:7px 11px}
.svc-link{font-size:12px;font-weight:700;color:#00803a;display:inline-flex;gap:6px;align-items:center;transition:.2s}
.svc-link:hover{gap:11px}
.callout{border-left:3px solid #548000;background:linear-gradient(90deg,#f1f6ed,#ffffff);border-radius:0 12px 12px 0;
padding:16px 18px;margin-bottom:20px}
.callout p{font-size:13px;color:#394f3d;font-style:italic;margin:0;max-width:none}
.svc-visual{position:relative;min-height:300px;display:flex;align-items:center;justify-content:center}
/* --- Generic mock panel --------------------------------------------------- */
.panel{width:100%;background:#ffffff;border:1px solid #dce8de;border-radius:18px;box-shadow:0 26px 60px rgba(13,86,40,.14);overflow:hidden}
.panel-bar{display:flex;align-items:center;gap:7px;padding:12px 15px;border-bottom:1px solid #eaf1ec;background:#fcfefc}
.panel-bar i{width:8px;height:8px;border-radius:50%;background:#e1eae2;display:block}
.panel-bar i:nth-child(1){background:#b7cda3}.panel-bar i:nth-child(2){background:#cfe6b9}.panel-bar i:nth-child(3){background:#b6dfc6}
.panel-bar b{margin-left:8px;font-size:10px;color:#7b927f;font-weight:600}
.panel-bar .url{margin-left:auto;font-size:9px;color:#9bae9e;background:#f2f7f3;border-radius:999px;padding:4px 11px}
.panel-body{padding:16px}
/* --- Business software mock ----------------------------------------------- */
.bs-mock{display:flex;min-height:250px}
.bs-side{width:112px;flex:none;background:#004b1f;padding:14px 11px;display:flex;flex-direction:column;gap:5px}
.bs-side .bs-logo{display:flex;align-items:center;gap:7px;color:#ffffff;font-size:11px;font-weight:800;margin-bottom:11px}
.bs-side .bs-logo em{font-style:normal;width:21px;height:21px;border-radius:6px;background:#ffffff;color:#0a2f73;display:grid;place-items:center;font-size:10px}
.bs-side span{font-size:9px;color:#b6dbbd;padding:6px 8px;border-radius:6px}
.bs-side span.on{background:rgba(255,255,255,.14);color:#ffffff;font-weight:700}
.bs-main{flex:1;padding:15px;background:#fcfefc;min-width:0}
.bs-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.bs-kpis div{background:#ffffff;border:1px solid #e7efe8;border-radius:9px;padding:9px}
.bs-kpis small{display:block;font-size:8px;color:#829585}
.bs-kpis b{display:block;font-size:13px;margin-top:3px}
.bs-kpis em{font-style:normal;font-size:8px;color:#14a36f}
.bs-table{background:#ffffff;border:1px solid #e7efe8;border-radius:9px;overflow:hidden}
.bs-tr{display:grid;grid-template-columns:1.4fr 1fr 62px;gap:8px;align-items:center;padding:9px 11px;font-size:9px;border-top:1px solid #f0f5f1}
.bs-tr:first-child{border-top:0;background:#f6faf7;color:#829585;font-weight:700}
.bs-bar{height:5px;border-radius:3px;background:#eaf1ec;overflow:hidden}
.bs-bar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#50aa68,#006e31)}
.bs-pill{font-size:8px;font-weight:700;text-align:center;border-radius:999px;padding:3px 0}
.bs-pill.ok{background:#eefaf5;color:#0b9d70}.bs-pill.warn{background:#f1f7eb;color:#6a9b24}.bs-pill.run{background:#eef6ef;color:#00803a}
/* --- AI insight mock ------------------------------------------------------ */
.ai-mock .panel-bar{background:linear-gradient(120deg,#003614,#007032);border-bottom-color:transparent}
.ai-mock .panel-bar b{color:#cee6d2}
.ai-mock .panel-bar i{background:rgba(255,255,255,.3)}
.ai-q{background:#eaf4eb;border-radius:13px 13px 3px 13px;padding:12px 13px;font-size:11px;color:#365e3f;margin-left:18%}
.ai-a{display:flex;gap:10px;margin-top:14px}
.ai-a .av{width:28px;height:28px;flex:none;border-radius:9px;display:grid;place-items:center;color:#ffffff;font-weight:800;font-size:12px;
background:linear-gradient(135deg,#007f39,#5b8c00)}
.ai-a .ab{flex:1;background:#ffffff;border:1px solid #e5ede6;border-radius:3px 13px 13px 13px;padding:13px}
.ai-a p{font-size:11px;color:#59715e;margin:0 0 10px;max-width:none}
.ai-a p b{color:var(--text)}
.ai-bars{display:grid;gap:7px}
.ai-bars div{display:grid;grid-template-columns:74px 1fr 40px;gap:8px;align-items:center;font-size:9px;color:#7b927f}
.ai-bars i{height:6px;border-radius:3px;background:linear-gradient(90deg,#5b8c00,#007f39);display:block}
.ai-bars em{font-style:normal;text-align:right;color:var(--text);font-weight:700}
.ai-foot{display:flex;gap:7px;margin-top:12px}
.ai-foot button{border:1px solid #abceb1;color:#00803a;background:#ffffff;border-radius:8px;padding:7px 11px;font-size:9px;font-weight:700;cursor:pointer;transition:.2s}
.ai-foot button:hover{background:#eef6ef}
/* --- Flow line (automation / philosophy) ---------------------------------- */
.flowline{display:flex;align-items:stretch;gap:0;flex-wrap:nowrap;width:100%}
.flow-node{flex:1;min-width:0;text-align:center;padding:18px 12px;border:1px solid var(--border);border-radius:15px;background:#ffffff;
box-shadow:0 10px 26px rgba(19,73,37,.06);transition:.3s}
.flow-node:hover{transform:translateY(-5px);box-shadow:0 18px 36px rgba(19,73,37,.1)}
.flow-node .fn-ico{width:36px;height:36px;margin:0 auto 11px;border-radius:11px;display:grid;place-items:center;font-size:15px;background:#e7f3e8;color:#007d39}
.flow-node b{display:block;font-size:12px;margin-bottom:4px}
.flow-node small{display:block;font-size:9px;color:#829585;line-height:1.5}
.flow-node.p .fn-ico{background:#e7f0df;color:#527e00}
.flow-node.g .fn-ico{background:#e3f8f0;color:#0b9d70}
.flow-node.o .fn-ico{background:#eef4e8;color:#72a722}
.flow-arrow{display:grid;place-items:center;padding:0 9px;color:#b0d0b6;font-size:17px;flex:none}
.flow-arrow.anim{animation:nudge 2.2s ease-in-out infinite}
.flow-arrow:nth-of-type(4){animation-delay:.3s}.flow-arrow:nth-of-type(6){animation-delay:.6s}
@keyframes nudge{50%{transform:translateX(4px);color:#00823b}}
/* --- Application cards (web + mobile) ------------------------------------- */
.app-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.app-card{border:1px solid var(--border);border-radius:20px;background:linear-gradient(180deg,#ffffff,#f8fbf9);
padding:30px;box-shadow:0 12px 34px rgba(19,73,37,.06);transition:.3s;display:flex;flex-direction:column}
.app-card:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(19,73,37,.11)}
.app-card h3{font-size:22px;letter-spacing:-.6px;margin:14px 0 10px}
.app-card p{font-size:13px;color:var(--muted);margin-bottom:16px}
.app-visual{margin-top:auto;padding-top:20px}
/* --- Browser mock ---------------------------------------------------------- */
.browser{border:1px solid #dce8de;border-radius:13px;overflow:hidden;background:#ffffff;box-shadow:0 16px 34px rgba(13,86,40,.1)}
.browser-body{padding:13px;background:#fcfefc;display:grid;gap:9px}
.browser-hero{height:52px;border-radius:8px;background:linear-gradient(120deg,#007032,#27a152)}
.browser-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.browser-cols i{height:44px;border-radius:7px;background:#eaf3eb;display:block}
.browser-lines i{display:block;height:6px;border-radius:3px;background:#eef3ee;margin-bottom:6px}
.browser-lines i:last-child{width:55%;margin-bottom:0}
/* --- Phone mock ------------------------------------------------------------ */
.phones{display:flex;gap:16px;justify-content:center;align-items:flex-end}
.phone{width:150px;flex:none;border-radius:22px;border:1px solid #d7e5d9;background:#ffffff;padding:9px;
box-shadow:0 20px 44px rgba(13,86,40,.16)}
.phone.back{transform:translateY(14px) scale(.92);opacity:.95}
.phone-notch{width:42px;height:4px;border-radius:3px;background:#dde8df;margin:2px auto 8px}
.phone-screen{border-radius:15px;overflow:hidden;background:#f6faf7;min-height:210px;display:flex;flex-direction:column}
.ph-top{background:linear-gradient(120deg,#00481e,#00823b);color:#ffffff;padding:11px 11px 14px}
.ph-top small{font-size:7px;color:#c2e5c8;display:block}
.ph-top b{font-size:10px;display:block;margin-top:2px}
.ph-body{padding:9px;display:grid;gap:7px;flex:1}
.ph-card{background:#ffffff;border:1px solid #e7efe8;border-radius:8px;padding:8px}
.ph-card small{display:block;font-size:6.5px;color:#829585}
.ph-card b{display:block;font-size:10px;margin-top:2px}
.ph-rows i{display:block;height:5px;border-radius:3px;background:#eaf0eb;margin-bottom:5px}
.ph-rows i:nth-child(2){width:72%}.ph-rows i:nth-child(3){width:86%}
.ph-cta{margin-top:auto;background:linear-gradient(100deg,#007333,#009243);color:#ffffff;text-align:center;
border-radius:7px;padding:7px;font-size:7.5px;font-weight:700}
.ph-nav{display:flex;justify-content:space-around;padding:7px 0;background:#ffffff;border-top:1px solid #eef3ee;font-size:9px;color:#a7b9aa}
.ph-nav span:first-child{color:#00823b}
/* --- Old way / Genzerp way shift ---------------------------------------- */
.shift{display:grid;grid-template-columns:1fr 58px 1fr;gap:0;align-items:stretch}
.shift-col{border-radius:18px;padding:28px}
.shift-col.old{background:#ffffff;border:1px solid #e7dedf}
.shift-col.new{background:linear-gradient(135deg,#eff7f0,#ffffff);border:1px solid #d0e6d4}
.shift-col h4{font-size:11px;letter-spacing:1.3px;font-weight:800;margin-bottom:18px}
.shift-col.old h4{color:#b06a6a}.shift-col.new h4{color:#00803a}
.shift-col ul{list-style:none;display:grid;gap:11px;font-size:13px;color:#657869}
.shift-col.old li:before{content:"×";color:#e16b6b;font-weight:800;margin-right:10px}
.shift-col.new li:before{content:"✓";color:#13a878;font-weight:800;margin-right:10px}
.shift-mid{display:grid;place-items:center}
.shift-mid span{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#ffffff;font-size:18px;
background:linear-gradient(135deg,#00823b,#548000);box-shadow:0 12px 28px rgba(19,73,37,.2)}
/* --- Integration hub -------------------------------------------------------- */
.hub{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;width:100%}
.hub-col{display:grid;gap:10px}
.hub-chip{display:flex;align-items:center;gap:9px;padding:11px 13px;border:1px solid var(--border);border-radius:12px;
background:#ffffff;font-size:11px;font-weight:600;box-shadow:0 8px 20px rgba(19,73,37,.05);transition:.25s}
.hub-chip:hover{border-color:#bddbc3;transform:translateY(-3px)}
.hub-chip em{font-style:normal;font-size:14px}
.hub-col.right .hub-chip{flex-direction:row-reverse;text-align:right}
.hub-center{width:104px;height:104px;border-radius:50%;display:grid;place-items:center;text-align:center;
font-size:11px;font-weight:800;color:#ffffff;line-height:1.25;
background:linear-gradient(135deg,#005d28,#00833b);box-shadow:0 18px 44px rgba(0,111,49,.3)}
.hub-center:before,.hub-center:after{content:"";position:absolute;border:1px dashed #bbd3bf;border-radius:50%}
.hub-wrap{position:relative;display:grid;place-items:center}
.hub-ring{position:absolute;border:1px dashed #c2d8c5;border-radius:50%;width:150px;height:150px;animation:spin 26s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* --- Product pipeline ------------------------------------------------------- */
.pipeline{width:100%;border:1px solid var(--border);border-radius:18px;background:#ffffff;padding:26px;box-shadow:0 16px 40px rgba(19,73,37,.07)}
.pipe-rail{position:relative;display:grid;grid-template-columns:repeat(4,1fr);margin-bottom:22px}
.pipe-rail:before{content:"";position:absolute;left:8%;right:8%;top:13px;height:3px;border-radius:3px;background:#e5f0e7}
.pipe-rail:after{content:"";position:absolute;left:8%;top:13px;height:3px;border-radius:3px;width:0;
background:linear-gradient(90deg,#00823b,#548000);transition:width 1.6s ease .2s}
.pipeline.visible .pipe-rail:after{width:84%}
.pipe-step{position:relative;text-align:center}
.pipe-step i{position:relative;z-index:2;display:block;width:29px;height:29px;margin:0 auto 11px;border-radius:50%;
background:#ffffff;border:3px solid #d0e4d3;font-style:normal;font-size:10px;font-weight:800;color:#2f8449;line-height:23px}
.pipeline.visible .pipe-step i{border-color:#00823b;color:#00823b}
.pipe-step b{display:block;font-size:12px}
.pipe-step small{display:block;font-size:9px;color:#829585;margin-top:3px}
.pipe-out{border-top:1px dashed #e2ede4;padding-top:18px;display:flex;gap:8px;flex-wrap:wrap}
.pipe-out span{font-size:10px;font-weight:700;color:#405844;background:#f4f9f5;border:1px solid #e2ede4;border-radius:999px;padding:7px 12px}
/* --- How we work (5 steps) --------------------------------------------------- */
.process{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.process:before{content:"";position:absolute;left:9%;right:9%;top:29px;height:2px;background:#e1ece2;border-radius:2px}
.process:after{content:"";position:absolute;left:9%;top:29px;height:2px;width:0;border-radius:2px;
background:linear-gradient(90deg,#00823b,#548000,#13a878);transition:width 1.8s ease .3s}
.process.visible:after{width:82%}
.process-step{position:relative;text-align:center;padding-top:0}
.process-step .ps-dot{position:relative;z-index:2;width:58px;height:58px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;
background:#ffffff;border:2px solid #dfeae1;font-size:14px;font-weight:800;color:#2f8449;transition:.4s;
box-shadow:0 10px 24px rgba(19,73,37,.07)}
.process.visible .process-step:nth-child(1) .ps-dot{border-color:#00823b;color:#00823b;transition-delay:.3s}
.process.visible .process-step:nth-child(2) .ps-dot{border-color:#00823b;color:#00823b;transition-delay:.6s}
.process.visible .process-step:nth-child(3) .ps-dot{border-color:#00893e;color:#00863d;transition-delay:.9s}
.process.visible .process-step:nth-child(4) .ps-dot{border-color:#548000;color:#527e00;transition-delay:1.2s}
.process.visible .process-step:nth-child(5) .ps-dot{border-color:#13a878;color:#13a878;transition-delay:1.5s}
.process-step h3{font-size:15px;margin-bottom:7px}
.process-step p{font-size:11px;color:#7b927f;line-height:1.6;max-width:190px;margin:auto}
/* ==========================================================================
PRODUCTS PAGE
========================================================================== */
/* --- Product ecosystem orbit (hero) --------------------------------------- */
.po-wrap{position:relative;height:440px}
.po-ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:1px dashed #bbd3bf;border-radius:50%}
.po-ring.a{width:250px;height:250px}
.po-ring.b{width:392px;height:392px;animation:spin 42s linear infinite}
.po-glow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:420px;height:420px;border-radius:50%;
background:radial-gradient(circle,rgba(84,128,0,.14),rgba(34,160,80,.12) 45%,transparent 68%)}
.po-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:132px;height:132px;border-radius:50%;
display:grid;place-items:center;text-align:center;color:#ffffff;z-index:3;
background:linear-gradient(135deg,#005d28,#00833b);box-shadow:0 22px 52px rgba(0,111,49,.32)}
.po-center b{display:block;font-size:15px;font-weight:800;letter-spacing:-.3px}
.po-center small{display:block;font-size:8px;color:#c8e9cd;letter-spacing:.9px;margin-top:4px}
.po-node{position:absolute;transform:translate(-50%,-50%);z-index:4;width:118px;padding:12px 10px;border-radius:14px;
border:1px solid #dce8de;background:#ffffff;box-shadow:0 12px 30px rgba(27,87,45,.1);text-align:center;transition:.3s}
.po-node:hover{border-color:#00823b;box-shadow:0 18px 40px rgba(27,87,45,.18)}
.po-node em{font-style:normal;font-size:18px;display:block;margin-bottom:5px}
.po-node b{display:block;font-size:10.5px}
.po-node small{display:block;font-size:8px;color:#90a493;margin-top:2px}
/* Namespaced: the homepage ecosystem uses bare .n1–.n8, which would leak in here. */
.po-node.pn1{left:50%;top:6%}.po-node.pn2{left:84%;top:28%}.po-node.pn3{left:84%;top:72%}
.po-node.pn4{left:50%;top:94%}.po-node.pn5{left:16%;top:72%}.po-node.pn6{left:16%;top:28%}
/* --- Featured product (Manufacturing ERP) --------------------------------- */
.feat{position:relative;overflow:hidden;border-radius:26px;color:#ffffff;padding:46px;
background:linear-gradient(135deg,#00431b,#007936 62%,#005b27)}
.feat:before{content:"";position:absolute;width:620px;height:620px;right:-180px;top:-240px;border-radius:50%;
background:radial-gradient(circle,rgba(255,255,255,.14),transparent 64%)}
.feat:after{content:"";position:absolute;inset:0;opacity:.3;pointer-events:none;
background-image:radial-gradient(rgba(255,255,255,.3) 1px,transparent 1px);background-size:30px 30px;
-webkit-mask-image:linear-gradient(160deg,#000000,transparent 60%);mask-image:linear-gradient(160deg,#000000,transparent 60%)}
.feat-grid{position:relative;z-index:2;display:grid;grid-template-columns:40% 60%;gap:38px;align-items:center}
.feat-tag{display:inline-block;font-size:9px;letter-spacing:1.3px;font-weight:800;color:#b7e2bf;
background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:6px 13px}
.feat h2{font-size:36px;line-height:1.1;letter-spacing:-1.3px;margin:16px 0 12px;color:#ffffff}
.feat h2 span{color:#a0daac}
.feat>.feat-grid p{font-size:14px;color:#cfe5d3;margin-bottom:22px}
.feat-mods{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 12px;margin-bottom:26px}
.feat-mods span{font-size:11px;color:#e0f0e2;display:flex;align-items:center;gap:7px}
.feat-mods span:before{content:"✓";color:#6ee0b4;font-weight:800;font-size:10px}
/* ERP dashboard mock */
.erp{background:#ffffff;border-radius:16px;color:#14315f;overflow:hidden;box-shadow:0 34px 70px rgba(0,27,7,.35);
display:flex;min-height:376px}
.erp-side{width:126px;flex:none;background:#003a17;padding:15px 11px;display:flex;flex-direction:column;gap:4px}
.erp-brand{display:flex;align-items:center;gap:8px;color:#ffffff;font-size:11px;font-weight:800;margin-bottom:13px}
.erp-brand em{font-style:normal;width:22px;height:22px;border-radius:7px;background:#ffffff;color:#0a2f73;display:grid;place-items:center;font-size:11px}
.erp-side a{font-size:9px;color:#acd4b3;padding:6px 8px;border-radius:6px;transition:.2s;display:block}
.erp-side a:hover{background:rgba(255,255,255,.08);color:#ffffff}
.erp-side a.on{background:rgba(255,255,255,.15);color:#ffffff;font-weight:700}
.erp-side .erp-ai{margin-top:auto;background:linear-gradient(135deg,#008d41,#5e8f00);color:#ffffff;border-radius:9px;
padding:9px;font-size:8.5px;font-weight:700;text-align:center}
.erp-main{flex:1;min-width:0;background:#fafcfa;padding:16px}
.erp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}
.erp-head b{font-size:13px}
.erp-head small{display:block;font-size:8.5px;color:#829585;margin-top:2px}
.erp-head .erp-date{font-size:8px;color:#829585;background:#ffffff;border:1px solid #e7efe8;border-radius:999px;padding:5px 10px}
.erp-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.erp-kpis div{background:#ffffff;border:1px solid #e7efe8;border-radius:10px;padding:10px}
.erp-kpis small{display:block;font-size:7.5px;color:#829585}
.erp-kpis b{display:block;font-size:13px;margin:3px 0 2px;letter-spacing:-.3px}
.erp-kpis em{font-style:normal;font-size:7.5px;color:#14a36f}
.erp-kpis em.warn{color:#6a9b24}
.erp-cols{display:grid;grid-template-columns:1.35fr 1fr;gap:10px}
.erp-box{background:#ffffff;border:1px solid #e7efe8;border-radius:10px;padding:11px}
.erp-box .bt{display:flex;justify-content:space-between;align-items:center;font-size:9px;font-weight:700;margin-bottom:9px}
.erp-box .bt span{font-weight:500;color:#9bae9e;font-size:8px}
.erp-job{display:grid;grid-template-columns:1fr 56px 34px;gap:8px;align-items:center;font-size:8.5px;padding:6px 0;border-top:1px solid #f2f7f3}
.erp-job:first-of-type{border-top:0}
.erp-job .jb{height:5px;border-radius:3px;background:#eef3ee;overflow:hidden}
.erp-job .jb i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#50aa68,#006e31)}
.erp-job .jb.g i{background:linear-gradient(90deg,#4fcfa2,#0b9d70)}
.erp-job .jb.o i{background:linear-gradient(90deg,#a8d07e,#74a925)}
.erp-job em{font-style:normal;text-align:right;color:#5d7361;font-weight:700}
.erp-mini{height:74px;display:flex;align-items:flex-end;gap:6px}
.erp-mini i{flex:1;border-radius:4px 4px 2px 2px;background:linear-gradient(180deg,#73ba83,#007937);display:block}
.erp-insight{margin-top:10px;display:flex;gap:9px;align-items:flex-start;background:linear-gradient(100deg,#eef5e8,#f8fbf8);
border:1px solid #d8e7cb;border-radius:10px;padding:10px}
.erp-insight em{font-style:normal;width:22px;height:22px;flex:none;border-radius:7px;display:grid;place-items:center;font-size:11px;
background:linear-gradient(135deg,#007f39,#5b8c00);color:#ffffff}
.erp-insight p{font-size:9px;color:#546148;margin:0;line-height:1.55}
.erp-insight p b{color:#2f2f52}
/* --- GenzAI product --------------------------------------------------- */
.hai{position:relative;overflow:hidden;padding:104px 0;color:#ffffff;
background:linear-gradient(120deg,#00270c,#004b1f 58%,#003614)}
.hai-glow{position:absolute;width:720px;height:720px;left:-180px;bottom:-320px;border-radius:50%;
background:radial-gradient(circle,rgba(84,128,0,.3),transparent 66%)}
.hai-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.hai-grid h2{font-size:40px;line-height:1.1;letter-spacing:-1.4px;margin:14px 0 10px}
.hai-grid h2 span{color:#6b9a27}
.hai-sub{font-size:16px;font-weight:600;color:#c8e0cd;margin-bottom:14px}
.hai-grid>div>p{font-size:14px;color:#bcd5c0;max-width:520px;margin-bottom:24px}
.hai-qs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.hai-qs button{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);color:#dceddf;border-radius:999px;
padding:10px 14px;font-size:10.5px;font-weight:600;cursor:pointer;transition:.22s;text-align:left}
.hai-qs button:hover{background:rgba(255,255,255,.15);transform:translateY(-2px)}
.hai-qs button.on{background:linear-gradient(100deg,#007f39,#548000);border-color:transparent;color:#ffffff}
.hai-panel{background:#ffffff;border-radius:20px;overflow:hidden;color:#1a3156;box-shadow:0 34px 84px rgba(0,0,0,.34)}
.hai-head{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid #e8eee9}
.hai-head b{font-size:12.5px;display:block}
.hai-head small{font-size:8.5px;color:#809484}
.hai-live{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:8.5px;color:#19b37e;font-weight:700}
.hai-live i{width:7px;height:7px;border-radius:50%;background:#19b37e;animation:blink 2s ease-in-out infinite}
@keyframes blink{50%{opacity:.3}}
.hai-body{padding:20px;min-height:280px;background:#fbfdfb}
.hai-user{background:#eaf4eb;border-radius:13px 13px 3px 13px;padding:12px 14px;margin-left:16%;font-size:11.5px;color:#365e3f;min-height:20px}
.hai-user .caret{display:inline-block;width:1.5px;height:12px;background:#00823b;vertical-align:-2px;margin-left:1px;animation:blink 1s step-end infinite}
.hai-reply{display:flex;gap:10px;margin-top:16px;opacity:0;transform:translateY(8px);transition:.45s}
.hai-reply.show{opacity:1;transform:none}
.hai-reply .av{width:30px;height:30px;flex:none;border-radius:9px;display:grid;place-items:center;color:#ffffff;font-weight:800;
background:linear-gradient(135deg,#007f39,#5b8c00)}
.hai-reply .rb{flex:1;min-width:0;background:#ffffff;border:1px solid #e5ede6;border-radius:3px 14px 14px 14px;padding:14px}
.hai-reply p{font-size:11.5px;color:#59715e;margin:0 0 11px;line-height:1.6}
.hai-reply p b{color:var(--text)}
.hai-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:11px}
.hai-stats div{background:#f6fbf7;border:1px solid #e9f0ea;border-radius:9px;padding:9px}
.hai-stats small{display:block;font-size:7.5px;color:#829585}
.hai-stats b{display:block;font-size:12px;margin-top:3px;letter-spacing:-.3px}
.hai-acts{display:flex;gap:7px;flex-wrap:wrap}
.hai-acts span{border:1px solid #abceb1;color:#00803a;background:#ffffff;border-radius:8px;padding:7px 10px;font-size:9px;font-weight:700}
.hai-input{margin:0 16px 16px;padding:12px 14px;border:1px solid #dce6de;border-radius:10px;font-size:10px;color:#87978a;
display:flex;justify-content:space-between;align-items:center}
.hai-input i{font-style:normal;background:#00833b;color:#ffffff;border-radius:50%;width:22px;height:22px;display:grid;place-items:center;font-size:9px}
/* --- Product category grid --------------------------------------------------- */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(262px,1fr));gap:18px}
.cat-card{position:relative;display:flex;flex-direction:column;padding:26px 22px;border:1px solid var(--border);border-radius:18px;
background:#ffffff;box-shadow:0 10px 28px rgba(19,73,37,.05);transition:.3s}
.cat-card:hover{transform:translateY(-6px);border-color:#c6dfca;box-shadow:0 22px 46px rgba(19,73,37,.1)}
.cat-card .c-ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:17px;margin-bottom:16px;
background:#e7f3e8;color:#007d39}
.cat-card[data-category="ai"] .c-ico,.cat-card[data-category="automation"] .c-ico{background:#e7f0df;color:#527e00}
.cat-card[data-category="retail"] .c-ico,.cat-card[data-category="engagement"] .c-ico{background:#e3f8f0;color:#0b9d70}
.cat-card[data-category="service"] .c-ico{background:#eef4e8;color:#72a722}
.cat-card h3{font-size:16px;margin-bottom:8px}
.cat-card>p{font-size:11.5px;color:#7b927f;line-height:1.6;margin-bottom:16px}
.cat-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto}
.cat-tags span{font-size:9px;font-weight:600;color:#5b705f;background:#f4f9f5;border:1px solid #e7efe8;border-radius:7px;padding:5px 9px}
.cat-card .c-link{margin-top:16px;font-size:11px;font-weight:700;color:#00803a;display:inline-flex;gap:6px;transition:.2s}
.cat-card:hover .c-link{gap:11px}
/* --- Product philosophy ------------------------------------------------------ */
.philo{background:linear-gradient(180deg,#f6fbf7,#ffffff)}
.philo-head{max-width:820px;margin:0 auto 46px;text-align:center}
.philo-head h2{font-size:38px;line-height:1.14;letter-spacing:-1.4px;margin-bottom:14px}
.philo-head p{font-size:16px;color:var(--muted)}
/* ==========================================================================
CONTACT PAGE
========================================================================== */
.contact-split{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:start}
.contact-copy h2{font-size:36px;line-height:1.12;letter-spacing:-1.4px;margin-bottom:16px}
.contact-copy>p{font-size:15px;color:var(--muted);max-width:480px;margin-bottom:28px}
.cc-checks{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:30px}
.cc-checks span{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;color:#405844;
background:#ffffff;border:1px solid var(--border);border-radius:11px;padding:12px 14px;transition:.25s}
.cc-checks span:hover{border-color:#bddbc3;transform:translateY(-2px)}
.cc-checks i{font-style:normal;width:18px;height:18px;flex:none;border-radius:50%;display:grid;place-items:center;
background:#e3f8f0;color:#0b9d70;font-size:9px;font-weight:800}
.cc-direct{display:flex;align-items:center;gap:13px;padding:18px;border-radius:15px;
background:linear-gradient(120deg,#eef6ef,#fcfefc);border:1px solid #d9e9db}
.cc-direct em{font-style:normal;width:40px;height:40px;flex:none;border-radius:12px;display:grid;place-items:center;font-size:16px;
background:#ffffff;color:#00803a;box-shadow:0 6px 16px rgba(19,73,37,.08)}
.cc-direct small{display:block;font-size:10px;color:#7b927f;font-weight:700;letter-spacing:.6px}
.cc-direct a{display:block;font-size:14px;font-weight:700;color:var(--blue);margin-top:2px}
.cc-direct a:hover{color:#00823b}
/* --- Form ------------------------------------------------------------------- */
.form-card{position:relative;background:#ffffff;border:1px solid var(--border);border-radius:22px;padding:32px;
box-shadow:0 26px 64px rgba(19,73,37,.11)}
.form-card:before{content:"";position:absolute;inset:-16px -16px auto auto;width:150px;height:150px;border-radius:50%;
background:radial-gradient(circle,rgba(84,128,0,.14),transparent 70%);z-index:-1}
.form-card h3{font-size:19px;letter-spacing:-.5px;margin-bottom:5px}
.form-card .fc-sub{font-size:12px;color:#829585;margin-bottom:22px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field.full{grid-column:1/3}
.field label{font-size:11px;font-weight:700;color:#405844;letter-spacing:.2px}
.field label i{font-style:normal;color:#e06b6b}
.field label em{font-style:normal;color:#9bae9e;font-weight:600}
.field input,.field select,.field textarea{font:inherit;font-size:13px;color:var(--text);background:#fcfefc;width:100%;
border:1px solid #dce8de;border-radius:11px;padding:12px 13px;transition:border-color .2s,box-shadow .2s,background .2s}
.field textarea{min-height:104px;resize:vertical;line-height:1.55}
.field select{appearance:none;-webkit-appearance:none;padding-right:34px;cursor:pointer;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23607664' stroke-width='1.7' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 14px center;background-size:11px}
.field input::placeholder,.field textarea::placeholder{color:#a9b9ab}
.field input:focus,.field select:focus,.field textarea:focus{border-color:#00823b;background:#ffffff;box-shadow:0 0 0 4px rgba(0,130,59,.1)}
.field .err{font-size:10px;color:#5b8810;font-weight:600;display:none}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#e6a5a2;background:#fffafa}
.field.invalid .err{display:block}
.form-submit{width:100%;margin-top:20px;padding:15px 22px;font-size:14px}
/* Honeypot — off screen rather than display:none, which some bots skip. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Outcome banner for the no-JavaScript POST, which returns here with a flag. */
.form-flag{margin:0 0 16px;padding:13px 15px;border-radius:12px;font-size:12.5px;font-weight:600}
.form-flag.ok{background:#eefaf5;border:1px solid #cbeede;color:#0b7a58}
.form-flag.bad{background:#fdf0ef;border:1px solid #f6d6d3;color:#4f7900}
.form-flag a{text-decoration:underline}
.form-note{font-size:10.5px;color:#94a597;text-align:center;margin-top:14px;line-height:1.6}
.form-success{display:none;text-align:center;padding:26px 6px}
.form-success.show{display:block}
.form-success .fs-ico{width:56px;height:56px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;font-size:24px;
background:#e3f8f0;color:#0b9d70}
.form-success h3{font-size:20px;margin-bottom:9px}
.form-success p{font-size:13px;color:var(--muted);max-width:340px;margin:0 auto 18px}
.form-card.sent .form-body{display:none}
/* --- Contact info cards ------------------------------------------------------ */
/* auto-fit, not a fixed count: the Canada card was removed and a hard
repeat(3,1fr) would have left the row with an empty third cell. */
.contact-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.contact-card{position:relative;padding:28px 24px;border:1px solid var(--border);border-radius:18px;background:#ffffff;
box-shadow:0 10px 28px rgba(19,73,37,.05);transition:.3s;display:block}
.contact-card:hover{transform:translateY(-5px);box-shadow:0 22px 44px rgba(19,73,37,.1);border-color:#c6dfca}
.contact-card .cc-ico{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;font-size:18px;margin-bottom:18px;
background:#e7f3e8;color:#007d39}
.contact-card:nth-child(2) .cc-ico{background:#e3f8f0;color:#0b9d70}
.contact-card:nth-child(3) .cc-ico{background:#e7f0df;color:#527e00}
.contact-card h3{font-size:12px;letter-spacing:1.1px;color:#7b927f;font-weight:800;margin-bottom:9px}
.contact-card b{display:block;font-size:16px;letter-spacing:-.3px;color:var(--blue);word-break:break-word}
.contact-card p{font-size:11.5px;color:#829585;margin-top:8px;line-height:1.6}
.placeholder-tag{position:absolute;right:18px;top:18px;font-size:8px;font-weight:800;letter-spacing:.8px;
background:#f1f8ea;color:#638e28;border:1px solid #daeaca;border-radius:999px;padding:4px 9px}
.contact-card.pending b{color:#a9b9ab;font-weight:600;font-size:14px}
/* --- What happens next -------------------------------------------------------- */
.next-grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.next-grid:before{content:"";position:absolute;left:11%;right:11%;top:32px;height:2px;border-radius:2px;background:#e1ece2}
.next-grid:after{content:"";position:absolute;left:11%;top:32px;height:2px;width:0;border-radius:2px;
background:linear-gradient(90deg,#00823b,#548000,#13a878);transition:width 1.7s ease .3s}
.next-grid.visible:after{width:78%}
.next-card{position:relative;text-align:center}
.next-card .n-num{position:relative;z-index:2;width:64px;height:64px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;
background:#ffffff;border:2px solid #dfeae1;font-size:15px;font-weight:800;color:#2f8449;box-shadow:0 12px 28px rgba(19,73,37,.08);transition:.4s}
.next-grid.visible .next-card:nth-child(1) .n-num{border-color:#00823b;color:#00823b;transition-delay:.3s}
.next-grid.visible .next-card:nth-child(2) .n-num{border-color:#00863d;color:#00833c;transition-delay:.65s}
.next-grid.visible .next-card:nth-child(3) .n-num{border-color:#548000;color:#527e00;transition-delay:1s}
.next-grid.visible .next-card:nth-child(4) .n-num{border-color:#13a878;color:#13a878;transition-delay:1.35s}
.next-card h3{font-size:16px;margin-bottom:8px}
.next-card p{font-size:12px;color:#7b927f;line-height:1.6;max-width:210px;margin:auto}
/* ==========================================================================
INNER PAGES — RESPONSIVE
========================================================================== */
@media(max-width:1100px){
.desktop-nav{gap:20px;font-size:13px}
.nav{gap:22px}
.page-hero-inner{grid-template-columns:1fr;gap:44px;padding:44px 0 62px}
.page-hero h1{font-size:40px}
.page-hero-copy{max-width:640px}
.split,.hai-grid,.contact-split,.feat-grid{grid-template-columns:1fr;gap:40px}
.split.wide-left{grid-template-columns:1fr}
.svc-row,.svc-row.flip{grid-template-columns:1fr;gap:34px;padding:52px 0}
.svc-row.flip .svc-copy{order:0}
.belief-grid,.reason-grid{grid-template-columns:repeat(2,1fr)}
.process{grid-template-columns:repeat(2,1fr);gap:26px}
.process:before,.process:after{display:none}
.next-grid{grid-template-columns:repeat(2,1fr);gap:32px}
.next-grid:before,.next-grid:after{display:none}
.tl{overflow-x:auto;overflow-y:hidden;padding-bottom:14px;-webkit-overflow-scrolling:touch;
scroll-snap-type:x proximity}
.tl-track{grid-template-columns:repeat(7,228px);width:max-content}
.tl-item{scroll-snap-align:center}
.tl-hint{display:flex}
.feat{padding:34px}
.feat h2{font-size:31px}
.po-wrap{height:400px}
}
@media(max-width:760px){
.page-hero-inner{padding:34px 0 52px;gap:34px}
.page-hero-inner.solo{padding:44px 0 54px}
.page-hero h1{font-size:32px;letter-spacing:-1.2px}
.page-hero-copy>p{font-size:15px}
.page-hero-actions .btn{flex:1 1 100%}
.crumbs{padding-top:16px}
.section-tight{padding:54px 0}
.split h2,.contact-copy h2,.svc-copy h2,.hai-grid h2{font-size:27px;letter-spacing:-.9px}
.vision-inner h2,.philo-head h2{font-size:28px;letter-spacing:-1px}
.vision-band{padding:74px 0}
.vision-ring.r3{display:none}
.belief-grid,.reason-grid,.glance,.app-grid,.cc-checks,.feat-mods{grid-template-columns:1fr}
.cat-grid{grid-template-columns:1fr}
.form-grid{grid-template-columns:1fr}
.field.full{grid-column:auto}
.form-card{padding:24px 20px}
.process,.next-grid{grid-template-columns:1fr;gap:22px}
.process-step,.next-card{display:grid;grid-template-columns:58px 1fr;gap:16px;text-align:left;align-items:start}
.process-step .ps-dot,.next-card .n-num{margin:0;width:52px;height:52px}
.process-step p,.next-card p{margin:0;max-width:none}
.process-step h3,.next-card h3{margin-bottom:5px}
/* Timeline → vertical */
.tl{overflow:visible}
.tl-hint{display:none}
.tl-track{grid-template-columns:1fr;width:auto;gap:0}
.tl-track:before{left:14px;right:auto;top:8px;bottom:8px;width:2px;height:auto;
background:linear-gradient(180deg,#d0e4d3,#00823b 45%,#548000 80%,#13a878)}
.tl-item{min-height:0;padding:0 0 18px 46px}
.tl-dot{left:14px;top:16px;transform:translate(-50%,0)}
.tl-card,.tl-item:nth-child(odd) .tl-card,.tl-item:nth-child(even) .tl-card{position:static;left:auto;right:auto;top:auto;bottom:auto}
.tl-note{text-align:left}
/* Stack visual */
.stack-layer,.sl-top,.sl-ai,.sl-auto,.sl-soft,.sl-base{width:100%}
.stack-layer .sl-chip{display:none}
/* Flow lines → vertical */
.flowline{flex-direction:column}
.flow-arrow{padding:7px 0;transform:rotate(90deg)}
.flow-arrow.anim{animation:none}
/* Old way / new way */
.shift{grid-template-columns:1fr}
.shift-mid{padding:14px 0}
.shift-mid span{transform:rotate(90deg)}
/* Integration hub */
.hub{grid-template-columns:1fr;gap:12px}
.hub-col.right .hub-chip{flex-direction:row;text-align:left}
.hub-wrap{order:-1;padding:6px 0}
/* Product ecosystem → simplified grid */
.po-wrap{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:10px;place-items:stretch}
.po-ring,.po-glow{display:none}
.po-center{position:static;transform:none;grid-column:1/3;width:100%;height:auto;border-radius:18px;padding:22px}
.po-node{position:static;transform:none;width:auto}
/* ERP mock */
.feat{padding:26px;border-radius:20px}
.feat h2{font-size:26px}
.erp{flex-direction:column;min-height:0}
.erp-side{width:100%;flex-direction:row;flex-wrap:wrap;align-items:center;gap:5px;padding:11px}
.erp-side .erp-ai{margin-top:0;margin-left:auto;padding:7px 10px}
.erp-brand{margin-bottom:0;margin-right:6px}
.erp-kpis{grid-template-columns:1fr 1fr}
.erp-cols{grid-template-columns:1fr}
/* Business software mock */
.bs-mock{flex-direction:column}
.bs-side{width:100%;flex-direction:row;flex-wrap:wrap;gap:5px}
.bs-side .bs-logo{margin-bottom:0}
.hai{padding:70px 0}
.hai-body{padding:16px;min-height:0}
.hai-stats{grid-template-columns:1fr}
.svc-index{gap:7px}
.svc-index a{font-size:10px;padding:8px 12px}
.pipe-rail{grid-template-columns:1fr 1fr;gap:20px 0}
.pipe-rail:before,.pipe-rail:after{display:none}
.pipeline{padding:20px}
.phones{gap:10px}
.phone{width:132px}
}
@media(max-width:400px){
.page-hero h1{font-size:28px}
.phone.back{display:none}
}
/* --- Motion preferences ------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;
transition-duration:.001ms!important;scroll-behavior:auto!important}
.reveal{opacity:1;transform:none}
}
/* --- Print --------------------------------------------------------------------- */
@media print{
.site-header,.mobile-menu,.cta-section,.skip-link{display:none}
.reveal{opacity:1;transform:none}
}
/* ==========================================================================
FINAL ADJUSTMENTS
Overrides that must win over earlier, more specific layout rules.
========================================================================== */
.hai-grid>div>p.hai-sub{font-size:16px;font-weight:600;color:#c8e0cd;margin-bottom:14px;max-width:none}
.contact-copy>p.tl-note{font-size:11px;color:#8a9c8d;max-width:470px}
.feat .erp-insight p{font-size:9px;color:#546148;margin:0;line-height:1.55}
.belief-card .feature-icon{margin-bottom:0}
.hub-center:before,.hub-center:after{content:none}
.hub-center small{display:block;font-size:7px;letter-spacing:.8px;color:#c8e9cd;font-weight:700;margin-top:4px}
.flowline.six .flow-node{padding:16px 9px}
.flowline.six .flow-node small{font-size:8.5px}
.flowline.six .flow-arrow{padding:0 5px;font-size:15px}
.mobile-menu .btn{margin-top:6px;width:100%}
/* Anchor links must clear the sticky header */
[id]{scroll-margin-top:96px}
@media(max-width:700px){[id]{scroll-margin-top:80px}}
/* Header gains a hairline shadow once the page scrolls */
.site-header{transition:box-shadow .25s}
.site-header.scrolled{box-shadow:0 6px 22px rgba(0,67,27,.07)}
/* The mobile menu must stay hidden until the mobile breakpoint opens it.
(The base rule only existed inside the max-width:700px query.) */
.mobile-menu{display:none}
@media(max-width:700px){.mobile-menu.open{display:flex}}
/* Homepage product sidebar now carries two cards, so it stacks and fills the
column height instead of sitting in a two-up grid with a full-width card. */
.product-side{grid-template-columns:1fr;grid-template-rows:1fr 1fr}
@media(max-width:1000px){.product-side{grid-template-columns:1fr 1fr;grid-template-rows:auto}}
@media(max-width:700px){.product-side{grid-template-columns:1fr;grid-template-rows:auto}}
/* ==========================================================================
ACCENT LAYER — colour
A light pass of brand colour over the existing structure: gradient headline
words, soft aurora glows, tinted grounds, colour-coded card edges.
========================================================================== */
:root{
--grad-brand:linear-gradient(100deg,#00823b,#548000);
--grad-cool:linear-gradient(100deg,#00823b,#4fb06a);
--grad-warm:linear-gradient(100deg,#6fa800,#98c860);
--grad-fresh:linear-gradient(100deg,#0b9d70,#35c79b);
}
::selection{background:rgba(0,130,59,.15);color:var(--text)}
/* --- Gradient headline words (light sections only) ----------------------- */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
.hero h1 span,
.page-hero h1 span,
.section-heading h2 span,
.split h2 span,
.svc-copy h2 span,
.contact-copy h2 span,
.philo-head h2 span,
.app-card h3 span{
background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;color:transparent}
/* Big stat numbers pick up the same gradient */
.trust-inner strong,.glance-stat b{
background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent}
.glance-stat.accent b{background:none;-webkit-text-fill-color:#ffffff}
}
/* --- Eyebrow gets a small gradient rule ---------------------------------- */
.eyebrow{display:inline-flex;align-items:center;gap:9px}
.eyebrow:before{content:"";width:18px;height:2px;border-radius:2px;flex:none;background:var(--grad-brand)}
.eyebrow.light:before{background:linear-gradient(90deg,#68b87c,#73a137)}
.eyebrow.purple:before{background:linear-gradient(90deg,#548000,#7fab4d)}
/* --- Aurora: soft brand glows behind a section --------------------------- */
.aurora{position:relative;overflow:hidden}
.aurora:before,.aurora:after{content:"";position:absolute;border-radius:50%;pointer-events:none;z-index:0}
.aurora:before{width:540px;height:540px;left:-190px;top:-170px;
background:radial-gradient(circle,rgba(0,130,59,.10),transparent 68%)}
.aurora:after{width:580px;height:580px;right:-210px;bottom:-230px;
background:radial-gradient(circle,rgba(84,128,0,.10),transparent 68%)}
.aurora>*{position:relative;z-index:1}
/* Second, cooler glow in the inner-page heroes */
.page-hero:before{content:"";position:absolute;width:580px;height:580px;left:-230px;bottom:-310px;border-radius:50%;
background:radial-gradient(circle,rgba(84,128,0,.15),transparent 66%);pointer-events:none;z-index:0}
/* --- Tinted grounds ------------------------------------------------------- */
.section-alt{background:linear-gradient(180deg,#f6fbf7,#f2f8f3)}
.section-tint{background:linear-gradient(180deg,#f9fcf8 0%,#f4faf5 55%,#f3f7f0 100%)}
/* --- Cards gain a gradient top edge on hover ----------------------------- */
.feature-card,.belief-card,.cat-card,.app-card,.contact-card,.tl-card{position:relative;overflow:hidden}
.feature-card:before,.belief-card:before,.cat-card:before,.app-card:before,
.contact-card:before,.tl-card:before{
content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--grad-brand);
transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.4,0,.2,1);z-index:2}
.feature-card:hover:before,.belief-card:hover:before,.cat-card:hover:before,
.app-card:hover:before,.contact-card:hover:before,.tl-card:hover:before{transform:scaleX(1)}
.cat-card[data-category="ai"]:before,.cat-card[data-category="engagement"]:before{
background:linear-gradient(100deg,#548000,#4fb06a)}
.cat-card[data-category="retail"]:before,.cat-card[data-category="service"]:before{
background:linear-gradient(100deg,#0b9d70,#00823b)}
/* --- Buttons: a touch more depth ------------------------------------------ */
.btn-primary{background:linear-gradient(100deg,#007535,#009343 58%,#008b3f)}
.btn-primary:hover{background:linear-gradient(100deg,#006a2e,#00873d 58%,#537f00)}
.btn-orange{background:linear-gradient(100deg,#6fa800,#90c155)}
.btn-outline:hover{background:linear-gradient(180deg,#ffffff,#f4f9f5)}
/* --- Scroll progress bar (created by script.js) --------------------------- */
.scroll-progress{position:fixed;left:0;top:0;height:3px;width:100%;z-index:1200;transform:scaleX(0);
transform-origin:0 50%;pointer-events:none;
background:linear-gradient(90deg,#00823b,#548000 58%,#13a878)}
/* ==========================================================================
MOTION LAYER — supporting styles for GSAP
========================================================================== */
.has-gsap .reveal{transition:none}
/* GSAP owns these transforms, so hand them over cleanly */
.has-gsap .stack-layer,.has-gsap .floating-card{animation:none}
/* Orbit nodes keep their CSS centring (GSAP only fades them), so the drift uses the
independent `translate` property, which composes with `transform` instead of replacing it. */
@keyframes nodeFloat{50%{translate:0 -7px}}
.po-node{animation:nodeFloat 5.5s ease-in-out infinite}
.po-node.pn2{animation-delay:.5s}.po-node.pn3{animation-delay:1s}
.po-node.pn4{animation-delay:1.5s}.po-node.pn5{animation-delay:2s}.po-node.pn6{animation-delay:2.5s}
@media(max-width:760px){.po-node{animation:none}}
@media(min-width:761px){.tl-track:before{transform:scaleX(var(--tl-progress,1));transform-origin:left center}}
/* Typing caret + "thinking" dots, shared by every chat demo */
.caret{display:inline-block;width:1.5px;height:1em;background:#00823b;vertical-align:-.15em;margin-left:1px;
animation:blink 1s step-end infinite}
.chat-user .caret,.ai-q .caret{background:#1a733a}
.thinking{display:inline-flex;gap:5px;align-items:center;padding:3px 0}
.thinking i{width:6px;height:6px;border-radius:50%;background:#9dbaa2;display:block;
animation:thinkDot 1.25s ease-in-out infinite}
.thinking i:nth-child(2){animation-delay:.16s}
.thinking i:nth-child(3){animation-delay:.32s}
@keyframes thinkDot{0%,62%,100%{opacity:.32;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}
/* Chat bodies scroll to the newest message */
.chat-body,.hai-body,.ai-mock .panel-body{overflow-y:auto;overscroll-behavior:contain}
.chat-body{max-height:308px}
.hai-body{max-height:348px}
.ai-mock .panel-body{max-height:318px}
.chat-body::-webkit-scrollbar,.hai-body::-webkit-scrollbar,
.ai-mock .panel-body::-webkit-scrollbar{width:5px}
.chat-body::-webkit-scrollbar-thumb,.hai-body::-webkit-scrollbar-thumb,
.ai-mock .panel-body::-webkit-scrollbar-thumb{background:#d8e4da;border-radius:3px}
/* ---------------------------------------------------------------------------
MOBILE: chat panels must never trap the page scroll
---------------------------------------------------------------------------
These panels are tall enough to fill most of a phone screen. With their own
`overflow-y:auto` plus `overscroll-behavior:contain`, a finger landing inside
one scrolled the panel instead of the page and the scroll never chained out —
so the page could not be scrolled past the chat at all.
On phones they become `overflow:hidden`. The height stays, the script still
scrolls to the newest message (scrollTop works fine on a hidden overflow),
but a touch drag moves the page. Reading back through history on a phone is
a fair trade for being able to scroll the page.
--------------------------------------------------------------------------- */
@media(max-width:760px){
.chat-body,.hai-body,.ai-mock .panel-body{overflow:hidden;overscroll-behavior:auto}
}
/* Word-level reveal used for streaming answers */
.w{display:inline-block;will-change:opacity,transform}
@media(prefers-reduced-motion:reduce){
.scroll-progress{display:none}
.thinking i{animation:none}
.caret{animation:none}
}
/* GSAP owns the reply reveal, so the CSS transition must stand down */
.has-gsap .hai-reply{transition:none}
/* Homepage pills get an active state now that they drive the conversation */
.question-pills button.active{background:linear-gradient(100deg,#007f39,#548000);border-color:transparent;color:#ffffff}
/* A `transition` shorthand covers opacity too, which fights GSAP on the elements
it animates directly. Scope those transitions to the properties hover actually needs. */
.flow-node,.tl-card,.po-node,.hub-chip,.mission-item,.cc-checks span,
.hai-qs button,.question-pills button,.erp-side a,.svc-index a{
transition-property:transform,box-shadow,border-color,background,background-color,color}
/* ==========================================================================
DETAILED FOOTER
========================================================================== */
.footer{padding:62px 0 20px;background:linear-gradient(180deg,#fbfcfa,#f4faf5);border-top:1px solid #e7efe8}
.footer-rich{display:grid;grid-template-columns:1.7fr 1fr 1.15fr 1.5fr;gap:44px}
.footer-rich .brand{margin-bottom:12px}
.foot-tag{font-size:11px;font-weight:700;letter-spacing:1.1px;color:#2f8449;margin-bottom:24px}
.foot-office{margin-bottom:20px}
.foot-office h4{font-size:13px;letter-spacing:1.4px;font-weight:800;color:var(--blue);margin-bottom:8px;
display:flex;align-items:center;gap:8px}
.foot-office h4:before{content:"";width:16px;height:2px;border-radius:2px;background:var(--grad-brand)}
.foot-office address{font-style:normal;font-size:12.5px;line-height:1.7;color:#607664}
.foot-office .foot-phone{display:inline-flex;align-items:center;gap:7px;margin-top:7px;font-size:12.5px;
font-weight:700;color:var(--blue);transition:.2s}
.foot-office .foot-phone:hover{color:var(--blue2);gap:10px}
.foot-office .foot-phone span{color:#8a9d8d;font-weight:600}
.footer-col h4{font-size:12px;letter-spacing:1.3px;font-weight:800;color:var(--blue);margin-bottom:18px}
.foot-links{display:flex;flex-direction:column;gap:11px}
.foot-links a{font-size:12.5px;color:#607664;display:inline-flex;align-items:center;gap:8px;transition:.2s}
.foot-links a:before{content:"›";color:#b7d7bc;font-weight:800;transition:.2s}
.foot-links a:hover{color:var(--blue2)}
.foot-links a:hover:before{color:var(--blue2);transform:translateX(2px)}
.foot-tags{display:flex;flex-direction:column;gap:11px}
.foot-tags span{font-size:12px;color:#607664;display:flex;align-items:flex-start;gap:9px;line-height:1.5}
.foot-tags span:before{content:"";flex:none;width:9px;height:9px;margin-top:4px;border-radius:2px 4px 2px 4px;
background:linear-gradient(135deg,var(--green),#35c79b)}
.foot-contact-line{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:6px}
.foot-contact-line a{font-size:12.5px;font-weight:700;color:var(--blue2)}
.foot-contact-line a:hover{text-decoration:underline}
.footer-bottom{border-top:1px solid #e8eee9;margin-top:38px;padding-top:18px;display:flex;
justify-content:space-between;align-items:center;gap:14px;color:#94a396;font-size:11px;flex-wrap:wrap}
/* UNUSED since the Privacy Policy / Terms links were removed from the footer.
Kept in case a legal nav comes back there; safe to delete with it. */
.footer-bottom nav{display:flex;gap:18px}
.footer-bottom nav a:hover{color:var(--blue2)}
@media(max-width:1000px){
.footer-rich{grid-template-columns:1fr 1fr;gap:34px}
.footer-rich>div:first-child{grid-column:1/3}
}
@media(max-width:700px){
.footer{padding:46px 0 18px}
.footer-rich{grid-template-columns:1fr;gap:30px}
.footer-rich>div:first-child{grid-column:auto}
.footer-bottom{flex-direction:column;align-items:flex-start;gap:10px}
}
/* ==========================================================================
FIXES
========================================================================== */
/* The accent layer's `position:relative` was overriding the timeline card's
absolute placement, so the cards drifted up over the section heading. */
.feature-card,.belief-card,.cat-card,.app-card,.contact-card{position:relative;overflow:hidden}
.tl-card{overflow:hidden}
@media(min-width:761px){
.tl-item:nth-child(odd) .tl-card{position:absolute;top:auto;bottom:calc(50% + 34px)}
.tl-item:nth-child(even) .tl-card{position:absolute;bottom:auto;top:calc(50% + 34px)}
}
/* GSAP leaves an identity transform on each step, which makes it a stacking
context and traps the marker's z-index — so the rail painted over the numbers. */
.process-step,.next-card,.pipe-step,.tl-item{z-index:1}
.process:before,.process:after,.next-grid:before,.next-grid:after,
.pipe-rail:before,.pipe-rail:after,.tl-track:before{z-index:0}
/* ==========================================================================
SHOWCASE SECTIONS — colour + motion
========================================================================== */
.showcase-dark{position:relative;overflow:hidden;color:#c8dccb;
background:
radial-gradient(1100px 620px at 12% -12%,rgba(0,147,67,.32),transparent 62%),
radial-gradient(900px 560px at 90% 6%,rgba(96,146,0,.26),transparent 62%),
radial-gradient(700px 520px at 70% 100%,rgba(123,192,138,.18),transparent 64%),
linear-gradient(165deg,#041909 0%,#012a0f 55%,#021d09 100%)}
.showcase-dark:before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.45;
background-image:radial-gradient(rgba(255,255,255,.18) 1px,transparent 1px);background-size:34px 34px;
-webkit-mask-image:radial-gradient(120% 85% at 50% 0%,#000000 20%,transparent 78%);
mask-image:radial-gradient(120% 85% at 50% 0%,#000000 20%,transparent 78%)}
.showcase-dark>*{position:relative;z-index:1}
.showcase-dark .section-heading h2{color:#ffffff}
.showcase-dark .section-heading p{color:#9bb7a0}
.showcase-dark .eyebrow{color:#a1daac}
.showcase-dark .eyebrow:before{background:linear-gradient(90deg,#6dbc80,#98bc73)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
.showcase-dark .section-heading h2 span{background:linear-gradient(100deg,#88c996,#98bc73);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
}
/* --- Colour tokens shared by the diagrams -------------------------------- */
.c-blue {--nc:#009343;--nc2:#88c996}
.c-teal {--nc:#7bc08a;--nc2:#9dddaa}
.c-amber {--nc:#90c450;--nc2:#b3de84}
.c-green {--nc:#17bd88;--nc2:#54dcae}
.c-purple{--nc:#609200;--nc2:#98bc73}
.c-coral {--nc:#ff6b86;--nc2:#ffa0ae}
.c-violet{--nc:#5d8d00;--nc2:#9fc37b}
.c-cyan {--nc:#5aaf70;--nc2:#9bd4a7}
/* ==========================================================================
1. HOMEPAGE ECOSYSTEM
========================================================================== */
.ecosystem-wrap{position:relative;height:560px;width:min(620px,100%);max-width:620px;margin:10px auto 0;
transform:none}
.eco-links{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:1}
.eco-links line{stroke:rgba(155,207,165,.42);stroke-width:1.6;stroke-dasharray:5 7;
animation:ecoFlow 3.4s linear infinite}
.eco-links line:nth-child(2n){animation-delay:.5s}
.eco-links line:nth-child(3n){animation-delay:1s}
@keyframes ecoFlow{to{stroke-dashoffset:-48}}
.eco-ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;
border:1px dashed rgba(153,206,163,.24);z-index:0}
.eco-ring.r1{width:200px;height:200px}
.eco-ring.r2{width:350px;height:350px;animation:spin 44s linear infinite}
.eco-ring.r3{width:500px;height:500px;border-style:solid;border-color:rgba(153,206,163,.1)}
.eco-halo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:340px;height:340px;
border-radius:50%;z-index:0;
background:radial-gradient(circle,rgba(0,147,67,.34),rgba(96,146,0,.14) 46%,transparent 68%);
animation:breathe 7s ease-in-out infinite}
.eco-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:154px;height:154px;
border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1px;
text-align:center;color:#ffffff;z-index:4;
background:linear-gradient(140deg,#009343,#466d00 55%,#609200);
box-shadow:0 22px 60px rgba(0,92,40,.5),inset 0 1px 0 rgba(255,255,255,.3)}
.eco-center b{display:block;font-size:13px;letter-spacing:2.4px;font-weight:800;color:#c8e9cd}
.eco-center span{display:block;font-size:19px;font-weight:800;letter-spacing:-.4px;margin-top:2px;color:#ffffff}
.eco-node{position:absolute;transform:translate(-50%,-50%);z-index:3;width:104px;padding:13px 9px;
border-radius:16px;text-align:center;
background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.06));
border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(8px);
box-shadow:0 14px 34px rgba(1,16,4,.42);transition:border-color .3s,box-shadow .3s,background .3s}
.eco-node em{font-style:normal;display:grid;place-items:center;width:38px;height:38px;margin:0 auto 8px;
border-radius:12px;font-size:18px;
background:linear-gradient(140deg,color-mix(in srgb,var(--nc) 42%,transparent),color-mix(in srgb,var(--nc) 16%,transparent));
box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--nc) 45%,transparent),0 6px 16px color-mix(in srgb,var(--nc) 30%,transparent)}
.eco-node b{display:block;font-size:11.5px;color:#ffffff;font-weight:700}
.eco-node:hover{border-color:var(--nc);background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.08));
box-shadow:0 18px 44px color-mix(in srgb,var(--nc) 34%,transparent)}
.eco-node.e1{left:50%;top:8%} .eco-node.e2{left:78.3%;top:20.3%}
.eco-node.e3{left:90%;top:50%} .eco-node.e4{left:78.3%;top:79.7%}
.eco-node.e5{left:50%;top:92%} .eco-node.e6{left:21.7%;top:79.7%}
.eco-node.e7{left:10%;top:50%} .eco-node.e8{left:21.7%;top:20.3%}
/* Fallback for browsers without color-mix */
@supports not (color: color-mix(in srgb,#000 50%,transparent)){
.eco-node em{background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
}
/* ==========================================================================
2. INTEGRATIONS HUB
========================================================================== */
.hub-chip{position:relative;border-radius:14px;padding:12px 14px;gap:11px;
background:linear-gradient(180deg,#ffffff,#fcfefc);border:1px solid var(--border);
box-shadow:0 8px 22px rgba(19,73,37,.06);overflow:hidden}
.hub-chip:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
background:linear-gradient(180deg,var(--nc,#009343),var(--nc2,#88c996))}
.hub-col.right .hub-chip:before{left:auto;right:0}
.hub-chip em{width:30px;height:30px;flex:none;border-radius:9px;display:grid;place-items:center;font-size:14px;
color:var(--nc,#009143);background:color-mix(in srgb,var(--nc,#009343) 12%,#ffffff)}
.hub-chip:hover{border-color:var(--nc,#009343);transform:translateY(-3px);
box-shadow:0 16px 34px color-mix(in srgb,var(--nc,#009343) 20%,transparent)}
/* Connector running from each chip toward the core */
.hub-chip:after{content:"";position:absolute;top:50%;width:26px;height:1.5px;border-radius:2px;
background:repeating-linear-gradient(90deg,var(--nc,#009343) 0 4px,transparent 4px 9px);
opacity:.5;animation:hubFlow 2.4s linear infinite}
.hub-col:not(.right) .hub-chip:after{right:-26px}
.hub-col.right .hub-chip:after{left:-26px;animation-direction:reverse}
@keyframes hubFlow{to{background-position:18px 0}}
.hub-center{width:116px;height:116px;
background:linear-gradient(140deg,#009343,#466d00 58%,#609200);
box-shadow:0 20px 48px rgba(0,92,40,.34),inset 0 1px 0 rgba(255,255,255,.3)}
.hub-wrap:before{content:"";position:absolute;width:190px;height:190px;border-radius:50%;
background:radial-gradient(circle,rgba(0,147,67,.2),transparent 68%);animation:breathe 6s ease-in-out infinite}
.hub-ring{width:160px;height:160px;border-color:rgba(0,147,67,.3)}
@media(max-width:760px){ .hub-chip:after{display:none} }
/* ==========================================================================
3. PRODUCT PIPELINE
========================================================================== */
.pipeline{background:linear-gradient(180deg,#ffffff,#fbfcfa);border-color:#e2ede3;
box-shadow:0 18px 44px rgba(19,73,37,.09)}
.pipe-rail:before{top:19px;height:4px;background:#e7f1e8}
.pipe-rail:after{top:19px;height:4px;background:linear-gradient(90deg,#009343,#609200 55%,#17bd88)}
.pipe-step i{width:40px;height:40px;line-height:34px;font-size:13px;border-width:3px;
border-color:#dae8dd;color:#8ba58f;background:#ffffff;transition:.45s;
box-shadow:0 6px 16px rgba(19,73,37,.08)}
.pipeline.visible .pipe-step:nth-child(1) i{border-color:#009343;color:#009143;box-shadow:0 8px 20px rgba(0,147,67,.28);transition-delay:.25s}
.pipeline.visible .pipe-step:nth-child(2) i{border-color:#568400;color:#558200;box-shadow:0 8px 20px rgba(86,132,0,.28);transition-delay:.55s}
.pipeline.visible .pipe-step:nth-child(3) i{border-color:#609200;color:#5f9000;box-shadow:0 8px 20px rgba(96,146,0,.28);transition-delay:.85s}
.pipeline.visible .pipe-step:nth-child(4) i{border-color:#17bd88;color:#17bd88;box-shadow:0 8px 20px rgba(23,189,136,.28);transition-delay:1.15s}
.pipe-step b{font-size:13px;margin-top:2px}
.pipe-out span{border-radius:999px;padding:8px 14px;font-weight:700;border:1px solid transparent}
.pipe-out span:nth-child(1){background:#eaf4eb;color:#00803a;border-color:#d3e9d7}
.pipe-out span:nth-child(2){background:#e9f2e2;color:#4e7700;border-color:#d0e2c0}
.pipe-out span:nth-child(3){background:#e9fbf4;color:#0e9b6f;border-color:#cdf1e2}
.pipe-out span:nth-child(4){background:#f0f7ea;color:#6c9831;border-color:#dbeccd}
.pipe-out span:nth-child(5){background:#ffeef1;color:#e0455f;border-color:#ffd6de}
/* ==========================================================================
4. HOW WE WORK — dark, colour-coded
========================================================================== */
.showcase-dark .process:before{background:rgba(255,255,255,.16);height:3px;top:36px}
.showcase-dark .process:after{height:3px;top:36px;
background:linear-gradient(90deg,#009343,#568400 28%,#609200 55%,#22b3a8 78%,#17bd88)}
.showcase-dark .process-step .ps-dot{width:72px;height:72px;font-size:16px;border-width:2px;
background:rgba(4,27,10,.9);border-color:rgba(255,255,255,.2);color:#9bb7a0;
box-shadow:0 12px 30px rgba(1,16,4,.5)}
.showcase-dark .process.visible .process-step:nth-child(1) .ps-dot{border-color:#009343;color:#a1daac;box-shadow:0 0 0 6px rgba(0,147,67,.14),0 14px 32px rgba(0,147,67,.4)}
.showcase-dark .process.visible .process-step:nth-child(2) .ps-dot{border-color:#568400;color:#aac78e;box-shadow:0 0 0 6px rgba(86,132,0,.14),0 14px 32px rgba(86,132,0,.4)}
.showcase-dark .process.visible .process-step:nth-child(3) .ps-dot{border-color:#609200;color:#accb8e;box-shadow:0 0 0 6px rgba(96,146,0,.14),0 14px 32px rgba(96,146,0,.4)}
.showcase-dark .process.visible .process-step:nth-child(4) .ps-dot{border-color:#22b3a8;color:#7fe0d8;box-shadow:0 0 0 6px rgba(34,179,168,.14),0 14px 32px rgba(34,179,168,.4)}
.showcase-dark .process.visible .process-step:nth-child(5) .ps-dot{border-color:#17bd88;color:#7fe6bd;box-shadow:0 0 0 6px rgba(23,189,136,.14),0 14px 32px rgba(23,189,136,.4)}
.showcase-dark .process-step h3{color:#ffffff;font-size:16px}
.showcase-dark .process-step p{color:#9bb7a0}
/* ==========================================================================
5. ABOUT — EVOLUTION TIMELINE
========================================================================== */
.tl-track:before{height:3px;border-radius:3px;
background:linear-gradient(90deg,#009343,#568400 32%,#609200 62%,#17bd88)}
.tl-dot{width:19px;height:19px;border-width:4px;border-color:#009343;background:#ffffff;
box-shadow:0 0 0 6px rgba(0,147,67,.12)}
.tl-item:nth-child(2) .tl-dot{border-color:#008d40;box-shadow:0 0 0 6px rgba(0,141,64,.12)}
.tl-item:nth-child(3) .tl-dot{border-color:#568400;box-shadow:0 0 0 6px rgba(86,132,0,.12)}
.tl-item:nth-child(4) .tl-dot{border-color:#568400;box-shadow:0 0 0 6px rgba(86,132,0,.12)}
.tl-item:nth-child(5) .tl-dot{border-color:#609200;box-shadow:0 0 0 6px rgba(96,146,0,.12)}
.tl-item:nth-child(6) .tl-dot{border-color:#22b3a8;box-shadow:0 0 0 6px rgba(34,179,168,.14)}
.tl-item:nth-child(7) .tl-dot{border-color:#17bd88;box-shadow:0 0 0 6px rgba(23,189,136,.14)}
.tl-card{border-radius:16px;box-shadow:0 12px 30px rgba(19,73,37,.08)}
.tl-card:before{height:4px}
.tl-item:nth-child(1) .tl-card:before{background:linear-gradient(90deg,#009343,#88c996)}
.tl-item:nth-child(2) .tl-card:before{background:linear-gradient(90deg,#008d40,#6db97f)}
.tl-item:nth-child(3) .tl-card:before{background:linear-gradient(90deg,#568400,#8eb267)}
.tl-item:nth-child(4) .tl-card:before{background:linear-gradient(90deg,#568400,#97ba73)}
.tl-item:nth-child(5) .tl-card:before{background:linear-gradient(90deg,#609200,#abc88e)}
.tl-item:nth-child(6) .tl-card:before{background:linear-gradient(90deg,#22b3a8,#6fe0d6)}
.tl-item:nth-child(7) .tl-card:before{background:linear-gradient(90deg,#17bd88,#6fe3b8)}
.tl-card:before{transform:scaleX(1)}
.tl-stage{display:inline-block;font-size:9px;padding:4px 9px;border-radius:999px;
background:#edf6ef;color:#0c813d;letter-spacing:.8px}
.tl-item:nth-child(6) .tl-stage{background:#e6faf7;color:#0f9c92}
.tl-item:nth-child(7) .tl-stage{background:#e9fbf4;color:#0e9b6f}
/* ==========================================================================
RESPONSIVE for the showcase pieces
========================================================================== */
@media(max-width:1000px){
.showcase-dark .process{grid-template-columns:repeat(2,1fr)}
.showcase-dark .process:before,.showcase-dark .process:after{display:none}
}
@media(max-width:760px){
.ecosystem-wrap{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:10px;transform:none;max-width:none}
.eco-links,.eco-ring,.eco-halo{display:none}
.eco-center{position:static;transform:none;grid-column:1/3;width:100%;height:auto;border-radius:20px;padding:24px}
.eco-node{position:static;transform:none;width:auto}
.showcase-dark .process{grid-template-columns:1fr}
.showcase-dark .process-step .ps-dot{width:56px;height:56px}
.tl-card:before{height:3px}
}
/* ==========================================================================
RICHER PRODUCT MOCKUPS — reflect the real module depth
========================================================================== */
/* --- Process-flow strip inside the ERP dashboard ------------------------- */
.erp-flow{display:flex;align-items:stretch;gap:0;margin-bottom:11px;
background:#ffffff;border:1px solid #e7efe8;border-radius:10px;padding:9px 8px}
.ef-step{flex:1;min-width:0;position:relative;text-align:center;padding:2px 3px}
.ef-step em{font-style:normal;display:grid;place-items:center;width:26px;height:26px;margin:0 auto 4px;
border-radius:8px;font-size:12px;color:#ffffff;
background:linear-gradient(140deg,var(--nc,#009343),var(--nc2,#88c996))}
.ef-step i{position:absolute;top:-4px;left:50%;margin-left:5px;font-style:normal;
width:13px;height:13px;border-radius:50%;font-size:7px;font-weight:800;line-height:13px;color:#ffffff;
background:var(--nc,#009343);box-shadow:0 0 0 2px #ffffff}
.ef-step b{display:block;font-size:13px;letter-spacing:-.3px;color:#14315f}
.ef-step small{display:block;font-size:6.5px;letter-spacing:.5px;font-weight:700;color:#829585;margin-top:1px}
.ef-arrow{align-self:center;color:#c4d7c7;font-size:12px;flex:none;padding:0 1px}
/* --- Work-order status pipeline chips ------------------------------------ */
.wo-pipe{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:11px}
.wo-pipe span{font-size:7px;font-weight:700;letter-spacing:.3px;padding:5px 7px;border-radius:6px;
background:#f3f8f4;color:#829585;border:1px solid #eaf0eb}
.wo-pipe span b{font-weight:800;color:#14315f;margin-right:3px}
.wo-pipe span.a{background:#eaf4eb;border-color:#d3e9d7;color:#00803a}
.wo-pipe span.a b{color:#00803a}
.wo-pipe span.g{background:#e9fbf4;border-color:#cdf1e2;color:#0e9b6f}
.wo-pipe span.g b{color:#0e9b6f}
.wo-pipe span.w{background:#f0f7ea;border-color:#dbeccd;color:#6c9831}
.wo-pipe span.w b{color:#6c9831}
/* --- Taller sidebars now that they list the real modules ----------------- */
.erp{min-height:428px}
.erp-side{width:132px}
.erp-side a{font-size:8.5px;padding:4.5px 8px}
.erp-brand{font-size:10px;margin-bottom:9px}
.bs-side{width:116px}
.bs-side span{font-size:8px;padding:4.5px 8px}
.dash-sidebar{width:104px;align-items:stretch;padding:16px 9px;gap:0}
.dash-sidebar .side-logo{margin:0 auto 12px}
.dash-sidebar a{display:block;font-size:8.5px;color:#b6dbbd;padding:4.5px 8px;border-radius:6px;transition:.2s}
.dash-sidebar a.on{background:rgba(255,255,255,.15);color:#ffffff;font-weight:700}
.dash-content{width:calc(100% - 104px)}
/* --- "Everything inside" module grid ------------------------------------- */
.mod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:14px}
.mod-card{position:relative;overflow:hidden;padding:18px 18px 16px;border-radius:16px;background:#ffffff;
border:1px solid var(--border);box-shadow:0 8px 22px rgba(19,73,37,.05);transition:.28s}
.mod-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
background:linear-gradient(180deg,var(--nc,#009343),var(--nc2,#88c996))}
.mod-card:hover{transform:translateY(-4px);border-color:var(--nc,#009343);
box-shadow:0 18px 38px color-mix(in srgb,var(--nc,#009343) 18%,transparent)}
.mod-head{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.mod-head em{font-style:normal;width:32px;height:32px;flex:none;border-radius:10px;display:grid;place-items:center;
font-size:14px;color:var(--nc,#009143);background:color-mix(in srgb,var(--nc,#009343) 12%,#ffffff)}
.mod-head b{font-size:14px;flex:1}
.mod-head span{font-size:9px;font-weight:800;color:var(--nc,#009143);
background:color-mix(in srgb,var(--nc,#009343) 11%,#ffffff);border-radius:999px;padding:4px 8px}
.mod-card p{font-size:11px;color:#7b927f;line-height:1.65;margin:0}
.mod-note{text-align:center;font-size:12px;color:#8a9c8d;margin-top:28px}
@supports not (color: color-mix(in srgb,#000 50%,transparent)){
.mod-head em,.mod-head span{background:#edf6ef}
}
@media(max-width:760px){
.erp-flow{flex-wrap:wrap;gap:6px}
.ef-step{flex:1 1 28%}
.ef-arrow{display:none}
.mod-grid{grid-template-columns:1fr}
}
/* The hero sidebar now carries module names, so the floating KPI card moves
off it and sits over the chart instead. */
.sales{left:-2%;top:auto;bottom:15%}
.orders{right:-1%;top:7%}
.payment{right:-2%;bottom:30%}
/* ==========================================================================
HERO — BENTO MOSAIC
Built from real product UI fragments rather than a single screenshot.
========================================================================== */
.hero-stats{display:flex;gap:34px;flex-wrap:wrap;margin-top:32px}
.hero-stats b{display:block;font-size:30px;letter-spacing:-1.2px;line-height:1;color:var(--blue)}
.hero-stats small{display:block;font-size:11px;color:#738776;margin-top:6px;font-weight:600}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
.hero-stats b{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent}
}
.bento{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:100px;gap:12px;width:100%}
.bento-tile{position:relative;overflow:hidden;border-radius:18px;padding:15px 16px;
border:1px solid #deeae0;background:#ffffff;box-shadow:0 10px 28px rgba(19,73,37,.07);
transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s,border-color .3s;
display:flex;flex-direction:column}
.bento-tile:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(19,73,37,.14)}
.bento-tile>small{font-size:8.5px;letter-spacing:1.1px;font-weight:800;color:#829585}
.bento-tile>b{font-size:27px;letter-spacing:-1px;line-height:1.05;margin-top:4px;color:var(--text)}
.bento-tile>em{font-style:normal;font-size:9.5px;color:#829585;margin-top:auto}
/* AI tile */
.bt-ai{grid-column:1/5;grid-row:1/3;color:#ffffff;border-color:transparent;
background:radial-gradient(520px 300px at 90% -20%,rgba(255,255,255,.2),transparent 60%),
linear-gradient(135deg,#005424,#466d00 52%,#609200)}
.bt-head{display:flex;align-items:center;gap:9px;margin-bottom:11px}
.bt-ico{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:13px;
background:rgba(255,255,255,.22);color:#ffffff}
.bt-head b{font-size:12px;color:#ffffff}
.bt-live{margin-left:auto;font-style:normal;font-size:8px;font-weight:800;letter-spacing:.8px;color:#8ef0c4;
display:flex;align-items:center;gap:5px}
.bt-live:before{content:"";width:6px;height:6px;border-radius:50%;background:#4ade9b;animation:blink 2s ease-in-out infinite}
.bt-ai .ask-input{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26);border-radius:10px;
padding:10px 11px;font-size:10.5px;color:#e8f4ea;margin:0 0 10px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.bt-ai .ask-input button{border:0;background:rgba(255,255,255,.9);color:#335100;border-radius:50%;
width:20px;height:20px;flex:none;font-size:9px;cursor:default}
.bt-ai .ask-input .caret{background:#ffffff}
.bt-ai>p{font-size:11px;color:#dae6cf;line-height:1.55;margin:0}
.bt-ai>p b{color:#ffffff}
.bt-acts{margin-top:auto;padding-top:10px}
.bt-acts span{display:inline-block;font-size:9px;font-weight:700;color:#ffffff;
background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);border-radius:7px;padding:6px 10px}
/* On-time dispatch (the revenue tile was removed: an unlabelled ₹46.6L in the
hero read as a Genzerp figure rather than illustrative product data) */
.bt-ontime{grid-column:5/7;grid-row:1/3;background:linear-gradient(150deg,#e9fbf4,#ffffff);border-color:#cdf1e2}
.bt-ontime b{color:#0b9d70;font-size:38px}
.bt-ontime em{margin-top:6px;color:#5f8a79}
/* the tile spans two rows, so it gets a chart rather than a thin bar and a void */
.bt-trend{margin-top:auto;padding-top:14px}
.bt-trend-k{display:block;font-size:7.5px;font-weight:800;letter-spacing:1px;color:#8bb3a3;margin-bottom:7px}
.bt-cols{display:flex;align-items:flex-end;gap:5px;height:56px}
.bt-cols i{flex:1;border-radius:3px 3px 2px 2px;background:#c3e8d9;min-width:0}
.bt-cols i.on{background:linear-gradient(180deg,#4fcfa2,#0b9d70)}
/* Live production flow */
.bt-flow{grid-column:1/7;grid-row:3/4;color:#ffffff;border-color:transparent;
background:linear-gradient(120deg,#004b1f,#00833c 55%,#379f57)}
.bt-flow>small{color:#b7e2bf}
.bt-steps{display:flex;align-items:center;gap:5px;margin-top:auto}
.bt-steps span{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;
background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);border-radius:10px;padding:7px 4px;
font-size:7.5px;letter-spacing:.4px;color:#daeddd;font-weight:700}
.bt-steps span b{font-size:14px;color:#ffffff;line-height:1}
.bt-steps i{font-style:normal;color:rgba(255,255,255,.5);font-size:11px;flex:none}
/* Modules */
.bt-mods{grid-column:1/4;grid-row:4/6;color:#ffffff;border-color:transparent}
.bt-mods{background:linear-gradient(150deg,#03260f,#01411a)}
.bt-mods b{font-size:34px;color:#ffffff}
.bt-mods small{color:#9bb7a0;order:2;margin-top:2px}
.bt-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:auto;padding-top:10px;order:3}
.bt-chips span{font-size:8px;font-weight:700;color:#cfe3d2;background:rgba(255,255,255,.1);
border:1px solid rgba(255,255,255,.16);border-radius:6px;padding:4px 7px}
/* Risk + automation */
.bt-risk{grid-column:4/7;grid-row:4/5;background:linear-gradient(150deg,#f4f9ef,#ffffff);border-color:#dbeccd}
.bt-risk b{color:#6c9831}
.bt-auto{grid-column:4/7;grid-row:5/6;background:linear-gradient(150deg,#edf3e6,#ffffff);border-color:#d0e2c0}
.bt-auto b{color:#507a00}
@media(max-width:1000px){
.bento{max-width:660px;margin:0 auto}
.hero-stats{justify-content:center}
}
@media(max-width:700px){
.bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:auto;gap:10px}
.bento-tile{grid-column:auto;grid-row:auto;min-height:104px}
/* Full width for every tile that is followed by a two-column one. bt-ontime
used to be a single column, and because the tile after it spans both, that
tile could not fit beside it — leaving a visible empty cell. bt-risk and
bt-auto still pair up, which is fine: they are last. */
.bt-ai,.bt-ontime,.bt-flow,.bt-mods{grid-column:1/3}
.bt-ai{min-height:0}
.bt-steps span{font-size:7px}
.bento-tile>b{font-size:23px}
.bt-mods b{font-size:30px}
/* Three across on one line — they used to wrap to two rows and the bar lost
its shape. A fixed three-column grid keeps the numbers aligned and lets
each label wrap inside its own column instead of pushing the next one
down. */
.hero-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;margin-top:24px;text-align:center}
.hero-stats b{font-size:23px;letter-spacing:-.9px}
.hero-stats small{font-size:9.5px;margin-top:5px;line-height:1.35}
}
/* ==========================================================================
HOMEPAGE SECTION REDESIGN — capabilities / data-to-decisions / why
========================================================================== */
/* Alternate dark grounds so consecutive dark sections differ */
.showcase-dark.sd-plum{background:
radial-gradient(1000px 600px at 82% -12%,rgba(96,146,0,.38),transparent 62%),
radial-gradient(780px 520px at 8% 90%,rgba(0,147,67,.26),transparent 64%),
linear-gradient(160deg,#071000 0%,#101e00 52%,#060f00 100%)}
/* --- 1. Capabilities on dark ---------------------------------------------- */
.capabilities .feature-grid{gap:20px}
.showcase-dark .feature-card{padding:26px 22px;border-radius:20px;
background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.03));
border-color:rgba(255,255,255,.14);box-shadow:0 20px 46px rgba(0,15,3,.42);backdrop-filter:blur(8px)}
.showcase-dark .feature-card:before{transform:scaleX(1);height:4px;
background:linear-gradient(90deg,var(--nc,#009343),var(--nc2,#88c996))}
.showcase-dark .feature-card:hover{transform:translateY(-7px);border-color:var(--nc,#009343);
box-shadow:0 28px 60px color-mix(in srgb,var(--nc,#009343) 28%,transparent)}
.showcase-dark .feature-card h3{color:#ffffff;font-size:16px}
.showcase-dark .feature-card p{color:#9bb7a0;font-size:11.5px}
.showcase-dark .feature-icon{width:44px;height:44px;border-radius:13px;font-size:17px;
color:#ffffff;background:linear-gradient(140deg,var(--nc,#009343),var(--nc2,#88c996));
box-shadow:0 10px 26px color-mix(in srgb,var(--nc,#009343) 45%,transparent)}
/* mini visuals re-skinned for the dark ground */
.showcase-dark .mini-ui{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
.showcase-dark .mini-side{background:rgba(255,255,255,.14)}
.showcase-dark .mini-lines i{background:rgba(255,255,255,.11)}
.showcase-dark .mini-bars b{background:rgba(136,201,150,.45)}
.showcase-dark .mini-bars b:nth-child(4){background:#88c996}
.showcase-dark .ai-answer{background:rgba(96,146,0,.18);border-color:rgba(152,188,115,.3)}
.showcase-dark .ai-answer>span{color:#9ec279}
.showcase-dark .ai-answer small{color:#b4c9a1}
.showcase-dark .ai-answer b{color:#ffffff}
.showcase-dark .workflow span{background:rgba(23,189,136,.15);border-color:rgba(84,220,174,.28);color:#9fe4c9}
.showcase-dark .workflow b{color:#54dcae}
.showcase-dark .connected span{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.13);color:#cfe3d2}
/* --- 2. Data to decisions: colour-graded steps ----------------------------- */
/* UNUSED as of the FROM DATA TO DECISIONS section being removed from the
homepage. Nothing on the site renders .decisions / .steps / .step / .step-num
/ .step-arrow / .step-icons / .ai-chip / .tiny-btn / .growth any more (the
base rules are on line 47). Left in place rather than deleted, in case the
section comes back; safe to remove together if it does not. */
.decisions{background:linear-gradient(180deg,#f1f6ed 0%,#edf6ef 48%,#f4f8f1 100%)}
.decisions .steps{align-items:stretch}
.decisions .step{position:relative;overflow:hidden;border-radius:20px;padding:26px 22px;
border-color:#e3eee5;box-shadow:0 14px 34px rgba(19,73,37,.07);transition:.3s}
.decisions .step:before{content:"";position:absolute;left:0;right:0;top:0;height:4px;
background:linear-gradient(90deg,var(--nc),var(--nc2))}
.decisions .step:hover{transform:translateY(-6px);
box-shadow:0 26px 52px color-mix(in srgb,var(--nc) 22%,transparent);border-color:var(--nc)}
.decisions .step-num{font-size:34px;font-weight:800;letter-spacing:-1.5px;line-height:1;margin-bottom:14px;
color:var(--nc)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
.decisions .step-num{background:linear-gradient(120deg,var(--nc),var(--nc2));
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
}
.decisions .step h3{font-size:19px;margin-bottom:10px}
.decisions .step p{font-size:11.5px;color:#738776}
.decisions .step-arrow{color:var(--nc,#9fc0a5);font-size:20px;font-weight:700}
.decisions .step-icons{margin-top:24px;font-size:17px;letter-spacing:8px;
background:linear-gradient(90deg,#009343,#609200);-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent}
.decisions .ai-chip{margin-top:22px;border:0;padding:13px;border-radius:12px;color:#ffffff;font-size:13px;
background:linear-gradient(120deg,#548000,#7fab4c);box-shadow:0 12px 28px rgba(84,128,0,.34)}
.decisions .tiny-btn{margin-top:22px;padding:11px 16px;border-radius:9px;font-size:10px;color:#ffffff;
background:linear-gradient(120deg,#90c450,#b0db81);box-shadow:0 12px 26px rgba(144,196,80,.34)}
.decisions .growth{margin-top:22px;padding:13px;border-radius:12px;font-size:11px;color:#0b6b4f;
background:linear-gradient(120deg,#dff8ee,#effaf5);border:1px solid #c6efdd}
.decisions .growth b{color:#0b9d70}
/* ==========================================================================
CAPABILITIES — light again, colour kept
========================================================================== */
.cap-light{background:linear-gradient(180deg,#f3f7f0 0%,#edf6ef 46%,#f6faf3 100%)}
.cap-light .feature-grid{gap:20px}
.cap-light .feature-card{padding:26px 22px;border-radius:20px;background:#ffffff;border-color:#e5eee6;
box-shadow:0 14px 34px rgba(19,73,37,.07)}
.cap-light .feature-card:before{transform:scaleX(1);height:4px;
background:linear-gradient(90deg,var(--nc),var(--nc2))}
.cap-light .feature-card:hover{transform:translateY(-7px);border-color:var(--nc);
box-shadow:0 26px 54px color-mix(in srgb,var(--nc) 22%,transparent)}
.cap-light .feature-icon{width:44px;height:44px;border-radius:13px;font-size:17px;color:#ffffff;
background:linear-gradient(140deg,var(--nc),var(--nc2));
box-shadow:0 10px 24px color-mix(in srgb,var(--nc) 38%,transparent)}
.cap-light .feature-card h3{font-size:16px}
.cap-light .feature-card p{font-size:11.5px;color:#738776}
/* ==========================================================================
INDUSTRY PRODUCTS GRID
========================================================================== */
.ind-products{position:relative;overflow:hidden;
background:linear-gradient(180deg,#ffffff 0%,#f5faf6 40%,#f6f9f3 100%)}
.ind-products:before{content:"";position:absolute;width:620px;height:620px;right:-220px;top:-240px;
border-radius:50%;pointer-events:none;
background:radial-gradient(circle,rgba(84,128,0,.1),transparent 68%)}
.ind-products:after{content:"";position:absolute;width:560px;height:560px;left:-200px;bottom:-220px;
border-radius:50%;pointer-events:none;
background:radial-gradient(circle,rgba(0,147,67,.1),transparent 68%)}
.ind-products>*{position:relative;z-index:1}
.ind-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(298px,1fr));gap:18px}
.ind-card{position:relative;overflow:hidden;display:flex;flex-direction:column;padding:26px 24px 22px;
border-radius:20px;background:#ffffff;border:1px solid var(--border);
box-shadow:0 12px 32px rgba(19,73,37,.06);transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s,border-color .3s}
.ind-card:before{content:"";position:absolute;left:0;right:0;top:0;height:4px;
background:linear-gradient(90deg,var(--nc),var(--nc2))}
.ind-card:after{content:"";position:absolute;right:-60px;top:-60px;width:170px;height:170px;border-radius:50%;
pointer-events:none;opacity:0;transition:opacity .35s;
background:radial-gradient(circle,color-mix(in srgb,var(--nc) 22%,transparent),transparent 70%)}
.ind-card:hover{transform:translateY(-7px);border-color:var(--nc);
box-shadow:0 28px 58px color-mix(in srgb,var(--nc) 24%,transparent)}
.ind-card:hover:after{opacity:1}
.ind-ico{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:23px;color:#ffffff;
background:linear-gradient(140deg,var(--nc),var(--nc2));
box-shadow:0 12px 26px color-mix(in srgb,var(--nc) 38%,transparent)}
.ind-card h3{font-size:17px;letter-spacing:-.3px;margin:17px 0 8px}
.ind-card>p{font-size:12px;color:#7b927f;line-height:1.65;margin-bottom:16px}
.ind-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto}
.ind-tags span{font-size:9.5px;font-weight:700;padding:5px 9px;border-radius:7px;color:var(--nc);
background:color-mix(in srgb,var(--nc) 9%,#ffffff);border:1px solid color-mix(in srgb,var(--nc) 20%,#ffffff)}
.ind-link{margin-top:16px;font-size:11.5px;font-weight:700;color:var(--nc);
display:inline-flex;align-items:center;gap:6px;transition:gap .25s}
.ind-card:hover .ind-link{gap:11px}
.ind-note{text-align:center;font-size:12.5px;color:#8a9c8d;margin-top:30px}
.ind-note a{font-weight:700;color:var(--blue2)}
.ind-note a:hover{text-decoration:underline}
@supports not (color: color-mix(in srgb,#000 50%,transparent)){
.ind-tags span{background:#f4f9f5;border-color:#e2ede4}
.ind-card:after{display:none}
}
@media(max-width:760px){ .ind-grid{grid-template-columns:1fr} }
/* ==========================================================================
PRODUCT CAROUSEL — industry products, photographic cards
A card shows a photo when it has .has-photo and a --photo value; without one
it falls back to the flat colour gradient, so a missing image never breaks it.
========================================================================== */
.pcar-section{position:relative;overflow:hidden;
background:linear-gradient(180deg,#ffffff 0%,#f5faf6 42%,#f6f9f3 100%)}
.pcar-section:before{content:"";position:absolute;width:620px;height:620px;right:-230px;top:-250px;
border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(84,128,0,.1),transparent 68%)}
.pcar-section>*{position:relative;z-index:1}
/* Drifting industry names */
.pcar-marquee{overflow:hidden;border-block:1px solid var(--border);padding:13px 0;margin-bottom:26px;
background:linear-gradient(90deg,#f6fbf7,#ffffff,#f6f9f3)}
.pcar-marquee div{display:flex;gap:36px;width:max-content;animation:pcarMarquee 30s linear infinite}
.pcar-marquee span{font-size:13px;font-weight:800;color:#9fb4a2;white-space:nowrap;
display:flex;align-items:center;gap:9px}
.pcar-marquee span:after{content:"◆";font-size:7px;color:#c8d9ca}
@keyframes pcarMarquee{to{transform:translateX(-50%)}}
.pcar-marquee:hover div{animation-play-state:paused}
.pcar-wrap{position:relative}
/* overflow-y:hidden is load-bearing. Setting overflow-x:auto makes the computed
overflow-y `auto` too, so this strip quietly becomes a *vertical* scroll
container as well — and a transformed child (the cards' entrance animation)
counts toward scrollable overflow. That gave the track ~30px of vertical
slack, and a wheel starting over a card spent its first gesture scrolling
that slack instead of the page. Pinning overflow-y stops the strip ever being
a vertical scroll target, whatever a child's transform does. */
.pcar-track{display:flex;gap:18px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
padding:4px 4px 18px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.pcar-track::-webkit-scrollbar{height:6px}
.pcar-track::-webkit-scrollbar-thumb{background:#d8e4da;border-radius:3px}
.pcar-track::-webkit-scrollbar-track{background:#f1f6f2;border-radius:3px}
.pcar-card{position:relative;overflow:hidden;flex:0 0 316px;height:426px;scroll-snap-align:start;
border-radius:24px;display:flex;flex-direction:column;justify-content:flex-end;padding:26px;color:#ffffff;
text-decoration:none;
background:linear-gradient(180deg,rgba(2,18,6,0) 34%,rgba(2,18,6,.72)),
linear-gradient(140deg,var(--nc),var(--nc2));
transition:transform .35s cubic-bezier(.4,0,.2,1),box-shadow .35s}
.pcar-card:hover{transform:translateY(-8px);box-shadow:0 26px 54px color-mix(in srgb,var(--nc) 32%,transparent)}
.pcar-card:before{content:"";position:absolute;inset:0;opacity:.3;
background-image:repeating-linear-gradient(115deg,rgba(255,255,255,.16) 0 2px,transparent 2px 17px)}
.pcar-card>:not(.pcar-bg){z-index:2}
.pcar-no{position:absolute;top:30px;right:26px;z-index:2;font-size:11px;font-weight:800;letter-spacing:1px;
color:rgba(255,255,255,.72)}
.pcar-card b{font-size:20px;letter-spacing:-.4px;display:block;color:#ffffff}
.pcar-card p{font-size:12px;color:rgba(255,255,255,.87);margin-top:8px;line-height:1.6}
.pcar-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:13px}
.pcar-tags span{font-size:8.5px;font-weight:700;background:rgba(255,255,255,.2);
border:1px solid rgba(255,255,255,.3);border-radius:6px;padding:4px 8px}
.pcar-link{margin-top:14px;font-size:11.5px;font-weight:800;display:inline-flex;align-items:center;gap:6px;
color:#ffffff;transition:gap .25s}
.pcar-card:hover .pcar-link{gap:11px}
/* Photo layer + scrim */
.pcar-bg{position:absolute;inset:0;z-index:0;background:var(--photo) center 38%/cover no-repeat;
transform:scale(1.03);transition:transform .8s cubic-bezier(.2,.6,.2,1)}
.pcar-card.has-photo:hover .pcar-bg{transform:scale(1.12)}
.pcar-card.has-photo{background:#06180b}
.pcar-card.has-photo:before{opacity:1;background:
linear-gradient(180deg,rgba(2,13,4,0) 0%,rgba(2,13,4,.05) 34%,rgba(2,13,4,.6) 74%,rgba(2,13,4,.92) 100%),
linear-gradient(158deg,color-mix(in srgb,var(--nc) 24%,transparent) 0%,transparent 58%);
z-index:1}
.pcar-card.has-photo em,.pcar-card.has-photo b,.pcar-card.has-photo p{text-shadow:0 2px 12px rgba(0,0,0,.55)}
.pcar-nav{display:flex;gap:9px;justify-content:flex-end;margin-top:8px}
.pcar-nav button{width:44px;height:44px;border-radius:50%;border:1px solid var(--border);background:#ffffff;
color:var(--blue);font-size:17px;cursor:pointer;transition:.25s;display:grid;place-items:center}
.pcar-nav button:hover:not(:disabled){background:var(--blue2);color:#ffffff;border-color:transparent;transform:translateY(-2px)}
.pcar-nav button:disabled{opacity:.35;cursor:default}
.pcar-note{text-align:center;font-size:12.5px;color:#8a9c8d;margin-top:22px}
.pcar-note a{font-weight:700;color:var(--blue2)}
.pcar-note a:hover{text-decoration:underline}
@supports not (color: color-mix(in srgb,#000 50%,transparent)){
.pcar-card.has-photo:before{background:linear-gradient(180deg,rgba(2,13,4,0),rgba(2,13,4,.6) 74%,rgba(2,13,4,.92))}
.pcar-card:hover{box-shadow:0 26px 54px rgba(19,73,37,.3)}
}
/* ---- responsive ---- */
@media(max-width:1000px){
.pcar-card{flex-basis:300px;height:414px}
}
@media(max-width:760px){
/* a sliver of the next card shows, so it reads as swipeable */
.pcar-track{gap:14px;padding:4px 0 16px;scroll-padding-left:4px}
.pcar-card{flex-basis:min(80vw,300px);height:auto;min-height:382px;padding:22px;border-radius:20px}
.pcar-no{top:26px;right:22px}
.pcar-card b{font-size:18px}
.pcar-marquee{margin-bottom:20px}
.pcar-marquee span{font-size:12px}
.pcar-nav{justify-content:center;margin-top:12px}
}
@media(max-width:400px){
.pcar-card{flex-basis:84vw;min-height:368px}
}
@media(prefers-reduced-motion:reduce){
.pcar-marquee div{animation:none}
.pcar-track{scroll-behavior:auto}
}
/* Same product cards, laid out as a full grid instead of a scrolling track
(used on products.html, where nothing should be hidden off-screen). */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(296px,1fr));gap:20px}
.pgrid .pcar-card{scroll-snap-align:none}
@media(max-width:760px){.pgrid .pcar-card{height:auto;min-height:392px}}
@media(max-width:760px){
.pgrid{grid-template-columns:1fr;gap:16px}
}
/* ==========================================================================
PRODUCTS PAGE HERO — industry showcase
A single large photo cycles through the industries; thumbnails act as
indicators and let you jump straight to one.
========================================================================== */
.phero{position:relative;overflow:hidden;border-bottom:1px solid #e6f0e7;
background:linear-gradient(135deg,#ffffff 0%,#f3f9f4 52%,#f0f6eb 100%)}
.phero:after{content:"";position:absolute;width:760px;height:760px;right:-300px;top:-330px;border-radius:50%;
pointer-events:none;background:radial-gradient(circle,rgba(34,160,80,.18),transparent 67%)}
.phero:before{content:"";position:absolute;width:600px;height:600px;left:-240px;bottom:-320px;border-radius:50%;
pointer-events:none;background:radial-gradient(circle,rgba(84,128,0,.14),transparent 66%)}
.phero-inner{position:relative;z-index:2;display:grid;grid-template-columns:46% 54%;gap:48px;
align-items:center;padding:44px 0 66px}
.phero-copy h1{font-size:46px;line-height:1.05;letter-spacing:-1.9px;font-weight:800;margin-bottom:18px}
.phero-copy>p{font-size:16px;color:#536957;max-width:520px;margin-bottom:26px}
.phero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px}
.phero-facts{display:flex;gap:26px;flex-wrap:wrap}
.phero-facts div b{display:block;font-size:26px;letter-spacing:-1px;line-height:1;color:var(--blue)}
.phero-facts div span{display:block;font-size:11px;color:#738776;margin-top:6px;font-weight:600}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
.phero-facts div b{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent}
}
/* --- the cycling stage --- */
.phero-stage{position:relative}
/* landscape frame — fed by the wide crops in img/products/wide/ so nothing is squeezed */
.phero-frame{position:relative;aspect-ratio:16/10;border-radius:26px;
overflow:hidden;box-shadow:0 34px 72px rgba(13,86,40,.26);background:#06180b}
.phero-shot{position:absolute;inset:0;opacity:0;transition:opacity .9s ease, transform 6s linear;
background:var(--photo) center/cover no-repeat;transform:scale(1.04)}
.phero-shot.on{opacity:1;transform:scale(1.12)}
.phero-frame:after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,rgba(2,13,4,0) 38%,rgba(2,13,4,.55) 72%,rgba(2,13,4,.9) 100%)}
.phero-cap{position:absolute;left:26px;right:26px;bottom:24px;z-index:2;color:#ffffff}
.phero-cap small{display:inline-block;font-size:9px;font-weight:800;letter-spacing:1.2px;
background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.32);border-radius:999px;
padding:5px 11px;margin-bottom:10px}
.phero-cap b{display:block;font-size:23px;letter-spacing:-.5px;line-height:1.15}
.phero-cap span{display:block;font-size:12.5px;color:rgba(255,255,255,.85);margin-top:6px}
.phero-cap b,.phero-cap span{text-shadow:0 2px 12px rgba(0,0,0,.5)}
/* --- thumbnail indicators --- */
.phero-thumbs{display:flex;gap:9px;margin-top:14px;flex-wrap:wrap}
.phero-thumbs button{width:62px;height:44px;border-radius:11px;border:2px solid #e2ede4;padding:0;
background:var(--photo) center/cover no-repeat;cursor:pointer;opacity:.68;
transition:opacity .3s,border-color .3s,transform .3s,box-shadow .3s}
.phero-thumbs button:hover{opacity:1;transform:translateY(-2px);border-color:#bddbc3}
.phero-thumbs button.on{opacity:1;border-color:var(--blue2);transform:translateY(-2px);
box-shadow:0 8px 20px rgba(0,130,59,.3)}
@media(max-width:1000px){
.phero-inner{grid-template-columns:1fr;gap:34px;padding:36px 0 56px}
.phero-copy{max-width:640px}
.phero-frame{aspect-ratio:16/9}
}
@media(max-width:760px){
.phero-copy h1{font-size:32px;letter-spacing:-1.2px}
.phero-copy>p{font-size:15px}
.phero-actions .btn{flex:1 1 100%}
.phero-frame{aspect-ratio:4/3;border-radius:20px}
.phero-cap{left:18px;right:18px;bottom:18px}
.phero-cap b{font-size:19px}
.phero-thumbs button{width:52px;height:38px}
.phero-facts{gap:18px}
.phero-facts div b{font-size:22px}
}
@media(prefers-reduced-motion:reduce){
.phero-shot{transition:opacity .01ms;transform:none}
.phero-shot.on{transform:none}
}
/* On a phone the fourteen module cards make a very long scroll, so only the
first few show and the rest come in three at a time. Desktop shows them all. */
.mod-more{display:none;justify-content:center;margin-top:22px}
.mod-more .btn{gap:8px}
.mod-more-count{font-weight:600;color:#8a9c8d}
.mod-more-arrow{transition:transform .3s}
.mod-more.is-open .mod-more-arrow{transform:rotate(180deg)}
.mod-card.is-collapsed{display:none}
@media(max-width:760px){
.mod-more{display:flex}
.mod-more .btn{width:100%;justify-content:center}
}
/* ==========================================================================
CLIENT MARQUEE · includes/clients.php · prefix: cmq-
Two rows of client logos drifting opposite ways, full colour, paused on
hover. Full colour on purpose: several of these logos carry their brand in
the colour alone and are much weaker in grey.
========================================================================== */
.cmq{padding:44px 0 48px;background:linear-gradient(180deg,#fbfcfa,#f4faf5);
border-top:1px solid #eef4ef;border-bottom:1px solid #eef4ef}
.cmq-head{text-align:center;margin-bottom:26px}
.cmq-head small{font-size:11px;letter-spacing:1.4px;font-weight:800;color:#2f8449}
.cmq-head b{display:block;font-size:22px;letter-spacing:-.7px;margin-top:8px;color:var(--text)}
.cmq-rail{position:relative;overflow:hidden;
-webkit-mask-image:linear-gradient(90deg,transparent,#000000 10%,#000000 90%,transparent);
mask-image:linear-gradient(90deg,transparent,#000000 10%,#000000 90%,transparent)}
.cmq-rail+.cmq-rail{margin-top:12px}
.cmq-track{display:flex;gap:12px;width:max-content;animation:cmqMove 46s linear infinite}
.cmq-rail.rev .cmq-track{animation-direction:reverse}
.cmq-rail:hover .cmq-track{animation-play-state:paused}
@keyframes cmqMove{to{transform:translateX(-50%)}}
.cmq-chip{display:flex;align-items:center;justify-content:center;flex:none;min-width:172px;background:#ffffff;
border:1px solid #e2ece4;border-radius:14px;padding:16px 20px;box-shadow:0 6px 18px rgba(19,73,37,.05);
transition:border-color .3s,transform .3s,box-shadow .3s}
.cmq-chip:hover{border-color:#cae0cd;transform:translateY(-2px);box-shadow:0 12px 26px rgba(19,73,37,.1)}
.cmq-chip img{display:block;height:30px;width:auto;max-width:150px;object-fit:contain}
@media(max-width:640px){
.cmq{padding:34px 0 38px}
.cmq-head b{font-size:18px}
.cmq-chip{min-width:132px;padding:13px 15px}
.cmq-chip img{height:24px;max-width:112px}
}
@media(prefers-reduced-motion:reduce){
/* No drift. The rail becomes a normal scroller so every logo is still
reachable — a paused marquee would hide half the list. */
.cmq-track{animation:none;width:auto;flex-wrap:nowrap}
.cmq-rail{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
.cmq-chip:hover{transform:none}
}
/* ==========================================================================
SERVICES — APPLICATIONS BAND
One coloured band, the two app types on the left, and a single device
composition on the right that makes the "every screen" point in one look.
========================================================================== */
.apps-band{position:relative;overflow:hidden;color:#e5f1e7;
background:
radial-gradient(880px 520px at 10% -20%,rgba(255,255,255,.16),transparent 58%),
radial-gradient(760px 520px at 92% 110%,rgba(148,197,91,.2),transparent 60%),
linear-gradient(125deg,#005524 0%,#009343 46%,#548000 100%)}
.apps-band:before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.3;
background-image:radial-gradient(rgba(255,255,255,.32) 1px,transparent 1px);background-size:32px 32px;
-webkit-mask-image:radial-gradient(110% 80% at 50% 0%,#000000 22%,transparent 78%);
mask-image:radial-gradient(110% 80% at 50% 0%,#000000 22%,transparent 78%)}
.apps-band>*{position:relative;z-index:1}
.apps-band .section-heading h2{color:#ffffff}
.apps-band .section-heading h2 span{color:#b4e086;-webkit-text-fill-color:#b4e086}
.apps-band .section-heading p{color:#cfe3d2}
.apps-band .svc-num{color:#c8e9cd}
.apps-band .svc-num i{background:rgba(255,255,255,.16);color:#ffffff}
.apps-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:44px;align-items:center}
.apps-copy{display:grid;gap:16px}
.apps-block{display:flex;gap:16px;padding:22px;border-radius:18px;
background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(10px);
transition:transform .3s cubic-bezier(.4,0,.2,1),background .3s,border-color .3s}
.apps-block:hover{transform:translateY(-5px);background:rgba(255,255,255,.19);border-color:rgba(255,255,255,.4)}
.apps-ico{width:46px;height:46px;flex:none;border-radius:14px;display:grid;place-items:center;font-size:19px;
color:#007032;background:#ffffff;box-shadow:0 10px 24px rgba(0,29,7,.24)}
.apps-block b{display:block;font-size:18px;color:#ffffff;letter-spacing:-.3px;margin-bottom:6px}
.apps-block p{font-size:12.5px;color:#d3e7d6;line-height:1.65;margin:0 0 12px}
.apps-chips{display:flex;gap:6px;flex-wrap:wrap}
.apps-chips span{font-size:9.5px;font-weight:700;color:#eaf4eb;background:rgba(255,255,255,.16);
border:1px solid rgba(255,255,255,.26);border-radius:7px;padding:5px 9px}
/* one composition: a browser with a phone leaning on it */
/* reserve room on the right so the phone leans on the browser's corner
instead of covering its content */
.apps-stage{position:relative;min-height:400px;display:flex;align-items:center;
justify-content:flex-start;padding-right:112px}
.apps-stage .browser{width:100%;max-width:462px;box-shadow:0 34px 70px rgba(0,24,5,.42);
animation:float 6s ease-in-out infinite}
.apps-stage .phone{position:absolute;right:0;bottom:18px;width:156px;z-index:3;
box-shadow:0 28px 56px rgba(0,24,5,.5);animation:float 6s ease-in-out infinite;animation-delay:1.4s}
.apps-stage .phone .phone-screen{min-height:236px}
.has-gsap .apps-stage .browser,.has-gsap .apps-stage .phone{animation:none}
.apps-stage:after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;z-index:0;
background:radial-gradient(circle,rgba(255,255,255,.2),transparent 68%)}
/* the band's light text colour must not leak into the white device mocks */
.apps-band .browser,.apps-band .phone{color:var(--text)}
.apps-tagline{display:flex;align-items:center;gap:10px;justify-content:center;margin-top:26px;
font-size:12.5px;font-weight:700;color:#cfe3d2}
.apps-tagline i{font-style:normal;width:7px;height:7px;border-radius:50%;background:#8ef0c4;
box-shadow:0 0 0 5px rgba(142,240,196,.16)}
@media(max-width:1000px){
.apps-grid{grid-template-columns:1fr;gap:36px}
.apps-stage{min-height:340px}
}
@media(max-width:760px){
.apps-block{padding:18px;gap:13px}
.apps-block b{font-size:16px}
.apps-ico{width:40px;height:40px;font-size:17px}
.apps-stage{min-height:290px;padding-right:84px}
.apps-stage .browser{max-width:none}
.apps-stage .phone{width:120px;right:0;bottom:6px}
.apps-stage .phone .phone-screen{min-height:180px}
}
/* The products hero copy needs a tighter, more deliberate shape on a phone:
centred, with the three facts grouped into one card instead of floating. */
@media(max-width:760px){
.phero-inner{padding:28px 0 44px;gap:26px}
.phero-copy{text-align:center}
.phero-copy .eyebrow{justify-content:center}
.phero-copy h1{font-size:30px;line-height:1.1;margin-bottom:14px}
.phero-copy>p{font-size:14.5px;margin:0 auto 22px;max-width:none}
.phero-actions{gap:10px;margin-bottom:22px}
.phero-actions .btn{flex:1 1 100%;padding:14px 20px}
.phero-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:0;text-align:center;
background:rgba(255,255,255,.72);border:1px solid var(--border);border-radius:18px;
padding:16px 10px;box-shadow:0 10px 28px rgba(19,73,37,.07);backdrop-filter:blur(8px)}
.phero-facts div{position:relative;padding:0 6px}
.phero-facts div + div:before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
width:1px;height:34px;background:linear-gradient(180deg,transparent,#dce8de,transparent)}
.phero-facts div b{font-size:23px}
.phero-facts div span{font-size:10px;line-height:1.35;margin-top:5px}
.phero-stage{margin-top:2px}
}
@media(max-width:400px){
.phero-copy h1{font-size:27px}
.phero-facts div b{font-size:20px}
.phero-facts div span{font-size:9.5px}
}
/* ==========================================================================
HEADER — two-tier dark bar
A thin contact strip above a dark navigation bar. The strip folds away
once the page scrolls, so the sticky bar stays compact.
========================================================================== */
/* overflow-anchor:none stops the browser re-adjusting scrollY when the topbar
collapses. Belt and braces with the hysteresis in script.js — together they
are what stop the header flickering near the top of the page. */
.site-header{background:transparent;border-bottom:0;backdrop-filter:none;overflow-anchor:none}
/* --- tier 1: contact strip --- */
.topbar{background:#021607;overflow:hidden;
transition:max-height .35s cubic-bezier(.4,0,.2,1),opacity .3s;max-height:44px}
.topbar-in{display:flex;align-items:center;justify-content:flex-end;gap:24px;height:40px;
font-size:11.5px;color:#92af97}
.topbar-in a,.topbar-in span{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;color:#92af97;
transition:color .2s}
.topbar-in a:hover{color:#ffffff}
.topbar-in i{font-style:normal;color:#5a8764}
.site-header.scrolled .topbar{max-height:0;opacity:0}
/* --- tier 2: dark navigation --- */
.site-header .nav{background:linear-gradient(120deg,#01260d,#003d18 58%,#003f19);
border-bottom:1px solid rgba(255,255,255,.08);height:72px;
width:100%;max-width:none;padding-inline:max(4%,calc((100% - 1180px)/2))}
.site-header.scrolled .nav{box-shadow:0 12px 34px rgba(0,20,5,.34)}
.site-header .brand{color:#ffffff}
.desktop-nav{color:#a9c4ad}
.desktop-nav a{padding:6px 0}
.desktop-nav a:hover{color:#ffffff}
.desktop-nav a.active{color:#ffffff}
.desktop-nav a.active:after{background:linear-gradient(90deg,#9bcf5e,#8cc63f);height:2px;margin-top:6px}
.site-header .nav-cta{background:linear-gradient(100deg,#8cc63f,#9bcf5e);color:#231200;
box-shadow:0 10px 26px rgba(133,186,65,.34)}
.site-header .nav-cta:hover{background:linear-gradient(100deg,#86ba44,#a9d975);transform:translateY(-2px)}
.menu-toggle{color:#ffffff;width:42px;height:42px;border-radius:12px;display:none;place-items:center;
background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);font-size:19px}
.mobile-menu{background:#002d0f;border-top:1px solid rgba(255,255,255,.1);
box-shadow:0 18px 34px rgba(0,0,0,.4)}
.mobile-menu a{color:#cfe3d2;padding:11px 12px;border-radius:10px}
.mobile-menu a:hover,.mobile-menu a.active{background:rgba(255,255,255,.1);color:#ffffff}
.mobile-menu .btn{background:linear-gradient(100deg,#8cc63f,#9bcf5e);color:#231200}
.skip-link{background:#9bcf5e;color:#231200}
@media(max-width:900px){
.topbar-in{justify-content:center;gap:16px;font-size:10.5px}
}
@media(max-width:700px){
.site-header .nav{height:64px}
.menu-toggle{display:grid;margin-left:auto}
.topbar-in{gap:12px;font-size:10px;height:36px}
.topbar{max-height:40px}
.topbar-in .tb-mail{display:none}
}
@media(max-width:400px){
.topbar-in{font-size:9.5px}
}
/* ==========================================================================
THE SHIFT — homepage before/after panel (replaces the old two-card
problem / solution block). One panel, one row per pain, so the eye reads
the transformation instead of comparing two separate lists.
========================================================================== */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;border:0}
.swap-section{background:linear-gradient(180deg,#ffffff,#f6faf7 45%,#ffffff)}
.swap{display:block;position:relative;border:1px solid var(--border);border-radius:24px;overflow:hidden;
background:#ffffff;box-shadow:0 26px 64px rgba(0,59,23,.1)}
/* the panel is one continuous surface: cool grey on the left, brand blue on
the right, with a hairline seam down the middle */
.swap:before{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(100deg,rgba(117,133,120,.055) 0%,rgba(117,133,120,.02) 42%,
rgba(0,130,59,.03) 58%,rgba(84,128,0,.06) 100%)}
.swap:after{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;pointer-events:none;
background:linear-gradient(180deg,transparent,#e2ede4 12%,#e2ede4 88%,transparent)}
.swap>*{position:relative;z-index:1}
/* ---- header strip ---- */
.swap-head{display:grid;grid-template-columns:1fr 64px 1fr;align-items:center;gap:18px;
padding:15px 30px;border-bottom:1px solid #edf3ee}
.sw-head-old,.sw-head-new{font-size:10px;font-weight:800;letter-spacing:1.4px;display:inline-flex;
align-items:center;gap:9px}
.sw-head-old{color:#89968c}
.sw-head-old:before{content:"";width:18px;height:2px;border-radius:2px;background:#c3cec4}
.sw-head-new{grid-column:3;color:#00813b;justify-self:start}
.sw-head-new:before{content:"";width:18px;height:2px;border-radius:2px;
background:linear-gradient(90deg,#00823b,#548000)}
/* ---- the rows ---- */
.swap-rows{list-style:none;margin:0;padding:6px 14px 10px}
.swap-row{display:grid;grid-template-columns:1fr 64px 1fr;align-items:center;gap:18px;
padding:9px 16px;border-radius:12px;
transition:background .3s cubic-bezier(.4,0,.2,1),box-shadow .3s,transform .3s cubic-bezier(.4,0,.2,1)}
.swap-row+.swap-row{margin-top:2px}
.swap-row:hover{background:#ffffff;transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,59,23,.09)}
.sw-old,.sw-new{display:flex;align-items:center;gap:12px;font-size:13.5px;line-height:1.45;min-width:0}
.sw-old{color:#89968c}
.sw-old i{width:22px;height:22px;flex:none;border-radius:7px;display:grid;place-items:center;
font-style:normal;font-size:12px;font-weight:700;color:#a9b4ab;background:#eff3f0;
transition:color .3s,background .3s}
.sw-old span{transition:color .3s,opacity .3s}
.swap-row:hover .sw-old{color:#a3aea5}
.swap-row:hover .sw-old span{opacity:.72}
.sw-new{color:var(--text);font-weight:600}
.sw-new i{width:22px;height:22px;flex:none;border-radius:7px;display:grid;place-items:center;
font-style:normal;font-size:12px;font-weight:800;color:#ffffff;
background:linear-gradient(140deg,#13a878,#00823b);
box-shadow:0 5px 13px rgba(19,168,120,.26)}
/* the arrow is the hinge of the whole section */
.sw-link{display:grid;place-items:center}
.sw-link b{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;
font-size:13px;font-weight:700;color:#a0b3a3;background:#ffffff;border:1px solid #e2ede4;
transition:color .32s,background .32s,border-color .32s,transform .32s cubic-bezier(.34,1.4,.5,1),box-shadow .32s}
.swap-row:hover .sw-link b,.swap-row.is-lit .sw-link b{color:#ffffff;border-color:transparent;
background:linear-gradient(140deg,#00823b,#548000);transform:translateX(4px) scale(1.08);
box-shadow:0 8px 18px rgba(0,130,59,.3)}
/* ---- footer strip ---- */
.swap-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
padding:14px 30px;border-top:1px solid #edf3ee;background:rgba(255,255,255,.6)}
.sw-live{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;font-weight:700;color:#5c7260}
.sw-bars{display:flex;gap:4px;align-items:flex-end;height:22px}
.sw-bars i{width:7px;border-radius:2px;background:linear-gradient(180deg,#548000,#00823b);opacity:.75}
.sw-bars i:nth-child(1){height:9px}.sw-bars i:nth-child(2){height:16px}
.sw-bars i:nth-child(3){height:12px}.sw-bars i:nth-child(4){height:21px}
.sw-bars i:nth-child(5){height:14px}
.swap-foot .btn{margin-left:auto}
.swap-foot .btn span{display:inline-block;transition:transform .28s cubic-bezier(.4,0,.2,1)}
.swap-foot .btn:hover span{transform:translateX(4px)}
/* ---- responsive: the pair stacks, before above after, on one accent rail ---- */
@media(max-width:760px){
.swap{border-radius:18px}
.swap:after{display:none}
.swap:before{background:linear-gradient(170deg,rgba(117,133,120,.05),rgba(84,128,0,.05))}
.swap-head{grid-template-columns:1fr;gap:6px;padding:16px 18px}
.sw-head-new{grid-column:auto}
.swap-rows{padding:6px 10px 10px}
.swap-row{grid-template-columns:1fr;gap:3px;padding:9px 14px 9px 16px;position:relative}
.swap-row:before{content:"";position:absolute;left:5px;top:10px;bottom:10px;width:2px;border-radius:2px;
background:linear-gradient(180deg,#d5dfd7,#00823b)}
.swap-row:hover{transform:none}
.sw-link{display:none}
.sw-old{font-size:11.5px;gap:9px}
.sw-old i{width:18px;height:18px;font-size:10px;border-radius:6px}
.sw-new{font-size:13px;gap:9px}
.sw-new i{width:18px;height:18px;font-size:10px;border-radius:6px}
.swap-foot{padding:15px 18px;gap:12px}
.swap-foot .btn{margin-left:0;width:100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
.swap-row,.sw-link b,.sw-old span,.swap-foot .btn span{transition:none}
.swap-row:hover{transform:none}
}
/* ==========================================================================
INDUSTRY CARD PHOTOS — one photograph per card, from img/industry/.
Filenames match the card label in lower case, so adding an industry is a
new 
and nothing else.
The per-card gradient underneath stays as the fallback if an image 404s.
========================================================================== */
.ind-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
object-position:center 38%;z-index:0;
transition:transform .55s cubic-bezier(.4,0,.2,1)}
.industry-card:hover .ind-photo{transform:scale(1.06)}
/* photographs are busier than the flat gradients were, so the label needs a
heavier scrim than the original 30% / .55 to stay legible */
.industry-card:after{background:
linear-gradient(transparent 18%,rgba(2,20,6,.46) 52%,rgba(2,16,5,.88) 100%)}
.industry-card b{font-size:12.5px;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.industry-card span{color:#e2efe4;text-shadow:0 1px 8px rgba(0,0,0,.5)}
@media(prefers-reduced-motion:reduce){
.ind-photo,.industry-card:hover .ind-photo{transition:none;transform:none}
}
/* ==========================================================================
ABOUT PAGE — proof bar, offices, what-we-build, process, why cards.
Prefix `ab-` (checked: nothing else in this file uses it).
========================================================================== */
/* ---- PROOF BAR: the page's dark break, and its only hard numbers ----
Every figure here exists elsewhere on the site. If a real one changes,
change `data-target` in about.html — the counter script reads it. */
.ab-proof{position:relative;overflow:hidden;padding:56px 0 60px;color:#ffffff;
background:linear-gradient(118deg,#00290d,#005021 52%,#00491e)}
.ab-proof-glow{position:absolute;right:-140px;top:-180px;width:560px;height:560px;border-radius:50%;
background:radial-gradient(circle,rgba(84,128,0,.42),transparent 66%);pointer-events:none}
.ab-proof>.container{position:relative;z-index:1}
.ab-proof-top{margin-bottom:34px;max-width:640px}
.ab-proof-top h2{font-size:31px;line-height:1.14;letter-spacing:-1.2px;margin:0}
.ab-proof-top h2 span{color:#90d39e}
.ab-pf-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0}
.ab-pf{padding:4px 20px;border-left:1px solid rgba(255,255,255,.15)}
.ab-pf:first-child{padding-left:0;border-left:0}
.ab-pf b{display:block;font-size:40px;line-height:1;letter-spacing:-2px;
background:linear-gradient(120deg,#ffffff,#9ecfa7);-webkit-background-clip:text;background-clip:text;
color:transparent}
.ab-pf>span{display:block;margin-top:9px;font-size:11.5px;line-height:1.5;color:#b8d2bd}
/* ---- the two offices, in place of stats the proof bar already shows ---- */
.ab-offices{display:grid;gap:12px;align-content:start}
.ab-office{display:flex;gap:14px;align-items:flex-start;padding:17px 18px;border-radius:16px;
background:#ffffff;border:1px solid var(--border);box-shadow:0 10px 26px rgba(0,59,23,.07);
transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s}
.ab-office:hover{transform:translateY(-3px);box-shadow:0 18px 38px rgba(0,59,23,.11)}
.ab-flag{width:42px;height:42px;flex:none;border-radius:13px;display:grid;place-items:center;
font-size:12px;font-weight:800;letter-spacing:.5px;color:#ffffff;
background:linear-gradient(140deg,var(--brand-deep),var(--blue2))}
.ab-flag.ca{background:linear-gradient(140deg,#537f00,#8cc63f)}
.ab-office b{display:block;font-size:14px;letter-spacing:-.2px;color:var(--text)}
.ab-office address{font-style:normal;font-size:12px;line-height:1.6;color:var(--muted);margin:4px 0 6px}
.ab-office a{font-size:12px;font-weight:700;color:var(--blue2)}
.ab-office a:hover{text-decoration:underline}
.ab-office-note{margin:4px 2px 0;font-size:11.5px;line-height:1.6;color:var(--muted);font-style:italic}
/* ---- WHO WE ARE: one column, so the prose needs a measure ---- */
.ab-who{max-width:820px}
/* Who We Are runs straight into What We Actually Build, so the boundary is
tightened: 44 + 76 = 120px between them instead of the default 84 + 100. */
.ab-who-sec{padding-top:78px;padding-bottom:44px}
.ab-build-sec{padding-top:76px}
@media(max-width:700px){
.ab-who-sec{padding-top:52px;padding-bottom:30px}
.ab-build-sec{padding-top:52px}
}
.ab-who h2{font-size:36px;line-height:1.1;letter-spacing:-1.4px;margin-bottom:20px}
.ab-who p{font-size:15px;line-height:1.8;color:#536957;margin-bottom:15px;max-width:74ch}
.ab-who p:last-child{margin-bottom:0}
@media(max-width:700px){ .ab-who h2{font-size:27px;letter-spacing:-1px} .ab-who p{font-size:14.5px} }
/* ---- section backgrounds: the page alternates so nothing runs flat ---- */
.ab-build-sec{background:linear-gradient(180deg,#ffffff,#f6faf7 52%,#ffffff)}
.ab-way-sec{background:#ffffff}
.ab-why-sec{background:linear-gradient(180deg,#f6fbf7,#ffffff)}
/* ---- WHAT WE ACTUALLY BUILD ---- */
.ab-build{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.ab-bc{position:relative;display:flex;flex-direction:column;padding:26px 24px 24px;border-radius:20px;
background:#ffffff;border:1px solid var(--border);box-shadow:0 12px 32px rgba(0,59,23,.07);
transition:transform .32s cubic-bezier(.4,0,.2,1),box-shadow .32s,border-color .32s}
.ab-bc:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:20px 20px 0 0;
background:linear-gradient(90deg,var(--blue2),var(--purple))}
.ab-bc.accent:before{background:linear-gradient(90deg,var(--purple),var(--orange))}
.ab-bc:hover{transform:translateY(-5px);border-color:#cae1ce;box-shadow:0 24px 48px rgba(0,59,23,.12)}
.ab-bc-top{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.ab-bc-n{width:30px;height:30px;flex:none;border-radius:9px;display:grid;place-items:center;
font-size:10.5px;font-weight:800;color:#ffffff;background:linear-gradient(140deg,var(--brand-deep),var(--blue2))}
.ab-bc.accent .ab-bc-n{background:linear-gradient(140deg,var(--purple),var(--orange))}
.ab-bc-top b{font-size:17px;letter-spacing:-.4px;color:var(--text)}
.ab-bc>p{font-size:12.5px;line-height:1.68;color:var(--muted);margin:0 0 15px}
.ab-list{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:7px}
.ab-list li{position:relative;padding-left:19px;font-size:12.5px;line-height:1.5;color:#405844;font-weight:600}
.ab-list li:before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:2px;
background:linear-gradient(140deg,var(--blue2),var(--purple))}
.ab-bc.accent .ab-list li:before{background:linear-gradient(140deg,var(--purple),var(--orange))}
.ab-bc .svc-link{margin-top:auto}
/* ---- HOW WE WORK WITH YOU ---- */
.ab-way{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.ab-way-rail{position:absolute;left:0;right:0;top:22px;height:2px;border-radius:2px;
background:linear-gradient(90deg,var(--blue2),var(--purple) 55%,var(--green))}
.ab-step{position:relative;z-index:1;display:flex;flex-direction:column;padding:0 4px}
.ab-step-n{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;margin-bottom:16px;
font-size:13px;font-weight:800;color:#ffffff;background:linear-gradient(140deg,var(--brand-deep),var(--blue2));
box-shadow:0 10px 24px rgba(0,130,59,.26);
transition:transform .34s cubic-bezier(.34,1.4,.5,1)}
.ab-step:nth-child(4) .ab-step-n{background:linear-gradient(140deg,var(--purple),var(--blue2))}
.ab-step:nth-child(5) .ab-step-n{background:linear-gradient(140deg,var(--orange),var(--purple))}
.ab-step:nth-child(6) .ab-step-n{background:linear-gradient(140deg,var(--green),var(--blue2))}
.ab-step:hover .ab-step-n{transform:translateY(-4px) scale(1.06)}
.ab-step h3{font-size:15px;letter-spacing:-.3px;margin:0 0 7px;color:var(--text)}
.ab-step p{font-size:12px;line-height:1.62;color:var(--muted);margin:0 0 12px}
.ab-get{margin-top:auto;align-self:flex-start;font-size:10.5px;font-weight:700;line-height:1.45;color:#09823c;
background:rgba(0,130,59,.07);border:1px solid rgba(0,130,59,.17);border-radius:9px;padding:7px 10px}
/* ---- WHY GENZERP: each card now ends on something checkable ---- */
.ab-why-tag{display:inline-block;margin-top:13px;font-size:10px;font-weight:800;letter-spacing:.7px;
text-transform:uppercase;color:var(--green);background:rgba(19,168,120,.09);
border:1px solid rgba(19,168,120,.22);border-radius:999px;padding:6px 11px}
/* ---- responsive ---- */
@media(max-width:1000px){
.ab-pf-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 0}
.ab-pf:nth-child(3n+1){padding-left:0;border-left:0}
.ab-build{grid-template-columns:1fr}
.ab-way{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.ab-way-rail{display:none}
}
@media(max-width:700px){
.ab-proof{padding:40px 0 44px}
.ab-proof-top h2{font-size:25px;letter-spacing:-.9px}
.ab-pf-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 0}
.ab-pf{padding:4px 14px}
.ab-pf:nth-child(odd){padding-left:0;border-left:0}
.ab-pf b{font-size:29px;letter-spacing:-1.3px}
.ab-way{grid-template-columns:1fr;gap:20px}
.ab-step{padding:0}
.ab-step-n{width:40px;height:40px;margin-bottom:12px}
.ab-bc{padding:22px 20px}
}
@media(prefers-reduced-motion:reduce){
.ab-office,.ab-bc,.ab-step-n{transition:none}
.ab-office:hover,.ab-bc:hover{transform:none}
.ab-step:hover .ab-step-n{transform:none}
}
/* ==========================================================================
CONTACT PAGE — trust line, route cards, interest chips, FAQ.
Prefix `cx-` (checked: nothing else in this file uses it).
========================================================================== */
/* ---- hero credibility line ---- */
.cx-trust{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:22px 0 4px}
.cx-trust span{font-size:12px;color:var(--muted);background:#ffffff;border:1px solid var(--border);
border-radius:999px;padding:8px 15px;box-shadow:0 4px 14px rgba(0,59,23,.05)}
.cx-trust b{color:var(--blue2);font-weight:800;margin-right:5px}
/* ---- three ways in ---- */
.cx-routes-sec{padding:0;margin-top:-42px;position:relative;z-index:4}
.cx-routes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.cx-route{position:relative;overflow:hidden;display:flex;flex-direction:column;text-align:left;
font:inherit;cursor:pointer;padding:24px 22px 22px;border-radius:20px;
background:#ffffff;border:1px solid var(--border);box-shadow:0 16px 40px rgba(0,59,23,.09);
transition:transform .32s cubic-bezier(.4,0,.2,1),box-shadow .32s,border-color .32s}
.cx-route:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
background:linear-gradient(90deg,var(--blue2),var(--purple));transform:scaleX(0);
transform-origin:left center;transition:transform .4s cubic-bezier(.4,0,.2,1)}
.cx-route.accent:before{background:linear-gradient(90deg,var(--orange),var(--purple))}
.cx-route:hover,.cx-route:focus-visible{transform:translateY(-6px);border-color:#cae1ce;
box-shadow:0 28px 56px rgba(0,59,23,.14);outline:none}
.cx-route:hover:before,.cx-route:focus-visible:before{transform:scaleX(1)}
.cx-route:focus-visible{box-shadow:0 0 0 3px rgba(0,130,59,.3),0 28px 56px rgba(0,59,23,.14)}
.cx-r-ico{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:#ffffff;
margin-bottom:15px;background:linear-gradient(140deg,var(--brand-deep),var(--blue2));
box-shadow:0 10px 22px rgba(0,130,59,.24);
transition:transform .36s cubic-bezier(.34,1.4,.5,1)}
.cx-route.accent .cx-r-ico{background:linear-gradient(140deg,var(--orange),var(--purple));
box-shadow:0 10px 22px rgba(140,198,63,.26)}
.cx-r-ico svg{width:21px;height:21px;display:block}
.cx-route:hover .cx-r-ico{transform:translateY(-3px) rotate(-6deg) scale(1.05)}
.cx-route b{font-size:16.5px;letter-spacing:-.4px;color:var(--text);margin-bottom:7px}
.cx-route p{font-size:12.5px;line-height:1.65;color:var(--muted);margin:0 0 16px}
.cx-route em{margin-top:auto;font-style:normal;font-size:12px;font-weight:800;color:var(--blue2);
display:inline-flex;align-items:center;gap:7px}
.cx-route.accent em{color:var(--orange)}
.cx-route em span{transition:transform .28s cubic-bezier(.4,0,.2,1)}
.cx-route:hover em span{transform:translateX(4px)}
/* ---- interest chips (the