/* =============================================================
   hero-block.css
   Every value copied verbatim from Website/style.css.
   Token values resolved to their exact computed numbers below.

   Source token reference:
     --text-hero:          clamp(40px, 5vw, 64px)
     --lh-tight:           1.05
     --s-5:  20px   (margin after h1)
     --s-6:  28px   (margin after lead, gap in hero-ctas, margin-top stats)
     --s-7:  40px   (section padding top)
     --s-8:  56px   (column gap)
     --s-9:  72px   (section padding bottom)
     --ink:         #0A0F1E
     --ink-mid:     #4B5068
     --ink-muted:   #6B7088
     --line:        #E4E8F3
     --bg:          #FAFBFD
     --blu-primary: #1E50E5
     --blu-dark:    #0A2A8A
     --shadow-blue: 0 16px 40px rgba(30,80,229,0.20)
     --ease:        cubic-bezier(0.2, 0.8, 0.2, 1)
     --dur:         220ms
     --r-2:         8px
     --maxw:        1240px
     --gutter:      24px
     --text-small:  16px
     --text-section-title: clamp(28px, 3.4vw, 44px)
     --font-display: 'Neue Haas Grotesk Display', 'Helvetica Neue', Arial, sans-serif
   ============================================================= */


/* ── .hero section ────────────────────────────────────────── */
/* Source: padding: var(--s-7) 0 var(--s-9)  =  40px 0 72px  */
.hero {
  padding: 128px 0 96px;
  position: relative;
  overflow: hidden;
  background: #FAFBFD;          /* var(--bg) */
}

