/* ═══════════════════════════════════════════════════════════════
   OSOUL · أصول — Landing Page
   Palette extracted from the official logo:
   olive green #45584A · gold #DDA933 · warm cream #FAF6EE
   RTL · mobile-first-friendly · Cairo + El Messiri + Cormorant
   ═══════════════════════════════════════════════════════════════ */

:root{
  --paper:#FAF6EE;
  --paper-2:#F2EADB;
  --card:#FFFDF6;
  --olive:#45584A;
  --olive-deep:#333F2F;
  --olive-dark:#28321F;
  --ink:#2C3529;
  --muted:#6E7463;
  --gold:#DDA933;
  --gold-2:#EBCB7A;
  --gold-soft:#F6E7BF;
  --amber:#A9772F;
  --line:#E6DCC5;
  --line-2:#D8CBAC;
  --wa:#25D366;

  --font-display:"El Messiri","Cairo","Segoe UI",Tahoma,sans-serif;
  --font-body:"Cairo","Segoe UI",Tahoma,system-ui,sans-serif;
  --font-serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;

  --shadow-sm:0 2px 10px rgba(51,63,47,.06);
  --shadow-md:0 12px 34px -12px rgba(51,63,47,.18);
  --shadow-lg:0 26px 60px -18px rgba(51,63,47,.28);
  --radius:20px;
  --header-h:72px;
}

/* ── Reset & base ─────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  overflow-x:clip;
}
body{
  font-family:var(--font-body);
  font-weight:400;
  font-size:16.5px;
  line-height:1.9;
  color:var(--ink);
  background-color:var(--paper);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='0.032'/></svg>");
  overflow-x:clip;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;background:none;border:0;cursor:pointer;color:inherit}
strong{font-weight:700}
::selection{background:var(--gold-2);color:var(--olive-dark)}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:6px}

.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}

.container{width:min(1180px,92%);margin-inline:auto}
section[id]{scroll-margin-top:calc(var(--header-h) + 14px)}

.skip-link{
  position:fixed;inset-block-start:-100px;inset-inline-start:16px;z-index:200;
  background:var(--olive-dark);color:#fff;padding:10px 18px;border-radius:10px;
  transition:inset-block-start .25s;
}
.skip-link:focus{inset-block-start:12px}

/* ── Typography helpers ───────────────────────────────────── */
.section{padding-block:clamp(64px,8.5vw,112px)}
.section-sand{background:var(--paper-2);border-block:1px solid var(--line)}
.section-head{margin-block-end:clamp(34px,4.5vw,56px)}
.section-head.center{text-align:center}
.section-head.narrow,.narrow{max-width:760px;margin-inline:auto}
.section-title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.65rem,3.6vw,2.6rem);
  line-height:1.45;
  color:var(--olive-dark);
  letter-spacing:.2px;
}
.section-title em{
  font-style:normal;color:var(--amber);
  background:linear-gradient(transparent 78%,var(--gold-2) 78%,var(--gold-2) 88%,transparent 88%);
}
.section-title.on-dark{color:#F4EEDD}
.section-title.on-dark em{color:var(--gold-2)}
.section-lead{margin-block-start:16px;color:var(--muted);font-size:1.02rem;max-width:640px}
.center .section-lead{margin-inline:auto}

.kicker{
  display:inline-flex;align-items:center;gap:9px;
  color:var(--amber);font-weight:600;font-size:.92rem;letter-spacing:.4px;
  margin-block-end:14px;
}
.kicker::before{content:"";width:34px;height:1.5px;background:linear-gradient(to left,transparent,var(--gold))}
.kicker-ic{width:15px;height:15px;color:var(--gold);flex:none}
.kicker-light{color:var(--gold-2)}
.gold-word{color:var(--amber);font-weight:600}
.fineprint{font-size:.82rem;color:var(--muted);line-height:1.8;opacity:.85}
.fineprint.center{text-align:center;margin-block-start:34px}

/* ── Buttons ──────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-body);font-weight:700;font-size:1.02rem;
  padding:14px 30px;border-radius:999px;border:1.5px solid transparent;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
  will-change:transform;cursor:pointer;text-align:center;
}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-lg{padding:17px 36px;font-size:1.08rem}
.btn-sm{padding:10px 22px;font-size:.95rem}
.btn-block{display:flex;width:100%}

.btn-primary{
  background:linear-gradient(140deg,#EDC968 0%,var(--gold) 46%,#C8952C 100%);
  color:#3A2E10;
  box-shadow:0 14px 30px -12px rgba(221,169,51,.55), inset 0 1px 0 rgba(255,255,255,.45);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 20px 38px -14px rgba(221,169,51,.65), inset 0 1px 0 rgba(255,255,255,.45)}

.btn-gold{background:var(--gold-soft);border-color:var(--gold);color:#5d4715}
.btn-gold:hover{background:#F8EDCF;transform:translateY(-2px)}

.btn-ghost{background:var(--card);border-color:var(--line-2);color:var(--olive)}
.btn-ghost:hover{border-color:var(--gold);color:var(--amber);transform:translateY(-2px)}

.btn-outline-dark{background:transparent;border-color:var(--olive);color:var(--olive)}
.btn-outline-dark:hover{background:var(--olive);color:#F4EEDD;transform:translateY(-2px)}

.icon-wa{width:21px;height:21px;flex:none}
.btn-arrow{width:19px;height:19px;flex:none;transition:transform .25s ease}
[dir="rtl"] .btn-arrow{transform:scaleX(-1)}
.btn:hover .btn-arrow{transform:scaleX(-1) translateX(-4px)}

.pulse{position:relative}
.pulse::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  animation:pulseRing 2.6s ease-out infinite;
}
@keyframes pulseRing{
  0%{box-shadow:0 0 0 0 rgba(221,169,51,.42)}
  70%{box-shadow:0 0 0 16px rgba(221,169,51,0)}
  100%{box-shadow:0 0 0 0 rgba(221,169,51,0)}
}

/* ═══════════ TOP BAR ═══════════ */
.topbar{
  background:var(--olive-dark);
  color:#E7DFC6;
  font-size:.82rem;
  padding:8px 16px;
  text-align:center;
  position:relative;z-index:60;
}
.topbar p{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap}
.topbar-item{white-space:nowrap;font-weight:500}
.topbar-sep{color:var(--gold);font-size:.65rem}

/* ═══════════ HEADER ═══════════ */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(250,246,238,.88);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .3s ease;
}
.site-header.scrolled{box-shadow:var(--shadow-md)}
.header-inner{
  min-height:var(--header-h);
  display:flex;align-items:center;gap:18px;
}
.brand{display:inline-flex;align-items:center;gap:12px;margin-inline-end:auto}
.brand-mark{
  width:48px;height:48px;border-radius:50%;
  background:#F8F7F4;border:1px solid var(--line);
  padding:4px;object-fit:cover;
  transition:transform .4s ease;
}
.brand:hover .brand-mark{transform:rotate(-8deg)}
.brand-text{display:flex;flex-direction:column;line-height:1.25}
.brand-name{font-family:var(--font-display);font-weight:700;font-size:1.28rem;color:var(--olive-dark)}
.brand-name .ltr{font-family:var(--font-body);font-size:.98rem;font-weight:600;color:var(--olive);letter-spacing:2.5px;margin-inline-start:6px}
.brand-tag{font-size:.6rem;letter-spacing:2.2px;color:var(--muted);text-transform:uppercase;font-weight:600}

