:root{
  --ink:#1B2230;
  --muted:#4A5262;
  --accent:#C8340A;
  --accent-d:#A92804;
  --accent-2:#F26B1D;
  --alt:#FFF5EE;
  --soft:#FFE9D9;
  --line:#EBDCCF;
  --navy:#243044;
  --radius:18px;
  --container:1160px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:72px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  margin:0;
  font-family:"UU Sans","Segoe UI",Tahoma,"Noto Sans Arabic",system-ui,-apple-system,Arial,sans-serif;
  font-size:16px;line-height:1.8;color:var(--ink);background:#fff;
  padding-bottom:84px;
}
img{max-width:100%;height:auto}
a{color:var(--accent-d)}
h1,h2,h3{line-height:1.35;margin:0;text-wrap:balance}
p{margin:0 0 1.2em}
ul,ol{margin:0}
:focus-visible{outline:3px solid var(--accent-2);outline-offset:3px}

.wrap{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:16px}
@media (min-width:820px){.wrap{padding-inline:24px}}

/* header */
.hdr{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px}
.logo{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:1.15rem;color:var(--ink);text-decoration:none;min-height:44px}
.logo-mark{width:36px;height:36px;flex:none}
.nav{display:none;gap:4px}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;color:var(--ink);text-decoration:none;font-weight:700;font-size:.95rem;border-radius:10px}
.nav a:hover{background:var(--alt)}
@media (min-width:1000px){.nav{display:flex}}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:12px 28px;border:0;border-radius:14px;
  background:linear-gradient(135deg,#D43F0A,#A92804);color:#fff;
  font-family:inherit;font-size:1rem;font-weight:800;line-height:1.3;text-decoration:none;text-transform:none;
  box-shadow:0 10px 24px rgba(169,40,4,.30);cursor:pointer;
  transition:transform .15s ease,filter .15s ease;
}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn.sm{min-height:44px;padding:8px 20px;font-size:.95rem}
.btn.block{width:100%}
.btn.light{background:#fff;color:var(--accent-d);box-shadow:0 10px 24px rgba(0,0,0,.18)}
.btn.light:focus-visible{outline-color:#fff}

/* hero */
.hero{background:linear-gradient(180deg,#FFF1E6 0%,#FFFFFF 100%);padding:6px 0 40px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;grid-template-areas:"txt" "fig" "frm"}
.hero-txt{grid-area:txt}
.hero-fig{grid-area:fig;margin:0 -8px;border-radius:28px;background:radial-gradient(closest-side,rgba(242,107,29,.24),rgba(242,107,29,0))}
.hero-fig img{display:block;width:100%;max-width:520px;height:auto;aspect-ratio:1/1;object-fit:contain;margin-inline:auto;mix-blend-mode:multiply}
.hero-form{grid-area:frm}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;list-style:none;margin:0;padding:0;font-size:.9rem;color:var(--muted)}
.crumbs li+li::before{content:"‹";margin-inline:8px;color:var(--muted)}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--muted);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.kicker{display:inline-block;margin:0 0 8px;padding:2px 14px;border-radius:99px;background:var(--soft);color:var(--accent-d);font-weight:700;font-size:.9rem}
.hero h1{font-size:clamp(2rem,9vw,3.4rem);font-weight:800;margin-bottom:8px}
.tagline{font-size:1.05rem;line-height:1.7;color:var(--muted);margin-bottom:12px}
.chip{display:inline-block;margin:0;padding:6px 16px;border-radius:12px;background:#fff;border:1px solid var(--line);font-weight:800;color:var(--accent-d)}
@media (min-width:960px){
  .hero{padding:10px 0 56px}
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-rows:auto 1fr;column-gap:32px;row-gap:16px;grid-template-areas:"txt fig" "frm fig";align-items:start}
  .hero-fig{margin:0;align-self:center}
  .hero-fig img{max-width:none}
  .hero h1{font-size:clamp(2.4rem,4vw,3.6rem)}
}

/* form card / iframe */
.formcard{background:#FFFFFF;border:1px solid var(--line);border-radius:20px;box-shadow:0 14px 40px rgba(27,34,48,.10);overflow:hidden}
.formcard iframe{display:block;width:100%;border:0;background:#FFFFFF}
.formcard.narrow{max-width:680px;margin-inline:auto}

/* trust strip */
.strip{padding:0 0 8px}
.badges{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.badges li{display:flex;align-items:center;gap:10px;min-height:56px;padding:10px 14px;border-radius:14px;background:var(--alt);border:1px solid var(--line);font-weight:700;font-size:.95rem;line-height:1.4}
@media (min-width:820px){.badges{grid-template-columns:repeat(4,1fr)}}

/* icons */
.i{width:28px;height:28px;flex:none;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.icon{width:56px;height:56px;border-radius:16px;background:var(--soft);display:grid;place-items:center;margin-bottom:14px}

/* sections */
.sec{padding-block:64px}
.sec.alt{background:var(--alt)}
h2{font-size:clamp(1.5rem,5vw,2.2rem);font-weight:800;margin-bottom:.6em}
h3{font-size:1.15rem;font-weight:800;margin-bottom:.4em}
.lead{font-size:1.05rem;color:var(--muted)}
@media (min-width:900px){.lead{text-align:justify;hyphens:auto;text-wrap:pretty}}
.cols{display:grid;grid-template-columns:1fr;gap:0}
@media (min-width:820px){.cols{grid-template-columns:1fr 1fr;column-gap:44px}}
.cols p{color:var(--muted);font-size:1.05rem}

/* cards */
.grid{display:grid;gap:20px;align-items:stretch;grid-template-columns:1fr;margin-top:28px}
.lead+.grid{margin-top:28px}
@media (min-width:600px){.g2,.g4,.g6{grid-template-columns:repeat(2,1fr)}}
@media (min-width:820px){.g3{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1040px){.g4{grid-template-columns:repeat(4,1fr)}.g6{grid-template-columns:repeat(3,1fr)}}
.card{height:100%;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;position:relative;text-align:start}
.card.tint{background:var(--alt)}
.card p{margin:0;color:var(--muted)}
.steps{list-style:none;padding:0}
.step .n{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;margin-bottom:12px;color:#fff;font-weight:800;background:linear-gradient(135deg,#D43F0A,#A92804)}

/* band */
.band-sec{padding:0}
.band{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:28px 24px;border-radius:24px;background:linear-gradient(135deg,#D43F0A,#A92804);color:#fff;margin-block:0}
.band-t{margin:0;font-size:1.2rem;font-weight:800;line-height:1.5}
@media (min-width:820px){.band{flex-direction:row;align-items:center;justify-content:space-between;padding:32px 40px}.band-t{font-size:1.4rem}}

/* table */
.tablewrap{margin-top:28px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:.95rem}
caption{text-align:start;padding:14px 16px;font-weight:800;background:#fff}
th,td{padding:12px 10px;text-align:start;vertical-align:top;border-top:1px solid var(--line);overflow-wrap:anywhere}
thead th{background:var(--navy);color:#fff;border-top:0}
tbody th{width:22%;font-weight:800}
td.us{background:#FFF1E6;font-weight:700;color:var(--ink)}
@media (min-width:820px){table{font-size:1.05rem}th,td{padding:16px 20px}}

/* ingredients */
.ing{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:36px 44px}
.ing li{padding-inline-start:18px;border-inline-start:4px solid var(--accent-2)}
.ing strong{display:block;font-size:1.2rem;margin-bottom:.5em}
.ing span{display:block;color:var(--muted)}
@media (min-width:820px){.ing{grid-template-columns:1fr 1fr}}

/* pricing */
.price-card{position:relative;margin-top:36px;display:grid;grid-template-columns:1fr;gap:24px;align-items:center;background:#fff;border:2px solid var(--accent-2);border-radius:28px;padding:28px 20px 24px;box-shadow:0 18px 50px rgba(200,52,10,.14)}
.pbadge{position:absolute;top:-16px;inset-inline-start:24px;padding:4px 16px;border-radius:99px;background:linear-gradient(135deg,#D43F0A,#A92804);color:#fff;font-weight:800;font-size:.9rem}
.price-fig{border-radius:24px;background:radial-gradient(closest-side,rgba(242,107,29,.22),rgba(242,107,29,0))}
.price-fig img{display:block;width:100%;max-width:440px;height:auto;aspect-ratio:1/1;object-fit:contain;margin-inline:auto;mix-blend-mode:multiply}
.price-body h3{font-size:1.3rem}
.price{font-size:clamp(2.6rem,10vw,3.8rem);font-weight:800;line-height:1.1;color:var(--accent-d);margin:.2em 0 .5em}
.price span{font-size:1.1rem;color:var(--ink);font-weight:700}
.plist{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:10px}
.plist li{display:flex;align-items:center;gap:10px;font-weight:700}
.stock{margin-bottom:20px;padding:14px 16px;border-radius:14px;background:var(--alt);border:1px solid var(--line)}
.stock p{margin:0 0 8px;font-size:.95rem}
.stock strong{color:var(--accent-d)}
.bar{height:10px;border-radius:99px;background:#F3DDCF;overflow:hidden}
.bar span{display:block;height:100%;width:24%;border-radius:99px;background:linear-gradient(90deg,#F26B1D,#C8340A)}
@media (min-width:820px){.price-card{grid-template-columns:1fr 1fr;padding:40px;gap:40px}}

/* final CTA */
.final{padding-block:64px;background:linear-gradient(135deg,#D43F0A,#A92804);color:#fff}
.final-in{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.final h2{margin:0}
.final p{margin:0 0 8px;font-size:1.1rem;font-weight:700}
@media (min-width:820px){.final-in{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between}.final h2,.final p{margin:0}.final-in>div{flex:1}}

/* footer */
.ftr{background:#F1F3F6;color:var(--muted);padding:40px 0 24px;font-size:.9rem}
.ftr-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px}
.fnav{display:flex;flex-wrap:wrap;gap:0 8px}
.fnav a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;color:var(--muted);text-decoration:none}
.fnav a:hover{text-decoration:underline}
.note{margin:12px 0 8px}
.ftr details{border-top:1px solid #DDE1E7}
.ftr summary{display:flex;align-items:center;min-height:44px;cursor:pointer;font-weight:700}
.ftr details p{margin:0 0 14px;font-size:.9rem;line-height:1.8}
.copy{margin:16px 0 0}

/* sticky mobile CTA */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(27,34,48,.10)}
@media (min-width:820px){.sticky{display:none}body{padding-bottom:0}}

/* narrow screens: no justify anywhere */
@media (max-width:480px){.lead,.cols p,.card p{text-align:start;hyphens:manual}}

/* success page */
.thanks{min-height:60vh;display:grid;place-items:center;text-align:center;padding:64px 0}
.thanks h1{font-size:clamp(1.8rem,6vw,2.6rem);margin-bottom:.5em}
.thanks p{color:var(--muted);font-size:1.1rem}