/* ===== HOME (premium) ===== */
#op-nav > .op-container-wide{transition:height .35s var(--ease)}
#op-nav.scrolled > .op-container-wide{height:60px}
#op-nav.scrolled .op-logo svg{transform:scale(.92)}
.h-main{overflow:clip}
.h-sec{position:relative;padding:110px 0}
.h-sec.t{padding:72px 0}
@media(max-width:680px){.h-sec{padding:72px 0}}
.h-kicker{display:inline-flex;align-items:center;gap:8px;font-family:'Plus Jakarta Sans',sans-serif;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);border:1px solid rgba(0,196,160,.22);border-radius:100px;padding:6px 14px;white-space:nowrap}
.h-kicker i{width:6px;height:6px;border-radius:50%;background:var(--teal);animation:hPulse 2s infinite}
.h-h2{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:clamp(30px,4.2vw,52px);line-height:1.05;letter-spacing:-.03em}
.h-sub{color:var(--slate);font-size:clamp(15px,1.5vw,18px);line-height:1.7;max-width:680px}
.h-center{text-align:center;max-width:760px;margin:0 auto 60px}
.h-center .h-kicker{margin-bottom:20px}.h-center .h-sub{margin:18px auto 0}
.h-grad{background:linear-gradient(100deg,#6f9bff,#00C4A0);-webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes hPulse{0%,100%{opacity:1}50%{opacity:.35}}

/* HERO */
.h-hero{position:relative;padding:72px 0 90px;overflow:hidden}
.h-hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:54px 54px;mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000 30%,transparent 75%);animation:hGrid 22s linear infinite}
@keyframes hGrid{to{background-position:54px 54px}}
.h-blob{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none}
.h-blob.b1{width:520px;height:520px;background:rgba(36,82,217,.22);top:-160px;left:-120px;animation:hFloat 16s ease-in-out infinite}
.h-blob.b2{width:440px;height:440px;background:rgba(0,196,160,.13);bottom:-160px;right:-100px;animation:hFloat 19s ease-in-out infinite reverse}
@keyframes hFloat{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,-30px)}}
#h-particles{position:absolute;inset:0;pointer-events:none}
.h-hero-row{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.h-badge{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--border);background:rgba(255,255,255,.03);border-radius:100px;padding:8px 16px;font-family:'Plus Jakarta Sans',sans-serif;font-size:12px;font-weight:600;color:var(--off-white);backdrop-filter:blur(6px)}
.h-badge .d{width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 10px var(--teal);animation:hPulse 2s infinite}
.h-hero h1{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:clamp(42px,5.6vw,74px);line-height:1.02;letter-spacing:-.035em;margin:22px 0 0}
.h-hero p.lead{color:var(--slate);font-size:clamp(15px,1.5vw,18px);line-height:1.7;max-width:540px;margin-top:22px}
.h-cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.h-trustline{display:flex;align-items:center;gap:10px;margin-top:26px;font-size:13px;color:var(--slate)}
.h-trustline .av{display:flex}
.h-trustline .av span{width:26px;height:26px;border-radius:50%;border:2px solid #000;background:linear-gradient(140deg,#2452D9,#00C4A0);margin-left:-8px}
.h-trustline .av span:first-child{margin-left:0}
.h-btn{display:inline-flex;align-items:center;gap:9px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:14.5px;padding:14px 26px;border-radius:11px;text-decoration:none;cursor:pointer;transition:transform .2s var(--ease),box-shadow .3s,background .2s,border-color .2s;border:1px solid transparent}
.h-btn.pri{background:var(--blue);color:#fff;box-shadow:0 12px 34px rgba(36,82,217,.38)}
.h-btn.pri:hover{transform:translateY(-2px);background:var(--blue-light);box-shadow:0 18px 46px rgba(36,82,217,.5)}
.h-btn.ghost{background:rgba(255,255,255,.02);color:#fff;border-color:var(--border-hover)}
.h-btn.ghost:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.42)}

/* HERO living diagram */
.h-os{position:relative;border:1px solid var(--border);border-radius:22px;padding:26px;background:linear-gradient(165deg,rgba(12,15,28,.9),rgba(6,7,13,.9));box-shadow:0 40px 100px rgba(0,0,0,.55);will-change:transform}
.h-os-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.h-os-head .t{font-family:'Plus Jakarta Sans';font-weight:700;font-size:12px;color:#fff;letter-spacing:.02em}
.h-os-head .live{display:flex;align-items:center;gap:6px;font-family:'Plus Jakarta Sans';font-weight:600;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--teal)}
.h-os-head .live i{width:6px;height:6px;border-radius:50%;background:var(--teal);animation:hPulse 1.6s infinite}
.h-os-flow{position:relative;padding-left:8px}
.h-os-line{position:absolute;left:30px;top:34px;bottom:34px;width:2px;background:linear-gradient(180deg,rgba(36,82,217,.15),rgba(0,196,160,.35),rgba(36,82,217,.15))}
.h-os-pulse{position:absolute;left:26px;width:10px;height:10px;border-radius:50%;background:var(--teal);box-shadow:0 0 14px 3px rgba(0,196,160,.7);animation:hTravel 5.6s linear infinite}
@keyframes hTravel{0%{top:30px;opacity:0}8%{opacity:1}92%{opacity:1}100%{top:calc(100% - 36px);opacity:0}}
.h-node{position:relative;display:flex;align-items:center;gap:13px;padding:9px 0}
.h-node .ix{width:44px;height:44px;flex-shrink:0;border-radius:13px;border:1px solid var(--border);background:#0a0d18;display:flex;align-items:center;justify-content:center;z-index:1;transition:.3s}
.h-node .nm{font-family:'Plus Jakarta Sans';font-weight:700;font-size:14px;color:#fff}
.h-node .sb{font-size:11.5px;color:var(--slate);margin-top:1px}
.h-node.glow .ix{border-color:rgba(0,196,160,.6);box-shadow:0 0 22px rgba(0,196,160,.28);transform:scale(1.06)}
@media(max-width:920px){.h-hero-row{grid-template-columns:1fr;gap:40px}.h-hero p.lead{max-width:none}}

/* MARQUEE */
.h-marquee{border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:22px 0;overflow:hidden;position:relative}
.h-marquee::before,.h-marquee::after{content:"";position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none}
.h-marquee::before{left:0;background:linear-gradient(90deg,#000,transparent)}
.h-marquee::after{right:0;background:linear-gradient(270deg,#000,transparent)}
.h-mq-label{text-align:center;font-family:'Plus Jakarta Sans';font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);margin-bottom:18px}
.h-mq-track{display:flex;gap:0;width:max-content;animation:hMarq 30s linear infinite}
.h-mq-item{display:flex;align-items:center;gap:10px;padding:0 34px;font-family:'Plus Jakarta Sans';font-weight:700;font-size:17px;color:var(--off-white);white-space:nowrap}
.h-mq-item .dot{width:7px;height:7px;border-radius:50%;background:var(--teal);opacity:.7}
@keyframes hMarq{to{transform:translateX(-50%)}}

/* PROBLEM compare */
.h-vs{display:grid;grid-template-columns:1fr auto 1fr;gap:26px;align-items:stretch;max-width:1000px;margin:0 auto}
.h-vs-col{border:1px solid var(--border);border-radius:18px;padding:30px}
.h-vs-col.old{background:rgba(255,255,255,.012)}
.h-vs-col.new{background:linear-gradient(165deg,rgba(36,82,217,.14),rgba(0,196,160,.05));border-color:rgba(0,196,160,.25)}
.h-vs-tag{font-family:'Plus Jakarta Sans';font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:18px}
.h-vs-col.old .h-vs-tag{color:var(--slate)}.h-vs-col.new .h-vs-tag{color:var(--teal)}
.h-vs-step{display:flex;align-items:center;gap:12px;padding:11px 0;font-size:14.5px;color:var(--off-white);border-bottom:1px solid var(--border)}
.h-vs-step:last-child{border-bottom:none}
.h-vs-step .ci{width:22px;height:22px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center}
.h-vs-col.old .ci{background:rgba(255,255,255,.05)}.h-vs-col.new .ci{background:rgba(0,196,160,.12)}
.h-vs-mid{display:flex;align-items:center;justify-content:center;font-family:'Plus Jakarta Sans';font-weight:800;font-size:13px;color:var(--slate)}
.h-vs-mid span{border:1px solid var(--border);border-radius:50%;width:46px;height:46px;display:flex;align-items:center;justify-content:center;background:#000}
@media(max-width:820px){.h-vs{grid-template-columns:1fr;gap:16px}.h-vs-mid span{margin:0 auto}}

/* GOS board */
.h-gos{display:grid;grid-template-columns:1fr 300px 1fr;gap:30px;align-items:center;max-width:1040px;margin:0 auto}
.h-gos-col{display:flex;flex-direction:column;gap:14px}
.h-gos-chip{display:flex;align-items:center;gap:13px;width:100%;text-align:left;padding:15px 16px;border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,.015);color:#fff;cursor:pointer;transition:.28s var(--ease);font-family:inherit}
.h-gos-chip .gi{width:38px;height:38px;flex-shrink:0;border-radius:10px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;background:rgba(36,82,217,.1);transition:.28s}
.h-gos-chip .gn{font-family:'Plus Jakarta Sans';font-weight:700;font-size:13.5px}
.h-gos-chip:hover,.h-gos-chip.active{border-color:rgba(0,196,160,.5);background:rgba(0,196,160,.06)}
.h-gos-col.r .h-gos-chip{flex-direction:row-reverse;text-align:right}
.h-gos-chip.active .gi{border-color:var(--teal);box-shadow:0 0 18px rgba(0,196,160,.3)}
.h-gos-core{position:relative;height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.h-gos-ring{position:absolute;border-radius:50%;border:1px solid rgba(0,196,160,.18)}
.h-gos-ring.r1{width:150px;height:150px;animation:hSpin 14s linear infinite}
.h-gos-ring.r2{width:215px;height:215px;border-color:rgba(36,82,217,.18);animation:hSpin 22s linear infinite reverse}
.h-gos-ring.r3{width:280px;height:280px;border-style:dashed;border-color:rgba(255,255,255,.06)}
@keyframes hSpin{to{transform:rotate(360deg)}}
.h-gos-emblem{width:120px;height:120px;border-radius:50%;background:radial-gradient(circle at 40% 35%,rgba(36,82,217,.5),rgba(0,196,160,.12));border:1px solid rgba(0,196,160,.4);display:flex;align-items:center;justify-content:center;box-shadow:0 0 50px rgba(36,82,217,.35);position:relative;z-index:1}
.h-gos-name{font-family:'Plus Jakarta Sans';font-weight:800;font-size:16px;color:#fff;margin-top:18px;position:relative;z-index:1}
.h-gos-desc{font-size:12.5px;color:var(--slate);max-width:240px;margin:8px auto 0;line-height:1.55;position:relative;z-index:1;min-height:54px}
@media(max-width:860px){.h-gos{grid-template-columns:1fr 1fr;gap:14px}.h-gos-core{grid-column:1/-1;order:-1;height:240px}.h-gos-col.r .h-gos-chip{flex-direction:row;text-align:left}}

/* WORKFORCE */
.h-wf-bar{display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(0,196,160,.25);border-radius:100px;padding:9px 18px;font-family:'Plus Jakarta Sans';font-weight:600;font-size:13px;color:#fff;margin-bottom:18px}
.h-wf-bar i{width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 10px var(--teal);animation:hPulse 1.6s infinite}
.h-wf-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.h-emp{border:1px solid var(--border);border-radius:16px;padding:22px;background:rgba(255,255,255,.012);transition:transform .4s var(--ease),border-color .3s,background .3s;position:relative;overflow:hidden}
.h-emp:hover{transform:translateY(-5px);border-color:rgba(0,196,160,.4);background:rgba(0,196,160,.04)}
.h-emp::after{content:"";position:absolute;inset:0;background:radial-gradient(120px 80px at 80% 0%,rgba(0,196,160,.1),transparent);opacity:0;transition:.4s}
.h-emp:hover::after{opacity:1}
.h-emp-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.h-emp-ix{width:42px;height:42px;border-radius:11px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;background:linear-gradient(150deg,rgba(36,82,217,.16),rgba(0,196,160,.05))}
.h-emp-st{display:inline-flex;align-items:center;gap:6px;font-family:'Plus Jakarta Sans';font-weight:600;font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal)}
.h-emp-st i{width:6px;height:6px;border-radius:50%;background:var(--teal);animation:hPulse 1.8s infinite}
.h-emp h3{font-family:'Plus Jakarta Sans';font-weight:700;font-size:14.5px;color:#fff;margin-bottom:7px}
.h-emp p{font-size:12.5px;color:var(--slate);line-height:1.6}
@media(max-width:980px){.h-wf-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.h-wf-grid{grid-template-columns:1fr}}

/* ENGINE pipeline */
.h-pipe{position:relative;border:1px solid var(--border);border-radius:18px;padding:40px 30px;background:rgba(255,255,255,.012);overflow:hidden}
.h-pipe-track{display:flex;flex-wrap:wrap;gap:10px 0;align-items:center;justify-content:center;position:relative;z-index:1}
.h-stage{display:flex;align-items:center;gap:10px}
.h-stage .pill{display:flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:100px;padding:9px 15px;background:#06070d;font-family:'Plus Jakarta Sans';font-weight:600;font-size:12.5px;color:var(--off-white);white-space:nowrap;transition:.3s}
.h-stage .pill b{font-size:9px;color:var(--teal);font-weight:800}
.h-stage:hover .pill{border-color:rgba(0,196,160,.5);color:#fff}
.h-stage .arr{width:26px;height:1.5px;background:linear-gradient(90deg,rgba(0,196,160,.5),rgba(0,196,160,.1));position:relative;flex-shrink:0}
.h-stage .arr::after{content:"";position:absolute;right:0;top:-2.5px;border-left:5px solid rgba(0,196,160,.5);border-top:3px solid transparent;border-bottom:3px solid transparent}
.h-stage.last .arr{display:none}
.h-pipe-sweep{position:absolute;top:0;bottom:0;width:200px;background:linear-gradient(90deg,transparent,rgba(0,196,160,.06),transparent);animation:hSweep 4.5s linear infinite}
@keyframes hSweep{0%{left:-200px}100%{left:100%}}

/* INDUSTRIES preview */
.h-ind-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.h-ind{display:block;text-decoration:none;border:1px solid var(--border);border-radius:16px;padding:24px;background:rgba(255,255,255,.012);transition:transform .4s var(--ease),border-color .3s,background .3s}
.h-ind:hover{transform:translateY(-5px);border-color:var(--border-hover);background:rgba(255,255,255,.03)}
.h-ind .ix{width:44px;height:44px;border-radius:12px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;margin-bottom:16px;background:linear-gradient(150deg,rgba(36,82,217,.14),rgba(0,196,160,.04));transition:.4s}
.h-ind:hover .ix{transform:scale(1.08) rotate(-5deg)}
.h-ind .nm{font-family:'Plus Jakarta Sans';font-weight:700;font-size:14.5px;color:#fff}
.h-ind .go{font-size:12px;color:var(--slate);margin-top:6px;display:flex;align-items:center;gap:5px}
@media(max-width:900px){.h-ind-grid{grid-template-columns:repeat(2,1fr)}}

/* WHY compare cards */
.h-why{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:980px;margin:0 auto}
.h-why-card{border:1px solid var(--border);border-radius:20px;padding:34px}
.h-why-card.new{background:linear-gradient(165deg,rgba(36,82,217,.14),rgba(0,196,160,.05));border-color:rgba(0,196,160,.25)}
.h-why-card h3{font-family:'Plus Jakarta Sans';font-weight:800;font-size:20px;color:#fff;margin-bottom:6px}
.h-why-card .cap{font-size:12px;color:var(--slate);margin-bottom:22px}
.h-why-card.new .cap{color:var(--teal)}
.h-why-list{list-style:none;display:flex;flex-direction:column;gap:14px}
.h-why-list li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;line-height:1.5;color:var(--off-white)}
.h-why-list .ci{width:22px;height:22px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:1px}
.h-why-card.old .ci{background:rgba(255,255,255,.05)}.h-why-card.new .ci{background:rgba(0,196,160,.12)}
@media(max-width:760px){.h-why{grid-template-columns:1fr}}

/* FINAL CTA */
.h-final{position:relative;border:1px solid var(--border);border-radius:26px;overflow:hidden;padding:60px 52px;background:radial-gradient(120% 150% at 50% 0%,rgba(36,82,217,.22),transparent 58%),var(--card)}
.h-final-grid{position:relative;display:grid;grid-template-columns:1.3fr .7fr;gap:48px;align-items:center;z-index:1}
.h-offer{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;margin:28px 0 30px}
.h-offer li{display:flex;gap:11px;align-items:center;font-size:14px;color:var(--off-white)}
.h-offer .ci{width:22px;height:22px;flex-shrink:0;border-radius:50%;background:rgba(0,196,160,.12);display:flex;align-items:center;justify-content:center}
.h-final-contacts{display:flex;flex-wrap:wrap;gap:8px 28px;font-size:13.5px}
.h-final-contacts a{color:var(--off-white);text-decoration:none;font-family:'Plus Jakarta Sans';font-weight:600}
.h-final-contacts a:hover{color:var(--teal)}
.h-final-contacts .lbl{color:var(--slate);font-weight:400;margin-right:6px}
.h-qr{border:1px solid var(--border);border-radius:18px;padding:22px;text-align:center;background:rgba(0,0,0,.3)}
.h-qr .box{width:148px;height:148px;margin:0 auto 14px;border-radius:14px;background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.04) 0 10px,transparent 10px 20px);display:flex;align-items:center;justify-content:center;border:1px dashed var(--border-hover)}
.h-qr .box span{font-family:ui-monospace,monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate)}
.h-qr p{font-size:12px;color:var(--slate);line-height:1.5}
@media(max-width:820px){.h-final{padding:44px 26px}.h-final-grid{grid-template-columns:1fr;gap:32px}.h-offer{grid-template-columns:1fr}}

.h-reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.h-reveal.in{opacity:1;transform:none}

/* ===== 7 GROWTH ENGINES ===== */
.eng-wrap{position:relative;margin-top:6px}
.eng-particles{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.eng-particles span{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--teal);opacity:.4;animation:engFloat 9s ease-in-out infinite}
.eng-particles span:nth-child(1){left:6%;top:18%;animation-delay:0s}
.eng-particles span:nth-child(2){left:26%;top:68%;animation-delay:1.4s;background:var(--blue-light)}
.eng-particles span:nth-child(3){left:48%;top:12%;animation-delay:2.6s}
.eng-particles span:nth-child(4){left:66%;top:74%;animation-delay:.8s;background:var(--blue-light)}
.eng-particles span:nth-child(5){left:84%;top:28%;animation-delay:3.2s}
.eng-particles span:nth-child(6){left:92%;top:60%;animation-delay:1.9s}
@keyframes engFloat{0%,100%{transform:translateY(0);opacity:.2}50%{transform:translateY(-24px);opacity:.6}}
.eng-track{position:relative;z-index:1;display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:16px 20px 24px;scrollbar-width:none}
.eng-track::-webkit-scrollbar{display:none}
.eng-card{position:relative;flex:0 0 82%;scroll-snap-align:center;border:1px solid var(--border);border-radius:18px;padding:24px 20px;background:linear-gradient(170deg,rgba(255,255,255,.022),rgba(255,255,255,.004));transition:transform .4s var(--ease),border-color .35s,box-shadow .35s;overflow:hidden;outline:none}
.eng-card::before{content:"";position:absolute;inset:0;background:radial-gradient(130px 90px at 50% 0%,color-mix(in srgb,var(--c) 22%,transparent),transparent 72%);opacity:0;transition:opacity .4s}
.eng-card:hover,.eng-card:focus-visible{transform:translateY(-7px);border-color:color-mix(in srgb,var(--c) 55%,transparent);box-shadow:0 24px 60px rgba(0,0,0,.45)}
.eng-card:hover::before,.eng-card:focus-visible::before{opacity:1}
.eng-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px;position:relative;z-index:1}
.eng-no{font-family:'Plus Jakarta Sans';font-weight:800;font-size:13px;letter-spacing:.04em;color:var(--c)}
.eng-ix{width:44px;height:44px;border-radius:12px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--c) 13%,transparent);color:var(--c);transition:transform .4s var(--ease)}
.eng-card:hover .eng-ix{transform:scale(1.08) rotate(-4deg)}
.eng-name{font-family:'Plus Jakarta Sans';font-weight:800;font-size:16.5px;color:#fff;letter-spacing:-.015em;line-height:1.15;position:relative;z-index:1}
.eng-tag{font-size:12.5px;color:var(--slate);line-height:1.55;margin:8px 0 16px;position:relative;z-index:1;min-height:40px}
.eng-items{display:flex;flex-direction:column;gap:8px;position:relative;z-index:1}
.eng-items span{display:flex;align-items:center;gap:9px;font-family:'Plus Jakarta Sans';font-weight:500;font-size:12.5px;color:var(--off-white)}
.eng-items span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--c);flex-shrink:0;box-shadow:0 0 7px var(--c)}
.eng-hint{display:block;text-align:center;font-family:'Plus Jakarta Sans';font-weight:500;font-size:12px;color:var(--slate);margin-top:4px}
@media(min-width:640px){.eng-card{flex-basis:300px}}
@media(min-width:1180px){
  .eng-wrap{padding-top:10px}
  .eng-track{display:grid;grid-template-columns:repeat(7,1fr);overflow:visible;padding:30px 0 10px;gap:13px}
  .eng-track::before{content:"";position:absolute;top:14px;left:2%;right:2%;height:2px;background:linear-gradient(90deg,rgba(36,82,217,.1),rgba(0,196,160,.55),rgba(36,82,217,.1));border-radius:2px;z-index:0}
  .eng-track::after{content:"";position:absolute;top:10px;left:2%;width:10px;height:10px;border-radius:50%;background:var(--teal);box-shadow:0 0 14px 3px rgba(0,196,160,.7);animation:engBus 6s linear infinite;z-index:0}
  .eng-card{flex:initial;padding:22px 16px}
  .eng-name{font-size:14.5px}
  .eng-items span{font-size:11.5px;gap:7px}
  .eng-hint{display:none}
}
@keyframes engBus{0%{left:2%;opacity:0}6%{opacity:1}94%{opacity:1}100%{left:96%;opacity:0}}
@media(prefers-reduced-motion:reduce){.eng-particles span,.eng-track::after{animation:none}}


/* engines: expand */
.eng-card{cursor:pointer}
.eng-cue{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:16px;padding-top:13px;border-top:1px solid var(--border);min-height:34px;font-family:'Plus Jakarta Sans';font-weight:600;font-size:11.5px;letter-spacing:.04em;color:var(--c);position:relative;z-index:1}
.eng-chev{transition:transform .4s var(--ease)}
.eng-card.open .eng-chev{transform:rotate(180deg)}
.eng-more{max-height:0;overflow:hidden;opacity:0;transition:max-height .45s var(--ease),opacity .35s var(--ease),margin-top .45s var(--ease);position:relative;z-index:1}
.eng-card.open .eng-more{max-height:260px;opacity:1;margin-top:12px}
.eng-desc{font-size:12.5px;color:var(--slate);line-height:1.6}
.eng-learn{display:inline-flex;align-items:center;gap:6px;margin-top:14px;min-height:44px;font-family:'Plus Jakarta Sans';font-weight:700;font-size:12.5px;color:var(--c);text-decoration:none;transition:gap .25s var(--ease)}
.eng-learn:hover{gap:10px}
@media(min-width:1180px){.eng-cue{margin-top:14px;padding-top:11px}}


/* ===== LIVE DASHBOARD ===== */
.dash-frame{position:relative;border:1px solid var(--border);border-radius:22px;overflow:hidden;background:linear-gradient(170deg,rgba(12,15,28,.92),rgba(6,7,13,.96));box-shadow:0 40px 100px rgba(0,0,0,.5)}
.dash-bar{display:flex;align-items:center;gap:11px;padding:15px 22px;border-bottom:1px solid var(--border);background:rgba(255,255,255,.015)}
.dash-bar .dot{width:9px;height:9px;border-radius:50%;background:var(--teal);box-shadow:0 0 10px var(--teal);animation:hPulse 1.6s infinite}
.dash-bar .ttl{font-family:'Plus Jakarta Sans';font-weight:700;font-size:13px;color:#fff}
.dash-bar .seg{margin-left:auto;display:flex;gap:6px}
.dash-bar .seg span{font-family:'Plus Jakarta Sans';font-weight:600;font-size:10.5px;color:var(--slate);border:1px solid var(--border);border-radius:8px;padding:6px 11px}
.dash-bar .seg span.on{color:#fff;border-color:rgba(0,196,160,.4);background:rgba(0,196,160,.08)}
.dash-kpis{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--border)}
.kpi{background:#06070d;padding:15px 15px}
.kpi .kl{display:flex;align-items:center;gap:7px;font-size:10px;font-family:'Plus Jakarta Sans';font-weight:600}
.kpi .kn{font-family:'Plus Jakarta Sans';font-weight:800;font-size:20px;letter-spacing:-.03em;color:#fff;margin-top:9px}
.kpi .kt{font-size:10px;color:var(--teal);font-family:'Plus Jakarta Sans';font-weight:600;margin-top:3px}
.dash-main{display:grid;grid-template-columns:1.7fr 1fr;gap:1px;background:var(--border)}
.dash-chart,.dash-side{background:#06070d;padding:20px 22px}
.dc-l{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--slate);font-family:'Plus Jakarta Sans';font-weight:600}
.dc-n{font-family:'Plus Jakarta Sans';font-weight:800;font-size:24px;letter-spacing:-.03em;color:#fff;margin-top:6px}
.dc-n small{font-size:12px;color:var(--teal);font-weight:700;margin-left:6px}
.dc-svg{width:100%;height:150px;margin:14px 0 4px;display:block}
.dc-grid{stroke:rgba(255,255,255,.06);stroke-width:1}
.dc-area{fill:url(#dcg);opacity:0;transition:opacity 1.4s var(--ease) .3s}
.dc-stroke{stroke:#00C4A0;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1300;stroke-dashoffset:1300;transition:stroke-dashoffset 2.1s var(--ease)}
.dash-frame.go .dc-stroke{stroke-dashoffset:0}
.dash-frame.go .dc-area{opacity:1}
.db-bars{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.db-l,.df-l{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--slate);font-family:'Plus Jakarta Sans';font-weight:600;margin-bottom:4px}
.db-row .db-t{display:flex;justify-content:space-between;font-size:11.5px;color:var(--slate);margin-bottom:5px}
.db-row .db-t b{color:#fff;font-family:'Plus Jakarta Sans';font-weight:600}
.db-track{height:7px;border-radius:6px;background:rgba(255,255,255,.06);overflow:hidden}
.db-track i{display:block;height:100%;width:0;border-radius:6px;transition:width 1.4s var(--ease) .4s}
.dash-frame.go .db-track i{width:var(--w)}
.ds-donut{position:relative;width:150px;height:150px;margin:4px auto 18px}
.ds-donut svg{transform:rotate(-90deg);width:150px;height:150px}
.dn-track{fill:none;stroke:rgba(255,255,255,.07);stroke-width:11}
.dn-val{fill:none;stroke:url(#dcg);stroke:#00C4A0;stroke-width:11;stroke-linecap:round;transition:stroke-dashoffset 1.8s var(--ease) .3s}
.ds-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ds-pct{font-family:'Plus Jakarta Sans';font-weight:800;font-size:30px;letter-spacing:-.03em;color:#fff}
.ds-cap{font-size:10.5px;color:var(--slate);font-family:'Plus Jakarta Sans';font-weight:600;letter-spacing:.04em}
.df-wrap{border-top:1px solid var(--border);padding-top:14px}
.df-row{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:12px;color:var(--off-white)}
.df-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.df-row.live .df-dot{animation:hPulse 1.4s infinite}
.df-x{flex:1;font-family:'Plus Jakarta Sans';font-weight:500}
.df-m{color:var(--slate);font-size:11px}
.dash-note{text-align:center;margin-top:26px;font-family:'Plus Jakarta Sans';font-weight:500;font-size:clamp(15px,1.6vw,18px);color:var(--slate)}
.dash-note b{color:#fff;font-weight:700}
@media(max-width:980px){.dash-kpis{grid-template-columns:repeat(3,1fr)}.dash-main{grid-template-columns:1fr}}
@media(max-width:560px){.dash-kpis{grid-template-columns:repeat(2,1fr)}.dc-n{font-size:21px}}


/* ===== A11Y / PERF POLISH ===== */
.skip-link{position:fixed;left:-9999px;top:10px;z-index:3000;background:#fff;color:#000;padding:11px 18px;border-radius:9px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:13px;text-decoration:none;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.skip-link:focus{left:14px}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:6px}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  #h-particles,.eng-particles{display:none!important}
}


/* ===== 7 GROWTH ENGINES (neon) ===== */
.ge-wrap{position:relative;margin-top:8px}
.ge-links{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:.5}
.ge-links path{fill:none;stroke:rgba(0,196,160,.4);stroke-width:1.4;stroke-dasharray:5 9;animation:geDash 22s linear infinite;filter:drop-shadow(0 0 4px rgba(0,196,160,.4))}
.ge-links path:nth-child(2){stroke:rgba(77,141,255,.4);filter:drop-shadow(0 0 4px rgba(77,141,255,.4))}
.ge-links path:nth-child(3){stroke:rgba(176,107,255,.35);filter:drop-shadow(0 0 4px rgba(176,107,255,.35))}
@keyframes geDash{to{stroke-dashoffset:-280}}
.ge-grid{position:relative;z-index:1;display:grid;gap:20px}
.ge-row1{grid-template-columns:repeat(4,1fr)}
.ge-row2{grid-template-columns:repeat(3,1fr);margin-top:20px}
.ge-card{position:relative;border:1px solid color-mix(in srgb,var(--c) 38%,transparent);border-radius:18px;padding:42px 22px 24px;background:linear-gradient(170deg,rgba(255,255,255,.035),rgba(255,255,255,.006));backdrop-filter:blur(8px);box-shadow:0 18px 50px rgba(0,0,0,.4),inset 0 0 34px color-mix(in srgb,var(--c) 7%,transparent);transition:transform .4s var(--ease),box-shadow .4s,border-color .4s;overflow:hidden;outline:none}
.ge-card::after{content:"";position:absolute;inset:0;border-radius:18px;box-shadow:0 0 22px color-mix(in srgb,var(--c) 26%,transparent);opacity:.45;pointer-events:none;transition:opacity .4s}
.ge-card:hover,.ge-card:focus-visible{transform:translateY(-8px);border-color:color-mix(in srgb,var(--c) 72%,transparent);box-shadow:0 28px 70px rgba(0,0,0,.5),inset 0 0 44px color-mix(in srgb,var(--c) 13%,transparent)}
.ge-card:hover::after,.ge-card:focus-visible::after{opacity:1;box-shadow:0 0 34px color-mix(in srgb,var(--c) 42%,transparent)}
.ge-no{position:absolute;top:18px;left:22px;font-family:'Plus Jakarta Sans';font-weight:800;font-size:12px;letter-spacing:.06em;color:color-mix(in srgb,var(--c) 75%,#fff);z-index:1}
.ge-top{display:flex;gap:14px;align-items:flex-start;position:relative;z-index:1}
.ge-icon{width:52px;height:52px;flex-shrink:0;border-radius:14px;display:flex;align-items:center;justify-content:center;color:var(--c);border:1px solid color-mix(in srgb,var(--c) 45%,transparent);background:color-mix(in srgb,var(--c) 13%,transparent);box-shadow:0 0 18px color-mix(in srgb,var(--c) 28%,transparent)}
.ge-icon svg{filter:drop-shadow(0 0 5px currentColor)}
.ge-h{padding-top:2px}
.ge-name{font-family:'Plus Jakarta Sans';font-weight:800;font-size:16px;color:#fff;letter-spacing:-.012em;line-height:1.18}
.ge-desc{font-size:12.5px;color:var(--slate);margin-top:6px;line-height:1.5}
.ge-list{list-style:none;display:flex;flex-direction:column;gap:9px;margin:18px 0;position:relative;z-index:1}
.ge-list li{display:flex;align-items:center;gap:11px;font-family:'Plus Jakarta Sans';font-weight:500;font-size:13px;color:var(--off-white)}
.ge-list li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c);flex-shrink:0}
.ge-link{display:inline-flex;align-items:center;gap:7px;min-height:46px;font-family:'Plus Jakarta Sans';font-weight:700;font-size:13px;color:var(--c);text-decoration:none;transition:gap .25s var(--ease);position:relative;z-index:1}
.ge-link svg{filter:drop-shadow(0 0 4px currentColor)}
.ge-link:hover{gap:11px}
@media(max-width:1100px){.ge-row1,.ge-row2{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){
  .ge-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;padding:6px 20px 16px;margin:0 -20px;scrollbar-width:none}
  .ge-grid::-webkit-scrollbar{display:none}
  .ge-row2{margin-top:16px}
  .ge-card{flex:0 0 84%;scroll-snap-align:center}
  .ge-links{display:none}
}

/* ===== GROWTH JOURNEY (neon timeline) ===== */
.gj-panel{position:relative;border:1px solid var(--border);border-radius:26px;padding:46px 26px 40px;overflow:hidden;background:radial-gradient(120% 100% at 50% 0%,rgba(36,82,217,.12),transparent 55%),linear-gradient(180deg,rgba(10,12,20,.55),rgba(6,7,13,.85))}
.gj-track{display:flex;align-items:flex-start;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;padding:28px 4px 10px;margin-top:8px;scrollbar-width:none}
.gj-track::-webkit-scrollbar{display:none}
.gj-stage{flex:0 0 auto;width:120px;scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;text-align:center}
.gj-ic{width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--c);border:1.5px solid var(--c);background:radial-gradient(circle,color-mix(in srgb,var(--c) 20%,transparent),transparent 72%);box-shadow:0 0 20px color-mix(in srgb,var(--c) 38%,transparent),inset 0 0 12px color-mix(in srgb,var(--c) 18%,transparent);position:relative}
.gj-ic svg{filter:drop-shadow(0 0 5px currentColor)}
.gj-ic::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid color-mix(in srgb,var(--c) 30%,transparent);animation:gjPing 3.2s ease-out infinite}
@keyframes gjPing{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.4);opacity:0}}
.gj-no{font-family:'Plus Jakarta Sans';font-weight:800;font-size:13px;color:var(--c);margin-top:14px;text-shadow:0 0 10px color-mix(in srgb,var(--c) 50%,transparent)}
.gj-t{font-family:'Plus Jakarta Sans';font-weight:700;font-size:13.5px;color:#fff;margin-top:4px;line-height:1.2}
.gj-d{font-size:11px;color:var(--slate);margin-top:6px;line-height:1.45;max-width:104px}
.gj-arrow{flex:0 0 26px;align-self:flex-start;margin-top:28px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--from),var(--to));position:relative;box-shadow:0 0 8px color-mix(in srgb,var(--to) 40%,transparent)}
.gj-arrow::after{content:"";position:absolute;right:-1px;top:-3px;border-left:6px solid var(--to);border-top:4px solid transparent;border-bottom:4px solid transparent}
@media(min-width:1000px){
  .gj-track{overflow:visible;scroll-snap-type:none;justify-content:center;padding:28px 0 10px}
  .gj-stage{flex:1 1 0;width:auto;min-width:0}
  .gj-arrow{flex:0 0 18px;margin-top:27px}
  .gj-d{max-width:none}
}
@media(max-width:680px){.gj-panel{padding:36px 16px 30px;border-radius:20px}.gj-stage{width:128px}}


/* ===== FINAL POLISH: ENGINES ===== */
.ge-spark{filter:drop-shadow(0 0 5px currentColor)}
.ge-spark.s1{fill:#19E3A5;color:#19E3A5}
.ge-spark.s2{fill:#4D8DFF;color:#4D8DFF}
.ge-spark.s3{fill:#B06BFF;color:#B06BFF}
.ge-card{display:flex;flex-direction:column}
.ge-list{flex:1 1 auto}
.ge-icon{transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.ge-card:hover .ge-icon,.ge-card:focus-visible .ge-icon{transform:scale(1.08) rotate(-6deg);box-shadow:0 0 28px color-mix(in srgb,var(--c) 48%,transparent)}
@media(min-width:1101px){
  .ge-row1{gap:26px}
  .ge-row2{display:flex;grid-template-columns:none;justify-content:center;gap:26px;margin-top:26px}
  .ge-row2 .ge-card{flex:0 0 calc((100% - 78px)/4)}
}
/* ===== FINAL POLISH: GROWTH JOURNEY (living beam) ===== */
.gj-ic{animation:gjGlow 3.4s ease-in-out infinite}
@keyframes gjGlow{0%,100%{box-shadow:0 0 14px color-mix(in srgb,var(--c) 28%,transparent),inset 0 0 12px color-mix(in srgb,var(--c) 16%,transparent)}50%{box-shadow:0 0 24px color-mix(in srgb,var(--c) 48%,transparent),inset 0 0 14px color-mix(in srgb,var(--c) 22%,transparent)}}
.gj-stage.lit .gj-ic{animation:none;transform:translateY(-3px) scale(1.07);box-shadow:0 0 34px color-mix(in srgb,var(--c) 72%,transparent),inset 0 0 18px color-mix(in srgb,var(--c) 32%,transparent)}
.gj-stage .gj-ic,.gj-stage .gj-no,.gj-stage .gj-t{transition:transform .45s var(--ease),box-shadow .45s var(--ease),text-shadow .45s,color .45s}
.gj-stage.lit .gj-no{text-shadow:0 0 16px color-mix(in srgb,var(--c) 85%,transparent)}
.gj-stage.lit .gj-t{color:#fff;text-shadow:0 0 12px color-mix(in srgb,var(--c) 40%,transparent)}
.gj-arrow{background:linear-gradient(90deg,var(--from),var(--to));background-size:220% 100%;animation:gjBeam 2.4s linear infinite}
@keyframes gjBeam{to{background-position:-220% 0}}
.gj-arrow::before{content:"";position:absolute;top:-2.4px;left:0;width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 9px var(--to);opacity:0;animation:gjDot 2.4s linear infinite}
@keyframes gjDot{0%{left:0;opacity:0}18%{opacity:1}82%{opacity:1}100%{left:calc(100% - 5px);opacity:0}}
@media(prefers-reduced-motion:reduce){.gj-ic,.gj-arrow,.gj-arrow::before,.ge-spark{animation:none!important}}


/* ===== CREATIVE DIRECTOR — DELIGHT MOTION PASS ===== */
/* 1. living gradient flow on gradient headings */
.h-grad{background:linear-gradient(100deg,#6f9bff,#00C4A0,#6f9bff);background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:hGradFlow 9s linear infinite}
@keyframes hGradFlow{to{background-position:220% center}}
/* 2. marquee pauses on hover */
.h-marquee:hover .h-mq-track{animation-play-state:paused}
/* 3. primary CTA sheen sweep on hover */
.h-btn.pri{position:relative;overflow:hidden}
.h-btn.pri>*{position:relative;z-index:1}
.h-btn.pri::after{content:"";position:absolute;top:0;left:-65%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-18deg);opacity:0;z-index:0}
.h-btn.pri:hover::after{opacity:1;animation:hSheen .85s ease}
@keyframes hSheen{from{left:-65%}to{left:140%}}
/* 4. hero badge slow shimmer */
.h-badge{position:relative;overflow:hidden}
.h-badge>*{position:relative;z-index:1}
.h-badge::after{content:"";position:absolute;top:0;left:-90%;width:55%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent);transform:skewX(-18deg);z-index:0;animation:hBadgeSheen 5.5s ease-in-out infinite}
@keyframes hBadgeSheen{0%{left:-90%}55%,100%{left:190%}}
/* 5. hero diagram nodes respond to hover */
.h-node{cursor:default}
.h-node:hover .ix{border-color:rgba(0,196,160,.6);box-shadow:0 0 22px rgba(0,196,160,.3);transform:scale(1.07)}
.h-node:hover .nm{color:#fff}
/* 6. engine bullets illuminate in sequence + arrow glide */
.ge-list li::before{transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.ge-card:hover .ge-list li::before{box-shadow:0 0 12px var(--c);transform:scale(1.3)}
.ge-card:hover .ge-list li:nth-child(1)::before{transition-delay:0s}
.ge-card:hover .ge-list li:nth-child(2)::before{transition-delay:0.05s}
.ge-card:hover .ge-list li:nth-child(3)::before{transition-delay:0.1s}
.ge-card:hover .ge-list li:nth-child(4)::before{transition-delay:0.15000000000000002s}
.ge-card:hover .ge-list li:nth-child(5)::before{transition-delay:0.2s}
.ge-card:hover .ge-list li:nth-child(6)::before{transition-delay:0.25s}
.ge-link svg{transition:transform .25s var(--ease)}
.ge-link:hover svg{transform:translateX(3px)}
/* 7. industries explore arrow glide */
.h-ind .go svg{transition:transform .25s var(--ease)}
.h-ind:hover .go svg{transform:translateX(4px)}
/* 8. why comparison cards hover lift/glow */
.h-why-card{transition:transform .4s var(--ease),border-color .35s,box-shadow .35s}
.h-why-card:hover{transform:translateY(-5px)}
.h-why-card.new:hover{box-shadow:0 22px 56px rgba(0,196,160,.14)}
.h-why-card.old:hover{border-color:var(--border-hover);box-shadow:0 22px 56px rgba(0,0,0,.4)}
/* 9. final CTA checks pop on reveal + QR float */
.h-offer .ci{will-change:transform}
.h-reveal.in .h-offer li .ci{animation:hPop .5s var(--ease) both}
.h-reveal.in .h-offer li:nth-child(1) .ci{animation-delay:0s}
.h-reveal.in .h-offer li:nth-child(2) .ci{animation-delay:0.07s}
.h-reveal.in .h-offer li:nth-child(3) .ci{animation-delay:0.14s}
.h-reveal.in .h-offer li:nth-child(4) .ci{animation-delay:0.21000000000000002s}
.h-reveal.in .h-offer li:nth-child(5) .ci{animation-delay:0.28s}
.h-reveal.in .h-offer li:nth-child(6) .ci{animation-delay:0.35000000000000003s}
@keyframes hPop{0%{transform:scale(0);opacity:0}60%{transform:scale(1.18)}100%{transform:scale(1);opacity:1}}
.h-qr{animation:hQrFloat 6s ease-in-out infinite}
@keyframes hQrFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
/* 10. dashboard KPI + activity row hover highlight */
.kpi{transition:background .3s var(--ease)}
.kpi:hover{background:#0a0e1c}
.df-row{transition:background .25s var(--ease);border-radius:8px;padding-left:6px;margin-left:-6px}
.df-row:hover{background:rgba(255,255,255,.025)}
/* keep it calm for reduced-motion users */
@media(prefers-reduced-motion:reduce){
  .h-grad,.h-badge::after,.h-qr,.h-btn.pri::after{animation:none!important}
  .h-grad{background-position:0 center}
}

/* ===== SOLUTION-PAGE HELPERS (same language as home) ===== */
.sp-hero{position:relative;padding:74px 0 64px;overflow:hidden}
.sp-breadcrumb{display:flex;gap:8px;align-items:center;font-family:'Plus Jakarta Sans',sans-serif;font-size:12.5px;color:var(--slate);margin-bottom:22px;position:relative;z-index:1}
.sp-breadcrumb a{color:var(--slate);text-decoration:none;transition:color .2s}
.sp-breadcrumb a:hover{color:var(--teal)}
.sp-breadcrumb .sep{opacity:.5}
.sp-hero-row{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;z-index:1}
.sp-hero h1{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:clamp(38px,5vw,64px);line-height:1.03;letter-spacing:-.03em;margin:20px 0 0}
.sp-hero .lead{color:var(--slate);font-size:clamp(15px,1.5vw,18px);line-height:1.7;max-width:560px;margin-top:22px}
.sp-grid{display:grid;gap:20px}
.sp-grid.c2{grid-template-columns:repeat(2,1fr)}
.sp-grid.c3{grid-template-columns:repeat(3,1fr)}
.sp-grid.c4{grid-template-columns:repeat(4,1fr)}
.sp-split{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
.sp-checklist{list-style:none;display:flex;flex-direction:column;gap:14px;margin-top:22px}
.sp-checklist li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--off-white);line-height:1.5}
.sp-check{width:22px;height:22px;flex-shrink:0;border-radius:50%;background:rgba(0,196,160,.12);display:flex;align-items:center;justify-content:center;margin-top:1px}
.sp-outcome{text-align:center;padding:30px 22px;border:1px solid var(--border);border-radius:18px;background:rgba(255,255,255,.012);transition:transform .4s var(--ease),border-color .35s}
.sp-outcome:hover{transform:translateY(-5px);border-color:var(--border-hover)}
.sp-outcome .on{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:clamp(34px,4.6vw,48px);letter-spacing:-.03em;line-height:1;background:linear-gradient(100deg,#6f9bff,#00C4A0);-webkit-background-clip:text;background-clip:text;color:transparent}
.sp-outcome .ol{font-size:13px;color:var(--slate);margin-top:10px;line-height:1.5}
@media(max-width:920px){.sp-hero-row{grid-template-columns:1fr;gap:38px}.sp-split{grid-template-columns:1fr;gap:32px}.sp-hero .lead{max-width:none}}
@media(max-width:900px){.sp-grid.c4{grid-template-columns:repeat(2,1fr)}.sp-grid.c3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.sp-grid.c2,.sp-grid.c3,.sp-grid.c4{grid-template-columns:1fr}}

/* solution components */
.sp-card{position:relative;border:1px solid var(--border);border-radius:18px;padding:26px;background:linear-gradient(170deg,rgba(255,255,255,.03),rgba(255,255,255,.006));transition:transform .4s var(--ease),border-color .35s,box-shadow .35s;overflow:hidden;height:100%}
.sp-card:hover{transform:translateY(-6px);border-color:var(--border-hover);box-shadow:0 24px 60px rgba(0,0,0,.4)}
.sp-card .ic{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);background:linear-gradient(150deg,rgba(36,82,217,.16),rgba(0,196,160,.05));color:var(--teal);margin-bottom:18px;transition:transform .4s var(--ease)}
.sp-card:hover .ic{transform:scale(1.08) rotate(-6deg)}
.sp-card .ic svg{filter:drop-shadow(0 0 4px currentColor)}
.sp-card h3{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:17px;color:#fff;letter-spacing:-.01em;margin-bottom:9px}
.sp-card p{font-size:13.5px;color:var(--slate);line-height:1.65}
.sp-step{position:relative;padding:28px 22px;border:1px solid var(--border);border-radius:16px;background:rgba(255,255,255,.012);height:100%}
.sp-step .n{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:13px;color:var(--teal);width:40px;height:40px;border-radius:50%;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;margin-bottom:18px;box-shadow:0 0 16px rgba(0,196,160,.18)}
.sp-step h3{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:16px;color:#fff;margin-bottom:9px}
.sp-step p{font-size:13px;color:var(--slate);line-height:1.6}
.sp-panel{position:relative;border:1px solid var(--border);border-radius:24px;overflow:hidden;padding:40px 32px;background:radial-gradient(120% 100% at 50% 0%,rgba(36,82,217,.12),transparent 55%),linear-gradient(180deg,rgba(10,12,20,.55),rgba(6,7,13,.85))}
@media(max-width:600px){.sp-panel{padding:30px 18px}}

/* ════ PRODUCT MOTION + INTERACTIVE DEMO LAYER (solution pages) ════ */
/* refined scroll reveal: blur-to-sharp + premium spring */
.h-main .h-reveal{filter:blur(7px);transition:opacity .85s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1),filter .85s ease}
.h-main .h-reveal.in{filter:blur(0)}
/* hero living diagram: animated data-flow spine + node depth + 3D */
.h-os-line{background:linear-gradient(180deg,rgba(36,82,217,.12),rgba(0,196,160,.55),rgba(36,82,217,.12));background-size:100% 240%;animation:mpLineFlow 3.4s linear infinite}
@keyframes mpLineFlow{to{background-position:0 -240%}}
.h-os{transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s}
.h-node .ix{transition:transform .45s var(--ease),box-shadow .45s,border-color .45s}
.h-node:hover .ix{transform:scale(1.08);border-color:rgba(0,196,160,.6);box-shadow:0 0 22px rgba(0,196,160,.3);cursor:pointer}
.h-node:hover .nm{color:#fff}
/* run-demo: bright travelling highlight */
.h-os.demoing{box-shadow:0 40px 110px rgba(0,196,160,.18),0 0 0 1px rgba(0,196,160,.25)}
.h-node.beam .ix{border-color:var(--teal);box-shadow:0 0 28px rgba(0,196,160,.6),inset 0 0 12px rgba(0,196,160,.25);transform:scale(1.12)}
.h-node.beam .nm{color:#fff;text-shadow:0 0 12px rgba(0,196,160,.5)}
/* run-demo button injected into diagram header */
.mp-demo-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(0,196,160,.35);background:rgba(0,196,160,.08);color:var(--teal);font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:10.5px;letter-spacing:.04em;padding:5px 11px;border-radius:100px;cursor:pointer;transition:.2s var(--ease);text-transform:uppercase}
.mp-demo-btn:hover{background:rgba(0,196,160,.16);transform:translateY(-1px)}
.mp-demo-btn:disabled{opacity:.5;cursor:default;transform:none}
.mp-demo-btn svg{width:11px;height:11px}
/* hero parallax (JS sets --mpY) */
.sp-hero .h-blob.b1{transform:translate3d(0,calc(var(--mpY,0px)*0.10),0)}
.sp-hero .h-blob.b2{transform:translate3d(0,calc(var(--mpY,0px)*-0.08),0)}
.sp-hero .h-hero-grid{will-change:transform;transform:translate3d(0,calc(var(--mpY,0px)*0.05),0)}
/* live dashboard: scanning sweep + staggered KPI pop + live dot ring + toast */
.dash-frame{position:relative}
.dash-frame.go::after{content:"";position:absolute;left:0;right:0;top:0;height:140px;pointer-events:none;z-index:3;background:linear-gradient(180deg,rgba(0,196,160,.10),transparent);animation:mpScan 7s ease-in-out infinite;mix-blend-mode:screen}
@keyframes mpScan{0%{transform:translateY(-140px);opacity:0}12%{opacity:1}55%{transform:translateY(420px);opacity:.5}82%{opacity:0}100%{transform:translateY(420px);opacity:0}}
.dash-frame.go .kpi .kn{animation:mpKpi .6s var(--ease) both}
.dash-frame.go .kpi:nth-child(1) .kn{animation-delay:.05s}.dash-frame.go .kpi:nth-child(2) .kn{animation-delay:.11s}.dash-frame.go .kpi:nth-child(3) .kn{animation-delay:.17s}.dash-frame.go .kpi:nth-child(4) .kn{animation-delay:.23s}.dash-frame.go .kpi:nth-child(5) .kn{animation-delay:.29s}.dash-frame.go .kpi:nth-child(6) .kn{animation-delay:.35s}.dash-frame.go .kpi:nth-child(7) .kn{animation-delay:.41s}
@keyframes mpKpi{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:none}}
.kpi .kn{transition:color .3s}
.kpi .kn.tick{color:var(--teal)}
.dash-bar .dot{animation:hPulse 1.6s infinite,mpDot 2.4s ease-out infinite}
@keyframes mpDot{0%{box-shadow:0 0 0 0 rgba(0,196,160,.45)}100%{box-shadow:0 0 0 10px rgba(0,196,160,0)}}
.df-row{transition:background .25s var(--ease);border-radius:8px}
.df-row.fresh{animation:mpFresh .6s var(--ease)}
@keyframes mpFresh{0%{opacity:0;transform:translateY(-8px);background:rgba(0,196,160,.1)}100%{opacity:1;transform:none}}
/* card depth micro-interactions */
.sp-card,.sp-outcome{transition:transform .45s cubic-bezier(.22,1,.36,1),border-color .35s,box-shadow .4s,background .35s}
.sp-outcome:hover{box-shadow:0 26px 64px rgba(0,0,0,.5)}
.h-kicker i{animation:hPulse 2s infinite,mpDot 3s ease-out infinite}
@media(prefers-reduced-motion:reduce){
  .h-os-line,.dash-frame.go::after,.dash-bar .dot,.h-kicker i{animation:none!important}
  .h-main .h-reveal{filter:none!important}
  .sp-hero .h-blob.b1,.sp-hero .h-blob.b2,.sp-hero .h-hero-grid{transform:none!important}
}
