/* ==========================================================================
   דפנה סאיאס — the design system, exactly as it stands in the Lovable project.
   Tokens only here; the page's own composition is in treatments.css so we can
   change one without disturbing the other.
   ========================================================================== */
:root{
  --paper:#f2f1ec; --panel:#eae9e5; --ink:#2e2a24; --ink-2:#3d3831;
  --muted:#6e675d; --olive-ink:#55503e; --line:#dfdad1;
  --header-bg:rgba(242,241,236,.72);

  --r:10px;

  --t-h1:72px; --t-h2:44px; --t-h3:22px; --t-body:18px; --t-small:15px; --t-label:13px;
  --lh-tight:1.08; --lh-head:1.22; --lh-body:1.72;
  --fw-light:300; --fw-regular:400; --fw-bold:700;
  --ls-h1:-0.025em; --ls-label:.16em; --ls-nav:.1em;
  --font-sans:Assistant,"Segoe UI",system-ui,sans-serif;

  --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px;
  --s-5:48px; --s-6:64px; --s-7:96px; --s-8:128px;

  --content:1320px; --pad:40px; --header-h:72px; --hairline:1px;
  --btn-border:2px; --btn-pad-block:10px; --btn-pad-primary:28px; --btn-pad-secondary:16px;
  --icon:18px; --burger-long:26px; --burger-short:15px;
  --arrow-w:17px; --arrow-h:10px; --arrow-travel:4px;
  --measure:56ch;  --hero-copy-w:760px;

  --curve:cubic-bezier(.23,1,.32,1); --dur:1.25s; --dur-ui:.35s; --travel:48px;
}
@media (max-width:1360px){ :root{ --t-h1:60px; --t-h2:40px } }
@media (max-width:1120px){ :root{ --t-h1:52px; --t-h2:36px } }
@media (max-width:1024px){ :root{ --t-h1:46px; --t-h2:34px; --t-h3:21px; --t-body:17px; --pad:32px } }
@media (max-width:640px){  :root{ --t-h1:38px; --t-h2:29px; --t-h3:20px; --t-body:17px;
                                  --t-small:14px; --t-label:12px; --pad:20px; --header-h:62px } }
@media (max-width:360px){  :root{ --t-h1:33px } }

*,*::before,*::after{ box-sizing:border-box }
html,body{ margin:0; padding:0; max-width:100%; overflow-x:hidden }
body{
  background:var(--paper); color:var(--ink); font-family:var(--font-sans);
  font-size:var(--t-body); line-height:var(--lh-body); font-weight:var(--fw-regular);
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100% }
h1,h2,h3{ font-weight:var(--fw-light); margin:0; line-height:var(--lh-head) }
h1{ font-size:var(--t-h1); line-height:var(--lh-tight); letter-spacing:var(--ls-h1) }
h2{ font-size:var(--t-h2) }
h3{ font-size:var(--t-h3) }
p{ margin:0 }
a{ color:inherit; text-decoration:none }
strong{ font-weight:var(--fw-bold) }
:focus-visible{ outline:var(--btn-border) solid var(--olive-ink); outline-offset:3px }

.shell{ width:100%; max-width:var(--content); margin-inline:auto; padding-inline:var(--pad) }
.eyebrow{ font-size:var(--t-label); letter-spacing:var(--ls-label);
          font-weight:var(--fw-regular); color:var(--muted) }
.h-light strong{ font-weight:var(--fw-bold); color:var(--ink) }

/* ------------------------------ buttons --------------------------------- */
.btn-row{ display:flex; align-items:stretch; flex-wrap:wrap; gap:var(--s-2) }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-1);
  font-family:inherit; font-size:13px; font-weight:var(--fw-bold);
  letter-spacing:.02em; line-height:1.4; border-radius:var(--r); cursor:pointer;
  transition:background-color var(--dur-ui) var(--curve), color var(--dur-ui) var(--curve);
}
.btn-primary{ background:var(--ink); color:var(--paper);
              border:var(--btn-border) solid var(--ink);
              padding:var(--btn-pad-block) var(--btn-pad-primary) }
.btn-primary:hover{ background:var(--ink-2); border-color:var(--ink-2) }
.btn-secondary{ background:transparent; color:var(--ink);
                border:var(--btn-border) solid var(--ink);
                padding:var(--btn-pad-block) var(--btn-pad-secondary) }
.btn-secondary:hover{ background:var(--ink); color:var(--paper) }
.arw{ width:var(--arrow-w); height:var(--arrow-h); flex:none; fill:none;
      stroke:currentColor; stroke-width:1.6; stroke-linecap:round;
      transition:transform var(--dur-ui) var(--curve) }
.btn:hover .arw{ transform:translateX(calc(var(--arrow-travel) * -1)) }

/* ------------------------------- header --------------------------------- */
.site-header{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:40;
  height:var(--header-h); background:var(--header-bg);
  backdrop-filter:blur(20px) saturate(150%);
  border-block-end:var(--hairline) solid var(--line);
}
.site-header .shell{ height:100%; display:flex; align-items:center;
                     justify-content:space-between; gap:var(--s-3); direction:ltr }
.logo{ display:flex; flex-direction:column; line-height:var(--lh-head);
       direction:rtl; text-align:right }
.logo b{ font-size:var(--t-h3); font-weight:var(--fw-light); letter-spacing:-.01em }
.logo span{ font-size:var(--t-label); color:var(--muted); letter-spacing:var(--ls-nav) }
.nav{ display:flex; align-items:center; gap:var(--s-4); direction:rtl }
.nav a{ font-size:var(--t-small); color:var(--muted); padding-block:var(--s-1) }
.nav a[data-active="true"]{ color:var(--ink) }
.burger{ display:none; flex-direction:column; align-items:flex-start; gap:var(--s-1);
         background:none; border:0; padding:var(--s-1); cursor:pointer; direction:rtl }
.burger i{ display:block; height:var(--hairline); background:var(--ink) }
.burger i:first-child{ width:var(--burger-long) }
.burger i:last-child{ width:var(--burger-short) }
@media (max-width:1024px){ .nav{ display:none } .burger{ display:flex } }

/* --------------------------- page scaffolding --------------------------- */
.section{ padding-block:var(--s-7) }
.section--tight{ padding-block:var(--s-6) }
@media (max-width:1024px){ .section{ padding-block:var(--s-6) } }
@media (max-width:640px){  .section{ padding-block:var(--s-5) } }

.section-head{ max-width:var(--hero-copy-w); margin-block-end:var(--s-6) }
.section-head .eyebrow{ display:block; margin-block-end:var(--s-2) }
.section-head h2{ margin-block-end:var(--s-3) }
.section-head p{ color:var(--muted); max-width:var(--measure) }

.page-intro{ padding-block-start:calc(var(--header-h) + var(--s-6));
             padding-block-end:var(--s-5) }
.page-intro .eyebrow{ display:block; margin-block-end:var(--s-2) }
.page-intro h1{ margin-block-end:var(--s-3); max-width:var(--hero-copy-w) }
.page-intro p{ color:var(--muted); max-width:var(--measure) }