/* WahaSystems homepage — tokens from Figma "Homepage v4 — Toast structure" */
:root{
  --g50:#ECFBF4;--g100:#D2F5E5;--g300:#5FD6A2;--g500:#00A86B;--g600:#00905C;--g700:#00704A;--g800:#00553A;--g900:#003826;--g950:#002318;
  --saffron:#FFB020;--white:#fff;--sand:#F7F4F0;--sand2:#EFEAE3;--ink:#1F1F1F;--ink2:#5C5C5C;--ink3:#9A9A9A;--line:#E7E2DA;
  --grad:linear-gradient(90deg,#00B877,#00804F);
  --f:"Figtree",ui-sans-serif,system-ui,sans-serif;
  --r:24px;
  --shadow:0 24px 40px rgba(0,26,15,.4);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font:400 17px/1.5 var(--f);color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
img{max-width:100%;display:block}
[lang=ar]{font-family:"Noto Sans Arabic",var(--f)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.wrap{width:min(1200px,100% - 32px);margin-inline:auto}
.section{padding-block:120px}
.section--tight{padding-block:0 120px}
.center{text-align:center;display:flex;flex-direction:column;align-items:center}
.i{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* type */
.display{font-size:clamp(56px,8vw,104px);line-height:1;letter-spacing:-.03em;font-weight:400}
.h1{font-size:clamp(40px,5.2vw,72px);line-height:1.04;letter-spacing:-.025em;font-weight:400}
.h2{font-size:clamp(34px,4vw,56px);line-height:1.08;letter-spacing:-.02em;font-weight:400}
.lead{font-size:clamp(18px,1.6vw,22px);line-height:1.4;letter-spacing:-.005em}
.lead--muted{color:var(--ink2);margin-top:12px}
.fine{font-size:12px;color:rgba(255,255,255,.7)}
.fine a{text-decoration:underline}
.fine--center{color:var(--ink3);text-align:center;margin-top:20px}

/* buttons — feedback on press (apple-design: respond on pointer-down) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:99px;padding:13px 24px;font-weight:600;font-size:17px;white-space:nowrap;transition:transform .1s ease-out,filter .2s,background .2s;cursor:pointer;border:0;font-family:inherit}
.btn:active{transform:scale(.97)}
.btn--primary{background:var(--grad);color:#fff}
.btn--primary:hover{filter:brightness(1.08)}
.btn--outline{border:1.5px solid var(--g600);color:var(--g700);font-weight:400;background:none}
.btn--outline:hover{background:var(--g50)}
.btn--white{background:#fff;color:var(--g700);min-width:230px}
.btn--ghost{border:1.5px solid #fff;color:#fff;min-width:230px}
.btn--ghost:hover{background:rgba(255,255,255,.1)}
.btn--sm{font-size:14px;padding:9px 18px}
.btn-row{display:flex;gap:12px;flex-wrap:wrap}

/* announcement + nav */
.announce{background:var(--sand);font-size:14px;padding:10px 16px;text-align:center}
.announce a{color:var(--g700);text-decoration:underline}
.nav{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.88);backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid transparent}
.nav__in{display:flex;align-items:center;gap:36px;height:72px}
.logo{display:block;width:172px;height:34px;color:#070707;fill:currentColor}
.nav__links{display:flex;gap:28px;flex:1}
.nav__links a,.locale{display:inline-flex;align-items:center;gap:4px}
.nav__links a:hover{color:var(--g700)}
.nav__links .i{width:14px;height:14px}
.nav__actions{display:flex;align-items:center;gap:16px}
.locale .i{color:var(--g600);width:18px;height:18px}
.nav .btn{padding:10px 20px;font-size:16px}

/* hero */
.hero{position:relative;isolation:isolate;color:#fff;border-radius:0 0 44px 44px;overflow:hidden;min-height:780px;display:flex;align-items:center}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,20,13,.94),rgba(0,20,13,.78) 38%,rgba(0,20,13,.15) 70%,rgba(0,20,13,.05)),
             linear-gradient(180deg,transparent 60%,rgba(0,20,13,.55)),
             url(assets/img/hero.jpg) var(--hero-pos,center)/cover}
.hero__in{display:flex;flex-direction:column;align-items:flex-start;gap:26px;padding-block:96px}
.hero .lead{max-width:560px;color:rgba(255,255,255,.88)}
.pill-play{display:inline-flex;align-items:center;gap:10px;padding:6px;padding-inline-end:16px;border-radius:99px;background:rgba(255,255,255,.12);font-size:14px;font-weight:600;color:#fff}
.pill-play__dot{width:24px;height:24px;border-radius:50%;background:var(--saffron);position:relative}
.pill-play__dot::after{content:"";position:absolute;left:9px;top:7px;border-left:8px solid #fff;border-block:5px solid transparent}
.pill-play__dot--white{background:#fff}.pill-play__dot--white::after{border-left-color:var(--g700)}
.scribbled{position:relative;display:inline-block}
.scribble{position:absolute;inset:-14% -16% -18% -14%;width:130%;height:132%;fill:none;stroke:var(--saffron);stroke-width:5;stroke-linecap:round;vector-effect:non-scaling-stroke;overflow:visible;pointer-events:none}
.scribble path{stroke-dasharray:900;stroke-dashoffset:900;animation:draw 1.1s .4s cubic-bezier(.65,0,.35,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.capture{display:flex;align-items:center;background:#fff;border-radius:99px;padding:6px;padding-inline-start:24px;width:min(500px,100%);box-shadow:0 0 0 3px rgba(255,255,255,.5)}
.capture input{flex:1;min-width:0;border:0;outline:0;font:inherit;color:var(--ink);background:none}
.capture input::placeholder{color:var(--ink3)}
.capture:focus-within{box-shadow:0 0 0 3px var(--g300)}
.hero__alt{display:inline-flex;align-items:center;gap:6px}
.hero__alt:hover strong{text-decoration:underline}
.toast{position:absolute;inset-inline-end:max(16px,calc(50% - 600px));top:150px;display:flex;gap:14px;align-items:center;background:#fff;color:var(--ink);padding:16px;border-radius:20px;font-size:14px;box-shadow:0 20px 40px rgba(0,0,0,.3);animation:rise .6s 1s both cubic-bezier(.2,.8,.2,1)}
.toast__icon{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--g500);color:#fff;font-size:22px}
.toast__head{display:flex;justify-content:space-between;gap:40px}
.toast__head span{color:var(--ink3)}
@keyframes rise{from{opacity:0;transform:translateY(12px)}}

/* capability strip */
.caps{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 40px;padding-block:40px;color:var(--ink2);font-size:20px}
.caps span{display:inline-flex;align-items:center;gap:10px}
.caps .i{width:24px;height:24px}

/* tiles */
.head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:40px}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.tile{position:relative;aspect-ratio:285/400;border-radius:var(--r);overflow:hidden;color:#fff;background:var(--img) center/cover;isolation:isolate;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.tile::after{content:"";position:absolute;inset:50% 0 0;background:linear-gradient(transparent,rgba(0,35,24,.85));z-index:-1}
.tile:hover{transform:translateY(-4px)}
.tile__txt{position:absolute;inset:auto 20px 26px;text-align:center;font-size:14px;display:flex;flex-direction:column;gap:4px}
.tile__txt strong{font-size:30px;font-weight:500;line-height:1.1;letter-spacing:-.01em}
.mini{position:absolute;top:22px;left:50%;translate:-50%;width:min(220px,80%);background:#fff;color:var(--ink);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:8px;font-size:14px;box-shadow:var(--shadow)}
.mini b{font-weight:600}
.mini span{display:flex;justify-content:space-between}
.mini i{font-style:normal}
.mini span i:last-child{color:var(--ink2)}
.mini__hl i{font-weight:600}.mini .mini__hl i:last-child{color:var(--g700)}
.mini em{font-style:normal;font-size:56px;line-height:1}
.mini small{font-size:12px;color:var(--ink2)}
.mini__warn{display:flex;align-items:center;gap:8px}
.mini__warn .i{background:var(--saffron);border-radius:8px;padding:6px;width:28px;height:28px}
.mini meter{width:100%;height:6px;appearance:none;border:0;background:none}
.mini meter::-webkit-meter-bar{background:none;border:0;height:6px}
.mini meter::-webkit-meter-optimum-value{background:var(--g500);border-radius:3px}
.mini meter::-moz-meter-bar{background:var(--g500);border-radius:3px}
.mini--paper{border-radius:6px;width:200px}
.mini--ar{align-items:flex-end;padding:14px 22px;width:auto}
.mini--ar b{font-size:40px;line-height:1.4;font-weight:600}

/* live */
.live{background:linear-gradient(#fff,#F3FBF7 50%,#fff)}
.live .section{padding-top:60px}
.spark{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:linear-gradient(90deg,var(--g300),var(--saffron));color:#fff;margin-bottom:24px}
.spark .i{width:22px;height:22px}
.live__grid{display:grid;grid-template-columns:600px 1fr;gap:64px;align-items:center;margin-top:72px}
.app{padding:2px;border-radius:26px;background:linear-gradient(90deg,var(--g500),var(--g300),var(--saffron))}
.app__tabs{display:flex;gap:4px;background:var(--sand);padding:14px 16px 0;border-radius:24px 24px 0 0;font-size:14px;color:var(--ink2)}
.app__tabs span{padding:10px 18px;border-radius:12px 12px 0 0}
.app__tabs .on{background:#fff;color:var(--ink);font-weight:600}
.app__body{background:#fff;border-radius:0 0 24px 24px;padding:24px;display:flex;flex-direction:column;gap:14px}
.app__top{display:flex;justify-content:space-between;align-items:center}
.app__top span{font-size:14px;color:var(--ink3)}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.kpis div{background:var(--sand);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:2px}
.kpis small{font-size:12px;color:var(--ink2)}
.kpis em{font-style:normal;font-size:12px;color:var(--g700)}
.alert{border:1px solid var(--line);border-radius:14px;padding:16px;font-size:14px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.tag{font-size:12px;padding:2px 10px;border-radius:99px;border:1px solid}
.tag--amber{color:#B27400;border-color:var(--saffron)}.tag--green{color:var(--g500)}.tag--red{color:#FF6B6B}
.act{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--line);border-radius:14px;padding:12px 12px 12px 16px;font:inherit;font-size:14px;color:var(--ink2);background:none;cursor:pointer;transition:border-color .2s}
.act:hover{border-color:var(--g500)}
.act span{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--g500);color:#fff}
.steps{display:flex;flex-direction:column;gap:28px;align-items:flex-start}
.steps .lead--muted{margin:0}
.steps ol{counter-reset:s;display:flex;flex-direction:column;gap:20px}
.steps li{counter-increment:s;display:flex;align-items:center;gap:16px;font-size:clamp(20px,1.8vw,26px);line-height:1.2}
.steps li::before{content:counter(s);flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1.5px solid var(--g500);color:var(--g700);font-size:14px}

/* counter list */
.counter{display:grid;grid-template-columns:1fr 580px;background:var(--sand);border-radius:40px;overflow:hidden}
.counter__list{padding:64px;display:flex;flex-direction:column;gap:20px}
.counter__list > p{color:var(--ink2)}
.counter__list ul{padding-top:28px;display:flex;flex-direction:column;gap:10px}
.counter__list li{font-size:clamp(28px,2.8vw,40px);line-height:1.12;letter-spacing:-.015em;color:#C9C2B8;display:flex;justify-content:space-between;align-items:center;cursor:pointer;transition:color .2s}
.counter__list li:hover,.counter__list li.on{color:var(--ink)}
.counter__list li span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--g500);color:var(--g600);font-size:20px}
.counter__scene{position:relative;border-radius:40px;overflow:hidden;min-height:720px;display:grid;place-items:center;
  background:radial-gradient(360px 300px at 75% 25%,rgba(255,176,32,.25),transparent 70%),radial-gradient(460px 400px at 20% 75%,rgba(0,168,107,.45),transparent 70%),linear-gradient(#0B5A3E,#001A12)}
.handheld{width:250px;height:480px;border-radius:40px;padding:14px 12px;background:linear-gradient(#4A4A4E,#151517);box-shadow:0 40px 60px rgba(0,0,0,.6);rotate:-8deg}
.handheld__screen{height:100%;border-radius:30px;background:#fff;padding:14px;display:flex;flex-direction:column;gap:6px;font-size:12px}
.handheld__screen > p:not(.handheld__bar){display:flex;justify-content:space-between;padding-block:6px;border-bottom:1px solid var(--line)}
.handheld__screen > p span:last-child{color:var(--ink2)}
.handheld__bar{display:flex;align-items:center;gap:6px;background:var(--saffron);border-radius:10px;padding:7px 10px;margin-bottom:4px}
.handheld__q{margin-top:auto;background:var(--sand);border-radius:12px;padding:12px;display:flex;flex-direction:column;font-size:14px}
.handheld__q small{font-size:12px;color:var(--ink2)}
.handheld__pay{background:var(--g500);color:#fff;border-radius:12px;padding:11px;text-align:center;font-weight:600;font-size:14px}
.counter__cap{position:absolute;bottom:40px;inset-inline:40px;text-align:center;color:#fff}

/* why */
.why{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding:64px;border-radius:40px;color:#fff;background:radial-gradient(600px 400px at 10% -10%,rgba(255,255,255,.22),transparent 70%),linear-gradient(135deg,#3FD69C,#00A86B 50%,#005C3C)}
.badges{display:flex;gap:16px;margin-top:48px}
.badges span{width:110px;background:#fff;color:var(--ink);border-radius:14px 14px 55px 55px;padding:16px 16px 26px;display:flex;flex-direction:column;align-items:center;gap:4px;box-shadow:0 10px 20px rgba(0,38,26,.3)}
.badges b{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;color:#fff}
.badges small{font-size:12px;color:var(--ink2)}
.b-amber{background:var(--saffron)}.b-mint{background:var(--g300)}.b-green{background:var(--g500)}
.why__right{display:flex;flex-direction:column;justify-content:space-between;gap:40px;padding-top:8px}
.checks{display:flex;flex-direction:column;gap:26px;font-size:clamp(20px,1.8vw,26px);font-weight:500}
.checks li{display:flex;align-items:center;gap:16px}
.checks li::before{content:"";flex:none;width:36px;height:36px;border-radius:50%;border:2px solid currentColor;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/22px no-repeat}
.why__btns{display:flex;gap:14px;flex-wrap:wrap}

/* story */
.story{background:var(--sand);border-radius:48px 48px 0 0}
.story__row{display:flex;gap:10px;height:520px}
.story__card{position:relative;flex:1;border-radius:24px;overflow:hidden;border:2px solid var(--g500);color:#fff;
  background:radial-gradient(420px 320px at 75% 30%,rgba(255,176,32,.35),transparent 70%),radial-gradient(500px 320px at 25% 85%,rgba(0,168,107,.4),transparent 70%),linear-gradient(#0B3D2B,#00140D)}
.story__card .pill-play{position:absolute;inset-inline-start:32px;top:32px}
.bottles{position:absolute;inset-inline-end:40px;top:110px;display:flex}
.bottles i{width:70px;height:190px;margin:0 7px;border-radius:22px;background:linear-gradient(90deg,var(--a),var(--b));position:relative;font-style:normal;font-size:12px;font-weight:700;color:var(--ink);display:flex;align-items:center;justify-content:center;box-shadow:0 24px 30px rgba(0,0,0,.45)}
.bottles i:nth-child(even){margin-top:18px}
.bottles i::before{content:"";position:absolute;top:-38px;left:22px;width:26px;height:44px;background:linear-gradient(#F7F4F0 22px,rgba(255,255,255,.5) 22px);border-radius:5px 5px 0 0}
.bottles i{background:linear-gradient(transparent 40%,rgba(255,255,255,.92) 40%,rgba(255,255,255,.92) 64%,transparent 64%),linear-gradient(90deg,var(--a),var(--b))}
.story__big{position:absolute;inset-inline-start:40px;bottom:100px;font-size:clamp(56px,7vw,96px);font-weight:700;letter-spacing:-.03em;color:var(--g300);line-height:1}
.story__script{position:absolute;inset-inline-start:44px;bottom:40px;font-family:"Homemade Apple",cursive;font-size:clamp(24px,3vw,40px)}
.sliver{flex:none;width:var(--w);border-radius:24px;background:var(--c)}
.sliver:nth-last-child(-n+3){border-radius:9px}
.story__quote{font-size:clamp(20px,1.9vw,26px);line-height:1.3;max-width:860px;margin-top:48px;padding-inline-start:16px}
.story__quote small{display:block;margin-top:14px;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}

/* industries */
.pills{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:48px}
.pills li{background:var(--sand);border-radius:99px;padding:10px 26px;font-size:clamp(24px,2.8vw,40px);letter-spacing:-.015em;transition:background .2s}
.pills li:hover{background:var(--g100)}

/* news */
.eyebrow{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--ink2);margin-bottom:14px}
.yr{border:2px solid var(--saffron);border-radius:99px;padding:0 10px;color:var(--ink)}
.news{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.news__card{position:relative;aspect-ratio:389/500;border-radius:var(--r);overflow:hidden;color:#fff;background:linear-gradient(transparent 52%,color-mix(in srgb,var(--tint) 95%,transparent)),var(--img) center/cover;display:flex;flex-direction:column;justify-content:space-between;padding:24px 28px 30px;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.news__card:hover{transform:translateY(-4px)}
.news__card strong{font-size:clamp(24px,2.2vw,30px);font-weight:400;line-height:1.2;max-width:330px}
.chip{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.18);backdrop-filter:blur(12px);border-radius:99px;padding:6px 14px;font-size:14px;font-weight:600}
.chip b{background:var(--saffron);color:var(--ink);font-size:12px;border-radius:99px;padding:2px 8px;margin-inline-start:-8px}

/* cta */
.cta{position:relative;overflow:hidden;color:#fff;border-radius:48px 48px 0 0;background:radial-gradient(700px 500px at 82% 55%,rgba(255,176,32,.3),transparent 70%),linear-gradient(90deg,#003826,#00905C 45%,#3FD69C)}
.cta__in{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding-block:110px 120px}
.cta__in > div:first-child{display:flex;flex-direction:column;gap:28px;align-items:flex-start}
.checks--lg{gap:18px;font-weight:400}
.checks--lg li::before{width:30px;height:30px;background-size:18px}
.cta .capture{box-shadow:none}
.cta__device{rotate:-4deg;background:linear-gradient(#3A3A3C,#111113);border-radius:28px;padding:13px;box-shadow:var(--shadow);width:560px;max-width:100%;justify-self:end}
.cta__screen{background:#fff;color:var(--ink);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:10px;aspect-ratio:534/344}
.bars{flex:1;display:flex;align-items:flex-end;gap:10px}
.bars i{flex:1;height:var(--h);background:var(--g100);border-radius:6px}
.bars i.on{background:var(--g500)}

/* footer */
.footer{background:linear-gradient(#00905C,#003826 60%);padding:clamp(16px,3vw,40px) 0 72px;margin-top:-1px}
.footer > .wrap{width:min(1248px,100% - 32px)}
.footer__card{background:#fff;border-radius:44px;padding:80px 80px 40px;display:flex;flex-direction:column;gap:56px;box-shadow:0 20px 50px rgba(0,38,26,.25)}
.footer__top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
.logo--footer{width:222px;height:44px}
.footer__cols{display:flex;gap:72px;flex-wrap:wrap}
.footer__cols div{display:flex;flex-direction:column;gap:14px}
.footer__cols h3{font-size:17px;font-weight:600}
.footer__cols a{color:var(--ink2)}
.footer__cols a:hover{color:var(--g700)}
.footer__help{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.footer__help p{font-size:40px;letter-spacing:-.015em}
.footer__help div{display:flex;gap:12px;flex-wrap:wrap}
.footer__help .btn{color:var(--ink)}
.footer__legal{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:24px;font-size:14px;color:var(--ink2)}
.footer__legal nav{display:flex;gap:24px;flex-wrap:wrap}
.footer__sign{color:#fff;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;padding-top:56px}
.footer__sign .lead{color:rgba(255,255,255,.85)}
.logo--big{width:282px;height:56px;color:#fff;margin-top:24px}

/* responsive */
@media (max-width:1100px){
  .nav__links{display:none}.nav__toggle{display:grid}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .live__grid,.counter,.why,.cta__in{grid-template-columns:minmax(0,1fr)}
  .counter__scene{min-height:560px}
  .cta__device{justify-self:center}
  .toast{display:none}
}
@media (max-width:640px){
  .locale,.nav .btn--outline{display:none}
  .logo{width:140px;height:28px}
  .section{padding-block:80px}.section--tight{padding-block:0 80px}
  .hero{min-height:0;border-radius:0 0 28px 28px;--hero-pos:70% center}
  .hero__in{padding-block:64px}
  .caps{font-size:17px;gap:12px 28px}
  .tiles{grid-template-columns:1fr}
  .tile{aspect-ratio:4/5}
  .news{grid-template-columns:1fr}
  .counter__list,.why,.footer__card{padding:32px 24px}
  .counter,.why{border-radius:28px}
  .badges{flex-wrap:wrap}
  .story__row{height:440px}.sliver{display:none}
  .bottles{transform:scale(.62);transform-origin:top right;inset-inline-end:16px;top:80px}
  .kpis{grid-template-columns:1fr 1fr}
  .footer__help p{font-size:28px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .scribble path{stroke-dashoffset:0}
}
@media (prefers-reduced-transparency:reduce){
  .nav{background:#fff;backdrop-filter:none}
}

/* Arabic / right-to-left — shared layout mirrors through logical properties; these cover the rest */
:lang(ar) body{font-family:"Noto Sans Arabic","Figtree",ui-sans-serif,system-ui,sans-serif}
:lang(ar) *{letter-spacing:0!important} /* tracking breaks Arabic letter joins */
:lang(ar) .display{line-height:1.2;font-weight:600}
:lang(ar) .h1,:lang(ar) .h2{line-height:1.3;font-weight:500}
:lang(ar) .counter__list li,:lang(ar) .pills li{line-height:1.45}
:lang(ar) .tile__txt strong{font-weight:600}
:lang(ar) .story__big{font-weight:700;line-height:1.2}
:lang(ar) .story__script{font-family:"Aref Ruqaa",serif;font-size:clamp(30px,3.6vw,48px)}
[dir=rtl] .hero::before{transform:scaleX(-1)} /* photo + fade mirror together, so the copy sits on the dark side */
[dir=rtl] .hero__alt .i,[dir=rtl] .counter__list .i,[dir=rtl] .act .i{transform:scaleX(-1)}
[dir=rtl] .handheld{rotate:8deg}
[dir=rtl] .cta__device{rotate:4deg}
[dir=rtl] .story__quote small{letter-spacing:0;text-transform:none}
@media (max-width:640px){[dir=rtl] .bottles{transform-origin:top left}}

/* ---------- nav: products dropdown + phone menu ---------- */
.nav__links{align-items:center}
.dd{position:relative}
.dd__btn{display:inline-flex;align-items:center;gap:4px;font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
.dd__btn:hover{color:var(--g700)}
.dd__btn .i{width:14px;height:14px;transition:rotate .2s}
.dd__panel{position:absolute;top:calc(100% + 18px);inset-inline-start:-24px;width:620px;display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:12px;background:#fff;border-radius:20px;box-shadow:0 24px 60px rgba(0,35,24,.18),0 0 0 1px var(--line);opacity:0;visibility:hidden;translate:0 -6px;transition:opacity .18s,translate .18s,visibility .18s}
.dd__panel::before{content:"";position:absolute;inset:-18px 0 auto;height:18px} /* hover bridge */
.dd:hover .dd__panel,.dd:focus-within .dd__panel,.dd__btn[aria-expanded=true]+.dd__panel{opacity:1;visibility:visible;translate:0}
.dd:hover .dd__btn .i,.dd__btn[aria-expanded=true] .i{rotate:180deg}
.dd__item{display:flex;gap:14px;padding:14px;border-radius:14px;transition:background .15s}
.dd__item:hover{background:var(--sand)}
.dd__item strong{display:block;font-weight:600}
.dd__item small{display:block;font-size:14px;color:var(--ink2);line-height:1.35;margin-top:2px}
.dd__ic{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--accent);color:#fff;font-size:20px}
.dd__foot{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;padding:14px;border-top:1px solid var(--line);margin-top:4px;color:var(--g700);font-weight:600}
.nav__toggle{display:none;place-items:center;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:#fff;font-size:22px;cursor:pointer;color:var(--ink)}
.nav__links .nav__menu-cta{display:none}
@media (max-width:1100px){
  .nav__toggle{display:grid}
  body.menu-open{overflow:hidden}
  body.menu-open .nav{backdrop-filter:none;background:#fff}
  body.menu-open .nav__links{display:flex;position:fixed;inset:var(--menu-top,72px) 0 0;z-index:20;flex-direction:column;align-items:stretch;gap:0;padding:16px 24px 32px;background:#fff;overflow-y:auto;font-size:20px}
  body.menu-open .nav__links > a,body.menu-open .dd__btn{padding:16px 0;border-bottom:1px solid var(--line);width:100%;justify-content:space-between}
  body.menu-open .dd__panel{position:static;width:auto;grid-template-columns:1fr;opacity:1;visibility:visible;translate:0;box-shadow:none;padding:4px 0;display:none}
  body.menu-open .dd__btn[aria-expanded=true]+.dd__panel{display:grid}
  body.menu-open .nav__menu-cta{display:inline-flex;margin-top:24px;border-bottom:0}
  body.menu-open .nav__links .btn{justify-content:center}
}
@media (max-width:640px){.nav__actions .btn--primary{display:none}}

/* ---------- UI cards (mock product screens) ---------- */
.ui{background:#fff;color:var(--ink);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:9px;font-size:14px;box-shadow:0 24px 48px rgba(0,0,0,.28);width:min(320px,100%)}
.ui p{display:flex;justify-content:space-between;align-items:center;gap:12px}
.ui__head{padding-bottom:4px}.ui__head strong{font-size:16px}
.ui__head span:not(.ui__pill){color:var(--ink3)}
.ui__pill{font-size:12px;padding:2px 10px;border-radius:99px;background:var(--soft,var(--g50));color:color-mix(in srgb,var(--accent,var(--g700)) 70%,#000);white-space:nowrap}
.ui__pill--warn{background:#FFF1D6;color:#8A5A00}
.ui__row{border-top:1px solid var(--line);padding-top:9px}
.ui__row span:first-child{display:flex;flex-direction:column}
.ui__row small{font-size:12px;color:var(--ink3)}
.ui__row span:last-child{color:var(--ink2);text-align:end}
.ui__muted span{color:var(--ink3)!important}
.ui__ok{color:var(--g700)!important;font-weight:600}
.ui__total{background:var(--sand);border-radius:12px;padding:10px 12px;margin-top:4px}
.ui__total strong{font-size:16px}
.ui__btn{display:block;text-align:center;background:var(--accent,var(--g500));color:#fff;border-radius:12px;padding:11px;font-weight:600}
.ui__bar{display:block;height:6px;border-radius:3px;background:var(--accent,var(--g500));width:var(--w);margin-top:-2px}
.ui--float{position:absolute;inset-block-end:28px;inset-inline-start:28px}
.pp-hero__visual .ui--float{inset-inline-start:-56px;inset-block-end:48px}

/* ---------- product page ---------- */
.pp-hero{position:relative;color:#fff;overflow:hidden;border-radius:0 0 44px 44px;background:radial-gradient(700px 500px at 85% 20%,color-mix(in srgb,var(--accent) 45%,transparent),transparent 70%),linear-gradient(135deg,var(--accent-dark),color-mix(in srgb,var(--accent-dark) 70%,#000))}
.pp-hero__in{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding-block:88px 96px}
.pp-hero__copy{display:flex;flex-direction:column;gap:24px;align-items:flex-start}
.pp-hero .lead{color:rgba(255,255,255,.86);max-width:560px}
.pp-hero .display{font-size:clamp(52px,7vw,96px)}
.pp-eyebrow{display:inline-flex;align-items:center;gap:10px;font-weight:600;padding:6px;padding-inline-end:16px;border-radius:99px;background:rgba(255,255,255,.12)}
.pp-eyebrow__ic{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--accent);font-size:16px}
.pp-hero__visual{position:relative;aspect-ratio:4/5;max-height:620px;border-radius:32px;background:var(--img) center/cover;box-shadow:0 40px 80px rgba(0,0,0,.35)}
.pp-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding-block:56px}
.pp-facts div{display:flex;flex-direction:column;gap:6px;padding-inline:28px;border-inline-start:1px solid var(--line)}
.pp-facts div:first-child{border:0;padding-inline-start:0}
.pp-facts strong{font-size:clamp(36px,4vw,52px);font-weight:500;letter-spacing:-.02em;line-height:1;color:color-mix(in srgb,var(--accent) 75%,#000)}
.pp-facts span{color:var(--ink2)}
.pp-ic{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--soft);color:color-mix(in srgb,var(--accent) 80%,#000);font-size:24px}
.pp-h3{font-size:clamp(22px,2vw,26px);font-weight:500;letter-spacing:-.01em;line-height:1.2}
.pp-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pp-benefits article{background:var(--sand);border-radius:28px;padding:36px;display:flex;flex-direction:column;gap:16px}
.pp-benefits p{color:var(--ink2)}
.pp-subnav{position:sticky;top:72px;z-index:5;display:flex;gap:8px;overflow-x:auto;padding:12px 0;margin-bottom:24px;background:rgba(255,255,255,.9);backdrop-filter:blur(16px);scrollbar-width:none}
.pp-subnav a{flex:none;display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:99px;border:1px solid var(--line);font-size:15px;transition:background .15s,border-color .15s}
.pp-subnav a:hover{border-color:var(--accent);background:var(--soft)}
.pp-subnav .i{color:color-mix(in srgb,var(--accent) 80%,#000)}
.pp-row{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;padding-block:72px;scroll-margin-top:140px}
.pp-row--flip .pp-row__copy{order:2}
.pp-row__copy{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.pp-row__copy .lead--muted{margin:0}
.pp-row__visual{position:relative;aspect-ratio:1/1;border-radius:32px;background:var(--img) center/cover;overflow:hidden}
.pp-row__visual::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(0,0,0,.35))}
.pp-row__visual .ui{z-index:1}
.pp-kicker{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:color-mix(in srgb,var(--accent) 75%,#000)}
.pp-checks{display:flex;flex-direction:column;gap:12px;font-size:18px}
.pp-checks li{display:flex;gap:12px;align-items:flex-start}
.pp-checks li::before{content:"";flex:none;width:24px;height:24px;margin-top:2px;border-radius:50%;background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/14px no-repeat}
.pp-modules{background:var(--sand);border-radius:48px}
.pp-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:56px}
.pp-grid li{background:#fff;border-radius:20px;padding:22px;display:flex;flex-direction:column;gap:18px;font-weight:500;font-size:17px;line-height:1.3}
.pp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:st}
.pp-steps li{counter-increment:st;border-top:2px solid var(--accent);padding-top:24px;display:flex;flex-direction:column;gap:10px}
.pp-steps li::before{content:"0" counter(st);font-size:15px;font-weight:600;color:color-mix(in srgb,var(--accent) 75%,#000)}
.pp-steps p{color:var(--ink2)}
.pp-demo{display:flex;justify-content:space-between;align-items:center;gap:32px;padding:48px;border-radius:32px;color:#fff;background:radial-gradient(500px 300px at 90% 0%,color-mix(in srgb,var(--accent) 55%,transparent),transparent 70%),linear-gradient(135deg,var(--accent-dark),#000);transition:transform .3s}
.pp-demo:hover{transform:translateY(-3px)}
.pp-demo > span:first-child{display:flex;flex-direction:column;gap:12px;max-width:640px}
.pp-demo .pp-kicker{color:#fff}
.pp-demo .lead{color:rgba(255,255,255,.8)}
.pills--sm{margin-top:28px}.pills--sm li{font-size:clamp(20px,2vw,28px)}
.pp-pricing{background:linear-gradient(#fff,var(--soft) 30%,#fff)}

/* pricing */
.bill{display:inline-flex;gap:4px;padding:5px;border-radius:99px;background:var(--sand);margin-top:28px}
.bill button{font:inherit;font-size:15px;border:0;background:none;border-radius:99px;padding:10px 20px;cursor:pointer;color:var(--ink2)}
.bill button[aria-pressed=true]{background:#fff;color:var(--ink);font-weight:600;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.bill b{font-size:12px;color:var(--g700);background:var(--g50);border-radius:99px;padding:2px 8px;margin-inline-start:4px}
[data-billing=m] .when-y,[data-billing=y] .when-m{display:none}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px;align-items:stretch}
.plan{position:relative;background:#fff;border:1px solid var(--line);border-radius:28px;padding:36px;display:flex;flex-direction:column;gap:14px}
.plan--pop{border:2px solid var(--accent);box-shadow:0 24px 60px color-mix(in srgb,var(--accent) 22%,transparent)}
.plan__badge{position:absolute;top:-14px;inset-inline-start:32px;background:var(--accent);color:#fff;font-size:13px;font-weight:600;border-radius:99px;padding:4px 12px}
.plan__name{font-size:26px;font-weight:500}
.plan__desc{color:var(--ink2);min-height:3em}
.plan__price{display:flex;align-items:baseline;gap:6px;margin-top:8px}
.plan__price strong{font-size:56px;font-weight:500;letter-spacing:-.03em;line-height:1}
.plan__price span{color:var(--ink2)}
.plan__per{font-size:14px;color:var(--ink3);min-height:1.5em}
.plan__cta{margin-block:8px}
.plan__list{display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--line);padding-top:20px}
.plan__list li{display:flex;gap:10px;align-items:flex-start}
.plan__list li::before{content:"";flex:none;width:20px;height:20px;margin-top:2px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300A86B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/18px no-repeat}
.compare{margin-top:48px;overflow-x:auto;border-radius:24px;border:1px solid var(--line);background:#fff}
.compare table{width:100%;border-collapse:collapse;min-width:640px}
.compare th,.compare td{padding:14px 20px;text-align:center;border-bottom:1px solid var(--line)}
.compare th[scope=row],.compare thead th:first-child{text-align:start;font-weight:400}
.compare thead th{font-weight:600;background:var(--sand)}
.compare tr:last-child>*{border-bottom:0}
.compare .yes{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--soft,var(--g50));color:color-mix(in srgb,var(--accent,var(--g500)) 80%,#000)}
.compare .no{color:var(--ink3)}
.pp-faq{display:grid;grid-template-columns:1fr 1.6fr;gap:64px;align-items:start}
.pp-faq details{border-bottom:1px solid var(--line)}
.pp-faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 0;font-size:clamp(19px,1.8vw,24px);cursor:pointer}
.pp-faq summary::-webkit-details-marker{display:none}
.pp-faq summary .i{flex:none;font-size:22px;color:var(--g600);transition:rotate .25s}
.pp-faq details[open] summary .i{rotate:45deg}
.pp-faq details p{padding-bottom:24px;color:var(--ink2);font-size:18px;max-width:720px}
.pp-related{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:32px}
.pp-related a{position:relative;display:flex;flex-direction:column;gap:10px;padding:36px;border-radius:28px;min-height:280px;justify-content:flex-end;color:#fff;overflow:hidden;background:linear-gradient(transparent 20%,rgba(0,0,0,.75)),var(--img) center/cover;transition:transform .3s}
.pp-related a:hover{transform:translateY(-4px)}
.pp-related strong{font-size:32px;font-weight:500}
.pp-related__ic{position:absolute;top:28px;inset-inline-start:28px;display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--accent);font-size:24px}
.pp-related__go{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.cta__in--solo{grid-template-columns:1fr;max-width:760px}
.pp .cta{background:radial-gradient(700px 500px at 82% 55%,color-mix(in srgb,var(--accent) 40%,transparent),transparent 70%),linear-gradient(90deg,var(--accent-dark),color-mix(in srgb,var(--accent) 60%,var(--accent-dark)))}

/* pricing page */
.pr-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:28px}
.pr-tabs a{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:99px;border:1px solid var(--line);transition:border-color .15s}
.pr-tabs a:hover{border-color:var(--accent)}
.pr-tabs .i{color:var(--accent)}
.pr-block{padding-block:56px;border-top:1px solid var(--line);scroll-margin-top:90px}
.pr-block .plans{margin-top:8px}
.pr-more{margin-top:28px}
.pr-more summary{list-style:none;display:inline-flex;align-items:center;gap:8px;cursor:pointer;color:var(--g700);font-weight:600}
.pr-more summary::-webkit-details-marker{display:none}
.pr-more .compare{margin-top:20px}

/* demo / lead form */
.dm{background:radial-gradient(800px 500px at 0% 0%,var(--g50),transparent 70%)}
.dm__in{display:grid;grid-template-columns:1fr 1fr;gap:64px;padding-block:72px 120px;align-items:start}
.dm__copy{display:flex;flex-direction:column;gap:26px;position:sticky;top:110px}
.dm__copy .display{font-size:clamp(44px,5.5vw,76px)}
.dm__copy .lead{color:var(--ink2)}
.dm .checks{color:var(--ink);font-weight:400}
.dm .checks li::before{border-color:var(--g500);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300A86B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.dm__live{display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:18px;background:var(--sand);transition:background .15s}
.dm__live:hover{background:var(--g50)}
.dm__live > .i:first-child{font-size:24px;color:var(--saffron);flex:none}
.dm__live > .i:last-child{margin-inline-start:auto;color:var(--g700);flex:none}
.dm__card{background:#fff;border-radius:32px;padding:40px;box-shadow:0 30px 80px rgba(0,35,24,.12),0 0 0 1px var(--line)}
.form{display:flex;flex-direction:column;gap:18px}
.form[hidden]{display:none}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:8px;border:0;min-width:0}
.field > span,.field legend{font-size:14px;font-weight:600}
.field em{font-weight:400;color:var(--ink3);font-style:normal}
.field input,.field select,.field textarea{font:inherit;font-size:16px;color:var(--ink);background:var(--sand);border:1.5px solid transparent;border-radius:14px;padding:13px 16px;width:100%;transition:border-color .15s,background .15s}
.field textarea{resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--g500);background:#fff}
.form--checked :is(input,select):invalid{border-color:#E5484D;background:#FFF5F5}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.chips label{cursor:pointer;position:relative}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips span{display:inline-block;padding:10px 16px;border-radius:99px;border:1.5px solid var(--line);font-size:15px;transition:all .15s}
.chips input:checked+span{background:var(--g50);border-color:var(--g500);color:var(--g700);font-weight:600}
.chips input:focus-visible+span{outline:2px solid var(--g500);outline-offset:2px}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink2)}
.consent input{margin-top:3px;accent-color:var(--g600);width:18px;height:18px;flex:none}
.consent a{text-decoration:underline}
.form__error{color:#C62828;font-size:14px;font-weight:600}
.form__submit{width:100%;padding-block:16px}
.form__submit:disabled{opacity:.6;cursor:progress}
.form__done{display:flex;flex-direction:column;align-items:flex-start;gap:18px;outline:0}
.form__done[hidden]{display:none}
.form__tick{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--g500);color:#fff;font-size:32px;animation:rise .4s cubic-bezier(.2,.8,.2,1)}

@media (max-width:1100px){
  .pp-hero__in,.pp-row,.dm__in,.pp-faq{grid-template-columns:minmax(0,1fr)}
  .pp-row--flip .pp-row__copy{order:0}
  .pp-hero__visual{aspect-ratio:16/11}
  .pp-grid{grid-template-columns:repeat(3,1fr)}
  .plans{grid-template-columns:minmax(0,1fr);max-width:520px;margin-inline:auto}
  .dm__copy{position:static}
}
@media (max-width:640px){
  .pp-hero__in{padding-block:56px 64px;gap:36px}
  .pp-facts{grid-template-columns:1fr 1fr;gap:28px 0;padding-block:40px}
  .pp-facts div:nth-child(3){border:0;padding-inline-start:0}
  .pp-benefits,.pp-steps,.pp-related{grid-template-columns:minmax(0,1fr)}
  .pp-benefits article{padding:28px}
  .pp-row{padding-block:48px;gap:32px}
  .pp-grid{grid-template-columns:1fr 1fr}
  .pp-demo{flex-direction:column;align-items:flex-start;padding:32px}
  .ui--float{inset-inline:16px;inset-block-end:16px;width:auto}
  .form__row{grid-template-columns:minmax(0,1fr)}
  .dm__card{padding:24px;border-radius:24px}
  .pp-modules{border-radius:28px}
}
@media (max-width:1100px){.pp-hero__visual .ui--float{inset-inline-start:24px;inset-block-end:24px}}
@media (max-width:640px){.pp-hero__visual .ui--float{inset-inline:16px;inset-block-end:16px}}
@media (max-width:640px){.pp-hero__visual{aspect-ratio:auto;display:flow-root}.pp-hero__visual .ui--float{position:relative;inset:auto;margin:200px 16px 16px;width:auto}}

/* polish: balanced headlines, Arabic tile, active section, legal pages */
.display,.h1,.h2,.pp-h3,h1,h2,h3{text-wrap:balance}
.mini--ar b{font-size:32px;white-space:nowrap}
.pp-subnav a[aria-current=true]{background:var(--accent);border-color:var(--accent);color:#fff}
.pp-subnav a[aria-current=true] .i{color:#fff}
.legal{max-width:760px;padding-block:72px 120px;display:flex;flex-direction:column;gap:16px}
.legal h1{margin-bottom:4px}
.legal h2{margin-top:28px}
.legal p,.legal li{color:var(--ink2);font-size:18px}
.legal a{color:var(--g700);text-decoration:underline}
.legal__date{font-size:14px!important;color:var(--ink3)!important}
.legal__list{display:flex;flex-direction:column;gap:10px;padding-inline-start:22px}
.legal__list li{list-style:disc}

/* counter feature switcher */
.counter__list li{display:block}
.counter__list button{all:unset;box-sizing:border-box;width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;cursor:pointer;font-size:clamp(28px,2.8vw,40px);line-height:1.12;letter-spacing:-.015em;color:#C9C2B8;transition:color .2s}
.counter__list button:hover,.counter__list button[aria-selected=true]{color:var(--ink)}
.counter__list button:focus-visible{outline:2px solid var(--g500);outline-offset:4px;border-radius:6px}
.counter__list button span{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--g500);color:var(--g600);font-size:20px;opacity:0;transition:opacity .2s}
.counter__list button[aria-selected=true] span{opacity:1}
.counter__scene{display:block}
.counter__panel{position:absolute;inset:0;display:grid;place-items:center;animation:panel-in .35s cubic-bezier(.2,.8,.2,1)}
.counter__panel[hidden]{display:none}
@keyframes panel-in{from{opacity:0;transform:translateY(10px)}}
.handheld__bar--ok{background:var(--g50)!important;color:var(--g700)}
.handheld__screen > p:not(.handheld__bar) span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:lang(ar) .counter__list button{line-height:1.45}
@media (max-width:1100px){.counter__scene{min-height:560px}}

/* story card: live badge, demo facts, open link (no fake carousel) */
.story__row{height:560px}
.live-pill{position:absolute;inset-inline-start:32px;top:32px;display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border-radius:99px;background:rgba(255,255,255,.12);font-size:14px;font-weight:600}
.live-pill i{width:9px;height:9px;border-radius:50%;background:var(--g300);box-shadow:0 0 0 0 rgba(95,214,162,.7);animation:live 2s infinite}
@keyframes live{70%{box-shadow:0 0 0 10px rgba(95,214,162,0)}100%{box-shadow:0 0 0 0 rgba(95,214,162,0)}}
.story__go{position:absolute;inset-inline-end:32px;top:32px;display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:99px;background:#fff;color:var(--g700);font-weight:600;font-size:15px;transition:transform .2s}
.story__card:hover .story__go{transform:translateX(3px)}
[dir=rtl] .story__card:hover .story__go{transform:translateX(-3px)}
[dir=rtl] .story__go .i{transform:scaleX(-1)}
.bottles{top:96px}
.story__facts{position:absolute;inset-inline-end:40px;bottom:40px;display:grid;grid-template-columns:repeat(2,minmax(0,190px));gap:10px}
.story__facts span{display:flex;flex-direction:column;gap:2px;padding:12px 16px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);font-size:13px;color:rgba(255,255,255,.8);line-height:1.3}
.story__facts b{font-size:26px;font-weight:600;color:#fff;line-height:1}
@media (max-width:1100px){.story__facts{display:none}}
@media (max-width:640px){
  .story__row{height:auto}
  .story__card{display:flex;flex-direction:column;gap:16px;padding:24px;min-height:520px}
  .live-pill,.story__go{position:static;align-self:flex-start}
  .story__go{order:9;margin-top:auto}
  .bottles{position:relative;inset:auto;transform:scale(.62);transform-origin:top center;align-self:center;height:150px;margin-top:20px}
  .story__big,.story__script{position:static}
}
@media (prefers-reduced-motion:reduce){.live-pill i{animation:none}}

/* footer brand block */
.footer__brand{display:flex;flex-direction:column;align-items:flex-start;gap:18px;max-width:300px}
.footer__brand p{color:var(--ink2);font-size:15px;line-height:1.5}
.footer__brand .locale{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:99px;border:1px solid var(--line);font-size:14px}
.footer__brand .locale:hover{border-color:var(--g500)}
.footer__brand .locale .i{color:var(--g600)}

/* counter: pinned while scrolling (wide screens) */
@media (min-width:1101px){
  .counter-pin{height:calc(var(--n,9) * 42vh + min(80vh,760px))}
  .counter{position:sticky;top:96px;height:min(80vh,760px)}
  .counter__list{overflow:hidden;padding-block-end:0;-webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}
  .counter__track{display:flex;flex-direction:column;gap:20px;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
  .counter__track ul{padding-bottom:40vh}
  .counter__scene{min-height:0;height:100%}
}
@media (prefers-reduced-motion:reduce){.counter__track{transition:none}.counter__panel{animation:none}}

/* story slideshow */
.slides .story__row{height:560px}
.slide{position:relative;flex:0 0 var(--basis,0%);min-width:0;border-radius:24px;overflow:hidden;color:#fff;cursor:pointer;transition:flex-basis .7s cubic-bezier(.2,.8,.2,1),flex-grow .7s cubic-bezier(.2,.8,.2,1)}
.slide[data-pos="0"]{flex:1 1 0;cursor:auto}
.slide[data-pos="1"]{--basis:17%}
.slide[data-pos="2"]{--basis:8%}
.slide[data-pos="3"]{--basis:3.5%}
.slide[data-pos="4"]{--basis:1.6%}
.slide:not([data-pos="0"])::before{content:"";position:absolute;inset:0;background:rgba(0,20,13,.35);z-index:3;transition:background .3s}
.slide:not([data-pos="0"]):hover::before{background:rgba(0,20,13,.15)}
.slide > *{transition:opacity .35s .25s}
.slide:not([data-pos="0"]) > *{opacity:0;transition-delay:0s}
.slide--photo{background:linear-gradient(transparent 40%,rgba(0,20,13,.85)),var(--img) center/cover;border:2px solid transparent}
.slide--photo[data-pos="0"]{border-color:var(--g500)}
.slide__tag{position:absolute;inset-inline-start:32px;top:32px;padding:8px 16px;border-radius:99px;background:rgba(255,255,255,.16);backdrop-filter:blur(10px);font-size:14px;font-weight:600}
.slide__big{position:absolute;inset-inline-start:40px;bottom:100px;font-size:clamp(48px,6.5vw,96px);font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--g300);white-space:nowrap}
.slide__script{position:absolute;inset-inline-start:44px;bottom:40px;font-family:"Homemade Apple",cursive;font-size:clamp(22px,2.6vw,36px);white-space:nowrap}
:lang(ar) .slide__script{font-family:"Aref Ruqaa",serif;font-size:clamp(28px,3.2vw,44px)}
:lang(ar) .slide__big{font-weight:700;line-height:1.2}
.slides__foot{display:flex;justify-content:space-between;align-items:flex-start;gap:32px;margin-top:40px}
.slides__foot .story__quote{margin-top:0;transition:opacity .3s}
.slides__nav{display:flex;gap:12px;flex:none}
.slides__btn{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:2px solid var(--g600);background:none;color:var(--g600);font-size:22px;cursor:pointer;transition:background .15s,color .15s,transform .1s}
.slides__btn:hover{background:var(--g600);color:#fff}
.slides__btn:active{transform:scale(.94)}
.slides__btn[data-dir="-1"] .i{transform:scaleX(-1)}
[dir=rtl] .slides__btn[data-dir="-1"] .i{transform:none}
[dir=rtl] .slides__btn[data-dir="1"] .i{transform:scaleX(-1)}
@media (max-width:1100px){.slides .story__row{height:480px}.slide[data-pos="1"]{--basis:12%}.slide[data-pos="2"]{--basis:5%}.slide[data-pos="3"],.slide[data-pos="4"]{--basis:0%;margin-inline-start:-10px}}
@media (max-width:640px){
  .slides .story__row{height:auto;min-height:440px}
  .slide:not([data-pos="0"]){display:none}
  .slide--photo{min-height:440px}
  .slide__big{inset-inline-start:24px;bottom:84px}
  .slide__script{inset-inline-start:26px;bottom:32px}
  .slide__tag{inset-inline-start:24px;top:24px}
  .slides__foot{flex-direction:column;gap:20px}
}
@media (prefers-reduced-motion:reduce){.slide,.slide > *{transition:none}}

/* footer reveal: the closing message is pinned to the bottom of the screen inside the footer,
   so the white card scrolls up over it (Toast-style). Pure CSS: sticky inside the footer's own box. */
.footer{position:relative;overflow:clip;isolation:isolate}
.footer::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.05;background:url(/assets/mark-pattern.svg) 0 0/150px 106px repeat;-webkit-mask-image:linear-gradient(90deg,#000,transparent 22%,transparent 78%,#000);mask-image:linear-gradient(90deg,#000,transparent 22%,transparent 78%,#000)}
.footer > .wrap{position:relative}
.footer__card{position:relative;z-index:2}
.footer__sign{position:sticky;bottom:0;z-index:1;min-height:min(70vh,560px);justify-content:center;gap:16px;padding-block:48px}
.footer__cta{justify-content:center;margin-top:12px}
.footer__cta .btn{min-width:200px}

/* sign-in: last-used product */
.signin__card img{flex:none;border-radius:11px}
.is-last{background:var(--g50)}
.last-tag{font-style:normal;font-size:11px;font-weight:600;color:var(--g700);background:#fff;border:1px solid var(--g100);border-radius:99px;padding:1px 8px;margin-inline-start:6px;vertical-align:2px}
.nav__links .nav__menu-signin{display:none}
@media (max-width:1100px){body.menu-open .nav__links .nav__menu-signin{display:flex}}

/* /sign-in/ */
.signin{padding-block:72px 120px;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.signin__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;width:100%;margin-top:28px}
.signin__card{display:flex;flex-direction:column;gap:8px;padding:24px;border-radius:24px;border:1px solid var(--line);background:#fff;transition:border-color .15s,transform .2s,box-shadow .2s}
.signin__card:hover{border-color:var(--g500);transform:translateY(-2px);box-shadow:0 16px 40px rgba(0,35,24,.08)}
.signin__card img{margin-bottom:8px;border-radius:14px}
.signin__card.is-last{border-color:var(--g500);background:var(--g50)}
.signin__name{font-size:22px;font-weight:500}
.signin__desc{color:var(--ink2)}
.signin__host{margin-top:auto;padding-top:10px;display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--g700)}
[dir=rtl] .signin__host .i{transform:scaleX(-1)}
.signin__help{margin-top:28px;color:var(--ink2)}
.signin__help a{color:var(--g700);text-decoration:underline}
@media (min-width:1101px){.signin__grid{grid-template-columns:repeat(5,minmax(0,1fr))}}