/* ECC Testing — שכבת שדרוג משותפת לכל העמודים (נטענת אחרי ה-CSS של index.html).
   לפי skill redesign-existing-projects: פונט עם אופי, מצבי לחיצה/פוקוס, כרטיסים עם
   תאורה שעוקבת אחרי הסמן, מרקם גרעיני עדין, ומוטיב הקשת של הלוגו. רק צבעי BRAND.md. */

:root{
  --font-display:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-body:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --shadow-green:0 10px 30px -12px rgba(92,146,34,.45);
}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{font-family:var(--font-body);font-feature-settings:"ss01"}
h1,h2,h3,.brand b,.steps b,.card h3{font-family:var(--font-display);letter-spacing:-.025em}
h1,h2{text-wrap:balance}
p,li{text-wrap:pretty}
h1{font-weight:800}
h2{font-weight:700}
.eyebrow{font-family:var(--font-display);font-weight:600}
.hero-card .metric b,.verdict{font-variant-numeric:tabular-nums}

/* ---------- כפתורים: תחושה פיזית ---------- */
.btn{transition:background-color .2s var(--ease-out),border-color .2s var(--ease-out),
  transform .25s var(--ease-spring),box-shadow .25s var(--ease-out)}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-green)}
.btn:active{transform:translateY(0) scale(.97);box-shadow:none;transition-duration:.08s}
.btn-ghost:hover,.btn-light:hover,.btn-outline:hover{box-shadow:0 8px 22px -12px rgba(28,31,29,.35)}

a:focus-visible,.btn:focus-visible,summary:focus-visible,button:focus-visible{
  outline:3px solid var(--green-l);outline-offset:3px;border-radius:8px}

.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--charcoal);color:#fff;
  padding:10px 16px;border-radius:8px;text-decoration:none;font-weight:600;transition:top .2s}
.skip:focus{top:12px}

/* ---------- פס התקדמות בגלילה ---------- */
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;pointer-events:none;
  background:linear-gradient(90deg,var(--green-l),var(--green),var(--green-d));
  transform-origin:0 50%;transform:scaleX(0)}

/* ---------- מרקם גרעיני עדין (שובר את השטיחות הדיגיטלית) ---------- */
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.035;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- כרטיסים עם תאורה שעוקבת אחרי הסמן ---------- */
.spot{position:relative;isolation:isolate}
.spot::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;z-index:-1;
  opacity:0;transition:opacity .3s var(--ease-out);
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(143,203,70,.22),transparent 60%)}
.spot:hover::after{opacity:1}

/* ---------- ניווט: עמוד נוכחי ---------- */
.navlinks a[aria-current="page"]{color:var(--green-d);position:relative}
.navlinks a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;
  border-radius:2px;background:var(--green)}

/* =====================================================================
   עמודי משנה (שירות / אזור)
   ===================================================================== */
.crumbs{font-size:13.5px;color:var(--steel);display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.crumbs a{text-decoration:none;color:var(--steel)}
.crumbs a:hover{color:var(--green-d)}
.crumbs span[aria-hidden]{opacity:.5}

.page-hero{position:relative;overflow:hidden;padding:64px 0 76px;
  background:radial-gradient(1100px 520px at 88% -10%,var(--green-pale),transparent 62%),var(--bg)}
.page-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.page-hero h1{font-size:clamp(36px,5.2vw,60px);line-height:1.04}
.page-hero .lede{max-width:34em}

/* תמונה עם שכבה מוסטת: עומק בלי קלישאת כרטיס */
.hero-media{position:relative;justify-self:end;width:100%;max-width:440px}
.hero-media img{position:relative;z-index:1;width:100%;aspect-ratio:4/5;object-fit:cover;
  border-radius:22px 22px 22px 6px;box-shadow:0 30px 60px -28px rgba(28,31,29,.45)}
.hero-media::before{content:"";position:absolute;inset:18px -18px -18px 18px;border-radius:24px;
  background:linear-gradient(135deg,var(--green-l),var(--green-d));opacity:.9}

/* מוטיב הקשת של הלוגו — נמשך בעת הטעינה */
.ring{position:absolute;width:min(560px,90vw);height:auto;right:-150px;top:-170px;opacity:.22;pointer-events:none}
.ring circle{fill:none;stroke-width:16;stroke-dasharray:40 9 40 9;stroke-dashoffset:1200;
  animation:ring-draw 2.2s var(--ease-out) .15s forwards}
.ring .g{stroke:var(--green)} .ring .s{stroke:var(--steel-logo)}
@keyframes ring-draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.ring circle{animation:none;stroke-dashoffset:0}}

