/* ===== Tokens ===== */
:root{
  --teal-50:#E6F8FB;
  --teal-100:#C5EEF5;
  --teal-200:#8DDDEC;
  --teal-300:#4FC8DC;
  --teal-400:#1FB3CC;
  --teal-500:#0096B7;
  --teal-600:#01749A;
  --teal-700:#024E69;
  --teal-900:#062B3F;

  --sand-50:#FFFBF1;
  --sand-100:#FFF3D9;
  --sand-200:#FFE7B5;

  --sun:#FFC42C;
  --sun-deep:#F2A100;
  --orange:#FF7A3D;
  --orange-deep:#E85B1B;
  --coral:#FF8E73;

  --ink:#062B3F;
  --ink-soft:#2C5468;
  --muted:#6F8895;
  --line:rgba(6,43,63,.08);
  --line-strong:rgba(6,43,63,.14);
  --white:#ffffff;
  --cream:#FFFBF1;

  --r-sm:10px;
  --r-md:16px;
  --r-lg:22px;
  --r-xl:30px;
  --r-pill:999px;

  --shadow-sm:0 1px 2px rgba(6,43,63,.06), 0 4px 14px rgba(6,43,63,.05);
  --shadow-md:0 6px 24px rgba(6,43,63,.10), 0 2px 6px rgba(6,43,63,.05);
  --shadow-lg:0 20px 60px rgba(6,43,63,.18), 0 6px 18px rgba(6,43,63,.08);
  --shadow-cta:0 10px 24px rgba(232,91,27,.35), 0 2px 6px rgba(232,91,27,.25);

  --container:440px;
  --pad:20px;

  --font-display:"Cairo", system-ui, sans-serif;
  --font-body:"Cairo", system-ui, sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:#EAF6FA;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  direction:rtl;
  font-size:16px;
  line-height:1.6;
}

