/* ==========================================================================
   ע.כ מנעולים — main.css  ·  V2 "Warm Editorial Home Service"
   Bright, friendly, premium, spacious. Airbnb / Apple-Home calm with an
   Israeli service-business directness.
   RTL-first: logical properties throughout so the layout mirrors correctly.
   Palette is locked to the six V2 tokens. No dark-theme values survive.
   ========================================================================== */

/* --------------------------------------------------------------- tokens */
:root{
  --white:#FFFFFF;          /* bg primary */
  --soft:#FAFAFA;           /* bg soft, alternating sections */
  --orange:#F27F1B;         /* CTA + accents */
  --orange-deep:#D96A0E;    /* hover — surfaces, borders and icons only */
  /* Accessible orange for TEXT. --orange-deep is 3.48:1 on white, which fails
     AA for anything under 18.66px bold (eyebrows, card CTAs, the footer
     tagline). This deepened tone is 4.83:1 on #FFFFFF and 4.63:1 on #FAFAFA,
     so small orange copy clears AA on both section backgrounds. */
  --orange-text:#B3590B;
  --ink:#0A0A0A;            /* headlines AND body, same weight */
  --muted:#6B6B6B;          /* secondary text — 5.3:1 on white, AA */
  --line:#E0E0DE;           /* dividers + decorative strokes ONLY, never text */

  --orange-tint:rgba(242,127,27,.08);
  --orange-soft:rgba(242,127,27,.18);

  --maxw:1240px;
  --nav-h:76px;
  --radius:18px;
  --radius-sm:12px;
  /* #9 tightened: py-20 desktop / py-12 mobile */
  --section-pad:5rem;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* --------------------------------------------------------------- base */
html{scrollbar-color:var(--orange) #EFEFEF;scrollbar-width:thin}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:#F2F2F0}
::-webkit-scrollbar-thumb{background:var(--orange);border-radius:99px;border:2px solid #F2F2F0}
::-webkit-scrollbar-thumb:hover{background:var(--orange-deep)}
::selection{background:var(--orange);color:#fff}

body{background:var(--white);color:var(--ink)}

.skip-link{
  position:fixed;inset-block-start:-100px;inset-inline-start:1rem;z-index:200;
  background:var(--orange);color:var(--ink);font-weight:800;padding:.75rem 1.25rem;border-radius:0 0 12px 12px;
  transition:inset-block-start .25s var(--ease);
}
.skip-link:focus{inset-block-start:0}

.wrap--narrow{width:min(100% - 2.5rem,860px)}

/* --------------------------------------------------------------- logo on light
   The supplied logo-transparent.png draws "ע.כ", "מנעולים" and the tagline in a
   silver/white gradient — invisible against the V2 white page. The asset itself
   is untouched (brand rule: transparent PNG, never on a coloured box), so a thin
   dark rim is applied in CSS to give those glyphs an edge on white.
   Proper fix is a dark-wordmark logo variant from the client. */
.nav-logo img,.footer-logo img{
  filter:drop-shadow(0 0 .6px rgba(10,10,10,.85)) drop-shadow(0 0 1.6px rgba(10,10,10,.5))
         drop-shadow(0 1px 2px rgba(10,10,10,.18));
}
.nav-logo:hover img,.nav-logo:focus-visible img,
.footer-logo:hover img,.footer-logo:focus-visible img{
  filter:drop-shadow(0 0 .6px rgba(10,10,10,.85)) drop-shadow(0 0 1.6px rgba(10,10,10,.5))
         drop-shadow(0 0 16px rgba(242,127,27,.45));
}

/* --------------------------------------------------------------- background line-art (#new)
   Stylised lock/key silhouettes as outline strokes only. Fixed to the
   viewport, parallaxed at 0.3x by animations.js. Barely visible on purpose. */
.linework{
  position:fixed;inset:-12% -5% -5%;z-index:0;pointer-events:none;
  opacity:.07;will-change:transform;
}
.linework svg{width:100%;height:100%;display:block}
.linework path,.linework circle,.linework ellipse{
  fill:none;stroke:var(--line);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
/* every real layer sits above the linework */
.topbar,.site-nav,main,.site-footer,.wa-float,.mobile-bar{position:relative;z-index:1}

/* --------------------------------------------------------------- shared bits */
/* #8 — everything centred, cards included (lists opt out further down) */
.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:'Heebo',sans-serif;font-weight:700;font-size:.8rem;letter-spacing:.09em;
  color:var(--orange-text);margin:0 0 .9rem;
}
.eyebrow .dot{
  width:8px;height:8px;border-radius:50%;background:var(--orange);
  box-shadow:0 0 0 0 var(--orange-soft);animation:pulseDot 2.4s ease-out infinite;
}
@keyframes pulseDot{
  0%{box-shadow:0 0 0 0 rgba(242,127,27,.5)}
  70%{box-shadow:0 0 0 12px rgba(242,127,27,0)}
  100%{box-shadow:0 0 0 0 rgba(242,127,27,0)}
}

.section{position:relative;padding-block:var(--section-pad);isolation:isolate;text-align:center}
.section--soft{background:var(--soft)}
.section + .section{border-block-start:1px solid var(--line)}
/* No max-width here: the H2 carries `white-space:nowrap` at desktop, so a
   character cap on the wrapper would make the heading wider than its own box.
   The reading measure is capped on .section-lead instead. */
.section-head{margin-inline:auto;margin-block-end:2.75rem;text-align:center}
.section h2{font-size:clamp(1.45rem,1.05rem + 1.75vw,2.5rem);margin-inline:auto;text-align:center}
.section-lead{
  color:var(--muted);font-size:clamp(1rem,.96rem + .25vw,1.12rem);
  margin:0 auto;max-width:56ch;text-align:center;
}
.section-lead strong{color:var(--ink);font-weight:600}

/* #12 — every H2 holds its 4+ words on ONE line from tablet up. The copy is
   authored short enough that nowrap can never overflow the container. */
@media (min-width:1024px){
  .section h2{white-space:nowrap}
}

/* reveal defaults (GSAP overrides; this is the no-JS / pre-hydrate state) */
.js [data-reveal]{opacity:0}
.js [data-reveal-stagger] > *{opacity:0}

/* --------------------------------------------------------------- top bar */
.topbar__pulse{
  width:8px;height:8px;border-radius:50%;background:var(--orange);flex:none;
  animation:pulseDot 2s ease-out infinite;
}
.topbar a:hover,.topbar a:focus-visible{color:var(--orange-text)}

/* --------------------------------------------------------------- hero (#2 #5 #15) */
.hero-scrim{
  position:absolute;inset:0;z-index:-2;
  background:
    linear-gradient(to bottom,
      rgba(255,255,255,.95) 0%,
      rgba(255,255,255,.78) 18%,
      rgba(255,255,255,.34) 40%,
      rgba(255,255,255,.20) 62%,
      rgba(255,255,255,.55) 92%,
      var(--white) 100%);
}
/* a soft white bloom directly behind the copy column guarantees the dark
   headline clears contrast wherever the photo happens to be busy */
.hero-glow{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(46% 46% at 50% 36%,rgba(255,255,255,.92),rgba(255,255,255,.55) 55%,rgba(255,255,255,0) 78%);
}
.hero-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center}
.hero-copy{max-width:52rem;margin-inline:auto}
.hero h1 .kw{display:inline-block}

.trust-chips{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.55rem .6rem;
  list-style:none;padding:0;margin:0 0 1.75rem;
}
.trust-chips li{
  display:inline-flex;align-items:center;gap:.4rem;
  background:rgba(255,255,255,.86);border:1px solid var(--line);border-radius:999px;
  padding:.42rem .85rem;font-size:.85rem;font-weight:600;color:var(--ink);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.trust-chips li .ico{width:15px;height:15px;color:var(--orange)}

.btn{white-space:nowrap}
.hero-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem}

.pulse-glow::before{
  content:"";position:absolute;inset:-3px;border-radius:inherit;pointer-events:none;
  box-shadow:0 0 0 0 rgba(242,127,27,.45);animation:ctaPulse 3s ease-out infinite;
}
@keyframes ctaPulse{
  0%{box-shadow:0 0 0 0 rgba(242,127,27,.5)}
  60%{box-shadow:0 0 0 20px rgba(242,127,27,0)}
  100%{box-shadow:0 0 0 0 rgba(242,127,27,0)}
}

/* True infinite marquee: two identical sets, animated exactly -50%, so when
   set 1 has scrolled off, set 2 sits in precisely the position set 1 started
   from. Three things it depends on, all of them load-bearing:

   1. direction:ltr on the CONTAINER, not just on the track. The track is
      width:max-content, i.e. wider than this box, and under the page's dir=rtl
      an oversized child is pinned to the container's RIGHT edge and overflows
      LEFT. Setting direction on the track itself does not move the track's own
      box — `direction` lays out a box's CONTENTS, so the overflow side is
      decided by the PARENT. That was the bug: the track hung off to the left,
      and translateX(-50%) dragged it further left, opening a gap on the right
      that grew to a measured 718px of empty strip by the end of every cycle.
      With the container LTR the overflow sits on the right and -50% scrolls
      into it. Items still travel right-to-left, the natural Hebrew flow.

   2. Each set must be at least as wide as the container. Coverage at translate
      t is [-t, 2*setW - t] against a container of [0, C]; the worst case is
      t = setW, so the strip only stays full while setW >= C. One pass of the
      item list is ~719px, which is narrower than a 1440px viewport — so even
      with the overflow fixed, two single-pass sets would still empty out. Each
      set therefore repeats the list 4x (~2874px), which covers viewports up to
      ~2870px. Wider than that and the list needs another repeat.

   3. gap + a trailing padding-inline-end of the SAME value. `gap` only inserts
      space BETWEEN children, never after the last one, so without the trailing
      padding the seam between the two sets would be tighter than every other
      gap. Each item is also followed by a "·", so the seam separator matches
      every other separator. */
.marquee{
  position:relative;width:100%;overflow:hidden;
  direction:ltr;
}
.marquee__track{
  display:flex;width:max-content;
  animation:marquee-scroll-trust 40s linear infinite;will-change:transform;
}
.marquee__track:hover{animation-play-state:paused}
.marquee__set{
  display:flex;align-items:center;gap:1.1rem;padding-inline-end:1.1rem;flex-shrink:0;
}
@keyframes marquee-scroll-trust{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* the hero's bottom trust strip */
.marquee--trust{
  position:absolute;inset-inline:0;inset-block-end:0;z-index:3;
  border-block-start:1px solid var(--line);background:rgba(255,255,255,.82);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.marquee--trust .marquee__track{
  white-space:nowrap;padding-block:.6rem;
  font-family:'Heebo',sans-serif;font-weight:700;font-size:.82rem;letter-spacing:.04em;color:var(--ink);
}
.marquee--trust i{color:var(--orange);font-style:normal}

/* --------------------------------------------------------------- steps */
.steps{
  position:relative;list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.8rem,1.6vw,1.4rem);
}
.steps__connector{position:absolute;inset-inline:6%;inset-block-start:52px;height:8px;width:88%;z-index:0;pointer-events:none}
.step{
  position:relative;z-index:1;text-align:center;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.75rem 1.4rem;
  transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease);
}
.step:hover{transform:translateY(-4px);border-color:var(--orange);
  box-shadow:0 18px 40px -26px rgba(242,127,27,.5)}
/* #6 — no plate behind the numeral, just the figure */
.step__num{
  display:block;margin:0 auto .75rem;
  font-family:'Heebo',sans-serif;font-weight:900;font-size:2.75rem;line-height:1;
  color:var(--orange);font-variant-numeric:tabular-nums;
}
.step h3{font-size:1.22rem;margin-block-end:.4rem;text-align:center}
.step p{color:var(--muted);margin:0;text-align:center}

/* --------------------------------------------------------------- why-us cards */
/* #9 card gaps trimmed ~20% from V1 */
.cards-4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.8rem,1.3vw,1.2rem)}

.tcard{
  transform-style:preserve-3d;text-align:center;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.9rem 1.35rem;
  transition:border-color .4s var(--ease),box-shadow .4s var(--ease);
}
.tcard:hover{border-color:var(--orange);box-shadow:0 22px 46px -30px rgba(242,127,27,.5)}
/* #6 — bare outline icon, no circle, no square, no fill */
.tcard__icon{
  display:block;width:40px;height:40px;margin:0 auto 1rem;
  color:var(--orange);transform:translateZ(28px);
}
.tcard h3{font-size:1.16rem;margin-block-end:.4rem;transform:translateZ(18px);text-align:center}
.tcard p{color:var(--muted);margin:0;font-size:.96rem;transform:translateZ(10px);text-align:center}

/* --------------------------------------------------------------- giant stats (#3) */
.stats{
  list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2vw,2rem);
  align-items:start;justify-items:center;
}
.stat{text-align:center}
.stat__num{
  display:block;font-family:'Heebo',sans-serif;font-weight:900;line-height:.92;
  font-size:8rem;color:var(--orange);font-variant-numeric:tabular-nums;
  letter-spacing:-.04em;
}
.stat__num em{font-style:normal;font-size:.55em;vertical-align:.18em}
.stat__label{
  display:block;margin-block-start:.5rem;color:var(--ink);
  font-family:'Heebo',sans-serif;font-weight:700;font-size:1.05rem;
}

