/* ══════════════════════════════════════════════════════════
   drayzed — styles.css
   يترفع في جذر الموقع:  dryzed.com/styles.css
   مربوط بالمسار المطلق /styles.css عشان يشتغل من أي فولدر
   (/ و /lp/ و /tiktok/ و /facebook/) على نفس الملف المخزّن.
   ══════════════════════════════════════════════════════════ */

:root{
    --ink:#442A72;
    --ink-2:#5B3B94;
    --paper:#F4F1F9;
    --paper-2:#FFFFFF;
    --gold:#C9982E;
    --gold-deep:#A87A1E;
    --crimson:#8C3A63;
    --mint:#7FA98F;
    --ink-soft:#6B5D85;
    --line:#E1DBEE;
    --radius:18px;
    --shadow:0 20px 45px -22px rgba(68,42,114,.35);
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Tajawal',sans-serif;
    background:var(--paper);
    color:var(--ink);
    line-height:1.7;
    overflow-x:hidden;
  }
  img{max-width:100%;height:auto;display:block;}
  h1,h2,h3{font-family:'El Messiri',serif;font-weight:700;line-height:1.35;}
  .wrap{max-width:1080px;margin:0 auto;padding:0 22px;}
  .eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    font-family:'Tajawal',sans-serif;font-weight:700;font-size:13px;
    letter-spacing:.5px;color:var(--gold-deep);
    background:rgba(201,152,46,.12);
    border:1px solid rgba(201,152,46,.35);
    padding:6px 14px;border-radius:999px;
  }
  .eyebrow svg{width:14px;height:14px;flex-shrink:0;}

  /* ---------- Buttons ---------- */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:10px;
    font-family:'Tajawal',sans-serif;font-weight:900;font-size:17px;
    padding:16px 30px;border-radius:12px;border:none;cursor:pointer;
    text-decoration:none;transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  }
  .btn-primary{
    background:linear-gradient(180deg,var(--gold),var(--gold-deep));
    color:#26200f;
    box-shadow:0 14px 28px -10px rgba(168,122,30,.55);
  }
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 34px -10px rgba(168,122,30,.65);}
  .btn-ghost{
    background:transparent;border:1.5px solid rgba(255,255,255,.55);color:#fff;
  }
  .btn-block{width:100%;}

  /* ---------- Reveal ---------- */
  .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease, transform .7s ease;}
  .reveal.in{opacity:1;transform:translateY(0);}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    .reveal{opacity:1;transform:none;transition:none;}
  }

  /* ---------- Header ---------- */
  header{
    position:sticky;top:0;z-index:50;
    background:rgba(68,42,114,.92);backdrop-filter:blur(6px);
    color:#fff;
  }
  .header-inner{
    display:flex;align-items:center;justify-content:space-between;
    padding:12px 22px;max-width:1080px;margin:0 auto;
  }
  .logo{font-family:'El Messiri',serif;font-weight:700;font-size:22px;letter-spacing:.5px;}
  .logo span{color:var(--gold);}
  .header-cta{
    font-size:14px;padding:10px 18px;border-radius:10px;
  }
  .orders-overlay{
    position:fixed;inset:0;background:rgba(20,10,40,.5);
    opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:90;
  }
  .orders-overlay.show{opacity:1;pointer-events:auto;}
  .orders-panel{
    position:fixed;top:0;bottom:0;left:0;width:min(360px,88vw);
    background:var(--paper-2);color:var(--ink);z-index:91;
    box-shadow:20px 0 45px -20px rgba(0,0,0,.4);
    transform:translateX(-100%);transition:transform .3s cubic-bezier(.2,.9,.25,1);
    display:flex;flex-direction:column;padding:20px;
  }
  .orders-panel.show{transform:translateX(0);}
  .orders-panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
  .orders-panel-head h3{font-family:'El Messiri',serif;font-size:19px;}
  .orders-panel-head button{background:none;border:none;font-size:18px;cursor:pointer;color:var(--ink-soft);}
  .orders-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:12px;}
  .order-item{
    background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:12px 14px;
  }
  .order-item b{display:block;font-family:'El Messiri',serif;font-size:15px;color:var(--ink);}
  .order-item span{display:block;font-size:12.5px;color:var(--ink-soft);margin-top:2px;}
  .order-item .badge{
    display:inline-block;margin-top:6px;font-size:11px;padding:3px 9px;border-radius:999px;
    background:rgba(127,169,143,.18);color:#3e6552;
  }
  .orders-empty{color:var(--ink-soft);font-size:14px;text-align:center;padding:30px 10px;}
  .orders-note{font-size:11.5px;color:var(--ink-soft);margin-top:12px;text-align:center;}

  /* ---------- Hero ---------- */
  .hero{
    position:relative;
    background:radial-gradient(120% 140% at 20% -10%, #5B3B94 0%, var(--ink) 55%, #2C1B4D 100%);
    color:#fff;padding:52px 0 70px;overflow:hidden;
  }
  .hero::before{
    content:"";position:absolute;inset:0;
    background-image:url('https://dryzed.com/images/1.webp');
    background-size:cover;background-position:center;
    opacity:.16;mix-blend-mode:luminosity;
  }
  .hero-inner{position:relative;display:grid;gap:34px;}
  @media(min-width:880px){
    .hero-inner{grid-template-columns:1.05fr .95fr;align-items:center;gap:40px;}
  }
  .hero h1{font-size:clamp(32px,6vw,50px);margin:18px 0 16px;color:#fff;}
  .hero h1 em{font-style:normal;color:var(--gold);}
  .hero p.lead{font-size:18px;color:#d8e6e2;max-width:46ch;margin-bottom:26px;}
  .hero-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
  .mini-badge{
    display:flex;align-items:center;gap:8px;font-size:13px;color:#d8e6e2;
    background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
    padding:8px 12px;border-radius:10px;
  }
  .mini-badge svg{width:16px;height:16px;color:var(--mint);flex-shrink:0;}
  .hero-visual{position:relative;display:flex;justify-content:center;}
  .hero-visual img{
    max-width:78%;filter:drop-shadow(0 30px 40px rgba(0,0,0,.45));
    animation:float 5s ease-in-out infinite;
  }
  @keyframes float{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-14px);}
  }
  @media (prefers-reduced-motion: reduce){ .hero-visual img{animation:none;} }
  .price-chip{
    position:absolute;bottom:6%;right:6%;
    background:#fff;color:var(--ink);border-radius:14px;
    padding:12px 16px;box-shadow:var(--shadow);text-align:center;
  }
  .price-chip .old{font-size:13px;color:#9a9a9a;text-decoration:line-through;}
  .price-chip .new{font-family:'El Messiri',serif;font-size:26px;font-weight:700;color:var(--crimson);}
  .price-chip .cur{font-size:13px;}

  /* ---------- Section shell ---------- */
  section{padding:64px 0;}
  .section-head{max-width:640px;margin:0 auto 40px;text-align:center;}
  .section-head h2{font-size:clamp(24px,4vw,34px);margin-top:14px;}
  .section-head p{color:var(--ink-soft);margin-top:12px;font-size:16px;}

  /* ---------- Problem / features ---------- */
  .feature-grid{
    display:grid;gap:18px;grid-template-columns:1fr;
  }
  @media(min-width:700px){ .feature-grid{grid-template-columns:1fr 1fr;} }
  .feature-card{
    background:var(--paper-2);border:1px solid var(--line);
    border-radius:var(--radius);padding:24px;
    display:flex;gap:16px;align-items:flex-start;
  }
  .feature-icon{
    flex-shrink:0;width:48px;height:48px;border-radius:12px;
    background:linear-gradient(160deg,var(--ink),var(--ink-2));
    display:flex;align-items:center;justify-content:center;
  }
  .feature-icon svg{width:24px;height:24px;color:var(--gold);}
  .feature-card h3{font-size:17px;margin-bottom:6px;}
  .feature-card p{color:var(--ink-soft);font-size:14.5px;}

  /* ---------- Gauge (signature element) ---------- */
  .gauge-section{
    background:var(--ink);color:#fff;border-radius:28px;margin:0 22px;
    padding:52px 6px 40px;
  }
  @media(min-width:700px){ .gauge-section{margin:0 auto;max-width:1080px;padding:60px 40px;} }
  .gauge-section .section-head p{color:#c6d8d3;}
  .gauge-section .eyebrow{background:rgba(201,152,46,.18);}
  .gauge-wrap{
    display:flex;flex-direction:column;align-items:center;gap:26px;
  }
  .gauge-svg{width:100%;max-width:360px;}
  .gauge-labels{
    display:flex;justify-content:space-between;width:100%;max-width:360px;
    font-size:13px;color:#c6d8d3;margin-top:-18px;
  }
  .gauge-labels b{display:block;color:#fff;font-size:14px;}
  .gauge-toggle{
    display:flex;gap:8px;background:rgba(255,255,255,.08);
    padding:6px;border-radius:999px;
  }
  .gauge-toggle button{
    font-family:'Tajawal',sans-serif;font-weight:700;font-size:14px;
    background:transparent;border:none;color:#c6d8d3;
    padding:9px 20px;border-radius:999px;cursor:pointer;transition:.2s;
  }
  .gauge-toggle button.active{background:var(--gold);color:#26200f;}
  .needle{transform-origin:100px 100px;transition:transform 1s cubic-bezier(.2,.9,.2,1);transform:rotate(-72deg);}
  .gauge-caption{
    text-align:center;font-family:'El Messiri',serif;font-size:19px;
    min-height:28px;transition:opacity .3s ease;
  }
  .before-after-imgs{
    display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:36px;
  }
  .ba-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:14px;text-align:center;}
  .ba-card span{font-size:13px;color:#c6d8d3;}

  /* ---------- How it works ---------- */
  .how-grid{display:grid;gap:36px;align-items:center;}
  @media(min-width:800px){ .how-grid{grid-template-columns:1fr 1fr;gap:48px;} }
  .how-img{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);}
  .how-steps{display:flex;flex-direction:column;gap:18px;margin-top:18px;}
  .how-step{display:flex;gap:14px;}
  .how-step .dot{
    flex-shrink:0;width:32px;height:32px;border-radius:50%;
    background:var(--mint);color:#0a2e29;font-weight:900;font-size:14px;
    display:flex;align-items:center;justify-content:center;font-family:'El Messiri',serif;
  }
  .how-step p{color:var(--ink-soft);font-size:15px;}
  .how-step strong{display:block;color:var(--ink);font-family:'El Messiri',serif;font-size:16px;margin-bottom:3px;}

  /* ---------- Pricing ---------- */
  .countdown{
    display:inline-flex;gap:8px;margin-top:14px;
  }
  .countdown .unit{
    background:var(--ink);color:#fff;border-radius:10px;padding:8px 12px;text-align:center;min-width:56px;
  }
  .countdown .unit b{display:block;font-family:'El Messiri',serif;font-size:20px;color:var(--gold);}
  .countdown .unit span{font-size:11px;color:#cfc3e6;}
  .price-card{
    max-width:520px;margin:0 auto;background:var(--paper-2);
    border-radius:24px;border:1px solid var(--line);box-shadow:var(--shadow);
    padding:34px 26px;text-align:center;position:relative;overflow:hidden;
  }
  .price-card::before{
    content:"خصم 25%";position:absolute;top:18px;left:-38px;
    background:var(--crimson);color:#fff;font-size:12px;font-weight:900;
    padding:6px 44px;transform:rotate(-40deg);
  }
  .price-card img.product{max-width:150px;margin:0 auto 18px;}
  .price-row{display:flex;align-items:baseline;justify-content:center;gap:10px;margin:8px 0 4px;}
  .price-row .old{font-size:19px;color:#a9a9a9;text-decoration:line-through;}
  .price-row .new{font-family:'El Messiri',serif;font-size:44px;font-weight:700;color:var(--ink);}
  .price-row .cur{font-size:16px;color:var(--ink-soft);align-self:flex-end;}
  .price-perks{
    display:flex;flex-direction:column;gap:10px;margin:22px 0;text-align:right;
  }
  .price-perks li{list-style:none;display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--ink-soft);}
  .price-perks svg{width:18px;height:18px;color:var(--mint);flex-shrink:0;}

  /* ---------- Order form ---------- */
  .order-section{background:var(--ink-2);color:#fff;border-radius:28px;margin:0 22px;padding:50px 22px;}
  @media(min-width:700px){ .order-section{margin:0 auto;max-width:1080px;padding:56px 46px;} }
  .order-grid{display:grid;gap:36px;}
  @media(min-width:800px){ .order-grid{grid-template-columns:1fr 1fr;} }
  .order-section .section-head{margin-bottom:24px;text-align:right;max-width:none;}
  .order-section .section-head p{color:#cfe0dc;}
  form{display:flex;flex-direction:column;gap:14px;}
  .field label{display:block;font-size:13.5px;margin-bottom:6px;color:#cfe0dc;}
  .field input,.field select{
    width:100%;padding:13px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.18);
    background:rgba(255,255,255,.06);color:#fff;font-family:'Tajawal',sans-serif;font-size:15px;
  }
  .field input::placeholder{color:#8fa8a3;}
  .field input:focus,.field select:focus{outline:2px solid var(--gold);outline-offset:1px;}
  .field input.invalid{border-color:var(--crimson);outline:2px solid rgba(140,58,99,.35);}
  .field-error{
    display:none;color:#ffd2e2;background:rgba(140,58,99,.18);
    border:1px solid var(--crimson);border-radius:8px;
    font-size:12.5px;padding:7px 10px;margin-top:6px;
  }
  .field-error.show{display:block;}
  .shipping-fields{
    display:none;flex-direction:column;gap:14px;
    background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);
    border-radius:12px;padding:16px;margin:4px 0;
  }
  .shipping-fields.show{display:flex;}
  .qty-row{display:flex;gap:10px;}
  .qty-opt{
    flex:1;border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:12px 8px;
    text-align:center;cursor:pointer;background:rgba(255,255,255,.04);
  }
  .qty-opt input{display:none;}
  .qty-opt.active{border-color:var(--gold);background:rgba(201,152,46,.15);}
  .qty-opt b{display:block;font-family:'El Messiri',serif;font-size:16px;}
  .qty-opt span{font-size:12px;color:#cfe0dc;}
  .form-note{font-size:12.5px;color:#a8c2bc;margin-top:6px;}

  /* ---------- Trust footer ---------- */
  .trust-strip{display:grid;grid-template-columns:1fr;gap:16px;}
  .stats-bar{
    display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
    background:var(--ink);border-radius:20px;padding:26px 16px;margin:0 0 8px;
  }
  .stat-item{text-align:center;color:#fff;}
  .stat-item b{
    display:block;font-family:'El Messiri',serif;font-weight:700;
    font-size:clamp(22px,5vw,30px);color:var(--gold);
  }
  .stat-item .stars{font-size:.7em;margin-right:2px;}
  .stat-item span{font-size:12.5px;color:#cfc3e6;}
  @media(min-width:700px){ .trust-strip{grid-template-columns:repeat(3,1fr);} }
  .trust-item{
    background:var(--paper-2);border:1px solid var(--line);border-radius:16px;
    padding:22px;text-align:center;
  }
  .trust-item img{height:44px;margin:0 auto 12px;}
  .trust-item h3{font-size:15px;margin-bottom:4px;}
  .trust-item p{font-size:13px;color:var(--ink-soft);}

  /* ---------- FAQ ---------- */
  .faq-item{border-bottom:1px solid var(--line);padding:18px 0;}
  .faq-q{
    display:flex;justify-content:space-between;align-items:center;cursor:pointer;
    font-family:'El Messiri',serif;font-weight:600;font-size:16.5px;
  }
  .faq-q svg{width:18px;height:18px;flex-shrink:0;transition:transform .25s ease;color:var(--gold-deep);}
  .faq-item.open .faq-q svg{transform:rotate(45deg);}
  .faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;color:var(--ink-soft);font-size:14.5px;}
  .faq-item.open .faq-a{max-height:320px;padding-top:10px;}

  footer{background:var(--ink);color:#c6d8d3;padding:30px 0;text-align:center;font-size:13px;}
  .social-row{display:flex;justify-content:center;gap:14px;margin:16px 0;}
  .social-row a{
    width:38px;height:38px;border-radius:50%;
    background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
    display:flex;align-items:center;justify-content:center;
    color:#fff;transition:transform .18s ease, background .18s ease;
  }
  .social-row a:hover{transform:translateY(-2px);background:var(--gold);color:#26200f;}
  .social-row svg{width:18px;height:18px;}
  footer b{color:#fff;}

  /* ---------- Sticky mobile CTA ---------- */
  .sticky-cta{
    position:fixed;bottom:0;left:0;right:0;z-index:60;
    background:var(--paper-2);border-top:1px solid var(--line);
    box-shadow:0 -8px 22px -12px rgba(0,0,0,.25);
    padding:10px 14px;display:flex;align-items:center;gap:12px;
  }
  .sticky-cta .p{font-size:13px;color:var(--ink-soft);flex-shrink:0;}
  .sticky-cta .p b{display:block;font-family:'El Messiri',serif;font-size:18px;color:var(--crimson);}
  .sticky-cta .btn{flex:1;padding:13px 10px;font-size:15px;}
  @media(min-width:880px){ .sticky-cta{display:none;} }
  body{padding-bottom:74px;}
  @media(min-width:880px){ body{padding-bottom:0;} }

  /* ================= Accessibility ================= */
  .skip-link{
    position:absolute;right:-9999px;top:0;z-index:200;
    background:var(--gold);color:#26200f;padding:12px 20px;
    font-weight:900;border-radius:0 0 10px 10px;text-decoration:none;
  }
  .skip-link:focus{right:12px;}
  :focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:4px;}
  .sr-only{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
  }

  /* ================= لماذا يحدث التعرق ================= */
  .why-grid{display:grid;gap:18px;grid-template-columns:1fr;max-width:900px;margin:0 auto;}
  @media(min-width:760px){ .why-grid{grid-template-columns:1fr 1fr;} }
  .why-card{
    background:var(--paper-2);border:1px solid var(--line);
    border-radius:var(--radius);padding:22px 24px;
  }
  .why-card h3{font-size:17px;margin-bottom:8px;color:var(--ink);}
  .why-card p{font-size:14.5px;color:var(--ink-soft);}
  .answer-box{
    background:var(--paper-2);border-right:4px solid var(--gold);
    border-radius:0 14px 14px 0;padding:20px 22px;margin:0 auto 30px;max-width:760px;
    box-shadow:var(--shadow);
  }
  .answer-box p{font-size:16px;color:var(--ink);line-height:1.9;}

  /* ================= جداول المقارنة ================= */
  .cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 auto;max-width:900px;}
  .cmp-table{
    width:100%;min-width:560px;border-collapse:collapse;
    background:var(--paper-2);border-radius:var(--radius);overflow:hidden;
    box-shadow:var(--shadow);
  }
  .cmp-table th,.cmp-table td{
    padding:14px 12px;text-align:right;font-size:14px;border-bottom:1px solid var(--line);
  }
  .cmp-table thead th{
    background:var(--ink);color:#fff;font-family:'El Messiri',serif;font-size:14.5px;font-weight:700;
  }
  .cmp-table thead th.hl{background:var(--gold-deep);color:#fff;}
  .cmp-table tbody th{
    font-family:'Tajawal',sans-serif;font-weight:700;color:var(--ink);
    background:var(--paper);white-space:nowrap;
  }
  .cmp-table td{color:var(--ink-soft);}
  .cmp-table td.hl{background:rgba(201,152,46,.08);color:var(--ink);font-weight:700;}
  .cmp-table tr:last-child th,.cmp-table tr:last-child td{border-bottom:none;}
  .cmp-note{font-size:12.5px;color:var(--ink-soft);text-align:center;margin-top:12px;}

  /* ================= هل المنتج مناسب لك ================= */
  .fit-grid{display:grid;gap:18px;grid-template-columns:1fr;max-width:860px;margin:0 auto;}
  @media(min-width:760px){ .fit-grid{grid-template-columns:1fr 1fr;} }
  .fit-col{border-radius:var(--radius);padding:24px;border:1px solid var(--line);background:var(--paper-2);}
  .fit-col.yes{border-color:rgba(127,169,143,.5);background:rgba(127,169,143,.07);}
  .fit-col.no{border-color:rgba(140,58,99,.35);background:rgba(140,58,99,.05);}
  .fit-col h3{font-size:17px;margin-bottom:14px;display:flex;align-items:center;gap:9px;}
  .fit-col ul{list-style:none;display:flex;flex-direction:column;gap:11px;}
  .fit-col li{display:flex;gap:10px;font-size:14.5px;color:var(--ink-soft);line-height:1.65;}
  .fit-col li svg{width:17px;height:17px;flex-shrink:0;margin-top:3px;}
  .fit-col.yes li svg{color:#4d8567;}
  .fit-col.no li svg{color:var(--crimson);}

  /* ================= طريقة الاستخدام ================= */
  .use-steps{display:grid;gap:16px;grid-template-columns:1fr;max-width:860px;margin:0 auto;}
  @media(min-width:760px){ .use-steps{grid-template-columns:repeat(2,1fr);} }
  .use-step{
    background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);
    padding:22px;display:flex;gap:15px;align-items:flex-start;
  }
  .use-step .num{
    flex-shrink:0;width:34px;height:34px;border-radius:50%;
    background:var(--ink);color:var(--gold);font-family:'El Messiri',serif;
    font-weight:700;font-size:16px;display:flex;align-items:center;justify-content:center;
  }
  .use-step h3{font-size:16px;margin-bottom:5px;}
  .use-step p{font-size:14px;color:var(--ink-soft);}

  /* ================= مراجعات ================= */
  .reviews-grid{display:grid;gap:16px;grid-template-columns:1fr;max-width:900px;margin:0 auto;}
  @media(min-width:760px){ .reviews-grid{grid-template-columns:repeat(3,1fr);} }
  .review-card{
    background:var(--paper-2);border:1px solid var(--line);
    border-radius:var(--radius);padding:22px;display:flex;flex-direction:column;gap:10px;
  }
  .review-card .rc-stars{color:var(--gold);font-size:15px;letter-spacing:2px;}
  .review-card blockquote{font-size:14.5px;color:var(--ink-soft);line-height:1.75;}
  .review-card figcaption{font-size:13px;color:var(--ink);font-weight:700;margin-top:auto;}
  .review-card figcaption span{display:block;font-weight:400;font-size:12px;color:var(--ink-soft);}
  .review-empty{
    grid-column:1/-1;text-align:center;padding:34px 22px;
    border:2px dashed var(--line);border-radius:var(--radius);color:var(--ink-soft);font-size:14px;
  }

  /* ================= WhatsApp ================= */
  .btn-wa{background:#1f8a4c;color:#fff;box-shadow:0 14px 28px -12px rgba(31,138,76,.5);}
  .btn-wa:hover{background:#1a7541;transform:translateY(-2px);}
  .btn-wa svg{width:20px;height:20px;flex-shrink:0;}
  .cta-pair{display:flex;flex-wrap:wrap;gap:12px;align-items:center;}
  .cta-pair .btn{flex:1 1 auto;min-width:190px;}
  .cta-band{
    background:var(--ink);border-radius:24px;margin:0 22px;padding:34px 24px;text-align:center;color:#fff;
  }
  @media(min-width:700px){ .cta-band{margin:0 auto;max-width:1080px;} }
  .cta-band h2{font-size:clamp(20px,3.5vw,26px);color:#fff;margin-bottom:8px;}
  .cta-band p{color:#c6d8d3;font-size:14.5px;margin-bottom:20px;}

  /* ================= المكونات ================= */
  .ingredients{
    background:var(--paper-2);border:1px solid var(--line);
    border-radius:var(--radius);padding:26px;max-width:860px;margin:0 auto;
  }
  .ing-table{width:100%;border-collapse:collapse;font-size:14.5px;}
  .ing-table th,.ing-table td{text-align:right;padding:13px 10px;border-bottom:1px solid var(--line);vertical-align:top;}
  .ing-table thead th{font-family:'El Messiri',serif;font-size:14px;color:var(--ink);background:var(--paper);white-space:nowrap;}
  .ing-table td{color:var(--ink-soft);}
  .ing-table td b{color:var(--ink);}
  .ing-note{
    margin-top:18px;padding:16px 18px;border-radius:12px;
    background:rgba(127,169,143,.12);border:1px solid rgba(127,169,143,.35);
    font-size:13.5px;color:#3e6552;line-height:1.85;
  }
  .honesty{
    margin-top:14px;padding:16px 18px;border-radius:12px;
    background:rgba(201,152,46,.10);border:1px solid rgba(201,152,46,.35);
    font-size:13.5px;color:var(--gold-deep);line-height:1.85;
  }
  .honesty b{color:var(--ink);}
  .honesty > b:first-child{display:block;margin-bottom:6px;font-family:'El Messiri',serif;font-size:15px;}

  /* ================= الباقات ================= */
  .qty-opt{position:relative;}
  .qty-opt .per{display:block;font-size:11px;color:#9fd0bd;margin-top:3px;}
  .qty-opt .tag{
    position:absolute;top:-9px;right:50%;transform:translateX(50%);
    background:var(--gold);color:#26200f;font-size:10px;font-weight:900;
    padding:2px 9px;border-radius:999px;white-space:nowrap;
  }
  .order-total{
    display:flex;justify-content:space-between;align-items:center;
    background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
    border-radius:12px;padding:14px 16px;margin-top:4px;
  }
  .order-total span{font-size:14px;color:#cfe0dc;}
  .order-total b{font-family:'El Messiri',serif;font-size:26px;color:var(--gold);}
  .objections{display:flex;flex-direction:column;gap:8px;margin-top:14px;}
  .objections div{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:#cfe0dc;line-height:1.6;}
  .objections svg{width:15px;height:15px;color:var(--mint);flex-shrink:0;margin-top:3px;}

  /* ================= FAQ (زرار بدل div عشان لوحة المفاتيح) ================= */
  .faq-q{
    width:100%;background:none;border:none;cursor:pointer;
    display:flex;justify-content:space-between;align-items:center;gap:12px;
    font-family:'El Messiri',serif;font-weight:600;font-size:16.5px;
    color:var(--ink);text-align:right;padding:0;
  }
  .faq-item.open .faq-a{max-height:420px;padding-top:10px;}

  /* ================= روابط داخلية ================= */
  .hub-links{display:grid;gap:12px;grid-template-columns:1fr;max-width:860px;margin:0 auto;}
  @media(min-width:700px){ .hub-links{grid-template-columns:1fr 1fr;} }
  .hub-links a{
    display:flex;justify-content:space-between;align-items:center;gap:10px;
    background:var(--paper-2);border:1px solid var(--line);border-radius:12px;
    padding:15px 18px;text-decoration:none;color:var(--ink);
    font-family:'El Messiri',serif;font-size:15.5px;
    transition:border-color .18s ease, transform .18s ease;
  }
  .hub-links a:hover{border-color:var(--gold);transform:translateY(-2px);}
  .hub-links a span{font-size:12.5px;color:var(--ink-soft);font-family:'Tajawal',sans-serif;}

  /* ══════════════════════════════════════════════════════════
     مفاتيح التشغيل والإيقاف
     كل حاجة هنا مقفولة دلوقتي. عشان تشغّل أي واحدة، روح لسطر
     <body> تحت وضيف الكلاس المكتوب جنبها. مش محتاج تعدّل أي حاجة تانية.

       wa-on    →  زراير الواتساب (كلها مع بعض)
       why-on   →  قسم "ليه في ناس بتعرق أكتر من اللازم؟"
       fit-on   →  قسم "هل درايزد مناسب لك؟"

     مثال: عشان تشغّل الواتساب بس   →  <body class="wa-on">
           عشان تشغّل الكل           →  <body class="wa-on why-on fit-on">

     ملاحظة: المحتوى مش متمسوح — هو موجود في الملف ومخفي بس.
     ══════════════════════════════════════════════════════════ */
  body:not(.wa-on)  .js-wa  { display:none !important; }
  body:not(.why-on) .js-why { display:none !important; }
  body:not(.fit-on) .js-fit { display:none !important; }

  /* ══════════════════════════════════════════════════════════
     توحيد أحجام الصور
     المشكلة: الصور الأصلية أبعادها مختلفة عن بعض، فكانت بتطلع
     بأحجام غير متناسقة. الحل إننا نثبّت نسبة الإطار في الـ CSS
     بدل ما نعتمد على أبعاد الصورة نفسها.
     ده كمان بيحجز مكان الصورة قبل ما تتحمّل، فمفيش قفزة في التصميم.

     object-fit: cover   = بيملا الإطار وبيقص الزيادة (مناسب للصور)
     object-fit: contain = بيظهر الصورة كاملة من غير قص (مناسب للرسومات)
     غيّر بينهم من هنا لو حابب.
     ══════════════════════════════════════════════════════════ */

  /* صور الحالة (الرطوبة قبل/مع الاستخدام) — مربّعة ومتساوية */
  .ba-card img{
    width:100%;
    aspect-ratio:1 / 1;
    object-fit:cover;
    border-radius:10px;
    margin-bottom:10px;
  }

  /* رسم آلية العمل — كامل من غير قص */
  .how-img img{
    width:100%;
    aspect-ratio:4 / 3;
    object-fit:contain;
    background:var(--paper);
  }

  /* صورة المنتج في الهيرو — نسبتها الطبيعية، بحد أقصى للطول */
  .hero-visual img{
    max-height:440px;
    width:auto;
    object-fit:contain;
  }
  @media(max-width:879px){
    .hero-visual img{max-height:320px;}
  }