/* =====================================================================
   CAR OPTIMA — style.css
   Design system premium · Mobile First · RTL + LTR (propriétés logiques)
   ===================================================================== */

/* ============ 1. TOKENS ============ */
:root{
  /* Surfaces */
  --bg:#0A0E13;
  --bg-2:#0E131A;
  --surface:#12181F;
  --surface-2:#171E27;
  --surface-3:#1E262F;
  --line:#242E39;
  --line-2:#2F3A47;

  /* Brand */
  --brand:#FF5A1F;
  --brand-2:#FF8452;
  --brand-dark:#D93F0C;
  --brand-soft:rgba(255,90,31,.12);
  --brand-glow:rgba(255,90,31,.42);

  /* Text */
  --text:#F3F6F9;
  --text-2:#C3CCD7;
  --muted:#93A0AE;
  --dim:#66727F;

  /* Status */
  --ok:#28C765;
  --ok-soft:rgba(40,199,101,.13);
  --gold:#FFB829;
  --danger:#F4453C;

  /* Layout */
  --wrap:1240px;
  --wrap-narrow:900px;
  --r-sm:10px;
  --r:16px;
  --r-lg:22px;
  --r-xl:30px;
  --r-pill:999px;

  /* Elevation */
  --sh-1:0 2px 8px rgba(0,0,0,.35);
  --sh-2:0 10px 30px rgba(0,0,0,.45);
  --sh-3:0 24px 60px rgba(0,0,0,.55);
  --sh-brand:0 12px 34px rgba(255,90,31,.34);

  /* Motion */
  --e:cubic-bezier(.22,.68,.32,1);
  --t-fast:.18s var(--e);
  --t:.32s var(--e);
  --t-slow:.6s var(--e);

  /* Bars */
  --header-h:66px;
  --announce-h:44px;
  --mobilebar-h:78px;

  --font:"Cairo","Tajawal",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans Arabic",sans-serif;
}

html[dir="ltr"]{ --font:"Inter","Cairo",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; }

/* ============ 2. RESET ============ */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 16px);
}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  line-height:1.65;
  font-size:16px;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  padding-bottom:0;
}
img,svg,video,canvas{ display:block; max-width:100%; height:auto; }
button,input,select,textarea{ font:inherit; color:inherit; background:none; border:none; outline:none; }
button{ cursor:pointer; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
table{ border-collapse:collapse; width:100%; }
h1,h2,h3,h4{ line-height:1.22; font-weight:800; letter-spacing:-.01em; }
:focus-visible{ outline:3px solid var(--brand); outline-offset:3px; border-radius:6px; }
::selection{ background:var(--brand); color:#fff; }
.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;
}
.skip-link{
  position:fixed; inset-inline-start:12px; top:-100px; z-index:9999;
  background:var(--brand); color:#fff; padding:12px 20px; border-radius:var(--r-sm); font-weight:700;
  transition:top var(--t-fast);
}
.skip-link:focus{ top:12px; }

/* Scrollbar */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--bg-2); }
::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:20px; }
::-webkit-scrollbar-thumb:hover{ background:var(--brand); }

/* ============ 3. LAYOUT ============ */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:18px; }
.wrap-narrow{ max-width:var(--wrap-narrow); }
.section{ padding-block:64px; position:relative; }
.section--tight{ padding-block:44px; }
.section--alt{ background:linear-gradient(180deg,var(--bg-2),var(--bg)); }
.section--surface{ background:var(--bg-2); }
.divider{ height:1px; background:linear-gradient(90deg,transparent,var(--line),transparent); }

.sec-head{ text-align:center; margin-bottom:38px; }
.sec-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.78rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brand); background:var(--brand-soft);
  border:1px solid rgba(255,90,31,.28);
  padding:7px 16px; border-radius:var(--r-pill); margin-bottom:16px;
}
.sec-title{ font-size:clamp(1.7rem,5.2vw,2.7rem); margin-bottom:12px; }
.sec-title em{ color:var(--brand); font-style:normal; }
.sec-sub{ color:var(--muted); font-size:clamp(.98rem,2.4vw,1.1rem); max-width:640px; margin-inline:auto; }

/* ============ 4. BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 26px; border-radius:var(--r-pill);
  font-weight:800; font-size:1rem; line-height:1;
  border:1px solid transparent; white-space:nowrap;
  transition:transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), border-color var(--t-fast), filter var(--t-fast);
  will-change:transform;
}
.btn svg{ width:20px; height:20px; flex:none; }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0) scale(.985); }

.btn--primary{
  background:linear-gradient(135deg,var(--brand-2),var(--brand));
  color:#fff; box-shadow:var(--sh-brand);
}
.btn--primary:hover{ box-shadow:0 16px 44px rgba(255,90,31,.5); filter:brightness(1.06); }

.btn--wa{ background:#25D366; color:#0A2E17; box-shadow:0 10px 26px rgba(37,211,102,.3); }
.btn--wa:hover{ filter:brightness(1.06); box-shadow:0 14px 34px rgba(37,211,102,.42); }

.btn--ghost{ background:var(--surface-2); color:var(--text); border-color:var(--line-2); }
.btn--ghost:hover{ border-color:var(--brand); background:var(--surface-3); }

.btn--outline{ background:transparent; color:var(--text); border-color:var(--line-2); }
.btn--outline:hover{ border-color:var(--brand); color:var(--brand); }

.btn--lg{ padding:19px 34px; font-size:1.12rem; width:100%; }
.btn--sm{ padding:10px 18px; font-size:.88rem; }
.btn--block{ width:100%; }

.btn-pulse{ position:relative; }
.btn-pulse::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  border:2px solid var(--brand); opacity:0; pointer-events:none;
  animation:btnPulse 2.4s var(--e) infinite;
}
@keyframes btnPulse{
  0%{ transform:scale(1); opacity:.85; }
  70%{ transform:scale(1.14); opacity:0; }
  100%{ transform:scale(1.14); opacity:0; }
}

/* ============ 5. ANNOUNCE BAR ============ */
.announce{
  background:linear-gradient(90deg,var(--brand-dark),var(--brand),var(--brand-dark));
  background-size:200% 100%;
  animation:slideBg 9s linear infinite;
  color:#fff; position:relative; z-index:60;
}
@keyframes slideBg{ to{ background-position:200% 0; } }
.announce__in{
  min-height:var(--announce-h);
  display:flex; align-items:center; justify-content:center; gap:14px;
  flex-wrap:wrap; padding-block:8px; text-align:center;
}
.announce__txt{ font-weight:800; font-size:.9rem; }
.announce__txt b{ text-decoration:underline; text-underline-offset:3px; }
.countdown{ display:inline-flex; align-items:center; gap:5px; direction:ltr; }
.cd-box{
  background:rgba(0,0,0,.34); border-radius:8px;
  min-width:40px; padding:4px 6px; text-align:center;
  font-weight:800; font-size:1rem; font-variant-numeric:tabular-nums;
  display:flex; flex-direction:column; line-height:1.05;
}
.cd-box small{ font-size:.52rem; font-weight:700; opacity:.82; letter-spacing:.05em; }
.cd-sep{ font-weight:800; opacity:.7; }

