CSS

/* S05 · מינימליזם עריכתי */
.cwrap{container-type:inline-size}
.q{--accent:#4A6EF6;--accent-text:#3552D8;--btn-solid:#3B5BDB;--tint-12:color-mix(in srgb,var(--accent, #4a3aff) 12%,#fff);--tint-4:color-mix(in srgb,var(--accent, #4a3aff) 4%,#fff);
 --ink:#111;--muted:#6b7280;--muted-strong:#4b5563;--border:#eaeaea;--border-2:#e5e7eb;--surface:#fff;--surface-muted:#f3f4f6;--err:#d92d20;
 --r-control:12px;--r-card:16px;--ease:cubic-bezier(.2,.6,.2,1);--shadow-soft:0 6px 20px rgba(17,24,39,.08);--shadow-shot:0 30px 60px rgba(17,24,39,.16);
 --sec:112px;--gut:clamp(20px,4cqi,64px);
 background:var(--surface);color:var(--ink, #16182b);font-family:"Ploni","Heebo",system-ui,sans-serif;font-size:18px;line-height:1.36;overflow:hidden;position:relative;isolation:isolate;-webkit-font-smoothing:antialiased}
.q *{box-sizing:border-box}
.q h1,.q h2,.q h3,.q p,.q ul{margin:0}
.q a{color:inherit;text-decoration:none}
.q ul{list-style:none;padding:0}
.q h1{font-size:57px;line-height:.92;font-weight:600;letter-spacing:-.01em}
.q h2{font-size:41px;line-height:.96;font-weight:600}
.q h3{font-size:24px;line-height:1.08;font-weight:600}
.q .lead{font-size:20px;line-height:1.28;color:var(--muted, #6a6d85);max-width:640px}
.q .body{font-size:18px;line-height:1.36;color:var(--muted, #6a6d85);max-width:640px}
.q .meta{font-size:17px;font-weight:500;line-height:1.2;color:var(--muted, #6a6d85)}
.q .micro{font-size:15px;line-height:1.2;color:var(--muted, #6a6d85)}
.q .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;line-height:1;color:var(--accent-text);background:var(--tint-12);padding:7px 12px;border-radius:var(--r-control)}
.q .eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--accent, #4a3aff);margin-top:1px}
.q .hl{font-size:15px;font-weight:500;color:var(--accent-text);margin-top:16px}
.q .muted-bg .body,.q .muted-bg .micro,.q .muted-bg .meta{color:var(--muted-strong)}
.q .ico{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;color:var(--accent, #4a3aff);flex:none;display:block}
.q .ico.s{width:18px;height:18px}
/* כפתורים: שלוש רמות, ארבעה מצבים */
.q .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-size:18px;font-weight:500;line-height:1;border-radius:var(--r-control);padding:13px 24px 14px;min-height:44px;border:1px solid transparent;cursor:pointer;background:var(--btn-solid);color:#fff;transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease),transform .12s var(--ease),box-shadow .18s var(--ease)}
.q .btn:hover,.q .btn.is-hover{background:color-mix(in srgb,var(--btn-solid) 88%,#000)}
.q .btn:active,.q .btn.is-active{transform:scale(.98)}
.q .btn:focus-visible,.q .btn.is-focus{outline:0;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent, #4a3aff) 35%,transparent)}
.q .btn.is-disabled,.q .btn:disabled{opacity:.5;pointer-events:none}
.q .btn.lg{font-size:20px;padding:15px 28px 16px;min-height:50px}
.q .btn.sm{font-size:17px;padding:9px 18px 10px;min-height:38px}
.q .btn.b2{background:var(--surface);color:var(--ink, #16182b);border-color:var(--border-2)}
.q .btn.b2:hover,.q .btn.b2.is-hover{background:#f9fafb;border-color:#d1d5db}
.q .lnk{display:inline-flex;align-items:center;gap:6px;font-size:17px;font-weight:500;color:var(--ink, #16182b);padding:4px 0;border-bottom:1px solid transparent;transition:color .18s var(--ease),border-color .18s var(--ease),gap .18s var(--ease)}
.q .lnk .ico{color:var(--accent, #4a3aff);width:18px;height:18px;transition:transform .18s var(--ease)}
.q .lnk:hover,.q .lnk.is-hover{color:var(--accent-text);border-color:var(--accent-text)}
.q .lnk:hover .ico,.q .lnk.is-hover .ico{transform:translateX(-3px)}
.q .lnk:focus-visible{outline:0;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent, #4a3aff) 35%,transparent);border-radius:4px}
/* על רצועת accent */
.q .band .btn{background:#fff;color:var(--accent-text)}
.q .band .btn:hover{background:#eef1ff}
.q .band .btn.b2{background:transparent;color:#fff;border-color:rgba(255,255,255,.65)}
.q .band .btn.b2:hover{border-color:#fff;background:transparent}
/* שדות: חמישה מצבים */
.q .fld{display:flex;flex-direction:column;gap:8px}
.q .fld label{font-size:17px;font-weight:500;line-height:1.2;color:var(--ink, #16182b)}
.q .in{font:inherit;font-size:18px;line-height:1.2;padding:14px 16px;border:1px solid var(--border-2);border-radius:var(--r-control);background:#fff;color:var(--ink, #16182b);appearance:none;width:100%;transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
.q .in::placeholder{color:#9ca3af}
.q .in:focus,.q .in.is-focus{outline:0;border-color:var(--accent, #4a3aff);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent, #4a3aff) 22%,transparent)}
.q .fld.err .in{border-color:var(--err)}
.q .fld .msg{display:none;font-size:15px;line-height:1.2;color:var(--err);align-items:center;gap:6px}
.q .fld.err .msg{display:inline-flex}
.q .fld .msg .ico{width:16px;height:16px;color:var(--err)}
.q .in:disabled,.q .in.is-disabled{background:var(--surface-muted);color:var(--muted, #6a6d85);pointer-events:none}
/* כרטיס, באדג', צ'יפ */
.q .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:26px;transition:border-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease)}
.q .card.hv:hover,.q .card.is-hover{border-color:#d1d5db;transform:translateY(-2px);box-shadow:var(--shadow-soft)}
.q .badge{display:inline-block;font-size:14px;font-weight:600;line-height:1;padding:5px 12px 6px;border-radius:12px;background:var(--tint-12);color:var(--accent-text)}
.q .chip{display:inline-flex;align-items:center;gap:8px;font-size:17px;line-height:1;padding:8px 12px 9px;border-radius:var(--r-control);border:1px solid var(--border);background:#fff;color:var(--ink, #16182b)}
.q .chip .ico{width:16px;height:16px;margin-top:-1px}
.q .chip.off{background:var(--surface-muted);color:var(--muted, #6a6d85);filter:saturate(.6)}
.q .stat-chip{position:absolute;inset-inline-start:14px;bottom:14px;font-size:15px;font-weight:600;line-height:1;padding:7px 12px 8px;border-radius:12px;background:var(--tint-12);color:var(--accent-text);box-shadow:var(--shadow-soft)}
.q .hr{height:1px;background:var(--border);border:0;margin:0}
/* reveal: keyframes, לא transition (חוק סיני 12.8) */
.q .reveal{opacity:0}
.q .reveal.is-in{opacity:1;animation:qrev .5s cubic-bezier(.2,.6,.2,1) both}
@keyframes qrev{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}
@media (prefers-reduced-motion:reduce){.q .reveal{opacity:1;animation:none}.q .reveal.is-in{animation:none}.q .btn,.q .card,.q .lnk,.q .lnk .ico{transition:none}}
/* ריווח סקשן: 112 / 88 / 64 */
.q .sec{padding:var(--sec, clamp(120px, 12vw, 260px)) var(--gut)}
.q .muted-bg{background:var(--surface-muted)}
.q .wrap{max-width:1200px;margin-inline:auto}
@container (max-width:1023px){.q{--sec:88px}}
@container (max-width:767px){.q{--sec:64px}.q h1{font-size:38px;line-height:.96}.q h2{font-size:31px;line-height:1}.q h3{font-size:22px}.q .btn{width:100%;min-height:48px}}
.q .frame{background:#fff;border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-shot);position:relative;max-width:1000px;margin:56px auto -88px}
.q .frame .bar{height:38px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:7px;padding-inline:16px}
.q .frame .bar i{width:11px;height:11px;border-radius:50%;background:#e2e4e9}
.q .frame .scr{aspect-ratio:16/9;background:var(--surface-muted);display:grid;grid-template-columns:200px 1fr;gap:16px;padding:16px}
.q .frame .side{background:#fff;border:1px solid var(--border);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:10px}
.q .frame .side i{height:10px;border-radius:5px;background:var(--border)}
.q .frame .side i:first-child{width:60%;background:var(--tint-12)}
.q .frame .main{display:grid;grid-template-rows:auto 1fr;gap:16px}
.q .frame .kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.q .frame .kpi{background:#fff;border:1px solid var(--border);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:6px}
.q .frame .kpi b{font-size:26px;font-weight:600;letter-spacing:-.02em;line-height:1;color:var(--ink, #16182b)}
.q .frame .kpi small{font-size:13px;color:var(--muted, #6a6d85)}
.q .frame .kpi:first-child b{color:var(--accent, #4a3aff)}
.q .frame .chart{background:#fff;border:1px solid var(--border);border-radius:12px;padding:14px;display:flex;align-items:flex-end;gap:10px}
.q .frame .chart s{display:block;flex:1;background:var(--tint-12);border-radius:6px 6px 0 0;text-decoration:none}
.q .frame .chart s:nth-child(5){background:var(--accent, #4a3aff)}
@container (max-width:767px){.q .frame{margin:40px auto -56px}.q .frame .scr{grid-template-columns:1fr;aspect-ratio:auto}.q .frame .side{display:none}.q .frame .kpis{grid-template-columns:1fr 1fr}.q .frame .chart{height:120px}}
.q .hd{position:sticky;top:0;z-index:20;height:64px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;padding-inline:var(--gut);transition:box-shadow .18s var(--ease)}
.q .hd.is-scrolled{box-shadow:var(--shadow-soft)}
.q .hd .logo{display:inline-flex;align-items:center;gap:8px;font-size:24px;font-weight:600;line-height:1}
.q .hd nav{position:absolute;inset-inline:0;margin-inline:auto;width:max-content;display:flex;gap:28px;font-size:17px;font-weight:500;color:var(--muted, #6a6d85)}
.q .hd nav a{transition:color .18s var(--ease);padding:4px 0}
.q .hd nav a:hover{color:var(--ink, #16182b)}
.q .hd .acts{margin-inline-start:auto;display:flex;align-items:center;gap:20px}
.q .hd .acts .login{font-size:17px;font-weight:500;color:var(--muted, #6a6d85);transition:color .18s var(--ease)}
.q .hd .acts .login:hover{color:var(--ink, #16182b)}
.q .hero{padding:64px var(--gut) 0;text-align:center}
.q .hero .wrap{display:flex;flex-direction:column;align-items:center;gap:24px}
.q .hero h1{max-width:760px}
.q .hero .lead{margin-inline:auto}
.q .hero .ctas{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.q .proof{padding-top:calc(var(--sec, clamp(120px, 12vw, 260px)) + 88px)}
.q .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;text-align:center}
.q .stat b{display:block;font-size:86px;line-height:1;font-weight:600;letter-spacing:-.02em;color:var(--accent, #4a3aff);font-variant-numeric:tabular-nums}
.q .stat .meta{margin-top:12px}
.q .head{display:flex;flex-direction:column;gap:16px;max-width:760px;margin-bottom:48px}
.q .head.c{align-items:center;text-align:center;margin-inline:auto}
.q .head.c .lead{margin-inline:auto}
.q .g3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.q .g3 .card{display:flex;flex-direction:column;gap:14px}
.q .g3 .card h3{margin-top:0}.q .g3 .card .body{font-size:18px}
.q .state{padding:calc(var(--sec, clamp(120px, 12vw, 260px)) * 1.5) var(--gut);text-align:center}
.q .state .wrap{display:flex;flex-direction:column;align-items:center;gap:24px;max-width:660px}
.q .state h2{max-width:660px}
.q .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start}
.q .plan{position:relative;display:flex;flex-direction:column;gap:20px}
.q .plan.rec{border:2px solid var(--accent, #4a3aff);box-shadow:var(--shadow-soft);background:var(--tint-4)}
.q .plan .badge{position:absolute;top:-13px;inset-inline:0;margin-inline:auto;width:max-content}
.q .plan .price{display:flex;align-items:baseline;gap:8px}
.q .plan .price b{font-size:45px;font-weight:600;letter-spacing:-.02em;line-height:1}
.q .plan ul{display:flex;flex-direction:column;gap:12px}
.q .plan li{display:flex;align-items:flex-start;gap:10px;font-size:18px;line-height:1.36;color:var(--muted, #6a6d85)}
.q .plan li .ico{margin-top:3px}
.q .plan .btn{width:100%}
.q .form{max-width:640px;margin-inline:auto;display:flex;flex-direction:column;gap:20px}
.q .form .row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.q .form .btn{width:100%;min-height:50px;font-size:18px}
.q .form .micro{text-align:center}
.q .band{background:var(--accent, #4a3aff);color:#fff;text-align:center}
.q .band .wrap{display:flex;flex-direction:column;align-items:center;gap:24px;max-width:760px}
.q .band h2{color:#fff}
.q .band .lead{color:rgba(255,255,255,.9);margin-inline:auto}
.q .band .ctas{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.q .ft{border-top:1px solid var(--border);padding:48px var(--gut) 0}
.q .ft .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:40px}
.q .ft .brand{display:flex;flex-direction:column;gap:14px}
.q .ft .brand .logo{display:inline-flex;align-items:center;gap:8px;font-size:26px;font-weight:600;line-height:1}
.q .ft .brand .micro{max-width:300px;line-height:1.36}
.q .ft .col{display:flex;flex-direction:column;gap:12px}
.q .ft .col .meta{color:var(--ink, #16182b);margin-bottom:4px}
.q .ft .col a{font-size:17px;color:var(--muted, #6a6d85);transition:color .18s var(--ease)}
.q .ft .col a:hover{color:var(--ink, #16182b)}
.q .ft .legal{border-top:1px solid var(--border);padding:20px 0;text-align:center}
@container (max-width:1023px){.q .stats{gap:24px}.q .stat b{font-size:64px}.q .ft .cols{grid-template-columns:1fr 1fr}}
@container (max-width:767px){.q .hd nav,.q .hd .acts .login{display:none}.q .hd .acts .btn{width:auto;min-height:38px}.q .g3,.q .plans,.q .stats,.q .form .row{grid-template-columns:1fr}.q .stat b{font-size:56px}.q .proof{padding-top:calc(var(--sec, clamp(120px, 12vw, 260px)) + 56px)}.q .plan.rec{order:-1}.q .ft .cols{grid-template-columns:1fr;gap:28px}.q .state{padding-block:calc(var(--sec, clamp(120px, 12vw, 260px)) * 1.25)}}

HTML

<div class="cwrap sk-s05"><div class="q">
<header class="hd"><a class="logo"><svg class="ico" viewBox="0 0 24 24" style="color:var(--accent)"><rect x="3" y="3" width="18" height="18" rx="5"/><path d="M8 12h8M12 8v8"/></svg>שם העסק</a><nav><a>מוצר</a><a>מחירים</a><a>לקוחות</a><a>בלוג</a></nav><div class="acts"><a class="login">התחברות</a><a class="btn sm">להתחיל</a></div></header>
<section class="hero"><div class="wrap">
<span class="eyebrow reveal"><i></i>מערכת ניהול לחנויות קטנות</span>
<h1 class="reveal">כל ההזמנות במקום אחד, בלי גיליונות</h1>
<p class="lead reveal">מלאי, משלוחים ולקוחות בממשק אחד שקט. מתחילים בעשר דקות, בלי הדרכה ובלי כרטיס אשראי.</p>
<div class="ctas reveal"><a class="btn lg">להתחיל בחינם</a><a class="btn b2 lg">לראות איך זה עובד</a></div>
<div class="frame reveal"><div class="bar"><i></i><i></i><i></i></div><div class="scr"><div class="side"><i></i><i></i><i></i><i></i><i></i></div><div class="main"><div class="kpis"><div class="kpi"><b>1,240</b><small>הזמנות החודש</small></div><div class="kpi"><b>96%</b><small>נשלחו בזמן</small></div><div class="kpi"><b>4.9</b><small>דירוג</small></div></div><div class="chart"><s style="height:35%"></s><s style="height:55%"></s><s style="height:45%"></s><s style="height:70%"></s><s style="height:100%"></s><s style="height:80%"></s><s style="height:62%"></s></div></div></div><span class="stat-chip">+31% המרה מהחודש שעבר</span></div>
</div></section>
<section class="sec muted-bg proof"><div class="wrap"><div class="stats">
<div class="stat reveal"><b data-count="1240">0</b><span class="meta">חנויות פעילות</span></div>
<div class="stat reveal"><b data-count="96" data-suffix="%">0</b><span class="meta">משלוחים שנשלחו בזמן</span></div>
<div class="stat reveal"><b data-count="12" data-suffix=" דק'">0</b><span class="meta">מהרשמה להזמנה ראשונה</span></div>
</div></div></section>
<section class="sec"><div class="wrap">
<div class="head reveal"><span class="eyebrow"><i></i>למה זה עובד</span><h2>שלושה דברים שהמערכת עושה במקומכם</h2><p class="lead">לא רשימת פיצ'רים. שלוש פעולות שחוזרות כל יום, ושמהיום קורות לבד.</p></div>
<div class="g3">
<article class="card hv reveal"><svg class="ico" viewBox="0 0 24 24"><path d="M13 2 3 14h9l-1 8 10-12h-9z"/></svg><h3>הזמנה נכנסת, מדבקה יוצאת</h3><p class="body">כל הזמנה חדשה מקבלת מדבקת משלוח מוכנה להדפסה, עם הכתובת מאומתת מול הדואר.</p></article>
<article class="card hv reveal"><svg class="ico" viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg><h3>מלאי שלא משקר</h3><p class="body">הכמות מתעדכנת ברגע המכירה, בכל הערוצים. מוצר שנגמר יורד מהאתר לבד.</p></article>
<article class="card hv reveal"><svg class="ico" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg><h3>לקוח שמקבל תשובה</h3><p class="body">הודעת וואטסאפ אוטומטית בכל שלב: התקבל, נארז, נשלח. פחות טלפונים, יותר אמון.</p></article>
</div>
<p class="hl reveal">אף מערכת אחרת לא מדפיסה את המדבקה בשבילכם.</p>
</div></section>
<section class="state muted-bg"><div class="wrap">
<h2 class="reveal">מערכת טובה היא זו שלא מרגישים.</h2>
<p class="lead reveal">בנינו אותה לחנויות של אדם אחד או שניים, שאין להם זמן ללמוד תוכנה. אם משהו דורש הסבר, שינינו אותו.</p>
<a class="lnk reveal">לקרוא איך בנינו את זה<svg class="ico" viewBox="0 0 24 24"><path d="M19 12H5"/><path d="m12 19-7-7 7-7"/></svg></a>
</div></section>
<section class="sec"><div class="wrap">
<div class="head c reveal"><span class="eyebrow"><i></i>מחירים</span><h2>מחיר אחד לחודש, בלי הפתעות</h2><p class="lead">כל החבילות כוללות את כל הפיצ'רים. ההבדל הוא רק בכמות ההזמנות.</p></div>
<div class="plans">
<article class="card plan reveal"><h3>קטנה</h3><div class="price"><b>₪89</b><span class="meta">לחודש</span></div><ul><li><svg class="ico s" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg><span>עד 200 הזמנות בחודש</span></li><li><svg class="ico s" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg><span>מדבקות משלוח</span></li><li><svg class="ico s" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg><span>הודעות וואטסאפ</span></li></ul><a class="btn b2">להתחיל בחינם</a></article>
<article class="card plan rec reveal"><span class="badge">הכי נפוצה</span><h3>בינונית</h3><div class="price"><b>₪149</b><span class="meta">לחודש</span></div><ul><li><svg class="ico s" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg><span>עד 1,000 הזמנות בחודש</span></li><li><svg class="ico s" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg><span>מדבקות משלוח</span></li><li><svg class="ico s" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg><span>הודעות וואטסאפ</span></li><li><svg class="ico s" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg><span>חיבור לחשבונית ירוקה</span></li></ul><a class="btn">להתחיל בחינם</a></article>
<article class="card plan reveal"><h3>גדולה</h3><div class="price"><b>₪249</b><span class="meta">לחודש</span></div><ul><li><svg class="ico s" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg><span>הזמנות ללא הגבלה</span></li><li><svg class="ico s" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg><span>כל מה שבבינונית</span></li><li><svg class="ico s" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg><span>שני משתמשים</span></li><li><svg class="ico s" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg><span>תמיכה בטלפון</span></li></ul><a class="btn b2">להתחיל בחינם</a></article>
</div>
</div></section>
<section class="sec muted-bg"><div class="wrap">
<div class="head c reveal"><h2>שאלה לפני שמתחילים?</h2><p class="lead">משאירים פרטים וחוזרים אליכם תוך יום עבודה. בלי מכירה, רק תשובות.</p></div>
<form class="form reveal" onsubmit="return false"><div class="row"><div class="fld"><label>שם מלא</label><input class="in" placeholder="איך קוראים לכם"></div><div class="fld"><label>טלפון</label><input class="in" placeholder="050-0000000"></div></div><div class="fld"><label>מה השאלה?</label><input class="in" placeholder="משפט אחד מספיק"></div><button class="btn" type="submit">לשלוח</button><p class="micro">בלי רשימות תפוצה. עונים ומוחקים.</p></form>
</div></section>
<section class="sec band"><div class="wrap">
<h2 class="reveal">מתחילים היום, ההזמנה הראשונה נשלחת מחר</h2>
<p class="lead reveal">14 יום ניסיון, בלי כרטיס אשראי. אם לא התאים, לא קרה כלום.</p>
<div class="ctas reveal"><a class="btn lg">להתחיל בחינם</a><a class="btn b2 lg">לדבר איתנו</a></div>
</div></section>
<footer class="ft"><div class="wrap"><div class="cols">
<div class="brand"><span class="logo"><svg class="ico" viewBox="0 0 24 24" style="color:var(--accent)"><rect x="3" y="3" width="18" height="18" rx="5"/><path d="M8 12h8M12 8v8"/></svg>שם העסק</span><p class="micro">מערכת ניהול לחנויות קטנות. נבנתה בישראל, נתמכת בעברית, עובדת בשקט.</p></div>
<div class="col"><span class="meta">מוצר</span><a>מה כלול</a><a>מחירים</a><a>עדכונים</a></div>
<div class="col"><span class="meta">חברה</span><a>אודות</a><a>לקוחות</a><a>בלוג</a></div>
<div class="col"><span class="meta">עזרה</span><a>מרכז תמיכה</a><a>וואטסאפ</a><a>יצירת קשר</a></div>
</div><p class="legal micro">© שם העסק · תנאי שימוש · פרטיות · נגישות</p></div></footer>
</div></div>

JS

(function(){var root=document.querySelector(".sk-s05");if(!root)return;
var rm=window.matchMedia("(prefers-reduced-motion: reduce)").matches;
var hd=root.querySelector(".hd");var top=document.querySelector(".vtop");if(top&&hd)hd.style.top=top.offsetHeight+"px";
function onScroll(){if(hd)hd.classList.toggle("is-scrolled",window.scrollY>8)}window.addEventListener("scroll",onScroll,{passive:true});onScroll();
function count(b){var t=+b.dataset.count,suf=b.dataset.suffix||"",step=Math.max(1,Math.round(t/28)),v=0;if(rm){b.textContent=t.toLocaleString("he-IL")+suf;return}
var id=setInterval(function(){v+=step;if(v>=t){v=t;clearInterval(id)}b.textContent=v.toLocaleString("he-IL")+suf},24)}
var els=root.querySelectorAll(".reveal");
if(rm||!("IntersectionObserver" in window)){els.forEach(function(e){e.classList.add("is-in")});root.querySelectorAll("[data-count]").forEach(count);return}
var io=new IntersectionObserver(function(en){en.forEach(function(x){if(!x.isIntersecting)return;x.target.classList.add("is-in");x.target.querySelectorAll("[data-count]").forEach(count);if(x.target.matches("[data-count]"))count(x.target);io.unobserve(x.target)})},{threshold:.15,rootMargin:"0px 0px -8% 0px"});
els.forEach(function(e){io.observe(e)});})();