/* =====================================================================
   Shibolet's AI — מחולל דפי נחיתה | שכבה 1: דף הכניסה הממותג
   קובץ עיצוב ראשי. צבעים, טיפוגרפיה ופריסה במקום אחד מסודר.
   ===================================================================== */

/* ---------- 1. משתני צבע וטיפוגרפיה (קל לשנות בעתיד) ---------- */
:root {
  /* צבעי המותג — נלקחו מתוך הלוגו */
  --navy-deep: #002448;   /* כחול נייבי עמוק */
  --navy:      #0C3054;   /* כחול ראשי */
  --navy-soft: #1B3E66;   /* נייבי רך יותר */
  --sky:       #5BB6E0;   /* תכלת המותג (ה-"AI") */
  --sky-bright:#7FCBEC;   /* תכלת בהיר להדגשות */
  --sky-glow:  rgba(91,182,224,.22);

  /* רקעים וטקסט */
  --cream:     #F6F9FC;   /* רקע בהיר נקי */
  --white:     #FFFFFF;
  --ink:       #0C2238;   /* טקסט כהה */
  --muted:     #5B6B7E;   /* טקסט משני */
  --line:      #E4EBF2;   /* קווי הפרדה עדינים */
  --gold:      #C9A86A;   /* נגיעת זהב יוקרתית, במשורה בלבד */

  /* מבנה */
  --radius:    20px;
  --radius-sm: 12px;
  --maxw:      1140px;
  --shadow-soft: 0 18px 50px -20px rgba(12,48,84,.28);
  --shadow-card: 0 12px 40px -18px rgba(12,48,84,.22);

  /* גופנים */
  --serif: "Frank Ruhl Libre", Georgia, serif;
  --sans:  "Heebo", system-ui, "Segoe UI", Arial, sans-serif;
}

/* ---------- 2. איפוס בסיסי ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 24px;
}

section { position: relative; }

/* ---------- 3. טיפוגרפיה ---------- */
h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.18; color: var(--navy); }
.eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .12em;
  color: var(--sky);
  margin-bottom: 16px;
}
.section-title { font-size: clamp(1.8rem, 4vw, 2.7rem); margin-bottom: 16px; }
.section-intro {
  font-size: 1.12rem;
  color: var(--muted);
  max-width: 620px;
  margin-bottom: 56px;
}
.center { text-align: center; }
.center .section-intro { margin-inline: auto; }

/* ---------- 4. כפתורים ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.05rem;
  padding: 16px 34px;
  border-radius: 100px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
  white-space: nowrap;
}
.btn-primary {
  background: linear-gradient(135deg, var(--sky) 0%, #3FA0D4 100%);
  color: #03263F;
  box-shadow: 0 14px 30px -10px var(--sky-glow);
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -12px rgba(91,182,224,.5); }
.btn-ghost {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,.4);
}
.btn-ghost:hover { background: rgba(255,255,255,.1); border-color: var(--white); }
.btn-dark {
  background: var(--navy);
  color: var(--white);
}
.btn-dark:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); }
.btn .arrow { font-size: 1.15em; line-height: 1; }

/* ---------- 5. כותרת עליונה (Header) ---------- */
.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 50;
  padding: 18px 0;
  transition: background .3s ease, box-shadow .3s ease, padding .3s ease;
}
.site-header.scrolled {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 30px -18px rgba(12,48,84,.35);
  padding: 12px 0;
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand-logo { height: 46px; width: auto; transition: filter .3s ease; }
/* כשהרקע כהה (לפני גלילה) — הלוגו על תווית בהירה כדי שייראה תמיד */
.logo-badge {
  background: var(--white);
  padding: 7px 14px;
  border-radius: 12px;
  box-shadow: 0 8px 24px -12px rgba(0,0,0,.4);
  display: inline-flex;
}
.main-nav { display: flex; align-items: center; gap: 30px; }
.main-nav a {
  font-weight: 500;
  font-size: .98rem;
  color: var(--white);
  opacity: .9;
  transition: opacity .2s ease, color .2s ease;
}
.main-nav a:hover { opacity: 1; }
.site-header.scrolled .main-nav a { color: var(--navy); }
.nav-cta { padding: 10px 22px; font-size: .95rem; }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; }

