/* ============================================
   פונט פלוס — קובץ עיצוב ראשי
   ============================================ */

/* ─── משתני CSS ─── */
:root {
  --bg-primary: #faf9f6;
  --bg-secondary: #f0ede8;
  --bg-tertiary: #fff;
  --bg-dark: #0a0a0f;
  --text-primary: #1a1a2e;
  --text-secondary: #6b6b7b;
  --text-light: #9a9aaa;
  --accent: #c8956c;
  --accent-hover: #b37d55;
  --accent-light: rgba(200, 149, 108, 0.12);
  --primary-grad: linear-gradient(135deg, #6a3aa8 0%, #d556a3 100%);
  --primary-grad-soft: linear-gradient(135deg, rgba(106, 58, 168, 0.1) 0%, rgba(213, 86, 163, 0.1) 100%);
  --white: #ffffff;
  --border: #e2dfd9;
  --border-soft: #efece7;
  --card-radius: 24px;
  --btn-radius: 12px;
  --transition-fast: 0.2s ease;
  --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 16px 64px rgba(0, 0, 0, 0.14);
  --font-body: "Heebo", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  --header-height: 76px;
}

/* ─── מצב לילה (קטלוג) ─── */
[data-theme="dark"] {
  --bg-primary: #15161b;
  --bg-secondary: #1c1d24;
  --bg-tertiary: #20222b;
  --text-primary: #f1f2f6;
  --text-secondary: #b0b3c5;
  --text-light: #6c6f7d;
  --border: #2a2d3a;
  --border-soft: #1f2129;
}

/* ─── לוחות צבע נוספים לקטלוג ─── */
[data-bg="warm"] { --bg-primary: #f5efe6; }
[data-bg="ocean"] { --bg-primary: #eef4ff; }
[data-bg="rose"] { --bg-primary: #fdf2f8; }
[data-bg="bw"] { --bg-primary: #ffffff; }

/* ─── איפוס ─── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  direction: rtl;
  overflow-x: hidden;
  min-height: 100vh;
  transition: background 0.3s, color 0.3s;
}
body.no-scroll { overflow: hidden; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; display: block; }
button { border: none; background: none; cursor: pointer; font-family: inherit; color: inherit; }
input, textarea, select { font-family: inherit; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.section-title {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 700;
  margin-bottom: 32px;
  color: var(--text-primary);
}

/* ─── כפתורים ─── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--btn-radius);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
  border: 1.5px solid transparent;
  font-family: inherit;
}
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn--small { padding: 7px 14px; font-size: 0.85rem; }
.btn--large { padding: 16px 36px; font-size: 1.05rem; }
.btn--primary {
  background: var(--primary-grad);
  color: #fff;
  box-shadow: 0 4px 16px rgba(106, 58, 168, 0.25);
}
.btn--primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(106, 58, 168, 0.35); }
.btn--secondary {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: var(--border);
}
.btn--secondary:hover:not(:disabled) { border-color: var(--text-secondary); }
.btn--google {
  background: #fff;
  color: #1a1a2e;
  border: 1.5px solid #e2e5eb;
}
.btn--google:hover { background: #f9fafb; }

/* ══════════════════════════════════════════════
   Preloader
   ══════════════════════════════════════════════ */
.preloader {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--bg-dark);
  transition: opacity 0.8s ease, visibility 0.8s ease;
}
.preloader--hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader__logo { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.preloader__hebrew { display: flex; gap: 4px; direction: rtl; }
.preloader__letter {
  font-size: clamp(3rem, 10vw, 5rem); font-weight: 300; color: #fff;
  opacity: 0; transform: translateY(30px);
  animation: letterReveal 0.7s ease forwards;
}
.preloader__letter--glow { animation: letterReveal 0.7s ease forwards, letterGlow 2s ease-in-out 2s infinite; }
@keyframes letterReveal {
  0% { opacity: 0; transform: translateY(30px); filter: blur(8px); }
  60% { filter: blur(0); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes letterGlow {
  0%, 100% { text-shadow: 0 0 10px rgba(213, 86, 163, 0.2); }
  50% { text-shadow: 0 0 30px rgba(213, 86, 163, 0.6), 0 0 60px rgba(106, 58, 168, 0.3); }
}
.preloader__font-word {
  font-size: clamp(1rem, 3vw, 1.5rem); font-weight: 200; letter-spacing: 0.5em;
  text-transform: uppercase;
  background: var(--primary-grad);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: 0; animation: fadeSlideUp 0.8s ease forwards;
}
@keyframes fadeSlideUp { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
.preloader__bar {
  position: absolute; bottom: 60px; width: 200px; height: 2px;
  background: rgba(255, 255, 255, 0.1); border-radius: 2px; overflow: hidden;
}
.preloader__bar-fill {
  height: 100%; width: 0%;
  background: var(--primary-grad);
  border-radius: 2px;
  animation: barFill 5.5s ease-in-out forwards;
  animation-delay: 0.3s;
}
@keyframes barFill { from { width: 0%; } to { width: 100%; } }

/* ══════════════════════════════════════════════
   Header
   ══════════════════════════════════════════════ */
.site-header {
  position: fixed; top: 0; right: 0; left: 0;
  z-index: 100; padding: 18px 0;
  transition: var(--transition);
  background: transparent;
}
.site-header--scrolled {
  background: rgba(250, 249, 246, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 10px 0;
  box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .site-header--scrolled { background: rgba(21, 22, 27, 0.92); }
.site-header--hidden { transform: translateY(-100%); }
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  max-width: 1280px; margin: 0 auto; padding: 0 24px;
}
.site-header__logo {
  display: flex; align-items: center; gap: 8px;
  font-size: 1.55rem; font-weight: 800;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.site-header__logo:hover { transform: scale(1.04); }
.site-header__logo-text {
  background: var(--primary-grad);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 900; letter-spacing: -0.02em;
  position: relative;
}
.site-header__logo-text::before {
  content: "";
  position: absolute;
  inset: -8px -12px;
  background: var(--primary-grad);
  filter: blur(28px);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.4s ease;
}
.site-header__logo:hover .site-header__logo-text::before { opacity: 0.18; }
/* תאימות לאחור — אם שדות ישנים עדיין קיימים */
.site-header__logo-he { color: var(--text-primary); }
.site-header__logo-en {
  font-size: 0.95rem; font-weight: 400; letter-spacing: 0.15em; text-transform: uppercase;
  background: var(--primary-grad);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.site-header__nav { display: flex; align-items: center; gap: 26px; }
.nav__link {
  font-size: 0.95rem; color: var(--text-secondary); position: relative;
  transition: var(--transition-fast); padding: 4px 0;
}
.nav__link::after {
  content: ""; position: absolute; bottom: -2px; right: 0;
  width: 0; height: 2px; background: var(--primary-grad);
  transition: width var(--transition-fast);
}
.nav__link:hover { color: var(--text-primary); }
.nav__link:hover::after, .nav__link--active::after { width: 100%; }
.nav__link--active { color: var(--text-primary); font-weight: 600; }

.site-header__tools { display: flex; align-items: center; gap: 8px; }
.site-header__icon-btn {
  position: relative;
  width: 40px; height: 40px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-primary);
  transition: var(--transition-fast);
}
.site-header__icon-btn:hover { background: var(--bg-secondary); }
.site-header__icon-btn--active { background: var(--bg-secondary); }
.site-header__cart-badge {
  position: absolute; top: 4px; left: 4px;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--primary-grad);
  color: #fff; font-size: 0.7rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.site-header__menu-toggle { display: none; width: 40px; height: 40px; border-radius: 10px; align-items: center; justify-content: center; }
.site-header__mobile { display: none; flex-direction: column; gap: 4px; padding: 12px 24px; background: var(--bg-tertiary); border-bottom: 1px solid var(--border); }
.site-header__mobile--open { display: flex; }
.site-header__mobile .nav__link { padding: 12px 0; border-bottom: 1px solid var(--border-soft); }

@media (max-width: 980px) {
  .site-header__nav { display: none; }
  .site-header__menu-toggle { display: inline-flex; }
}

/* ══════════════════════════════════════════════
   Footer
   ══════════════════════════════════════════════ */
.site-footer {
  margin-top: 80px;
  padding: 56px 0 0;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
}
.site-footer__inner {
  max-width: 1200px; margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 40px;
}
.site-footer__col h3 { font-size: 1.6rem; margin-bottom: 12px; }
.site-footer__col h3 span {
  background: var(--primary-grad);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.site-footer__col h4 { font-size: 1rem; margin-bottom: 14px; color: var(--text-primary); }
.site-footer__col a { display: block; padding: 4px 0; color: var(--text-secondary); font-size: 0.95rem; transition: var(--transition-fast); }
.site-footer__col a:hover { color: var(--text-primary); }
.site-footer__desc { color: var(--text-secondary); font-size: 0.95rem; max-width: 320px; }
.footer-newsletter { display: flex; gap: 8px; }
.footer-newsletter input {
  flex: 1; padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-size: 0.92rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.footer-newsletter input:focus {
  border-color: #b86dd0;
  outline: none;
  box-shadow: 0 0 0 4px rgba(184, 109, 208, 0.14);
}
.site-footer__bottom { margin-top: 40px; padding: 24px 0; border-top: 1px solid var(--border); text-align: center; color: var(--text-light); font-size: 0.85rem; }
.newsletter-success {
  color: #2d8a4e;
  font-size: 0.9rem;
  padding: 12px 14px;
  background: rgba(45, 138, 78, 0.08);
  border: 1px solid rgba(45, 138, 78, 0.18);
  border-radius: 10px;
  display: flex; align-items: center; gap: 8px;
  animation: successPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.newsletter-success::before {
  content: "✓";
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 22px; height: 22px;
  background: #2d8a4e;
  color: #fff;
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.78rem;
  flex-shrink: 0;
}
@keyframes successPop {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

@media (max-width: 880px) {
  .site-footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .site-footer__inner { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════
   עמוד הבית
   ══════════════════════════════════════════════ */
.page-home { padding-top: calc(var(--header-height) + 24px); }

.home-hero {
  text-align: center;
  padding: 56px 24px 64px;
  position: relative;
}
.home-hero::before {
  content: "";
  position: absolute;
  top: 30%; left: 50%; transform: translateX(-50%);
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(213, 86, 163, 0.07) 0%, transparent 60%);
  pointer-events: none; z-index: -1;
}
.home-hero__title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800; line-height: 1.1;
  margin-bottom: 18px;
  letter-spacing: -0.02em;
}
.home-hero__title span {
  background: var(--primary-grad);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.home-hero__subtitle {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--text-secondary);
  max-width: 640px; margin: 0 auto;
  line-height: 1.6;
}

/* ── עיצובים מובחרים (Featured Carousel) ── */
.home-featured {
  display: grid; grid-template-columns: 2fr 1fr; gap: 16px;
  max-width: 1280px; margin: 0 auto 80px; padding: 0 24px;
  height: 460px;
}
.featured__big { position: relative; border-radius: var(--card-radius); overflow: hidden; box-shadow: var(--shadow-md); }
.featured__side { display: grid; grid-template-rows: 1fr 1fr; gap: 16px; }
.featured__small { position: relative; border-radius: var(--card-radius); overflow: hidden; box-shadow: var(--shadow-sm); display: block; transition: transform var(--transition); }
.featured__small:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.featured__slide {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity 0.7s ease;
  display: block;
}
.featured__slide--active { opacity: 1; }
.featured__bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.featured__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.05) 60%); }
.featured__content { position: absolute; bottom: 0; right: 0; left: 0; padding: 32px; z-index: 1; }
.featured__sample { font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.1; margin-bottom: 12px; }
.featured__small .featured__sample { font-size: clamp(1.4rem, 3vw, 2rem); }
.featured__title { color: rgba(255,255,255,0.92); font-size: 0.95rem; font-weight: 500; }
.featured__small .featured__title { font-size: 0.85rem; }

.featured__dots {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px; z-index: 2;
}
.featured__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.5); transition: var(--transition-fast);
}
.featured__dot--active { background: #fff; width: 24px; border-radius: 4px; }

@media (max-width: 880px) {
  .home-featured { grid-template-columns: 1fr; height: auto; }
  .featured__big { height: 320px; }
  .featured__side { grid-template-rows: auto; grid-template-columns: 1fr 1fr; height: 200px; }
}

/* ── יתרונות ── */
.home-advantages {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  max-width: 1100px; margin: 0 auto 80px; padding: 0 24px;
}
.advantage {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-soft);
  border-radius: var(--card-radius);
  padding: 32px 28px;
  text-align: center;
  transition: var(--transition);
}
.advantage:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.advantage h3 { font-size: 1.2rem; font-weight: 700; margin: 16px 0 8px; }
.advantage p { color: var(--text-secondary); font-size: 0.95rem; }
.advantage__icon {
  position: relative;
  width: 80px; height: 80px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--primary-grad-soft);
  display: flex; align-items: center; justify-content: center;
  color: #6a3aa8;
}
[data-theme="dark"] .advantage__icon { color: #d556a3; }
.advantage--vf .advantage__icon::after {
  content: "";
  position: absolute; inset: -6px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: var(--primary-grad) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: vfPulse 2.8s ease-in-out infinite;
}
@keyframes vfPulse {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50% { transform: scale(1.15); opacity: 1; }
}

@media (max-width: 720px) {
  .home-advantages { grid-template-columns: 1fr; gap: 14px; }
}

/* ── אודות + CTA ── */
.home-about {
  text-align: center;
  max-width: 720px; margin: 0 auto 64px; padding: 0 24px;
}
.home-about__text { font-size: 1.05rem; color: var(--text-secondary); line-height: 1.8; }
.home-catalog-cta { text-align: center; margin: 0 auto 80px; padding: 0 24px; }

/* ── ניוזלטר ── */
.home-newsletter { padding: 64px 24px; }
.newsletter-box {
  max-width: 720px; margin: 0 auto;
  background: var(--primary-grad);
  border-radius: var(--card-radius);
  padding: 48px 36px;
  text-align: center;
  color: #fff;
  box-shadow: var(--shadow-lg);
}
.newsletter-box h2 { font-size: clamp(1.4rem, 3vw, 1.8rem); margin-bottom: 8px; }
.newsletter-box p { opacity: 0.9; margin-bottom: 24px; }
.newsletter-form {
  display: flex; gap: 8px; max-width: 480px; margin: 0 auto; flex-wrap: wrap;
}
.newsletter-form input {
  flex: 1; min-width: 220px; padding: 14px 16px;
  border: none; border-radius: var(--btn-radius);
  background: rgba(255,255,255,0.95);
  color: var(--text-primary); font-size: 1rem;
}

/* ══════════════════════════════════════════════
   Modal
   ══════════════════════════════════════════════ */
.modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.modal--open { opacity: 1; pointer-events: auto; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); }
.modal__panel {
  position: relative;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-radius: var(--card-radius);
  padding: 36px 32px;
  max-width: 540px; width: 100%; max-height: 92vh; overflow: auto;
  box-shadow: var(--shadow-xl);
  transform: scale(0.96);
  transition: transform 0.3s ease;
}
.modal--open .modal__panel { transform: scale(1); }
.modal__panel--small { max-width: 420px; }
.modal__close {
  position: absolute; top: 14px; left: 14px;
  width: 32px; height: 32px; border-radius: 50%;
  font-size: 1.5rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
}
.modal__close:hover { background: var(--bg-secondary); }
.modal__title { font-size: 1.4rem; margin-bottom: 8px; }
.modal__lead { color: var(--text-secondary); margin-bottom: 24px; }

.contact-form .form-group { margin-bottom: 16px; }
.form-group label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 6px; }
.form-group input, .form-group textarea, .form-group select {
  width: 100%; padding: 11px 14px;
  border: 1px solid var(--border); border-radius: 10px;
  font-size: 1rem; background: var(--bg-tertiary); color: var(--text-primary);
}
.form-group textarea { resize: vertical; }
.form-status { margin-top: 12px; font-size: 0.9rem; min-height: 20px; }
.form-status--success { color: #16a34a; }
.form-status--error { color: #dc2626; }

.signup-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--text-light); font-size: 0.85rem; }
.signup-divider::before, .signup-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* ── Cart ── */
.cart-list { list-style: none; padding: 0; }
.cart-item {
  display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center;
  padding: 14px 0; border-bottom: 1px solid var(--border-soft);
}
.cart-item__meta { font-size: 0.85rem; color: var(--text-secondary); }
.cart-item__price { font-weight: 600; }
.cart-empty { padding: 24px 0; text-align: center; color: var(--text-secondary); }
.cart-empty a { color: var(--accent); text-decoration: underline; }
#cart-checkout { width: 100%; margin-top: 16px; }

/* ══════════════════════════════════════════════
   Catalog
   ══════════════════════════════════════════════ */
.page-catalog { padding-top: calc(var(--header-height) + 24px); }

/* ── רקע ברירת מחדל של עמוד הקטלוג: כהה (#2d2c3b) ── */
[data-page="catalog"][data-theme="dark"],
[data-page="catalog"][data-theme="dark"] body { background: #2d2c3b; }
html[data-theme="dark"][data-bg="default"] body.page-catalog,
[data-page="catalog"] body { background: #2d2c3b; }
html[data-theme="dark"] body[data-page="catalog"] { background: #2d2c3b; color: #f1f2f6; }
html[data-theme="light"][data-bg="blank"] body[data-page="catalog"] { background: #ffffff; color: var(--text-primary); }

/* כותרת קטלוג עם gradient סגול */
.catalog-header {
  text-align: center;
  padding: 28px 24px 12px;
  margin-bottom: 18px;
}
.catalog-title {
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  display: inline-flex;
  gap: 0.35em;
}
.catalog-title__a,
.catalog-title__b {
  background: var(--primary-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* במצב כהה: "קטלוג" לבן בהיר, "הפונטים" לבן כהה יותר */
html[data-theme="dark"] body[data-page="catalog"] .catalog-title__a {
  background: #ffffff;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
html[data-theme="dark"] body[data-page="catalog"] .catalog-title__b {
  background: #b8b8c8;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.catalog-subtitle {
  color: var(--text-secondary);
  font-size: 1.05rem;
  margin: 0;
}
html[data-theme="dark"] body[data-page="catalog"] .catalog-subtitle {
  color: rgba(255,255,255,0.7);
}

.catalog-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 10px 18px;
  margin: 0 auto 28px;
  box-shadow: var(--shadow-sm);
  position: sticky; top: calc(var(--header-height) - 4px); z-index: 50;
  max-width: 760px;
}
html[data-theme="dark"] body[data-page="catalog"] .catalog-toolbar {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.1);
  color: #fff;
  backdrop-filter: blur(10px);
}
.catalog-toolbar--narrow { max-width: 760px; }
.catalog-toolbar__group { display: flex; align-items: center; gap: 8px; }
.catalog-toolbar__sample { flex: 1; min-width: 140px; }
.catalog-toolbar__sample--narrow { max-width: 220px; min-width: 140px; }
.ctl-label { font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); }

.ctl-btn {
  width: 36px; height: 36px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); background: transparent; color: var(--text-secondary);
  transition: var(--transition-fast);
  cursor: pointer;
}
.ctl-btn:hover { color: var(--text-primary); border-color: var(--text-light); }
.ctl-btn--active { background: var(--primary-grad); color: #fff; border-color: transparent; }
html[data-theme="dark"] body[data-page="catalog"] .ctl-btn { color: rgba(255,255,255,0.65); border-color: rgba(255,255,255,0.18); }
html[data-theme="dark"] body[data-page="catalog"] .ctl-btn:hover { color: #fff; }
html[data-theme="dark"] body[data-page="catalog"] .ctl-btn--active { color: #fff; }

.ctl-pal { gap: 6px; }
.ctl-swatch {
  width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
  transition: var(--transition-fast);
  cursor: pointer;
}
.ctl-swatch:hover { transform: scale(1.1); }
.ctl-swatch--active { border-color: var(--text-primary); box-shadow: 0 0 0 2px var(--bg-tertiary), 0 0 0 4px var(--primary-grad); }
.ctl-swatch--dark { background: #2d2c3b; color: #fff; }
.ctl-swatch--blank { background: #ffffff; color: #1a1a2e; border-color: #e5e7eb; }
html[data-theme="dark"] body[data-page="catalog"] .ctl-swatch { border-color: rgba(255,255,255,0.2); }
html[data-theme="dark"] body[data-page="catalog"] .ctl-swatch--active { box-shadow: 0 0 0 2px #2d2c3b, 0 0 0 4px var(--primary-grad); }

#ctl-size {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-primary);
  font-size: 0.85rem;
}
#ctl-sample {
  width: 100%;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-primary);
  font-size: 0.9rem;
}
html[data-theme="dark"] body[data-page="catalog"] #ctl-size,
html[data-theme="dark"] body[data-page="catalog"] #ctl-sample {
  border-color: rgba(255,255,255,0.18);
  color: #fff;
}
html[data-theme="dark"] body[data-page="catalog"] #ctl-sample::placeholder {
  color: rgba(255,255,255,0.5);
}

.catalog-tip {
  position: fixed; top: calc(var(--header-height) + 80px); right: 50%; transform: translateX(50%) translateY(-12px);
  background: var(--text-primary); color: var(--bg-tertiary);
  padding: 10px 18px; border-radius: 999px; font-size: 0.9rem; font-weight: 500;
  box-shadow: var(--shadow-md);
  opacity: 0; transition: opacity 0.4s, transform 0.4s;
  z-index: 110;
  pointer-events: none;
}
.catalog-tip--show { opacity: 1; transform: translateX(50%) translateY(0); }

/* ══════════════════════════════════════════════
   Grid — 3 בשורה ברירת מחדל, ממורכז
   ══════════════════════════════════════════════ */
.fonts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px 80px;
  justify-content: center;
  transition: opacity 0.35s ease, transform 0.35s ease;
  opacity: 1;
}
.fonts-grid--switching { opacity: 0; transform: scale(0.985); }
.fonts-grid[data-size="small"] { grid-template-columns: repeat(4, 1fr); }
.fonts-grid[data-size="large"] { grid-template-columns: repeat(2, 1fr); }
.fonts-grid[data-view="list"] {
  display: flex; flex-direction: column; gap: 14px;
  max-width: 980px;
}
@media (max-width: 1024px) {
  .fonts-grid { grid-template-columns: repeat(2, 1fr); }
  .fonts-grid[data-size="small"] { grid-template-columns: repeat(3, 1fr); }
  .fonts-grid[data-size="large"] { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .fonts-grid, .fonts-grid[data-size="small"] { grid-template-columns: 1fr; }
}

/* ── אנימציית כניסה: סקייל-אפ עם stagger ── */
@keyframes cardPopIn {
  from {
    opacity: 0;
    transform: scale(0.7) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
.font-card,
.font-list-item {
  animation: cardPopIn 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
  animation-delay: calc(var(--idx, 0) * 60ms);
}

/* ── הכרטיס עצמו ── */
.font-card {
  display: block;
  border-radius: var(--card-radius);
  overflow: visible;
  position: relative;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.35s ease;
}
.font-card:hover {
  transform: scale(1.05) translateY(-6px);
  z-index: 5;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}
html[data-theme="light"] body[data-page="catalog"] .font-card:hover {
  box-shadow: 0 20px 60px rgba(15, 15, 60, 0.18);
}
.font-card--coming { pointer-events: auto; opacity: 0.55; cursor: not-allowed; filter: grayscale(0.4); }
.font-card--coming:hover { transform: none; box-shadow: none; }

.font-card__bg {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--card-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
[data-mode="blank"] .font-card__bg {
  background: #ffffff !important;
  border: 1px solid #e5e7eb;
}
.font-card__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.04) 70%);
  transition: var(--transition);
  pointer-events: none;
}
[data-mode="blank"] .font-card__overlay { display: none; }

/* תוכן הכרטיס: שם הפונט באמצע */
.font-card__content {
  position: relative;
  z-index: 1;
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 24px;
}
.font-card__content--center { text-align: center; }
.font-card__sample {
  font-size: clamp(2rem, 3.6vw, 3.4rem);
  line-height: 1.15;
  font-weight: 400;
  margin: 0;
  word-break: break-word;
  transition: font-weight var(--transition);
}
[data-mode="blank"] .font-card__sample { color: var(--text-primary) !important; }
.font-card:hover .font-card__sample { font-weight: 600; }

/* פוטר הכרטיס — שם רשמי + תגיות */
.font-card__footer {
  position: absolute;
  bottom: 12px;
  right: 16px;
  left: 16px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.font-card__name {
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255,255,255,0.9);
  font-family: var(--font-body);
  margin: 0;
}
[data-mode="blank"] .font-card__name { color: var(--text-secondary); }
.font-card__tags { display: flex; gap: 6px; flex-wrap: wrap; }
.font-card__tag {
  font-size: 0.68rem; padding: 3px 9px; border-radius: 999px;
  background: rgba(255,255,255,0.18); color: rgba(255,255,255,0.92);
  backdrop-filter: blur(4px);
}
[data-mode="blank"] .font-card__tag { background: var(--bg-secondary); color: var(--text-secondary); }

/* ── תווית (Badge) — מדבקה עגולה בפינה ── */
.font-card__badge {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
  transition: transform 0.3s ease;
  transform: rotate(-6deg);
}
.font-card:hover .font-card__badge { transform: rotate(0deg) scale(1.05); }
.font-card__badge--text {
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  text-align: center;
  padding: 6px;
  line-height: 1.1;
}
.font-card__badge--img {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}

/* ── List view ── */
.font-list-item {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 0;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s;
  align-items: stretch;
  position: relative;
}
html[data-theme="dark"] body[data-page="catalog"] .font-list-item {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}
.font-list-item:hover {
  transform: scale(1.02);
  box-shadow: 0 12px 32px rgba(0,0,0,0.25);
  z-index: 3;
}
.font-list-item--coming { opacity: 0.55; pointer-events: auto; cursor: not-allowed; filter: grayscale(0.4); }
.font-list-item__name {
  position: relative;
  height: 100%; min-height: 110px;
  display: flex; align-items: center; justify-content: center;
  background-size: cover; background-position: center;
  padding: 22px 18px;
}
.font-list-item__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to left, rgba(0,0,0,0.35), rgba(0,0,0,0.1));
  pointer-events: none;
}
[data-mode="blank"] .font-list-item__overlay { display: none; }
.font-list-item__name span {
  position: relative;
  z-index: 1;
  font-size: 1.6rem;
  font-weight: 500;
  text-align: center;
}
[data-mode="blank"] .font-list-item__name span { color: var(--text-primary) !important; }
.font-list-item__sample {
  padding: 22px 28px;
  font-size: 1.45rem;
  color: var(--text-primary);
  display: flex;
  align-items: center;
}
html[data-theme="dark"] body[data-page="catalog"] .font-list-item__sample { color: #f1f2f6; }

/* תווית בתצוגת רשימה — שומרת על מידה קבועה ופרופורציה */
.font-list-item .font-card__badge {
  width: 56px;
  height: 56px;
  top: 8px;
  right: 8px;
}
.font-list-item .font-card__badge--text {
  font-size: 0.65rem;
  padding: 4px;
}

@media (max-width: 600px) {
  .font-list-item { grid-template-columns: 1fr; }
}

.fonts-grid__error, .catalog-empty, .loading-text {
  grid-column: 1 / -1;
  text-align: center; padding: 48px 24px; color: var(--text-secondary);
}

/* ══════════════════════════════════════════════
   עמוד פונט V2
   ══════════════════════════════════════════════ */
.page-font { padding-top: calc(var(--header-height) + 12px); }

/* ── Hero לכל רוחב המסך, רקע אופציונלי, text-shadow דינמי ── */
#font-hero { position: relative; }
.font-hero-v2 {
  position: relative;
  text-align: center;
  padding: 90px 24px 40px;
}
.font-hero-v2--full {
  width: 100vw;
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  background-size: cover;
  background-position: center;
  min-height: clamp(300px, 50vh, 520px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.font-hero-v2__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.06);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.font-hero-v2--full[style*="background-image"] .font-hero-v2__overlay { opacity: 1; }
.font-hero-v2__display {
  position: relative;
  z-index: 1;
  font-size: clamp(3rem, 12vw, 9rem);
  line-height: 1.1;
  font-weight: 500;
  outline: none;
  min-height: 1.2em;
  padding: 18px 24px;
  border-radius: 16px;
  cursor: text;
  caret-color: var(--accent);
  text-align: center;
  transition: outline 0.2s, text-shadow 0.3s ease;
  word-break: break-word;
  /* Text Shadow מהאדמין */
  text-shadow: var(--font-text-shadow, none);
  max-width: 1200px;
}
.font-hero-v2__display:focus { outline: 2px dashed rgba(255,255,255,0.4); outline-offset: 4px; }
.font-hero-v2__hint {
  position: relative;
  z-index: 1;
  font-size: 0.85rem;
  color: var(--text-light);
  margin-top: 12px;
  opacity: 0.7;
}
.font-hero-v2--full[style*="background-image"] .font-hero-v2__hint {
  color: rgba(255,255,255,0.85);
}

.letter-anim {
  display: inline-block;
  opacity: 0;
  transform: translateY(40px);
  animation: letterRise 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  transition: font-variation-settings 0.6s ease;
}
@keyframes letterRise {
  to { opacity: 1; transform: translateY(0); }
}

#font-under-image {
  max-width: 1200px; margin: 0 auto 24px; padding: 0 24px;
}
#font-under-image img {
  width: 100%; max-height: 280px; object-fit: cover;
  border-radius: 16px;
}

/* ── Tester V2 ── */
/* ══════════════════════════════════════════════
   ★★★ Tester בצורת Pill (סרגל מחולל) ★★★
   ══════════════════════════════════════════════ */
:root {
  --controls-color: var(--accent, #c8956c);
  --tester-bg: rgba(255, 255, 255, 0.9);
  --tester-text: #1a1a2e;
}
[data-theme="dark"] {
  --tester-bg: rgba(255, 255, 255, 0.92);
}
#font-tester {
  padding: 0 0 60px;
  position: relative;
  z-index: 5;
  margin-top: -36px;
}
.tester-v2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
  background: var(--tester-bg);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 999px;
  padding: 14px 28px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
  max-width: 1100px;
  margin: 0 auto;
  color: var(--tester-text);
  transition: background 0.3s ease, color 0.3s ease;
}
.tester-v2__controls {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
}

/* כל סליידר במבנה אופקי קומפקטי */
.tester__slider-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 130px;
  flex: 1;
}
.tester__slider-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}
.tester__slider-header label { font-size: 0.78rem; font-weight: 600; opacity: 0.78; }
.tester__slider-value {
  font-size: 0.78rem; font-weight: 600;
  color: var(--controls-color);
  min-width: 36px; text-align: left;
}
.tester__slider-range { display: none; }

/* הסליידר עצמו — פס דק בצבע controls-color */
.tester__slider {
  -webkit-appearance: none; appearance: none;
  width: 100%;
  height: 3px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.12);
  outline: none;
  position: relative;
}
.tester__slider::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--controls-color) var(--prog, 50%), rgba(0, 0, 0, 0.1) 0);
}
.tester__slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: #ffffff;
  border: 2px solid var(--controls-color);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  margin-top: -8px;
  transition: transform 0.15s ease;
}
.tester__slider:active::-webkit-slider-thumb { transform: scale(1.15); }
.tester__slider::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 2px solid var(--controls-color);
  cursor: pointer;
}
.tester__slider::-moz-range-track {
  height: 3px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.12);
}