.prose{max-width:46em}
.prose h2{font-size:clamp(26px,3.2vw,34px);margin:0 0 16px}
.prose p{font-size:17px;color:var(--ink-2);margin-top:14px;line-height:1.75}
.prose p:first-of-type{margin-top:0}
.prose + .prose{margin-top:56px}
.prose a{color:var(--green-d);text-underline-offset:3px}

/* בלוק "שתי עמודות" א-סימטרי: כותרת דביקה משמאל, טקסט מימין */
.split{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
.split > h2{position:sticky;top:96px;font-size:clamp(26px,3vw,34px)}
.split .prose{max-width:none}

.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}
.fact{background:var(--card);border-radius:16px;padding:22px 22px 24px;border:1px solid var(--line)}
.fact small{display:block;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--steel);font-weight:700}
.fact b{display:block;margin-top:8px;font-family:var(--font-display);font-size:18px;line-height:1.3;color:var(--charcoal)}

.jobs{display:grid;gap:10px;margin-top:22px}
.jobs li{display:flex;gap:12px;align-items:flex-start;font-size:16px;color:var(--ink-2)}
.jobs li::before{content:"";flex:none;width:18px;height:18px;margin-top:4px;border-radius:6px;
  background:var(--green-pale) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C9222' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4 10-10'/%3E%3C/svg%3E") center/12px no-repeat}

/* רשת קישורים לעמודים קשורים */
.link-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-top:30px}
.link-card{display:flex;flex-direction:column;gap:6px;padding:20px 22px 22px;border-radius:16px;
  background:var(--card);border:1px solid var(--line);text-decoration:none;
  transition:transform .3s var(--ease-spring),border-color .2s,box-shadow .3s var(--ease-out)}
.link-card:hover{transform:translateY(-4px);border-color:var(--green-l);box-shadow:0 18px 40px -22px rgba(28,31,29,.35)}
.link-card b{font-family:var(--font-display);font-size:17.5px;color:var(--charcoal);
  display:flex;justify-content:space-between;align-items:center;gap:10px}
.link-card b::after{content:"\2192";color:var(--green);transition:transform .3s var(--ease-spring)}
.link-card:hover b::after{transform:translateX(5px)}
.link-card span{font-size:14px;color:var(--steel);line-height:1.55}

/* שירותים מקושרים בעמוד הבית */
.more-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.more-links a{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:12px;
  border:1px solid var(--line);background:var(--card);text-decoration:none;font-weight:600;font-size:14.5px;
  color:var(--charcoal);transition:transform .25s var(--ease-spring),border-color .2s,background .2s}
.more-links a::after{content:"\2192";color:var(--green);transition:transform .25s var(--ease-spring)}
.more-links a:hover{border-color:var(--green-l);background:var(--green-pale);transform:translateY(-2px)}
.more-links a:hover::after{transform:translateX(4px)}
.chips li a{text-decoration:none;color:inherit;display:block}
.chips li:has(a){border-color:var(--green-l);color:var(--green-d);font-weight:600}

/* 404 */
.nf{min-height:72dvh;display:grid;place-items:center;text-align:center;padding:80px 24px}
.nf h1{font-size:clamp(64px,14vw,150px);line-height:.9;color:var(--charcoal)}
.nf h1 span{color:var(--green)}
.nf p{margin:18px auto 0;max-width:30em;color:var(--steel);font-size:17px}
.nf .cta-row{justify-content:center}

@media (max-width:900px){
  .page-hero-grid,.split{grid-template-columns:1fr;gap:34px}
  .split > h2{position:static}
  .hero-media{justify-self:start;max-width:360px}
  .facts{grid-template-columns:1fr}
}
@media (max-width:560px){
  .page-hero{padding:44px 0 56px}
  .hero-media{max-width:100%}
  .hero-media::before{inset:12px -10px -12px 12px}
}