/* ירין אתרים — תוספות מעל העיצוב של oystudio: לוגו, פרויקטים, 6 כרטיסי מחיר, 2 מסלולים, תמונה באודות, טופס */

/* לוגו: האות י במקום & */
.brand-bug.brand-bug-y::before { content: none; }
.brand-bug.brand-bug-y { font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important; font-style: normal !important; font-weight: 800 !important; font-size: 12.5px !important; line-height: 1 !important; letter-spacing: -.02em; direction: rtl; }

/* ── העבודות שלי: אותו מבנה כמו באתר הקודם (חלונות דפדפן + "הצגת כל העבודות") ── */
.ywork { max-width: 1240px; margin: 0 auto; padding: 8px 24px 40px; }
.ywork-lead { max-width: 640px; margin: 18px auto 34px; text-align: center; color: rgba(255,255,255,.7); font-size: 15px; line-height: 1.7; }
.ywork .pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 980px) { .ywork .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .ywork .pgrid { grid-template-columns: 1fr; } .ywork { padding-inline: 16px; } }
.ywork .win[hidden] { display: none; }
.ywork .win { display: block; text-decoration: none; color: inherit; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; overflow: hidden; transition: transform .35s, border-color .35s, box-shadow .35s; }
.ywork .win:hover { transform: translateY(-6px); border-color: rgba(196,181,253,.6); box-shadow: 0 30px 60px -30px rgba(167,139,250,.6); }
.ywork .bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,.08); font: 12px/1 var(--font-mono, monospace); color: rgba(255,255,255,.45); direction: ltr; }
.ywork .bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.18); }
.ywork .bar i:first-child { background: #c4b5fd; }
.ywork .bar bdi { margin-inline-start: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ywork .shot { aspect-ratio: 16/10; overflow: hidden; background: #111; }
.ywork .shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.ywork .wm { padding: 16px 18px 20px; text-align: right; }
.ywork .wm span { display: block; font-size: 12px; letter-spacing: .04em; color: #c4b5fd; margin-bottom: 4px; }
.ywork .wm h3 { font-size: 20px; margin: 0 0 6px; color: #fff; font-weight: 600; }
.ywork .wm p { margin: 0; color: rgba(255,255,255,.6); font-size: 14px; line-height: 1.6; }
.ywork .showall { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }

/* ── 6 כרטיסי מחיר: 3+3 במחשב ── */
@media (min-width: 1201px) { .pricing-5col .pricing-grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1180px; } }

/* ── 2 מסלולים ── */
.tracks-grid.tracks-grid-2 { grid-template-columns: repeat(2, 1fr); max-width: 820px; margin-inline: auto; }
@media (max-width: 560px) { .tracks-grid.tracks-grid-2 { grid-template-columns: 1fr; } }

/* ── אודות: תמונה במלבן משמאל לטקסט (בטלפון — מעליו) ── */
.about-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 400px); gap: clamp(28px, 4vw, 60px); align-items: center; margin-top: 30px; }
.about-split-text { min-width: 0; }
.about-split-photo { margin: 0; position: relative; border-radius: 22px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 40px 80px -40px rgba(120,100,255,.55), 0 0 0 1px rgba(255,255,255,.03) inset; aspect-ratio: 5 / 4; }
.about-split-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(18,20,48,.45)); pointer-events: none; }
.about-split-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% 35%; display: block; }
@media (max-width: 820px) {
  .about-split { grid-template-columns: 1fr; }
  .about-split-photo { order: -1; aspect-ratio: 16 / 10; }
}

