/* base.css - מערכת העיצוב של דפי הנחיתה. מיתוג + שפת עיצוב נשאבו מ-zacademy.co.il:
רקע סגול-כהה עם גרדיאנט וזוהר ורוד רך, פינות מעוגלות גדולות, כפתורי pill, גלאסמורפיזם. RTL, mobile-first.
הפונט Jabutinski מתארח מקומית ב-assets/fonts/ (CORS חוסם טעינה מהאתר - ראה fonts/README.md). */
@font-face {
font-family: "Jabutinski"; font-style: normal; font-weight: 400; font-display: swap;
src: url("/assets/fonts/FbJabutinski-Light.woff2") format("woff2");
}
@font-face {
font-family: "Jabutinski"; font-style: normal; font-weight: 700; font-display: swap;
src: url("/assets/fonts/FbJabutinski-Bold.woff2") format("woff2");
}
:root {
--bg: #120424; /* רקע ראשי */
--bg2: #27084C; /* קצה גרדיאנט */
--surface: #32114B; /* משטח משני */
--pink: #E63CA8; /* אקסנט / CTA ראשי */
--pink-hi: #F455BE; /* ורוד בהיר לגרדיאנט */
--yellow: #F9D648;
--cyan: #4FD2D4;
--ink: #ffffff;
--ink-soft: rgba(255,255,255,.70);
--line: rgba(255,255,255,.09);
--glass: rgba(255,255,255,.045);
--glow: 0 16px 64px rgba(230,60,168,.14); /* הזוהר הוורוד החתום של המותג */
--glow-strong: 0 18px 60px rgba(230,60,168,.42);
--r-card: 24px;
--r-lg: 32px;
--maxw: 1000px;
--font-head: "Jabutinski", "Heebo", system-ui, sans-serif;
--font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0; font-family: var(--font-body); color: var(--ink); background: var(--bg);
direction: rtl; text-align: right; font-size: 18px; line-height: 1.65; -webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
/* אווירה: שכבות זוהר ורוד/טורקיז/סגול לעומק (כמו ה-flare באתר של איתי) */
body::before {
content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
background: linear-gradient(180deg, #180733 0%, #1c0838 55%, #150528 100%);
}
/* אין טקסטורה על כל הדף - הרקע הדקורטיבי יושב על ה-HERO בלבד */
body::after { content: none; }
h1, h2, h3, .title { font-family: var(--font-head); letter-spacing: -.01em; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
section { padding: 68px 0; position: relative; }
/* רקע אחד מאוחד לכל הדף (כמו באתר של איתי) - הסקשנים שקופים.
הקצב נוצר מהכרטיסים, הריווח וההילה - לא מהחלפת צבע רקע. */
section.soft { background: transparent; }
/* סקשן עם רקע גרדיאנט סגול - גיוון וצבע (כמו הסקשנים המודגשים באתר של איתי) */
section.grad { background: radial-gradient(130% 108% at 50% -12%, #52208c 0%, #341561 48%, #1b0839 100%); }
/* סקשן בהיר - ניגודיות דרמטית (כמו הסקשן #f6edf4 של איתי). טקסט כהה + ניגודיות נגישה. */
section.light { background: linear-gradient(180deg, #f7edf5 0%, #efe2ee 100%); color: #1a0838; }
section.light .title, section.light .prose p strong, section.light .tsti b { color: #1a0838; }
section.light .prose p, section.light .note, section.light .tsti p, section.light .stat .lbl { color: #574f66; }
section.light .tsti { background: #ffffff; border-color: rgba(26,8,56,.08); box-shadow: 0 16px 46px rgba(230,60,168,.14); }
section.light .stat .num { background: none; -webkit-text-fill-color: var(--pink); color: var(--pink); }
section.light .stat .num.n-cyan { -webkit-text-fill-color: #1aa5a7; color: #1aa5a7; }
section.light .stat .num.n-yellow { -webkit-text-fill-color: #c99a00; color: #c99a00; }
/* Hero */
/* רקע ה-HERO: משושים חדים על בסיס בצבע הדף, דועך בתחתית כדי להשתלב עם הסקשן הבא (בלי קו-תפר). */
.hero { text-align: center; padding: 30px 0 64px; position: relative; overflow: hidden;
background:
linear-gradient(180deg, rgba(24,7,51,0) 78%, #180733 100%),
url("/assets/img/polygons-hero.png") center / cover no-repeat,
#180733; }
/* סריקת אור איטית על ה-HERO. שימוש: בתוך ה-hero */
.hero .scanline { position: absolute; inset: 0; z-index: 0; pointer-events: none;
background: linear-gradient(100deg, transparent 42%, rgba(230,60,168,.12) 50%, transparent 58%);
background-size: 220% 100%; animation: sweep 9s linear infinite; }
.hero .wrap { position: relative; z-index: 1; }
@keyframes sweep { 0% { background-position: 200% 0; } 100% { background-position: -60% 0; } }
/* מסגרת גרדיאנט מסתובבת + הילה פועמת (לכרטיס הטופס / המודאל) */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes halo { 0%,100% { box-shadow: 0 26px 74px rgba(230,60,168,.3); } 50% { box-shadow: 0 26px 92px rgba(230,60,168,.5); } }
/* כיבוי שכבת התנועה למי שביקש פחות תנועה (נגישות) */
@media (prefers-reduced-motion: reduce) {
.btn::after, .hero .scanline { display: none; }
.hero h1 .hl { animation: none; background: linear-gradient(100deg, var(--pink) 10%, var(--yellow) 120%);
-webkit-background-clip: text; background-clip: text; }
}
.hero h1 { font-size: 42px; line-height: 1.08; font-weight: 700; margin: 0 0 18px; color: #fff; text-wrap: balance; }
/* הבזק אור נע על מילות ההדגשה בכותרת */
.hero h1 .hl {
background: linear-gradient(100deg, var(--pink) 15%, var(--yellow) 42%, #fff 50%, var(--yellow) 58%, var(--pink) 85%);
background-size: 260% 100%;
-webkit-background-clip: text; background-clip: text; color: transparent;
animation: shimmer 5s ease-in-out infinite;
}
@keyframes shimmer { 0% { background-position: 160% 0; } 100% { background-position: -60% 0; } }
.hero .sub { font-size: 20px; color: var(--ink-soft); max-width: 660px; margin: 0 auto 30px; }
/* כפתור CTA - pill עם זוהר */
.btn {
display: inline-block; background: linear-gradient(180deg, var(--pink-hi), var(--pink)); color: #fff;
font-family: var(--font-head); font-weight: 700; font-size: 20px; text-decoration: none; padding: 16px 38px; border-radius: 999px; border: 0; cursor: pointer;
box-shadow: var(--glow-strong); transition: transform .15s ease, box-shadow .15s ease; letter-spacing: -.01em;
position: relative; overflow: hidden;
}
/* ברק חולף על כפתורי ה-CTA */
.btn::after {
content: ""; position: absolute; top: 0; left: -60%; width: 38%; height: 100%; pointer-events: none;
background: linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent); transform: skewX(-18deg);
animation: shine 4.5s ease-in-out infinite;
}
@keyframes shine { 0%, 62% { left: -60%; } 100% { left: 130%; } }
.btn:hover { transform: translateY(-2px); box-shadow: 0 22px 70px rgba(230,60,168,.6); }
.btn.big { font-size: 21px; padding: 18px 46px; }
.btn.yellow { background: linear-gradient(180deg, #FCE07A, var(--yellow)); color: #120424; box-shadow: 0 18px 60px rgba(249,214,72,.4); }
/* כותרות סקשן */
h2.title { font-size: 32px; font-weight: 700; text-align: center; margin: 0 0 34px; color: #fff; line-height: 1.15; text-wrap: balance; }
/* בולטים / צ'קליסט */
ul.benefits { list-style: none; padding: 0; max-width: 620px; margin: 0 auto; }
ul.benefits li { position: relative; padding: 13px 42px 13px 0; font-size: 19px; border-bottom: 1px solid var(--line); }
ul.benefits li::before { content: "✅"; position: absolute; right: 0; top: 13px; }
/* הוכחה חברתית - מספרים */
.stats { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; text-align: center; }
.stat { flex: 1 1 150px; }
.stat .num {
font-family: var(--font-head); font-size: 40px; font-weight: 700; line-height: 1;
background: linear-gradient(180deg, #fff, var(--pink)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat .lbl { color: var(--ink-soft); font-size: 15px; margin-top: 6px; }
/* FAQ בסגנון צ'אט - השאלה כבועה (ימין) + תשובה כתגובה מאיתי עם אווטאר (שמאל), זוהר ורוד בפתיחה.
מבנה: שאלה