/* =====================================================================
   TOUCH UP — Design System
   אתר תדמית + קטלוג | עברית RTL | בהיר, אוורירי, מעורר השראה
   ===================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  /* צבעי מותג — הכחול נדגם ישירות מהלוגו */
  --brand:        #1F5FC4;
  --brand-700:    #17499A;
  --brand-600:    #1B54B1;
  --brand-400:    #4F86DD;
  --brand-200:    #B7CFF5;
  --brand-50:     #EDF3FE;

  /* חום עדין שמחמם את הכחול ונותן תחושת אור */
  --warm:         #F2C79B;
  --warm-50:      #FDF4EA;

  /* דיו */
  --ink:          #0F1A2E;
  --ink-2:        #3D4B63;
  --ink-3:        #626F86;
  --ink-4:        #78869D;

  /* משטחים */
  --paper:        #FFFFFF;
  --bg:           #F6F8FC;
  --bg-2:         #EFF3FA;
  --line:         #E3E9F3;
  --line-2:       #EDF1F7;

  /* צללים — רכים, "אור יום" */
  --sh-xs:  0 1px 2px rgba(15,26,46,.05);
  --sh-sm:  0 2px 8px rgba(15,26,46,.05), 0 1px 2px rgba(15,26,46,.04);
  --sh-md:  0 8px 24px rgba(15,26,46,.07), 0 2px 6px rgba(15,26,46,.04);
  --sh-lg:  0 20px 50px rgba(15,26,46,.09), 0 6px 14px rgba(15,26,46,.05);
  --sh-xl:  0 34px 80px rgba(20,45,95,.14), 0 10px 24px rgba(15,26,46,.06);
  --sh-brand: 0 18px 40px rgba(31,95,196,.22);

  /* רדיוסים */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 34px;
  --r-pill: 999px;

  /* מידות */
  --wrap: 1200px;
  --wrap-narrow: 860px;
  --header-h: 76px;

  /* טיפוגרפיה */
  --f-head: "Heebo", "Assistant", system-ui, sans-serif;
  --f-body: "Assistant", "Heebo", system-ui, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  background: var(--bg);
  /* המכפיל נשלט מסרגל הנגישות (ברירת מחדל 1) */
  font-size: calc(100% * var(--a11y-font-scale, 1));
}
body{
  margin:0;
  font-family: var(--f-body);
  font-size: clamp(1rem, .94rem + .28vw, 1.09rem);
  line-height:1.75;
  color: var(--ink-2);
  background: var(--bg);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{ display:block; max-width:100%; }
img{ height:auto; }
button,input,textarea,select{ font:inherit; color:inherit; }
button{ cursor:pointer; background:none; border:0; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{
  font-family: var(--f-head);
  color: var(--ink);
  margin:0;
  line-height:1.14;
  letter-spacing:-.022em;
  font-weight:800;
}
p{ margin:0; }
:focus-visible{
  outline:3px solid var(--brand-400);
  outline-offset:3px;
  border-radius:6px;
}

/* ---------- 3. עזרי פריסה ---------- */
.wrap{ width:min(100% - 40px, var(--wrap)); margin-inline:auto; }
.wrap--narrow{ width:min(100% - 40px, var(--wrap-narrow)); }
.section{ padding: clamp(64px, 8vw, 120px) 0; position:relative; }
.section--tight{ padding: clamp(48px, 5.5vw, 80px) 0; }
.section--paper{ background: var(--paper); }
.section--soft{ background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%); }

/* ---------------------------------------------------------------
   מעבר גלים בין חלקות — נגיעה של טקסטורה, לא קו מפריד.
   שני גלים דקים בגוון המותג, נמוגים לשוליים משני הצדדים.
   --------------------------------------------------------------- */
.section::before,
.section--tight::before{
  content:''; position:absolute; z-index:0; pointer-events:none;
  inset-inline:0; top:0; height:18px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='18' viewBox='0 0 128 18'%3E%3Cpath d='M0 7 Q32 1 64 7 T128 7' fill='none' stroke='%231F5FC4' stroke-opacity='.11' stroke-width='1'/%3E%3Cpath d='M0 12 Q32 6 64 12 T128 12' fill='none' stroke='%231F5FC4' stroke-opacity='.055' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat:repeat-x;
  background-position:center top;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
}
.section--tight{ position:relative; }

/* בלי גל צמוד לקו התחתון של כותרת עמוד או של רצועת הלוגואים */
.page-hero + .section::before,
.marquee + .section::before{ content:none; }

.skip-link{
  position:absolute; inset-inline-start:-9999px; top:0; z-index:999;
  background:var(--brand); color:#fff; padding:12px 20px; border-radius:0 0 var(--r-sm) var(--r-sm);
}
.skip-link:focus{ inset-inline-start:16px; }

/* ---------- 4. טיפוגרפיה משותפת ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--f-body); font-weight:700; font-size:.82rem;
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--brand);
  background:var(--brand-50);
  border:1px solid #DCE7FA;
  padding:7px 15px; border-radius:var(--r-pill);
  margin-bottom:20px;
}
.eyebrow::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--brand); flex:none;
}
.h-xl{ font-size: clamp(2.35rem, 5.6vw, 4.1rem); }
.h-lg{ font-size: clamp(1.95rem, 3.9vw, 3.05rem); }
.h-md{ font-size: clamp(1.45rem, 2.3vw, 2rem); }
.h-sm{ font-size: clamp(1.15rem, 1.5vw, 1.35rem); }

.lead{
  font-size: clamp(1.05rem, 1.4vw, 1.22rem);
  color:var(--ink-2);
  line-height:1.8;
  max-width:62ch;
}
.grad-text{
  background: linear-gradient(100deg, var(--brand) 0%, #3E86E8 48%, #6FA8F2 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.section-head{ max-width:760px; margin-bottom: clamp(40px, 5vw, 64px); }
.section-head--center{ margin-inline:auto; text-align:center; }
.section-head--center .lead{ margin-inline:auto; }
.section-head p{ margin-top:20px; }

/* ---------- 5. כפתורים ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--f-head); font-weight:700; font-size:1rem;
  padding:15px 30px; border-radius:var(--r-pill);
  border:1.5px solid transparent;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out),
              background-color .25s, color .25s, border-color .25s;
  white-space:nowrap; line-height:1;
}
.btn svg{ width:19px; height:19px; flex:none; }
.btn--primary{
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-600) 55%, var(--brand-700) 100%);
  color:#fff; box-shadow: var(--sh-brand);
}
.btn--primary:hover{ transform:translateY(-3px); box-shadow:0 24px 52px rgba(31,95,196,.32); }
.btn--ghost{
  background:var(--paper); color:var(--ink);
  border-color:var(--line); box-shadow:var(--sh-sm);
}
.btn--ghost:hover{ transform:translateY(-3px); border-color:var(--brand-200); box-shadow:var(--sh-md); color:var(--brand); }
.btn--line{ background:transparent; color:var(--brand); border-color:var(--brand-200); }
.btn--line:hover{ background:var(--brand-50); border-color:var(--brand); }
.btn--lg{ padding:18px 38px; font-size:1.08rem; }
.btn--block{ width:100%; }
.btn--white{ background:#fff; color:var(--brand); box-shadow:var(--sh-lg); }
.btn--white:hover{ transform:translateY(-3px); }
.btn--onbrand{ background:rgba(255,255,255,.13); color:#fff; border-color:rgba(255,255,255,.35); }
.btn--onbrand:hover{ background:rgba(8,26,58,.24); border-color:rgba(255,255,255,.6); transform:translateY(-3px); }

.link-arrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--f-head); font-weight:700; color:var(--brand);
  transition:gap .25s var(--ease);
}
.link-arrow svg{ width:16px; height:16px; transition:transform .25s var(--ease); }
.link-arrow:hover{ gap:13px; }

/* ---------- 6. רקעים / אורות ---------- */
.aurora{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.aurora span{
  position:absolute; border-radius:50%;
  filter: blur(90px); opacity:.55;
}
.aurora .a1{ width:620px; height:620px; top:-220px; inset-inline-end:-160px;
  background: radial-gradient(circle, rgba(79,134,221,.55), transparent 68%); }
.aurora .a2{ width:520px; height:520px; top:180px; inset-inline-start:-200px;
  background: radial-gradient(circle, rgba(242,199,155,.55), transparent 68%); }
.aurora .a3{ width:700px; height:700px; bottom:-320px; inset-inline-start:34%;
  background: radial-gradient(circle, rgba(183,207,245,.6), transparent 70%); }

.grid-lines{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(31,95,196,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(31,95,196,.045) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image: radial-gradient(ellipse 78% 62% at 50% 34%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 78% 62% at 50% 34%, #000 20%, transparent 78%);
}

/* =====================================================================
   HEADER
   ===================================================================== */
.header{
  position:sticky; top:0; z-index:100;
  background: rgba(246,248,252,.72);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border-bottom:1px solid transparent;
  transition: background .3s, border-color .3s, box-shadow .3s;
}
.header.is-stuck{
  background: rgba(255,255,255,.86);
  border-bottom-color: var(--line);
  box-shadow: 0 4px 24px rgba(15,26,46,.05);
}
.header-inner{
  height:var(--header-h);
  display:flex; align-items:center; gap:24px;
}
.brand{ display:flex; align-items:center; gap:11px; flex:none; }

/* ---------------------------------------------------------------
   סימן המותג — TouchUp
   בהדר: "Touch" בכחול המותג, "Up" בכהה, ישירות על רקע ההדר.
   .logo-mark לבד = אותו כיתוב ישירות על רקע כהה (פוטר).
   --------------------------------------------------------------- */
.logo-mark{
  font-family:var(--f-head); font-weight:900; letter-spacing:-.035em;
  line-height:1; white-space:nowrap; display:inline-block; font-size:1.75rem;
}
.logo-mark b,
.logo-mark i{ font-weight:900; font-style:normal; }
.logo-mark b{ color:#7FA9E8; }
.logo-mark i{ color:#F3F6FB; }

/* גרסה לרקע בהיר — לשימוש בתוך כותרות וטקסט */
.logo-mark--ink b{ color:var(--brand); }
.logo-mark--ink i{ color:var(--ink); }
.logo-mark--inherit{ font-size:inherit; letter-spacing:inherit; }

/* הלוגו בהדר — כיתוב נקי, בלי לוחית רקע */
.logo-plate{
  display:inline-grid; place-items:center;
  padding:2px 0;
  transition: transform .3s var(--ease);
}
.header .logo-mark b{ color:var(--brand); }
.header .logo-mark i{ color:var(--ink); }
.brand:hover .logo-plate{ transform:translateY(-2px); }

.nav{ display:flex; align-items:center; gap:2px; margin-inline-start:auto; }
.nav a{
  padding:9px 15px; border-radius:var(--r-pill);
  font-weight:600; font-size:.97rem; color:var(--ink-2);
  transition: background .22s, color .22s;
}
.nav a:hover{ background:var(--bg-2); color:var(--ink); }
.nav a.is-active{ color:var(--brand); background:var(--brand-50); }

/* תפריט נפתח בהדר */
.nav-drop{ position:relative; }
.nav-drop > button{
  display:flex; align-items:center; gap:6px;
  padding:9px 15px; border-radius:var(--r-pill);
  font-family:inherit; font-weight:600; font-size:.97rem; color:var(--ink-2);
  background:transparent; border:0; cursor:pointer;
  transition: background .22s, color .22s;
}
.nav-drop > button:hover{ background:var(--bg-2); color:var(--ink); }
.nav-drop--current > button{ color:var(--brand); }
.nav-drop > button svg{ width:13px; height:13px; transition:transform .25s var(--ease); }
.nav-drop[data-open="true"] > button{ background:var(--brand-50); color:var(--brand); }
.nav-drop[data-open="true"] > button svg{ transform:rotate(180deg); }
.nav-menu{
  position:absolute; top:calc(100% + 12px); inset-inline-end:0; z-index:40;
  min-width:224px; padding:8px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--sh-lg);
  display:grid; gap:2px;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition: opacity .2s, transform .25s var(--ease), visibility .2s;
}
.nav-drop[data-open="true"] .nav-menu{ opacity:1; visibility:visible; transform:none; }
.nav-menu a{
  padding:11px 13px; border-radius:10px;
  font-size:.95rem; font-weight:600; color:var(--ink-2);
  display:flex; align-items:center; gap:10px;
}
.nav-menu a:hover{ background:var(--bg-2); color:var(--ink); }
.nav-menu a.is-active{ background:var(--brand-50); color:var(--brand); }
.nav-menu svg{ width:16px; height:16px; flex:none; opacity:.65; }

.header-cta{ display:flex; align-items:center; gap:10px; flex:none; }
.header-cta .btn{ padding:12px 24px; font-size:.95rem; }

.burger{
  display:none; width:44px; height:44px; border-radius:var(--r-sm);
  border:1px solid var(--line); background:var(--paper);
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
  flex:none; margin-inline-start:auto;
}
.burger span{
  width:19px; height:2px; background:var(--ink); border-radius:2px;
  transition:transform .3s var(--ease), opacity .2s;
}
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-nav{
  position:fixed; inset:var(--header-h) 0 auto 0; z-index:99;
  background:var(--paper); border-bottom:1px solid var(--line);
  box-shadow:var(--sh-lg);
  padding:10px 16px calc(20px + env(safe-area-inset-bottom));
  display:none; flex-direction:column; gap:2px;
  max-height:calc(100dvh - var(--header-h)); overflow-y:auto;
  overscroll-behavior:contain;
}
.mobile-nav.is-open{ display:flex; animation: slideDown .3s var(--ease-out); }
@keyframes slideDown{ from{ opacity:0; transform:translateY(-12px);} to{opacity:1;transform:none;} }
.mobile-nav a{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  min-height:52px; padding:12px 14px; border-radius:var(--r-sm);
  font-family:var(--f-head); font-weight:700; font-size:1.04rem; color:var(--ink);
  border-bottom:1px solid var(--line-2);
}
.mobile-nav a::after{
  content:""; width:7px; height:7px; flex:none;
  border-inline-start:2px solid var(--ink-3); border-block-end:2px solid var(--ink-3);
  transform:rotate(45deg); opacity:.5;
}
.mobile-nav a.is-active{ color:var(--brand); }
.mobile-nav a.mnav-legal{
  border-bottom:0; margin-top:8px; background:var(--bg-2);
  font-size:.98rem; font-weight:700; color:var(--ink-2);
}
.mobile-nav .btn{ margin-top:14px; min-height:54px; }
.mobile-nav .btn::after{ content:none; }

/* =====================================================================
   HERO
   ===================================================================== */
.hero{ position:relative; padding: clamp(48px,6vw,84px) 0 clamp(64px,7vw,104px); overflow:hidden; }
.hero .wrap{ position:relative; z-index:2; }
.hero-grid{
  display:grid; grid-template-columns: 1.02fr .98fr;
  gap: clamp(36px, 4.5vw, 64px); align-items:center;
}
.hero-copy h1{ margin-bottom:24px; }
.hero-copy .lead{ margin-bottom:34px; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:38px; }

.hero-trust{
  display:flex; flex-wrap:wrap; gap:10px 28px; align-items:center;
  padding-top:28px; border-top:1px solid var(--line);
}
.hero-trust li{
  display:flex; align-items:center; gap:9px;
  font-size:.93rem; font-weight:600; color:var(--ink-2);
}
.hero-trust svg{ width:19px; height:19px; color:var(--brand); flex:none; }

/* במת המוצר */
.hero-stage{ position:relative; }
.hero-stage::before{
  content:""; position:absolute; inset:-8% -6% -14%;
  background: radial-gradient(ellipse at 50% 45%, rgba(255,255,255,.95) 0%, rgba(237,243,254,.7) 42%, transparent 72%);
  border-radius:50%; z-index:0;
}
.hero-photo{
  position:relative; z-index:1;
  border-radius: var(--r-xl);
  overflow:hidden;
  box-shadow: var(--sh-xl);
  border:1px solid rgba(255,255,255,.9);
  background:#fff;
  animation: floaty 7s ease-in-out infinite;
}
.hero-photo img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
@keyframes floaty{
  0%,100%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(-14px) rotate(-.35deg); }
}

/* תגיות צפות סביב המוצר */
.hero-chip{
  position:absolute; z-index:3;
  display:flex; align-items:center; gap:9px;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);
  border:1px solid var(--line);
  box-shadow: var(--sh-lg);
  border-radius:var(--r-pill);
  padding:10px 17px;
  font-family:var(--f-head); font-weight:700; font-size:.9rem; color:var(--ink);
  white-space:nowrap;
}
.hero-chip svg{ width:18px; height:18px; flex:none; }
.hero-chip--a{ top:7%; inset-inline-start:-6%; animation: floaty 6s ease-in-out infinite .4s; }
.hero-chip--b{ bottom:16%; inset-inline-end:-5%; animation: floaty 6.6s ease-in-out infinite 1.1s; }
.hero-chip--c{ bottom:-3%; inset-inline-start:8%; animation: floaty 7.4s ease-in-out infinite .8s; }
.hero-chip i{ display:flex; color:var(--brand); }
.hero-chip .star{ color:#F5A623; }

/* פס לוגואים/סטטיסטיקה מתחת להירו */
.marquee{
  border-block:1px solid var(--line);
  background:var(--paper);
  padding:20px 0; overflow:hidden; position:relative;
}
.marquee::before,.marquee::after{
  content:""; position:absolute; top:0; bottom:0; width:110px; z-index:2; pointer-events:none;
}
.marquee::before{ inset-inline-start:0; background:linear-gradient(to left, transparent, var(--paper)); }
.marquee::after{ inset-inline-end:0; background:linear-gradient(to right, transparent, var(--paper)); }
.marquee-track{ display:flex; gap:56px; width:max-content; animation: slide 34s linear infinite; }
.marquee-track li{
  display:flex; align-items:center; gap:11px;
  font-family:var(--f-head); font-weight:700; font-size:1.02rem; color:var(--ink-3);
  white-space:nowrap;
}
.marquee-track svg{ width:22px; height:22px; color:var(--brand-400); flex:none; }
@keyframes slide{ from{ transform:translateX(0);} to{ transform:translateX(50%);} }
.marquee:hover .marquee-track{ animation-play-state:paused; }

/* =====================================================================
   כרטיסים כלליים
   ===================================================================== */
.card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding: clamp(26px, 2.8vw, 36px);
  box-shadow: var(--sh-sm);
  transition: transform .38s var(--ease-out), box-shadow .38s var(--ease-out), border-color .3s;
  position:relative; overflow:hidden;
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--sh-lg); border-color:#D6E2F6; }
.card-ico{
  width:56px; height:56px; border-radius:var(--r-md);
  display:grid; place-items:center; margin-bottom:22px;
  background: linear-gradient(140deg, var(--brand-50), #DCE9FC);
  border:1px solid #DBE7FA;
  color:var(--brand); flex:none;
}
.card-ico svg{ width:26px; height:26px; }
.card h3{ font-size:1.28rem; margin-bottom:12px; }
.card p{ font-size:.99rem; }

/* ---------- כרטיס מוצר עם תמונה (משפחת המוצרים) ---------- */
.pcard{ padding:0; display:flex; flex-direction:column; }
.pcard > img{
  width:100%; aspect-ratio:4/3; object-fit:cover; display:block;
  border-bottom:1px solid var(--line);
}
.pcard-body{
  padding: clamp(24px,2.4vw,32px);
  display:flex; flex-direction:column; flex:1;
}
.pcard-body .eyebrow{ margin-bottom:10px; }
.pcard-body .link-arrow{ margin-top:auto; padding-top:20px; }

.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }

/* ---------- רצועת שני המוצרים (מתחת להירו) ---------- */
.duo-band{ padding: clamp(28px,3.4vw,44px) 0 0; }
.duo-title{
  text-align:center; font-family:var(--f-head); font-weight:700;
  font-size:.94rem; letter-spacing:.02em; color:var(--ink-3); margin-bottom:16px;
}
.duo{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:12px; box-shadow:var(--sh-sm);
}
.duo-item{
  display:flex; align-items:center; gap:16px;
  padding:12px 14px; border-radius:var(--r-md);
  transition: background .22s, transform .28s var(--ease-out);
}
.duo-item:hover{ background:var(--bg-2); transform:translateY(-2px); }
.duo-item img{
  width:104px; height:78px; object-fit:cover; flex:none;
  border-radius:10px; border:1px solid var(--line);
}
.duo-item b{ font-family:var(--f-head); font-size:1.05rem; color:var(--ink); display:block; margin-bottom:3px; }
.duo-item span{ font-size:.9rem; color:var(--ink-3); display:block; }
.duo-item i{
  margin-inline-start:auto; flex:none; color:var(--brand);
  display:grid; place-items:center; width:26px; height:26px;
}
.duo-item i svg{ width:16px; height:16px; }
@media (max-width:640px){
  .duo{ grid-template-columns:1fr; }
  .duo-item img{ width:84px; height:63px; }
}

/* ---------- שלושת העמודים (תוצאות/עיצוב/חוויה) ---------- */
.pillar{ text-align:center; }
.pillar .card-ico{ margin-inline:auto; width:64px; height:64px; }
.pillar .card-ico svg{ width:30px; height:30px; }

/* =====================================================================
   איך זה עובד — צעדים
   ===================================================================== */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; position:relative; }
.step{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  padding: clamp(26px,2.6vw,34px); position:relative;
  box-shadow:var(--sh-sm);
  transition: transform .38s var(--ease-out), box-shadow .38s var(--ease-out);
}
.step:hover{ transform:translateY(-6px); box-shadow:var(--sh-lg); }
.step-num{
  font-family:var(--f-head); font-weight:900;
  font-size:3.2rem; line-height:1;
  background:linear-gradient(160deg,var(--brand-200),var(--brand));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom:14px; display:block;
}
.step h3{ font-size:1.25rem; margin-bottom:10px; }
.step p{ font-size:.98rem; }

/* =====================================================================
   בלוקים מתחלפים (תמונה + טקסט)
   ===================================================================== */
.split{
  display:grid; grid-template-columns:1fr 1fr;
  gap: clamp(34px, 4.5vw, 72px); align-items:center;
}
.split + .split{ margin-top: clamp(56px, 6vw, 96px); }
.split--flip .split-media{ order:2; }
.split-media{ position:relative; }
.split-media img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
  border:1px solid var(--line-2);
}
.split-media::after{
  content:""; position:absolute; inset:auto -18px -18px auto;
  width:60%; height:60%;
  background:radial-gradient(circle at 70% 70%, rgba(31,95,196,.13), transparent 70%);
  border-radius:50%; z-index:-1;
}
.split-copy h2{ margin-bottom:18px; }
.split-copy p + p{ margin-top:16px; }

.checklist{ margin-top:26px; display:grid; gap:13px; }
.checklist li{
  display:flex; align-items:flex-start; gap:12px;
  font-size:1rem; color:var(--ink-2);
}
.checklist svg{
  width:22px; height:22px; flex:none; margin-top:3px; color:var(--brand);
}
.checklist b{ color:var(--ink); font-weight:700; }

/* השוואה ישן/חדש */
.versus{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:28px; }
.versus-col{ border-radius:var(--r-md); padding:24px; border:1px solid var(--line); }
.versus-col--old{ background:var(--bg-2); }
.versus-col--new{ background:linear-gradient(160deg,var(--brand-50),#fff); border-color:#D3E1F9; }
.versus-col h4{
  font-size:1.02rem; margin-bottom:14px; display:flex; align-items:center; gap:8px;
}
.versus-col--old h4{ color:var(--ink-3); }
.versus-col--new h4{ color:var(--brand); }
.versus-col li{
  font-size:.94rem; padding:7px 0; padding-inline-start:22px; position:relative;
  line-height:1.55;
}
.versus-col li::before{
  content:""; position:absolute; inset-inline-start:0; top:15px;
  width:8px; height:8px; border-radius:50%;
}
.versus-col--old li::before{ background:var(--ink-4); }
.versus-col--new li::before{ background:var(--brand); }

/* =====================================================================
   קטלוג מוצר / בורר צבעים
   ===================================================================== */
.builder{
  display:grid; grid-template-columns: 1.02fr .98fr;
  gap: clamp(26px,3.6vw,52px); align-items:start;
}

/* ---- הבמה: תמונת המוצר + שורת הכפתורים החיה ---- */
.builder-stage{ position:sticky; top:calc(var(--header-h) + 22px); }
.stage-frame{
  background: linear-gradient(160deg, #fff, var(--bg-2));
  border:1px solid var(--line); border-radius:var(--r-xl);
  padding: clamp(13px,1.7vw,20px);
  box-shadow: var(--sh-lg);
  position:relative;
}
.stage-frame img{
  display:block; width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius: var(--r-lg);
  transition: opacity .35s var(--ease);
}
.stage-frame.is-swapping img{ opacity:0; }
.stage-tag{
  position:absolute; top:22px; inset-inline-start:22px; z-index:2;
  background:rgba(255,255,255,.94); backdrop-filter:blur(8px);
  border:1px solid var(--line); border-radius:var(--r-pill);
  padding:8px 15px; font-family:var(--f-head); font-weight:700; font-size:.85rem;
  color:var(--ink); box-shadow:var(--sh-sm);
  display:flex; align-items:center; gap:8px;
}
.stage-tag em{
  width:14px; height:14px; border-radius:50%; font-style:normal; flex:none;
  box-shadow:inset 0 0 0 1px rgba(15,26,46,.18);
}

/* שורת הכפתורים שהלקוח מרכיב — משנה צבע יחד עם הדגם */
.stage-preview{
  margin-top:14px; padding:16px 14px 15px;
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--paper);
}
.stage-preview > b{
  display:block; text-align:center; font-family:var(--f-head);
  font-size:.82rem; color:var(--ink-3); font-weight:700; margin-bottom:13px;
}
.chip-row{
  display:flex; flex-wrap:wrap; gap:9px; justify-content:center;
  min-height:74px; align-items:center;
}
.chip-row:empty::after{
  content:"בחר פעולות מהרשימה ←"; font-size:.88rem; color:var(--ink-3);
}
.btn-chip{
  width:70px; flex:none; padding:9px 5px 7px; border-radius:13px;
  display:grid; justify-items:center; gap:5px;
  background:var(--chip-body,#1A1A1A);
  box-shadow: inset 0 0 0 2.5px var(--chip-fg,#fff), 0 4px 10px rgba(15,26,46,.14);
  animation: chipIn .32s var(--ease-out) both;
}
.btn-chip svg{ width:21px; height:21px; color:var(--chip-fg,#fff); }
.btn-chip span{
  font-size:.62rem; font-weight:800; line-height:1.15; text-align:center;
  color:var(--chip-fg,#fff); font-family:var(--f-head);
}
@keyframes chipIn{ from{ opacity:0; transform:scale(.82); } to{ opacity:1; transform:none; } }

/* ---- הבקרים ---- */
.builder-block + .builder-block{ margin-top:30px; }
.builder-label{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin-bottom:13px;
}
.builder-label h3{ font-family:var(--f-head); font-size:1.06rem; color:var(--ink); }
.builder-label span{ font-size:.85rem; color:var(--ink-3); font-weight:600; }

.swatches{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(82px,1fr)); gap:8px;
}
.swatch{
  display:grid; justify-items:center; gap:8px;
  padding:11px 5px 10px; border-radius:var(--r-md);
  border:2px solid transparent; background:transparent; cursor:pointer;
  transition: background .22s, border-color .22s, transform .22s var(--ease);
}
.swatch i{
  display:block; width:44px; height:44px; border-radius:50%;
  box-shadow: inset 0 0 0 1px rgba(15,26,46,.14), var(--sh-xs);
}
.swatch span{ font-size:.76rem; font-weight:700; color:var(--ink-3); text-align:center; }
.swatch:hover{ background:var(--bg-2); transform:translateY(-2px); }
.swatch.is-active{ border-color:var(--brand); background:var(--brand-50); }
.swatch.is-active span{ color:var(--brand); }

.picker{ display:grid; grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:8px; }
.pick{
  display:grid; justify-items:center; gap:7px; padding:13px 7px;
  border:1px solid var(--line); border-radius:14px; background:var(--paper);
  font-family:var(--f-head); font-size:.77rem; font-weight:700; color:var(--ink-2);
  text-align:center; line-height:1.25; cursor:pointer;
  transition: border-color .2s, background .2s, color .2s, transform .2s var(--ease), box-shadow .2s;
}
.pick svg{ width:21px; height:21px; }
.pick:hover{ transform:translateY(-2px); border-color:var(--brand-200); }
.pick[aria-pressed="true"]{
  background:var(--brand); border-color:var(--brand); color:#fff;
  box-shadow:var(--sh-brand);
}
.pick[disabled]{ opacity:.38; cursor:not-allowed; transform:none; }
.pick--more{
  border-style:dashed; border-color:var(--brand-200); color:var(--ink-3);
  cursor:default; background:transparent;
}
.pick--more:hover{ transform:none; }

.meter{ display:flex; align-items:center; gap:10px; margin-top:16px; font-size:.88rem; color:var(--ink-3); font-weight:600; }
.meter-dots{ display:flex; gap:5px; }
.meter-dots i{ width:9px; height:9px; border-radius:50%; background:var(--line); transition:background .25s, transform .25s var(--ease); }
.meter-dots i.on{ background:var(--brand); transform:scale(1.15); }

/* ---------------------------------------------------------------
   סליידר מספר הכפתורים
   --------------------------------------------------------------- */
.counter{ max-width:940px; margin-inline:auto; }
.counter-frame{
  background: linear-gradient(160deg,#fff,var(--bg-2));
  border:1px solid var(--line); border-radius:var(--r-xl);
  padding: clamp(13px,1.7vw,20px); box-shadow:var(--sh-lg); position:relative;
}
.counter-frame img{
  display:block; width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--r-lg); transition:opacity .3s var(--ease);
}
.counter-frame.is-swapping img{ opacity:0; }
.counter-badge{
  position:absolute; top:22px; inset-inline-start:22px; z-index:2;
  background:var(--ink); color:#fff; border-radius:var(--r-pill);
  padding:9px 17px; font-family:var(--f-head); font-weight:800; font-size:.88rem;
  box-shadow:var(--sh-md);
}
.counter-cap{
  text-align:center; margin-top:22px; min-height:52px;
}
.counter-cap b{ display:block; font-family:var(--f-head); font-size:1.16rem; color:var(--ink); margin-bottom:5px; }
.counter-cap span{ font-size:.95rem; color:var(--ink-3); }

.counter-track{ display:flex; align-items:center; gap:14px; margin-top:6px; }
.counter-arrow{
  width:46px; height:46px; flex:none; border-radius:50%;
  border:1px solid var(--line); background:var(--paper); color:var(--ink);
  display:grid; place-items:center; cursor:pointer;
  transition: background .2s, border-color .2s, transform .2s var(--ease);
}
.counter-arrow:hover:not([disabled]){ background:var(--brand); border-color:var(--brand); color:#fff; }
.counter-arrow[disabled]{ opacity:.35; cursor:not-allowed; }
.counter-arrow svg{ width:18px; height:18px; }

.counter-range{
  flex:1; -webkit-appearance:none; appearance:none; background:transparent;
  height:44px; cursor:pointer; margin:0;
}
.counter-range::-webkit-slider-runnable-track{
  height:6px; border-radius:99px;
  background:linear-gradient(to left, var(--brand) var(--fill,0%), var(--line) var(--fill,0%));
}
.counter-range::-moz-range-track{ height:6px; border-radius:99px; background:var(--line); }
.counter-range::-moz-range-progress{ height:6px; border-radius:99px; background:var(--brand); }
.counter-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:26px; height:26px; border-radius:50%; margin-top:-10px;
  background:#fff; border:3px solid var(--brand); box-shadow:var(--sh-md);
}
.counter-range::-moz-range-thumb{
  width:26px; height:26px; border-radius:50%;
  background:#fff; border:3px solid var(--brand); box-shadow:var(--sh-md);
}
.counter-range:focus-visible{ outline:3px solid var(--brand); outline-offset:6px; border-radius:8px; }

.counter-pills{ display:flex; gap:8px; justify-content:center; margin-top:8px; }
.counter-pill{
  min-width:46px; height:46px; border-radius:13px;
  border:1px solid var(--line); background:var(--paper);
  font-family:var(--f-head); font-weight:800; font-size:1rem; color:var(--ink-2);
  cursor:pointer; transition: background .2s, border-color .2s, color .2s, transform .2s var(--ease);
}
.counter-pill:hover{ transform:translateY(-2px); border-color:var(--brand-200); }
.counter-pill.is-active{ background:var(--brand); border-color:var(--brand); color:#fff; box-shadow:var(--sh-brand); }

/* =====================================================================
   פעולות NFC (גריד אייקונים)
   ===================================================================== */
.actions-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:16px;
}
.action{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md);
  padding:22px 18px; text-align:center;
  transition: transform .32s var(--ease-out), box-shadow .32s var(--ease-out), border-color .3s;
}
.action:hover{ transform:translateY(-5px); box-shadow:var(--sh-md); border-color:var(--brand-200); }
.action i{
  width:48px; height:48px; margin:0 auto 14px; border-radius:14px;
  display:grid; place-items:center;
  background:var(--bg-2); color:var(--ink);
  transition: background .3s, color .3s;
}
.action:hover i{ background:var(--brand); color:#fff; }
.action i svg{ width:24px; height:24px; }
.action b{ display:block; font-family:var(--f-head); font-size:1rem; color:var(--ink); margin-bottom:3px; }
.action span{ font-size:.85rem; color:var(--ink-3); }

/* =====================================================================
   גלריה
   ===================================================================== */
.lineup-shot{
  border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden;
  box-shadow:var(--sh-lg); margin-bottom:clamp(28px,3.4vw,46px);
  background:linear-gradient(160deg,#fff,var(--bg-2));
}
.lineup-shot img{ display:block; width:100%; height:auto; }

.gallery{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:22px;
}
.gallery-item{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line); background:var(--paper);
  box-shadow:var(--sh-sm); cursor:zoom-in;
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
  display:block; width:100%; padding:0; text-align:start;
}
.gallery-item:hover{ transform:translateY(-6px); box-shadow:var(--sh-lg); }
.gallery-item img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  transition: transform .6s var(--ease-out);
}
.gallery-item:hover img{ transform:scale(1.045); }
.gallery-cap{
  padding:16px 20px 18px; display:flex; justify-content:space-between; align-items:center; gap:12px;
}
.gallery-cap b{ font-family:var(--f-head); font-size:1.02rem; color:var(--ink); display:block; }
.gallery-cap span{ font-size:.85rem; color:var(--ink-3); }
.gallery-cap i{
  width:32px; height:32px; border-radius:50%; background:var(--brand-50); color:var(--brand);
  display:grid; place-items:center; flex:none;
}
.gallery-cap i svg{ width:15px; height:15px; }

/* לייטבוקס */
.lightbox{
  position:fixed; inset:0; z-index:200;
  background:rgba(11,20,38,.82); backdrop-filter:blur(10px);
  display:none; align-items:center; justify-content:center; padding:24px;
}
.lightbox.is-open{ display:flex; animation: fadeIn .25s var(--ease); }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
.lightbox img{
  max-width:min(1100px,94vw); max-height:84vh; width:auto;
  border-radius:var(--r-lg); box-shadow:0 40px 100px rgba(0,0,0,.5);
  background:#fff;
}
.lightbox-close,.lightbox-nav{
  position:absolute; width:52px; height:52px; border-radius:50%;
  background:rgba(255,255,255,.94); color:var(--ink);
  display:grid; place-items:center; box-shadow:var(--sh-lg);
  transition: transform .25s var(--ease), background .25s;
}
.lightbox-close:hover,.lightbox-nav:hover{ transform:scale(1.08); background:#fff; }
.lightbox-close{ top:24px; inset-inline-end:24px; }
.lightbox-close svg,.lightbox-nav svg{ width:22px; height:22px; }
.lightbox-nav--prev{ inset-inline-end:24px; top:50%; transform:translateY(-50%); }
.lightbox-nav--next{ inset-inline-start:24px; top:50%; transform:translateY(-50%); }
.lightbox-nav--prev:hover,.lightbox-nav--next:hover{ transform:translateY(-50%) scale(1.08); }
.lightbox-cap{
  position:absolute; bottom:26px; inset-inline:0; text-align:center;
  color:#fff; font-family:var(--f-head); font-weight:700; font-size:1.02rem;
  text-shadow:0 2px 10px rgba(0,0,0,.5);
}

/* =====================================================================
   מספרים / רצועת מותג
   ===================================================================== */
.brandband{
  position:relative; overflow:hidden;
  background: linear-gradient(125deg, var(--brand-700) 0%, var(--brand) 48%, #2360C0 100%);
  color:#fff; border-radius:var(--r-xl);
  padding: clamp(40px,5vw,66px) clamp(28px,4vw,60px);
  box-shadow: var(--sh-xl);
}
.brandband::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 88% 12%, rgba(255,255,255,.22), transparent 46%),
    radial-gradient(circle at 8% 92%, rgba(242,199,155,.28), transparent 48%);
}
.brandband > *{ position:relative; z-index:1; }
.brandband h2{ color:#fff; }
.brandband p{ color:rgba(255,255,255,.88); }

.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.stat b{
  display:block; font-family:var(--f-head); font-weight:900;
  font-size: clamp(2.2rem,3.6vw,3rem); line-height:1.05; color:#fff;
  letter-spacing:-.03em;
}
.stat span{ font-size:.95rem; color:rgba(255,255,255,.88); display:block; margin-top:6px; }
.stat + .stat{ position:relative; }

/* =====================================================================
   תחומים / למי זה מתאים
   ===================================================================== */
.tags{ display:flex; flex-wrap:wrap; gap:11px; }
.tag{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-pill); padding:11px 20px;
  font-family:var(--f-head); font-weight:600; font-size:.98rem; color:var(--ink-2);
  box-shadow:var(--sh-xs);
  transition: transform .25s var(--ease), border-color .25s, color .25s, box-shadow .25s;
}
.tag:hover{ transform:translateY(-3px); border-color:var(--brand-200); color:var(--brand); box-shadow:var(--sh-sm); }
.tag svg{ width:18px; height:18px; color:var(--brand-400); }

/* =====================================================================
   שאלות נפוצות
   ===================================================================== */
.faq{ display:grid; gap:12px; }
.faq-item{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md);
  overflow:hidden; transition: border-color .3s, box-shadow .3s;
}
.faq-item.is-open{ border-color:var(--brand-200); box-shadow:var(--sh-md); }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:20px 24px; text-align:start;
  font-family:var(--f-head); font-weight:700; font-size:1.06rem; color:var(--ink);
  transition:color .25s;
}
.faq-q:hover{ color:var(--brand); }
.faq-ico{
  width:32px; height:32px; border-radius:50%; flex:none;
  background:var(--brand-50); color:var(--brand);
  display:grid; place-items:center;
  transition: transform .35s var(--ease), background .3s, color .3s;
}
.faq-ico svg{ width:16px; height:16px; }
.faq-item.is-open .faq-ico{ transform:rotate(45deg); background:var(--brand); color:#fff; }
.faq-a{
  max-height:0; overflow:hidden;
  transition: max-height .42s var(--ease), opacity .3s;
  opacity:0;
}
.faq-item.is-open .faq-a{ opacity:1; }
.faq-a > div{ padding:0 24px 24px; font-size:1rem; color:var(--ink-2); }
.faq-a p + p{ margin-top:12px; }

/* =====================================================================
   טופס לידים
   ===================================================================== */
.form-card{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-xl); padding: clamp(28px,3.4vw,48px);
  box-shadow:var(--sh-lg);
}
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field--full{ grid-column:1/-1; }
.field label{ font-family:var(--f-head); font-weight:700; font-size:.94rem; color:var(--ink); }
.field label .opt{ color:var(--ink-3); font-weight:400; font-size:.86rem; }
.field input,.field textarea,.field select{
  width:100%; padding:14px 17px;
  background:var(--bg); border:1.5px solid var(--line); border-radius:var(--r-sm);
  font-size:1rem; color:var(--ink);
  transition: border-color .25s, background .25s, box-shadow .25s;
}
.field textarea{ resize:vertical; min-height:110px; }
.field input::placeholder,.field textarea::placeholder{ color:var(--ink-4); }
.field input:focus,.field textarea:focus,.field select:focus{
  outline:0; border-color:var(--brand); background:#fff;
  box-shadow:0 0 0 4px var(--brand-50);
}
.field.has-error input,.field.has-error textarea{ border-color:#DC3545; background:#FEF4F5; }
.field-msg{ font-size:.84rem; color:#DC3545; font-weight:600; min-height:0; }
.botcheck{ position:absolute; inset-inline-start:-9999px; opacity:0; height:0; width:0; }
.form-note{ font-size:.88rem; color:var(--ink-3); margin-top:16px; text-align:center; }
.form-note a{ color:var(--brand); text-decoration:underline; }
.form-alert{
  background:#FEF4F5; border:1px solid #F5C6CB; color:#B02A37;
  padding:13px 18px; border-radius:var(--r-sm); font-size:.95rem; font-weight:600;
  margin-bottom:18px;
}
.form-alert a{ color:inherit; text-decoration:underline; }
.form-success{ text-align:center; padding:24px 0; }
.form-success .ok{
  width:76px; height:76px; margin:0 auto 22px; border-radius:50%;
  display:grid; place-items:center; color:#fff;
  background:linear-gradient(140deg,#34C77B,#149E58);
  box-shadow:0 16px 36px rgba(20,158,88,.28);
}
.form-success .ok svg{ width:36px; height:36px; }
.form-success h3{ font-size:1.6rem; margin-bottom:12px; }

/* צד המידע ליד הטופס */
.contact-side{ display:grid; gap:16px; align-content:start; }
.contact-row{
  display:flex; gap:16px; align-items:flex-start;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md);
  padding:20px 22px; box-shadow:var(--sh-xs);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
a.contact-row:hover{ transform:translateY(-4px); box-shadow:var(--sh-md); border-color:var(--brand-200); }
.contact-row i{
  width:46px; height:46px; border-radius:14px; flex:none;
  display:grid; place-items:center;
  background:linear-gradient(140deg,var(--brand-50),#DCE9FC);
  border:1px solid #DBE7FA; color:var(--brand);
}
.contact-row i svg{ width:21px; height:21px; }
.contact-row b{ display:block; font-family:var(--f-head); font-size:1.04rem; color:var(--ink); margin-bottom:3px; }
.contact-row span{ font-size:.94rem; color:var(--ink-3); }

/* =====================================================================
   CTA סופי
   ===================================================================== */
.cta-final{ text-align:center; }
.cta-final .btn{ margin:6px; }
.cta-final .h-lg{ margin-bottom:18px; }
.cta-final p{ margin-bottom:32px; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer{
  background:#0F1A2E; color:#A8B4C8;
  padding: clamp(52px,6vw,80px) 0 0; margin-top:0;
  position:relative; overflow:hidden;
}
.footer::before{
  content:""; position:absolute; top:-140px; inset-inline-start:20%;
  width:520px; height:320px; border-radius:50%;
  background:radial-gradient(circle,rgba(31,95,196,.35),transparent 68%);
  filter:blur(60px);
}
.footer > *{ position:relative; z-index:1; }
.footer-grid{
  display:grid; grid-template-columns: 1.5fr 1fr 1.3fr; gap: 40px 40px;
  padding-bottom: 48px;
}
.footer h4{
  color:#fff; font-size:1rem; margin-bottom:18px;
  letter-spacing:.02em;
}
.footer-brand .logo-mark{ font-size:1.7rem; display:block; margin-bottom:14px; }
.footer-brand p{ font-size:.95rem; max-width:34ch; line-height:1.75; }
.footer-links li + li{ margin-top:11px; }
.footer-links a{ font-size:.95rem; transition:color .22s, padding .22s; display:inline-block; }
.footer-links a:hover{ color:#fff; padding-inline-start:5px; }
.footer-contact li{ display:flex; gap:11px; align-items:flex-start; font-size:.95rem; }
.footer-contact li + li{ margin-top:13px; }
.footer-contact svg{ width:18px; height:18px; color:var(--brand-400); flex:none; margin-top:4px; }
.footer-contact a:hover{ color:#fff; }
.social{ display:flex; gap:10px; margin-top:20px; }
.social a{
  width:40px; height:40px; border-radius:12px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1);
  display:grid; place-items:center; color:#C6D2E4;
  transition: background .25s, color .25s, transform .25s var(--ease);
}
.social a:hover{ background:var(--brand); color:#fff; transform:translateY(-3px); border-color:var(--brand); }
.social svg{ width:18px; height:18px; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.09);
  padding: 24px 0 30px;
  display:flex; flex-wrap:wrap; gap:14px 26px; align-items:center; justify-content:space-between;
  font-size:.88rem;
}
.footer-bottom a:hover{ color:#fff; }
.footer-bottom nav{ display:flex; flex-wrap:wrap; gap:8px 20px; }
.footer-fineprint{
  border-top:1px solid rgba(255,255,255,.07);
  padding:16px 0 4px;
  font-size:.76rem; line-height:1.8;
  color:rgba(255,255,255,.42);
  max-width:none;
}
.footer-fineprint a{ color:rgba(255,255,255,.6); text-decoration:underline; }
.footer-fineprint a:hover{ color:#fff; }

/* כפתור וואטסאפ צף — צד שמאל פיזי */
.fab{
  position:fixed; bottom:22px; left:22px; z-index:90;
  width:58px; height:58px; border-radius:50%;
  background:#25D366; color:#fff;
  display:grid; place-items:center;
  box-shadow:0 12px 30px rgba(37,211,102,.42);
  transition: transform .3s var(--ease-out), box-shadow .3s, bottom .3s var(--ease);
}
.fab:hover{ transform:scale(1.08) translateY(-2px); box-shadow:0 18px 40px rgba(37,211,102,.5); }
.fab svg{ width:28px; height:28px; }
body.has-cookie-bar .fab{ bottom: calc(var(--cookie-bar-h, 96px) + 16px); }

/* =====================================================================
   סרגל נגישות (ת"י 5568 / WCAG 2.0 AA) — צד ימין פיזי
   ===================================================================== */
.a11y-fab{
  position:fixed; bottom:22px; right:22px; z-index:120;
  width:54px; height:54px; border-radius:50%;
  background: linear-gradient(140deg, var(--brand) 0%, var(--brand-700) 100%);
  color:#fff; border:2px solid #fff;
  display:grid; place-items:center;
  box-shadow: var(--sh-brand);
  transition: transform .3s var(--ease-out), box-shadow .3s, bottom .3s var(--ease);
}
.a11y-fab:hover,.a11y-fab:focus-visible{ transform:scale(1.08); box-shadow:0 20px 44px rgba(31,95,196,.34); }
.a11y-fab svg{ width:26px; height:26px; display:block; }
body.has-cookie-bar .a11y-fab{ bottom: calc(var(--cookie-bar-h, 96px) + 16px); }

.a11y-panel{
  position:fixed; bottom:88px; right:22px; z-index:121;
  width:min(310px, calc(100vw - 44px));
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sh-xl);
  padding:20px;
  opacity:0; visibility:hidden; transform:translateY(14px) scale(.97);
  transition: opacity .28s var(--ease-out), transform .28s var(--ease-out), visibility .28s;
  max-height:min(560px, calc(100dvh - 130px)); overflow-y:auto;
}
.a11y-panel.open{ opacity:1; visibility:visible; transform:none; }
body.has-cookie-bar .a11y-panel{ bottom: calc(var(--cookie-bar-h, 96px) + 82px); }

.a11y-panel-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-bottom:14px; margin-bottom:16px; border-bottom:1px solid var(--line);
}
.a11y-panel-head h2{ font-size:1.05rem; margin:0; }
.a11y-close{
  width:32px; height:32px; border-radius:50%; flex:none;
  border:1px solid var(--line); background:var(--bg);
  color:var(--ink-3); font-size:1.35rem; line-height:1;
  display:grid; place-items:center;
  transition:color .22s, border-color .22s, background .22s;
}
.a11y-close:hover{ color:var(--brand); border-color:var(--brand-200); background:var(--brand-50); }

.a11y-font-row{
  display:flex; align-items:center; gap:9px;
  padding:11px 13px; margin-bottom:12px;
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r-sm);
}
.a11y-font-row > span:first-child{
  flex:1; font-family:var(--f-head); font-weight:700; font-size:.92rem; color:var(--ink);
}
.a11y-step{
  width:30px; height:30px; border-radius:9px; flex:none;
  border:1px solid var(--line); background:var(--paper);
  color:var(--ink); font-size:1.05rem; font-weight:700; line-height:1;
  display:grid; place-items:center;
  transition:border-color .22s, color .22s;
}
.a11y-step:hover:not(:disabled){ border-color:var(--brand); color:var(--brand); }
.a11y-scale-val{
  min-width:44px; text-align:center;
  font-family:var(--f-head); font-weight:700; font-size:.86rem; color:var(--brand);
}

.a11y-opt{
  display:block; width:100%; text-align:start;
  padding:11px 13px 11px 40px; margin-bottom:7px;
  border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--paper); color:var(--ink-2);
  font-size:.94rem; font-weight:600; position:relative;
  transition:border-color .22s, background .22s, color .22s;
}
.a11y-opt:hover{ border-color:var(--brand-200); }
.a11y-opt::before{
  content:""; position:absolute; inset-inline-end:12px; top:50%; transform:translateY(-50%);
  width:34px; height:19px; border-radius:999px;
  background:var(--line); transition:background .25s;
}
.a11y-opt::after{
  content:""; position:absolute; inset-inline-end:29px; top:50%; transform:translateY(-50%);
  width:14px; height:14px; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.2);
  transition: inset-inline-end .25s var(--ease);
}
.a11y-opt[aria-pressed="true"]{ border-color:var(--brand-200); background:var(--brand-50); color:var(--brand); }
.a11y-opt[aria-pressed="true"]::before{ background:var(--brand); }
.a11y-opt[aria-pressed="true"]::after{ inset-inline-end:15px; }

.a11y-reset{
  display:block; width:100%; margin-top:12px; padding:11px;
  border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--bg); color:var(--ink-2);
  font-family:var(--f-head); font-weight:700; font-size:.9rem;
  transition:color .22s, border-color .22s;
}
.a11y-reset:hover{ color:var(--brand); border-color:var(--brand-200); }
.a11y-statement{
  display:block; text-align:center; margin-top:12px;
  font-size:.86rem; color:var(--ink-3); text-decoration:underline;
}
.a11y-statement:hover{ color:var(--brand); }

/* מצבי הנגישות */
html.a11y-contrast{ --ink:#000; --ink-2:#101010; --ink-3:#2A2A2A; --ink-4:#3A3A3A;
  --bg:#fff; --bg-2:#F2F2F2; --paper:#fff; --line:#000; --line-2:#555;
  --brand:#003D9E; --brand-700:#00256B; --brand-50:#E8EFFC; }
html.a11y-contrast .grad-text{ background:none; color:var(--brand); -webkit-text-fill-color:currentColor; }
html.a11y-contrast .aurora,html.a11y-contrast .grid-lines{ display:none; }
html.a11y-contrast .footer{ background:#000; color:#fff; }
html.a11y-grayscale{ filter: grayscale(1); }
html.a11y-links a{ text-decoration:underline !important; text-underline-offset:3px; }
html.a11y-links a:not(.btn):not(.fab):not(.a11y-fab){ font-weight:700; }
html.a11y-readable body,html.a11y-readable body *{
  font-family: Arial, "Segoe UI", sans-serif !important; letter-spacing:.01em !important;
}
html.a11y-no-anim,html.a11y-no-anim *,html.a11y-no-anim *::before,html.a11y-no-anim *::after{
  animation:none !important; transition:none !important; scroll-behavior:auto !important;
}
html.a11y-no-anim .reveal,html.a11y-no-anim .reveal-stagger > *{ opacity:1 !important; transform:none !important; }
html.a11y-big-cursor,html.a11y-big-cursor *{
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 32 32'%3E%3Cpath d='M6 2l20 13-8.5 1.6L22 27l-4 1.6-4.4-10.3L6 24z' fill='%23fff' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") 4 2, auto !important;
}

/* =====================================================================
   באנר עוגיות
   ===================================================================== */
.cookie-bar{
  position:fixed; inset-inline:0; bottom:0; z-index:130;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  box-shadow:0 -6px 30px rgba(15,26,46,.09);
  display:none;
}
.cookie-bar.show{ display:block; animation: slideUp .35s var(--ease-out); }
@keyframes slideUp{ from{ transform:translateY(100%);} to{ transform:none;} }
.cookie-inner{
  width:min(100% - 40px, var(--wrap)); margin-inline:auto;
  padding:16px 0; display:flex; flex-wrap:wrap; gap:14px 24px;
  align-items:center; justify-content:space-between;
}
.cookie-text{ font-size:.92rem; color:var(--ink-2); max-width:62ch; line-height:1.65; }
.cookie-text a{ color:var(--brand); text-decoration:underline; }
.cookie-actions{ display:flex; gap:10px; flex:none; }
.cookie-btn{
  padding:11px 20px; border-radius:var(--r-pill);
  font-family:var(--f-head); font-weight:700; font-size:.92rem;
  border:1.5px solid transparent; white-space:nowrap;
  transition: transform .25s var(--ease), box-shadow .25s, background .22s, color .22s, border-color .22s;
}
.cookie-btn--accept{
  background: linear-gradient(135deg,var(--brand),var(--brand-700)); color:#fff;
  box-shadow: 0 8px 20px rgba(31,95,196,.24);
}
.cookie-btn--accept:hover{ transform:translateY(-2px); }
.cookie-btn--essential{ background:var(--paper); color:var(--ink-2); border-color:var(--line); }
.cookie-btn--essential:hover{ border-color:var(--brand-200); color:var(--brand); }

@media (max-width:640px){
  .cookie-inner{ flex-direction:column; align-items:stretch; }
  .cookie-actions{ width:100%; }
  .cookie-btn{ flex:1; text-align:center; }
  .a11y-fab{ width:48px; height:48px; right:16px; bottom:16px; }
  .a11y-fab svg{ width:23px; height:23px; }
  .a11y-panel{ right:16px; bottom:76px; }
  .fab{ width:52px; height:52px; left:16px; bottom:16px; }
  .fab svg{ width:25px; height:25px; }
}

/* =====================================================================
   עמודי משנה — כותרת עמוד
   ===================================================================== */
.page-hero{
  position:relative; overflow:hidden;
  padding: clamp(52px,6vw,88px) 0 clamp(44px,5vw,68px);
  text-align:center;
  border-bottom:1px solid var(--line);
}
.page-hero .wrap{ position:relative; z-index:2; }
.page-hero .lead{ margin-inline:auto; margin-top:20px; }

/* ---------- וידאו בהירו של עמוד מוצר ---------- */
.hero-video{
  margin: clamp(32px,4vw,48px) auto 0;
  max-width:820px;
  border-radius:var(--r-xl);
  overflow:hidden; line-height:0;
  border:1px solid var(--line-2);
  box-shadow:var(--sh-lg);
  background:var(--bg-2);
}
.hero-video video{ width:100%; height:auto; display:block; }
.crumbs{
  display:flex; gap:8px; align-items:center; justify-content:center;
  font-size:.88rem; color:var(--ink-3); margin-bottom:22px;
}
.crumbs a:hover{ color:var(--brand); }
.crumbs span{ color:var(--ink-3); }

/* תוכן משפטי */
.legal-layout{ display:grid; grid-template-columns: 260px 1fr; gap:48px; align-items:start; }
.legal-nav{
  position:sticky; top: calc(var(--header-h) + 24px);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:20px; box-shadow:var(--sh-sm);
}
.legal-nav h4{ font-size:.92rem; color:var(--ink-3); margin-bottom:12px; letter-spacing:.05em; text-transform:uppercase; }
.legal-nav a{
  display:block; padding:9px 13px; border-radius:var(--r-sm);
  font-size:.95rem; font-weight:600; color:var(--ink-2);
  transition:background .22s,color .22s;
}
.legal-nav a:hover,.legal-nav a.is-active{ background:var(--brand-50); color:var(--brand); }
.legal-doc{ display:grid; gap:20px; }
.legal-block{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  padding: clamp(26px,3vw,40px); box-shadow:var(--sh-sm);
  scroll-margin-top: calc(var(--header-h) + 20px);
}
.legal-block h2{ font-size:1.6rem; margin-bottom:8px; }
.legal-block .updated{ font-size:.85rem; color:var(--ink-3); margin-bottom:22px; }
.legal-block h3{ font-size:1.12rem; margin:26px 0 10px; }
.legal-block p{ margin-bottom:12px; font-size:1rem; }
.legal-block ul{ margin:0 0 14px; display:grid; gap:8px; }
.legal-block ul li{
  padding-inline-start:20px; position:relative; font-size:1rem;
}
.legal-block ul li::before{
  content:""; position:absolute; inset-inline-start:0; top:12px;
  width:7px; height:7px; border-radius:50%; background:var(--brand-200);
}
.legal-block strong{ color:var(--ink); }

/* =====================================================================
   REVEAL ON SCROLL
   ===================================================================== */
/* התוכן מוסתר רק כאשר JavaScript פעיל בפועל (המחלקה js נוספת ב-<head>).
   כך תקלה בסקריפט או דפדפן בלי JS לא משאירים עמוד ריק. */
.js .reveal{ opacity:0; transform:translateY(26px); }
.reveal.is-in{
  opacity:1; transform:none;
  transition: opacity .75s var(--ease-out), transform .75s var(--ease-out);
}
.js .reveal-stagger > *{ opacity:0; transform:translateY(24px); }
.reveal-stagger.is-in > *{
  opacity:1; transform:none;
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.reveal-stagger.is-in > *:nth-child(1){ transition-delay:0ms; }
.reveal-stagger.is-in > *:nth-child(2){ transition-delay:80ms; }
.reveal-stagger.is-in > *:nth-child(3){ transition-delay:160ms; }
.reveal-stagger.is-in > *:nth-child(4){ transition-delay:240ms; }
.reveal-stagger.is-in > *:nth-child(5){ transition-delay:320ms; }
.reveal-stagger.is-in > *:nth-child(6){ transition-delay:400ms; }
.reveal-stagger.is-in > *:nth-child(7){ transition-delay:480ms; }
.reveal-stagger.is-in > *:nth-child(8){ transition-delay:560ms; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1080px){
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .legal-layout{ grid-template-columns:1fr; }
  .legal-nav{ position:static; }
  .legal-nav > div{ display:flex; flex-wrap:wrap; gap:6px; }
  .legal-nav a{ flex:none; }
}
@media (max-width: 960px){
  :root{ --header-h:64px; }
  .nav{ display:none; }
  .header-cta{ display:none; }
  .burger{ display:flex; }
  .logo-plate{ padding:2px 0; }
  .logo-mark{ font-size:1.5rem; }
  .hero-grid{ grid-template-columns:1fr; gap:44px; }
  .hero-stage{ max-width:560px; margin-inline:auto; width:100%; }
  .hero-chip--a{ inset-inline-start:-2%; }
  .hero-chip--b{ inset-inline-end:-2%; }
  .split, .split--flip, .builder{ grid-template-columns:1fr; }
  .split--flip .split-media{ order:0; }
  .builder-stage{ position:static; }
  .grid-3, .steps{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:repeat(2,1fr); gap:28px; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:36px 32px; }
  .footer-brand{ grid-column:1/-1; }
}
@media (max-width: 640px){
  .wrap{ width:calc(100% - 32px); }
  body{ font-size:16px; }
  .grid-2, .grid-4, .form-grid, .versus{ grid-template-columns:1fr; }
  .hero-chip{ font-size:.8rem; padding:8px 13px; }
  .hero-chip--c{ display:none; }
  .hero-actions .btn{ width:100%; }
  .stats{ grid-template-columns:1fr 1fr; }
  .gallery{ grid-template-columns:1fr; }
  .lightbox-nav{ width:44px; height:44px; }
  .lightbox-nav--prev{ inset-inline-end:10px; }
  .lightbox-nav--next{ inset-inline-start:10px; }
  .actions-grid{ grid-template-columns:repeat(2,1fr); }

  /* --- פוטר נוח לנייד --- */
  .footer{ padding-top:44px; }
  .footer-grid{ grid-template-columns:1fr; gap:30px; padding-bottom:34px; }
  .footer h4{ margin-bottom:13px; }
  .footer-links{ display:grid; grid-template-columns:1fr 1fr; gap:2px 16px; }
  .footer-links li + li{ margin-top:0; }
  .footer-links a{ padding:9px 0; display:block; }
  .footer-contact li{ font-size:.92rem; }
  .footer-bottom{
    flex-direction:column; align-items:flex-start; gap:16px;
    padding-bottom:calc(30px + env(safe-area-inset-bottom));
  }
  .footer-bottom nav{ gap:6px 16px; }
  .footer-bottom nav a{ padding:4px 0; }

  /* --- הבונה --- */
  .swatches{ grid-template-columns:repeat(3,1fr); }
  .picker{ grid-template-columns:repeat(3,1fr); gap:7px; }
  .pick{ padding:11px 5px; font-size:.72rem; }
  .btn-chip{ width:62px; }
  .stage-tag{ top:16px; inset-inline-start:16px; font-size:.78rem; padding:6px 12px; }

  /* --- סליידר הכפתורים --- */
  .counter-badge{ top:16px; inset-inline-start:16px; font-size:.8rem; padding:7px 14px; }
  .counter-arrow{ width:44px; height:44px; }
  .counter-pill{ min-width:44px; height:44px; font-size:.95rem; }
  .counter-track{ gap:10px; }
}

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

@media print{
  .header,.footer,.fab,.lightbox,.aurora,.grid-lines{ display:none !important; }
  body{ background:#fff; }
  .card,.legal-block{ box-shadow:none; border-color:#ccc; }
}

/* =====================================================================
   CHECKOUT — דף הרכישה (order.html)
   שומר על אותה שפה: נייר לבן, קווים רכים, כחול המותג לבחירה פעילה.
   ===================================================================== */

/* התכונה hidden חייבת לגבור על display שהוגדר במחלקה —
   דף הרכישה מסתיר ומראה אזורים שלמים דרכה. */
[hidden]{ display:none !important; }

/* ---------- פס ההתקדמות ---------- */
.co-progress{
  display:flex; align-items:center;
  max-width:720px; margin:0 auto clamp(30px,4vw,46px);
}
.co-progress li{ display:flex; align-items:center; gap:10px; }
.co-progress li:not(:last-child){ flex:1; }
.co-progress .co-dot{
  width:34px; height:34px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  background:var(--paper); border:1.5px solid var(--line);
  font-family:var(--f-head); font-weight:800; font-size:.9rem; color:var(--ink-4);
  transition:background .3s var(--ease), color .3s, border-color .3s;
}
.co-progress .co-dot svg{ width:16px; height:16px; display:none; }
.co-progress b{
  font-family:var(--f-head); font-size:.92rem; font-weight:700;
  color:var(--ink-3); white-space:nowrap; transition:color .3s;
}
.co-progress .co-line{
  flex:1; height:2px; background:var(--line); margin:0 12px; border-radius:2px;
  transition:background .35s var(--ease);
}
.co-progress li.is-now .co-dot{ border-color:var(--brand); color:var(--brand); background:var(--brand-50); }
.co-progress li.is-now b{ color:var(--ink); }
.co-progress li.is-done .co-dot{ background:var(--brand); border-color:var(--brand); color:#fff; }
.co-progress li.is-done .co-dot i{ display:none; }
.co-progress li.is-done .co-dot svg{ display:block; }
.co-progress li.is-done b{ color:var(--brand); }
.co-progress li.is-done + li .co-line,
.co-progress li.is-done .co-line{ background:var(--brand-200); }

/* ---------- הפריסה ---------- */
.co-layout{
  display:grid; grid-template-columns:minmax(0,1.62fr) minmax(0,.9fr);
  gap:26px; align-items:start;
}
.co-main{ display:grid; gap:20px; min-width:0; }

.co-card{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:clamp(22px,2.7vw,34px);
  box-shadow:var(--sh-sm); transition:border-color .3s, box-shadow .3s;
  scroll-margin-top:calc(var(--header-h) + 20px);
}
.co-card.has-error{ border-color:#F0B7BD; box-shadow:0 0 0 4px rgba(220,53,69,.06); }
.co-head{ display:flex; gap:14px; align-items:flex-start; margin-bottom:22px; }
.co-head .n{
  width:38px; height:38px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  background:var(--brand-50); border:1px solid #DCE7FA; color:var(--brand);
  font-family:var(--f-head); font-weight:800; font-size:1rem;
}
.co-head h2{ font-size:1.24rem; line-height:1.3; }
.co-head p{ font-size:.92rem; color:var(--ink-3); margin-top:5px; line-height:1.6; }

.co-block + .co-block,
.co-block--top{ margin-top:26px; padding-top:26px; border-top:1px solid var(--line-2); }
/* בלוק מוסתר לא משאיר קו מפריד מיותר מעל זה שאחריו */
.co-block[hidden] + .co-block{ margin-top:0; padding-top:0; border-top:0; }
.co-block-label{ display:flex; align-items:baseline; gap:10px; justify-content:space-between; margin-bottom:14px; }
.co-block-label h3{ font-family:var(--f-head); font-size:1.03rem; color:var(--ink); }
.co-block-label span{ font-size:.84rem; color:var(--ink-3); font-weight:600; }
.co-hint{ font-size:.88rem; color:var(--ink-3); line-height:1.65; margin-top:12px; }
.co-msg{ font-size:.84rem; color:#DC3545; font-weight:600; margin-top:10px; }

/* הבקרים שמושאלים מעמוד המוצר יושבים כאן בתוך טופס — יישור לתחילת השורה */
#cfgStation .counter-pills{ justify-content:flex-start; }
#cfgStation .swatches{ max-width:520px; }

/* ---------- בחירת סוג המוצר ---------- */
.type-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.type-card{
  position:relative; display:flex; flex-direction:column; text-align:start;
  background:var(--paper); border:1.5px solid var(--line);
  border-radius:var(--r-md); overflow:hidden; padding:0;
  transition:border-color .25s, box-shadow .25s, transform .25s var(--ease-out);
}
.type-card:hover{ transform:translateY(-3px); box-shadow:var(--sh-md); border-color:var(--brand-200); }
.type-card > img{
  width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--bg-2);
}
.type-card .tc-body{ padding:15px 16px 18px; display:grid; gap:5px; }
.type-card b{ font-family:var(--f-head); font-size:1.04rem; color:var(--ink); }
.type-card .tc-desc{ font-size:.86rem; color:var(--ink-3); line-height:1.55; }
.type-card .tc-price{
  margin-top:7px; font-family:var(--f-head); font-weight:800;
  font-size:.95rem; color:var(--brand);
}
.type-card .tc-tick{
  position:absolute; top:12px; inset-inline-end:12px;
  width:27px; height:27px; border-radius:50%;
  background:rgba(255,255,255,.92); border:1.5px solid var(--line);
  display:grid; place-items:center; color:transparent;
  transition:background .25s, border-color .25s, color .25s;
  backdrop-filter:blur(6px);
}
.type-card .tc-tick svg{ width:15px; height:15px; }
.type-card[aria-pressed="true"]{ border-color:var(--brand); box-shadow:var(--sh-md); }
.type-card[aria-pressed="true"] .tc-tick{ background:var(--brand); border-color:var(--brand); color:#fff; }

/* ---------- יעד לכל כפתור ---------- */
.dest{ display:grid; gap:10px; margin-top:18px; }
.dest-row{
  display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:center;
  background:var(--bg); border:1px solid var(--line-2);
  border-radius:var(--r-sm); padding:11px 13px;
}
.dest-row > i{
  width:38px; height:38px; border-radius:11px; flex:none;
  display:grid; place-items:center; color:var(--brand);
  background:var(--paper); border:1px solid var(--line);
}
.dest-row > i svg{ width:19px; height:19px; }
.dest-row .dest-label{
  display:block; font-family:var(--f-head); font-weight:700;
  font-size:.86rem; color:var(--ink); margin-bottom:5px;
}
.dest-row input{
  width:100%; padding:9px 12px; font-size:.9rem;
  background:var(--paper); border:1.5px solid var(--line); border-radius:10px;
  transition:border-color .2s, box-shadow .2s;
}
.dest-row input:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-50); }
.dest-row input::placeholder{ color:var(--ink-4); font-size:.86rem; }

/* ---------- הסטנד: תמונת המוצר לצד ההסבר ---------- */
.stand-pick{
  display:grid; grid-template-columns:minmax(0,190px) minmax(0,1fr);
  gap:22px; align-items:center;
}
.stand-pick .co-hint{ margin-top:0; }
.stand-shot{
  margin:0; border-radius:var(--r-md); overflow:hidden;
  border:1px solid var(--line-2); background:var(--bg-2); box-shadow:var(--sh-sm);
}
/* המקור מציג גם סטנד וגם בלוק — הקיטום מביא את הסטנד למרכז */
.stand-shot img{ width:100%; aspect-ratio:1/1; object-fit:cover; object-position:33% 50%; }
@media (max-width:640px){
  .stand-pick{ grid-template-columns:1fr; gap:18px; }
  .stand-shot{ max-width:240px; }
}

/* ---------- העלאת קובץ ---------- */
.drop{
  position:relative; display:block; width:100%; text-align:center;
  padding:30px 20px; cursor:pointer;
  border:2px dashed #C7D8F2; border-radius:var(--r-md);
  background:linear-gradient(180deg, var(--brand-50) 0%, var(--paper) 100%);
  transition:border-color .25s, background .25s, transform .25s var(--ease-out);
}
.drop:hover{ border-color:var(--brand-400); transform:translateY(-2px); }
.drop:focus-within{ border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-50); }
.drop.is-over{ border-color:var(--brand); background:var(--brand-50); }
.drop.has-error{ border-color:#DC3545; background:#FEF4F5; }
.drop input[type="file"]{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; cursor:pointer;
}
.drop-ico{
  width:52px; height:52px; border-radius:16px; margin:0 auto 14px;
  display:grid; place-items:center;
  background:var(--paper); border:1px solid #DCE7FA; color:var(--brand);
  box-shadow:var(--sh-sm);
}
.drop-ico svg{ width:24px; height:24px; }
.drop b{ display:block; font-family:var(--f-head); font-size:1rem; color:var(--ink); margin-bottom:5px; }
.drop span{ display:block; font-size:.86rem; color:var(--ink-3); }

.file-row{
  display:flex; align-items:center; gap:13px;
  padding:12px 14px; border:1px solid var(--line);
  border-radius:var(--r-md); background:var(--bg);
}
.file-row img,
.file-row .file-ico{
  width:56px; height:56px; flex:none; border-radius:10px;
  object-fit:cover; background:var(--paper); border:1px solid var(--line);
}
.file-row .file-ico{
  display:grid; place-items:center;
  font-family:var(--f-head); font-weight:800; font-size:.74rem; color:var(--ink-3);
}
.file-meta{ display:grid; gap:2px; min-width:0; flex:1; }
.file-meta b{
  font-family:var(--f-head); font-size:.95rem; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.file-meta span{ font-size:.82rem; color:var(--ink-3); }
.file-x{
  width:36px; height:36px; border-radius:50%; flex:none;
  display:grid; place-items:center; color:var(--ink-3);
  border:1px solid var(--line); background:var(--paper);
  transition:color .2s, border-color .2s, background .2s;
}
.file-x:hover{ color:#DC3545; border-color:#F0B7BD; background:#FEF4F5; }
.file-x svg{ width:16px; height:16px; }

/* ---------- כמות ואופן קבלה ---------- */
.qty{
  display:inline-flex; align-items:center; gap:4px;
  border:1px solid var(--line); border-radius:var(--r-pill);
  padding:5px; background:var(--paper); box-shadow:var(--sh-xs);
}
.qty button{
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center; color:var(--ink-2);
  transition:background .2s, color .2s;
}
.qty button:hover:not(:disabled){ background:var(--brand-50); color:var(--brand); }
.qty button:disabled{ opacity:.35; cursor:not-allowed; }
.qty button svg{ width:17px; height:17px; }
.qty input{
  width:52px; text-align:center; border:0; background:transparent;
  font-family:var(--f-head); font-weight:800; font-size:1.05rem; color:var(--ink);
  -moz-appearance:textfield;
}
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
/* שורת הכמות + הוספה לסל */
.add-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.add-row .btn{ flex:1; min-width:190px; }
#qtyLimit{ font-variant-numeric:tabular-nums; }

/* ---------- הסל ---------- */
.cart{ display:grid; gap:10px; margin:16px 0; }
.cart:empty{ margin:0; }
.cart-item{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto auto;
  gap:11px; align-items:center;
  padding:10px; border:1px solid var(--line-2); border-radius:var(--r-sm);
  background:var(--bg);
}
.cart-thumb{
  width:46px; height:46px; flex:none; border-radius:9px; overflow:hidden;
  border:1px solid var(--line); background:var(--paper);
}
.cart-thumb img{ width:100%; height:100%; object-fit:cover; }
.cart-info{ display:grid; gap:2px; min-width:0; }
.cart-info b{ font-family:var(--f-head); font-size:.94rem; color:var(--ink); }
.cart-info span{
  font-size:.79rem; color:var(--ink-3); line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.cart-price{
  font-family:var(--f-head); font-weight:800; font-size:.92rem;
  color:var(--ink); white-space:nowrap; font-variant-numeric:tabular-nums;
}
.cart-tools{ display:flex; flex-direction:column; gap:2px; flex:none; }
.cart-edit,
.cart-x{
  width:28px; height:28px; border-radius:50%; flex:none;
  display:grid; place-items:center; color:var(--ink-4);
  transition:color .2s, background .2s;
}
.cart-edit:hover{ color:var(--brand); background:var(--brand-50); }
.cart-x:hover{ color:#DC3545; background:#FEF4F5; }
.cart-edit svg{ width:13px; height:13px; }
.cart-x svg{ width:14px; height:14px; }

/* ---------- הודעה צפה בראש המסך ---------- */
.co-toast{
  position:fixed; top:calc(var(--header-h) + 14px); inset-inline:0;
  margin-inline:auto; width:max-content; max-width:calc(100% - 32px); z-index:120;
  display:flex; align-items:center; gap:10px;
  background:var(--ink); color:#fff;
  font-family:var(--f-head); font-weight:700; font-size:.94rem;
  padding:13px 22px; border-radius:var(--r-pill);
  box-shadow:0 20px 46px rgba(15,26,46,.34);
  opacity:0; transform:translateY(-14px); pointer-events:none;
  transition:opacity .28s var(--ease-out), transform .28s var(--ease-out);
}
.co-toast.show{ opacity:1; transform:none; }
.co-toast svg{
  width:16px; height:16px; flex:none; padding:3px;
  border-radius:50%; background:#28A745; color:#fff; box-sizing:content-box;
}

/* ---------- סרגל צף: סכום הסל ומעבר לתשלום ---------- */
.cartbar{
  position:fixed; inset-inline:0; bottom:0; z-index:95;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border-top:1px solid var(--line);
  box-shadow:0 -8px 30px rgba(15,26,46,.09);
  animation:cartbarIn .32s var(--ease-out);
  padding-bottom:env(safe-area-inset-bottom);
}
@keyframes cartbarIn{ from{ transform:translateY(100%); } to{ transform:none; } }
.cartbar-inner{
  width:min(100% - 32px, var(--wrap)); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px 0;
}
.cartbar-sum{ display:grid; gap:1px; }
.cartbar-sum b{
  font-family:var(--f-head); font-size:1.32rem; color:var(--ink);
  letter-spacing:-.02em; line-height:1.1;
}
.cartbar-sum span{ font-size:.82rem; color:var(--ink-3); }
.cartbar .btn{ padding:13px 26px; flex:none; }
/* הסרגל לא יסתיר את כפתור הנגישות ולא את סוף העמוד */
body.has-cartbar{ padding-bottom:78px; }
body.has-cartbar .a11y-fab{ bottom:calc(78px + 16px); }
/* במסך רחב כרטיס הסיכום דביק ממילא, ואין צורך בסרגל */
@media (min-width:1081px){ .cartbar{ display:none !important; } }

/* ---------- שלב התשלום נעול עד שהפרטים מולאו ---------- */
.co-card.is-locked-step{ background:var(--bg); box-shadow:none; }
.co-card.is-locked-step .co-head .n{ background:var(--bg-2); border-color:var(--line); color:var(--ink-4); }
.co-card.is-locked-step h2{ color:var(--ink-3); }
.pay-lock{
  display:flex; align-items:center; gap:10px;
  font-size:.92rem; color:var(--ink-3);
}
.pay-lock svg{ width:18px; height:18px; flex:none; }

/* ---------- תשלום ---------- */
.pay-note{
  display:flex; gap:12px; align-items:flex-start;
  padding:14px 16px; border-radius:var(--r-sm);
  font-size:.9rem; line-height:1.6; margin-bottom:22px;
}
.pay-note svg{ width:20px; height:20px; flex:none; margin-top:2px; }
.pay-note--warn{ background:var(--warm-50); border:1px solid #EFD9BE; color:#7A521A; }
.pay-note--info{ background:var(--brand-50); border:1px solid #DCE7FA; color:var(--brand-700); }

.field--ltr input{ direction:ltr; text-align:start; font-variant-numeric:tabular-nums; letter-spacing:.03em; }
/* מספר הכרטיס נכתב משמאל לימין; תווית המנפיק יושבת בקצה הימני הפנוי.
   כאן משתמשים בצדדים פיזיים בכוונה — התיבה RTL אבל תוכנה LTR. */
.card-wrap{ position:relative; display:block; }
.card-wrap input{ width:100%; padding-right:98px; }
.card-brand{
  position:absolute; right:15px; top:50%; transform:translateY(-50%);
  font-family:var(--f-head); font-weight:800; font-size:.7rem;
  color:var(--ink-3); letter-spacing:.02em; pointer-events:none;
  font-style:normal; white-space:nowrap; max-width:80px; overflow:hidden;
}
#payFields.is-locked{ opacity:.55; }
#payFields.is-locked input,
#payFields.is-locked select{ cursor:not-allowed; background:var(--bg-2); }

.check{
  display:flex; gap:11px; align-items:flex-start; cursor:pointer;
  font-size:.92rem; color:var(--ink-2); line-height:1.6; margin-top:20px;
  padding:13px 15px; border:1px solid var(--line-2);
  border-radius:var(--r-sm); background:var(--bg);
  transition:border-color .25s, background .25s;
}
.check input{ width:20px; height:20px; flex:none; margin-top:1px; accent-color:var(--brand); }
.check a{ color:var(--brand); text-decoration:underline; }
.check.has-error{ border-color:#DC3545; background:#FEF4F5; }
/* אפשרות "הקישורים עלינו" — מודגשת מעט, בתוך שלב ההתאמה */
.check--soft{ background:var(--brand-50); border-color:#DCE7FA; }
.check--soft b{
  display:block; font-family:var(--f-head); font-size:.97rem;
  color:var(--ink); margin-bottom:3px;
}
.check--soft:hover{ border-color:var(--brand-200); }
.check--soft:has(input:checked){ border-color:var(--brand); }

/* ---------- סיכום ההזמנה ---------- */
.co-side{ position:sticky; top:calc(var(--header-h) + 20px); align-self:start; }
.sum{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sh-md); overflow:hidden;
}
.sum-media{
  position:relative; aspect-ratio:4/3; overflow:hidden;
  display:grid; place-items:center;
  background:linear-gradient(160deg, var(--bg-2) 0%, var(--paper) 100%);
  border-bottom:1px solid var(--line-2);
}
.sum-media > img{ width:100%; height:100%; object-fit:cover; }
.sum-badge{
  position:absolute; top:14px; inset-inline-start:14px; z-index:2;
  background:rgba(255,255,255,.9); backdrop-filter:blur(8px);
  border:1px solid var(--line); border-radius:var(--r-pill);
  padding:6px 13px; font-family:var(--f-head); font-weight:700;
  font-size:.8rem; color:var(--ink); box-shadow:var(--sh-xs);
}
.sum-body{ padding:20px; }
.sum-title{ font-family:var(--f-head); font-size:1.16rem; color:var(--ink); font-weight:800; }
.sum-empty{ font-size:.9rem; color:var(--ink-3); margin-top:8px; line-height:1.6; }

.sum-rows{ border-top:1px solid var(--line-2); padding-top:15px; display:grid; gap:9px; }
.sum-row{ display:flex; justify-content:space-between; gap:12px; font-size:.92rem; color:var(--ink-2); }
.sum-row b{ font-weight:700; color:var(--ink); }
.sum-row--disc{ color:#1E8E4E; }
.sum-row--disc b{ color:#1E8E4E; }
.sum-total{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  margin-top:14px; padding-top:15px; border-top:1px solid var(--line);
}
.sum-total span{ font-family:var(--f-head); font-weight:700; color:var(--ink); }
.sum-total b{ font-family:var(--f-head); font-size:1.6rem; color:var(--ink); letter-spacing:-.02em; }
.sum-vat{ font-size:.78rem; color:var(--ink-3); text-align:end; margin-top:2px; }
.sum-body .btn{ margin-top:18px; }
.sum-note{ font-size:.79rem; color:var(--ink-3); text-align:center; margin-top:12px; line-height:1.6; }
/* שלוש ההבטחות שמתחת לכפתור — הדבר האחרון שנקרא לפני תשלום,
   ולכן מודגש ולא הערת שוליים */
.sum-perks{
  display:grid; gap:12px; margin-top:18px; padding:16px;
  border-radius:var(--r-md); background:var(--brand-50);
  border:1px solid #DCE7FA;
}
.sum-perks li{ display:flex; gap:10px; align-items:flex-start; }
.sum-perks svg{
  width:15px; height:15px; flex:none; margin-top:3px; padding:3px;
  border-radius:50%; background:var(--brand); color:#fff; box-sizing:content-box;
}
.sum-perks b{
  display:block; font-family:var(--f-head); font-size:.92rem;
  color:var(--ink); margin-bottom:2px;
}
.sum-perks span{ font-size:.82rem; color:var(--ink-2); line-height:1.55; }

/* ---------- דמה של המוצר עם התמונה שהועלתה ---------- */
/* --mock-bg נקבע מהצבע שנבחר, אחרת לבן */
.mock{ position:relative; width:min(62%,230px); }
.mock > img{ width:100%; height:100%; object-fit:contain; }
.mock--block{
  aspect-ratio:1/1; background:var(--mock-bg,#fff); border-radius:20px; padding:14px;
  box-shadow:0 26px 50px rgba(20,45,95,.18), 0 4px 10px rgba(15,26,46,.06);
  transform:rotate(-2.5deg);
}
.mock--stand{
  aspect-ratio:3/4; background:var(--mock-bg,#fff); border-radius:16px 16px 6px 6px; padding:14px;
  box-shadow:0 26px 50px rgba(20,45,95,.18), 0 4px 10px rgba(15,26,46,.06);
  transform:rotate(1.5deg);
  margin-bottom:14px;
}
.mock--stand::after{
  content:""; position:absolute; inset-inline:8%; bottom:-13px; height:13px;
  background:var(--mock-bg,#F2F5FA); filter:brightness(.9);
  border-radius:0 0 10px 10px;
  box-shadow:0 10px 18px rgba(20,45,95,.12);
}

/* ---------- כפתור בעבודה ---------- */
.btn.is-busy{ pointer-events:none; opacity:.85; }
.btn.is-busy::before{
  content:""; width:16px; height:16px; flex:none;
  border:2px solid rgba(255,255,255,.4); border-top-color:#fff;
  border-radius:50%; animation:coSpin .7s linear infinite;
}
@keyframes coSpin{ to{ transform:rotate(360deg); } }

/* ---------- מסך ההצלחה ---------- */
.co-done{
  max-width:660px; margin-inline:auto; text-align:center;
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:clamp(30px,4vw,48px); box-shadow:var(--sh-md);
}
.co-done .ok{
  width:74px; height:74px; border-radius:50%; margin:0 auto 22px;
  display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg,#28A745,#1E8E4E);
  box-shadow:0 16px 34px rgba(40,167,69,.28);
}
.co-done .ok svg{ width:36px; height:36px; }
.co-done h2{ font-size:1.85rem; margin-bottom:12px; }
.co-done > p{ color:var(--ink-2); }
.co-recap{
  display:grid; gap:10px; text-align:start; margin:26px 0;
  padding:18px 20px; border-radius:var(--r-md);
  background:var(--bg); border:1px solid var(--line-2);
}
.co-recap > div{ display:flex; justify-content:space-between; gap:14px; font-size:.93rem; }
.co-recap dt{ color:var(--ink-3); }
.co-recap dd{ margin:0; font-weight:700; color:var(--ink); text-align:end; }
.co-done .co-next{ font-size:.93rem; color:var(--ink-3); }
.co-done .co-file-note{
  margin-top:14px; font-size:.9rem; color:#7A521A;
  background:var(--warm-50); border:1px solid #EFD9BE;
  border-radius:var(--r-sm); padding:12px 15px;
}
.co-done .co-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:26px; }

/* ---------- רספונסיביות ---------- */
@media (max-width:1080px){
  .co-layout{ grid-template-columns:1fr; }
  .co-side{ position:static; }
  .sum-media{ aspect-ratio:16/9; }
}
@media (max-width:640px){
  .type-grid{ grid-template-columns:1fr; }
  .type-card{ flex-direction:row; align-items:stretch; }
  .type-card > img{ width:120px; aspect-ratio:1/1; flex:none; }
  .type-card .tc-body{ padding:14px; align-content:center; }
  .co-progress b{ display:none; }
  .co-progress .co-line{ margin:0 8px; }
  .co-progress li:not(:last-child){ flex:1; }
  .co-head{ gap:11px; }
  .co-head h2{ font-size:1.12rem; }
  .dest-row{ grid-template-columns:1fr; }
  .dest-row > i{ display:none; }
  .sum-media{ aspect-ratio:4/3; }
}