.site-nav{display:flex;align-items:center;gap:4px}
.site-nav > a:not(.nav-cta){
  padding:9px 13px;border-radius:999px;font-weight:500;font-size:.96rem;color:var(--ink);
  position:relative;transition:color .25s ease, background .25s ease;
}
.site-nav > a:not(.nav-cta):hover{color:var(--olive);background:rgba(69,88,74,.07)}
.nav-cta{
  display:inline-flex !important;align-items:center;gap:8px;
  background:var(--olive);color:#F4EEDD !important;font-weight:600;
  padding:10px 20px !important;margin-inline-start:8px;
}
.nav-cta:hover{background:var(--olive-dark);color:#fff !important}
.nav-cta svg{width:17px;height:17px}

.header-cta{white-space:nowrap}
.nav-toggle{display:none}

/* ═══════════ HERO ═══════════ */
.hero{position:relative;padding-block:clamp(46px,6vw,86px) clamp(20px,3vw,34px);overflow:clip}
.hero-bg{position:absolute;inset:0;pointer-events:none;z-index:0}
.hero-ring{
  position:absolute;inset-block-start:-140px;inset-inline-end:-160px;
  width:min(640px,60vw);aspect-ratio:1;border-radius:50%;
  border:1.5px solid rgba(221,169,51,.5);
  box-shadow:0 0 0 34px rgba(221,169,51,.05);
}
.hero-ring::after{
  content:"";position:absolute;inset:-26px;border-radius:50%;
  border:1px dashed rgba(69,88,74,.28);
  animation:slowSpin 90s linear infinite;
}
@keyframes slowSpin{to{transform:rotate(360deg)}}
.hero-glow{
  position:absolute;inset-block-end:-220px;inset-inline-start:-140px;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(221,169,51,.16),transparent 70%);
}

.hero-grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(28px,4.5vw,60px);
  align-items:center;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  color:var(--amber);font-size:.9rem;font-weight:600;letter-spacing:.4px;
  background:rgba(221,169,51,.1);border:1px solid rgba(221,169,51,.3);
  padding:7px 16px;border-radius:999px;margin-block-end:22px;
}
.eyebrow-sprig{width:34px;height:15px;flex:none}
@media (max-width:520px){ .eyebrow-sprig{display:none} .eyebrow{line-height:1.7} }

.hero-title{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.9rem,4.6vw,3.3rem);
  line-height:1.5;color:var(--olive-dark);
}
.hero-title em{font-style:normal;color:var(--amber)}
.hero-title .hl{
  position:relative;white-space:nowrap;
}
.hero-title .hl::after{
  content:"";position:absolute;inset-inline:-2px;inset-block-end:2px;height:.36em;z-index:-1;
  background:linear-gradient(90deg,rgba(235,203,122,.65),rgba(235,203,122,.28));
  border-radius:4px;
}
.hero-sub{margin-block-start:20px;color:var(--muted);font-size:1.06rem;max-width:56ch}

.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-block-start:30px}
.hero-chips{display:flex;flex-wrap:wrap;gap:10px;margin-block-start:26px}
.hero-chips li{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--card);border:1px solid var(--line);
  border-radius:999px;padding:8px 16px;font-size:.87rem;font-weight:600;color:var(--olive);
  box-shadow:var(--shadow-sm);
}
.chip-ic{width:17px;height:17px;color:var(--gold);flex:none}

