/* ============================================================
   REVUP — Design System + Landing Page + Checkout
   RTL · Mobile-first · WCAG AA
   ============================================================ */

/* ── Tokens ────────────────────────────────────────────────── */
:root{
  /* Brand */
  --navy-900:#06131F;
  --navy-800:#0C2340;
  --navy-700:#143355;
  --navy-600:#1D4874;

  --gold-100:#FDF6E3;
  --gold-200:#F7E5B0;
  --gold-300:#F2D488;
  --gold-400:#E8BE4E;
  --gold-500:#D0A02A;
  --gold-600:#A87C15;

  /* Neutrals */
  --ink:#0F1B2A;
  --body:#465468;
  --muted:#7B889A;
  --line:#E3E9F1;
  --line-soft:#EFF3F8;
  --surface:#FFFFFF;
  --surface-2:#F5F8FC;
  --surface-3:#EDF2F9;

  /* Status */
  --green:#0E9F55;
  --green-dark:#08753E;
  --green-soft:#E6F7EE;
  --red:#D6303B;
  --red-soft:#FDECEC;

  /* Elevation */
  --sh-sm:0 1px 2px rgba(15,27,42,.06), 0 2px 6px rgba(15,27,42,.05);
  --sh-md:0 4px 12px rgba(15,27,42,.07), 0 12px 28px rgba(15,27,42,.07);
  --sh-lg:0 8px 24px rgba(15,27,42,.09), 0 24px 60px rgba(15,27,42,.10);
  --sh-gold:0 10px 30px rgba(208,160,42,.28);

  /* Geometry */
  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:32px; --r-pill:999px;
  --container:1240px;
  --gutter:20px;
  --sec-y:64px;

  --grad-gold:linear-gradient(135deg,#F2D488 0%,#E8BE4E 45%,#C08A1B 100%);
  --grad-navy:linear-gradient(160deg,#143355 0%,#0C2340 55%,#06131F 100%);
}

@media (min-width:768px){ :root{ --gutter:32px; --sec-y:88px; } }
@media (min-width:1100px){ :root{ --sec-y:108px; } }

/* ── Reset ─────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }

/* תכונת hidden חייבת לנצח כל כלל display אחר.
   בלי השורה הזו, כל אלמנט עם display:flex/grid בגיליון יישאר גלוי
   גם כשהקוד מסתיר אותו — התפריט, באנר ההדגמה, חסימת הקוד וכו'. */
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:'Heebo',-apple-system,'Segoe UI',Arial,sans-serif;
  font-size:17px; line-height:1.65;
  color:var(--body); background:var(--surface);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{ margin:0; color:var(--ink); line-height:1.22; font-weight:800; letter-spacing:-.01em; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
img,svg{ max-width:100%; display:block; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
b,strong{ font-weight:700; color:var(--ink); }

:focus-visible{ outline:3px solid var(--navy-600); outline-offset:3px; border-radius:6px; }

.skip-link{
  position:absolute; inset-inline-start:16px; top:-120px; z-index:200;
  background:var(--navy-800); color:#fff; padding:12px 20px; border-radius:0 0 12px 12px;
  transition:top .18s;
}
.skip-link:focus{ top:0; }

/* ── Layout ────────────────────────────────────────────────── */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.container-narrow{ max-width:860px; }
.section{ padding-block:var(--sec-y); }
.section-soft{ background:var(--surface-2); }
.section-dark{ background:var(--grad-navy); color:rgba(255,255,255,.82); position:relative; overflow:hidden; }
.section-dark::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(70% 55% at 85% 0%, rgba(232,190,78,.13), transparent 70%);
}
.section-dark > *{ position:relative; }

.section-head{ max-width:760px; margin:0 auto 48px; text-align:center; }
.section-head h2{ font-size:clamp(1.75rem,4.4vw,2.6rem); margin-bottom:14px; }
.section-head .lede{ font-size:clamp(1rem,1.9vw,1.15rem); }
.section-head-dark h2{ color:#fff; }
.section-head-dark .lede{ color:rgba(255,255,255,.74); }

.kicker{
  display:inline-block; font-size:.82rem; font-weight:800; letter-spacing:.08em;
  color:var(--gold-600); text-transform:uppercase; margin-bottom:10px;
}
.section-dark .kicker{ color:var(--gold-300); }

.grad{ background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ── Buttons ───────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 26px; border-radius:var(--r-pill); border:2px solid transparent;
  font-weight:800; font-size:1rem; line-height:1; cursor:pointer; text-align:center;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  white-space:nowrap;
}
.btn .ico{ width:18px; height:18px; flex:none; }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

.btn-primary{ background:var(--grad-gold); color:var(--navy-900); box-shadow:var(--sh-gold); }
.btn-primary:hover{ box-shadow:0 14px 38px rgba(208,160,42,.4); }

.btn-navy{ background:var(--navy-800); color:#fff; box-shadow:var(--sh-md); }
.btn-navy:hover{ background:var(--navy-700); }

.btn-outline{ background:transparent; border-color:var(--navy-800); color:var(--navy-800); }
.btn-outline:hover{ background:var(--navy-800); color:#fff; }

.btn-ghost{ background:rgba(12,35,64,.05); color:var(--navy-800); }
.btn-ghost:hover{ background:rgba(12,35,64,.1); }

.btn-sm{ padding:11px 20px; font-size:.94rem; }
.btn-lg{ padding:17px 32px; font-size:1.06rem; }
.btn-block{ width:100%; }

.pill{
  display:inline-flex; align-items:center; gap:7px; padding:7px 15px;
  border-radius:var(--r-pill); font-size:.85rem; font-weight:800;
}
.pill .ico{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; }
.pill-gold{ background:var(--gold-100); color:var(--gold-600); }

/* ── Header ────────────────────────────────────────────────── */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.9); backdrop-filter:blur(14px);
  border-bottom:1px solid transparent; transition:border-color .25s, box-shadow .25s;
}
.site-header.scrolled{ border-bottom-color:var(--line); box-shadow:0 2px 14px rgba(15,27,42,.05); }
.header-inner{ position:relative; display:flex; align-items:center; gap:20px; min-height:72px; }
@media (min-width:1024px){ .header-inner{ min-height:84px; } }

.logo img{ height:42px; width:auto; }
@media (min-width:1024px){ .logo img{ height:56px; } }

.header-actions{ display:flex; align-items:center; gap:12px; margin-inline-start:auto; }
.header-actions .btn{ display:none; }
@media (min-width:600px){ .header-actions .btn{ display:inline-flex; } }

/* כפתור התפריט — מוצג בכל רוחב מסך */
.nav-toggle{
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  width:46px; height:46px; padding:0 11px; cursor:pointer;
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-md);
  transition:background .18s, border-color .18s;
}
.nav-toggle:hover{ background:var(--gold-100); border-color:var(--gold-300); }
.nav-toggle span{ height:2.5px; background:var(--navy-800); border-radius:2px; transition:.25s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

/* תפריט נפתח — פאנל מעוגן לפינה שבה נמצא הכפתור */
.site-nav{
  position:absolute; top:calc(100% - 6px); inset-inline-end:var(--gutter); z-index:120;
  display:flex; flex-direction:column;
  width:min(268px, calc(100vw - var(--gutter) * 2));
  padding:10px; background:#fff;
  border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);
  animation:navDrop .18s cubic-bezier(.22,1,.36,1);
}
@keyframes navDrop{ from{ opacity:0; transform:translateY(-8px); } }
.site-nav a{
  padding:12px 14px; font-weight:700; font-size:.98rem; color:var(--body);
  border-radius:var(--r-sm); transition:background .16s, color .16s;
}
.site-nav a:hover{ background:var(--surface-2); color:var(--ink); }
.site-nav .nav-cta{
  margin-top:8px; padding-block:13px; color:var(--navy-900);
  justify-content:center; font-size:.95rem;
}
.site-nav .nav-cta:hover{ color:var(--navy-900); }
@media (min-width:600px){ .site-nav .nav-cta{ display:none; } }

@media (prefers-reduced-motion:reduce){ .site-nav{ animation:none; } }

/* ── Hero ──────────────────────────────────────────────────── */
.hero{ position:relative; padding-block:44px 60px; overflow:hidden; }
@media (min-width:1024px){ .hero{ padding-block:72px 96px; } }
.hero-bg{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(58% 48% at 88% 8%, rgba(232,190,78,.16), transparent 62%),
    radial-gradient(52% 44% at 5% 92%, rgba(29,72,116,.10), transparent 62%),
    linear-gradient(180deg,#FBFCFE 0%,#FFFFFF 60%);
}
.hero-inner{ display:grid; gap:44px; align-items:center; }
@media (min-width:1024px){ .hero-inner{ grid-template-columns:1.08fr .92fr; gap:56px; } }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px; padding:8px 16px;
  background:var(--gold-100); color:var(--gold-600);
  border:1px solid var(--gold-200); border-radius:var(--r-pill);
  font-size:.86rem; font-weight:800; margin-bottom:20px;
}
.eyebrow .ico{ width:15px; height:15px; fill:currentColor; }

.hero h1{ font-size:clamp(2.05rem,6.2vw,3.5rem); font-weight:900; margin-bottom:18px; }
.hero-sub{ font-size:clamp(1.02rem,2.1vw,1.19rem); max-width:56ch; margin-bottom:28px; }

/* בעיה → פתרון → רווח */
.psg{ display:grid; gap:10px; margin-bottom:30px; }
@media (min-width:620px){ .psg{ grid-template-columns:1fr auto 1fr auto 1fr; align-items:stretch; gap:8px; } }
.psg-item{
  position:relative; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-md); padding:16px 16px 14px; box-shadow:var(--sh-sm);
}
.psg-item p{ font-size:.9rem; line-height:1.5; }
.psg-tag{
  display:inline-block; font-size:.7rem; font-weight:900; letter-spacing:.05em;
  padding:3px 9px; border-radius:var(--r-pill); margin-bottom:9px;
}
.psg-ico{
  position:absolute; top:14px; inset-inline-end:14px; width:20px; height:20px;
  fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; opacity:.5;
}
.psg-problem{ border-top:3px solid #D6303B; }
.psg-problem .psg-tag{ background:var(--red-soft); color:var(--red); }
.psg-problem .psg-ico{ stroke:var(--red); }
.psg-solution{ border-top:3px solid var(--gold-500); }
.psg-solution .psg-tag{ background:var(--gold-100); color:var(--gold-600); }
.psg-solution .psg-ico{ stroke:var(--gold-600); }
.psg-gain{ border-top:3px solid var(--green); }
.psg-gain .psg-tag{ background:var(--green-soft); color:var(--green-dark); }
.psg-gain .psg-ico{ stroke:var(--green); }

.psg-arrow{ display:none; }
@media (min-width:620px){
  .psg-arrow{ display:flex; align-items:center; justify-content:center; }
  .psg-arrow svg{ width:22px; height:22px; fill:none; stroke:var(--muted); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; opacity:.5; }
}

.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:22px; }
.hero-cta .btn{ flex:1 1 auto; min-width:200px; }

.trust-chips{ display:flex; flex-wrap:wrap; gap:8px 18px; }
.trust-chips li{ display:flex; align-items:center; gap:7px; font-size:.88rem; font-weight:600; color:var(--body); }
.trust-chips svg{ width:15px; height:15px; flex:none; fill:none; stroke:var(--green); stroke-width:2.8; stroke-linecap:round; stroke-linejoin:round; }

/* Hero visual */
.hero-visual{ display:flex; justify-content:center; }
.hero-photo{ position:relative; width:min(100%,420px); }
.hero-photo > img{
  width:100%; border-radius:var(--r-xl); box-shadow:var(--sh-lg);
  border:1px solid rgba(255,255,255,.6);
}

/* אלמנטים דקורטיביים ממוקמים ביחס לקומפוזיציה של התמונה —
   ולכן left/top מפורשים, לא לוגיים (התמונה לא מתהפכת ב-RTL). */
.ripple{
  position:absolute; top:46%; left:50%;
  width:120px; height:120px; margin:-60px 0 0 -60px; border-radius:50%;
  border:2.5px solid rgba(232,190,78,.75); pointer-events:none;
  animation:ripple 3s ease-out infinite;
}
.ripple-2{ animation-delay:1.5s; }
@keyframes ripple{
  0%{ transform:scale(.35); opacity:0; }
  25%{ opacity:.9; }
  100%{ transform:scale(1.9); opacity:0; }
}

.rating-card{
  position:absolute; bottom:18px; left:8px;
  background:#fff; border-radius:var(--r-lg); padding:14px 18px;
  box-shadow:var(--sh-lg); border:1px solid var(--line-soft);
  min-width:168px; text-align:start; direction:rtl;
}
@media (min-width:520px){ .rating-card{ left:-24px; } }
.rating-top{ display:flex; align-items:center; gap:7px; margin-bottom:4px; }
.g-mark{ width:17px; height:17px; }
.rating-title{ font-size:.78rem; font-weight:700; color:var(--muted); }
.rating-score{ font-size:1.85rem; font-weight:900; color:var(--ink); line-height:1.1; }
.stars{ display:flex; gap:2px; margin:3px 0 5px; }
.stars svg{ width:16px; height:16px; fill:var(--line); transition:fill .18s; }
.stars svg.on{ fill:#F7B500; }
.rating-count{ font-size:.8rem; color:var(--muted); font-weight:600; }
.rating-count b{ color:var(--ink); font-weight:800; }

.tap-phone{
  position:absolute; top:12%; right:5%;
  width:54px; height:98px; pointer-events:none;
  animation:tapMove 3s ease-in-out infinite;
}
.tap-phone-body{
  width:100%; height:100%; border-radius:12px;
  background:linear-gradient(155deg,#22314A,#0C1826);
  border:2px solid rgba(255,255,255,.28);
  box-shadow:0 12px 30px rgba(6,19,31,.42);
  display:flex; align-items:center; justify-content:center;
}
.tap-nfc svg{ width:24px; height:24px; fill:none; stroke:var(--gold-400); stroke-width:1.9; stroke-linecap:round; }
@keyframes tapMove{
  0%,100%{ transform:translate(0,0) rotate(9deg); }
  45%{ transform:translate(-34px,52px) rotate(3deg); }
  60%{ transform:translate(-30px,46px) rotate(3deg); }
}

/* ── Problem ───────────────────────────────────────────────── */
.friction{
  display:grid; gap:14px; margin-bottom:44px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:20px; box-shadow:var(--sh-sm);
}
@media (min-width:900px){ .friction{ grid-template-columns:1fr 1fr; gap:22px; padding:26px; } }

.friction-row{ border-radius:var(--r-md); padding:18px; }
.friction-before{ background:var(--surface-2); border:1px solid var(--line); }
.friction-after{ background:linear-gradient(160deg,#FDF9EC,#FFFFFF); border:1.5px solid var(--gold-300); }

.friction-label{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:14px; }
.fl-title{ font-weight:900; font-size:1.05rem; color:var(--ink); }
.fl-time{ font-size:.85rem; font-weight:800; padding:4px 11px; border-radius:var(--r-pill); }
.friction-before .fl-time{ background:var(--red-soft); color:var(--red); }
.friction-after .fl-time{ background:var(--green-soft); color:var(--green-dark); }

.friction-steps{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.friction-steps li{
  display:flex; align-items:center; gap:7px; padding:8px 13px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-pill);
  font-size:.86rem; font-weight:600;
}
.friction-after .friction-steps li{ border-color:var(--gold-200); }
.fs-num{
  width:19px; height:19px; flex:none; border-radius:50%;
  display:grid; place-items:center; font-size:.7rem; font-weight:900;
  background:var(--surface-3); color:var(--body);
}
.friction-after .fs-num{ background:var(--grad-gold); color:var(--navy-900); }
.friction-out{ font-size:.85rem; font-weight:600; }
.friction-before .friction-out{ color:var(--red); }
.friction-after .friction-out{ color:var(--green-dark); }

.problem-cards{ display:grid; gap:18px; }
@media (min-width:760px){ .problem-cards{ grid-template-columns:repeat(3,1fr); } }
.pcard{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:26px 22px; box-shadow:var(--sh-sm); transition:transform .22s, box-shadow .22s;
}
.pcard:hover{ transform:translateY(-4px); box-shadow:var(--sh-md); }
.pc-ico{
  width:42px; height:42px; padding:9px; margin-bottom:14px;
  border-radius:12px; background:var(--gold-100);
  fill:none; stroke:var(--gold-600); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}
.pcard h3{ font-size:1.12rem; margin-bottom:8px; }
.pcard p{ font-size:.95rem; }

/* ── How it works ──────────────────────────────────────────── */
.steps{ display:grid; gap:26px; }
@media (min-width:820px){ .steps{ grid-template-columns:repeat(3,1fr); gap:28px; } }
.step{ position:relative; text-align:center; }
/* ממוקם על הפינה ה"פותחת" (ימין ב-RTL) של תמונת השלב, שרוחבה 300px */
.step-num{
  position:absolute; top:-10px; inset-inline-start:calc(50% - 142px); z-index:2;
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  background:var(--grad-gold); color:var(--navy-900); font-weight:900; font-size:1.05rem;
  box-shadow:var(--sh-gold); border:3px solid #fff;
}
.step-art{
  width:min(100%,300px); margin:0 auto 18px; aspect-ratio:4/5;
  border-radius:var(--r-lg); overflow:hidden; background:var(--surface-2);
  border:1px solid var(--line); box-shadow:var(--sh-md);
}
.step-art img{ width:100%; height:100%; object-fit:cover; }
.step-art-anim{ display:grid; place-items:center; background:linear-gradient(165deg,#F7FAFE,#EDF2F9); }
.step h3{ font-size:1.15rem; }

/* Step 2 animation: tap */
.anim-tap{ position:relative; width:150px; height:190px; }
.at-card{
  position:absolute; inset-inline-start:0; bottom:14px;
  width:92px; height:120px; border-radius:12px;
  background:linear-gradient(150deg,#1D4874,#0C2340);
  display:grid; place-items:center; box-shadow:var(--sh-md);
}
.at-card-ico{ width:34px; height:34px; fill:var(--gold-400); }
.at-phone{
  position:absolute; inset-inline-end:6px; top:8px;
  width:52px; height:94px; border-radius:11px;
  background:linear-gradient(155deg,#33445F,#141F30);
  border:2px solid rgba(255,255,255,.3);
  animation:stepTap 2.6s ease-in-out infinite;
}
.at-wave{
  position:absolute; inset-inline-start:-8px; top:50%; width:26px; height:26px; margin-top:-13px;
  border-radius:50%; border:2px solid var(--gold-400); opacity:0;
  animation:ripple 2.6s ease-out infinite;
}
.at-wave-2{ animation-delay:.6s; }
@keyframes stepTap{
  0%,100%{ transform:translate(0,0); }
  45%,58%{ transform:translate(26%,42px); }
}

/* Step 3 animation: review screen */
.anim-screen{ display:grid; place-items:center; }
.as-phone{
  width:132px; padding:14px 13px 16px; border-radius:20px;
  background:#fff; border:2.5px solid var(--navy-800); box-shadow:var(--sh-md);
}
.as-notch{ width:38px; height:4px; border-radius:3px; background:var(--navy-800); margin:0 auto 12px; opacity:.35; }
.as-head{ height:9px; width:66%; border-radius:4px; background:var(--surface-3); margin-bottom:12px; }
.as-stars{ display:flex; gap:3px; margin-bottom:11px; }
.as-stars svg{ width:19px; height:19px; fill:var(--line); }
.as-stars svg{ animation:starPop 2.6s ease-in-out infinite; }
.as-stars svg:nth-child(1){ animation-delay:.25s; }
.as-stars svg:nth-child(2){ animation-delay:.4s; }
.as-stars svg:nth-child(3){ animation-delay:.55s; }
.as-stars svg:nth-child(4){ animation-delay:.7s; }
.as-stars svg:nth-child(5){ animation-delay:.85s; }
@keyframes starPop{
  0%,8%{ fill:var(--line); transform:scale(1); }
  16%{ fill:#F7B500; transform:scale(1.25); }
  24%,88%{ fill:#F7B500; transform:scale(1); }
  100%{ fill:var(--line); transform:scale(1); }
}
.as-line{ height:8px; border-radius:4px; background:var(--surface-3); margin-bottom:6px; }
.as-line.short{ width:62%; margin-bottom:14px; }
.as-btn{
  padding:8px; border-radius:var(--r-pill); text-align:center;
  background:var(--grad-gold); color:var(--navy-900); font-weight:800; font-size:.78rem;
}

/* ── Products ──────────────────────────────────────────────── */
.products{ display:grid; gap:24px; margin-bottom:56px; }
@media (min-width:900px){ .products{ grid-template-columns:1fr 1fr; gap:28px; } }
.product{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-xl);
  overflow:hidden; box-shadow:var(--sh-sm); transition:transform .25s, box-shadow .25s;
  display:flex; flex-direction:column;
}
.product:hover{ transform:translateY(-5px); box-shadow:var(--sh-lg); }

/* שתי התמונות זו לצד זו — בלי הסתרה של ה-QR או של הכיתוב.
   בנייד הן נערמות, כדי שתמונת המוצר הראשית תישאר מעל 240px
   והטקסט המודפס על הכרטיס יישאר קריא. */
.product-media{
  padding:26px 22px; background:linear-gradient(160deg,#F7FAFE,#E9F0F8);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; min-height:290px;
}
.pm-main{
  width:min(90%,272px); border-radius:var(--r-md); object-fit:contain;
  box-shadow:0 14px 34px rgba(15,27,42,.16);
}
.pm-side{
  width:104px; border-radius:10px; object-fit:cover; aspect-ratio:3/4;
  box-shadow:var(--sh-md); border:3px solid #fff;
}
@media (min-width:560px){
  .product-media{ flex-direction:row; align-items:flex-end; gap:18px; }
  .pm-main{ width:min(58%,244px); }
  .pm-side{ width:min(30%,118px); }
}

.product-body{ padding:24px 24px 28px; flex:1; }
.product-tag{
  display:inline-block; padding:5px 13px; border-radius:var(--r-pill);
  font-size:.76rem; font-weight:900; margin-bottom:11px;
}
.tag-google{ background:#E8F0FE; color:#1652C0; }
.tag-insta{ background:#FCE9F1; color:#C1338B; }
.product h3{ font-size:1.4rem; margin-bottom:9px; }
.product-body > p{ font-size:.98rem; margin-bottom:16px; }
.product-feats{ display:grid; gap:9px; }
.product-feats li{ position:relative; padding-inline-start:26px; font-size:.92rem; }
.product-feats li::before{
  content:''; position:absolute; inset-inline-start:0; top:.5em;
  width:15px; height:9px; border-inline-start:2.6px solid var(--green); border-bottom:2.6px solid var(--green);
  transform:rotate(-45deg);
}

/* מיקום גמיש */
.placement{
  display:grid; gap:30px; align-items:center;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-xl);
  padding:28px; box-shadow:var(--sh-sm);
}
@media (min-width:920px){ .placement{ padding:40px; gap:36px; } }
/* הטקסט ברוחב קריא, שלוש התמונות ברוחב מלא מתחתיו */
.placement-copy{ max-width:78ch; }
.placement h3{ font-size:clamp(1.3rem,2.6vw,1.75rem); margin:14px 0 12px; }
.placement > .placement-copy > p{ margin-bottom:18px; }
.placement-list{ display:grid; gap:11px; }
.placement-list li{ position:relative; padding-inline-start:28px; font-size:.95rem; }
.placement-list li::before{
  content:''; position:absolute; inset-inline-start:0; top:.42em;
  width:16px; height:16px; border-radius:50%; background:var(--gold-100);
  border:2px solid var(--gold-400);
}
/* עמודה אחת בנייד כדי שהמוצר יישאר קריא; שלוש עמודות רק כשיש מספיק רוחב */
.placement-photos{ display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:820px){ .placement-photos{ grid-template-columns:repeat(3,1fr); gap:18px; } }
.placement-photos figure{ margin:0; }
.placement-photos img{
  width:100%; aspect-ratio:3/4; object-fit:cover;
  border-radius:var(--r-md); box-shadow:var(--sh-md);
}
.placement-photos figcaption{
  margin-top:9px; text-align:center; font-size:.85rem; font-weight:700; color:var(--muted);
}

/* ── Results / ROI ─────────────────────────────────────────── */
.timeline{ position:relative; margin-bottom:56px; }
.tl-track{
  position:absolute; top:19px; inset-inline:18px; height:3px;
  background:rgba(255,255,255,.13); border-radius:2px; display:none;
}
@media (min-width:860px){ .tl-track{ display:block; } }
.tl-fill{
  display:block; height:100%; width:0; border-radius:2px;
  background:var(--grad-gold); transition:width 1.4s cubic-bezier(.22,1,.36,1) .2s;
}
.timeline.in .tl-fill{ width:100%; }

.tl-points{ display:grid; gap:22px; }
@media (min-width:860px){ .tl-points{ grid-template-columns:repeat(5,1fr); gap:14px; } }
.tl-point{ position:relative; padding-inline-start:56px; }
@media (min-width:860px){ .tl-point{ padding:0; text-align:center; } }
.tl-dot{
  position:absolute; inset-inline-start:8px; top:2px;
  width:22px; height:22px; border-radius:50%;
  background:var(--navy-700); border:3px solid rgba(232,190,78,.5);
  display:grid; place-items:center;
}
@media (min-width:860px){ .tl-dot{ position:static; margin:0 auto 14px; } }
.tl-dot svg{ width:12px; height:12px; fill:none; stroke:var(--navy-900); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.tl-dot-pay, .tl-dot-end{ width:40px; height:40px; background:var(--grad-gold); border-color:rgba(255,255,255,.22); }
.tl-dot-pay svg, .tl-dot-end svg{ width:19px; height:19px; }
@media (min-width:860px){ .tl-point:not(.tl-point-start):not(.tl-point-end) .tl-dot{ margin-top:9px; margin-bottom:23px; } }

.tl-when{ display:block; font-size:.78rem; font-weight:800; color:var(--gold-300); letter-spacing:.03em; margin-bottom:4px; }
.tl-what{ display:block; color:#fff; font-size:.98rem; line-height:1.4; margin-bottom:5px; }
.tl-cost{
  display:inline-block; font-size:.78rem; font-weight:800; padding:3px 10px;
  border-radius:var(--r-pill); background:rgba(14,159,85,.18); color:#6BE8A8;
}
.tl-cost-pay{ background:rgba(232,190,78,.18); color:var(--gold-300); }

/* Chart */
.chart-wrap{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.11);
  border-radius:var(--r-xl); padding:24px 20px 20px; margin-bottom:44px;
  backdrop-filter:blur(6px);
}
@media (min-width:768px){ .chart-wrap{ padding:32px 32px 24px; } }
.chart-head{ display:flex; flex-wrap:wrap; gap:12px 20px; align-items:baseline; justify-content:space-between; margin-bottom:26px; }
.chart-head h3{ color:#fff; font-size:1.18rem; }
.chart-legend{ display:flex; gap:18px; font-size:.85rem; font-weight:700; color:rgba(255,255,255,.75); }
.chart-legend span{ display:flex; align-items:center; gap:7px; }
.lg{ width:13px; height:13px; border-radius:4px; display:block; }
.lg-before{ background:rgba(255,255,255,.28); }
.lg-after{ background:var(--grad-gold); }

.chart{ width:100%; overflow-x:auto; }
.chart svg{ width:100%; min-width:300px; height:auto; display:block; }
.chart-note{ font-size:.8rem; color:rgba(255,255,255,.5); margin-top:14px; line-height:1.5; }

.roi-cards{ display:grid; gap:18px; }
@media (min-width:640px){ .roi-cards{ grid-template-columns:1fr 1fr; } }
@media (min-width:1080px){ .roi-cards{ grid-template-columns:repeat(4,1fr); } }
.roi{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.11);
  border-radius:var(--r-lg); padding:24px 20px; transition:background .22s, transform .22s;
}
.roi:hover{ background:rgba(255,255,255,.09); transform:translateY(-4px); }
.roi-ico{
  display:grid; place-items:center; width:44px; height:44px; margin-bottom:14px;
  border-radius:12px; background:rgba(232,190,78,.15);
}
.roi-ico svg{ width:22px; height:22px; fill:none; stroke:var(--gold-300); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.roi h3{ color:#fff; font-size:1.06rem; margin-bottom:8px; }
.roi p{ font-size:.92rem; color:rgba(255,255,255,.72); }

/* ── Pricing ───────────────────────────────────────────────── */
.pricing-grid{ display:grid; gap:22px; margin-bottom:34px; align-items:start; }
@media (min-width:860px){ .pricing-grid{ grid-template-columns:repeat(3,1fr); gap:20px; } }

.plan{
  position:relative; background:#fff; border:1.5px solid var(--line);
  border-radius:var(--r-xl); padding:28px 24px 26px; box-shadow:var(--sh-sm);
  display:flex; flex-direction:column; transition:transform .25s, box-shadow .25s, border-color .25s;
}
.plan:hover{ transform:translateY(-4px); box-shadow:var(--sh-md); }
.plan-featured{
  border-color:var(--gold-400); border-width:2.5px; box-shadow:var(--sh-lg);
  background:linear-gradient(180deg,#FFFCF4 0%,#FFFFFF 22%);
}
@media (min-width:860px){ .plan-featured{ transform:translateY(-14px); } .plan-featured:hover{ transform:translateY(-18px); } }

.plan-ribbon{
  position:absolute; top:-14px; inset-inline-start:50%; transform:translateX(50%);
  padding:6px 18px; border-radius:var(--r-pill); white-space:nowrap;
  background:var(--grad-gold); color:var(--navy-900);
  font-size:.79rem; font-weight:900; box-shadow:var(--sh-gold);
}
.plan-discount{
  position:absolute; top:18px; inset-inline-end:18px;
  padding:5px 12px; border-radius:var(--r-pill);
  background:var(--green-soft); color:var(--green-dark);
  font-size:.78rem; font-weight:900;
}
.plan-name{ font-size:1.24rem; margin-bottom:3px; padding-inline-end:74px; }
.plan-tagline{ font-size:.86rem; color:var(--muted); font-weight:600; margin-bottom:18px; }

/* חיסכון — האלמנט הכי בולט */
.plan-saving{
  background:linear-gradient(150deg,#E6F7EE,#F3FBF7);
  border:1.5px dashed var(--green); border-radius:var(--r-md);
  padding:13px 16px; margin-bottom:16px; text-align:center;
}
.ps-label{ display:block; font-size:.76rem; font-weight:900; color:var(--green-dark); letter-spacing:.05em; margin-bottom:2px; }
.ps-value{ display:block; font-size:2.15rem; font-weight:900; color:var(--green-dark); line-height:1.1; }
.ps-sub{ display:block; font-size:.78rem; color:var(--green-dark); opacity:.82; font-weight:600; margin-top:2px; }

.plan-price{ margin-bottom:6px; display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
.pp-was{ font-size:1rem; color:var(--muted); text-decoration:line-through; text-decoration-thickness:1.5px; }
.pp-now{ font-size:1.65rem; font-weight:900; color:var(--ink); }
.pp-label{ font-size:.84rem; color:var(--muted); font-weight:600; }
.plan-perunit{ font-size:.85rem; color:var(--muted); margin-bottom:18px; font-weight:600; }
.plan-perunit b{ color:var(--gold-600); }

.plan-unique{
  background:var(--surface-2); border-inline-start:3px solid var(--gold-400);
  border-radius:0 var(--r-sm) var(--r-sm) 0; padding:11px 14px;
  font-size:.88rem; font-weight:600; color:var(--ink); margin-bottom:8px;
}
.plan-placement{
  display:flex; align-items:flex-start; gap:8px;
  font-size:.83rem; color:var(--muted); margin-bottom:18px; line-height:1.45;
}
.plan-placement svg{ width:14px; height:14px; flex:none; margin-top:4px; fill:none; stroke:var(--gold-600); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

.plan-feats{ display:grid; gap:9px; margin-bottom:24px; }
.plan-feats li{ position:relative; padding-inline-start:25px; font-size:.9rem; }
.plan-feats li::before{
  content:''; position:absolute; inset-inline-start:0; top:.48em;
  width:14px; height:8px; border-inline-start:2.4px solid var(--green); border-bottom:2.4px solid var(--green);
  transform:rotate(-45deg);
}
.plan .btn{ margin-top:auto; }
.plan-featured .btn{ animation:breathe 3.4s ease-in-out infinite; }
@keyframes breathe{
  0%,100%{ box-shadow:0 10px 30px rgba(208,160,42,.28); }
  50%{ box-shadow:0 14px 40px rgba(208,160,42,.5); }
}

/* ── בורר כמות חופשית ─────────────────────────────────────── */
.qty-picker{
  display:grid; gap:26px; align-items:center; margin-bottom:22px;
  background:linear-gradient(160deg,#FFFDF7,#FFFFFF);
  border:2px solid var(--gold-300); border-radius:var(--r-xl);
  padding:28px; box-shadow:var(--sh-md);
}
@media (min-width:860px){ .qty-picker{ grid-template-columns:1.1fr .9fr; gap:44px; padding:36px 40px; } }
.qp-copy h3{ font-size:clamp(1.25rem,2.6vw,1.6rem); margin:14px 0 10px; }
.qp-copy > p{ font-size:.96rem; margin-bottom:18px; }

.qp-tiers{ display:grid; gap:8px; }
.qp-tiers li{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:9px 14px; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-sm); font-size:.9rem;
}
.qp-tiers b{ color:var(--green-dark); font-weight:900; }
.qp-tiers span{ color:var(--muted); font-size:.85rem; }

.qp-form{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:22px; box-shadow:var(--sh-sm); }
.qp-label{ display:block; font-size:.86rem; font-weight:700; color:var(--ink); margin-bottom:10px; }

.qp-stepper{ display:flex; align-items:stretch; gap:10px; margin-bottom:20px; }
.qp-btn{
  width:52px; flex:none; border:1.5px solid var(--line); background:var(--surface-2);
  border-radius:var(--r-md); font-size:1.5rem; font-weight:700; line-height:1;
  color:var(--navy-800); cursor:pointer; transition:.18s;
}
.qp-btn:hover{ background:var(--gold-100); border-color:var(--gold-400); }
.qp-stepper input{
  flex:1; min-width:0; text-align:center; padding:14px 8px;
  border:1.5px solid var(--line); border-radius:var(--r-md);
  font-size:1.5rem; font-weight:900; color:var(--ink); background:#fff;
  -moz-appearance:textfield;
}
.qp-stepper input::-webkit-outer-spin-button,
.qp-stepper input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.qp-stepper input:focus{ outline:none; border-color:var(--gold-500); box-shadow:0 0 0 4px rgba(232,190,78,.2); }

.qp-stepper-sm{ margin-bottom:12px; }
.qp-stepper-sm .qp-btn{ width:42px; font-size:1.25rem; }
.qp-stepper-sm input{ padding:9px 6px; font-size:1.1rem; }

.qp-result{ border-top:1px solid var(--line); padding-top:16px; }
.qp-line{ display:flex; justify-content:space-between; gap:12px; font-size:.92rem; margin-bottom:8px; }
.qp-line b{ font-weight:700; }
.qp-line-save{ color:var(--green-dark); }
.qp-line-save b{ color:var(--green-dark); font-weight:900; }
.qp-line-save i{ font-style:normal; font-weight:900; }
.qp-total{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding-top:12px; margin-top:4px; border-top:2px solid var(--ink);
}
.qp-total span{ font-weight:800; color:var(--ink); }
.qp-total b{ font-size:1.7rem; font-weight:900; color:var(--ink); }
.qp-perunit{ text-align:end; font-size:.85rem; color:var(--muted); font-weight:600; margin-top:4px; }

.qp-nudge{
  background:var(--green-soft); color:var(--green-dark); border-radius:var(--r-sm);
  padding:10px 14px; font-size:.86rem; margin:16px 0 14px; line-height:1.45;
}
.qp-nudge b{ color:var(--green-dark); font-weight:900; }

/* Custom amount */
.custom-amount{
  display:grid; gap:22px; align-items:center;
  background:var(--surface-2); border:1px dashed var(--line);
  border-radius:var(--r-lg); padding:26px;
}
@media (min-width:820px){ .custom-amount{ grid-template-columns:1.25fr .75fr; gap:36px; padding:30px 34px; } }
.ca-copy h3{ font-size:1.18rem; margin-bottom:7px; }
.ca-copy p{ font-size:.94rem; }
.ca-form{ display:grid; gap:14px; }
.ca-row{ display:grid; gap:6px; }
.ca-form label{ font-size:.86rem; font-weight:700; color:var(--ink); }
#customCodeInput{
  width:100%; padding:13px 16px; border:1.5px solid var(--line);
  border-radius:var(--r-md); background:#fff; font-size:1rem; font-weight:700;
  letter-spacing:.06em; transition:border-color .18s, box-shadow .18s;
}
#customCodeInput:focus{ outline:none; border-color:var(--gold-500); box-shadow:0 0 0 4px rgba(232,190,78,.2); }
#customCodeInput[aria-invalid="true"], .ca-field input[aria-invalid="true"]{
  border-color:var(--red); box-shadow:0 0 0 4px rgba(214,48,59,.1);
}

/* חסימת קוד בעמוד התשלום */
.code-gate{ max-width:480px; margin:0 auto; text-align:center; }
.code-gate-ico{
  width:64px; height:64px; margin:0 auto 18px; border-radius:50%;
  display:grid; place-items:center; background:var(--gold-100);
}
.code-gate-ico svg{ width:28px; height:28px; fill:none; stroke:var(--gold-600); stroke-width:2; }
.code-gate h2{ margin-bottom:8px; }
.code-gate > p{ font-size:.95rem; margin-bottom:22px; }
.code-gate form{ display:grid; gap:10px; text-align:start; }
.code-gate label{ font-size:.86rem; font-weight:700; color:var(--ink); }
.code-gate input{
  width:100%; padding:14px 16px; border:1.5px solid var(--line); border-radius:var(--r-md);
  font-size:1.05rem; font-weight:700; letter-spacing:.06em; text-align:center;
}
.code-gate input:focus{ outline:none; border-color:var(--gold-500); box-shadow:0 0 0 4px rgba(232,190,78,.2); }
.code-gate input[aria-invalid="true"]{ border-color:var(--red); }
.code-gate-alt{ font-size:.88rem; color:var(--muted); margin-top:18px; }
.code-gate-alt a{ color:var(--navy-600); font-weight:700; text-decoration:underline; }
.ca-field{ position:relative; }
.ca-symbol{
  position:absolute; inset-inline-start:16px; top:50%; transform:translateY(-50%);
  font-weight:800; color:var(--muted); pointer-events:none;
}
.ca-field input{
  width:100%; padding:14px 40px 14px 16px; border:1.5px solid var(--line);
  border-radius:var(--r-md); background:#fff; font-size:1.1rem; font-weight:800;
  transition:border-color .18s, box-shadow .18s;
}
.ca-field input:focus{ outline:none; border-color:var(--gold-500); box-shadow:0 0 0 4px rgba(232,190,78,.2); }
.field-error{ color:var(--red); font-size:.84rem; font-weight:700; margin:0; }

.vat-note{ text-align:center; font-size:.86rem; color:var(--muted); margin-top:26px; }

/* ── FAQ ───────────────────────────────────────────────────── */
.faq-list{ display:grid; gap:12px; }
.faq{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  overflow:hidden; transition:border-color .2s, box-shadow .2s;
}
.faq[open]{ border-color:var(--gold-300); box-shadow:var(--sh-sm); }
.faq summary{
  list-style:none; cursor:pointer; padding:18px 22px; padding-inline-end:52px;
  position:relative; font-weight:700; color:var(--ink); font-size:1.02rem;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:''; position:absolute; inset-inline-end:22px; top:50%;
  width:11px; height:11px; margin-top:-7px;
  border-inline-end:2.5px solid var(--gold-600); border-bottom:2.5px solid var(--gold-600);
  transform:rotate(45deg); transition:transform .22s;
}
.faq[open] summary::after{ transform:rotate(-135deg); margin-top:-2px; }
.faq-a{ padding:0 22px 20px; }
.faq-a p{ font-size:.96rem; }

/* ── Final CTA ─────────────────────────────────────────────── */
.final-cta{ background:var(--grad-navy); padding-block:var(--sec-y); position:relative; overflow:hidden; }
.final-cta::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(60% 70% at 50% 0%, rgba(232,190,78,.16), transparent 68%);
}
.final-inner{ position:relative; text-align:center; max-width:760px; }
.final-inner h2{ color:#fff; font-size:clamp(1.6rem,4vw,2.4rem); margin-bottom:14px; }
.final-inner p{ color:rgba(255,255,255,.74); margin-bottom:28px; font-size:1.05rem; }

/* ── Footer ────────────────────────────────────────────────── */
.site-footer{ background:var(--navy-900); color:rgba(255,255,255,.62); padding-block:52px 26px; }
.footer-inner{ display:grid; gap:34px; }
@media (min-width:760px){ .footer-inner{ grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:32px; } }
.footer-brand img{ height:52px; width:auto; margin-bottom:14px; }
.footer-brand p{ font-size:.92rem; max-width:34ch; margin-bottom:18px; }

.social{ display:flex; flex-wrap:wrap; gap:9px; }
.social a{
  display:grid; place-items:center; width:38px; height:38px; border-radius:11px;
  background:rgba(255,255,255,.07); transition:background .2s, transform .2s;
}
.social a:hover{ background:rgba(232,190,78,.2); transform:translateY(-2px); }
.social svg{ width:18px; height:18px; fill:rgba(255,255,255,.8); }

.footer-col h3{ color:#fff; font-size:1rem; margin-bottom:14px; }
.footer-col a, .footer-col p{ display:block; font-size:.92rem; margin-bottom:9px; transition:color .18s; }
.footer-col a:hover{ color:var(--gold-300); }

.footer-bottom{
  display:flex; flex-wrap:wrap; gap:10px 22px; justify-content:space-between; align-items:center;
  margin-top:38px; padding-top:22px; border-top:1px solid rgba(255,255,255,.09);
  font-size:.83rem;
}
.secure-line{ display:flex; align-items:center; gap:8px; }
.secure-line svg{ width:15px; height:15px; flex:none; fill:none; stroke:var(--gold-400); stroke-width:1.9; }

/* ═══════════════ CHECKOUT PAGE ═══════════════ */
.checkout-header{
  background:#fff; border-bottom:1px solid var(--line); padding-block:16px;
  position:sticky; top:0; z-index:50;
}
.checkout-header .header-inner{ justify-content:space-between; min-height:auto; }
.back-link{ display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:.92rem; color:var(--body); }
.back-link svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; transform:scaleX(-1); }
.back-link:hover{ color:var(--ink); }

.checkout-main{ background:var(--surface-2); min-height:calc(100vh - 210px); padding-block:34px 60px; }
.checkout-title{ text-align:center; margin-bottom:30px; }
.checkout-title h1{ font-size:clamp(1.5rem,3.6vw,2.1rem); margin-bottom:8px; }
.checkout-title p{ font-size:.98rem; }

.checkout-grid{ display:grid; gap:22px; align-items:start; }
@media (min-width:940px){ .checkout-grid{ grid-template-columns:1.35fr .8fr; gap:28px; } }

.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:26px 24px; box-shadow:var(--sh-sm);
}
@media (min-width:768px){ .card{ padding:30px 30px; } }
.card + .card{ margin-top:20px; }
.card h2{ font-size:1.2rem; margin-bottom:5px; }
.card > .card-sub{ font-size:.9rem; color:var(--muted); margin-bottom:22px; }

/* Demo banner */
.demo-banner{
  display:flex; gap:12px; align-items:flex-start;
  background:#FFF8E6; border:1.5px solid var(--gold-300); border-radius:var(--r-md);
  padding:15px 18px; margin-bottom:22px;
}
.demo-banner svg{ width:20px; height:20px; flex:none; margin-top:2px; fill:none; stroke:var(--gold-600); stroke-width:2; stroke-linecap:round; }
.demo-banner b{ display:block; margin-bottom:2px; }
.demo-banner p{ font-size:.88rem; color:var(--body); }

/* Form */
.form-grid{ display:grid; gap:16px; }
@media (min-width:600px){ .form-grid{ grid-template-columns:1fr 1fr; } }
.field{ display:grid; gap:6px; }
.field-wide{ grid-column:1/-1; }
.field label{ font-size:.88rem; font-weight:700; color:var(--ink); }
.field .req{ color:var(--red); }
.field input, .field textarea, .field select{
  width:100%; padding:13px 15px; border:1.5px solid var(--line); border-radius:var(--r-md);
  background:#fff; font-size:1rem; transition:border-color .18s, box-shadow .18s;
}
.field textarea{ resize:vertical; min-height:82px; }
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none; border-color:var(--navy-600); box-shadow:0 0 0 4px rgba(29,72,116,.13);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"]{
  border-color:var(--red); box-shadow:0 0 0 4px rgba(214,48,59,.1);
}
.field .field-error{ min-height:1px; }
.field-hint{ font-size:.8rem; color:var(--muted); }

.checkbox-row{ display:flex; gap:11px; align-items:flex-start; margin-top:4px; }
.checkbox-row input{ width:20px; height:20px; flex:none; margin-top:2px; accent-color:var(--navy-700); }
.checkbox-row label{ font-size:.89rem; font-weight:500; color:var(--body); }
.checkbox-row a{ color:var(--navy-600); text-decoration:underline; font-weight:600; }

/* Order summary */
.checkout-topline{
  display:inline-flex; align-items:baseline; gap:6px; margin-top:12px;
  padding:8px 18px; border-radius:var(--r-pill);
  background:var(--gold-100); border:1px solid var(--gold-200);
  font-size:.95rem; font-weight:700; color:var(--gold-600);
}
.checkout-topline b{ font-size:1.1rem; font-weight:900; color:var(--navy-800); }
@media (min-width:940px){ .checkout-topline{ display:none; } }

.summary{ position:static; }
@media (min-width:940px){ .summary{ position:sticky; top:104px; } }
.summary-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:18px; }
.summary-head h2{ margin:0; }
.summary-change{ font-size:.86rem; font-weight:700; color:var(--navy-600); text-decoration:underline; }

.summary-item{
  display:flex; gap:14px; align-items:center; padding-bottom:18px;
  border-bottom:1px solid var(--line); margin-bottom:18px;
}
.summary-thumb{
  width:60px; height:60px; flex:none; border-radius:12px; object-fit:cover;
  border:1px solid var(--line); background:var(--surface-2);
}
.summary-item-name{ font-weight:800; color:var(--ink); font-size:1rem; }
.summary-item-meta{ font-size:.85rem; color:var(--muted); }

.summary-lines{ display:grid; gap:11px; font-size:.94rem; margin-bottom:18px; }
.summary-lines > div{ display:flex; justify-content:space-between; gap:14px; }
.summary-lines .sl-value{ font-weight:700; color:var(--ink); }
.sl-discount .sl-value{ color:var(--green-dark); }
.sl-strike .sl-value{ text-decoration:line-through; color:var(--muted); font-weight:600; }

.summary-total{
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  padding-top:18px; border-top:2px solid var(--ink);
}
.summary-total span:first-child{ font-weight:800; color:var(--ink); font-size:1.05rem; }
.summary-total-value{ font-size:1.7rem; font-weight:900; color:var(--ink); }
.summary-vat{ font-size:.8rem; color:var(--muted); text-align:end; margin-top:6px; }

.summary-saving{
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:var(--green-soft); color:var(--green-dark);
  border-radius:var(--r-md); padding:11px; margin-top:16px;
  font-weight:800; font-size:.95rem;
}
.summary-saving svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }

.pay-btn{ margin-top:20px; }
.secure-badges{ display:grid; gap:9px; margin-top:18px; }
.secure-badges li{ display:flex; align-items:flex-start; gap:9px; font-size:.84rem; color:var(--muted); }
.secure-badges svg{ width:15px; height:15px; flex:none; margin-top:3px; fill:none; stroke:var(--green); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }

/* Quantity switcher */
.qty-switch{ display:grid; gap:10px; margin-bottom:6px; }
.qty-options{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.qty-opt{
  border:1.5px solid var(--line); border-radius:var(--r-md); background:#fff;
  padding:11px 8px; cursor:pointer; text-align:center; transition:.18s;
}
.qty-opt:hover{ border-color:var(--navy-600); }
.qty-opt[aria-pressed="true"]{ border-color:var(--gold-500); background:var(--gold-100); box-shadow:0 0 0 3px rgba(232,190,78,.2); }
.qty-opt b{ display:block; font-size:1.02rem; }
.qty-opt small{ display:block; font-size:.76rem; color:var(--muted); }

/* Payment iframe host */
.pay-frame{ width:100%; min-height:560px; border:0; border-radius:var(--r-md); background:#fff; }
.pay-frame-wrap{ margin-top:20px; }

/* Loading state */
.btn[data-loading="true"]{ pointer-events:none; opacity:.75; }
.btn[data-loading="true"]::after{
  content:''; width:16px; height:16px; border-radius:50%;
  border:2.5px solid rgba(6,19,31,.25); border-top-color:var(--navy-900);
  animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.form-alert{
  display:none; gap:10px; align-items:flex-start; margin-top:16px;
  background:var(--red-soft); border:1.5px solid rgba(214,48,59,.35);
  border-radius:var(--r-md); padding:14px 16px; color:#9E1F27; font-size:.9rem; font-weight:600;
}
.form-alert.show{ display:flex; }
.form-alert svg{ width:18px; height:18px; flex:none; margin-top:1px; fill:none; stroke:currentColor; stroke-width:2.2; }

/* ═══════════════ RESULT PAGES ═══════════════ */
.result-main{ min-height:78vh; display:grid; place-items:center; padding:56px var(--gutter); background:var(--surface-2); }
.result-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-xl);
  padding:44px 32px; box-shadow:var(--sh-lg); max-width:560px; width:100%; text-align:center;
}
.result-icon{ width:76px; height:76px; margin:0 auto 22px; border-radius:50%; display:grid; place-items:center; }
.result-icon svg{ width:36px; height:36px; fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.result-icon-ok{ background:var(--green-soft); } .result-icon-ok svg{ stroke:var(--green); }
.result-icon-err{ background:var(--red-soft); } .result-icon-err svg{ stroke:var(--red); }
.result-card h1{ font-size:1.7rem; margin-bottom:12px; }
.result-card > p{ margin-bottom:22px; }
.result-meta{
  background:var(--surface-2); border-radius:var(--r-md); padding:16px 20px;
  margin-bottom:24px; display:grid; gap:9px; font-size:.92rem; text-align:start;
}
.result-meta div{ display:flex; justify-content:space-between; gap:14px; }
.result-meta b{ font-weight:800; }
.result-actions{ display:flex; flex-wrap:wrap; gap:11px; justify-content:center; }

/* אימות התשלום מול חברת הסליקה */
.pay-verify{
  display:flex; align-items:center; gap:10px; text-align:start;
  padding:12px 16px; border-radius:var(--r-md); margin-bottom:22px;
  font-size:.9rem; font-weight:600; line-height:1.45;
}
.pay-verify .pv-dot{
  flex:none; width:10px; height:10px; border-radius:50%; background:currentColor;
}
.pv-pending{ background:var(--surface-2); color:var(--muted); }
.pv-pending .pv-dot{ animation:pv-pulse 1.1s ease-in-out infinite; }
.pv-ok{ background:var(--green-soft); color:var(--green-dark); }
.pv-warn{ background:#FEF3C7; color:#92400E; }
@keyframes pv-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
@media (prefers-reduced-motion: reduce){ .pv-pending .pv-dot{ animation:none; } }

/* ═══════════════ LEGAL PAGES ═══════════════ */
.legal-main{ padding-block:48px 72px; }
.legal-main h1{ font-size:2rem; margin-bottom:8px; }
.legal-updated{ font-size:.88rem; color:var(--muted); margin-bottom:32px; }
.legal-main h2{ font-size:1.25rem; margin:34px 0 10px; }
.legal-main p, .legal-main li{ font-size:.98rem; margin-bottom:10px; }
.legal-main ul{ list-style:disc; padding-inline-start:22px; margin-bottom:14px; }
/* ── דף צור קשר — Hero ─────────────────────────────────────── */
.contact-hero{
  background:var(--grad-navy); color:rgba(255,255,255,.8);
  padding-block:52px 60px; text-align:center; position:relative; overflow:hidden;
}
.contact-hero::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(62% 70% at 50% 0%, rgba(232,190,78,.16), transparent 68%);
}
.contact-hero > *{ position:relative; }
.contact-hero .eyebrow{
  background:rgba(255,255,255,.08); border-color:rgba(232,190,78,.35); color:var(--gold-300);
}
.contact-hero h1{
  color:#fff; font-size:clamp(1.9rem,5vw,3rem); font-weight:900; margin-bottom:14px;
}

/* שם החברה והמוטו — הצהרת ערך, לא משפט שנאמר */
.brand-lockup{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.bl-name{
  direction:ltr; font-family:Arial, Helvetica, sans-serif; font-weight:800;
  font-size:clamp(2.5rem,8vw,4.1rem); line-height:1; letter-spacing:.055em; color:#fff;
}
/* צבע מלא כברירת מחדל — הגרדיאנט נכנס רק אם הדפדפן תומך,
   אחרת שם החברה היה נעלם לגמרי */
.bl-up{ color:var(--gold-300); }
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .bl-up{
    background:linear-gradient(135deg,#FBEBBE 0%,#EFC95F 45%,#CE9A24 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
}
.bl-rule{
  width:clamp(48px,12vw,84px); height:2px; border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--gold-400),transparent);
}
.bl-motto{
  font-size:clamp(1.25rem,3.4vw,1.85rem); font-weight:700; line-height:1.3;
  color:var(--gold-200); letter-spacing:-.005em;
}
.bl-eq{ color:var(--gold-400); font-weight:900; margin-inline:3px; }
.contact-hero-sub{
  color:rgba(255,255,255,.74); font-size:clamp(1rem,2vw,1.14rem);
  max-width:60ch; margin-inline:auto;
}
@media (min-width:768px){ .contact-hero{ padding-block:64px 76px; } }

/* ── שני מסלולים ───────────────────────────────────────────── */
.action-split{ display:grid; gap:22px; align-items:start; }
@media (min-width:900px){ .action-split{ grid-template-columns:1.05fr .95fr; gap:26px; } }

.action-card{
  background:#fff; border:1.5px solid var(--line); border-radius:var(--r-xl);
  padding:28px 24px 26px; box-shadow:var(--sh-sm);
}
@media (min-width:768px){ .action-card{ padding:34px 32px 30px; } }

/* הכרטיס המוביל — מי שהגיע לכאן כבר סגר מחיר */
.action-pay{
  border-color:var(--gold-400); border-width:2.5px; box-shadow:var(--sh-lg);
  background:linear-gradient(180deg,#FFFCF4 0%,#FFFFFF 20%);
}

.ac-badge{
  display:inline-flex; align-items:center; gap:8px; padding:7px 15px;
  border-radius:var(--r-pill); font-size:.83rem; font-weight:900; margin-bottom:14px;
  background:var(--gold-100); color:var(--gold-600);
}
.ac-badge svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ac-badge-alt{ background:var(--green-soft); color:var(--green-dark); }

.action-card h2{ font-size:clamp(1.25rem,2.6vw,1.6rem); margin-bottom:10px; }
.ac-lead{ font-size:.97rem; margin-bottom:22px; }
.ac-note{ font-size:.85rem; color:var(--muted); margin-top:16px; line-height:1.5; }
.ac-note a{ color:var(--navy-600); font-weight:700; text-decoration:underline; }

/* טופס תשלום מהיר */
.quick-pay{ display:grid; gap:14px; }
.qp-field{ display:grid; gap:6px; }
.qp-field label{ font-size:.86rem; font-weight:700; color:var(--ink); }
.qp-field input{
  width:100%; padding:14px 16px; border:1.5px solid var(--line); border-radius:var(--r-md);
  background:#fff; font-size:1.05rem; font-weight:700; transition:border-color .18s, box-shadow .18s;
}
#qpCode{ letter-spacing:.06em; }
.qp-field input:focus{ outline:none; border-color:var(--gold-500); box-shadow:0 0 0 4px rgba(232,190,78,.2); }
.qp-field input[aria-invalid="true"]{ border-color:var(--red); box-shadow:0 0 0 4px rgba(214,48,59,.1); }

.qp-money{ position:relative; }
.qp-currency{
  position:absolute; inset-inline-start:16px; top:50%; transform:translateY(-50%);
  font-weight:800; color:var(--muted); pointer-events:none;
}
.qp-money input{ padding-inline-start:40px; font-size:1.2rem; font-weight:900; }
.qp-money input::-webkit-outer-spin-button,
.qp-money input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.qp-money input{ -moz-appearance:textfield; }

/* כפתורי יצירת קשר */
.talk-buttons{ display:grid; gap:11px; }
.talk-btn{
  display:flex; align-items:center; gap:13px; padding:14px 16px;
  background:var(--surface-2); border:1.5px solid var(--line); border-radius:var(--r-md);
  transition:transform .18s, border-color .18s, background .18s;
}
.talk-btn:hover{ transform:translateY(-2px); border-color:var(--navy-600); background:#fff; }
.talk-btn svg{ width:26px; height:26px; flex:none; fill:none; stroke:var(--navy-700); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.talk-btn span{ display:grid; min-width:0; }
.talk-btn b{ font-size:1rem; font-weight:800; word-break:break-word; }
.talk-btn small{ font-size:.8rem; color:var(--muted); }
.talk-wa{ background:var(--green-soft); border-color:rgba(14,161,80,.35); }
.talk-wa:hover{ border-color:var(--green); background:#fff; }
.talk-wa svg{ stroke:var(--green-dark); }

/* כרטיס פרטי העסק ורצועת אמון */
.biz-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:24px; margin-top:30px; box-shadow:var(--sh-sm);
}
.biz-card h3{ font-size:1.1rem; margin-bottom:14px; }

.trust-strip{ display:grid; gap:10px; margin-top:24px; }
@media (min-width:720px){ .trust-strip{ grid-template-columns:repeat(3,1fr); } }
.trust-strip li{
  display:flex; align-items:center; gap:9px; padding:13px 16px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  font-size:.88rem; font-weight:600;
}
.trust-strip svg{ width:17px; height:17px; flex:none; fill:none; stroke:var(--green); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }

/* ── דף צור קשר ────────────────────────────────────────────── */
.contact-grid{ display:grid; gap:14px; margin:26px 0 36px; }
@media (min-width:600px){ .contact-grid{ grid-template-columns:1fr 1fr; } }

.contact-card{
  display:grid; gap:3px; padding:20px;
  background:#fff; border:1.5px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--sh-sm); transition:transform .2s, box-shadow .2s, border-color .2s;
}
a.contact-card:hover{ transform:translateY(-3px); box-shadow:var(--sh-md); border-color:var(--gold-300); }
.cc-ico{
  width:40px; height:40px; margin-bottom:8px; padding:9px; border-radius:11px;
  background:var(--gold-100); display:grid; place-items:center;
}
.cc-ico svg{ width:100%; height:100%; fill:none; stroke:var(--gold-600); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.cc-label{ font-size:.8rem; font-weight:800; color:var(--muted); letter-spacing:.03em; }
.cc-value{ font-size:1.08rem; font-weight:800; color:var(--ink); word-break:break-word; }
.cc-note{ font-size:.82rem; color:var(--muted); }

.legal-main code{
  background:var(--surface-2); border:1px solid var(--line); border-radius:6px;
  padding:2px 7px; font-size:.9em; direction:ltr; display:inline-block;
}

.legal-todo{
  background:#FFF8E6; border:1.5px solid var(--gold-300); border-radius:var(--r-md);
  padding:16px 20px; margin-bottom:28px; font-size:.92rem;
}

/* ── סרגל רכישה קבוע (נייד) ────────────────────────────────────
   בדף ארוך ה-CTA נעלם מהמסך אחרי הגלילה הראשונה. הסרגל מבטיח
   שכפתור הרכישה זמין בכל רגע, בלי לגלול חזרה למעלה.            */
.sticky-cta{
  position:fixed; inset-inline:0; bottom:0; z-index:90;
  display:flex; align-items:center; gap:12px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background:rgba(255,255,255,.97); backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  box-shadow:0 -4px 20px rgba(15,27,42,.10);
  animation:ctaUp .26s cubic-bezier(.22,1,.36,1);
}
@keyframes ctaUp{ from{ transform:translateY(100%); } }

/* בדסקטופ ה-CTA בהדר תמיד גלוי — אין צורך בסרגל */
@media (min-width:1024px){ .sticky-cta{ display:none !important; } }

.sc-info{ display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.sc-price{ font-size:.95rem; font-weight:700; color:var(--body); }
.sc-price b{ font-size:1.12rem; font-weight:900; color:var(--ink); }
.sc-note{ font-size:.74rem; color:var(--muted); font-weight:600; }

.sticky-cta .btn{
  margin-inline-start:auto; flex:none;
  padding:13px 26px; font-size:1rem;
}

/* מרווח בתחתית הדף כדי שהסרגל לא יכסה את ה-Footer */
body.has-sticky-cta{ padding-bottom:76px; }
@media (min-width:1024px){ body.has-sticky-cta{ padding-bottom:0; } }

@media (prefers-reduced-motion:reduce){ .sticky-cta{ animation:none; } }

/* ── Scroll reveal ─────────────────────────────────────────────
   ההסתרה תלויה במחלקה .js שנוספת ל-<html> על ידי סקריפט בראש הדף.
   כך שאם JavaScript כבוי או נכשל — התוכן פשוט מוצג, ולא נעלם. */
.js .reveal{ opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1); }
.js .reveal.in{ opacity:1; transform:none; }

.no-js-note{
  background:#FFF8E6; border:1.5px solid var(--gold-300); border-radius:var(--r-md);
  padding:18px 22px; text-align:center; font-weight:600;
}

/* ── Reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1 !important; transform:none !important; }
  .tl-fill{ width:100% !important; }
  .stars svg{ fill:#F7B500; }
  .as-stars svg{ fill:#F7B500; }
  .ripple, .tap-phone, .at-phone, .at-wave{ display:none; }
}

/* ── Print ─────────────────────────────────────────────────── */
@media print{
  .site-header, .mobile-nav, .final-cta, .hero-visual, .nav-toggle{ display:none !important; }
  body{ color:#000; }
}