/* ============================================================
   services — refactored component styles
   Rename + reorganize + dedupe only. Values byte-identical.
   ============================================================ */

/* Shared with the other views and defined once in components.css:
   .services-*-container (centred column), .services-breadcrumb*,
   .services-*-eyebrow, .services-*-cta-primary/-secondary, the hero glow +
   grid overlay, and every :hover state. Only the deltas live below. */

/* --- Hero --- */
.services-hero{ position:relative;padding:clamp(9rem,15vh,11.5rem) 0 clamp(3.5rem,7vh,6rem);overflow:hidden; }
.services-hero-glow{ top:-12%;left:-6%;width:56vw;height:56vw;max-width:760px;max-height:760px;background:radial-gradient(circle,var(--accent),transparent 62%);opacity:.13;filter:blur(24px); }
.services-hero-grid-overlay{ -webkit-mask-image:radial-gradient(ellipse 80% 60% at 60% 25%,#000,transparent 75%);mask-image:radial-gradient(ellipse 80% 60% at 60% 25%,#000,transparent 75%); }
.services-hero-container{ max-width:1300px;position:relative; }
.services-hero-layout{ display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,4rem);align-items:center; }
.services-hero-title{ margin:0;font-size:clamp(2.5rem,6vw,5rem);line-height:1.03;letter-spacing:-.02em;font-weight:800; }
.services-hero-title-sub{ display:block;font-weight:300;color:#B8BECC; }
.services-block{ display:block; }
.services-hero-title-accent{ color:var(--accent); }
.services-hero-lead{ margin:clamp(1.5rem,2.6vw,2rem) 0 0;max-width:46ch;font-size:clamp(1.1rem,1.5vw,1.3rem);line-height:1.7;color:#9BA3B4;font-weight:400; }
.services-hero-cta-row{ display:flex;flex-wrap:wrap;gap:.9rem;margin-top:clamp(1.9rem,3vw,2.6rem); }
.services-hero-visual{ display:none;position:relative;min-height:clamp(360px,42vw,500px); }
.services-hero-orbit{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:92%;aspect-ratio:1;border-radius:50%;background:conic-gradient(from 0deg,transparent,rgba(47,212,190,.2),transparent 40%,rgba(91,141,239,.16),transparent 70%,rgba(123,92,255,.16),transparent);filter:blur(16px);animation:strixSpin 26s linear infinite;z-index:0; }
.services-hero-orbit-glow{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(47,212,190,.16),transparent 68%);z-index:0; }
.services-hero-orbit-core{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:118px;height:118px;border-radius:50%;background:linear-gradient(160deg,#0E1116,#0A0C10);border:1px solid rgba(47,212,190,.4);display:flex;align-items:center;justify-content:center;box-shadow:0 0 40px -8px rgba(47,212,190,.4);z-index:2;color:#ECEFF4; }

/* Hero chips — shell in components.css; each one's berth and drift are here. */
.services-chip-1{ top:8%;right:14%;animation:svcFloat 9s ease-in-out infinite; }
.services-chip-2{ top:24%;left:4%;animation:svcFloat 11s ease-in-out .6s infinite; }
.services-chip-3{ bottom:20%;right:2%;animation:svcFloat 10s ease-in-out 1.2s infinite; }
.services-chip-4{ bottom:8%;left:16%;animation:svcFloat 8.5s ease-in-out .3s infinite; }
.services-chip-5{ top:52%;right:-2%;animation:svcFloat 12s ease-in-out .9s infinite; }
.services-chip-6{ top:46%;left:-4%;animation:svcFloat 10.5s ease-in-out 1.5s infinite; }

/* --- Service marquee --- */
.services-marquee{ border-block:1px solid rgba(255,255,255,.07);padding:clamp(1.3rem,2.4vw,1.9rem) 0;overflow:hidden;background:#0A0C10; }
.services-marquee-track{ display:flex;width:max-content;animation:strixMarquee 46s linear infinite; }
.services-marquee-row{ display:flex;align-items:center;gap:clamp(1.6rem,3vw,3rem);padding-inline:clamp(1rem,2vw,1.5rem); }
.services-marquee-word{ font-size:clamp(1.05rem,1.6vw,1.4rem);font-weight:500;color:#C3C9D4;white-space:nowrap; }
.services-marquee-dot{ color:var(--accent);font-size:.7rem; }

/* --- Pillars --- */
.services-pillars{ padding:clamp(5rem,12vh,8.5rem) 0;position:relative; }
.services-pillars-container{ max-width:1300px; }
.services-pillars-header{ margin-bottom:clamp(2.5rem,5vw,4rem);max-width:64ch; }
.services-pillars-title{ margin:0;font-size:clamp(2rem,4.3vw,3.5rem);line-height:1.08;letter-spacing:-.02em;font-weight:700; }
.services-title-light{ color:#7C8494;font-weight:300; }
.services-section-lead{ margin:1.3rem 0 0;font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.7;color:#9BA3B4; }
/* The pillar split used to get its grid from an inline style="" in
   page-services.php, which forced an !important here and another at 64em just to
   beat it. The inline is gone, so this is a plain rule again. The last pillar
   drops the gap to the closing section — it has no divider under it. */
.svc-split{ display:grid;grid-template-columns:1fr;gap:clamp(1.5rem,3vw,2.6rem);align-items:start;margin-bottom:clamp(2.5rem,5vw,4rem); }
.svc-split:last-of-type{ margin-bottom:0; }
/* The pillar's three editable colours are set once on the split as custom
   properties and inherited by the kicker and every tile inside it, instead of
   being re-serialised into an inline style="" on each tile. */
.services-pillar-kicker{ display:inline-flex;align-items:center;gap:.6rem;font-family:'Fredoka',sans-serif;font-size:1rem;color:var(--tile-accent,var(--accent));margin-bottom:.9rem; }
.services-pillar-rule{ width:22px;height:1px;background:currentColor; }
.svc-split .svc-ico{ background:var(--ico-bg);border-color:var(--ico-border); }
/* Not sticky here: stacked in one column the heading has nothing to sit beside,
   so it would float over its own tiles. Sticky starts with the split, at 64em. */
.services-pillars-sticky-title{ margin:0;font-size:clamp(1.7rem,3vw,2.4rem);font-weight:700;line-height:1.1; }
.services-pillars-sticky-text{ margin:1rem 0 0;font-size:1.05rem;line-height:1.65;color:#9BA3B4; }
.services-pillars-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:1.1rem; }
.services-pillar-title{ margin:.3rem 0 0;font-size:1.22rem;font-weight:600; }
.services-pillar-text{ margin:0;font-size:1rem;line-height:1.6;color:#8A93A6; }
/* Linked tiles — a tile is rendered as <a class="svc-tile svc-tile-linked"> only when its
   'link' sub-field is set. Tiles without a landing page stay <div class="svc-tile"> and are
   untouched by everything below. The base lift + accent border hover lives in components.css;
   these rules add the per-pillar tint, the "לפרטים" affordance and keyboard parity. */
.svc-tile-linked{ cursor:pointer; }
/* beats base.css `a:hover{color:var(--accent)}` so each pillar keeps its own accent */
.svc-tile-linked:hover,
.svc-tile-linked:focus-visible{ color:var(--tile-accent,var(--accent)); }
.svc-tile-more{ margin-top:auto;padding-top:.3rem;align-self:flex-start;display:inline-flex;align-items:center;gap:.4rem;font-size:.95rem;font-weight:600;color:var(--tile-accent,var(--accent));opacity:.75;transition:opacity .3s,gap .3s; }
.svc-tile-more-ico{ transition:transform .3s cubic-bezier(.16,.8,.24,1); }
.svc-tile-linked:hover .svc-tile-more,
.svc-tile-linked:focus-visible .svc-tile-more{ opacity:1;gap:.55rem; }
.svc-tile-linked:hover .svc-tile-more-ico,
.svc-tile-linked:focus-visible .svc-tile-more-ico{ transform:translateX(-4px); /* RTL: the arrow points left, so nudge left */ }
/* keyboard parity: focus mirrors the hover lift/border from components.css, plus a ring.
   !important matches components.css — both have to beat the inline border on the tile. */
.svc-tile-linked:focus-visible{ outline:2px solid var(--tile-accent,var(--accent));outline-offset:3px;transform:translateY(-6px);border-color:var(--tile-accent,var(--accent)) !important;box-shadow:0 26px 54px -30px rgba(0,0,0,.9); }
.services-pillar-divider{ height:1px;background:rgba(255,255,255,.07);margin:clamp(1rem,2vw,2rem) 0; }

/* --- Lifecycle --- */
.services-lifecycle{ padding:clamp(5rem,12vh,8.5rem) 0;background:#0A0C10;border-block:1px solid rgba(255,255,255,.06);position:relative;overflow:hidden; }
.services-lifecycle-glow{ top:20%;left:-8%;width:44vw;height:44vw;max-width:560px;max-height:560px;background:radial-gradient(circle,var(--blue),transparent 65%);opacity:.08;filter:blur(30px); }
.services-lifecycle-container{ max-width:1000px;position:relative; }
.services-lifecycle-header{ margin-bottom:clamp(2.5rem,5vw,3.5rem);max-width:60ch; }
.services-lifecycle-timeline{ position:relative;padding-inline-start:clamp(2.4rem,5vw,3.4rem); }
.services-lifecycle-track{ position:absolute;top:6px;bottom:6px;right:clamp(11px,2.3vw,17px);width:2px;background:rgba(255,255,255,.1); }
.services-lifecycle-fill{ position:absolute;top:6px;right:clamp(11px,2.3vw,17px);width:2px;height:0;background:linear-gradient(180deg,var(--accent),var(--blue),var(--purple));box-shadow:0 0 14px rgba(47,212,190,.5); }
.services-lifecycle-step{ position:relative;padding-bottom:clamp(1.8rem,3.5vw,2.8rem); }
/* Timeline bead. Was an inline style="" on every step; only the first one starts
   lit, which is now a class instead of a per-row colour string. GSAP writes an
   inline border-color/box-shadow over this as the rail scrubs past. */
.life-node{ position:absolute;right:clamp(-30px,-3.3vw,-24px);top:2px;width:24px;height:24px;border-radius:50%;background:#0A0C10;border:2px solid rgba(255,255,255,.2);transition:box-shadow .3s,border-color .3s; }
.life-node.is-lit{ border-color:var(--accent); }
.services-lifecycle-step-num{ font-family:'Fredoka',sans-serif;font-size:.9rem;color:#565d6b;margin-bottom:.35rem; }
.services-lifecycle-step-title{ margin:0 0 .5rem;font-size:clamp(1.3rem,2.2vw,1.7rem);font-weight:600; }
.services-lifecycle-step-text{ margin:0;font-size:1.05rem;line-height:1.65;color:#8A93A6;max-width:52ch; }

/* --- Why (comparison) --- */
.services-why-container{ max-width:1200px; }
.services-why-header{ text-align:center;margin-bottom:clamp(2.5rem,5vw,3.5rem);max-width:56ch;margin-inline:auto; }
.services-section-title{ margin:0;font-size:clamp(2rem,4.3vw,3.3rem);line-height:1.08;letter-spacing:-.02em;font-weight:700; }
.services-why-lead{ margin:1.3rem auto 0;font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.7;color:#9BA3B4; }
.services-compare-grid{ display:grid;grid-template-columns:1fr;gap:clamp(1.2rem,2.5vw,2rem);align-items:stretch; }
.services-compare-card{ border:1px solid rgba(255,255,255,.09);border-radius:22px;background:#0C0D10;padding:clamp(1.8rem,3vw,2.4rem); }
.services-compare-head{ display:inline-flex;align-items:center;gap:.6rem;color:#8A93A6;font-size:1rem;margin-bottom:1.4rem; }
.services-compare-icon{ width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center; }
.services-compare-list{ list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1rem; }
.services-compare-item{ display:flex;gap:.8rem;align-items:flex-start;font-size:1.05rem;line-height:1.55;color:#B8BECC; }
.services-compare-item-icon{ color:#6B7383;margin-top:.15rem;flex:none; }
.services-compare-card-accent{ border:1px solid rgba(47,212,190,.35);border-radius:22px;background:linear-gradient(160deg,rgba(47,212,190,.06),#0A0C10);padding:clamp(1.8rem,3vw,2.4rem);box-shadow:0 24px 60px -34px rgba(47,212,190,.5); }
.services-compare-head-accent{ display:inline-flex;align-items:center;gap:.6rem;color:var(--accent);font-size:1rem;font-weight:600;margin-bottom:1.4rem; }
.services-compare-icon-accent{ width:34px;height:34px;border-radius:10px;background:rgba(47,212,190,.14);border:1px solid rgba(47,212,190,.3);display:flex;align-items:center;justify-content:center; }
.services-compare-item-accent{ display:flex;gap:.8rem;align-items:flex-start;font-size:1.05rem;line-height:1.55;color:#ECEFF4; }
.services-compare-item-icon-accent{ color:var(--accent);margin-top:.15rem;flex:none; }
.services-stats{ margin-top:clamp(2.5rem,5vw,3.5rem);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:1.2rem;border-top:1px solid rgba(255,255,255,.08);padding-top:clamp(2rem,4vw,3rem); }
.services-stat{ text-align:center; }
.services-stat-value{ display:flex;align-items:baseline;justify-content:center;gap:.1rem; }
.services-stat-number{ font-size:clamp(2.4rem,5vw,3.6rem);font-weight:700;color:var(--accent);line-height:1; }
.services-stat-label{ margin-top:.6rem;font-size:1.02rem;color:#9BA3B4; }

/* --- Closing CTA --- */
.services-cta{ position:relative;padding:clamp(5rem,12vh,8rem) 0;overflow:hidden;background:#0A0C10;border-top:1px solid rgba(255,255,255,.06); }
.services-cta-glow{ bottom:-30%;right:15%;width:48vw;height:48vw;max-width:640px;max-height:640px;background:radial-gradient(circle,var(--accent),transparent 62%);opacity:.12;filter:blur(30px); }
.services-cta-container{ max-width:900px;position:relative;text-align:center; }
.services-cta-title{ margin:0 auto;max-width:20ch;font-size:clamp(2.2rem,5.4vw,4.2rem);line-height:1.06;letter-spacing:-.02em;font-weight:800; }
.services-cta-lead{ margin:1.6rem auto 0;max-width:48ch;font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.65;color:#9BA3B4; }
.services-cta-row{ display:flex;flex-wrap:wrap;justify-content:center;gap:.9rem;margin-top:2.2rem; }

/* ============================================================
   Breakpoints — one block per breakpoint, ascending
   ============================================================ */
@media (min-width: 64em){
  /* Hero */
  .services-hero-layout{ grid-template-columns:1.08fr .92fr; }
  .services-hero-visual{ display:block; }
  /* Pillars */
  .svc-split{ grid-template-columns:.32fr .68fr; }
  .services-pillars-sticky{ position:sticky;top:110px; }
  /* Why (comparison) */
  .services-compare-grid{ grid-template-columns:1fr 1fr; }
}