/* כפתורי יישור */
.tester__align {
  display: flex;
  gap: 2px;
  background: rgba(0, 0, 0, 0.04);
  padding: 4px;
  border-radius: 999px;
  flex: 0 0 auto;
}
.tester__align-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: none;
  background: transparent;
  color: rgba(0, 0, 0, 0.55);
  transition: var(--transition-fast);
  cursor: pointer;
}
.tester__align-btn:hover { color: rgba(0, 0, 0, 0.9); }
.tester__align-btn--active {
  background: var(--controls-color);
  color: #fff;
}

/* ── Weight bar — נמצא בתוך ה-Pill ── */
.weight-bar {
  flex: 1 1 100%;
  position: relative;
  padding: 4px 0 0;
  margin: 0;
  border: none;
}
.weight-bar__track {
  position: relative;
  height: 4px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.12);
  overflow: visible;
}
.weight-bar__fill {
  position: absolute;
  inset: 0;
  right: 0;
  width: 50%;
  border-radius: 999px;
  background: var(--controls-color) !important;
  transition: width 0.15s ease;
}
.weight-bar__slider {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  z-index: 2;
}
.weight-bar__label {
  display: flex; justify-content: space-between;
  font-size: 0.78rem; font-weight: 600;
  margin-top: 6px;
  opacity: 0.85;
}

