/* Auto-generated from mockups/07-salotime-tier4.html */
(function(){

const { useState, useEffect, useRef } = React;

    const WA_TIER4 = 'https://wa.me/972534200984?text=' + encodeURIComponent("Hi BoldBrandz, I'm interested in the UX/UI & Apps tier");

    const Icon = ({ size = 16, children, style }) => (
      <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ flex:'none', ...style }}>{children}</svg>
    );
    const Check = (p) => <Icon {...p}><path d="M20 6L9 17l-5-5"/></Icon>;
    const ArrowRight = (p) => <Icon {...p}><path d="M5 12h14M13 5l7 7-7 7"/></Icon>;
    const WA = ({ size = 18 }) => (
      <svg viewBox="0 0 24 24" width={size} height={size} fill="currentColor" style={{ flex:'none' }}>
        <path d="M17.5 14.4c-.3-.1-1.7-.9-2-1-.3-.1-.5-.1-.7.1-.2.3-.8 1-1 1.2-.2.2-.4.2-.7.1-.3-.1-1.3-.5-2.4-1.5-.9-.8-1.5-1.8-1.7-2.1-.2-.3 0-.5.1-.6l.5-.5c.2-.2.2-.3.3-.5 0-.2 0-.4 0-.5 0-.1-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.4 0 1.4 1 2.8 1.2 3 .1.2 2 3 4.7 4.2 1.7.7 2.3.8 3.1.7.5-.1 1.7-.7 1.9-1.4.2-.7.2-1.3.2-1.4-.1-.1-.3-.2-.5-.2zM12 2C6.5 2 2 6.5 2 12c0 1.9.5 3.7 1.5 5.3L2 22l4.8-1.5c1.5.8 3.3 1.3 5.2 1.3 5.5 0 10-4.5 10-10S17.5 2 12 2z"/>
      </svg>
    );

    function useReveal(threshold = 0.15) {
      const ref = useRef(null);
      useEffect(() => {
        if (!ref.current) return;
        const el = ref.current;
        const r = el.getBoundingClientRect();
        if (r.top < window.innerHeight * 0.92 && r.bottom > 0) { el.classList.add('in'); return; }
        const io = new IntersectionObserver(([e]) => {
          if (e.isIntersecting) { el.classList.add('in'); io.disconnect(); }
        }, { threshold });
        io.observe(el);
        return () => io.disconnect();
      }, [threshold]);
      return ref;
    }
    function useInViewBoolean(threshold = 0.25) {
      const ref = useRef(null);
      const [inView, setInView] = useState(false);
      useEffect(() => {
        if (!ref.current) return;
        const r = ref.current.getBoundingClientRect();
        if (r.top < window.innerHeight * 0.9 && r.bottom > 0) { setInView(true); return; }
        const io = new IntersectionObserver(([e]) => {
          if (e.isIntersecting) { setInView(true); io.disconnect(); }
        }, { threshold });
        io.observe(ref.current);
        return () => io.disconnect();
      }, [threshold]);
      return [ref, inView];
    }
    /* ── Metric reveal (pop + fade). DOM default = final number so static
       exports capture real values. On `active`, pop scale(0.9)→scale(1)
       with opacity 0→1 over 600ms. ── */
    function useMetricPop({ active, delay = 0 } = {}) {
      const [popped, setPopped] = useState(false);
      useEffect(() => {
        if (!active) { setPopped(false); return; }
        const reduce = window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches;
        if (reduce) { setPopped(true); return; }
        const id = setTimeout(() => setPopped(true), delay);
        return () => clearTimeout(id);
      }, [active, delay]);
      return {
        display: 'inline-block',
        opacity: popped ? 1 : 0,
        transform: popped ? 'scale(1)' : 'scale(0.9)',
        transition: 'opacity 600ms cubic-bezier(0.34, 1.56, 0.64, 1), transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1)',
        transformOrigin: 'left center',
        willChange: 'transform, opacity',
      };
    }
    const fmt = (n) => n.toLocaleString('en-US');

    function Button({ glow = false, children, href }) {
      const [hover, setHover] = useState(false);
      return (
        <a
          href={href} target="_blank" rel="noopener noreferrer"
          data-gtm-event="Lead_WhatsApp_Tier4CTA"
          onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
          style={{
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 10,
            fontFamily: 'var(--font-display)', fontWeight: 600,
            height: 54, padding: '0 32px', fontSize: 15,
            borderRadius: 10, border: '1px solid transparent', textDecoration: 'none',
            letterSpacing: '-0.005em', whiteSpace: 'nowrap',
            transition: 'all 180ms var(--ease-out)',
            background: hover ? '#0035cc' : '#0047ff', color: '#fff',
            boxShadow: glow ? (hover ? '0 0 40px rgba(0,71,255,0.65)' : '0 0 24px rgba(0,71,255,0.45)') : 'none',
          }}
        >{children}</a>
      );
    }

    function Eyebrow({ children, accentDot = '#0047ff' }) {
      return (
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 10,
          fontFamily: 'var(--font-mono)', fontSize: 14, color: 'var(--text-dim)',
          letterSpacing: '0.16em', textTransform: 'uppercase',
        }}>
          <span style={{ width: 6, height: 6, borderRadius: 9999, background: accentDot, boxShadow: `0 0 8px ${accentDot}` }}/>
          {children}
        </div>
      );
    }
    function CardTag({ children }) {
      return (
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          padding: '7px 13px', borderRadius: 9999,
          background: 'rgba(0,71,255,0.10)', border: '1px solid rgba(0,71,255,0.30)',
          fontFamily: 'var(--font-display)', fontSize: 14, fontWeight: 600,
          letterSpacing: '0.12em', textTransform: 'uppercase', color: '#9fb8ff',
        }}>
          <span style={{ width: 6, height: 6, borderRadius: 9999, background: '#0047ff', boxShadow: '0 0 8px #0047ff' }}/>
          {children}
        </div>
      );
    }

    function PhoneMockup({ src, alt }) {
      return (
        <div className="phone">
          <div className="phone-screen">
            <img src={src} alt={alt}/>
          </div>
        </div>
      );
    }

    /* ── Header ───────────────────────────────────────── */
    function Header() {
      const ref = useReveal();
      const t = window.useCopy();
      return (
        <div ref={ref} className="reveal" style={{ maxWidth: 980, margin: '0 auto', textAlign: 'center' }}>
          <div style={{ marginBottom: 22 }}>
            <Eyebrow>{t.salo.badge}</Eyebrow>
          </div>
          <h2 className="section-h2" style={{
            margin: '0 0 28px',
            fontFamily: 'var(--font-display)', fontWeight: 600,
            fontSize: 56, lineHeight: 1.08, letterSpacing: '-0.035em',
            color: 'var(--text-primary)', textWrap: 'balance',
          }}>
            {t.salo.h1}
          </h2>
          <p style={{
            margin: '0 auto 28px', maxWidth: 760,
            fontFamily: 'var(--font-display)', fontWeight: 400,
            fontSize: 18, lineHeight: 1.6, color: 'var(--text-secondary)',
          }}>
            {t.salo.body}
          </p>
          {/* Compact single-line meta */}
          <div style={{
            display: 'flex', justifyContent: 'center', marginTop: 24,
            paddingTop: 20, borderTop: '1px solid var(--border-subtle)',
          }}>
            <div style={{
              display: 'flex', flexWrap: 'wrap', justifyContent: 'center',
              alignItems: 'center', gap: 14,
              fontFamily: 'var(--font-mono)', fontSize: 14, color: 'var(--text-dim)',
              letterSpacing: '0.12em', textTransform: 'uppercase',
            }}>
              <span>{t.salo.meta}</span>
            </div>
          </div>
        </div>
      );
    }

    /* ── Before/After comparison ──────────────────────── */
    function BeforeAfter() {
      const ref = useReveal(0.1);
      const t = window.useCopy();
      const col = (label, color, src, alt, caption) => (
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 20 }}>
          <div style={{
            fontFamily: 'var(--font-mono)', fontSize: 14,
            letterSpacing: '0.22em', textTransform: 'uppercase',
            color, fontWeight: 600,
          }}>{label}</div>
          <PhoneMockup src={src} alt={alt}/>
          <div style={{
            maxWidth: 280, textAlign: 'center',
            fontFamily: 'var(--font-display)', fontSize: 16, lineHeight: 1.5,
            color: 'var(--text-muted)',
          }}>
            {caption}
          </div>
        </div>
      );
      return (
        <div ref={ref} className="reveal ba-grid" style={{
          margin: '96px auto 0', maxWidth: 960,
          display: 'grid',
          gridTemplateColumns: '1fr auto 1fr',
          gap: 24,
          alignItems: 'start',
        }}>
          {col(
            t.salo.before, '#f87171',
            'mockups/assets/salotime-before-signup.png',
            'Salotime — old signup screen, cluttered',
            t.salo.before_caption
          )}
          {/* Arrow column */}
          <div className="arrow-col" style={{
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            height: '100%', padding: '0 8px',
          }}>
            <div style={{
              display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12,
              color: 'var(--text-faint)',
            }}>
              <div style={{ width: 1, height: 80, background: 'linear-gradient(180deg, transparent, var(--border-subtle))' }}/>
              <ArrowRight size={22}/>
              <div style={{ width: 1, height: 80, background: 'linear-gradient(180deg, var(--border-subtle), transparent)' }}/>
            </div>
          </div>
          {col(
            t.salo.after, '#0047ff',
            'mockups/assets/salotime-after-intro.png',
            'Salotime — new premium intro carousel',
            t.salo.after_caption
          )}
        </div>
      );
    }

    /* ── Additional proof strip ───────────────────────── */
    function ProofStrip() {
      const ref = useReveal(0.1);
      const t = window.useCopy();
      return (
        <div ref={ref} className="reveal" style={{ margin: '80px auto 0', maxWidth: 760 }}>
          <div className="proof-row" style={{
            display: 'flex', justifyContent: 'center', gap: 40, flexWrap: 'wrap',
          }}>
            <PhoneMockup src="mockups/assets/salotime-after-home.png" alt="Salotime — new home with verticals"/>
            <PhoneMockup src="mockups/assets/salotime-after-otp.png" alt="Salotime — new OTP sign-in"/>
          </div>
          <div style={{
            marginTop: 24, textAlign: 'center',
            fontFamily: 'var(--font-mono)', fontSize: 18, color: 'var(--text-faint)',
            letterSpacing: '0.16em', textTransform: 'uppercase',
          }}>
            {t.salo.after_tagline}
          </div>
        </div>
      );
    }

    /* ── The Build ────────────────────────────────────── */
    function TheBuild() {
      const ref = useReveal();
      const t = window.useCopy();
      return (
        <div ref={ref} className="reveal" style={{ margin: '120px auto 0', maxWidth: 900 }}>
          <div style={{ textAlign: 'center', marginBottom: 40 }}>
            <div style={{ marginBottom: 16 }}>
              <Eyebrow>{t.salo.build.badge}</Eyebrow>
            </div>
            <h3 style={{
              margin: 0,
              fontFamily: 'var(--font-display)', fontWeight: 600,
              fontSize: 38, lineHeight: 1.1, letterSpacing: '-0.035em',
              color: 'var(--text-primary)', textWrap: 'balance',
            }}>
              {t.salo.build.h}
            </h3>
          </div>
          <div className="build-grid" style={{
            display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)',
            gap: '14px 28px',
          }}>
            {t.salo.build.moves.map((line, i) => (
              <div key={i} style={{
                display: 'flex', alignItems: 'flex-start', gap: 14,
                padding: '18px 22px',
                background: 'var(--bg-elevated)', border: '1px solid var(--border-subtle)', borderRadius: 14,
                fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 400,
                lineHeight: 1.5, color: 'var(--text-secondary)',
              }}>
                <span style={{
                  flex: 'none', width: 22, height: 22, borderRadius: 9999,
                  background: 'rgba(34,197,94,0.12)',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  color: '#22c55e', marginTop: 1,
                }}>
                  <Check size={13}/>
                </span>
                <span>{line}</span>
              </div>
            ))}
          </div>
        </div>
      );
    }

    /* ── Result metrics ───────────────────────────────── */
    function MetricCard({ label, note, pillText, pillColor, num, unit, format = 'comma', currency, hero = false, delay, active }) {
      const popStyle = useMetricPop({ active, delay });
      const display = format === 'comma' ? fmt(num) : num;
      const pillBg = pillColor === 'red'
        ? { bg: 'rgba(248,113,113,0.10)', border: 'rgba(248,113,113,0.25)', fg: '#fca5a5', dot: '#f87171' }
        : { bg: 'rgba(34,197,94,0.12)', border: 'rgba(34,197,94,0.25)', fg: '#86efac', dot: '#22c55e' };
      const numSize = hero ? 76 : 60;
      const glowStrength = hero ? '0 0 40px rgba(0,71,255,0.70)' : '0 0 22px rgba(0,71,255,0.45)';
      return (
        <div style={{
          position: 'relative',
          padding: hero ? '38px 30px' : '34px 28px',
          background: hero ? 'var(--bg-elevated)' : 'var(--bg-card)',
          border: hero ? '1px solid var(--border-subtle)' : '1px solid var(--border-subtle)',
          borderRadius: 18,
          overflow: 'hidden',
          boxShadow: hero ? '0 24px 60px -20px rgba(0,71,255,0.22)' : 'none',
        }}>
          <div style={{
            position: 'absolute', top: 0, left: 0, right: 0,
            height: hero ? 3 : 2,
            background: '#0047ff',
            boxShadow: hero ? '0 0 14px rgba(0,71,255,0.65)' : 'none',
          }}/>

          {/* Pill */}
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 6,
            padding: '5px 11px', borderRadius: 9999,
            background: pillBg.bg, border: `1px solid ${pillBg.border}`,
            fontFamily: 'var(--font-mono)', fontSize: 13, fontWeight: 600,
            letterSpacing: '0.16em', textTransform: 'uppercase', color: pillBg.fg,
            marginBottom: 22,
          }}>
            <span style={{ width: 5, height: 5, borderRadius: 9999, background: pillBg.dot }}/>
            {pillText}
          </div>

          {/* Number */}
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, flexWrap: 'wrap', marginBottom: 14 }}>
            {currency === 'pre' && (
              <span style={{
                fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 24,
                color: 'var(--text-muted)',
              }}>₪</span>
            )}
            <span style={{
              fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: numSize,
              color: '#0047ff', letterSpacing: '-0.045em', fontVariantNumeric: 'tabular-nums',
              lineHeight: 0.95, textShadow: glowStrength,
              direction: 'ltr', unicodeBidi: 'isolate',
            }}><span style={popStyle}>{display}</span></span>
            {currency === 'post' && (
              <span style={{
                fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 24,
                color: '#0047ff', textShadow: glowStrength,
              }}>₪</span>
            )}
            {unit && (
              <span style={{
                fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 13,
                color: 'var(--text-muted)', letterSpacing: '0.16em', textTransform: 'uppercase',
              }}>{unit}</span>
            )}
          </div>

          {/* Label */}
          <div style={{
            fontFamily: 'var(--font-display)', fontWeight: 400,
            fontSize: hero ? 18 : 18,
            color: hero ? 'var(--text-secondary)' : 'var(--text-muted)', lineHeight: 1.5,
          }}>
            {label}
          </div>
          {note && (
            <div style={{
              marginTop: 10,
              fontFamily: 'var(--font-mono)', fontSize: 18, fontWeight: 500,
              letterSpacing: '0.06em', color: 'var(--text-dim)', lineHeight: 1.5,
            }}>
              {note}
            </div>
          )}
        </div>
      );
    }

    function Results() {
      const [ref, inView] = useInViewBoolean();
      const t = window.useCopy();
      return (
        <div style={{ margin: '120px auto 0', maxWidth: 1100 }}>
          <div style={{ textAlign: 'center', marginBottom: 48 }}>
            <div style={{ marginBottom: 16 }}>
              <Eyebrow accentDot="#22c55e">{t.salo.result.badge}</Eyebrow>
            </div>
            <h3 style={{
              margin: 0,
              fontFamily: 'var(--font-display)', fontWeight: 600,
              fontSize: 42, lineHeight: 1.1, letterSpacing: '-0.035em',
              color: 'var(--text-primary)', textWrap: 'balance',
            }}>
              {t.salo.result.h}
            </h3>
          </div>
          <div ref={ref} className="metric-row" style={{
            display: 'grid',
            gridTemplateColumns: '1fr 1.15fr 1fr',
            gap: 20,
            alignItems: 'stretch',
          }}>
            <div>
              <MetricCard
                num={10000}
                currency="post"
                label={t.salo.result.cards[0].label}
                pillText={t.salo.result.cards[0].badge}
                pillColor="red"
                delay={0} active={inView}
              />
            </div>
            <div>
              <MetricCard
                num={120000}
                currency="post"
                label={t.salo.result.cards[1].label}
                note={t.salo.result.cards[1].sub}
                pillText={t.salo.result.cards[1].badge}
                pillColor="green"
                hero
                delay={80} active={inView}
              />
            </div>
            <div>
              <MetricCard
                num={3}
                format="plain"
                unit={t.salo.result.cards[2].unit}
                label={t.salo.result.cards[2].label}
                pillText={t.salo.result.cards[2].badge}
                pillColor="green"
                delay={160} active={inView}
              />
            </div>
          </div>
        </div>
      );
    }

    /* ── Transition ───────────────────────────────────── */
    function Transition() {
      const ref = useReveal();
      const t = window.useCopy();
      return (
        <div ref={ref} className="reveal" style={{
          margin: '120px auto 0', maxWidth: 760, textAlign: 'center',
        }}>
          <div style={{ height: 1, background: 'var(--border-subtle)', marginBottom: 48 }}/>
          <p style={{
            margin: '0 auto 14px',
            fontFamily: 'var(--font-display)', fontWeight: 500, fontStyle: 'italic',
            fontSize: 22, lineHeight: 1.4, color: 'var(--text-primary)',
            textWrap: 'balance',
          }}>
            {t.salo.tier4.transition_p1}
          </p>
          <p style={{
            margin: '0 auto 24px', maxWidth: 620,
            fontFamily: 'var(--font-display)', fontWeight: 400,
            fontSize: 19, lineHeight: 1.6, color: 'var(--text-muted)',
          }}>
            {t.salo.tier4.transition_p2}
          </p>
          <a className="cta-link" onClick={(e) => {
            e.preventDefault();
            const el = document.getElementById('tier-4');
            if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
          }}>
            {t.salo.tier4.link} <ArrowRight size={14}/>
          </a>
        </div>
      );
    }

    /* ── Tier 4 Service Card ──────────────────────────── */
    function Tier4Card() {
      const ref = useReveal(0.1);
      const t = window.useCopy();
      const { lang } = window.useLang();
      return (
        <div ref={ref} className="reveal svc-card tier-card" style={{
          position: 'relative',
          background: 'var(--bg-card)',
          border: '1px solid var(--border-subtle)',
          borderRadius: 20,
          padding: '44px 48px 40px',
          boxShadow: '0 18px 48px -16px rgba(0,0,0,0.55)',
          overflow: 'hidden',
        }}>
          <div style={{
            position: 'absolute', top: 0, left: 24, right: 24, height: 2,
            background: '#0047ff',
            boxShadow: '0 0 14px rgba(0,71,255,0.55)',
          }}/>

          <div style={{
            display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between',
            gap: 24, marginBottom: 26, flexWrap: 'wrap',
          }}>
            <div>
              <div style={{ marginBottom: 14 }}>
                <CardTag>{t.t4.pill}</CardTag>
              </div>
              {lang === 'ar' && (
              <div style={{
                fontFamily: 'var(--font-arabic)', fontWeight: 500,
                fontSize: 22, lineHeight: 1.3, color: 'var(--text-muted)',
                direction: 'rtl', textAlign: 'left',
              }}>
                {t.t4.ar_sub}
              </div>
              )}
            </div>
          </div>

          <h3 style={{
            margin: '0 0 40px',
            fontFamily: 'var(--font-display)', fontWeight: 600,
            fontSize: 32, lineHeight: 1.2, letterSpacing: '-0.025em',
            color: 'var(--text-primary)', textWrap: 'balance', maxWidth: 820,
          }}>
            {t.t4.title}
          </h3>

          <div style={{
            display: 'flex', alignItems: 'center', gap: 12, marginBottom: 22,
          }}>
            <div style={{
              fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--text-dim)',
              letterSpacing: '0.16em', textTransform: 'uppercase',
            }}>{t.tiers.whats_included}</div>
            <div style={{ flex: 1, height: 1, background: 'var(--border-subtle)' }}/>
          </div>

          <div className="inclusions-grid" style={{
            display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '14px 36px',
          }}>
            {t.t4.features.map((line, i) => (
              <div key={i} style={{
                display: 'flex', alignItems: 'flex-start', gap: 12,
                fontFamily: 'var(--font-display)', fontSize: 15, fontWeight: 400,
                lineHeight: 1.5, color: 'var(--text-secondary)',
              }}>
                <span style={{
                  flex: 'none', width: 22, height: 22, borderRadius: 9999,
                  background: 'rgba(34,197,94,0.12)',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  color: '#22c55e', marginTop: 1,
                }}>
                  <Check size={13}/>
                </span>
                <span>{line}</span>
              </div>
            ))}
          </div>

          <div style={{
            marginTop: 40, paddingTop: 32, borderTop: '1px solid var(--border-subtle)',
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            gap: 32, flexWrap: 'wrap',
          }}>
            <div>
              <div style={{
                fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--text-dim)',
                letterSpacing: '0.16em', textTransform: 'uppercase', marginBottom: 8,
              }}>{t.tiers.investment}</div>
              <div style={{
                fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 500,
                color: 'var(--text-muted)', lineHeight: 1.4,
              }}>
                <span style={{ color: 'var(--text-muted)' }}>{t.tiers.from}{' '}</span>
                <span style={{
                  fontFamily: 'var(--font-display)', fontWeight: 700,
                  color: '#0047ff', fontSize: 32, letterSpacing: '-0.025em',
                  fontVariantNumeric: 'tabular-nums',
                  textShadow: '0 0 18px var(--accent-primary-glow)',
                  direction: 'ltr', unicodeBidi: 'isolate', display: 'inline-block',
                }}>9,000&nbsp;₪</span>
                <div style={{
                  color: 'var(--text-muted)', fontSize: 16, marginTop: 4,
                  direction: 'ltr', unicodeBidi: 'isolate',
                }}>{t.t4.price.suffix}</div>
              </div>
            </div>
            <Button glow href={WA_TIER4}>
              <WA size={16}/> {t.t4.cta}
            </Button>
          </div>
        </div>
      );
    }

    /* ── Page ─────────────────────────────────────────── */
    function Page() {
      const t = window.useCopy();
      return (
        <>
          {/* SALOTIME CASE */}
          <section style={{
            position: 'relative', background: 'var(--bg-base)',
            padding: '120px 48px', overflow: 'hidden',
          }}>
            <div style={{
              position: 'absolute', left: 0, right: 0, top: '50%',
              height: 240, pointerEvents: 'none',
              background: 'linear-gradient(180deg, transparent, rgba(0,71,255,0.05), transparent)',
            }}/>
            <div style={{ maxWidth: 1200, margin: '0 auto', position: 'relative' }}>
              <Header/>
              <BeforeAfter/>
              <ProofStrip/>
              <TheBuild/>
              <Results/>
              <Transition/>
            </div>
          </section>

          {/* TIER 4 */}
          <section id="tier-4" style={{
            position: 'relative', background: 'var(--bg-base)',
            padding: '64px 48px 120px', overflow: 'hidden',
          }}>
            <div style={{ maxWidth: 1024, margin: '0 auto' }}>
              <div style={{ marginBottom: 40, maxWidth: 880 }}>
                <div style={{ marginBottom: 22 }}>
                  <Eyebrow>{t.t4.badge}</Eyebrow>
                </div>
                <h2 className="section-h2" style={{
                  margin: 0,
                  fontFamily: 'var(--font-display)', fontWeight: 600,
                  fontSize: 44, lineHeight: 1.1, letterSpacing: '-0.035em',
                  color: 'var(--text-primary)', textWrap: 'balance',
                }}>
                  {t.t4.h}
                </h2>
              </div>
              <Tier4Card/>
            </div>
          </section>
        </>
      );
    }

window.SaloTier4Section = Page;
})();