/* Decorative desktop bg: water + sand stripe */
.viewport{
  min-height:100vh;
  background:
    radial-gradient(1200px 600px at 80% -10%, #FFE7B5 0%, transparent 60%),
    radial-gradient(900px 500px at 10% 30%, #C5EEF5 0%, transparent 55%),
    linear-gradient(180deg,#EAF6FA 0%, #F6FBFD 40%, #FFF3D9 100%);
  display:flex;
  justify-content:center;
  position:relative;
}

.page{
  width:100%;
  max-width:var(--container);
  background:var(--cream);
  position:relative;
  overflow:hidden;
  box-shadow:0 0 0 1px rgba(6,43,63,.06), 0 30px 80px rgba(6,43,63,.18);
}
@media(min-width:560px){
  .page{
    margin:24px 0;
    border-radius:32px;
  }
}

/* ===== Reusable type ===== */
h1,h2,h3,h4{font-family:var(--font-display);color:var(--ink);line-height:1.25;margin:0;font-weight:800;letter-spacing:-.01em}
h1{font-size:34px;font-weight:900;line-height:1.15}
h2{font-size:26px;letter-spacing:-.02em}
h3{font-size:18px}
p{margin:0}
.eyebrow{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-display);
  font-weight:800;font-size:12px;
  color:var(--teal-600);
  background:var(--teal-50);
  padding:6px 12px;border-radius:var(--r-pill);
  letter-spacing:.02em;
  border:1px solid var(--teal-100);
}
.eyebrow.warm{color:var(--orange-deep);background:#FFEEDC;border-color:#FFD9B6}
.eyebrow.sun{color:#7A5300;background:#FFF1C8;border-color:#FFE08A}

.section{padding:48px var(--pad)}
.section.tight{padding:32px var(--pad)}
.section h2 + .lede{color:var(--ink-soft);margin-top:10px;font-size:15px}

/* ===== Hero ===== */
.hero{
  position:relative;
  padding:18px var(--pad) 36px;
  background:
    radial-gradient(120% 60% at 50% 0%, #FFE7B5 0%, transparent 60%),
    linear-gradient(180deg,#7FE0EF 0%, #4FC8DC 40%, #1FB3CC 100%);
  color:var(--white);
  overflow:hidden;
}
.hero::before{
  /* sun */
  content:"";position:absolute;top:-60px;left:-60px;
  width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%, #FFE07A 0%, #FFC42C 55%, rgba(255,196,44,0) 70%);
  filter:blur(2px);
  opacity:.95;
}
.hero::after{
  /* water waves bottom */
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:48px;
  background:
    radial-gradient(20px 12px at 10px 24px, var(--cream) 50%, transparent 51%) repeat-x,
    radial-gradient(20px 12px at 30px 32px, var(--cream) 50%, transparent 51%) repeat-x;
  background-size:40px 24px,40px 24px;
  background-position:0 24px, 20px 32px;
  filter:drop-shadow(0 -3px 0 rgba(255,255,255,.4));
}

.topbar{
  display:flex;align-items:center;justify-content:space-between;
  position:relative;z-index:2;
  padding-bottom:14px;
}
.logo{
  display:flex;align-items:center;gap:8px;
  font-family:var(--font-display);font-weight:900;
  color:var(--white);
  font-size:20px;
  letter-spacing:-.02em;
}
.logo span{
  font-family:"Cairo", system-ui, sans-serif;
  text-transform:lowercase;
}
.logo .dot{
  width:28px;height:28px;border-radius:9px;
  background:linear-gradient(135deg,#FFC42C,#FF7A3D);
  display:grid;place-items:center;
  box-shadow:0 4px 10px rgba(0,0,0,.15);
}
.topbar .pill{
  font-size:11px;font-weight:700;
  background:rgba(255,255,255,.22);
  border:1px solid rgba(255,255,255,.35);
  color:#fff;
  padding:6px 10px;border-radius:var(--r-pill);
  display:inline-flex;align-items:center;gap:6px;
  backdrop-filter:blur(8px);
}

.hero-content{position:relative;z-index:2}
.hero-badges{
  display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;
}
.hero-badges .b{
  background:rgba(255,255,255,.95);
  color:var(--teal-700);
  border:1px solid rgba(255,255,255,.6);
  font-weight:800;font-size:11px;
  padding:6px 10px;border-radius:var(--r-pill);
  display:inline-flex;align-items:center;gap:6px;
  box-shadow:var(--shadow-sm);
}
.hero-badges .b.warm{color:var(--orange-deep);background:#FFF1E2}
.hero-badges .b.sun{color:#7A5300;background:#FFF1C8}

.hero h1{
  color:var(--white);
  font-size:38px;
  text-shadow:0 2px 0 rgba(2,78,105,.18), 0 6px 16px rgba(2,78,105,.18);
  text-wrap:balance;
}
.hero h1 .hl{
  background:linear-gradient(180deg, transparent 60%, #FFC42C 60%);
  padding:0 4px;
  color:#fff;
}
.hero .sub{
  margin-top:12px;color:rgba(255,255,255,.95);font-size:16px;font-weight:500;
  text-wrap:pretty;
}

.hero-stack{
  display:grid;grid-template-columns:1fr;gap:18px;margin-top:18px;
}

.product-card{
  position:relative;
  border-radius:24px;
  background:linear-gradient(180deg,#E6F8FB 0%, #FFF8E7 100%);
  padding:14px;
  box-shadow:var(--shadow-lg), inset 0 0 0 1px rgba(255,255,255,.6);
  overflow:hidden;
}
.product-card .float-badge{
  position:absolute;top:14px;right:14px;
  background:var(--orange);
  color:#fff;font-weight:800;font-size:11px;
  padding:6px 10px;border-radius:var(--r-pill);
  box-shadow:0 6px 14px rgba(232,91,27,.35);
  z-index:3;
}
.product-card .float-discount{
  position:absolute;top:14px;left:14px;
  background:var(--white);color:var(--teal-700);
  border:2px solid var(--sun);
  font-weight:900;font-size:12px;
  padding:8px 10px;border-radius:14px;
  z-index:3;
  transform:rotate(-6deg);
  box-shadow:var(--shadow-sm);
}
.product-card .float-discount small{display:block;font-size:9px;color:var(--muted);font-weight:700}

.product-slot{
  position:relative;
  aspect-ratio: 4/3.4;
  border-radius:18px;
  background:
    radial-gradient(80% 80% at 50% 30%, #FFF 0%, #DFF3F8 70%, #BFE6EF 100%);
  display:grid;place-items:center;
  overflow:hidden;
}
.product-slot .ph-label{
  position:absolute;bottom:10px;right:10px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  font-size:10px;color:var(--teal-700);
  background:rgba(255,255,255,.9);
  padding:4px 8px;border-radius:var(--r-pill);
  border:1px solid var(--teal-100);
}

.product-thumbs{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px;
}
.product-thumbs .t{
  aspect-ratio:1;border-radius:12px;
  background:linear-gradient(135deg,#DFF3F8,#FFF);
  border:1px solid var(--teal-100);
  display:grid;place-items:center;
  font-family:ui-monospace,monospace;font-size:9px;color:var(--teal-600);
}
.product-thumbs .t.active{outline:2px solid var(--orange);outline-offset:1px}

.price-row{
  margin-top:14px;
  display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;
}
.price-now{font-family:var(--font-display);font-weight:900;font-size:34px;color:var(--orange-deep);line-height:1}
.price-now .cur{font-size:16px;margin-right:4px;color:var(--orange)}
.price-old{
  font-size:16px;color:var(--muted);text-decoration:line-through;font-weight:700;
}
.price-save{
  background:#FFEDD5;color:var(--orange-deep);
  font-weight:800;font-size:11px;
  padding:4px 8px;border-radius:var(--r-pill);
}

/* CTA buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border:none;cursor:pointer;
  font-family:var(--font-display);font-weight:800;
  border-radius:var(--r-pill);
  padding:16px 22px;font-size:16px;
  transition:transform .15s ease, box-shadow .2s ease, filter .2s ease;
  text-decoration:none;
}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-primary{
  background:linear-gradient(180deg,#FF8E55,#E85B1B);
  color:#fff;
  box-shadow:var(--shadow-cta);
  width:100%;
}
.btn-primary:hover{filter:brightness(1.05)}
.btn-primary .arr{transform:scaleX(-1)}
.btn-wa{
  background:#25D366;color:#fff;width:100%;
}
.btn-ghost{
  background:#fff;color:var(--teal-700);border:1.5px solid var(--teal-100);
}

.hero-cta{margin-top:18px;display:grid;gap:10px}
.hero-cta .micro{
  display:flex;justify-content:center;gap:14px;flex-wrap:wrap;
  font-size:12px;font-weight:700;color:rgba(255,255,255,.95);
}
.hero-cta .micro span{display:inline-flex;align-items:center;gap:6px}
.hero-cta .micro .dot{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.5)}

/* ===== Trust strip ===== */
.trust-strip{
  padding:18px var(--pad);
  background:var(--cream);
  border-bottom:1px solid var(--line);
}
.trust-strip .row{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;text-align:center;
}
.trust-strip .it{
  display:flex;flex-direction:column;align-items:center;gap:6px;
}
.trust-strip .ic{
  width:40px;height:40px;border-radius:14px;
  background:#FFF1E2;color:var(--orange-deep);
  display:grid;place-items:center;
}
.trust-strip .it:nth-child(2) .ic{background:var(--teal-50);color:var(--teal-600)}
.trust-strip .it:nth-child(3) .ic{background:#FFF1C8;color:#7A5300}
.trust-strip .it:nth-child(4) .ic{background:#E8F7EE;color:#0F8A4D}
.trust-strip .lab{font-size:11px;font-weight:700;color:var(--ink);line-height:1.2}

/* ===== Social proof ===== */
.social{
  padding:36px var(--pad);
  background:linear-gradient(180deg,var(--cream),#FFF8E7);
  text-align:center;
}
.stars{display:inline-flex;gap:2px;color:var(--sun-deep);font-size:18px}
.social .big{
  font-family:var(--font-display);font-weight:900;
  font-size:44px;color:var(--teal-700);line-height:1;
  display:flex;align-items:center;justify-content:center;gap:6px;
  margin-top:6px;
}
.social .big .plus{color:var(--orange);font-size:34px}
.social .sub{color:var(--ink-soft);margin-top:6px;font-size:14px}
.proof-row{
  display:flex;gap:8px;margin-top:18px;overflow-x:auto;padding:4px 0 8px;
  scrollbar-width:none;
}
.proof-row::-webkit-scrollbar{display:none}
.proof-thumb{
  flex:0 0 110px;height:130px;border-radius:18px;
  background:linear-gradient(135deg,#C5EEF5,#FFF3D9);
  border:3px solid #fff;
  box-shadow:var(--shadow-sm);
  display:grid;place-items:center;
  font-family:ui-monospace,monospace;font-size:9px;color:var(--teal-600);
  position:relative;
}
.proof-thumb::after{
  content:"";position:absolute;inset:0;border-radius:15px;
  background:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,0) 0,rgba(255,255,255,0) 10px,
      rgba(255,255,255,.35) 10px,rgba(255,255,255,.35) 11px);
}
.proof-thumb .lab{position:relative;z-index:2;background:rgba(255,255,255,.85);padding:2px 6px;border-radius:6px}

/* ===== Problem / Solution ===== */
.problems{
  padding:48px var(--pad);
  background:var(--white);
  border-top:1px solid var(--line);
}
.problems .grid{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px;
}
.problem{
  background:#FFF6F1;border:1px solid #FFD9B6;
  border-radius:18px;padding:14px;
  position:relative;
}
.problem .ic{
  width:36px;height:36px;border-radius:12px;
  background:#fff;color:var(--orange-deep);
  display:grid;place-items:center;margin-bottom:8px;
  box-shadow:var(--shadow-sm);
}
.problem h4{font-family:var(--font-display);font-weight:800;font-size:14px;color:var(--ink);margin:0 0 4px}
.problem p{font-size:12px;color:var(--ink-soft);line-height:1.5}

.solution{
  margin-top:18px;
  border-radius:22px;
  padding:20px;
  background:linear-gradient(135deg,var(--teal-500),var(--teal-700));
  color:#fff;
  position:relative;overflow:hidden;
}
.solution::before{
  content:"";position:absolute;right:-30px;bottom:-30px;
  width:160px;height:160px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,196,44,.5), transparent 70%);
}
.solution .eyebrow{background:rgba(255,255,255,.2);color:#fff;border-color:rgba(255,255,255,.3)}
.solution h3{color:#fff;font-size:22px;margin:10px 0 8px;position:relative;text-wrap:balance}
.solution p{font-size:14px;color:rgba(255,255,255,.92);position:relative}
.solution .check{
  margin-top:14px;display:grid;gap:8px;position:relative;
}
.solution .check li{
  list-style:none;display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.12);padding:10px 12px;border-radius:14px;
  font-size:13px;font-weight:600;
  border:1px solid rgba(255,255,255,.15);
}
.solution .check li .cm{
  width:22px;height:22px;border-radius:50%;background:var(--sun);color:var(--teal-900);
  display:grid;place-items:center;flex:0 0 22px;
}

/* ===== Benefits ===== */
.benefits{
  padding:48px var(--pad);
  background:linear-gradient(180deg,#F6FBFD 0%, #E6F8FB 100%);
}
.benefit-grid{
  margin-top:20px;
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
}
.benefit{
  background:#fff;border-radius:18px;padding:14px;
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
  transition:transform .2s ease;
}
.benefit:hover{transform:translateY(-2px)}
.benefit .ic{
  width:42px;height:42px;border-radius:13px;
  display:grid;place-items:center;margin-bottom:10px;
}
.benefit:nth-child(1) .ic{background:#FFF1E2;color:var(--orange-deep)}
.benefit:nth-child(2) .ic{background:var(--teal-50);color:var(--teal-600)}
.benefit:nth-child(3) .ic{background:#FFF1C8;color:#7A5300}
.benefit:nth-child(4) .ic{background:#E8F7EE;color:#0F8A4D}
.benefit:nth-child(5) .ic{background:#FBE7FF;color:#7A2C97}
.benefit:nth-child(6) .ic{background:#E2EAFF;color:#2A4FB0}
.benefit h4{font-family:var(--font-display);font-weight:800;font-size:14px;margin:0 0 4px}
.benefit p{font-size:12px;color:var(--ink-soft);line-height:1.5}

.size-opts{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px}
.size-opt{
  display:flex;align-items:center;gap:6px;
  background:var(--teal-50);border:1px solid var(--teal-100);
  border-radius:10px;padding:5px 8px;
}
.size-lbl{
  font-family:var(--font-display);font-weight:900;font-size:13px;
  color:var(--teal-700);min-width:20px;
}
.size-desc{font-size:11px;color:var(--ink-soft);font-weight:600}

/* ===== How to use ===== */
.howto{
  padding:48px var(--pad);
  background:var(--cream);
  position:relative;
}
.steps{
  margin-top:22px;
  display:grid;gap:12px;
}
.step{
  display:grid;grid-template-columns:54px 1fr auto;gap:14px;align-items:center;
  background:#fff;border-radius:18px;padding:14px;
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
  position:relative;
}
.step .num{
  width:54px;height:54px;border-radius:18px;
  background:linear-gradient(135deg,var(--teal-300),var(--teal-500));
  color:#fff;font-family:var(--font-display);font-weight:900;font-size:22px;
  display:grid;place-items:center;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.12);
}
.step:nth-child(2) .num{background:linear-gradient(135deg,#FFC42C,#F2A100)}
.step:nth-child(3) .num{background:linear-gradient(135deg,#FF8E73,#E85B1B)}
.step:nth-child(4) .num{background:linear-gradient(135deg,#7FE0EF,#1FB3CC)}
.step h4{font-family:var(--font-display);font-weight:800;font-size:15px;margin:0 0 2px}
.step p{font-size:12px;color:var(--ink-soft);line-height:1.4}
.step .ic{width:36px;height:36px;border-radius:12px;background:var(--teal-50);color:var(--teal-600);display:grid;place-items:center}

/* ===== Summer benefits ===== */
.summer{
  padding:48px var(--pad);
  background:linear-gradient(180deg,#FFF3D9 0%, #FFE7B5 100%);
  position:relative;overflow:hidden;
}
.summer::before{
  content:"";position:absolute;top:30px;left:-40px;
  width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle,#FFC42C,transparent 70%);
  opacity:.45;
}
.summer-grid{
  margin-top:20px;display:grid;grid-template-columns:1fr 1fr;gap:10px;
}
.summer-card{
  background:#fff;border-radius:18px;padding:14px;
  border:1px solid #FFE08A;
  position:relative;overflow:hidden;
}
.summer-card .em{
  font-size:28px;line-height:1;display:none;
}
.summer-card .ic{
  width:44px;height:44px;border-radius:14px;display:grid;place-items:center;margin-bottom:10px;
  background:linear-gradient(135deg,#FFE07A,#FFC42C);color:#7A5300;
}
.summer-card:nth-child(even) .ic{background:linear-gradient(135deg,#7FE0EF,#1FB3CC);color:#fff}
.summer-card h4{font-family:var(--font-display);font-weight:800;font-size:14px;margin:0 0 4px}
.summer-card p{font-size:12px;color:var(--ink-soft);line-height:1.5}

/* ===== Testimonials ===== */
.testimonials{
  padding:48px var(--pad);
  background:var(--white);
}
.testi-track{
  margin-top:22px;
  display:flex;gap:12px;overflow-x:auto;padding:6px 0 16px;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.testi-track::-webkit-scrollbar{display:none}
.testi{
  flex:0 0 86%;
  scroll-snap-align:center;
  background:#fff;border-radius:22px;padding:18px;
  border:1px solid var(--line);
  box-shadow:var(--shadow-md);
  display:grid;gap:10px;
}
.testi .head{display:flex;align-items:center;gap:10px}
.testi .av{
  width:46px;height:46px;border-radius:50%;
  background:linear-gradient(135deg,var(--teal-300),var(--sun));
  color:#fff;display:grid;place-items:center;
  font-family:var(--font-display);font-weight:900;font-size:18px;
  flex:0 0 46px;
}
.testi .meta{display:flex;flex-direction:column;gap:2px}
.testi .nm{font-weight:800;font-family:var(--font-display);font-size:15px}
.testi .ct{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:4px}
.testi .vr{
  margin-right:auto;
  font-size:10px;font-weight:700;color:#0F8A4D;background:#E8F7EE;border-radius:var(--r-pill);
  padding:4px 8px;display:inline-flex;align-items:center;gap:4px;
}
.testi .stars{font-size:14px}
.testi .body{font-size:13.5px;color:var(--ink);line-height:1.6;text-wrap:pretty}
.testi .photo{
  height:90px;border-radius:14px;
  background:linear-gradient(135deg,#C5EEF5,#FFF3D9);
  display:grid;place-items:center;
  font-family:ui-monospace,monospace;font-size:10px;color:var(--teal-600);
}
.testi-dots{display:flex;justify-content:center;gap:6px;margin-top:-4px}
.testi-dots .d{width:6px;height:6px;border-radius:50%;background:var(--line-strong)}
.testi-dots .d.active{background:var(--orange);width:18px;border-radius:3px}

/* ===== COD trust ===== */
.cod{
  padding:48px var(--pad);
  background:
    radial-gradient(80% 50% at 50% 0%, #DFF3F8 0%, transparent 60%),
    var(--cream);
  position:relative;
}
.cod-grid{
  margin-top:22px;display:grid;grid-template-columns:1fr 1fr;gap:10px;
}
.cod-card{
  background:#fff;border-radius:18px;padding:16px;
  border:1.5px solid var(--teal-100);
  text-align:center;
  position:relative;
}
.cod-card.full{grid-column:1/-1;text-align:right;display:flex;align-items:center;gap:14px}
.cod-card .ic{
  width:48px;height:48px;border-radius:14px;
  background:var(--teal-50);color:var(--teal-600);
  display:grid;place-items:center;margin:0 auto;
}
.cod-card.full .ic{margin:0;flex:0 0 48px}
.cod-card h4{font-family:var(--font-display);font-weight:800;font-size:14px;margin:10px 0 2px}
.cod-card.full h4{margin:0 0 2px}
.cod-card p{font-size:12px;color:var(--ink-soft);line-height:1.4}

/* ===== FAQ ===== */
.faq{
  padding:48px var(--pad);
  background:var(--white);
}
.faq-list{margin-top:18px;display:grid;gap:8px}
.faq-item{
  background:#fff;border:1px solid var(--line-strong);border-radius:16px;
  overflow:hidden;
  transition:border-color .15s;
}
.faq-item.open{border-color:var(--teal-300)}
.faq-q{
  width:100%;background:none;border:none;cursor:pointer;
  padding:16px 16px;
  display:flex;align-items:center;gap:12px;
  text-align:right;font-family:var(--font-display);font-weight:700;font-size:14.5px;
  color:var(--ink);
}
.faq-q .ch{
  margin-right:auto;
  width:28px;height:28px;border-radius:50%;
  background:var(--teal-50);color:var(--teal-600);
  display:grid;place-items:center;
  transition:transform .1s ease, background .1s;
  flex:0 0 28px;
}
.faq-item.open .faq-q .ch{transform:rotate(180deg);background:var(--orange);color:#fff}
.faq-a{
  max-height:0;overflow:hidden;
  transition:max-height .12s ease;
  padding:0 16px;
  font-size:13.5px;color:var(--ink-soft);line-height:1.7;
}
.faq-item.open .faq-a{
  max-height:240px;
  padding:0 16px 16px;
}

/* ===== Order form ===== */
.order{
  padding:48px var(--pad);
  background:linear-gradient(180deg,#E6F8FB 0%, #C5EEF5 100%);
  position:relative;
}
.order::before{
  content:"";position:absolute;top:-1px;left:0;right:0;height:24px;
  background:
    radial-gradient(18px 12px at 9px 0, var(--cream) 50%, transparent 51%) repeat-x;
  background-size:36px 24px;
  background-position:0 0;
}
.order-card{
  background:#fff;border-radius:24px;padding:20px;
  box-shadow:var(--shadow-lg);
  border:1px solid var(--line);
  position:relative;
}
.order-card .head-row{
  display:flex;align-items:center;gap:12px;margin-bottom:14px;
  padding-bottom:14px;border-bottom:1px dashed var(--line-strong);
}
.order-card .head-row .mini{
  width:54px;height:54px;border-radius:14px;
  background:linear-gradient(180deg,#E6F8FB,#FFF8E7);
  border:1px solid var(--teal-100);
  display:grid;place-items:center;font-family:ui-monospace,monospace;font-size:9px;color:var(--teal-600);
  flex:0 0 54px;
}
.order-card h3{font-size:16px;margin:0 0 2px}
.order-card .head-row .p{font-size:13px;color:var(--muted)}
.order-card .head-row .px{
  margin-right:auto;text-align:left;
  font-family:var(--font-display);font-weight:900;font-size:20px;color:var(--orange-deep);line-height:1;
}
.order-card .head-row .px small{display:block;font-size:11px;color:var(--muted);font-weight:600;text-decoration:line-through;margin-top:3px}

.field{display:grid;gap:6px;margin-bottom:12px}
.field label{font-family:var(--font-display);font-weight:700;font-size:12.5px;color:var(--ink)}
.field label .req{color:var(--orange-deep)}
.field input,.field select{
  font-family:var(--font-body);font-size:15px;color:var(--ink);
  border:1.5px solid var(--line-strong);border-radius:14px;
  background:#fff;
  padding:13px 14px;
  outline:none;
  transition:border .15s, box-shadow .15s;
  width:100%;
  direction:rtl;
}
.field input::placeholder{color:#A5B6BF}
.field input:focus,.field select:focus{
  border-color:var(--teal-400);
  box-shadow:0 0 0 4px rgba(31,179,204,.15);
}
.field.err input,.field.err select{
  border-color:var(--orange-deep);
  box-shadow:0 0 0 4px rgba(232,91,27,.12);
}
.field .err-msg{font-size:11.5px;color:var(--orange-deep);font-weight:700;display:none}
.field.err .err-msg{display:block}

.qty{
  display:flex;align-items:center;justify-content:space-between;
  border:1.5px solid var(--line-strong);border-radius:14px;padding:6px 8px;
  background:#fff;
}
.qty button{
  width:36px;height:36px;border-radius:10px;border:none;cursor:pointer;
  background:var(--teal-50);color:var(--teal-700);
  font-size:18px;font-weight:800;
}
.qty button:active{background:var(--teal-100)}
.qty .v{font-family:var(--font-display);font-weight:900;font-size:18px;color:var(--ink)}

.bundle{
  display:grid;gap:8px;margin-bottom:14px;
}
.bundle .opt{
  display:flex;align-items:center;gap:12px;
  border:1.5px solid var(--line-strong);
  border-radius:14px;padding:12px;
  cursor:pointer;
  transition:border .15s, background .15s;
  background:#fff;
}
.bundle .opt.selected{
  border-color:var(--orange);background:#FFF6F1;
}
.bundle .opt .rd{
  width:20px;height:20px;border-radius:50%;
  border:2px solid var(--line-strong);
  display:grid;place-items:center;flex:0 0 20px;
}
.bundle .opt.selected .rd{border-color:var(--orange)}
.bundle .opt.selected .rd::after{
  content:"";width:10px;height:10px;border-radius:50%;background:var(--orange);
}
.bundle .opt .nm{font-family:var(--font-display);font-weight:800;font-size:13.5px}
.bundle .opt .desc{font-size:11.5px;color:var(--muted)}
.bundle .opt .px{
  margin-right:auto;text-align:left;
  font-family:var(--font-display);font-weight:900;font-size:15px;color:var(--ink);
}
.bundle .opt .px small{display:block;font-size:10px;color:var(--muted);font-weight:600;text-decoration:line-through}
.bundle .opt .tag{
  font-size:10px;background:var(--sun);color:#7A5300;font-weight:800;
  padding:3px 7px;border-radius:var(--r-pill);
}
.bundle .opt .tag.hot{background:var(--orange);color:#fff}

.total-row{
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(135deg,#FFF1E2,#FFE7B5);
  border-radius:14px;padding:12px 14px;margin:12px 0 14px;
  border:1px dashed #FFD9B6;
}
.total-row .lab{font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--ink-soft)}
.total-row .total{font-family:var(--font-display);font-weight:900;font-size:22px;color:var(--orange-deep);line-height:1}
.total-row .total small{font-size:13px;color:var(--orange);margin-right:4px}
.total-row .ship{display:block;font-size:11px;color:#0F8A4D;font-weight:700;margin-top:2px}

.success{
  text-align:center;padding:14px 4px;
}
.success .check{
  width:64px;height:64px;border-radius:50%;
  background:linear-gradient(135deg,#3FD27E,#0F8A4D);
  color:#fff;display:grid;place-items:center;margin:0 auto 12px;
  box-shadow:0 10px 24px rgba(15,138,77,.3);
  animation:pop .4s ease;
}
@keyframes pop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
.success h3{font-size:20px;color:var(--ink)}
.success p{color:var(--ink-soft);font-size:13.5px;margin-top:6px}
.success .order-id{
  display:inline-block;font-family:ui-monospace,monospace;
  background:var(--teal-50);color:var(--teal-700);
  padding:6px 12px;border-radius:var(--r-pill);font-weight:700;
  margin-top:10px;font-size:12px;
}

/* ===== Final CTA ===== */
.final{
  padding:54px var(--pad) 90px;
  background:
    radial-gradient(120% 60% at 50% 100%, #FFE7B5 0%, transparent 60%),
    linear-gradient(180deg, var(--teal-500) 0%, var(--teal-700) 100%);
  color:#fff;text-align:center;
  position:relative;overflow:hidden;
}
.final::before{
  content:"";position:absolute;top:-50px;right:-50px;
  width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle,#FFE07A,transparent 70%);opacity:.4;
}
.final h2{color:#fff;font-size:28px;text-wrap:balance}
.final p{color:rgba(255,255,255,.95);margin-top:10px;font-size:15px;text-wrap:pretty}
.final .btn{margin-top:18px}
.final .urgency{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.3);
  color:#fff;font-weight:700;font-size:12px;
  padding:8px 14px;border-radius:var(--r-pill);
  margin-bottom:14px;
  backdrop-filter:blur(8px);
}
.final .urgency .pulse{
  width:8px;height:8px;border-radius:50%;background:#FFC42C;
  box-shadow:0 0 0 0 rgba(255,196,44,.7);
  animation:pulse 1.6s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(255,196,44,.7)}
  70%{box-shadow:0 0 0 10px rgba(255,196,44,0)}
  100%{box-shadow:0 0 0 0 rgba(255,196,44,0)}
}

/* ===== Footer ===== */
.foot{
  background:var(--teal-900);color:rgba(255,255,255,.7);
  padding:24px var(--pad) 90px;text-align:center;font-size:12px;
}
.foot .row{display:flex;justify-content:center;gap:14px;margin-bottom:10px;flex-wrap:wrap}
.foot a{color:rgba(255,255,255,.85);text-decoration:none}
.foot .copy{font-size:11px;opacity:.7;margin-top:8px}

/* ===== Sticky CTA + Whatsapp ===== */
.sticky-cta{
  position:fixed;
  bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:var(--container);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px);
  border-top:1px solid var(--line-strong);
  display:flex;align-items:center;gap:10px;
  z-index:50;
  box-shadow:0 -8px 24px rgba(6,43,63,.08);
  transition:transform .3s ease;
}
.sticky-cta.hidden{transform:translateX(-50%) translateY(120%)}
.sticky-cta .px{
  display:flex;flex-direction:column;line-height:1.1;
  font-family:var(--font-display);
}
.sticky-cta .px .now{font-weight:900;font-size:18px;color:var(--orange-deep)}
.sticky-cta .px .old{font-size:11px;color:var(--muted);text-decoration:line-through;font-weight:700}
.sticky-cta .btn{flex:1;padding:13px 14px;font-size:14.5px}


/* ===== Before / After comparisons ===== */
.compare-section{
  padding:48px var(--pad);
  background:linear-gradient(180deg,#F6FBFD 0%, var(--cream) 100%);
}
.compare-stack{
  margin-top:22px;display:grid;gap:18px;
}
.compare{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  border-radius:22px;
  overflow:hidden;
  background:#0a3a55;
  box-shadow:var(--shadow-md);
  user-select:none;
  touch-action:none;
  border:1px solid var(--line);
}
.compare .layer{
  position:absolute;inset:0;
  display:grid;place-items:center;
  overflow:hidden;
}
.compare .layer .ph-cap{
  position:absolute;bottom:12px;
  font-family:ui-monospace,monospace;font-size:10px;
  background:rgba(255,255,255,.85);color:var(--ink);
  padding:3px 8px;border-radius:var(--r-pill);
}
.compare .layer.before .ph-cap{left:12px}
.compare .layer.after  .ph-cap{right:12px}
.compare .layer.after{
  /* clipped by handle position; on top so it occludes Before from the left */
  z-index:2;
}
.compare .badge{
  position:absolute;top:12px;z-index:3;
  font-family:var(--font-display);font-weight:800;font-size:11px;
  padding:6px 12px;border-radius:var(--r-pill);
  letter-spacing:.04em;
  backdrop-filter:blur(8px);
  box-shadow:0 4px 12px rgba(6,43,63,.18);
}
.compare .badge.avant{
  right:12px;background:rgba(255,255,255,.92);color:var(--ink);
  border:1px solid rgba(255,255,255,.6);
}
.compare .badge.apres{
  left:12px;background:rgba(31,179,204,.94);color:#fff;
  border:1px solid rgba(255,255,255,.3);
}
.compare .divider{
  position:absolute;top:0;bottom:0;
  width:3px;background:#fff;
  box-shadow:0 0 0 1px rgba(6,43,63,.18), 0 4px 12px rgba(6,43,63,.25);
  z-index:4;
  pointer-events:none;
  transform:translateX(-50%);
}
.compare .handle{
  position:absolute;top:50%;
  width:46px;height:46px;border-radius:50%;
  background:#fff;
  box-shadow:0 6px 16px rgba(6,43,63,.25), 0 0 0 4px rgba(255,255,255,.4);
  z-index:5;
  display:grid;place-items:center;
  cursor:ew-resize;
  transform:translate(-50%,-50%);
  transition:transform .12s ease;
  border:1.5px solid var(--line);
}
.compare .handle:active{transform:translate(-50%,-50%) scale(.95)}
.compare .handle::before{
  content:"";position:absolute;inset:-12px;border-radius:50%;
}
.compare .handle svg{color:var(--teal-600)}
.compare .hint{
  position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
  z-index:3;
  font-family:var(--font-body);font-weight:600;font-size:11px;
  background:rgba(6,43,63,.65);color:#fff;
  padding:5px 10px;border-radius:var(--r-pill);
  backdrop-filter:blur(6px);
  pointer-events:none;
  opacity:1;
  transition:opacity .4s ease;
}
.compare.touched .hint{opacity:0}

.compare-cap{
  margin-top:10px;text-align:center;
  font-family:var(--font-display);font-weight:700;font-size:13.5px;color:var(--ink-soft);
}

/* swim-themed placeholder art */
.swim-art{
  width:100%;height:100%;
  display:grid;place-items:center;
  background:linear-gradient(180deg,#9DDEEC 0%, #4FC8DC 50%, #01749A 100%);
  position:relative;
}
.swim-art.after{
  background:linear-gradient(180deg,#FFE07A 0%, #7FE0EF 35%, #1FB3CC 75%, #01749A 100%);
}
.compare-photo{
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  display:block;
}
.compare-single{
  width:100%;border-radius:var(--r-card);overflow:hidden;
  border:1px solid var(--line);
}
.compare-single-img{
  width:100%;display:block;
  object-fit:cover;object-position:center top;
}

/* ===== Decorative bubbles & shapes ===== */
.bubbles{
  position:absolute;inset:0;pointer-events:none;overflow:hidden;
}
.bubble{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(255,255,255,.25) 60%, rgba(255,255,255,0) 70%);
  opacity:.7;
  animation:bubbleUp linear infinite;
}
@keyframes bubbleUp{
  0%{transform:translateY(20px);opacity:0}
  20%{opacity:.7}
  100%{transform:translateY(-260px);opacity:0}
}

/* === SVG / icon defaults === */
svg{display:block}

/* ===== Section divider waves ===== */
.wave-divider{
  height:24px;
  background:
    radial-gradient(18px 12px at 9px 24px, currentColor 50%, transparent 51%) repeat-x;
  background-size:36px 24px;
  color:var(--cream);
  margin-top:-1px;
}

/* ===== Inline number row (e.g. stats) ===== */
.stat-row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px;
}
.stat{
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:10px;text-align:center;
}
.stat .n{font-family:var(--font-display);font-weight:900;font-size:20px;color:var(--teal-700);line-height:1}
.stat .l{font-size:11px;color:var(--muted);margin-top:4px;font-weight:600}

/* ===== Wilaya disclosure ===== */
.field select{
  appearance:none;
  background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23062B3F' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat left 14px center;
  padding-left:36px;
}

/* ===== Section header alignment fix for RTL ===== */
.center{text-align:center}
.center .eyebrow{margin:0 auto}
.lede{color:var(--ink-soft);font-size:14.5px;margin-top:10px}

/* ===== THEME VARIANTS ===== */
.theme-ocean{
  --teal-300:#5B9BFF;
  --teal-400:#2E7BFF;
  --teal-500:#1659D8;
  --teal-600:#0F46B0;
  --teal-700:#0A3380;
  --teal-900:#04204F;
  --sand-100:#F0F4FF;
  --cream:#F7F9FF;
}
.theme-playful{
  --teal-300:#7FE0EF;
  --teal-400:#36CFE5;
  --teal-500:#11B5CC;
  --teal-600:#0096B7;
  --teal-700:#01749A;
  --orange:#FF6F61;
  --orange-deep:#E84A3D;
  --sun:#FFD93D;
}

/* ===== Hero Order Button ===== */
.hero-order-btn{
  width:100%;
  padding:15px 20px;
  font-size:16px;
  font-weight:900;
  border-radius:var(--r-pill);
  margin-bottom:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

/* ===== Order Modal Overlay + Sheet ===== */
.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(6,43,63,.72);
  z-index:900;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  animation:omFadeIn .2s ease;
}
@keyframes omFadeIn{from{opacity:0}to{opacity:1}}
.modal-sheet{
  background:#fff;
  width:100%;
  max-width:540px;
  max-height:93vh;
  border-radius:22px 22px 0 0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  animation:omSlideUp .3s cubic-bezier(.17,.67,.35,1.1);
}
@keyframes omSlideUp{
  from{transform:translateY(100%);opacity:.4}
  to{transform:translateY(0);opacity:1}
}

/* ===== Modal Top Bar (inside gradient header) ===== */
.modal-top-bar{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px 6px;
  position:relative;
}
.modal-handle{
  width:40px;height:4px;
  background:rgba(255,255,255,.4);
  border-radius:99px;
}
.modal-close-btn{
  position:absolute;
  left:16px;top:8px;
  width:32px;height:32px;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.15);
  color:#fff;
  font-size:15px;font-weight:700;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  line-height:1;
  transition:background .15s;
}
.modal-close-btn:hover{background:rgba(255,255,255,.3)}

/* ===== Order Modal – Header ===== */
.om-header{
  background:linear-gradient(135deg,#0096c7 0%,#023e8a 100%);
  padding:0 24px 22px;
  color:#fff;
  position:sticky;top:0;z-index:10;
}
.om-hdr-top{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.om-logo{font-size:18px;font-weight:900;letter-spacing:-.5px}
.om-cod{
  background:rgba(255,255,255,.18);
  border-radius:50px;padding:4px 12px;
  font-size:12px;font-weight:700;
}
.om-h2{font-size:21px;font-weight:900;margin-bottom:4px;line-height:1.2}
.om-sub{font-size:13px;opacity:.85;font-weight:500;line-height:1.5;margin:0}

/* ===== OM Sections ===== */
.om-sec{padding:20px 20px 0}
.om-sec:last-of-type{padding-bottom:24px}
.om-sec-title{
  font-size:12.5px;font-weight:800;
  color:#0077b6;margin-bottom:12px;
  text-transform:uppercase;letter-spacing:.3px;
}

/* ===== Belt Grid ===== */
.om-belt-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.om-belt-card{
  position:relative;
  border:1.5px solid #c8dff0;border-radius:14px;
  padding:16px 12px 12px;text-align:center;
  transition:border-color .2s,background .2s,box-shadow .2s;
  background:#fff;
}
.om-belt-card.active{
  border-color:#0077b6;background:#f0f8ff;
  box-shadow:0 0 0 3px rgba(0,119,182,.1);
}
.om-popular{
  position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  background:linear-gradient(90deg,#ff6b35,#f3722c);
  color:#fff;font-size:10px;font-weight:900;
  padding:3px 10px;border-radius:50px;white-space:nowrap;
}
.om-size-ltr{font-size:28px;font-weight:900;color:#023e8a;line-height:1;margin-bottom:4px}
.om-size-desc{
  font-size:11px;color:#5a7a8e;font-weight:600;
  line-height:1.5;margin-bottom:7px;min-height:33px;
  white-space:pre-line;
}
.om-size-px{font-size:14px;font-weight:900;color:#0077b6;margin-bottom:10px}
.om-qty-row{display:flex;align-items:center;justify-content:center;gap:10px}
.om-qty-btn{
  width:30px;height:30px;border-radius:50%;
  border:1.5px solid #0077b6;background:#fff;color:#0077b6;
  font-size:18px;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  line-height:1;padding:0;
  transition:background .15s,color .15s;
}
.om-qty-btn:hover{background:#0077b6;color:#fff}
.om-qty-num{font-size:19px;font-weight:900;color:#023e8a;min-width:22px;text-align:center}
.om-belt-err{font-size:12.5px;font-weight:700;color:#e24b4a;margin-top:8px;text-align:center}

/* ===== Progress Bar ===== */
.om-progress-sec{padding:16px 20px 0}
.om-progress-msg{font-size:13px;font-weight:700;color:#333;margin-bottom:8px;text-align:center;min-height:20px;line-height:1.5}
.om-progress-track{background:#e0eff9;border-radius:50px;height:10px;overflow:hidden}
.om-progress-fill{
  height:100%;border-radius:50px;
  background:linear-gradient(90deg,#48cae4,#0077b6);
  transition:width .55s cubic-bezier(.4,0,.2,1),background .55s;
}
.om-progress-fill.gold{background:linear-gradient(90deg,#f9c74f,#f3722c)}

/* ===== Upsell ===== */
.om-upsell{
  margin:12px 20px 0;
  background:#e8f4fd;border:1.5px solid #90caf9;
  border-radius:12px;padding:12px 16px;
  font-size:13px;font-weight:600;color:#023e8a;line-height:1.7;
  animation:omFadeIn .3s ease;
}

/* ===== Order Summary Box ===== */
.om-summary{border:1.5px dashed #90caf9;border-radius:14px;padding:12px 16px;background:#f8fbff}
.om-sum-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:6px 0;font-size:14px;font-weight:600;color:#444;
  border-bottom:1px solid #e4eff8;
}
.om-sum-row:last-child{border-bottom:none}
.om-discount,.om-discount span{color:#2e7d32;font-weight:800}
.om-total{font-size:15px;font-weight:900;color:#0077b6;padding-top:9px;border-top:2px solid #c8dff0 !important;border-bottom:none !important}
.om-total-val{font-size:21px;font-weight:900;color:#0077b6}

/* ===== Divider ===== */
.om-divider{height:1px;background:#e8f0f8;margin:18px 0 0}

/* ===== Submit Button ===== */
.om-submit{
  width:100%;border-radius:50px;padding:16px 24px;
  background:linear-gradient(135deg,#0096c7 0%,#023e8a 100%);
  color:#fff;font-family:'Cairo',sans-serif;
  font-size:16px;font-weight:900;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:transform .2s,box-shadow .2s,opacity .2s;margin-bottom:10px;
}
.om-submit:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,119,182,.35)}
.om-submit:disabled{opacity:.8;cursor:not-allowed}
.om-spinner{
  width:18px;height:18px;display:inline-block;flex-shrink:0;
  border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;
  border-radius:50%;animation:omSpin .65s linear infinite;
}
@keyframes omSpin{to{transform:rotate(360deg)}}
.om-privacy{text-align:center;font-size:12px;font-weight:600;color:#8fa8b8}

/* ===== Success State ===== */
.om-success{padding:36px 24px 32px;text-align:center}
.om-check-circle{
  width:72px;height:72px;margin:0 auto 20px;
  background:linear-gradient(135deg,#2e7d32,#43a047);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:36px;color:#fff;
  animation:omPopIn .45s cubic-bezier(.17,.67,.35,1.3) both;
}
@keyframes omPopIn{0%{transform:scale(0);opacity:0}70%{transform:scale(1.1);opacity:1}100%{transform:scale(1)}}
.om-success-title{font-size:20px;font-weight:900;color:#1a1a1a;margin-bottom:10px}
.om-success-sub{font-size:14px;color:#555;font-weight:600;line-height:1.8;margin-bottom:16px}
.om-reset{
  display:block;width:100%;margin-top:10px;
  padding:12px 24px;border-radius:50px;
  border:1.5px solid #0077b6;background:#fff;color:#0077b6;
  font-family:'Cairo',sans-serif;font-size:14px;font-weight:800;
  cursor:pointer;transition:background .2s,color .2s;
}
.om-reset:hover{background:#0077b6;color:#fff}
.om-reset-close{background:#0077b6;color:#fff}
.om-reset-close:hover{background:#023e8a;border-color:#023e8a}

/* ===== Shake Animation ===== */
@keyframes omShake{
  0%{transform:translateX(0)}15%{transform:translateX(-8px)}
  30%{transform:translateX(8px)}45%{transform:translateX(-6px)}
  60%{transform:translateX(6px)}75%{transform:translateX(-3px)}
  90%{transform:translateX(3px)}100%{transform:translateX(0)}
}
.om-shake{animation:omShake .4s ease}