@media (max-width: 760px) {
  .tester-v2 {
    flex-direction: column;
    border-radius: 26px;
    padding: 16px 18px;
  }
  .tester-v2__controls { width: 100%; gap: 14px; }
}

/* ══════════════════════════════════════════════
   ★★★ Night Mode לעמוד הפונט ★★★
   ══════════════════════════════════════════════ */
body.font-page--night {
  background: #15161b;
  color: #f1f2f6;
}
body.font-page--night .font-hero-v2 {
  color: #f1f2f6;
}
body.font-page--night .font-hero-v2__hint {
  color: rgba(255,255,255,0.55);
}
body.font-page--night .font-back-pill {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
}
body.font-page--night .font-back-pill:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* סרגל המחולל ב-10% שקיפות במצב לילה */
body.font-page--night {
  --tester-bg: rgba(255, 255, 255, 0.1);
  --tester-text: #fff;
}
body.font-page--night .tester-v2 {
  border-color: rgba(255, 255, 255, 0.12);
  color: #fff;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}
body.font-page--night .tester__slider {
  background: rgba(255, 255, 255, 0.18);
}
body.font-page--night .tester__slider::-webkit-slider-runnable-track {
  background: linear-gradient(to right, var(--controls-color) var(--prog, 50%), rgba(255, 255, 255, 0.18) 0);
}
body.font-page--night .tester__slider::-moz-range-track {
  background: rgba(255, 255, 255, 0.18);
}
body.font-page--night .tester__align {
  background: rgba(255, 255, 255, 0.12);
}
body.font-page--night .tester__align-btn { color: rgba(255, 255, 255, 0.65); }
body.font-page--night .tester__align-btn:hover { color: #fff; }
body.font-page--night .weight-bar__track { background: rgba(255, 255, 255, 0.18); }

/* Header (Navigation) ב-10% שקיפות במצב לילה */
body.font-page--night .site-header {
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(20px);
  border-bottom-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}
body.font-page--night .site-header .nav__link,
body.font-page--night .site-header .site-header__logo,
body.font-page--night .site-header__icon-btn {
  color: #fff !important;
}
body.font-page--night .site-header .nav__link--active {
  color: #fff !important;
}
body.font-page--night .site-nav__indicator {
  background: linear-gradient(135deg, #fff, rgba(255,255,255,0.6)) !important;
}
body.font-page--night .site-header__logo-en,
body.font-page--night .site-header__logo-he,
body.font-page--night .site-header__logo-text {
  color: #fff;
  background: none;
  -webkit-text-fill-color: #fff;
}

/* טקסט אפור → לבן בהיר במצב לילה */
body.font-page--night .font-desc__text,
body.font-page--night .font-desc__meta li,
body.font-page--night .weight-stack__label,
body.font-page--night .char-preview-table caption,
body.font-page--night .price-section h3 {
  color: rgba(255, 255, 255, 0.92);
}
body.font-page--night .weight-stack--big .weight-stack__sample { color: #f1f2f6; }
body.font-page--night .font-desc__meta {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}

/* ── תיאור הפונט ── */
.font-desc {
  display: grid; grid-template-columns: 1fr 320px; gap: 32px;
  padding: 32px 24px;
}
.font-desc__title { font-size: 1.4rem; margin-bottom: 12px; }
.font-desc__text { color: var(--text-secondary); line-height: 1.8; font-size: 1rem; }
.font-desc__meta {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  padding: 20px 24px;
}
.font-desc__meta h3 { font-size: 1rem; margin-bottom: 12px; color: var(--text-primary); }
.font-desc__meta ul { list-style: none; padding: 0; }
.font-desc__meta li { padding: 6px 0; font-size: 0.9rem; color: var(--text-secondary); border-bottom: 1px solid var(--border-soft); }
.font-desc__meta li:last-child { border: none; }
.font-desc__meta strong { color: var(--text-primary); }

@media (max-width: 760px) {
  .font-desc { grid-template-columns: 1fr; gap: 16px; padding: 24px 16px; }
}

/* ── Gallery (in font page) ── */
#font-gallery { padding: 48px 0; }
.gallery__wrapper { position: relative; }
.gallery__track {
  display: flex; gap: 16px; overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 6px 0;
  scrollbar-width: none;
}
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__slide {
  flex: 0 0 320px; scroll-snap-align: start;
  border: none; padding: 0; cursor: zoom-in;
  border-radius: 16px; overflow: hidden;
  transition: transform var(--transition);
}
.gallery__slide:hover { transform: scale(1.02); }
.gallery__slide img { width: 100%; height: 220px; object-fit: cover; }
.gallery__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--bg-tertiary); color: var(--text-primary);
  font-size: 1.5rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md);
  z-index: 2;
  transition: var(--transition-fast);
}
.gallery__nav:hover { background: var(--primary-grad); color: #fff; }
.gallery__nav--prev { right: -12px; }
.gallery__nav--next { left: -12px; }
@media (max-width: 700px) { .gallery__nav { display: none; } }

/* ── Weight stack ── */
#weight-stack { padding: 48px 0; background: var(--bg-secondary); }
.weight-stack { display: flex; flex-direction: column; gap: 4px; }
.weight-stack__row {
  display: flex; align-items: baseline; gap: 24px;
  padding: 8px 16px;
  border-radius: 12px;
  text-align: right;
  flex-direction: row-reverse;
  transition: var(--transition-fast);
}
.weight-stack__row:hover { background: var(--bg-tertiary); }
.weight-stack__label { font-size: 0.8rem; color: var(--text-light); min-width: 40px; }
.weight-stack__sample {
  flex: 1;
  font-size: clamp(1.2rem, 3vw, 2.2rem);
  line-height: 1.2;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.weight-stack--big .weight-stack__sample {
  font-size: clamp(1.6rem, 4.6vw, 3.4rem);
  letter-spacing: -0.01em;
  color: #1a1a2e;
}
[data-theme="dark"] .weight-stack--big .weight-stack__sample { color: #f1f2f6; }
.weight-stack__row--featured {
  background: var(--bg-tertiary);
  box-shadow: var(--shadow-sm);
}
.weight-stack__row--featured .weight-stack__sample { font-size: clamp(1.4rem, 3.5vw, 2.6rem); }

/* ── VF morph animation: מלבן צבעוני רחב לכל המסך ── */
#vf-morph {
  padding: 0;
  margin: 80px 0 60px;
  width: 100vw;
  position: relative;
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
}
.vf-morph-band {
  width: 100%;
  padding: 70px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
}
.vf-morph-band__inner {
  width: 100%;
  max-width: 1200px;
  position: relative;
}
.vf-morph-text {
  display: inline-block;
  white-space: nowrap;
  font-variation-settings: "wght" var(--w-min);
  font-weight: var(--w-min);
  /* מעבר חלק לחלוטין בין משקלים */
  transition: font-variation-settings 1.6s cubic-bezier(0.45, 0, 0.55, 1),
              font-weight 1.6s cubic-bezier(0.45, 0, 0.55, 1);
  animation: vfTextMorph 7s ease-in-out infinite;
}
@keyframes vfTextMorph {
  0%, 100% {
    font-variation-settings: "wght" var(--w-min);
    font-weight: var(--w-min);
    letter-spacing: 0.02em;
  }
  50% {
    font-variation-settings: "wght" var(--w-max);
    font-weight: var(--w-max);
    letter-spacing: -0.01em;
  }
}

/* ── Char preview table — 7 בשורה + Metrics ── */
#char-preview { padding: 64px 0; }
.char-preview {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 28px;
  align-items: stretch;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.char-preview__big {
  position: relative;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-soft);
  border-radius: var(--card-radius);
  padding: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 360px;
  overflow: hidden;
}
body.font-page--night .char-preview__big {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}
.char-preview__guides { position: absolute; inset: 32px; pointer-events: none; opacity: 0; transition: opacity 0.25s; }
.char-preview__big.is-hover .char-preview__guides { opacity: 1; }
.char-preview__guide { position: absolute; }
.char-preview__guide--top {
  right: 0; left: 0; height: 1px;
  top: 18%;
  background: rgba(213, 86, 163, 0.5);
}
.char-preview__guide--base {
  right: 0; left: 0; height: 1px;
  bottom: 22%;
  background: rgba(106, 58, 168, 0.5);
}
/* Metrics: קווים אנכיים בהירים משני צדי האות */
.char-preview__guide--side {
  top: 18%;
  bottom: 22%;
  width: 1px;
  background: rgba(200, 149, 108, 0.7);
}
.char-preview__guide--side-l { left: 30%; }
.char-preview__guide--side-r { right: 30%; }
body.font-page--night .char-preview__guide--side {
  background: rgba(255, 255, 255, 0.4);
}

.char-preview__display {
  font-size: clamp(8rem, 18vw, 14rem);
  line-height: 1;
  color: var(--text-primary);
  position: relative;
  z-index: 1;
  transition: color 0.25s;
}
body.font-page--night .char-preview__display { color: #fff; }

.char-preview__metrics {
  position: absolute;
  bottom: 8px;
  right: 12px;
  font-size: 0.7rem;
  color: rgba(200, 149, 108, 0.85);
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.char-preview__big.is-hover .char-preview__metrics { opacity: 1; }

/* רשת תווים — 7 בשורה, תאים גדולים */
.char-preview__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 8px;
}
.char-preview__grid--7 {
  grid-template-columns: repeat(7, 1fr);
}
.char-preview__cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  font-size: 2rem;
  transition: var(--transition-fast);
  cursor: pointer;
}
body.font-page--night .char-preview__cell {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  color: #f1f2f6;
}
.char-preview__cell:hover, .char-preview__cell:focus {
  border-color: var(--controls-color, #6a3aa8);
  background: var(--primary-grad-soft);
  transform: translateY(-2px);
  outline: none;
}
body.font-page--night .char-preview__cell:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
}
@media (max-width: 900px) {
  .char-preview { grid-template-columns: 1fr; }
  .char-preview__big { min-height: 240px; }
  .char-preview__display { font-size: 7rem; }
  .char-preview__grid--7 { grid-template-columns: repeat(5, 1fr); }
}

/* ══════════════════════════════════════════════
   ★ Price section — רחב, ממורכז וסימטרי
   ══════════════════════════════════════════════ */
#price-section {
  padding: 64px 24px 96px;
  background: var(--bg-secondary);
}
body.font-page--night #price-section {
  background: rgba(255,255,255,0.02);
}
.price-card {
  max-width: 1100px;
  margin: 0 auto;
  background: var(--bg-tertiary);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  display: grid;
  grid-template-columns: 320px 1fr;
}
body.font-page--night .price-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}
.price-card__image { width: 100%; height: 100%; object-fit: cover; min-height: 280px; }
.price-card__body {
  padding: 44px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}
