:root{
      --brand:#845EC2;          /* modern blue */
      --brand-600:#fdeeff;      /* hover blue */
      --ink:#0f172a;            /* text primary */
      --ink-2:#475569;          /* text secondary */
      --muted:#6b7280;          /* muted */
      --bg:#ffffff;             /* page background */
      --surface:#FEF7FF;        /* subtle surface */
      --card:#ffffff;           /* cards */
      --line:#e5e7eb;           /* borders */
      --white:#ffffff;          /* white */
      --header-h:72px;          /* header height for scroll offset */
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    html{scroll-behavior:smooth}
    body{
      margin:0; font-family:Montserrat,system-ui,Segoe UI,Arial; color:var(--ink); background:var(--surface);
      line-height:1.6;
    }
    /* Ensure anchored sections account for sticky header */
    [id]{scroll-margin-top:calc(var(--header-h) + 10px)}

    a{color:inherit}
    .container{width:min(1100px,92%); margin-inline:auto}
    .btn{display:inline-flex; align-items:center; gap:.6rem; padding:.8rem 1.1rem; border-radius:12px; font-weight:700; text-decoration:none; border:1px solid var(--line); background:var(--white); transition:.2s ease}
    .btn:hover{border-color:var(--brand); color:var(--brand)}
    .btn-primary{background:var(--brand); color:var(--white); border-color:var(--brand)}
    .btn-primary:hover{background:var(--brand-600); color:var(--brand);}
    .btn-ghost{background:var(--white)}
    .badge{display:inline-block; padding:.35rem .6rem; border:1px solid var(--brand); border-radius:999px; font-size:.85rem; color:var(--brand); background:var(--surface);margin: 2px;}

    header{position:sticky; top:0; z-index:40; backdrop-filter:saturate(180%) blur(10px); background:rgba(255,255,255,.9); border-bottom:1px solid var(--line)}
    nav{display:flex; align-items:center; justify-content:space-between; padding:1rem 0; height:var(--header-h)}
    .nav-logo{display:flex; align-items:center; gap:.7rem; font-weight:800; letter-spacing:.3px}
    .logo{width:36px; height:36px; display:grid; place-items:center; border-radius:9px; border:2px solid var(--brand); color:var(--brand); font-weight:900; background:var(--white)}
    .nav-links{display:flex; gap:1.2rem; align-items:center}
    .nav-links a{text-decoration:none; color:var(--ink2)}
    .nav-links a:hover{color:var(--ink)}

    /* Mobile nav */
    .menu-toggle{display:none; border:1px solid var(--line); background:var(--white); border-radius:10px; padding:.6rem .7rem; font-weight:700}
    .menu-toggle:focus{outline:2px solid var(--brand)}
    .mobile-nav{position:fixed; top:var(--header-h); left:0; right:0; background:var(--white); border-bottom:1px solid var(--line); box-shadow:0 12px 24px rgba(15,23,42,.06); padding:.75rem; display:grid; gap:.25rem; z-index:35; transform:translateY(-8px); opacity:0; pointer-events:none; transition:.18s ease}
    .mobile-nav.open{transform:translateY(0); opacity:1; pointer-events:auto}
    .mobile-nav a{padding:.7rem .8rem; border-radius:10px; text-decoration:none; color:var(--ink-2)}
    .mobile-nav a:hover{background:#f1f5f9; color:var(--ink)}

    /* HERO */
    .hero{padding:5rem 0 3rem; display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:center}
    .hero h1{font-size:clamp(2rem, 3.5vw + 1rem, 3.2rem); line-height:1.15; margin:0 0 1rem; font-weight:800}
    .hero p{font-size:1.1rem; color:var(--ink-2); margin:0 0 1.2rem}
    .hero .actions{display:flex; gap:.8rem; flex-wrap:wrap}
    .hero-card{background:var(--card); border:1px solid var(--line); padding:1.2rem; border-radius:14px}
    .hero-grid{display:grid; gap:1rem; grid-template-columns:repeat(2,1fr)}
    .kpi{background:var(--white); border:1px solid var(--line); padding:1rem; border-radius:12px}
    .kpi b{font-size:1.3rem}
    .material-symbols-outlined{color: var(--brand);}

    /* TRUST */
    .trust{display:flex; gap:1.2rem; align-items:center; color:var(--ink-2); font-size:.95rem; margin-top:1rem}
    .trust .row{display:flex; gap:1.2rem; flex-wrap:wrap}

    /* SECTIONS */
    .sec{padding:4rem 0; border-top:1px solid var(--line); background:transparent}
    .sec h2{font-size:2rem; margin:0 0 .6rem}
    .sec p.lead{color:var(--ink-2); margin:0 0 2rem}
    .features{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem ;text-align: center;}
    .feature{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:1.1rem}
    .feature h3{margin:.2rem 0 .5rem}
    .feature .icon{font-size:1.05rem; padding:.28rem .5rem; border:1px solid var(--line); border-radius:8px; color:var(--ink-2); background:var(--white)}

    /* HOW IT WORKS */
    .steps{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
    .step{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:1rem}
    .step .num{width:32px; height:32px; border-radius:8px; display:grid; place-items:center; background:var(--brand); color:var(--white); font-weight:800; font-size:.95rem}

    /* PRICING */
    .pricing{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
    .plan{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:1.2rem; position:relative}
    .plan.pop{outline:2px solid var(--brand)}
    .price{font-size:1.8rem; font-weight:800}
    .price small{font-size:.9rem; color:var(--ink-2)}
    .ul{display:grid; gap:.6rem; margin:1rem 0}

    /* CTA */
    .cta{background:var(--white); border:1px solid var(--line); padding:1.6rem; border-radius:16px}
    .cta form{display:flex; gap:.6rem; flex-wrap:wrap}
    input, select{background:var(--white); border:1px solid var(--line); color:var(--ink); padding:.9rem 1rem; border-radius:10px; outline:none; width:100%}
    input:focus, select:focus{border-color:var(--brand)}

    /* FAQ */
    details{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:.9rem 1rem}
    summary{cursor:pointer; font-weight:700}

    /* FOOTER */
    footer{padding:3rem 0 2rem; color:var(--ink-2); border-top:1px solid var(--line)}

    /* UTIL */
    .muted{color:var(--ink-2)}

    /* RESPONSIVE */
    @media (max-width: 960px){
      :root{ --header-h:64px }
      .hero{grid-template-columns:1fr; padding:3.6rem 0 2rem}
      .hero h1{font-size:clamp(1.75rem, 4.5vw + 1rem, 2.4rem)}
      .nav-links{display:none}
      .menu-toggle{display:inline-flex; align-items:center; gap:.4rem}
      .features,.steps,.pricing{grid-template-columns:1fr}
    }
    @media (max-width: 600px){
      .btn{padding:.7rem 1rem}
      .container{width:min(100%,92%)}
    }


    .video-wrapper {
  width: 100%;
  height: 400px; /* או כל גובה שאתה רוצה */
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

video {
    border: 2px solid lightblue;
  width: 100%;
  height: 100%;
  object-fit: cover; /* ממלא את כל הקונטיינר בלי לעוות */
}