/* ===== Visual layer: maps, charts, icons, motion (27 Oct 2026) ===== */
/* hero */
.hero-pro{position:relative;overflow:hidden;background:linear-gradient(120deg,#FFFFFF 0%,#F2F7FE 40%,#E3EEFC 70%,#F7FAFF 100%)!important;background-size:240% 240%!important;animation:vzbg 22s ease-in-out infinite alternate!important}
@keyframes vzbg{from{background-position:0% 40%}to{background-position:100% 60%}}
.hero-pro .wrap{position:relative;z-index:1}
.hero-grid{align-items:center}
.hero-text{grid-column:span 5!important}.hero-viz{grid-column:span 7;position:relative}
@media(max-width:960px){.hero-text,.hero-viz{grid-column:1/-1!important}}
.rmap{width:100%;height:auto;display:block;overflow:hidden}
.rmap .graticule line{stroke:#C9DAF0;stroke-width:.6;stroke-dasharray:2 4}
.rmap .land{fill:#E6EEF8;stroke:#FFFFFF;stroke-width:.7}
.rmap .mc{fill:#1E6FD9;stroke:#fff;stroke-width:.8;cursor:pointer;transition:fill .25s,opacity .25s;opacity:.92}
.rmap .mc-israel{fill:#0F2A4A}.rmap .mc.joining{fill:url(#none);fill:#9CC1F0;stroke:#1E6FD9;stroke-dasharray:3 2}
.rmap .mc:hover,.rmap .mc.on{fill:#1658B0;opacity:1}.rmap .mc-israel.on,.rmap .mc-israel:hover{fill:#1A5CB8}
.rmap .arc{fill:none;stroke:url(#rarc);stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.rmap .arc.joining{stroke:#4A8FE6;stroke-dasharray:.02 .02;stroke-dashoffset:0;opacity:0}
.rmap.vz-in .arc{animation:vzdraw 1.4s cubic-bezier(.65,0,.35,1) forwards;animation-delay:calc(.25s + var(--i)*.18s)}
.rmap.vz-in .arc.joining{animation:vzfade .8s ease forwards;animation-delay:1.4s}
@keyframes vzdraw{to{stroke-dashoffset:0}}@keyframes vzfade{to{opacity:1}}
.rmap .city{cursor:pointer;outline:none}
.rmap .dot{fill:#fff;stroke:#0F2A4A;stroke-width:2.2}
.rmap .city.joining .dot{stroke:#1E6FD9;stroke-dasharray:2 2}
.rmap .pulse{fill:#1E6FD9;opacity:.35;transform-box:fill-box;transform-origin:center;animation:vzpulse 2.6s ease-out infinite}
.rmap .city:nth-of-type(2n) .pulse{animation-delay:1.3s}
@keyframes vzpulse{0%{transform:scale(1);opacity:.45}100%{transform:scale(4.2);opacity:0}}
.rmap text{font:600 13px var(--sans);fill:#0F2A4A;font-size:15px;paint-order:stroke;stroke:#fff;stroke-width:3.5px;stroke-linejoin:round;pointer-events:none}
.rmap .city:focus-visible .dot,.rmap .city.on .dot{fill:#1E6FD9}
.rmap .glow{animation:vzglow 6s ease-in-out infinite alternate}@keyframes vzglow{from{opacity:.6}to{opacity:1}}
.chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-2);margin-top:calc(-1 * var(--sp-4));position:relative}
.chip{background:rgba(255,255,255,.92);backdrop-filter:blur(6px);border:1px solid var(--rule);border-top:3px solid var(--navy);border-radius:4px;padding:10px 12px}
.chip dt{font-family:var(--serif);font-size:1.4rem;font-weight:600;color:var(--navy);line-height:1.1;font-variant-numeric:tabular-nums}
.chip dd{margin:4px 0 0;font-size:12px;line-height:1.4;color:var(--text-2)}.chip .gl-src{display:block;margin-top:4px;color:var(--muted-2)}
.chips dl,.chips{margin-bottom:0}
@media(max-width:700px){.chips{grid-template-columns:1fr 1fr;margin-top:var(--sp-2)}}
.map-legend{display:flex;flex-wrap:wrap;gap:14px;font-size:12px;color:var(--muted-2);margin:6px 0 0}
.map-legend i{display:inline-block;width:12px;height:12px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.map-legend .l1{background:#1E6FD9}.map-legend .l2{background:#0F2A4A}.map-legend .l3{background:#9CC1F0;border:1px dashed #1E6FD9}
/* stats strip */
.vz-stats{background:#0F2A4A;color:#fff;padding:var(--sp-5) 0;position:relative;overflow:hidden}
.vz-stats:before{content:"";position:absolute;inset:0;background:radial-gradient(600px 200px at 15% 0%,rgba(74,143,230,.35),transparent),radial-gradient(500px 220px at 90% 100%,rgba(30,111,217,.35),transparent)}
.vz-stats .wrap{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-4)}
.vz-stats .st{border-left:2px solid #4A8FE6;padding-left:var(--sp-3)}
.vz-stats .n{font-family:var(--serif);font-size:clamp(1.8rem,3vw,2.5rem);font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums}
.vz-stats .t{font-size:var(--fs-1);color:#D6E2F2;margin:4px 0}.vz-stats .s{font-size:12px;color:#A9BEDB}.vz-stats a{color:#CFE2F8}
@media(max-width:900px){.vz-stats .wrap{grid-template-columns:1fr 1fr}}
/* charts */
.vz-charts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4);margin-top:var(--sp-5)}
@media(max-width:960px){.vz-charts{grid-template-columns:1fr}}
.vz-chart figure{margin:0;background:#fff;border:1px solid var(--rule);border-radius:4px;padding:var(--sp-4);height:100%}
.vz-chart h3{font-size:var(--fs-2);margin:2px 0 var(--sp-3)}
.vz-bars{width:100%;height:auto;display:block}
.vz-bars .gl{stroke:#E3EAF3;stroke-width:1}.vz-bars .axis{stroke:#8FA3BC;stroke-width:1}
.vz-bars .vb{fill:#1E6FD9;transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0);transition:transform 1s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i)*140ms)}
.vz-bars .vb:last-of-type{fill:#0F2A4A}
.vz-in .vz-bars .vb{transform:scaleY(1)}
.vz-bars .bv{font:600 13px var(--sans);fill:#0F2A4A;opacity:0;transition:opacity .5s ease 1s}.vz-in .vz-bars .bv{opacity:1}
.vz-bars .bl{font:500 12px var(--sans);fill:#566477}
.vz-cap{font-size:12.5px;color:var(--muted-2);margin:var(--sp-2) 0 4px}.vz-src{font-size:12px;color:var(--muted-2);margin:0}
.vz-mini{display:block;margin-top:auto;padding-top:var(--sp-2)}.vz-mini .vz-bars{height:44px;width:120px}.vz-mini-cap{display:block;font-size:11px;color:var(--muted-2);margin-top:4px}
/* icons */
.vz-ico{width:36px;height:36px;color:#1E6FD9;display:block;margin-bottom:var(--sp-2);transition:transform .35s cubic-bezier(.3,1.4,.5,1),color .2s}
.vz-ico path,.vz-ico rect,.vz-ico circle{stroke-dasharray:80;stroke-dashoffset:0}
a:hover .vz-ico,.card:hover .vz-ico,.feature:hover .vz-ico{transform:translateY(-3px) scale(1.08);color:#0F2A4A}
a:hover .vz-ico path,.feature:hover .vz-ico path{animation:vzico .9s ease}
@keyframes vzico{from{stroke-dashoffset:80}to{stroke-dashoffset:0}}
.vz-ico.lg{width:64px;height:64px}
.sector-graphic{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-4);align-items:center;background:linear-gradient(135deg,#F5F9FE,#fff);border:1px solid var(--rule);border-radius:4px;padding:var(--sp-4);margin:var(--sp-4) 0}
.sector-graphic .vz-ico{width:84px;height:84px;margin:0;color:#1E6FD9}
.sector-graphic .big{font-family:var(--serif);font-size:2rem;font-weight:600;color:var(--navy);line-height:1.1}
.sector-graphic p{margin:4px 0 0;font-size:var(--fs-1);color:var(--text-2)}
/* scroll reveal */
.vz-r{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms)}
.vz-r.vz-in{opacity:1;transform:none}
/* animated section dividers */
.sec-head{border-bottom-color:transparent!important;position:relative}
.sec-head:after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:linear-gradient(90deg,#0F2A4A,#1E6FD9 40%,var(--rule) 40%);transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.2,.7,.2,1) .15s}
.sec-head.vz-in:after,.sec-head:not(.vz-r):after{transform:scaleX(1)}
/* timeline track */
.timeline,.tl{position:relative}
.timeline:before,.tl:before{content:"";position:absolute;left:-2px;top:0;width:2px;height:100%;background:linear-gradient(#0F2A4A,#1E6FD9);transform-origin:top;transform:scaleY(var(--prog,0));transition:transform .2s linear}
.timeline li.vz-r,.tl li.vz-r{transform:translateX(-14px)}.timeline li.vz-in,.tl li.vz-in{transform:none}
.timeline li:before{transition:background .4s,transform .4s}.timeline li.vz-in:before{background:#1E6FD9;transform:scale(1.15)}
/* map page */
.map-wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--sp-4);align-items:start;margin-bottom:var(--sp-5)}
.map-wrap .rmap-box{grid-column:span 8;background:linear-gradient(135deg,#F5F9FE,#fff);border:1px solid var(--rule);border-radius:4px;padding:var(--sp-3)}
.map-wrap .map-panel{grid-column:span 4;border:1px solid var(--rule);border-top:3px solid var(--navy);border-radius:4px;padding:var(--sp-4);background:#fff;min-height:260px;font-size:var(--fs-1)}
.map-panel dl{display:grid;grid-template-columns:110px 1fr;gap:6px 10px}.map-panel dt{font-weight:600}.map-panel dd{margin:0}
@media(max-width:960px){.map-wrap .rmap-box,.map-wrap .map-panel{grid-column:1/-1}}
/* reduced motion: static */
@media(prefers-reduced-motion:reduce){.hero-pro,.rmap .pulse,.rmap .glow{animation:none!important}.rmap .pulse{opacity:0}.rmap .arc{stroke-dashoffset:0!important;opacity:1!important}.vz-r{opacity:1!important;transform:none!important}.vz-bars .vb{transform:none!important}.vz-bars .bv{opacity:1!important}.sec-head:after{transform:scaleX(1)!important}.timeline:before,.tl:before{transform:none!important}}
/* dark */
html[data-theme=dark] .hero-pro{background:linear-gradient(120deg,#0A1422,#0F1E36 45%,#122849 75%,#0A1422)!important;background-size:240% 240%!important}
html[data-theme=dark] .rmap .land{fill:#1A2A44;stroke:#0A1422}html[data-theme=dark] .rmap .graticule line{stroke:#22385A}
html[data-theme=dark] .rmap .mc-israel{fill:#CFE2F8}html[data-theme=dark] .rmap text{fill:#E6EBF3;stroke:#0A1422}
html[data-theme=dark] .rmap .dot{fill:#0A1422;stroke:#CFE2F8}
html[data-theme=dark] .chip,html[data-theme=dark] .vz-chart figure,html[data-theme=dark] .map-panel,html[data-theme=dark] .sector-graphic,html[data-theme=dark] .rmap-box{background:#111E33!important;border-color:var(--rule)}
html[data-theme=dark] .chip dt,html[data-theme=dark] .sector-graphic .big{color:#fff}
html[data-theme=dark] .vz-bars .bv{fill:#E6EBF3}html[data-theme=dark] .vz-bars .bl{fill:#A7B4C6}html[data-theme=dark] .vz-bars .gl{stroke:#22385A}
html[data-theme=dark] .vz-bars .vb:last-of-type{fill:#8DB8F2}html[data-theme=dark] .vz-ico{color:#8DB8F2}
/* dark fixes from contrast check */
html[data-theme=dark] .brand b{color:#CFE2F8!important}
html[data-theme=dark] .fc .claim{color:#fff!important}
html[data-theme=dark] .btn-s.x,html[data-theme=dark] .fotd-share{background:#8DB8F2!important;color:#0A1422!important;border-color:#8DB8F2!important}
html[data-theme=dark] .page-head .crumbs a{color:#8DB8F2!important}
@media(max-width:960px){.hero-grid,.ix-grid,.ftop,.map-wrap{grid-template-columns:minmax(0,1fr)!important;gap:var(--sp-4)!important}.hero-grid>*,.ix-grid>*,.ftop>*,.map-wrap>*{grid-column:1/-1!important}}
@media(max-width:600px){.g2,.g3,.g4,.g6{grid-template-columns:minmax(0,1fr)!important}}
html,body{overflow-x:clip}