/* Rekaz landing page — standalone, brand-matched (red #e53e26 / ink #231f20) */
:root{
  --bg:#171415; --bg2:#1b1718; --card:#231f20; --card2:#2c2728;
  --tx:#f5f1f0; --tx2:#b3a8a9; --tx3:#7d7273; --bd:#35302f;
  --red:#e53e26; --red2:#ff7a5c; --red-rgb:229,62,38;
  --grad:linear-gradient(135deg,#e53e26 0%,#ff7a5c 100%);
  --r:16px; --ease:cubic-bezier(.22,1,.36,1);
  --soft:var(--soft); --bar:var(--bar); --bar2:var(--bar2);
  --glass:var(--glass); --glass-solid:var(--glass-solid); --float:var(--float);
  --shadow-lg:0 30px 80px rgba(0,0,0,.55); --shadow-md:0 24px 60px rgba(0,0,0,.45); --shadow-hover:0 18px 40px rgba(0,0,0,.4); --shadow-sm:0 12px 30px rgba(0,0,0,.45);
  --ok:#6fe0ae; --warn:#ffc65c; --bad:#ff8f7c; --inset:rgba(0,0,0,.25);
  color-scheme:dark;
}
:root[data-theme=light]{
  --bg:#faf7f6; --bg2:#f1ecea; --card:#ffffff; --card2:#fcfaf9;
  --tx:#231f20; --tx2:#5d5253; --tx3:#8a7f80; --bd:#e5dedc;
  --soft:rgba(35,31,32,.045); --bar:#ddd5d3; --bar2:#e8e2e0;
  --glass:rgba(250,247,246,.86); --glass-solid:rgba(250,247,246,.98); --float:rgba(255,255,255,.95);
  --shadow-lg:0 30px 70px rgba(60,40,36,.18); --shadow-md:0 20px 50px rgba(60,40,36,.14); --shadow-hover:0 18px 40px rgba(60,40,36,.16); --shadow-sm:0 12px 28px rgba(60,40,36,.14);
  --ok:#1b8a5c; --warn:#a8650a; --bad:#c9331d; --inset:rgba(35,31,32,.06);
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body.lp{font-family:'Tajawal',system-ui,sans-serif;background:var(--bg);color:var(--tx);line-height:1.7;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
.lp-wrap{width:100%;max-width:1160px;margin:0 auto;padding:0 20px}

/* progress */
.lp-progress{position:fixed;top:0;inset-inline:0;height:3px;background:var(--grad);transform:scaleX(0);transform-origin:right;z-index:100}
[dir=ltr] .lp-progress{transform-origin:left}

/* logo (wordmark cropped from the combined logo file) */
.lp-logo-crop{display:block;position:relative;height:44px;aspect-ratio:940/675;overflow:hidden;flex:none}
.lp-logo-crop img{position:absolute;left:0;top:calc(-80/675*100%);height:calc(898/675*100%);width:auto;max-width:none}
.lp-logo-sm{height:34px}

/* nav */
.lp-nav{position:fixed;top:0;inset-inline:0;z-index:90;transition:background .3s,box-shadow .3s,backdrop-filter .3s}
.lp-nav.is-stuck{background:var(--glass);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--bd)}
.lp-nav-inner{display:flex;align-items:center;gap:24px;height:72px}
.lp-links{display:flex;gap:28px;margin-inline-start:auto}
@media (min-width:961px) and (max-width:1120px){.lp-links{gap:18px}}
.lp-links a{color:var(--tx2);font-weight:500;position:relative;padding:4px 0;transition:color .2s}
.lp-links a::after{content:"";position:absolute;inset-inline:0;bottom:-2px;height:2px;background:var(--grad);transform:scaleX(0);transition:transform .3s var(--ease)}
.lp-links a:hover{color:var(--tx)}
.lp-links a:hover::after{transform:scaleX(1)}
.lp-nav-actions{display:flex;align-items:center;gap:10px}
.lp-nav-actions form{display:inline}
.lp-burger{display:none;background:none;border:0;width:40px;height:40px;cursor:pointer;flex-direction:column;justify-content:center;gap:5px;align-items:center}
.lp-burger span{width:22px;height:2px;background:var(--tx);border-radius:2px;transition:transform .3s,opacity .3s}
.is-open .lp-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.is-open .lp-burger span:nth-child(2){opacity:0}
.is-open .lp-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* buttons */
.lp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:700;border:1px solid transparent;border-radius:12px;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s,background .25s,border-color .25s;position:relative;overflow:hidden;white-space:nowrap}
.lp-btn-sm{padding:8px 16px;font-size:.92rem}
.lp-btn-lg{padding:14px 28px;font-size:1.05rem}
.lp-btn-primary{background:var(--grad);color:#fff;box-shadow:0 8px 24px rgba(var(--red-rgb),.35)}
.lp-btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(var(--red-rgb),.5)}
.lp-btn-ghost{background:var(--soft);border-color:var(--bd);color:var(--tx)}
.lp-btn-ghost:hover{border-color:var(--red);background:rgba(var(--red-rgb),.08);transform:translateY(-2px)}
.lp-btn-light{background:#fff;color:#c9331d;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.lp-btn-light:hover{transform:translateY(-3px) scale(1.02)}
.lp-shine::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);animation:shine 3.6s ease-in-out infinite}
@keyframes shine{0%,60%{left:-60%}100%{left:140%}}
.lp-btn i.fa-arrow-left,.lp-btn i.fa-arrow-right{transition:transform .25s}
.lp-btn:hover i.fa-arrow-left{transform:translateX(-4px)}
.lp-btn:hover i.fa-arrow-right{transform:translateX(4px)}

/* reveal */
.lp-reveal{opacity:0}
.lp-reveal.is-in{opacity:1;animation:lpin .8s var(--ease) var(--d,0s) backwards}
.lp-reveal-scale{--from:translateY(20px) scale(.94)}
@keyframes lpin{from{opacity:0;transform:var(--from,translateY(28px))}}

/* hero */
.lp-hero{position:relative;padding:150px 0 90px;overflow:hidden}
.lp-grid-bg{position:absolute;inset:0;background-image:linear-gradient(var(--soft) 1px,transparent 1px),linear-gradient(90deg,var(--soft) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000 20%,transparent 70%);mask-image:radial-gradient(ellipse at 50% 30%,#000 20%,transparent 70%)}
.lp-orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;pointer-events:none}
.lp-orb-1{width:480px;height:480px;background:rgba(var(--red-rgb),.55);top:-120px;inset-inline-end:-120px;animation:drift 14s ease-in-out infinite}
.lp-orb-2{width:380px;height:380px;background:rgba(255,122,92,.3);bottom:-120px;inset-inline-start:-100px;animation:drift 18s ease-in-out infinite reverse}
.lp-orb-3{width:420px;height:420px;background:rgba(255,255,255,.2);top:-160px;inset-inline-start:10%;animation:drift 16s ease-in-out infinite}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,30px) scale(1.12)}}
.lp-hero-inner{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.lp-badge{display:inline-flex;align-items:center;gap:10px;padding:6px 16px;border:1px solid var(--bd);background:var(--soft);border-radius:999px;color:var(--tx2);font-size:.9rem;margin-bottom:22px}
.lp-pulse{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 rgba(var(--red-rgb),.7);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(var(--red-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--red-rgb),0)}}
.lp-hero h1{font-size:clamp(2.4rem,5.4vw,4.1rem);line-height:1.2;font-weight:800;letter-spacing:-.5px}
.lp-grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:gradmove 6s ease-in-out infinite}
@keyframes gradmove{0%,100%{background-position:0 0}50%{background-position:100% 0}}
.lp-lead{margin-top:20px;font-size:1.15rem;color:var(--tx2);max-width:560px}
.lp-cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.lp-note{margin-top:18px;color:var(--tx3);font-size:.9rem}
.lp-note i{color:var(--red2);margin-inline-end:6px}

/* hero visual */
.lp-hero-visual{position:relative;perspective:1000px;--rx:0deg;--ry:0deg}
.lp-emblem{position:absolute;width:78%;inset-inline-end:-28%;top:-27%;opacity:.14;animation:spin 60s linear infinite;pointer-events:none}
@keyframes spin{to{transform:rotate(360deg)}}
.lp-mock{position:relative;background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--bd);border-radius:20px;box-shadow:var(--shadow-lg),0 0 0 1px rgba(var(--red-rgb),.08);padding:14px 16px 18px;transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .25s ease-out;animation:bob 6s ease-in-out infinite}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -10px}}
.lp-mock-bar{display:flex;align-items:center;gap:6px;margin-bottom:14px}
.lp-mock-bar i{width:10px;height:10px;border-radius:50%;background:var(--bar)}
.lp-mock-bar i:first-child{background:var(--red)}
.lp-mock-bar span{margin-inline-start:auto;color:var(--tx3);font-size:.75rem;letter-spacing:2px;font-weight:700}
.lp-mock-list{display:flex;flex-direction:column;gap:7px}
.lp-row{display:flex;align-items:center;gap:10px;background:var(--soft);border:1px solid var(--bd);border-radius:10px;padding:10px;opacity:.15;transform:translateX(14px);transition:all .5s var(--ease)}
[dir=rtl] .lp-row{transform:translateX(-14px)}
.lp-row.is-on{opacity:1;transform:none;border-color:rgba(var(--red-rgb),.45)}
.lp-row b{width:28px;height:28px;border-radius:8px;background:var(--grad);flex:none}
.lp-row span{flex:1;height:8px;border-radius:4px;background:var(--bar)}
.lp-row em{font-style:normal;font-weight:700;font-size:.85rem;color:var(--tx2)}
.lp-pay{background:var(--grad);border-radius:9px;text-align:center;font-weight:700;padding:7px;font-size:.9rem}
.lp-float{position:absolute;display:flex;align-items:center;gap:8px;background:var(--float);backdrop-filter:blur(8px);border:1px solid var(--bd);border-radius:12px;padding:9px 14px;font-size:.85rem;font-weight:600;box-shadow:var(--shadow-sm)}
.lp-float i{color:var(--red2)}
.lp-float-a{top:-18px;inset-inline-start:-22px;animation:bob 5s ease-in-out infinite}
.lp-float-b{bottom:-20px;inset-inline-end:-14px;animation:bob 7s ease-in-out infinite reverse}