/* ============ 6. HEADER ============ */
.header{
  position:sticky; top:0; z-index:70;
  background:rgba(10,14,19,.78);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border-bottom:1px solid var(--line);
  transition:box-shadow var(--t), background var(--t);
}
.header.is-stuck{ box-shadow:0 8px 30px rgba(0,0,0,.5); background:rgba(10,14,19,.94); }
.header__in{
  min-height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between; gap:14px;
}
.brand{ display:flex; align-items:center; gap:10px; flex:none; }
.brand img{ height:38px; width:auto; }
.header__nav{ display:none; gap:26px; font-size:.92rem; font-weight:700; color:var(--text-2); }
.header__nav a{ position:relative; padding-block:6px; transition:color var(--t-fast); }
.header__nav a::after{
  content:""; position:absolute; inset-inline-start:0; bottom:0; height:2px; width:0;
  background:var(--brand); transition:width var(--t);
}
.header__nav a:hover{ color:var(--text); }
.header__nav a:hover::after{ width:100%; }
.header__actions{ display:flex; align-items:center; gap:8px; }

.icon-btn{
  width:42px; height:42px; border-radius:var(--r-pill);
  display:grid; place-items:center;
  background:var(--surface-2); border:1px solid var(--line-2);
  transition:all var(--t-fast);
}
.icon-btn svg{ width:20px; height:20px; }
.icon-btn:hover{ border-color:var(--brand); color:var(--brand); transform:translateY(-2px); }
.icon-btn--wa{ background:rgba(37,211,102,.14); border-color:rgba(37,211,102,.4); color:#25D366; }
.icon-btn--wa:hover{ background:#25D366; color:#08240F; border-color:#25D366; }

.lang-switch{
  display:flex; background:var(--surface-2); border:1px solid var(--line-2);
  border-radius:var(--r-pill); padding:3px; gap:2px;
}
.lang-switch button{
  padding:6px 12px; border-radius:var(--r-pill);
  font-size:.78rem; font-weight:800; color:var(--muted);
  transition:all var(--t-fast);
}
.lang-switch button.is-active{ background:var(--brand); color:#fff; }

.header__cta{ display:none; }

/* ============ 7. HERO ============ */
.hero{ position:relative; padding-block:34px 56px; overflow:hidden; }
.hero::before{
  content:""; position:absolute; inset-inline-start:-15%; top:-25%;
  width:70%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle,rgba(255,90,31,.16),transparent 68%);
  pointer-events:none; z-index:0;
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px; opacity:.16;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 30%,#000,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 30%,#000,transparent 75%);
}
.hero__grid{ position:relative; z-index:1; display:grid; gap:30px; }
.hero__col{ min-width:0; }

.pill-row{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.pill{
  display:inline-flex; align-items:center; gap:7px;
  font-size:.76rem; font-weight:800;
  padding:7px 13px; border-radius:var(--r-pill);
  background:var(--surface-2); border:1px solid var(--line-2); color:var(--text-2);
}
.pill svg{ width:14px; height:14px; }
.pill--brand{ background:var(--brand-soft); border-color:rgba(255,90,31,.35); color:var(--brand-2); }
.pill--ok{ background:var(--ok-soft); border-color:rgba(40,199,101,.35); color:var(--ok); }
.pill--live{ background:rgba(244,69,60,.12); border-color:rgba(244,69,60,.34); color:#FF7B74; }

.dot-live{
  width:8px; height:8px; border-radius:50%; background:#F4453C; flex:none;
  box-shadow:0 0 0 0 rgba(244,69,60,.7); animation:dotPulse 1.7s infinite;
}
.dot-live--ok{ background:var(--ok); box-shadow:0 0 0 0 rgba(40,199,101,.7); }
@keyframes dotPulse{
  0%{ box-shadow:0 0 0 0 currentColor; opacity:1; }
  70%{ box-shadow:0 0 0 9px transparent; opacity:.75; }
  100%{ box-shadow:0 0 0 0 transparent; opacity:1; }
}

.hero__title{ font-size:clamp(1.85rem,6.4vw,3.15rem); margin-bottom:14px; line-height:1.32; }
.hero__title em{ font-style:normal; color:var(--brand); }
.hero__title .hl{
  background:linear-gradient(180deg,transparent 62%,rgba(255,90,31,.34) 62%);
  padding-inline:3px;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
.hero__sub{ color:var(--text-2); font-size:clamp(1rem,2.8vw,1.16rem); margin-bottom:22px; max-width:56ch; }

.rating-row{ display:flex; align-items:center; gap:10px; margin-bottom:20px; flex-wrap:wrap; }
.stars{ display:inline-flex; gap:2px; color:var(--gold); }
.stars svg{ width:17px; height:17px; }
.rating-row b{ font-size:.95rem; }
.rating-row span{ color:var(--muted); font-size:.88rem; }

/* Benefits list */
.bullets{ display:grid; gap:11px; margin-bottom:24px; }
.bullets li{ display:flex; align-items:flex-start; gap:11px; font-size:.98rem; color:var(--text-2); }
.bullets .ck{
  flex:none; width:23px; height:23px; border-radius:50%; margin-top:2px;
  background:var(--ok-soft); color:var(--ok); display:grid; place-items:center;
  border:1px solid rgba(40,199,101,.32);
}
.bullets .ck svg{ width:13px; height:13px; }
.bullets b{ color:var(--text); }

/* Price block */
.pricebox{
  background:linear-gradient(150deg,var(--surface-2),var(--surface));
  border:1px solid var(--line-2); border-radius:var(--r-lg);
  padding:20px; margin-bottom:20px; position:relative; overflow:hidden;
}
.pricebox::before{
  content:""; position:absolute; inset-block:0; inset-inline-start:0; width:4px;
  background:linear-gradient(180deg,var(--brand-2),var(--brand-dark));
}
.price-line{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:8px; }
.price-now{
  font-size:clamp(2rem,7vw,2.9rem); font-weight:800; color:#fff;
  line-height:1; letter-spacing:-.02em;
}
.price-now .cur{ font-size:.46em; font-weight:700; color:var(--muted); margin-inline-start:4px; }
.price-old{ font-size:1.15rem; color:var(--dim); text-decoration:line-through; font-weight:700; }
.badge-off{
  background:var(--danger); color:#fff; font-weight:800; font-size:.82rem;
  padding:5px 12px; border-radius:var(--r-pill); box-shadow:0 6px 18px rgba(244,69,60,.34);
}
.price-note{ font-size:.86rem; color:var(--muted); display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.price-note svg{ width:15px; height:15px; color:var(--ok); flex:none; }
.save-tag{
  display:inline-flex; align-items:center; gap:6px; margin-top:10px;
  background:var(--ok-soft); color:var(--ok); border:1px solid rgba(40,199,101,.3);
  padding:6px 13px; border-radius:var(--r-pill); font-weight:800; font-size:.84rem;
}

/* Stock bar */
.stockbar{ margin-top:14px; }
.stockbar__top{ display:flex; justify-content:space-between; font-size:.82rem; font-weight:700; margin-bottom:7px; }
.stockbar__top .left{ color:var(--danger); }
.stockbar__top .right{ color:var(--muted); }
.stockbar__track{ height:8px; border-radius:var(--r-pill); background:var(--surface-3); overflow:hidden; }
.stockbar__fill{
  height:100%; border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--danger),#FF8452);
  transition:width 1.1s var(--e); position:relative;
}
.stockbar__fill::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
  animation:shimmer 2s linear infinite;
}
@keyframes shimmer{ from{ transform:translateX(-100%); } to{ transform:translateX(100%); } }

.cta-stack{ display:grid; gap:11px; }
.cta-sub{ text-align:center; font-size:.83rem; color:var(--muted); }
.cta-sub b{ color:var(--text-2); }

/* Trust badges under CTA */
.trust-mini{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:20px;
  padding-top:18px; border-top:1px solid var(--line);
}
.trust-mini div{ text-align:center; }
.trust-mini svg{ width:24px; height:24px; color:var(--brand); margin-inline:auto; margin-bottom:6px; }
.trust-mini span{ display:block; font-size:.74rem; font-weight:700; color:var(--text-2); line-height:1.35; }

/* ============ 8. GALLERY ============ */
.gal{ display:grid; gap:12px; }
.gal__stage{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  background:var(--surface); border:1px solid var(--line-2);
  aspect-ratio:1/1; box-shadow:var(--sh-2);
  touch-action:pan-y;
}
.gal__track{ position:absolute; inset:0; }
.gal__slide{
  position:absolute; inset:0; opacity:0; visibility:hidden;
  transition:opacity .42s var(--e), transform .42s var(--e);
  transform:scale(1.02);
  display:grid; place-items:center;
}
.gal__slide.is-active{ opacity:1; visibility:visible; transform:scale(1); }
.gal__slide img,.gal__slide video{ width:100%; height:100%; object-fit:cover; }
.gal__slide iframe{ width:100%; height:100%; border:0; }
.gal__stage.is-zoom .gal__slide.is-active img{ cursor:zoom-in; }

.gal__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  background:rgba(10,14,19,.72); border:1px solid var(--line-2);
  backdrop-filter:blur(8px); display:grid; place-items:center;
  color:#fff; z-index:3; transition:all var(--t-fast); opacity:.85;
}
.gal__nav:hover{ background:var(--brand); border-color:var(--brand); opacity:1; }
.gal__nav svg{ width:20px; height:20px; }
.gal__nav--prev{ inset-inline-start:12px; }
.gal__nav--next{ inset-inline-end:12px; }
html[dir="rtl"] .gal__nav svg{ transform:scaleX(-1); }

.gal__tools{ position:absolute; top:12px; inset-inline-end:12px; z-index:3; display:grid; gap:8px; }
.gal__tool{
  width:38px; height:38px; border-radius:50%;
  background:rgba(10,14,19,.72); border:1px solid var(--line-2);
  backdrop-filter:blur(8px); display:grid; place-items:center; color:#fff;
  transition:all var(--t-fast);
}
.gal__tool:hover{ background:var(--brand); border-color:var(--brand); }
.gal__tool svg{ width:17px; height:17px; }

.gal__tag{
  position:absolute; top:12px; inset-inline-start:12px; z-index:3;
  background:var(--brand); color:#fff; font-weight:800; font-size:.72rem;
  padding:6px 12px; border-radius:var(--r-pill); box-shadow:var(--sh-1);
}
.gal__count{
  position:absolute; bottom:12px; inset-inline-end:12px; z-index:3;
  background:rgba(10,14,19,.75); border:1px solid var(--line-2);
  backdrop-filter:blur(8px); color:var(--text-2);
  font-size:.75rem; font-weight:700; padding:5px 11px; border-radius:var(--r-pill);
  direction:ltr;
}

.gal__thumbs{
  display:flex; gap:10px; overflow-x:auto; scrollbar-width:thin;
  padding-bottom:4px; scroll-snap-type:x mandatory;
}
.gal__thumbs::-webkit-scrollbar{ height:5px; }
.thumb{
  position:relative; flex:none; width:70px; aspect-ratio:1;
  border-radius:12px; overflow:hidden; scroll-snap-align:start;
  border:2px solid var(--line-2); background:var(--surface);
  transition:all var(--t-fast); opacity:.62;
}
.thumb img{ width:100%; height:100%; object-fit:cover; }
.thumb:hover{ opacity:1; border-color:var(--line-2); transform:translateY(-2px); }
.thumb.is-active{ opacity:1; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); }
.thumb__play{
  position:absolute; inset:0; display:grid; place-items:center;
  background:rgba(0,0,0,.42);
}
.thumb__play svg{ width:22px; height:22px; color:#fff; filter:drop-shadow(0 2px 6px rgba(0,0,0,.6)); }

/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:200; display:none;
  background:rgba(6,9,12,.96); backdrop-filter:blur(10px);
  place-items:center; padding:20px;
}
.lightbox.is-open{ display:grid; animation:fadeIn .25s var(--e); }
.lightbox__inner{
  position:relative; width:100%; max-width:1100px; max-height:88vh;
  display:grid; place-items:center;
}
.lightbox__media{ max-width:100%; max-height:88vh; border-radius:var(--r); overflow:hidden; }
.lightbox__media img{ max-height:88vh; width:auto; object-fit:contain; }
.lightbox__media video{ max-height:88vh; width:auto; }
.lightbox__media iframe{ width:min(90vw,960px); aspect-ratio:16/9; border:0; border-radius:var(--r); }
.lightbox__close{
  position:absolute; top:-6px; inset-inline-end:-6px; z-index:5;
  width:46px; height:46px; border-radius:50%;
  background:var(--surface-2); border:1px solid var(--line-2); color:#fff;
  display:grid; place-items:center; transition:all var(--t-fast);
}
.lightbox__close:hover{ background:var(--danger); border-color:var(--danger); transform:rotate(90deg); }
.lightbox__nav{
  position:fixed; top:50%; transform:translateY(-50%);
  width:52px; height:52px; border-radius:50%;
  background:var(--surface-2); border:1px solid var(--line-2); color:#fff;
  display:grid; place-items:center; transition:all var(--t-fast);
}
.lightbox__nav:hover{ background:var(--brand); border-color:var(--brand); }
.lightbox__nav--prev{ inset-inline-start:18px; }
.lightbox__nav--next{ inset-inline-end:18px; }
html[dir="rtl"] .lightbox__nav svg{ transform:scaleX(-1); }
.lightbox__cap{
  position:fixed; bottom:18px; inset-inline:0; text-align:center;
  color:var(--muted); font-size:.86rem; padding-inline:20px;
}
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }

/* ============ 9. STICKY BUY BOX (desktop) ============ */
.buybox{
  position:sticky; top:calc(var(--header-h) + 16px);
}

/* Mobile sticky bar */
.mobilebar{
  position:fixed; inset-inline:0; bottom:0; z-index:80;
  background:rgba(10,14,19,.95);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-top:1px solid var(--line-2);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  transform:translateY(120%); transition:transform .38s var(--e);
  box-shadow:0 -10px 34px rgba(0,0,0,.55);
}
.mobilebar.is-visible{ transform:translateY(0); }
.mobilebar__in{ display:flex; align-items:center; gap:10px; }
.mobilebar__price{ flex:none; line-height:1.15; }
.mobilebar__price .now{ font-size:1.24rem; font-weight:800; color:#fff; display:block; }
.mobilebar__price .old{ font-size:.76rem; color:var(--dim); text-decoration:line-through; }
.mobilebar__price .off{ font-size:.68rem; font-weight:800; color:var(--danger); margin-inline-start:5px; }
.mobilebar .btn{ flex:1; padding:14px 16px; font-size:.98rem; }
.mobilebar .icon-btn{ flex:none; width:48px; height:48px; }

/* ============ 10. TRUST STRIP ============ */
.trustbar{ background:var(--bg-2); border-block:1px solid var(--line); padding-block:22px; }
.trustbar__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.trustbar__item{ display:flex; align-items:center; gap:12px; }
.trustbar__ico{
  flex:none; width:42px; height:42px; border-radius:12px;
  background:var(--brand-soft); border:1px solid rgba(255,90,31,.24);
  display:grid; place-items:center; color:var(--brand);
}
.trustbar__ico svg{ width:21px; height:21px; }
.trustbar__item b{ display:block; font-size:.9rem; }
.trustbar__item span{ font-size:.78rem; color:var(--muted); }

/* ============ 11. CARDS ============ */
.cards{ display:grid; gap:16px; }
.card{
  background:linear-gradient(160deg,var(--surface-2),var(--surface));
  border:1px solid var(--line); border-radius:var(--r-lg);
  padding:26px 22px; transition:transform var(--t), border-color var(--t), box-shadow var(--t);
  position:relative; overflow:hidden;
}
.card::before{
  content:""; position:absolute; top:0; inset-inline-start:0; width:100%; height:3px;
  background:linear-gradient(90deg,var(--brand),transparent);
  transform:scaleX(0); transform-origin:inline-start; transition:transform var(--t);
}
.card:hover{ transform:translateY(-5px); border-color:var(--line-2); box-shadow:var(--sh-2); }
.card:hover::before{ transform:scaleX(1); }
.card__ico{
  width:52px; height:52px; border-radius:15px; margin-bottom:16px;
  background:var(--brand-soft); border:1px solid rgba(255,90,31,.24);
  display:grid; place-items:center; color:var(--brand);
}
.card__ico svg{ width:26px; height:26px; }
.card h3{ font-size:1.1rem; margin-bottom:9px; }
.card p{ color:var(--muted); font-size:.93rem; }
.card__num{
  position:absolute; top:16px; inset-inline-end:20px;
  font-size:2.6rem; font-weight:800; color:var(--line-2); line-height:1;
}

/* ============ 12. PROBLEM / SOLUTION ============ */
.pain{ display:grid; gap:18px; }
.pain__col{
  border-radius:var(--r-lg); padding:26px 22px; border:1px solid var(--line);
}
.pain__col--bad{ background:rgba(244,69,60,.05); border-color:rgba(244,69,60,.22); }
.pain__col--good{ background:rgba(40,199,101,.05); border-color:rgba(40,199,101,.24); }
.pain__col h3{ font-size:1.14rem; margin-bottom:18px; display:flex; align-items:center; gap:10px; }
.pain__col--bad h3{ color:#FF7B74; }
.pain__col--good h3{ color:var(--ok); }
.pain__col h3 svg{ width:24px; height:24px; flex:none; }
.pain__list{ display:grid; gap:13px; }
.pain__list li{ display:flex; gap:11px; font-size:.94rem; color:var(--text-2); align-items:flex-start; }
.pain__list li svg{ width:18px; height:18px; flex:none; margin-top:3px; }
.pain__col--bad li svg{ color:var(--danger); }
.pain__col--good li svg{ color:var(--ok); }

/* ============ 13. FEATURES ALTERNATING ============ */
.feat{ display:grid; gap:26px; align-items:center; margin-bottom:56px; }
.feat:last-child{ margin-bottom:0; }
.feat__media{
  border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line-2);
  background:var(--surface); box-shadow:var(--sh-2); position:relative;
}
.feat__media img{ width:100%; aspect-ratio:1/1; object-fit:cover; }
.feat__tag{
  position:absolute; top:14px; inset-inline-start:14px;
  background:rgba(10,14,19,.82); backdrop-filter:blur(8px);
  border:1px solid var(--line-2); color:var(--brand-2);
  font-size:.74rem; font-weight:800; padding:6px 13px; border-radius:var(--r-pill);
}
.feat__body h3{ font-size:clamp(1.3rem,4vw,1.75rem); margin-bottom:12px; }
.feat__body h3 em{ font-style:normal; color:var(--brand); }
.feat__body > p{ color:var(--muted); margin-bottom:18px; font-size:1rem; }
.feat__stats{ display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
.stat{
  background:var(--surface-2); border:1px solid var(--line-2);
  border-radius:var(--r); padding:12px 18px; flex:1; min-width:118px;
}
.stat b{ display:block; font-size:1.5rem; color:var(--brand); line-height:1.1; }
.stat span{ font-size:.76rem; color:var(--muted); font-weight:700; }

/* ============ 14. STEPS ============ */
.steps{ display:grid; gap:16px; counter-reset:s; }
.step{
  display:flex; gap:18px; align-items:flex-start;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:22px; transition:all var(--t);
}
.step:hover{ border-color:var(--brand); transform:translateX(0) translateY(-3px); }
.step__n{
  flex:none; width:46px; height:46px; border-radius:14px;
  background:linear-gradient(135deg,var(--brand-2),var(--brand));
  color:#fff; display:grid; place-items:center;
  font-size:1.24rem; font-weight:800; box-shadow:var(--sh-brand);
}
.step h3{ font-size:1.04rem; margin-bottom:6px; }
.step p{ color:var(--muted); font-size:.92rem; }
.step__time{
  display:inline-flex; align-items:center; gap:6px; margin-top:9px;
  font-size:.75rem; font-weight:800; color:var(--ok);
  background:var(--ok-soft); border:1px solid rgba(40,199,101,.28);
  padding:4px 11px; border-radius:var(--r-pill);
}

/* ============ 15. SPECS ============ */
.specs{
  border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; background:var(--surface);
}
.specs tr{ border-bottom:1px solid var(--line); }
.specs tr:last-child{ border-bottom:0; }
.specs tr:nth-child(odd){ background:rgba(255,255,255,.014); }
.specs td{ padding:15px 20px; font-size:.94rem; }
.specs td:first-child{ color:var(--muted); font-weight:700; width:52%; }
.specs td:last-child{ color:var(--text); font-weight:800; }
.specs tr:hover{ background:var(--brand-soft); }

/* ============ 16. BOX CONTENT ============ */
.boxgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.boxitem{
  display:flex; align-items:center; gap:12px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:15px; transition:all var(--t);
}
.boxitem:hover{ border-color:var(--brand); background:var(--surface-2); }
.boxitem__ico{
  flex:none; width:40px; height:40px; border-radius:11px;
  background:var(--brand-soft); color:var(--brand);
  display:grid; place-items:center; border:1px solid rgba(255,90,31,.2);
}
.boxitem__ico svg{ width:20px; height:20px; }
.boxitem span{ font-size:.87rem; font-weight:700; line-height:1.35; }

/* ============ 17. COMPARISON ============ */
.compare-wrap{ overflow-x:auto; border-radius:var(--r-lg); border:1px solid var(--line); }
.compare{ min-width:520px; background:var(--surface); }
.compare th,.compare td{ padding:15px 16px; text-align:center; border-bottom:1px solid var(--line); font-size:.9rem; }
.compare thead th{
  background:var(--surface-2); font-weight:800; font-size:.86rem;
  position:sticky; top:0;
}
.compare thead th:nth-child(2){ background:var(--brand-soft); color:var(--brand-2); }
.compare tbody td:first-child,.compare thead th:first-child{
  text-align:start; font-weight:700; color:var(--text-2); min-width:180px;
}
.compare tbody td:nth-child(2){ background:rgba(255,90,31,.055); font-weight:800; color:#fff; }
.compare tbody tr:last-child td{ border-bottom:0; }
.compare .yes{ color:var(--ok); }
.compare .no{ color:var(--danger); }
.compare svg{ width:19px; height:19px; display:inline-block; vertical-align:middle; }
.compare__crown{
  display:inline-flex; align-items:center; gap:6px; justify-content:center;
}

/* ============ 18. BEFORE / AFTER ============ */
.ba{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line-2); aspect-ratio:16/10; user-select:none;
  box-shadow:var(--sh-2); cursor:ew-resize; background:var(--surface);
  max-width:820px; margin-inline:auto;
}
.ba__layer{ position:absolute; inset:0; }
.ba__layer img{ width:100%; height:100%; object-fit:cover; }
.ba__layer--after{ clip-path:inset(0 0 0 50%); }
.ba__label{
  position:absolute; bottom:14px; z-index:3;
  background:rgba(10,14,19,.82); backdrop-filter:blur(8px);
  border:1px solid var(--line-2); padding:7px 15px;
  border-radius:var(--r-pill); font-size:.8rem; font-weight:800;
}
.ba__label--before{ inset-inline-start:14px; color:#FF7B74; }
.ba__label--after{ inset-inline-end:14px; color:var(--ok); }
.ba__handle{
  position:absolute; top:0; bottom:0; left:50%; width:3px;
  background:#fff; z-index:4; transform:translateX(-50%);
  box-shadow:0 0 20px rgba(0,0,0,.6);
}
.ba__knob{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:46px; height:46px; border-radius:50%;
  background:#fff; color:var(--bg); display:grid; place-items:center;
  box-shadow:0 6px 20px rgba(0,0,0,.5);
}
.ba__knob svg{ width:22px; height:22px; }

/* ============ 19. VIDEO ============ */
.videoblock{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line-2); background:var(--surface);
  aspect-ratio:16/9; box-shadow:var(--sh-3); max-width:900px; margin-inline:auto;
}
.videoblock img,.videoblock video,.videoblock iframe{ width:100%; height:100%; object-fit:cover; border:0; }
.videoblock__play{
  position:absolute; inset:0; display:grid; place-items:center;
  background:linear-gradient(180deg,rgba(10,14,19,.28),rgba(10,14,19,.62));
  transition:background var(--t);
}
.videoblock__play:hover{ background:linear-gradient(180deg,rgba(10,14,19,.18),rgba(10,14,19,.5)); }
.play-btn{
  width:84px; height:84px; border-radius:50%;
  background:var(--brand); color:#fff; display:grid; place-items:center;
  box-shadow:0 0 0 0 var(--brand-glow); animation:playPulse 2.2s infinite;
  transition:transform var(--t-fast);
}
.videoblock__play:hover .play-btn{ transform:scale(1.09); }
.play-btn svg{ width:34px; height:34px; margin-inline-start:5px; }
html[dir="rtl"] .play-btn svg{ margin-inline-start:0; margin-inline-end:5px; transform:scaleX(-1); }
@keyframes playPulse{
  0%{ box-shadow:0 0 0 0 var(--brand-glow); }
  70%{ box-shadow:0 0 0 28px transparent; }
  100%{ box-shadow:0 0 0 0 transparent; }
}

/* ============ 20. REVIEWS ============ */
.rev-summary{
  display:grid; gap:20px; align-items:center;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:24px; margin-bottom:26px;
}
.rev-score{ text-align:center; }
.rev-score b{ font-size:3.2rem; font-weight:800; line-height:1; display:block; }
.rev-score .stars{ justify-content:center; margin-block:8px; }
.rev-score span{ color:var(--muted); font-size:.85rem; }
.rev-bars{ display:grid; gap:8px; }
.rev-bar{ display:flex; align-items:center; gap:10px; font-size:.82rem; }
.rev-bar .lbl{ width:38px; color:var(--muted); font-weight:700; flex:none; direction:ltr; }
.rev-bar .track{ flex:1; height:7px; background:var(--surface-3); border-radius:var(--r-pill); overflow:hidden; }
.rev-bar .fill{ height:100%; background:var(--gold); border-radius:var(--r-pill); transition:width 1s var(--e); }
.rev-bar .pct{ width:40px; text-align:end; color:var(--muted); font-weight:700; flex:none; direction:ltr; }

.reviews{ display:grid; gap:16px; }
.review{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:22px; transition:all var(--t);
}
.review:hover{ border-color:var(--line-2); box-shadow:var(--sh-2); transform:translateY(-3px); }
.review__head{ display:flex; align-items:center; gap:12px; margin-bottom:13px; }
.avatar{
  flex:none; width:46px; height:46px; border-radius:50%;
  background:linear-gradient(135deg,var(--brand-2),var(--brand-dark));
  color:#fff; display:grid; place-items:center; font-weight:800; font-size:1.05rem;
}
.review__meta{ flex:1; min-width:0; }
.review__meta b{ display:block; font-size:.95rem; }
.review__meta span{ font-size:.78rem; color:var(--muted); }
.badge-verified{
  display:inline-flex; align-items:center; gap:5px;
  background:var(--ok-soft); color:var(--ok); border:1px solid rgba(40,199,101,.28);
  font-size:.68rem; font-weight:800; padding:4px 9px; border-radius:var(--r-pill);
  flex:none;
}
.badge-verified svg{ width:11px; height:11px; }
.review .stars{ margin-bottom:10px; }
.review p{ color:var(--text-2); font-size:.93rem; }
.review__photo{
  margin-top:14px; border-radius:12px; overflow:hidden;
  border:1px solid var(--line-2); max-width:180px; cursor:zoom-in;
  transition:transform var(--t-fast);
}
.review__photo:hover{ transform:scale(1.03); }
.review__photo img{ width:100%; aspect-ratio:1; object-fit:cover; }
.review__date{ margin-top:12px; font-size:.74rem; color:var(--dim); }

/* ============ 21. GUARANTEE ============ */
.guarantee{
  background:linear-gradient(150deg,rgba(255,90,31,.1),var(--surface));
  border:1px solid rgba(255,90,31,.28); border-radius:var(--r-xl);
  padding:34px 24px; text-align:center; position:relative; overflow:hidden;
}
.guarantee::before{
  content:""; position:absolute; top:-40%; inset-inline-end:-15%;
  width:60%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle,rgba(255,90,31,.18),transparent 70%);
}
.guarantee__seal{
  position:relative; width:96px; height:96px; margin-inline:auto; margin-bottom:20px;
  border-radius:50%; background:linear-gradient(135deg,var(--brand-2),var(--brand-dark));
  display:grid; place-items:center; color:#fff; box-shadow:var(--sh-brand);
}
.guarantee__seal svg{ width:46px; height:46px; }
.guarantee h2{ font-size:clamp(1.4rem,4.4vw,2.05rem); margin-bottom:12px; position:relative; }
.guarantee p{ color:var(--text-2); max-width:600px; margin-inline:auto; position:relative; }
.guarantee__row{
  display:grid; grid-template-columns:repeat(2,1fr); gap:14px;
  margin-top:26px; position:relative;
}
.guarantee__item{
  background:rgba(10,14,19,.42); border:1px solid var(--line-2);
  border-radius:var(--r); padding:16px 12px;
}
.guarantee__item svg{ width:26px; height:26px; color:var(--brand); margin-inline:auto; margin-bottom:8px; }
.guarantee__item b{ display:block; font-size:.9rem; margin-bottom:3px; }
.guarantee__item span{ font-size:.75rem; color:var(--muted); }

/* ============ 22. FAQ ============ */
.faq{ display:grid; gap:11px; max-width:820px; margin-inline:auto; }
.faq__item{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; transition:border-color var(--t);
}
.faq__item.is-open{ border-color:var(--brand); }
.faq__q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:18px 20px; text-align:start; font-weight:800; font-size:.98rem;
  transition:color var(--t-fast);
}
.faq__q:hover{ color:var(--brand); }
.faq__ico{
  flex:none; width:28px; height:28px; border-radius:9px;
  background:var(--surface-3); display:grid; place-items:center;
  transition:all var(--t); color:var(--muted);
}
.faq__item.is-open .faq__ico{ background:var(--brand); color:#fff; transform:rotate(45deg); }
.faq__ico svg{ width:15px; height:15px; }
.faq__a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s var(--e); }
.faq__item.is-open .faq__a{ grid-template-rows:1fr; }
.faq__a > div{ overflow:hidden; }
.faq__a p{ padding:0 20px 20px; color:var(--muted); font-size:.93rem; }

/* ============ 23. SHIPPING ============ */
.ship{ display:grid; gap:16px; }
.ship__card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:24px;
}
.ship__card h3{ display:flex; align-items:center; gap:11px; font-size:1.05rem; margin-bottom:16px; }
.ship__card h3 svg{ width:22px; height:22px; color:var(--brand); flex:none; }
.ship__list{ display:grid; gap:11px; }
.ship__list li{ display:flex; gap:10px; font-size:.92rem; color:var(--text-2); align-items:flex-start; }
.ship__list li svg{ width:17px; height:17px; color:var(--ok); flex:none; margin-top:3px; }
/* ============ 24. ORDER FORM ============ */
.order{ position:relative; }
.order::before{
  content:""; position:absolute; inset-inline:0; top:0; height:340px;
  background:radial-gradient(ellipse 70% 100% at 50% 0,rgba(255,90,31,.14),transparent 72%);
  pointer-events:none;
}
.orderbox{
  position:relative; background:linear-gradient(165deg,var(--surface-2),var(--surface));
  border:1px solid var(--line-2); border-radius:var(--r-xl);
  padding:26px 20px; box-shadow:var(--sh-3);
  max-width:720px; margin-inline:auto;
}
.orderbox__head{ text-align:center; margin-bottom:24px; }
.orderbox__head h2{ font-size:clamp(1.4rem,4.6vw,2rem); margin-bottom:10px; }
.orderbox__head p{ color:var(--muted); font-size:.95rem; }