/* ---------- 6. גיבור (Hero) ---------- */
.hero {
  position: relative;
  padding: 180px 0 120px;
  background:
    radial-gradient(1100px 600px at 80% -10%, rgba(91,182,224,.20), transparent 60%),
    radial-gradient(900px 500px at 0% 110%, rgba(91,182,224,.12), transparent 55%),
    linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 55%, #0E2742 100%);
  color: var(--white);
  overflow: hidden;
}
/* גל עדין דקורטיבי — מוטיב המותג */
.hero-wave {
  position: absolute;
  inset-block-end: -2px;
  inset-inline: 0;
  width: 100%;
  line-height: 0;
  color: var(--cream);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 56px;
  align-items: center;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  padding: 8px 18px;
  border-radius: 100px;
  font-size: .88rem;
  font-weight: 500;
  color: var(--sky-bright);
  margin-bottom: 28px;
}
.hero-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sky); box-shadow: 0 0 0 4px var(--sky-glow); }
.hero h1 {
  color: var(--white);
  font-size: clamp(2.2rem, 5.2vw, 3.7rem);
  line-height: 1.16;
  letter-spacing: -.01em;
}
.hero h1 .accent { color: var(--sky-bright); }
.hero .lead {
  font-size: 1.22rem;
  color: rgba(255,255,255,.82);
  margin: 26px 0 38px;
  max-width: 540px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.hero-note { margin-top: 22px; font-size: .92rem; color: rgba(255,255,255,.6); }

/* קלף תצוגה מקדימה ב-hero */
.hero-visual { position: relative; }
.preview-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(6px);
}
.preview-card img { border-radius: 14px; }
.preview-tag {
  position: absolute;
  inset-block-start: -16px;
  inset-inline-start: -16px;
  background: var(--white);
  color: var(--navy);
  font-weight: 700;
  font-size: .9rem;
  padding: 10px 18px;
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  z-index: 2;
}

/* ---------- 7. רצועת אמון ---------- */
.trust {
  background: var(--white);
  border-block-end: 1px solid var(--line);
  padding: 30px 0;
}
.trust-inner { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 46px; align-items: center; }
.trust-item { display: flex; align-items: center; gap: 10px; color: var(--muted); font-weight: 500; }
.trust-item .ic { color: var(--sky); font-size: 1.25rem; }

/* ---------- 8. בלוקים כלליים ---------- */
.block { padding: 100px 0; }
.block.alt { background: var(--white); }