/* --------------------------------------------------------------- carousels (#4) */
.carousel-nav{display:flex;gap:.6rem;flex:none;justify-content:center}
.cbtn{
  width:46px;height:46px;display:grid;place-items:center;cursor:pointer;
  background:var(--white);border:1px solid var(--line);border-radius:50%;color:var(--orange-text);
  transition:border-color .3s,transform .3s var(--ease),background .3s,opacity .3s;
}
.cbtn svg{width:22px;height:22px}
.cbtn:hover:not(:disabled){border-color:var(--orange);background:var(--orange-tint);transform:translateY(-2px)}
.cbtn:disabled{opacity:.35;cursor:default}

.svc-swiper{padding-inline:clamp(1.25rem,calc((100vw - var(--maxw)) / 2 + 1.25rem),12rem);padding-block-end:3rem;overflow:hidden}
.svc-swiper .swiper-slide{width:clamp(230px,26vw,286px);height:auto}

/* card: white bg, 1px line, image top 65%, name centred bold below */
.svc{
  position:relative;display:flex;flex-direction:column;height:100%;
  border-radius:var(--radius);overflow:hidden;
  background:var(--white);border:1px solid var(--line);
  transition:transform .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease);
}
.svc__media{position:relative;flex:0 0 auto;aspect-ratio:4/5;overflow:hidden;background:var(--soft)}
.svc__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-out)}
.svc__body{
  flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:.5rem;
  padding:1rem .95rem 1.15rem;text-align:center;
}
.svc__body h3{
  font-size:1rem;line-height:1.32;margin:0;text-align:center;color:var(--ink);
  transition:transform .45s var(--ease);
}
.svc__cta{
  display:inline-flex;align-items:center;gap:.35rem;margin-block-start:auto;
  font-family:'Heebo',sans-serif;font-weight:700;font-size:.85rem;color:var(--orange-text);
  opacity:0;transform:translateY(8px);
  transition:opacity .4s var(--ease),transform .4s var(--ease),color .25s;
  position:relative;overflow:hidden;border-radius:8px;padding:.1rem .2rem;
}
/* #4 hover: lift 4px + orange border glow */
.svc:hover,.svc:focus-within{
  transform:translateY(-4px);border-color:var(--orange);
  box-shadow:0 0 0 1px var(--orange) inset,0 20px 44px -26px rgba(242,127,27,.6);z-index:3;
}
.svc:hover .svc__media img,.svc:focus-within .svc__media img{transform:scale(1.05)}
.svc:hover .svc__cta,.svc:focus-within .svc__cta{opacity:1;transform:translateY(0)}
/* hover goes to ink, not brand orange: #F27F1B is 2.68:1 on white and would
   drop this 13.6px bold link below AA exactly while the user is reading it */