.cod-badge{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--ok-soft); color:var(--ok); border:1px solid rgba(40,199,101,.32);
  padding:9px 18px; border-radius:var(--r-pill); font-weight:800; font-size:.88rem;
  margin-bottom:16px;
}
.cod-badge svg{ width:18px; height:18px; }

/* Offers */
.offers{ display:grid; gap:11px; margin-bottom:22px; }
.offer{
  position:relative; display:flex; align-items:center; gap:14px;
  background:var(--surface); border:2px solid var(--line);
  border-radius:var(--r); padding:15px 16px; cursor:pointer;
  transition:all var(--t-fast);
}
.offer:hover{ border-color:var(--line-2); }
.offer.is-selected{ border-color:var(--brand); background:rgba(255,90,31,.06); box-shadow:0 0 0 4px var(--brand-soft); }
.offer input{ position:absolute; opacity:0; pointer-events:none; }
.offer__radio{
  flex:none; width:22px; height:22px; border-radius:50%;
  border:2px solid var(--line-2); display:grid; place-items:center;
  transition:all var(--t-fast);
}
.offer.is-selected .offer__radio{ border-color:var(--brand); }
.offer__radio::after{
  content:""; width:11px; height:11px; border-radius:50%;
  background:var(--brand); transform:scale(0); transition:transform var(--t-fast);
}
.offer.is-selected .offer__radio::after{ transform:scale(1); }
.offer__body{ flex:1; min-width:0; }
.offer__body b{ display:block; font-size:.96rem; }
.offer__body span{ font-size:.78rem; color:var(--muted); }
.offer__price{ text-align:end; flex:none; }
.offer__price b{ display:block; font-size:1.14rem; color:var(--brand); line-height:1.2; }
.offer__price s{ font-size:.78rem; color:var(--dim); }
.offer__badge{
  position:absolute; top:-10px; inset-inline-end:14px;
  background:var(--brand); color:#fff; font-size:.66rem; font-weight:800;
  padding:3px 10px; border-radius:var(--r-pill); box-shadow:var(--sh-1);
}