/* hero media */
.hero-media{position:relative}
.hero-figure{position:relative;margin-inline:auto;max-width:440px}
.hero-figure img{
  width:100%;aspect-ratio:4/4.7;object-fit:cover;
  border-radius:250px 250px 26px 26px;
  border:7px solid var(--card);
  box-shadow:var(--shadow-lg);
  position:relative;z-index:2;
}
.hero-frame{
  position:absolute;inset:-18px -14px -14px;
  border:1.5px solid var(--gold);
  border-radius:265px 265px 32px 32px;
  transform:rotate(-2.5deg);z-index:1;opacity:.75;
}
.float-card{
  position:absolute;z-index:3;
  background:rgba(255,253,246,.92);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid var(--line-2);
  border-radius:16px;box-shadow:var(--shadow-md);
  padding:12px 18px;text-align:center;
  display:flex;flex-direction:column;line-height:1.5;
}
.float-price{inset-block-end:26px;inset-inline-start:-14px;animation:floaty 5s ease-in-out infinite}
.float-label{font-size:.72rem;color:var(--muted);font-weight:600;letter-spacing:.5px}
.float-price .fp-num{font-family:var(--font-display);font-size:1.5rem;color:var(--olive-dark);font-weight:700}
.float-note{font-size:.74rem;color:var(--amber);font-weight:600}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

.seal-badge{
  position:absolute;z-index:3;inset-block-start:-6px;inset-inline-end:-8px;
  width:86px;height:86px;border-radius:50%;
  background:radial-gradient(circle at 32% 28%,#fff8e4,var(--gold-soft));
  border:2px solid var(--gold);
  box-shadow:var(--shadow-md), inset 0 0 0 5px rgba(255,255,255,.6);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  transform:rotate(8deg);text-align:center;
}
.seal-badge svg{width:24px;height:24px;color:var(--amber)}
.seal-badge span{font-size:.6rem;font-weight:800;color:var(--olive-dark);line-height:1.25;letter-spacing:.3px}

.hero-stats{
  margin-block-start:clamp(36px,5vw,58px);
  display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line);border-radius:22px;background:var(--card);
  box-shadow:var(--shadow-sm);overflow:hidden;
}
.stat{
  padding:20px 12px;text-align:center;
  border-inline-start:1px solid var(--line);
}
.stat:first-child{border-inline-start:0}
.stat strong{
  display:block;font-family:var(--font-display);font-size:1.7rem;color:var(--amber);line-height:1.3;
}
.stat span{font-size:.84rem;color:var(--muted);font-weight:500}

/* ═══════════ TRUST MARQUEE ═══════════ */
.marquee{
  background:var(--olive-dark);
  border-block:1px solid rgba(221,169,51,.35);
  overflow:hidden;padding-block:13px;
}
.marquee-track{
  display:flex;gap:0;width:max-content;
  animation:marquee 30s linear infinite;
}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{
  color:#EDE4C9;font-size:.9rem;font-weight:500;white-space:nowrap;
  padding-inline:22px;display:inline-flex;align-items:center;gap:22px;
}
.marquee-track span::after{content:"✦";color:var(--gold);font-size:.72rem}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ═══════════ PROBLEM / SOLUTION ═══════════ */
.problem-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:18px;
}
.problem-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 22px;box-shadow:var(--shadow-sm);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.problem-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--gold-2)}
.problem-ic{
  width:62px;height:62px;border-radius:50%;
  background:linear-gradient(150deg,var(--gold-soft),rgba(221,169,51,.16));
  border:1px solid rgba(221,169,51,.4);
  display:grid;place-items:center;color:var(--olive);margin-block-end:16px;
}
.problem-ic svg{width:36px;height:36px}
.problem-card h3{font-family:var(--font-display);font-size:1.13rem;color:var(--olive-dark);margin-block-end:8px;line-height:1.6}
.problem-card p{font-size:.93rem;color:var(--muted);line-height:1.85}

