/* ---------- hero: the blueprint canvas ----------
   Concept: Alevectis' craft is אפיון (specification/blueprint), so the dark canvas carries a
   real drafting grid and registration marks, and the Zoho products are the vivid, colored
   components drafted onto it. Original geometry per spec §18 - no stock art, no AI imagery,
   no gradient blobs. */
.hero{
  position:relative;
  padding:calc(var(--hh) + 64px) 0 80px;
  background:
    linear-gradient(rgba(255,255,255,.032) 1px,transparent 1px) 0 0/36px 36px,
    linear-gradient(90deg,rgba(255,255,255,.032) 1px,transparent 1px) 0 0/36px 36px,
    var(--darker);
  overflow:hidden;
}
.hero::before{content:"";position:absolute;inset-inline:0;top:0;height:4px;background:linear-gradient(90deg,#E42527,#089949,#226DB4,#F9B21D);z-index:2}
.hero h1{color:#fff;font-size:clamp(32px,4.3vw,54px);line-height:1.08;text-wrap:balance}
.hero .lede{color:var(--on-dark-muted);font-size:18px;max-width:52ch}
/* .btn-ghost's default text color (var(--ink)) is the literal same hex as this section's
   own background (var(--darker)) - on the light pages it was designed for that's a visible
   dark-on-light button, but here it made the button text genuinely invisible. */
.hero .btn-ghost{border-color:rgba(255,255,255,.35);color:#fff}
.hero .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08);color:#fff}
.hero-grid{display:grid;grid-template-columns:1fr 1.02fr;gap:56px;align-items:center}
.hero-cta{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}
.hero-video-link{display:inline-flex;align-items:center;gap:10px;margin-top:22px;color:var(--on-dark-muted);font-size:14.5px}
.hero-video-link:hover{color:#fff}
.hero-video-play{position:relative;width:26px;height:26px;border-radius:50%;border:1.5px solid currentColor;flex:none}
.hero-video-play::before{
  /* Play triangle is a fixed media-control glyph, not text-flow direction - physical
     border-left on purpose, same reasoning as zoho-in-a-minute's original card icon. */
  content:"";position:absolute;inset:0;margin:auto;width:0;height:0;
  border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid currentColor;
  left:10px;
}

/* The diagram sits inside an explicit drafting frame with corner registration marks and a
   caption - which also satisfies spec §23's requirement that an illustrative scenario be
   labelled as an example rather than passed off as a real customer case. */
.hero-visual{position:relative;padding:22px;border:1px solid rgba(255,255,255,.14);border-radius:var(--radius)}
.hero-visual::before,.hero-visual::after{content:"";position:absolute;width:12px;height:12px;border:2px solid var(--gold);opacity:.85}
.hero-visual::before{top:-1px;inset-inline-start:-1px;border-inline-end:0;border-bottom:0}
.hero-visual::after{bottom:-1px;inset-inline-end:-1px;border-inline-start:0;border-top:0}
.hero-visual svg{width:100%;height:auto;display:block}

/* ---------- hero diagram: the "short film" ----------
   The map draws itself once on load - process bar, then the connectors, then each Zoho
   product in sequence, then Flow closing the loop. This is the animated illustration that
   stands in for a video: original artwork, no footage or permissions needed, and it stops.
   Spec §18 forbids infinite animation, so nothing loops forever (the junction pulse runs a
   fixed 3 times) and the whole thing is skipped entirely under prefers-reduced-motion -
   every rule that hides an element lives inside the no-preference query, so with reduced
   motion on, the finished diagram simply renders statically. */
@media (prefers-reduced-motion: no-preference){
  .hero-visual .an{opacity:0;animation:heroRise .55s cubic-bezier(.2,.7,.3,1) forwards}
  .hero-visual .an-bar{animation-delay:.10s}
  .hero-visual .an-dots{animation-delay:.50s}
  .hero-visual .an-c1{animation-delay:.60s}
  .hero-visual .an-c2{animation-delay:.73s}
  .hero-visual .an-c3{animation-delay:.86s}
  .hero-visual .an-flow{animation-delay:1.30s}
  .hero-visual .an-line{stroke-dasharray:1;stroke-dashoffset:1;animation:heroDraw .5s ease forwards .30s}
  .hero-visual .an-line2{stroke-dasharray:1;stroke-dashoffset:1;animation:heroDraw .5s ease forwards 1.05s}
  .hero-visual .an-pulse{animation:heroPulse 1.5s ease-in-out 1.8s 3}
}
@keyframes heroRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes heroDraw{to{stroke-dashoffset:0}}
@keyframes heroPulse{0%,100%{opacity:.4}50%{opacity:1}}
.hero-cap{
  position:absolute;top:-11px;inset-inline-end:18px;background:var(--darker);
  padding:0 10px;font-size:11.5px;font-weight:700;letter-spacing:.06em;
  color:var(--on-dark-muted);text-transform:uppercase;
}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .hero-visual{order:-1;max-width:440px;margin:0 auto;width:100%}
}

/* ---------- meet Zoho / meet Alevectis ----------
   Two panels, deliberately unequal in weight: Zoho is the light informational panel, Alevectis
   is the solid dark one that anchors the row. That keeps Alevectis the dominant brand on its
   own site (spec §5.1, §18) even though the section introduces Zoho first. */
/* row-gap 0 + squared bottom corners: the statement block below docks flush against the two
   panels so the three read as one unit rather than a card and a separate banner. */
.meet-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;row-gap:0;margin-top:36px;align-items:stretch}
@media (max-width:860px){.meet-grid{grid-template-columns:1fr;row-gap:16px}}
.meet-card{display:flex;flex-direction:column;gap:22px;border-radius:var(--radius) var(--radius) 0 0;padding:38px 36px}
@media (max-width:860px){.meet-card{border-radius:var(--radius)}}
.meet-card p{font-size:15.5px;line-height:1.75}
.meet-head{display:flex;align-items:center;gap:12px;min-height:56px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.meet-alevectis .meet-head{border-bottom-color:rgba(255,255,255,.14)}
.meet-head h3{font-size:26px}
.meet-logo{height:34px;width:auto}
.meet-zoho .meet-logo{height:40px}

.meet-zoho{position:relative;background:var(--white);border:1px solid var(--line);overflow:hidden}
.meet-zoho::before{content:"";position:absolute;inset-inline:0;top:0;height:4px;background:linear-gradient(90deg,#E42527,#089949,#226DB4,#F9B21D)}
.meet-zoho p{color:var(--muted)}

.meet-alevectis{background:var(--dark);color:#fff}
.meet-alevectis p{color:#c8d2ce}
.meet-alevectis .meet-facts li{color:var(--on-dark-ink)}
.meet-alevectis .meet-facts li::before{background:var(--gold)}
.meet-alevectis .deep-link{color:#8fd8cf}

.meet-facts{display:flex;flex-direction:column;gap:14px;font-size:14.5px;line-height:1.5;margin-top:auto;padding-top:4px}
.meet-facts li{position:relative;padding-inline-start:20px}
.meet-facts li::before{content:"";position:absolute;inset-inline-start:0;top:8px;width:6px;height:6px;border-radius:2px;background:var(--teal)}
.meet-card .deep-link{margin-top:4px}

/* The division-of-roles line is the single most important sentence in this section, so it
   gets its own dark statement block with the two-brand lockup above it. Alevectis sits in the
   lead position and the marks are separated by a rule - adjacent, never merged into one
   combined logo, per Zoho's co-branding rules. */
/* Docked to the panels above (no top margin, square top corners). Logos dropped - both marks
   already sit in the two panels directly above, so repeating them here was redundant. */
.meet-bridge{
  margin-top:0;padding:48px 32px;text-align:center;border-radius:0 0 var(--radius) var(--radius);
  background:var(--darker);position:relative;overflow:hidden;
}
@media (max-width:860px){.meet-bridge{margin-top:16px;border-radius:var(--radius)}}
/* Diagnosis 2026-09-16: at narrow widths the long "ללא התחייבות" phrasing on this one button
   (kept intentionally longer than the sitewide short CTA copy) overflowed .meet-bridge's own
   overflow:hidden edge instead of wrapping, since .btn sets white-space:nowrap sitewide.
   Scoped to this button only - wrapping the sitewide button rule would risk breaking single-line
   buttons everywhere else that rely on nowrap. */
@media (max-width:480px){.meet-bridge .btn{white-space:normal;text-align:center;max-width:100%}}
.meet-bridge::before{content:"";position:absolute;inset-inline:0;top:0;height:4px;background:var(--zoho-band);background-size:200% 100%}
.bridge-line{font-family:var(--font-display);font-size:clamp(20px,2.5vw,29px);line-height:1.45;font-weight:800;color:#fff;max-width:34ch;margin:0 auto 30px}
.bridge-line strong{color:var(--gold);font-weight:800}

/* ---------- problem checklist ----------
   Was 6 full-sentence cards in a grid (the same "grid of white boxes" language the domains
   section right below it also used) - now a dense, scannable two-column list. Half the
   words, and it no longer repeats the section right after it. */
/* Two real columns instead of one right-aligned block: at desktop widths the previous
   version left the entire left half of the section visually empty, which read as a broken
   layout rather than as deliberate white space. */
/* Centered column, not a right-hugging two-column split: at desktop width the previous
   layout pinned the heading hard to the right edge and read as misaligned. */
.problem-layout.is-centered{display:block;max-width:860px;margin:0 auto;text-align:center}
.problem-layout.is-centered .lede{margin-inline:auto}
.problem-layout.is-centered .problem-checklist{text-align:right;margin-top:36px;
  display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
@media (max-width:700px){.problem-layout.is-centered .problem-checklist{grid-template-columns:1fr}}
.problem-intro h2{margin-bottom:16px}
.problem-checklist{display:flex;flex-direction:column}
.problem-checklist li{
  display:flex;align-items:center;gap:14px;padding:17px 0;
  border-bottom:1px solid var(--line);font-size:16px;
}
.problem-checklist li:first-child{border-top:1px solid var(--line)}
.pc-mark{
  flex-shrink:0;width:26px;height:26px;border-radius:var(--radius-sm);
  background:#fdeceb;color:#c0272a;font-weight:800;font-size:12px;
  display:flex;align-items:center;justify-content:center;
}
.problem-checklist strong{font-weight:800}

/* ---------- domain tabs ----------
   Replaces an 8-card grid (identical visual language to the problem section right above it)
   with a single-focus tab switcher: one detail panel visible at a time, real interaction
   instead of another static wall of cards back-to-back. */
.domain-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 24px}
.domain-tab{border:1px solid var(--line);background:var(--white);border-radius:999px;padding:10px 18px;font-size:14.5px;font-weight:700;cursor:pointer;font-family:var(--font);color:var(--muted);transition:all .15s ease}
.domain-tab:hover{border-color:var(--teal);color:var(--teal)}
.domain-tab[aria-selected="true"]{background:var(--teal);border-color:var(--teal);color:#fff}
/* [hidden] must be re-asserted: the UA stylesheet's [hidden]{display:none} is a plain
   attribute selector and loses to this rule's display:grid, so every panel rendered at
   once and the tab switcher appeared to do nothing. */
.domain-panel[hidden]{display:none}
.domain-panel{
  display:grid;grid-template-columns:1.4fr 1fr;gap:32px;
  background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);padding:32px;
  box-shadow:0 1px 2px rgba(13,26,23,.04), 0 8px 20px -14px rgba(13,26,23,.25);
}
@media (max-width:700px){.domain-panel{grid-template-columns:1fr;gap:20px}}
.domain-panel h3{margin-bottom:8px}
.domain-panel-side{display:flex;flex-direction:column;gap:16px;justify-content:center;padding-inline-start:32px;border-inline-start:1px solid var(--line)}
@media (max-width:700px){.domain-panel-side{padding-inline-start:0;border-inline-start:none;border-top:1px solid var(--line);padding-top:20px}}
.domain-panel-side .icon-chip{background:var(--paper)}
.domain-problem{color:var(--muted);font-size:15px}
.domain-scen{font-size:14.5px;color:var(--ink);margin-top:12px}
.domain-scen li{position:relative;padding-inline-start:16px;margin-bottom:6px}
.domain-scen li::before{content:"";position:absolute;inset-inline-start:0;top:9px;width:5px;height:5px;border-radius:50%;background:var(--teal)}
.domain-products{display:flex;gap:8px;flex-wrap:wrap}
.domain-products .icon-chip{font-size:12.5px;padding:8px 12px;gap:8px}
.domain-products .icon-chip img{width:24px;height:24px}

/* Zoho One gets its own oversized, full-bleed-feeling section (not the standard
   .section h2+p+grid rhythm every other block uses) - it's the flagship of the
   partnership and asked to read that way, not as one card among equals. */
.zoho-one-feature{padding:110px 0;background:var(--dark);position:relative;overflow:hidden}
.zoho-one-feature::before{content:"";position:absolute;inset-inline:0;top:0;height:5px;background:linear-gradient(90deg,#E42527,#089949,#226DB4,#F9B21D)}
@media (max-width:900px){.zoho-one-feature{padding:72px 0}}
.zoho-one-card{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
@media (max-width:960px){.zoho-one-card{grid-template-columns:1fr;gap:36px}}
.zoho-one-copy h2{color:#fff;font-size:clamp(30px,4.2vw,46px)}
.zoho-one-copy .lede{color:#c8d2ce}
.zoho-one-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.zoho-one-feature .btn-ghost{border-color:#3c534c;color:#fff}
.zoho-one-feature .btn-ghost:hover{border-color:#F9B21D;color:#F9B21D}
.zoho-one-apps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:520px){.zoho-one-apps{grid-template-columns:repeat(2,1fr)}}
.zoho-one-apps .icon-chip{background:#1e3a34;border-color:#2f4a43;color:#e7ede9}
.zoho-one-more{justify-content:center;color:#9db3ac;font-weight:800}
@media (max-width:900px){.zoho-one-grid{grid-template-columns:1fr}}

.chip-cloud{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 28px}

/* ---------- product wall ----------
   Was 15 flat text chips in a grid, which understated the portfolio and read as filler.
   Now the real breadth (69 products) grouped by family: family label pinned to the side,
   tiles flowing beside it, each tile carrying its own official icon so the section is
   genuinely colourful instead of a monochrome list. */
.pw-families{display:flex;flex-direction:column;gap:6px;margin:36px 0 40px}
.pw-family{display:grid;grid-template-columns:210px 1fr;gap:28px;align-items:start;padding:22px 0;border-top:1px solid var(--line)}
.pw-family:last-child{border-bottom:1px solid var(--line)}
@media (max-width:820px){.pw-family{grid-template-columns:1fr;gap:14px}}
.pw-fam{font-size:15px;font-weight:800;color:var(--teal);padding-top:7px;line-height:1.35}
.pw-tiles{display:flex;flex-wrap:wrap;gap:8px}
.pw-tile{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--white);border:1px solid var(--line);border-radius:999px;
  padding:7px 14px 7px 9px;font-size:13px;font-weight:700;color:var(--ink);
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.pw-tile img{width:26px;height:26px;border-radius:5px;flex-shrink:0}
.pw-tile:hover{transform:translateY(-2px);border-color:var(--teal);box-shadow:0 6px 14px -8px rgba(13,26,23,.45)}

/* One-time staggered reveal per family as it scrolls in. Fail-safe by construction: the
   hiding rule only applies once JS has added .reveal-ready, so with JS broken/disabled all
   69 tiles render normally (spec §20 - main content must not depend on JavaScript). Nothing
   loops, and reduced-motion skips the effect entirely. */
@media (prefers-reduced-motion: no-preference){
  .pw-family.reveal-ready .pw-tile{opacity:0;transform:translateY(9px);transition:opacity .38s ease,transform .38s ease,border-color .16s ease,box-shadow .16s ease;transition-delay:calc(var(--i,0) * 26ms)}
  .pw-family.reveal-ready.in .pw-tile{opacity:1;transform:none}
}

.pw-cta{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding-top:8px}
.pw-cta p{font-size:14.5px;color:var(--muted);max-width:52ch}
.btn-lg{min-height:58px;padding:0 38px;font-size:1.05rem}

/* ---------- process steps ----------
   Ported 1:1 from alevectis.co.il (assets/css/home.css .home-steps/.hstep) so the methodology
   block looks the same on both Alevectis sites: 5-up white cards, oversized faded numeral,
   springy lift on hover. Values kept as on the live site (16px radius, .32 numeral opacity,
   -6px hover) rather than snapped to this site's sharper radius token, since matching the
   existing component is the point. --td on the live theme is the same #0b4f4a as our
   --teal-d, so the accent carries across unchanged. */
.home-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;max-width:1180px;margin:36px auto 0}
.hstep{
  position:relative;padding:28px 22px;background:var(--white);
  border:1px solid var(--line);border-radius:16px;
  box-shadow:0 4px 18px rgba(13,26,23,.05);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s,border-color .3s;
}
.hstep:hover{transform:translateY(-6px);box-shadow:0 20px 48px rgba(13,26,23,.11);border-color:var(--teal-d)}
.hstep-n{display:inline-block;font-size:1.6rem;font-weight:800;color:var(--teal-d);opacity:.32;margin-bottom:12px;letter-spacing:.02em;font-family:var(--font-display)}
.hstep h3{margin:0 0 8px;font-size:1.08rem;font-weight:800;color:var(--ink);line-height:1.25}
.hstep p{margin:0;font-size:.9rem;line-height:1.5;color:var(--muted)}
@media (max-width:1024px){.home-steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.home-steps{grid-template-columns:1fr}}
.sec-cta{display:flex;justify-content:center;margin-top:32px}

/* ---------- integrations: bridge cards ----------
   Each example is drawn as an actual bridge - external system on one side, the real Zoho
   product mark on the other, joined by a dashed connector - instead of a heading and a
   paragraph crammed together in a plain box. */
.bridge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:36px 0 40px}
@media (max-width:900px){.bridge-grid{grid-template-columns:1fr}}
.bridge{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;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,border-color .18s ease;
}
.bridge:hover{transform:translateY(-3px);border-color:var(--teal);box-shadow:0 16px 30px -16px rgba(13,26,23,.3)}
/* Vertical bridge: system on top, Zoho product below, joined by an explicitly labelled
   connector. The earlier horizontal version squeezed both sides plus a tiny arrow into one
   row and the relationship did not read at all. */
.bridge{display:flex;flex-direction:column;align-items:center;text-align:center}
.bridge-side{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}
.bridge-ill{
  width:74px;height:74px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:var(--paper);border:1px solid var(--line);
}
.bridge-ill svg{width:46px;height:46px}
.bridge-ill img{width:44px;height:44px;border-radius:9px}
.bridge-name{font-size:14.5px;font-weight:800;color:var(--ink)}
.bridge-join{position:relative;width:100%;height:52px;display:flex;align-items:center;justify-content:center}
.bridge-join::before{
  content:"";position:absolute;top:0;bottom:0;inset-inline-start:50%;width:2px;
  background:repeating-linear-gradient(180deg,var(--teal) 0 5px,transparent 5px 10px);
}
.bridge-join-lbl{
  position:relative;background:var(--white);padding:3px 11px;border:1px solid var(--teal);
  border-radius:999px;font-size:11.5px;font-weight:800;color:var(--teal);white-space:nowrap;
}
.bridge p{font-size:14.5px;color:var(--muted);line-height:1.6;margin-top:20px;padding-top:18px;border-top:1px solid var(--line);width:100%}

/* ---------- why Alevectis ---------- */
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:36px 0 8px}
@media (max-width:800px){.why-grid{grid-template-columns:1fr}}
.why-card{
  background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);padding:30px 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;
}
.why-card:hover{transform:translateY(-3px);box-shadow:0 16px 30px -16px rgba(13,26,23,.3)}
.why-n{display:block;font-family:var(--font-display);font-size:1.6rem;font-weight:800;color:var(--teal-d);opacity:.3;margin-bottom:12px}
.why-card h3{font-size:1.08rem;margin-bottom:9px}
.why-card p{font-size:14.5px;color:var(--muted);line-height:1.6}

/* "these are only a few examples" made explicit, with the rest of the systems named */
.more-systems{border-top:1px solid var(--line);padding-top:28px;text-align:center}
.more-systems-lbl{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:16px}
.more-systems-list{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-bottom:28px}

/* ---------- health check ---------- */
.health-check{background:var(--dark)}
.hc-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
@media (max-width:900px){.hc-grid{grid-template-columns:1fr;gap:32px}}
.health-check h2{color:#fff}
.health-check .lede{color:#c8d2ce;font-size:17px}
.hc-copy .lede + .lede{margin-top:14px}
.hc-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.health-check .btn-ghost{border-color:rgba(255,255,255,.35);color:#fff}
.health-check .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.hc-panel{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);padding:30px}
.hc-panel h3{color:#fff;font-size:19px;margin-bottom:20px}
.hc-list{display:flex;flex-direction:column;gap:13px;font-size:14.5px;color:var(--on-dark-ink);line-height:1.5}
.hc-list li{position:relative;padding-inline-start:26px}
/* physical border-left/-bottom, not logical: border-inline-start flips to the right edge in
   RTL and the glyph came out as an arrow instead of a tick. The shape itself must not mirror. */
.hc-list li::before{
  content:"";position:absolute;inset-inline-start:2px;top:4px;width:13px;height:7px;
  border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg);
}
.hc-out{margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);font-size:13.5px;color:var(--on-dark-muted);line-height:1.6}