/* Fields */
.fields{ display:grid; gap:15px; }
.field{ position:relative; }
.field label{
  display:block; font-size:.85rem; font-weight:800;
  margin-bottom:7px; color:var(--text-2);
}
.field label .req{ color:var(--danger); }
.field input,.field select,.field textarea{
  width:100%; background:var(--bg-2); border:1.5px solid var(--line-2);
  border-radius:var(--r-sm); padding:14px 16px; font-size:1rem;
  color:var(--text); transition:border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  -webkit-appearance:none; appearance:none;
}
.field textarea{ min-height:88px; resize:vertical; }
.field input::placeholder,.field textarea::placeholder{ color:var(--dim); }
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--brand); background:var(--surface); box-shadow:0 0 0 4px var(--brand-soft);
}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393A0AE' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-size:19px;
  background-position:right 15px center; padding-inline-end:44px;
}
html[dir="rtl"] .field select{ background-position:left 15px center; padding-inline-end:16px; padding-inline-start:44px; }
.field select option{ background:var(--surface); color:var(--text); }
.field--phone input{ direction:ltr; text-align:start; letter-spacing:.04em; }
html[dir="rtl"] .field--phone input{ text-align:right; }
.field.has-error input,.field.has-error select,.field.has-error textarea{
  border-color:var(--danger); box-shadow:0 0 0 4px rgba(244,69,60,.12);
}
.field.is-valid input,.field.is-valid select{ border-color:rgba(40,199,101,.6); }
.field__err{
  display:none; color:var(--danger); font-size:.78rem; font-weight:700; margin-top:6px;
  align-items:center; gap:5px;
}
.field.has-error .field__err{ display:flex; }
.field__err svg{ width:13px; height:13px; flex:none; }

