/* Kwekly marketing site — one stylesheet, no frameworks */
@font-face{font-family:Alexandria;font-weight:400;font-display:swap;src:url(fonts/alexandria-latin-400-normal.woff2);unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Alexandria;font-weight:400;font-display:swap;src:url(fonts/alexandria-arabic-400-normal.woff2);unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E,U+2010-2011,U+204F,U+2E41}
@font-face{font-family:Alexandria;font-weight:500;font-display:swap;src:url(fonts/alexandria-latin-500-normal.woff2);unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Alexandria;font-weight:500;font-display:swap;src:url(fonts/alexandria-arabic-500-normal.woff2);unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E,U+2010-2011,U+204F,U+2E41}
@font-face{font-family:Alexandria;font-weight:600;font-display:swap;src:url(fonts/alexandria-latin-600-normal.woff2);unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Alexandria;font-weight:600;font-display:swap;src:url(fonts/alexandria-arabic-600-normal.woff2);unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E,U+2010-2011,U+204F,U+2E41}
@font-face{font-family:Alexandria;font-weight:700;font-display:swap;src:url(fonts/alexandria-latin-700-normal.woff2);unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Alexandria;font-weight:700;font-display:swap;src:url(fonts/alexandria-arabic-700-normal.woff2);unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E,U+2010-2011,U+204F,U+2E41}

