:root{
  --grey-900:#111827;
  --grey-800:#1f2937;
  --grey-700:#374151;
  --grey-600:#4b5563;
  --grey-500:#6b7280;
  --grey-300:#d1d5db;
  --grey-200:#e5e7eb;
  --grey-100:#f3f4f6;
  --cyan-600:#0891b2;
  --cyan-500:#06b6d4;
  --cyan-100:#cffafe;
  --paper:#ffffff;
  --shadow:0 10px 20px rgba(0,0,0,.08);
  --radius:16px;
  --font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans Hebrew', 'Helvetica Neue', Arial, 'Apple Color Emoji', 'Segoe UI Emoji';
}

*{ box-sizing:border-box }
html{ font-family: var(--font); scroll-behavior:smooth }
body{ margin:0; color:var(--grey-800); background:var(--paper); line-height:1.6 }
a{ color:var(--cyan-600); text-decoration:none }
a:hover{ text-decoration:underline }

/* Layout */
.container{ width:min(1100px, 92%); margin-inline:auto }

/* Header */
.site-header{
  position:sticky; top:0; z-index:10;
  background:var(--paper);
  border-bottom:3px solid var(--cyan-100);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:10px 0 }
.brand{ display:flex; align-items:center; gap:.5rem; font-weight:800; font-size:1.25rem; color:var(--grey-900) }
.logo{ font-size:1.5rem }
.nav a{ margin-inline:.5rem; padding:.4rem .6rem; border-radius:10px }
.nav a:hover{ background:var(--cyan-100) }

/* Hero */
.hero{
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(6,182,212,0.15) 0%, rgba(6,182,212,0.06) 40%, #ffffff 70%);
  padding:60px 0 40px;
  text-align:center;
}
.hero h1{ font-size:clamp(1.6rem, 1.2rem + 2vw, 2.4rem); margin:0 0 .4rem; color:var(--grey-900) }
.hero p{ color:var(--grey-600); margin:0 auto 1rem; max-width:56ch }
.cta-row{ display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap }

/* Sections */
.section{ padding:56px 0 }
.section.alt{ background:var(--grey-100) }
.grid-2{ display:grid; grid-template-columns: 1fr; gap:1rem }
@media (min-width: 800px){
  .grid-2{ grid-template-columns:1.2fr .8fr }
}
.cards{ display:grid; grid-template-columns: repeat(2, 1fr); gap:1rem }
@media (min-width: 900px){
  .cards{ grid-template-columns: repeat(4, 1fr) }
}

.card{
  background:#fff; border:1px solid var(--grey-200); border-radius:var(--radius); padding:1rem; box-shadow:var(--shadow)
}
.bullet{ padding:0; margin:0; list-style:none }
.bullet li{ padding:.25rem 0; position:relative; color:var(--grey-700) }
.bullet li::before{ content:"•"; color:var(--cyan-600); margin-left:.5rem }

/* Buttons */
.btn{ display:inline-block; padding:.7rem 1rem; border-radius:12px; font-weight:700; border:1px solid transparent }
.btn.primary{ background:var(--cyan-600); color:white }
.btn.primary:hover{ filter:brightness(1.05) }
.btn.outline{ border-color:var(--cyan-600); color:var(--cyan-600); background:#fff }
.btn.outline:hover{ background:var(--cyan-100) }
.btn.small{ padding:.5rem .7rem; font-weight:600 }
.btn-row{ display:flex; gap:.5rem; flex-wrap:wrap }
.chip{ display:inline-block; padding:.45rem .7rem; background:var(--cyan-100); border:1px solid #b6f0f6; border-radius:999px; margin:.2rem 0 }

/* Footer */
.site-footer{ padding:22px 0; border-top:1px solid var(--grey-200); background:#fff }
.footer-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap }
.icon-btn{ font-size:1.1rem; padding:.3rem .55rem; color:var(--cyan-600) }

/* Floating quick actions */
.fab-bar{ position:fixed; bottom:14px; right:14px; display:flex; gap:.5rem; z-index:20 }
.fab{
  display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:50%;
  background:var(--cyan-600); color:#fff; text-decoration:none; box-shadow:var(--shadow)
}

/* Accessibility widget */
.a11y-toggle{
  position:fixed; bottom:14px; left:14px; z-index:30;
  padding:.6rem .9rem; border-radius:12px; background:var(--grey-900); color:#fff; border:0; box-shadow:var(--shadow)
}
.a11y-panel{
  position:fixed; bottom:66px; left:14px; z-index:31; width:min(92vw, 340px);
  background:#ffffff; border:2px solid var(--cyan-100); box-shadow:var(--shadow); border-radius:14px; padding:.6rem;
}
.a11y-row{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.4rem }
.a11y-controls{ display:grid; grid-template-columns: 1fr 1fr; gap:.4rem }
.a11y-controls button{ padding:.55rem .6rem; border-radius:10px; border:1px solid var(--grey-300); background:var(--grey-100); font-weight:600 }
.a11y-close{ border:0; background:var(--grey-100); border-radius:8px; padding:.3rem .6rem }

/* A11y states */
body.a11y-contrast{ filter:none; background:#000; color:#fff }
body.a11y-contrast .card{ background:#111; color:#fff; border-color:#333 }
body.a11y-contrast a{ color:#67e8f9 }
body.a11y-links a{ text-decoration: underline; text-decoration-thickness: 2px }
body.a11y-font-1{ font-size: 105% }
body.a11y-font-2{ font-size: 112% }
body.a11y-font-3{ font-size: 120% }

/* Forms */
form label{ display:grid; gap:.3rem; margin:.4rem 0 }
input, textarea{ padding:.6rem .7rem; border:1px solid var(--grey-300); border-radius:10px; font-size:1rem; font-family:inherit }
.hint{ font-size:.85rem; color:var(--grey-600) }