/* ============================================================================
   SCAMVERITY · vs.css — שכבת HUD ביטחונית.
   ----------------------------------------------------------------------------
   ⛔ בלי backdrop-filter בכלל (יקר במובייל, מהבהב על חלק מהמכשירים).
   ⛔ אין left/right בקובץ — logical properties בלבד, אחרת עברית/ערבית נשברות.
   ⚠ הזוהר כולו box-shadow/drop-shadow, לא filter על שכבות גדולות.
   ⚠ **מחויבים לכהה בלבד** — מוצר אבטחה בהיר נראה כמו טופס, לא כמו מכשיר.
   ========================================================================== */
:root{
  --bg:#04070c; --bg2:#070c14; --panel:#0a1119; --panel2:#0d1622;
  --line:#152233; --line2:#1e3047;
  --tx:#dce7f5; --tx2:#7f94ad; --tx3:#4d6076;
  --cy:#22d3ee; --cy2:#0891b2;
  --ok:#10b981; --fine:#84cc16; --warn:#f59e0b; --bad:#f97316; --crit:#ef4444;
  --mono:ui-monospace,"SF Mono","JetBrains Mono","Cascadia Mono",Consolas,monospace;
  --r:4px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--tx);
  font:15px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Hebrew",Arial,sans-serif;
  /* ⚠ הרשת היא שתי שכבות שקופות מאוד — קריאות מנצחת אווירה */
  background-image:
    linear-gradient(rgba(34,211,238,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(34,211,238,.028) 1px,transparent 1px);
  background-size:52px 52px;
  background-attachment:fixed;
}
a{color:var(--cy);text-decoration:none}
a:hover{color:#67e8f9}
main{max-width:960px;margin:0 auto;padding:26px 18px 70px;min-block-size:72vh}
h1,h2,h3{font-weight:650;letter-spacing:-.01em}

/* פינות HUD — ארבעה סוגריים על פאנל. ⚠ inset-inline כדי ש-RTL יתהפך נכון. */
.hud{position:relative}
.hud::before,.hud::after{
  content:"";position:absolute;inline-size:14px;block-size:14px;pointer-events:none;
  border-color:var(--cy);opacity:.5}
.hud::before{inset-block-start:-1px;inset-inline-start:-1px;
  border-block-start:1px solid;border-inline-start:1px solid}
.hud::after{inset-block-end:-1px;inset-inline-end:-1px;
  border-block-end:1px solid;border-inline-end:1px solid}

.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
/* ⛔⛔ בידוד דו-כיווני. בעברית/ערבית מחרוזת טכנית כמו "08:44:33 UTC · 5120 ms"
   מתהפכת ל-"UTC · — MS 08:44:33", ו-"/ 100" הופך ל-"100 /". זה לא באג של
   הפונט — זה אלגוריתם ה-bidi עושה בדיוק את מה שהוא אמור. כל מחרוזת טכנית
   (זמן, גרסה, טווח מספרים, נתיב) חייבת isolate. */
.ltr{direction:ltr;unicode-bidi:isolate}
.eyebrow{font:600 10px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;
  color:var(--tx3)}

/* ---------------------------------------------------------------- topbar -- */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 20px;border-block-end:1px solid var(--line);background:var(--bg2);
  flex-wrap:wrap;position:sticky;inset-block-start:0;z-index:30}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:17px;
  color:var(--tx);letter-spacing:.01em}
.brand .mark{inline-size:26px;block-size:26px;display:grid;place-content:center;
  border:1px solid var(--cy);border-radius:var(--r);color:var(--cy);font-size:13px;
  box-shadow:0 0 12px rgba(34,211,238,.35),inset 0 0 10px rgba(34,211,238,.12)}
.brand b{color:var(--cy);font-weight:700}
.top nav{display:flex;align-items:center;gap:16px;font-size:13px}
.top nav>a{color:var(--tx2)}
.top nav>a:hover{color:var(--cy)}

.langpick{position:relative}
.langpick summary{cursor:pointer;list-style:none;color:var(--tx2);font:500 12px/1 var(--mono);
  letter-spacing:.06em;padding:7px 11px;border:1px solid var(--line2);border-radius:var(--r);
  background:var(--panel)}