/* stats */
.lp-stats{padding:10px 0 20px}
.lp-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.lp-stat{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);padding:22px;text-align:center;transition:transform .3s var(--ease),border-color .3s}
.lp-stat:hover{transform:translateY(-4px);border-color:rgba(var(--red-rgb),.5)}
.lp-stat strong{display:block;font-size:2rem;font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.lp-stat span{color:var(--tx2);font-size:.92rem}

/* sections */
.lp-section{padding:96px 0}
.lp-alt{background:var(--bg2);border-block:1px solid var(--bd)}
.lp-head{text-align:center;max-width:680px;margin:0 auto 52px}
.lp-head h2,.lp-trust h2,.lp-cta h2{font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:800;line-height:1.3}
.lp-head p{margin-top:12px;color:var(--tx2);font-size:1.05rem}

.lp-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.lp-card{position:relative;background:var(--card);border:1px solid var(--bd);border-radius:var(--r);padding:28px;overflow:hidden;transition:transform .35s var(--ease),border-color .35s,box-shadow .35s}
.lp-card::before{content:"";position:absolute;inset:0;background:radial-gradient(400px circle at 100% 0,rgba(var(--red-rgb),.14),transparent 55%);opacity:0;transition:opacity .35s}
.lp-card:hover{transform:translateY(-6px);border-color:rgba(var(--red-rgb),.55);box-shadow:var(--shadow-hover)}
.lp-card:hover::before{opacity:1}
.lp-card h3{font-size:1.2rem;margin:16px 0 8px;position:relative}
.lp-card p{color:var(--tx2);font-size:.98rem;position:relative}
.lp-ico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:1.3rem;color:#fff;background:var(--grad);box-shadow:0 8px 20px rgba(var(--red-rgb),.35);position:relative;transition:transform .4s var(--ease)}
.lp-card:hover .lp-ico,.lp-mod:hover .lp-ico{transform:rotate(-8deg) scale(1.1)}
.lp-ico-lg{width:60px;height:60px;font-size:1.5rem;flex:none}

/* steps */
.lp-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative}
.lp-steps::before{content:"";position:absolute;top:28px;inset-inline:12%;height:2px;background:repeating-linear-gradient(90deg,var(--bd) 0 8px,transparent 8px 16px)}
.lp-step{position:relative;text-align:center}
.lp-step-n{width:56px;height:56px;margin:0 auto 16px;border-radius:50%;display:grid;place-items:center;font-size:1.3rem;font-weight:800;background:var(--card);border:2px solid var(--red);color:var(--red2);position:relative;transition:background .3s,color .3s,transform .3s var(--ease)}
.lp-step:hover .lp-step-n{background:var(--grad);color:#fff;transform:scale(1.12)}
.lp-step h3{font-size:1.1rem;margin-bottom:6px}
.lp-step p{color:var(--tx2);font-size:.95rem}

/* modules */
.lp-mods{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.lp-mod{display:flex;gap:18px;align-items:flex-start;background:var(--card);border:1px solid var(--bd);border-radius:var(--r);padding:24px;transition:transform .35s var(--ease),border-color .35s}
.lp-mod:hover{transform:translateY(-4px);border-color:rgba(var(--red-rgb),.5)}
.lp-mod h3{font-size:1.15rem;margin-bottom:4px}
.lp-mod p{color:var(--tx2);font-size:.97rem}

/* trust */
.lp-trust{display:grid;grid-template-columns:1fr 1.2fr;gap:48px;align-items:center}
.lp-trust ul{display:grid;gap:14px}
.lp-trust li{display:flex;gap:14px;align-items:center;background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:16px 20px;transition:transform .3s var(--ease),border-color .3s}
.lp-trust li:hover{transform:translateX(-6px);border-color:rgba(var(--red-rgb),.5)}
[dir=ltr] .lp-trust li:hover{transform:translateX(6px)}
.lp-trust li i{color:var(--red2);font-size:1.2rem}

/* faq */
.lp-faq-wrap{max-width:820px}
.lp-faq{background:var(--card);border:1px solid var(--bd);border-radius:14px;margin-bottom:12px;overflow:hidden;transition:border-color .3s}
.lp-faq.is-open{border-color:rgba(var(--red-rgb),.5)}
.lp-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 22px;font-weight:700;font-size:1.05rem}
.lp-faq summary::-webkit-details-marker{display:none}
.lp-faq summary i{color:var(--red2);transition:transform .35s var(--ease);flex:none}
.lp-faq.is-open summary i{transform:rotate(135deg)}
.lp-faq:not(.is-open) summary i{transform:none}
.lp-faq p{padding:0 22px 20px;color:var(--tx2);animation:faqin .4s var(--ease)}
@keyframes faqin{from{opacity:0;transform:translateY(-8px)}}

/* cta */
.lp-cta{position:relative;overflow:hidden;text-align:center;padding:90px 0;background:linear-gradient(135deg,#c9331d 0%,#e53e26 50%,#ff7a5c 100%);background-size:200% 200%;animation:gradmove 10s ease-in-out infinite}
.lp-cta .lp-wrap{position:relative}
.lp-cta p{margin:12px 0 30px;font-size:1.1rem;color:rgba(255,255,255,.9)}

/* footer */
.lp-footer{background:var(--bg);border-top:1px solid var(--bd);padding:26px 0;color:var(--tx3);font-size:.9rem}
.lp-footer-inner{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}

/* responsive */
@media (max-width:960px){
  .lp-hero-inner{grid-template-columns:1fr;text-align:center}
  .lp-lead{margin-inline:auto}
  .lp-cta-row{justify-content:center}
  .lp-hero-visual{max-width:520px;margin:30px auto 0;width:100%}
  .lp-stats-grid{grid-template-columns:repeat(2,1fr)}
  .lp-cards{grid-template-columns:repeat(2,1fr)}
  .lp-steps{grid-template-columns:repeat(2,1fr);row-gap:36px}
  .lp-steps::before{display:none}
  .lp-trust{grid-template-columns:1fr}
}
@media (max-width:720px){
  .lp-burger{display:flex}
  .lp-links{position:absolute;top:72px;inset-inline:0;flex-direction:column;gap:0;background:var(--glass-solid);backdrop-filter:blur(14px);border-bottom:1px solid var(--bd);max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
  .lp-links a{padding:16px 24px;border-top:1px solid var(--bd)}
  .lp-links a::after{display:none}
  .is-open .lp-links{max-height:320px}
  .lp-nav.is-open{background:var(--glass-solid)}
  .lp-nav-actions .lp-btn-primary{display:none}
  .lp-hero{padding:120px 0 70px}
  .lp-section{padding:70px 0}
  .lp-cards,.lp-mods{grid-template-columns:1fr}
  .lp-float-a{inset-inline-start:-6px}
  .lp-float-b{inset-inline-end:-6px}
  .lp-footer-inner{justify-content:center;text-align:center}
}
@media (max-width:480px){
  .lp-steps{grid-template-columns:1fr}
  .lp-stat{padding:16px 10px}
  .lp-stat strong{font-size:1.5rem}
  .lp-stat span{font-size:.8rem}
  .lp-btn-lg{width:100%}
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .lp-reveal{opacity:1;transform:none}
  .lp-row{opacity:1;transform:none}
}

/* ===== showcase tabs ===== */
.lp-tabs{position:relative;display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:36px}
.lp-tab{position:relative;z-index:1;isolation:isolate;display:inline-flex;align-items:center;gap:9px;font:inherit;font-weight:700;color:var(--tx2);background:var(--card);border:1px solid var(--bd);border-radius:999px;padding:10px 22px;cursor:pointer;transition:color .35s,background .35s,border-color .35s,transform .25s var(--ease)}
.lp-tab:hover{color:var(--tx);border-color:rgba(var(--red-rgb),.5);transform:translateY(-2px)}
.lp-tab::before{content:"";position:absolute;inset:-1px;border-radius:inherit;background:var(--grad);opacity:0;transform:scale(.82);transition:opacity .4s var(--ease),transform .55s var(--ease);z-index:-1}
.lp-tab.is-active{color:#fff;border-color:transparent;box-shadow:0 8px 22px rgba(var(--red-rgb),.35)}
.lp-tab.is-active::before{opacity:1;transform:none}
.lp-panels{position:relative;display:grid}
.lp-panel{grid-area:1/1;display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(16px) scale(.985);transition:opacity .5s var(--ease),transform .6s var(--ease),visibility 0s linear .5s}
.lp-panel.is-active{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity .55s var(--ease) .12s,transform .65s var(--ease) .12s,visibility 0s}
@keyframes panelin{from{opacity:0;transform:translateY(18px)}}
/* inner animations replay each time a panel becomes active */
.lp-panel:not(.is-active) .sx-tile,.lp-panel:not(.is-active) .sx-card,.lp-panel:not(.is-active) .lp-bar i,.lp-panel:not(.is-active) .lp-cert-prog i,.lp-panel:not(.is-active) .lp-panel-copy li{animation:none}
.lp-panel-copy h3{font-size:1.7rem;line-height:1.35;margin-bottom:12px}
.lp-panel-copy>p{color:var(--tx2);font-size:1.05rem;margin-bottom:20px}
.lp-panel-copy li{display:flex;gap:10px;align-items:center;padding:7px 0;color:var(--tx)}
.lp-panel-copy li i{color:var(--red2)}
.lp-panel.is-active .lp-panel-copy li{animation:liin .5s var(--ease) both}
.lp-panel.is-active .lp-panel-copy li:nth-child(1){animation-delay:.15s}
.lp-panel.is-active .lp-panel-copy li:nth-child(2){animation-delay:.25s}
.lp-panel.is-active .lp-panel-copy li:nth-child(3){animation-delay:.35s}
@keyframes liin{from{opacity:0;transform:translateX(16px)}}
[dir=ltr] .lp-panel.is-active .lp-panel-copy li{animation-name:liin-l}
@keyframes liin-l{from{opacity:0;transform:translateX(-16px)}}
.lp-win{background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--bd);border-radius:20px;padding:14px 16px 18px;box-shadow:var(--shadow-md);min-height:320px}
.lp-panel-visual{position:relative}
.lp-panel-visual::before{content:"";position:absolute;inset:8% 6%;background:rgba(var(--red-rgb),.25);filter:blur(70px);z-index:0}
.lp-win{position:relative;z-index:1}

/* ===== showcase mockups (data + icons) ===== */
.sx-ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--grad);color:#fff;font-size:1.05rem;flex:none;box-shadow:0 6px 14px rgba(var(--red-rgb),.3)}
.sx-ic-sm{width:28px;height:28px;border-radius:8px;font-size:.78rem;box-shadow:none}
.sx-mono{font-family:ui-monospace,monospace;letter-spacing:.5px}

/* cashier */
.sx-pos{display:grid;grid-template-columns:1.25fr 1fr;gap:12px}
.sx-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;align-content:stretch}
.sx-tile{position:relative;background:var(--soft);border:1px solid var(--bd);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:6px;animation:tilein .5s var(--ease) both;animation-delay:calc(var(--i)*.07s);transition:transform .3s var(--ease),border-color .3s}
.sx-tile:hover{transform:translateY(-3px);border-color:rgba(var(--red-rgb),.5)}
.sx-tile.is-picked{border-color:rgba(var(--red-rgb),.55);background:rgba(var(--red-rgb),.07)}
.sx-tile b{font-size:.74rem;line-height:1.3;font-weight:700;min-height:2.4em;color:var(--tx)}
.sx-tile em{font-style:normal;font-weight:800;font-size:.85rem;color:var(--red2);font-variant-numeric:tabular-nums}
.sx-tile u{position:absolute;top:8px;inset-inline-end:8px;width:18px;height:18px;border-radius:50%;background:#3ecf8e;color:#fff;display:grid;place-items:center;font-size:.55rem;text-decoration:none}
.sx-side{background:var(--soft);border:1px solid rgba(var(--red-rgb),.28);border-radius:12px;padding:11px;display:flex;flex-direction:column;gap:7px}
.sx-side-head{display:flex;align-items:center;gap:7px;font-weight:700;font-size:.78rem;color:var(--tx2);padding-bottom:7px;border-bottom:1px dashed var(--bd)}
.sx-side-head i{color:var(--red2)}
.sx-side-head span{margin-inline-start:auto;color:var(--tx3)}
.sx-line{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:.74rem;color:var(--tx)}
.sx-line small{color:var(--tx3)}
.sx-line em,.sx-sums em{font-style:normal;font-variant-numeric:tabular-nums;color:var(--tx2);font-weight:600}
.sx-sums{margin-top:auto;border-top:1px dashed var(--bd);padding-top:7px;display:flex;flex-direction:column;gap:3px;font-size:.72rem;color:var(--tx3)}
.sx-sums>div{display:flex;justify-content:space-between}
.sx-grand{align-items:baseline;margin-top:2px}
.sx-grand span{color:var(--tx2);font-size:.78rem}
.sx-grand strong{font-size:1.1rem;color:var(--tx);display:flex;gap:5px;align-items:center;font-variant-numeric:tabular-nums}
.sx-grand strong img{height:11px;width:auto;filter:brightness(0) invert(1)}
:root[data-theme=light] .sx-grand strong img{filter:none}
.sx-methods{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.sx-methods span{height:30px;border-radius:8px;border:1px solid var(--bd);display:grid;place-items:center;color:var(--tx3);font-size:.85rem;transition:all .3s}
.sx-methods span.is-on{border-color:var(--red);color:var(--red2);background:rgba(var(--red-rgb),.1)}

/* inventory */
.sx-sum{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.sx-sum span{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;background:var(--soft);border:1px solid var(--bd);font-size:.74rem;font-weight:700;color:var(--tx2)}
.sx-sum span i{color:var(--red2)}
.sx-sum .warn i{color:var(--warn)}.sx-sum .bad i{color:var(--bad)}
.sx-inv{display:flex;flex-direction:column;gap:8px}
.sx-inv-row{display:grid;grid-template-columns:40px minmax(0,1.5fr) minmax(0,.8fr) minmax(0,1fr) auto;gap:12px;align-items:center;background:var(--soft);border:1px solid var(--bd);border-radius:12px;padding:8px 12px;transition:border-color .3s,transform .3s var(--ease)}
.sx-inv-row:hover{border-color:rgba(var(--red-rgb),.45);transform:translateX(calc(var(--dir) * -3px))}
.sx-inv-name{display:flex;flex-direction:column;min-width:0}
.sx-inv-name b{font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-inv-name small{color:var(--tx3);font-size:.68rem;font-family:ui-monospace,monospace;text-align:start}
.sx-inv-branch{font-size:.72rem;color:var(--tx2);white-space:nowrap}
.sx-inv-branch i{color:var(--tx3);margin-inline-end:6px}
.sx-inv-qty{display:flex;align-items:center;gap:8px}
.sx-inv-qty strong{font-size:.9rem;min-width:1.6rem;font-variant-numeric:tabular-nums}
.sx-inv-qty .lp-bar{flex:1}
.lp-bar{height:8px;border-radius:4px;background:var(--bar2);overflow:hidden}
.lp-bar i{display:block;height:100%;width:var(--w);border-radius:4px;background:linear-gradient(90deg,#3ecf8e,#7ee2b8);transform-origin:left;animation:barin 1.2s var(--ease) both;animation-delay:calc(var(--i)*.12s)}
[dir=rtl] .lp-bar i{transform-origin:right}
.lp-bar.low i{background:linear-gradient(90deg,#f5a623,#ffd27a)}
.lp-bar.out i{background:linear-gradient(90deg,#e53e26,#ff7a5c)}
@keyframes barin{from{transform:scaleX(0)}}
.lp-chip{font-style:normal;font-size:.7rem;font-weight:700;padding:3px 10px;border-radius:999px;flex:none;min-width:62px;text-align:center;display:inline-flex;align-items:center;justify-content:center;gap:5px}
.lp-chip.ok{background:rgba(62,207,142,.15);color:var(--ok)}
.lp-chip.warn{background:rgba(245,166,35,.16);color:var(--warn)}
.lp-chip.bad{background:rgba(var(--red-rgb),.18);color:var(--bad);animation:pulsechip 1.6s infinite}
@keyframes pulsechip{50%{opacity:.55}}

/* repairs */
.sx-kanban{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.sx-col{background:var(--soft);border:1px solid var(--bd);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:8px;min-width:0}
.sx-col-head{display:flex;align-items:center;gap:7px;font-weight:700;font-size:.75rem;color:var(--tx2)}
.sx-col-head i{color:var(--c)}
.sx-col-head u{margin-inline-start:auto;text-decoration:none;min-width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--c);color:#fff;font-size:.68rem}
.sx-card{background:var(--card2);border:1px solid var(--bd);border-radius:10px;padding:9px;display:flex;flex-direction:column;gap:6px;border-inline-start:3px solid var(--c);animation:kin .6s var(--ease) both;animation-delay:calc(var(--i)*.12s);transition:transform .3s var(--ease)}
.sx-card:hover{transform:translateY(-2px)}
@keyframes kin{from{opacity:0;transform:translateY(-14px)}}
.sx-card-top{display:flex;align-items:center;gap:8px;min-width:0}
.sx-card-top b{font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-issue{font-size:.7rem;color:var(--tx2);display:flex;gap:6px;align-items:center}
.sx-issue i{color:var(--c);width:12px;text-align:center;font-size:.68rem}
.sx-card-foot{display:flex;align-items:center;gap:6px;font-size:.66rem;color:var(--tx3)}
.sx-when{margin-inline-start:auto;display:inline-flex;align-items:center;gap:4px}
.sx-when i{color:#25D366}
.sx-av{width:20px;height:20px;border-radius:50%;background:var(--bar);color:var(--tx);font-style:normal;font-weight:700;font-size:.62rem;display:grid;place-items:center}

/* warranty certificate */
.sx-cert{border:1px dashed rgba(var(--red-rgb),.5);border-radius:14px;padding:16px;background:linear-gradient(135deg,var(--card2),var(--card));display:flex;flex-direction:column;gap:14px}
.sx-cert-head{display:flex;align-items:center;gap:12px}
.sx-cert-head>div{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.sx-cert-head strong{font-size:1rem}
.sx-cert-head small{color:var(--tx3);font-family:ui-monospace,monospace;letter-spacing:1px;text-align:start}
.sx-cert-head .lp-chip{margin-inline-start:auto}
.sx-cert-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
.sx-cert-grid>div{background:var(--soft);border:1px solid var(--bd);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:2px;min-width:0}
.sx-cert-grid small{color:var(--tx3);font-size:.68rem;display:flex;gap:6px;align-items:center}
.sx-cert-grid small i{color:var(--red2);width:12px;text-align:center}
.sx-cert-grid b{font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-cert-prog-top{display:flex;justify-content:space-between;font-size:.72rem;color:var(--tx2);margin-bottom:6px}
.sx-cert-prog-top em{font-style:normal;font-weight:700;color:var(--red2)}
.lp-cert-prog{height:10px;border-radius:5px;background:var(--bar2);overflow:hidden}
.lp-cert-prog i{display:block;height:100%;width:67%;background:var(--grad);border-radius:5px;transform-origin:left;animation:barin 1.6s var(--ease) both .3s}
[dir=rtl] .lp-cert-prog i{transform-origin:right}
.sx-cert-foot{display:flex;align-items:center;gap:14px;font-size:.72rem;color:var(--tx2)}
.sx-cert-foot span i{color:var(--red2);margin-inline-end:6px}
.sx-qr{margin-inline-start:auto;font-size:2rem;color:var(--tx)}

@media (max-width:560px){
  .sx-pos{grid-template-columns:1fr}
  .sx-inv-row{grid-template-columns:40px minmax(0,1fr) auto;row-gap:6px}
  .sx-inv-branch,.sx-inv-qty{grid-column:2 / -1}
  .sx-kanban{grid-template-columns:1fr}
  .sx-cert-grid{grid-template-columns:1fr}
}

/* use cases */
.lp-uc{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.lp-uc-card{text-align:center;background:var(--card);border:1px solid var(--bd);border-radius:var(--r);padding:28px 20px;transition:transform .35s var(--ease),border-color .35s,box-shadow .35s}
.lp-uc-card:hover{transform:translateY(-6px);border-color:rgba(var(--red-rgb),.55);box-shadow:var(--shadow-hover)}
.lp-uc-card i{font-size:2rem;color:var(--red2);margin-bottom:14px;display:inline-block;transition:transform .4s var(--ease)}
.lp-uc-card:hover i{transform:scale(1.2) rotate(-6deg)}
.lp-uc-card h3{font-size:1.1rem;margin-bottom:6px}
.lp-uc-card p{color:var(--tx2);font-size:.95rem}

/* nav scrollspy + back to top */
.lp-links a.is-active{color:var(--tx)}
.lp-links a.is-active::after{transform:scaleX(1)}
.lp-top{position:fixed;bottom:22px;inset-inline-start:22px;width:46px;height:46px;border-radius:50%;border:0;background:var(--grad);color:#fff;box-shadow:0 8px 22px rgba(var(--red-rgb),.45);cursor:pointer;z-index:80;opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .3s,transform .3s var(--ease),box-shadow .3s,filter .25s}
.lp-top.is-show{opacity:1;transform:none;pointer-events:auto}
.lp-top:hover{filter:brightness(1.08);box-shadow:0 12px 28px rgba(var(--red-rgb),.6);transform:translateY(-3px)}
.lp-top i{transition:transform .3s var(--ease)}
.lp-top:hover i{transform:translateY(-2px)}

/* card spotlight following the cursor */
.lp-card::after,.lp-uc-card::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(var(--red-rgb),.16),transparent 70%);opacity:0;transition:opacity .3s}
.lp-uc-card{position:relative;overflow:hidden}
.lp-card:hover::after,.lp-uc-card:hover::after{opacity:1}

@media (max-width:960px){
  .lp-panel,.lp-panel.is-active{grid-template-columns:1fr;gap:28px}
  .lp-uc{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:480px){
  .lp-uc{grid-template-columns:1fr}
  .lp-tab{padding:9px 16px;font-size:.92rem}
  .lp-pos{grid-template-columns:1fr}
  .lp-pos-grid{grid-template-columns:repeat(3,1fr)}
}

/* ===== contact form ===== */
.lp-contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.lp-contact-copy h2{font-size:clamp(1.8rem,3.4vw,2.5rem);font-weight:800;line-height:1.3;margin-bottom:12px}
.lp-contact-copy>p{color:var(--tx2);font-size:1.05rem;margin-bottom:22px}
.lp-perks li{display:flex;gap:10px;align-items:center;padding:6px 0}
.lp-perks i{color:var(--red2)}
.lp-direct{display:grid;gap:12px;margin-top:28px}
.lp-direct a{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:14px 18px;transition:transform .3s var(--ease),border-color .3s}
.lp-direct a:hover{transform:translateY(-3px);border-color:rgba(var(--red-rgb),.55)}
.lp-direct a>i{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--grad);color:#fff;font-size:1.1rem;flex:none}
.lp-direct small{display:block;color:var(--tx3);font-size:.8rem;line-height:1.3}
.lp-direct b{font-weight:700;word-break:break-all}

.lp-form-card{position:relative;background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--bd);border-radius:20px;padding:30px;box-shadow:var(--shadow-md);overflow:hidden}
.lp-form-card form{position:relative;display:grid;gap:18px}
.lp-form-card form[hidden]{display:none}
.lp-row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.lp-hp{position:absolute!important;width:0;height:0;overflow:hidden;opacity:0;pointer-events:none}

/* floating-label fields */
.lp-field{position:relative}
.lp-field input,.lp-field textarea{width:100%;font:inherit;color:var(--tx);background:var(--bg);border:1px solid var(--bd);border-radius:12px;padding:22px 14px 8px;outline:none;transition:border-color .25s,box-shadow .25s;resize:vertical}
.lp-field textarea{min-height:120px}
.lp-field label{position:absolute;inset-inline-start:15px;top:15px;color:var(--tx3);pointer-events:none;transition:transform .2s var(--ease),color .2s,font-size .2s;transform-origin:start top}
.lp-field input:focus,.lp-field textarea:focus{border-color:var(--red);box-shadow:0 0 0 4px rgba(var(--red-rgb),.15)}
.lp-field input:focus+label,.lp-field input:not(:placeholder-shown)+label,
.lp-field textarea:focus+label,.lp-field textarea:not(:placeholder-shown)+label{transform:translateY(-10px) scale(.78);color:var(--red2)}
.lp-field.is-bad input,.lp-field.is-bad textarea{border-color:#ff6b57;animation:shake .4s}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.lp-err{display:block;color:var(--bad);font-size:.82rem;min-height:0;margin-top:4px}
.lp-err:empty{display:none}
.lp-form-alert{color:var(--bad);font-weight:600;display:none}
.lp-form-alert.is-show{display:block}
.lp-submit{width:100%}
.lp-submit i{transition:transform .3s var(--ease)}
.lp-submit:hover i{transform:translateX(-4px) translateY(-2px) rotate(-8deg)}
[dir=ltr] .lp-submit:hover i{transform:translateX(4px) translateY(-2px) rotate(8deg)}
.lp-submit.is-loading{pointer-events:none;opacity:.85}
.lp-submit.is-loading i{animation:fly 1s linear infinite}
@keyframes fly{50%{transform:translateY(-4px) scale(1.15)}}
.lp-privacy{text-align:center;color:var(--tx3);font-size:.85rem}

/* success state */
.lp-form-done{display:none;text-align:center;padding:36px 12px;position:relative}
.lp-form-done.is-show{display:block;animation:panelin .6s var(--ease)}
.lp-form-done h3{font-size:1.5rem;margin:18px 0 6px}
.lp-form-done p{color:var(--tx2);margin-bottom:22px}
.lp-check{width:84px;height:84px;margin:0 auto;display:block}
.lp-check circle{fill:none;stroke:#3ecf8e;stroke-width:3;stroke-dasharray:151;stroke-dashoffset:151;animation:draw .7s var(--ease) forwards}
.lp-check path{fill:none;stroke:#3ecf8e;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:44;stroke-dashoffset:44;animation:draw .5s var(--ease) .45s forwards}
@keyframes draw{to{stroke-dashoffset:0}}

@media (max-width:960px){
  .lp-contact{grid-template-columns:1fr;gap:36px}
}
@media (max-width:560px){
  .lp-row2{grid-template-columns:1fr}
  .lp-form-card{padding:22px 18px}
}

/* ===== design pass 2 ===== */

/* theme toggle + dual-ink logo */
.lp-theme{width:43px;height:43px;padding:0;display:inline-flex;align-items:center;justify-content:center}
.lp-theme i{font-size:.95rem;line-height:1;width:1em;text-align:center}
/* the icon shows where a click goes: a sun while dark, a moon while light */
.lp-theme i:first-child{display:none}
.lp-theme i:last-child{display:inline}
:root[data-theme=light] .lp-theme i:first-child{display:inline}
:root[data-theme=light] .lp-theme i:last-child{display:none}
.lp-theme i{transition:transform .4s var(--ease)}
.lp-theme:hover i{transform:rotate(25deg) scale(1.1)}
.lp-logo-crop.lp-logo-on-light{display:none}
:root[data-theme=light] .lp-logo-crop.lp-logo-on-light{display:block}
:root[data-theme=light] .lp-logo-crop.lp-logo-on-dark{display:none}
:root[data-theme=light] .lp-orb{opacity:.28}
:root[data-theme=light] .lp-emblem{opacity:.45;filter:brightness(.82) saturate(1.15)}
:root[data-theme=light] .lp-cart-total strong img{filter:none}
:root[data-theme=light] .lp-tab.is-active,:root[data-theme=light] .lp-btn-primary{color:#fff}
body.lp{transition:background-color .35s,color .35s}

/* eyebrow above section titles */
.lp-eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--red2);font-weight:700;font-size:.85rem;letter-spacing:.5px;margin-bottom:14px}
.lp-eyebrow::before,.lp-eyebrow::after{content:"";width:26px;height:2px;border-radius:2px;background:var(--grad)}
.lp-eyebrow::before{opacity:.45}

/* hero headline: word-by-word entrance */
.lp-w{display:inline-block;opacity:0;transform:translateY(24px) rotate(2deg);animation:wordin .8s var(--ease) forwards;animation-delay:calc(.15s + var(--w)*.09s)}
@keyframes wordin{to{opacity:1;transform:none}}

/* hero dashboard */
.lp-dash{display:grid;grid-template-columns:44px 1fr;gap:14px}
.lp-side{display:flex;flex-direction:column;gap:8px;padding-inline-end:12px;border-inline-end:1px solid var(--bd)}
.lp-side b{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:var(--tx3);font-size:.85rem}
.lp-side b.is-on{background:var(--grad);color:#fff;box-shadow:0 6px 16px rgba(var(--red-rgb),.35)}
.lp-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.lp-kpi{background:var(--soft);border:1px solid var(--bd);border-radius:11px;padding:9px 10px;display:flex;flex-direction:column;gap:2px;min-width:0}
.lp-kpi small{color:var(--tx3);font-size:.68rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-kpi strong{font-size:1.15rem;font-variant-numeric:tabular-nums;line-height:1.2}
.lp-kpi em{font-style:normal;font-size:.68rem;color:var(--tx3)}
.lp-kpi em.up{color:#3ecf8e}
.lp-chart{margin-top:10px;background:var(--soft);border:1px solid var(--bd);border-radius:11px;padding:10px 10px 8px;height:150px;display:flex;flex-direction:column}
.lp-chart svg{flex:1;width:100%;min-height:0;overflow:visible}
.lp-line{stroke-dasharray:1;stroke-dashoffset:1;animation:linedraw 7s ease-in-out infinite}
.lp-area{opacity:0;animation:areain 7s ease-in-out infinite}
@keyframes linedraw{0%{stroke-dashoffset:1}35%,88%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
@keyframes areain{0%,15%{opacity:0}40%,88%{opacity:1}100%{opacity:0}}
.lp-chart-days{display:flex;justify-content:space-between;margin-top:6px}
.lp-chart-days span{width:18px;height:4px;border-radius:2px;background:var(--bar)}
.lp-cartcard{position:absolute;bottom:0;inset-inline-end:-14px;width:52%;max-width:270px;background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid rgba(var(--red-rgb),.35);border-radius:16px;padding:12px;box-shadow:var(--shadow-lg);animation:bob 6s ease-in-out infinite reverse;z-index:2}
.lp-cart-head{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.8rem;margin-bottom:10px;color:var(--tx2)}
.lp-cart-head i{color:var(--red2)}
.lp-cart-total{display:flex;justify-content:space-between;align-items:baseline;margin:10px 0 8px;border-top:1px dashed var(--bd);padding-top:8px}
.lp-cart-total small{color:var(--tx2);font-size:.78rem}
.lp-cart-total strong{font-size:1.35rem;display:flex;align-items:center;gap:5px;font-variant-numeric:tabular-nums}
.lp-cart-total strong img{height:13px;width:auto;filter:brightness(0) invert(1)}
.lp-float-a{top:-18px;inset-inline-start:-22px}
.lp-float-b{top:auto;bottom:70px;inset-inline-end:auto;inset-inline-start:-18px}
.lp-hero-visual{padding-bottom:190px}

/* features: bento grid */
.lp-bento{grid-template-columns:repeat(6,1fr)}
.lp-span-2{grid-column:span 2}.lp-span-3{grid-column:span 3}.lp-span-4{grid-column:span 4}
.lp-card-body{position:relative}
.lp-card-feat{display:flex;flex-direction:column;justify-content:space-between;gap:22px}
.lp-span-4.lp-card-feat{flex-direction:row;align-items:center}
.lp-span-4.lp-card-feat .lp-card-body{flex:1.1}
.lp-span-4.lp-card-feat .lp-viz{flex:1}
.lp-card-feat{background:linear-gradient(160deg,var(--card),var(--card2))}
.lp-viz{position:relative;z-index:1}
.lp-viz-pos{display:flex;flex-direction:column;gap:8px}
.lp-chip-row{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--soft);border:1px solid var(--bd);border-radius:10px;padding:9px 12px;font-size:.85rem;color:var(--tx2);transition:transform .4s var(--ease),border-color .3s}
.lp-chip-row em{font-style:normal;font-weight:700;color:var(--tx);font-variant-numeric:tabular-nums}
.lp-chip-total{border-color:rgba(var(--red-rgb),.45);background:rgba(var(--red-rgb),.08)}
.lp-chip-total em{color:var(--red2)}
.lp-card:hover .lp-chip-row:nth-child(odd){transform:translateX(-6px)}
.lp-card:hover .lp-chip-row:nth-child(even){transform:translateX(6px)}
[dir=ltr] .lp-card:hover .lp-chip-row:nth-child(odd){transform:translateX(6px)}
[dir=ltr] .lp-card:hover .lp-chip-row:nth-child(even){transform:translateX(-6px)}
.lp-viz-qr{display:flex;align-items:center;gap:16px}
.lp-qr{width:92px;height:92px;border-radius:14px;background:var(--soft);border:1px solid var(--bd);display:grid;place-items:center;font-size:3.4rem;color:var(--tx);position:relative;overflow:hidden;flex:none}
.lp-qr::after{content:"";position:absolute;inset-inline:0;height:3px;top:0;background:var(--grad);box-shadow:0 0 14px var(--red);animation:scan 2.8s ease-in-out infinite}
@keyframes scan{0%,100%{top:6%}50%{top:90%}}
.lp-qr-lines{flex:1;display:flex;flex-direction:column;gap:9px}
.lp-qr-lines span{height:8px;border-radius:4px;background:var(--bar)}
.lp-qr-lines span:nth-child(2){width:72%}.lp-qr-lines span:nth-child(3){width:46%}
.lp-viz-bars{display:flex;align-items:flex-end;gap:9px;height:130px}
.lp-viz-bars span{flex:1;height:var(--h);border-radius:6px 6px 0 0;background:linear-gradient(180deg,var(--red2),rgba(var(--red-rgb),.3));transform-origin:bottom;animation:growbar 3.2s ease-in-out infinite;animation-delay:calc(var(--i)*.15s)}
@keyframes growbar{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1)}}

/* real partner logos in the marquee */

/* mobile sticky call-to-action */
.lp-sticky{display:none}

@media (max-width:960px){
  .lp-bento{grid-template-columns:repeat(2,1fr)}
  .lp-span-2,.lp-span-3{grid-column:span 1}
  .lp-span-4{grid-column:span 2}
  .lp-span-4.lp-card-feat{flex-direction:column;align-items:stretch}
  .lp-cartcard{inset-inline-end:-6px}
  .lp-float-b{inset-inline-start:-8px}
}
@media (max-width:720px){
  .lp-sticky{display:flex;gap:10px;position:fixed;bottom:0;inset-inline:0;z-index:85;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--glass-solid);backdrop-filter:blur(14px);border-top:1px solid var(--bd);transform:translateY(110%);transition:transform .4s var(--ease)}
  .lp-sticky.is-show{transform:none}
  .lp-sticky .lp-btn{flex:1;padding:12px 10px}
  .lp-top{bottom:84px}
  .lp-footer{padding-bottom:150px}
}
@media (max-width:560px){
  .lp-bento{grid-template-columns:1fr}
  .lp-span-4{grid-column:span 1}
  .lp-kpis{grid-template-columns:repeat(3,1fr)}
  .lp-kpi strong{font-size:1rem}
  .lp-dash{grid-template-columns:36px 1fr;gap:10px}
  .lp-hero-visual{padding-bottom:0}
  .lp-cartcard{position:relative;inset:auto;width:100%;max-width:none;margin-top:14px;bottom:auto;animation:none}
  .lp-float-b{display:none}
}

@media (prefers-reduced-motion:reduce){
  .lp-w{opacity:1;transform:none}
  .lp-line{stroke-dashoffset:0}
  .lp-area{opacity:1}
}

/* compact cart card so it only clips the dashboard's lower corner */
.lp-cartcard .lp-row{padding:6px 8px;gap:8px}
.lp-cartcard .lp-row b{width:22px;height:22px;border-radius:6px}
.lp-cart-head{font-size:.75rem;margin-bottom:8px}
.lp-cart-total{margin:8px 0 8px;padding-top:6px}
.lp-cart-total strong{font-size:1.2rem}
.lp-pay{padding:6px}
.lp-hero-visual{padding-bottom:215px}
@media (max-width:560px){.lp-hero-visual{padding-bottom:0}}

@media (max-width:560px){.lp-float-a{inset-inline-start:6px;top:-14px}}


/* ===== partners marquee (two rows, uniform chips) ===== */
:root{--dir:1}
:root[dir=rtl]{--dir:-1}
.lp-marquees{margin-top:52px;display:grid;gap:14px}
.lp-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.lp-marquee-track{display:flex;gap:14px;width:max-content;animation:marquee 38s linear infinite;animation-direction:normal}
.lp-marquee-rev .lp-marquee-track{animation-direction:reverse;animation-duration:44s}
:root[dir=rtl] .lp-marquee-track{animation-direction:reverse}
:root[dir=rtl] .lp-marquee-rev .lp-marquee-track{animation-direction:normal}
.lp-marquee:hover .lp-marquee-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
:root[dir=rtl] .lp-marquee-track{animation-name:marquee-rtl}
@keyframes marquee-rtl{from{transform:translateX(0)}to{transform:translateX(50%)}}
.lp-pchip{display:inline-flex;align-items:center;gap:12px;height:60px;padding:0 20px 0 14px;padding-inline:14px 20px;border:1px solid var(--bd);border-radius:16px;background:var(--card);flex:none;transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
.lp-pchip:hover{transform:translateY(-3px);border-color:rgba(var(--red-rgb),.5);box-shadow:var(--shadow-sm)}
.lp-ptile{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--c,var(--grad));color:#fff;font-size:1.05rem;flex:none;box-shadow:0 4px 12px rgba(0,0,0,.2)}
.lp-ptile i{color:#fff}
.lp-ptxt{display:flex;flex-direction:column;line-height:1.25;text-align:start}
.lp-ptxt strong{color:var(--tx);font-size:.95rem}
.lp-ptxt small{color:var(--tx3);font-size:.72rem;white-space:nowrap}
.lp-pchip.is-logo{padding:0 14px}
.lp-pchip.is-logo img{height:34px;width:auto;border-radius:8px}

/* ===== more motion ===== */
html[dir=rtl]{--dir:-1}
.lp-reveal-side{--from:translateX(calc(var(--dir) * 44px))}

/* brand shards drifting behind hero and CTA */
.lp-shards{position:absolute;pointer-events:none;inset-inline-end:-6%;bottom:-8%;width:min(620px,52%);height:260px;background:url('/images/brand-shards.svg') no-repeat center/contain;opacity:.55;animation:shardsdrift 18s ease-in-out infinite;translate:0 calc(var(--sy,0) * -.08px)}
@keyframes shardsdrift{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(calc(var(--dir) * -24px),-14px) rotate(2deg)}}
.lp-shards-cta{inset-inline-end:auto;inset-inline-start:-4%;top:-10%;bottom:auto;transform:rotate(180deg);opacity:.35;filter:brightness(0) invert(1)}
.lp-shards-cta{animation-name:shardsdrift2}
@keyframes shardsdrift2{0%,100%{transform:rotate(180deg) translate(0,0)}50%{transform:rotate(180deg) translate(20px,12px)}}
:root[data-theme=light] .lp-shards{opacity:.95;filter:brightness(.8) saturate(1.2)}
:root[data-theme=light] .lp-shards-cta{opacity:.35;filter:brightness(0) invert(1)}

/* cursor glow over the hero */
.lp-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(420px circle at var(--mx,70%) var(--my,30%),rgba(var(--red-rgb),.16),transparent 65%);opacity:var(--glow,0);transition:opacity .4s}
.lp-hero.is-hover{--glow:1}

/* parallax on the hero orbs */
.lp-orb-1{translate:0 calc(var(--sy,0) * .18px)}
.lp-orb-2{translate:0 calc(var(--sy,0) * -.1px)}

/* icons float gently, independent of the hover transform */
.lp-ico{animation:icofloat 5s ease-in-out infinite;animation-delay:calc(var(--d,0s) * 4)}
@keyframes icofloat{50%{translate:0 -4px}}
.lp-card:hover .lp-ico{animation-play-state:paused}

/* eyebrow lines grow in with the heading */
.lp-head.is-in .lp-eyebrow::before,.lp-head.is-in .lp-eyebrow::after{animation:linegrow .9s var(--ease) .2s backwards}
@keyframes linegrow{from{width:0}}
.lp-eyebrow{background:linear-gradient(90deg,var(--red2),var(--red),var(--red2));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gradmove 5s ease-in-out infinite}
.lp-eyebrow::before,.lp-eyebrow::after{-webkit-text-fill-color:initial}

/* steps: connector fills, numbers pop */
.lp-steps::after{content:"";position:absolute;top:28px;inset-inline:12%;height:2px;background:var(--grad);transform:scaleX(0);transform-origin:right;transition:transform 1.6s var(--ease) .3s}
[dir=ltr] .lp-steps::after{transform-origin:left}
.lp-steps.is-in::after{transform:scaleX(1)}
.lp-steps.is-in .lp-step-n{animation:pop .7s var(--ease) backwards;animation-delay:calc(.3s + var(--d,0s))}
@keyframes pop{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.18)}100%{transform:scale(1);opacity:1}}
@media (max-width:960px){.lp-steps::after{display:none}}

/* 3D tilt (driven by --trx/--try from JS) */
.lp-uc-card:hover,.lp-stat:hover{transform:perspective(700px) rotateX(var(--trx,0deg)) rotateY(var(--try,0deg)) translateY(-6px)}
.lp-uc-card,.lp-stat{transition:transform .2s ease-out,border-color .35s,box-shadow .35s}

/* CTA: ripple rings behind the button */
.lp-ripple{position:relative;display:inline-block}
.lp-ripple::before,.lp-ripple::after{content:"";position:absolute;inset:0;border-radius:14px;border:2px solid rgba(255,255,255,.7);animation:ripple 2.8s ease-out infinite;pointer-events:none}
.lp-ripple::after{animation-delay:1.4s}
@keyframes ripple{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.7,2.2);opacity:0}}

/* form success confetti */
.lp-confetti{position:absolute;left:50%;top:38%;width:8px;height:8px;border-radius:2px;pointer-events:none;animation:confetti 1.1s ease-out forwards}
@keyframes confetti{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--cx),var(--cy)) rotate(var(--cr));opacity:0}}

/* number cards: shine sweep */
.lp-stat{position:relative;overflow:hidden}
.lp-stat::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.09),transparent);transform:skewX(-20deg);animation:shine 6s ease-in-out infinite}
.lp-stat:nth-child(2)::after{animation-delay:.8s}.lp-stat:nth-child(3)::after{animation-delay:1.6s}.lp-stat:nth-child(4)::after{animation-delay:2.4s}

@media (prefers-reduced-motion:reduce){
  .lp-eyebrow{color:var(--red2);-webkit-text-fill-color:initial}
  .lp-steps::after{transform:scaleX(1)}
}

/* steps: connector sits behind the number circles */
.lp-steps::before,.lp-steps::after{z-index:0}
.lp-step{z-index:1}

/* contact section: the rotating logo mark sits on the section background, behind the form */
#contact{position:relative;overflow:hidden}
#contact>.lp-wrap{position:relative;z-index:1}
#contact::before{content:"";position:absolute;top:50%;inset-inline-end:-14%;width:min(980px,130vw);aspect-ratio:1;translate:0 -50%;background:url('/images/icon-512x512.png') center/contain no-repeat;opacity:.1;animation:spin 80s linear infinite;pointer-events:none}
:root[data-theme=light] #contact::before{opacity:.38;filter:brightness(.82) saturate(1.15)}


/* footer: contact number + social links */
.lp-footer-inner{gap:20px 32px}
.lp-foot-brand{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.lp-foot-links{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.lp-foot-phone{display:inline-flex;align-items:center;gap:9px;color:var(--tx2);font-weight:600;transition:color .25s}
.lp-foot-phone i{color:var(--red2)}
.lp-foot-phone:hover{color:var(--tx)}
.lp-social{display:flex;gap:10px}
.lp-soc{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;border:1px solid var(--bd);background:var(--card);color:var(--tx2);font-size:1.05rem;position:relative;overflow:hidden;transition:transform .3s var(--ease),color .25s,border-color .25s,box-shadow .3s}
.lp-soc::before{content:"";position:absolute;inset:0;background:var(--c);opacity:0;transition:opacity .25s}
.lp-soc i{position:relative;z-index:1;transition:transform .3s var(--ease)}
.lp-soc:hover{transform:translateY(-4px);color:#fff;border-color:transparent;box-shadow:0 10px 24px rgba(0,0,0,.28)}
.lp-soc:hover::before{opacity:1}
.lp-soc:hover i{transform:scale(1.15) rotate(-6deg)}
.lp-soc-instagram{--c:linear-gradient(45deg,#f09433,#e6683c 30%,#dc2743 55%,#cc2366 75%,#bc1888)}
.lp-soc-whatsapp{--c:#25D366}
.lp-soc-facebook{--c:#1877F2}
.lp-soc-linkedin{--c:#0A66C2}
@media (max-width:720px){
  .lp-foot-brand,.lp-foot-links{justify-content:center}
  .lp-footer-inner{flex-direction:column}
}


/* ===== CTA as a rounded card with a storefront illustration ===== */
.lp-cta{background:none;animation:none;padding:30px 0 80px;text-align:start;overflow:visible}
.lp-cta-card{position:relative;overflow:hidden;border-radius:30px;padding:54px 56px;color:#fff;background:linear-gradient(135deg,#d9341d 0%,#e53e26 45%,#ff7a5c 100%);background-size:200% 200%;animation:gradmove 12s ease-in-out infinite;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:24px;box-shadow:0 30px 70px rgba(var(--red-rgb),.3)}
.lp-cta-card .lp-orb-3{inset-inline-start:auto;inset-inline-end:8%;top:-40%;opacity:.35}
.lp-cta-card .lp-shards-cta{inset-inline-start:34%;inset-inline-end:auto;top:-18%;width:46%;opacity:.22}
.lp-cta-copy{position:relative;z-index:1}
.lp-cta-copy h2{margin-bottom:0}
.lp-cta-copy p{margin:12px 0 28px;font-size:1.1rem;color:rgba(255,255,255,.92);max-width:460px}
.lp-cta-art{position:relative;z-index:1;display:flex;justify-content:center;align-items:flex-end;align-self:stretch;min-height:230px}

/* footer: brand | links | contact, copyright underneath */
.lp-footer{padding:34px 0 26px}
.lp-footer-inner{display:flex;justify-content:space-between;align-items:center;gap:20px 32px;flex-wrap:wrap}
.lp-foot-nav{display:flex;gap:6px 26px;flex-wrap:wrap;justify-content:center}
.lp-foot-nav a{color:var(--tx2);font-weight:500;position:relative;padding:4px 0;transition:color .25s}
.lp-foot-nav a::after{content:"";position:absolute;inset-inline:0;bottom:-1px;height:2px;border-radius:2px;background:var(--grad);transform:scaleX(0);transition:transform .3s var(--ease)}
.lp-foot-nav a:hover{color:var(--tx)}
.lp-foot-nav a:hover::after{transform:scaleX(1)}
.lp-foot-copy{margin-top:24px;padding-top:20px;border-top:1px solid var(--bd);text-align:center;color:var(--tx3);font-size:.88rem}

@media (max-width:860px){
  .lp-cta-card{grid-template-columns:1fr;padding:40px 28px 0;text-align:center}
  .lp-cta-copy p{margin-inline:auto}
  .lp-cta-art{min-height:200px;margin-top:6px}
  .lp-store,.lp-store-img{max-width:320px;margin-bottom:-40px}
  .lp-cta-card .lp-shards-cta{inset-inline-start:10%;width:80%}
}
@media (max-width:720px){
  .lp-footer-inner{flex-direction:column}
  .lp-foot-brand,.lp-foot-links{justify-content:center}
}
@media (max-width:720px){.lp-footer{padding-bottom:150px}}


/* CTA card v2: the storefront illustration from the design sits on the card's art side */
.lp-cta-card{display:flex;align-items:center;min-height:330px;grid-template-columns:none;animation:none;background:linear-gradient(90deg,#fc6947 0%,#f9553d 40%,#f43f2b 75%,#f43f2b 100%)}
:root[dir=ltr] .lp-cta-card{background:linear-gradient(270deg,#fc6947 0%,#f9553d 40%,#f43f2b 75%,#f43f2b 100%)}
.lp-cta-copy{max-width:52%}
.lp-cta-art{position:absolute;top:0;bottom:0;inset-inline-end:0;width:54%;min-height:0;margin:0;padding:0;display:block;z-index:0;-webkit-mask-image:linear-gradient(90deg,#000 62%,transparent 100%);mask-image:linear-gradient(90deg,#000 62%,transparent 100%)}
:root[dir=ltr] .lp-cta-art{-webkit-mask-image:linear-gradient(270deg,#000 62%,transparent 100%);mask-image:linear-gradient(270deg,#000 62%,transparent 100%)}
.lp-store-img{display:block;width:100%;height:100%;max-width:none;margin:0;object-fit:cover;object-position:left center;animation:none;-webkit-mask-image:none;mask-image:none}
:root[dir=ltr] .lp-store-img{transform:scaleX(-1)}
@media (max-width:860px){
  .lp-cta-card{flex-direction:column;align-items:stretch;padding:40px 28px 0;min-height:0;text-align:center;background:linear-gradient(180deg,#f43f2b,#f9553d 70%,#fc6947)}
  :root[dir=ltr] .lp-cta-card{background:linear-gradient(180deg,#f43f2b,#f9553d 70%,#fc6947)}
  .lp-cta-copy{max-width:none}
  .lp-cta-art{position:relative;inset:auto;width:calc(100% + 56px);height:210px;margin:26px -28px 0;-webkit-mask-image:linear-gradient(0deg,#000 60%,transparent 100%);mask-image:linear-gradient(0deg,#000 60%,transparent 100%)}
  :root[dir=ltr] .lp-cta-art{-webkit-mask-image:linear-gradient(0deg,#000 60%,transparent 100%);mask-image:linear-gradient(0deg,#000 60%,transparent 100%)}
  .lp-store-img{object-position:center bottom}
}

/* CTA card: as wide as the design (near full page width) and a slimmer banner */
.lp-cta{padding:30px 0 80px}
.lp-cta>.lp-wrap{max-width:1480px;padding-inline:clamp(14px,3vw,48px)}
.lp-cta-card{min-height:250px;padding:42px clamp(28px,5vw,72px)}
.lp-cta-copy h2{font-size:clamp(1.6rem,2.6vw,2.3rem)}
.lp-cta-copy p{margin:10px 0 22px;font-size:1.05rem}
.lp-cta-art{width:50%}
@media (max-width:860px){
  .lp-cta-card{padding:36px 24px 0}
  .lp-cta-art{width:calc(100% + 48px);margin:22px -24px 0}
}

/* CTA: equal breathing room above and below the card */
.lp-cta{padding:56px 0}
@media (max-width:860px){.lp-cta{padding:44px 0}}


/* CTA art v3: the original storefront illustration; the card gradient starts on its background colour */
.lp-cta-card{background:linear-gradient(90deg,#fb7a5e 0%,#f9593f 36%,#f43f2b 68%,#f43f2b 100%)}
:root[dir=ltr] .lp-cta-card{background:linear-gradient(270deg,#fb7a5e 0%,#f9593f 36%,#f43f2b 68%,#f43f2b 100%)}
.lp-cta-art{width:58%;-webkit-mask-image:linear-gradient(90deg,#000 44%,transparent 94%);mask-image:linear-gradient(90deg,#000 44%,transparent 94%)}
:root[dir=ltr] .lp-cta-art{-webkit-mask-image:linear-gradient(270deg,#000 44%,transparent 94%);mask-image:linear-gradient(270deg,#000 44%,transparent 94%)}
.lp-store-img{object-fit:cover;object-position:center 55%}
@media (max-width:860px){
  .lp-cta-card{background:linear-gradient(180deg,#f43f2b 0%,#f9593f 55%,#fb7a5e 100%)}
  :root[dir=ltr] .lp-cta-card{background:linear-gradient(180deg,#f43f2b 0%,#f9593f 55%,#fb7a5e 100%)}
  .lp-cta-art,:root[dir=ltr] .lp-cta-art{position:relative;inset:auto;width:calc(100% + 48px);height:250px;margin:22px -24px 0;-webkit-mask-image:linear-gradient(0deg,#000 55%,transparent 100%);mask-image:linear-gradient(0deg,#000 55%,transparent 100%)}
  .lp-store-img,:root[dir=ltr] .lp-store-img{object-position:center 60%;transform:none}
}


/* showcase cards: one fixed size for all four tabs (the cashier card's), content stretches to fill it */
.lp-win{display:flex;flex-direction:column;height:376px;min-height:0;overflow:hidden}
.lp-win>.sx-pos,.lp-win>.sx-inv,.lp-win>.sx-kanban,.lp-win>.sx-cert{flex:1 1 auto;min-height:0}
.sx-grid{grid-auto-rows:1fr}
.sx-inv-row{flex:1}
.sx-cert{justify-content:space-between}
.sx-cert-grid{grid-auto-rows:1fr}
@media (max-width:560px){.lp-win{height:auto}}

/* CTA card: a taller banner so more of the storefront shows */
.lp-cta-card{min-height:340px;padding-block:52px}
.lp-store-img{object-position:center 38%}
@media (max-width:860px){.lp-cta-card{min-height:0;padding-block:36px 0}.lp-store-img{object-position:center 60%}}

/* dark theme: no orange glow blob at the bottom of the hero */
:root:not([data-theme=light]) .lp-orb-2{display:none}


/* ===== showcase transitions v2: directional slide, staggered content, progress cue ===== */
.lp-panel,.lp-panel.is-active{transition:none}
.lp-panel{opacity:0;visibility:hidden;transform:none;pointer-events:none}
.lp-panel.is-active{opacity:1;visibility:visible;pointer-events:auto;z-index:2;animation:pIn .85s var(--ease) both}
.lp-panel.is-leaving{opacity:0;visibility:visible;z-index:1;pointer-events:none;animation:pOut .55s cubic-bezier(.4,0,.2,1) both}
@keyframes pIn{from{opacity:0;transform:translateX(calc(var(--d,1) * 64px)) scale(.985)}to{opacity:1;transform:none}}
@keyframes pOut{from{opacity:1;transform:none}to{opacity:0;transform:translateX(calc(var(--d,1) * -64px)) scale(.985)}}
.lp-panel.is-active .lp-panel-copy>*{animation:rise .75s var(--ease) both}
.lp-panel.is-active .lp-panel-copy>h3{animation-delay:.14s}
.lp-panel.is-active .lp-panel-copy>p{animation-delay:.22s}
.lp-panel.is-active .lp-panel-copy>ul{animation-delay:.3s}
.lp-panel.is-active .lp-panel-visual{animation:rise .9s var(--ease) .12s both}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* thin progress line under the active tab while the tour auto-advances */
.lp-tab::after{content:"";position:absolute;inset-inline:22px;bottom:6px;height:2px;border-radius:2px;background:rgba(255,255,255,.8);transform:scaleX(0);transform-origin:right;opacity:0}
:root[dir=ltr] .lp-tab::after{transform-origin:left}
.lp-tabs.is-auto .lp-tab.is-active::after{opacity:1;animation:tabprog 4s linear forwards}
@keyframes tabprog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.lp-panel,.lp-panel.is-active{animation:none!important}.lp-panel.is-active{opacity:1;visibility:visible}}

/* RTL: mirror the hero shards so their dense side hugs the page edge, like the LTR layout */
:root[dir=rtl] .lp-hero .lp-shards{scale:-1 1}


/* ===== shard divider between sections (the full-size brand shard, laid along a straight line) ===== */
.lp-alt-div{border-bottom:0;background:linear-gradient(180deg,var(--bg2) 0,var(--bg2) calc(100% - 110px),var(--bg) 100%)}
.lp-div{position:relative;height:0;z-index:3;pointer-events:none}
.lp-div span{position:absolute;inset-inline:0;top:-70px;height:140px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='140' viewBox='0 0 640 140'%3E%3Cg fill='%23e53e26'%3E%3Cpath d='M-6 -50 L50 0 L-6 50 L-24 50 L32 0 L-24 -50 Z' transform='translate(60 70) rotate(32) scale(1.15)' opacity='0.95'/%3E%3Cpath d='M-6 -50 L50 0 L-6 50 L-24 50 L32 0 L-24 -50 Z' transform='translate(165 64) rotate(-24) scale(0.95)' opacity='0.55'/%3E%3Cpath d='M-6 -50 L50 0 L-6 50 L-24 50 L32 0 L-24 -50 Z' transform='translate(275 74) rotate(58) scale(1.2)' opacity='0.85'/%3E%3Cpath d='M-6 -50 L50 0 L-6 50 L-24 50 L32 0 L-24 -50 Z' transform='translate(385 66) rotate(118) scale(1.0)' opacity='0.5'/%3E%3Cpath d='M-6 -50 L50 0 L-6 50 L-24 50 L32 0 L-24 -50 Z' transform='translate(490 72) rotate(-38) scale(1.1)' opacity='0.75'/%3E%3Cpath d='M-6 -50 L50 0 L-6 50 L-24 50 L32 0 L-24 -50 Z' transform='translate(585 66) rotate(96) scale(0.85)' opacity='0.4'/%3E%3C/g%3E%3C/svg%3E") repeat-x 0 center/640px 140px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 24%,#000 76%,transparent);mask-image:linear-gradient(90deg,transparent,#000 24%,#000 76%,transparent);opacity:.9;animation:marchdiv 48s linear infinite}
@keyframes marchdiv{to{background-position-x:calc(var(--dir) * 640px)}}
:root[data-theme=light] .lp-div span{filter:brightness(.85) saturate(1.15)}
@media (max-width:720px){.lp-div span{top:-45px;height:90px;background-size:411px 90px}@keyframes marchdiv{to{background-position-x:calc(var(--dir) * 411px)}}}

/* ===== responsive pass 1: navigation ===== */
.lp-links a{white-space:nowrap}
@media (max-width:960px){
  .lp-burger{display:flex}
  .lp-links{position:absolute;top:72px;inset-inline:0;flex-direction:column;gap:0;margin:0;background:var(--glass-solid);backdrop-filter:blur(14px);border-bottom:1px solid var(--bd);max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
  .lp-links a{padding:16px 24px;border-top:1px solid var(--bd)}
  .lp-links a::after{display:none}
  .is-open .lp-links{max-height:360px}
  .lp-nav.is-open{background:var(--glass-solid)}
  .lp-nav-inner{gap:14px}
  .lp-nav-actions{margin-inline-start:auto}
}
@media (max-width:360px){
  .lp-nav-inner{gap:8px}
  .lp-nav-actions{gap:6px}
  .lp-logo-crop{height:38px}
}

/* ===== responsive pass 2: overflow, spacing, touch targets ===== */
html{overflow-x:clip}
body.lp{overflow-x:clip}
/* side-entrance animation must never widen the page */
.lp-trust ul{overflow:clip;overflow-clip-margin:0}
.lp-reveal-side{--from:translateX(calc(var(--dir) * 28px))}

/* tablets (≤ 960): single-column hero, bento relaxes */
@media (max-width:960px){
  .lp-hero{padding:128px 0 70px}
  .lp-hero-copy{display:flex;flex-direction:column;align-items:center}
  .lp-lead{max-width:640px}
  .lp-section{padding:78px 0}
  .lp-head{margin-bottom:40px}
  .lp-panel-copy{text-align:center}
  .lp-panel-copy li{justify-content:center}
  .lp-win{height:auto;min-height:376px}
  .lp-trust{text-align:center}
  .lp-trust li:hover{transform:none}
  .lp-cta>.lp-wrap{padding-inline:20px}
}

/* phones (≤ 560) */
@media (max-width:560px){
  .lp-wrap{padding-inline:16px}
  .lp-hero{padding:104px 0 56px}
  .lp-hero h1{font-size:clamp(2rem,9.5vw,2.6rem)}
  .lp-lead{font-size:1.02rem}
  .lp-section{padding:60px 0}
  .lp-head{margin-bottom:30px}
  .lp-head h2,.lp-trust h2,.lp-contact-copy h2{font-size:clamp(1.55rem,7vw,1.9rem)}
  .lp-card{padding:22px}
  .lp-cta-card{border-radius:24px}
  .lp-cta-copy h2{font-size:1.5rem}
  .lp-cta-copy p{font-size:1rem}
  .lp-faq summary{padding:16px 18px;font-size:1rem}
  .lp-faq p{padding:0 18px 18px}
  .lp-form-card{padding:20px 16px}
  .lp-direct a{padding:12px 14px}
  .lp-stats-grid{gap:10px}
  .lp-mod{padding:20px;gap:14px}
  .lp-tabs{gap:6px}
  .lp-win{padding:12px 12px 16px}
}

/* the smallest phones (≤ 360) */
@media (max-width:360px){
  .lp-logo-crop{height:36px}
  .lp-nav-actions .lp-btn-sm{padding:7px 10px;font-size:.85rem}
  .lp-hero-copy .lp-badge{font-size:.8rem;padding:5px 12px}
  .lp-cta-row .lp-btn-lg{padding:13px 18px}
  .lp-float{font-size:.78rem;padding:7px 10px}
  .lp-sticky .lp-btn{font-size:.9rem}
}

/* touch targets: at least 44px on touch/small screens */
@media (max-width:960px){
  .lp-btn-sm,.lp-theme{min-height:44px}
  .lp-burger{width:44px;height:44px}
  .lp-tab{min-height:44px}
  .lp-foot-nav a{padding:10px 4px}
  .lp-soc{width:44px;height:44px}
  .lp-top{width:48px;height:48px}
}
@media (hover:none){
  .lp-card:hover,.lp-uc-card:hover,.lp-stat:hover,.lp-mod:hover,.lp-pchip:hover,.lp-tile:hover,.lp-btn:hover{transform:none}
}

/* tablet bento: 9 cards in 2 columns leaves one alone — let the last one span the row */
@media (max-width:960px) and (min-width:561px){
  /* order: the three wide cards sit on their own rows, the six small ones pair up */
  .lp-bento{grid-auto-flow:row dense}
  .lp-bento .lp-card:nth-child(1){order:1}
  .lp-bento .lp-card:nth-child(2){order:2}
  .lp-bento .lp-card:nth-child(7){order:3}
  .lp-bento .lp-card:nth-child(3){order:4}
  .lp-bento .lp-card:nth-child(4){order:5}
  .lp-bento .lp-card:nth-child(5){order:6}
  .lp-bento .lp-card:nth-child(6){order:7}
  .lp-bento .lp-card:nth-child(8){order:8}
  .lp-bento .lp-card:nth-child(9){order:9}
  .lp-bento .lp-card.lp-span-2,.lp-bento .lp-card.lp-span-3{grid-column:span 1}
  .lp-bento .lp-card:nth-child(1),.lp-bento .lp-card:nth-child(7){grid-column:span 2}
  .lp-bento .lp-card:nth-child(2){grid-column:span 2}
}

/* phones: the four showcase tabs always form a clean 2x2 grid */
@media (max-width:720px){
  .lp-tabs{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:420px;margin-inline:auto;margin-bottom:30px}
  .lp-tab{width:100%;justify-content:center;padding:10px 12px;font-size:.95rem;min-height:48px}
}
@media (max-width:360px){
  .lp-tab{padding:9px 8px;font-size:.88rem;gap:7px}
}


/* ===== footer legal links, consent line, support assurance cards ===== */
.lp-foot-copy{display:flex;justify-content:center;align-items:center;gap:8px 22px;flex-wrap:wrap}
.lp-legal{display:inline-flex;align-items:center;gap:10px}
.lp-legal i{font-style:normal;opacity:.5}
.lp-legal a,.lp-privacy a{color:var(--tx2);text-decoration:underline;text-decoration-color:rgba(var(--red-rgb),.5);text-underline-offset:3px;transition:color .25s,text-decoration-color .25s}
.lp-legal a:hover,.lp-privacy a:hover{color:var(--red2);text-decoration-color:var(--red2)}
.lp-assure{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:56px}
.lp-assure-card{display:flex;gap:16px;align-items:flex-start;background:var(--card);border:1px solid var(--bd);border-radius:var(--r);padding:22px;transition:transform .35s var(--ease),border-color .35s}
.lp-assure-card:hover{transform:translateY(-4px);border-color:rgba(var(--red-rgb),.5)}
.lp-assure-card .lp-ico{flex:none}
.lp-assure-card h3{font-size:1.08rem;margin-bottom:4px}
.lp-assure-card p{color:var(--tx2);font-size:.94rem}
@media (max-width:960px){.lp-assure{grid-template-columns:1fr}}

/* ===== legal pages ===== */
.lg-main{padding:120px 0 70px;min-height:70vh}
.lg-wrap{max-width:860px}
.lg-tabs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:30px}
.lg-tabs a{padding:10px 22px;border-radius:999px;border:1px solid var(--bd);background:var(--card);color:var(--tx2);font-weight:700;transition:all .3s var(--ease)}
.lg-tabs a:hover{color:var(--tx);border-color:rgba(var(--red-rgb),.5)}
.lg-tabs a.is-active{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 8px 22px rgba(var(--red-rgb),.35)}
.lg-doc{background:var(--card);border:1px solid var(--bd);border-radius:22px;padding:clamp(24px,5vw,52px);box-shadow:var(--shadow-md)}
.lg-doc h1{font-size:clamp(1.7rem,3.6vw,2.4rem);font-weight:800;line-height:1.3}
.lg-updated{color:var(--tx3);font-size:.9rem;margin:8px 0 18px}
.lg-intro{color:var(--tx2);font-size:1.05rem;padding-bottom:24px;border-bottom:1px solid var(--bd);margin-bottom:8px}
.lg-sec{padding-top:22px}
.lg-sec h2,.lg-contact h2{font-size:1.18rem;font-weight:800;display:flex;align-items:center;gap:12px;margin-bottom:10px}
.lg-n{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--grad);color:#fff;font-size:.85rem;flex:none}
.lg-sec p,.lg-sec li{color:var(--tx2);line-height:1.95}
.lg-sec p+p,.lg-sec ul+p,.lg-sec p+ul{margin-top:8px}
.lg-sec ul{list-style:none;display:grid;gap:4px;margin-block:6px}
.lg-sec li{position:relative;padding-inline-start:22px}
.lg-sec li::before{content:"";position:absolute;inset-inline-start:2px;top:.95em;width:7px;height:7px;border-radius:2px;background:var(--red2);transform:rotate(45deg)}
.lg-sec a{color:var(--red2);text-decoration:underline;text-underline-offset:3px}
.lg-contact{margin-top:30px;padding:22px;border-radius:16px;background:var(--soft);border:1px solid var(--bd)}
.lg-contact-row{display:flex;flex-wrap:wrap;gap:10px}
.lg-contact-row a{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:12px;background:var(--card);border:1px solid var(--bd);font-weight:600;transition:transform .3s var(--ease),border-color .3s}
.lg-contact-row a:hover{transform:translateY(-3px);border-color:rgba(var(--red-rgb),.5)}
.lg-contact-row i{color:var(--red2)}
.lp-foot-copy-solo{margin-top:0;padding-top:0;border-top:0}
@media (max-width:560px){.lg-main{padding-top:104px}.lg-back{display:none}}

/* ===== mobile menu: fully opaque panel (no nested backdrop-filter, which some Android browsers render see-through) ===== */
:root{--menu-bg:#171415}
:root[data-theme=light]{--menu-bg:#faf7f6}
@media (max-width:960px){
  .lp-links{background:var(--menu-bg)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:0 18px 30px rgba(0,0,0,.35);z-index:5}
  :root[data-theme=light] .lp-links{box-shadow:0 18px 30px rgba(60,40,36,.18)}
  .lp-nav.is-open{background:var(--menu-bg)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .lp-nav.is-open .lp-nav-inner{position:relative;z-index:6;background:var(--menu-bg)}
  .lp-links a{background:var(--menu-bg)}
}

/* ===== customer guide promo ===== */
.lp-guide-sec{padding-top:10px}
.lp-guide{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(24px,4vw,56px);align-items:center;padding:clamp(24px,4vw,48px);border:1px solid var(--bd);border-radius:26px;background:var(--card);box-shadow:var(--shadow-md);position:relative;overflow:hidden}
.lp-guide::before{content:"";position:absolute;inset-block-start:-120px;inset-inline-start:-120px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(var(--red-rgb),.18),transparent 65%);pointer-events:none}
.lp-guide-text{position:relative}
.lp-guide-text h2{font-size:clamp(1.6rem,3.2vw,2.3rem);font-weight:800;line-height:1.3;margin:4px 0 12px}
.lp-guide-text p{color:var(--tx2);font-size:1.05rem;margin-bottom:18px}
.lp-guide-text ul{list-style:none;display:grid;gap:10px;margin-bottom:26px}
.lp-guide-text li{display:flex;align-items:center;gap:10px;color:var(--tx2);font-weight:600}
.lp-guide-text li i{color:var(--red2)}
.lp-guide-shot{display:block;border:1px solid var(--bd);border-radius:16px;overflow:hidden;background:var(--card2);box-shadow:var(--shadow-md);transition:transform .5s var(--ease),box-shadow .5s;position:relative}
.lp-guide-shot:hover{transform:translateY(-6px) scale(1.01);box-shadow:var(--shadow-lg)}
.lp-guide-bar{display:flex;gap:6px;padding:10px 14px;border-bottom:1px solid var(--bd)}
.lp-guide-bar i{width:10px;height:10px;border-radius:50%;background:var(--bd)}
.lp-guide-bar i:first-child{background:#ff5f57}.lp-guide-bar i:nth-child(2){background:#febc2e}.lp-guide-bar i:nth-child(3){background:#28c840}
.lp-guide-shot img{display:block;width:100%;height:auto}
.lp-guide-light{display:none!important}
:root[data-theme=light] .lp-guide-dark{display:none!important}
:root[data-theme=light] .lp-guide-light{display:block!important}
@media (max-width:860px){.lp-guide{grid-template-columns:1fr}.lp-guide-shot{order:-1}}

/* ── "Request a demo" modal ─────────────────────────────────────────────── */
.lp-modal{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(10,8,8,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .25s}
.lp-modal[hidden]{display:none}
.lp-modal.is-open{opacity:1}
.lp-modal-box{position:relative;width:100%;max-width:460px;max-height:calc(100vh - 32px);overflow-y:auto;background:var(--card);color:var(--tx);border:1px solid var(--bd);border-radius:20px;padding:30px 28px 26px;box-shadow:0 30px 80px rgba(0,0,0,.45);transform:translateY(14px) scale(.98);transition:transform .3s var(--ease)}
.lp-modal.is-open .lp-modal-box{transform:none}
.lp-modal-box h3{margin:0 0 6px;font-size:1.35rem;font-weight:800}
.lp-modal-lead{margin:0 0 20px;color:var(--tx2,var(--tx3));font-size:.95rem;line-height:1.7}
.lp-modal-box form{display:grid;gap:14px}
.lp-modal-x{position:absolute;top:14px;inset-inline-end:14px;width:36px;height:36px;border-radius:50%;border:1px solid var(--bd);background:transparent;color:var(--tx2,var(--tx3));cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .2s,color .2s}
.lp-modal-x:hover{background:rgba(var(--red-rgb),.12);color:var(--red2)}
.lp-modal-done{text-align:center;padding:12px 0 4px}
.lp-modal-done[hidden]{display:none}
.lp-modal-done p{color:var(--tx2,var(--tx3));margin:0 0 20px;line-height:1.7}
.lp-modal-check{width:64px;height:64px;margin:0 auto 14px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.6rem;color:#fff;background:linear-gradient(135deg,#1db97f,#12875c)}
body.lp-modal-open{overflow:hidden}
@media (max-width:480px){.lp-modal-box{padding:26px 18px 20px;border-radius:16px}}
.lp-modal-box form[hidden]{display:none}
.lp-modal-done .lp-btn{min-width:160px;justify-content:center}
/* The modal's buttons are plain: no shine sweep, no lift, no paper-plane flight
   (the animated treatment belongs to the page's own call-to-action buttons). */
.lp-modal .lp-btn{transition:background .2s,box-shadow .2s}
.lp-modal .lp-btn-primary{box-shadow:0 4px 14px rgba(var(--red-rgb),.3)}
.lp-modal .lp-btn-primary:hover{transform:none;box-shadow:0 4px 14px rgba(var(--red-rgb),.3);filter:brightness(1.06)}
.lp-modal .lp-submit i,.lp-modal .lp-submit:hover i,[dir=ltr] .lp-modal .lp-submit:hover i{transition:none;transform:none}
.lp-modal .lp-submit.is-loading i{animation:none}

/* Headers with no link row between the logo and the buttons (guide, legal pages):
   push the buttons to the far side instead of leaving them against the logo. */
.lp-nav-actions-end{margin-inline-start:auto}
.lp-modal .lp-btn{translate:none!important}