/* site.css — שפת-העיצוב של HAMIXIYA לאתר. הקאנון: האפליקציה 1.0.15; הערכים מ-tokens.css בלבד. */

* { margin: 0; padding: 0; box-sizing: border-box; }

html { height: 100%; }
body {
  min-height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  /* חדר-הרקע: גרדיאנט-הקיר + שתי זריחות רכות (topTrailing→bottomLeading, כמו באפליקציה) */
  background:
    radial-gradient(760px 760px at 100% 0%, color-mix(in srgb, var(--room-glow-a) 10%, transparent), transparent 70%),
    radial-gradient(760px 760px at 0% 100%, color-mix(in srgb, var(--room-glow-b) 16%, transparent), transparent 70%),
    linear-gradient(to bottom left, var(--room-a), var(--room-b), var(--room-c));
  background-attachment: fixed;
  line-height: 1.6;
}

/* ── פס-המותג העליון: תמיד שורה אחת ── */
.bandline {
  display: flex; align-items: center; gap: 10px; justify-content: center;
  padding: 9px 16px; white-space: nowrap; overflow: hidden;
  background: color-mix(in srgb, var(--rail) 88%, transparent);
  border-bottom: 1px solid var(--hairline);
  backdrop-filter: blur(10px);
  position: sticky; top: 0; z-index: 10;
}
.bandline img { height: 18px; width: auto; display: block; }
/* נכסי-הלוגו הרשמיים הם סטנסיל-לבן; במצב-בהיר הם מקבלים דיו (היפוך-צבע נקי, אותו סימן) */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .bandline img,
  :root:not([data-theme="dark"]) .hero img.mark { filter: invert(1) opacity(0.88); }
}
html[data-theme="light"] .bandline img,
html[data-theme="light"] .hero img.mark { filter: invert(1) opacity(0.88); }
.bandline .slogan { font-size: 11.5px; color: var(--text-secondary); direction: rtl; }
.bandline .sep { color: var(--text-muted); font-size: 11px; }

main { max-width: 980px; margin: 0 auto; padding: 24px 20px 60px; }

/* ── כרטיס חצוב (לא זכוכית צפה) ── */
.card {
  background: var(--carved);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  box-shadow: 0 0.5px 1.2px rgba(0, 0, 0, 0.14);
  padding: 24px;
}

/* ── Hero ── */
.hero { text-align: center; padding: 44px 16px 28px; }
.hero img.mark { width: 132px; height: auto; margin-bottom: 6px; }
.hero h1 { font-size: 30px; font-weight: 700; letter-spacing: -0.3px; }
.hero .brush {
  width: 132px; height: 4px; border-radius: 999px; margin: 14px auto;
  background: linear-gradient(90deg, var(--sig-pink), var(--sig-violet), var(--sig-blue));
}
.hero p.lead { font-size: 17px; color: var(--text-secondary); max-width: 560px; margin: 0 auto; }
.hero .cta { display: flex; gap: 12px; justify-content: center; margin-top: 26px; flex-wrap: wrap; }

/* ── כפתורים: השקט מנצח; ריחוף = הרמה בלי צבע ── */
.btn {
  display: inline-block; border: 0; cursor: pointer; text-decoration: none;
  font-size: 14px; font-weight: 600; padding: 10px 22px;
  border-radius: var(--radius-interactive);
  transition: transform var(--motion-switch), box-shadow var(--motion-switch);
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 1.5px 3px rgba(0, 0, 0, 0.22); }
.btn:active { transform: scale(var(--press-scale)); }
.btn-accent { background: var(--accent); color: var(--accent-text); }
.btn-quiet { background: var(--carved); color: var(--text); border: 1px solid var(--hairline); }

/* ── סעיפים ── */
section { margin-top: 36px; }
section > h2 { font-size: 20px; font-weight: 700; margin-bottom: 6px; }
section > p.sub { color: var(--text-secondary); font-size: 14px; margin-bottom: 16px; }