.svc__cta:hover{color:var(--ink)}
.svc__cta:focus-visible{opacity:1;transform:translateY(0)}

.svc-swiper .swiper-pagination{inset-block-end:.6rem;inset-inline:0}
.svc-swiper .swiper-pagination-progressbar{
  background:var(--line);height:3px;inset-block-start:auto;inset-block-end:1.1rem;
  inset-inline:clamp(1.25rem,calc((100vw - var(--maxw)) / 2 + 1.25rem),12rem);width:auto;border-radius:99px;
}
.svc-swiper .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{
  background:var(--orange);border-radius:99px;
}

.carousel-note{margin:1.5rem auto 0;color:var(--muted);font-size:1rem;text-align:center}
.carousel-note a{color:var(--orange-text);font-weight:700;border-block-end:1px solid var(--orange-soft);padding-block-end:2px}
.carousel-note a:hover{color:var(--ink);border-color:var(--orange)}

/* --------------------------------------------------------------- flip tips */
.flips{perspective:1400px}
.flip{
  display:block;width:100%;min-height:224px;padding:0;background:none;border:0;cursor:pointer;
  font:inherit;text-align:center;
}
.flip__inner{
  position:relative;display:block;width:100%;height:100%;min-height:224px;
  transform-style:preserve-3d;transition:transform .7s var(--ease);
}
.flip:hover .flip__inner,.flip.is-flipped .flip__inner{transform:rotateY(180deg)}
.flip__face{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.55rem;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem 1.35rem;text-align:center;
}
.flip__face--front{background:var(--white)}
.flip__face--back{
  transform:rotateY(180deg);background:var(--orange-tint);border-color:var(--orange);
}
.flip__icon{display:block;width:36px;height:36px;color:var(--orange)}
.flip__title{font-family:'Heebo',sans-serif;font-weight:900;font-size:1.14rem;line-height:1.25;color:var(--ink)}
.flip__hint{font-size:.8rem;color:var(--muted)}
.flip__text{font-size:1rem;line-height:1.6;color:var(--ink)}
.flip:focus-visible{border-radius:var(--radius)}

