
:root{--red:#E43A3F;--red-hi:#FF6B5E;--magenta:#C81D9A;--cyan:#2AE3F0;--violet:#8B5CFF;--plum:#1C0B17;--txt:#F3ECEF;--muted:#B49CA8;--glass:rgba(255,255,255,.06);--bd:rgba(255,255,255,.14)}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;color:var(--txt);background:var(--plum);-webkit-font-smoothing:antialiased;overflow-x:hidden}
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(1100px 720px at 84% -8%,rgba(228,58,63,.3),transparent 60%),radial-gradient(900px 720px at 2% 8%,rgba(200,29,154,.24),transparent 55%),radial-gradient(1000px 900px at 55% 128%,rgba(139,92,255,.2),transparent 55%)}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px;position:relative;z-index:2}
h1,h2,h3,.disp{font-family:'Sora'}a{color:inherit;text-decoration:none}
nav{position:sticky;top:0;z-index:40;backdrop-filter:blur(16px);background:rgba(28,11,23,.5);border-bottom:1px solid var(--bd)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:66px}
.logo{font-family:'Sora';font-weight:800;font-size:21px;letter-spacing:-.4px}.logo b{color:var(--red)}
.nlinks{display:flex;gap:26px;font-size:14.5px;font-weight:500;color:#D9CBD3}.nlinks a:hover{color:#fff}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:'Sora';font-weight:600;font-size:14.5px;padding:11px 18px;border-radius:12px;cursor:pointer;border:1px solid transparent}
.btn-red{color:#fff;background:linear-gradient(180deg,var(--red-hi),var(--red));box-shadow:0 12px 30px -10px rgba(228,58,63,.7)}
.btn-ghost{color:#fff;background:rgba(255,255,255,.06);border-color:var(--bd)}
.btn-dark{color:#fff;background:rgba(0,0,0,.25);border-color:var(--bd)}
@media(max-width:820px){.nlinks{display:none}}

/* HERO */
.hero{display:grid;grid-template-columns:1.02fr .98fr;gap:36px;align-items:center;padding:66px 0 70px}
.pill{display:inline-flex;gap:7px;align-items:center;font-size:12.5px;font-weight:600;border:1px solid var(--bd);background:rgba(255,255,255,.07);padding:5px 12px;border-radius:999px;backdrop-filter:blur(10px)}
.hero h1{font-size:54px;font-weight:800;letter-spacing:-.03em;line-height:1.02;margin:16px 0 16px}
.hero h1 .em{background:linear-gradient(90deg,#FFB07A,var(--red) 50%,var(--magenta));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero .sub{font-size:18px;color:#E3D6DD;max-width:34ch;margin-bottom:22px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.refrain{font-family:'Sora';font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--red-hi)}

.stage{height:470px;position:relative;perspective:1300px}
.aurora{position:absolute;inset:-15%;z-index:0;filter:blur(64px);pointer-events:none}
.blob{position:absolute;border-radius:50%;opacity:.8}
.a1{width:360px;height:360px;right:0;top:-6%;background:radial-gradient(circle at 40% 40%,#FF8A5B,transparent 60%),var(--red);animation:drift1 15s ease-in-out infinite}
.a2{width:280px;height:280px;left:-4%;top:22%;background:radial-gradient(circle at 50% 50%,var(--cyan),transparent 62%),var(--violet);animation:drift2 18s ease-in-out infinite}
.a3{width:300px;height:300px;left:32%;bottom:-8%;background:radial-gradient(circle at 50% 50%,var(--magenta),transparent 62%);animation:drift3 20s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-40px,40px) scale(1.12)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(50px,-30px) scale(1.15)}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,-40px) scale(.9)}}
.idle{position:absolute;inset:0;z-index:2}
.stack{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .3s ease-out}
.slot{position:absolute;left:50%;top:50%;transform-style:preserve-3d}
.fall{opacity:0;transform:translateY(-70px)}
.gcard{position:relative;width:250px;padding:15px 16px;border-radius:18px;background:var(--glass);border:1px solid rgba(255,255,255,.19);backdrop-filter:blur(16px) saturate(150%);box-shadow:0 22px 46px -20px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.25);overflow:hidden}
.gcard.bright{background:rgba(255,255,255,.14)}
.gcard .top{display:flex;justify-content:space-between;align-items:center;font-family:'Sora';font-weight:600;font-size:15px;position:relative;z-index:2}
.gcard .subrow{display:flex;align-items:center;gap:8px;margin-top:9px;font-size:11.5px;color:#D9CBD3;position:relative;z-index:2}
.dot{width:20px;height:14px;border-radius:3px;background:var(--red);opacity:.85}
.ok{color:var(--muted);opacity:.4;font-weight:600;font-size:11px}
.confirm{position:absolute;right:2px;top:0;width:74px;height:74px;border-radius:50%;z-index:1;pointer-events:none;opacity:0;background:radial-gradient(circle,rgba(105,240,192,.55),transparent 62%)}
.glint{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(220px 220px at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.4),transparent 60%)}
.master{position:relative;width:316px;padding:17px 18px;border-radius:20px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.26);backdrop-filter:blur(20px);box-shadow:0 24px 52px -16px rgba(228,58,63,.4),inset 0 1px 0 rgba(255,255,255,.3)}
.master .lab{font-family:'Sora';font-weight:600;font-size:13px}
.master .num{font-family:'Sora';font-weight:800;font-size:30px;letter-spacing:-.8px;margin:8px 0}
.master .num small{font-family:'Inter';font-weight:500;font-size:13px;color:var(--muted);letter-spacing:0}
.chip{position:relative;display:inline-flex;font-family:'Sora';font-weight:600;font-size:11px;color:#fff;background:linear-gradient(180deg,var(--red-hi),var(--red));padding:6px 12px;border-radius:999px;margin-top:10px;opacity:.5}
.ripple{position:absolute;left:24px;bottom:14px;width:20px;height:20px;border-radius:999px;border:2px solid var(--red-hi);opacity:0;pointer-events:none}
.s4{transform:translate(-50%,-50%) translate(96px,-138px) translateZ(-78px)}
.s3{transform:translate(-50%,-50%) translate(48px,-72px) translateZ(-38px)}
.s2{transform:translate(-50%,-50%) translate(0,-6px) translateZ(2px)}
.s1{transform:translate(-50%,-50%) translate(-48px,60px) translateZ(46px)}
.sm{transform:translate(-50%,-50%) translate(-92px,150px) translateZ(80px)}
@keyframes fallIn{to{opacity:1;transform:translateY(0)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes lightUp{0%{opacity:.4;color:var(--muted);transform:scale(.85)}55%{opacity:1;color:#8CFFD0;transform:scale(1.3)}100%{opacity:1;color:#69F0C0;transform:scale(1)}}
@keyframes bloom{0%{opacity:0;transform:scale(.5)}45%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.35)}}
@keyframes igniteChip{0%{opacity:.5;transform:scale(.92)}55%{opacity:1;transform:scale(1.06);box-shadow:0 0 28px rgba(255,107,94,.9)}100%{opacity:1;transform:scale(1);box-shadow:0 0 14px rgba(228,58,63,.5)}}
@keyframes ripple{0%{opacity:.6;transform:scale(1)}100%{opacity:0;transform:scale(9)}}
.play .fall{animation:fallIn .85s cubic-bezier(.18,.9,.28,1.2) forwards}
.play .s4 .fall{animation-delay:.05s}.play .s3 .fall{animation-delay:.2s}.play .s2 .fall{animation-delay:.35s}.play .s1 .fall{animation-delay:.5s}.play .sm .fall{animation-delay:.7s}
.play .idle{animation:floaty 6s ease-in-out 2.9s infinite}
.play .s4 .ok{animation:lightUp .5s ease-out 1.75s forwards}.play .s4 .confirm{animation:bloom .6s ease-out 1.72s}
.play .s3 .ok{animation:lightUp .5s ease-out 1.95s forwards}.play .s3 .confirm{animation:bloom .6s ease-out 1.92s}
.play .s2 .ok{animation:lightUp .5s ease-out 2.15s forwards}.play .s2 .confirm{animation:bloom .6s ease-out 2.12s}
.play .s1 .ok{animation:lightUp .5s ease-out 2.35s forwards}.play .s1 .confirm{animation:bloom .6s ease-out 2.32s}
.play .chip{animation:igniteChip .7s ease-out 2.6s forwards}.play .ripple{animation:ripple 1.1s ease-out 2.7s forwards}
@media(max-width:900px){.hero{grid-template-columns:1fr;gap:20px}.hero h1{font-size:40px}.stage{height:440px}}

/* PROOF */
.proof{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;background:var(--glass);border:1px solid var(--bd);border-radius:18px;backdrop-filter:blur(16px);padding:20px 28px;margin-bottom:8px}
.stat b{font-family:'Sora';font-weight:800;font-size:20px}.stat small{display:block;color:var(--muted);font-size:12px}
.plogos{display:flex;gap:18px;flex-wrap:wrap}.plogos span{font-family:'Sora';font-weight:600;font-size:14px;color:#C7B9C0}

/* SECTIONS */
.sec{padding:64px 0}
.sechead{text-align:center;max-width:680px;margin:0 auto 34px}
.eyebrow{font-family:'Sora';font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--red-hi)}
.sechead h2{font-size:34px;font-weight:800;letter-spacing:-.02em;margin:12px 0 12px}
.sechead p{color:var(--muted);font-size:17px}
.pgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.pcard{background:var(--glass);border:1px solid var(--bd);border-radius:16px;padding:22px 20px;backdrop-filter:blur(14px)}
.pico{width:40px;height:40px;border-radius:11px;background:linear-gradient(150deg,rgba(228,58,63,.5),rgba(200,29,154,.42));border:1px solid var(--bd);margin-bottom:12px}
.pcard h4{font-family:'Sora';font-weight:600;font-size:15.5px}.pcard p{color:var(--muted);font-size:13.5px;line-height:1.5;margin-top:6px}
@media(max-width:900px){.pgrid{grid-template-columns:1fr 1fr}}

.feature{background:var(--glass);border:1px solid var(--bd);border-radius:24px;backdrop-filter:blur(16px);padding:40px 44px;display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;margin-bottom:20px}
.feature.rev .fcopy{order:2}
.feature h3{font-size:27px;font-weight:800;letter-spacing:-.02em;margin:10px 0 12px}
.feature .fbody{color:var(--muted);font-size:16px;line-height:1.55;margin-bottom:16px}
.flist{list-style:none;display:flex;flex-direction:column;gap:11px}
.flist li{display:flex;gap:11px;font-size:14.5px;align-items:flex-start}
.flist .c{flex:0 0 20px;height:20px;border-radius:50%;background:rgba(105,240,192,.18);color:#69F0C0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;margin-top:1px}
.fvis{background:rgba(255,255,255,.05);border:1px solid var(--bd);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:10px}
.frow{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-radius:11px;background:rgba(255,255,255,.05);font-size:13px}
.tag{font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:999px}
.tg{background:rgba(105,240,192,.16);color:#69F0C0}.ta{background:rgba(228,164,60,.18);color:#F0C24A}.tt{background:rgba(42,227,240,.14);color:#7FE9F2}
.fval{font-family:'Sora';font-weight:700;font-size:15px}
@media(max-width:820px){.feature,.feature.rev{grid-template-columns:1fr;gap:24px;padding:28px}.feature.rev .fcopy{order:0}}

.final{text-align:center;padding:74px 24px;position:relative}
.final h2{font-size:34px;font-weight:800;letter-spacing:-.02em;margin:10px 0 12px}
.final p{color:#E3D6DD;font-size:17px;margin-bottom:22px}
footer{border-top:1px solid var(--bd);padding:30px 0;color:var(--muted);font-size:13px}.ft-in{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;align-items:center}
.rise{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}.rise.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rise{opacity:1;transform:none;transition:none}.fall{opacity:1!important;transform:none!important}.idle,.blob{animation:none!important}.ok{opacity:1!important;color:#69F0C0!important}.chip{opacity:1!important}}

/* SME hero — payroll runs itself */
.runwrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2}
.runpanel{position:relative;width:400px;max-width:92%;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.2);border-radius:22px;backdrop-filter:blur(20px) saturate(150%);box-shadow:0 34px 70px -28px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.25);padding:22px 22px 20px;transition:transform .3s ease-out}
.rp-head{display:flex;justify-content:space-between;align-items:center}
.rp-title{font-family:'Sora';font-weight:600;font-size:15px}
.autopill{display:inline-flex;align-items:center;gap:5px;font-family:'Sora';font-weight:600;font-size:10.5px;color:#fff;background:linear-gradient(180deg,var(--red-hi),var(--red));padding:4px 10px;border-radius:999px}
.rp-sub{color:var(--muted);font-size:12.5px;margin:5px 0 16px}
.bar{height:6px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden;margin-bottom:16px}
.fill{height:100%;width:0;background:linear-gradient(90deg,var(--red-hi),var(--magenta));border-radius:999px}
.steps{display:flex;flex-direction:column}
.step{display:flex;align-items:center;gap:12px;padding:9px 0;font-size:13.5px;color:#C7B9C0;transition:color .3s}
.step.done{color:#fff}
.ico{flex:0 0 22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);transition:background .3s}
.step.done .ico{background:rgba(105,240,192,.92);color:#0b2a1f;font-size:12px;font-weight:800}
.sp{width:15px;height:15px;border-radius:50%;border:2px solid rgba(255,255,255,.22);border-top-color:#fff;animation:spin .8s linear infinite}
.ck{display:none}.step.done .sp{display:none}.step.done .ck{display:block}
.st{margin-left:auto;font-size:11px;color:var(--muted)}.step.done .st{color:#69F0C0}
@keyframes spin{to{transform:rotate(360deg)}}
.rp-done{margin-top:12px;padding-top:14px;border-top:1px solid rgba(255,255,255,.12);display:flex;align-items:center;gap:11px;opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s}
.rp-done.show{opacity:1;transform:none}
.seal{flex:0 0 32px;height:32px;border-radius:50%;background:linear-gradient(150deg,#69F0C0,#1D9E75);color:#0b2a1f;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px}
.rp-done.show .seal{animation:pop .5s cubic-bezier(.18,.9,.28,1.5)}
@keyframes pop{0%{transform:scale(.5)}100%{transform:scale(1)}}

/* --- added real-content sections --- */
.logostrip{padding:30px 0 6px;text-align:center}
.logostrip .lbl{font-family:'Sora';font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.logowall{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center}
.lchip{background:rgba(255,255,255,.94);border-radius:12px;padding:10px 16px;display:flex;align-items:center;justify-content:center;height:54px;min-width:112px}
.lchip img{max-height:28px;max-width:120px;object-fit:contain;display:block}
.mods{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.modcard{background:var(--glass);border:1px solid var(--bd);border-radius:16px;padding:20px;backdrop-filter:blur(14px);cursor:pointer;transition:border .15s,transform .15s;display:flex;gap:14px;align-items:flex-start}
.modcard:hover{border-color:var(--red);transform:translateY(-3px)}
.modicon{flex:0 0 44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;background:linear-gradient(150deg,rgba(228,58,63,.5),rgba(200,29,154,.42));border:1px solid var(--bd)}
.modcard h4{font-family:'Sora';font-weight:600;font-size:15px}.modcard p{color:var(--muted);font-size:12.5px;margin-top:3px;line-height:1.45}
@media(max-width:820px){.mods{grid-template-columns:1fr}}
.modal{position:fixed;inset:0;z-index:100;background:rgba(10,6,10,.72);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:24px}
.modal.show{display:flex}
.modalcard{background:#241019;border:1px solid var(--bd);border-radius:22px;max-width:440px;width:100%;padding:30px;position:relative}
.modalcard .x{position:absolute;top:14px;right:18px;cursor:pointer;color:var(--muted);font-size:22px}
.modalcard .mi{width:56px;height:56px;border-radius:14px;background:linear-gradient(150deg,var(--red-hi),var(--magenta));display:flex;align-items:center;justify-content:center;font-size:28px;margin-bottom:14px}
.modalcard h3{font-family:'Sora';font-size:22px;font-weight:700}.modalcard p{color:#D9CBD3;font-size:14.5px;line-height:1.6;margin-top:8px}
.bens{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.ben .bi{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid var(--bd);display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:12px}
.ben h4{font-family:'Sora';font-weight:600;font-size:16px}.ben p{color:var(--muted);font-size:13.5px;margin-top:5px;line-height:1.5}
@media(max-width:820px){.bens{grid-template-columns:1fr}}
.ptier{margin-bottom:20px}.ptier .pt{font-family:'Sora';font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:center;margin-bottom:12px}
.vidsec{display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:center}
.vidwrap{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--bd);aspect-ratio:16/9;background:#000;box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.vidwrap iframe{width:100%;height:100%;border:0;display:block}
.vquote{font-family:'Sora';font-size:23px;font-weight:600;line-height:1.35}
.vby{display:flex;align-items:center;gap:12px;margin-top:16px}.vby img{width:46px;height:46px;border-radius:50%;object-fit:cover}
.vby b{font-family:'Sora';font-weight:600;font-size:15px;display:block}.vby span{color:var(--muted);font-size:13px}
@media(max-width:820px){.vidsec{grid-template-columns:1fr}}

/* --- added by the consolidation build: shared nav chrome --- */
.logo img{height:34px;display:block}
.nav-cta{display:flex;gap:12px;align-items:center}
.nav-login{font-size:14.5px;font-weight:600;color:var(--muted)}
.nav-login:hover{color:var(--ink)}
