*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:var(--paper);
  line-height:1.65;
  direction:rtl;
  text-align:right;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0}

.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}

/* ---------- skip link ---------- */
.skip-link{
  position:absolute;right:12px;top:-60px;background:var(--dark);color:var(--white);
  padding:10px 18px;border-radius:var(--radius-sm);z-index:1000;transition:top .2s;
}
.skip-link:focus{top:12px}

/* ---------- container / grid ---------- */
.wrap{max-width:var(--content-max);margin:0 auto;padding:0 24px}
@media (max-width:640px){.wrap{padding:0 18px}}

.section{padding:96px 0}
@media (max-width:900px){.section{padding:64px 0}}

/* ---------- type scale ----------
   Pushed the top of the scale further and tightened line-height/letter-spacing more
   aggressively - a heading that's merely "big" reads flat; one with real size+tightness
   contrast against body text is what gives a page presence. */
h1{font-family:var(--font-display);font-size:clamp(38px,6vw,68px);line-height:1.05;font-weight:800;letter-spacing:-.02em}
/* 46px made long Hebrew section headings run to 3 lines and dominate their own sections -
   38px keeps the hierarchy strong without the heading becoming the whole block. */
h2{font-family:var(--font-display);font-size:clamp(26px,3.2vw,38px);line-height:1.15;font-weight:800;letter-spacing:-.015em;text-wrap:balance}
h3{font-family:var(--font-display);font-size:clamp(20px,2.4vw,26px);line-height:1.3;font-weight:700}
p{font-size:17px}
.lede{font-size:19px;color:var(--muted);max-width:70ch}
/* Everything is margin:0 by reset, so a .lede sitting straight after a heading had zero
   separation and the two blocks read as one dense lump. This is the site-wide fix. */
h1 + .lede,h2 + .lede,h3 + .lede{margin-top:18px}
.lede + .lede{margin-top:12px}

/* A crisp inline highlight for punching up one phrase inside a heading - a flat color
   swash behind the text, not a gradient glow. Wrap the phrase in <mark class="hl"> in copy. */
mark.hl{background:none;color:inherit;position:relative;padding:0 .08em}
mark.hl::after{content:"";position:absolute;inset-inline:-.04em;bottom:.05em;height:.34em;background:color-mix(in srgb, var(--teal) 28%, transparent);z-index:-1;border-radius:2px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 26px;
  border-radius:var(--radius);font:800 .96rem var(--font);cursor:pointer;border:2px solid transparent;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;white-space:nowrap;
}
.btn:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.btn-primary{background:var(--teal);color:var(--white)}
.btn-primary:hover{background:var(--teal-d);transform:translateY(-1px)}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--teal);color:var(--teal)}

/* ---------- header ----------
   Dark navy, matching the footer - the two dark "bookends" are the site's actual signature
   now instead of a pale blurred-glass bar, per the dark-forward direction. */
