// CISO Page — Financial Compliance as a Service

function CISOBreadcrumb() {
  return (
    <div className="container" style={{ paddingTop: 20, paddingBottom: 12, fontSize: 13, color: 'var(--muted)' }}>
      <a href="Lawyerit Homepage.html" style={{ color: 'var(--muted)' }}>דף הבית</a>
      <span style={{ margin: '0 8px', color: 'var(--border)' }}>/</span>
      <a href="Lawyerit Homepage.html#services" style={{ color: 'var(--muted)' }}>שירותים</a>
      <span style={{ margin: '0 8px', color: 'var(--border)' }}>/</span>
      <span style={{ color: 'var(--ink-2)' }}>ציות פיננסי כשירות</span>
    </div>
  );
}

function CISOHero() {
  return (
    <section style={{ paddingTop: 40, paddingBottom: 100 }}>
      <div className="container ciso-hero-grid" style={{
        display: 'grid',
        gridTemplateColumns: '1.15fr 1fr',
        gap: 60,
        alignItems: 'center',
      }}>
        <div>
          <div className="eyebrow fade-up">
            <ET path="ciso.hero.eyebrow">ציות פיננסי כשירות · גופים מפוקחים · רשות ניירות ערך</ET>
          </div>
          <h1 className="fade-up fade-up-d1" style={{
            fontSize: 'clamp(38px, 5vw, 60px)',
            fontWeight: 700,
            lineHeight: 1.08,
            letterSpacing: '-0.035em',
            marginBottom: 24,
          }}>
            <ET path="ciso.hero.title.pre">קיבלתם רישיון. עכשיו מתחיל החלק </ET>
            <span style={{ color: 'var(--turquoise-700)' }}>
              <ET path="ciso.hero.title.accent">האמיתי.</ET>
            </span>
          </h1>
          <ETBlock path="ciso.hero.sub" as="p" className="fade-up fade-up-d2" style={{
            fontSize: 18.5, lineHeight: 1.6, color: 'var(--muted)',
            maxWidth: 560, marginBottom: 36,
          }}>
            רשות ניירות ערך העניקה רישיון לעשרות חברות תשלומים — ומהרגע שהרישיון ניתן, הרגולציה חלה במלואה. בניית מסגרת ציות, ממשק מול הרגולטור, ותחזוקה שוטפת — בלי לגייס קצין ציות פנימי.
          </ETBlock>
          <div className="fade-up fade-up-d3" style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <a href="Lawyerit Homepage.html#contact" className="btn btn-brand btn-lg">
              <ET path="ciso.hero.cta1">קביעת שיחת היכרות</ET>
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 4L6 8l4 4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </a>
            <a href="#included" className="btn btn-outline btn-lg">
              <ET path="ciso.hero.cta2">מה כלול בשירות</ET>
            </a>
          </div>
        </div>

        <div className="fade-up fade-up-d2" style={{ position: 'relative' }}>
          <CISOHeroVisual />
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .ciso-hero-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

// Visual: shield / compliance theme in turquoise
function CISOHeroVisual() {
  return (
    <div style={{
      position: 'relative', aspectRatio: '1/1', maxWidth: 480,
      marginInlineStart: 'auto',
    }}>
      <div className="dot-grid" style={{
        position: 'absolute', inset: 0, borderRadius: 24, opacity: 0.6,
        maskImage: 'radial-gradient(circle at center, black 30%, transparent 75%)',
      }} />

      {/* Shield SVG backdrop */}
      <svg viewBox="0 0 480 480" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
        <defs>
          <linearGradient id="shieldGrad" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stopColor="#47CBCB" stopOpacity="0.12" />
            <stop offset="100%" stopColor="#1F9D9D" stopOpacity="0.18" />
          </linearGradient>
          <linearGradient id="ringGrad" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stopColor="#47CBCB" stopOpacity="0.25" />
            <stop offset="100%" stopColor="#1F9D9D" stopOpacity="0.1" />
          </linearGradient>
        </defs>
        {/* Concentric rings */}
        <circle cx="240" cy="220" r="160" fill="none" stroke="url(#ringGrad)" strokeWidth="1.5"
          style={{ strokeDasharray: '1005', strokeDashoffset: '1005', animation: 'dashIn 2s 0.3s cubic-bezier(.4,0,.2,1) forwards' }} />
        <circle cx="240" cy="220" r="120" fill="none" stroke="url(#ringGrad)" strokeWidth="1"
          style={{ strokeDasharray: '754', strokeDashoffset: '754', animation: 'dashIn 2s 0.55s cubic-bezier(.4,0,.2,1) forwards' }} />
        {/* Shield shape */}
        <path d="M240 90 L310 120 L310 200 Q310 260 240 290 Q170 260 170 200 L170 120 Z"
          fill="url(#shieldGrad)" stroke="#47CBCB" strokeWidth="1.5" strokeOpacity="0.5"
          style={{ opacity: 0, animation: 'fadeIn 0.8s 0.8s forwards' }} />
        {/* Checkmark inside shield */}
        <path d="M218 195 L233 210 L262 175"
          fill="none" stroke="#1F9D9D" strokeWidth="5" strokeLinecap="round" strokeLinejoin="round"
          style={{ strokeDasharray: '60', strokeDashoffset: '60', animation: 'dashIn 0.7s 1.4s cubic-bezier(.4,0,.2,1) forwards' }} />
      </svg>

      {/* Compliance status card */}
      <div style={{
        position: 'absolute', top: '30%', insetInlineEnd: '6%',
        width: 216,
        background: 'white', border: '1px solid var(--border)',
        borderRadius: 14, padding: 18,
        boxShadow: '0 16px 36px -12px rgba(0,0,0,0.12)',
        opacity: 0, animation: 'fadeIn 0.6s 1.2s forwards',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
          <div style={{
            width: 28, height: 28, borderRadius: 6, background: 'var(--turquoise-50)', color: 'var(--turquoise-700)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
              <path d="M8 2 L13 4.5 L13 9 Q13 13 8 15 Q3 13 3 9 L3 4.5 Z" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round"/>
              <path d="M5.5 8.5 L7 10 L10.5 6" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </div>
          <div>
            <div style={{ fontSize: 13, fontWeight: 600 }}>מסגרת ציות</div>
            <div style={{ fontSize: 11, color: 'var(--muted)' }}>רשות ני"ע · פעיל</div>
          </div>
        </div>
        {[
          { label: 'נהלי AML', status: 'פעיל' },
          { label: 'דיווח לרגולטור', status: 'פעיל' },
          { label: 'הדרכת עובדים', status: 'בתהליך' },
        ].map((row, i) => (
          <div key={i} style={{
            display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            padding: '6px 0',
            borderTop: i ? '1px solid var(--border-2)' : 'none',
            fontSize: 12,
          }}>
            <span style={{ color: 'var(--ink-2)' }}>{row.label}</span>
            <span style={{ color: row.status === 'פעיל' ? 'var(--turquoise-700)' : 'var(--muted)', fontSize: 11 }}>
              {row.status === 'פעיל' ? '✓' : '·'} {row.status}
            </span>
          </div>
        ))}
      </div>

      {/* License badge */}
      <div style={{
        position: 'absolute', bottom: '14%', insetInlineStart: '6%',
        padding: '12px 16px', background: 'white',
        border: '1px solid var(--border)', borderRadius: 12,
        boxShadow: '0 14px 30px -10px rgba(0,0,0,0.12)',
        display: 'flex', alignItems: 'center', gap: 10,
        opacity: 0, animation: 'fadeIn 0.6s 1.5s forwards',
      }}>
        <div style={{
          width: 32, height: 32, borderRadius: 8,
          background: 'var(--turquoise-50)', display: 'flex',
          alignItems: 'center', justifyContent: 'center',
        }}>
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
            <rect x="2" y="2" width="12" height="12" rx="2" stroke="var(--turquoise-700)" strokeWidth="1.4"/>
            <path d="M5 8.5L7 10.5L11 6" stroke="var(--turquoise-700)" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </div>
        <div style={{ fontSize: 12, color: 'var(--muted)', lineHeight: 1.3 }}>
          רישיון ניתן<br />
          <span style={{ color: 'var(--turquoise-700)', fontWeight: 600 }}>הציות חייב להתחיל</span>
        </div>
      </div>

      <style>{`
        @keyframes dashIn { to { stroke-dashoffset: 0; } }
        @keyframes fadeIn { to { opacity: 1; } }
      `}</style>
    </div>
  );
}

// Context section — ISA regulatory position
function CISOContext() {
  return (
    <section className="section" style={{ background: 'var(--bg-2)', padding: '90px 0' }}>
      <div className="container" style={{
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64,
        alignItems: 'start',
      }} className="ciso-context-grid">
        <div>
          <div className="eyebrow">הרקע הרגולטורי</div>
          <h2 style={{ fontSize: 'clamp(26px, 3vw, 36px)', letterSpacing: '-0.03em', marginBottom: 28, lineHeight: 1.2 }}>
            <ET path="ciso.context.title">קצין הציות לא יכול להיות המנכ&quot;ל. רשות ני&quot;ע כבר אמרה את זה.</ET>
          </h2>
          <ETBlock path="ciso.context.p1" as="p" style={{ fontSize: 17, lineHeight: 1.65, color: 'var(--ink-2)', marginBottom: 18 }}>
            השבוע חידדה רשות ניירות ערך עמדה שנשמעה כבר בעבר: קצין ציות לא יכול לכהן במקביל כמנכ&quot;ל או יו&quot;ר דירקטוריון. &quot;ניגוד עניינים מובנה&quot; — כך הרשות מנסחת את זה.
          </ETBlock>
          <ETBlock path="ciso.context.p2" as="p" style={{ fontSize: 17, lineHeight: 1.65, color: 'var(--muted)', marginBottom: 18 }}>
            עמדה זו מופיעה במסמך הקריטריונים לתכנית אכיפה פנימית משנת 2011, בהוראות לקרנות נאמנות, ובחוזרי ממשל תאגידי. היא לא חדשה — אבל האכיפה שלה הולכת ומתחדדת.
          </ETBlock>
          <ETBlock path="ciso.context.p3" as="p" style={{ fontSize: 17, lineHeight: 1.65, color: 'var(--ink-2)' }}>
            הפתרון הנקי: קצינת ציות חיצונית. אין ניגוד עניינים. אין עלות של משרה פנימית. יש מסגרת מקצועית שעומדת בדרישות הרגולטור — מהיום הראשון.
          </ETBlock>
        </div>

        {/* Regulatory highlight card */}
        <div style={{
          background: 'white', border: '1px solid var(--border)',
          borderRadius: 16, padding: 28, alignSelf: 'start',
        }}>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 10, marginBottom: 20,
            paddingBottom: 16, borderBottom: '1px solid var(--border-2)',
          }}>
            <div style={{
              width: 36, height: 36, borderRadius: 8,
              background: 'var(--turquoise-50)', display: 'flex',
              alignItems: 'center', justifyContent: 'center', flexShrink: 0,
            }}>
              <svg width="18" height="18" viewBox="0 0 16 16" fill="none">
                <path d="M8 2 L13 4.5 L13 9 Q13 13 8 15 Q3 13 3 9 L3 4.5 Z"
                  stroke="var(--turquoise-700)" strokeWidth="1.4" strokeLinejoin="round"/>
              </svg>
            </div>
            <div>
              <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--ink)' }}>עמדת רשות ניירות ערך</div>
              <div style={{ fontSize: 12, color: 'var(--muted)' }}>הפרדת תפקידים — דרישה מחייבת</div>
            </div>
          </div>
          {[
            { src: 'תכנית אכיפה פנימית', year: '2011', detail: 'מסמך קריטריונים — הפרדת תפקיד הציות מההנהלה' },
            { src: 'הוראות קרנות נאמנות', year: 'מתמשך', detail: 'איסור כפל-תפקיד לקצין ציות' },
            { src: 'חוזרי ממשל תאגידי', year: 'מעודכן', detail: 'ניגוד עניינים מובנה — גישת האכיפה מתחדדת' },
          ].map((item, i) => (
            <div key={i} style={{
              padding: '14px 0',
              borderTop: i ? '1px solid var(--border-2)' : 'none',
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 4 }}>
                <div style={{ fontSize: 14, fontWeight: 500, color: 'var(--ink-2)' }}>{item.src}</div>
                <div style={{
                  padding: '2px 8px', background: 'var(--turquoise-50)',
                  color: 'var(--turquoise-700)', borderRadius: 999, fontSize: 11, fontWeight: 500, flexShrink: 0,
                }}>{item.year}</div>
              </div>
              <div style={{ fontSize: 13, color: 'var(--muted)', lineHeight: 1.4 }}>{item.detail}</div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) { .ciso-context-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

// 5 Triggers
const CISO_TRIGGERS = [
  { num: '01', title: 'קיבלתם רישיון מרשות ני"ע',
    desc: 'ומהיום הרגולציה חלה במלואה. מסגרת ציות, נהלים ודיווחים — לא אופציה, אלא חובה.' },
  { num: '02', title: 'המנכ"ל משמש גם כקצין ציות',
    desc: 'זה לא עומד בדרישות. הרשות ציינה במפורש שמדובר בניגוד עניינים מובנה שיש להפריד.' },
  { num: '03', title: 'ביקורת או פנייה מהרגולטור',
    desc: 'צריך מישהי שמכירה את השפה — ויודעת איך לנהל את התקשורת מול הרשות נכון.' },
  { num: '04', title: 'הכנה לביקורת פנימית או חיצונית',
    desc: 'הדירקטוריון רוצה לראות שהציות עובד. צריך תיעוד, בקרות, ודוחות שעומדים בסטנדרט.' },
  { num: '05', title: 'גדילה שמחייבת מסגרת מסודרת',
    desc: 'מה שעבד "בינתיים" כבר לא מספיק. כשהפעילות גדלה, הרגולטור מצפה לתשובות — לא לתירוצים.' },
];

function CISOTriggers() {
  return (
    <section style={{ padding: '90px 0' }}>
      <div className="container">
        <div style={{ maxWidth: 720, marginBottom: 48 }}>
          <div className="eyebrow">מתי פונים אלינו</div>
          <h2 style={{ fontSize: 'clamp(30px, 3vw, 40px)', letterSpacing: '-0.03em', marginBottom: 14 }}>
            <ET path="ciso.triggers.title">חמישה רגעים שבהם ציות הופך דחוף.</ET>
          </h2>
          <ETBlock path="ciso.triggers.sub" as="p" style={{ fontSize: 17, color: 'var(--muted)', lineHeight: 1.6 }}>
            מי שפונה אלינו לא מחפש &quot;קצין ציות&quot;. הוא מחפש דרך לעמוד ברגולציה מבלי לשבש את הפעילות השוטפת.
          </ETBlock>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24,
        }} className="ciso-triggers-grid">
          {CISO_TRIGGERS.map((t, i) => (
            <div key={i} style={{
              background: 'white', border: '1px solid var(--border)',
              borderRadius: 14, padding: 26,
              transition: 'all 0.2s',
              gridColumn: i === 3 ? 'span 1' : 'auto',
            }}
            onMouseEnter={e => e.currentTarget.style.borderColor = 'var(--turquoise-700)'}
            onMouseLeave={e => e.currentTarget.style.borderColor = 'var(--border)'}>
              <div className="en num" style={{
                fontSize: 13, fontWeight: 500, color: 'var(--turquoise-700)',
                letterSpacing: '0.04em', marginBottom: 12,
              }}>{t.num}</div>
              <h3 style={{ fontSize: 17, fontWeight: 600, marginBottom: 10, letterSpacing: '-0.01em', lineHeight: 1.35 }}>
                <ET path={`ciso.triggers.${i}.title`}>{t.title}</ET>
              </h3>
              <ETBlock path={`ciso.triggers.${i}.desc`} as="p" style={{ fontSize: 14.5, color: 'var(--muted)', lineHeight: 1.55 }}>
                {t.desc}
              </ETBlock>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 980px) { .ciso-triggers-grid { grid-template-columns: repeat(2, 1fr) !important; } }
        @media (max-width: 640px)  { .ciso-triggers-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

// What's included
const CISO_INCLUDED = [
  'בניית מסגרת ציות מותאמת לרישיון ולפעילות',
  'כתיבת נהלים, בקרות ומדיניות פנים-ארגונית',
  'ממשק שוטף מול רשות ניירות ערך',
  'עדכוני רגולציה ודוחות תקופתיים לדירקטוריון',
  'ייעוץ שוטף לצוות על שאלות ציות יומיומיות',
  'ליווי בביקורות ופניות רגולטוריות',
  'הכנת חומרי הדרכה לעובדים',
];

function CISOIncluded() {
  return (
    <section id="included" style={{ background: 'var(--bg-2)', padding: '90px 0' }}>
      <div className="container">
        <div style={{ maxWidth: 720, marginBottom: 48 }}>
          <div className="eyebrow">השירות</div>
          <h2 style={{ fontSize: 'clamp(30px, 3vw, 40px)', letterSpacing: '-0.03em', marginBottom: 14 }}>
            <ET path="ciso.included.title">קצינת ציות מלאה — בלי להקים תפקיד פנימי.</ET>
          </h2>
          <ETBlock path="ciso.included.sub" as="p" style={{ fontSize: 17, color: 'var(--muted)', lineHeight: 1.6 }}>
            עבודה שוטפת כקצינת ציות חיצונית — ליווי שוטף על בסיס תוצרים מוסכמים. בלי הפתעות, בלי ניגוד עניינים, עם מסגרת שעומדת בדרישות מהיום הראשון.
          </ETBlock>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 32, alignItems: 'start',
        }} className="ciso-included-grid">
          {/* Services list */}
          <div style={{
            background: 'white', border: '1px solid var(--border)',
            borderRadius: 16, padding: 32,
          }}>
            <div style={{
              fontSize: 12, fontWeight: 600, letterSpacing: '0.06em',
              color: 'var(--turquoise-700)', marginBottom: 20, textTransform: 'uppercase',
            }}>
              <ET path="ciso.included.listTitle">מה כלול בשירות</ET>
            </div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 16 }}>
              {CISO_INCLUDED.map((item, i) => (
                <li key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 12, fontSize: 15.5, color: 'var(--ink-2)', lineHeight: 1.5 }}>
                  <div style={{
                    width: 20, height: 20, borderRadius: 6,
                    background: 'var(--turquoise-50)', color: 'var(--turquoise-700)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    flexShrink: 0, marginTop: 2,
                  }}>
                    <svg width="10" height="10" viewBox="0 0 10 10"><path d="M2 5.5 L4 7.5 L8 3" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" fill="none"/></svg>
                  </div>
                  <ET path={`ciso.included.${i}`}>{item}</ET>
                </li>
              ))}
            </ul>
          </div>

          {/* Model card */}
          <div style={{
            background: 'white', border: '1px solid var(--border)',
            borderRadius: 16, padding: 28, alignSelf: 'start',
          }}>
            <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--turquoise-700)', marginBottom: 16, letterSpacing: '0.04em' }}>
              מודל העבודה
            </div>
            {[
              { label: 'ליווי שוטף', desc: 'תשלום על תוצרים מוסכמים — בלי שעתי, בלי הפתעות' },
              { label: 'זמינות', desc: 'ממשק ישיר מול הרגולטור ומול הצוות הפנימי' },
              { label: 'התאמה אישית', desc: 'מסגרת ציות מותאמת לרישיון ולסוג הפעילות' },
              { label: 'הפרדה נקייה', desc: 'אין ניגוד עניינים — קצינת ציות עצמאית ומוסמכת' },
            ].map((item, i) => (
              <div key={i} style={{
                padding: '12px 0',
                borderTop: i ? '1px solid var(--border-2)' : 'none',
              }}>
                <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--ink-2)', marginBottom: 4 }}>{item.label}</div>
                <div style={{ fontSize: 13, color: 'var(--muted)', lineHeight: 1.5 }}>{item.desc}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 780px) { .ciso-included-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

// Who it's for
const CISO_WHO = [
  'חברות תשלומים שקיבלו רישיון מרשות ני"ע',
  'גופים מפוקחים ללא קצין ציות פנימי מוסמך',
  'חברות שהמנכ"ל מכהן כקצין ציות — ורוצות להפריד',
  'ארגונים שקיבלו פנייה מהרגולטור וצריכים סדר מהיר',
];

function CISOWhoFor() {
  return (
    <section className="section" style={{ padding: '90px 0' }}>
      <div className="container" style={{
        display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 64, alignItems: 'center',
      }} className="ciso-who-grid">
        <div>
          <div className="eyebrow">למי זה מתאים</div>
          <h2 style={{ fontSize: 'clamp(28px, 3vw, 38px)', letterSpacing: '-0.03em', marginBottom: 24, lineHeight: 1.2 }}>
            <ET path="ciso.who.title">גופים מפוקחים שצריכים מסגרת ציות — מהיום הראשון.</ET>
          </h2>
          <ETBlock path="ciso.who.sub" as="p" style={{ fontSize: 17, lineHeight: 1.65, color: 'var(--muted)' }}>
            הרגולציה לא מחכה לכם לגייס עובד. אנחנו בונים את המסגרת, מנהלים את הממשק מול הרשות, ומוודאים שהפעילות עומדת בדרישות — בזמן שאתם ממשיכים לצמוח.
          </ETBlock>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          {CISO_WHO.map((item, i) => (
            <div key={i} style={{
              background: 'white', border: '1px solid var(--border)',
              borderRadius: 12, padding: '18px 22px',
              display: 'flex', alignItems: 'flex-start', gap: 14,
              transition: 'border-color 0.2s',
            }}
            onMouseEnter={e => e.currentTarget.style.borderColor = 'var(--turquoise)'}
            onMouseLeave={e => e.currentTarget.style.borderColor = 'var(--border)'}>
              <div style={{
                width: 22, height: 22, borderRadius: '50%',
                background: 'var(--turquoise-50)', color: 'var(--turquoise-700)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                flexShrink: 0, marginTop: 1,
              }}>
                <svg width="10" height="10" viewBox="0 0 10 10"><path d="M2 5.5 L4 7.5 L8 3" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" fill="none"/></svg>
              </div>
              <span style={{ fontSize: 15.5, color: 'var(--ink-2)', lineHeight: 1.5 }}>
                <ET path={`ciso.who.${i}`}>{item}</ET>
              </span>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) { .ciso-who-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

function CISOPageCTA() {
  return (
    <section id="contact" style={{
      padding: '100px 0',
      background: 'linear-gradient(135deg, #1F9D9D 0%, #2FB5B5 50%, #47CBCB 100%)',
      color: '#fff', position: 'relative', overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'radial-gradient(circle, rgba(255,255,255,0.18) 1px, transparent 1.4px)',
        backgroundSize: '28px 28px',
        maskImage: 'radial-gradient(ellipse at center, black 30%, transparent 75%)',
        opacity: 0.5,
      }} />
      <div className="container" style={{ position: 'relative', textAlign: 'center', maxWidth: 720 }}>
        <h2 style={{
          fontSize: 'clamp(32px, 4vw, 48px)',
          fontWeight: 700, letterSpacing: '-0.03em',
          marginBottom: 18, lineHeight: 1.12,
        }}>
          <ET path="ciso.cta.title">בואו נבין מה הרגולטור מצפה מכם — ואיך להיות מוכנים.</ET>
        </h2>
        <ETBlock path="ciso.cta.sub" as="p" style={{
          fontSize: 18, lineHeight: 1.55,
          color: 'rgba(255,255,255,0.88)', marginBottom: 32, maxWidth: 580, marginInline: 'auto',
        }}>
          שיחת היכרות של 30 דקות, ללא עלות וללא התחייבות. אחריה תקבלו תמונה ברורה של מה נדרש, ומה הצעד הראשון.
        </ETBlock>
        <a href="Lawyerit Homepage.html#contact" className="btn btn-lg" style={{
          background: '#0F1115', color: '#fff',
          padding: '16px 32px', fontSize: 16, borderRadius: 12,
        }}>
          <ET path="ciso.cta.cta">קביעת שיחת היכרות</ET>
          <svg width="16" height="16" viewBox="0 0 16 16"><path d="M10 4L6 8l4 4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" fill="none"/></svg>
        </a>
      </div>
    </section>
  );
}

Object.assign(window, {
  CISOBreadcrumb, CISOHero, CISOHeroVisual, CISOContext,
  CISOTriggers, CISOIncluded, CISOWhoFor, CISOPageCTA,
});