.solution-panel{
  margin-block-start:clamp(40px,5vw,60px);
  display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(26px,4vw,54px);
  background:linear-gradient(150deg,#3C4A37 0%,var(--olive-dark) 78%);
  border-radius:28px;border:1px solid rgba(221,169,51,.35);
  padding:clamp(26px,4vw,48px);
  align-items:center;
  box-shadow:var(--shadow-lg);
  position:relative;overflow:clip;
}
.solution-panel::before{
  content:"";position:absolute;inset-block-start:-70px;inset-inline-start:-70px;width:230px;height:230px;border-radius:50%;
  border:1px dashed rgba(235,203,122,.4);
}
.solution-media{position:relative}
.frame-figure{position:relative;margin:0}
.frame-figure img{
  border-radius:22px;position:relative;z-index:2;
  width:100%;aspect-ratio:4/4.5;object-fit:cover;
}
.frame-outline{
  position:absolute;inset:-14px -14px 10px 10px;z-index:1;
  border:1.5px solid rgba(221,169,51,.65);border-radius:30px;transform:rotate(1.6deg);
}
.solution-copy{color:#E9E3CF}
.solution-copy .kicker{color:var(--gold-2)}
.solution-title{font-family:var(--font-display);font-size:clamp(1.45rem,2.6vw,2rem);line-height:1.5;margin-block-end:14px}
.solution-title em{font-style:normal;color:var(--gold-2)}
.solution-copy > p{font-size:1rem;line-height:1.95;color:#D9D2BC}
.solution-copy strong{color:#fff}
.check-list{margin-block:20px 18px;display:grid;gap:13px}
.check-list li{display:flex;gap:12px;align-items:flex-start;font-size:.98rem;line-height:1.8}
.check-list .tick{width:23px;height:23px;flex:none;color:var(--gold-2);margin-block-start:3px}
.solution-copy .fineprint{color:#B9B39D}

/* ═══════════ INGREDIENTS ═══════════ */
.ing-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;
}
.ing-card{
  background:var(--card);border:1px solid var(--line);border-radius:24px;
  padding:34px 26px 28px;text-align:center;position:relative;overflow:clip;
  box-shadow:var(--shadow-sm);
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.ing-card:hover{transform:translateY(-7px);box-shadow:var(--shadow-md);border-color:var(--gold-2)}
.ing-card::before{
  content:"";position:absolute;inset-block-start:0;inset-inline:0;height:4px;
  background:linear-gradient(90deg,transparent,var(--gold) 30%,var(--gold) 70%,transparent);
  opacity:.55;
}
.ing-art{
  width:108px;height:108px;margin:0 auto 18px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#FFF7DF,var(--gold-soft));
  border:1px dashed var(--line-2);
  display:grid;place-items:center;color:var(--olive);
  transition:transform .5s ease;
}
.ing-card:hover .ing-art{transform:rotate(-6deg) scale(1.05)}
.ing-art svg{width:72px;height:72px}
.ing-card h3{font-family:var(--font-display);font-size:1.28rem;color:var(--olive-dark);margin-block-end:8px;line-height:1.6}
.ing-fr{
  display:inline-block;font-family:var(--font-serif);font-style:italic;font-weight:600;
  font-size:.92rem;color:var(--amber);margin-inline-start:4px;
}
.ing-card p{font-size:.95rem;color:var(--muted);line-height:1.95}
.ing-tag{
  display:inline-block;margin-block-start:16px;font-size:.8rem;font-weight:700;color:var(--olive);
  background:rgba(69,88,74,.09);border:1px solid rgba(69,88,74,.22);
  padding:5px 16px;border-radius:999px;letter-spacing:.4px;
}
.ing-note{text-align:center;margin-block-start:30px;color:var(--muted);font-size:.94rem}
.ing-note strong{color:var(--olive)}

/* ═══════════ ROUTINE ═══════════ */
.routine-grid{
  display:grid;grid-template-columns:.86fr 1.14fr;gap:clamp(30px,5vw,64px);
  align-items:start;
}
.routine-media{position:sticky;top:calc(var(--header-h) + 26px)}
.routine-media .frame-figure img{border-radius:24px;border:6px solid var(--card);box-shadow:var(--shadow-md)}
.routine-media .frame-outline{transform:rotate(-1.6deg);border-radius:32px;inset:-13px 12px 26px -13px}
.routine-tip{
  margin-block-start:22px;
  background:var(--card);border:1px solid rgba(221,169,51,.45);border-inline-start:4px solid var(--gold);
  border-radius:16px;padding:16px 18px;display:flex;gap:13px;align-items:flex-start;
  box-shadow:var(--shadow-sm);
}
.tip-ic{
  flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:var(--gold-soft);color:var(--amber);
}
.tip-ic svg{width:22px;height:22px}
.routine-tip p{font-size:.9rem;color:var(--muted);line-height:1.8}
.routine-tip strong{color:var(--olive-dark)}

.steps{margin-block-start:8px;display:grid;gap:6px}
.step{
  display:flex;gap:20px;align-items:flex-start;
  padding:18px 16px;border-radius:18px;position:relative;
  transition:background .3s ease;
}
.step:hover{background:rgba(221,169,51,.07)}
.step:not(:last-child)::before{
  content:"";position:absolute;inset-block-start:66px;inset-inline-start:35px;
  width:0;border-inline-start:2px dashed var(--line-2);inset-block-end:-8px;
}
.step-num{
  flex:none;width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--font-serif);font-size:1.35rem;font-weight:600;
  color:var(--amber);background:var(--card);
  border:1.5px solid var(--gold);
  box-shadow:0 6px 16px -8px rgba(221,169,51,.5);
}
.step h3{font-family:var(--font-display);font-size:1.16rem;color:var(--olive-dark);margin-block-end:4px}
.step p{font-size:.95rem;color:var(--muted);line-height:1.85}
.routine-freq{
  margin-block-start:26px;display:inline-block;
  background:var(--gold-soft);border:1px solid rgba(221,169,51,.4);
  border-radius:14px;padding:13px 20px;font-size:.96rem;color:#5d4715;font-weight:600;
}

/* ═══════════ STORY BAND ═══════════ */
.story{
  background:
    radial-gradient(520px 300px at 12% 0%,rgba(221,169,51,.14),transparent 65%),
    radial-gradient(480px 320px at 100% 100%,rgba(235,203,122,.08),transparent 60%),
    var(--olive-dark);
  padding-block:clamp(56px,7vw,96px);
  color:#E9E3CF;
}
.story-grid{
  display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(30px,5vw,64px);align-items:center;
}
.story-copy .kicker-light::before{background:linear-gradient(to left,transparent,var(--gold-2))}
.story-copy h2{
  font-family:var(--font-display);font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.5;margin-block-end:16px;
}
.story-copy p{color:#CFC9B2;line-height:2}
.story-points{margin-block:20px 26px;display:grid;gap:10px}
.story-points li{display:flex;gap:10px;align-items:flex-start;color:#E4DDC6;font-size:.98rem}
.story-points li::marker{content:none}
.story-points strong{color:var(--gold-2)}
.story-figure{margin:0;position:relative}
.story-figure img{
  width:100%;border-radius:22px;border:1px solid rgba(235,203,122,.4);
  box-shadow:var(--shadow-lg);
}

/* ═══════════ OFFERS ═══════════ */
.offers{position:relative;overflow:clip}
.offers::before{
  content:"✦";position:absolute;font-size:11rem;color:rgba(221,169,51,.07);
  inset-block-start:-30px;inset-inline-start:-30px;line-height:1;
}
.offers-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch;
  margin-block-end:clamp(30px,4vw,44px);
}
.offer-card{
  background:var(--card);border:1px solid var(--line-2);border-radius:26px;
  padding:clamp(26px,3vw,36px) clamp(22px,2.4vw,30px);
  display:flex;flex-direction:column;position:relative;
  box-shadow:var(--shadow-sm);
  transition:transform .35s ease, box-shadow .35s ease;
}
.offer-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.offer-head h3{font-family:var(--font-display);font-size:1.3rem;color:var(--olive-dark)}
.offer-head p{font-size:.86rem;color:var(--muted);margin-block-start:2px}
.offer-price{margin-block:18px 20px;padding-block:14px;border-block:1px dashed var(--line-2)}
.offer-price del{display:block;font-size:.86rem;color:#A9A290;margin-block-end:2px}
.price-main{font-family:var(--font-serif);font-size:3.1rem;font-weight:600;color:var(--olive-dark);line-height:1.05}
.price-cur{font-family:var(--font-display);font-size:1.15rem;font-weight:700;color:var(--amber);margin-inline-start:6px}
.save-pill{
  display:block;margin-block-start:10px;width:fit-content;
  background:var(--gold-soft);color:#6b5116;border:1px solid rgba(221,169,51,.5);
  font-size:.8rem;font-weight:700;border-radius:999px;padding:3px 14px;
}
.offer-list{display:grid;gap:9px;margin-block-end:26px}
.offer-list li{font-size:.92rem;color:var(--muted);line-height:1.7}
.offer-list strong{color:var(--olive-dark)}
.offer-card .btn{margin-block-start:auto}
.offer-foot{text-align:center;font-size:.8rem;color:var(--gold-2);margin-block-start:12px;font-weight:600}

.offer-deal{
  position:absolute;inset-block-start:18px;inset-inline-end:18px;
  background:rgba(169,119,47,.12);color:var(--amber);
  border:1px solid rgba(221,169,51,.45);border-radius:999px;
  font-size:.74rem;font-weight:800;padding:4px 12px;letter-spacing:.3px;
}

/* featured */
.offer-card.featured{
  background:linear-gradient(160deg,#44543D 0%,#2E3A27 85%);
  border:1.5px solid rgba(235,203,122,.6);
  color:#EAE4CE;
  transform:translateY(-14px);
  box-shadow:0 30px 60px -22px rgba(40,50,31,.55);
  padding-block-start:clamp(36px,4vw,48px);
}
.offer-card.featured:hover{transform:translateY(-20px)}
.offer-card.featured .offer-head h3{color:#FBF6E3}
.offer-card.featured .offer-head p{color:#C7C0A5}
.offer-card.featured .price-main{color:#fff}
.offer-card.featured .price-cur{color:var(--gold-2)}
.offer-card.featured .offer-price{border-block-color:rgba(235,203,122,.3)}
.offer-card.featured .offer-list li{color:#D6CFB6}
.offer-card.featured .offer-list strong{color:var(--gold-2)}
.offer-card.featured del{color:#97917C}
.offer-ribbon{
  position:absolute;inset-block-start:-17px;inset-inline:0;margin-inline:auto;width:fit-content;
  background:linear-gradient(140deg,#F0CD6E,#D3A02E);
  color:#3A2E10;font-weight:800;font-size:.84rem;
  padding:7px 24px;border-radius:999px;
  box-shadow:0 10px 22px -8px rgba(221,169,51,.65);
  white-space:nowrap;
}
.offer-ribbon .ltr{font-size:.78rem;font-weight:700}

.trust-row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;
}
.trust-row li{
  background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:16px 18px;display:flex;gap:14px;align-items:center;box-shadow:var(--shadow-sm);
}
.trust-row svg{width:36px;height:36px;color:var(--olive);flex:none;padding:8px;background:rgba(221,169,51,.12);border-radius:12px}
.trust-row strong{display:block;font-size:.93rem;color:var(--olive-dark);line-height:1.5}
.trust-row span{font-size:.79rem;color:var(--muted)}

/* ═══════════ WHY ═══════════ */
.section-olive{
  background:
    radial-gradient(600px 300px at 85% 0%,rgba(221,169,51,.12),transparent 60%),
    linear-gradient(170deg,#3B4932,#2B3524 70%);
  color:#E9E3CF;
}
.why-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;
}
.why-item{
  background:rgba(255,253,246,.055);
  border:1px solid rgba(235,203,122,.22);
  border-radius:20px;padding:26px 22px;
  transition:background .3s ease, transform .3s ease, border-color .3s ease;
}
.why-item:hover{background:rgba(255,253,246,.1);transform:translateY(-4px);border-color:rgba(235,203,122,.55)}
.why-ic{
  width:56px;height:56px;border-radius:16px;display:grid;place-items:center;
  background:linear-gradient(150deg,rgba(240,205,110,.95),rgba(211,160,46,.9));
  color:#33290F;margin-block-end:16px;
  box-shadow:0 8px 20px -8px rgba(221,169,51,.6);
}
.why-ic svg{width:30px;height:30px}
.why-item h3{font-family:var(--font-display);font-size:1.1rem;color:#F7F1DE;margin-block-end:6px}
.why-item p{font-size:.9rem;color:#BDB79E;line-height:1.8}

/* ═══════════ REVIEWS ═══════════ */
.stars{color:var(--gold);letter-spacing:2.5px;font-size:1rem;white-space:nowrap}
.stars i{font-style:normal;opacity:.55}
.stars-big{margin-block-start:14px;display:inline-flex;align-items:center;gap:10px;font-family:var(--font-serif);font-size:1.25rem;color:var(--olive)}
.stars-big .stars{font-size:1.15rem}

.reviews-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:20px;
}
.review-card{
  background:var(--card);border:1px solid var(--line);border-radius:20px;
  padding:24px;display:flex;flex-direction:column;gap:14px;
  box-shadow:var(--shadow-sm);position:relative;
  transition:transform .3s ease, box-shadow .3s ease;
}
.review-card::before{
  content:"”";position:absolute;inset-block-start:6px;inset-inline-start:16px;
  font-family:var(--font-serif);font-size:4rem;color:rgba(221,169,51,.22);line-height:1;
}
.review-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.review-top{display:flex;align-items:center;gap:12px}
.review-avatar{
  flex:none;width:46px;height:46px;border-radius:50%;
  background:radial-gradient(circle at 32% 28%,#F6E4AC,var(--gold-soft));
  border:1.5px solid rgba(221,169,51,.55);
  display:grid;place-items:center;
  font-family:var(--font-display);font-size:1.15rem;color:var(--olive-dark);font-weight:700;
}
.review-id{display:flex;flex-direction:column;line-height:1.35;margin-inline-end:auto}
.review-id strong{font-size:.98rem;color:var(--olive-dark)}
.review-id span{font-size:.76rem;color:var(--muted)}
.review-card .stars{font-size:.85rem;margin-block-start:4px}
.review-card > p{font-size:.94rem;color:#5a5f50;line-height:1.95}
.review-verified{
  margin-block-start:auto;font-size:.72rem;color:var(--muted);
  border-block-start:1px dashed var(--line-2);padding-block-start:10px;
}
.reviews-note{text-align:center;margin-block-start:26px;font-size:.86rem;color:var(--muted)}


/* ═══════════ GALLERY STRIP ═══════════ */
.gallery{background:var(--paper);padding-block:clamp(40px,5vw,64px)}
.gallery-inner{max-width:1060px}
.gallery-caption{text-align:center;color:var(--amber);font-weight:600;font-size:.92rem;margin-block-end:18px;letter-spacing:.3px}
.gallery-grid{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:16px}
.gallery-grid li{position:relative;border-radius:20px;overflow:clip;border:1px solid var(--line);
  transition:transform .4s ease, box-shadow .4s ease}
.gallery-grid li:hover{transform:translateY(-5px) scale(1.012);box-shadow:var(--shadow-md)}
.gallery-grid img{width:100%;height:100%;object-fit:cover;aspect-ratio:1/1.18}
.gallery-grid .tall img{aspect-ratio:1/1.32}
@media (max-width:640px){
  .gallery-grid{gap:9px}
  .gallery-grid li{border-radius:14px}
}

/* ═══════════ TIMELINE ═══════════ */
.timeline{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;position:relative;
}
.timeline::before{
  content:"";position:absolute;inset-block-start:31px;inset-inline:9%;
  border-block-start:2px dashed var(--line-2);z-index:0;
}
.timeline li{
  position:relative;z-index:1;text-align:center;
  background:var(--card);border:1px solid var(--line);border-radius:20px;
  padding:26px 22px;box-shadow:var(--shadow-sm);
  transition:transform .3s ease;
}
.timeline li:hover{transform:translateY(-4px)}
.t-week{
  display:inline-block;margin-block-end:14px;
  background:var(--olive);color:#F4EEDD;border-radius:999px;padding:6px 18px;
  font-size:.8rem;font-weight:700;letter-spacing:.3px;
  box-shadow:0 0 0 5px var(--paper),0 0 0 6.5px var(--line-2);
}
.timeline h3{font-family:var(--font-display);font-size:1.12rem;color:var(--olive-dark);margin-block-end:8px}
.timeline p{font-size:.9rem;color:var(--muted);line-height:1.85}

/* ═══════════ FAQ ═══════════ */
.faq-wrap{max-width:900px}
.faq-list{margin-block-start:8px}
.faq-item{
  background:var(--card);border:1px solid var(--line);border-radius:18px;
  margin-block-end:12px;overflow:hidden;
  transition:border-color .3s ease, box-shadow .3s ease;
}
.faq-item:hover{border-color:var(--gold-2)}
.faq-item[open]{border-color:var(--gold);box-shadow:var(--shadow-sm)}
.faq-item summary{
  display:flex;align-items:center;gap:14px;
  padding:18px 22px;cursor:pointer;list-style:none;
  font-family:var(--font-display);font-weight:600;font-size:1.04rem;color:var(--olive-dark);
  user-select:none;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary span{flex:1}
.faq-item summary::before{
  content:"؟";flex:none;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(221,169,51,.14);color:var(--amber);
  font-family:var(--font-display);font-weight:700;font-size:1rem;
}
.faq-ic{width:22px;height:22px;color:var(--olive);flex:none;transition:transform .3s ease}
.faq-item[open] .faq-ic{transform:rotate(180deg);color:var(--amber)}
.faq-a{padding:0 22px 20px 70px}
.faq-a p{font-size:.95rem;color:var(--muted);line-height:2}
.faq-a a{color:var(--amber);font-weight:600;text-decoration:underline dotted}
.faq-item[open] .faq-a{animation:faqIn .4s ease}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

.faq-cta{
  margin-block-start:30px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
.faq-cta p{color:var(--muted);font-size:.95rem}

/* ═══════════ FINAL CTA ═══════════ */
.final-cta{
  background:
    radial-gradient(520px 340px at 90% 10%,rgba(221,169,51,.15),transparent 62%),
    linear-gradient(200deg,#35422C,#242E1C 75%);
  color:#EAE4CE;
  padding-block:clamp(56px,7vw,100px);
}
.final-inner{
  display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,5vw,64px);align-items:center;
}
.final-img{margin:0;position:relative}
.final-img img{
  border-radius:24px 24px 24px 90px;border:1px solid rgba(235,203,122,.4);
  box-shadow:var(--shadow-lg);
}
.final-copy h2{
  font-family:var(--font-display);font-size:clamp(1.7rem,3.4vw,2.5rem);
  line-height:1.55;color:#FBF5E2;margin-block-end:14px;
}
.final-copy h2 em{font-style:normal;color:var(--gold-2)}
.final-copy > p{color:#C8C2A8;line-height:2;max-width:52ch}
.final-offers{display:flex;flex-wrap:wrap;gap:12px;margin-block:26px 8px}
.final-offers a{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  background:rgba(255,253,246,.06);border:1px solid rgba(235,203,122,.4);
  border-radius:16px;padding:12px 22px;min-width:120px;
  font-size:.82rem;color:#D9D3B9;font-weight:600;
  transition:all .25s ease;
}
.final-offers a strong{font-family:var(--font-display);font-size:1.15rem;color:var(--gold-2)}
.final-offers a:hover{background:rgba(235,203,122,.14);transform:translateY(-3px)}
.final-offers .pick{
  background:linear-gradient(140deg,#F0CD6E,#D3A02E);border-color:transparent;color:#4a3a10;
}
.final-offers .pick strong{color:#332808}
.final-copy .btn-primary{margin-block-start:18px}
.final-note{margin-block-start:16px;font-size:.8rem;color:#A8A288}

/* ═══════════ FOOTER ═══════════ */
.site-footer{background:#212A19;color:#B7B197;font-size:.92rem}
.footer-grid{
  display:grid;grid-template-columns:1.3fr .8fr 1fr 1fr;gap:34px;
  padding-block:clamp(44px,5vw,64px);
}
.f-logo{
  background:#F6F4EE;border-radius:16px;padding:14px 20px;
  width:min(280px,100%);margin-block-end:14px;
}
.f-brand p{line-height:2;font-size:.9rem}
.site-footer h4{
  font-family:var(--font-display);color:#F2ECD9;font-size:1rem;margin-block-end:14px;letter-spacing:.3px;
}
.f-links{display:grid;gap:9px;align-content:start}
.f-links a{color:#B7B197;transition:color .2s ease}
.f-links a:hover{color:var(--gold-2)}
.f-contact p{margin-block-end:8px;line-height:1.9}
.f-contact a{color:var(--gold-2);font-weight:600}
.f-contact .btn{margin-block-start:10px}
.f-trust{display:grid;gap:8px;align-content:start;font-size:.86rem}
.f-trust li{color:#CFC9AF}
.footer-bottom{border-block-start:1px solid rgba(235,203,122,.16);background:rgba(0,0,0,.18)}
.footer-bottom-inner{
  display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  padding-block:16px;font-size:.78rem;color:#8B866E;
}

/* ═══════════ FLOATING WHATSAPP + MOBILE BAR ═══════════ */
.wa-float{
  position:fixed;z-index:95;
  inset-block-end:24px;inset-inline-end:22px;
  width:60px;height:60px;border-radius:50%;
  background:var(--wa);color:#fff;
  display:grid;place-items:center;
  box-shadow:0 14px 30px -8px rgba(37,211,102,.55), 0 0 0 5px rgba(255,255,255,.7);
  transition:transform .3s ease, opacity .4s ease;
}
html.js .wa-float{opacity:0;pointer-events:none;transform:translateY(12px)}
html.js .wa-float.show{opacity:1;pointer-events:auto;transform:none}
.wa-float svg{width:32px;height:32px}
.wa-float:hover{transform:scale(1.08) rotate(4deg)}
.wa-float::before{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  border:2px solid rgba(37,211,102,.5);
  animation:waRing 2.4s ease-out infinite;
}
@keyframes waRing{
  0%{transform:scale(.9);opacity:.9}
  70%{transform:scale(1.35);opacity:0}
  100%{opacity:0}
}

.mobile-bar{
  position:fixed;z-index:96;inset-inline:10px;inset-block-end:calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,253,246,.96);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid var(--line-2);border-radius:18px;
  box-shadow:var(--shadow-lg);
  padding:10px 10px 10px 14px;
  display:none;align-items:center;gap:12px;
  transform:translateY(130%);transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.mobile-bar.show{transform:translateY(0)}
.mobile-bar-price{display:flex;flex-direction:column;line-height:1.35;flex:1;min-width:0}
.mobile-bar-price span{font-size:.95rem;color:var(--olive-dark);font-weight:600}
.mobile-bar-price small{font-size:.68rem;color:var(--muted)}
.mobile-bar .btn{padding:12px 24px;font-size:.95rem;flex:none}

/* ═══════════ REVEAL ANIMATIONS ═══════════ */
html.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s cubic-bezier(.22,1,.36,1)}
html.js .reveal.in{opacity:1;transform:none}
html.js .offers-grid .reveal.in:nth-child(2){transition-delay:.08s}
html.js .why-grid .reveal.in:nth-child(odd){transition-delay:.06s}

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width:1080px){
  .site-nav > a:not(.nav-cta){padding:9px 9px;font-size:.9rem}
  .header-cta{display:none}
}

@media (max-width:940px){
  .hero-grid{grid-template-columns:1fr;gap:36px}
  .hero-copy{order:1}
  .hero-media{order:2;max-width:520px;margin-inline:auto;width:100%}
  .hero-figure{max-width:460px}
  .solution-panel,.routine-grid,.story-grid,.final-inner{grid-template-columns:1fr}
  .routine-media{position:static;max-width:520px}
  .final-img{max-width:440px;order:2;margin-inline:auto}
  .offers-grid{grid-template-columns:1fr 1fr}
  .offer-card.featured{grid-column:1 / -1;transform:none;max-width:560px;margin-inline:auto;width:100%}
  .offer-card.featured:hover{transform:translateY(-6px)}
  .timeline{grid-template-columns:1fr;gap:14px}
  .timeline::before{display:none}
  .footer-grid{grid-template-columns:1fr 1fr}
}

@media (max-width:760px){
  body{font-size:16px}
  :root{--header-h:64px}

  /* drawer nav — anchored under the sticky header */
  .site-nav{
    position:absolute;inset-inline:0;top:100%;z-index:99;
    background:var(--paper);border-block-end:1px solid var(--line);
    box-shadow:var(--shadow-lg);
    flex-direction:column;align-items:stretch;gap:2px;
    padding:16px clamp(18px,5vw,28px) 22px;
    transform:translateY(-14px);opacity:0;visibility:hidden;
    transition:transform .35s ease,opacity .3s ease,visibility .35s;
    max-height:calc(100dvh - var(--header-h) - 20px);overflow-y:auto;
  }
  .site-nav.open{transform:none;opacity:1;visibility:visible}
  .site-nav > a:not(.nav-cta){
    padding:14px 10px;font-size:1.06rem;border-block-end:1px solid var(--line);border-radius:0;
  }
  .nav-cta{justify-content:center;padding:14px !important;border-radius:999px;margin-block-start:14px}
  .header-cta{display:none}

  .nav-toggle{
    display:grid;place-items:center;gap:5px;width:46px;height:46px;flex:none;
    border:1px solid var(--line-2);border-radius:12px;background:var(--card);
  }
  .nav-toggle span{display:block;width:20px;height:2px;background:var(--olive-dark);border-radius:2px;transition:transform .3s ease,opacity .3s ease}
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  .hero{padding-block-start:30px}
  .hero-title{font-size:clamp(1.7rem,7.4vw,2.3rem);line-height:1.6}
  .hero-actions .btn{flex:1 1 auto}
  .float-price{inset-inline-start:0;padding:9px 14px}
  .seal-badge{inset-inline-end:-4px;width:74px;height:74px}
  .hero-stats{grid-template-columns:1fr 1fr}
  .stat:nth-child(3){border-inline-start:0}
  .stat{border-block-start:1px solid var(--line)}
  .stat:nth-child(-n+2){border-block-start:0}

  .offers-grid{grid-template-columns:1fr;max-width:480px;margin-inline:auto}
  .offer-card.featured{order:-1;max-width:none}
  .problem-grid,.ing-grid,.reviews-grid{grid-template-columns:1fr 1fr}

  .faq-a{padding-inline:20px}
  .final-offers a{flex:1;min-width:104px}

  .mobile-bar{display:flex}
  .wa-float{inset-block-end:calc(84px + env(safe-area-inset-bottom));width:54px;height:54px;inset-inline-end:14px}
  .wa-float svg{width:28px;height:28px}
  body{padding-block-end:74px}

  .footer-grid{grid-template-columns:1fr;gap:26px;text-align:center}
  .f-logo{margin-inline:auto}
  .f-contact .btn{margin-inline:auto}
  .f-links{justify-items:center}
  .footer-bottom-inner{justify-content:center;text-align:center}
}

@media (max-width:520px){
  .topbar p{gap:8px}
  .topbar-item:nth-child(3),.topbar-sep:nth-child(2){display:none}
  .problem-grid,.ing-grid,.reviews-grid{grid-template-columns:1fr}
  .hero-chips li{font-size:.8rem;padding:7px 13px}
  .btn-lg{padding:15px 26px;font-size:1rem}
}

/* ── Motion preferences ── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  html.js .reveal{opacity:1;transform:none}
  .marquee-track{animation:none}
}

/* ── Print (order sheet friendliness) ── */
@media print{
  .topbar,.site-header,.wa-float,.mobile-bar,.hero-bg{display:none}
  .section{padding-block:18px}
  body{background:#fff}
}