.price-card__title {
  font-size: 1.7rem;
  font-weight: 700;
  margin-bottom: 8px;
  background: var(--primary-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
body.font-page--night .price-card__title {
  background: #fff;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.price-card__hint {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin: 16px 0 8px;
  font-weight: 500;
}
body.font-page--night .price-card__hint { color: rgba(255,255,255,0.7); }
.price-card__total {
  margin-top: 18px;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
}
body.font-page--night .price-card__total { color: #fff; }
.price-card__body .btn {
  margin-top: 20px;
  min-width: 260px;
  border-radius: 999px;
  padding: 14px 32px;
}

/* רשת אופציות — סימטריות וממורכזות */
.price-card__body .price-opt,
.price-card__body label.price-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 22px;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: var(--transition-fast);
  width: 100%;
  max-width: 480px;
  background: rgba(255,255,255,0.4);
}
body.font-page--night .price-opt {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.12);
  color: #f1f2f6;
}
.price-opt:hover {
  border-color: var(--controls-color, #6a3aa8);
  transform: translateY(-1px);
}
.price-opt input {
  accent-color: var(--controls-color, #6a3aa8);
  flex: 0 0 auto;
}
.price-opt__label { flex: 1; text-align: right; font-weight: 500; }
.price-opt__price {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 1.05rem;
}
body.font-page--night .price-opt__price { color: #fff; }
.price-opt__vr {
  background: var(--primary-grad);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  margin-right: 8px;
  vertical-align: middle;
}
.price-opt--family,
.price-opt--vf {
  background: linear-gradient(135deg, rgba(106,58,168,0.08), rgba(213,86,163,0.08));
  border-color: rgba(106,58,168,0.3);
}
body.font-page--night .price-opt--family,
body.font-page--night .price-opt--vf {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.2);
}
@media (max-width: 720px) {
  .price-card { grid-template-columns: 1fr; }
  .price-card__body { padding: 32px 24px; }
}

/* ══════════════════════════════════════════════
   ★ סקציית "גופנים נוספים" בתחתית עמוד הפונט
   ══════════════════════════════════════════════ */
#other-fonts {
  padding: 60px 24px 96px;
  text-align: center;
}
.other-fonts__title {
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  font-weight: 700;
  margin-bottom: 28px;
  background: var(--primary-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}
body.font-page--night .other-fonts__title {
  background: #fff;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.other-fonts__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .other-fonts__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .other-fonts__grid { grid-template-columns: 1fr; }
}

/* ── Lightbox ── */
.lightbox { padding: 40px; }
.lightbox__img { max-width: 100%; max-height: 82vh; border-radius: 16px; box-shadow: var(--shadow-xl); position: relative; z-index: 1; }
.lightbox__close { position: absolute; top: 20px; left: 20px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.95); color: #1a1a2e; font-size: 1.6rem; z-index: 5; }
.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255,255,255,0.95); color: #1a1a2e;
  font-size: 2rem; z-index: 5;
  display: flex; align-items: center; justify-content: center;
}
.lightbox__nav--prev { right: 20px; }
.lightbox__nav--next { left: 20px; }

/* ══════════════════════════════════════════════
   עמוד גלריה
   ══════════════════════════════════════════════ */
.page-gallery { padding-top: calc(var(--header-height) + 24px); }
.gallery-page-grid {
  max-width: 1280px; margin: 0 auto; padding: 0 24px 80px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px;
}
.gallery-tile {
  position: relative;
  border-radius: 16px; overflow: hidden;
  cursor: zoom-in; padding: 0; border: none;
  transition: var(--transition);
  aspect-ratio: 4 / 3;
}
.gallery-tile:hover { transform: scale(1.02); box-shadow: var(--shadow-md); }
.gallery-tile img { width: 100%; height: 100%; object-fit: cover; }
.gallery-tile__caption {
  position: absolute; bottom: 0; right: 0; left: 0;
  padding: 12px;
  background: linear-gradient(to top, rgba(0,0,0,0.65), transparent);
  color: #fff; font-size: 0.85rem;
}

/* ══════════════════════════════════════════════
   עמוד מאמרים
   ══════════════════════════════════════════════ */
.page-articles { padding-top: calc(var(--header-height) + 24px); }
.articles-grid {
  max-width: 1200px; margin: 0 auto; padding: 0 24px 80px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px;
}
.article-card {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-soft);
  border-radius: var(--card-radius);
  overflow: hidden;
  transition: var(--transition);
}
.article-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.article-card__img { width: 100%; aspect-ratio: 16 / 9; background-size: cover; background-position: center; background-color: var(--bg-secondary); }
.article-card__title { padding: 16px 18px 4px; font-size: 1.1rem; font-weight: 700; }
.article-card__excerpt { padding: 0 18px 18px; color: var(--text-secondary); font-size: 0.9rem; }