/* ── סרגל-הכלים: סדר-ההמצאה, "המזכירה · לי" ראשונה ── */
.rail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.tool {
  background: var(--carved); border: 1px solid var(--hairline);
  border-radius: var(--radius-card); padding: 18px 14px; text-align: center;
  transition: transform var(--motion-icon), box-shadow var(--motion-icon);
}
.tool:hover { transform: translateY(-1.5px); box-shadow: 0 1.5px 3px rgba(0, 0, 0, 0.2); }
.tool .icon { display: block; width: 28px; height: 28px; margin: 0 auto 10px; color: var(--text-muted); }
.tool .icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: stroke var(--motion-icon); }
.tool:hover .icon svg { stroke: url(#sig-stroke); } /* מודל 3-המצבים: ריחוף = הגרדיאנט צובע את הקו */
.tool .persona { display: block; font-size: 15px; font-weight: 700; }
.tool .tag { display: block; font-size: 12px; color: var(--text-secondary); margin-top: 1px; }
.tool .what { display: block; font-size: 12px; color: var(--text-secondary); margin-top: 8px; line-height: 1.5; }

/* ── טפסים ── */
form .row { margin-bottom: 12px; }
label { display: block; font-size: 13px; color: var(--text-secondary); margin-bottom: 5px; }
input[type="email"], input[type="text"], textarea {
  width: 100%; font: inherit; font-size: 14px; color: var(--text);
  background: color-mix(in srgb, var(--base) 55%, var(--carved));
  border: 1px solid var(--hairline); border-radius: var(--radius-interactive);
  padding: 9px 12px; outline: none;
  transition: border-color var(--motion-icon), box-shadow var(--motion-icon);
}
input[type="email"] { direction: ltr; text-align: left; }
input:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
textarea { min-height: 90px; resize: vertical; }

/* honeypot — קיים לטפסים, בלתי-נראה לבני-אדם */
.hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-msg { font-size: 13.5px; margin-top: 10px; }
.form-msg[data-kind="ok"] { color: var(--success); }
.form-msg[data-kind="err"] { color: var(--alert); }

/* ── מסך-חשבון: שלושה מצבים ── */
.account-wrap { max-width: 460px; margin: 40px auto 0; }
.account-wrap .state-title { font-size: 19px; font-weight: 700; margin-bottom: 6px; }
.account-wrap .state-body { font-size: 14px; color: var(--text-secondary); margin-bottom: 16px; }
.badge-queued { display: inline-block; background: var(--accent-wash); color: var(--accent-ink); font-size: 12.5px; font-weight: 600; border-radius: 999px; padding: 4px 12px; margin-bottom: 10px; }

/* ── פוטר ── */
footer { border-top: 1px solid var(--hairline); margin-top: 52px; padding: 18px 16px 26px; text-align: center; }
footer .links { display: flex; gap: 18px; justify-content: center; margin-bottom: 8px; font-size: 13px; }
footer a { color: var(--accent-ink); text-decoration: none; }
footer a:hover { text-decoration: underline; }
footer .line { font-size: 11px; color: var(--text-muted); direction: rtl; }

/* ── עמוד-פרטיות ── */
.doc h1 { font-size: 24px; margin-bottom: 4px; }
.doc h2 { font-size: 16px; margin: 22px 0 6px; }
.doc p, .doc li { font-size: 14px; color: var(--text-secondary); }
.doc ul { padding-inline-start: 20px; }
.draft-banner {
  background: var(--accent-wash); color: var(--accent-ink);
  border-radius: var(--radius-seat); font-size: 13px; padding: 10px 14px; margin: 14px 0;
}

#selftest-out { direction: ltr; text-align: left; font-size: 12px; background: var(--carved); border: 1px solid var(--hairline); border-radius: 8px; margin: 20px; padding: 12px; }

@media (max-width: 560px) {
  .hero h1 { font-size: 24px; }
  .bandline .slogan { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}