/* Techora design system. Tokens first, then base, layout, components. */

:root{
  --green:#6EE7B7; --green-dark:#065F46; --green-tint:#E6F4EA; --green-line:#B7E4C7;
  --bg:#FFFFFF; --soft:#F1F5F9; --ink:#0F172A; --muted:#475569; --dark:#0F172A; --dark-2:#162033;
  --line:#E2E8F0; --line-strong:#CBD5E1;
  --font:"Instrument Sans","Helvetica Neue",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --r-sm:10px; --r:14px; --r-lg:20px;
  --shadow:0 1px 2px rgba(11,43,32,.04),0 8px 24px -12px rgba(11,43,32,.12);
  --shadow-hover:0 2px 4px rgba(11,43,32,.05),0 16px 32px -14px rgba(11,43,32,.22);
  --wrap:1720px; --gutter:clamp(20px,4.5vw,88px);
  --section:clamp(64px,9vw,112px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;font-family:var(--font);font-size:1.0625rem;line-height:1.6;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{max-width:100%;display:block}
a{color:var(--green-dark);text-underline-offset:3px}
a:hover{color:#0A3A28}
:focus-visible{outline:3px solid var(--green-dark);outline-offset:3px;border-radius:6px}
.dark :focus-visible,.site-footer :focus-visible{outline-color:var(--green)}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3{line-height:1.12;letter-spacing:-.025em;margin:0 0 .5em;font-weight:650}
h1{font-size:clamp(2.4rem,5.4vw,4rem);letter-spacing:-.035em;font-weight:700}
h2{font-size:clamp(1.8rem,3.4vw,2.7rem)}
h3,.h3{font-size:1.18rem;letter-spacing:-.015em;line-height:1.3}
h2.h3{font-size:1.3rem}
p{margin:0 0 1em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.container{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.container.narrow{max-width:780px}
.skip-link{position:absolute;left:12px;top:-60px;background:var(--dark);color:#fff;padding:10px 16px;border-radius:8px;z-index:100;text-decoration:none}
.skip-link:focus{top:12px;color:#fff}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;height:68px;gap:20px}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:1.25rem;letter-spacing:-.03em;color:var(--ink);text-decoration:none}
.brand:hover{color:var(--ink)}
.brand-light,.brand-light:hover{color:#fff}
.site-nav{display:flex;align-items:center;gap:28px}
.site-nav ul{display:flex;gap:4px}
.site-nav ul a{display:block;padding:8px 12px;border-radius:999px;font-size:.95rem;font-weight:500;color:var(--ink);text-decoration:none;transition:background .15s}
.site-nav ul a:hover{background:var(--soft);color:var(--ink)}
.site-nav ul a[aria-current=page]{color:var(--green-dark)}
.nav-toggle{display:none;background:none;border:0;padding:8px;border-radius:10px;color:var(--ink);cursor:pointer}
.nav-toggle .i-close{display:none}
.nav-toggle[aria-expanded=true] .i-open{display:none}
.nav-toggle[aria-expanded=true] .i-close{display:inline}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:999px;font:600 .98rem/1.2 var(--font);text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background .15s,transform .15s,box-shadow .15s,border-color .15s;min-height:46px}
.btn-sm{padding:9px 18px;min-height:40px;font-size:.92rem}
.btn-lg{padding:15px 28px;min-height:54px;font-size:1.02rem}
.btn-primary{background:var(--green-dark);color:#fff}
.btn-primary:hover{background:#0A3A28;color:#fff;transform:translateY(-1px);box-shadow:0 8px 20px -8px rgba(15,74,51,.55)}
.btn-secondary{background:#fff;color:var(--ink);border-color:var(--line-strong)}
.btn-secondary:hover{border-color:var(--ink);color:var(--ink)}
.btn-accent{background:var(--green);color:var(--dark)}
.btn-accent:hover{background:#34D399;color:var(--dark);transform:translateY(-1px);box-shadow:0 10px 24px -10px rgba(16,185,129,.7)}
.btn-ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}
.btn-ghost-light:hover{border-color:#fff;color:#fff}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.center-row{justify-content:center}
.arrow-link{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:.96rem;text-decoration:none;color:var(--green-dark)}
.arrow-link svg{transition:transform .15s}
.arrow-link:hover svg{transform:translateX(3px)}

/* Sections */
.section{padding:var(--section) 0}
.section.soft{background:var(--soft)}
.section.dark{background:var(--dark);color:#E9EEEB}
.section.dark h2,.section.dark h3{color:#fff}
.section-head{max-width:720px;margin:0 0 48px}
.section-head p{color:var(--muted);font-size:1.12rem;margin:0}
.section-head.on-dark p{color:#B5C4BB}
.section-head.row{max-width:none;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.center{text-align:center;margin-top:40px}
.center-text{text-align:center}
.eyebrow{font-size:.82rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--green-dark);margin:0 0 16px}
.lead{font-size:clamp(1.08rem,1.6vw,1.28rem);color:var(--muted);max-width:640px;line-height:1.55}
.center-text .lead{margin-left:auto;margin-right:auto}
.split{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(32px,6vw,80px);align-items:start}

/* Hero */
.hero{padding:clamp(48px,7vw,96px) 0 clamp(56px,8vw,104px);background:
  radial-gradient(circle at 1px 1px,#DEDBCF 1px,transparent 0) 0 0/28px 28px,var(--bg);
  mask-image:none;border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(24px,5vw,64px);align-items:center}
.hero h1{margin-bottom:.45em}
.trust{margin:36px 0 0;font-size:.92rem;color:var(--muted);font-weight:500}
.hero-visual{background:rgba(255,255,255,.85);border:1px solid var(--line);border-radius:var(--r-lg);padding:12px;box-shadow:var(--shadow)}
.hero-svg{width:100%;height:auto;font-family:var(--font)}
.flow path{stroke-dasharray:4 14;animation:dash 2.4s linear infinite}
@keyframes dash{to{stroke-dashoffset:-72}}

/* Platforms + before/after */
.platforms{padding:40px 0;border-bottom:1px solid var(--line)}
.platforms-h{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:0 0 18px}
.platform-list{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:center}
.platform-list li{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line-strong);border-radius:999px;padding:10px 20px;font-weight:650;font-size:1.02rem;letter-spacing:-.01em}
.p-dot{width:8px;height:8px;border-radius:50%;background:var(--green-dark)}
.platform-list .p-more{border:0;background:none;color:var(--muted);font-weight:500;font-size:.95rem;padding-left:6px}
.platform-note{margin:16px 0 0;font-size:.82rem;color:var(--muted);max-width:760px}
.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.ba{border-radius:var(--r-lg);padding:28px;border:1px solid var(--line)}
.ba h3{margin-bottom:16px}
.ba li{padding:10px 0 10px 30px;position:relative;border-top:1px solid var(--line);font-size:.98rem}
.ba li::before{position:absolute;left:0;top:10px;font-weight:700}
.ba.before{background:var(--soft)}.ba.before li{color:var(--muted)}.ba.before li::before{content:"\00d7";color:#A4A99F}
.ba.after{background:var(--green-tint);border-color:var(--green-line)}.ba.after li{border-color:var(--green-line)}.ba.after li::before{content:"\2713";color:var(--green-dark)}
@media (max-width:860px){.ba-grid{grid-template-columns:1fr}}

/* Cards */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card-grid.two{grid-template-columns:repeat(2,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;display:flex;flex-direction:column;align-items:flex-start;transition:box-shadow .2s,transform .2s,border-color .2s}
.card:hover{box-shadow:var(--shadow-hover);border-color:var(--line-strong);transform:translateY(-2px)}
.soft .card{background:#fff}
.card h2 a,.card h3 a{color:inherit;text-decoration:none}
.card p{color:var(--muted);font-size:.98rem;margin-bottom:18px}
.card .arrow-link,.card .mini-list{margin-top:auto}
.card-icon{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:12px;background:var(--green-tint);border:1px solid var(--green-line);color:var(--green-dark);margin-bottom:20px;flex:none}
.card-grid.compact .card{padding:24px}
.card-grid.compact .card p{margin-bottom:0}
.mini-list{display:flex;flex-direction:column;gap:6px;margin:0 0 20px;font-size:.92rem;color:var(--muted)}
.mini-list li::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--green-dark);margin-right:10px;vertical-align:middle}

/* Integration flow */
.flow-label{display:flex;gap:12px;align-items:center;flex-wrap:wrap;color:#B5C4BB;font-size:.92rem;margin:0 0 28px}
.flow-label span{background:rgba(16,185,129,.12);color:var(--green);border:1px solid rgba(16,185,129,.3);padding:3px 12px;border-radius:999px;font-weight:600;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase}
.flow-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;counter-reset:s}
.flow-steps li{position:relative;background:var(--dark-2);border:1px solid #26324A;border-radius:var(--r);padding:22px 18px}
.flow-steps li:not(:last-child)::after{content:"";position:absolute;top:50%;right:-17px;width:18px;height:2px;background:linear-gradient(90deg,var(--green),transparent)}
.flow-steps h3{font-size:1rem;margin:14px 0 6px;color:#fff}
.flow-steps p{font-size:.88rem;color:#B5C4BB;margin:0}
.flow-icon{color:var(--green)}
.step-n{position:absolute;top:16px;right:16px;font-size:.75rem;font-weight:600;color:#8FA398}

/* Outcomes */
.outcome-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 56px}
.outcome-grid li{display:flex;gap:16px;padding:24px 0;border-top:1px solid var(--line)}
.outcome-grid h3{margin:0 0 4px;font-size:1.1rem}
.outcome-grid p{margin:0;color:var(--muted);font-size:.98rem}
.tick{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--green-tint);border:1px solid var(--green-line);color:var(--green-dark);margin-top:2px}

/* ERP */
.module-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.module-list li{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;font-weight:550;font-size:.98rem}
.module-list svg{color:var(--green-dark);flex:none}

/* Process */
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative}
.process li{position:relative;padding-top:28px;border-top:2px solid var(--line-strong)}
.process li::before{content:"";position:absolute;top:-6px;left:0;width:10px;height:10px;border-radius:50%;background:var(--green-dark)}
.proc-n{display:block;font-size:.85rem;font-weight:600;color:var(--green-dark);margin-bottom:10px}
.process p{color:var(--muted);font-size:.98rem}

/* Why */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px 40px}
.why-grid li{padding-top:20px;border-top:1px solid var(--line-strong)}
.why-grid h3{font-size:1.08rem;margin-bottom:6px}
.why-grid p{color:var(--muted);font-size:.97rem;margin:0}

/* Articles */
.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.article-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s}
.article-card:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px)}
.article-card h3{font-size:1.08rem;margin:12px 0 10px}
.article-card h3 a{color:var(--ink);text-decoration:none}
.article-card h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.article-card p{color:var(--muted);font-size:.93rem;margin-bottom:16px}
.article-card .meta{margin-top:auto}
.article-card[hidden]{display:none}
.tag{display:inline-block;align-self:flex-start;font-size:.75rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--green-dark);background:var(--green-tint);border:1px solid var(--green-line);padding:3px 10px;border-radius:999px}
.meta{font-size:.85rem;color:var(--muted)}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.chip{font:500 .92rem var(--font);background:#fff;border:1px solid var(--line-strong);border-radius:999px;padding:8px 18px;cursor:pointer;color:var(--ink);min-height:40px}
.chip:hover{border-color:var(--ink)}
.chip.is-active{background:var(--dark);color:#fff;border-color:var(--dark)}
html:not(.js) .filters{display:none}

/* Page hero / prose */
.page-hero{padding:clamp(40px,6vw,80px) 0 clamp(32px,4vw,56px);background:var(--soft);border-bottom:1px solid var(--line)}
.page-hero h1{font-size:clamp(2rem,4.4vw,3.2rem);max-width:860px}
.h1-article{font-size:clamp(1.9rem,4vw,2.8rem)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:8px;font-size:.88rem;color:var(--muted);margin-bottom:24px}
.crumbs li+li::before{content:"/";margin-right:8px;color:var(--line-strong)}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--ink)}
.prose{font-size:1.06rem;line-height:1.75}
.prose h2{font-size:1.55rem;margin:2em 0 .5em}
.prose ul{list-style:disc;padding-left:1.3em;margin:0 0 1.2em}
.prose li{margin-bottom:.4em}
.callout,.note-box,.callout-cta{background:var(--green-tint);border:1px solid var(--green-line);border-radius:var(--r-lg);padding:24px 26px}
.callout{color:#0F172A;font-size:.98rem;margin:0}
.note-box{margin-top:40px;background:var(--soft);border-color:var(--line)}
.callout-cta{margin-top:3em}
.callout-cta h2{margin-top:0;font-size:1.3rem}
.check-list{display:flex;flex-direction:column;gap:14px}
.check-list li{display:flex;gap:12px;align-items:flex-start}
.check-list svg{color:var(--green-dark);flex:none;margin-top:4px}
.inline-links{margin-top:36px;color:var(--muted);font-size:.95rem}
.faq details{border-bottom:1px solid var(--line-strong);padding:18px 0}
.faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4rem;line-height:1;color:var(--green-dark)}
.faq details[open] summary::after{content:"\2212"}
.faq p{margin:12px 0 0;color:var(--muted)}
.industry-list{display:grid;gap:20px}
.industry{display:grid;grid-template-columns:1fr 1fr;gap:32px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px}
.industry-head{display:flex;gap:18px}
.industry-head p{color:var(--muted);margin:0}
.industry .card-icon{margin-bottom:0}

/* CTA band */
.cta-band{padding:var(--section) 0;text-align:center}
.cta-band.dark{background:var(--dark);color:#fff;background-image:radial-gradient(60% 80% at 50% 0%,rgba(16,185,129,.12),transparent 70%)}
.cta-band h2{color:#fff;max-width:760px;margin:0 auto .5em}
.cta-band p{color:#B5C4BB;max-width:560px;margin:0 auto;font-size:1.12rem}
.cta-band .btn-row{justify-content:center;margin-top:32px}

/* Contact + form */
.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,6vw,72px);align-items:start}
.next-steps{counter-reset:n;display:flex;flex-direction:column;gap:14px;margin-bottom:32px}
.next-steps li{counter-increment:n;display:flex;gap:14px;color:var(--muted)}
.next-steps li::before{content:counter(n);flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--green-tint);border:1px solid var(--green-line);color:var(--green-dark);font-weight:600;font-size:.85rem}
.contact-list{display:flex;flex-direction:column;gap:12px}
.contact-list li{display:flex;gap:10px;align-items:center}
.contact-list.light a,.contact-list.light svg{color:var(--green-dark)}
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(22px,4vw,40px);box-shadow:var(--shadow)}
.form-title{font-size:1.5rem;margin-bottom:6px}
.form-note{color:var(--muted);font-size:.9rem;margin-bottom:24px}
.field{margin-bottom:20px}
.field label{display:block;font-weight:600;font-size:.93rem;margin-bottom:6px}
.field .opt{font-weight:400;color:var(--muted)}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:1rem;padding:12px 14px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:#fff;color:var(--ink);min-height:48px}
.field textarea{resize:vertical;min-height:140px}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#A4A99F}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:3px solid rgba(15,74,51,.35);outline-offset:0;border-color:var(--green-dark)}
.field .hint{font-size:.85rem;color:var(--muted);margin:6px 0 0}
.field .err{font-size:.88rem;color:#B42318;font-weight:500;margin:6px 0 0}
.field [aria-invalid=true]{border-color:#B42318}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.privacy-note{font-size:.88rem;color:var(--muted)}
.form-status{border-radius:var(--r-sm);padding:14px 16px;margin-bottom:20px;font-size:.96rem}
.form-status.ok{background:var(--green-tint);border:1px solid var(--green-line);color:#0F172A}
.form-status.bad{background:#FEF3F2;border:1px solid #FECDCA;color:#7A271A}
.form-status a{color:inherit;font-weight:600}

/* Footer */
.site-footer{background:var(--dark);color:#B5C4BB;padding:72px 0 28px;font-size:.95rem}
.site-footer a{color:#D5DDD9;text-decoration:none}
.site-footer a:hover{color:var(--green)}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:48px}
.footer-about p{margin:18px 0;max-width:340px}
.footer-h{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:#8FA398;margin:0 0 16px;font-weight:600}
.site-footer ul{display:flex;flex-direction:column;gap:10px}
.site-footer .social{flex-direction:row;gap:16px}
.site-footer .contact-list svg{color:var(--green)}
.footer-base{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;align-items:center;border-top:1px solid #1C4030;padding-top:24px;font-size:.88rem}
.footer-base p{margin:0}
.footer-base .tm{flex:1 1 100%;order:3;color:#8FA398;font-size:.82rem}
.footer-base .legal{flex-direction:row;gap:20px}

/* Techaura additions */
.nav-cta{white-space:nowrap}
.svc-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
.svc-grid>li{grid-column:span 2}
.svc-grid>li:nth-child(n+4){grid-column:span 3}
.svc-card{align-items:stretch;gap:0}
.svc-top{display:flex;justify-content:space-between;align-items:flex-start}
.svc-num{font-size:.85rem;font-weight:600;color:var(--muted);letter-spacing:.06em}
.svc-q{font-size:.95rem;font-weight:600;color:var(--green-dark);margin:0 0 8px}
.svc-q.big{font-size:1.2rem;margin-bottom:12px}
.svc-card h3{margin-bottom:10px;font-size:1.3rem}
.svc-card p:not(.svc-q){margin-bottom:22px}
.svc-card .btn{align-self:flex-start;margin-top:auto}
.card-icon.sm{width:40px;height:40px;margin:0;border-radius:10px}
.platform-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.platform-grid>li{grid-column:span 2}
.platform-grid>li:nth-child(n+4){grid-column:span 3}
.platform-group{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px}
.pg-head{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.pg-head h3{margin:0}
.platform-group>p{color:var(--muted);font-size:.93rem;margin-bottom:16px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips li{background:var(--soft);border:1px solid var(--line-strong);border-radius:999px;padding:6px 14px;font-weight:600;font-size:.92rem}
.platform-note{margin:16px 0 0;font-size:.84rem;color:var(--muted);max-width:760px}
.pay-band{margin-top:40px;background:var(--dark);color:#E7EFEA;border-radius:var(--r-lg);padding:clamp(24px,4vw,44px);display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(24px,4vw,56px);align-items:center}
.pay-band h3{color:#fff;font-size:1.5rem}
.pay-band .eyebrow{color:var(--green)}
.pay-band p{color:#B5C4BB}
.pay-band .arrow-link{color:var(--green)}
.pay-flow{display:grid;gap:12px}
.pay-flow li{display:flex;gap:14px;align-items:flex-start;background:var(--dark-2);border:1px solid #26324A;border-radius:var(--r);padding:14px 16px}
.pay-flow h4{margin:0 0 2px;font-size:.98rem;color:#fff}
.pay-flow p{margin:0;font-size:.88rem}
.pay-flow.wide{grid-template-columns:repeat(4,1fr);margin-top:32px}
.pay-flow.wide li{background:#fff;border-color:var(--line)}
.pay-flow.wide h4{color:var(--ink)}.pay-flow.wide p{color:var(--muted)}
.pay-flow.wide .flow-icon{color:var(--green-dark)}
.process.six{grid-template-columns:repeat(6,1fr);gap:16px}
.uc-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.uc-grid li{background:var(--dark-2);border:1px solid #26324A;border-radius:var(--r);padding:22px 18px;display:flex;flex-direction:column}
.uc-grid h3{font-size:1.02rem;margin:14px 0 8px}
.uc-grid p{font-size:.9rem;color:#B5C4BB}
.uc-grid .arrow-link{margin-top:auto;color:var(--green)}
.uc-list{display:grid;gap:20px}
.uc-item{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px}
.uc-head{display:flex;gap:16px;align-items:center;margin-bottom:18px}
.uc-head .card-icon{margin:0}
.uc-head h2{margin:0}
.uc-cols{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-bottom:12px}
.mini-h{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:6px}
.why-grid.four{grid-template-columns:repeat(4,1fr)}
.card-grid.four{grid-template-columns:repeat(4,1fr)}
.empty-projects{background:var(--soft);border:1px dashed var(--line-strong);border-radius:var(--r-lg);padding:clamp(24px,4vw,44px);max-width:760px}
.empty-projects p{color:var(--muted)}
.final-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,5vw,72px);align-items:start;text-align:left}
.final-copy h2{margin-left:0}
.final-copy p{margin-left:0}
.cta-band .final-copy .btn{margin-top:20px}
.form-card.on-dark-card{color:var(--ink)}
.form-card.on-dark-card .privacy-note,.form-card.on-dark-card .form-note{color:var(--muted)}
.cta-band .form-card p{max-width:none;margin-left:0;color:var(--muted);font-size:inherit}
.cta-band .form-card .form-title{color:var(--ink);max-width:none;margin:0 0 6px}
.cta-band .form-card .form-note{margin:0 0 24px;font-size:.9rem}
.cta-band .form-card .hint{margin:6px 0 0;font-size:.85rem}
.cta-band .form-card .err{margin:6px 0 0;font-size:.88rem;color:#B42318}
.cta-band .form-card .privacy-note{margin:0 0 20px;font-size:.88rem}
.cta-band .form-card .form-status{font-size:.96rem;margin:0 0 20px}
.next-steps.on-dark{margin:28px 0 0}
.next-steps.on-dark li{color:#B5C4BB}
.next-steps.on-dark li::before{background:rgba(16,185,129,.14);border-color:rgba(16,185,129,.35);color:var(--green)}
.contact-list.on-dark{margin-top:28px}
.contact-list.on-dark a,.contact-list.on-dark svg{color:var(--green)}
.callout{margin-top:24px}
@media (max-width:1020px){
  .svc-grid,.platform-grid{grid-template-columns:repeat(2,1fr)}
  .svc-grid>li,.svc-grid>li:nth-child(n+4),.platform-grid>li,.platform-grid>li:nth-child(n+4){grid-column:auto}
  .uc-grid,.process.six{grid-template-columns:repeat(3,1fr)}
  .why-grid.four,.card-grid.four,.pay-flow.wide{grid-template-columns:repeat(2,1fr)}
  .pay-band{grid-template-columns:1fr}
}
@media (max-width:860px){.final-grid,.uc-cols{grid-template-columns:1fr}}
@media (max-width:620px){
  .svc-grid,.platform-grid,.uc-grid,.process.six,.why-grid.four,.card-grid.four,.pay-flow.wide{grid-template-columns:1fr}
}

/* Responsive */
@media (max-width:1020px){
  .card-grid,.article-grid,.why-grid{grid-template-columns:repeat(2,1fr)}
  .flow-steps{grid-template-columns:repeat(2,1fr)}
  .flow-steps li::after{display:none}
  .process{grid-template-columns:repeat(2,1fr);gap:32px 20px}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .hero-grid,.split,.contact-grid,.industry{grid-template-columns:1fr}
  .outcome-grid{grid-template-columns:1fr}
  .nav-toggle{display:inline-flex}
  .js .site-nav{position:absolute;top:68px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:12px;padding:12px var(--gutter) 24px;display:none;box-shadow:0 20px 30px -20px rgba(11,43,32,.25)}
  .js .site-nav.is-open{display:flex}
  .site-nav ul{flex-direction:column}
  .site-nav ul a{padding:14px 12px;font-size:1.05rem;border-radius:var(--r-sm)}
  html:not(.js) .site-nav{flex-wrap:wrap;gap:8px}
  html:not(.js) .nav-wrap{height:auto;padding-top:12px;padding-bottom:12px;flex-wrap:wrap}
  html:not(.js) .site-nav ul{flex-wrap:wrap}
}
@media (max-width:620px){
  body{font-size:1rem}
  .card-grid,.card-grid.two,.article-grid,.why-grid,.flow-steps,.process,.module-list,.footer-grid{grid-template-columns:1fr}
  .btn-row .btn{width:100%}
  .section-head{margin-bottom:32px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* Platform logos */
.chips li.has-logo{display:inline-flex;align-items:center;gap:8px;background:#fff;padding:7px 14px 7px 10px}
.chips li.has-logo img{width:22px;height:22px;object-fit:contain;filter:grayscale(1);opacity:.75;transition:filter .2s,opacity .2s}
.chips li.has-logo:hover img{filter:none;opacity:1}
.chips li.has-logo img[src$="salesforce.svg"]{width:32px}
.chips li.has-logo.wide{padding:6px 16px}
.chips li.has-logo.wide img{width:auto;height:18px;max-width:84px}
.chips li.has-logo.wide img[src$="salesforce.svg"]{height:26px}

/* Hero refinements: clean white, question headline */
.hero{background:#fff}
.hero-q{font-size:clamp(2rem,4.2vw,3.35rem);line-height:1.12;letter-spacing:-.03em;max-width:15em;text-wrap:balance}
.hero .lead{max-width:34em}
.hero .btn-row{margin-top:32px}
.hero .eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--green-tint);border:1px solid var(--green-line);border-radius:999px;padding:6px 14px;font-size:.76rem}
@media (max-width:860px){.hero{padding-top:36px}.hero-visual{order:2}}

/* ===== Layout modelled on reference: compact header, two-column hero with large rounded visual ===== */
.btn{border-radius:8px}
.btn-primary,.btn-accent{background:#10B981;color:#0F172A;border-color:#10B981}
.btn-primary:hover,.btn-accent:hover{background:#059669;border-color:#059669;color:#0F172A;box-shadow:0 8px 20px -10px rgba(0,160,80,.6)}
.btn-secondary{border-color:var(--line-strong)}
.site-header{border-bottom:1px solid var(--line)}
.nav-wrap{height:72px}
.site-nav{gap:20px}
.site-nav ul a{font-size:.92rem;padding:8px 14px;border-radius:8px}
.nav-cta{padding:10px 20px}
.hero{padding:clamp(32px,5vw,64px) 0 clamp(40px,6vw,80px);background:#fff;border-bottom:0}
.hero-grid{grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
.hero-q{font-size:clamp(2rem,3.8vw,3rem);line-height:1.14;letter-spacing:-.03em;max-width:13em;margin-bottom:.55em}
.hero-q .hl{color:#059669}
.hero .lead{font-size:1.05rem;line-height:1.6;max-width:30em;color:#3F4A44}
.hero .btn-row{margin-top:28px}
.hero-visual{background:linear-gradient(145deg,#E6F8EE 0%,#F1F6E4 100%);border:0;box-shadow:none;border-radius:22px;padding:clamp(14px,2.2vw,28px)}
.hero-svg{border-radius:14px}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr}.hero-visual{order:2}}

/* ===== Hero v3: wide text column, large headline, single photo on the right ===== */
.hero{padding:clamp(40px,6vw,88px) 0 clamp(48px,7vw,104px)}
.hero-grid{grid-template-columns:1.25fr .9fr;gap:clamp(32px,6vw,88px);align-items:center}
.hero-welcome{margin:0 0 14px;font-size:.98rem;font-weight:600;color:var(--green-dark)}
.hero-q{font-size:clamp(2.4rem,5vw,3.9rem);line-height:1.08;letter-spacing:-.035em;max-width:11.5em;margin-bottom:.5em}
.hero .lead{font-size:1.12rem;line-height:1.65;max-width:34em;color:#3F4A44}
.hero .btn-row{margin-top:32px;gap:14px}
.btn-soft{background:#E4F9EE;color:#0F172A;border-color:#C9F0DA}
.btn-soft:hover{background:#D3F5E3;border-color:#A9E6C4;color:#0F172A}
.btn-soft svg{transition:transform .15s}.btn-soft:hover svg{transform:translateX(3px)}
.hero-photo{position:relative;margin:0;border-radius:22px;aspect-ratio:4/5;max-height:600px;justify-self:end;width:100%;max-width:460px}
.hero-photo::before{content:"";position:absolute;inset:-16px 16px 16px -16px;border:1.5px solid #BFEBD3;border-radius:24px;z-index:0}
.hero-photo img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;border-radius:22px;display:block}
.hero-photo.is-placeholder{aspect-ratio:auto;background:linear-gradient(145deg,#E6F8EE 0%,#F1F6E4 100%);padding:clamp(12px,2vw,22px);display:flex;align-items:center}
.hero-photo.is-placeholder .hero-svg{position:relative;z-index:1}
@media (max-width:980px){.hero-grid{grid-template-columns:1fr}.hero-photo{justify-self:stretch;max-width:520px;margin-top:8px}.hero-photo::before{inset:-10px 10px 10px -10px}.hero-q{max-width:none}}

/* ===== Hero text block: smaller, more compact ===== */
.hero{padding:clamp(28px,4vw,56px) 0 clamp(36px,5vw,64px)}
.hero-welcome{font-size:.88rem;margin-bottom:10px}
.hero-q{font-size:clamp(1.8rem,3.1vw,2.5rem);line-height:1.15;letter-spacing:-.028em;max-width:15em;margin-bottom:.5em}
.hero .lead{font-size:.98rem;line-height:1.6;max-width:32em}
.hero .btn-row{margin-top:22px;gap:10px}
.hero .btn.btn-lg{padding:11px 20px;min-height:44px;font-size:.94rem}
.hero-photo{max-width:420px;max-height:500px}

/* ===== Home sections 02-05 ===== */
.section-head .eyebrow{margin-bottom:12px}
.problem-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.problem-card{padding:32px}
.problem-card h3{font-size:1.3rem}
.svc6{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.svc6 .card h3 a{color:inherit;text-decoration:none}
.steps4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:s}
.steps4 li{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 24px}
.steps4 li:not(:last-child)::after{content:"\2192";position:absolute;right:-17px;top:50%;transform:translateY(-50%);width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:#10B981;color:#0F172A;font-size:.9rem;font-weight:700;z-index:2}
.steps4 h3{margin:6px 0 8px}
.steps4 p{color:var(--muted);font-size:.96rem;margin:0}
@media (max-width:1020px){.problem-grid,.svc6{grid-template-columns:repeat(2,1fr)}.steps4{grid-template-columns:repeat(2,1fr)}.steps4 li::after{display:none!important}}
@media (max-width:620px){.problem-grid,.svc6,.steps4{grid-template-columns:1fr}}

/* ===================== Motion (calm, short, reduced-motion safe) =====================
   Rules: 0.4-0.7s, ease-out with no overshoot, transform/opacity only (no layout shift),
   hero text never fades (so it can't delay LCP), nothing hidden unless JS tags it. */
:root{--ease:cubic-bezier(.22,.61,.36,1)}
.site-header{transition:box-shadow .3s var(--ease)}
.site-header.scrolled{box-shadow:0 8px 24px -16px rgba(11,43,32,.45)}
.site-nav ul a{position:relative}
.site-nav ul a::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;border-radius:2px;background:#10B981;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.site-nav ul a:hover::after,.site-nav ul a[aria-current=page]::after{transform:scaleX(1)}
.card .card-icon{transition:transform .3s var(--ease)}
.card:hover .card-icon{transform:translateY(-2px) scale(1.06)}
.btn:active{transform:translateY(0) scale(.985)}

@keyframes rise{from{transform:translateY(16px)}to{transform:none}}
@keyframes fadeRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes slideIn{from{transform:translateX(32px)}to{transform:none}}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes sweep{to{background-size:100% .32em}}
@keyframes ring{0%,100%{opacity:0}15%,35%{opacity:1}55%{opacity:0}}
@keyframes cardIn{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:no-preference){
  /* Hero entrance: text slides (no opacity change, so LCP is unaffected); buttons and visuals ease in */
  .hero-welcome{animation:rise .5s var(--ease) both}
  /* h1 is the LCP element: left static so it paints immediately */
  .hero .lead{animation:rise .6s .1s var(--ease) both}
  .hero .btn-row{animation:fadeRise .6s .24s var(--ease) both}
  .hero-photo{animation:slideIn .7s .1s var(--ease) both}
  .hero-q .hl{background:linear-gradient(rgba(16,185,129,.5),rgba(16,185,129,.5)) 0 92%/0% .32em no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone;animation:sweep .7s .55s var(--ease) forwards}
  /* Illustration */
  .hero-svg .pipe-card{animation:cardIn .5s var(--ease) both;animation-delay:calc(.35s + var(--i) * 70ms)}
  .hero-svg .bar{transform-box:fill-box;transform-origin:50% 100%;animation:grow .7s var(--ease) both;animation-delay:calc(.45s + var(--i) * 60ms)}
  .hero-svg .wf-ring{opacity:0;animation:ring 4.5s ease-in-out infinite;animation-delay:calc(1.2s + var(--i) * 1.5s)}
  /* Inner page heroes: gentle slide, no fade */
  .page-hero .container>*{animation:rise .5s var(--ease) both}
  .page-hero .container>*:nth-child(2){animation-delay:.05s}
  .page-hero .container>*:nth-child(3){animation-delay:.1s}
  .page-hero .container>*:nth-child(4){animation-delay:.15s}
  .page-hero .container>*:nth-child(n+5){animation-delay:.2s}
  /* Scroll reveal: only elements JS has tagged are hidden, so no-JS visitors see everything */
  .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:var(--d,0ms)}
  .reveal.is-in{opacity:1;transform:none}
  .final-grid .final-copy.reveal{transform:translateX(-26px)}
  .final-grid .form-card.reveal{transform:translateX(26px)}
  .final-grid .reveal.is-in{transform:none}
  /* How-it-works: arrows appear after their step */
  .steps4 li.reveal::after{opacity:0;transform:translateY(-50%) scale(.6);transition:opacity .4s var(--ease),transform .4s var(--ease);transition-delay:calc(var(--d,0ms) + .35s)}
  .steps4 li.reveal.is-in::after{opacity:1;transform:translateY(-50%) scale(1)}
}
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal.is-in{opacity:1!important;transform:none!important}
  .hero-svg .wf-ring{display:none}
}

/* Large screens: scale type a little so wide layouts don't feel sparse */

/* Stacked layouts: reveal vertically so a sideways offset can never cause horizontal scroll */
@media (prefers-reduced-motion:no-preference) and (max-width:1020px){
  .final-grid .final-copy.reveal,.final-grid .form-card.reveal{transform:translateY(22px)}
  .final-grid .reveal.is-in{transform:none}
  .hero-photo{animation-name:fadeRise}
}

/* ===================== UI refinement: depth, cards, icons, accents ===================== */
:root{
  --slate:#0D1B26; --slate-2:#142836; --ink:#0F172A;
  --card-line:rgba(15,28,38,.09);
  --card-shadow:0 1px 2px rgba(13,27,38,.05),0 4px 10px -4px rgba(13,27,38,.06),0 18px 36px -18px rgba(13,27,38,.16);
  --card-shadow-hover:0 2px 4px rgba(13,27,38,.06),0 10px 20px -8px rgba(13,27,38,.10),0 28px 48px -20px rgba(13,27,38,.24);
}
/* 1. Background depth: soft mesh of lime / mint / cool-gray tints */
body{background-color:#fff;background-image:
  radial-gradient(900px 620px at 6% -4%,rgba(16,185,129,.16),transparent 62%),
  radial-gradient(820px 600px at 100% 6%,rgba(16,185,129,.09),transparent 60%),
  radial-gradient(1000px 700px at 50% 100%,rgba(13,27,38,.05),transparent 65%);
  background-repeat:no-repeat}
.section.soft{background:linear-gradient(180deg,rgba(245,246,240,.92),rgba(241,245,249,.92))}
.page-hero{background:radial-gradient(700px 320px at 90% 0%,rgba(16,185,129,.20),transparent 65%),linear-gradient(180deg,#F1F5F9,#F1F5F9)}

/* Ambient hero glows */
.hero{position:relative;background:transparent;overflow:hidden;overflow:clip}
.hero>.container{position:relative;z-index:1}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;pointer-events:none;z-index:0}
.hero::before{width:min(760px,80vw);height:min(760px,80vw);right:-8%;top:-24%;background:radial-gradient(closest-side,rgba(16,185,129,.20),rgba(16,185,129,0))}
.hero::after{width:min(620px,70vw);height:min(620px,70vw);left:-10%;bottom:-38%;background:radial-gradient(closest-side,rgba(16,185,129,.26),rgba(16,185,129,0))}
.hero-photo{max-width:min(520px,100%);max-height:none;box-shadow:0 34px 70px -36px rgba(15,74,51,.45)}
.hero-photo.is-placeholder{background:linear-gradient(145deg,#E9FAF0 0%,#F3F8E6 100%)}

/* 2. Cards: clearer edge, layered shadow, lively hover with neon top accent */
.card,.steps4 li{position:relative;border:1px solid var(--card-line);box-shadow:var(--card-shadow);background:#fff;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.card::before,.steps4 li::before{content:"";position:absolute;left:24px;right:24px;top:-1px;height:3px;border-radius:0 0 3px 3px;background:#10B981;
  box-shadow:0 0 16px 1px rgba(16,185,129,.7);transform:scaleX(.15);opacity:0;transform-origin:center;transition:transform .35s var(--ease),opacity .35s var(--ease)}
.card:hover,.steps4 li:hover{transform:translateY(-4px);box-shadow:var(--card-shadow-hover),0 0 0 1px rgba(16,185,129,.35);border-color:rgba(16,185,129,.45)}
.card:hover::before,.steps4 li:hover::before{transform:scaleX(1);opacity:1}
.card.reveal::before,.steps4 li.reveal::before{display:none}

/* 3. Icons: larger soft-tinted chips that fill lime on hover */
.card-icon{width:58px;height:58px;border-radius:17px;background:linear-gradient(145deg,#F7FDDF,#E2F6CF);border:1px solid #A7F3D0;
  box-shadow:inset 0 1px 0 #fff,0 8px 16px -10px rgba(15,74,51,.45);transition:transform .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease)}
.card-icon svg{width:28px;height:28px}
.card-icon.sm{width:42px;height:42px;border-radius:12px}
.card-icon.sm svg{width:22px;height:22px}
.card:hover .card-icon{background:#6EE7B7;border-color:#34D399;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 10px 20px -8px rgba(120,170,10,.6)}

/* 4. Typography accents + deeper secondary colour */
.mark{color:#059669;background:linear-gradient(rgba(16,185,129,.6),rgba(16,185,129,.6)) 0 92%/100% .3em no-repeat;border-radius:2px;padding:0 .06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.cta-band.dark,.section.dark{background-color:var(--slate);background-image:
  radial-gradient(600px 380px at 85% 0%,rgba(16,185,129,.16),transparent 70%),
  radial-gradient(560px 380px at 0% 100%,rgba(16,185,129,.10),transparent 70%)}
.cta-band.dark .mark,.section.dark .mark{color:#6EE7B7;background:none}
.site-footer{background:var(--slate)}
.dark .on-dark-card,.cta-band .form-card{box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.eyebrow{color:#059669}

@media (prefers-reduced-motion:no-preference){
  @keyframes drift{to{transform:translate3d(28px,18px,0) scale(1.08)}}
  .hero::before{animation:drift 16s 2s ease-in-out infinite alternate}
  .hero::after{animation:drift 20s 2s ease-in-out infinite alternate-reverse}
}
@media (hover:none){.card:hover,.steps4 li:hover{transform:none}}

/* ===================== Fit any screen =====================
   Type and layout scale continuously with the viewport (no fixed pixel steps):
   phones/laptops stay at 16px, large monitors and TVs scale up smoothly to 24px. */
html{font-size:clamp(16px,calc(.55vw + 8px),24px)}
:root{--wrap:min(100%,98rem);--hdr:73px}
.container{max-width:var(--wrap)}
.container.narrow{max-width:min(100%,49rem)}
html{scroll-padding-top:calc(var(--hdr) + 12px)}

/* Home hero fills the first screen on desktop/tablet-landscape, centred vertically */
@media (min-width:981px) and (min-height:560px){
  .hero{min-height:calc(100svh - var(--hdr));display:flex;align-items:center}
  .hero>.container{width:100%}
}
/* Tall portrait displays (tablets): keep hero generous but not endless */
@media (min-width:600px) and (max-width:980px) and (min-height:900px){
  .hero{min-height:min(70svh,40rem);display:flex;align-items:center}
  .hero>.container{width:100%}
}
img,svg,video{max-width:100%}
.hero-photo{max-width:min(100%,32rem)}
:root{--wrap:100%}
.section-head{max-width:min(100%,48rem)}.section-head.row{max-width:none}

/* ===================== Living background system =====================
   Layers (all transform/opacity-only animation, no blur filters):
   1. fixed gradient mesh behind everything (slow drift + gentle scroll parallax)
   2. per-section tinted bands that fade into their neighbours
   3. faint dot grids / node networks / flowing curves per section
   4. floating shapes in hero + final CTA, animated connection lines in integrations */
:root{--warm:#F8FAFC;--sage:#E2E8F0;--sage-2:#F1F5F9;--forest:#0F172A;--forest-2:#065F46}
html{background:var(--warm)}
body{background:none!important;position:relative}
.bg-mesh{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;contain:layout paint;will-change:transform}
.bg-mesh i{position:absolute;inset:-22%;will-change:transform}
.bg-mesh i:nth-child(1){background:
  radial-gradient(52% 44% at 14% 16%,rgba(16,185,129,.26),transparent 70%),
  radial-gradient(48% 46% at 86% 10%,rgba(16,185,129,.16),transparent 70%),
  radial-gradient(58% 48% at 72% 88%,rgba(148,163,184,.30),transparent 72%)}
.bg-mesh i:nth-child(2){background:
  radial-gradient(46% 40% at 28% 82%,rgba(16,185,129,.11),transparent 70%),
  radial-gradient(40% 38% at 92% 54%,rgba(15,74,51,.08),transparent 70%),
  radial-gradient(50% 40% at 4% 48%,rgba(148,163,184,.34),transparent 70%)}

/* Section bands: fade in/out so there are no hard colour edges between sections */
.section,.cta-band,.page-hero{position:relative;isolation:isolate;overflow-x:clip}
.section{background:linear-gradient(180deg,rgba(248,250,252,0),rgba(248,250,252,.78) 16%,rgba(248,250,252,.78) 84%,rgba(248,250,252,0))}
.section.soft{background:linear-gradient(180deg,rgba(226,232,240,0),rgba(226,232,240,.72) 18%,rgba(241,245,249,.72) 82%,rgba(226,232,240,0))}
.section::before,.section::after,.page-hero::before,.page-hero::after{content:"";position:absolute;pointer-events:none;z-index:-1}
/* dot grid, faded toward the edges */
.section::before,.page-hero::before{inset:0;background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2228%22 height=%2228%22%3E%3Ccircle cx=%222%22 cy=%222%22 r=%221.1%22 fill=%22%230F4A33%22 fill-opacity=%22.20%22/%3E%3C/svg%3E");opacity:.55;
  -webkit-mask-image:radial-gradient(ellipse 75% 70% at 50% 50%,#000 10%,transparent 78%);mask-image:radial-gradient(ellipse 75% 70% at 50% 50%,#000 10%,transparent 78%)}
/* sage sections swap dots for a faint node network */
.section.soft::before{background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22420%22 height=%22300%22 fill=%22none%22%3E%3Cline x1=%2230%22 y1=%2240%22 x2=%22150%22 y2=%22110%22 stroke=%22%230F4A33%22 stroke-opacity=%22.10%22/%3E%3Cline x1=%22150%22 y1=%22110%22 x2=%22270%22 y2=%2230%22 stroke=%22%230F4A33%22 stroke-opacity=%22.10%22/%3E%3Cline x1=%22270%22 y1=%2230%22 x2=%22360%22 y2=%22150%22 stroke=%22%230F4A33%22 stroke-opacity=%22.10%22/%3E%3Cline x1=%22150%22 y1=%22110%22 x2=%2290%22 y2=%22230%22 stroke=%22%230F4A33%22 stroke-opacity=%22.10%22/%3E%3Cline x1=%2290%22 y1=%22230%22 x2=%22240%22 y2=%22250%22 stroke=%22%230F4A33%22 stroke-opacity=%22.10%22/%3E%3Cline x1=%22150%22 y1=%22110%22 x2=%22240%22 y2=%22250%22 stroke=%22%230F4A33%22 stroke-opacity=%22.10%22/%3E%3Cline x1=%22240%22 y1=%22250%22 x2=%22360%22 y2=%22150%22 stroke=%22%230F4A33%22 stroke-opacity=%22.10%22/%3E%3Ccircle cx=%2230%22 cy=%2240%22 r=%223%22 fill=%22%230F4A33%22 fill-opacity=%22.20%22/%3E%3Ccircle cx=%22150%22 cy=%22110%22 r=%223%22 fill=%22%230F4A33%22 fill-opacity=%22.20%22/%3E%3Ccircle cx=%22270%22 cy=%2230%22 r=%223%22 fill=%22%230F4A33%22 fill-opacity=%22.20%22/%3E%3Ccircle cx=%22360%22 cy=%22150%22 r=%223%22 fill=%22%230F4A33%22 fill-opacity=%22.20%22/%3E%3Ccircle cx=%2290%22 cy=%22230%22 r=%223%22 fill=%22%230F4A33%22 fill-opacity=%22.20%22/%3E%3Ccircle cx=%22240%22 cy=%22250%22 r=%223%22 fill=%22%230F4A33%22 fill-opacity=%22.20%22/%3E%3C/svg%3E");background-size:420px 300px;opacity:.9}
/* flowing curves, drifting slowly */
.section::after,.page-hero::after{left:-6%;right:-6%;top:8%;bottom:8%;background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1600 600%22 fill=%22none%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M-60 430C260 290 470 560 820 400S1380 190 1680 330%22 stroke=%22%2300C86A%22 stroke-opacity=%22.30%22 stroke-width=%221.6%22/%3E%3Cpath d=%22M-60 500C300 380 560 600 900 470S1400 300 1680 420%22 stroke=%22%239ED61A%22 stroke-opacity=%22.38%22 stroke-width=%221.4%22/%3E%3Cpath d=%22M-60 330C240 200 520 420 860 280S1360 110 1680 220%22 stroke=%22%230F4A33%22 stroke-opacity=%22.14%22 stroke-width=%221.2%22/%3E%3C/svg%3E") center/cover no-repeat;opacity:.55}
#problems::after,#how-it-works::after,.section.soft::after,.page-hero::after{display:block}
/* Customer problems: extra green ambient light behind the cards */
#problems{background:
  radial-gradient(46% 55% at 82% 40%,rgba(16,185,129,.14),transparent 70%),
  radial-gradient(38% 50% at 8% 70%,rgba(16,185,129,.16),transparent 70%),
  linear-gradient(180deg,rgba(248,250,252,0),rgba(248,250,252,.8) 14%,rgba(248,250,252,.8) 86%,rgba(248,250,252,0))}
/* Page heroes (inner pages) */
.page-hero{background:radial-gradient(60% 120% at 92% 0%,rgba(16,185,129,.26),transparent 68%),radial-gradient(50% 100% at 0% 100%,rgba(16,185,129,.10),transparent 70%),linear-gradient(180deg,rgba(241,245,249,.9),rgba(241,245,249,.8));border-bottom:1px solid rgba(15,74,51,.08)}
/* About: softer, more minimal */
.page-about .section::before,.page-about .section::after,.page-about .page-hero::after{display:none}
.page-about .section.soft{background:linear-gradient(180deg,rgba(241,245,249,0),rgba(241,245,249,.55) 20%,rgba(241,245,249,.55) 80%,rgba(241,245,249,0))}

/* Hero: layered gradients + dot grid + network */
.hero{background:radial-gradient(70% 90% at 85% 10%,rgba(16,185,129,.10),transparent 70%),radial-gradient(60% 80% at 5% 100%,rgba(16,185,129,.14),transparent 70%);isolation:isolate}
.ambient{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.ambient::before{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2228%22 height=%2228%22%3E%3Ccircle cx=%222%22 cy=%222%22 r=%221.1%22 fill=%22%230F4A33%22 fill-opacity=%22.20%22/%3E%3C/svg%3E");opacity:.6;-webkit-mask-image:radial-gradient(ellipse 60% 80% at 80% 40%,#000,transparent 75%);mask-image:radial-gradient(ellipse 60% 80% at 80% 40%,#000,transparent 75%)}
.ambient i{position:absolute;display:block}
.ambient .a1{width:9rem;height:9rem;right:6%;top:10%;border:1.5px solid rgba(16,185,129,.35);border-radius:50%}
.ambient .a2{width:5rem;height:5rem;left:46%;bottom:12%;border:1.5px solid rgba(16,185,129,.5);border-radius:1.2rem;--r:18deg;transform:rotate(18deg)}
.ambient .a3{width:1.1rem;height:1.1rem;left:44%;top:16%;border-radius:50%;background:linear-gradient(145deg,#6EE7B7,#10B981);opacity:.7}
.ambient .a4{width:3rem;height:3rem;right:30%;bottom:8%;border-radius:50%;background:radial-gradient(closest-side,rgba(16,185,129,.35),transparent)}

/* Integrations: network lines with flowing dashes */
#platforms .net{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:.8}
#platforms .net .ln{stroke:#059669;stroke-opacity:.30;stroke-width:1.4;stroke-dasharray:5 11}
#platforms .net .nd{fill:#10B981;fill-opacity:.55}

/* Process: connected line running through the steps */
.steps4{position:relative}
.steps4::before{content:"";position:absolute;left:3%;right:3%;top:50%;height:2px;z-index:0;background:repeating-linear-gradient(90deg,rgba(16,185,129,.55) 0 8px,transparent 8px 18px)}
.steps4 li{z-index:1}
@media (max-width:1020px){.steps4::before{display:none}}

/* Final CTA + footer: rich forest green with ambient light */
.cta-band.dark,.section.dark{background:radial-gradient(60% 90% at 88% 0%,rgba(16,185,129,.20),transparent 70%),radial-gradient(55% 80% at 0% 100%,rgba(16,185,129,.14),transparent 70%),linear-gradient(160deg,#0F172A 0%,#065F46 58%,#0F172A 100%)}
.cta-band.dark::before,.cta-band.dark::after{display:none}
.cta-band.dark .ambient::before{opacity:.5;background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2228%22 height=%2228%22%3E%3Ccircle cx=%222%22 cy=%222%22 r=%221.1%22 fill=%22%23C8F53A%22 fill-opacity=%22.20%22/%3E%3C/svg%3E");-webkit-mask-image:radial-gradient(ellipse 70% 80% at 20% 50%,#000,transparent 75%);mask-image:radial-gradient(ellipse 70% 80% at 20% 50%,#000,transparent 75%)}
.cta-band.dark .ambient .a1{border-color:rgba(16,185,129,.30);right:10%;top:14%}
.cta-band.dark .ambient .a2{border-color:rgba(16,185,129,.35);left:8%;bottom:14%}
.cta-band.dark .ambient .a3{left:48%;top:12%}
.cta-band.dark .ambient .a4{background:radial-gradient(closest-side,rgba(16,185,129,.28),transparent)}
.cta-band.dark>.container{position:relative;z-index:1}
.site-footer{background:linear-gradient(180deg,#0F172A,#0B0C0E)}

/* Buttons: soft gradient + glow on the main calls to action */
.btn-primary,.btn-accent{background:linear-gradient(180deg,#34FF9C 0%,#10B981 55%,#059669 100%);color:#0F172A;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 10px 22px -10px rgba(16,185,129,.75)}
.btn-primary:hover,.btn-accent:hover{background:linear-gradient(180deg,#4DFFAB 0%,#10FF8A 55%,#00EA78 100%);color:#0F172A;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 14px 28px -10px rgba(16,185,129,.85)}
.site-nav .btn{box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 8px 18px -10px rgba(16,185,129,.7)}

/* ---- Motion (calm, slow, reduced-motion safe, mobile-lighter) ---- */
@keyframes meshA{from{transform:translate3d(-2%,-1%,0) rotate(0deg) scale(1)}to{transform:translate3d(3%,2.5%,0) rotate(3deg) scale(1.07)}}
@keyframes meshB{from{transform:translate3d(2%,2%,0) rotate(0deg) scale(1.05)}to{transform:translate3d(-3%,-2%,0) rotate(-3deg) scale(1)}}
@keyframes floatY{0%,100%{transform:translate3d(0,0,0) rotate(var(--r,0deg))}50%{transform:translate3d(0,-16px,0) rotate(calc(var(--r,0deg) + 6deg))}}
@keyframes curveDrift{from{transform:translate3d(-2%,0,0)}to{transform:translate3d(2%,-1.5%,0)}}
@keyframes nodePulse{0%,100%{fill-opacity:.25}50%{fill-opacity:.75}}
@keyframes lineFlow{to{stroke-dashoffset:-64}}
@keyframes stepFlow{to{background-position:36px 0}}
@media (prefers-reduced-motion:no-preference){
  .bg-mesh i:nth-child(1){animation:meshA 38s ease-in-out infinite alternate}
  .bg-mesh i:nth-child(2){animation:meshB 52s ease-in-out infinite alternate}
  .ambient .a1{animation:floatY 11s ease-in-out infinite}
  .ambient .a2{animation:floatY 13s ease-in-out -4s infinite}
  .ambient .a3{animation:floatY 9s ease-in-out -2s infinite}
  .ambient .a4{animation:floatY 15s ease-in-out -6s infinite}
  .section::after,.page-hero::after{animation:curveDrift 36s ease-in-out infinite alternate}
  #platforms .net .ln{animation:lineFlow 5s linear infinite}
  #platforms .net .nd{animation:nodePulse 4s ease-in-out infinite;animation-delay:calc(var(--i) * -.45s)}
  .steps4::before{animation:stepFlow 3s linear infinite}
}
@media (max-width:700px){
  .bg-mesh i:nth-child(2),.section::after,.page-hero::after,.ambient .a2,.ambient .a4{display:none}
  .bg-mesh i:nth-child(1){animation-duration:60s}
}
@media print{.bg-mesh,.ambient{display:none}}
.bg-mesh{inset:-80px 0}

/* Perf: the fixed mesh stays unpainted until after first paint, then fades in (CSS-only, no JS needed) */
.bg-mesh i{inset:-10%}
@keyframes meshIn{from{opacity:0;visibility:hidden}to{opacity:1;visibility:visible}}
.bg-mesh{animation:meshIn .8s ease 1s both}
@media (prefers-reduced-motion:reduce){.bg-mesh{animation:meshIn .01s 1s both!important}}

/* Perf: decorative pattern layers also wait for first paint, then fade in */
@keyframes patIn{from{opacity:0;visibility:hidden}}
.section::before,.page-hero::before,.ambient,#platforms .net{animation:patIn .9s 1s both}
@media (prefers-reduced-motion:no-preference){
  .section::after,.page-hero::after{animation:patIn .9s 1s both,curveDrift 36s ease-in-out infinite alternate}
}
@media (prefers-reduced-motion:reduce){
  .section::before,.section::after,.page-hero::before,.page-hero::after,.ambient,#platforms .net{animation:patIn .01s 1s both!important}
}

/* ===================== Photos ===================== */
.photo{margin:0;position:relative;border-radius:22px;overflow:hidden;aspect-ratio:4/3;background:linear-gradient(145deg,#E6F8EE,#F1F6E4);box-shadow:0 30px 60px -34px rgba(11,43,32,.5),0 0 0 1px rgba(15,74,51,.08)}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.photo::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,transparent 55%,rgba(11,43,32,.22));box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);pointer-events:none}
/* Page heroes with a photo: text left, photo right */
.page-hero.has-photo .container{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);column-gap:clamp(24px,5vw,72px);align-items:start}
.page-hero.has-photo .container>*{grid-column:1}
.page-hero.has-photo .container>.photo{grid-column:2;grid-row:1/span 8;align-self:center}
.page-hero.has-photo .container>.btn-row{margin-top:8px}
@media (max-width:900px){.page-hero.has-photo .container{display:block}.page-hero.has-photo .container>.photo{margin-top:28px;max-width:34rem}}
/* How it works: heading left, photo right, steps full width */
#how-it-works.has-photo .container{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);column-gap:clamp(24px,5vw,72px);align-items:center}
#how-it-works.has-photo .section-head{margin-bottom:0}
#how-it-works.has-photo .container>.photo{aspect-ratio:16/10}
#how-it-works.has-photo .steps4{grid-column:1/-1;margin-top:48px}
@media (max-width:900px){#how-it-works.has-photo .container{display:block}#how-it-works.has-photo .container>.photo{margin:24px 0 8px}#how-it-works.has-photo .steps4{margin-top:32px}}
/* Home hero background photo: fades to the page colour so text stays readable */
.hero-bgwrap,.cta-bgwrap{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hero-bgwrap img,.cta-bgwrap img{width:100%;height:100%;object-fit:cover;display:block}
.hero-bgwrap::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(248,250,252,.97) 0%,rgba(248,250,252,.90) 38%,rgba(248,250,252,.55) 70%,rgba(248,250,252,.35) 100%),linear-gradient(180deg,rgba(248,250,252,0) 70%,rgba(248,250,252,.95) 100%)}
@media (max-width:980px){.hero-bgwrap::after{background:linear-gradient(180deg,rgba(248,250,252,.96),rgba(248,250,252,.82))}}
.hero.has-bg::before,.hero.has-bg::after{opacity:.6}
/* Final CTA photo: deep forest overlay keeps white text and the form readable */
.cta-bgwrap::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(11,43,32,.88) 0%,rgba(15,74,51,.74) 55%,rgba(11,43,32,.9) 100%)}
.cta-band.has-bg .ambient{z-index:0}

/* ===================== Full-page background photo (site-bg) =====================
   A fixed photo sits behind everything; sections, cards and the header float over it.
   Drawn to a canvas after load (never an LCP candidate), then faded in. Photo is veiled so text stays readable. */
.bg-photo{position:fixed;inset:-80px 0;z-index:-2;pointer-events:none;overflow:hidden;opacity:0;transition:opacity 1.2s var(--ease)}
.bg-photo.is-ready{opacity:1}
.bg-photo canvas{display:block;width:100%;height:100%}
/* Brand-green tint so any photo harmonises with the theme (delete this ::before rule to show the photo's own colours) */
.bg-photo::before{content:"";position:absolute;inset:0;z-index:1;background:#0F6B45;mix-blend-mode:color;opacity:.8}
/* Light veil keeps text readable (lower the three alpha values to show more photo) */
.bg-photo::after{content:"";position:absolute;inset:0;z-index:2;background:
  linear-gradient(180deg,rgba(248,250,252,.70) 0%,rgba(248,250,252,.76) 45%,rgba(248,250,252,.80) 100%)}
/* With a photo present, let bands be lighter so the picture reads between and around the cards */
.has-site-bg .section{background:linear-gradient(180deg,rgba(248,250,252,0),rgba(248,250,252,.48) 16%,rgba(248,250,252,.48) 84%,rgba(248,250,252,0))}
.has-site-bg .section.soft{background:linear-gradient(180deg,rgba(226,232,240,0),rgba(226,232,240,.46) 18%,rgba(241,245,249,.46) 82%,rgba(226,232,240,0))}
.has-site-bg #problems{background:radial-gradient(46% 55% at 82% 40%,rgba(16,185,129,.12),transparent 70%),radial-gradient(38% 50% at 8% 70%,rgba(16,185,129,.14),transparent 70%),linear-gradient(180deg,rgba(248,250,252,0),rgba(248,250,252,.5) 14%,rgba(248,250,252,.5) 86%,rgba(248,250,252,0))}
.has-site-bg .page-hero{background:radial-gradient(60% 120% at 92% 0%,rgba(16,185,129,.22),transparent 68%),linear-gradient(180deg,rgba(241,245,249,.62),rgba(241,245,249,.52))}
.has-site-bg .bg-mesh{opacity:.8}
/* Floating feel: cards lift off the photo */
.has-site-bg .card,.has-site-bg .steps4 li,.has-site-bg .platform-group,.has-site-bg .faq details{box-shadow:0 2px 4px rgba(13,27,38,.06),0 14px 30px -14px rgba(13,27,38,.22),0 30px 60px -34px rgba(13,27,38,.28)}
@media print{.bg-photo{display:none}}

/* ===== Customer Problems rises over the bottom of the hero ===== */
#problems{position:relative;z-index:2;margin-top:-3.5rem;border-radius:2rem 2rem 0 0;border-top:1px solid rgba(255,255,255,.85);
  box-shadow:0 -22px 50px -26px rgba(15,74,51,.28);
  background:
    radial-gradient(46% 55% at 82% 40%,rgba(16,185,129,.14),transparent 70%),
    radial-gradient(38% 50% at 8% 70%,rgba(16,185,129,.16),transparent 70%),
    linear-gradient(180deg,rgba(250,252,254,.97) 0,rgba(248,250,252,.88) 40%,rgba(248,250,252,.8) 86%,rgba(248,250,252,0))}
.hero{padding-bottom:calc(clamp(36px,5vw,64px) + 3.5rem)}
@media (min-width:981px) and (min-height:560px){
  .hero{min-height:calc(100svh - var(--hdr) - 4.5rem)}
}
@media (max-width:700px){#problems{margin-top:-1.75rem;border-radius:1.5rem 1.5rem 0 0}.hero{padding-bottom:calc(36px + 1.75rem)}}
/* Overlap panel also over the site photo: opaque-ish top edge so it reads as a surface, then it fades like the other sections */
.has-site-bg #problems{background:
  radial-gradient(46% 55% at 82% 40%,rgba(16,185,129,.12),transparent 70%),
  radial-gradient(38% 50% at 8% 70%,rgba(16,185,129,.14),transparent 70%),
  linear-gradient(180deg,rgba(250,252,254,.94) 0,rgba(248,250,252,.74) 36%,rgba(248,250,252,.52) 84%,rgba(248,250,252,0))}

/* ===================== Card interaction system =====================
   One system for every card: .card, .article-card, .steps4 li, .platform-group, .uc-item, .industry.
   Future cards: give them class "card" (+ optional variant: card--quote, card--price, card--project).
   - Entrance: scroll reveal, once, in reading order (JS adds .reveal/.is-in temporarily)
   - Hover (mouse only): lift, deeper shadow, emerald edge + top accent, background shift, icon/arrow motion
   - Touch/keyboard: pressed state, visible focus ring; nothing essential is hidden behind hover
   - transform/opacity only, so no layout shift; reduced motion disables movement */
:root{--card-ease:cubic-bezier(.22,.61,.36,1);--card-bg-hover:#F0FDF7}
:is(.card,.article-card,.platform-group,.uc-item,.industry){position:relative;background-color:#fff;border:1px solid var(--card-line);box-shadow:var(--card-shadow);
  transition:transform .35s var(--card-ease),box-shadow .35s var(--card-ease),border-color .35s var(--card-ease),background-color .35s var(--card-ease)}
.card-icon svg,.arrow-link svg,.svc-num,.proc-n,.tag,.chips li{transition:transform .4s var(--card-ease),color .3s var(--card-ease),background-color .3s var(--card-ease),border-color .3s var(--card-ease)}
.arrow-link{background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;padding-bottom:2px;transition:background-size .35s var(--card-ease)}

/* Whole card is one link: the title link stretches over the card; other buttons/links stay clickable above it */
.card.is-link{cursor:pointer}
.card-link::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.card.is-link :is(a,button):not(.card-link){position:relative;z-index:2}
.card.is-link .arrow-link.card-link{position:static}

/* Focus: one clear ring on the whole card */
.card-link:focus-visible,.article-card h3 a:focus-visible{outline:none}
.card:has(.card-link:focus-visible),.article-card:has(a:focus-visible){outline:3px solid rgba(5,150,105,.65);outline-offset:3px;box-shadow:var(--card-shadow-hover)}
@supports not selector(:has(*)){.card-link:focus-visible,.article-card h3 a:focus-visible{outline:3px solid rgba(5,150,105,.65);outline-offset:3px}}

/* Pressed state (mouse + touch) */
:is(.card.is-link,.article-card):active{transform:translateY(-1px) scale(.992);box-shadow:0 1px 2px rgba(13,27,38,.08),0 6px 14px -8px rgba(13,27,38,.2);transition-duration:.12s}

/* ---- Hover (devices with a real hover only) ---- */
@media (hover:hover) and (pointer:fine){
  :is(.card,.article-card,.platform-group,.uc-item,.industry,.steps4 li):hover{transform:translateY(-4px);background-color:var(--card-bg-hover);
    box-shadow:var(--card-shadow-hover),0 0 0 1px rgba(16,185,129,.28);border-color:rgba(16,185,129,.5)}
  :is(.article-card,.platform-group,.uc-item,.industry)::before{content:"";position:absolute;left:24px;right:24px;top:-1px;height:3px;border-radius:0 0 3px 3px;background:#10B981;
    box-shadow:0 0 16px 1px rgba(16,185,129,.65);transform:scaleX(.15);opacity:0;transition:transform .35s var(--card-ease),opacity .35s var(--card-ease);pointer-events:none}
  :is(.article-card,.platform-group,.uc-item,.industry):hover::before{transform:scaleX(1);opacity:1}
  :is(.card,.uc-item,.steps4 li):hover p{color:#364640}
  .card:hover .arrow-link,.uc-item:hover .arrow-link{background-size:100% 1.5px}
  .card:hover .arrow-link svg,.uc-item:hover .arrow-link svg{transform:translateX(5px)}
  .card:hover .btn{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 12px 24px -10px rgba(16,185,129,.8)}
  /* per-type motion (restrained: a few px / degrees) */
  .problem-card:hover .card-icon svg{transform:rotate(-8deg) scale(1.1)}
  .svc6 .card:hover .card-icon svg{transform:translateY(-2px) rotate(6deg)}
  .svc-card:hover .card-icon svg{transform:scale(1.12)}
  .svc-card:hover .svc-num{color:var(--green-dark);transform:translateX(-3px)}
  .uc-item:hover .card-icon svg{transform:scale(1.1) rotate(-4deg)}
  .steps4 li:hover .proc-n{color:#059669;transform:translateX(4px)}
  .platform-group:hover .chips li{transform:translateY(-2px);border-color:rgba(16,185,129,.45);background:#fff}
  .platform-group:hover .chips li:nth-child(2){transition-delay:.04s}.platform-group:hover .chips li:nth-child(3){transition-delay:.08s}.platform-group:hover .chips li:nth-child(4){transition-delay:.12s}.platform-group:hover .chips li:nth-child(n+5){transition-delay:.16s}
  .article-card:hover .tag{background:#6EE7B7;color:#0F172A}
  .article-card:hover h3 a{color:var(--green-dark)}
  .article-card:hover .meta{color:#059669}
}
/* ---- Touch / no-hover devices: no hover lift; everything stays visible; tap feedback only ---- */
@media (hover:none){
  :is(.card,.article-card,.platform-group,.uc-item,.industry,.steps4 li):hover{transform:none}
  .arrow-link{background-size:100% 1.5px}
}
/* ---- Variants for cards added later (no markup uses them yet) ---- */
.card--quote{background-image:linear-gradient(160deg,rgba(16,185,129,.05),rgba(16,185,129,.08))}
.card--quote::after{content:"\201C";position:absolute;right:20px;top:6px;font:700 4.5rem/1 var(--font);color:rgba(16,185,129,.18);transition:transform .4s var(--card-ease),color .3s}
@media (hover:hover){.card--quote:hover::after{transform:translateY(-4px);color:rgba(16,185,129,.32)}}
.card--price.is-featured{border-color:rgba(16,185,129,.6);box-shadow:var(--card-shadow-hover),0 0 0 1px rgba(16,185,129,.3);background-image:linear-gradient(180deg,rgba(16,185,129,.06),transparent 40%)}
.card--project .card-media{overflow:hidden;border-radius:calc(var(--r-lg) - 6px) calc(var(--r-lg) - 6px) 0 0;margin:-28px -28px 20px}
.card--project .card-media img{display:block;width:100%;transition:transform .6s var(--card-ease)}
@media (hover:hover){.card--project:hover .card-media img{transform:scale(1.04)}}
/* ---- Entrance + reduced motion ---- */
@media (prefers-reduced-motion:no-preference){
  .reveal.reveal{transition:opacity .6s var(--card-ease),transform .6s var(--card-ease);transition-delay:var(--d,0ms)}
}
@media (prefers-reduced-motion:reduce){
  :is(.card,.article-card,.platform-group,.uc-item,.industry,.steps4 li):hover,:is(.card.is-link,.article-card):active{transform:none!important}
  .card-icon svg,.arrow-link svg,.chips li,.proc-n,.svc-num{transform:none!important}
  .card--project:hover .card-media img,.card--quote:hover::after{transform:none!important}
}

/* ===================== Layered scrolling: pinned hero + overlapping sections =====================
   Site-wide: the first block of every page (home .hero, inner .page-hero) stays pinned while the
   following sections slide up and cover it. Every later section is an opaque panel stacked above the
   previous one (rounded top, soft upward shadow). Pure CSS (position:sticky + z-index);
   JS only switches the pin off if a hero is ever taller than the screen. */
main>section,main>article{position:relative;z-index:2;
  border-radius:2rem 2rem 0 0;margin-top:-1.5rem;
  box-shadow:0 -18px 44px -26px rgba(15,74,51,.30);
  border-top:1px solid rgba(255,255,255,.85)}
main>section:first-child{margin-top:0;border-radius:0;box-shadow:none;border-top:0}  /* hero / page-hero */
main>section:nth-child(2){margin-top:-1.5rem}
/* Opaque panels so the hero never shows through (tints/patterns stay layered on top of this) */
main>section:not(.hero):not(.page-hero):not(.dark),main>article{background-color:#F8FAFC!important}
main>section.dark{background-color:#0F172A!important}
main>section:not(:first-child){z-index:2}
#problems{margin-top:-1.5rem;border-radius:2rem 2rem 0 0}
.hero{padding-bottom:clamp(36px,5vw,64px)}
.hero,.page-hero{z-index:1}
@media (max-width:700px){main>section,main>article,#problems{border-radius:1.5rem 1.5rem 0 0;margin-top:-1rem}main>section:first-child{margin-top:0;border-radius:0}}

/* Pin the hero (desktop/large tablet landscape with enough height) */
@media (min-width:1024px) and (min-height:680px){
  .hero{position:sticky;top:var(--pin-top,var(--hdr));display:flex;align-items:center}
  .page-hero{position:sticky;top:var(--pin-top,var(--hdr))}
}
/* Subtle scroll-driven depth (native CSS; ignored by browsers without support) */
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference) and (min-width:1024px) and (min-height:680px){
    @keyframes heroRecede{to{transform:scale(.955) translateY(-1.5%);opacity:.35}}
    @keyframes panelSettle{from{transform:translateY(34px)}to{transform:none}}
    .hero:not(.no-pin),.page-hero:not(.no-pin){animation:heroRecede linear both;animation-timeline:scroll(root block);animation-range:0 90svh}
    main>section:not(:first-child),main>article{animation:panelSettle linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
  }
}
/* Smaller screens / reduced motion: keep the layered look, drop the pin */
@media (prefers-reduced-motion:reduce){.hero,.page-hero{position:relative!important;top:auto!important}}

/* ===== Pinned hero on phones/tablets/short windows too =====
   Needs JS to measure the hero (the .js class); without JS small screens simply scroll normally. */
.hero{min-height:calc(100vh - var(--hdr));min-height:calc(100svh - var(--hdr));display:flex;align-items:center}
.hero>.container{width:100%}
@media (max-width:1023px),(max-height:679px){
  .js .hero,.js .page-hero{position:sticky;top:var(--pin-top,var(--hdr))}
}
/* scroll-driven depth on every size */
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference) and (max-width:1023px),(prefers-reduced-motion:no-preference) and (max-height:679px){
    .js .hero,.js .page-hero{animation:heroRecede linear both;animation-timeline:scroll(root block);animation-range:0 90svh}
    main>section:not(:first-child),main>article{animation:panelSettle linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
  }
}
@media (prefers-reduced-motion:reduce){.hero,.page-hero,.js .hero,.js .page-hero{position:relative!important;top:auto!important;animation:none!important}}
@keyframes heroRecede{to{transform:scale(.955) translateY(-1.5%);opacity:.35}}
@keyframes panelSettle{from{transform:translateY(34px)}to{transform:none}}

/* ===================== Customer Problems: premium ambient background =====================
   Palette: warm white #F8FAFC, mint #D9FBE8, lime #E9F8B5, emerald #10B981, forest #065F46, text #17251F / #64736B */
main>#problems{background-color:#F8FAFC!important}
#problems,.has-site-bg #problems{background-image:
  radial-gradient(44% 54% at 90% 16%,rgba(226,232,240,.95),transparent 70%),
  radial-gradient(40% 48% at 4% 80%,rgba(16,185,129,.85),transparent 72%),
  radial-gradient(34% 42% at 62% 104%,rgba(16,185,129,.11),transparent 70%),
  radial-gradient(30% 36% at 28% 6%,rgba(226,232,240,.65),transparent 70%),
  linear-gradient(180deg,#FAFCFE 0,#F4F7FB 55%,#F1F5F9 100%)}
/* dot grid: wider spacing, softer, concentrated mid-section so it blends in */
#problems::before{background-size:34px 34px;opacity:.42;
  -webkit-mask-image:radial-gradient(ellipse 70% 62% at 55% 52%,#000 8%,transparent 76%);mask-image:radial-gradient(ellipse 70% 62% at 55% 52%,#000 8%,transparent 76%)}
/* flowing curves running behind the cards */
#problems::after{display:block;left:-4%;right:-4%;top:6%;bottom:2%;background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1600 700%22 fill=%22none%22 stroke-linecap=%22round%22%3E%3Cdefs%3E%3ClinearGradient id=%22a%22 x1=%220%22 x2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%2310B981%22 stop-opacity=%220%22/%3E%3Cstop offset=%22.35%22 stop-color=%22%2310B981%22 stop-opacity=%22.42%22/%3E%3Cstop offset=%22.75%22 stop-color=%22%239BD60F%22 stop-opacity=%22.45%22/%3E%3Cstop offset=%221%22 stop-color=%22%239BD60F%22 stop-opacity=%220%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22b%22 x1=%220%22 x2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23145C40%22 stop-opacity=%220%22/%3E%3Cstop offset=%22.5%22 stop-color=%22%23145C40%22 stop-opacity=%22.2%22/%3E%3Cstop offset=%221%22 stop-color=%22%23145C40%22 stop-opacity=%220%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d=%22M-60 520C240 380 460 640 800 470S1340 230 1680 380%22 stroke=%22url(%23a)%22 stroke-width=%221.7%22/%3E%3Cpath d=%22M-60 430C300 270 520 540 880 380S1380 120 1680 260%22 stroke=%22url(%23b)%22 stroke-width=%221.3%22/%3E%3Cpath d=%22M-60 600C320 500 600 700 940 560S1400 380 1680 500%22 stroke=%22url(%23a)%22 stroke-width=%221.2%22/%3E%3Cpath d=%22M-60 330C260 210 560 420 900 280S1400 60 1680 170%22 stroke=%22url(%23b)%22 stroke-width=%221.1%22/%3E%3Cpath d=%22M200 -40C340 140 300 300 520 400S900 560 1000 740%22 stroke=%22url(%23a)%22 stroke-width=%221%22 opacity=%22.7%22/%3E%3C/svg%3E") center/cover no-repeat;opacity:.9}
/* large soft translucent shapes behind the content (radial falloff = no blur filter, cheap to render) */
#problems .amb{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;animation:patIn .9s 1s both}
#problems .amb i{position:absolute;display:block;border-radius:50%;will-change:transform}
#problems .amb i:nth-child(1){width:min(46rem,90vw);height:min(46rem,90vw);right:-10%;top:-12%;background:radial-gradient(closest-side,rgba(16,185,129,.17),rgba(16,185,129,.06) 55%,transparent)}
#problems .amb i:nth-child(2){width:min(38rem,80vw);height:min(38rem,80vw);left:-12%;bottom:-16%;background:radial-gradient(closest-side,rgba(16,185,129,.95),rgba(16,185,129,.35) 55%,transparent)}
#problems .amb i:nth-child(3){width:min(26rem,60vw);height:min(26rem,60vw);left:40%;top:30%;background:radial-gradient(closest-side,rgba(226,232,240,.75),rgba(226,232,240,.25) 60%,transparent)}
/* type colours from the palette */
#problems .eyebrow{color:#065F46}
#problems h2,#problems h3{color:#17251F}
#problems .problem-card p{color:#64736B}
/* card hover: 5px lift, emerald edge, tinted shadow (refines the existing selected look) */
@media (hover:hover) and (pointer:fine){
  #problems .problem-card:hover{transform:translateY(-5px);border-color:rgba(16,185,129,.55);
    box-shadow:0 2px 4px rgba(20,92,64,.06),0 14px 28px -12px rgba(20,92,64,.18),0 32px 58px -30px rgba(16,185,129,.34),0 0 0 1px rgba(16,185,129,.22)}
  #problems .problem-card:hover p{color:#3F5148}
}
@keyframes ambA{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-4%,5%,0) scale(1.08)}}
@keyframes ambB{from{transform:translate3d(0,0,0) scale(1.04)}to{transform:translate3d(5%,-4%,0) scale(.96)}}
@keyframes ambC{from{transform:translate3d(-3%,-2%,0)}to{transform:translate3d(4%,3%,0) scale(1.1)}}
@media (prefers-reduced-motion:no-preference){
  #problems .amb i:nth-child(1){animation:ambA 28s ease-in-out infinite alternate}
  #problems .amb i:nth-child(2){animation:ambB 34s ease-in-out infinite alternate}
  #problems .amb i:nth-child(3){animation:ambC 40s ease-in-out infinite alternate}
  #problems::after{animation:patIn .9s 1s both,curveDrift 30s ease-in-out infinite alternate}
}
@media (prefers-reduced-motion:reduce){#problems .amb{animation:patIn .01s 1s both!important}}
@media (max-width:700px){
  #problems::after{display:block!important;animation:patIn .9s 1s both!important;opacity:.7}
  #problems .amb i:nth-child(3){display:none}
}

/* ===================== Homepage hero: centered "light bands" layout (Instrument Sans) ===================== */
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/instrument-sans.woff) format("woff")}
@font-face{font-family:"Instrument Sans";font-style:italic;font-weight:400 700;font-display:swap;src:url(/assets/fonts/instrument-sans-italic.woff) format("woff")}
.hero.hero-c{--hf:var(--font);
  background:#E6E7E2;isolation:isolate;overflow:hidden;overflow:clip;text-align:center}
.hero.hero-c::before,.hero.hero-c::after{display:none}
/* soft diagonal bands of light */
.hero-bands{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hero-bands i{position:absolute;inset:-35%;display:block;will-change:transform}
.hero-bands i:nth-child(1){background:linear-gradient(116deg,transparent 0 6%,rgba(255,255,255,.92) 17%,transparent 29%,rgba(255,255,255,.74) 42%,transparent 54%,rgba(255,255,255,.88) 68%,transparent 82%,rgba(255,255,255,.7) 94%,transparent)}
.hero-bands i:nth-child(2){background:linear-gradient(122deg,rgba(16,185,129,.0) 0 20%,rgba(16,185,129,.22) 33%,rgba(16,185,129,0) 46%,rgba(255,255,255,.4) 60%,rgba(16,185,129,0) 74%)}
.hero-arcs{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
/* floating discs */
.hero-coin{position:absolute;z-index:1;pointer-events:none;filter:drop-shadow(0 18px 20px rgba(80,105,10,.18))}
.hero-coin-l{left:-1.5%;bottom:5%;width:clamp(150px,17vw,310px);aspect-ratio:250/200}
.hero-coin-r{right:3.5%;top:27%;width:clamp(120px,13vw,240px);aspect-ratio:250/200}
/* content */
.hero-c>.container.hero-center{position:relative;z-index:2;max-width:min(100%,62rem);display:flex;flex-direction:column;align-items:center;padding-block:clamp(1rem,3vh,2.5rem)}
.hero-c .hero-pill{font:500 .82rem/1 var(--hf);letter-spacing:0;text-transform:none;color:#2B3A12;background:#E2EEB5;border:0;border-radius:999px;padding:.55rem 1.1rem;margin:0 0 clamp(1.1rem,2.6vh,1.9rem)}
.hero-c .hero-q{font:italic 500 clamp(2rem,4.7vw,5.4rem)/1.07 var(--hf);letter-spacing:-.015em;color:#171D18;max-width:19em;margin:0 auto;text-wrap:balance;font-feature-settings:normal}
.hero-c .hero-q .hl{color:#059669;background:none;padding:0;animation:none}
.hero-c .lead{font:400 clamp(.95rem,1.12vw,1.22rem)/1.55 var(--hf);color:#323B34;max-width:34em;margin:clamp(1.1rem,2.6vh,1.8rem) auto 0}
.hero-c .btn-row{justify-content:center;gap:12px;margin-top:clamp(1.4rem,3.4vh,2.4rem)}
.hero-c .btn.btn-lg{font:500 .95rem/1 var(--hf);padding:0 1.35rem;min-height:2.9rem;border-radius:10px;gap:.55rem}
.hero-c .btn-soft{background:rgba(188,194,181,.55);color:#1B221C;border:1px solid rgba(255,255,255,.55);backdrop-filter:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.hero-c .btn-soft:hover{background:rgba(188,194,181,.8);color:#10150F}
.hero-c .btn-primary{color:#0F172A}
.hero-scroll{position:absolute;left:50%;bottom:clamp(1rem,3.2vh,2rem);transform:translateX(-50%);z-index:2;display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:50%;background:rgba(188,194,181,.6);color:#1B221C;transition:background-color .3s var(--ease),transform .3s var(--ease)}
.hero-scroll:hover{background:rgba(188,194,181,.9);transform:translateX(-50%) translateY(2px)}
.hero-scroll:focus-visible{outline:3px solid rgba(5,150,105,.7);outline-offset:3px}
@media (max-width:700px){
  .hero-coin-l{left:-8%;bottom:2.5%;width:44vw}
  .hero-coin-r{right:-6%;top:6%;width:34vw}
  .hero-c .btn-row{width:100%;flex-direction:column;align-items:stretch;max-width:22rem}
  .hero-c .btn.btn-lg{width:100%}
  .hero-scroll{display:none}
}
@media (prefers-reduced-motion:no-preference){
  @keyframes bandDrift{from{transform:translate3d(-3%,0,0)}to{transform:translate3d(3%,-2%,0)}}
  .hero-bands i:nth-child(1){animation:bandDrift 26s ease-in-out infinite alternate}
  .hero-bands i:nth-child(2){animation:bandDrift 34s ease-in-out infinite alternate-reverse}
  .hero-coin-l{animation:floatY 9s ease-in-out infinite;--r:-6deg}
  .hero-coin-r{animation:floatY 11s ease-in-out -3s infinite;--r:8deg}
}
/* hero refinements: two-line headline, stronger light/shadow bands */
.hero.hero-c{background:#D8D9D4}
.hero-c>.container.hero-center{max-width:min(100%,84rem)}
.hero-c .hero-q{max-width:23em}
.hero-bands i:nth-child(1){background:linear-gradient(118deg,transparent 0 4%,rgba(255,255,255,.98) 15%,rgba(255,255,255,.9) 22%,transparent 33%,rgba(255,255,255,.85) 44%,transparent 55%,rgba(255,255,255,.97) 68%,rgba(255,255,255,.85) 76%,transparent 88%,rgba(255,255,255,.8) 96%)}
.hero-bands i:nth-child(2){background:linear-gradient(118deg,transparent 0 24%,rgba(16,185,129,.26) 36%,transparent 48%,rgba(255,255,255,.35) 62%,transparent 76%)}


/* ===================================================================================
   DUNES THEME  (dark minimalist: slate-blue sky, black sand dunes, emerald accents)
   Spec tokens are at :root; everything below re-themes the site from them.
   =================================================================================== */
:root{
  /* Brand accents */
  --color-accent-emerald:#059669;   /* text highlight */
  --color-primary-green:#10B981;    /* primary CTA background */
  --color-primary-hover:#059669;    /* CTA hover */
  --color-badge-bg:#E6F4EA;         /* sage pill */
  --color-badge-text:#065F46;
  /* Neutrals */
  --color-text-main:#0F172A;
  --color-text-subtle:#475569;
  /* Hero */
  --color-sky-top:#CBE0E8;
  --color-dune-dark:#0B0C0E;
  /* Accessibility switches (spec values by default; see README): */
  --btn-primary-text:#fff;          /* #0F172A gives 7:1 on #10B981; #fff gives 2.5:1 */
  --hero-highlight:#059669;         /* #047857 gives ~4:1 on the sky; #059669 gives 2.6:1 */
  /* Site-wide tokens re-pointed to the palette */
  --bg:#F8FAFC;--soft:#F1F5F9;--ink:var(--color-text-main);--muted:var(--color-text-subtle);
  --dark:#0F172A;--dark-2:#162033;--warm:#F8FAFC;
  --green:#6EE7B7;--green-dark:#065F46;--green-tint:#E6F4EA;--green-line:#B7E4C7;
  --line:#E2E8F0;--line-strong:#CBD5E1;--card-line:rgba(15,23,42,.08);
  --card-shadow:0 1px 2px rgba(15,23,42,.05),0 4px 10px -4px rgba(15,23,42,.06),0 18px 36px -18px rgba(15,23,42,.16);
  --card-shadow-hover:0 2px 4px rgba(15,23,42,.06),0 10px 20px -8px rgba(15,23,42,.10),0 28px 48px -20px rgba(15,23,42,.24);
  --card-bg-hover:#F0FDF7;
}
html{background:#F8FAFC}
body{color:var(--color-text-main)}
a{color:var(--color-accent-emerald)}

/* ---- Navigation: translucent sky glass ---- */
.site-header{background:rgba(203,224,232,.75)!important;-webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);border-bottom:1px solid rgba(15,23,42,.08)}
.site-nav ul a{color:#0F172A}
.site-nav ul a:hover{background:rgba(15,23,42,.05);color:var(--color-accent-emerald)}
.site-nav ul a[aria-current=page]{color:var(--color-accent-emerald)}
.js .site-nav{background:rgba(203,224,232,.97)}
.nav-toggle{color:#0F172A}

/* ---- Buttons: emerald primary, glass secondary ---- */
.btn-primary,.btn-accent{background:var(--color-primary-green);color:var(--btn-primary-text);border-color:transparent;box-shadow:0 4px 20px rgba(16,185,129,.25)}
.btn-primary:hover,.btn-accent:hover{background:var(--color-primary-hover);color:var(--btn-primary-text);box-shadow:0 6px 24px rgba(5,150,105,.32)}
.site-nav .btn{box-shadow:0 4px 20px rgba(16,185,129,.25)}
.btn-soft{background:rgba(15,23,42,.06);color:#0F172A;border:1px solid #334155;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.btn-soft:hover{background:rgba(15,23,42,.12);color:#0F172A}
.cta-band .btn-accent,.dark .btn-accent{color:var(--btn-primary-text)}

/* ---- Hero: dunes photo, text over the sky (top 60%) ---- */
.hero.hero-c{background:linear-gradient(180deg,#BDD4DC 0%,#C8DCE3 60%,#2C3135 78%,#0B0C0E 100%);overflow:hidden;overflow:clip;
  display:grid;grid-template-rows:minmax(min-content,60fr) minmax(0,40fr);align-items:stretch;text-align:center}
.hero-c .hero-bgwrap{position:absolute;inset:0;z-index:0}
.hero-c .hero-bgwrap img{width:100%;height:100%;object-fit:cover;object-position:50% 100%}
.hero-c .hero-bgwrap::after{display:none}
.hero-c>.container.hero-center{align-self:center;justify-content:center;padding-block:clamp(1rem,3vh,2.2rem)}
.hero-c .hero-pill{background:var(--color-badge-bg);color:var(--color-badge-text);border:1px solid rgba(6,95,70,.25);border-radius:999px}
.hero-c .hero-q{color:var(--color-text-main);font-size:clamp(2rem,4.3vw,5rem)}
.hero-c .hero-q .hl{color:var(--hero-highlight)}
.hero-c .lead{color:var(--color-text-subtle)}
.hero-c .btn-primary{color:var(--btn-primary-text)}
.hero-c .btn-soft{background:rgba(15,23,42,.06);border:1px solid #334155;color:#0F172A;box-shadow:none}
.hero-c .btn-soft:hover{background:rgba(15,23,42,.12)}
.hero-scroll{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.28);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hero-scroll:hover{background:rgba(255,255,255,.26)}
.hero-scroll:focus-visible{outline-color:#6EE7B7}
@media (max-width:700px){
  .hero.hero-c{min-height:max(calc(100svh - var(--hdr)),50rem)}
  .hero-scroll{display:none}
}

/* ---- Content sections: clean light mode (#F8FAFC) with cool slate tints ---- */
.bg-mesh i:nth-child(1){background:
  radial-gradient(52% 44% at 14% 16%,rgba(148,163,184,.22),transparent 70%),
  radial-gradient(48% 46% at 86% 10%,rgba(16,185,129,.10),transparent 70%),
  radial-gradient(58% 48% at 72% 88%,rgba(203,224,232,.55),transparent 72%)}
.bg-mesh i:nth-child(2){background:
  radial-gradient(46% 40% at 28% 82%,rgba(16,185,129,.07),transparent 70%),
  radial-gradient(40% 38% at 92% 54%,rgba(15,23,42,.05),transparent 70%),
  radial-gradient(50% 40% at 4% 48%,rgba(203,213,225,.35),transparent 70%)}
.section::before,.page-hero::before{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2228%22 height=%2228%22%3E%3Ccircle cx=%222%22 cy=%222%22 r=%221.1%22 fill=%22%230F172A%22 fill-opacity=%22.16%22/%3E%3C/svg%3E")}
.section.soft::before{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22420%22 height=%22300%22 fill=%22none%22%3E%3Cline x1=%2230%22 y1=%2240%22 x2=%22150%22 y2=%22110%22 stroke=%22%230F172A%22 stroke-opacity=%22.08%22/%3E%3Cline x1=%22150%22 y1=%22110%22 x2=%22270%22 y2=%2230%22 stroke=%22%230F172A%22 stroke-opacity=%22.08%22/%3E%3Cline x1=%22270%22 y1=%2230%22 x2=%22360%22 y2=%22150%22 stroke=%22%230F172A%22 stroke-opacity=%22.08%22/%3E%3Cline x1=%22150%22 y1=%22110%22 x2=%2290%22 y2=%22230%22 stroke=%22%230F172A%22 stroke-opacity=%22.08%22/%3E%3Cline x1=%2290%22 y1=%22230%22 x2=%22240%22 y2=%22250%22 stroke=%22%230F172A%22 stroke-opacity=%22.08%22/%3E%3Cline x1=%22150%22 y1=%22110%22 x2=%22240%22 y2=%22250%22 stroke=%22%230F172A%22 stroke-opacity=%22.08%22/%3E%3Cline x1=%22240%22 y1=%22250%22 x2=%22360%22 y2=%22150%22 stroke=%22%230F172A%22 stroke-opacity=%22.08%22/%3E%3Ccircle cx=%2230%22 cy=%2240%22 r=%223%22 fill=%22%2310B981%22 fill-opacity=%22.35%22/%3E%3Ccircle cx=%22150%22 cy=%22110%22 r=%223%22 fill=%22%2310B981%22 fill-opacity=%22.35%22/%3E%3Ccircle cx=%22270%22 cy=%2230%22 r=%223%22 fill=%22%2310B981%22 fill-opacity=%22.35%22/%3E%3Ccircle cx=%22360%22 cy=%22150%22 r=%223%22 fill=%22%2310B981%22 fill-opacity=%22.35%22/%3E%3Ccircle cx=%2290%22 cy=%22230%22 r=%223%22 fill=%22%2310B981%22 fill-opacity=%22.35%22/%3E%3Ccircle cx=%22240%22 cy=%22250%22 r=%223%22 fill=%22%2310B981%22 fill-opacity=%22.35%22/%3E%3C/svg%3E")}
.section::after,.page-hero::after{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1600 600%22 fill=%22none%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M-60 430C260 290 470 560 820 400S1380 190 1680 330%22 stroke=%22%2310B981%22 stroke-opacity=%22.28%22 stroke-width=%221.6%22/%3E%3Cpath d=%22M-60 500C300 380 560 600 900 470S1400 300 1680 420%22 stroke=%22%2334D399%22 stroke-opacity=%22.30%22 stroke-width=%221.4%22/%3E%3Cpath d=%22M-60 330C240 200 520 420 860 280S1360 110 1680 220%22 stroke=%22%230F172A%22 stroke-opacity=%22.10%22 stroke-width=%221.2%22/%3E%3C/svg%3E")}
.section.soft{background:linear-gradient(180deg,rgba(226,232,240,0),rgba(226,232,240,.62) 18%,rgba(241,245,249,.7) 82%,rgba(226,232,240,0))}
.page-hero{background:radial-gradient(60% 120% at 92% 0%,rgba(203,224,232,.75),transparent 68%),radial-gradient(50% 100% at 0% 100%,rgba(16,185,129,.08),transparent 70%),linear-gradient(180deg,#EEF3F8,#F1F5F9)}
main>#problems{background-color:#F8FAFC!important}
#problems,.has-site-bg #problems{background-image:
  radial-gradient(44% 54% at 90% 16%,rgba(203,224,232,.80),transparent 70%),
  radial-gradient(40% 48% at 4% 80%,rgba(209,250,229,.65),transparent 72%),
  radial-gradient(34% 42% at 62% 104%,rgba(16,185,129,.09),transparent 70%),
  radial-gradient(30% 36% at 28% 6%,rgba(226,232,240,.8),transparent 70%),
  linear-gradient(180deg,#FAFCFE 0,#F4F7FB 55%,#F1F5F9 100%)}
#problems::before{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2228%22 height=%2228%22%3E%3Ccircle cx=%222%22 cy=%222%22 r=%221.1%22 fill=%22%230F172A%22 fill-opacity=%22.16%22/%3E%3C/svg%3E")}
#problems::after{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1600 700%22 fill=%22none%22 stroke-linecap=%22round%22%3E%3Cdefs%3E%3ClinearGradient id=%22a%22 x1=%220%22 x2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%2310B981%22 stop-opacity=%220%22/%3E%3Cstop offset=%22.4%22 stop-color=%22%2310B981%22 stop-opacity=%22.40%22/%3E%3Cstop offset=%22.8%22 stop-color=%22%2334D399%22 stop-opacity=%22.40%22/%3E%3Cstop offset=%221%22 stop-color=%22%2334D399%22 stop-opacity=%220%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22b%22 x1=%220%22 x2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%230F172A%22 stop-opacity=%220%22/%3E%3Cstop offset=%22.5%22 stop-color=%22%230F172A%22 stop-opacity=%22.16%22/%3E%3Cstop offset=%221%22 stop-color=%22%230F172A%22 stop-opacity=%220%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d=%22M-60 520C240 380 460 640 800 470S1340 230 1680 380%22 stroke=%22url(%23a)%22 stroke-width=%221.7%22/%3E%3Cpath d=%22M-60 430C300 270 520 540 880 380S1380 120 1680 260%22 stroke=%22url(%23b)%22 stroke-width=%221.3%22/%3E%3Cpath d=%22M-60 600C320 500 600 700 940 560S1400 380 1680 500%22 stroke=%22url(%23a)%22 stroke-width=%221.2%22/%3E%3Cpath d=%22M-60 330C260 210 560 420 900 280S1400 60 1680 170%22 stroke=%22url(%23b)%22 stroke-width=%221.1%22/%3E%3C/svg%3E")}
#problems .amb i:nth-child(1){background:radial-gradient(closest-side,rgba(16,185,129,.13),rgba(16,185,129,.04) 55%,transparent)}
#problems .amb i:nth-child(2){background:radial-gradient(closest-side,rgba(203,224,232,.85),rgba(203,224,232,.30) 55%,transparent)}
#problems .amb i:nth-child(3){background:radial-gradient(closest-side,rgba(209,250,229,.60),rgba(209,250,229,.2) 60%,transparent)}
.mark{color:var(--color-accent-emerald);background:linear-gradient(rgba(16,185,129,.22),rgba(16,185,129,.22)) 0 92%/100% .3em no-repeat}
.cta-band.dark .mark,.section.dark .mark{color:#6EE7B7;background:none}
.eyebrow,#problems .eyebrow{color:#047857}

/* ---- Cards: icon chips in emerald tints ---- */
.card-icon{background:linear-gradient(145deg,#F0FDF7,#D9F5E8);border:1px solid #A7F3D0;color:#047857}
.card:hover .card-icon{background:#6EE7B7;border-color:#34D399;color:#064E3B;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 10px 20px -8px rgba(16,185,129,.55)}
.article-card:hover .tag{background:#6EE7B7;color:#064E3B}

/* ---- Final call to action + footer: deep carbon with emerald light ---- */
.cta-band.dark,.section.dark,main>section.dark{background-color:#0B0C0E!important;background-image:radial-gradient(60% 90% at 88% 0%,rgba(16,185,129,.18),transparent 70%),radial-gradient(55% 80% at 0% 100%,rgba(16,185,129,.10),transparent 70%),linear-gradient(165deg,#0B0C0E 0%,#0F172A 55%,#0B0C0E 100%)}
.site-footer{background:linear-gradient(180deg,#0F172A,#0B0C0E)}
.cta-band.dark .ambient .a1{border-color:rgba(110,231,183,.28)}
.cta-band.dark .ambient .a2{border-color:rgba(16,185,129,.35)}
.cta-band.dark .ambient .a4{background:radial-gradient(closest-side,rgba(16,185,129,.28),transparent)}

/* ===== One typeface site-wide: Instrument Sans (the landing page font). Form controls inherit it too. ===== */
html,body,button,input,select,textarea{font-family:var(--font)}
h1,h2,h3,h4,h5,h6,.btn,.chip,.tag,.eyebrow,.brand,.site-nav a,.footer-grid,.faq summary{font-family:var(--font)}
h1,h2,h3{letter-spacing:-.02em}

/* ===== Header: logo left, navigation centred, call to action right (desktop) ===== */
.brand{gap:0}
.brand-logo{display:block;height:38px;width:auto}
.site-footer .brand-logo{height:40px}
@media (min-width:861px){
  .nav-wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px}
  .nav-wrap .brand{justify-self:start}
  .site-nav{display:contents}
  .site-nav ul{grid-column:2;justify-content:center}
  .site-nav .nav-cta{grid-column:3;justify-self:end}
}
@media (max-width:860px){
  .brand-logo{height:34px}
  .js .site-nav{top:100%}
}

/* Mobile menu: opaque enough that page text never shows through */
@media (max-width:860px){.js .site-nav.is-open{background:#ECF4F7;opacity:1}}

/* ---- Hero highlight: slow emerald gradient + underline that draws once ---- */
.hero-c .hero-q .hl{
  color:var(--hero-highlight);padding-bottom:.06em;
  background:linear-gradient(90deg,#047857,#10B981,#34D399,#10B981,#047857) 0 0/200% 100%,
             linear-gradient(#10B981,#10B981) 0 100%/100% .07em no-repeat;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero-c .hero-q .hl{-webkit-background-clip:text,border-box;background-clip:text,border-box;-webkit-text-fill-color:transparent}}
@media (prefers-reduced-motion:no-preference){
  .hero-c .hero-q .hl{animation:hlFlow 8s linear infinite,hlLine .7s .6s var(--ease) both}}
@keyframes hlFlow{to{background-position:200% 0,0 100%}}
@keyframes hlLine{from{background-size:200% 100%,0% .07em}to{background-size:200% 100%,100% .07em}}

/* ---- Smaller logo, header blended into the hero ---- */
.brand-logo{height:32px}
.site-footer .brand-logo{height:36px}
@media (max-width:860px){.brand-logo{height:24px}.site-footer .brand-logo{height:30px}}
.site-header{transition:background-color .35s var(--ease),box-shadow .3s var(--ease),border-color .35s var(--ease),backdrop-filter .35s}
.site-header:not(.scrolled){background:transparent!important;border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
.site-header.scrolled{background:rgba(203,224,232,.82)!important}
/* Home: header at the top is the same sky colour as the hero, so the two read as one surface */
body:has(.hero-c) .site-header:not(.scrolled){background:#BDD4DC!important}

/* ---- Italic for headings, buttons and nav; upright for paragraphs and form fields ---- */
html,body{font-style:normal}
em,i,cite,address,dfn,var{font-style:italic}
.amb i{font-style:normal}
h1,h2,h3,h4,h5,h6,.btn,button,.site-nav a,.nav-toggle,.hero-q,.card-link,.footer-col h2,.footer-col h3,.site-footer h2,.site-footer h3,.site-footer h4{font-style:italic}
input,select,textarea,option{font-style:normal}
input::placeholder,textarea::placeholder{font-style:normal}

/* ---- Social links: footer icon row + Contact "Connect with us" strip ---- */
.social-icons{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0;padding:0;list-style:none}
.social-icons a{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;color:#CBD5E1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);transition:color .25s var(--ease),background-color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease)}
.social-icons a:focus-visible,.connect-btn:focus-visible{outline:2px solid #10B981;outline-offset:3px}
.connect{margin-top:28px}
.connect-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:10px;margin:14px 0 0;padding:0;list-style:none}
.connect-btn{display:flex;align-items:center;gap:10px;min-height:48px;padding:10px 14px;border-radius:12px;color:#0F172A;background:#fff;border:1px solid rgba(15,23,42,.12);text-decoration:none;font-weight:500;transition:color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease)}
.connect-btn svg{flex:none;color:#059669}
@media (hover:hover) and (pointer:fine){
  .social-icons a:hover{color:#fff;background:#10B981;border-color:#10B981;transform:translateY(-2px)}
  .connect-btn:hover{border-color:#10B981;transform:translateY(-2px);box-shadow:0 10px 22px -14px rgba(5,150,105,.6)}
}
@media (prefers-reduced-motion:reduce){.social-icons a,.connect-btn{transition:none}.social-icons a:hover,.connect-btn:hover{transform:none}}
.site-footer .social-icons{flex-direction:row;flex-wrap:wrap;gap:10px}
.site-footer .social-icons a{display:grid;width:40px;height:40px;padding:0}

/* ---- Stronger body text: darker secondary colour, slightly heavier weight, 16px minimum ---- */
:root{--color-text-subtle:#334155;--muted:#334155}
body{font-weight:450}
main p,main li,.card p,.section-head p,.mini-list,.outcome-grid p,.process p,.why-grid p,.article-card p,.next-steps li{color:#1E293B}
.lead,.section-head p,.hero-c .lead{color:#334155}
.card p,.outcome-grid p,.process p,.why-grid p,.article-card p,.mini-list,.next-steps li{font-size:1rem}
.meta,.platform-note,.crumbs ol{color:#475569}
#problems .problem-card p{color:#1E293B}

/* ---- Hero highlight v2: hand-drawn wavy underline + highlighter band, more motion ---- */
.hero-c .hero-q .hl{
  padding-bottom:.16em;
  background:linear-gradient(90deg,#047857,#10B981,#34D399,#10B981,#047857) 0 0/200% 100%,
             url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%2010'%20preserveAspectRatio='none'%3E%3Cpath%20d='M2%206C20%202%2035%209%2055%205S90%203%20110%206%20150%209%20198%204'%20fill='none'%20stroke='%2310B981'%20stroke-width='3'%20stroke-linecap='round'%20vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 100%/100% .2em no-repeat,
             linear-gradient(rgba(16,185,129,.16),rgba(16,185,129,.16)) 0 72%/100% .4em no-repeat}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero-c .hero-q .hl{-webkit-background-clip:text,border-box,border-box;background-clip:text,border-box,border-box}}
@media (prefers-reduced-motion:no-preference){
  .hero-c .hero-q .hl{animation:hlFlow 5s linear infinite,hlLine 1.3s .5s var(--ease) both,hlPulse 4.5s 2.2s ease-in-out infinite}}
@keyframes hlFlow{to{background-position:200% 0,0 100%,0 72%}}
@keyframes hlLine{
  0%{background-size:200% 100%,0% .2em,0% .4em}
  55%{background-size:200% 100%,0% .2em,100% .4em}
  100%{background-size:200% 100%,100% .2em,100% .4em}}
@keyframes hlPulse{0%,100%{filter:none}50%{filter:saturate(1.35) brightness(1.06)}}

/* Article content from Markdown: numbered lists, quotes, images, subheadings */
.prose ol{padding-left:1.3em;margin:0 0 1.2em}
.prose h3{font-size:1.2rem;margin:1.6em 0 .4em}
.prose blockquote{margin:1.4em 0;padding:.2em 0 .2em 1.1em;border-left:3px solid #10B981;color:#1E293B}
.prose img{max-width:100%;height:auto;border-radius:14px;margin:1.2em 0}
.prose a{text-decoration:underline;text-underline-offset:3px}

/* ---- Phone performance: no endless background animation, no live blur ---- */
@media (max-width:860px),(hover:none) and (pointer:coarse){
  .section::after,.page-hero::after,#problems::after{animation:patIn .9s 1s both!important;will-change:auto}
  .bg-mesh i,.bg-mesh i:nth-child(1),.bg-mesh i:nth-child(2),.ambient .a1,.ambient .a2,.ambient .a3,.ambient .a4,
  #problems .amb i,.hero-bands i,.hero-coin-l,.hero-coin-r,.hero::before,.hero::after{animation:none!important;will-change:auto}
  .bg-mesh{will-change:auto}
  .hero-c .hero-q .hl{animation:hlLine 1.3s .5s var(--ease) both!important}
  .site-header,.site-header.scrolled,.btn-soft,.hero-scroll,.site-footer *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .site-header.scrolled{background:rgba(214,230,237,.97)!important}
  .btn-soft{background:rgba(255,255,255,.55)}
  #platforms .net .ln,#platforms .net .nd,.flow path,.steps4::before,.hero-svg .wf-ring{animation:none!important}
  .js .hero,.js .page-hero,.hero,.page-hero,main>section:not(:first-child),main>article{animation:none!important}
  .card,.problem-card,.form-card{box-shadow:0 1px 2px rgba(15,23,42,.06),0 8px 18px -12px rgba(15,23,42,.18)}
}

.form-consent{margin:4px 0 14px;font-size:.88rem;color:#475569}
.form-consent a{text-decoration:underline;text-underline-offset:3px}