/* الصفحة الرئيسية: هيرو تفاعلي، جوال حيّ بإشعارات، قبل/بعد، مربعات مزايا، أرقام، أسئلة — مع حركات بتحترم «تقليل الحركة» */

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(26px) scale(.985);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}

/* ---------- HERO ---------- */
.lp-hero{position:relative;overflow:hidden;color:var(--bone);margin-top:-70px;padding-top:70px;border-radius:0 0 44px 44px;
  background:radial-gradient(120% 80% at 85% 0%,#16524A 0%,transparent 55%),radial-gradient(90% 70% at 0% 100%,#0F3F3C 0%,transparent 60%),var(--pine)}
.lp-hero .mono{opacity:.35}
.lp-orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;pointer-events:none;animation:orb 18s ease-in-out infinite alternate}
.lp-orb.o1{width:420px;height:420px;background:#D69A3C;top:-120px;left:-80px;opacity:.28}
.lp-orb.o2{width:380px;height:380px;background:#2E6E8E;bottom:-140px;left:30%;animation-duration:22s;opacity:.35}
.lp-orb.o3{width:300px;height:300px;background:#6E4A6B;top:20%;right:-100px;animation-duration:26s;opacity:.35}
@keyframes orb{to{transform:translate(60px,40px) scale(1.15)}}
.lp-hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding-top:72px;padding-bottom:96px}
.lp-chip{display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border-radius:999px;font-size:12px;letter-spacing:2.5px;text-transform:uppercase;color:var(--sage);
  background:rgba(255,255,255,.08);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 0 0 .5px rgba(255,255,255,.14)}
.lp-chip .dot{width:8px;height:8px;border-radius:50%;background:var(--saffron);box-shadow:0 0 0 0 rgba(214,154,60,.7);animation:ping 2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 10px rgba(214,154,60,0)}100%{box-shadow:0 0 0 0 rgba(214,154,60,0)}}
.lp-copy h1{color:var(--bone)!important;font-size:clamp(42px,6vw,80px);line-height:1.12;margin:22px 0 0;font-weight:800;letter-spacing:-.035em}
.lp-copy h1 em{font-style:normal;background:linear-gradient(90deg,#E9C98B,#9CB5AA 60%,#7FB7CF);-webkit-background-clip:text;background-clip:text;color:transparent}
.rot{display:inline-block;position:relative;color:var(--saffron);min-width:2ch}
.rot-w{display:inline-block;transition:opacity .35s,transform .45s cubic-bezier(.34,1.42,.64,1),filter .35s}
.rot-w.out{opacity:0;transform:translateY(-.4em) scale(.96);filter:blur(6px)}
.rot-w.in{opacity:0;transform:translateY(.45em) scale(.96);filter:blur(6px)}
.lp-copy .sub{margin:22px 0 0;max-width:31em;color:#cfdcd5;font-size:18px;line-height:1.75}
.lp-try{margin-top:30px;max-width:520px;width:100%}
.lp-try-box input{width:100%}
.lp-try.center{margin:22px auto 0}
.lp-try-box{display:flex;gap:6px;padding:6px;border-radius:999px;background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 0 0 .5px rgba(255,255,255,.2),0 18px 40px rgba(0,0,0,.25)}
.lp-try-box input{flex:1;min-width:0;background:transparent;border:0;color:#fff;font-size:17px;padding:0 16px;outline:none}
.lp-try-box input::placeholder{color:rgba(245,242,235,.6)}
.lp-try-box .zbtn{min-height:50px}
.lp-url{margin:12px 6px 0;font-size:14px;color:var(--sage);text-align:right}
.lp-url b{color:var(--bone);font-weight:600;border-bottom:1.5px dashed rgba(214,154,60,.7);padding-bottom:1px}
.lp-trust{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-wrap:wrap;gap:8px 20px;color:#cfdcd5;font-size:14px}
.lp-trust li{display:inline-flex;align-items:center;gap:7px}
.lp-trust .ic{width:18px;height:18px;stroke:var(--saffron);stroke-width:6;fill:none}

/* ---------- live phone ---------- */
.lp-stage{position:relative;display:grid;place-items:center;min-height:560px;perspective:1200px}
.lp-phone{position:relative;width:290px;height:590px;border-radius:52px;padding:12px;background:linear-gradient(145deg,#2b3633,#0b1312);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.12),inset 0 0 0 7px #05090a,0 50px 90px rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.4);
  transform:rotateY(-14deg) rotateX(6deg);transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.8,.2,1);animation:float 7s ease-in-out infinite}
@keyframes float{50%{translate:0 -12px}}
.lp-island{position:absolute;top:22px;left:50%;transform:translateX(-50%);width:96px;height:28px;border-radius:20px;background:#000;z-index:3}
.lp-screen{height:100%;border-radius:42px;overflow:hidden;background:#F3F4EF;color:#14201E;padding:56px 14px 14px;display:flex;flex-direction:column;gap:12px;font-size:13px}
.ps-top{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:999px;background:rgba(255,255,255,.75);box-shadow:inset 0 1px 0 #fff,0 4px 14px rgba(0,0,0,.06)}
.ps-mark{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--pine);color:var(--bone);font-weight:700;font-size:12px}
.ps-top b{flex:1;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ps-bag{width:26px;height:26px;border-radius:50%;background:var(--pine)}
.ps-hero{border-radius:20px;padding:16px;background:linear-gradient(135deg,#0B3331,#16524A);color:#F5F2EB}
.ps-hero b{display:block;font-size:17px}.ps-hero small{opacity:.8;font-size:11.5px}
.ps-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.ps-card{background:#fff;border-radius:18px;padding:8px;box-shadow:0 4px 14px rgba(0,0,0,.06)}
.ps-card i{display:grid;place-items:center;height:78px;border-radius:12px;margin-bottom:6px}
.ps-card i .ic{width:34px;height:34px;stroke:#fff;stroke-width:3;fill:none}
.ps-card .c1{background:#D69A3C}.ps-card .c2{background:#C26B4A}.ps-card .c3{background:#6E4A6B}.ps-card .c4{background:#2E6E8E}
.ps-card b{display:block;font-size:12px}.ps-card em{font-style:normal;color:#16524A;font-weight:700;font-size:12px}
.ps-cta{margin-top:auto;text-align:center;padding:12px;border-radius:999px;background:var(--pine);color:var(--bone);font-weight:700}

.lp-notes{position:absolute;inset:0;pointer-events:none}
.lp-note{position:absolute;display:flex;align-items:center;gap:10px;padding:10px 14px 10px 16px;border-radius:22px;min-width:220px;color:#14201E;
  background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 .5px rgba(255,255,255,.7),0 18px 40px rgba(0,0,0,.28);
  opacity:0;transform:translateY(14px) scale(.9);animation:note 9s cubic-bezier(.34,1.42,.64,1) infinite}
.lp-note b{display:block;font-size:13.5px}.lp-note small{color:#5a6461;font-size:12px}
.ni{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;font-size:18px;flex:none}
.ni.s{background:#F6E3C2}.ni.c{background:#F2D8CE}.ni.o{background:#D3E4EC}
.lp-note.n1{top:12%;right:-6%;animation-delay:.6s}
.lp-note.n2{top:46%;left:-10%;animation-delay:3.6s}
.lp-note.n3{bottom:10%;right:-2%;animation-delay:6.6s}
@keyframes note{0%{opacity:0;transform:translateY(14px) scale(.9)}6%,30%{opacity:1;transform:none}36%,100%{opacity:0;transform:translateY(-8px) scale(.96)}}

/* ---------- before / after ---------- */
.lp-vs{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center}
.lp-vs-card{padding:28px;border-radius:32px;background-color:var(--card);background-image:var(--lg-sheen);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);box-shadow:var(--lg-rim),var(--lg-drop)}
.lp-vs-card h3{margin:0 0 14px;font-size:22px}
.lp-vs-card ul{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.lp-vs-card li{display:flex;gap:10px;align-items:flex-start;color:var(--text)}
.lp-vs-card .ic{width:22px;height:22px;flex:none;fill:none;stroke-width:6;margin-top:3px}
.lp-vs-card.bad{opacity:.86}
.lp-vs-card.bad .ic{stroke:#C26B4A}
.lp-vs-card.bad li{color:var(--text-2)}
.lp-vs-card.good{box-shadow:var(--lg-rim),0 0 0 2px color-mix(in srgb,var(--tint) 60%,transparent),0 26px 60px rgba(11,51,49,.18)}
.lp-vs-card.good .ic{stroke:#2FA36B}
.lp-vs-arrow{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-size:24px;color:var(--bone);background:var(--pine);box-shadow:0 10px 24px rgba(11,51,49,.3)}

/* ---------- bento ---------- */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.bx{position:relative;overflow:hidden;padding:26px;border-radius:32px;min-height:250px;display:flex;flex-direction:column;
  background-color:var(--card);background-image:var(--lg-sheen);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);box-shadow:var(--lg-rim),var(--lg-drop);
  transition:transform .5s cubic-bezier(.34,1.42,.64,1)}
.bx:hover{transform:translateY(-4px)}
.bx h3{margin:0 0 6px;font-size:21px}
.bx p{margin:0;color:var(--text-2);font-size:15px;max-width:34em}
.bx-orders,.bx-stock{grid-column:span 3}.bx-countries{grid-column:span 2}.bx-offer{grid-column:span 2}.bx-pay{grid-column:span 2}.bx-brand{grid-column:span 6;min-height:170px}
.mini-orders{margin-top:auto;padding-top:18px;display:grid;gap:8px}
.mo{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:10px 14px;border-radius:16px;background:var(--fill-2);font-size:14px}
.mo span{color:var(--text-2)}
.mo .pill{font-style:normal;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px}
.p-new{background:color-mix(in srgb,var(--saffron) 25%,transparent);color:#9a6416}.p-ok{background:rgba(46,110,142,.18);color:#2E6E8E}.p-ship{background:rgba(47,163,107,.16);color:#1f8a57}
.mo:first-child{animation:mo-in 4s ease-in-out infinite}
@keyframes mo-in{0%,12%{background:color-mix(in srgb,var(--saffron) 20%,transparent)}30%,100%{background:var(--fill-2)}}
.mini-stock{margin-top:auto;padding-top:18px;display:grid;gap:12px}
.mini-stock div{display:grid;grid-template-columns:90px 1fr;gap:12px;align-items:center;font-size:14px}
.mini-stock i{display:block;height:10px;border-radius:9px;background:var(--fill);position:relative;overflow:hidden}
.mini-stock i::after{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:var(--w);border-radius:9px;background:linear-gradient(90deg,#16524A,#2FA36B);transform-origin:right;transform:scaleX(0);transition:transform 1.4s cubic-bezier(.2,.8,.2,1) .2s}
.mini-stock i.low::after{background:linear-gradient(90deg,#C26B4A,#D69A3C)}
.bx.in .mini-stock i::after{transform:scaleX(1)}
.mini-chips{margin-top:auto;padding-top:16px;display:flex;flex-wrap:wrap;gap:6px}
.mini-chips span{padding:6px 12px;border-radius:999px;background:var(--fill);font-size:13px}
.mini-offer{margin-top:auto;padding-top:16px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.mini-offer .old{color:var(--text-3);text-decoration:line-through;font-size:20px}
.mini-offer .new{font-size:38px;font-weight:800;letter-spacing:-.03em;color:var(--tint-text)}
.mini-offer small{width:100%;color:var(--text-2)}
.mini-pay{margin-top:auto;padding-top:16px;display:flex;flex-wrap:wrap;gap:8px}
.mini-pay span{padding:9px 14px;border-radius:14px;background:var(--fill);font-size:14px;font-weight:600}
.bx-brand{flex-direction:row;align-items:center;gap:30px;flex-wrap:wrap;justify-content:space-between}
.mini-swatches{display:flex}
.mini-swatches i{width:56px;height:56px;border-radius:50%;background:var(--c);margin-inline-start:-14px;box-shadow:0 0 0 4px var(--bg),0 8px 18px rgba(0,0,0,.18);transition:transform .4s cubic-bezier(.34,1.42,.64,1)}
.bx-brand:hover .mini-swatches i{transform:translateY(-6px)}
.bx-brand:hover .mini-swatches i:nth-child(2){transition-delay:.04s}.bx-brand:hover .mini-swatches i:nth-child(3){transition-delay:.08s}
.bx-brand:hover .mini-swatches i:nth-child(4){transition-delay:.12s}.bx-brand:hover .mini-swatches i:nth-child(5){transition-delay:.16s}

/* ---------- numbers ---------- */
.lp-numbers{position:relative;overflow:hidden;margin:20px 12px;border-radius:44px;background:var(--pine);color:var(--bone)}
.lp-numbers .mono{opacity:.4}
.lp-num-grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding-top:64px;padding-bottom:64px;text-align:center}
.lp-num-grid b{display:block;font-family:"Playfair Display",var(--font-display);font-size:clamp(46px,6vw,76px);line-height:1;font-weight:600;
  background:linear-gradient(180deg,#fff,#cfe1d8);-webkit-background-clip:text;background-clip:text;color:transparent}
.lp-num-grid > div > span{color:var(--sage);font-size:15px}

/* ---------- steps with growing line ---------- */
.lp-steps{position:relative}
.lp-steps li{transition:transform .5s cubic-bezier(.34,1.42,.64,1)}
.lp-steps li:hover{transform:translateY(-4px)}

/* ---------- FAQ ---------- */
.lp-faq{display:grid;gap:10px;max-width:860px}
.lp-faq details{border-radius:24px;padding:4px 22px;background-color:var(--card);background-image:var(--lg-sheen);-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);box-shadow:var(--lg-rim),0 6px 20px rgba(0,0,0,.05)}
.lp-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:16px 0;font-weight:700;font-size:17px}
.lp-faq summary::-webkit-details-marker{display:none}
.lp-faq .pm{position:relative;width:28px;height:28px;border-radius:50%;background:var(--fill);flex:none;transition:transform .4s cubic-bezier(.34,1.42,.64,1)}
.lp-faq .pm::before,.lp-faq .pm::after{content:"";position:absolute;inset:0;margin:auto;width:12px;height:2px;border-radius:2px;background:var(--text)}
.lp-faq .pm::after{transform:rotate(90deg);transition:transform .3s}
.lp-faq details[open] .pm{transform:rotate(180deg)}
.lp-faq details[open] .pm::after{transform:rotate(0)}
.lp-faq p{margin:0 0 18px;color:var(--text-2);line-height:1.8}

/* ---------- final CTA + sticky phone CTA ---------- */
.z-cta .lp-try-box input{color:#fff}
.lp-sticky{position:fixed;z-index:60;inset-inline:16px;bottom:calc(14px + env(safe-area-inset-bottom,0px));display:none;min-height:54px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 16px 40px rgba(11,51,49,.4);transform:translateY(140%);transition:transform .5s cubic-bezier(.34,1.42,.64,1)}
.lp-sticky.show{transform:none}

@media (max-width:960px){
  .lp-hero-grid{grid-template-columns:minmax(0,1fr);padding-top:44px;padding-bottom:40px}
  .lp-copy,.lp-stage{min-width:0}
  .lp-stage{min-height:520px}
  .lp-phone{transform:none;width:260px;height:530px}
  .lp-note{min-width:200px}
  .lp-note.n1{right:2%}.lp-note.n2{left:2%}.lp-note.n3{right:6%}
  .lp-vs{grid-template-columns:1fr}
  .lp-vs-arrow{justify-self:center;transform:rotate(-90deg)}
  .bento{grid-template-columns:1fr 1fr}
  .bx-orders,.bx-stock,.bx-brand{grid-column:span 2}.bx-countries,.bx-offer,.bx-pay{grid-column:span 1}
  .bx-pay{grid-column:span 2}
  .lp-num-grid{grid-template-columns:1fr 1fr;gap:34px 16px}
}
@media (max-width:640px){
  .lp-copy h1{font-size:42px}
  .lp-copy .sub{font-size:16.5px}
  .lp-try-box .zbtn{padding:0 18px}
  .bento{grid-template-columns:1fr}
  .bx-orders,.bx-stock,.bx-countries,.bx-offer,.bx-pay,.bx-brand{grid-column:auto}
  .bx{min-height:0}
  .lp-numbers{margin:10px 8px;border-radius:34px}
  .lp-sticky{display:flex}
  .pf.landing{padding-bottom:84px}
}
@media (prefers-color-scheme: dark){
  .lp-hero{background:radial-gradient(120% 80% at 85% 0%,#14463F 0%,transparent 55%),radial-gradient(90% 70% at 0% 100%,#0B2E2B 0%,transparent 60%),#071E1C}
  .p-new{color:#F1C887}.p-ok{color:#9CCDE3}.p-ship{color:#8FE0B7}
  .lp-vs-arrow{background:var(--tint);color:var(--on-tint)}
}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .lp-orb,.lp-phone,.lp-chip .dot,.mo:first-child{animation:none}
  .lp-note{animation:none;opacity:1;transform:none}
  .lp-note.n2,.lp-note.n3{display:none}
  .mini-stock i::after{transform:scaleX(1);transition:none}
}

/* =====================================================================
   v2 — stronger motion + real photos
   ===================================================================== */

/* entrance variants */
.reveal.from-r{transform:translateX(60px) rotate(1.5deg)}
.reveal.from-l{transform:translateX(-60px) rotate(-1.5deg)}
.reveal.zoom{transform:scale(.9);filter:blur(10px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform 1s cubic-bezier(.2,.8,.2,1),filter .9s}
.reveal.zoom.in{filter:none}
.reveal.in.from-r,.reveal.in.from-l{transform:none}
.wipe{display:inline-block;clip-path:inset(0 0 0 100%);transition:clip-path 1.1s cubic-bezier(.77,0,.18,1) .15s}
.in .wipe,.wipe.in{clip-path:inset(0 0 0 0)}

/* headline words arrive one by one */
.lp-copy h1 .w{display:inline-block;opacity:0;transform:translateY(.55em) rotate(4deg);filter:blur(12px);
  animation:w-in .9s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(.15s + var(--i) * 90ms)}
@keyframes w-in{to{opacity:1;transform:none;filter:none}}

/* spotlight that follows the pointer over the hero */
.lp-hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;opacity:var(--spot,0);transition:opacity .4s;
  background:radial-gradient(520px circle at var(--sx,50%) var(--sy,30%),rgba(214,154,60,.16),rgba(156,181,170,.08) 40%,transparent 65%)}
.lp-hero:hover{--spot:1}

/* hero phone enters from below, then follows the scroll */
.lp-hero .lp-phone{animation:phone-in 1.3s cubic-bezier(.2,.8,.2,1) .35s both,float 7s ease-in-out 1.7s infinite}
@keyframes phone-in{from{opacity:0;transform:translateY(120px) rotateX(35deg) rotateY(-25deg) scale(.85)}}

/* live shop inside the phone (real photos, endless feed) */
.lp-screen{padding:52px 10px 10px;gap:8px}
.ps-top{position:relative;z-index:3;flex:none}
.ps-bag{display:grid;place-items:center;position:relative;color:var(--bone)}
.ps-bag svg{width:15px;height:15px;stroke:currentColor;stroke-width:2;fill:none}
.ps-badge{position:absolute;top:-6px;right:-6px;min-width:17px;height:17px;border-radius:9px;background:var(--saffron);color:#2d1d05;font-size:10px;font-weight:800;font-style:normal;
  display:grid;place-items:center;padding:0 4px;transform:scale(0);transition:transform .45s cubic-bezier(.34,1.8,.64,1)}
.ps-badge.on{transform:scale(1)}
.ps-badge.pop{animation:pop .5s cubic-bezier(.34,1.8,.64,1)}
@keyframes pop{40%{transform:scale(1.6)}}
.ps-feed{flex:1;overflow:hidden;border-radius:20px;-webkit-mask:linear-gradient(180deg,transparent,#000 4%,#000 92%,transparent);mask:linear-gradient(180deg,transparent,#000 4%,#000 92%,transparent)}
.ps-track{display:flex;flex-direction:column;gap:9px;animation:feed 26s linear infinite}
.lp-phone:hover .ps-track{animation-play-state:paused}
@keyframes feed{to{transform:translateY(calc(-50% - 4.5px))}}
.ps-hero{position:relative;padding:0;overflow:hidden;height:150px;border-radius:20px;background:#ddd}
.ps-hero.tall{height:200px}
.ps-hero img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
.ps-hero span{position:absolute;inset:auto 0 0 0;padding:28px 12px 10px;background:linear-gradient(transparent,rgba(5,20,18,.85));color:#fff}
.ps-hero b{display:block;font-size:15px}.ps-hero small{font-size:10.5px;opacity:.85}
.ps-card{padding:6px;border-radius:16px;transition:transform .4s cubic-bezier(.34,1.42,.64,1),box-shadow .3s}
.ps-card img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 25%;border-radius:11px;background:#e7e5df;margin-bottom:5px}
.ps-card b{font-size:11px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ps-card.pick{transform:scale(1.06);box-shadow:0 0 0 2px var(--saffron),0 12px 26px rgba(0,0,0,.18);position:relative;z-index:2}
.ps-fly{position:fixed;z-index:70;width:54px;height:66px;object-fit:cover;border-radius:12px;pointer-events:none;opacity:0;box-shadow:0 10px 24px rgba(0,0,0,.3)}

/* notifications are now driven by the order timeline (JS) */
.lp-note{animation:none;transition:opacity .45s,transform .6s cubic-bezier(.34,1.42,.64,1)}
.lp-note.show{opacity:1;transform:none}

/* ---------- real photos strip ---------- */
.lp-gallery{padding:70px 0 20px;overflow:hidden}
.gal-row{overflow:hidden;padding:8px 0;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.gal-track{display:flex;gap:16px;width:max-content;animation:gal 48s linear infinite}
.gal-row.rev .gal-track{animation-direction:reverse;animation-duration:56s}
.gal-row:hover .gal-track{animation-play-state:paused}
@keyframes gal{to{transform:translateX(calc(50% + 8px))}}
.gal-card{position:relative;margin:0;width:210px;flex:none;border-radius:26px;overflow:hidden;background:#ddd;box-shadow:0 14px 34px rgba(11,51,49,.14);
  transition:transform .5s cubic-bezier(.34,1.42,.64,1)}
.gal-card:hover{transform:translateY(-8px) rotate(-1deg) scale(1.03)}
.gal-card img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 22%}
.gal-card figcaption{position:absolute;inset:auto 10px 10px 10px;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 12px;border-radius:16px;
  color:#14201E;font-size:13px;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%);
  box-shadow:inset 0 1px 0 #fff,0 6px 16px rgba(0,0,0,.12)}
.gal-card figcaption b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gal-card figcaption em{font-style:normal;font-weight:800;color:#16524A;white-space:nowrap}

/* ---------- scroll story (pinned phone, changing screens) ---------- */
.lp-story{padding:60px 0 30px}
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.story-steps{order:-1}
.story-pin{position:sticky;top:96px;display:grid;justify-items:center;gap:18px;padding-bottom:20px}
.story-phone{width:280px;height:570px;transform:none;animation:none}
.story-screens{position:relative;padding:0;display:block}
.scr{position:absolute;inset:0;padding:52px 12px 12px;display:flex;flex-direction:column;gap:9px;opacity:0;transform:translateX(-40px) scale(.96);filter:blur(6px);
  transition:opacity .55s,transform .7s cubic-bezier(.2,.8,.2,1),filter .55s;pointer-events:none}
.scr.on{opacity:1;transform:none;filter:none}
.scr.past{transform:translateX(40px) scale(.96)}
.story-dots{display:flex;gap:8px}
.story-dots i{width:8px;height:8px;border-radius:8px;background:var(--fill);transition:width .5s cubic-bezier(.34,1.42,.64,1),background .3s}
.story-dots i.on{width:28px;background:var(--saffron)}
.st{min-height:72vh;display:flex;flex-direction:column;justify-content:center;opacity:.28;transition:opacity .5s,transform .6s cubic-bezier(.2,.8,.2,1);transform:scale(.97);transform-origin:right center}
.st.on{opacity:1;transform:none}
.st-n{font-family:"Playfair Display",serif;font-size:56px;line-height:1;color:var(--saffron)}
.st h3{font-size:clamp(26px,3vw,38px);margin:10px 0 10px}
.st p{margin:0;color:var(--text-2);font-size:18px;line-height:1.8;max-width:28em}
/* screen 2: product page */
.pd-photo{border-radius:20px;overflow:hidden;height:255px;background:#e7e5df}
.pd-photo img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
.pd-body{display:flex;flex-direction:column;gap:5px;font-size:12px}
.pd-body > b{font-size:15px}.pd-body > em{font-style:normal;color:#16524A;font-weight:800}
.pd-l{color:#6b7471;font-size:11px;margin-top:4px}
.pd-sw,.pd-sz{display:flex;gap:7px}
.pd-sw i{width:24px;height:24px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px #fff,0 0 0 3px rgba(0,0,0,.08)}
.pd-sw i.sel{box-shadow:0 0 0 2px #fff,0 0 0 4px #16524A}
.pd-sz i{font-style:normal;min-width:36px;padding:5px 0;text-align:center;border-radius:10px;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.06);font-weight:700}
.pd-sz i.out{opacity:.35;text-decoration:line-through}
.scr.on .pd-sz i.sel{animation:sel .6s cubic-bezier(.34,1.8,.64,1) .5s both}
@keyframes sel{from{background:#fff;color:inherit;transform:scale(1)}50%{transform:scale(1.18)}to{background:#0B3331;color:#F5F2EB;transform:scale(1)}}
.pd-body .ps-cta{margin-top:8px}
.scr.on .pd-body .ps-cta{animation:press 1.8s ease 1.2s infinite}
@keyframes press{0%,70%,100%{transform:none}80%{transform:scale(.94)}}
/* screen 3: checkout */
.co-t{font-size:17px;margin:2px 4px}.co-t.sm{font-size:14px;margin-top:8px}
.co-item{display:grid;grid-template-columns:46px 1fr auto;gap:9px;align-items:center;padding:7px;border-radius:16px;background:#fff;box-shadow:0 3px 10px rgba(0,0,0,.05)}
.co-item img{width:46px;height:56px;object-fit:cover;object-position:center 20%;border-radius:10px}
.co-item b{display:block;font-size:12px}.co-item small{color:#6b7471;font-size:10.5px}.co-item em{font-style:normal;font-weight:800;color:#16524A;font-size:12px}
.co-row{display:flex;justify-content:space-between;padding:6px 6px;font-size:12px;border-bottom:1px solid rgba(0,0,0,.06)}
.co-row.tot{font-size:14px;border:0}.co-row.tot b{color:#16524A}
.scr .ps-cta{margin-top:auto}
.co-ok{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:10px;background:rgba(243,244,239,.94);opacity:0;border-radius:42px}
.co-ok i{width:70px;height:70px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:34px;color:#fff;background:#2FA36B;transform:scale(0)}
.scr.on .co-ok{animation:ok-bg 4s ease 1.6s infinite}
.scr.on .co-ok i{animation:ok-i 4s cubic-bezier(.34,1.8,.64,1) 1.6s infinite}
@keyframes ok-bg{0%,8%{opacity:0}15%,70%{opacity:1}80%,100%{opacity:0}}
@keyframes ok-i{0%,10%{transform:scale(0)}22%,70%{transform:scale(1)}80%,100%{transform:scale(0)}}
/* screen 4: dashboard */
.scr.dash{background:linear-gradient(180deg,#EEF1EC,#F3F4EF)}
.db-note{display:flex;gap:9px;align-items:center;padding:9px 11px;border-radius:18px;background:rgba(255,255,255,.9);box-shadow:0 10px 24px rgba(0,0,0,.12);transform:translateY(-120%);opacity:0}
.db-note b{display:block;font-size:12.5px}.db-note small{font-size:11px;color:#6b7471}
.scr.on .db-note{animation:drop .7s cubic-bezier(.34,1.42,.64,1) .4s forwards}
@keyframes drop{to{transform:none;opacity:1}}
.db-order{display:flex;justify-content:space-between;align-items:center;padding:10px 11px;border-radius:14px;background:#fff;box-shadow:0 3px 10px rgba(0,0,0,.05);font-size:12px}
.db-order b{display:block}.db-order small{color:#6b7471;font-size:10.5px}
.db-order .pill{font-style:normal;font-size:10.5px;font-weight:800;padding:3px 9px;border-radius:99px}
.scr.on .db-order.new{animation:hl 2.4s ease .9s both}
@keyframes hl{0%{box-shadow:0 0 0 0 rgba(214,154,60,.7)}30%{box-shadow:0 0 0 6px rgba(214,154,60,.25)}100%{box-shadow:0 3px 10px rgba(0,0,0,.05)}}
.db-stock{display:flex;justify-content:space-between;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.7);font-size:11.5px}
.db-stock s{color:#C26B4A;margin-inline-end:4px;opacity:0}
.scr.on .db-stock s{animation:tick 1s ease 1.4s forwards}
@keyframes tick{to{opacity:1}}

@media (max-width:960px){
  .story-grid{grid-template-columns:minmax(0,1fr);gap:0}
  .story-steps{order:0}
  .story-pin{top:70px;z-index:3;padding:10px 0 16px;background:linear-gradient(180deg,var(--bg) 82%,transparent)}
  .story-phone{width:210px;height:430px;border-radius:40px;padding:9px}
  .story-phone .lp-screen{border-radius:32px}
  .story-phone .scr{padding:40px 9px 9px;gap:6px;font-size:11px}
  .story-phone .ps-hero.tall{height:130px}.story-phone .pd-photo{height:170px}
  .story-phone .lp-island{width:70px;height:20px;top:16px}
  .st{min-height:62vh;justify-content:flex-start;padding-top:10px}
  .st p{font-size:16px}
  .gal-card{width:160px;border-radius:22px}
}
@media (prefers-reduced-motion: reduce){
  .lp-copy h1 .w{animation:none;opacity:1;transform:none;filter:none}
  .wipe{clip-path:none;transition:none}
  .lp-hero .lp-phone,.ps-track,.gal-track{animation:none}
  .scr{transition:none}
  .reveal.zoom{filter:none}
}

/* nothing that slides in from the side may widen the page */
html:has(body.landing),body.landing{overflow-x:clip}
.story-cap{display:none}
@media (max-width:960px){
  .story-cap{display:grid;gap:4px;width:100%;max-width:420px;text-align:center;padding:4px 18px 0}
  .story-cap .st-n{font-size:30px}
  .story-cap b{font-size:21px;font-family:var(--font-display)}
  .story-cap p{margin:0;color:var(--text-2);font-size:14.5px;line-height:1.7}
  .story-cap.swap{animation:cap .55s cubic-bezier(.2,.8,.2,1)}
  @keyframes cap{from{opacity:0;transform:translateY(14px);filter:blur(6px)}}
  .story-pin{background:linear-gradient(180deg,var(--bg) 92%,transparent)}
  .story-steps .st{opacity:0!important;min-height:58vh}
  .reveal.from-r{transform:translateX(30px)}.reveal.from-l{transform:translateX(-30px)}
}
.ps-grid{grid-template-columns:repeat(2,minmax(0,1fr))}