/* Radial glow — exact from source */
.hero::before {
  content: '';
  position: absolute;
  top: -200px;
  right: -200px;
  width: 720px;
  height: 720px;
  background: radial-gradient(ellipse, rgba(30, 80, 229, 0.08), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

html[dir="rtl"] .hero::before {
  right: auto;
  left: -200px;
}

/* ── .container — exact from source ──────────────────────── */
/* Source: max-width: var(--maxw) = 1240px; padding: 0 var(--gutter) = 0 24px */
.hero .container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── .hero-grid — exact from source ──────────────────────── */
/* Source: grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: var(--s-8) = 56px */
.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 56px;
  align-items: center;
}

/* ── .hero-text ───────────────────────────────────────────── */
/* Source: max-width: 580px */
.hero-text {
  max-width: 580px;
}

/* ── h1 — exact from source ──────────────────────────────── */
/* Source:
     font-size: var(--text-hero)  = clamp(40px, 5vw, 64px)
     line-height: var(--lh-tight) = 1.05
     letter-spacing: -0.035em
     font-weight: 600
     margin: 0 0 var(--s-5)      = 0 0 20px
     color: var(--ink)           = #0A0F1E
*/
.hero h1 {
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 600;
  margin: 0 0 20px;
  color: #0A0F1E;
}

html[dir="rtl"] .hero h1 {
  letter-spacing: 0;
  line-height: 1.15;
}

/* ── lead paragraph — exact from source ──────────────────── */
/* Source:
     font-size: var(--t-lead) = var(--text-body) = 16px
     font-weight: 500
     color: var(--ink-mid) = #4B5068
     margin: 0 0 var(--s-6)  = 0 0 28px
     line-height: 1.55
*/
.hero p.lead {
  font-size: 18px;
  font-weight: 300;
  color: #4B5068;
  margin: 0 0 28px;
  line-height: 1.55;
}
html[dir="rtl"] .hero-inline-stat-num{
    font-family: 'Noto Sans Arabic', 'Segoe UI', sans-serif !important;
}
/* Two lines rendered as separate block elements */
.hero .lead-line {
  display: block;
}

/* ── .hero-ctas — exact from source ──────────────────────── */
/* Source: gap: var(--s-3) = 12px; margin-bottom: var(--s-6) = 28px */
.hero-ctas {
  display: flex;
  gap: 12px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

/* ── .btn — resynced with current reference (button weight thinned
   from 700 to 600 sitewide; see TYPOGRAPHY-SYSTEM.md) ────────────── */
/* Source:
     padding: 12px 22px
     border-radius: var(--r-2) = 8px
     font-size: var(--text-small) = 16px
     font-weight: 600
     letter-spacing: -0.005em
     transition: all var(--dur) var(--ease) = all 220ms cubic-bezier(0.2,0.8,0.2,1)
     border: 1.5px solid transparent
*/
.hero .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: all 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
  border: 1.5px solid transparent;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
}

/* Source: .btn-primary { background: var(--blu-primary) = #1E50E5; color: #fff } */
.hero .btn-primary {
  background: #1E50E5;
  color: #fff;
}

/* Source: .btn-primary:hover { background: var(--blu-dark); transform: translateY(-1px); box-shadow: var(--shadow-blue) } */
.hero .btn-primary:hover {
  background: #0A2A8A;
  transform: translateY(-1px);
  box-shadow: 0 16px 40px rgba(30, 80, 229, 0.20);
  color: #fff;
}

/* btn-arrow: the SVG inside the button */
.hero .btn-arrow {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hero .btn:hover .btn-arrow {
  transform: translateX(3px);
}

html[dir="rtl"] .hero .btn .btn-arrow {
  transform: scaleX(-1);
}

html[dir="rtl"] .hero .btn:hover .btn-arrow {
  transform: scaleX(-1) translateX(3px);
}

/* ── .hero-inline-stats — exact from source ──────────────── */
/* Source:
     display: flex
     gap: var(--s-6) = 28px
     margin-top: var(--s-6) = 28px
     padding-top: var(--s-5) = 20px
     border-top: 1px solid var(--line) = #E4E8F3
     flex-wrap: wrap
*/
.hero-inline-stats {
  display: flex;
  gap: 28px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid #E4E8F3;
  flex-wrap: wrap;
}

/* Source: .hero-inline-stat { display:flex; flex-direction:column; gap:4px; min-width:88px } */
.hero-inline-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 88px;
}

/* Source:
     font-family: var(--font-display) = 'Neue Haas Grotesk Display',...
     font-size: 26px
     font-weight: 600
     color: var(--blu-primary) = #1E50E5
     letter-spacing: -0.02em
     line-height: 1
     — note: source does NOT use font-feature-settings here;
       that's on .hero-trust-number (a different block)
*/
.hero-inline-stat-num {
  font-family: 'Neue Haas Grotesk Display', 'Helvetica Neue', Arial, sans-serif;
  font-size: 26px;
  font-weight: 600;
  color: #1E50E5;
  letter-spacing: -0.02em;
  line-height: 1;
}

/* PATCH: keeps prefix/suffix (e.g. "+") pinned next to the number
   instead of being bidi-reordered on RTL/Arabic pages. Pairs with the
   renderCount() change in hero-block.js that wraps pre/suf in this span. */
.hero-inline-stat-num .stat-affix {
  unicode-bidi: isolate;
  direction: ltr;
  display: inline-block;
}

/* Source: .hero-inline-stat-label { font-size: var(--text-small) = 16px; color: var(--ink-muted) = #6B7088; line-height: 1.3 } */
.hero-inline-stat-label {
  font-size: 16px;
  color: #6B7088;
  line-height: 1.3;
}

/* ── .hero-mockup — exact from source ────────────────────── */
/* Source (Sprint 2 override):
     .hero-mockup { position: relative }
     .hero-mockup::before { inset:-5% -10%; radial-gradient blue halo }
*/
.hero-mockup {
  position: relative;
}

.hero-mockup::before {
  content: '';
  position: absolute;
  inset: -5% -10%;
  background: radial-gradient(
    ellipse at 50% 55%,
    rgba(72, 149, 255, 0.10) 0%,
    rgba(72, 149, 255, 0.04) 40%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}

/* Source (Sprint 2 override):
     width: 115%
     max-width: none
     margin-left: -7.5%
     filter: drop-shadow(0 30px 60px rgba(10,42,138,0.14)) drop-shadow(0 8px 20px rgba(10,15,30,0.06))
     position: relative
     z-index: 1
*/
.hero-devices-img {
  width: 115%;
  max-width: none;
  margin-left: -7.5%;
  height: auto;
  display: block;
  position: relative;
  z-index: 1;
  filter:
    drop-shadow(0 30px 60px rgba(10, 42, 138, 0.14))
    drop-shadow(0 8px 20px rgba(10, 15, 30, 0.06));
}

html[dir="rtl"] .hero-devices-img {
  margin-left: 0;
  margin-right: -7.5%;
}

/* ── .reveal — exact from source ─────────────────────────── */
/*
  NOTE: The source HTML has this inline in <head>:
    <style>.reveal{opacity:1 !important;transform:none !important}</style>
  That style is injected on page load and overrides the CSS below.
  The JS then manages reveal by adding .in once JS loads.
  We replicate this by:
    1. CSS defines the hidden + animated states
    2. JS adds .in to trigger them
    3. .above-fold elements start visible (opacity:1)
*/
.hero .reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hero .reveal.in {
  opacity: 1;
  transform: none;
}

/* Above-fold: already visible, no fade-in */
.hero .reveal.above-fold {
  opacity: 1;
  transform: none;
}

/* Stagger delays — exact from source */
.hero .reveal-d1 { transition-delay:  40ms; }
.hero .reveal-d2 { transition-delay:  80ms; }
.hero .reveal-d3 { transition-delay: 120ms; }
.hero .reveal-d4 { transition-delay: 160ms; }

@media (prefers-reduced-motion: reduce) {
  .hero .reveal,
  .hero .reveal.in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}

/* ── WordPress editor styles ──────────────────────────────── */
/* Force everything visible in the Gutenberg preview panel */
.wp-block[data-type="acf/hero"] .reveal,
.acf-block-preview .reveal {
  opacity: 1 !important;
  transform: none !important;
}

/* ── Responsive — exact from source ──────────────────────── */
/* Source: @media (max-width:980px) { .hero-grid { grid-template-columns:1fr; gap:var(--s-7)=40px } } */
@media (max-width: 980px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
.hero {
    padding: 88px 0 64px;
    position: relative;
    overflow: hidden;
    background: #FAFBFD;
}
  .hero-text {
    max-width: 100%;
    text-align: left;
  }

  html[dir="rtl"] .hero-text {
    text-align: right;
  }





  /* Source: @media (max-width:980px) { .hero-devices-img { width:100%; margin-left:0; max-width:640px } } */
  .hero-devices-img {
    width: 100%;
    margin-left: 0;
    max-width: 640px;
  }

  html[dir="rtl"] .hero-devices-img {
    margin-right: 0;
  }
}

/* Source: @media (max-width:720px) { .hero-inline-stats { gap: var(--s-5)=20px } .hero-inline-stat-num { font-size:22px } } */
@media (max-width: 720px) {
  .hero-inline-stats {
    gap: 20px;
  }
  .hero .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;}
  .hero p.lead {
  font-size: 16px;
  font-weight: 300;
  color: #4B5068;
  margin: 0 0 28px;
  line-height: 1.55;
}

  .hero .lead-line {
    display: inline;
}

  .hero-inline-stat-num {
    font-size: 22px;
  }
}