/* ==========================================================================
   NITARTI — Inner / solution page styles (shared)
   ========================================================================== */

/* ---------- Solution hero ---------- */
.sol-hero { position: relative; background: var(--navy-800); overflow: hidden; color: #cdd9e8; }
.sol-hero::before { content:""; position:absolute; inset:0; background: radial-gradient(120% 140% at 85% 0%, rgba(7,180,209,.22), transparent 55%); }
.sol-hero .container { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: clamp(30px,5vw,64px); padding-block: clamp(54px,7vw,86px); }
.sol-hero .breadcrumb { display: flex; gap: 8px; align-items: center; font-size: 14px; color: #8ba0bb; margin-bottom: 20px; }
.sol-hero .breadcrumb a:hover { color: #fff; }
.sol-hero .breadcrumb svg { width: 14px; height: 14px; opacity: .6; }
.sol-hero h1 { color: #fff; font-size: clamp(34px,4.6vw,56px); }
.sol-hero .sub { font-size: clamp(18px,1.8vw,23px); color: #b9c8dd; max-width: 30ch; margin-bottom: 28px; }
.sol-hero .actions { display: flex; gap: 14px; flex-wrap: wrap; }
.sol-hero .hero-visual { position: relative; }
.sol-hero .hero-visual image-slot, .sol-hero .hero-visual .ph { width: 100%; aspect-ratio: 4/3.1; border-radius: var(--r-lg); }
.sol-hero .hero-visual .float-card { position:absolute; }

/* ---------- Solution hero — variant with a single full-bleed photo ----------
   Same look as the home-page carousel slides, minus the carousel: one photo
   behind the whole hero + a dark scrim so the copy stays readable.
   Usage: <section class="sol-hero has-photo"> with an
          <img class="hero-bg" src="images/..."> and a <div class="hero-scrim">.
   To change the picture, only the img's src needs editing. */
.sol-hero.has-photo { background: var(--navy-900); }
.sol-hero.has-photo::before { display: none; }
.sol-hero.has-photo .hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: left center;
  z-index: 0; pointer-events: none;
}
/* Many closely-spaced stops instead of three: the browser interpolates each
   short segment separately, so the ramp reads as a smooth wash with no
   visible band where the darkening starts. */
.sol-hero.has-photo .hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to left,
    rgba(8,17,31,.94) 0%,
    rgba(8,17,31,.92) 26%,
    rgba(8,17,31,.86) 36%,
    rgba(8,17,31,.74) 44%,
    rgba(8,17,31,.56) 52%,
    rgba(8,17,31,.38) 60%,
    rgba(8,17,31,.22) 68%,
    rgba(8,17,31,.1) 78%,
    rgba(8,17,31,.03) 88%,
    rgba(8,17,31,0) 100%);
}

/* ---------- …and `photo-fit` on top of it: picture across the FULL width ----
   For a screenshot / UI capture rather than a photo. The picture spans the
   whole hero and is centred, so the crop is shared between top and bottom
   instead of eating one side. The taller hero below keeps that crop small —
   the picture's own ratio (~1.4:1) is what dictates how much is lost, so
   don't shorten .container without re-checking what falls outside. */
.sol-hero.has-photo.photo-fit .hero-bg { object-position: center; }
/* No clear half to protect any more — the copy now sits over the picture, so
   the wash never fully reaches zero: it eases from a readable dark on the
   copy side down to a light veil that still lets the dashboard read. */
.sol-hero.has-photo.photo-fit .hero-scrim {
  background: linear-gradient(to left,
    rgba(8,17,31,.96) 0%,
    rgba(8,17,31,.95) 22%,
    rgba(8,17,31,.92) 31%,
    rgba(8,17,31,.85) 40%,
    rgba(8,17,31,.72) 49%,
    rgba(8,17,31,.58) 58%,
    rgba(8,17,31,.45) 67%,
    rgba(8,17,31,.36) 77%,
    rgba(8,17,31,.3) 89%,
    rgba(8,17,31,.28) 100%);
}
.sol-hero.has-photo .container { z-index: 2; min-height: clamp(400px, 46vw, 540px); }
.sol-hero.has-photo.photo-fit .container { min-height: clamp(460px, 50vw, 700px); }
/* The visual column keeps no image of its own — it only anchors the floating
   status chip over the photo. */
.sol-hero.has-photo .hero-visual { align-self: stretch; }
.sol-hero.has-photo .hero-visual .float-card { inset-block-end: 8px; inset-inline: 0; width: fit-content; margin-inline: auto; }

/* ---------- In-page anchor nav ---------- */
.anchornav { position: sticky; top: var(--header-h); z-index: 40; background: rgba(255,255,255,.95); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.anchornav .container { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.anchornav .container::-webkit-scrollbar { display: none; }
.anchornav a { white-space: nowrap; padding: 18px 16px; font-weight: 600; font-size: 15.5px; color: var(--ink-500); border-bottom: 3px solid transparent; transition: .15s; }
.anchornav a:hover { color: var(--navy-800); }
.anchornav a.active { color: var(--teal-600); border-color: var(--teal-500); }

/* ---------- Generic two-col ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,5vw,64px); align-items: center; }
.split.rev { direction: ltr; }
.split.rev > * { direction: rtl; }
.split .media image-slot, .split .media .ph { width: 100%; aspect-ratio: 4/3; border-radius: var(--r-lg); }
.split .copy h2 { font-size: clamp(26px,3.4vw,40px); }
.split .copy p { color: var(--ink-500); font-size: 17px; }

/* ---------- Tabs ---------- */
/* width:fit-content + auto side margins keeps the pill centred on the page */
.tabbar { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 auto 40px; background: var(--paper); padding: 7px; border-radius: 999px; width: fit-content; max-width: 100%; justify-content: center; }
.tabbar [data-tab] {
  border: none; background: none; cursor: pointer; font: inherit; font-weight: 700; font-size: 16px;
  color: var(--ink-500); padding: 12px 24px; border-radius: 999px; transition: .18s; display:inline-flex; align-items:center; gap:9px;
}
.tabbar [data-tab]:hover { color: var(--navy-800); }
.tabbar [data-tab].active { background: #fff; color: var(--navy-800); box-shadow: var(--shadow-sm); }
.tabbar [data-tab] .tn { width: 22px; height: 22px; border-radius: 6px; background: var(--teal-50); color: var(--teal-600); display: grid; place-items: center; font-size: 12px; font-family: var(--font-mono); }
[data-panel] { display: none; }
[data-panel].active { display: block; animation: fadeUp .5s ease; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- Benefit cards ---------- */
.benefit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 22px; }
.benefit { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; transition: .2s; }
.benefit:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--line-strong); }
.benefit .bnum { font-family: var(--font-mono); color: var(--teal-600); font-weight: 600; font-size: 14px; }
.benefit .bic { width: 50px; height: 50px; border-radius: 13px; background: var(--navy-800); color: var(--teal-300); display: grid; place-items: center; margin: 12px 0 16px; }
.benefit .bic svg { width: 24px; height: 24px; }
.benefit h3 { font-size: 20px; margin-bottom: 8px; }
.benefit p { color: var(--ink-500); font-size: 15px; margin: 0; }

/* ---------- Accordion / expandable ---------- */
.acc { display: grid; gap: 14px; }
.acc-item { border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.acc-item.open { border-color: var(--teal-300); box-shadow: var(--shadow-sm); }
.acc-head { width: 100%; display: flex; align-items: center; gap: 16px; padding: 22px 24px; background: none; border: none; cursor: pointer; font: inherit; text-align: start; }
.acc-head .ah-ic { width: 44px; height: 44px; border-radius: 12px; background: var(--teal-50); color: var(--teal-600); display: grid; place-items: center; flex: 0 0 auto; }
.acc-head .ah-ic svg { width: 22px; height: 22px; }
.acc-head h3 { font-size: 19px; margin: 0; flex: 1; color: var(--navy-800); }
.acc-head .ah-chev { width: 24px; height: 24px; color: var(--ink-400); transition: transform .25s; flex: 0 0 auto; }
.acc-item.open .ah-chev { transform: rotate(180deg); }
.acc-body { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.acc-body-inner { padding: 4px 24px 26px 84px; color: var(--ink-500); }
.spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 26px; margin: 0; }
.spec-grid li { display: flex; gap: 9px; align-items: flex-start; font-size: 15px; padding: 8px 0; border-top: 1px solid var(--line); }
.spec-grid li:nth-child(-n+2) { border-top: none; }
.spec-grid b { color: var(--navy-800); font-weight: 600; }
.spec-grid .sk { color: var(--teal-600); font-family: var(--font-mono); font-size: 13px; flex: 0 0 auto; margin-top: 2px; }

/* ---------- Process / flow steps (vertical) ---------- */
.process { display: grid; gap: 0; counter-reset: step; }
.process .pstep { display: grid; grid-template-columns: auto 1fr; gap: 22px; position: relative; padding-bottom: 30px; }
.process .pstep::before { counter-increment: step; content: counter(step,decimal-leading-zero); grid-row: 1; width: 50px; height: 50px; border-radius: 50%; background: var(--navy-800); color: var(--teal-300); display: grid; place-items: center; font-family: var(--font-mono); font-weight: 600; z-index: 2; }
.process .pstep::after { content:""; position: absolute; inset-inline-start: 24px; top: 50px; bottom: 0; width: 2px; background: var(--line-strong); }
.process .pstep:last-child { padding-bottom: 0; }
.process .pstep:last-child::after { display: none; }
.process .pstep h3 { font-size: 19px; margin: 8px 0 6px; }
.process .pstep p { color: var(--ink-500); font-size: 15.5px; margin: 0; }

/* ---------- Spec table ---------- */
.spec-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); }
.spec-table th, .spec-table td { text-align: start; padding: 16px 20px; border-bottom: 1px solid var(--line); font-size: 15.5px; }
.spec-table thead th { background: var(--navy-800); color: #fff; font-weight: 600; }
.spec-table tbody tr:last-child td { border-bottom: none; }
.spec-table tbody tr:hover { background: var(--paper); }
.spec-table td:first-child { font-weight: 700; color: var(--navy-800); white-space: nowrap; }

/* ---------- Closing CTA ---------- */
.closing { background: var(--navy-800); border-radius: var(--r-xl); padding: clamp(36px,5vw,60px); text-align: center; position: relative; overflow: hidden; }
.closing::before { content:""; position:absolute; inset:0; background: radial-gradient(60% 100% at 50% 0%, rgba(0,171,85,.25), transparent 60%); }
.closing > * { position: relative; }
.closing h2 { color: #fff; font-size: clamp(26px,3.4vw,40px); max-width: 22ch; margin-inline: auto; }
.closing p { color: #b9c8dd; max-width: 56ch; margin: 12px auto 28px; font-size: 18px; }
.closing .actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- Page intro head (inner) ---------- */
.lede { font-size: clamp(18px,1.9vw,22px); color: var(--ink-500); max-width: 62ch; line-height: 1.55; }

/* ---------- Intro paragraph with no media column beside it ----------
   .lede is capped at 62ch for a two-column split; on its own it should use
   the full band width instead of leaving half the row empty. */
.intro-wide .lede, .intro-wide .copy { max-width: none; }

/* ---------- A real image in a .split media column ---------- */
.media-shot { margin: 0; }
.media-shot img {
  display: block; width: 100%; height: auto;
  border-radius: var(--r-lg); box-shadow: var(--shadow-md);
}
/* A portrait image can't fill a wide column without being upscaled into mush,
   so it gets capped near its own pixel width and centred instead. */
.media-shot--tall { display: flex; justify-content: center; }
.media-shot--tall img { width: auto; max-width: min(100%, 460px); }

/* ---------- Product screenshot inside a tab panel ----------
   Framed like a device rather than dropped in raw: the file is a dark UI
   capture, so a navy mat + rounded corners makes it read as a screen.
   max-width stays under the file's own pixel width (1672px) so it is only
   ever scaled down, and inside the 1240px container so it still reads as a
   figure rather than a full-bleed band. */
.doc-shot {
  max-width: 1040px;
  margin: clamp(32px, 4vw, 52px) auto 0;
  padding: clamp(8px, 1.2vw, 14px);
  background: var(--navy-800);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
.doc-shot img { display: block; width: 100%; height: auto; border-radius: 12px; }
.doc-shot figcaption {
  margin: 12px 6px 4px; text-align: center;
  font-size: 13px; line-height: 1.5; color: #9fb2c8;
}

/* ---------- Centred risk/solution pair (cooling · "למה צריך?") ----------
   No media column here, so the whole block is centred instead of being a
   two-column split. The tighter padding-block is deliberate: it shrinks the
   grey `bg-paper` band this section paints across the page. */
.why-band { padding-block: clamp(38px, 4.6vw, 64px); }
/* The head stays where it always was — start-aligned on the side; only the
   card pair below it is centred. */
.why-band .section-head { max-width: 760px; margin-bottom: clamp(24px, 3vw, 40px); }
.why-pair {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 2.4vw, 26px);
  max-width: 920px; margin-inline: auto;
}
.why-pair .benefit { padding: clamp(22px, 2.4vw, 28px); }
.why-pair .benefit h3 { font-size: 19px; margin-top: 6px; }
@media (max-width: 760px) { .why-pair { grid-template-columns: 1fr; } }

@media (max-width: 900px) {
  .sol-hero .container { grid-template-columns: 1fr; }
  .sol-hero .hero-visual { order: -1; max-width: 520px; }
  /* Photo variant: the copy sits on top of the photo, so darken the whole
     frame instead of one side, and drop the floating chip. */
  .sol-hero.has-photo .hero-visual { display: none; }
  .sol-hero.has-photo .hero-scrim,
  .sol-hero.has-photo.photo-fit .hero-scrim { background: linear-gradient(to bottom, rgba(8,17,31,.84), rgba(8,17,31,.93)); }
  .sol-hero.has-photo .container,
  .sol-hero.has-photo.photo-fit .container { min-height: 0; }
  .split, .split.rev { grid-template-columns: 1fr; direction: rtl; }
  .split .media { order: -1; }
  .acc-body-inner { padding-inline: 24px; }
  .spec-grid { grid-template-columns: 1fr; }
}