/* ============================================================
   נתי קלמן — דף נחיתה
   מבנה הקובץ:
     1. טוקנים (צבעים, פונטים, מידות)
     2. בסיס / reset
     3. רכיבים (הדר, הירו, טופס)
     4. ברייקפוינטס: טלפון ← טאבלט ← דסקטופ ← מסך רחב
   המידות הנשלטות בכל ברייקפוינט הן שלוש בלבד:
     --gutter     : מרווח צדדי של כל הסקשנים
     --shell-max  : רוחב עמודת התוכן (הדר, הירו, צור קשר — כולם זהים,
                    כדי שהלוגו, הכותרת והטופס יישבו על אותו קו)
     --hero-text-max : רוחב בלוק הטקסט בהירו
   ============================================================ */

/* ---------- 1. טוקנים ---------- */
:root{
  --color-bg:#FBF8F6; --color-surface:#FFFFFF; --color-text:#2A1520;
  --color-accent:#5C1F35; --color-amber:#D98A2B; --color-amber-deep:#B36F1C;
  --color-burg-deep:#48172A; --color-burg-soft:#7A3049;
  --color-divider:rgba(92,31,53,.14);
  --font-heading:"Heebo",system-ui,sans-serif; --font-body:"Assistant",system-ui,sans-serif;

  /* ברירת מחדל = טלפון (mobile first) */
  --gutter:24px;
  --shell-max:1120px;
  --hero-text-max:460px;
}

/* ---------- 2. בסיס ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);direction:rtl}
h1,h2,h3,h4{font-family:var(--font-heading);font-weight:500;margin:0}
a{color:var(--color-accent);text-decoration:none}
a:hover{color:var(--color-amber-deep)}
img{display:block;max-width:100%}
button{font:inherit}
/* בלי זה, תכונת hidden מפסידה לכל כלל שמגדיר display על אותו אלמנט
   (למשל .success{display:flex}), כי גיליון המחבר גובר על ברירת המחדל של הדפדפן. */
[hidden]{display:none !important}
@keyframes nk-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.wrap{position:relative;width:100%;max-width:100%;overflow:clip}