/* בעיה / פתרון */
.value-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 10px; }
.value-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 38px 34px;
  box-shadow: var(--shadow-card);
}
.value-card.problem { background: linear-gradient(180deg, #fff, #FAFCFE); }
.value-card h3 { font-size: 1.4rem; margin-bottom: 14px; display: flex; align-items: center; gap: 12px; }
.value-card .tag-ic {
  width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center; font-size: 1.3rem; flex: none;
}
.problem .tag-ic { background: #FDEEE9; color: #D2734F; }
.solution .tag-ic { background: var(--sky-glow); color: #2E86BC; }
.value-card p { color: var(--muted); font-size: 1.05rem; }

/* ---------- 9. איך זה עובד ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.step {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 40px 30px 34px;
  position: relative;
  transition: transform .3s ease, box-shadow .3s ease;
}
.step:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); }
.step-num {
  font-family: var(--serif);
  font-size: 2.6rem;
  font-weight: 900;
  color: var(--sky);
  opacity: .35;
  line-height: 1;
  margin-bottom: 16px;
}
.step h3 { font-size: 1.3rem; margin-bottom: 10px; }
.step p { color: var(--muted); }
.step-arrow {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: -22px;
  transform: translateY(-50%);
  color: var(--sky);
  font-size: 1.6rem;
  opacity: .5;
}

/* ---------- 10. רצועת "ככל שתשקיעי יותר" ---------- */
.invest {
  background: linear-gradient(150deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: var(--white);
  border-radius: 28px;
  padding: 64px 56px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.invest::after {
  content: "";
  position: absolute;
  inset-block-start: -40%;
  inset-inline-start: -10%;
  width: 420px; height: 420px;
  background: radial-gradient(circle, var(--sky-glow), transparent 70%);
  pointer-events: none;
}
.invest .eyebrow { color: var(--sky-bright); }
.invest h2 { color: var(--white); font-size: clamp(1.7rem, 3.6vw, 2.4rem); max-width: 720px; margin-bottom: 18px; }
.invest p { color: rgba(255,255,255,.82); font-size: 1.12rem; max-width: 640px; margin-bottom: 36px; }
.invest-meter { display: flex; gap: 14px; flex-wrap: wrap; }
.meter-pill {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px;
  padding: 16px 22px;
  flex: 1;
  min-width: 180px;
}
.meter-pill .lvl { display: block; font-weight: 700; color: var(--sky-bright); margin-bottom: 4px; font-size: .9rem; }
.meter-pill span.txt { color: rgba(255,255,255,.78); font-size: .96rem; }
.meter-pill.full { background: linear-gradient(135deg, rgba(91,182,224,.28), rgba(91,182,224,.10)); border-color: rgba(91,182,224,.5); }

/* ---------- 11. גלריית השראה (placeholder) ---------- */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.gallery-card {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--white);
  box-shadow: var(--shadow-card);
  transition: transform .3s ease;
}
.gallery-card:hover { transform: translateY(-6px); }
.gallery-thumb {
  aspect-ratio: 4/5;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px;
  position: relative;
}
.gallery-thumb.g1 { background: linear-gradient(160deg, #EAF4FB, #D4E9F6); }
.gallery-thumb.g2 { background: linear-gradient(160deg, #0C3054, #1B3E66); }
.gallery-thumb.g3 { background: linear-gradient(160deg, #F4F1EA, #E8E0CF); }
.gallery-thumb .mock-line { height: 9px; border-radius: 6px; margin: 7px auto; }
.gallery-thumb .ph-label {
  position: absolute; inset-block-end: 16px; inset-inline: 16px;
  font-size: .82rem; font-weight: 600; letter-spacing: .04em;
}
.g1 .ph-label, .g3 .ph-label { color: var(--navy); }
.g2 .ph-label { color: var(--sky-bright); }
.gallery-note { text-align: center; margin-top: 34px; color: var(--muted); font-size: .98rem; }

/* ---------- 12. CTA סופי ---------- */
.final-cta {
  text-align: center;
  background:
    radial-gradient(800px 400px at 50% 0%, rgba(91,182,224,.18), transparent 60%),
    linear-gradient(160deg, var(--navy-deep), var(--navy));
  color: var(--white);
  padding: 110px 0;
}
.final-cta h2 { color: var(--white); font-size: clamp(2rem, 4.5vw, 3rem); margin-bottom: 18px; }
.final-cta p { color: rgba(255,255,255,.82); font-size: 1.18rem; max-width: 560px; margin: 0 auto 40px; }

/* ---------- 13. כותרת תחתונה (Footer) ---------- */
.site-footer {
  background: var(--navy-deep);
  color: rgba(255,255,255,.7);
  padding: 56px 0 30px;
}
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 30px; align-items: center; }
.footer-logo { background: #fff; padding: 10px 16px; border-radius: 12px; display: inline-flex; }
.footer-logo img { height: 40px; }
.footer-links { display: flex; gap: 26px; flex-wrap: wrap; }
.footer-links a { color: rgba(255,255,255,.78); transition: color .2s; font-weight: 500; }
.footer-links a:hover { color: var(--sky-bright); }
.footer-tag { font-family: var(--serif); color: var(--sky-bright); font-style: italic; }
.footer-bottom {
  border-block-start: 1px solid rgba(255,255,255,.12);
  margin-top: 34px; padding-top: 22px;
  text-align: center; font-size: .9rem; color: rgba(255,255,255,.55);
}

/* ---------- 13.5 מוקאפ דף נחיתה לדוגמה (ב-hero) ---------- */
.mock-browser {
  background: var(--white);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(255,255,255,.5);
}
.mock-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #EEF3F8;
  border-block-end: 1px solid var(--line);
}
.mock-bar .dotrow { display: flex; gap: 6px; }
.mock-bar .dotrow i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.mock-bar .dotrow i:nth-child(1){ background:#E0857B; }
.mock-bar .dotrow i:nth-child(2){ background:#E8C07A; }
.mock-bar .dotrow i:nth-child(3){ background:#7FC08A; }
.mock-bar .url {
  margin-inline-start: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: .72rem;
  color: var(--muted);
  padding: 4px 14px;
  direction: ltr;
}
.mock-page { padding: 26px 26px 30px; text-align: center; background: linear-gradient(180deg,#fff, #F4F9FD); }
.mock-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.mock-nav .logo { display: flex; align-items: center; gap: 7px; font-weight: 800; color: var(--navy); font-size: .82rem; }
.mock-nav .logo .wave { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 60% 40%, var(--sky-bright), var(--navy)); }
.mock-nav .links { display: flex; gap: 12px; }
.mock-nav .links span { width: 26px; height: 6px; border-radius: 4px; background: #D8E3EE; }
.mock-avatar {
  width: 74px; height: 74px; border-radius: 50%;
  margin: 4px auto 16px;
  background: linear-gradient(150deg, var(--sky) 0%, var(--navy) 100%);
  box-shadow: 0 10px 24px -10px var(--sky-glow);
  position: relative;
}
.mock-avatar::after {
  content: "\2726"; color: #fff; font-size: 1.4rem;
  position: absolute; inset: 0; display: grid; place-items: center; opacity: .9;
}
.mock-page h4 { font-family: var(--serif); color: var(--navy); font-size: 1.18rem; margin-bottom: 6px; }
.mock-page .sub { color: var(--muted); font-size: .82rem; margin-bottom: 16px; }
.mock-btn {
  display: inline-block;
  background: linear-gradient(135deg, var(--sky), #3FA0D4);
  color: #03263F; font-weight: 700; font-size: .78rem;
  padding: 9px 22px; border-radius: 100px;
}
.mock-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 22px; }
.mock-cards .mc {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 10px; box-shadow: 0 6px 18px -12px rgba(12,48,84,.2);
}
.mock-cards .mc .ico { width: 26px; height: 26px; border-radius: 8px; margin: 0 auto 8px; background: var(--sky-glow); display: grid; place-items: center; color: #2E86BC; font-size: .8rem; }
.mock-cards .mc i.l { display: block; height: 5px; border-radius: 3px; background: #E2EAF2; margin: 5px 6px; }
.mock-cards .mc i.l.short { width: 60%; margin-inline: auto; }

/* ---------- 14. אנימציית גלילה עדינה (אחת בלבד) ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- 15. רספונסיבי (מובייל) ---------- */
@media (max-width: 920px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-visual { order: -1; max-width: 460px; }
  .value-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .step-arrow { display: none; }
  .gallery { grid-template-columns: 1fr; max-width: 380px; margin-inline: auto; }
}
@media (max-width: 720px) {
  .main-nav {
    position: fixed;
    inset-block-start: 0;
    inset-inline-end: 0;
    height: 100vh;
    width: min(78vw, 320px);
    background: var(--navy);
    flex-direction: column;
    justify-content: center;
    gap: 26px;
    transform: translateX(100%);
    transition: transform .35s ease;
    box-shadow: -20px 0 60px -20px rgba(0,0,0,.5);
  }
  .main-nav.open { transform: translateX(0); }
  .main-nav a, .site-header.scrolled .main-nav a { color: var(--white); font-size: 1.15rem; }
  .nav-toggle { display: inline-flex; flex-direction: column; gap: 5px; z-index: 60; }
  .nav-toggle span { width: 26px; height: 2.5px; background: var(--white); border-radius: 2px; transition: .3s; }
  .site-header.scrolled .nav-toggle span { background: var(--navy); }
  .nav-toggle.open span { background: var(--white); }
  .nav-toggle.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
  .hero { padding: 140px 0 90px; }
  .block { padding: 70px 0; }
  .invest { padding: 44px 28px; }
  .container { padding-inline: 18px; }
}

/* ---------- 16. מוקאפ hero — אלמנטים חדשניים ---------- */
.hero-visual { position: relative; }
.hero-orb {
  position: absolute; width: 250px; height: 250px; border-radius: 50%;
  inset-block-start: -34px; inset-inline-end: -46px; z-index: 0;
  background: radial-gradient(circle at 35% 35%, var(--sky), transparent 68%);
  filter: blur(42px); opacity: .55; pointer-events: none;
}
.hero-visual .preview-card { position: relative; z-index: 1; }

/* החלק העליון של המוקאפ — באנר כהה ומבריק */
.mock-hero {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  padding: 22px 24px 24px; text-align: center; position: relative; overflow: hidden;
}
.mock-hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(320px 130px at 82% -10%, var(--sky-glow), transparent 70%);
}
.mock-hero > * { position: relative; z-index: 1; }
.mock-hero .mock-nav { margin-bottom: 16px; }
.mock-hero .mock-nav .logo { color: #fff; }
.mock-hero .mock-nav .logo .wave { background: radial-gradient(circle at 60% 40%, var(--sky-bright), #fff); }
.mock-hero .mock-nav .links span { background: rgba(255,255,255,.28); }
.mock-hero .mock-avatar { border: 3px solid rgba(255,255,255,.22); }
.mock-avatar .ring {
  position: absolute; inset: -7px; border-radius: 50%;
  border: 2px solid var(--sky-bright); opacity: .6;
  animation: pulsering 2.8s ease-out infinite;
}
@keyframes pulsering { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(1.55); opacity: 0; } }
.mock-hero h4 { color: #fff; }
.mock-hero .sub { color: rgba(255,255,255,.7); margin-bottom: 8px; }
.mock-stars { color: #FFC861; letter-spacing: 3px; font-size: .82rem; margin-bottom: 14px; }
.mock-hero .mock-btn { box-shadow: 0 10px 22px -8px rgba(91,182,224,.7); }

/* החלק התחתון — כרטיסים */
.mock-page { padding: 16px 22px 22px; }
.mock-page .mock-cards { margin-top: 0; }

/* צ'יפים צפים מודרניים */
.float-chip {
  position: absolute; z-index: 3;
  background: rgba(255,255,255,.94); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.75); border-radius: 14px;
  padding: 9px 14px; font-size: .76rem; font-weight: 700; color: var(--navy);
  box-shadow: var(--shadow-card); display: flex; align-items: center; gap: 7px;
  white-space: nowrap;
}
.float-chip b { color: var(--navy); }
.chip-rating { inset-block-start: 16%; inset-inline-start: -28px; color: #E0A23B; animation: floaty 4s ease-in-out infinite; }
.chip-ping   { inset-block-end: 24%; inset-inline-start: -34px; animation: floaty 4.6s ease-in-out infinite .4s; }
.chip-ai     { inset-block-start: -16px; inset-inline-end: 26px; color: #2E86BC; animation: floaty 5.2s ease-in-out infinite .8s; }
.ping-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #3FB984;
  animation: pingdot 1.8s ease-out infinite;
}
@keyframes pingdot { 0% { box-shadow: 0 0 0 0 rgba(63,185,132,.55); } 100% { box-shadow: 0 0 0 9px rgba(63,185,132,0); } }
.ai-spark { display: inline-block; animation: spin 3.2s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

@media (prefers-reduced-motion: reduce) {
  .float-chip, .ai-spark, .mock-avatar .ring, .ping-dot { animation: none !important; }
}
@media (max-width: 920px) {
  .chip-rating { inset-inline-start: -8px; }
  .chip-ping   { inset-inline-start: -8px; }
  .chip-ai     { inset-inline-end: 8px; }
}

/* ---------- 17. הגדלת הלוגו ---------- */
.brand-logo { height: 64px; }
.site-header.scrolled .brand-logo { height: 54px; }
.footer-logo img { height: 54px; }
@media (max-width: 720px) { .brand-logo { height: 50px; } }

/* ---------- 18. צבעוניות מרהיבה לדוגמה בלבד (מוקאפ) — שקיעת אש ---------- */
.mock-hero {
  background:
    radial-gradient(220px 160px at 14% 8%, rgba(255,212,110,.55), transparent 60%),
    radial-gradient(240px 190px at 92% 96%, rgba(181,23,158,.50), transparent 62%),
    linear-gradient(150deg, #B5179E 0%, #F2295B 48%, #FF8A3D 100%);
}
.mock-hero::before { background: radial-gradient(320px 140px at 80% -12%, rgba(255,255,255,.30), transparent 70%); }
.mock-hero .mock-nav .logo { color: #fff; }
.mock-hero .mock-nav .logo .wave { background: radial-gradient(circle at 60% 40%, #FFD45B, #FF5E8A); }
.mock-hero .mock-nav .links span { background: rgba(255,255,255,.38); }
.mock-avatar {
  background: linear-gradient(150deg, #FFD45B 0%, #FF5E8A 52%, #B5179E 100%);
  border-color: rgba(255,255,255,.5) !important;
}
.mock-avatar .ring { border-color: rgba(255,255,255,.85); }
.mock-stars { color: #FFE08A; }
.mock-hero .mock-btn {
  background: linear-gradient(135deg, #FFFFFF, #FFEFDD);
  color: #8A1A5E;
  box-shadow: 0 10px 24px -8px rgba(242,41,91,.7);
}
.mock-cards .mc .ico { background: rgba(181,23,158,.13); color: #B5179E; }
.mock-bar { background: #F7EDF3; }
.mock-page { background: linear-gradient(180deg, #fff, #FFF5F8); }
.float-chip.chip-ai { color: #B5179E; }

/* ====================================================================
   תיקוני רספונסיב נוספים (נייד) — דף הבית
   ==================================================================== */
html, body { overflow-x: hidden; max-width: 100%; }
*, *::before, *::after { box-sizing: border-box; }

@media (max-width: 760px) {
  .float-chip { display: none !important; }            /* אלמנטים מרחפים — מוסתרים בנייד */
  .hero-visual { max-width: 100% !important; margin-inline: auto; order: -1; }
  .hero-orb { display: none; }
  .preview-card { padding: 12px; max-width: 100%; }
  .preview-tag { inset-inline-start: 10px; inset-inline-end: auto; inset-block-start: -12px; font-size: .78rem; padding: 7px 12px; }
  .hero h1 { font-size: clamp(1.65rem, 7.5vw, 2.3rem); }
  .hero .lead { font-size: 1.04rem; }
  .container { padding-inline: 18px; }
  img, .mock-browser, .preview-card { max-width: 100%; }
}

/* ====================================================================
   תיקון גלישה: תפריט נייד — סגור = נעלם, פתוח = מימין (בלי overflow)
   ==================================================================== */
html { overflow-x: hidden; }
@media (max-width: 760px) {
  .main-nav {
    position: fixed;
    inset-block-start: 0;
    inset-block-end: 0;
    right: 0;
    left: auto;
    inset-inline-start: auto;
    inset-inline-end: auto;
    width: min(80vw, 320px);
    height: 100vh;
    display: none;
    transform: none;
    background: var(--navy);
    flex-direction: column;
    justify-content: center;
    gap: 26px;
    box-shadow: -20px 0 60px -20px rgba(0,0,0,.5);
    z-index: 55;
  }
  .main-nav.open { display: flex; }
}

/* ====================================================================
   נייד: הטקסט ראשון, המוקאפ קטן ומתחת
   ==================================================================== */
@media (max-width: 760px) {
  .hero-grid { display: flex; flex-direction: column; }
  .hero-text { order: 1; }
  .hero-visual { order: 2 !important; max-width: 320px !important; margin-inline: auto; }
}


/* --- טיפים / איך לקבל את הדף הכי טוב --- */
.tips-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 34px;max-width:920px;margin:38px auto 0;text-align:right;}
.tip{display:flex;gap:14px;align-items:flex-start;}
.tip-ic{flex:none;width:30px;height:30px;border-radius:50%;background:var(--accent,#5BB6E0);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.95rem;margin-top:2px;}
.tip b{display:block;margin-bottom:3px;color:var(--navy,#0C3054);}
.tip p{margin:0;color:var(--muted,#5b6577);font-size:.96rem;line-height:1.6;}
.tips-note{max-width:780px;margin:32px auto 0;background:#eef6fb;border:1px solid #cfe6f5;border-radius:14px;padding:16px 22px;color:#0C3054;font-weight:600;line-height:1.6;}
@media(max-width:760px){.tips-grid{grid-template-columns:1fr;}}


/* --- גלריית דוגמאות --- */
.ex-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;max-width:1120px;margin:38px auto 0;}
.ex-card{background:#fff;border:1px solid var(--line,#e6e8ee);border-radius:16px;overflow:hidden;box-shadow:0 10px 30px rgba(15,39,71,.07);transition:.18s;}
.ex-card:hover{transform:translateY(-6px);box-shadow:0 18px 44px rgba(15,39,71,.14);}
.ex-frame{display:block;height:300px;overflow:hidden;position:relative;border-bottom:1px solid #eef1f6;background:#fff;}
.ex-frame iframe{width:167%;height:920px;border:0;transform:scale(.6);transform-origin:top right;pointer-events:none;}
.ex-foot{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;}
.ex-foot b{color:var(--navy,#0C3054);}
.ex-foot a{color:var(--accent,#2563eb);font-weight:700;text-decoration:none;font-size:.9rem;}
@media(max-width:900px){.ex-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.ex-grid{grid-template-columns:1fr;}}