.langpick summary::-webkit-details-marker{display:none}
.langpick summary:hover{border-color:var(--cy2);color:var(--cy)}
.langgrid{position:absolute;inset-inline-end:0;margin-block-start:7px;z-index:40;
  display:grid;grid-template-columns:repeat(3,minmax(112px,1fr));gap:1px;
  background:var(--panel);border:1px solid var(--line2);border-radius:var(--r);
  padding:9px;box-shadow:0 22px 50px rgba(0,0,0,.7);max-height:62vh;overflow:auto}
.langgrid a{padding:6px 9px;border-radius:3px;color:var(--tx2);font-size:12.5px;white-space:nowrap}
.langgrid a:hover{background:var(--panel2);color:var(--cy)}
.langgrid a.cur{color:var(--cy);background:rgba(34,211,238,.09)}

/* ------------------------------------------------------------------ hero -- */
.hero{text-align:center;padding:64px 0 34px}
.hero .eyebrow{margin-block-end:16px}
.hero h1{font-size:clamp(25px,4.4vw,42px);margin:0 0 10px;line-height:1.2}
.hero h1 em{font-style:normal;color:var(--cy);
  text-shadow:0 0 26px rgba(34,211,238,.45)}
.hero p.sub{color:var(--tx2);margin:0 0 30px;font-size:15px}

form.big{display:flex;max-width:660px;margin:0 auto;
  border:1px solid var(--line2);border-radius:var(--r);background:var(--panel);
  box-shadow:0 0 0 1px rgba(34,211,238,.05),0 18px 50px rgba(0,0,0,.5);
  overflow:hidden}
form.big:focus-within{border-color:var(--cy2);
  box-shadow:0 0 0 1px rgba(34,211,238,.28),0 0 34px rgba(34,211,238,.14)}
form.big .pfx{display:grid;place-content:center;padding-inline:15px;color:var(--cy);
  font:600 13px/1 var(--mono);border-inline-end:1px solid var(--line);background:var(--bg2)}
form.big input{flex:1 1 auto;min-inline-size:0;padding:16px 16px;border:0;background:transparent;
  color:var(--tx);font:15px/1 var(--mono);letter-spacing:.01em}
form.big input::placeholder{color:var(--tx3)}
form.big input:focus{outline:0}
form.big button{padding:16px 24px;border:0;background:var(--cy);color:#04070c;
  font:700 13px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase;cursor:pointer;
  white-space:nowrap}
form.big button:hover{background:#67e8f9}
.err{color:var(--crit);margin-block-start:15px;font:13px/1.5 var(--mono)}

/* ---------------------------------------------------------------- verdict -- */
.statusbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:9px 15px;border:1px solid var(--line);border-block-end:0;
  background:var(--bg2);font:11px/1 var(--mono);letter-spacing:.08em;
  text-transform:uppercase;color:var(--tx3)}
.statusbar .dot{inline-size:7px;block-size:7px;border-radius:50%;background:var(--c,var(--cy));
  box-shadow:0 0 9px var(--c,var(--cy))}
.statusbar .sp{margin-inline-start:auto}