:root{
  --brand:#6E1E7A;--brand-2:#9B3AA8;--brand-soft:#F4EAF6;--lilac:#E3B6EC;--sun:#FFCE00;
  --ink:#141317;--ink-2:#4A4752;--ink-3:#7A7682;--line:#ECE7EF;--bg:#FFFFFF;--bg-2:#F8F6FA;
  --night:#120A18;--night-2:#1D0F26;--ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{font-family:Alexandria,system-ui,Arial,sans-serif;color:var(--ink);background:var(--bg);font-size:16px;line-height:1.6;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;cursor:pointer}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
.flip-rtl{transform:none}[dir=rtl] .flip-rtl{transform:scaleX(-1)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 26px;border-radius:13px;font-weight:600;font-size:15.5px;white-space:nowrap;border:0;transition:transform .25s var(--ease),box-shadow .25s,background .25s}
.btn:hover{transform:translateY(-2px)}
.btn-sun{background:var(--sun);color:#1a1300;box-shadow:0 10px 26px -10px rgba(255,206,0,.7)}
.btn-brand{background:var(--brand);color:#fff;box-shadow:0 10px 26px -12px rgba(110,30,122,.8)}
.btn-glass{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(8px)}
.btn-line{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn-sm{height:40px;padding:0 16px;font-size:14px;border-radius:10px}
.link{font-weight:600;color:var(--brand);display:inline-flex;align-items:center;gap:8px}
.link i{font-size:.8em;transition:transform .25s var(--ease)}
.link:hover i{transform:translateX(4px)}[dir=rtl] .link:hover i{transform:translateX(-4px)}

/* ---------- nav ---------- */
.nav{position:absolute;top:0;left:0;right:0;z-index:20}
.nav.light{position:relative;background:#fff;border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;height:78px;gap:34px}
.nav .logo{height:24px}
.nav ul{display:flex;gap:6px;list-style:none;flex:1}
.nav ul > li{position:relative}
.nav ul > li > a{display:flex;align-items:center;gap:6px;padding:10px 12px;border-radius:10px;color:rgba(255,255,255,.8);font-size:15px;font-weight:500}
.nav.light ul > li > a{color:var(--ink-2)}
.nav ul > li > a.on{color:#fff}.nav.light ul > li > a.on{color:var(--brand)}
.nav ul > li > a i{font-size:10px;opacity:.7}
.nav .end{display:flex;align-items:center;gap:14px}
.lang{display:inline-flex;border:1px solid rgba(255,255,255,.2);border-radius:99px;padding:3px;gap:2px}
.nav.light .lang{border-color:var(--line)}
.lang a{min-width:34px;height:28px;display:grid;place-items:center;border-radius:99px;font-size:13px;font-weight:600;color:rgba(255,255,255,.7);padding:0 8px}
.nav.light .lang a{color:var(--ink-3)}
.lang a.on{background:#fff;color:var(--ink)}.nav.light .lang a.on{background:var(--ink);color:#fff}
.nav .login{color:#fff;font-size:15px;font-weight:500}.nav.light .login{color:var(--ink)}
.mega{position:absolute;top:calc(100% + 8px);inset-inline-start:-12px;background:#fff;color:var(--ink);border-radius:18px;padding:12px;box-shadow:0 30px 60px -20px rgba(20,10,30,.35),0 0 0 1px rgba(0,0,0,.05);display:grid;gap:2px;min-width:300px;opacity:0;visibility:hidden;transform:translateY(6px);transition:.2s}
.nav li:hover .mega,.mega.show{opacity:1;visibility:visible;transform:none}
.mega a{display:flex;gap:12px;padding:10px 12px;border-radius:12px}
.mega a:hover{background:var(--bg-2)}
.mega a i{width:36px;height:36px;border-radius:10px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;flex:none}
.mega a b{display:block;font-size:14.5px;font-weight:600}
.mega a span{display:block;font-size:12.5px;color:var(--ink-3);line-height:1.4}
.mega.cols{grid-template-columns:1fr 1fr;min-width:560px}
.burger{display:none;background:none;border:0;color:#fff;font-size:20px;width:40px;height:40px}
.nav.light .burger{color:var(--ink)}

/* ---------- dark hero (shared) ---------- */
.dark{color:#fff;position:relative;overflow:hidden;background:linear-gradient(135deg,var(--night) 0%,var(--night-2) 55%,#0D0712 100%)}
.dark .grid-bg{position:absolute;inset:0;opacity:.07;background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px);background-size:44px 44px;-webkit-mask:linear-gradient(#000,transparent 92%);mask:linear-gradient(#000,transparent 92%)}
.blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;pointer-events:none}
.blob.b1{width:620px;height:620px;background:#7d2a8c;top:-120px;inset-inline-end:-80px;animation:drift1 18s ease-in-out infinite}
.blob.b2{width:520px;height:520px;background:#3b1250;bottom:-220px;inset-inline-start:-120px;animation:drift2 22s ease-in-out infinite}
.blob.b3{width:260px;height:260px;background:#ffce00;opacity:.12;top:40%;inset-inline-end:30%;animation:drift1 26s ease-in-out infinite reverse}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-60px,40px) scale(1.08)}}
@keyframes drift2{0%,100%{transform:translate(0,0)}50%{transform:translate(70px,-50px)}}

.hero > .wrap{position:relative;display:grid;grid-template-columns:1.02fr .98fr;align-items:center;min-height:800px;padding-top:78px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:99px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);font-size:13.5px;color:rgba(255,255,255,.85);font-weight:500}
.eyebrow b{width:7px;height:7px;border-radius:50%;background:var(--sun);box-shadow:0 0 0 4px rgba(255,206,0,.18);animation:ping 2s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(255,206,0,.5)}100%{box-shadow:0 0 0 10px rgba(255,206,0,0)}}
.hero h1{font-size:70px;line-height:1.02;letter-spacing:-2.2px;font-weight:700;margin-top:26px}
.hero h1 em{font-style:normal;background:linear-gradient(90deg,#E3B6EC,#fff 40%,#E3B6EC 80%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 6s linear infinite}
@keyframes shine{to{background-position:-200% 0}}
[dir=rtl] .hero h1{letter-spacing:0;line-height:1.25;font-size:64px}
.lead{font-size:20px;color:rgba(255,255,255,.72);max-width:560px;margin-top:22px}
.cta{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap}
.ticks{display:flex;gap:22px;margin-top:30px;color:rgba(255,255,255,.66);font-size:14px;flex-wrap:wrap}
.ticks i{color:var(--sun);margin-inline-end:7px}

.page-hero{padding:170px 0 90px}
.page-hero .wrap{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.page-hero h1{font-size:58px;line-height:1.06;letter-spacing:-1.6px;margin-top:20px}
[dir=rtl] .page-hero h1{letter-spacing:0;line-height:1.3;font-size:52px}
.page-hero h1 em{font-style:normal;color:var(--lilac)}
.crumbs{font-size:13.5px;color:rgba(255,255,255,.55)}
.crumbs a:hover{color:#fff}

/* ---------- hero stage (motion graphic) ---------- */
.stage{position:relative;height:660px}
.stage .glow{position:absolute;inset-inline-end:30px;top:20px;width:470px;height:620px;border-radius:50%;background:radial-gradient(closest-side,rgba(201,120,215,.5),transparent);filter:blur(10px)}
.st-phone{position:absolute;top:14px;inset-inline-end:70px;transition:transform 1.2s var(--ease)}
.st-phone .float{animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0) rotate(3deg)}50%{transform:translateY(-12px) rotate(2deg)}}
.lockscr{position:absolute;inset:0;background:radial-gradient(120% 80% at 50% 0%,#4b1a5a,#160b1c 70%);color:#fff;text-align:center;padding-top:70px;transition:opacity .6s}
.lockscr .d{font-size:12px;opacity:.75}.lockscr .t{font-size:58px;font-weight:600;line-height:1;margin-top:2px;letter-spacing:-1px}
.notif{position:absolute;top:44px;left:10px;right:10px;background:rgba(255,255,255,.92);color:#111;border-radius:16px;padding:9px 11px;display:flex;gap:9px;align-items:center;font-size:10.5px;line-height:1.3;box-shadow:0 10px 24px rgba(0,0,0,.3);transform:translateY(-130%);opacity:0;transition:transform .7s var(--ease),opacity .5s}
.notif img{width:28px;height:28px;border-radius:7px;background:#1D0F26;padding:5px}
.notif b{display:block;font-size:11px}
.prof{position:absolute;left:0;right:0;top:37px;transform:translateY(105%);transition:transform 1s var(--ease)}
.st-card{position:absolute;top:400px;inset-inline-end:260px;z-index:3;transform:translate(-260px,90px) rotate(-30deg);opacity:0;transition:transform 1.3s var(--ease),opacity .6s}
[dir=rtl] .st-card{transform:translate(260px,90px) rotate(30deg)}
.waves{position:absolute;top:300px;inset-inline-end:338px;z-index:4;opacity:0;transition:opacity .4s}
[dir=rtl] .waves svg{transform:scaleX(-1)}
.waves path{animation:wave 1.4s ease-out infinite;transform-origin:10px 45px}
.waves path:nth-child(2){animation-delay:.18s}.waves path:nth-child(3){animation-delay:.36s}
@keyframes wave{0%{opacity:0;transform:scale(.8)}35%{opacity:1}100%{opacity:0;transform:scale(1.15)}}
.chip{position:absolute;display:flex;align-items:center;gap:10px;padding:10px 14px 10px 10px;border-radius:14px;background:rgba(255,255,255,.97);color:var(--ink);box-shadow:0 20px 40px -12px rgba(0,0,0,.5);font-size:13px;font-weight:600;line-height:1.25;z-index:6;opacity:0;transform:translateY(16px) scale(.96);transition:opacity .5s,transform .6s var(--ease)}
[dir=rtl] .chip{padding:10px 10px 10px 14px}
.chip small{display:block;font-weight:500;color:var(--ink-3);font-size:11.5px}
.chip .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:15px;flex:none}
/* scene states */
.stage.s1 .st-card{opacity:1;transform:translate(0,0) rotate(-12deg)}
[dir=rtl] .stage.s1 .st-card{transform:translate(0,0) rotate(12deg)}
.stage.s2 .waves{opacity:1}
.stage.s3 .notif{transform:none;opacity:1}
.stage.s4 .prof{transform:none}.stage.s4 .notif{opacity:0;transform:translateY(-130%)}
.stage.s5 .c1{opacity:1;transform:none}
.stage.s6 .c2{opacity:1;transform:none;transition-delay:.1s}
.stage.s6 .c3{opacity:1;transform:none;transition-delay:.35s}
.stage.out .st-card{opacity:0}.stage.out .chip{opacity:0}
.scene-dots{position:absolute;bottom:4px;inset-inline-end:180px;display:flex;gap:6px}
.scene-dots i{width:22px;height:4px;border-radius:9px;background:rgba(255,255,255,.2);overflow:hidden;position:relative}
.scene-dots i.on:after{content:"";position:absolute;inset:0;background:var(--sun);animation:bar 9s linear}
@keyframes bar{from{transform:scaleX(0);transform-origin:left}to{transform:scaleX(1);transform-origin:left}}

/* ---------- phone mockup (base 292px; scale with zoom) ---------- */
.phone{position:relative;width:292px;height:609px;filter:drop-shadow(0 34px 34px rgba(0,0,0,.42)) drop-shadow(0 8px 12px rgba(0,0,0,.22));direction:ltr}
.phone .bs{position:absolute;width:3.4px;background:linear-gradient(90deg,#2e2f33,#6a6b70 60%,#3a3b3f)}
.phone .frame{position:absolute;inset:0;border-radius:50px;padding:2.6px;background:linear-gradient(160deg,#8a8b90 0%,#3b3c41 20%,#5d5e63 46%,#26272b 74%,#6e6f74 100%)}
.phone .bezel{width:100%;height:100%;border-radius:47.4px;padding:9.4px;background:#050506}
.phone .scr{width:100%;height:100%;border-radius:38px;overflow:hidden;position:relative;background:#F5F5F5}
.phone .sb{height:37px;position:relative;z-index:2;font-family:Alexandria,Arial,sans-serif}
.phone .sb .t{position:absolute;left:0;width:92px;height:40px;display:flex;align-items:center;justify-content:center;padding-left:6px;font-size:11.8px;font-weight:600;color:#000}
.phone .sb .r{position:absolute;right:0;width:92px;height:40px;display:flex;align-items:center;justify-content:center;gap:3.6px;padding-right:6px}
.phone .sb.w .t{color:#fff}.phone .sb.w svg{fill:#fff}.phone .sb.w rect[fill=none]{stroke:#fff}
.phone .isl{position:absolute;top:7.5px;left:50%;transform:translateX(-50%);width:85px;height:25px;border-radius:13px;background:#000;z-index:5}
.phone .isl:after{content:"";position:absolute;right:9px;top:8px;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#2a3550,#0a0c14 70%)}
.phone .glass{position:absolute;inset:0;background:linear-gradient(118deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 32%);pointer-events:none;z-index:6}
.phone .scr .layer{position:absolute;left:0;right:0;top:37px;transition:opacity .6s,transform .7s var(--ease)}
.phone .scr .layer img{width:100%}
.phone .scr .layer.off{opacity:0;transform:translateY(24px)}

/* nfc card */
.ncard{width:300px;height:189px;border-radius:16px;position:relative;overflow:hidden;background:linear-gradient(150deg,#222027 0%,#111014 50%,#1a191e 100%);box-shadow:0 34px 50px -10px rgba(0,0,0,.7),0 10px 18px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.07);direction:ltr}
.ncard:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.09) 48%,transparent 60%);background-size:250% 100%;animation:sheen 5s ease-in-out infinite}
@keyframes sheen{0%{background-position:120% 0}60%,100%{background-position:-120% 0}}
.ncard .lg{position:absolute;left:24px;top:26px;height:26px}
.ncard .nf{position:absolute;right:22px;top:22px;opacity:.75}
.ncard .tl{position:absolute;left:24px;bottom:22px;color:rgba(255,255,255,.7);font-size:13px;letter-spacing:.4px}

/* ---------- sections ---------- */
section{padding:120px 0;position:relative}
.kicker{font-size:13px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--brand)}
.dark .kicker{color:var(--lilac)}
[dir=rtl] .kicker{letter-spacing:0}
.h2{font-size:48px;line-height:1.08;letter-spacing:-1.3px;font-weight:700;margin-top:12px}
[dir=rtl] .h2{letter-spacing:0;line-height:1.35;font-size:42px}
.sub{font-size:18.5px;color:var(--ink-2);margin-top:16px;max-width:640px}
.dark .sub{color:rgba(255,255,255,.7)}
.head-c{text-align:center}.head-c .sub{margin-inline:auto}
.head-row{display:flex;justify-content:space-between;align-items:end;gap:40px;flex-wrap:wrap}
.bg-2{background:var(--bg-2)}

/* logos marquee */
.logos{padding:46px 0;border-bottom:1px solid var(--line);overflow:hidden}
.logos.on-dark{border:0;padding:30px 0 60px}
.logos p{text-align:center;font-size:13px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--ink-3)}
[dir=rtl] .logos p{letter-spacing:0}
.logos.on-dark p{color:rgba(255,255,255,.5)}
.marq{display:flex;width:max-content;gap:70px;align-items:center;margin-top:26px;animation:marq 40s linear infinite;direction:ltr}
.marq:hover{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
.logos .marq{-webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.lg-item{position:relative;display:block}
.lg-item img{height:var(--h);width:auto;transition:opacity .35s}
.lg-item .c{position:absolute;inset:0;opacity:0}
.lg-item:hover .m{opacity:0}.lg-item:hover .c{opacity:1}
.marq-wrap{-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}

/* facts band */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:24px;overflow:hidden;margin-top:56px;background:#fff}
.facts div{padding:30px 28px;border-inline-end:1px solid var(--line)}
.facts div:last-child{border:0}
.facts b{display:block;font-size:40px;letter-spacing:-1px;line-height:1;color:var(--brand)}
.facts span{display:block;margin-top:10px;color:var(--ink-2);font-size:15px}

/* sticky scroll story */
.story{display:grid;grid-template-columns:1fr 1fr;gap:80px;margin-top:40px}
.story .pin{position:sticky;top:120px;height:640px;display:grid;place-items:center}
.story .steps2{padding:80px 0 160px}
.story .st{min-height:470px;display:flex;flex-direction:column;justify-content:center;opacity:.28;transition:opacity .5s}
.story .st.on{opacity:1}
.story .num{font-size:14px;font-weight:700;color:var(--brand);display:flex;align-items:center;gap:10px}
.story .num:before{content:"";width:28px;height:2px;background:var(--brand)}
.story h3{font-size:34px;letter-spacing:-.8px;line-height:1.15;margin-top:14px}
[dir=rtl] .story h3{letter-spacing:0;line-height:1.4}
.story p{font-size:17px;color:var(--ink-2);margin-top:12px;max-width:470px}
.story ul{list-style:none;margin-top:18px;display:grid;gap:10px}
.story li{display:flex;gap:10px;font-size:15.5px;color:var(--ink-2)}
.story li i{color:var(--brand);margin-top:5px;font-size:13px}
.story .prog{position:absolute;inset-inline-start:-40px;top:0;bottom:0;width:2px;background:var(--line)}

/* product rail */
.prods{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:56px}
.prod{border:1px solid var(--line);border-radius:22px;overflow:hidden;background:#fff;display:flex;flex-direction:column;transition:transform .35s var(--ease),box-shadow .35s}
.prod:hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px rgba(60,20,70,.35)}
.prod .ph{height:250px;background:radial-gradient(circle at 50% 62%,#fff,#F0ECF2);position:relative;overflow:hidden;display:grid;place-items:center}
.prod .ph img{max-height:84%;max-width:80%;object-fit:contain;transition:transform .6s var(--ease);filter:drop-shadow(0 18px 18px rgba(30,10,40,.18))}
.prod:hover .ph img{transform:scale(1.06) rotate(-2deg)}
.prod .ph.photo img{max-height:none;max-width:none;width:100%;height:100%;object-fit:cover;filter:none}
.prod .bd{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.prod h3{font-size:18px;letter-spacing:-.2px}
.prod p{color:var(--ink-2);font-size:14.5px;margin-top:5px;flex:1}
.prod .go{margin-top:16px}
.prod .tag{position:absolute;top:14px;inset-inline-start:14px;background:#fff;border:1px solid var(--line);border-radius:99px;padding:4px 10px;font-size:12px;font-weight:600;color:var(--ink-2);z-index:2}

/* bento */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;margin-top:56px}
.tile{background:#fff;border:1px solid var(--line);border-radius:24px;padding:30px;position:relative;overflow:hidden}
.tile h3{font-size:21px;letter-spacing:-.3px}
.tile p{color:var(--ink-2);font-size:15px;margin-top:6px;max-width:440px}
.tile .ic{width:44px;height:44px;border-radius:12px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-size:18px;margin-bottom:18px}
.span2{grid-column:span 2}.span3{grid-column:span 3}.span4{grid-column:span 4}.span6{grid-column:span 6}
.tile.dk{background:linear-gradient(150deg,#1D0F26,#120A18);color:#fff;border-color:transparent}
.tile.dk p{color:rgba(255,255,255,.7)}.tile.dk .ic{background:rgba(255,255,255,.08);color:var(--lilac)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.chips span{padding:7px 12px;border-radius:99px;background:var(--bg-2);border:1px solid var(--line);font-size:13px;color:var(--ink-2)}
.tile.dk .chips span{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12);color:#fff}

/* alternating feature rows */
.rows{display:grid;gap:120px;margin-top:70px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.row.rev > :first-child{order:2}
.row h3{font-size:36px;letter-spacing:-.8px;line-height:1.15}
[dir=rtl] .row h3{letter-spacing:0;line-height:1.4}
.row p{font-size:17.5px;color:var(--ink-2);margin-top:14px}
.row ul{list-style:none;margin-top:22px;display:grid;gap:12px}
.row li{display:flex;gap:12px;font-size:15.5px;color:var(--ink-2)}
.row li i{width:24px;height:24px;border-radius:7px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-size:11px;flex:none;margin-top:1px}
.visual{position:relative;border-radius:28px;background:radial-gradient(circle at 50% 40%,#fff,#F1ECF4);min-height:520px;display:grid;place-items:center;overflow:hidden}
.visual.dk{background:radial-gradient(circle at 60% 30%,#3a1d47,#120A18)}
.visual .badge{position:absolute;background:#fff;border-radius:14px;padding:10px 14px;box-shadow:0 20px 40px -14px rgba(30,10,40,.35);font-size:13px;font-weight:600;display:flex;gap:10px;align-items:center}
.visual .badge i{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand)}

/* dashboard mock (live DOM) */
.dash{width:780px;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 60px 120px -40px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.1);direction:ltr;font-size:12px;color:#141317;text-align:left}
.dash.rtl{direction:rtl;text-align:right}.dash.rtl .bar span{direction:ltr}.dash.rtl .hb u:after{transform-origin:right}
.dash .bar{height:34px;display:flex;align-items:center;gap:7px;padding:0 14px;background:#24222a}
.dash .bar i{width:10px;height:10px;border-radius:50%;background:#4a4752;display:block}
.dash .bar span{margin-inline-start:14px;flex:1;height:20px;border-radius:6px;background:#1a191e;color:rgba(255,255,255,.5);font-size:11px;display:flex;align-items:center;padding:0 10px}
.dash .body{display:grid;grid-template-columns:170px 1fr;min-height:420px}
.dash .side{border-inline-end:1px solid #eee;padding:16px 12px;background:#fcfbfd}
.dash .side img{height:14px;margin-bottom:16px}
.dash .side div{padding:7px 9px;border-radius:8px;color:#4a4752;display:flex;gap:8px;align-items:center;margin-bottom:2px}
.dash .side div.on{background:#F4EAF6;color:#6E1E7A;font-weight:600}
.dash .main{padding:18px}
.dash h4{font-size:16px}
.dash .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px}
.dash .kpi{border:1px solid #eee;border-radius:10px;padding:10px}
.dash .kpi small{color:#7a7682;font-size:10.5px}
.dash .kpi b{display:block;font-size:20px;margin-top:2px}
.dash .kpi em{font-style:normal;color:#1E9E55;font-size:10.5px;font-weight:600}
.dash .grid2{display:grid;grid-template-columns:1.5fr 1fr;gap:10px;margin-top:10px}
.dash .card{border:1px solid #eee;border-radius:10px;padding:10px}
.dash .bars{display:flex;align-items:flex-end;gap:4px;height:120px;margin-top:8px}
.dash .bars i{flex:1;background:#E9D3EE;border-radius:3px 3px 0 0;height:calc(var(--v)*1%);transform:scaleY(0);transform-origin:bottom;transition:transform .9s var(--ease);transition-delay:calc(var(--k)*25ms)}
.dash .bars i:last-child{background:#6E1E7A}
.dash.in .bars i{transform:scaleY(1)}
.dash .hb{display:flex;align-items:center;gap:8px;margin-top:7px}
.dash .hb img{width:16px;height:16px}
.dash .hb span{width:60px;color:#4a4752}
.dash .hb u{flex:1;height:6px;border-radius:9px;background:#f1edf3;position:relative;overflow:hidden;text-decoration:none}
.dash .hb u:after{content:"";position:absolute;inset:0;background:#6E1E7A;border-radius:9px;transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease);width:calc(var(--v)*1%)}
.dash.in .hb u:after{transform:scaleX(1)}
.dash .hb b{width:26px;text-align:end}
.dash .emp{display:flex;align-items:center;gap:8px;padding:7px 0;border-top:1px solid #f3f0f5;opacity:0;transform:translateX(-14px);transition:.6s var(--ease)}
.dash.in .emp{opacity:1;transform:none}
.dash .emp img,.dash .emp .ini{width:24px;height:24px;border-radius:50%;object-fit:cover;background:#F4EAF6;color:#6E1E7A;display:grid;place-items:center;font-size:9px;font-weight:700}
.dash .emp b{flex:1;font-weight:600}
.dash .emp u{width:90px;height:5px;border-radius:9px;background:#f1edf3;text-decoration:none;position:relative;overflow:hidden}
.dash .emp u:after{content:"";position:absolute;inset:0;width:calc(var(--v)*1%);background:#6E1E7A}
.toast{position:absolute;display:flex;gap:10px;align-items:center;background:#fff;color:var(--ink);border-radius:14px;padding:10px 14px;box-shadow:0 24px 50px -16px rgba(0,0,0,.55);font-size:13px;font-weight:600;z-index:5;opacity:0;transform:translateY(14px);transition:.6s var(--ease)}
.toast.show{opacity:1;transform:none}
.toast small{display:block;color:var(--ink-3);font-weight:500;font-size:11.5px}
.toast .ic{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:#E8F7EE;color:#1E9E55}

/* browser frame for screenshots */
.browser{border-radius:14px;overflow:hidden;background:#1d1b22;box-shadow:0 50px 100px -30px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.06)}
.browser .bar{height:34px;display:flex;align-items:center;gap:7px;padding:0 14px;background:#24222a}
.browser .bar i{width:10px;height:10px;border-radius:50%;background:#4a4752;display:block}
.browser .bar span{margin-inline-start:16px;flex:1;height:20px;border-radius:6px;background:#1a191e;color:rgba(255,255,255,.5);font-size:11px;display:flex;align-items:center;padding:0 10px;direction:ltr}

/* tabs tour */
.tabs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:40px}
.tabs button{height:42px;padding:0 18px;border-radius:99px;border:1px solid var(--line);background:#fff;font-size:14.5px;font-weight:600;color:var(--ink-2);transition:.25s}
.tabs button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.tour{margin-top:34px;display:grid;grid-template-columns:.8fr 1.6fr;gap:40px;align-items:center}
.tour .pane{display:none}.tour .pane.on{display:block;animation:fadeup .5s var(--ease)}
@keyframes fadeup{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.tour h3{font-size:28px;letter-spacing:-.5px}
.tour p{color:var(--ink-2);margin-top:10px}

/* use cases / solutions */
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:56px}
.cards4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:56px}
.uc{border:1px solid var(--line);border-radius:22px;background:#fff;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s;display:flex;flex-direction:column}
.uc:hover{transform:translateY(-5px);box-shadow:0 30px 60px -30px rgba(60,20,70,.3)}
.uc .im{height:190px;overflow:hidden;background:var(--bg-2)}
.uc .im img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.uc:hover .im img{transform:scale(1.06)}
.uc .bd{padding:22px;flex:1;display:flex;flex-direction:column}
.uc i.fi{font-size:20px;color:var(--brand)}
.uc h3{font-size:18px;margin-top:10px}
.uc p{font-size:14.5px;color:var(--ink-2);margin-top:6px;flex:1}
.uc .link{margin-top:14px;font-size:14px}
.dark .uc{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1)}
.dark .uc p{color:rgba(255,255,255,.65)}.dark .uc i.fi{color:var(--lilac)}

/* steps (numbered) */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:56px;counter-reset:s}
.stp{border:1px solid var(--line);border-radius:22px;padding:26px;background:#fff;position:relative}
.dark .stp{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1)}
.stp .n{width:34px;height:34px;border-radius:10px;background:var(--brand);color:#fff;font-weight:700;display:grid;place-items:center}
.stp h3{font-size:18px;margin-top:16px}
.stp p{color:var(--ink-2);font-size:14.5px;margin-top:6px}
.dark .stp p{color:rgba(255,255,255,.65)}

/* video section */
.vid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.vid .play{position:absolute;inset:0;display:grid;place-items:center;z-index:7;cursor:pointer}
.vid .play span{width:78px;height:78px;border-radius:50%;background:rgba(255,255,255,.95);display:grid;place-items:center;color:var(--brand);font-size:24px;box-shadow:0 0 0 0 rgba(255,255,255,.5);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.45)}100%{box-shadow:0 0 0 26px rgba(255,255,255,0)}}
.vid .meta{display:flex;gap:18px;margin-top:26px;color:rgba(255,255,255,.7);font-size:14px}
.modal{position:fixed;inset:0;background:rgba(10,5,14,.85);backdrop-filter:blur(6px);display:none;place-items:center;z-index:100}
.modal.on{display:grid}
.modal video{max-height:88vh;max-width:92vw;border-radius:18px;background:#000}
.modal .x{position:absolute;top:20px;inset-inline-end:24px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:18px}

/* comparison table */
.cmp{margin:56px auto 0;max-width:760px;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:#fff}
.cmp div{display:grid;grid-template-columns:1.4fr 1fr 1fr;padding:16px 24px;border-top:1px solid var(--line);font-size:15px;align-items:center}
.cmp div:first-child{border:0;background:var(--bg-2);font-weight:700}
.cmp span:not(:first-child){text-align:center}
.cmp .y{color:#1E9E55}.cmp .n{color:#C2384A}

/* faq */
.faq{max-width:880px;margin:50px auto 0;display:grid;gap:12px}
.q{border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden}
.q summary{list-style:none;cursor:pointer;padding:20px 24px;font-size:17px;font-weight:600;display:flex;justify-content:space-between;gap:20px}
.q summary::-webkit-details-marker{display:none}
.q summary i{color:var(--ink-3);font-size:14px;margin-top:6px;transition:transform .3s}
.q[open] summary i{transform:rotate(45deg)}
.q p{color:var(--ink-2);font-size:15.5px;padding:0 24px 22px}

/* forms */
.form{background:#fff;border:1px solid var(--line);border-radius:24px;padding:32px;display:grid;gap:14px;color:var(--ink)}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form label{font-size:13.5px;font-weight:600;color:var(--ink-2);display:grid;gap:6px}
.form input,.form select,.form textarea{height:48px;border:1px solid var(--line);border-radius:12px;padding:0 14px;font:inherit;font-size:15px;background:#fbfafc}
.form textarea{height:110px;padding:12px 14px;resize:vertical}
.form .note{font-size:12.5px;color:var(--ink-3)}

/* final cta */
.final{padding:0 0 120px}
.final .box{border-radius:32px;padding:76px;color:#fff;position:relative;overflow:hidden;background:radial-gradient(600px 400px at 90% 0%,rgba(255,206,0,.2),transparent 60%),linear-gradient(130deg,#6E1E7A,#3B0F44 60%,#1D0F26)}
.final h2{font-size:46px;letter-spacing:-1px;line-height:1.1;max-width:620px}
[dir=rtl] .final h2{letter-spacing:0;line-height:1.35}
.final p{color:rgba(255,255,255,.75);font-size:18px;margin-top:14px;max-width:540px}
.final .art{position:absolute;inset-inline-end:60px;top:50%;transform:translateY(-50%)}

/* footer */
footer{background:#0E0812;color:rgba(255,255,255,.66);padding:76px 0 36px;font-size:14.5px}
footer .top{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:40px}
footer h5{color:#fff;font-size:14px;font-weight:600;margin-bottom:16px}
footer ul{list-style:none;display:grid;gap:11px}
footer a:hover{color:#fff}
footer .about p{margin-top:16px;max-width:300px}
footer .contact{margin-top:20px;display:grid;gap:9px}
footer .contact i{width:18px;color:var(--lilac)}
footer .bottom{margin-top:56px;padding-top:24px;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;align-items:center;gap:20px}
footer .bottom b{color:#fff;font-weight:600}

/* ---------- reveal motion ---------- */
[data-r]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--d,0)*90ms)}
[data-r=l]{transform:translateX(-36px)}[data-r=r]{transform:translateX(36px)}[data-r=z]{transform:scale(.94)}
[data-r].in{opacity:1;transform:none}
.static [data-r]{opacity:1;transform:none;transition:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}[data-r]{opacity:1;transform:none}}

/* ---------- mobile ---------- */
@media (max-width:760px){
  .wrap{padding:0 16px}
  .nav ul,.nav .login,.nav .lang{display:none}
  .nav .wrap{height:64px;justify-content:space-between}
  .nav .logo{height:20px}.nav .end{gap:6px}
  .burger{display:grid;place-items:center}
  .hero > .wrap,.page-hero .wrap{grid-template-columns:1fr;min-height:0;padding-top:100px;padding-bottom:10px}
  .page-hero{padding:0 0 60px}
  .hero h1,[dir=rtl] .hero h1{font-size:42px;letter-spacing:-1px;margin-top:18px}
  .page-hero h1,[dir=rtl] .page-hero h1{font-size:36px;letter-spacing:-.6px}
  [dir=rtl] .hero h1,[dir=rtl] .page-hero h1{letter-spacing:0}
  .lead{font-size:16.5px}
  .cta{flex-direction:column}.cta .btn{width:100%}
  .ticks{gap:10px 16px;font-size:13px}
  .stage{height:440px;margin-top:10px}
  .stage-in{position:absolute;zoom:.66;width:600px;height:660px;left:50%;margin-left:-300px}
  [dir=rtl] .stage-in{left:auto;right:50%;margin-left:0;margin-right:-300px}
  section{padding:76px 0}
  .h2,[dir=rtl] .h2{font-size:31px;letter-spacing:-.5px}[dir=rtl] .h2{letter-spacing:0}
  .sub{font-size:16px}
  .facts{grid-template-columns:1fr 1fr}.facts div:nth-child(2){border-inline-end:0}.facts div{border-bottom:1px solid var(--line)}
  .facts b{font-size:30px}
  .story{grid-template-columns:1fr;gap:0}
  .story .pin{position:sticky;top:64px;height:330px;z-index:2;background:linear-gradient(var(--bg) 85%,transparent)}
  .story .pin > div{zoom:.5}
  .story .steps2{padding:20px 0 60px}.story .st{min-height:360px}
  .story h3{font-size:26px}
  .prods,.cards3,.cards4,.steps{grid-template-columns:1fr}
  .bento{grid-template-columns:1fr}.span2,.span3,.span4,.span6{grid-column:auto}
  .rows{gap:70px}.row,.vid,.tour{grid-template-columns:1fr;gap:30px}.row.rev > :first-child{order:0}
  .row h3{font-size:27px}
  .visual{min-height:360px}.visual > div{zoom:.7}
  .dash-wrap{zoom:.44}
  .cmp div{grid-template-columns:1.3fr .8fr .8fr;padding:12px 14px;font-size:13.5px}
  .final{padding-bottom:76px}.final .box{padding:36px 22px;border-radius:24px}
  .final h2{font-size:30px}.final .art{display:none}
  .form .two{grid-template-columns:1fr}
  footer .top{grid-template-columns:1fr 1fr;gap:30px}footer .about{grid-column:1/-1}
  footer .bottom{flex-direction:column;gap:8px}
  .hide-m{display:none!important}
}
.hero h1{font-size:66px}
.st .mini{display:none}
.static .story{grid-template-columns:1fr}
.static .story .pin{display:none}
.static .story .steps2{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;padding:30px 0 0}
.static .story .st{min-height:0;opacity:1;justify-content:flex-start}
.static .story .st .mini{display:flex;justify-content:center;margin-bottom:26px}
.static .story .st h3{font-size:24px}.static .story .st p{font-size:15.5px}
.static .story .steps2 > div:last-child:not(.st){grid-column:1/-1;text-align:center}
@media (max-width:760px){.static .story .steps2{grid-template-columns:1fr}}
.bl li{display:flex;gap:14px}
.bl li > i{width:38px;height:38px;flex:none;border-radius:11px;background:rgba(255,255,255,.08);color:var(--lilac);display:grid;place-items:center;font-size:15px}
.bl li b{display:block;font-weight:600}
.bl li span{color:rgba(255,255,255,.62);font-size:14.5px}
.vid .play,.phone .play{background:none;border:0;padding:0}
.prod .ph img:not([src*="-cut"]):not([src*="life-"]){mix-blend-mode:multiply}
.uc .im img[src*="d-overview"]{object-fit:cover;object-position:left top;transform:scale(1.9);transform-origin:62% 8%}
.uc:hover .im img[src*="d-overview"]{transform:scale(2)}
.pane{display:none}.pane.on{display:block;animation:fadeup .5s var(--ease)}
.biz-hero h1{font-size:56px}
.biz-hero .dash-wrap{zoom:.86}
.vcard{position:relative;width:330px;aspect-ratio:9/16;border-radius:30px;overflow:hidden;box-shadow:0 50px 100px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.12);transform:rotate(-2deg)}
.vcard img{width:100%;height:100%;object-fit:cover}
.vcard:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(10,5,14,.55))}
.vcard .play{z-index:2}
@media (max-width:760px){.vcard{width:260px}}
@media (max-width:760px){.biz-hero .dash-wrap,.dash-wrap{zoom:.44;margin:0!important}.dash-host .toast{display:none}.dash-host{overflow:hidden}}
@media (max-width:760px){.wrap[style*="grid-template-columns"]{grid-template-columns:1fr!important;gap:40px!important}}
@media (max-width:760px){.wrap > *{min-width:0}.btn{white-space:normal}}
@media (max-width:760px){.hero h1,[dir=rtl] .hero h1{font-size:37px}}

/* ===== v3 ===== */
/* hero: status bar turns light when the profile reaches the notch */
.stage .phone .sb{transition:background .5s}
.stage .phone .sb .t,.stage .phone .sb svg{transition:color .5s,fill .5s}
.stage .phone .sb.w{background:transparent}
.stage.s4 .phone .sb.w{background:#F5F5F5}
.stage.s4 .phone .sb.w .t{color:#000}
.stage.s4 .phone .sb.w svg{fill:#000}
.stage.s4 .phone .sb.w rect[fill=none]{stroke:#000}
.stage.s4 .lockscr{opacity:0}

/* custom company cards */
.ccard{position:absolute;width:340px;height:214px;border-radius:18px;padding:22px 24px;display:flex;flex-direction:column;justify-content:space-between;direction:ltr;text-align:left;overflow:hidden;
  box-shadow:0 40px 60px -20px rgba(0,0,0,.55),0 10px 20px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.25),inset 0 0 0 1px rgba(255,255,255,.06)}
.ccard:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.12) 48%,transparent 60%);background-size:260% 100%;animation:sheen 6s ease-in-out infinite}
.ccard .cl{display:flex;gap:10px;align-items:center}
.ccard .cl b{display:block;font-size:17px;letter-spacing:.2px;line-height:1.1}
.ccard .cl small{display:block;font-size:8.5px;letter-spacing:2.6px;opacity:.75;margin-top:3px}
.ccard .nf{position:absolute;top:22px;right:22px;opacity:.8}
.ccard .who b{display:block;font-size:15px;font-weight:600}
.ccard .who span{font-size:11.5px;opacity:.72}
.ccard .kw{position:absolute;right:22px;bottom:20px;font-size:9px;letter-spacing:2px;opacity:.45;font-weight:700;text-transform:uppercase}
.v-navy{background:linear-gradient(140deg,#16305a,#0b1a33 60%,#12284b);color:#fff}
.v-gold{background:linear-gradient(140deg,#1d1c20,#0d0c0f 60%,#18171b);color:#d9b56a}
.v-gold .who b{color:#fff}
.v-white{background:linear-gradient(140deg,#ffffff,#eef0f2);color:#0e6f73}
.v-white .who b,.v-white .who span{color:#1b2126}
.v-purple{background:linear-gradient(140deg,#7a2589,#4a1556 60%,#6E1E7A);color:#fff}
.v-sand{background:linear-gradient(140deg,#e9dcc6,#d6c2a2);color:#5a4630}
.v-green{background:linear-gradient(140deg,#1b4d3c,#0e2c22 60%,#163f31);color:#f1e6cf}
.cstack{position:relative;width:440px;height:330px}
.cstack .ccard{left:30px;top:90px;transition:transform .9s var(--ease),opacity .9s,filter .9s;will-change:transform}
.stack-stage{display:grid;place-items:center;min-height:440px}
.cband .row{grid-template-columns:1fr 1fr}
.cband ul{list-style:none;margin-top:22px;display:grid;gap:12px}
.cband li{display:flex;gap:12px;font-size:15.5px}
.cband li i{width:24px;height:24px;border-radius:7px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-size:11px;flex:none;margin-top:1px}
.cband.dark li{color:rgba(255,255,255,.8)}.cband.dark li i{background:rgba(255,255,255,.08);color:var(--lilac)}
.cband:not(.dark) li{color:var(--ink-2)}

/* product shelf — no boxes, products on one soft stage */
.shelf{margin-top:56px;border-radius:34px;background:radial-gradient(900px 300px at 50% 100%,#ffffff,transparent 70%),linear-gradient(180deg,#f6f2f8,#ece6f0);padding:60px 30px 34px;overflow:hidden;position:relative}
.shelf:after{content:"";position:absolute;left:0;right:0;bottom:96px;height:1px;background:linear-gradient(90deg,transparent,rgba(110,30,122,.12),transparent)}
.sh-row{display:flex;justify-content:space-between;align-items:flex-end;gap:10px}
.sh-item{display:flex;flex-direction:column;align-items:center;flex:1;min-width:0}
.sh-img{height:240px;display:flex;align-items:flex-end;justify-content:center;position:relative}
.sh-img:after{content:"";position:absolute;bottom:-8px;left:50%;width:70%;height:14px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(40,10,50,.28),transparent);filter:blur(2px)}
.sh-img img{max-width:100%;width:auto;object-fit:contain;transition:transform .6s var(--ease);filter:drop-shadow(0 16px 18px rgba(30,10,40,.16))}
.sh-item:hover .sh-img img{transform:translateY(-10px) scale(1.04)}
.sh-cap{text-align:center;margin-top:30px}
.sh-cap b{display:block;font-size:14px;font-weight:600;white-space:nowrap}
.sh-cap span{display:inline-flex;gap:6px;align-items:center;font-size:12.5px;font-weight:600;color:var(--brand);opacity:0;transform:translateY(-4px);transition:.3s}
.sh-cap span i{font-size:10px}
.sh-item:hover .sh-cap span{opacity:1;transform:none}
.sh-more{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.sh-more a{height:38px;padding:0 16px;border-radius:99px;border:1px solid var(--line);display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--ink-2);background:#fff}
.sh-more a:hover{border-color:var(--brand);color:var(--brand)}
.sh-more i{font-size:11px}

/* solution tiles with a full product cut-out */
.sols2{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:56px}
.sol2{position:relative;border:1px solid var(--line);border-radius:22px;background:#fff;padding:24px 24px 150px;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s;display:flex;flex-direction:column}
.sol2:hover{transform:translateY(-5px);box-shadow:0 30px 60px -30px rgba(60,20,70,.3)}
.sol2 .si{width:44px;height:44px;border-radius:12px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-size:18px}
.sol2 h3{font-size:18px;margin-top:16px}
.sol2 p{font-size:14.5px;color:var(--ink-2);margin-top:6px}
.sol2 .link{margin-top:12px;font-size:14px}
.sol2 img{position:absolute;bottom:18px;inset-inline-end:18px;height:120px;width:auto;max-width:55%;object-fit:contain;filter:drop-shadow(0 12px 14px rgba(30,10,40,.18));transition:transform .5s var(--ease)}
.sol2:hover img{transform:translateY(-6px) rotate(-3deg)}
.sol2:before{content:"";position:absolute;inset-inline-end:-40px;bottom:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(closest-side,#f3ebf6,transparent)}

/* product stage */
.pstage{position:relative;border-radius:28px;background:radial-gradient(circle at 50% 42%,#ffffff,#efe9f2 70%);display:grid;place-items:center;overflow:hidden}
.pstage.dk{background:radial-gradient(circle at 55% 35%,#3a1d47,#120A18)}
.pstage img{filter:drop-shadow(0 26px 26px rgba(30,10,40,.2))}
.trio{display:flex;gap:18px;align-items:flex-end;justify-content:center}
.modes{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.modes div{border:1px solid var(--line);border-radius:22px;background:#fff;padding:26px}
.modes i{width:46px;height:46px;border-radius:13px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-size:19px}
.modes b{display:block;font-size:17px;margin-top:14px}
.modes span{display:block;font-size:14px;color:var(--ink-2);margin-top:4px}
.hero-prods{position:relative;width:520px;height:440px}
.hero-prods img{position:absolute;filter:drop-shadow(0 30px 30px rgba(0,0,0,.5))}
.hero-prods .hp1{height:360px;inset-inline-start:40px;top:20px;transform:rotate(-4deg)}
.hero-prods .hp2{height:330px;inset-inline-end:30px;top:50px}
.hero-prods .hp3{height:220px;inset-inline-end:210px;top:160px}
.hero-prods .hp4{position:absolute;inset-inline-start:110px;bottom:-10px}
.hero-prods .hp5{position:absolute;inset-inline-end:-20px;bottom:-80px}
.tile.tphone{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center}

/* mobile menu */
.mnav{position:fixed;inset:0;z-index:60;background:rgba(14,8,18,.98);color:#fff;padding:90px 24px 30px;display:none;flex-direction:column;gap:6px;overflow:auto}
.mnav.on{display:flex}
.mnav a{font-size:20px;font-weight:600;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.mnav .btn{margin-top:18px;font-size:16px}
.mnav .x{position:absolute;top:18px;inset-inline-end:16px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.1);color:#fff;font-size:18px}

/* ===== tablet ===== */
@media (min-width:761px) and (max-width:1180px){
  .wrap{padding:0 28px}
  .nav ul,.nav .login{display:none}.burger{display:grid;place-items:center}
  .hero > .wrap{grid-template-columns:1fr;padding-top:110px;text-align:center}
  .hero .lead{margin-inline:auto}.hero .cta,.hero .ticks{justify-content:center}
  .stage{height:600px;margin:20px auto 0;width:640px}
  .page-hero .wrap,.wrap[style*="grid-template-columns"]{grid-template-columns:1fr!important}
  .page-hero{padding:130px 0 70px}
  .h2,[dir=rtl] .h2{font-size:40px}
  .facts{grid-template-columns:1fr 1fr}.facts div:nth-child(2){border-inline-end:0}.facts div{border-bottom:1px solid var(--line)}
  .story{grid-template-columns:.9fr 1.1fr;gap:40px}.story .pin > div{zoom:.85}
  .sh-row{flex-wrap:wrap;justify-content:center;gap:30px 10px}.sh-item{flex:0 0 23%}
  .sols2,.cards4{grid-template-columns:1fr 1fr}
  .bento{grid-template-columns:repeat(2,1fr)}.span2,.span3{grid-column:span 1}.span4,.span6{grid-column:span 2}
  .steps{grid-template-columns:1fr 1fr}.cards3{grid-template-columns:1fr 1fr}
  .row,.vid,.tour,.cband .row{grid-template-columns:1fr;gap:40px}.row.rev > :first-child{order:0}
  .dash-wrap{zoom:.9;margin:0!important}
  .final .art{display:none}
  footer .top{grid-template-columns:repeat(3,1fr)}footer .about{grid-column:1/-1}
}
/* ===== phone (additions) ===== */
@media (max-width:760px){
  .shelf{padding:30px 0 20px;border-radius:24px}
  .shelf:after{display:none}
  .sh-row{overflow-x:auto;scroll-snap-type:x mandatory;justify-content:flex-start;gap:14px;padding:0 20px 10px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .sh-row::-webkit-scrollbar{display:none}
  .sh-item{flex:0 0 58%;scroll-snap-align:center}
  .sh-img{height:220px}.sh-cap span{opacity:1;transform:none}
  .sols2{grid-template-columns:1fr}
  .sol2{padding-bottom:24px;padding-inline-end:130px;min-height:170px}
  .sol2 img{height:100px;max-width:110px}
  .cstack{zoom:.78;margin-inline-start:-30px}.stack-stage{min-height:320px}
  .cband .row{grid-template-columns:1fr;gap:20px}
  .hero-prods{zoom:.62;margin:0 auto}
  .trio img{max-height:220px}.trio .phone{zoom:.8}
  .modes{grid-template-columns:1fr 1fr;gap:10px}.modes div{padding:16px}
  .pstage{min-height:330px!important}
  .tile.tphone{grid-template-columns:1fr}.tile.tphone > div:last-child{justify-self:center}
}
.pstage{padding:44px}
.pstage .trio{width:100%;align-items:flex-end}
.pstage .trio > img{flex:1 1 0;min-width:0;height:auto!important;max-height:330px;object-fit:contain;object-position:bottom}
.pstage .trio > .phone,.pstage .trio > div{flex:none}
.cstack .ccard{top:118px}.cstack{height:360px}
.sh-item.wide{flex:1.5}
@media (max-width:760px){.pstage{padding:24px}.pstage .trio > img{max-height:230px}}
@media (min-width:761px) and (max-width:1180px){
  .hero h1,[dir=rtl] .hero h1{font-size:54px}
  .stage{zoom:.92}
  .cband .row{grid-template-columns:1fr}.stack-stage{min-height:420px}
  .exs,.cards4{grid-template-columns:1fr 1fr}
  .tile.tphone{grid-template-columns:1fr auto}
  .visual > div,.pstage .trio{zoom:.9}
}
@media (min-width:761px) and (max-width:1180px){.dash-host{overflow:hidden;padding:20px 0}.dash-host .toast{display:none}}
@media (min-width:761px) and (max-width:1180px){.static .story .steps2{grid-template-columns:1fr 1fr}}
/* v4 shelves at real proportions */
.shelves{display:grid;gap:18px;margin-top:56px}
.shelf2{position:relative;border-radius:30px;background:radial-gradient(900px 260px at 50% 100%,#fff,transparent 70%),linear-gradient(180deg,#f6f2f8,#ece6f0);padding:26px 30px 26px;overflow:hidden}
.sh-k{font-size:12.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--ink-3)}
[dir=rtl] .sh-k{letter-spacing:0}
.sh-row2{display:flex;justify-content:center;align-items:flex-end;gap:56px;margin-top:22px}
.sh-item2{display:flex;flex-direction:column;align-items:center}
.sh-img2{display:flex;align-items:flex-end;justify-content:center;position:relative;padding-bottom:6px}
.sh-img2:after{content:"";position:absolute;bottom:-4px;left:8%;right:8%;height:12px;background:radial-gradient(closest-side,rgba(40,10,50,.26),transparent);filter:blur(2px)}
.sh-img2 img{display:block;height:auto;filter:drop-shadow(0 14px 16px rgba(30,10,40,.16));transition:transform .6s var(--ease)}
.sh-item2:hover .sh-img2 img{transform:translateY(-8px) rotate(-1.5deg)}
.sh-item2 .sh-cap{margin-top:22px}
.sh-item2:hover .sh-cap span{opacity:1;transform:none}
/* wide dark stage for the two phones */
.emp-wide{display:grid;gap:40px}
.emp-wide > div:first-child{max-width:720px}
.wide-dk{position:relative;border-radius:30px;min-height:560px;background:radial-gradient(700px 400px at 50% 40%,#3a1d47,#120A18 75%);display:grid;place-items:center;overflow:hidden}
.wide-dk .glowc{position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(closest-side,rgba(201,120,215,.35),transparent)}
.wide-dk .ph2{position:relative;display:flex;gap:70px;align-items:center}
@media (min-width:761px) and (max-width:1180px){.sh-row2{zoom:.82;gap:40px}.wide-dk{min-height:480px}.wide-dk .ph2{zoom:.85}}
@media (max-width:760px){
  .shelf2{padding:20px 0 16px;border-radius:22px}.sh-k{padding:0 20px}
  .sh-row2{justify-content:flex-start;overflow-x:auto;padding:0 24px 8px;gap:36px;scrollbar-width:none;zoom:.8}
  .sh-row2::-webkit-scrollbar{display:none}.sh-item2{flex:none}.sh-item2 .sh-cap span{opacity:1;transform:none}
  .wide-dk{min-height:380px;border-radius:22px}.wide-dk .ph2{zoom:.55;gap:40px}
}
.emp-wide h3{font-size:36px;letter-spacing:-.8px;line-height:1.15}
[dir=rtl] .emp-wide h3{letter-spacing:0;line-height:1.4}
.emp-wide p{font-size:17.5px;color:var(--ink-2);margin-top:14px}
.emp-wide ul{list-style:none;margin-top:22px;display:flex;flex-wrap:wrap;gap:12px 26px}
.emp-wide li{display:flex;gap:10px;font-size:15.5px;color:var(--ink-2)}
.emp-wide li i{width:24px;height:24px;border-radius:7px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-size:11px;flex:none}
@media (max-width:760px){.emp-wide h3{font-size:27px}}

/* ===== v5 ===== */
/* Alexandria is wider than Plex: slightly tighter display sizes */
.hero h1{font-size:62px;letter-spacing:-1.8px;line-height:1.08}
.page-hero h1{font-size:52px;letter-spacing:-1.3px;line-height:1.1}
.h2{font-size:44px;letter-spacing:-1.1px;line-height:1.12}
.final h2{font-size:42px}
[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3,[dir=rtl] .h2{letter-spacing:0!important;line-height:1.3}
[dir=rtl] .hero h1{line-height:1.25}
body{letter-spacing:-.1px}[dir=rtl] body{letter-spacing:0}

/* scroll progress */
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:70;pointer-events:none}
.progress i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--sun),#ff8a00);transform:scaleX(var(--p,0));transform-origin:0 50%}
[dir=rtl] .progress i{transform-origin:100% 50%}

/* sticky nav */
.nav .logo.ld{display:none}
.nav.light .logo.lw{display:none}.nav.light .logo.ld{display:block}
.nav.light{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.88);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px)}
.nav.stuck{position:fixed;background:rgba(255,255,255,.86);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid rgba(20,19,23,.08);box-shadow:0 10px 30px -18px rgba(20,19,23,.25);animation:navIn .45s var(--ease) both;z-index:40}
.nav.stuck .wrap{height:66px}
.nav.stuck .logo.lw{display:none}.nav.stuck .logo.ld{display:block}
.nav.stuck ul > li > a{color:var(--ink-2)}.nav.stuck ul > li > a.on{color:var(--brand)}
.nav.stuck .login,.nav.stuck .burger{color:var(--ink)}
.nav.stuck .lang{border-color:var(--line)}.nav.stuck .lang a{color:var(--ink-3)}.nav.stuck .lang a.on{background:var(--ink);color:#fff}
@keyframes navIn{from{transform:translateY(-100%)}to{transform:none}}
.nav ul > li > a{position:relative}
.nav ul > li > a.on::after{content:'';position:absolute;left:50%;bottom:1px;width:5px;height:5px;border-radius:50%;background:var(--sun);transform:translateX(-50%)}
.nav ul > li > a:hover{background:rgba(255,255,255,.08)}.nav.light ul > li > a:hover,.nav.stuck ul > li > a:hover{background:rgba(20,19,23,.05)}

/* buttons */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn i{transition:transform .3s var(--ease)}
.btn:hover i.fa-arrow-right{transform:translateX(4px)}
[dir=rtl] .btn:hover i.fa-arrow-right{transform:scaleX(-1) translateX(4px)}
.btn:hover i.fa-arrow-up-right-from-square{transform:translate(2px,-2px)}
.btn-sun::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);transition:transform .8s var(--ease)}
.btn-sun:hover::after{transform:translateX(120%)}
.btn-sun:hover{box-shadow:0 16px 34px -12px rgba(255,206,0,.85)}
.btn-line:hover{border-color:var(--ink);box-shadow:0 10px 24px -16px rgba(20,19,23,.5)}

/* clients band (home) */
.clients{overflow:hidden;padding:56px 0 54px;background:#fff;border-bottom:1px solid var(--line)}
.cl-head{display:flex;align-items:center;gap:22px;justify-content:center}
.cl-head p{font-size:14px;font-weight:600;color:var(--ink-2);letter-spacing:1.2px;text-transform:uppercase;white-space:nowrap}
[dir=rtl] .cl-head p{letter-spacing:0;font-size:16px}
.cl-line{height:1px;flex:1;max-width:180px;background:linear-gradient(90deg,transparent,var(--line))}
.cl-head .cl-line:last-child{transform:scaleX(-1)}
.cl-marq{gap:84px;margin-top:34px;animation-duration:46s}
.cl-item img{display:block;width:auto;filter:saturate(.95);transition:transform .35s var(--ease)}
.cl-item:hover img{transform:scale(1.06)}

/* footer whatsapp */
.f-wa{margin-top:20px;background:#1fb45a;color:#fff;box-shadow:0 10px 24px -12px rgba(31,180,90,.8)}

/* mobile / tablet menu */
.mnav{position:fixed;inset:0;z-index:80;display:block;background:rgba(10,6,14,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:0;opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s;color:#fff}
.mnav.on{opacity:1;visibility:visible;display:block}
.mm-panel{position:absolute;inset:0;display:flex;flex-direction:column;background:radial-gradient(120% 60% at 100% 0%,rgba(110,30,122,.55),transparent 60%),radial-gradient(90% 50% at 0% 100%,rgba(255,206,0,.10),transparent 60%),#120a17;transform:translateY(-14px);transition:transform .5s var(--ease)}
.mnav.on .mm-panel{transform:none}
.mm-top{display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 20px;border-bottom:1px solid rgba(255,255,255,.08)}
.mm-top img{height:20px}
.mnav .x{position:static;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#fff;font-size:17px;display:grid;place-items:center}
.mm-body{flex:1;overflow:auto;padding:10px 20px 20px}
.mnav a{border:0;padding:0;font-size:inherit;font-weight:inherit}
.mnav .mm-g,.mnav .mm-l{border-bottom:1px solid rgba(255,255,255,.08)}
.mm-g summary{list-style:none;display:flex;align-items:center;justify-content:space-between;padding:18px 2px;font-size:21px;font-weight:600;cursor:pointer}
.mm-g summary::-webkit-details-marker{display:none}
.mm-g summary i{font-size:14px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.07);transition:transform .35s var(--ease),background .3s}
.mm-g[open] summary i{transform:rotate(45deg);background:var(--sun);color:#1a1300}
.mm-sub{display:grid;gap:4px;padding:0 0 16px}
.mm-sub a{display:flex;align-items:center;gap:14px;padding:11px 12px;border-radius:12px;font-size:16px;font-weight:500;color:rgba(255,255,255,.85)}
.mm-sub a:hover{background:rgba(255,255,255,.06)}
.mm-sub a i{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.07);color:var(--sun);font-size:14px}
.mm-g[open] .mm-sub{animation:mIn .4s var(--ease) both}
.mnav .mm-l{display:flex;align-items:center;justify-content:space-between;padding:18px 2px;font-size:21px;font-weight:600}
.mm-l i{font-size:14px;opacity:.5}
.mm-foot{padding:16px 20px calc(18px + env(safe-area-inset-bottom));display:grid;gap:10px;border-top:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.18)}
.mm-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.mnav .lang{display:flex}
.mm-login{display:flex;align-items:center;gap:8px;font-size:15px!important;font-weight:500!important;color:rgba(255,255,255,.85)}
.mnav .btn{width:100%;margin:0;height:52px;font-size:16px}
.mnav.on .mm-g,.mnav.on .mm-l{animation:mIn .5s var(--ease) both;animation-delay:calc(var(--i) * 45ms + 80ms)}
@keyframes mIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
html.lock,html.lock body{overflow:hidden}
@media (min-width:761px){
  .mm-panel{inset:0 0 0 auto;width:440px;transform:translateX(30px);box-shadow:-30px 0 80px -20px rgba(0,0,0,.6)}
  [dir=rtl] .mm-panel{inset:0 auto 0 0;transform:translateX(-30px)}
  .mm-top{height:78px;padding:0 28px}.mm-body{padding:12px 28px 24px}.mm-foot{padding:18px 28px 24px}
}
@media (min-width:1181px){.mnav{display:none!important}}

/* tablet + mobile sizes */
@media (min-width:761px) and (max-width:1180px){
  .hero h1,[dir=rtl] .hero h1{font-size:52px}
  .h2,[dir=rtl] .h2{font-size:38px}
}
@media (max-width:760px){
  .hero h1,[dir=rtl] .hero h1{font-size:38px;letter-spacing:-.8px}
  .page-hero h1,[dir=rtl] .page-hero h1{font-size:33px}
  .h2,[dir=rtl] .h2{font-size:28px}
  .final h2{font-size:30px}
  .nav.stuck .wrap{height:60px}
  .clients{padding:40px 0 38px}
  .cl-head p{font-size:12px;white-space:normal;text-align:center}[dir=rtl] .cl-head p{font-size:14px}
  .cl-line{max-width:40px}
  .cl-marq{gap:52px;margin-top:24px}.cl-item img{zoom:.8}
}
.cband > .wrap{position:relative;z-index:2}
@media (max-width:760px){
  .sh-row2{display:grid;grid-template-columns:1fr 1fr;gap:30px 10px;overflow:visible;padding:0 4px;zoom:1;justify-items:center;align-items:end}
  .sh-img2{zoom:.6}
  .sh-item2:last-child:nth-child(odd){grid-column:1/-1}
  .sh-item2 .sh-cap{margin-top:14px;text-align:center}
}

/* ===== v6: legal pages, contact form ===== */
.legal-hero{padding:150px 0 70px}.legal-hero .wrap{display:block}
.legal-hero h1{max-width:760px}
.legal{display:grid;grid-template-columns:260px 1fr;gap:64px;align-items:start}
.legal aside{position:sticky;top:96px}
.legal .toc{display:grid;gap:2px;border-inline-start:2px solid var(--line);padding-inline-start:18px}
.legal .toc b{font-size:12.5px;text-transform:uppercase;letter-spacing:1.2px;color:var(--ink-3);margin-bottom:10px}
[dir=rtl] .legal .toc b{letter-spacing:0;font-size:14px}
.legal .toc a{font-size:14.5px;color:var(--ink-2);padding:6px 0}.legal .toc a:hover{color:var(--brand)}
.legal article{max-width:760px}
.legal article section{padding:0 0 34px;margin-bottom:34px;border-bottom:1px solid var(--line);scroll-margin-top:96px}
.legal article section:last-child{border:0}
.legal h2{font-size:24px;letter-spacing:-.4px;margin-bottom:14px}
.legal p,.legal li{color:var(--ink-2);font-size:16px;line-height:1.8}
.legal p + p{margin-top:12px}
.legal ul{display:grid;gap:10px;padding-inline-start:20px;list-style:disc}
.legal li::marker{color:var(--brand)}
.legal a{color:var(--brand);font-weight:500}
@media (max-width:1000px){.legal{grid-template-columns:1fr;gap:30px}.legal aside{position:static}}
@media (max-width:760px){.legal-hero{padding:110px 0 50px}.legal h2{font-size:20px}.legal p,.legal li{font-size:15px}}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form{position:relative}
.fmsg{font-size:14px;font-weight:500;border-radius:12px;padding:0;max-height:0;overflow:hidden;transition:all .3s}
.fmsg.ok{background:#E8F7EE;color:#14753d;padding:12px 14px;max-height:200px}
.fmsg.err{background:#FDECEC;color:#b42318;padding:12px 14px;max-height:200px}
.form button[disabled]{opacity:.6;pointer-events:none}
.form .bad{border-color:#e5484d!important}

/* ===== v7: review fixes ===== */
/* icons next to text */
footer .contact a{display:flex;align-items:center;gap:12px}
footer .contact i{flex:none}
/* product cut-outs never stretch */
img[src$="-cut.webp"]{object-fit:contain}
/* shelves: real proportions from CSS variables, scaled per screen, wrap instead of squeezing */
.shelves{--k:1}
.sh-row2{flex-wrap:wrap;row-gap:34px}
.sh-img2{zoom:1!important}
.sh-img2 img{flex:none;max-width:none}
.sh-img2 img.bw{width:calc(var(--w) * var(--k));height:auto}
.sh-img2 img.bh{height:calc(var(--h) * var(--k));width:auto}
.sh-item2{cursor:default}
.sh-item2 .sh-cap b{display:block}
@media (max-width:1280px){.shelves{--k:.88}}
@media (min-width:761px) and (max-width:1180px){.sh-row2{zoom:1!important;gap:34px}.shelves{--k:.78}}
@media (max-width:760px){.sh-row2{zoom:1!important}.shelves{--k:.6}}
/* clients marquee: GPU transform, equal sets, edge fade without masks */
.cl-wrap,.logos .marq-wrap{-webkit-mask:none!important;mask:none!important;position:relative;overflow:hidden}
.cl-wrap::before,.cl-wrap::after{content:"";position:absolute;top:0;bottom:0;width:140px;z-index:2;pointer-events:none}
.cl-wrap::before{left:0;background:linear-gradient(90deg,#fff,rgba(255,255,255,0))}
.cl-wrap::after{right:0;background:linear-gradient(270deg,#fff,rgba(255,255,255,0))}
.marq{will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:translate3d(0,0,0)}
@keyframes marq{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.logos .marq{-webkit-mask:none!important;mask:none!important;gap:0}
.logos .lg-item{padding:0 35px}
.cl-marq{gap:0!important;margin-top:34px;animation-duration:42s}
.cl-item{flex:none;padding:0 42px}
.cl-item img{height:calc(var(--h) * var(--lk,1));width:auto;zoom:1!important}
@media (max-width:760px){.cl-item{padding:0 26px}.cl-item img{--lk:.8}.cl-wrap::before,.cl-wrap::after{width:60px}}
/* dashboard mock: fitted by script to its column, never cut */
.dash-wrap{zoom:1!important;margin:0!important;max-width:100%}
.biz-hero .dash-wrap{zoom:1!important}
.dash-wrap .dash{transform-origin:top left}
[dir=rtl] .dash-wrap .dash{transform-origin:top right}
.dash .hb span{width:76px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:none}
.dash .hb b{width:32px;flex:none}
.dash .emp u{flex:none}
.dash .emp b{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* team dashboard tabs: panes stacked in one cell and cross-faded */
[data-tabs]{display:grid}
[data-tabs] > *{grid-column:1;min-width:0}
[data-tabs] > .pane{grid-row:3;display:block!important;opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility 0s linear .45s;animation:none!important}
[data-tabs] > .pane.on{opacity:1;visibility:visible;transition:opacity .45s var(--ease)}
/* sticky bar: dark glass on every background */
.nav.stuck{background:rgba(18,10,24,.8);border-bottom:1px solid rgba(255,255,255,.08);box-shadow:0 12px 34px -20px rgba(0,0,0,.7)}
.nav.stuck .logo.lw{display:block}.nav.stuck .logo.ld{display:none}
.nav.stuck ul > li > a{color:rgba(255,255,255,.8)}.nav.stuck ul > li > a.on{color:#fff}
.nav.stuck ul > li > a:hover{background:rgba(255,255,255,.08)}
.nav.stuck .login,.nav.stuck .burger{color:#fff}
.nav.stuck .lang{border-color:rgba(255,255,255,.2)}.nav.stuck .lang a{color:rgba(255,255,255,.7)}.nav.stuck .lang a.on{background:#fff;color:var(--ink)}
@media (max-width:1180px){.dash-host{display:flex;justify-content:center}.dash-host .dash-wrap{flex:none}}

/* icons (inline SVG sprite /site/i.svg) */
i[class*="fa-"]{display:inline-flex;align-items:center;justify-content:center;font-style:normal;line-height:1;vertical-align:-.125em}
i[class*="fa-"] svg{height:1em;fill:currentColor;display:block;overflow:visible}
[dir=rtl] .flip-rtl{transform:scaleX(-1)}