.qty{ display:flex; align-items:center; gap:0; max-width:170px; }
.qty button{
  width:46px; height:50px; background:var(--surface-2);
  border:1.5px solid var(--line-2); display:grid; place-items:center;
  font-size:1.3rem; font-weight:800; transition:all var(--t-fast);
}
.qty button:first-child{ border-start-start-radius:var(--r-sm); border-end-start-radius:var(--r-sm); }
.qty button:last-child{ border-start-end-radius:var(--r-sm); border-end-end-radius:var(--r-sm); }
.qty button:hover{ background:var(--brand); border-color:var(--brand); color:#fff; }
.qty input{
  width:70px; height:50px; text-align:center; border-radius:0;
  border-inline:0; font-weight:800; padding-inline:0;
}

/* Summary */
.summary{
  background:var(--bg-2); border:1px solid var(--line);
  border-radius:var(--r); padding:18px; margin-block:20px;
}
.summary__row{
  display:flex; justify-content:space-between; align-items:center;
  padding-block:9px; font-size:.92rem; color:var(--text-2);
}
.summary__row + .summary__row{ border-top:1px dashed var(--line); }
.summary__row.total{
  border-top:2px solid var(--line-2); margin-top:6px; padding-top:14px;
  font-size:1.14rem; font-weight:800; color:#fff;
}
.summary__row.total b{ color:var(--brand); font-size:1.3rem; }
.summary__row .free{ color:var(--ok); font-weight:800; }

.form-msg{
  display:none; border-radius:var(--r); padding:15px 18px;
  font-size:.92rem; font-weight:700; margin-top:16px;
  align-items:flex-start; gap:11px;
}
.form-msg.is-shown{ display:flex; animation:slideUp .35s var(--e); }
.form-msg svg{ width:20px; height:20px; flex:none; margin-top:1px; }
.form-msg--ok{ background:var(--ok-soft); color:var(--ok); border:1px solid rgba(40,199,101,.3); }
.form-msg--err{ background:rgba(244,69,60,.1); color:#FF8B84; border:1px solid rgba(244,69,60,.3); }

.btn.is-loading{ pointer-events:none; opacity:.82; }
.btn.is-loading .btn__label{ opacity:.6; }
.spinner{
  display:none; width:19px; height:19px; border-radius:50%;
  border:2.5px solid rgba(255,255,255,.35); border-top-color:#fff;
  animation:spin .7s linear infinite;
}
.btn.is-loading .spinner{ display:block; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.form-alt{
  text-align:center; margin-top:18px; padding-top:18px;
  border-top:1px solid var(--line); font-size:.87rem; color:var(--muted);
}
.form-alt a{ color:var(--brand); font-weight:800; }
.secure-note{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-top:14px; font-size:.78rem; color:var(--dim);
}
.secure-note svg{ width:15px; height:15px; }

/* ============ 25. SUCCESS SCREEN ============ */
.success{ display:none; text-align:center; padding:26px 10px; }
.success.is-shown{ display:block; animation:slideUp .45s var(--e); }
.success__ico{
  width:92px; height:92px; margin-inline:auto; margin-bottom:22px;
  border-radius:50%; background:var(--ok-soft); border:2px solid var(--ok);
  display:grid; place-items:center; color:var(--ok);
  animation:pop .5s var(--e);
}
.success__ico svg{ width:46px; height:46px; }
@keyframes pop{ 0%{ transform:scale(.4); opacity:0; } 60%{ transform:scale(1.1); } 100%{ transform:scale(1); opacity:1; } }
.success h2{ font-size:1.6rem; margin-bottom:12px; }
.success p{ color:var(--muted); margin-bottom:8px; }
.success__id{
  display:inline-block; margin-block:14px;
  background:var(--bg-2); border:1px dashed var(--line-2);
  padding:9px 20px; border-radius:var(--r-sm);
  font-weight:800; letter-spacing:.06em; direction:ltr;
}

/* ============ 26. FOOTER ============ */
.footer{
  background:var(--bg-2); border-top:1px solid var(--line);
  padding-block:44px 0; margin-bottom:var(--mobilebar-h);
}
.footer__grid{ display:grid; gap:30px; margin-bottom:32px; }
.footer__brand img{ height:42px; margin-bottom:14px; }
.footer__brand p{ color:var(--muted); font-size:.9rem; max-width:34ch; }
.footer h4{ font-size:.96rem; margin-bottom:14px; }
.footer__links{ display:grid; gap:10px; }
.footer__links a,.footer__links li{
  color:var(--muted); font-size:.89rem; transition:color var(--t-fast);
  display:flex; align-items:center; gap:9px;
}
.footer__links a:hover{ color:var(--brand); }
.footer__links svg{ width:16px; height:16px; flex:none; }
.socials{ display:flex; gap:10px; margin-top:16px; }
.social{
  width:40px; height:40px; border-radius:12px;
  background:var(--surface-2); border:1px solid var(--line-2);
  display:grid; place-items:center; color:var(--text-2);
  transition:all var(--t-fast);
}
.social:hover{ background:var(--brand); border-color:var(--brand); color:#fff; transform:translateY(-3px); }
.social svg{ width:18px; height:18px; }
.footer__bottom{
  border-top:1px solid var(--line); padding-block:20px;
  display:flex; flex-direction:column; gap:12px; align-items:center;
  text-align:center; font-size:.8rem; color:var(--dim);
}
.footer__bottom a{ color:var(--muted); }
.footer__bottom a:hover{ color:var(--brand); }
.footer__legal{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; }
.paybar{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:center; }
.paybar span{
  background:var(--surface-2); border:1px solid var(--line-2);
  padding:5px 12px; border-radius:8px; font-size:.72rem; font-weight:800; color:var(--text-2);
}

/* ============ 27. TOASTS / POPUPS ============ */
.toast-zone{
  position:fixed; inset-inline-start:14px; z-index:90;
  /* au-dessus du bouton WhatsApp flottant (52px + marges) */
  bottom:calc(var(--mobilebar-h) + 80px);
  display:grid; gap:10px; max-width:min(330px,calc(100vw - 84px)); pointer-events:none;
}
.toast{
  display:flex; align-items:center; gap:12px;
  background:rgba(18,24,31,.96); backdrop-filter:blur(14px);
  border:1px solid var(--line-2); border-radius:var(--r);
  padding:11px 13px; box-shadow:var(--sh-3);
  transform:translateY(20px) scale(.96); opacity:0;
  transition:all .4s var(--e); pointer-events:auto;
}
.toast.is-in{ transform:translateY(0) scale(1); opacity:1; }
.toast__img{
  flex:none; width:46px; height:46px; border-radius:11px; overflow:hidden;
  border:1px solid var(--line-2); background:var(--surface);
}
.toast__img img{ width:100%; height:100%; object-fit:cover; }
.toast__body{ flex:1; min-width:0; }
.toast__body b{ display:block; font-size:.82rem; }
.toast__body span{ display:block; font-size:.74rem; color:var(--muted); line-height:1.4; }
.toast__body .ago{ font-size:.68rem; color:var(--ok); font-weight:700; margin-top:2px; }
.toast__x{
  flex:none; width:24px; height:24px; border-radius:7px; color:var(--dim);
  display:grid; place-items:center; transition:all var(--t-fast);
}
.toast__x:hover{ background:var(--surface-3); color:var(--text); }
.toast__x svg{ width:13px; height:13px; }

/* ============ 28. BACK TO TOP ============ */
.totop{
  position:fixed; inset-inline-end:14px; z-index:75;
  bottom:calc(var(--mobilebar-h) + 14px);
  width:44px; height:44px; border-radius:50%;
  background:var(--surface-2); border:1px solid var(--line-2); color:var(--text);
  display:grid; place-items:center;
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:all var(--t); box-shadow:var(--sh-2);
}
.totop.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }
.totop:hover{ background:var(--brand); border-color:var(--brand); color:#fff; }
.totop svg{ width:19px; height:19px; }

/* ============ 29. EXIT INTENT ============ */
.modal{
  position:fixed; inset:0; z-index:210; display:none;
  background:rgba(6,9,12,.82); backdrop-filter:blur(8px);
  place-items:center; padding:20px;
}
.modal.is-open{ display:grid; animation:fadeIn .25s var(--e); }
.modal__card{
  position:relative; width:100%; max-width:460px; text-align:center;
  background:linear-gradient(160deg,var(--surface-2),var(--surface));
  border:1px solid var(--line-2); border-radius:var(--r-xl);
  padding:34px 24px; box-shadow:var(--sh-3);
  animation:slideUp .4s var(--e);
}
.modal__x{
  position:absolute; top:14px; inset-inline-end:14px;
  width:34px; height:34px; border-radius:50%; color:var(--muted);
  background:var(--surface-3); display:grid; place-items:center;
  transition:all var(--t-fast);
}
.modal__x:hover{ background:var(--danger); color:#fff; }
.modal__x svg{ width:15px; height:15px; }
.modal__ico{
  width:76px; height:76px; margin-inline:auto; margin-bottom:18px;
  border-radius:50%; background:linear-gradient(135deg,var(--brand-2),var(--brand-dark));
  display:grid; place-items:center; color:#fff; box-shadow:var(--sh-brand);
}
.modal__ico svg{ width:36px; height:36px; }
.modal__card h3{ font-size:1.45rem; margin-bottom:11px; }
.modal__card p{ color:var(--muted); margin-bottom:20px; font-size:.95rem; }
.modal__card .btn{ width:100%; }
.modal__skip{
  display:block; margin-top:13px; font-size:.82rem;
  color:var(--dim); text-decoration:underline;
}
@keyframes slideUp{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:translateY(0); } }

/* ============ 30. WHATSAPP FLOAT ============ */
.wa-float{
  position:fixed; inset-inline-start:14px; z-index:75;
  bottom:calc(var(--mobilebar-h) + 14px);
  width:52px; height:52px; border-radius:50%;
  background:#25D366; color:#08240F; place-items:center;
  box-shadow:0 10px 28px rgba(37,211,102,.42);
  transition:transform var(--t-fast);
  animation:waPulse 2.6s infinite;
  /* Masqué sous 1024px : la barre collante mobile contient déjà WhatsApp */
  display:none;
}
.wa-float:hover{ transform:scale(1.09); }
.wa-float svg{ width:27px; height:27px; }
@keyframes waPulse{
  0%{ box-shadow:0 10px 28px rgba(37,211,102,.42), 0 0 0 0 rgba(37,211,102,.55); }
  70%{ box-shadow:0 10px 28px rgba(37,211,102,.42), 0 0 0 18px rgba(37,211,102,0); }
  100%{ box-shadow:0 10px 28px rgba(37,211,102,.42), 0 0 0 0 rgba(37,211,102,0); }
}

/* ============ 31. REVEAL ANIMATIONS ============ */
[data-reveal]{
  opacity:0; transform:translateY(26px);
  transition:opacity .7s var(--e), transform .7s var(--e);
  will-change:opacity,transform;
}
[data-reveal].is-in{ opacity:1; transform:none; }
[data-reveal="left"]{ transform:translateX(-30px); }
[data-reveal="right"]{ transform:translateX(30px); }
[data-reveal="zoom"]{ transform:scale(.93); }
html[dir="rtl"] [data-reveal="left"]{ transform:translateX(30px); }
html[dir="rtl"] [data-reveal="right"]{ transform:translateX(-30px); }

.float-y{ animation:floatY 5s ease-in-out infinite; }
@keyframes floatY{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
}

/* ============ 32. RESPONSIVE ============ */

/* ≥ 480px */
@media (min-width:480px){
  .wrap{ padding-inline:22px; }
  .thumb{ width:78px; }
  .boxgrid{ grid-template-columns:repeat(2,1fr); }
  .guarantee__row{ grid-template-columns:repeat(4,1fr); }
}

/* ≥ 640px — Tablette portrait */
@media (min-width:640px){
  .section{ padding-block:78px; }
  .trustbar__grid{ grid-template-columns:repeat(4,1fr); }
  .cards{ grid-template-columns:repeat(2,1fr); }
  .pain{ grid-template-columns:1fr 1fr; }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .reviews{ grid-template-columns:repeat(2,1fr); }
  .boxgrid{ grid-template-columns:repeat(3,1fr); }
  .ship{ grid-template-columns:1fr 1fr; }
  .orderbox{ padding:34px 30px; }
  .rev-summary{ grid-template-columns:200px 1fr; }
  .fields--2{ grid-template-columns:1fr 1fr; }
  .field--full{ grid-column:1/-1; }
  .footer__grid{ grid-template-columns:repeat(2,1fr); }
  .footer__bottom{ flex-direction:row; justify-content:space-between; text-align:start; }
  .header__cta{ display:inline-flex; }
}

/* ≥ 900px — Tablette paysage / petit laptop */
@media (min-width:900px){
  .header__nav{ display:flex; }
  .cards{ grid-template-columns:repeat(3,1fr); }
  .boxgrid{ grid-template-columns:repeat(3,1fr); }
  .footer__grid{ grid-template-columns:1.6fr 1fr 1fr 1fr; }
  .feat{ grid-template-columns:1fr 1fr; gap:44px; }
  .feat--rev .feat__media{ order:2; }
  .feat--rev .feat__body{ order:1; }
  .reviews{ grid-template-columns:repeat(3,1fr); }
}

/* ≥ 1024px — Desktop */
@media (min-width:1024px){
  :root{ --header-h:74px; --mobilebar-h:0px; }
  body{ padding-bottom:0; }
  .footer{ margin-bottom:0; }

  .hero{ padding-block:52px 78px; }
  .hero__grid{ grid-template-columns:1fr 1.05fr; gap:52px; align-items:start; }
  .hero__col--media{ order:2; position:sticky; top:calc(var(--header-h) + 20px); }
  .hero__col--copy{ order:1; }

  .gal{ grid-template-columns:88px 1fr; }
  .gal__thumbs{
    flex-direction:column; overflow-y:auto; overflow-x:hidden;
    max-height:560px; padding-inline-end:4px; scroll-snap-type:y mandatory;
    order:-1;
  }
  .thumb{ width:100%; }

  .mobilebar{ display:none; }
  .toast-zone{ bottom:92px; max-width:350px; }
  .totop{ bottom:20px; inset-inline-end:20px; }
  .wa-float{ display:grid; bottom:20px; inset-inline-start:20px; width:58px; height:58px; }
  .wa-float svg{ width:30px; height:30px; }

  .steps{ grid-template-columns:repeat(4,1fr); }
  .boxgrid{ grid-template-columns:repeat(3,1fr); }
  .trust-mini{ gap:14px; }
  .section{ padding-block:92px; }
  .sec-head{ margin-bottom:52px; }
  .orderbox{ padding:44px 40px; }
}

/* ≥ 1280px */
@media (min-width:1280px){
  .wrap{ padding-inline:28px; }
  .hero__grid{ gap:66px; }
  .cards{ gap:20px; }
}

/* Paysage mobile (hauteur réduite) */
@media (max-height:520px) and (orientation:landscape){
  .hero{ padding-block:20px 32px; }
  .gal__stage{ aspect-ratio:16/10; }
  .section{ padding-block:44px; }
  .lightbox__media img,.lightbox__media video{ max-height:80vh; }
  .mobilebar{ padding-block:7px; }
  .mobilebar .btn{ padding:11px 14px; font-size:.9rem; }
}

/* Très petits écrans */
@media (max-width:359px){
  .wrap{ padding-inline:14px; }
  .btn{ padding:13px 18px; font-size:.92rem; }
  .btn--lg{ padding:16px 20px; font-size:1rem; }
  .mobilebar__price .now{ font-size:1.08rem; }
  .header__actions .icon-btn{ width:38px; height:38px; }
}

/* Écrans larges : galerie plus haute */
@media (min-width:1600px){
  :root{ --wrap:1340px; }
  .gal__thumbs{ max-height:640px; }
}