/* עיצוב משותף לאתר הציבורי: שמנת, זהב ויוקרה שקטה. הרקע (אולם מעומעם ושורות "שמחה בשיחה ♥ מזל טוב") נבנה ב-bg.js */
:root {
  --cream: #faf5ea; --ivory: #fffdf8; --champagne: #f1e3bd;
  --gold: #b08d4a; --gold-deep: #8a6a2c; --gold-light: #d9c08a;
  --ink: #33291c; --muted: #6b5d47; --link: #7a5a1f;
  --serif: "Frank Ruhl Libre", "David Libre", "David", "Times New Roman", serif;
  --sans: "Heebo", "Assistant", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { background: linear-gradient(180deg, #f3e9d0 0%, #faf5ea 55%, #fffdf8 100%) fixed; }
body { margin: 0; min-height: 100vh; font-family: var(--sans); color: var(--ink); line-height: 1.8; background: transparent; }
:focus-visible { outline: 3px solid #6b4a12; outline-offset: 3px; }
a { color: var(--link); text-underline-offset: 3px; }

/* שכבת הרקע */
.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.bg svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.bg .veil { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 42%, rgba(255,253,248,.5), rgba(255,253,248,0) 72%); }
.bg .rows { position: absolute; inset: -10% -5%; transform: rotate(-7deg); display: flex; flex-direction: column; justify-content: space-around; }
.bg .row { display: flex; width: max-content; white-space: nowrap; font-family: var(--serif); font-size: 15px; letter-spacing: .02em; line-height: 1; will-change: transform; animation: run 140s linear infinite; }
.bg .row.rev { animation-direction: reverse; animation-duration: 170s; }
.bg .row span { color: rgba(138,106,44,.62); padding: 0 14px; }
.bg .row i { font-style: normal; font-size: 19px; color: #fff; text-shadow: 0 0 7px rgba(176,141,74,.85), 0 0 2px rgba(138,106,44,.9); padding: 0 6px; }
@keyframes run { from { transform: translateX(0); } to { transform: translateX(50%); } }
@media (prefers-reduced-motion: reduce) { .bg .row { animation: none; } }

/* מבנה הדף */
.wrap { max-width: 760px; margin: 0 auto; padding: 56px 20px 72px; }
.brand { text-align: center; padding: 0 0 36px; }
.brand img { width: 108px; height: 108px; border-radius: 50%; border: 1.5px solid var(--gold); padding: 3px; background: var(--ivory); box-shadow: 0 14px 34px rgba(90,64,20,.20); }
.brand h1, h1.page { font-family: var(--serif); font-weight: 700; font-size: clamp(2.2rem, 7vw, 3.2rem); line-height: 1.1; margin: 22px 0 8px; color: var(--ink); }
.brand .sub { margin: 0; color: var(--muted); font-size: 1.15rem; }

.panel { background: rgba(255,253,248,.74); -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1);
  border: 1px solid rgba(255,255,255,.75); outline: 1px solid rgba(176,141,74,.28); outline-offset: -1px; border-radius: 20px; padding: 28px 32px; margin: 0 0 18px;
  box-shadow: 0 18px 50px rgba(90,64,20,.10); }
.panel h2 { font-family: var(--serif); font-weight: 700; font-size: 1.35rem; margin: 0 0 8px; color: var(--gold-deep); }
.panel p { margin: 0 0 8px; }
.panel p:last-child { margin-bottom: 0; }

.ways { display: grid; gap: 10px; margin-top: 18px; }
.way { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 14px; background: rgba(255,253,248,.85); border: 1px solid rgba(176,141,74,.45); color: var(--ink); text-decoration: none; transition: transform .15s, box-shadow .15s, background .15s; }
.way::after { content: "\2190"; margin-inline-start: auto; font-size: 1.3rem; color: var(--gold-deep); }
.way:hover { transform: translateY(-1px); background: #fff; box-shadow: 0 10px 26px rgba(90,64,20,.14); }
.way svg { width: 30px; height: 30px; flex: none; stroke: var(--gold-deep); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.way b { display: block; font-family: var(--serif); font-size: 1.2rem; }
.way small { display: block; color: var(--muted); font-size: .92rem; line-height: 1.4; }
.way.main { background: var(--gold); border-color: var(--gold); }
.way.main svg, .way.main::after { stroke: var(--ink); color: var(--ink); }
.way.main small { color: #2f2410; }
.way.main:hover { background: #bd9a55; }

footer.site { text-align: center; color: var(--muted); font-size: .95rem; margin-top: 36px; }
footer.site a { margin: 0 8px; }