:root{
    --brand-700:#A2AF9B; /* ירוק מרווה */
    --brand-500:#A2AF9B; /* ירוק מרווה - ראשי */
    --brand-200:#DCCFC0; /* טאופ רך */
    --brand-100:#FAF9EE; /* קרם בהיר */
    --neutral:#EEEEEE; /* אפור ניטרלי */
    --ink-900:#2a2a2a;
    --ink-700:#444;
    --ink-500:#666;
    --white:#fff;
  
    --radius:16px;
    --shadow:0 10px 30px rgba(0,0,0,.06);
  }
  
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    font-family:"Heebo",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans Hebrew",sans-serif;
    color:var(--ink-900);
    background:var(--brand-100);
    line-height:1.65;
  }
  
  .container{
    width:min(1100px,92vw);
    margin-inline:auto;
  }
  
  .row{
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
  }
  
  .grid-2{
    display:grid; gap:3rem; grid-template-columns:1.25fr .75fr;
  }
  @media (max-width: 900px){
    .grid-2{grid-template-columns:1fr}
  }
  
  .section{padding:100px 0}
  .section.alt{background:var(--brand-200)}
  .section .section-intro{color:var(--ink-700); margin-top:-8px}
  
  .topbar{
    background:var(--brand-700); color:var(--white); text-align:center;
    padding:8px 12px; font-weight:500; font-size:.95rem;
  }
  
  .site-header{
    position:sticky; top:0; z-index:20;
    background:#fff; box-shadow:0 1px 0 rgba(0,0,0,.06);
  }
  .brand{display:flex; align-items:center; gap:.6rem; font-weight:800; text-decoration:none; color:var(--ink-900)}
  .logo{width:40px; height:40px}
  .logo-circle{fill:var(--brand-500)}
  .logo-text{font:700 28px/1 Arial, sans-serif; fill:#fff}
  
  .nav{
    display:flex; gap:1rem; align-items:center;
  }
  .nav a{
    color:var(--ink-700); text-decoration:none; padding:10px 12px; border-radius:10px;
    transition:all 0.3s ease;
    position:relative;
  }
  .nav a:hover{
    background:var(--brand-100);
    transform:translateY(-2px);
    animation:bounce 0.6s ease;
  }
  .nav a.active{
    background:var(--brand-500);
    color:#fff;
    transform:scale(1.05);
  }
  .nav .btn.sm{padding:8px 14px}
  .nav-toggle{
    display:none; 
    font-size:24px; 
    background:none; 
    border:0; 
    cursor:pointer;
    transition:transform 0.3s ease;
  }
  .nav-toggle:hover{
    transform:scale(1.1) rotate(90deg);
  }
  
  @media (max-width: 980px){
    .nav{
      position:absolute; 
      inset-inline:0; 
      top:100%; 
      background:#fff; 
      display:none; 
      flex-direction:column; 
      padding:12px 16px; 
      box-shadow:var(--shadow);
      transform:translateY(-20px);
      opacity:0;
      transition:all 0.3s ease;
    }
    .nav.open{
      display:flex;
      transform:translateY(0);
      opacity:1;
    }
    .nav.open a{
      animation:slideInLeft 0.5s ease forwards;
    }
    .nav.open a:nth-child(1){animation-delay:0.1s}
    .nav.open a:nth-child(2){animation-delay:0.2s}
    .nav.open a:nth-child(3){animation-delay:0.3s}
    .nav.open a:nth-child(4){animation-delay:0.4s}
    .nav.open a:nth-child(5){animation-delay:0.5s}
    .nav.open a:nth-child(6){animation-delay:0.6s}
    .nav.open a:nth-child(7){animation-delay:0.7s}
    .nav-toggle{display:block}
  }
  
  .hero{
    background:
      radial-gradient(80% 100% at 50% 0%, rgba(162,175,155,.08), transparent 70%),
      linear-gradient(180deg, var(--brand-100), #fff 60%);
    text-align:center;
  }
  .hero-content{
    max-width:800px;
    margin:0 auto 60px;
  }
  .hero-title{
    font-size:clamp(36px,5vw,56px); 
    line-height:1.15; 
    margin:0 0 32px;
    color:var(--ink-900);
  }
  .hero-quote{
    font-size:1.4rem; 
    color:var(--ink-700); 
    line-height:1.6;
    margin:0 0 40px;
    font-style:italic;
    position:relative;
  }
  .hero-quote::before{
    content:"";
    position:absolute;
    top:-20px;
    right:50%;
    transform:translateX(50%);
    width:60px;
    height:2px;
    background:var(--brand-500);
  }
  .hero-cta{
    display:flex; 
    gap:1.2rem; 
    justify-content:center;
    flex-wrap:wrap;
  }
  .hero-features{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
    max-width:900px;
    margin:0 auto;
  }
  @media (max-width:768px){
    .hero-features{
      grid-template-columns:1fr;
      gap:32px;
    }
  }
  .feature-card{
    background:var(--neutral); 
    border:1px solid rgba(0,0,0,.06); 
    border-radius:var(--radius); 
    padding:32px;
    box-shadow:var(--shadow);
    text-align:right;
  }
  .hero-usp{
    display:grid; 
    grid-template-columns:1fr; 
    gap:.8rem; 
    margin:0; 
    padding:0; 
    list-style:none;
    align-content:start;
  }
  .hero-usp li{
    padding-right:20px; 
    position:relative;
    font-size:1.1rem;
    color:var(--ink-700);
  }
  .hero-usp li::before{
    content:"✓"; 
    position:absolute; 
    right:0; 
    color:var(--brand-500); 
    font-weight:700;
    font-size:1.2rem;
  }
  
  h1,h2{
    font-family:"Playfair Display",serif;
    font-weight:600;
    letter-spacing:-0.02em;
  }
  h1{font-size:clamp(32px,4vw,48px); line-height:1.2; margin:0 0 16px}
  h2{font-size:clamp(28px,3vw,40px); margin:0 0 12px}
  h3{margin:0 0 8px; font-weight:600}
  
  .cards{
    display:grid; gap:24px; grid-template-columns:repeat(3,1fr); margin-top:32px;
  }
  @media (max-width: 980px){ .cards{grid-template-columns:1fr 1fr} }
  @media (max-width: 640px){ .cards{grid-template-columns:1fr} }
  
  .card{
    background:var(--neutral); border:1px solid rgba(0,0,0,.06); border-radius:var(--radius);
    padding:24px; box-shadow:var(--shadow); 
    transition:transform 0.4s ease, box-shadow 0.4s ease;
    position:relative;
    overflow:hidden;
  }
  .card:hover{
    transform:translateY(-6px) scale(1.02); 
    box-shadow:0 20px 40px rgba(0,0,0,.15);
    animation:float 2s ease-in-out infinite;
  }
  .card::before{
    content:'';
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition:left 0.5s;
  }
  .card:hover::before{
    left:100%;
  }
  
  .steps{
    display:grid; grid-template-columns:repeat(5,1fr); gap:20px; counter-reset:step;
    list-style:none; padding:0; margin:32px 0 20px;
  }
  @media (max-width:1100px){ .steps{grid-template-columns:repeat(3,1fr)} }
  @media (max-width:700px){ .steps{grid-template-columns:1fr} }
  .steps li{
    background:#fff; border:1px dashed var(--brand-200); border-radius:var(--radius);
    padding:24px; box-shadow:var(--shadow);
    transition:transform 0.3s ease, box-shadow 0.3s ease;
  }
  .steps li:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 24px rgba(0,0,0,.1);
  }
  .step-num{
    display:inline-grid; place-items:center; width:36px; height:36px; border-radius:50%; font-weight:800;
    background:var(--brand-500); color:#fff; margin-bottom:8px;
  }
  
  .about-card{
    background:var(--neutral); 
    border:1px solid rgba(0,0,0,.06); 
    border-radius:var(--radius); 
    padding:32px; 
    box-shadow:var(--shadow);
    transition:transform 0.3s ease, box-shadow 0.3s ease;
  }
  .about-card:hover{
    transform:translateY(-3px);
    box-shadow:0 16px 32px rgba(0,0,0,.12);
  }
  .check{list-style:none; padding:0; margin:14px 0 0}
  .check li{position:relative; padding-right:20px}
  .check li::before{content:"✔"; position:absolute; right:0; color:var(--brand-500); font-weight:700}
  
  .quotes{display:grid; grid-template-columns:1fr 1fr; gap:24px}
  @media (max-width:900px){ .quotes{grid-template-columns:1fr} }
  .quote{
    background:var(--neutral); 
    border-left:6px solid var(--brand-500); 
    border-radius:var(--radius); 
    padding:24px; 
    box-shadow:var(--shadow);
    transition:transform 0.3s ease, box-shadow 0.3s ease;
  }
  .quote:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 24px rgba(0,0,0,.1);
  }
  .quote blockquote{margin:0 0 8px; color:var(--ink-700); font-style:italic}
  
  .contact .contact-cta{display:flex; gap:.6rem; margin:12px 0 0}
  .form label{display:grid; gap:6px; font-weight:500}
  .form input,.form textarea{
    border:1px solid rgba(0,0,0,.12); border-radius:12px; padding:12px 14px; font-size:1rem; background:var(--neutral);
    transition:border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
  }
  .form input:focus,.form textarea:focus{
    outline:none; 
    border-color:var(--brand-500);
    box-shadow:0 0 0 3px rgba(162,175,155,0.2);
    transform:scale(1.02);
    animation:glow 2s ease-in-out infinite;
  }
  .form input.error,.form textarea.error{
    border-color:#e74c3c;
    animation:shake 0.5s ease-in-out;
  }
  .form-status{min-height:1.4em; color:var(--ink-700); font-size:.95rem; margin-top:6px}
  
  /* Loading Spinner */
  .loading-spinner{
    display:inline-block;
    width:20px;
    height:20px;
    border:2px solid rgba(255,255,255,0.3);
    border-radius:50%;
    border-top-color:#fff;
    animation:spin 1s ease-in-out infinite;
    margin-left:10px;
  }
  
  /* Success Checkmark */
  .success-checkmark{
    display:inline-block;
    width:20px;
    height:20px;
    margin-left:10px;
  }
  .success-checkmark svg{
    width:100%;
    height:100%;
  }
  .success-checkmark path{
    stroke-dasharray:100;
    stroke-dashoffset:100;
    animation:checkmark 0.6s ease forwards;
  }
  
  .btn{
    display:inline-block; border-radius:999px; padding:12px 18px; text-decoration:none; font-weight:700; cursor:pointer;
    background:#eee; color:var(--ink-900); border:1px solid rgba(0,0,0,.06); 
    transition:transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    position:relative;
    overflow:hidden;
  }
  .btn:hover{
    transform:translateY(-2px) scale(1.05); 
    box-shadow:0 12px 24px rgba(0,0,0,.15);
    animation:bounce 0.6s ease;
  }
  .btn:active{
    transform:translateY(0) scale(0.98);
  }
  .btn.primary{
    background:var(--brand-500); 
    color:#fff; 
    border-color:transparent;
    box-shadow:0 4px 12px rgba(162,175,155,.2);
  }
  .btn.primary:hover{
    box-shadow:0 16px 32px rgba(162,175,155,.35);
    transform:translateY(-3px) scale(1.05);
    animation:bounce 0.6s ease;
  }
  .btn.outline{
    background:transparent; 
    border-color:var(--brand-500); 
    color:var(--brand-700);
  }
  .btn.outline:hover{
    background:var(--brand-500);
    color:#fff;
    box-shadow:0 8px 20px rgba(162,175,155,.25);
    transform:translateY(-2px) scale(1.05);
    animation:bounce 0.6s ease;
  }
  .btn.lg{padding:16px 28px; font-size:1.1rem}
  .btn.sm{padding:10px 16px; font-size:.95rem}
  
  /* Magnetic Button Effect */
  .magnetic-btn{
    transition:transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  
  /* Ripple Effect */
  .btn::before{
    content:'';
    position:absolute;
    top:50%;
    left:50%;
    width:0;
    height:0;
    border-radius:50%;
    background:rgba(255,255,255,0.3);
    transform:translate(-50%, -50%);
    transition:width 0.6s, height 0.6s;
  }
  .btn:active::before{
    width:300px;
    height:300px;
  }
  
  /* Pulse Animation for Submit Button */
  .btn[type="submit"]{
    animation:pulse 2s infinite;
  }
  .btn[type="submit"]:hover{
    animation:none;
  }
  
  .center{text-align:center; margin-top:10px}
  
  .site-footer{
    background:var(--brand-700); color:#fff; padding:20px 0; margin-top:24px;
  }
  .site-footer a{color:#fff; opacity:.9; text-decoration:none; margin-inline:8px}
  .site-footer a:hover{opacity:1}
  
  /* Animation Keyframes */
  @keyframes fadeInUp{
    from{opacity:0; transform:translateY(30px)}
    to{opacity:1; transform:translateY(0)}
  }
  @keyframes fadeIn{
    from{opacity:0}
    to{opacity:1}
  }
  @keyframes shimmer{
    0%{background-position:-200% 0}
    100%{background-position:200% 0}
  }
  
  /* Dynamic Animation Keyframes */
  @keyframes bounceIn{
    0%{opacity:0; transform:scale(0.3) translateY(-50px)}
    50%{opacity:1; transform:scale(1.05) translateY(0)}
    70%{transform:scale(0.9)}
    100%{opacity:1; transform:scale(1)}
  }
  @keyframes bounce{
    0%, 20%, 53%, 80%, 100%{transform:translateY(0)}
    40%, 43%{transform:translateY(-8px)}
    70%{transform:translateY(-4px)}
    90%{transform:translateY(-2px)}
  }
  @keyframes scaleIn{
    0%{opacity:0; transform:scale(0.8)}
    100%{opacity:1; transform:scale(1)}
  }
  @keyframes slideInLeft{
    0%{opacity:0; transform:translateX(-50px)}
    100%{opacity:1; transform:translateX(0)}
  }
  @keyframes slideInRight{
    0%{opacity:0; transform:translateX(50px)}
    100%{opacity:1; transform:translateX(0)}
  }
  @keyframes pulse{
    0%{transform:scale(1)}
    50%{transform:scale(1.05)}
    100%{transform:scale(1)}
  }
  @keyframes shake{
    0%, 100%{transform:translateX(0)}
    10%, 30%, 50%, 70%, 90%{transform:translateX(-5px)}
    20%, 40%, 60%, 80%{transform:translateX(5px)}
  }
  @keyframes ripple{
    0%{transform:scale(0); opacity:1}
    100%{transform:scale(4); opacity:0}
  }
  @keyframes float{
    0%, 100%{transform:translateY(0)}
    50%{transform:translateY(-10px)}
  }
  @keyframes glow{
    0%, 100%{box-shadow:0 0 5px var(--brand-500)}
    50%{box-shadow:0 0 20px var(--brand-500), 0 0 30px var(--brand-500)}
  }
  @keyframes typing{
    0%{width:0}
    100%{width:100%}
  }
  @keyframes blink{
    0%, 50%{opacity:1}
    51%, 100%{opacity:0}
  }
  @keyframes checkmark{
    0%{stroke-dashoffset:100}
    100%{stroke-dashoffset:0}
  }
  @keyframes spin{
    0%{transform:rotate(0deg)}
    100%{transform:rotate(360deg)}
  }

  /* Animation Classes */
  .animate-on-scroll{
    opacity:0;
    transform:translateY(30px);
    transition:opacity 0.8s ease, transform 0.8s ease;
  }
  .animate-on-scroll.visible{
    opacity:1;
    transform:translateY(0);
  }
  .animate-fade{
    opacity:0;
    transition:opacity 1s ease;
  }
  .animate-fade.visible{
    opacity:1;
  }
  
  /* Dynamic Animation Classes */
  .animate-bounce-in{
    opacity:0;
    transform:scale(0.3) translateY(-50px);
    animation:bounceIn 1s ease forwards;
  }
  .animate-scale-in{
    opacity:0;
    transform:scale(0.8);
    animation:scaleIn 0.6s ease forwards;
  }
  .animate-slide-left{
    opacity:0;
    transform:translateX(-50px);
    animation:slideInLeft 0.8s ease forwards;
  }
  .animate-slide-right{
    opacity:0;
    transform:translateX(50px);
    animation:slideInRight 0.8s ease forwards;
  }
  .animate-stagger{
    opacity:0;
    transform:translateY(30px);
    transition:opacity 0.6s ease, transform 0.6s ease;
  }
  .animate-stagger.visible{
    opacity:1;
    transform:translateY(0);
  }
  
  /* Scroll Progress Bar */
  .scroll-progress{
    position:fixed;
    top:0;
    left:0;
    width:0%;
    height:3px;
    background:linear-gradient(90deg, var(--brand-500), var(--brand-200));
    z-index:1000;
    transition:width 0.1s ease;
  }
  
  /* Hero Statistics */
  .hero-stats{
    display:flex;
    justify-content:center;
    gap:3rem;
    margin:2rem 0;
    flex-wrap:wrap;
  }
  .stat-item{
    text-align:center;
    padding:1rem;
    background:rgba(255,255,255,0.1);
    border-radius:var(--radius);
    backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,0.2);
  }
  .stat-number{
    font-size:2.5rem;
    font-weight:800;
    color:var(--brand-500);
    font-family:"Playfair Display",serif;
    margin-bottom:0.5rem;
  }
  .stat-label{
    font-size:0.9rem;
    color:var(--ink-700);
    font-weight:500;
  }
  
  /* Typing Effect */
  .typing-text{
    display:inline-block;
    overflow:hidden;
    white-space:nowrap;
    border-right:2px solid var(--brand-500);
    animation:typing 2s steps(20) forwards;
  }
  .typing-text-delayed{
    display:inline-block;
    overflow:hidden;
    white-space:nowrap;
    border-right:2px solid var(--brand-500);
    animation:typing 2s steps(20) 2s forwards;
  }
  .typing-cursor{
    animation:blink 1s infinite;
    color:var(--brand-500);
    font-weight:bold;
  }

  /* Utility */
  .hidden{display:none}
  
  /* Color Palette helper (optional dev) */
  .palette{display:flex; gap:0; height:14px; margin:8px 0}
  .palette > i{flex:1}
  .palette > i.p1{background:var(--brand-700)}
  .palette > i.p2{background:var(--brand-500)}
  .palette > i.p3{background:var(--brand-200)}
  .palette > i.p4{background:var(--brand-100)}
  
  /* ===== כל סקשן תופס את גובה המסך ===== */
.section {
    min-height: 100vh;        /* גובה מלא של המסך */
    display: flex;            /* מרכז את התוכן אנכית */
    flex-direction: column;
    justify-content: center;  /* ממרכז את האלמנטים באמצע המסך */
    scroll-snap-align: start; /* מאפשר גלילה מדויקת בין סקשנים */
  }
  
  /* גלילה חלקה ונעימה */
  html {
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
  }
  
  /* קצת ריווח פנימי כדי שלא יהיה צפוף מדי */
  .section .container {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  
  /* כפתורי ניווט בתפריט קופצים למרכז הסקשן */
  .nav a {
    scroll-margin-top: 80px; /* כך שהכותרת לא תיעלם מאחורי ה-header */
  }