:root{
  --ivory:#faf5ec; --ivory-2:#f4ead9; --ink:#24211c; --ink-soft:#5c554b;
  --yuja:#e8912d; --yuja-deep:#c96f14; --terra:#c05b2e; --terra-soft:#f3ddd0;
  --card:#fffdf8; --line:#e6d9c4; --ok:#2e7d46; --err:#b3261e;
  --radius:20px; --max:1120px;
  --font:"Cairo","Segoe UI",Tahoma,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;font-family:var(--font);background:var(--ivory);color:var(--ink);line-height:1.9;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:20px}
:focus-visible{outline:3px solid var(--yuja-deep);outline-offset:3px;border-radius:6px}
.skip{position:absolute;right:12px;top:-60px;background:var(--ink);color:#fff;padding:10px 18px;border-radius:10px;z-index:99;transition:top .2s}
.skip:focus{top:12px;color:#fff}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;text-decoration:none;font-family:inherit;font-weight:800;border-radius:14px;padding:14px 26px;font-size:17px;min-height:52px;transition:transform .15s,box-shadow .15s,background .15s}
.btn-primary{background:var(--terra);color:#fff;box-shadow:0 8px 22px -10px rgba(192,91,46,.7)}
.btn-primary:hover{background:#a94d26;transform:translateY(-1px)}
/* hero */
.hero{padding-block:34px 10px}
.hero-grid{display:grid;gap:26px;align-items:center}
@media(min-width:900px){.hero-grid{grid-template-columns:1.05fr .95fr}.hero{padding-block:54px 20px}}
.kicker{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:var(--ivory);font-size:13px;font-weight:700;border-radius:999px;padding:7px 16px;margin-bottom:16px}
.kicker .dot{inline-size:8px;block-size:8px;border-radius:50%;background:var(--yuja);flex:none}
h1{font-size:clamp(30px,7.4vw,58px);line-height:1.5;font-weight:900;margin:0 0 12px}
h1 .accent{color:var(--terra)}
.lede{font-size:clamp(16px,4.2vw,20px);color:var(--ink-soft);margin:0 0 8px;max-width:34em}
.serum-id{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.serum-id span{font-size:13.5px;font-weight:800;background:var(--terra-soft);color:#7c3c1c;border:1px solid #e3bda6;border-radius:999px;padding:5px 14px}
[dir="rtl"] .ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
.hero-photo{position:relative}
.hero-photo .frame{border-radius:26px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(60,40,20,.45);aspect-ratio:4/5;background:var(--ivory-2)}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:top center}
.price-card{position:absolute;inset-inline:14px;bottom:14px;background:rgba(255,253,248,.96);border:1px solid var(--line);border-radius:16px;padding:12px 16px;display:flex;align-items:center;gap:12px;box-shadow:0 14px 30px -18px rgba(0,0,0,.4)}
.price-now{font-size:26px;font-weight:900}
.price-old{font-size:15px;color:#8a8177;text-decoration:line-through}
.save-chip{font-size:12.5px;font-weight:800;background:#e8f3ea;color:var(--ok);border-radius:999px;padding:3px 12px;white-space:nowrap}
.micro{font-size:14px;color:var(--ink-soft);display:flex;align-items:center;gap:8px;margin:6px 0}
.micro svg{flex:none}
.hero-cta{display:flex;flex-direction:column;gap:10px;margin-top:18px;max-width:420px}
.hero-cta .btn{width:100%}
.cod-note{text-align:center;font-size:13.5px;color:var(--ink-soft)}
/* sections */
section.block{padding-block:44px}
.sec-head{max-width:640px;margin-bottom:26px}
.eyebrow{font-size:13px;font-weight:800;letter-spacing:.5px;color:var(--yuja-deep);margin:0 0 6px}
h2{font-size:clamp(23px,5.6vw,36px);line-height:1.6;margin:0 0 8px;font-weight:900}
.sec-sub{color:var(--ink-soft);margin:0;font-size:16px}
.divider{border:0;border-top:1px solid var(--line);margin:0}
/* concerns */
.concern-grid{display:grid;gap:14px}
@media(min-width:760px){.concern-grid{grid-template-columns:1fr 1fr}}
.concern{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.concern .ic{inline-size:46px;block-size:46px;border-radius:14px;background:var(--ivory-2);display:grid;place-items:center;flex:none}
.concern h3{margin:0 0 4px;font-size:17px}
.concern p{margin:0;font-size:14.5px;color:var(--ink-soft)}
.concern strong{color:var(--ink)}
/* formula editorial */
.formula{background:var(--ink);color:#f7f1e5;border-radius:28px;overflow:hidden}
.formula-grid{display:grid}
@media(min-width:900px){.formula-grid{grid-template-columns:1fr 1fr}}
.formula-copy{padding:34px 26px}
@media(min-width:900px){.formula-copy{padding:52px 48px}}
.formula-copy h2{color:#fff}
.formula-copy p{color:#d9cfbd;font-size:16px}
.ing{border-top:1px solid #4a443b;margin-top:18px;padding-top:18px;display:grid;gap:14px}
.ing-item{display:grid;grid-template-columns:auto 1fr;gap:12px}
.ing-item b{color:#fff;font-size:16px;display:block}
.ing-item .pct{font-size:12px;font-weight:900;color:var(--ink);background:var(--yuja);border-radius:999px;padding:3px 12px;white-space:nowrap;align-self:start}
.ing-item p{margin:4px 0 0;font-size:14.5px}
.formula-photo{min-height:300px}
.formula-photo img{width:100%;height:100%;object-fit:cover;min-height:300px}
/* product confidence */
.prod-grid{display:grid;gap:24px;align-items:center}
@media(min-width:900px){.prod-grid{grid-template-columns:.9fr 1.1fr}}
.prod-photo{background:var(--card);border:1px solid var(--line);border-radius:26px;padding:30px;display:grid;place-items:center}
.prod-photo img{max-height:380px;width:auto;margin-inline:auto;mix-blend-mode:multiply}
.check-list{list-style:none;margin:18px 0;padding:0;display:grid;gap:10px}
.check-list li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 16px}
.check-list svg{flex:none;margin-top:6px}
.importer{border-inline-start:4px solid var(--terra);background:var(--terra-soft);border-radius:12px;padding:14px 18px;font-weight:800;font-size:16px;margin-top:16px}
/* routine */
.steps{display:grid;gap:12px;counter-reset:step}
@media(min-width:760px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;position:relative}
.step::before{counter-increment:step;content:counter(step);display:grid;place-items:center;inline-size:34px;block-size:34px;border-radius:50%;background:var(--ink);color:#fff;font-weight:900;font-size:15px;margin-bottom:10px}
.step h3{margin:0 0 4px;font-size:16px}
.step p{margin:0;font-size:14px;color:var(--ink-soft)}
.vary-note{margin-top:16px;font-size:14px;color:var(--ink-soft);background:var(--ivory-2);border-radius:12px;padding:12px 18px}
/* order */
.order-sec{background:var(--card);border:1px solid var(--line);border-radius:28px;padding:28px 20px;box-shadow:0 30px 60px -40px rgba(60,40,20,.35)}
@media(min-width:900px){.order-sec{padding:40px}.order-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:34px}}
.field{margin-bottom:16px}
label{display:block;font-weight:800;font-size:15px;margin-bottom:6px}
label .hint{font-weight:600;color:var(--ink-soft);font-size:13px}
input,select,textarea{width:100%;font-family:inherit;font-size:16px;color:var(--ink);background:#fff;border:2px solid var(--line);border-radius:12px;padding:13px 15px;min-height:52px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--terra);box-shadow:0 0 0 3px rgba(192,91,46,.18)}
input[dir="ltr"]{text-align:left}
.err-msg{display:none;font-size:13.5px;color:var(--err);font-weight:700;margin-top:5px}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--err)}
.field.invalid .err-msg{display:block}
.qty-row{display:flex;align-items:center;gap:14px}
.qty-ctrl{display:flex;align-items:center;gap:0;border:2px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.qty-ctrl button{inline-size:52px;block-size:52px;border:0;background:var(--ivory-2);font-size:24px;font-weight:900;cursor:pointer;color:var(--ink)}
.qty-ctrl button:hover{background:#e9dcc4}
.qty-ctrl output{min-inline-size:52px;text-align:center;font-size:19px;font-weight:900}
.summary{background:var(--ivory);border:1px dashed #c9b48f;border-radius:16px;padding:18px;margin:18px 0;font-size:15.5px}
.summary .row{display:flex;justify-content:space-between;padding-block:5px}
.summary .total{border-top:1px solid var(--line);margin-top:8px;padding-top:12px;font-weight:900;font-size:19px}
.summary .free{color:var(--ok);font-weight:800}
.status{border-radius:12px;padding:12px 16px;font-weight:700;font-size:15px;margin-bottom:14px;display:none}
.status.show{display:block}
.status.error{background:#fbe9e7;color:var(--err);border:1px solid #e5a49e}
.status.busy{background:#fff4e0;color:#8a5a00;border:1px solid #e8c97a}
.submit-btn{width:100%;font-size:18px}
.secure-note{text-align:center;font-size:13px;color:var(--ink-soft);margin-top:10px}
/* faq */
.faq details{background:var(--card);border:1px solid var(--line);border-radius:14px;margin-bottom:10px;overflow:hidden}
.faq summary{cursor:pointer;font-weight:800;font-size:16px;padding:16px 20px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:56px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .plus{flex:none;font-size:20px;color:var(--terra);font-weight:900}
.faq details[open] summary .plus{transform:rotate(45deg)}
.faq .a{padding:0 20px 18px;font-size:15px;color:var(--ink-soft);margin:0}
/* footer */
footer{border-top:1px solid var(--line);padding:30px 0 120px;font-size:13.5px;color:var(--ink-soft)}
footer nav{display:flex;gap:18px;flex-wrap:wrap;margin-top:10px}
footer a{color:var(--ink-soft)}
/* sticky bar */
.sticky-bar{position:fixed;inset-inline:0;bottom:0;z-index:60;background:rgba(255,253,248,.97);border-top:1px solid var(--line);padding:10px 16px calc(10px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:12px;backdrop-filter:blur(8px)}
.sticky-bar .p{flex:1}.sticky-bar .p b{font-size:20px}.sticky-bar .p s{font-size:13px;color:#8a8177;margin-inline-start:6px}
.sticky-bar .p small{display:block;font-size:12px;color:var(--ok);font-weight:800}
.sticky-bar .btn{flex:1.2;padding:12px;font-size:16px;min-height:48px}
.sticky-bar.hidden{display:none}
@media(min-width:900px){.sticky-bar{display:none}}
/* reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .5s,transform .5s}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}
.policy-page{max-width:720px;padding:40px 20px 80px}
/* thanks */
.thanks-card{max-width:560px;margin:60px auto;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:36px 28px;text-align:center}
.thanks-card .ok-ic{inline-size:64px;block-size:64px;border-radius:50%;background:#e8f3ea;display:grid;place-items:center;margin:0 auto 16px}
.ref-box{background:var(--ivory);border:1px dashed #c9b48f;border-radius:14px;padding:14px;margin:18px 0;font-size:16px}
.ref-box b{font-size:20px}