/* ══════════════════════════════════════════════
   עמוד מחירון
   ══════════════════════════════════════════════ */
.page-pricing { padding-top: calc(var(--header-height) + 24px); }
.pricing-grid {
  max-width: 1200px; margin: 0 auto; padding: 0 24px 80px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px;
}
.pricing-card {
  position: relative;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-soft);
  border-radius: var(--card-radius);
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease, border-color 0.3s ease;
  display: flex; flex-direction: column;
  opacity: 0;
  animation: cardFadeUp 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(var(--idx, 0) * 80ms);
}
.pricing-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(106, 58, 168, 0.2);
  border-color: rgba(106, 58, 168, 0.4);
}
.pricing-card--skeleton {
  pointer-events: none;
  padding: 14px;
  opacity: 1; animation: none;
}
.pricing-card__badge {
  position: absolute; top: 14px; left: 14px;
  z-index: 2;
  padding: 4px 12px;
  background: var(--primary-grad);
  color: #fff;
  font-size: 0.75rem; font-weight: 700;
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(106,58,168,0.3);
  letter-spacing: 0.02em;
}
.pricing-card__img-wrap {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-secondary);
}
.pricing-card__img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.pricing-card:hover .pricing-card__img { transform: scale(1.06); }
.pricing-card__placeholder {
  aspect-ratio: 16 / 10;
  background: var(--primary-grad);
  color: rgba(255,255,255,0.92);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.pricing-card__placeholder::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.18), transparent 50%);
}
.pricing-card__placeholder span {
  font-size: 4rem; font-weight: 900;
  position: relative;
}
.pricing-card__body {
  padding: 18px 20px 20px;
  flex: 1;
  display: flex; flex-direction: column;
}
.pricing-card__title { font-size: 1.1rem; margin-bottom: 6px; font-weight: 700; line-height: 1.3; }
.pricing-card__desc {
  color: var(--text-secondary);
  font-size: 0.88rem; line-height: 1.55;
  min-height: 2.5em;
  margin-bottom: 18px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pricing-card__footer {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
  margin-top: auto;
}
.pricing-card__price {
  background: var(--primary-grad);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 1.4rem; font-weight: 800;
}
.pricing-card__cta {
  font-size: 0.85rem; font-weight: 700;
  color: var(--text-secondary);
  transition: color 0.25s ease, letter-spacing 0.25s ease;
}
.pricing-card:hover .pricing-card__cta {
  color: #6a3aa8;
  letter-spacing: 0.04em;
}

/* ══════════════════════════════════════════════
   איזור אישי
   ══════════════════════════════════════════════ */
.page-account { padding-top: calc(var(--header-height) + 24px); }
.account-wrap { max-width: 720px; margin: 0 auto; padding: 0 24px 80px; }
.account-card {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-soft);
  border-radius: var(--card-radius);
  padding: 32px;
  box-shadow: var(--shadow-sm);
}
.account-card h2 { font-size: 1.5rem; margin-bottom: 8px; }
.account-card h3 { font-size: 1.05rem; margin: 24px 0 12px; }
.account-form .form-group { margin-bottom: 14px; }
.account-form__buttons { display: flex; gap: 8px; }
.account-msg { padding: 14px 0; color: var(--text-secondary); }
.account-msg a { color: #6a3aa8; text-decoration: underline; }
.account-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.account-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.account-stat {
  background: var(--primary-grad-soft);
  border-radius: 14px;
  padding: 18px;
  text-align: center;
}
.account-stat strong { display: block; font-size: 1.8rem; color: #6a3aa8; }
.account-stat span { color: var(--text-secondary); font-size: 0.9rem; }
.account-purchases { list-style: none; padding: 0; }
.account-purchases li {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--border-soft);
  flex-wrap: wrap;
}
.account-purchases span { color: var(--text-secondary); font-size: 0.9rem; }

/* ══════════════════════════════════════════════
   טעינה ושגיאות
   ══════════════════════════════════════════════ */
.page-loader {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(250, 249, 246, 0.92);
  color: var(--text-secondary);
  font-size: 1.1rem; font-weight: 500;
}
[data-theme="dark"] .page-loader { background: rgba(21, 22, 27, 0.92); }
.page-loader--done { display: none; }

.error-message { text-align: center; padding: 120px 24px; }
.error-message h2 { font-size: 1.5rem; margin-bottom: 16px; }
.error-message a { color: #6a3aa8; font-weight: 600; text-decoration: underline; }

/* ══════════════════════════════════════════════
   רספונסיבי כללי
   ══════════════════════════════════════════════ */
@media (max-width: 600px) {
  .container { padding: 0 16px; }
  .home-hero { padding: 16px 16px 36px; }
  .catalog-toolbar { margin: 0 16px 20px; padding: 12px; }
  .catalog-toolbar__sample { width: 100%; }
  .fonts-grid { padding: 0 16px 60px; gap: 16px; }
  .modal__panel { padding: 24px 18px; }
  .featured__content { padding: 18px; }
}

/* ══════════════════════════════════════════════
   ★★★ Scroll Reveal — חשיפה הדרגתית ★★★
   ══════════════════════════════════════════════ */
[data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
[data-reveal="left"]   { transform: translateX(-40px); }
[data-reveal="right"]  { transform: translateX(40px); }
[data-reveal="scale"]  { transform: scale(0.92); }
[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

[data-reveal-delay="1"].is-revealed { transition-delay: 0.12s; }
[data-reveal-delay="2"].is-revealed { transition-delay: 0.24s; }
[data-reveal-delay="3"].is-revealed { transition-delay: 0.36s; }
[data-reveal-delay="4"].is-revealed { transition-delay: 0.48s; }
[data-reveal-delay="5"].is-revealed { transition-delay: 0.60s; }

/* ══════════════════════════════════════════════
   ★★★ כפתורי Pill (גלובלי) ★★★
   ══════════════════════════════════════════════ */
.btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 700;
  font-size: 1.05rem;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.25s ease,
              filter 0.2s ease;
  position: relative;
  overflow: hidden;
}
.btn-pill--primary {
  background: var(--primary-grad);
  color: #fff;
  box-shadow: 0 6px 20px rgba(106, 58, 168, 0.32);
}
.btn-pill--primary::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #d556a3 0%, #6a3aa8 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 0;
}
.btn-pill--primary > * { position: relative; z-index: 1; }
.btn-pill--primary:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 10px 30px rgba(106, 58, 168, 0.45); }
.btn-pill--primary:hover::before { opacity: 1; }
.btn-pill--primary:active { transform: translateY(-1px) scale(1.02); }

.btn-pill--ghost {
  background: rgba(255, 255, 255, 0.92);
  color: var(--text-primary);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.btn-pill--ghost:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: var(--shadow-md);
  background: #fff;
}

.btn-pill__icon {
  font-size: 1.1em;
  display: inline-flex;
  transition: transform 0.3s ease;
}
.btn-pill:hover .btn-pill__icon { transform: translateX(-4px); }

/* ══════════════════════════════════════════════
   ★★★ Page Transition — מעבר עמודים חלק ★★★
   ══════════════════════════════════════════════ */
.page-transition-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-primary);
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.page-transition-overlay.is-fading {
  opacity: 1;
  pointer-events: all;
}

