/* B2Bricks add-ons on top of the original design:
   accessibility menu, round WhatsApp button, cookie banner, scroll animations, preview banner. */
:root{
  --x-navy:#071A2C;
  --x-ink:#102238;
  --x-gold:#F5AA24;
  --x-gold-ink:#8F5300;
  --x-paper:#FFFFFF;
  --x-stone:#F1EEE6;
  --x-line:#E6E2DB;
  --x-wa:#1F8F4E;
  --a11y-scale:1;
}
html{font-size:calc(100% * var(--a11y-scale))}

/* preview banner (only outside b2bricks.co.il) */
.x-preview{background:#000;color:#fff;font:500 14px/1.5 'Heebo',Arial,sans-serif;text-align:center;padding:8px 16px}
.x-preview b{color:var(--x-gold)}
.x-preview a{color:#fff;text-decoration:underline}
body.x-review [data-change]{outline:2px dashed var(--x-gold);outline-offset:4px;position:relative}
body.x-review [data-change]::before{content:attr(data-change);position:absolute;top:-14px;right:-6px;z-index:30;background:var(--x-gold);color:var(--x-navy);font:700 13px/1 'Heebo',Arial,sans-serif;padding:5px 8px;border-radius:6px;pointer-events:none}

/* round WhatsApp button, all screen sizes */
.x-wa{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:90;width:56px;height:56px;border-radius:50%;background:var(--x-wa);color:#fff;display:grid;place-items:center;box-shadow:0 10px 24px rgba(0,0,0,.25);transition:transform .2s ease}
.x-wa:hover{transform:scale(1.06)}
.x-wa svg{width:30px;height:30px}
@media(max-width:560px){.x-wa{right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));width:52px;height:52px}}
.modal-open .x-wa,.modal-open .x-a11y-btn{display:none}

/* accessibility menu */
.x-a11y-btn{position:fixed;left:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:91;width:48px;height:48px;border-radius:50%;border:0;background:var(--x-navy);color:#fff;cursor:pointer;display:grid;place-items:center;box-shadow:0 8px 20px rgba(0,0,0,.25)}
.x-a11y-btn svg{width:26px;height:26px}
.x-a11y{position:fixed;left:20px;bottom:calc(80px + env(safe-area-inset-bottom,0px));z-index:91;width:min(300px,calc(100vw - 32px));background:#fff;color:var(--x-ink);border:1px solid var(--x-line);border-radius:14px;padding:18px;box-shadow:0 20px 40px rgba(0,0,0,.2);display:grid;gap:10px;font-family:'Heebo',Arial,sans-serif}
.x-a11y h2{font-size:17px;margin:0}
.x-a11y button{font:600 15px 'Heebo',Arial,sans-serif;text-align:right;background:#F7F5F0;border:1px solid var(--x-line);border-radius:10px;padding:10px 12px;cursor:pointer;color:var(--x-ink)}
.x-a11y button[aria-pressed="true"]{background:var(--x-navy);color:#fff}
.x-a11y a{font-size:14px;color:var(--x-navy);font-weight:600;text-decoration:underline}
body.a11y-hc{--muted:#1d2a3a;--border:#6b6b6b}
body.a11y-hc .section-sub,body.a11y-hc .benefit-desc,body.a11y-hc .why-desc,body.a11y-hc .usecase-desc{color:#1d2a3a!important}
body.a11y-links a{text-decoration:underline!important}
body.a11y-still *,body.a11y-still *::before,body.a11y-still *::after{animation:none!important;transition:none!important}
body.a11y-still .x-reveal{opacity:1!important;transform:none!important}

/* cookie banner */
.x-cookie{position:fixed;inset:auto 16px calc(16px + env(safe-area-inset-bottom,0px)) 16px;margin-inline:auto;max-width:720px;z-index:95;background:var(--x-navy);color:#fff;border-radius:14px;padding:18px 20px;box-shadow:0 20px 40px rgba(0,0,0,.3);display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center;font:400 15px/1.6 'Heebo',Arial,sans-serif}
.x-cookie p{margin:0;flex:1 1 320px}
.x-cookie a{color:#FFD084;text-decoration:underline}
.x-cookie div{display:flex;gap:10px;flex-wrap:wrap}
.x-cookie button{font:700 15px 'Heebo',Arial,sans-serif;min-height:44px;padding:0 18px;border-radius:10px;cursor:pointer;border:1.5px solid rgba(255,255,255,.5);background:transparent;color:#fff}
.x-cookie button.x-yes{background:var(--x-gold);border-color:var(--x-gold);color:var(--x-navy)}

/* scroll animations: elements are visible by default; only items below the fold
   get the hidden start state, and only when motion is allowed */
@media (prefers-reduced-motion: no-preference){
  .x-reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--x-delay,0s)}
  .x-reveal.x-in{opacity:1;transform:none}
  .x-pop{animation:x-pop .6s cubic-bezier(.2,.9,.3,1.3) both}
  @keyframes x-pop{from{opacity:0;transform:scale(.6) translateY(10px)}to{opacity:1;transform:none}}
  .x-float{animation:x-float 4s ease-in-out infinite}
  @keyframes x-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
}

/* motion.js support */
html.motion-pending .hero-copy{visibility:hidden}
.sw{will-change:transform}
.steps-line{height:2px;background:var(--x-gold);transform-origin:right center;transform:scaleX(0);margin-bottom:-2px;position:relative;z-index:1}
body.a11y-still .steps-line{display:none}
/* spotlight that follows the cursor */
.spot{position:relative;isolation:isolate}
.spot::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(245,170,36,.16),transparent 70%);z-index:-1}
.spot:hover::after{opacity:1}
body.a11y-still .spot::after{display:none}

@media(max-width:560px){.x-a11y-btn{left:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px))}.x-a11y{left:14px;bottom:calc(74px + env(safe-area-inset-bottom,0px))}}

/* never let the CSS fallback hide content when GSAP runs */
html.has-gsap .x-reveal{opacity:1;transform:none;transition:none}

/* minimal button hover: colour only, no movement; subtle focus ring */
.btn,.btn:hover,.nav .btn:hover{transition:background-color .2s ease,border-color .2s ease,color .2s ease}
.btn:hover{transform:none}
@media(min-width:861px){.nav .btn:hover{transform:translateY(-50%)}}
.btn-primary{box-shadow:0 4px 12px rgba(245,170,36,.22)}
.btn-primary:hover{background:#E59A14;box-shadow:0 4px 12px rgba(245,170,36,.22)}
.btn:focus-visible{outline:2px solid rgba(245,170,36,.7);outline-offset:3px}