@font-face{font-family:"Geist";src:url(/fonts/geist-latin.woff2) format("woff2");font-weight:100 900;font-display:swap}
/* Light theme. Checked pairs: #111 on #fff 18.9 · #626262 on #fff 6.0 / on #f4f4f4 5.5 · #0a7a45 on #fff 5.6 / on #f4f4f4 5.1 · #111 on #3dff8f 15.1 · #fff on #090909 19.6 · #acacac on #090909 9.6 */
:root{--bg:#fff;--soft:#f4f4f4;--soft-2:#eaeaea;--line:#e2e2e2;--ink:#111;--text-2:#626262;--accent:#3dff8f;--accent-ink:#0a7a45;--dark:#090909;--dark-2:#131313;--dark-line:#2d2d2d;--radius:16px;--gutter:20px;--max:1280px;--f:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--ease:cubic-bezier(.16,1,.3,1)}
@media (min-width:768px){:root{--gutter:32px}}
@media (min-width:1200px){:root{--gutter:80px}}
*,*:before,*:after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--f);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-weight:600;letter-spacing:-.03em;line-height:1.08;margin:0 0 24px}
h1{font-size:clamp(40px,6.6vw,76px)}
h2{font-size:clamp(32px,4.4vw,52px)}
h3{font-size:21px;letter-spacing:-.01em;line-height:1.3;margin-bottom:8px}
p{margin:0 0 16px}
.wrap{max-width:none;margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;z-index:99;background:var(--ink);color:#fff;padding:8px 16px;border-radius:8px}
:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px;border-radius:4px}
.dark :focus-visible{outline-color:var(--accent)}
.muted{color:var(--text-2)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:16px}
.eyebrow:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
.lead{font-size:clamp(18px,1.6vw,21px);color:var(--text-2);max-width:640px}
.hl{background:linear-gradient(transparent 62%,var(--accent) 62%);padding:0 4px}
/* header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:24px;height:72px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.brand svg{width:96px;height:auto}
.brand small{font-size:13px;color:var(--text-2);border-left:1px solid var(--line);padding-left:12px}
.nav{display:flex;align-items:center;gap:32px}
.nav a{text-decoration:none;font-size:15px;color:var(--text-2)}
.nav a:hover,.nav a[aria-current=page]{color:var(--ink)}
.nav a.btn--wa,.nav a.btn--wa:hover{color:var(--ink)}
.menu-btn{display:none;background:none;border:1px solid var(--line);color:var(--ink);border-radius:999px;height:40px;padding:0 16px;font:500 15px var(--f);cursor:pointer}
@media (max-width:1023px){
 .menu-btn{display:block}
 .nav{display:none;position:absolute;left:0;right:0;top:72px;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0;padding:8px var(--gutter) 24px}
 .nav.open{display:flex}
 .nav a{padding:16px 0;border-bottom:1px solid var(--line);font-size:17px;color:var(--ink)}
 .nav .btn{margin-top:16px;justify-content:center}
}
/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 24px;border-radius:999px;font:500 16px var(--f);text-decoration:none;border:1px solid transparent;transition:transform .2s var(--ease),background .2s}
.btn:hover{transform:translateY(-1px)}
.btn--wa{background:var(--accent);color:var(--ink)}
.btn--wa:hover{background:#6bffab}
.btn--ghost{border-color:var(--line);color:var(--ink);background:#fff}
.btn--ghost:hover{background:var(--soft)}
.dark .btn--ghost{background:transparent;border-color:var(--dark-line);color:#fff}
.dark .btn--ghost:hover{background:var(--dark-2)}
.btn--sm{height:40px;padding:0 16px;font-size:15px}
.btn svg{width:18px;height:18px;flex:none}
.ctas{display:flex;flex-wrap:wrap;gap:16px}
/* sections */
.section{padding:96px 0}
.section+.section{border-top:1px solid var(--line)}
.section.soft{background:var(--soft);border-top:0}
.section.soft+.section{border-top:0}
@media (min-width:1024px){.section{padding:128px 0}}
.section-head{max-width:760px;margin-bottom:56px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head.center .lead{margin:0 auto}
.dark{background:var(--dark);color:#fff}
.dark .lead,.dark .muted{color:#acacac}
.dark .eyebrow{color:var(--accent)}
.hero{padding:64px 0 96px;background:radial-gradient(1200px 500px at 85% 0%,#e9fff2 0,rgba(233,255,242,0) 70%)}
@media (min-width:1024px){.hero{padding:96px 0 128px}}
.hero-grid{display:grid;gap:56px;align-items:center}
@media (min-width:1024px){.hero-grid{grid-template-columns:1.1fr .9fr;gap:80px}}
.hero p.lead{margin-bottom:32px}
.trust{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:32px;font-size:15px;color:var(--text-2);list-style:none;padding:0}
.trust li:before{content:"";display:inline-block;width:16px;height:9px;border-left:2px solid var(--accent-ink);border-bottom:2px solid var(--accent-ink);transform:rotate(-45deg) translateY(-3px);margin-right:8px}
/* channel strip */
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:24px 0;overflow:hidden}
.strip ul{display:flex;gap:48px;list-style:none;margin:0;padding:0;width:max-content;animation:marquee 40s linear infinite}
.strip li{display:flex;align-items:center;gap:8px;font-weight:500;color:var(--ink);white-space:nowrap}
.strip li svg{width:20px;height:20px;color:var(--accent-ink)}
@keyframes marquee{to{transform:translateX(-50%)}}
/* phone chat mock */
.phone{max-width:380px;margin:0 auto;width:100%;background:#fff;border:1px solid var(--line);border-radius:32px;padding:12px;box-shadow:0 40px 80px -40px rgba(10,122,69,.35),0 8px 24px -12px rgba(0,0,0,.12)}
.phone-top{display:flex;align-items:center;gap:12px;padding:8px 8px 12px;border-bottom:1px solid var(--line)}
.avatar{width:40px;height:40px;border-radius:50%;background:var(--accent);color:var(--ink);display:grid;place-items:center;font-weight:600;flex:none}
.avatar.ink{background:var(--ink);color:#fff}
.phone-top b{display:block;font-size:15px}
.phone-top span{font-size:13px;color:var(--text-2)}
.chat{display:flex;flex-direction:column;gap:8px;padding:16px 8px 8px;font-size:15px;line-height:1.45;background:var(--soft);border-radius:0 0 22px 22px;height:420px;overflow:hidden;justify-content:flex-end}
.msg{max-width:86%;padding:8px 12px;border-radius:14px;box-shadow:0 1px 1px rgba(0,0,0,.06)}
.msg.sara{background:#fff;align-self:flex-start;border-top-left-radius:4px}
.msg.you{background:#d6f8df;align-self:flex-end;border-top-right-radius:4px}
.msg small{display:block;font-size:12px;color:var(--text-2);margin-bottom:2px;font-weight:500}
.picks{display:flex;flex-wrap:wrap;gap:8px;align-self:flex-start}
.picks span{background:#fff;border:1px solid var(--accent-ink);color:var(--accent-ink);border-radius:999px;padding:4px 12px;font-size:14px;font-weight:500}
.voice{display:flex;align-items:center;gap:8px;min-width:180px}
.voice i{width:28px;height:28px;border-radius:50%;background:var(--accent-ink);display:grid;place-items:center;flex:none}
.voice i:after{content:"";border-left:9px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:2px}
.voice b{flex:1;height:16px;background:repeating-linear-gradient(90deg,#7bbf95 0 2px,transparent 2px 5px);border-radius:2px}
.voice em{font-style:normal;font-size:12px;color:var(--text-2)}
.bk{background:#fff;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:12px;padding:8px 12px;align-self:flex-start;font-size:14px;max-width:86%}
.bk b{display:block}
.typing{align-self:flex-start;background:#fff;border-radius:14px;padding:12px 16px;display:none;gap:4px}
.typing i{width:6px;height:6px;border-radius:50%;background:#9a9a9a;animation:blink 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,100%{opacity:.3}50%{opacity:1}}
.chat.anim>*:not(.typing){display:none}
.chat.anim>.show{display:flex;animation:pop .35s var(--ease)}
.chat.anim>.msg.show,.chat.anim>.bk.show{display:block}
.chat.anim>.voice.show{display:flex}
.chat.anim>.typing.on{display:flex}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.note{font-size:13px;color:var(--text-2);text-align:center;padding-top:8px;margin:0}
/* two phones */
.duo{display:grid;gap:56px}
@media (min-width:1024px){.duo{grid-template-columns:1fr 1fr;gap:48px}}
.duo-col h3{font-size:26px}
.duo-col .checks{margin:24px 0 40px}
/* grids & cards */
.grid{display:grid;gap:24px}
@media (min-width:768px){.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:32px}
.soft .card{border-color:transparent}
.card p{color:var(--text-2);margin:0}
.card .ic{width:48px;height:48px;border-radius:12px;background:#e9fff2;display:grid;place-items:center;margin-bottom:24px;color:var(--accent-ink)}
.card .ic svg{width:24px;height:24px}
a.card{text-decoration:none;display:flex;flex-direction:column;transition:border-color .2s,transform .2s var(--ease),box-shadow .2s}
a.card:hover{border-color:#cfcfcd;transform:translateY(-2px);box-shadow:0 16px 32px -24px rgba(0,0,0,.25)}
a.card .more{margin-top:24px;color:var(--accent-ink);font-weight:500;font-size:15px}
a.card .more:after{content:" \2192"}
.steps{counter-reset:s}
.steps .card:before{counter-increment:s;content:counter(s);display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--accent);margin-bottom:24px;font-weight:600}
.checks{list-style:none;padding:0;margin:0;display:grid;gap:16px}
.checks li{padding-left:32px;position:relative;color:var(--text-2)}
.checks li b{color:var(--ink);font-weight:500}
.checks li:before{content:"";position:absolute;left:2px;top:7px;width:14px;height:8px;border-left:2px solid var(--accent-ink);border-bottom:2px solid var(--accent-ink);transform:rotate(-45deg)}
.split{display:grid;gap:56px;align-items:center}
@media (min-width:1024px){.split{grid-template-columns:1fr 1fr;gap:80px}}
/* infographic: message flow */
.flow{display:grid;gap:16px;position:relative}
@media (min-width:1024px){.flow{grid-template-columns:repeat(4,1fr);gap:24px}}
.flow .node{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;position:relative}
.flow .node h3{font-size:18px}
.flow .node p{color:var(--text-2);font-size:15px;margin:0}
.flow .node .n{font-size:13px;font-weight:600;color:var(--accent-ink);letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px;display:block}
.flow .node ul{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:4px;font-size:15px;color:var(--text-2)}
.flow .node ul li:before{content:"\2022  ";color:var(--accent-ink)}
.flow .node.core{background:var(--dark);color:#fff;border-color:var(--dark)}
.flow .node.core p,.flow .node.core ul{color:#acacac}
.flow .node.core .n{color:var(--accent)}
.flow .node:not(:last-child):after{content:"";position:absolute;background:repeating-linear-gradient(90deg,var(--accent-ink) 0 6px,transparent 6px 12px);background-size:24px 2px;height:2px;width:24px;right:-24px;top:50%;animation:dash 1s linear infinite}
@media (max-width:1023px){.flow .node:not(:last-child):after{width:2px;height:16px;right:auto;left:40px;top:100%;background:repeating-linear-gradient(180deg,var(--accent-ink) 0 4px,transparent 4px 8px);animation:none}}
@keyframes dash{to{background-position:24px 0}}
/* infographic: 24h timeline */
.day{list-style:none;margin:0;padding:0;display:grid;gap:0;position:relative}
.day:before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:2px;background:var(--line)}
.day li{position:relative;padding:0 0 32px 40px}
.day li:last-child{padding-bottom:0}
.day li:before{content:"";position:absolute;left:0;top:6px;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--accent-ink)}
.day li.night:before{background:var(--ink);border-color:var(--ink)}
.day time{display:block;font-weight:600;font-size:15px;color:var(--accent-ink)}
.day li.night time{color:var(--ink)}
.day b{display:block;font-weight:500}
.day span{color:var(--text-2);font-size:15px}
@media (min-width:1024px){
 .day{grid-template-columns:repeat(6,1fr);gap:24px}
 .day:before{left:0;right:0;top:7px;bottom:auto;width:auto;height:2px}
 .day li{padding:40px 0 0}
 .day li:before{top:0}
}
/* infographic: cost bars */
.bars{display:grid;gap:24px}
.bar-row .lbl{display:flex;justify-content:space-between;gap:16px;font-size:15px;margin-bottom:8px}
.bar-row .lbl b{font-weight:500}
.bar-row .lbl span{color:var(--text-2);text-align:right}
.track{height:16px;background:var(--soft-2);border-radius:999px;overflow:hidden}
.fill{height:100%;width:var(--w);background:var(--ink);border-radius:999px;transform-origin:left;transition:transform 1.2s var(--ease)}
.fill.g{background:var(--accent-ink)}
.js .bars:not(.in) .fill{transform:scaleX(0)}
/* dashboard mock */
.dash{background:#fff;border:1px solid var(--line);border-radius:24px;padding:24px;box-shadow:0 40px 80px -48px rgba(0,0,0,.3)}
.dash-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;font-size:15px}
.dash-top b{font-size:17px}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:24px}
.kpi{background:var(--soft);border-radius:12px;padding:16px}
.kpi b{display:block;font-size:28px;letter-spacing:-.02em;line-height:1.1}
.kpi span{font-size:13px;color:var(--text-2)}
.rows{display:grid;gap:8px;font-size:14px}
.rows div{display:flex;justify-content:space-between;gap:8px;padding:12px;border:1px solid var(--line);border-radius:12px}
.pill{font-size:12px;font-weight:500;padding:2px 8px;border-radius:999px;background:#e9fff2;color:var(--accent-ink);white-space:nowrap}
.pill.n{background:var(--soft);color:var(--text-2)}
/* pricing */
.plan{display:flex;flex-direction:column}
.plan.featured{border:2px solid var(--accent-ink)}
.plan .tag{align-self:flex-start;font-size:13px;font-weight:500;color:var(--ink);background:var(--accent);padding:4px 12px;border-radius:999px;margin-bottom:16px}
.tbc{display:inline-block;font-size:15px;color:#6b4e00;background:#fff6db;border:1px dashed #c9a227;border-radius:8px;padding:8px 16px;margin:8px 0 24px}
.plan .checks{margin-bottom:32px;flex:1}
table.cmp{width:100%;border-collapse:collapse;font-size:15px}
.cmp th,.cmp td{padding:16px;border-bottom:1px solid var(--line);text-align:left}
.cmp th{font-weight:500;color:var(--text-2)}
.cmp td:not(:first-child),.cmp th:not(:first-child){text-align:center}
.cmp .y{color:var(--accent-ink);font-weight:600}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
/* faq */
.faq{max-width:880px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:24px 40px 24px 0;font-size:19px;font-weight:500;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";position:absolute;right:0;top:20px;font-size:24px;color:var(--text-2)}
.faq details[open] summary:after{content:"\2212"}
.faq details p{color:var(--text-2);padding-bottom:24px;margin:0}
/* cta band */
.band{background:var(--dark);color:#fff;border-radius:24px;padding:56px 32px;text-align:center;position:relative;overflow:hidden}
.band:before{content:"";position:absolute;inset:auto -20% -60% -20%;height:80%;background:radial-gradient(closest-side,rgba(61,255,143,.22),transparent);pointer-events:none}
@media (min-width:768px){.band{padding:80px}}
.band .lead{margin:0 auto 32px;color:#acacac}
.band .ctas{justify-content:center;position:relative}
.band .btn--ghost{background:transparent;border-color:var(--dark-line);color:#fff}
/* prose */
.prose{max-width:760px}
.prose h2{font-size:28px;margin:48px 0 16px}
.prose p,.prose li{color:var(--text-2)}
/* footer */
.footer{background:var(--dark);color:#fff;padding:80px 0 40px;font-size:15px}
.footer .brand{color:#fff;--logo-x:#3dff8f}
.footer .brand svg{width:120px}
.f-grid{display:grid;gap:40px}
@media (min-width:768px){.f-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.footer h4{font-size:14px;font-weight:500;color:#acacac;margin:0 0 16px;text-transform:uppercase;letter-spacing:.06em}
.footer ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.footer a{text-decoration:none;color:#fff}
.footer a:hover{color:var(--accent)}
.footer .muted{color:#acacac}
.f-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;margin-top:64px;padding-top:24px;border-top:1px solid var(--dark-line);color:#acacac}
/* floating whatsapp */
.wa-float{position:fixed;right:16px;bottom:16px;z-index:40;width:56px;height:56px;border-radius:50%;background:var(--accent);color:var(--ink);display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.2)}
.wa-float svg{width:28px;height:28px}
/* scroll reveal */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.js .rv{opacity:1;transform:none}.js .bars .fill{transform:none}}
/* v4: fewer cards. Grid items are open columns with a top rule; only plans and the dashboard stay boxed */
.grid>.card:not(.plan){background:none;border:0;border-top:1px solid var(--line);border-radius:0;padding:24px 0 0;box-shadow:none}
.soft .grid>.card:not(.plan){border-top-color:#d6d6d6}
.grid>.card:not(.plan) .ic{width:40px;height:40px;margin-bottom:16px}
.grid>a.card:not(.plan):hover{transform:none;box-shadow:none;border-top-color:var(--accent-ink)}
.grid-4>.card,.grid-3>.card{padding-right:16px}
.steps .card:before{width:32px;height:32px;font-size:15px;margin-bottom:16px}
/* industry index */
.index{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.index a{display:grid;gap:4px 32px;padding:24px 0;border-bottom:1px solid var(--line);text-decoration:none;align-items:center;transition:padding .25s var(--ease),background .25s}
@media (min-width:1024px){.index a{grid-template-columns:240px 1fr 1.3fr 32px;padding:32px 0}}
.index a:hover{background:var(--soft);padding-left:16px;padding-right:16px}
.index .tag{font-size:14px;font-weight:500;color:var(--accent-ink)}
.index h3{margin:0;font-size:24px}
.index p{margin:0;color:var(--text-2)}
.index .arr{width:32px;height:32px;border-radius:50%;background:var(--accent);display:grid;place-items:center;font-size:16px;justify-self:start}
@media (min-width:1024px){.index .arr{justify-self:end}}
/* flow as stepper */
.flow .node{background:none;border:0;border-top:2px solid var(--line);border-radius:0;padding:24px 16px 0 0}
.flow .node.core{background:none;color:var(--ink);border-top-color:var(--accent-ink)}
.flow .node.core p,.flow .node.core ul{color:var(--text-2)}
.flow .node.core .n{color:var(--accent-ink)}
.flow .node:not(:last-child):after{display:none}
.js .flow.rv .node{border-top-color:var(--line);transition:border-color .4s}
.js .flow.rv.in .node{border-top-color:var(--accent-ink)}
.js .flow.rv.in .node:nth-child(2){transition-delay:.3s}.js .flow.rv.in .node:nth-child(3){transition-delay:.6s}.js .flow.rv.in .node:nth-child(4){transition-delay:.9s}
/* audit fixes: 44px targets, bigger footer tap areas, pausable marquee */
.menu-btn,.btn--sm{height:44px}
.footer ul a{display:inline-block;padding:4px 0}
.strip:hover ul{animation-play-state:paused}
/* pause control (added by site.js) */
.pause-btn{margin-left:auto;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);display:grid;place-items:center;cursor:pointer;flex:none}
.pause-btn:hover{background:var(--soft)}
.pause-btn svg{width:16px;height:16px;fill:currentColor}
.strip{position:relative}
.strip .pause-btn{position:absolute;right:var(--gutter);top:50%;transform:translateY(-50%);box-shadow:0 0 0 12px #fff}
.paused .strip ul,.paused .typing i{animation-play-state:paused}
/* v5: more visual, less text */
.tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:16px 0 32px}
.tags li{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 16px;font-size:15px;font-weight:500}
.soft .tags li{border-color:#d6d6d6}
/* key numbers */
.stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat-row{display:grid;grid-template-columns:repeat(2,1fr);margin:0}
@media (min-width:1024px){.stat-row{grid-template-columns:repeat(4,1fr)}}
.stat-row div{padding:32px 0 32px 24px;border-left:1px solid var(--line)}
.stat-row div:nth-child(odd){border-left:0;padding-left:0}
@media (min-width:1024px){.stat-row div:nth-child(odd){border-left:1px solid var(--line);padding-left:24px}.stat-row div:first-child{border-left:0;padding-left:0}}
@media (max-width:1023px){.stat-row div:nth-child(-n+2){border-bottom:1px solid var(--line)}}
.stat-row dt{font-size:14px;color:var(--text-2);margin-bottom:8px}
.stat-row dd{margin:0;font-size:clamp(28px,3.4vw,44px);font-weight:600;letter-spacing:-.03em;line-height:1}
/* hub infographic */
.hub{position:relative;width:min(560px,100%);aspect-ratio:1;margin:0 auto;container-type:inline-size}
.hub-ring{position:absolute;inset:11%;border:2px dashed #b9e8cb;border-radius:50%}
.hub-ring:after{content:"";position:absolute;inset:22%;border-radius:50%;background:radial-gradient(closest-side,#e9fff2,rgba(233,255,242,0))}
.hub-core{position:absolute;left:50%;top:50%;width:30%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:var(--ink);color:#fff;display:grid;place-content:center;text-align:center;box-shadow:0 0 0 12px rgba(61,255,143,.25)}
.hub-core b{font-size:clamp(24px,7cqw,40px);line-height:1;color:var(--accent)}
.hub-core span{font-size:15px}
.hub-item{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(var(--a)) translate(39cqw) rotate(calc(-1 * var(--a)))}
.hub-item span{display:flex;align-items:center;gap:8px;white-space:nowrap;background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-size:14px;font-weight:500;box-shadow:0 8px 20px -12px rgba(0,0,0,.25);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.hub-item svg{width:16px;height:16px;color:var(--accent-ink)}
.js .hub.rv{opacity:1;transform:none}
.js .hub.rv .hub-item span{opacity:0;transform:scale(.8)}
.js .hub.rv.in .hub-item span{opacity:1;transform:none}
.hub-item:nth-child(4) span{transition-delay:.05s}.hub-item:nth-child(5) span{transition-delay:.1s}.hub-item:nth-child(6) span{transition-delay:.15s}.hub-item:nth-child(7) span{transition-delay:.2s}.hub-item:nth-child(8) span{transition-delay:.25s}.hub-item:nth-child(9) span{transition-delay:.3s}.hub-item:nth-child(10) span{transition-delay:.35s}.hub-item:nth-child(11) span{transition-delay:.4s}.hub-item:nth-child(12) span{transition-delay:.45s}
@media (max-width:639px){
 .hub{aspect-ratio:auto;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
 .hub-ring{display:none}
 .hub-core{position:static;transform:none;width:120px;margin:0 calc(50% - 60px) 16px;box-shadow:0 0 0 8px rgba(61,255,143,.25)}
 .hub-item{position:static;transform:none}
}
/* floating chips around the hero phone */
.hero-visual{position:relative}
.chips{display:none}
@media (min-width:1024px){
 .chips{display:block}
 .chip{position:absolute;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 16px;font-size:14px;font-weight:500;box-shadow:0 16px 32px -16px rgba(0,0,0,.25);animation:float 6s ease-in-out infinite}
 .chip svg{width:18px;height:18px;color:var(--accent-ink)}
 .c1{left:-24px;top:18%}.c2{right:-24px;top:46%;animation-delay:-2s}.c3{left:-8px;bottom:14%;animation-delay:-4s}
}
@keyframes float{50%{transform:translateY(-10px)}}
.paused .chip{animation-play-state:paused}
/* quote */
.quote blockquote{margin:0;font-size:clamp(28px,4vw,48px);font-weight:600;letter-spacing:-.03em;line-height:1.15;max-width:1000px}
/* infographic palette (visuals only; buttons stay brand green). Ink shades on white: blue #1d4ed8 6.7 · violet #6d28d9 7.1 · amber #b45309 5.0 · rose #be123c 6.2 · green #0a7a45 5.6 */
:root{--blue:#1d4ed8;--blue-t:#e8efff;--violet:#6d28d9;--violet-t:#f1eafe;--amber:#b45309;--amber-t:#fff3e0;--rose:#be123c;--rose-t:#ffe9ee;--green:#0a7a45;--green-t:#e9fff2}
.c-blue{--c:var(--blue);--t:var(--blue-t)}.c-violet{--c:var(--violet);--t:var(--violet-t)}.c-amber{--c:var(--amber);--t:var(--amber-t)}.c-rose{--c:var(--rose);--t:var(--rose-t)}.c-green{--c:var(--green);--t:var(--green-t)}
/* hub: colour by group */
.hub-item span{border-color:transparent;background:var(--t,#fff);color:var(--ink)}
.hub-item svg{color:var(--c,var(--accent-ink))}
.hub-item:nth-child(3),.hub-item:nth-child(4),.hub-item:nth-child(5){--c:var(--blue);--t:var(--blue-t)}
.hub-item:nth-child(6){--c:var(--violet);--t:var(--violet-t)}
.hub-item:nth-child(7),.hub-item:nth-child(8){--c:var(--amber);--t:var(--amber-t)}
.hub-item:nth-child(9),.hub-item:nth-child(10){--c:var(--green);--t:var(--green-t)}
.hub-item:nth-child(11),.hub-item:nth-child(12){--c:var(--rose);--t:var(--rose-t)}
.hub-legend{display:flex;flex-wrap:wrap;gap:8px 20px;list-style:none;padding:0;margin:24px 0 0;font-size:14px;color:var(--text-2)}
.hub-legend li:before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--c);margin-right:8px}
/* flow: one colour per step */
.flow .node:nth-child(1){--c:var(--blue)}.flow .node:nth-child(2){--c:var(--violet)}.flow .node:nth-child(3){--c:var(--amber)}.flow .node:nth-child(4){--c:var(--green)}
.flow .node .n{color:var(--c)!important;font-size:28px;letter-spacing:-.02em}
.js .flow.rv.in .node,.flow .node{border-top:4px solid var(--c)}
.js .flow.rv:not(.in) .node{border-top-color:var(--line)}
/* timeline: night vs day */
.day li:before{border-color:var(--amber)}
.day li time{color:var(--amber)}
.day li.night:before{background:var(--blue);border-color:var(--blue)}
.day li.night time{color:var(--blue)}
/* cost bars: staff in rose, agent in green */
.fill{background:var(--rose)}
.fill.g{background:var(--green)}
/* control + industry icons rotate colours */
.grid-4>.card:nth-child(4n+1) .ic{background:var(--blue-t);color:var(--blue)}
.grid-4>.card:nth-child(4n+2) .ic{background:var(--amber-t);color:var(--amber)}
.grid-4>.card:nth-child(4n+3) .ic{background:var(--violet-t);color:var(--violet)}
.grid-4>.card:nth-child(4n+4) .ic{background:var(--rose-t);color:var(--rose)}
.grid-4>.card:nth-child(4n+1){border-top-color:var(--blue)!important}.grid-4>.card:nth-child(4n+2){border-top-color:var(--amber)!important}.grid-4>.card:nth-child(4n+3){border-top-color:var(--violet)!important}.grid-4>.card:nth-child(4n+4){border-top-color:var(--rose)!important}
/* steps numbers */
.steps .card:nth-child(1):before{background:var(--blue-t);color:var(--blue)}.steps .card:nth-child(2):before{background:var(--amber-t);color:var(--amber)}.steps .card:nth-child(3):before{background:var(--green-t);color:var(--green)}
/* chips */
.c1 svg{color:var(--blue)}.c2 svg{color:var(--amber)}.c3 svg{color:var(--violet)}
/* industry index tags */
.index li:nth-child(6n+1) .tag{color:var(--blue)}.index li:nth-child(6n+2) .tag{color:var(--amber)}.index li:nth-child(6n+3) .tag{color:var(--rose)}.index li:nth-child(6n+4) .tag{color:var(--violet)}.index li:nth-child(6n+5) .tag{color:var(--green)}
/* stats accent bars */
.stat-row div{position:relative}
.stat-row div:before{content:"";display:block;width:24px;height:4px;border-radius:2px;margin-bottom:16px;background:var(--blue)}
.stat-row div:nth-child(2):before{background:var(--amber)}.stat-row div:nth-child(3):before{background:var(--violet)}.stat-row div:nth-child(4):before{background:var(--green)}
.split.wide-only{grid-template-columns:1fr}
@media (min-width:1280px){.split.wide-only{grid-template-columns:1fr 1fr}}
.hub-item span{font-size:13px;padding:6px 12px}
/* v6: SaaS layout (announcement bar, floating header, centred hero, tabbed product showcase, bento, dark box, green band) */
.announce{background:var(--ink);color:#fff;text-align:center;font-size:14px;padding:10px var(--gutter)}
.announce a{color:var(--accent);font-weight:500;text-decoration:none;white-space:nowrap}
.announce a:hover{text-decoration:underline}
.site-header{top:12px;margin:12px var(--gutter) 0;border:1px solid var(--line);border-radius:20px;box-shadow:0 12px 32px -20px rgba(0,0,0,.25)}
.site-header .wrap{padding:0 16px 0 24px}
.bar{height:64px}
.nav{gap:24px}
@media (max-width:1023px){.nav{top:72px;border:1px solid var(--line);border-radius:20px;box-shadow:0 12px 32px -20px rgba(0,0,0,.25)}}
.nav .btn--ghost{color:var(--ink)}
.hero-c{text-align:center;padding:64px 0 96px;background:radial-gradient(900px 480px at 50% 0%,#e9fff2 0,rgba(233,255,242,0) 70%),radial-gradient(700px 400px at 90% 30%,var(--blue-t) 0,rgba(232,239,255,0) 70%),radial-gradient(700px 400px at 10% 40%,var(--violet-t) 0,rgba(241,234,254,0) 70%)}
.hero-c h1{max-width:960px;margin:24px auto}
.hero-c .lead{margin:0 auto 32px}
.hero-c .ctas,.hero-c .trust{justify-content:center}
.badge{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 16px 6px 8px;font-size:14px;font-weight:500}
.badge svg{width:24px;height:24px;padding:4px;border-radius:50%;background:var(--accent);color:var(--ink)}
.showcase{margin-top:64px;text-align:left}
.tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:24px}
.tabs button{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:#fff;font:500 15px var(--f);color:var(--text-2);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.tabs button svg{width:18px;height:18px}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.tabs button[aria-selected=true] svg{color:var(--accent)}
.stage{background:linear-gradient(135deg,#d9ffe9 0%,var(--blue-t) 50%,var(--violet-t) 100%);border-radius:32px;padding:16px}
@media (min-width:768px){.stage{padding:32px}}
@media (min-width:1024px){.stage{padding:48px}}
.inbox{display:grid;background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 40px 80px -40px rgba(17,17,17,.35);max-width:1200px;margin:0 auto}
.inbox[hidden]{display:none}
@media (min-width:768px){.inbox{grid-template-columns:260px 1fr}}
@media (min-width:1200px){.inbox{grid-template-columns:280px 1fr 260px}}
.ib-list,.ib-card{display:none}
@media (min-width:768px){.ib-list{display:block;border-right:1px solid var(--line);padding:16px 8px}}
@media (min-width:1200px){.ib-card{display:block;border-left:1px solid var(--line);padding:24px}}
.ib-head{display:flex;justify-content:space-between;font-weight:600;padding:8px 12px 16px}
.ib-head span{background:var(--accent);border-radius:999px;font-size:12px;padding:2px 8px}
.ib-row{display:grid;grid-template-columns:36px 1fr auto;gap:2px 10px;align-items:center;padding:10px 12px;border-radius:12px;font-size:14px}
.ib-row.on{background:var(--soft)}
.ib-row i,.mini-list i{font-style:normal;width:36px;height:36px;border-radius:50%;background:var(--blue-t);color:var(--blue);display:grid;place-items:center;font-weight:600;grid-row:span 2}
.ib-row:nth-child(3) i{background:var(--amber-t);color:var(--amber)}.ib-row:nth-child(4) i{background:var(--violet-t);color:var(--violet)}.ib-row:nth-child(5) i{background:var(--rose-t);color:var(--rose)}.ib-row:nth-child(6) i{background:var(--green-t);color:var(--green)}
.ib-row b{font-weight:600}
.ib-row div span{display:block;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.ib-row em{font-style:normal;font-size:12px;color:var(--text-2)}
.ib-row small,.mini-list small{font-size:12px;font-weight:500;color:var(--green);background:var(--green-t);border-radius:999px;padding:2px 8px;justify-self:end}
.ib-row small.web,.mini-list small.web{color:var(--blue);background:var(--blue-t)}
.ib-chat .phone-top{padding:16px 20px}
.ib-chat .chat{border-radius:0;height:420px;padding:16px 20px}
.ib-card{font-size:14px;text-align:center}
.ib-av{width:64px;height:64px;border-radius:50%;background:var(--violet-t);color:var(--violet);display:grid;place-items:center;font-size:24px;font-weight:600;margin:8px auto 12px}
.ib-card>b{display:block;font-size:17px}
.ib-card dl{text-align:left;margin:24px 0 0;display:grid;gap:4px}
.ib-card dt{font-size:12px;color:var(--text-2);margin-top:12px}
.ib-card dd{margin:0}
.showcase .note{text-align:center;margin-top:16px}
.built{padding:40px 0;border-bottom:1px solid var(--line)}
.built p{text-align:center;color:var(--text-2);font-size:15px;margin-bottom:24px}
.built ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;justify-content:center;gap:12px 40px}
.built a{display:flex;align-items:center;gap:8px;text-decoration:none;font-weight:600;font-size:17px;color:var(--ink);min-height:44px}
.built a svg{width:22px;height:22px;color:var(--accent-ink)}
.built a:hover{color:var(--accent-ink)}
.bento{display:grid;gap:24px}
@media (min-width:1024px){.bento{grid-template-columns:repeat(3,1fr)}.p-wide{grid-column:span 2}}
.panel{background:var(--soft);border-radius:28px;padding:32px;display:flex;flex-direction:column;gap:32px;min-height:320px;overflow:hidden}
@media (min-width:1024px){.panel{padding:40px}}
.panel h3{font-size:26px;letter-spacing:-.02em}
.panel p{color:var(--text-2);margin:0;max-width:440px}
.p-dark{background:var(--ink);color:#fff}
.p-dark p{color:#acacac}
.p-dark .big{font-size:clamp(64px,8vw,112px);font-weight:600;letter-spacing:-.05em;line-height:1;color:var(--accent);margin-top:auto}
.langs{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0}
.langs li{border:1px solid var(--dark-line);border-radius:999px;padding:6px 14px;font-size:14px}
.p-amber{background:var(--amber-t)}
.p-green{background:#e2fbe9}
.mini-list{display:grid;gap:8px;margin-top:auto}
.mini-list div{display:grid;grid-template-columns:36px auto 1fr auto;gap:12px;align-items:center;background:#fff;border-radius:16px;padding:12px 16px;font-size:14px;box-shadow:0 8px 20px -16px rgba(0,0,0,.3)}
.mini-list i{grid-row:auto}
.mini-list span{color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-cal{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:auto}
.mini-cal div{display:grid;gap:6px}
.mini-cal b{font-size:13px;color:var(--text-2);font-weight:500}
.mini-cal i{height:28px;border-radius:8px;background:#fff}
.mini-cal i.s{background:#f5c58a}
.mini-cal i.g{background:var(--accent)}
.mini-alerts{display:grid;gap:8px;margin-top:auto;max-width:420px;font-size:14px}
.mini-alerts div{background:#fff;border-radius:14px;border-top-left-radius:4px;padding:10px 14px;box-shadow:0 8px 20px -16px rgba(0,0,0,.3)}
.mini-alerts small{display:block;font-size:12px;color:var(--text-2);font-weight:500}
.mini-alerts .me{background:#c9f5d6;justify-self:end;border-radius:14px;border-top-right-radius:4px}
@media (min-width:1024px){.p-wide{flex-direction:row;align-items:flex-end}.p-wide .p-text{flex:1;align-self:flex-start}.p-wide .mini-list,.p-wide .mini-alerts{flex:1;margin-top:0}}
.dark-box{background:var(--ink);color:#fff;border-radius:32px;padding:48px 24px}
@media (min-width:1024px){.dark-box{padding:80px}}
.dark-box .lead{color:#acacac}
.dark-box .eyebrow{color:var(--accent)}
.dark-box .g{color:var(--accent)}
.dark-box .track{background:#2d2d2d}
.dark-box .fill{background:#ff6b86}
.dark-box .fill.g{background:var(--accent)}
.dark-box .bar-row .lbl span,.dark-box .muted{color:#acacac}
.dark-box .tbc{color:#ffe08a;background:transparent;border-color:#8a7330}
.safe{list-style:none;padding:32px 0 0;margin:56px 0 0;border-top:1px solid var(--dark-line);display:grid;gap:16px}
@media (min-width:768px){.safe{grid-template-columns:repeat(4,1fr)}}
.safe li{display:flex;align-items:center;gap:8px;color:#acacac}
.safe b{color:#fff;font-weight:500}
.safe svg{width:20px;height:20px;color:var(--accent);flex:none}
.band-green{background:var(--accent);color:var(--ink);border-radius:32px;padding:56px 24px;text-align:center;background-image:radial-gradient(600px 300px at 80% 120%,#b6ffd4,transparent),radial-gradient(500px 260px at 0% -20%,#d8ffe7,transparent)}
@media (min-width:768px){.band-green{padding:80px}}
.band-green p{font-size:19px;margin:0 auto 32px;max-width:560px}
.band-green .ctas{justify-content:center}
.band-green .btn--wa{background:var(--ink);color:#fff}
.band-green .btn--wa:hover{background:#262626}
.band-green .btn--ghost{background:transparent;border-color:var(--ink)}
.band-green .btn--ghost:hover{background:rgba(17,17,17,.06)}
.split .faq{max-width:none}
.price{display:flex;align-items:baseline;gap:6px;margin:16px 0 24px}
.price b{font-size:40px;font-weight:600;letter-spacing:-.03em;line-height:1}
.price span{color:var(--text-2);font-size:15px}
/* v7 hero polish */
.hero-c{position:relative;overflow:hidden}
.hero-c:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(10,10,10,.09) 1px,transparent 1px);background-size:24px 24px;-webkit-mask-image:radial-gradient(ellipse 70% 55% at 50% 30%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse 70% 55% at 50% 30%,#000 30%,transparent 75%);pointer-events:none}
.hero-c .wrap{position:relative}
.hero-c h1{font-size:clamp(40px,6.4vw,84px);letter-spacing:-.04em;line-height:1.02;max-width:1040px}
.hero-c .hl{-webkit-box-decoration-break:clone;box-decoration-break:clone;border-radius:8px;background:linear-gradient(transparent 58%,var(--accent) 58%)}
.hero-c .lead{max-width:640px;font-size:clamp(18px,1.6vw,20px)}
.hero-c .badge{box-shadow:0 8px 24px -12px rgba(0,0,0,.2)}
.showcase{position:relative}
.showcase .stage{box-shadow:0 48px 96px -48px rgba(16,24,40,.35)}
@media (min-width:1280px){
 .showcase .c1{left:-40px;top:160px;z-index:2}
 .showcase .c2{right:-40px;top:300px;z-index:2}
 .showcase .c3{left:-24px;bottom:120px;top:auto;z-index:2}
}
@media (max-width:1279px){.showcase .chips{display:none}}
.hero-c .hl{white-space:nowrap}
.announce{position:relative;padding-right:56px}
.ann-x{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;background:none;color:#fff;font-size:22px;line-height:1;cursor:pointer;border-radius:8px}
.ann-x:hover{background:rgba(255,255,255,.12)}
.ann-x:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}
/* v8 connections hub */
.split-head{display:grid;gap:16px;align-items:end;margin-bottom:56px}
@media (min-width:1024px){.split-head{grid-template-columns:1.2fr 1fr;gap:80px}}
.split-head .lead{margin:0}
.hub2{position:relative;display:grid;gap:24px;justify-items:center}
.hub2-lines{display:none}
.hub2-col{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.hub2-col li{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 16px;font-size:15px;font-weight:500;color:var(--text);transition:border-color .3s,box-shadow .3s,background .3s}
.hub2-col li svg{width:20px;height:20px;flex:none;color:var(--accent-ink)}
.hub2-core{order:-1;width:120px;height:120px;border-radius:50%;background:var(--accent);color:var(--ink);display:grid;place-items:center;align-content:center;gap:4px;font-size:13px;font-weight:600;box-shadow:0 0 0 12px rgba(61,255,143,.15),0 24px 48px -16px rgba(10,122,69,.45)}
.hub2-core svg{width:40px;height:40px}
@media (min-width:1024px){
 .hub2{grid-template-columns:26% 1fr 26%;height:400px;align-items:stretch;justify-items:stretch;gap:0}
 .hub2-lines{display:block;position:absolute;inset:0;width:100%;height:100%;fill:none}
 .hub2-lines path{stroke:#d9dee7;stroke-width:2;vector-effect:non-scaling-stroke;transition:stroke .3s}
 .hub2-col{flex-direction:column;flex-wrap:nowrap;justify-content:space-between;gap:0;position:relative}
 .hub2-col li{height:56px;margin:12px 0}
 .hub2-col.r li{justify-content:flex-end}
 .hub2-core{order:0;align-self:center;justify-self:center;position:relative;width:100px;height:100px}
}
.hub2.anim li{color:var(--text-2)}
.hub2.anim li.on{color:var(--text);border-color:var(--accent-ink);background:#f2fff7;box-shadow:0 12px 24px -12px rgba(10,122,69,.35)}
.hub2.anim path.on{stroke:var(--accent-ink);stroke-dasharray:8 10;animation:flow 1s linear infinite}
@keyframes flow{to{stroke-dashoffset:-36}}
.paused .hub2 path.on{animation-play-state:paused}
/* agent chat bubble sits bottom right; WhatsApp button bottom left (Saqib, 2026-11-07) */
.wa-float{left:16px;right:auto}
@media (min-width:768px){.wa-float{left:24px;bottom:24px}}