/* --------------------------------------------------------------- reviews (#13) */
.google-badge{
  display:inline-flex;align-items:center;gap:.5rem;position:relative;overflow:hidden;
  margin:1.1rem auto 0;padding:.6rem 1.2rem;border-radius:999px;
  background:var(--white);border:1px solid var(--line);font-weight:600;font-size:.95rem;color:var(--ink);
}
.google-badge strong{color:var(--orange-text);font-family:'Heebo',sans-serif;font-weight:900}
.google-badge .ico{width:17px;height:17px;color:var(--orange)}
.shimmer::after{
  content:"";position:absolute;inset-block:0;inset-inline-start:-60%;width:55%;
  background:linear-gradient(100deg,transparent,rgba(242,127,27,.16),transparent);
  animation:shimmer 3.4s ease-in-out infinite;
}
@keyframes shimmer{0%{inset-inline-start:-60%}55%,100%{inset-inline-start:120%}}

/* FIX 1 — reviews as a continuous Swiper marquee.
   Full-bleed on purpose: no padding-inline. The service carousels use side
   padding to align their first card to the 1240px content column, but on a
   marquee that padding is a permanent dead strip at both ends — measured as a
   120px uncovered span that reads exactly like the loop gap this fix is meant
   to remove. A marquee has to run edge to edge. */