/* ── טופס → וואטסאפ ── */
.form-note { color: rgba(255,255,255,.5); font-size: 13px; margin: 4px 0 12px; }
.form-err { color: #fca5a5; font-size: 14px; margin-top: 10px; }
.side-meta a, .foot-grid a, .lede-sub a { color: inherit; }

/* ── צבע: פחות שחור — שמי לילה אחרי שקיעה, כוכבים רכים ── */
html, body { background: #12162f !important; }
body::before {
  background:
    radial-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    radial-gradient(rgba(150,130,255,0.06) 1px, transparent 1px),
    linear-gradient(180deg, #1a1e44 0%, #141836 45%, #10142d 100%) !important;
  background-size: 32px 32px, 64px 64px, auto !important;
}
.bg-particles span { opacity: .55; }
@media (max-width: 880px) {
  html, body { background: #161a3a !important; }
  body::before { background: radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px), radial-gradient(rgba(170,140,255,0.08) 1px, transparent 1px), linear-gradient(180deg, #1c2048 0%, #171b3c 50%, #13173a 100%) !important; background-size: 26px 26px, 52px 52px, auto !important; }
}

/* ── פתיחה אישית: ירין גזור בשמאל-למטה, טקסט מימין ── */
.yhero .hero-ed-masthead-bottom { visibility: hidden; }
.yhero-in { flex: 1 1 auto; display: flex; align-items: center; width: 100%; max-width: 1180px; margin: 0 auto; position: relative; z-index: 3; padding: 40px 0 90px; }
.yhero-text { width: min(720px, 60%); display: flex; flex-direction: column; align-items: flex-start; gap: 22px; text-align: right; will-change: transform; }
.yhero .hero-ed-headline { align-items: flex-start; font-size: clamp(46px, 5.4vw, 84px); }
.yhero .hero-ed-deck { text-align: right; }
.yhero-hi { margin: 0; font-size: 18px; color: rgba(255,255,255,.75); letter-spacing: .01em; }
.yhero-hi strong { color: #fff; font-weight: 600; }
.yhero-sign { margin: 4px 0 0; font-family: "Amatic SC", cursive; font-weight: 700; font-size: 46px; line-height: 1; color: #c4b5fd; transform: rotate(-5deg); text-shadow: 0 0 22px rgba(167,139,250,.55); }

.yhero-photo { position: absolute; left: clamp(0px, 5vw, 90px); bottom: 0; height: min(72vh, 620px); aspect-ratio: 783 / 820; z-index: 2; pointer-events: none; animation: yhero-rise 1.6s cubic-bezier(.16,.84,.24,1) .15s both; }
.yhero-photo img { position: relative; z-index: 2; height: 100%; width: auto; display: block; -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%); mask-image: linear-gradient(to bottom, #000 80%, transparent 100%); transform: translate3d(var(--mx, 0px), calc(var(--py, 0px) + var(--my, 0px)), 0); transition: transform .25s ease-out; }
.yhero-glow { position: absolute; z-index: 1; left: 8%; top: 4%; width: 72%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(140,110,255,.55) 0%, rgba(80,190,255,.22) 45%, transparent 70%); filter: blur(30px); animation: yhero-breathe 6s ease-in-out infinite; transform: translate3d(calc(var(--mx, 0px) * -.6), calc(var(--py, 0px) * .6), 0); }
.yhero-orbit { position: absolute; z-index: 1; left: 10%; top: -6%; width: 64%; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(255,255,255,.13); animation: yhero-spin 26s linear infinite; }
.yhero-orbit::before { content: ""; position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; border-radius: 50%; background: #e9e4ff; box-shadow: 0 0 14px 4px rgba(196,181,253,.8); }
@keyframes yhero-rise { from { opacity: 0; transform: translateY(70px) scale(.96); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes yhero-breathe { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
@keyframes yhero-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .yhero-photo, .yhero-glow, .yhero-orbit { animation: none; } }

@media (max-width: 880px) {
  .yhero-in { display: block; padding: 22px 0 0; }
  .yhero-text { width: 100%; gap: 18px; }
  .yhero .hero-ed-headline { font-size: clamp(46px, 13vw, 78px); }
  .yhero .hero-ed-deck { padding: 0; }
  .yhero .hero-ed-cta-row { justify-content: flex-start; }
  .yhero-sign { font-size: 40px; }
  .yhero-photo { position: relative; left: auto; display: block; height: auto; width: min(86%, 400px); margin: 8px auto 0 0; }
  .yhero-photo img { width: 100%; height: auto; }
}

/* תפריט הטלפון מחוץ למסך יצר גלילה לרוחב במחשב */
.menu-drawer[hidden] { display: none !important; }
html, body { overflow-x: clip; }

/* רצועת הזמינות: בלי רקע שחור משלה (בולט על הצבע הבהיר יותר) */
section.queue-strip { background: transparent !important; border-color: rgba(255,255,255,.06) !important; }

/* פרק יצירת הקשר: רקע כהה מדי — מתאים לצבע החדש */
.contact-wrap { background: linear-gradient(90deg, transparent 6%, rgba(255,255,255,0.18) 50%, transparent 94%) top center / 100% 1px no-repeat, rgba(22, 26, 60, 0.55) !important; }

/* כותרות הפרקים ("העבודות שלי", "תהליך העבודה"): אנימציית המילים שברה את מילוי הצבע והכותרת נעלמה — צבע ישיר על כל מילה */
.ribbon-dark .title { background: none !important; -webkit-text-fill-color: currentColor !important; color: #f3f1ff !important; }
.ribbon-dark .title .word > span { background: linear-gradient(180deg, #ffffff 0%, #c9c4ee 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-bottom: .12em; }

/* ── פתיחה: היררכיה, הוכחה, יתרונות והזמנה לגלול (על בסיס מחקר: בהירות, הוכחה ליד הכפתור, בלי "תחתית מזויפת") ── */
.yhero .hero-ed-headline .yhero-h-sm { font-size: .46em; line-height: 1.25; margin-bottom: .14em; letter-spacing: -.01em; }
.yhero-deck { max-width: 46ch; font-size: 18px; line-height: 1.7; color: rgba(255,255,255,.84); }
.yhero-text { gap: 20px; }
.yhero-proof { display: flex; align-items: center; gap: 14px; text-decoration: none; color: rgba(255,255,255,.78); font-size: 14.5px; line-height: 1.5; padding: 8px 14px 8px 8px; margin-inline-start: -8px; border-radius: 999px; transition: background .25s; }
.yhero-proof:hover { background: rgba(255,255,255,.05); }
.yhero-proof strong { color: #fff; font-weight: 600; }
.yhero-faces { display: inline-flex; flex: none; }
.yhero-faces img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; object-position: top; border: 2px solid #1a1e44; box-shadow: 0 4px 12px rgba(0,0,0,.35); margin-inline-start: -12px; }
.yhero-faces img:first-child { margin-inline-start: 0; }
.yhero-facts { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.yhero-facts li { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: rgba(255,255,255,.85); padding: 7px 13px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.yhero-sign { margin-top: 0; }
.yhero.hero-stage.hero-ed { min-height: calc(100vh - 78px); }
.yhero-peek { position: fixed; z-index: 40; left: 50%; bottom: 22px; transform: translateX(-50%); transition: opacity .35s, transform .35s; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; font-size: 13px; color: rgba(255,255,255,.85); text-decoration: none; background: rgba(20,24,56,.6); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.yhero-peek svg { width: 16px; height: 16px; animation: yhero-bob 1.6s ease-in-out infinite; }
@keyframes yhero-bob { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .yhero-peek svg { animation: none; } }
@media (max-width: 880px) {
  .yhero-deck { font-size: 16px; }
  .yhero-proof { font-size: 13.5px; }
  .yhero-peek { display: none; }
}
.yhero-peek.gone { opacity: 0; transform: translate(-50%, 12px); pointer-events: none; }

/* ── מבט ראשון: התמונה נצמדת לתחתית המסך (לא לתחתית הפתיחה), כך שרואים את היד גם במסך נמוך של מחשב נייד ── */
@media (min-width: 881px) {
  .yhero-in { padding: 26px 0 70px; }
  .yhero-photo { bottom: auto; height: min(60vh, 540px); top: calc(100vh - 78px - min(60vh, 540px)); }
}


/* ── חתימה על התמונה, כמו חתימה על פוסטר: נכתבת עם קו שנמתח מתחתיה ── */
.yhero-autograph { position: relative; margin: 6px 0 0; transform: rotate(-5deg); transform-origin: right center; pointer-events: none; text-align: center; align-self: flex-start; }
.yhero-autograph span { display: block; font-family: "Amatic SC", cursive; font-weight: 700; font-size: clamp(40px, 3.6vw, 58px); line-height: 1; color: #efeaff; text-shadow: 0 0 18px rgba(167,139,250,.75), 0 2px 0 rgba(0,0,0,.35); clip-path: inset(0 0 0 100%); animation: yhero-write 1.3s cubic-bezier(.6,.05,.3,1) 1.2s forwards; }
.yhero-autograph svg { display: block; width: 105%; margin: -6px -2.5% 0; height: auto; overflow: visible; }
.yhero-autograph path { fill: none; stroke: #c4b5fd; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 260; stroke-dashoffset: 260; filter: drop-shadow(0 0 6px rgba(167,139,250,.9)); animation: yhero-draw 1s ease-out 2.3s forwards; }
@keyframes yhero-write { to { clip-path: inset(0 0 0 0); } }
@keyframes yhero-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .yhero-autograph span { clip-path: none; animation: none; } .yhero-autograph path { stroke-dashoffset: 0; animation: none; } }
@media (max-width: 880px) { .yhero-photo img, .yhero-glow { transform: none !important; } .yhero-autograph span { font-size: 40px; } }

/* שורת התפקיד מעל הכותרת */
.yhero-hi { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; letter-spacing: .06em; color: rgba(255,255,255,.72); padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); }
.yhero-dot { width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 4px rgba(52,211,153,.18); }

/* חתימה בעמודת הטקסט, מתחת לתוויות: קומפקטית כדי שתיכנס במבט הראשון */
.yhero-text { gap: 17px; }
.yhero-autograph { margin: 2px 0 0; align-self: flex-start; }
.yhero-autograph span { font-size: clamp(38px, 3.2vw, 50px); }
.yhero-autograph svg { width: 92%; margin: -4px 4% 0 0; }
@media (max-width: 880px) { .yhero-autograph { align-self: flex-start; margin-inline-start: 6px; } .yhero-autograph svg { width: 92%; } }
.yhero-autograph { width: max-content; text-align: right; }
.yhero-autograph svg { width: 112%; margin: -2px -6% 0; height: auto; }
.yhero-autograph svg { width: clamp(150px, 13vw, 200px); margin: -2px 0 0 auto; }

/* ── טלפון: אותו מבנה כמו במחשב — הטקסט מימין, התמונה משמאל למטה ומצביעה עליו ── */
@media (max-width: 880px) {
  .yhero.hero-stage.hero-ed { min-height: calc(100svh - 64px); padding-bottom: 0; }
  .yhero .hero-ed-masthead-top { display: none; }
  .yhero-in { display: flex; padding: 14px 0 0; position: relative; z-index: 3; }
  .yhero-text { width: 64%; margin-inline-start: 0; gap: 12px; position: relative; z-index: 3; transform: none !important; }
  .yhero-hi { font-size: 11px; padding: 5px 10px; gap: 7px; letter-spacing: .03em; }
  .yhero .hero-ed-headline { font-size: clamp(30px, 9.4vw, 44px); line-height: 1.05; }
  .yhero .hero-ed-headline .yhero-h-sm { font-size: .5em; }
  .yhero-deck { font-size: 13.5px; line-height: 1.55; }
  .yhero .hero-ed-cta-row { flex-direction: column; align-items: stretch; gap: 8px; width: 100%; }
  .yhero .hero-ed-cta-row .btn-pill { justify-content: center; text-align: center; font-size: 13px; padding: 11px 12px; }
  .yhero-proof { font-size: 12px; gap: 8px; padding: 4px 0; margin: 0; }
  .yhero-faces img { width: 28px; height: 28px; margin-inline-start: -9px; }
  .yhero-facts { gap: 6px; }
  .yhero-facts li { font-size: 11.5px; padding: 5px 9px; }
  .yhero-autograph span { font-size: 32px; }
  .yhero-autograph svg { width: 120px; }
  .yhero-photo { position: absolute; left: -10px; bottom: 0; top: auto; width: auto; height: min(56svh, 470px); margin: 0; z-index: 2; }
  .yhero-photo img { width: auto; height: 100%; }
}

/* טלפון, גרסה סופית: כותרת וכפתורים ברוחב מלא; מתחתם — ירין משמאל מצביע על ההוכחה, התוויות והחתימה מימין */
@media (max-width: 880px) {
  .yhero.hero-stage.hero-ed { min-height: 0; }
  .yhero-in { padding: 14px 0 18px; }
  .yhero-text { width: 100%; gap: 12px; }
  .yhero .hero-ed-headline { font-size: clamp(36px, 11vw, 50px); }
  .yhero-deck { font-size: 15px; }
  .yhero .hero-ed-cta-row { flex-direction: row; flex-wrap: wrap; }
  .yhero .hero-ed-cta-row .btn-pill { flex: 1 1 auto; }
  .yhero-proof, .yhero-facts, .yhero-autograph { width: 47%; max-width: 47%; }
  .yhero-proof { flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 8px; }
  .yhero-facts { flex-direction: column; align-items: flex-start; }
  .yhero-facts li { font-size: 11.5px; }
  .yhero-autograph { width: max-content; }
  .yhero-photo { left: -6px; height: auto; width: 56%; aspect-ratio: 783 / 820; bottom: 0; }
  .yhero-photo img { width: 100%; height: auto; }
  .yhero-orbit, .yhero-glow { left: 4%; }
}
@media (max-width: 880px) {
  .yhero .hero-ed-masthead-bottom { display: none; }
  .yhero-in { padding-bottom: 6px; }
  .yhero-photo { width: 60%; left: -10px; }
}

/* טלפון: בלי שורת "12 אתרים"; שני הכפתורים אחד מתחת לשני בעמודה הימנית, ליד התמונה */
@media (max-width: 880px) {
  .yhero-deck { margin-bottom: 6px; }
  .yhero .hero-ed-cta-row { flex-direction: column; align-items: stretch; width: 52%; max-width: 52%; gap: 9px; margin-top: 10px; }
  .yhero .hero-ed-cta-row .btn-pill { flex: none; width: 100%; font-size: 13px; line-height: 1.3; padding: 12px 12px; white-space: normal; }
  .yhero .hero-ed-cta-row .btn-pill-grad { box-shadow: 0 10px 30px -8px rgba(167,139,250,.75); }
  .yhero-facts { width: 52%; max-width: 52%; margin-top: 4px; }
  .yhero-facts li { width: 100%; justify-content: flex-start; }
  .yhero-autograph { align-self: flex-start; margin-top: 2px; }
  .yhero-photo { width: 58%; left: -14px; }
}
.lbl-m { display: none; }
@media (max-width: 880px) { .lbl-d { display: none; } .lbl-m { display: inline; } .yhero .hero-ed-cta-row .btn-pill { white-space: nowrap; font-size: 13.5px; } }
.yhero-deck strong { color: #fff; font-weight: 600; }
@media (min-width: 881px) { .yhero .hero-ed-headline { font-size: clamp(46px, 5vw, 78px); } }
@media (max-width: 880px) { .yhero .hero-ed-headline { margin-bottom: 6px; } }

/* ── פתיחה נקייה: כותרת, משפט מרכזי, משפט ליווי, כפתורים, חתימה ── */
.yhero-lead { margin: 4px 0 0; font-size: clamp(20px, 1.75vw, 26px); line-height: 1.45; color: rgba(255,255,255,.88); font-weight: 400; }
.yhero-lead strong { color: #fff; font-weight: 700; }
.yhero-sub { position: relative; margin: 0; padding-inline-start: 18px; font-size: 16.5px; line-height: 1.65; color: rgba(255,255,255,.66); max-width: 44ch; }
.yhero-sub::before { content: ""; position: absolute; inset-inline-start: 0; top: .35em; bottom: .35em; width: 2px; border-radius: 2px; background: linear-gradient(#c4b5fd, #67e8f9); }
@media (min-width: 881px) { .yhero-text { gap: 22px; } .yhero .hero-ed-cta-row { margin-top: 8px; } .yhero-autograph { margin-top: 10px; } }
@media (max-width: 880px) {
  .yhero-lead { font-size: 18px; }
  .yhero-sub { font-size: 14px; max-width: none; }
  .yhero .hero-ed-cta-row { margin-top: 18px; }
  .yhero-autograph { margin-top: 8px; }
}
/* טלפון: הפתיחה ממלאת מסך שלם — כותרת למעלה, ירין והכפתורים בתחתית */
@media (max-width: 880px) {
  .yhero.hero-stage.hero-ed { min-height: calc(100svh - 64px); display: flex; flex-direction: column; }
  .yhero-in { flex: 1 1 auto; display: flex; padding-bottom: 34px; }
  .yhero-text { display: flex; flex-direction: column; }
  .yhero .hero-ed-cta-row { margin-top: auto; padding-top: 22px; }
  .yhero-photo { width: 64%; left: -16px; }
}
@media (max-width: 880px) { .yhero-in { align-items: stretch; padding-top: 22px; } .yhero-text { justify-content: flex-start; } }
@media (max-width: 880px) and (min-height: 760px) {
  .yhero-in { padding-top: 5svh; }
  .yhero-text { gap: 2.1svh; }
  .yhero .hero-ed-headline { font-size: min(13.2vw, 6.4svh); line-height: 1.08; }
  .yhero-lead { font-size: min(5.2vw, 2.6svh); }
  .yhero-sub { font-size: min(4vw, 2svh); }
  .yhero .hero-ed-cta-row .btn-pill { padding: 14px 12px; font-size: 14px; }
  .yhero-photo { width: 68%; }
}
.yhero-lead strong { white-space: nowrap; }
@media (max-width: 880px) { .yhero-lead { font-size: min(4.6vw, 2.5svh, 20px); } }

/* ── בלוק ההבטחה: שלושה חלקים, קו זוהר אחד לאורך כולם ── */
.yhero-promise { position: relative; padding-inline-start: 22px; display: grid; gap: 10px; margin: 2px 0 0; }
.yhero-promise::before { content: ""; position: absolute; inset-inline-start: 0; top: 4px; bottom: 4px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, #c4b5fd 0%, #a78bfa 45%, #67e8f9 100%); box-shadow: 0 0 12px rgba(167,139,250,.55); transform-origin: top; animation: yp-line 1s cubic-bezier(.2,.8,.2,1) .6s both; }
@keyframes yp-line { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.yhero-promise p { margin: 0; }
.yp-1 { font-size: clamp(20px, 1.7vw, 25px); line-height: 1.4; color: rgba(255,255,255,.9); }
.yp-1 strong { color: #fff; font-weight: 700; white-space: nowrap; }
.yp-2 { font-size: 16.5px; line-height: 1.55; color: rgba(255,255,255,.7); }
.yp-3 { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14.5px; color: rgba(255,255,255,.88); }
.yp-3 li { display: inline-flex; align-items: center; gap: 7px; }
.yp-3 li::before { content: ""; width: 15px; height: 15px; flex: none; border-radius: 50%; background: rgba(196,181,253,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.6L12 5.4' fill='none' stroke='%23c4b5fd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat; }
@media (prefers-reduced-motion: reduce) { .yhero-promise::before { animation: none; } }
@media (max-width: 880px) {
  .yhero-promise { padding-inline-start: 16px; gap: 8px; }
  .yp-1 { font-size: min(4.6vw, 2.5svh, 20px); }
  .yp-2 { font-size: min(3.7vw, 1.9svh, 15px); }
  .yp-3 { font-size: min(3.5vw, 1.8svh, 14px); gap: 4px 12px; }
}
@media (max-width: 880px) and (min-height: 760px) { .yhero-promise { gap: 12px; padding-inline-start: 18px; } .yp-2 { font-size: min(3.9vw, 2svh, 16px); } .yp-3 { font-size: min(3.7vw, 1.9svh, 15px); } }
.yhero-promise::before { top: -4px; bottom: -4px; }

/* ── קצב ופרופורציות במחשב: עמודה אחת ברוחב הכותרת, רווחים קבועים בין הקבוצות, כפתורים ברוחב העמודה ── */
@media (min-width: 881px) {
  .yhero-text { width: fit-content; max-width: 60%; gap: 0; align-items: stretch; }
  .yhero-hi { align-self: flex-start; margin-bottom: 22px; }
  .yhero .hero-ed-headline { margin: 0 0 30px; line-height: 1.04; }
  .yhero-promise { margin: 0 0 34px; gap: 12px; }
  .yhero .hero-ed-cta-row { display: grid; grid-template-columns: 1.35fr 1fr; gap: 12px; margin: 0 0 26px; }
  .yhero .hero-ed-cta-row .btn-pill { justify-content: center; text-align: center; padding-block: 14px; }
  .yhero-autograph { align-self: flex-start; margin: 0; }
  .yp-1 { font-size: clamp(20px, 1.6vw, 24px); }
  .yp-2 { font-size: clamp(15px, 1.15vw, 17px); }
  .yp-3 { font-size: clamp(14px, 1.05vw, 15.5px); gap: 6px 22px; }
}
/* טלפון: אותו קצב, מוקטן */
@media (max-width: 880px) {
  .yhero-text { gap: 0; }
  .yhero-hi { align-self: flex-start; margin-bottom: 14px; }
  .yhero .hero-ed-headline { margin: 0 0 18px; }
  .yhero-promise { margin: 0; }
  .yhero .hero-ed-cta-row { margin-top: auto; padding-top: 24px; margin-bottom: 14px; }
}

/* ── סרגל עליון: Yarin Studio משמאל, פעולות מימין ("בואו נדבר" בקצה הימני; בטלפון — התפריט מימין) ── */
.topbar { flex-direction: row-reverse; }
.topbar .top-right { flex-direction: row-reverse; }
.brand-ys .brand-name { font-family: "Work Sans", system-ui, sans-serif; font-weight: 600; letter-spacing: .01em; }
.brand-ys .brand-bug.brand-bug-y { font-family: "Work Sans", system-ui, sans-serif !important; font-size: 11.5px !important; font-weight: 700 !important; letter-spacing: -.02em; direction: ltr; }
@media (max-width: 390px) { .topbar .brand.brand-ys > span.brand-name { display: inline; font-size: 13px; } }
#me { scroll-margin-top: 110px; }

/* ── הסיפור "לקוח חיפש אתכם בגוגל": ארבעה מסכים שנראים אמיתיים וממלאים את המסגרת ── */
.ym { direction: rtl; text-align: right; height: 100%; display: flex; flex-direction: column; gap: 14px; padding: 26px 28px; color: #e9e7f7; font-size: 15px; animation: ym-in .5s ease both; }
@keyframes ym-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.ym-search { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); font-size: 17px; color: #fff; }
.ym-search svg { width: 18px; height: 18px; fill: none; stroke: #a5b4fc; stroke-width: 2; stroke-linecap: round; flex: none; }
.ym-meta { font-size: 12.5px; color: rgba(255,255,255,.45); padding-inline: 6px; }
.ym-empty { flex: 1; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; padding: 10px; border-radius: 16px; background: rgba(255,90,110,.06); border: 1px dashed rgba(255,120,140,.35); }
.ym-empty-ic { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; font-weight: 700; color: #fca5a5; background: rgba(252,165,165,.12); }
.ym-empty-t { font-size: 22px; font-weight: 700; color: #fff; }
.ym-empty-s { font-size: 14.5px; color: rgba(255,255,255,.65); max-width: 30ch; }
.ym-skel { display: grid; gap: 8px; }
.ym-skel i { display: block; height: 10px; border-radius: 6px; background: rgba(255,255,255,.07); }
.ym-skel i:nth-child(2) { width: 80%; } .ym-skel i:nth-child(3) { width: 60%; }
.ym-res { padding: 14px 18px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); display: grid; gap: 4px; position: relative; }
.ym-host { font-size: 12.5px; color: #86efac; direction: ltr; text-align: right; }
.ym-title { font-size: 17px; font-weight: 600; color: #c7d2fe; }
.ym-desc { font-size: 13.5px; color: rgba(255,255,255,.65); }
.ym-stars { color: #fbbf24; letter-spacing: 1px; margin-inline-end: 4px; }
.ym-res-comp { border-color: rgba(251,191,36,.35); background: rgba(251,191,36,.06); }
.ym-lost { margin-top: auto; padding: 14px 18px; border-radius: 14px; background: rgba(255,90,110,.08); border: 1px solid rgba(255,120,140,.3); color: #fecaca; font-size: 15px; }
.ym-lost strong { color: #fff; }
.ym-res-you { border-color: rgba(167,139,250,.6); background: linear-gradient(135deg, rgba(167,139,250,.18), rgba(103,232,249,.08)); box-shadow: 0 18px 40px -20px rgba(167,139,250,.8); }
.ym-badge { position: absolute; inset-inline-end: 14px; top: 12px; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: #a78bfa; color: #120f2a; }
.ym-dim { opacity: .45; }
.ym-toast { margin-top: auto; align-self: flex-start; display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-radius: 16px; background: rgba(20,24,56,.92); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 20px 40px -18px rgba(0,0,0,.6); animation: ym-pop .5s .5s cubic-bezier(.2,.9,.3,1.3) both; }
.ym-toast b { display: block; color: #fff; font-size: 14px; } .ym-toast small { color: rgba(255,255,255,.65); font-size: 13px; }
.ym-wa { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #25d366; color: #25d366; font-size: 0; box-shadow: 0 0 0 6px rgba(37,211,102,.18); }
@keyframes ym-pop { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
.ym-site { padding: 0; gap: 0; background: linear-gradient(160deg, #fbf7f4, #f3ece6); color: #2b211c; border-radius: 0 0 14px 14px; overflow: hidden; }
.ym-nav { display: flex; align-items: center; gap: 14px; padding: 14px 22px; border-bottom: 1px solid rgba(0,0,0,.06); font-size: 13px; }
.ym-nav b { font-size: 15px; margin-inline-end: auto; }
.ym-nav span { width: 34px; height: 7px; border-radius: 4px; background: rgba(0,0,0,.1); }
.ym-nav em { font-style: normal; font-size: 12px; padding: 7px 12px; border-radius: 999px; background: #2b211c; color: #fff; }
.ym-hero { padding: 26px 26px 16px; display: grid; gap: 10px; }
.ym-kick { font-size: 12px; color: #a0674b; letter-spacing: .04em; }
.ym-h { font-size: 30px; line-height: 1.15; font-weight: 800; }
.ym-h span { color: #a0674b; }
.ym-p { font-size: 14px; color: #6b5a52; }
.ym-ctas { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.ym-btn { font-size: 13px; padding: 10px 16px; border-radius: 999px; background: #25d366; color: #fff; font-weight: 600; }
.ym-ghost { background: transparent; color: #2b211c; border: 1px solid rgba(0,0,0,.2); }
.ym-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 6px 26px 18px; }
.ym-cards i { height: 74px; border-radius: 12px; background: linear-gradient(135deg, #e9d8cc, #d9c2b2); }
.ym-build { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px 22px; font-size: 13px; color: #fff; background: #2b211c; }
.ym-dot { width: 8px; height: 8px; border-radius: 50%; background: #86efac; box-shadow: 0 0 0 4px rgba(134,239,172,.25); animation: yhero-breathe 1.4s infinite; }
.spread-frame-mini .ym { padding: 16px; font-size: 13px; gap: 10px; min-height: 300px; }
.spread-frame-mini .ym-h { font-size: 22px; } .spread-frame-mini .ym-empty-t { font-size: 18px; } .spread-frame-mini .ym-title { font-size: 15px; } .spread-frame-mini .ym-search { font-size: 14px; padding: 10px 14px; }
.spread-mobile .spread-frame-mini { height: auto !important; max-height: none !important; overflow: visible !important; }
.spread-frame-mini .ym { min-height: 0; padding: 14px; }
.spread-frame-mini .ym-skel, .spread-frame-mini .ym-cards { display: none; }
.spread-frame-mini .ym-empty { padding: 18px 10px; }
.spread-frame-mini .ym-site .ym-hero { padding: 16px; }

/* טלפון: העבודות 3 בשורה כמו במחשב, בריבועים קטנים */
@media (max-width: 620px) {
  .ywork { padding-inline: 12px; }
  .ywork .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .ywork .win { border-radius: 10px; }
  .ywork .win:hover { transform: none; }
  .ywork .bar { display: none; }
  .ywork .shot { aspect-ratio: 1 / 1; }
  .ywork .wm { padding: 7px 7px 9px; }
  .ywork .wm span, .ywork .wm p { display: none; }
  .ywork .wm h3 { font-size: 11.5px; line-height: 1.3; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 620px) { .ywork .wm h3 { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 11px; min-height: 2.6em; } }

/* טלפון: באודות התמונה משמאל לטקסט, כמו במחשב */
@media (max-width: 820px) {
  .about-split { grid-template-columns: minmax(0, 1fr) 38%; gap: 14px; align-items: center; }
  .about-split-photo { order: 0; aspect-ratio: 3 / 4; border-radius: 14px; }
  .about-split-photo img { object-position: 62% 30%; }
  .about-split .about-ed-quote { font-size: clamp(26px, 8vw, 36px) !important; line-height: 1.1; }
  .about-split .about-ed-lede { font-size: 13.5px !important; line-height: 1.6; }
  .about-split .about-ed-glyph-row { margin-block: 10px; }
}
@media (max-width: 820px) { .about-split { align-items: stretch; } .about-split-photo { aspect-ratio: auto; min-height: 100%; } }
/* טלפון: התמונה ריבועית ומלאה (בלי חיתוך), ממורכזת לגובה הטקסט */
@media (max-width: 820px) {
  .about-split { grid-template-columns: minmax(0, 1fr) 44%; align-items: center; }
  .about-split-photo { aspect-ratio: 1 / 1; min-height: 0; }
  .about-split-photo img { object-position: 50% 50%; }
}

/* ── מה כל אתר מקבל ── */
.yinc-lead { max-width: 640px; margin: 14px auto 34px; text-align: center; color: rgba(255,255,255,.72); font-size: 16px; line-height: 1.7; padding-inline: 16px; }
.yinc { max-width: 1180px; margin: 0 auto 30px; padding: 0 24px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.yinc-card { position: relative; padding: 24px 22px 22px; border-radius: 18px; background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.1); transition: transform .3s, border-color .3s, box-shadow .3s; text-align: right; }
.yinc-card:hover { transform: translateY(-4px); border-color: rgba(196,181,253,.5); box-shadow: 0 24px 50px -28px rgba(167,139,250,.7); }
.yinc-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; font-size: 22px; background: rgba(196,181,253,.12); border: 1px solid rgba(196,181,253,.25); margin-bottom: 14px; }
.yinc-card h3 { margin: 0 0 8px; font-size: 18px; color: #fff; font-weight: 700; }
.yinc-card p { margin: 0; font-size: 14.5px; line-height: 1.65; color: rgba(255,255,255,.68); }
@media (max-width: 1100px) { .yinc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .yinc { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 12px; }
  .yinc-card { padding: 16px 14px; border-radius: 14px; }
  .yinc-ic { width: 38px; height: 38px; font-size: 18px; border-radius: 11px; margin-bottom: 10px; }
  .yinc-card h3 { font-size: 15px; margin-bottom: 6px; }
  .yinc-card p { font-size: 12.5px; line-height: 1.55; }
}