/* עמודת התוכן המשותפת לכל הסקשנים */
.header-inner,.hero-inner,.contact-inner{
  max-width:var(--shell-max);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* ---------- 3. הדר ---------- */
/* ההדר צף מעל ההירו ולא תופס מקום בפריסה, כך שההירו הוא בדיוק גובה
   מסך אחד בכל מכשיר — בלי קבוע גובה-הדר שצריך לתחזק. */
header{position:fixed;top:0;left:0;right:0;z-index:30;background:var(--color-burg-deep);border-bottom:1px solid rgba(217,138,43,.28)}
.header-inner{padding-block:10px;display:flex;align-items:center;gap:12px;flex-wrap:nowrap}
.brand{display:flex;align-items:center;gap:10px;margin-inline-end:auto;min-width:0;text-decoration:none}
.brand img{height:32px;width:auto;flex:none}
.brand-name{display:block;line-height:1.15;font-family:var(--font-heading);font-weight:500;font-size:17px;color:#D98A2B;letter-spacing:.01em;white-space:nowrap}
.brand-tag{display:block;font-size:11px;color:rgba(251,246,240,.7);letter-spacing:.04em;white-space:nowrap}
.btn-contact{display:flex;flex:none;white-space:nowrap;align-items:center;font-size:13px;color:#F3E6D8;border:1px solid rgba(243,230,216,.35);border-radius:8px;padding:7px 12px;transition:background .2s ease,border-color .2s ease}
.btn-contact:hover{background:rgba(217,138,43,.16);border-color:#D98A2B;color:#F3E6D8}

/* ---------- 3. הירו ---------- */
/* svh שומר על גובה נכון בנייד, שבו סרגלי הדפדפן משנים את הגובה הנראה. */
/* מסך מלא — אבל עם תקרה. בחלון גבוה במיוחד (למשל 1443px) הירו של
   100svh היה יוצר ים ריק שבתוכו התוכן נראה זעיר, אז הגובה נעצר ב-950px. */
.hero{position:relative;background:var(--color-accent);overflow:hidden;display:flex;align-items:center;min-height:min(100vh,950px);min-height:min(100svh,950px)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 88% 6%, rgba(217,138,43,.20), transparent 58%), linear-gradient(180deg, rgba(72,23,42,.55), rgba(92,31,53,0) 45%)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg, rgba(251,248,246,.06), transparent 40%)}
.hero-inner{position:relative;width:100%;padding-block:96px 56px}
/* טלפון: ממורכז, עם אוויר נוסף בצדדים כדי שהטקסט לא ייגע בקצוות */
.hero-content{max-width:var(--hero-text-max);margin-inline:auto;text-align:center;padding-inline:8px}
.hero-mark{display:flex;justify-content:center;align-items:center;gap:12px;margin-bottom:22px}
.hero-mark span{display:block;width:36px;height:2px;background:var(--color-amber)}
.hero h1{font-size:clamp(32px,9vw,44px);line-height:1.15;color:#FDFAF7;letter-spacing:-.01em;text-wrap:balance}
.cta{display:inline-flex;align-items:center;gap:10px;background:var(--color-amber);color:#2A1520;font-family:var(--font-heading);font-weight:500;font-size:15px;padding:13px 24px;border-radius:10px;box-shadow:0 10px 28px rgba(217,138,43,.28);margin-top:44px;border:0;cursor:pointer;transition:background .2s ease,box-shadow .2s ease}
.cta:hover{background:#E79C3F;box-shadow:0 14px 34px rgba(217,138,43,.36);color:#2A1520}
.cta:active{background:var(--color-amber-deep)}
.hero-divider{position:absolute;bottom:0;left:0;right:0;height:1px;pointer-events:none;background:linear-gradient(to right, transparent, rgba(217,138,43,.45) 48px, rgba(217,138,43,.45) calc(100% - 48px), transparent)}

/* ---------- 3. צור קשר ---------- */
#contact{position:relative;background:linear-gradient(180deg,#F6EFE9,#FBF8F6);border-top:1px solid var(--color-divider);scroll-margin-top:64px}
.contact-inner{padding-block:56px 64px;display:grid;grid-template-columns:minmax(0,1fr);gap:36px;align-items:start}
/* ברוחב צר הטופס והכותרת חולקים עמודה אחת, אז הכותרת מקבלת את מלוא
   הרוחב. ההגבלה ל-420px חלה רק בדסקטופ, שם יש שתי עמודות. */
.contact-copy{max-width:none}
.contact-mark{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.contact-mark span{display:block;width:36px;height:2px;background:var(--color-amber)}
.contact-copy h2{font-size:clamp(24px,5.4vw,30px);line-height:1.16;color:var(--color-accent);text-wrap:balance}
.contact-copy p{margin:18px 0 0;font-size:15px;line-height:1.7;color:#6E5A62;font-weight:300}

.card{background:var(--color-surface);border:1px solid rgba(92,31,53,.12);border-radius:18px;padding:22px;box-shadow:0 18px 48px rgba(42,21,32,.09)}
form{display:flex;flex-direction:column;gap:16px}
.field label{display:block;font-size:13.5px;font-weight:500;color:var(--color-accent);margin-bottom:7px}
.field .hint{font-weight:400;color:#96828A}
/* 16px מונע זום אוטומטי של ספארי ב-iOS בכניסה לשדה */
.field input,.field textarea{width:100%;padding:10px 14px;font-family:var(--font-body);font-size:16px;color:var(--color-text);background:#FEFCFB;border:1px solid var(--color-divider);border-radius:10px;caret-color:var(--color-accent);outline:none}
.field input{min-height:48px}
.field textarea{min-height:110px;line-height:1.55;resize:vertical}
.field input:focus,.field textarea:focus{border-color:var(--color-amber);box-shadow:0 0 0 3px rgba(217,138,43,.16)}
.field.has-error input,.field.has-error textarea{border-color:#C9505A}
.field-error{margin-top:6px;font-size:13px;color:#A32B36}
.submit-btn{margin-top:4px;width:100%;min-height:56px;display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--color-amber);color:#2A1520;font-family:var(--font-heading);font-weight:500;font-size:17px;border:0;border-radius:12px;cursor:pointer;box-shadow:0 10px 26px rgba(217,138,43,.26);transition:background .2s ease, box-shadow .2s ease}
.submit-btn:hover{background:#E79C3F;box-shadow:0 14px 32px rgba(217,138,43,.34)}
.submit-btn:active{background:var(--color-amber-deep)}
.submit-btn:disabled{opacity:.7;cursor:wait}
.form-disclaimer{margin:0;font-size:12.5px;line-height:1.5;color:#96828A;text-align:center}

.success{display:flex;flex-direction:column;align-items:center;gap:16px;padding:44px 10px 46px;text-align:center;animation:nk-rise .4s ease both}
.success h3{font-size:20px;color:var(--color-accent)}

/* ============================================================
   4. ברייקפוינטס
   ============================================================ */

/* ---- טלפון גדול (≥480px) ---- */
@media (min-width:480px){
  :root{--gutter:28px;--hero-text-max:620px}
  .hero h1{font-size:clamp(44px,9vw,58px)}
  .cta{font-size:15.5px;padding:14px 26px;margin-top:48px}
  .contact-copy h2{font-size:clamp(28px,4.8vw,34px)}
  .card{padding:28px}
}

/* ---- טאבלט (≥768px) ---- */
@media (min-width:768px){
  :root{--gutter:32px;--hero-text-max:700px}
  .header-inner{padding-block:12px;gap:16px}
  .brand img{height:36px}
  .brand-name{font-size:19px}
  .brand-tag{font-size:12px}
  .btn-contact{font-size:13.5px;padding:8px 13px}
  .hero-inner{padding-block:112px 64px}
  .hero h1{font-size:clamp(58px,7vw,64px)}
  .cta{font-size:16px;padding:15px 28px;margin-top:56px}
  .contact-inner{padding-block:72px 80px;gap:44px}
  .contact-copy h2{font-size:clamp(32px,4.4vw,36px)}
  .contact-copy p{font-size:16px}
  .card{padding:32px}
  .success h3{font-size:22px}
}

/* ---- דסקטופ (≥1040px) ----
   כאן הפריסה מתהפכת: ההירו עובר מיושר לימין (במקום ממורכז),
   ועמודת התוכן מתרחבת כדי שהלוגו וכפתור "צרו קשר" יישבו קרוב
   יותר לקצוות המסך. */
@media (min-width:1040px){
  :root{--gutter:40px;--shell-max:min(1560px,94vw);--hero-text-max:860px}
  .header-inner{padding-block:14px;gap:20px}
  .brand{gap:12px}
  .brand img{height:40px}
  .brand-name{font-size:21px}
  .brand-tag{font-size:13px}
  .btn-contact{font-size:14px;padding:8px 14px}

  .hero-inner{padding-block:128px 72px}
  .hero-content{margin-inline-start:0;margin-inline-end:auto;text-align:start;padding-inline:0}
  .hero-mark{justify-content:flex-start}
  .hero-mark span{width:44px}
  .hero h1{font-size:64px;line-height:1.1}
  .cta{font-size:16.5px;padding:16px 30px;margin-top:64px}

  .contact-inner{padding-block:88px 96px;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:56px}
  .contact-copy{max-width:420px}
  .contact-copy h2{font-size:38px}
  .contact-copy p{font-size:16.5px}
  .card{padding:36px}
  .success h3{font-size:23px}
  #contact{scroll-margin-top:84px}
}

/* ---- מסך רחב מאוד (≥1600px) ---- */
@media (min-width:1600px){
  :root{--gutter:48px}
  .hero h1{font-size:70px}
}

/* ---- מסך נמוך / לרוחב ----
   גובה מסך מלא היה דוחף את הכפתור מחוץ לתצוגה, אז ההירו מקבל
   את גובה התוכן שלו. */
@media (max-height:560px){
  .hero{min-height:0}
  .hero-inner{padding-block:92px 40px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .success{animation:none}
}