body.page-leaving main,
body.page-leaving .home-content,
body.page-leaving .font-page,
body.page-leaving .catalog-page,
body.page-leaving .gallery-wrap,
body.page-leaving .articles-wrap,
body.page-leaving .pricing-wrap,
body.page-leaving .account-wrap {
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 0.32s ease, transform 0.32s ease;
}

/* Header underline glides between active items */
.site-header__nav { position: relative; }
.site-nav__indicator {
  position: absolute;
  bottom: -4px;
  height: 3px;
  border-radius: 2px;
  background: var(--primary-grad);
  transition: right 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              width 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.3s ease;
  pointer-events: none;
  opacity: 0;
}

/* ══════════════════════════════════════════════
   ★★★ Hero חדש — תמונת רקע גדולה ★★★
   ══════════════════════════════════════════════ */
.home-hero-v2 {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 60px;
  background: #0a0a0f;
  color: #fff;
}
.home-hero-v2__bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.55) saturate(1.05);
  transform: scale(1.05);
  animation: heroBgZoom 14s ease-in-out infinite alternate;
}
@keyframes heroBgZoom {
  from { transform: scale(1.05); }
  to   { transform: scale(1.12); }
}
.home-hero-v2__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0.7) 100%);
}
.home-hero-v2__content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 40px 24px;
  max-width: 900px;
}
.home-hero-v2__logo {
  font-size: clamp(3.2rem, 9vw, 6.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
  background: linear-gradient(135deg, #fff 0%, #d556a3 50%, #6a3aa8 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: logoGradient 6s ease-in-out infinite, logoFadeIn 1.4s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes logoGradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes logoFadeIn {
  from { opacity: 0; transform: translateY(28px) scale(0.95); filter: blur(8px); }
  to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.home-hero-v2__sub {
  font-size: clamp(1.05rem, 2.4vw, 1.45rem);
  color: rgba(255,255,255,0.88);
  margin: 18px auto 32px;
  max-width: 560px;
  line-height: 1.5;
  animation: logoFadeIn 1.4s 0.4s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.home-hero-v2__cta {
  animation: logoFadeIn 1.4s 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.home-hero-v2__scroll {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  opacity: 0.7;
  font-size: 0.85rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  animation: floatBob 2.4s ease-in-out infinite;
}
@keyframes floatBob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(8px); }
}

/* ══════════════════════════════════════════════
   ★★★ Advantages חדש — חלונות אלכסוניים ★★★
   ══════════════════════════════════════════════ */
.advantages-v2 {
  margin: 80px 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
/* ════════════════════════════════════════════════════════════
   ADVANTAGES — Hero Bands (V3 — מבוסס הדמיה)
   3 פסים אלכסוניים בגווני כחול-בהיר, כל אחד מכיל:
   glyph גדול עם דקורציית טיפוגרפיה + connector + callout עם
   pill כותרת כהה ובועה לבנה למטה.
   ════════════════════════════════════════════════════════════ */
.advantages-v3 { display: flex; flex-direction: column; gap: 0; }

.adv-band {
  position: relative;
  padding: 70px 24px;
  overflow: hidden;
  background: linear-gradient(180deg, #f4f6fc 0%, #eaeefa 100%);
  border-top: 1px solid rgba(110, 143, 230, 0.14);
  border-bottom: 1px solid rgba(110, 143, 230, 0.14);
  transform: skewY(-3deg);
  margin: -1px 0;
}
.adv-band--alt {
  background: linear-gradient(180deg, #eaeefa 0%, #dde4f6 100%);
}
.adv-band__inner {
  transform: skewY(3deg);
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto minmax(220px, 280px);
  gap: 14px;
  align-items: center;
  direction: rtl;
}
.adv-band--flip .adv-band__inner {
  grid-template-columns: minmax(220px, 280px) auto minmax(280px, 1fr);
}
.adv-band--flip .adv-glyph { order: 3; }
.adv-band--flip .adv-connector { order: 2; }
.adv-band--flip .adv-callout { order: 1; }

/* ── האות הגדולה + דקורציה ── */
.adv-glyph {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  padding: 14px;
}
.adv-glyph__deco {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.adv-glyph__letter {
  position: relative;
  z-index: 2;
  font-family: "Heebo", "Inter", system-ui, sans-serif;
  font-size: clamp(5rem, 11vw, 9.5rem);
  font-weight: 900;
  color: #1a1d3a;
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-align: center;
  text-shadow: 0 2px 0 rgba(255,255,255,0.6);
}

/* ── Callout — בועה לבנה עם pill כותרת ── */
.adv-callout {
  position: relative;
  background: #fff;
  border: 1.5px solid #c7d3ee;
  border-radius: 22px;
  padding: 28px 22px 22px;
  box-shadow: 0 10px 30px rgba(91, 141, 238, 0.14);
  max-width: 280px;
  margin: 0 auto;
  text-align: center;
}
.adv-callout::before,
.adv-callout::after {
  content: "";
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #6E8FE6;
  top: 50%;
  transform: translateY(-50%);
  box-shadow: 0 0 0 3px rgba(110, 143, 230, 0.14);
}
.adv-callout::before { right: -16px; }
.adv-callout::after  { left: -16px; }

.adv-callout__badge {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #2a2d54 0%, #3f3f7a 60%, #4a4a8c 100%);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 8px 22px;
  border-radius: 999px;
  white-space: nowrap;
  letter-spacing: 0.01em;
  box-shadow: 0 6px 18px rgba(42, 45, 84, 0.35),
              inset 0 1px 0 rgba(255,255,255,0.18);
}
.adv-callout__text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #2a2d3a;
  font-weight: 600;
  min-height: 4em;
}

/* ── Connector — קו מקווקו בין הקופסה ל-glyph ── */
.adv-connector {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 1px;
  width: clamp(40px, 8vw, 90px);
  justify-self: center;
}
.adv-connector__line {
  flex: 1;
  height: 0;
  border-top: 1.4px dashed #6E8FE6;
  opacity: 0.7;
}
.adv-connector__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #fff;
  border: 1.6px solid #6E8FE6;
  flex-shrink: 0;
}

/* רספונסיביות */
@media (max-width: 880px) {
  .adv-band { padding: 50px 18px; }
  .adv-band__inner,
  .adv-band--flip .adv-band__inner {
    grid-template-columns: 1fr;
    gap: 36px;
    text-align: center;
  }
  .adv-band--flip .adv-glyph,
  .adv-band--flip .adv-callout,
  .adv-band--flip .adv-connector { order: unset; }
  .adv-callout { max-width: 100%; }
  .adv-glyph { min-height: 180px; }
  .adv-glyph__letter { font-size: clamp(4rem, 18vw, 7rem); }
  .adv-connector {
    width: 1.4px; height: 50px;
    flex-direction: column;
    margin: 0 auto;
  }
  .adv-connector__line {
    flex: 1;
    width: 0; height: auto;
    border-top: none;
    border-right: 1.4px dashed #6E8FE6;
  }
  .adv-callout::before,
  .adv-callout::after { display: none; }
}

/* כפתור חזרה לקטלוג בעמוד פונט */
.font-back-pill {
  position: fixed;
  top: calc(var(--header-height) + 14px);
  right: 24px;
  z-index: 50;
  padding: 10px 22px;
  font-size: 0.92rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
.font-back-pill:hover {
  background: #fff;
  transform: translateY(-2px) scale(1.05);
}
[data-theme="dark"] .font-back-pill {
  background: rgba(40, 42, 56, 0.85);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.12);
}
@media (max-width: 600px) {
  .font-back-pill {
    top: calc(var(--header-height) + 8px);
    right: 12px;
    padding: 8px 16px;
    font-size: 0.85rem;
  }
}

/* ── מיקרו-אנימציה מדורגת בתוך פס יתרון ── */
.adv-band [data-adv-step] {
  opacity: 0;
  transform: translateY(20px) scale(0.96);
  transition: opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.adv-band.is-shown [data-adv-step="1"] {
  opacity: 1;
  transform: none;
  transition-delay: 0s;
}
.adv-band.is-shown [data-adv-step="2"] {
  opacity: 1;
  transform: none;
  transition-delay: 0.45s;
}
.adv-band.is-shown [data-adv-step="3"] {
  opacity: 1;
  transform: none;
  transition-delay: 0.9s;
}

/* אפקט מכונת כתיבה */
[data-adv-typing] {
  min-height: 3em; /* שמירה על מקום לפני שהטקסט מופיע */
}
[data-adv-typing].is-typing::after {
  content: "▌";
  display: inline-block;
  margin-right: 1px;
  color: #2c2c54;
  animation: caretBlink 0.7s steps(2) infinite;
}
@keyframes caretBlink {
  to { opacity: 0; }
}

/* hover: עיגול וגדילה לכרטיס */
.adv-card { cursor: default; }
.adv-letter,
.adv-illustration {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.adv-letter:hover,
.adv-illustration:hover {
  transform: scale(1.05) rotate(-1deg);
}


/* ══════════════════════════════════════════════════════════════
   ★ POLISH PASS — שיפורים גלובליים יוקרתיים (לכל הדפים)
   ══════════════════════════════════════════════════════════════ */

/* ── 1. Smooth scroll & scroll-padding-top (לעוגנים מתחת ל-header דבוק) ── */
html { scroll-padding-top: calc(var(--header-height) + 16px); }

/* ── 2. בחירת טקסט בצבעי המותג ── */
::selection { background: rgba(213, 86, 163, 0.22); color: var(--text-primary); }
::-moz-selection { background: rgba(213, 86, 163, 0.22); color: var(--text-primary); }

/* ── 3. Focus ring עדין ויוקרתי לכל אלמנט אינטראקטיבי ── */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid #d556a3;
  outline-offset: 3px;
  border-radius: 8px;
  transition: outline-offset 0.15s ease;
}

/* ── 4. שדות טופס — focus state יוקרתי ── */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
textarea, select {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
textarea:focus, select:focus {
  outline: none;
  border-color: #b86dd0 !important;
  box-shadow: 0 0 0 4px rgba(184, 109, 208, 0.14);
}

/* ── 5. כפתורים — depth + shimmer עדין ב-hover ── */
.btn { position: relative; overflow: hidden; transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, background 0.2s ease, border-color 0.2s ease; }
.btn::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,0.35) 50%, transparent 65%);
  transform: translateX(120%); transition: transform 0.7s ease; pointer-events: none;
}
.btn:hover:not(:disabled)::after { transform: translateX(-120%); }
.btn:active:not(:disabled) { transform: translateY(0) scale(0.98); }
.btn--secondary:hover:not(:disabled) {
  border-color: #b86dd0;
  box-shadow: 0 6px 18px rgba(184, 109, 208, 0.18);
  transform: translateY(-2px);
}

/* ── 6. Skeleton loading screens ── */
.skeleton {
  position: relative; overflow: hidden;
  background: linear-gradient(110deg, #ece9e2 25%, #f5f3ee 50%, #ece9e2 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: 8px;
}
[data-theme="dark"] .skeleton {
  background: linear-gradient(110deg, #232530 25%, #2c2f3c 50%, #232530 75%);
  background-size: 200% 100%;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.skeleton--line { height: 14px; margin-bottom: 10px; }
.skeleton--line:last-child { margin-bottom: 0; }
.skeleton--h1 { height: 36px; width: 70%; margin-bottom: 18px; }
.skeleton--h3 { height: 22px; width: 80%; margin-bottom: 12px; }
.skeleton--short { width: 50%; }
.skeleton--img { aspect-ratio: 16 / 9; width: 100%; border-radius: 16px; margin-bottom: 14px; }

/* article-card skeleton variant */
.article-card--skeleton {
  pointer-events: none;
  background: var(--bg-tertiary, #fff);
  padding: 14px;
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-sm);
}

/* ── 7. Header — shadow רך כשגוללים ── */
.site-header { transition: box-shadow 0.3s ease, background 0.3s ease, backdrop-filter 0.3s ease; }
.site-header--scrolled {
  background: rgba(250, 249, 246, 0.86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 4px 22px rgba(15, 16, 25, 0.06);
}
[data-theme="dark"] .site-header--scrolled {
  background: rgba(20, 21, 27, 0.78);
}

/* ── 8. Article cards — lift יוקרתי ── */
.article-card {
  display: flex; flex-direction: column;
  background: var(--bg-tertiary, #fff);
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
  opacity: 0;
  animation: cardFadeUp 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(var(--idx, 0) * 80ms);
}
@keyframes cardFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.article-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 50px rgba(106, 58, 168, 0.18);
}
.article-card__img {
  aspect-ratio: 16 / 10;
  background-size: cover; background-position: center;
  background-color: var(--bg-secondary);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.article-card:hover .article-card__img { transform: scale(1.04); }
.article-card__body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; }
.article-card__title { font-size: 1.12rem; font-weight: 700; color: var(--text-primary); line-height: 1.35; }
.article-card__excerpt { color: var(--text-secondary); font-size: 0.92rem; line-height: 1.55; margin: 0; }
.article-card__more {
  margin-top: 6px;
  font-weight: 700; font-size: 0.9rem;
  background: var(--primary-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: letter-spacing 0.25s ease;
}
.article-card:hover .article-card__more { letter-spacing: 0.04em; }

/* ── 9. עמוד מאמר בודד ── */
.page-article { max-width: 100%; padding: 0 0 80px; }
.article-view {
  max-width: 880px; margin: 0 auto; padding: 0 24px;
}
.article-view__hero {
  position: relative;
  width: 100vw;
  margin: 0 calc(50% - 50vw) 36px;
  min-height: 360px;
  display: flex; align-items: flex-end;
  background-size: cover; background-position: center;
  background-color: var(--bg-secondary);
  color: #fff;
}
.article-view__hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(10,10,18,0.78) 100%);
}
.article-view__hero-text {
  position: relative; z-index: 1;
  max-width: 880px; width: 100%;
  margin: 0 auto;
  padding: 36px 24px 36px;
}
.article-view__back {
  display: inline-flex; align-items: center; gap: 6px;
  color: rgba(255,255,255,0.85); font-weight: 600; font-size: 0.92rem;
  margin-bottom: 14px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(8px);
  transition: background 0.2s ease;
}
.article-view__back:hover { background: rgba(255,255,255,0.22); }
.article-view__title {
  font-size: clamp(1.8rem, 4.5vw, 3rem);
  font-weight: 800;
  line-height: 1.15;
  text-shadow: 0 2px 24px rgba(0,0,0,0.4);
  margin: 0;
}
.article-view__meta { margin-top: 8px; opacity: 0.85; font-size: 0.95rem; }
.article-view__excerpt {
  font-size: 1.18rem; color: var(--text-secondary);
  line-height: 1.65; margin-bottom: 28px; font-weight: 500;
  border-right: 4px solid #d556a3;
  padding-right: 18px;
}
.article-view__content {
  font-size: 1.06rem;
  line-height: 1.85;
  color: var(--text-primary);
}

/* כותרות */
.article-view__content h1 { font-size: 2rem;    margin: 38px 0 14px; font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; }
.article-view__content h2 { font-size: 1.65rem; margin: 36px 0 14px; font-weight: 800; line-height: 1.3; letter-spacing: -0.01em; }
.article-view__content h3 { font-size: 1.32rem; margin: 30px 0 12px; font-weight: 700; line-height: 1.35; }
.article-view__content h4 { font-size: 1.15rem; margin: 24px 0 10px; font-weight: 700; }
.article-view__content h1:first-child,
.article-view__content h2:first-child,
.article-view__content h3:first-child { margin-top: 0; }

/* פסקאות */
.article-view__content p  { margin-bottom: 18px; }
.article-view__content p:last-child { margin-bottom: 0; }

/* טקסט מודגש/נטוי/קו תחתי/חוצה */
.article-view__content strong, .article-view__content b { font-weight: 800; color: var(--text-primary); }
.article-view__content em,     .article-view__content i { font-style: italic; }
.article-view__content u  { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.article-view__content s, .article-view__content del { text-decoration: line-through; opacity: 0.7; }

/* קישורים */
.article-view__content a {
  color: #b86dd0;
  font-weight: 600;
  border-bottom: 1px solid rgba(184,109,208,0.4);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.article-view__content a:hover {
  color: #6a3aa8;
  border-bottom-color: currentColor;
}

/* תמונות */
.article-view__content img {
  border-radius: 14px;
  margin: 24px 0;
  box-shadow: var(--shadow-md);
  max-width: 100%;
  height: auto;
}

/* רשימות (Quill מייצר ul/ol עם data-list) */
.article-view__content ul,
.article-view__content ol {
  margin: 0 0 22px;
  padding-right: 1.8em;
  padding-left: 0;
}
.article-view__content ul li,
.article-view__content ol li {
  margin-bottom: 8px;
  line-height: 1.75;
}
.article-view__content ul li::marker { color: #d556a3; }
.article-view__content ol li::marker { color: #6a3aa8; font-weight: 700; }
.article-view__content ul ul,
.article-view__content ul ol,
.article-view__content ol ul,
.article-view__content ol ol { margin: 6px 0 0; }

/* Quill list-bullet/list-ordered (Quill 2 משתמש ב-data-list במקום ul/ol טבעיים) */
.article-view__content ol li[data-list="bullet"] { list-style-type: disc; }
.article-view__content ol li[data-list="ordered"] { list-style-type: decimal; }

/* ציטוטים */
.article-view__content blockquote {
  position: relative;
  margin: 26px 0;
  padding: 14px 22px;
  border-right: 4px solid #d556a3;
  border-left: none;
  color: var(--text-secondary);
  background: rgba(213,86,163,0.04);
  border-radius: 0 12px 12px 0;
  font-style: italic;
  font-size: 1.04rem;
  line-height: 1.7;
}
.article-view__content blockquote p:last-child { margin-bottom: 0; }

/* קוד inline + בלוקים */
.article-view__content code {
  background: rgba(106,58,168,0.08);
  color: #6a3aa8;
  padding: 2px 7px;
  border-radius: 5px;
  font-family: "Menlo", "Consolas", "Courier New", monospace;
  font-size: 0.92em;
}
.article-view__content pre,
.article-view__content pre.ql-syntax {
  background: #15161b;
  color: #e8e9f0;
  padding: 18px 22px;
  border-radius: 12px;
  margin: 22px 0;
  overflow-x: auto;
  font-family: "Menlo", "Consolas", monospace;
  font-size: 0.92rem;
  line-height: 1.6;
  direction: ltr;
  text-align: left;
}
.article-view__content pre code { background: none; color: inherit; padding: 0; }

/* יישור (Quill מייצר class ql-align-*) */
.article-view__content .ql-align-center { text-align: center; }
.article-view__content .ql-align-right  { text-align: right; }
.article-view__content .ql-align-left   { text-align: left; }
.article-view__content .ql-align-justify { text-align: justify; }

/* hr */
.article-view__content hr {
  margin: 34px 0;
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}

/* טבלאות (אם המנהל יוסיף ב-HTML) */
.article-view__content table {
  width: 100%;
  border-collapse: collapse;
  margin: 22px 0;
  font-size: 0.95rem;
}
.article-view__content th,
.article-view__content td {
  padding: 10px 14px;
  border: 1px solid var(--border-soft);
  text-align: right;
}
.article-view__content th {
  background: var(--bg-secondary);
  font-weight: 700;
}
.article-view__footer { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--border-soft); display: flex; justify-content: center; }
.article-view__skeleton { padding: 24px 0; }

/* ── 10. Empty state נקי (אין נתונים) ── */
.error-message {
  max-width: 540px; margin: 80px auto;
  text-align: center; padding: 40px 28px;
  background: var(--bg-tertiary, #fff);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-md);
}
.error-message h2 { font-size: 1.6rem; margin-bottom: 14px; color: var(--text-primary); }
.error-message p { color: var(--text-secondary); margin-bottom: 20px; }
.error-message a.btn { margin-top: 8px; }

/* ── 11. Page transition fade ── */
body { animation: pageFadeIn 0.45s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes pageFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
body.page-leaving { opacity: 0; transition: opacity 0.32s ease; }

/* ── 12. עמוד מאמרים — grid יוקרתי ── */
.articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 28px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── 13. תיקון קלפי מחירון ל-grid נקי ── */
#pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── 14. typography refinement — קונטרסט וגדלים פלואידיים ── */
h1, h2, h3, h4 { letter-spacing: -0.01em; }
h1 { letter-spacing: -0.02em; }

/* ── 15. דה-בלוק לרספ' מובייל ── */
@media (max-width: 720px) {
  .article-view__hero { min-height: 260px; }
  .article-view__hero-text { padding: 24px 18px; }
  .articles-grid, #pricing-grid { padding: 0 16px; gap: 18px; }
  .container { padding: 0 18px; }
  .btn { padding: 11px 20px; }
}

/* ── 16. עמוד אזור אישי — Coming soon יוקרתי ── */
.account-coming {
  max-width: 720px;
  margin: 60px auto;
  padding: 60px 40px;
  background: var(--bg-tertiary);
  border-radius: var(--card-radius);
  text-align: center;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}
.account-coming::before {
  content: ""; position: absolute;
  top: -100px; right: -100px;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(213,86,163,0.10), transparent 70%);
  pointer-events: none;
}
.account-coming__icon {
  width: 88px; height: 88px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-grad);
  color: #fff;
  border-radius: 24px;
  margin-bottom: 24px;
  box-shadow: 0 12px 30px rgba(106,58,168,0.35);
}
.account-coming h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  margin-bottom: 12px;
  background: var(--primary-grad);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.account-coming > p {
  color: var(--text-secondary);
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 560px;
  margin: 0 auto 36px;
}
.account-coming__features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 36px;
  text-align: right;
}
@media (max-width: 720px) { .account-coming__features { grid-template-columns: 1fr; } }
.account-coming__feature {
  background: var(--bg-secondary);
  padding: 18px;
  border-radius: 14px;
  display: flex; flex-direction: column; gap: 4px;
  text-align: center;
}
.account-coming__feature span:first-child {
  font-size: 2rem;
  margin-bottom: 6px;
}
.account-coming__feature strong { font-size: 0.95rem; font-weight: 700; }
.account-coming__feature small { color: var(--text-light); font-size: 0.8rem; }

/* ── 17. Reduced motion — כיבוד העדפת המשתמש ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}