.hdr{position:fixed;inset-inline:0;top:0;height:var(--hh);background:var(--darker);border-bottom:1px solid var(--on-dark-line);z-index:500}
.hdr-inner{max-width:var(--content-max);margin:0 auto;padding:0 24px;height:100%;display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{flex-shrink:0}
/* real supplied logo asset, no filter recolour - the light variant is a separate file so the
   teal mark in the logotype survives instead of being flattened to white */
.brand-logo{height:30px;width:auto}

/* Partner badge: Alevectis stays dominant (bigger logo, first, unlabelled) - the 4 small
   Zoho brand-color squares are a quiet, official-feeling mark of the partnership, per
   Zoho's own partner guideline that the badge must never outweigh the host brand (spec §5). */
/* Real Zoho logo, never redrawn. Guidelines require >=4px clear space around it and forbid
   merging it with other marks, so it sits in its own padded pill separated from the
   Alevectis logotype - adjacent, not locked up into a combined logo. */
.partner-badge{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:700;color:var(--on-dark-ink);background:rgba(255,255,255,.08);border-radius:999px;padding:6px 13px;white-space:nowrap}
.pb-zoho{height:19px;width:auto;margin:4px}

.desk-nav{display:flex;align-items:center;gap:2px;flex-shrink:1;min-width:0}
.desk-nav>li{position:relative}
.desk-nav a,.desk-nav .nl{display:flex;align-items:center;gap:4px;padding:9px 12px;border-radius:var(--radius-sm);font-weight:600;font-size:14.5px;cursor:pointer;white-space:nowrap;color:var(--on-dark-ink);background:none;border:none;appearance:none;font-family:inherit;line-height:normal;margin:0}
.desk-nav a:hover,.desk-nav .nl:hover{background:rgba(255,255,255,.08);color:#fff}
.hdr-actions{display:flex;align-items:center;gap:14px;flex-shrink:0}

/* "עוד" - a real 6th nav item (same font-weight/size/hover as the other 5), not a separate
   lighter-weight utility row - that visual split (bold nav + unbold small-text row) is what
   read as an inconsistent, crowded header. Click-toggled, not hover-only, so it works the same
   way the mobile drawer does and doesn't require a mouse. */
.has-dd{position:relative}
.nav-dd{
  display:none;position:absolute;inset-inline-end:0;top:100%;margin-top:6px;
  min-width:200px;padding:6px;border-radius:var(--radius);
  background:var(--darker);border:1px solid var(--on-dark-line);box-shadow:0 12px 28px rgba(0,0,0,.28);
  list-style:none;z-index:20;
}
.has-dd.open .nav-dd{display:block}
.nav-dd a{display:block;padding:9px 12px;border-radius:var(--radius-sm);font-weight:600;font-size:14.5px;color:var(--on-dark-ink);white-space:nowrap}
.nav-dd a:hover{background:rgba(255,255,255,.08);color:#fff}
.burger{display:none;background:none;border:none;padding:8px;cursor:pointer;flex-shrink:0}
.burger span{display:block;width:24px;height:2px;background:var(--on-dark-ink);margin:5px 0;transition:.2s}

/* Full row (logo + badge + 6 nav links incl. the "עוד" dropdown + CTA) genuinely needs ~1300px+
   to sit on one line without crowding. Collapsing at 960px left a broken zone up to ~1300px
   where everything was visible but didn't fit - that was the header overlap/wrap bug. */
@media (max-width:1300px){
  .desk-nav{display:none}
  .burger{display:block}
}
@media (max-width:480px){
  .partner-badge span{display:none}
}

/* Mobile header fit. Logo (168px) + partner badge + CTA (198px) + burger + gaps needs ~560px;
   below that the row silently overflowed the fixed header and pushed the burger to
   left:-196px - completely off-screen, so the drawer could not be opened at all on a phone.
   The CTA is dropped rather than the burger because the drawer already carries the same
   "לקביעת פגישת אפיון" button, so nothing is lost. Never let the burger be the element
   that gets squeezed - it is the only route to navigation at this width. */
@media (max-width:760px){
  .hdr-inner{padding:0 16px;gap:12px}
  .hdr-actions .btn{display:none}
  .brand-logo{height:26px}
}

/* mobile drawer */
.drawer{position:fixed;inset:0;top:var(--hh);background:var(--white);z-index:490;transform:translateX(100%);visibility:hidden;transition:transform .25s ease,visibility .25s ease;overflow-y:auto}
.drawer.open{transform:translateX(0);visibility:visible}
.drawer .wrap{padding:24px}
.drawer-nav li{border-bottom:1px solid var(--line)}
.drawer-nav a,.drawer-nav .nl{display:flex;justify-content:space-between;align-items:center;padding:16px 4px;font-weight:700;font-size:17px}
.drawer-sub{padding:0 4px 12px}
.drawer-sub a{display:block;padding:10px 12px;color:var(--muted);font-size:15px;font-weight:500}
.drawer .btn{width:100%;justify-content:center;margin-top:20px}

/* mobile sticky CTA - thumb-reachable primary action, phones only. Not a bottom nav bar (that's
   an app pattern for 3-5 frequently-switched destinations, and risks colliding with the mobile
   browser's own bottom toolbar) - just the one conversion action, always in reach. The menu
   toggle moves down here too (same reasoning: it's the only route to navigation at this width,
   see the header's own burger comment - stranding it at the top defeats the point of a
   thumb-zone fix). Same element, same #burgerBtn, same JS - only its position changes. */
.mobile-cta-bar{display:none}
@media (max-width:680px){
  .mobile-cta-bar{
    display:flex;align-items:center;gap:10px;position:fixed;inset-inline:0;bottom:0;z-index:400;
    padding-block:10px calc(10px + env(safe-area-inset-bottom));
    padding-inline-start:74px; /* reserves room for the toggle, which sits on this (right) side -
      it's position:fixed and outside this flex layout, so nothing else reserves its space. */
    padding-inline-end:16px;
    background:var(--white);border-top:1px solid var(--line);
    box-shadow:0 -6px 18px rgba(0,0,0,.08);
  }
  .mobile-cta-bar .btn{display:flex;flex:0 1 auto;margin-inline-start:auto;max-width:min(260px,100%)}
  .contact-page .mobile-cta-bar,.thankyou-page .mobile-cta-bar{display:none}
  body{padding-bottom:68px}
  .contact-page,.thankyou-page{padding-bottom:0}

  .burger{
    position:fixed!important;inset-inline-start:16px;bottom:calc(10px + env(safe-area-inset-bottom));
    z-index:410;width:48px;height:48px;padding:0;
  }
  .burger span{background:var(--ink)}
  .contact-page .burger,.thankyou-page .burger{position:static!important;width:auto;height:auto;padding:8px}
  .contact-page .burger span,.thankyou-page .burger span{background:var(--on-dark-ink)}
}

/* ---------- footer ---------- */
.ftr{background:var(--darker);color:#cfd8d3;padding:72px 0 28px}
.ftr h3{color:var(--white);font-size:15px;margin-bottom:16px}
.ftr-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:32px}
@media (max-width:900px){
  .ftr-grid{grid-template-columns:repeat(2,1fr);row-gap:36px}
  .ftr-brand{grid-column:1/-1}
}
.ftr a{display:block;padding:6px 0;color:#a9b6b0;font-size:14.5px}
.ftr a:hover{color:var(--white)}
.ftr-brand img{height:30px;width:auto;margin-bottom:14px}
.ftr-social{display:flex;gap:10px;margin-top:18px}
.ftr-social a{display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border-radius:50%;background:rgba(255,255,255,.08);color:#a9b6b0}
.ftr-social a:hover{background:rgba(255,255,255,.16);color:var(--white)}
.ftr-social svg{width:18px;height:18px}

.ftr-legal{border-top:1px solid #263a35;margin-top:48px;padding-top:24px;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;font-size:13px;color:#8a978f}
.ftr-legal .links{display:flex;gap:18px;flex-wrap:wrap}
.trademark-note{font-size:12.5px;color:#7c8a83;max-width:60ch;margin-top:10px}

/* ---------- cards ----------
   A flat bordered rectangle repeated dozens of times is exactly the "boxy, no lift" feel -
   a colored top edge + real shadow + a hover lift gives every card grid on the site some
   life without resorting to gradients or glassmorphism. */
.card{
  background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);padding:28px;
  box-shadow:0 1px 2px rgba(13,26,23,.04), 0 8px 20px -14px rgba(13,26,23,.25);
  transition:transform .18s ease, box-shadow .18s ease;
}
a.card:hover,.card.domain-card:hover{
  transform:translateY(-3px);
  box-shadow:0 4px 10px -4px rgba(13,26,23,.12), 0 16px 28px -14px rgba(13,26,23,.28);
}

/* ---------- chips ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;padding:6px 12px;border-radius:999px;background:var(--paper);border:1px solid var(--line);color:var(--dark)}

.icon-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:28px 0}
@media (max-width:860px){.icon-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.icon-grid{grid-template-columns:repeat(2,1fr)}}
.icon-chip{display:flex;align-items:center;gap:10px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 14px;font-size:13.5px;font-weight:700;color:var(--ink)}
.icon-chip img{border-radius:6px;flex-shrink:0;width:28px;height:28px}

/* Used by both the home page and the product pages, so it must live here - it previously
   sat only in hub.css, which the home page never loads. */
.product-icon-badge{
  width:84px;height:84px;border-radius:var(--radius-sm);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--white);margin-bottom:20px;
}
.product-icon-badge img{width:52px;height:52px;border-radius:var(--radius-sm)}

/* A quiet visual cue that a section is "Zoho territory" - one subtle tint from the official
   palette, not a rainbow treatment. Used sparingly (integrations, product-catalog areas). */
/* background-IMAGE only, never the `background` shorthand: the shorthand also resets
   background-color, which wiped the alternating base colour and forced these sections to be
   excluded from the alternation entirely - that left four consecutive paper-coloured
   sections after "עולם המוצרים". As an image layer the tint now sits on top of whatever
   base colour the alternation assigns. */
.zoho-zone{background-image:linear-gradient(180deg,rgba(34,109,180,.05),rgba(34,109,180,0) 140px)}

/* ---------- animated Zoho accent band ----------
   Every 4-colour strip on the site drifts slowly sideways. Deliberately long (18s) and
   linear so it reads as ambient motion, never as a spinner demanding attention. Note this is
   the one continuously looping animation on the site - spec §18 discourages endless motion,
   so it is confined to a 4px rule, and prefers-reduced-motion freezes it completely. */
@media (prefers-reduced-motion: no-preference){
  .hero::before,
  .meet-bridge::before,
  .meet-zoho::before,
  .zoho-one-feature::before,
  .product-hero-one::before{
    background:var(--zoho-band);
    background-size:200% 100%;
    animation:zohoDrift 18s linear infinite;
  }
}
@keyframes zohoDrift{from{background-position:0 0}to{background-position:-200% 0}}

/* Site rule: a link that is a call to action must LOOK clickable. Plain coloured text like
   "לעמוד המלא" did not read as a control, so .deep-link is now a real outlined button. */
.deep-link{
  display:inline-flex;align-items:center;justify-content:center;
  align-self:flex-start;margin-top:auto;
  min-height:42px;padding:0 20px;
  border:2px solid var(--teal);border-radius:var(--radius);
  font-weight:800;font-size:14px;color:var(--teal);background:transparent;
  transition:background .16s ease,color .16s ease;
}
.deep-link:hover{background:var(--teal);color:#fff}
.deep-link:focus-visible{outline:3px solid var(--teal);outline-offset:2px}

/* A citation-style link sitting mid-sentence inside a paragraph. .deep-link's boxed-button
   treatment is correct for a standalone CTA but breaks paragraph flow when embedded in one -
   this is the same "must look clickable" rule applied to running text: colour + underline
   reads as a link inline, a 42px bordered box does not wrap as text at all. */
.inline-link{color:var(--teal);text-decoration:underline;text-underline-offset:2px;font-weight:700}
.inline-link:hover{color:var(--teal-d)}

/* ---------- utility ---------- */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media (max-width:900px){.grid-2,.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

/* A cut top-left corner (clip-path) instead of a plain rounded rectangle - a crisp
   geometric notch reads as "designed," not a stock rounded card, and costs nothing
   in accessibility or performance the way a gradient/blob treatment would. */
.cta-strip{
  background:var(--teal-d);color:var(--white);border-radius:4px 16px 16px 16px;padding:56px;
  display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
  clip-path:polygon(40px 0,100% 0,100% 100%,0 100%,0 40px);
  position:relative;
}
.cta-strip::before{content:"";position:absolute;inset-inline-start:0;top:0;width:40px;height:40px;background:var(--gold);clip-path:polygon(0 0,100% 0,0 100%)}
.cta-strip h2{color:var(--white)}
.cta-strip .lede{color:#cfe4e1}
@media (max-width:640px){.cta-strip{padding:32px;flex-direction:column;align-items:flex-start}}

/* Every top-level page section owns its own header clearance (padding-top: calc(var(--hh) + Npx)).
   Do not also add a generic #site-main>*:first-child rule here - two mechanisms fighting over the
   same padding-top by specificity is exactly the bug that caused inconsistent spacing before. */
/* Breadcrumbs sit between the (now dark) fixed header and the (now dark) page-hero that
   follows them - sharing that dark background keeps the "cap" reading as one continuous
   band instead of a stray light stripe interrupting it. */
.breadcrumbs-bar{background:var(--darker)}
.breadcrumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13.5px;color:var(--on-dark-muted);padding-top:calc(var(--hh) + 28px);padding-bottom:18px;margin-bottom:0}
.breadcrumbs a,.breadcrumbs span[aria-current]{display:inline-flex;align-items:center;min-height:24px;padding-block:2px}
.breadcrumbs a:hover{color:#fff}
.breadcrumbs span[aria-current]{color:var(--on-dark-ink)}

/* ---------- section rhythm ----------
   Every plain .section was the same --paper background one after another - the single
   biggest source of "monotonous." Alternating white/paper automatically (by DOM position,
   not per-page classing) breaks that up on every page for free, and sections that opt into
   an explicit look (zoho-zone, dark blocks, product-hero) override it as normal. */
/* nth-of-type(odd/even) counts ALL <section> siblings regardless of class - since some
   sections (.hero, .zoho-one-feature) are <section> tags without the .section class, that
   throws off the parity. nth-child(of S) counts only matches of S itself, which is what
   "alternate every .section" actually needs.
   :not(.health-check):not(.zoho-zone) matters here: the #site-main> id-scoped selector
   is MORE specific than a bare .health-check{background:var(--dark)} rule, so without the
   exclusion this alternation would win the cascade and silently overwrite explicit section
   backgrounds instead of only filling in the plain ones. Longhand background-color (not the
   `background` shorthand) so it never touches the background-image layer either. */
#site-main>:nth-child(odd of .section):not(.health-check){background-color:var(--white)}
#site-main>:nth-child(even of .section):not(.health-check){background-color:var(--paper)}

/* ---------- numbered index marks ----------
   A plain bullet list of scenarios/points reads flat. A large faint numeral behind each
   item gives the same content real visual rhythm without adding new markup per page. */
.scenario-list,.decision-list{counter-reset:idx}
.scenario-list li,.decision-list li{counter-increment:idx;position:relative;padding-inline-start:44px!important}
.scenario-list li::before,.decision-list li::before{
  content:counter(idx,decimal-leading-zero);position:absolute;inset-inline-start:12px;top:50%;
  transform:translateY(-50%);font-size:13px;font-weight:800;color:var(--teal);
  background:none;width:auto;height:auto;border-radius:0;
}
.decision-list li::before{content:counter(idx,decimal-leading-zero)}