:root{
  --bg:#f4f8f6; --bg2:#ffffff; --ink:#0f2a22; --mute:#52665f; --line:rgba(15,42,34,.1);
  --mint:#1b9370; --mint2:#127055; --mint-soft:rgba(27,147,112,.1); --sun:#f3c969; --sky:#7fb2f0; --rose:#e7727a;
  --card:#ffffff; --shadow:0 30px 60px -34px rgba(15,60,45,.35), 0 2px 0 rgba(255,255,255,.7) inset;
  --r:26px; --max:1180px;
  --serif:'Fraunces',Georgia,serif; --sans:'Inter','Cairo',system-ui,sans-serif;
}
html[lang="ar"]{--serif:'Cairo',system-ui,sans-serif; --sans:'Cairo','Inter',system-ui,sans-serif}
*{box-sizing:border-box} html{scroll-behavior:smooth; scroll-padding-top:90px}
body{margin:0; background:var(--bg); color:var(--ink); font:400 17px/1.6 var(--sans); -webkit-font-smoothing:antialiased; overflow-x:hidden}
a{color:inherit} img,svg{display:block}
.wrap{width:min(var(--max),100% - 40px); margin-inline:auto}
h1,h2,h3{font-family:var(--serif); font-weight:500; letter-spacing:-.02em; line-height:1.08; margin:0}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3{letter-spacing:0; line-height:1.3; font-weight:700}
.eyebrow{display:inline-flex; gap:8px; align-items:center; font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--mint2)}
html[lang="ar"] .eyebrow{letter-spacing:0; font-size:14px; text-transform:none}
.eyebrow::before{content:''; width:22px; height:2px; background:var(--mint); border-radius:2px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; height:52px; padding:0 26px; border-radius:30px; border:1px solid transparent; font:600 16px var(--sans); cursor:pointer; text-decoration:none; transition:transform .2s, box-shadow .25s, background .2s}
.btn.pri{background:linear-gradient(135deg,var(--mint),var(--mint2)); color:#fff; box-shadow:0 14px 30px -14px rgba(18,112,85,.7)}
.btn.pri:hover{transform:translateY(-2px); box-shadow:0 20px 36px -14px rgba(18,112,85,.75)}
.btn.ghost{background:rgba(255,255,255,.7); border-color:var(--line); color:var(--ink)} .btn.ghost:hover{background:#fff; transform:translateY(-2px)}
.btn.sm{height:42px; padding:0 20px; font-size:15px}
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(27,147,112,.45); outline-offset:3px}

/* nav */
.nav{position:fixed; z-index:50; top:14px; inset-inline:14px; display:flex; justify-content:center; pointer-events:none}
.nav .in{pointer-events:auto; width:min(1080px,100%); height:62px; padding:0 12px 0 22px; display:flex; align-items:center; gap:20px; border-radius:34px; border:1px solid var(--line); background:rgba(255,255,255,.78); -webkit-backdrop-filter:blur(16px) saturate(1.4); backdrop-filter:blur(16px) saturate(1.4); box-shadow:0 18px 40px -26px rgba(15,60,45,.5)}
html[dir="rtl"] .nav .in{padding:0 22px 0 12px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; font:600 22px var(--serif); letter-spacing:-.02em}
.brand img{width:30px; height:30px}
.links{display:flex; gap:4px; margin-inline:auto}
.links a{padding:8px 14px; border-radius:20px; text-decoration:none; font-size:15px; color:var(--mute); transition:.2s} .links a:hover{background:var(--mint-soft); color:var(--ink)}
.lang{height:40px; padding:0 14px; border-radius:22px; border:1px solid var(--line); background:transparent; font:600 14px var(--sans); cursor:pointer; color:var(--ink)} .lang:hover{background:var(--mint-soft)}
@media(max-width:820px){.brand{white-space:nowrap; font-size:19px} .brand img{width:26px; height:26px} .links{display:none} .nav .in{gap:10px} .nav .btn.sm{margin-inline-start:auto; white-space:nowrap; padding:0 16px; font-size:14px}}

/* hero */
.hero{position:relative; padding:150px 0 70px; overflow:hidden}
.aur{position:absolute; inset:0; z-index:0; pointer-events:none}
.aur i{position:absolute; border-radius:50%; filter:blur(80px); opacity:.55}
.aur i:nth-child(1){width:560px; height:560px; left:-10%; top:-18%; background:#69d6b8; animation:d1 20s ease-in-out infinite alternate}
.aur i:nth-child(2){width:480px; height:480px; right:-8%; top:6%; background:#9cc4f4; animation:d2 24s ease-in-out infinite alternate}
.aur i:nth-child(3){width:420px; height:420px; left:34%; bottom:-30%; background:#f5deA0; opacity:.45; animation:d1 28s ease-in-out infinite alternate-reverse}
@keyframes d1{to{transform:translate(90px,60px) scale(1.15)}} @keyframes d2{to{transform:translate(-80px,80px) scale(.9)}}
.hero .grid{position:relative; z-index:1; display:grid; grid-template-columns:1.02fr 1fr; gap:54px; align-items:center}
.hero h1{font-size:clamp(44px,6vw,78px); margin:18px 0 22px}
.hero h1 em{font-style:italic; color:var(--mint2)} html[lang="ar"] .hero h1 em{font-style:normal}
.hero p.lead{font-size:clamp(18px,1.6vw,21px); color:var(--mute); max-width:34em; margin:0 0 30px}
.cta{display:flex; flex-wrap:wrap; gap:12px}
.chips{display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:30px; color:var(--mute); font-size:14.5px}
.chips span{display:inline-flex; gap:8px; align-items:center} .chips svg{width:18px; height:18px; color:var(--mint)}
@media(max-width:940px){.hero{padding-top:120px} .hero .grid{grid-template-columns:1fr; gap:40px}}

/* product mock */
.mock{position:relative; padding:14px 0}
.win{background:var(--card); border:1px solid var(--line); border-radius:28px; box-shadow:var(--shadow); overflow:hidden; direction:ltr; text-align:left}
.win .bar{display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid var(--line); background:linear-gradient(#fbfdfc,#f3f8f6)}
.win .bar i{width:10px; height:10px; border-radius:50%; background:#d9e4df} .win .bar b{margin-inline-start:12px; font:500 12.5px var(--sans); color:var(--mute)}
.win .body{padding:18px}
.kp{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.kp div{border:1px solid var(--line); border-radius:16px; padding:12px 14px; background:#fbfdfc}
.kp small{display:block; font-size:11.5px; color:var(--mute)} .kp b{display:block; font:500 22px var(--serif); margin-top:2px; font-variant-numeric:tabular-nums}
.kp em{font-style:normal; font-size:11px; color:var(--mint2)}
.chart{display:flex; align-items:flex-end; gap:8px; height:96px; margin:16px 2px 6px}
.chart i{flex:1; border-radius:7px 7px 3px 3px; background:linear-gradient(var(--mint),#79d3b9); transform-origin:bottom; animation:grow 1.1s cubic-bezier(.2,.8,.2,1) both}
.chart i:nth-child(odd){background:linear-gradient(#5fb9a0,#a9e2d2)}
@keyframes grow{from{transform:scaleY(.05)}}
.days{display:flex; justify-content:space-between; font-size:10.5px; color:var(--mute); padding:0 4px 12px}
.q{display:grid; gap:8px}
.q .p{display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--line); border-radius:16px; font-size:13.5px}
.q .av{width:32px; height:32px; border-radius:50%; display:grid; place-items:center; font:600 12px var(--sans); color:#fff; flex:none}
.q .p span{flex:1; min-width:0} .q .p small{display:block; color:var(--mute); font-size:11.5px}
.tag{font-size:11px; font-weight:600; padding:4px 10px; border-radius:12px; white-space:nowrap}
.tag.g{background:rgba(27,147,112,.12); color:#0e6f53} .tag.y{background:rgba(243,201,105,.3); color:#7a5a07} .tag.b{background:rgba(127,178,240,.25); color:#1e4f91} .tag.r{background:rgba(231,114,122,.18); color:#a3333b}
.float{position:absolute; background:#fff; border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); padding:12px 16px; font-size:13px; direction:ltr; text-align:left; animation:bob 6s ease-in-out infinite alternate}
.float b{display:block; font-weight:600} .float small{color:var(--mute)}
.f1{inset-inline-start:-34px; bottom:-14px} .f2{inset-inline-end:-18px; top:-10px; animation-delay:-3s}
html[dir="rtl"] .f1{inset-inline-start:auto; inset-inline-end:-26px} 
@keyframes bob{to{transform:translateY(-10px)}}
.cap{font-size:12px; color:var(--mute); text-align:center; margin-top:14px}
@media(max-width:560px){.float{display:none} .kp b{font-size:18px}}


/* ---------- parallax ---------- */
#prog{position:fixed; z-index:60; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--mint),#7fb2f0); transform-origin:0 50%; transform:scaleX(0)} html[dir="rtl"] #prog{transform-origin:100% 50%}
.hero .grid{will-change:transform,opacity} #safety{transform-origin:50% 0; will-change:transform,opacity}
section,header.hero{overflow:clip}
.wrap{position:relative; z-index:1}
[data-depth]{will-change:translate}
.deco{position:absolute; z-index:0; pointer-events:none}
.deco.ring{border-radius:50%; border:2px solid rgba(27,147,112,.42)}
.deco.ring.f{border:0; background:radial-gradient(circle at 30% 30%,rgba(27,147,112,.28),rgba(27,147,112,.04) 70%)}
.deco.blob{border-radius:50%; filter:blur(60px)}
.deco.leaf{background:url(../logo.svg) center/contain no-repeat; opacity:.13}
.deco.dots{background-image:radial-gradient(rgba(27,147,112,.35) 2px,transparent 2.5px); background-size:22px 22px; opacity:.9; -webkit-mask-image:radial-gradient(closest-side,#000,transparent); mask-image:radial-gradient(closest-side,#000,transparent)}
.deco.plus{width:26px; height:26px; background:linear-gradient(var(--mint),var(--mint)) center/100% 3px no-repeat,linear-gradient(var(--mint),var(--mint)) center/3px 100% no-repeat; opacity:.6; border-radius:2px}
.dark .deco.ring{border-color:rgba(127,224,189,.2)} .dark .deco.leaf{opacity:.06; filter:brightness(3)} .dark .deco.dots{background-image:radial-gradient(rgba(127,224,189,.5) 2px,transparent 2.5px)}
.hero .deco.leaf{opacity:.14}

/* sections */
section{position:relative}
.sec{padding:96px 0}
.head{max-width:44em; margin:0 auto 52px; text-align:center}
.head h2{font-size:clamp(34px,4.4vw,56px); margin:14px 0 16px}
.head p{color:var(--mute); font-size:19px; margin:0}
.rev{opacity:0; transform:translateY(24px); transition:opacity .8s, transform .8s cubic-bezier(.2,.8,.2,1)} .rev.on{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){.rev{opacity:1; transform:none; transition:none} .aur i,.float,.chart i{animation:none}}

/* journey */
.journey{display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative}
.journey::before{content:''; position:absolute; top:30px; inset-inline:10%; height:2px; background:repeating-linear-gradient(90deg,var(--mint) 0 8px,transparent 8px 16px); opacity:.45}
.step{position:relative; text-align:center; padding:0 10px}
.step .n{width:60px; height:60px; margin:0 auto 18px; border-radius:50%; background:#fff; border:2px solid var(--mint); display:grid; place-items:center; color:var(--mint2); box-shadow:0 10px 24px -12px rgba(18,112,85,.6)}
.step .n svg{width:26px; height:26px}
.step h3{font-size:21px; margin-bottom:8px} .step p{margin:0; color:var(--mute); font-size:15px}
@media(max-width:900px){.journey{grid-template-columns:1fr; gap:26px} .journey::before{display:none} .step{display:grid; grid-template-columns:60px 1fr; gap:16px; text-align:start; align-items:start} .step .n{margin:0}}



/* problem → solution */
html[lang="ar"] .tg{letter-spacing:0; font-size:13px; text-transform:none}
.sl{background:linear-gradient(160deg,#ffffff,#eaf6f1); border:1px solid rgba(27,147,112,.3); box-shadow:var(--shadow); border-radius:28px; padding:26px 28px}
.tg{display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:6px 12px; border-radius:14px}
.sl h3{margin:14px 0 8px !important; font-size:clamp(22px,2.1vw,28px) !important}
.sl .tg{background:var(--mint-soft); color:var(--mint2)}
.sl h3{font-size:clamp(24px,2.4vw,32px); margin:16px 0 10px}
.sl p{margin:0 0 18px; color:var(--mute); font-size:16px}
.vis{direction:ltr; text-align:left; border:1px solid var(--line); border-radius:20px; background:#fff; padding:14px 16px; font-size:13px}
.vis .t{font-size:11.5px; color:var(--mute); margin-bottom:8px; display:flex; justify-content:space-between}
.slots{display:grid; grid-template-columns:repeat(4,1fr); gap:7px}
.slots b{font-weight:500; text-align:center; padding:8px 0; border-radius:11px; background:rgba(27,147,112,.1); color:#0e6f53}
.slots b.x{background:#eef1f0; color:#9aa7a2; text-decoration:line-through} .slots b.s{background:var(--mint); color:#fff}
.chip{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:5px 11px; border-radius:12px; margin:2px 4px 2px 0}
.chip.r{background:rgba(231,114,122,.16); color:#a3333b} .chip.y{background:rgba(243,201,105,.32); color:#7a5a07} .chip.g{background:rgba(27,147,112,.13); color:#0e6f53} .chip.b{background:rgba(127,178,240,.25); color:#1e4f91}
.pt{display:flex; gap:12px; align-items:center; margin-bottom:10px} .pt .av{width:38px; height:38px; border-radius:50%; background:#1b9370; color:#fff; display:grid; place-items:center; font-weight:600; font-size:13px} .pt b{display:block; font-weight:600} .pt small{color:var(--mute)}
.bar2{display:grid; grid-template-columns:96px 1fr auto; gap:10px; align-items:center; padding:5px 0} .bar2 .tr{height:7px; border-radius:4px; background:#e8efec; overflow:hidden} .bar2 .tr i{display:block; height:100%; border-radius:4px; background:var(--mint)} .bar2 .tr i.w{background:#e9b64a} .bar2 .tr i.d{background:#e7727a}
.ln{display:flex; justify-content:space-between; padding:6px 0; border-top:1px solid var(--line)} .ln:first-of-type{border-top:0} .ln.tot{font-weight:700; font-size:14px} .ln span:last-child{font-variant-numeric:tabular-nums}
.mini{display:flex; align-items:flex-end; gap:6px; height:64px; margin:6px 0 10px} .mini i{flex:1; border-radius:5px 5px 2px 2px; background:linear-gradient(var(--mint),#8bd8c0)}
.perm{display:grid; grid-template-columns:1fr auto auto; gap:6px 14px; align-items:center} .perm span:nth-child(3n+1){font-weight:600}
.ok{color:#0e6f53;font-weight:700} .no{color:#c04a52;font-weight:700}
.log{margin-top:10px; padding:9px 12px; border-radius:12px; background:#f3f8f6; color:#33554a; font-size:12.5px}
.brs{display:grid; grid-template-columns:1fr 1fr; gap:10px} .brs div{border:1px solid var(--line); border-radius:14px; padding:10px 12px} .brs b{display:block; font:500 20px var(--serif)} .brs small{color:var(--mute)}
.also{margin-top:46px; text-align:center} .also h4{margin:0 0 14px; font:600 14px var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--mute)} html[lang="ar"] .also h4{letter-spacing:0; font-size:15px}
.mods{display:flex; flex-wrap:wrap; justify-content:center; gap:10px}
.mod{padding:9px 16px; border-radius:22px; background:var(--card); border:1px solid var(--line); font-size:14.5px; display:inline-flex; gap:9px; align-items:center; transition:.25s} .mod:hover{border-color:rgba(27,147,112,.5); transform:translateY(-3px)} .mod svg{width:18px; height:18px; color:var(--mint2)}


/* problem list + solution panel (compact) */
.psx{display:grid; grid-template-columns:minmax(300px,.85fr) 1.25fr; gap:26px; align-items:start; max-width:1060px; margin:0 auto}
.plist{display:grid; gap:8px}
.pbtn{position:relative; overflow:hidden; display:grid; grid-template-columns:30px 1fr; gap:12px; align-items:center; text-align:start; padding:12px 16px; border-radius:18px; border:1px solid var(--line); background:#fff; color:var(--ink); font:inherit; cursor:pointer; transition:background .25s,border-color .25s,transform .25s}
.pbtn:hover{transform:translateX(4px)} html[dir="rtl"] .pbtn:hover{transform:translateX(-4px)}
.pbtn .n{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font:700 13px var(--sans); background:rgba(231,114,122,.14); color:#a3333b; transition:.25s}
.pbtn q{quotes:none; font:500 15.5px/1.35 var(--serif)} html[lang="ar"] .pbtn q{font-weight:600; line-height:1.5; font-size:15px}
.pbtn.on{background:linear-gradient(160deg,#fff6f4,#fdecea); border-color:rgba(231,114,122,.45)}
.pbtn.on .n{background:#e7727a; color:#fff}
.pbtn::after{content:''; position:absolute; inset-inline-start:0; bottom:0; height:3px; width:0; background:#e7727a}
.pbtn.on.run::after{animation:fill 7s linear forwards}
@keyframes fill{to{width:100%}}
.ppanel{position:sticky; top:96px; min-height:380px}
.ppanel .was{display:flex; gap:10px; align-items:flex-start; margin:14px 0 4px; padding:10px 14px; border-radius:14px; background:rgba(231,114,122,.1); color:#8a4a4e; font-size:14.5px}
.ppanel .was b{font-weight:700; color:#a3333b; white-space:nowrap}
.ppanel .sw{animation:swap .45s cubic-bezier(.2,.8,.2,1) both} @keyframes swap{from{opacity:0; transform:translateY(12px)}}
@media(max-width:900px){.psx{grid-template-columns:1fr; gap:8px} .ppanel{position:static; min-height:0; margin:4px 0 10px}}
@media(prefers-reduced-motion:reduce){.pbtn.on.run::after{animation:none; width:100%} .ppanel .sw{animation:none}}

/* we are with you */
.with{display:grid; grid-template-columns:1fr 1.05fr; gap:60px; align-items:center}
.with h2{font-size:clamp(34px,4.4vw,56px); margin:14px 0 18px} .with p.lead{font-size:19px; color:var(--mute); margin:0 0 26px}
.big-note{display:flex; gap:14px; align-items:center; padding:16px 20px; border-radius:22px; background:var(--mint-soft); border:1px solid rgba(27,147,112,.25); font-weight:600; color:#0e5f47}
.big-note svg{width:30px; height:30px; flex:none; color:var(--mint)}
.tl{position:relative; display:grid; gap:18px; padding-inline-start:34px}
.tl::before{content:''; position:absolute; inset-inline-start:15px; top:14px; bottom:14px; width:2px; background:linear-gradient(var(--mint),rgba(27,147,112,.15))}
.tl .it{position:relative; padding:22px 24px; border-radius:24px; background:var(--card); border:1px solid var(--line); box-shadow:0 18px 40px -30px rgba(15,60,45,.5)}
.tl .it::before{content:attr(data-n); position:absolute; inset-inline-start:-34px; top:20px; width:32px; height:32px; border-radius:50%; background:var(--mint); color:#fff; display:grid; place-items:center; font:700 14px var(--sans); box-shadow:0 0 0 6px var(--bg)}
.tl h3{font:600 19px var(--sans); letter-spacing:0; margin:0 0 6px} html[lang="ar"] .tl h3{font-weight:700} .tl p{margin:0; color:var(--mute); font-size:15.5px}
@media(max-width:900px){.with{grid-template-columns:1fr; gap:36px}}

/* safety split */
.split{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
.split h2{font-size:clamp(32px,4vw,50px); margin:14px 0 18px} .split p.lead{color:var(--mute); font-size:18px; margin:0 0 26px}
.tick{list-style:none; padding:0; margin:0; display:grid; gap:14px}
.tick li{display:grid; grid-template-columns:28px 1fr; gap:12px; align-items:start}
.tick svg{width:26px; height:26px; color:var(--mint); margin-top:1px} .tick b{display:block; font-weight:600} .tick span{color:var(--mute); font-size:15.5px}
.dark{background:linear-gradient(160deg,#0f2a22,#14463a); color:#eaf6f1; border-radius:44px; margin-inline:14px}
.dark .eyebrow{color:#7fe0bd} .dark .eyebrow::before{background:#7fe0bd} .dark .tick svg{color:#7fe0bd} .dark .tick span,.dark p.lead{color:#a8c7bc}
.rx{background:#fff; color:var(--ink); border-radius:26px; padding:22px; box-shadow:0 40px 70px -30px rgba(0,0,0,.6); direction:ltr; text-align:left}
.rx h4{margin:0 0 2px; font:500 20px var(--serif)} .rx .sub{font-size:12.5px; color:var(--mute); margin-bottom:14px}
.warn{display:flex; gap:10px; align-items:flex-start; background:rgba(231,114,122,.12); border:1px solid rgba(231,114,122,.4); color:#8f2a31; border-radius:14px; padding:10px 12px; font-size:13px; margin-bottom:12px}
.warn svg{width:20px; height:20px; flex:none; margin-top:1px}
.drug{display:flex; justify-content:space-between; gap:10px; padding:10px 0; border-top:1px solid var(--line); font-size:14px} .drug small{display:block; color:var(--mute); font-size:12px}
.batch{margin-top:12px; border:1px solid var(--line); border-radius:16px; padding:12px; background:#f7fbf9; font-size:12.5px}
.batch .row{display:flex; justify-content:space-between; padding:3px 0} .batch .row.first{font-weight:600; color:#0e6f53}
@media(max-width:900px){.split{grid-template-columns:1fr; gap:38px}}

/* own it */
.own{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.own div{padding:30px 26px; border-radius:var(--r); background:var(--card); border:1px solid var(--line)}
.own b{display:block; font:500 34px var(--serif); color:var(--mint2); margin-bottom:6px} .own h3{font-size:19px; margin-bottom:8px; font-family:var(--sans); font-weight:600; letter-spacing:0} .own p{margin:0; color:var(--mute); font-size:15px}
@media(max-width:800px){.own{grid-template-columns:1fr}}

/* faq */
.faq{max-width:820px; margin:0 auto; display:grid; gap:12px}
details{border:1px solid var(--line); border-radius:22px; background:var(--card); padding:4px 24px; transition:box-shadow .3s}
details[open]{box-shadow:var(--shadow)}
summary{cursor:pointer; list-style:none; padding:18px 0; font-weight:600; font-size:17px; display:flex; justify-content:space-between; gap:16px; align-items:center}
summary::-webkit-details-marker{display:none} summary::after{content:'+'; font-size:26px; line-height:1; color:var(--mint2); transition:transform .3s} details[open] summary::after{transform:rotate(45deg)}
details p{margin:0 0 20px; color:var(--mute); font-size:16px}


.lang{text-decoration:none; display:inline-flex; align-items:center}
.world{position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; background:linear-gradient(180deg,#eefaf5 0%,#f4f8f6 38%,#eef3fb 72%,#f6f4ea 100%)}
.world .o{position:absolute; left:0; top:0; will-change:transform}
.world .o>i{display:block; width:100%; height:100%; animation:wbob var(--bd,7s) ease-in-out var(--bl,0s) infinite alternate}
.world .blob>i{border-radius:50%; filter:blur(70px); opacity:.55; background:var(--c)}
.world .ring>i{border-radius:50%; border:2px solid rgba(27,147,112,.4)}
.world .ringf>i{border-radius:50%; background:radial-gradient(circle at 30% 30%,rgba(27,147,112,.3),rgba(27,147,112,.04) 70%)}
.world .dots>i{background-image:radial-gradient(rgba(27,147,112,.4) 2px,transparent 2.5px); background-size:22px 22px; -webkit-mask-image:radial-gradient(closest-side,#000,transparent); mask-image:radial-gradient(closest-side,#000,transparent)}
.world .leaf>i{background:url(../logo.svg) center/contain no-repeat; opacity:.12}
.world .plus>i{background:linear-gradient(var(--mint),var(--mint)) center/100% 3px no-repeat,linear-gradient(var(--mint),var(--mint)) center/3px 100% no-repeat; opacity:.6}
.world .bub>i{border-radius:20px; background:#fff; box-shadow:0 18px 36px -14px rgba(18,112,88,.35); border:1px solid rgba(27,147,112,.15); display:grid; place-items:center; color:var(--mint2)}
.world .bub svg{width:46%; height:46%}
@keyframes wbob{from{transform:translate3d(0,-14px,0) rotate(-3deg)}to{transform:translate3d(8px,16px,0) rotate(3deg)}}
@media(max-width:700px){.world .bub{opacity:.35}}
@media(prefers-reduced-motion:reduce){.world .o>i{animation:none}}
/* showcase */
.free{display:inline-flex; align-items:center; gap:8px; margin:0 0 18px; padding:7px 14px; border-radius:99px; background:#fff3d6; color:#8a5a00; border:1px solid #f1d38a; font-size:14px; font-weight:600}
.free::before{content:""; width:8px; height:8px; border-radius:50%; background:#e0a73e; box-shadow:0 0 0 4px rgba(224,167,62,.25)}
.cta .free{margin:0 0 0 4px}
#showcase{padding-top:20px; position:relative} #showcase .wrap{position:relative; z-index:1} .shot img{will-change:transform; transform:scale(1.12)}
.shot{transition:box-shadow .3s} .shot:hover{box-shadow:0 40px 80px -30px rgba(18,112,88,.45)}
.shots{display:grid; grid-template-columns:repeat(6,1fr); gap:26px}
.shot{margin:0; border-radius:22px; overflow:hidden; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow)}
.shot.big{grid-column:span 6}.shot.half{grid-column:span 3}
.shot .tb{display:flex; gap:6px; align-items:center; padding:11px 16px; background:#eef4f1; border-bottom:1px solid var(--line)}
.shot .tb i{width:10px; height:10px; border-radius:50%; background:#cfdcd6}
.shot .pic{overflow:hidden; aspect-ratio:2400/1380; background:#eef4f1} .shot img{display:block; width:100%; height:auto; margin-top:-2.5%; will-change:transform}
.shot figcaption{padding:14px 20px 18px; font-size:15px; color:var(--mute)} .shot figcaption b{display:block; color:var(--ink,#13302a); font-size:18px; margin-bottom:2px}
@media(max-width:820px){.shot.half{grid-column:span 6}.shots{gap:18px}}
/* demo */
#demo{padding:96px 0 110px}
.demo{display:grid; grid-template-columns:.9fr 1.1fr; gap:46px; align-items:start; padding:clamp(26px,4vw,54px); border-radius:44px; background:linear-gradient(150deg,#fff,#eaf6f1); border:1px solid var(--line); box-shadow:var(--shadow)}
.demo h2{font-size:clamp(32px,4vw,52px); margin:14px 0 16px} .demo p{color:var(--mute); margin:0 0 22px}
.demo ul{list-style:none; padding:0; margin:0; display:grid; gap:12px} .demo li{display:flex; gap:12px; align-items:center; font-size:16px} .demo li svg{width:22px; height:22px; color:var(--mint); flex:none}
form{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.fld{display:grid; gap:6px} .fld.full{grid-column:1/-1}
.fld label{font-size:13.5px; font-weight:600; color:#2c4a40}
.fld input,.fld select,.fld textarea{width:100%; height:52px; padding:0 18px; border-radius:18px; border:1px solid rgba(15,42,34,.16); background:#fff; font:400 16px var(--sans); color:var(--ink); transition:border-color .2s, box-shadow .2s}
.fld textarea{height:96px; padding:14px 18px; resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--mint); box-shadow:0 0 0 4px rgba(27,147,112,.18); outline:none}
.fld input.bad{border-color:var(--rose); box-shadow:0 0 0 4px rgba(231,114,122,.15)}
.hp{position:absolute; width:1px; height:1px; overflow:hidden; opacity:0; clip-path:inset(50%); pointer-events:none}
form .btn{grid-column:1/-1; height:58px; font-size:17px}
.fine{grid-column:1/-1; font-size:13px; color:var(--mute); text-align:center; margin:0}
.msg{grid-column:1/-1; padding:14px 18px; border-radius:16px; font-size:15px; display:none} .msg.err{display:block; background:rgba(231,114,122,.14); color:#8f2a31} 
.done{display:none; text-align:center; padding:30px 10px} .done.on{display:block} .done svg{width:64px; height:64px; margin:0 auto 14px; color:var(--mint)} .done h3{font-size:30px; margin-bottom:10px} .done p{margin:0 0 20px}
@media(max-width:900px){.demo{grid-template-columns:1fr} form{grid-template-columns:1fr}}

footer{padding:34px 0 46px; border-top:1px solid var(--line); color:var(--mute); font-size:14.5px}
footer .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; align-items:center}
.wa{position:fixed; z-index:40; inset-inline-end:20px; bottom:20px; width:58px; height:58px; border-radius:50%; background:#25d366; display:none; place-items:center; box-shadow:0 16px 30px -10px rgba(37,211,102,.7); transition:transform .2s} .wa.on{display:grid} .wa:hover{transform:scale(1.08)} .wa svg{width:30px; height:30px; color:#fff}

/* ================= v2: company site (home + two products) ================= */
.links a.cur{background:var(--mint-soft); color:var(--ink)}
.nav .in{width:min(1120px,100%)}
.brand small{font:600 11px var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--mute); margin-inline-start:2px; align-self:flex-end; padding-bottom:5px}
html[lang="ar"] .brand small{letter-spacing:0; font-size:12px}
@media(max-width:1000px){.brand small{display:none}}

/* product cards on the home page */
.prods{display:grid; grid-template-columns:1fr 1fr; gap:26px}
.pcard{position:relative; display:flex; flex-direction:column; padding:30px; border-radius:34px; background:linear-gradient(160deg,#fff,#eef8f4); border:1px solid var(--line); box-shadow:var(--shadow); overflow:hidden; transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s}
.pcard:hover{transform:translateY(-6px); box-shadow:0 44px 80px -36px rgba(18,112,88,.5)}
.pcard.r{background:linear-gradient(160deg,#fff,#eef3fc)}
.pcard .ic{width:58px; height:58px; border-radius:18px; display:grid; place-items:center; background:var(--mint); color:#fff; box-shadow:0 14px 26px -12px rgba(18,112,85,.7)} .pcard.r .ic{background:linear-gradient(135deg,#4b86d8,#2f63b3); box-shadow:0 14px 26px -12px rgba(47,99,179,.7)}
.pcard .ic svg{width:28px; height:28px}
.pcard h3{font-size:clamp(28px,3vw,38px); margin:18px 0 8px} .pcard p{margin:0 0 18px; color:var(--mute); font-size:17px}
.pcard ul{list-style:none; padding:0; margin:0 0 22px; display:grid; grid-template-columns:1fr 1fr; gap:9px 16px; font-size:15px}
.pcard li{display:flex; gap:9px; align-items:flex-start} .pcard li svg{width:18px; height:18px; flex:none; margin-top:4px; color:var(--mint)} .pcard.r li svg{color:#3a74c6}
.pcard .pic{margin:auto -30px -30px; padding:22px 30px 0; border-top:1px solid var(--line); background:rgba(255,255,255,.55)}
.pcard .pic img{border-radius:16px 16px 0 0; border:1px solid var(--line); border-bottom:0; width:100%; height:auto; box-shadow:0 20px 40px -24px rgba(15,60,45,.45)}
.pcard .btns{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:26px}
.btn.blue{background:linear-gradient(135deg,#4b86d8,#2f63b3); color:#fff; box-shadow:0 14px 30px -14px rgba(47,99,179,.75)} .btn.blue:hover{transform:translateY(-2px)}
@media(max-width:900px){.prods{grid-template-columns:1fr} .pcard ul{grid-template-columns:1fr}}
.eyebrow.blue{color:#2f63b3} .eyebrow.blue::before{background:#4b86d8}

/* home hero: two products side by side */
.duo{position:relative; min-height:580px}
.duo .w1,.duo .w2{position:absolute; width:80%}
.duo .w1{inset-inline-start:0; top:0; z-index:1} .duo .w2{inset-inline-end:0; top:290px; z-index:2}
.duo .win .body{padding:14px}
.duo .w2 .win{box-shadow:0 40px 70px -24px rgba(36,95,173,.45)}
.pos{display:grid; grid-template-columns:1.3fr 1fr; gap:10px}
.tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:6px}
.tiles div{border:1px solid var(--line); border-radius:12px; padding:8px 9px; font-size:11.5px; background:#fbfdfc} .tiles b{display:block; font:600 12.5px var(--sans); color:#0e6f53; margin-top:3px} .tiles .low{color:#a3333b}
.cart{border:1px solid var(--line); border-radius:14px; padding:9px 11px; font-size:11.5px; background:#fff} .cart .ln{padding:4px 0; font-size:11.5px} .cart .pay{margin-top:8px; text-align:center; background:var(--mint); color:#fff; border-radius:10px; padding:8px; font-weight:600; font-size:12.5px}
@media(max-width:940px){.duo{min-height:0} .duo .w1,.duo .w2{position:relative; width:100%; inset:auto !important} .duo .w2{margin-top:-40px; width:92%; margin-inline-start:auto}}
.duo .win.rt .bar b{color:#2f63b3}
@media(max-width:560px){.duo .w2{margin-top:14px; width:100%}}

/* two columns "what's inside" */
.inside{display:grid; grid-template-columns:1fr 1fr; gap:26px}
.inside>div{padding:30px; border-radius:30px; background:var(--card); border:1px solid var(--line)}
.inside h3{font-size:26px; margin-bottom:6px} .inside p{margin:0 0 18px; color:var(--mute)}
.inside .mods{justify-content:flex-start}
@media(max-width:900px){.inside{grid-template-columns:1fr}}

/* plans */
.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch; max-width:1080px; margin:0 auto}
.plan{position:relative; display:flex; flex-direction:column; padding:30px 26px; border-radius:30px; background:var(--card); border:1px solid var(--line); transition:transform .3s, box-shadow .3s}
.plan:hover{transform:translateY(-5px); box-shadow:var(--shadow)}
.plan.hi{background:linear-gradient(165deg,#0f2a22,#14463a); color:#eaf6f1; border-color:transparent; box-shadow:0 40px 70px -34px rgba(15,60,45,.7); transform:translateY(-10px)} .plan.hi:hover{transform:translateY(-14px)}
.plan .lv{display:flex; gap:5px; margin-bottom:16px} .plan .lv i{width:26px; height:6px; border-radius:4px; background:rgba(27,147,112,.2)} .plan .lv i.on{background:var(--mint)} .plan.hi .lv i{background:rgba(255,255,255,.2)} .plan.hi .lv i.on{background:#7fe0bd}
.plan h3{font-size:30px; margin-bottom:6px} .plan .for{margin:0 0 16px; color:var(--mute); font-size:15px; min-height:3.2em} .plan.hi .for{color:#a8c7bc}
.plan .pr{padding:12px 14px; border-radius:16px; background:var(--mint-soft); color:#0e5f47; font-weight:600; font-size:15px; margin-bottom:18px} .plan.hi .pr{background:rgba(255,255,255,.1); color:#c9f0e1}
.plan .inc{font-size:13.5px; font-weight:700; color:var(--mint2); margin:0 0 10px} .plan.hi .inc{color:#7fe0bd}
.plan ul{list-style:none; padding:0; margin:0 0 24px; display:grid; gap:10px; font-size:15px}
.plan li{display:flex; gap:10px; align-items:flex-start} .plan li svg{width:19px; height:19px; flex:none; margin-top:3px; color:var(--mint)} .plan.hi li svg{color:#7fe0bd}
.plan .btn{margin-top:auto; width:100%}
.plan.hi .btn.ghost{background:#fff}
.plans-note{max-width:760px; margin:26px auto 0; text-align:center; color:var(--mute); font-size:15px}
@media(max-width:900px){.plans{grid-template-columns:1fr; max-width:520px} .plan.hi{transform:none} .plan.hi:hover{transform:translateY(-5px)} .plan .for{min-height:0}}
.tiers3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; max-width:1000px; margin:0 auto}
.tiers3>div{padding:26px; border-radius:26px; background:var(--card); border:1px solid var(--line)}
.tiers3 h3{font-size:26px; margin:10px 0 8px} .tiers3 p{margin:0 0 12px; color:var(--mute); font-size:15.5px}
.tiers3 .lv{display:flex; gap:5px} .tiers3 .lv i{width:26px; height:6px; border-radius:4px; background:rgba(27,147,112,.2)} .tiers3 .lv i.on{background:var(--mint)}
.tiers3 a{font-weight:600; font-size:14.5px; color:var(--mint2); text-decoration:none; margin-inline-end:14px; display:inline-block} .tiers3 a:hover{text-decoration:underline}
@media(max-width:900px){.tiers3{grid-template-columns:1fr}}
.cta-row{display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:34px}

/* product switch inside the lead form */
.seg{display:inline-grid; grid-template-columns:1fr 1fr; padding:5px; border-radius:30px; background:#e6f0ec; border:1px solid var(--line); margin-bottom:20px; width:100%; max-width:380px}
.seg button{height:44px; border-radius:26px; border:0; background:transparent; font:600 15px var(--sans); color:var(--mute); cursor:pointer; transition:.25s}
.seg button.on{background:#fff; color:var(--ink); box-shadow:0 8px 18px -10px rgba(15,60,45,.5)}
.seg button[data-p="retail"].on{color:#2f63b3}
form.lead[hidden]{display:none}
.demo.rt{background:linear-gradient(150deg,#fff,#eaf0fb)}
.demo.rt li svg{color:#3a74c6}
.dtitle{display:block}

/* retail accents */
body.rt{--mint:#2f7fd0; --mint2:#1f5ca8; --mint-soft:rgba(47,127,208,.1)}
body.rt .world .blob>i{filter:blur(70px)}
body.rt .btn.pri{background:linear-gradient(135deg,#3f8be0,#245fad); box-shadow:0 14px 30px -14px rgba(36,95,173,.7)}
body.rt .btn.pri:hover{box-shadow:0 20px 36px -14px rgba(36,95,173,.75)}
body.rt .dark{background:linear-gradient(160deg,#101f38,#173a66)}
body.rt .dark .eyebrow{color:#9cc4f4} body.rt .dark .eyebrow::before{background:#9cc4f4} body.rt .dark .tick svg{color:#9cc4f4} body.rt .dark .tick span,body.rt .dark p.lead{color:#b4c7e3}
body.rt .sl{background:linear-gradient(160deg,#fff,#eaf1fc); border-color:rgba(47,127,208,.3)}
body.rt .plan.hi{background:linear-gradient(165deg,#101f38,#173a66)} body.rt .plan.hi .lv i.on,body.rt .plan.hi li svg,body.rt .plan.hi .inc{color:#9cc4f4} body.rt .plan.hi .lv i.on{background:#9cc4f4}
body.rt .plan .lv i.on{background:var(--mint)} body.rt .plan.hi .pr{color:#d6e6fb}
body.rt .chart i{background:linear-gradient(#3f8be0,#9cc4f4)} body.rt .chart i:nth-child(odd){background:linear-gradient(#6aa4e8,#bcd6f6)}
body.rt .mini i{background:linear-gradient(#3f8be0,#9cc4f4)}
body.rt .slots b{background:rgba(47,127,208,.1); color:#1f5ca8} body.rt .slots b.s{background:var(--mint); color:#fff}
body.rt .big-note{background:var(--mint-soft); border-color:rgba(47,127,208,.25); color:#1b4f8f} body.rt .big-note svg{color:var(--mint)}
body.rt .deco.leaf{filter:hue-rotate(-40deg)}
body.rt .world{background:linear-gradient(180deg,#eef4fc 0%,#f4f7fb 38%,#eef3fb 72%,#f4f4ee 100%)}
body.rt .demo{background:linear-gradient(150deg,#fff,#eaf0fb)}
body.rt .demo li svg,body.rt .tick svg,body.rt .step .n,body.rt .eyebrow{color:var(--mint2)}
body.rt .step .n{border-color:var(--mint)}
body.rt .eyebrow::before{background:var(--mint)}
body.rt .tl .it::before{background:var(--mint)}
body.rt .pbtn.on .n{background:#e7727a}
body.rt .fld input:focus,body.rt .fld select:focus,body.rt .fld textarea:focus{border-color:var(--mint); box-shadow:0 0 0 4px rgba(47,127,208,.18)}
body.rt .free{background:#e6f0fd; color:#1f5ca8; border-color:#b8d1f2}
body.rt #prog{background:linear-gradient(90deg,var(--mint),#9cc4f4)}
/* retail screen mocks */
.vis .rcp{font:12px/1.55 ui-monospace,Menlo,monospace}
.vis .rcp .ln{padding:2px 0; border-top:0}
.vis .dash{border-top:1px dashed #cfd9d5; margin:6px 0}
.chip.bl{background:rgba(63,139,224,.16); color:#1f5ca8}
.shipl{display:grid; grid-template-columns:1fr auto; gap:6px 10px; align-items:center}
.stepper{display:flex; align-items:center; gap:0; margin:10px 0 4px} .stepper span{flex:1; text-align:center; font-size:11px; color:var(--mute); position:relative} .stepper span::before{content:''; display:block; width:12px; height:12px; border-radius:50%; background:#d9e4df; margin:0 auto 5px} .stepper span.d::before{background:var(--mint)} .stepper span.d{color:#0e6f53; font-weight:600}
.sync{display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-top:1px solid var(--line)} .sync:first-of-type{border-top:0}