.reviews-swiper{overflow:hidden}
/* Swiper drives each step with a 4s transition; its default `ease` would make
   the strip visibly pulse once per card. Linear turns the chained steps into
   one constant-velocity flow. */
.reviews-swiper .swiper-wrapper{transition-timing-function:linear!important}
.reviews-swiper .swiper-slide{height:auto;display:flex}

.review{
  flex:1 1 auto;width:100%;margin:0;text-align:center;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.4rem 1.4rem;transition:border-color .35s;
}
.review:hover{border-color:var(--orange)}
.review__stars{display:flex;justify-content:center;gap:.1rem;margin-block-end:.6rem}
.review__stars .ico{width:16px;height:16px;color:var(--orange)}
.review blockquote{margin:0}
.review blockquote p{margin:0;color:var(--ink);font-size:.98rem;line-height:1.65;text-align:center}
.review figcaption{
  display:flex;align-items:center;justify-content:center;gap:.6rem;
  margin-block-start:.95rem;font-family:'Heebo',sans-serif;font-weight:700;color:var(--ink);font-size:.93rem;
}
/* WhatsApp-style initials avatar — gradient circles, never an AI face */
.avatar{
  flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  font-family:'Heebo',sans-serif;font-weight:900;font-size:1rem;color:#fff;
  line-height:1;text-shadow:0 1px 2px rgba(0,0,0,.18);
}
.avatar--1{background:linear-gradient(135deg,#FBB040,#F27F1B)}
.avatar--2{background:linear-gradient(135deg,#3FBFC4,#1E7F98)}
.avatar--3{background:linear-gradient(135deg,#A57BE8,#6C3FC5)}
.avatar--4{background:linear-gradient(135deg,#57C98A,#1F8A55)}
.avatar--5{background:linear-gradient(135deg,#F0796B,#C93A32)}
.avatar--6{background:linear-gradient(135deg,#E9C25A,#B8862B)}

/* --------------------------------------------------------------- faq */
/* #8 applies here too — question and answer are body copy, so they centre.
   The chevron trails the centred label instead of being pinned to the edge. */
.faq{display:grid;gap:.7rem;text-align:center}
.faq__item{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;
  transition:border-color .35s;
}
.faq__item.is-open{border-color:var(--orange)}
.faq__q{margin:0;font-size:inherit}
.faq__q button{
  display:flex;align-items:center;justify-content:center;gap:.6rem;width:100%;
  background:none;border:0;cursor:pointer;text-align:center;
  font-family:'Heebo',sans-serif;font-weight:700;font-size:clamp(1rem,.97rem + .2vw,1.1rem);
  padding:1.1rem 1.3rem;color:var(--ink);transition:color .25s;
}
.faq__q button:hover{color:var(--orange-text)}
.faq__chev{flex:none;width:24px;height:24px;position:relative;transition:transform .4s var(--ease)}
.faq__chev::before,.faq__chev::after{
  content:"";position:absolute;inset-block-start:11px;width:11px;height:2.5px;border-radius:2px;background:var(--orange);
}
.faq__chev::before{inset-inline-start:2px;transform:rotate(-45deg)}
.faq__chev::after{inset-inline-start:9px;transform:rotate(45deg)}
.faq__item.is-open .faq__chev{transform:rotate(180deg)}
.faq__a{overflow:hidden;max-height:0;transition:max-height .45s var(--ease)}
.faq__a > p{margin:0;padding:0 1.3rem 1.25rem;color:var(--muted);line-height:1.75;text-align:center}
.faq__a > p strong{color:var(--ink)}

/* --------------------------------------------------------------- footer CTA */
.section--cta{overflow:hidden;text-align:center;background:var(--soft)}
.section--cta h2{font-size:clamp(1.6rem,1.1rem + 2.4vw,2.9rem)}

.contact-cards{
  display:grid;grid-template-columns:repeat(3,1fr);gap:.85rem;
  margin-block:2.25rem;
}
.ccard{
  position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:.35rem;
  min-height:146px;justify-content:center;text-align:center;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem 1rem;
  transition:transform .35s var(--ease),border-color .35s,box-shadow .35s;
}
.ccard:hover,.ccard:focus-visible{transform:translateY(-4px);border-color:var(--orange);
  box-shadow:0 20px 44px -28px rgba(242,127,27,.55)}
.ccard__icon{display:block;width:30px;height:30px;color:var(--orange)}
.ccard__label{font-family:'Heebo',sans-serif;font-weight:900;font-size:1.02rem;color:var(--ink)}
.ccard__value{color:var(--muted);font-size:.94rem;word-break:break-word}

.cta-final{position:relative;display:inline-block;isolation:isolate}
/* aurora glow, retuned for a light background */
.aurora{
  position:absolute;inset:-38px;z-index:-1;border-radius:999px;pointer-events:none;
  background:conic-gradient(from 0deg,rgba(242,127,27,0),rgba(242,127,27,.42),rgba(255,186,120,.28),rgba(242,127,27,0));
  filter:blur(30px);opacity:.9;animation:auroraSpin 7s linear infinite;
}
@keyframes auroraSpin{to{transform:rotate(360deg)}}

/* ripple */
.ripple{
  position:absolute;border-radius:50%;transform:scale(0);pointer-events:none;
  background:rgba(255,255,255,.5);animation:rippleOut .62s var(--ease-out) forwards;
}
.btn--ghost .ripple,.ccard .ripple,.svc__cta .ripple{background:rgba(242,127,27,.28)}
@keyframes rippleOut{to{transform:scale(2.6);opacity:0}}

/* --------------------------------------------------------------- footer */
.site-footer{
  background:var(--white);border-block-start:1px solid var(--line);
  padding-block:2.75rem;text-align:center;
}
.footer-inner{display:flex;flex-direction:column;align-items:center;gap:1.25rem}
.footer-logo img{height:64px;width:auto;background:transparent;transition:filter .35s var(--ease)}
.footer-logo:hover img,.footer-logo:focus-visible img{filter:drop-shadow(0 0 18px rgba(242,127,27,.45))}
.footer-meta{text-align:center}
.footer-meta p{margin:0 0 .3rem}
.footer-tagline{font-family:'Heebo',sans-serif;font-weight:700;color:var(--orange-text);letter-spacing:.04em}
.footer-contact a{color:var(--ink);font-weight:600}
.footer-contact a:hover{color:var(--orange-text)}
.footer-areas{color:var(--muted);font-size:.88rem}

/* --------------------------------------------------------------- credit bar (FIX 4)
   Replaces the old low-contrast "עוצב ופותח ע״י Simple Solution" text line.
   The logo PNG has an opaque pure-#000000 matte, which is exactly this bar's
   background, so it composites with no visible plate. */
.credit-bar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:56px;padding-inline:24px;
  background:#000000;border-block-start:2px solid var(--orange);
}
.credit-bar__legal{
  margin:0;color:#fff;opacity:.6;font-size:12px;line-height:1.4;
}
.credit-bar__by{
  display:inline-flex;align-items:center;gap:.6rem;
  color:#fff;opacity:.85;font-size:14px;font-weight:600;
  transition:opacity .3s var(--ease);
}
.credit-bar__by img{
  height:28px;width:auto;display:block;
  transition:transform .3s var(--ease);
}
.credit-bar__by:hover,.credit-bar__by:focus-visible{opacity:1}
.credit-bar__by:hover img,.credit-bar__by:focus-visible img{transform:scale(1.05)}

/* --------------------------------------------------------------- floating */
.wa-float{
  position:fixed;inset-block-end:1.6rem;inset-inline-start:1.6rem;z-index:110;
  width:58px;height:58px;display:grid;place-items:center;border-radius:50%;
  background:#25D366;color:#fff;box-shadow:0 14px 32px -14px rgba(37,211,102,.75);
  transition:transform .3s var(--ease),box-shadow .3s;
}
.wa-float svg{width:31px;height:31px;position:relative;z-index:2}
.wa-float:hover,.wa-float:focus-visible{transform:scale(1.08)}
.wa-float__pulse{
  position:absolute;inset:0;border-radius:50%;background:#25D366;opacity:.5;
  animation:waPulse 5s ease-out infinite;
}
@keyframes waPulse{0%{transform:scale(1);opacity:.45}45%{transform:scale(1.7);opacity:0}100%{transform:scale(1.7);opacity:0}}
.wa-float__tip{
  position:absolute;inset-inline-start:calc(100% + 12px);white-space:nowrap;
  background:var(--white);border:1px solid var(--line);border-radius:10px;
  padding:.4rem .7rem;font-size:.82rem;font-weight:600;color:var(--ink);
  box-shadow:0 10px 24px -16px rgba(10,10,10,.4);
  opacity:0;transform:translateX(6px);pointer-events:none;transition:opacity .3s,transform .3s;
}
.wa-float:hover .wa-float__tip,.wa-float:focus-visible .wa-float__tip{opacity:1;transform:translateX(0)}

.mobile-bar{
  position:fixed;inset-inline:0;inset-block-end:0;z-index:115;display:none;
  border-block-start:1px solid var(--line);background:rgba(255,255,255,.96);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  padding-block-end:env(safe-area-inset-bottom,0);
}
.mobile-bar a{
  flex:1 1 50%;display:flex;align-items:center;justify-content:center;gap:.45rem;position:relative;overflow:hidden;
  min-height:56px;font-family:'Heebo',sans-serif;font-weight:800;font-size:1rem;
}
.mobile-bar .ico{width:19px;height:19px}
.mobile-bar__wa{background:var(--orange);color:var(--ink)}
.mobile-bar__tel{background:var(--white);color:var(--ink);border-inline-start:1px solid var(--line)}

/* --------------------------------------------------------------- cursor (#14)
   Rebuilt for a white page. The 24px dot uses mix-blend-mode:multiply so it
   darkens whatever sits under it — visible on white, on photos, and on the
   orange CTAs alike. A 6px solid dot trails it. */
/* PHYSICAL top/left on purpose. `inset-inline-start` resolves to `right` under
   dir="rtl", which anchored the dot to the top-right corner and then pushed it
   further right by clientX — straight off the viewport. That is why the V1
   cursor was invisible on every background. clientX/clientY are physical
   coordinates, so the anchor must be physical too. */
.cursor,.cursor-trail{
  position:fixed;top:0;left:0;z-index:140;pointer-events:none;
  opacity:0;will-change:transform;border-radius:50%;
}
.cursor{
  width:24px;height:24px;margin:-12px 0 0 -12px;
  background:var(--orange);opacity:.4;mix-blend-mode:multiply;
  transition:width .22s var(--ease),height .22s var(--ease),margin .22s var(--ease),opacity .22s;
}
.cursor.is-hot{width:40px;height:40px;margin:-20px 0 0 -20px;opacity:.6}
.cursor-trail{width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--orange);opacity:.9}
html.has-cursor,html.has-cursor *{cursor:none !important}

/* --------------------------------------------------------------- responsive */
@media (max-width:1180px){
  .cards-4{grid-template-columns:repeat(2,1fr)}
  .stat__num{font-size:6rem}
}
@media (max-width:900px){
  :root{--section-pad:3rem}          /* #9 py-12 mobile */
  .steps{grid-template-columns:1fr}
  .steps__connector{display:none}
  .stats{grid-template-columns:repeat(2,1fr);gap:2.25rem 1rem}
  .stat__num{font-size:4rem}
  .contact-cards{grid-template-columns:1fr}
  .section-head{margin-block-end:2rem}
}
@media (max-width:760px){
  body{padding-block-end:56px}       /* room for the mobile action bar */
  .mobile-bar{display:flex}
  .wa-float{display:none}
  .nav-phone{display:none}
  .nav-cta{margin-inline-start:auto}
  .cards-4{grid-template-columns:1fr}
  .flip__inner,.flip{min-height:196px}
  .svc-swiper{padding-inline:1.25rem}
  .svc-swiper .swiper-pagination-progressbar{inset-inline:1.25rem}
  .svc-swiper .swiper-slide{width:min(74vw,264px)}
  /* the review card is sized by its Swiper slide now (slidesPerView 1.2) */
  .marquee--trust .marquee__track{font-size:.75rem}
  /* column-reverse so the credit link sits above the copyright on a phone */
  .credit-bar{
    flex-direction:column-reverse;justify-content:center;gap:.45rem;
    min-height:48px;padding:.7rem 1rem;text-align:center;
  }
}
@media (max-width:420px){
  .hero-actions .btn{width:100%}
  .trust-chips li{font-size:.78rem;padding:.35rem .7rem}
  .stat__num{font-size:3.5rem}
}

/* touch devices: no custom cursor, no tilt jitter, CTA always shown */
@media (hover:none){
  .cursor,.cursor-trail{display:none}
  html.has-cursor,html.has-cursor *{cursor:auto !important}
  .flip:hover .flip__inner{transform:none}
  .flip.is-flipped .flip__inner{transform:rotateY(180deg)}
  .svc:hover{transform:none}
  .svc .svc__cta{opacity:1;transform:none}
}

/* --------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  html{scroll-behavior:auto}
  .cursor,.cursor-trail{display:none}
  .marquee__track{animation:none !important;transform:none !important}
  /* the reviews marquee is a Swiper now; carousels.js skips its autoplay under
     reduced motion, and this keeps the track from being mid-transition */
  .reviews-swiper .swiper-wrapper{transition:none !important}
  .aurora{animation:none;opacity:.5}
  .js [data-reveal],.js [data-reveal-stagger] > *{opacity:1 !important;transform:none !important}
  .hero-media img{transform:none !important}
  .linework{transform:none !important}
  .flip:hover .flip__inner{transform:none}
}

/* --------------------------------------------------------------- print */
@media print{
  .cursor,.cursor-trail,.wa-float,.mobile-bar,#progress-bar,.marquee--trust,.linework{display:none}
  body{background:#fff;color:#000}
}