.verdict{display:flex;align-items:center;gap:30px;padding:30px 28px;
  background:linear-gradient(180deg,var(--panel),var(--bg2));
  border:1px solid var(--line2);margin-block-end:20px;flex-wrap:wrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
.verdict.ok{--c:var(--ok)}    .verdict.fine{--c:var(--fine)}
.verdict.warn{--c:var(--warn)} .verdict.bad{--c:var(--bad)}
.verdict.crit{--c:var(--crit)}

.ring{flex:0 0 auto;position:relative;inline-size:146px;block-size:146px}
.ring svg{inline-size:100%;block-size:100%;transform:rotate(-90deg);overflow:visible}
.ring .trk{fill:none;stroke:var(--line2);stroke-width:7}
.ring .arc{fill:none;stroke:var(--c);stroke-width:7;stroke-linecap:round;
  filter:drop-shadow(0 0 7px var(--c));
  stroke-dasharray:var(--dash) 999;animation:draw .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes draw{from{stroke-dasharray:0 999}}
.ring .mid{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.ring .val{font:800 40px/1 var(--mono);color:var(--c);
  text-shadow:0 0 22px color-mix(in srgb,var(--c) 55%,transparent)}
.ring .of{font:500 10px/1 var(--mono);letter-spacing:.18em;color:var(--tx3);
  margin-block-start:7px}

.vtext{flex:1 1 260px;min-inline-size:0}
.vtext .eyebrow{margin-block-end:9px}
.vtext h1{margin:0 0 9px;font:700 clamp(20px,3.2vw,29px)/1.2 var(--mono);
  word-break:break-all;letter-spacing:-.01em}
.vline{margin:0;font-size:19px;font-weight:700;color:var(--c)}
.vnote{margin:11px 0 0;color:var(--tx2);font-size:13.5px;max-inline-size:52ch;line-height:1.55}

/* ------------------------------------------------------- signal analysis -- */
.bars{display:grid;gap:11px}
.bar{display:grid;grid-template-columns:minmax(96px,auto) 1fr 42px;gap:13px;align-items:center}
.bar .nm{font:600 10.5px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase;
  color:var(--tx2)}
.bar .trk{block-size:5px;background:var(--panel2);border-radius:99px;overflow:hidden;
  border:1px solid var(--line)}
/* ⛔ `display:block` חובה: .fill הוא <span>, ואלמנט inline מתעלם לחלוטין
   מ-inline-size/block-size — הפסים פשוט לא הופיעו, גם ב-100% סיכון. */
.bar .fill{display:block;block-size:100%;border-radius:99px;background:var(--bc,var(--cy));
  box-shadow:0 0 10px var(--bc,var(--cy));animation:grow .8s cubic-bezier(.2,.8,.2,1) both}
@keyframes grow{from{inline-size:0!important}}
.bar .pc{font:600 11.5px/1 var(--mono);color:var(--tx3);text-align:end}
.bar.lo{--bc:var(--ok)} .bar.md{--bc:var(--warn)} .bar.hi{--bc:var(--crit)}
/* ⚠ "נבדק ונקי" חייב להיראות אחרת מ"אין נתונים" — פס מלא, עמום, ותווית CLEAR */
.bar.clear{--bc:var(--ok)}
.bar.clear .pc{color:var(--ok);font-size:10px;letter-spacing:.11em}
/* ⛔ הפס במצב נקי נשאר **קצר** — מילוי מלא היה נראה זהה ל-100% סיכון. */
.bar.clear .trk{border-color:rgba(16,185,129,.3)}

/* --------------------------------------------------------------- panels -- */
.card{background:var(--panel);border:1px solid var(--line);
  padding:19px 21px;margin-block-end:18px}
.card>h2{margin:0 0 15px;font:600 10.5px/1 var(--mono);letter-spacing:.19em;
  text-transform:uppercase;color:var(--tx3);display:flex;align-items:center;gap:9px}
.card>h2::after{content:"";flex:1;block-size:1px;background:var(--line)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(276px,1fr));gap:16px}
.grid .card{margin:0}
dl{margin:0}
.row{display:flex;justify-content:space-between;gap:14px;padding:7px 0;
  border-block-end:1px dashed var(--line);font-size:13px}
.row:last-child{border:0}
.row dt{color:var(--tx3);margin:0;flex:0 0 auto;font-size:12.5px}
.row dd{margin:0;text-align:end;word-break:break-word;font-family:var(--mono);
  font-size:12.5px;color:var(--tx)}

/* ------------------------------------------------------------- findings -- */
.findings{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.f{display:grid;grid-template-columns:auto auto 1fr;gap:12px;align-items:start;
  padding:11px 12px;background:var(--bg2);border-inline-start:2px solid var(--fc,var(--tx3));
  font-size:14px;line-height:1.55}
.f+.f{margin-block-start:2px}
.f .ic{inline-size:17px;block-size:17px;display:grid;place-content:center;
  font:700 10px/1 var(--mono);color:#04070c;background:var(--fc,var(--tx3));
  border-radius:2px;margin-block-start:3px}
.f .sev{font:600 9.5px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--fc,var(--tx3));margin-block-start:5px;min-inline-size:52px}
.f.bad{--fc:var(--bad)} .f.good{--fc:var(--ok)} .f.neutral{--fc:var(--tx3)}
.f.s-critical{--fc:var(--crit);background:rgba(239,68,68,.06)}
.f.s-high{--fc:var(--bad)}
.f.s-medium{--fc:var(--warn)}
.f.good.s-info{--fc:var(--ok)}

/* --------------------------------------------------------------- recent -- */
.recent{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:2px}
.recent a{display:flex;align-items:center;gap:11px;padding:9px 11px;
  color:var(--tx2);font:12.5px/1 var(--mono);background:var(--bg2);
  border-inline-start:2px solid transparent}
.recent a:hover{background:var(--panel2);color:var(--tx);border-inline-start-color:var(--cy)}
.recent .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pill{flex:0 0 auto;min-inline-size:31px;text-align:center;padding:3px 6px;
  font:700 11px/1 var(--mono);color:#04070c;border-radius:2px}
.pill.ok{background:var(--ok)} .pill.fine{background:var(--fine)}
.pill.warn{background:var(--warn)} .pill.bad{background:var(--bad)}
.pill.crit{background:var(--crit)}

.disclaimer{color:var(--tx3);font-size:12px;line-height:1.65;margin:22px 0 0;
  padding:13px 16px;border:1px solid var(--line);background:var(--bg2);
  border-inline-start:2px solid var(--line2)}
form.again{display:flex;margin-block-start:22px;border:1px solid var(--line2);
  background:var(--panel);overflow:hidden}
form.again input{flex:1 1 auto;min-inline-size:0;padding:13px 15px;border:0;
  background:transparent;color:var(--tx);font:14px/1 var(--mono)}
form.again input:focus{outline:0}
form.again button{padding:13px 20px;border:0;background:var(--panel2);color:var(--cy);
  font:700 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
  border-inline-start:1px solid var(--line2)}
form.again button:hover{background:var(--cy);color:#04070c}

footer{border-block-start:1px solid var(--line);padding:28px 18px;text-align:center;
  color:var(--tx3);font-size:12px;background:var(--bg2)}
footer .small{max-inline-size:74ch;margin:10px auto 0;line-height:1.6}

@media (max-width:600px){
  body{background-size:36px 36px}
  .verdict{gap:20px;padding:22px 18px}
  .ring{inline-size:112px;block-size:112px}
  .ring .val{font-size:31px}
  .langgrid{grid-template-columns:repeat(2,1fr)}
  .bar{grid-template-columns:minmax(74px,auto) 1fr 36px;gap:9px}
  .f{grid-template-columns:auto 1fr}
  .f .sev{display:none}
}
@media (prefers-reduced-motion:reduce){
  .ring .arc,.bar .fill{animation:none}
  html{scroll-behavior:auto}
}

/* ============================================================================
   שכבה 2 — עומק, צפיפות מידע ותנועה. ⛔ עדיין: אין backdrop-filter,
   אין left/right, וכל אנימציה מכבדת prefers-reduced-motion.
   ========================================================================== */

/* ------------------------------------------------------------------ radar -- */
.radar{position:absolute;inset-block-start:-58px;inset-inline-start:50%;
  inline-size:360px;block-size:360px;margin-inline-start:-180px;
  pointer-events:none;opacity:.42;z-index:0;
  -webkit-mask-image:radial-gradient(circle,#000 38%,transparent 72%);
          mask-image:radial-gradient(circle,#000 38%,transparent 72%)}
.radar svg{inline-size:100%;block-size:100%}
.radar .rg{fill:none;stroke:var(--cy);stroke-width:.6;opacity:.3}
.radar .sweep{fill:var(--cy);opacity:.09;transform-origin:100px 100px;
  animation:sweep 4.5s linear infinite}
@keyframes sweep{to{transform:rotate(360deg)}}
.radar .blip{fill:var(--cy);opacity:.75;animation:blip 4.5s ease-in-out infinite}
.radar .b2{animation-delay:1.5s} .radar .b3{animation-delay:3s}
@keyframes blip{0%,18%{opacity:.9;r:3.4}45%,100%{opacity:0;r:2}}
/* ⛔ `.hero>*` הרים גם את .radar ל-position:relative, כלומר החזיר אותו
   לזרימת המסמך — הראדאר תפס 430px ודחף את הכותרת אל מתחת לקפל.
   ⚠ כל כלל "כל הילדים" חייב לחרוג במפורש מילד שממוקם absolute. */
.hero{position:relative;z-index:1}
.hero>:not(.radar){position:relative;z-index:1}

/* ------------------------------------------------------------------ stats -- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);margin-block:34px 20px}
.stat{background:var(--panel);padding:16px 18px;text-align:center}
.stat b{display:block;font:700 25px/1 var(--mono);color:var(--cy);
  text-shadow:0 0 18px rgba(34,211,238,.3)}
.stat span{display:block;margin-block-start:7px;font:600 9.5px/1.3 var(--mono);
  letter-spacing:.15em;text-transform:uppercase;color:var(--tx3)}

/* ---------------------------------------------------------- how it works -- */
.stepgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:1px;
  background:var(--line)}
.step{background:var(--panel);padding:16px 17px}
.step .sn{font:700 10px/1 var(--mono);letter-spacing:.16em;color:var(--cy);opacity:.65}
.step b{display:block;margin-block:9px 6px;font-size:14.5px;color:var(--tx)}
.step p{margin:0;font-size:12.5px;line-height:1.6;color:var(--tx2)}

/* ------------------------------------------------------------ threat scale -- */
.scale{margin-block-start:20px;max-inline-size:400px;position:relative}
.scale .zones{display:flex;gap:2px;block-size:7px}
.scale .z{flex:1;border-radius:1px;opacity:.34}
.scale .z.crit{background:var(--crit)} .scale .z.bad{background:var(--bad)}
.scale .z.warn{background:var(--warn)} .scale .z.fine{background:var(--fine)}
.scale .z.ok{background:var(--ok)}
/* ⚠ הסמן ממוקם ב-inset-inline-start באחוזים — ב-RTL הדפדפן הופך אותו לבד */
.scale .pin{position:absolute;inset-block-start:-4px;inline-size:3px;block-size:15px;
  background:var(--tx);border-radius:2px;margin-inline-start:-1.5px;
  box-shadow:0 0 9px var(--c,var(--cy)),0 0 0 2px var(--bg2)}
.scale .zlabels{display:flex;justify-content:space-between;margin-block-start:8px;
  font:600 9px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--tx3)}

/* ----------------------------------------------------------------- chips -- */
.chips{display:flex;gap:6px;margin-inline-start:auto;flex:0 0 auto}
.card>h2 .chips{order:3}
.chip{font:700 9.5px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;
  padding:5px 8px;border-radius:2px;border:1px solid}
.chip.bad{color:var(--bad);border-color:rgba(249,115,22,.4);background:rgba(249,115,22,.09)}
.chip.good{color:var(--ok);border-color:rgba(16,185,129,.35);background:rgba(16,185,129,.08)}

/* ----------------------------------------------------------------- chain -- */
.chain{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  align-items:center;gap:9px}
.chain li{display:flex;align-items:center;gap:8px;padding:7px 11px;
  background:var(--bg2);border:1px solid var(--line);font:12.5px/1 var(--mono);
  color:var(--tx2)}
.chain li.last{border-color:var(--cy2);color:var(--tx)}
.chain li .n{font-size:9.5px;color:var(--tx3)}
/* החץ בין קפיצות — ⚠ נבנה מ-content ולכן חייב להתהפך ב-RTL */
.chain li:not(:last-child)::after{content:"→";color:var(--tx3);margin-inline-start:3px}
body.rtl .chain li:not(:last-child)::after{content:"←"}

/* -------------------------------------------------------- depth / polish -- */
.verdict{position:relative;overflow:hidden}
/* קווי סריקה עדינים על פאנל הפסק — נותן משטח, לא רעש */
.verdict::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.014) 0 1px,transparent 1px 3px)}
.verdict>*{position:relative;z-index:1}
.card{background:linear-gradient(180deg,var(--panel),var(--bg2) 190%)}
.card>h2{display:flex;align-items:center;gap:9px}

/* טיפוגרפיה — היררכיה חזקה יותר בכותרת הראשית */
.hero h1{font-weight:750;letter-spacing:-.022em}
.vtext h1{letter-spacing:-.02em}

@media (max-width:600px){
  .radar{inline-size:300px;block-size:300px;margin-inline-start:-150px;
    inset-block-start:-10px;opacity:.34}
  .stats{margin-block:26px 16px}
  .stat b{font-size:21px}
  .scale{max-inline-size:none}
  .chips{inline-size:100%;margin-block-start:8px}
}
@media (prefers-reduced-motion:reduce){
  .radar .sweep,.radar .blip{animation:none}
}