:root{
  --navy:#102338; --navy-2:#18334f; --navy-3:#0a1828;
  --cream:#f5efe5; --cream-2:#ece3d4; --paper:#fffdf9;
  --gold:#d6a55b; --gold-d:#b98a42; --gold-l:#f1d9ae;
  --ink:#1b2633; --muted:#6b7280; --line:#e2d8c7;
  --red:#d6453b; --green:#16a34a;
  --r:16px;
  --ar:'Tajawal',system-ui,sans-serif;
  --ar-display:'Amiri',serif;
  --latin:'DM Serif Display',Georgia,serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}
body{margin:0;font-family:var(--ar);color:var(--ink);background:var(--cream);line-height:1.7;font-size:17px;padding-bottom:76px}
img,video{max-width:100%;display:block}
h1,h2,h3{line-height:1.3;margin:0 0 .5em}
p{margin:0 0 1em}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
.narrow{max-width:680px}
.center{text-align:center}
.muted{color:var(--muted)}
.tiny{font-size:14px}
.gold{color:var(--gold)}
.green{color:var(--green);font-weight:700}
.eyebrow{display:inline-block;font-size:14px;font-weight:700;letter-spacing:.02em;color:var(--gold);margin-bottom:.8em}

/* ---- top ---- */
.topbar{background:var(--navy-3);color:var(--gold-l);font-size:14px;font-weight:500;text-align:center;padding:8px 12px;display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.topbar .dot{opacity:.5}
.brandbar{background:var(--navy);padding:14px 16px 0;text-align:center}
.brand{font-family:var(--latin);font-size:30px;color:var(--cream);text-decoration:none;display:inline-block;padding:10px 0 2px;border-top:2px dashed rgba(245,239,229,.35);min-width:220px}
.brand.small{font-size:22px;border:0;padding:0}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--ar);font-weight:800;font-size:17px;border:0;border-radius:999px;padding:13px 26px;text-decoration:none;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-gold{background:var(--gold);color:var(--navy-3);box-shadow:0 6px 0 var(--gold-d),0 10px 24px rgba(214,165,91,.35)}
.btn-gold:hover{background:#e0b36c}
.btn-lg{font-size:20px;padding:16px 34px}
.btn-block{width:100%}
.btn-ghost{background:transparent;color:var(--navy);border:1.5px solid var(--line);box-shadow:none;font-weight:700;font-size:15px;padding:10px 18px}
.btn:focus-visible,.model:focus-visible,.offer input:focus-visible+.offer-body{outline:3px solid var(--gold);outline-offset:3px}

/* ---- hero ---- */
.hero{background:radial-gradient(120% 80% at 50% 0%,var(--navy-2) 0%,var(--navy) 55%,var(--navy-3) 100%);color:var(--cream);padding:28px 0 56px;overflow:hidden}
.hero-grid{display:grid;gap:36px;align-items:center}
.hero h1{font-family:var(--ar-display);font-size:clamp(34px,7.5vw,56px);font-weight:700;line-height:1.35}
.hero h1 mark{background:var(--gold);color:var(--navy-3);padding:0 .25em;border-radius:10px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.lead{font-size:19px;color:rgba(245,239,229,.85);max-width:34em}
.price{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:18px 0 6px;position:relative}
.price del{font-size:22px;color:rgba(245,239,229,.55);text-decoration-color:var(--red);text-decoration-thickness:3px}
.price strong{font-family:var(--ar-display);font-size:64px;line-height:1;color:var(--gold)}
.price strong span{font-size:.55em}
.badge-off{background:var(--red);color:#fff;border-radius:50%;width:64px;height:64px;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;font-weight:800;font-size:19px;line-height:1;transform:rotate(-8deg);align-self:center}
.badge-off small{font-size:11px;font-weight:500;margin-top:2px}
.deal2{font-size:17px;color:var(--gold-l);margin-bottom:22px}
.trust{list-style:none;padding:0;margin:26px 0 0;display:flex;gap:10px;flex-wrap:wrap}
.trust li{background:rgba(255,255,255,.06);border:1px solid rgba(245,239,229,.14);border-radius:12px;padding:8px 14px;font-size:15px}
.trust b{color:var(--gold);font-size:18px;margin-left:4px}
.hero-media{position:relative}
.photo-card{margin:0;background:var(--paper);padding:8px;border-radius:20px;box-shadow:0 30px 60px rgba(0,0,0,.4)}
.photo-card img{border-radius:14px;width:100%;height:auto}
.tilt{transform:rotate(-2deg)}
.stamp{position:absolute;top:-12px;left:12px;background:var(--red);color:#fff;font-weight:800;font-size:14px;padding:6px 14px;border-radius:8px;transform:rotate(-6deg);box-shadow:0 6px 16px rgba(0,0,0,.25)}

/* ---- quality ---- */
.quality{padding:64px 0}
.gsm{display:grid;gap:28px;align-items:center;margin-bottom:44px}
.gsm-box{position:relative;justify-self:center;width:240px;aspect-ratio:1;background:var(--navy);color:var(--cream);border:2px dashed var(--gold);border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;outline:10px solid var(--navy);outline-offset:-1px;margin:18px}
.gsm-box b{font-family:var(--latin);font-size:76px;line-height:1;font-weight:400}
.gsm-box span{color:var(--gold);font-weight:700;font-size:18px}
.gsm-box small{opacity:.8}
.gsm-m{position:absolute;font-size:12px;color:var(--gold);font-family:var(--latin)}
.gsm-m.t{top:-30px}
.gsm-m.s{right:-34px;top:50%;transform:translateY(-50%) rotate(90deg)}
.gsm-text h2{font-family:var(--ar-display);font-size:clamp(30px,6vw,42px)}
.gsm-text p{font-size:18px;color:#3b4654}
.feats{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.feat{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:20px 16px}
.feat svg{width:34px;height:34px;fill:none;stroke:var(--gold-d);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:10px}
.feat h3{font-size:17px;font-weight:800}
.feat p{font-size:15px;color:var(--muted);margin:0}

/* ---- pack / video ---- */
.pack{background:var(--navy);color:var(--cream);padding:64px 0}
.pack-grid{display:grid;gap:40px;align-items:center}
.phone{justify-self:center;width:min(320px,82vw);aspect-ratio:9/16;border-radius:32px;background:#000;padding:8px;box-shadow:0 0 0 2px rgba(245,239,229,.15),0 30px 60px rgba(0,0,0,.45)}
.phone video{width:100%;height:100%;object-fit:cover;border-radius:26px;background:#000}
.pack-text h2{font-family:var(--ar-display);font-size:clamp(28px,5.5vw,40px)}
.sizes{display:flex;gap:12px;align-items:flex-end;margin:26px 0 30px}
.size{flex:1;text-align:center;background:rgba(255,255,255,.04);border:1px solid rgba(245,239,229,.12);border-radius:14px;padding:16px 8px 12px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-height:220px}
.towel{width:calc(var(--w)*3px);height:calc(var(--h)*3px);background:repeating-linear-gradient(0deg,var(--cream) 0 6px,var(--cream-2) 6px 7px);border-radius:4px;margin-bottom:12px;position:relative;box-shadow:inset 0 -10px 0 rgba(214,165,91,.55)}
.size b{font-size:15px}
.size span{font-family:var(--latin);font-size:13px;color:var(--gold);direction:ltr}

/* ---- order ---- */
.order{padding:64px 0;background:linear-gradient(var(--cream),var(--cream-2))}
.order h2{font-family:var(--ar-display);font-size:clamp(28px,6vw,40px)}
.order h2 .gold{display:block;font-size:.65em;color:var(--gold-d)}
.alert{background:#fde8e6;color:#9b1c13;border:1px solid #f4b6af;border-radius:12px;padding:12px 16px;margin:16px 0;font-weight:700}
form{margin-top:26px}
.step{border:0;background:var(--paper);border-radius:20px;padding:20px 16px;margin:0 0 16px;box-shadow:0 1px 0 var(--line),0 8px 24px rgba(16,35,56,.06)}
.step legend{float:right;width:100%;font-weight:800;font-size:19px;margin-bottom:14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.step legend small{font-weight:500;font-size:14px;color:var(--muted)}
.num{width:30px;height:30px;border-radius:50%;background:var(--navy);color:var(--gold);display:inline-flex;align-items:center;justify-content:center;font-size:16px;flex:none}
.step legend+*{clear:both}
.offers{display:grid;gap:12px}
.offer{position:relative;display:block;cursor:pointer}
.offer input{position:absolute;opacity:0;pointer-events:none}
.offer-body{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center;border:2px solid var(--line);border-radius:14px;padding:16px 46px 16px 16px;transition:border-color .15s,background .15s;position:relative}
.offer-body::before{content:"";position:absolute;right:14px;top:50%;width:20px;height:20px;margin-top:-10px;border-radius:50%;border:2px solid #b9ae9c;background:#fff}
.offer input:checked+.offer-body{border-color:var(--gold);background:#fff8ec}
.offer input:checked+.offer-body::before{border-color:var(--gold-d);background:radial-gradient(circle,var(--gold-d) 0 5px,#fff 6px)}
.offer-title{font-weight:800;font-size:17px}
.offer-title small{display:block;font-weight:500;color:var(--muted);font-size:14px}
.offer-price{text-align:left;white-space:nowrap}
.offer-price del{color:var(--muted);font-size:14px;margin-left:4px}
.offer-price b{font-size:19px;color:var(--navy)}
.offer-sub{grid-column:1/-1;font-size:14px;color:var(--green);font-weight:700}
.offer.best{margin-top:12px}
.ribbon{position:absolute;top:-12px;left:14px;z-index:1;background:var(--navy);color:var(--gold-l);font-size:13px;font-weight:700;padding:3px 12px;border-radius:999px}

.picked{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;min-height:0}
.chip{display:inline-flex;align-items:center;gap:8px;background:var(--navy);color:var(--cream);border-radius:999px;padding:4px 6px 4px 12px;font-size:14px;font-weight:700}
.chip img{width:30px;height:30px;border-radius:50%;object-fit:cover}
.chip button{background:rgba(255,255,255,.12);border:0;color:inherit;width:24px;height:24px;border-radius:50%;cursor:pointer;font-size:14px;line-height:1}
.models{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.models.collapsed .model:nth-child(n+13){display:none}
.model{position:relative;border:0;padding:0;border-radius:12px;overflow:hidden;cursor:pointer;background:var(--cream-2);aspect-ratio:4/3;outline:3px solid transparent;outline-offset:-3px;transition:outline-color .12s,transform .12s}
.model img{width:100%;height:100%;object-fit:cover}
.mnum{position:absolute;bottom:6px;right:6px;background:rgba(10,24,40,.75);color:#fff;font-size:12px;font-weight:700;border-radius:6px;padding:0 7px;line-height:20px}
.model[aria-pressed="true"]{outline-color:var(--gold)}
.model[aria-pressed="true"]::after{content:attr(data-slot);position:absolute;top:6px;left:6px;width:26px;height:26px;border-radius:50%;background:var(--gold);color:var(--navy-3);font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.show-all{margin:14px auto 6px;display:flex}
.field{margin-bottom:14px}
.field label{display:block;font-weight:700;font-size:15px;margin-bottom:6px}
.field input{width:100%;font:inherit;font-size:17px;padding:14px 16px;border:1.5px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.field input:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 4px rgba(214,165,91,.2)}
.field input[dir="ltr"]{text-align:right}
.field.invalid input{border-color:var(--red)}
.ferr{display:none;color:var(--red);font-size:14px;margin-top:4px}
.field.invalid .ferr{display:block}
.hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);opacity:0;pointer-events:none}
.summary{background:var(--navy);color:var(--cream);border-radius:16px;padding:16px 18px;margin:20px 0 16px}
.sum-row{display:flex;justify-content:space-between;padding:4px 0;font-size:16px}
.sum-row.total{border-top:1px dashed rgba(245,239,229,.3);margin-top:6px;padding-top:10px;font-size:20px;font-weight:800}
.sum-row.total span:last-child{color:var(--gold)}
#submitBtn[disabled]{opacity:.7;cursor:wait}

/* ---- faq ---- */
.faq{padding:56px 0 40px}
.faq h2{font-family:var(--ar-display);font-size:clamp(26px,5vw,36px);margin-bottom:22px}
details{background:var(--paper);border:1px solid var(--line);border-radius:14px;margin-bottom:10px;padding:0 18px}
summary{cursor:pointer;font-weight:800;padding:16px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--gold-d);font-size:22px;line-height:1}
details[open] summary::after{content:"−"}
details p{color:#3b4654;padding-bottom:6px}

.foot{background:var(--navy-3);color:rgba(245,239,229,.7);text-align:center;padding:28px 16px;font-size:14px}
.foot .brand{color:var(--cream);margin-bottom:6px}

/* ---- sticky ---- */
.sticky{position:fixed;inset:auto 0 0 0;z-index:30;background:rgba(16,35,56,.97);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));color:var(--cream);transition:transform .25s ease;box-shadow:0 -8px 24px rgba(0,0,0,.2)}
.sticky.hide{transform:translateY(110%)}
.sticky-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;line-height:1.2}
.sticky-price del{opacity:.55;font-size:14px}
.sticky-price b{color:var(--gold);font-size:22px}
.sticky-price small{width:100%;font-size:12px;opacity:.8}
.sticky .btn{padding:12px 22px;font-size:16px;box-shadow:0 4px 0 var(--gold-d)}
.wa{position:fixed;left:16px;bottom:92px;z-index:31;width:54px;height:54px;border-radius:50%;background:#25d366;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(0,0,0,.25)}
.wa svg{width:30px;height:30px;fill:#fff}

/* ---- thank you ---- */
.thanks{min-height:70vh;padding:40px 0 60px}
.card{background:var(--paper);border-radius:20px;padding:24px 18px;box-shadow:0 1px 0 var(--line),0 10px 30px rgba(16,35,56,.08);margin-bottom:18px}
.check{width:72px;height:72px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font-size:38px;margin:0 auto 14px}
.thanks h1{font-family:var(--ar-display);font-size:34px}
.recap{list-style:none;padding:0;margin:16px 0 0}
.recap li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dashed var(--line);font-size:16px}
.recap li span:first-child{color:var(--muted)}
.upsell{border:2px dashed var(--gold);background:#fff8ec}
.upsell h2{font-family:var(--ar-display);font-size:28px;color:var(--navy)}
.upsell .big{font-family:var(--ar-display);color:var(--gold-d);font-size:40px;line-height:1}
.timer{display:inline-block;background:var(--navy);color:var(--gold-l);font-weight:800;border-radius:8px;padding:2px 10px;font-variant-numeric:tabular-nums;direction:ltr}
.no-thanks{display:block;text-align:center;margin-top:12px;color:var(--muted);font-size:15px}

@media (min-width:760px){
  body{padding-bottom:0}
  .sticky{display:none}
  .wa{bottom:24px}
  .hero{padding:44px 0 80px}
  .hero-grid{grid-template-columns:1.05fr .95fr;gap:56px}
  .gsm{grid-template-columns:auto 1fr;gap:56px}
  .gsm-box{width:280px}
  .feats{grid-template-columns:repeat(4,1fr)}
  .pack-grid{grid-template-columns:auto 1fr;gap:72px}
  .offers{grid-template-columns:1fr 1fr;align-items:stretch}
  .offer.best{margin-top:0}
  .offer-body{height:100%}
  .models{grid-template-columns:repeat(4,1fr)}
  .step{padding:24px}
  .card{padding:32px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* =====================================================
   v2 : brighter UI + animations
   ===================================================== */
:root{--cream:#faf6ef;--cream-2:#f1e9dc}
.gold-text{background:linear-gradient(100deg,#b9852f 0%,#e9bf6f 45%,#c8913c 100%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* reveal on scroll */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}

/* hero glow + float */
.hero{position:relative;isolation:isolate}
.hero::before,.hero::after{content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(60px);pointer-events:none}
.hero::before{width:420px;height:420px;background:rgba(214,165,91,.28);top:-120px;left:-120px;animation:orb 14s ease-in-out infinite alternate}
.hero::after{width:380px;height:380px;background:rgba(90,163,230,.25);bottom:-140px;right:-100px;animation:orb 18s ease-in-out infinite alternate-reverse}
@keyframes orb{to{transform:translate(60px,40px) scale(1.15)}}
.photo-card.tilt{animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:rotate(-2deg) translateY(0)}50%{transform:rotate(-1deg) translateY(-10px)}}
.hero-media::before{content:"";position:absolute;inset:8% 6%;background:radial-gradient(closest-side,rgba(241,217,174,.45),transparent);filter:blur(20px);z-index:-1}
.price strong{text-shadow:0 0 30px rgba(214,165,91,.35)}
.badge-off{animation:wob 2.4s ease-in-out infinite}
@keyframes wob{0%,100%{transform:rotate(-8deg) scale(1)}50%{transform:rotate(-4deg) scale(1.08)}}

/* button sheen */
.btn-gold{position:relative;overflow:hidden;background:linear-gradient(180deg,#e6b86c,#d29d4f)}
.btn-gold::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:sheen 3.2s ease-in-out infinite}
@keyframes sheen{0%,55%{left:-60%}100%{left:130%}}
.hero .btn-lg{animation:pulse 2.2s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 6px 0 var(--gold-d),0 0 0 0 rgba(241,217,174,.6)}100%{box-shadow:0 6px 0 var(--gold-d),0 0 0 18px rgba(241,217,174,0)}}

/* marquee */
.marquee{background:#fff;padding:20px 0 22px;border-bottom:1px solid var(--line)}
.marquee-head{text-align:center;font-weight:700;margin-bottom:14px;color:var(--navy);padding:0 16px}
.marquee-head b{color:var(--gold-d);font-size:22px}
.marquee-track{direction:ltr;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee-row{display:flex;width:max-content;animation:marq 45s linear infinite}
.marquee-row img{width:150px;height:112px;object-fit:cover;border-radius:14px;margin-right:12px;box-shadow:0 6px 16px rgba(16,35,56,.12)}
.marquee:hover .marquee-row{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}

/* proof */
.proof{padding:68px 0;background:radial-gradient(80% 50% at 50% 0%,#fff 0%,var(--cream) 70%)}
.proof-head{text-align:center;max-width:640px;margin:0 auto 34px}
.proof-head h2{font-family:var(--ar-display);font-size:clamp(30px,6.5vw,46px);color:var(--navy)}
.scenes{display:grid;gap:20px}
.scene{background:#fff;border-radius:26px;padding:10px;box-shadow:0 1px 0 var(--line),0 18px 40px rgba(16,35,56,.08);transition:transform .3s ease,box-shadow .3s ease,opacity .8s ease}
.scene:hover{transform:translateY(-4px);box-shadow:0 1px 0 var(--line),0 26px 50px rgba(16,35,56,.12)}
.stage{position:relative;aspect-ratio:16/10;border-radius:18px;overflow:hidden}
.stage svg{position:absolute;inset:0;width:100%;height:100%}
.stage-water{background:linear-gradient(180deg,#eef7ff,#d3e9fb)}
.stage-sun{background:linear-gradient(180deg,#bfe3ff 0%,#e9f5ff 45%,#fff3dc 100%)}
.stage-weight{background:linear-gradient(180deg,#fffaf2,#f3e8d6)}
.stage-lint{background:linear-gradient(180deg,#fbf9f6,#efe9e1)}
.scene-text{padding:18px 14px 12px}
.scene-text h3{font-size:21px;font-weight:800;color:var(--navy);margin-bottom:6px}
.scene-text p{color:#4b5563;font-size:16px;margin:0}
.snum{font-family:var(--latin);color:var(--gold);font-size:18px;display:block;margin-bottom:2px}
.chip{position:absolute;top:10px;right:10px;font-size:13px;font-weight:800;padding:4px 12px;border-radius:999px;background:#fff;box-shadow:0 4px 12px rgba(16,35,56,.12)}
.chip-blue{color:#1d5fa8}

/* pause everything until visible */
.scene:not(.play) *{animation-play-state:paused!important}

/* -- water -- */
.drop{transform-box:fill-box;transform-origin:50% 100%;animation:drop 2.7s cubic-bezier(.55,0,1,.45) infinite;opacity:0}
.ripple{transform-box:fill-box;transform-origin:center;animation:ripple 2.7s ease-out infinite;opacity:0}
.wet{transform-box:fill-box;transform-origin:center;animation:wet 2.7s ease-out infinite;opacity:0}
.d1{animation-delay:.9s!important}.d2{animation-delay:1.8s!important}
@keyframes drop{0%{transform:translateY(-6px);opacity:0}8%{opacity:1}38%{transform:translateY(82px) scale(1);opacity:1}44%{transform:translateY(86px) scale(1.35,.45);opacity:.9}50%{transform:translateY(88px) scale(.1,.05);opacity:0}100%{transform:translateY(88px);opacity:0}}
@keyframes ripple{0%,40%{transform:scale(.3);opacity:0}44%{opacity:1}75%{transform:scale(5);opacity:0}100%{opacity:0}}
@keyframes wet{0%,42%{transform:scale(.3);opacity:0}55%{transform:scale(1);opacity:1}100%{transform:scale(1.7,1.4);opacity:0}}

/* -- sun -- */
.sun-rays{transform-box:view-box;transform-origin:262px 46px;animation:spin 14s linear infinite}
.sun-glow{transform-box:view-box;transform-origin:262px 46px;animation:glow 3s ease-in-out infinite alternate}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes glow{from{transform:scale(.85);opacity:.7}to{transform:scale(1.15);opacity:1}}
.hang{transform-box:view-box;transform-origin:122px 50px;animation:sway 3s ease-in-out infinite alternate}
@keyframes sway{from{transform:rotate(-2.5deg)}to{transform:rotate(2.5deg)}}
.sun-towel{fill:#1f4f86;animation:dry 6s ease-in-out infinite}
@keyframes dry{0%,8%{fill:#1f4f86}65%,90%{fill:#6db3f2}100%{fill:#1f4f86}}
.drip{transform-box:fill-box;animation:drip 6s ease-in infinite;opacity:0}
.k1{animation-delay:.35s!important}.k2{animation-delay:.7s!important}
@keyframes drip{0%{transform:translateY(0);opacity:0}2%{opacity:1}11%{transform:translateY(22px);opacity:0}12%{transform:translateY(0);opacity:0}14%{opacity:1}24%{transform:translateY(22px);opacity:0}25%,100%{opacity:0}}
.steam{animation:steam 6s ease-out infinite;opacity:0}
.s1{animation-delay:.5s!important}.s2{animation-delay:1s!important}
@keyframes steam{0%,22%{opacity:0;transform:translateY(8px)}40%{opacity:.85}70%,100%{opacity:0;transform:translateY(-16px)}}
.drybar{position:absolute;left:12px;right:12px;bottom:10px;height:6px;border-radius:9px;background:rgba(255,255,255,.7);overflow:hidden}
.drybar-fill{position:absolute;inset:0 auto 0 0;width:0;border-radius:9px;background:linear-gradient(90deg,#3f8fe0,#f5b041);animation:bar 6s ease-in-out infinite}
@keyframes bar{0%,8%{width:0}65%,92%{width:100%}100%{width:0}}
.chip-wet,.chip-dry{animation:6s ease-in-out infinite}
.chip-wet{color:#1d5fa8;animation-name:showA}
.chip-dry{color:#b7791f;animation-name:showB;opacity:0}
@keyframes showA{0%,35%{opacity:1}45%,95%{opacity:0}100%{opacity:1}}
@keyframes showB{0%,50%{opacity:0;transform:scale(.8)}60%,92%{opacity:1;transform:scale(1)}100%{opacity:0}}

/* -- weight -- */
.beam{transform-box:view-box;transform-origin:160px 60px;animation:tilt 4.5s ease-in-out infinite}
.pan-l{animation:panL 4.5s ease-in-out infinite}
.pan-r{animation:panR 4.5s ease-in-out infinite}
@keyframes tilt{0%,15%{transform:rotate(0)}45%,85%{transform:rotate(7deg)}100%{transform:rotate(0)}}
@keyframes panL{0%,15%{transform:translateY(0)}45%,85%{transform:translateY(-12px)}100%{transform:translateY(0)}}
@keyframes panR{0%,15%{transform:translateY(0)}45%,85%{transform:translateY(12px)}100%{transform:translateY(0)}}
.weights{position:absolute;left:4%;right:4%;bottom:8px;display:flex;justify-content:space-between;direction:ltr}
.wbox{background:#fff;border-radius:12px;padding:4px 12px;text-align:center;box-shadow:0 4px 12px rgba(16,35,56,.1);line-height:1.25}
.wbox small{display:block;font-size:11px;color:var(--muted);font-weight:700}
.wbox b{font-family:var(--latin);font-weight:400;font-size:18px;color:#8b8f97}
.wbox i{font-style:normal;font-size:.7em;margin-left:1px}
.wbox-r{outline:2px solid var(--gold)}
.wbox-r b{color:var(--gold-d);font-size:24px}

/* -- lint -- */
.stitch{animation:stitch 1.4s linear infinite}
@keyframes stitch{to{stroke-dashoffset:-18}}
.shield{transform-box:fill-box;transform-origin:center;animation:pop 4s ease-out infinite}
@keyframes pop{0%,15%{transform:scale(0)}30%{transform:scale(1.18)}38%,100%{transform:scale(1)}}
.fray{transform-box:fill-box;transform-origin:50% 0;animation:fray 1.6s ease-in-out infinite alternate}
.f1{animation-delay:.3s!important}.f2{animation-delay:.6s!important}
@keyframes fray{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}
.fluff{transform-box:fill-box;animation:fluff 3.2s ease-out infinite;opacity:0}
.p1{animation-delay:.5s!important}.p2{animation-delay:1s!important}.p3{animation-delay:1.5s!important}.p4{animation-delay:2s!important}.p5{animation-delay:2.5s!important}
@keyframes fluff{0%{transform:translate(0,0);opacity:0}15%{opacity:1}100%{transform:translate(-22px,-44px) scale(.6);opacity:0}}
.lint-labels{position:absolute;top:8px;left:4%;right:4%;display:flex;justify-content:space-between;font-size:13px;font-weight:800}
.lint-labels span{background:#fff;border-radius:999px;padding:3px 12px;box-shadow:0 4px 12px rgba(16,35,56,.1)}
.lint-labels .ok{color:#0f766e}
.lint-labels .bad{color:#9b8b7b}

@media (min-width:760px){
  .scenes{grid-template-columns:1fr 1fr;gap:26px}
  .marquee-row img{width:190px;height:142px}
}
@media (prefers-reduced-motion:reduce){
  .scene *,.marquee-row,.photo-card,.hero::before,.hero::after,.btn-gold::after,.hero .btn-lg,.badge-off{animation:none!important}
  .js .rv{opacity:1;transform:none}
}
.gift{color:var(--gold-l);margin:-8px 0 22px}
.stage-sun .chip{right:auto;left:10px}

/* =====================================================
   v3 : photos instead of video
   ===================================================== */
.fan{position:relative;justify-self:center;width:min(440px,92vw);aspect-ratio:1.15}
.fan img{position:absolute;width:68%;aspect-ratio:4/3;object-fit:cover;border:7px solid var(--paper);border-radius:18px;box-shadow:0 24px 50px rgba(0,0,0,.45);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.fan-l{left:0;top:16%;transform:rotate(-10deg)}
.fan-r{right:0;top:16%;transform:rotate(10deg)}
.fan-c{left:16%;top:30%;transform:rotate(-1deg);z-index:2;width:70%!important}
.fan:hover .fan-l{transform:rotate(-14deg) translateX(-10px)}
.fan:hover .fan-r{transform:rotate(14deg) translateX(10px)}
.fan:hover .fan-c{transform:rotate(0) translateY(-6px) scale(1.03)}
.fan-badge{position:absolute;z-index:3;top:4%;right:6%;width:84px;height:84px;border-radius:50%;background:var(--gold);color:var(--navy-3);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-weight:800;font-size:13px;line-height:1.15;box-shadow:0 10px 24px rgba(0,0,0,.3);animation:wob 2.6s ease-in-out infinite}
.fan-badge b{font-family:var(--latin);font-size:30px;font-weight:400;line-height:1}

.gallery{padding:64px 0;background:#fff}
.gallery .proof-head h2{font-family:var(--ar-display);font-size:clamp(30px,6.5vw,44px);color:var(--navy)}
.mosaic{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.tile{position:relative;border:0;padding:0;border-radius:18px;overflow:hidden;cursor:zoom-in;background:var(--cream-2);aspect-ratio:4/3}
.tile:first-child{grid-column:span 2}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.tile:hover img{transform:scale(1.07)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(10,24,40,.55));pointer-events:none}
.tile-tag{position:absolute;z-index:1;bottom:10px;right:10px;color:#fff;font-weight:800;font-size:14px;background:rgba(10,24,40,.45);backdrop-filter:blur(4px);padding:3px 12px;border-radius:999px}
.tile:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

.lightbox{border:0;padding:0;background:transparent;max-width:min(920px,94vw);width:100%;overflow:visible}
.lightbox::backdrop{background:rgba(6,14,24,.85);backdrop-filter:blur(4px)}
.lightbox img{width:100%;max-height:72vh;object-fit:contain;border-radius:16px;background:#000}
.lb-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;color:#fff;font-weight:800;font-size:18px}
.lb-close{position:absolute;top:-14px;left:-6px;width:40px;height:40px;border-radius:50%;border:0;background:#fff;color:var(--navy);font-size:18px;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.3);z-index:2}

@media (min-width:760px){
  .mosaic{grid-template-columns:repeat(4,1fr);gap:14px}
  .tile:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
}

/* v4: single pack shot with hotspots */
.packshot{justify-self:center;width:min(520px,100%)}
.ps-card{position:relative;margin:0;background:var(--paper);padding:8px;border-radius:22px;box-shadow:0 30px 60px rgba(0,0,0,.45);transform:rotate(-1.5deg)}
.ps-card img{width:100%;height:auto;border-radius:16px}
.hot{position:absolute;left:var(--x);top:var(--y);display:flex;align-items:center;gap:6px;transform:translate(-14px,-50%);direction:ltr}
.hot i{position:relative;flex:none;width:28px;height:28px;border-radius:50%;background:var(--gold);color:var(--navy-3);font-style:normal;font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 3px #fff,0 6px 14px rgba(0,0,0,.35)}
.hot i::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid #fff;animation:hotpulse 2s ease-out infinite}
.hot:nth-child(3) i::after{animation-delay:.6s}.hot:nth-child(4) i::after{animation-delay:1.2s}
@keyframes hotpulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(2);opacity:0}}
.hot em{font-style:normal;font-weight:800;font-size:13px;background:rgba(10,24,40,.82);color:#fff;padding:3px 10px;border-radius:999px;white-space:nowrap;direction:rtl}
.ps-cap{text-align:center;margin:18px 0 0;color:var(--gold-l);font-size:16px}
.ps-cap b{color:#fff}
.size{position:relative}
.sn{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;background:var(--gold);color:var(--navy-3);font-style:normal;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center}
@media (prefers-reduced-motion:reduce){.hot i::after{animation:none}}
.sn{position:static;margin-bottom:8px}
@media (min-width:760px){.pack-grid{grid-template-columns:1.1fr 1fr}}