@font-face{font-family:"Heebo";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/heebo-hebrew.woff2) format("woff2");unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:"Heebo";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/heebo-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Varela Round";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/varela-hebrew.woff2) format("woff2");unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:"Varela Round";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/varela-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/jbmono-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F}

:root{
  --bg:#070a12;--bg2:#0b1020;--panel:#0f1626;--panel2:#131c30;--line:#1e2a3d;--line2:#2a3a55;
  --fg:#eef3f8;--fg2:#b4c2d4;--fg3:#93a3b8;
  --c1:#5ee7ff;--c2:#9d8fff;--hot:#ffbf5e;--ok:#7ee2a8;--pink:#ff8acd;
  --focus:#ffd166;
  --grad:linear-gradient(135deg,var(--c1),var(--c2));
  --display:"Varela Round","Heebo",system-ui,sans-serif;
  --body:"Heebo",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --r:18px;--wrap:1160px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{font-size:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:1.0625rem;line-height:1.7;overflow-x:hidden;
  background-image:radial-gradient(900px 520px at 85% -8%,rgba(94,231,255,.13),transparent 60%),radial-gradient(800px 600px at 5% 18%,rgba(139,123,255,.12),transparent 60%);background-repeat:no-repeat}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:20px}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.25;margin:0;text-wrap:balance}
p{margin:0}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.875rem;font-weight:500;color:var(--c1);letter-spacing:.02em}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c1)}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* focus & skip link */
:focus{outline:none}
:focus-visible{outline:3px solid var(--focus)!important;outline-offset:3px!important;border-radius:6px}
.skip{position:absolute;top:-100px;right:16px;z-index:200;background:var(--focus);color:#111;padding:12px 18px;border-radius:10px;font-weight:700;text-decoration:none}
.skip:focus{top:12px}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(7,10,18,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:16px;min-height:68px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--display);font-size:1.25rem}
.mark{width:36px;height:36px;border-radius:11px;background:var(--grad);display:grid;place-items:center;flex:none}
.mark svg{width:22px;height:22px}
.menu{display:flex;gap:4px;margin:0;margin-inline-start:auto;padding:0;list-style:none}
.menu a{display:block;text-decoration:none;color:var(--fg2);font-size:.9375rem;padding:10px 12px;border-radius:10px}
.menu a:hover{color:var(--fg);background:var(--panel)}
.menu-btn{display:none;margin-inline-start:auto;background:var(--panel);border:1px solid var(--line2);color:var(--fg);border-radius:12px;min-width:44px;min-height:44px;padding:8px 12px;font:inherit;font-size:.9375rem;cursor:pointer;align-items:center;gap:8px}
.menu-btn svg{width:20px;height:20px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:12px 22px;min-height:44px;font-family:var(--body);font-size:1rem;font-weight:500;text-decoration:none;border:1px solid transparent;cursor:pointer;white-space:nowrap}
.btn-p{background:var(--grad);color:#061018;box-shadow:0 8px 28px rgba(94,231,255,.22)}
.btn-p2{background:linear-gradient(135deg,var(--c2),var(--pink));color:#120a1c}
.btn-g{background:var(--panel);border-color:var(--line2);color:var(--fg)}
.btn-g:hover{border-color:var(--c1)}
.btn-s{padding:9px 16px;font-size:.9375rem}
@media (prefers-reduced-motion:no-preference){.btn{transition:transform .15s,box-shadow .15s}.btn:hover{transform:translateY(-1px)}}

/* hero */
.hero{padding:64px 0 40px}
.hero .wrap{display:grid;grid-template-columns:1fr 1.3fr;gap:44px;align-items:center}
.hero h1{font-size:clamp(2.375rem,5.4vw,4rem);margin:18px 0 20px}
.lead{font-size:clamp(1.0625rem,1.6vw,1.25rem);color:var(--fg2);max-width:34em}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.ticks{display:flex;flex-wrap:wrap;gap:8px 18px;margin:26px 0 0;padding:0;list-style:none;font-size:.9375rem;color:var(--fg2)}
.ticks li{display:flex;align-items:center;gap:7px}
.ticks li::before{content:"✓";color:var(--ok);font-weight:700}

.stage{position:relative;padding-bottom:40px;margin:0}
.laptop{border-radius:16px;background:var(--panel);border:1px solid var(--line2);box-shadow:0 30px 80px rgba(0,0,0,.55);overflow:hidden}
.laptop .bar{height:30px;display:flex;align-items:center;gap:7px;padding-inline:14px;border-bottom:1px solid var(--line);background:var(--bg2)}
.laptop .bar i{width:10px;height:10px;border-radius:50%;background:var(--line2)}
.laptop .bar i:first-child{background:#ff6b6b}.laptop .bar i:nth-child(2){background:var(--hot)}.laptop .bar i:nth-child(3){background:var(--ok)}
.tablet{width:100%;max-width:300px;border-radius:26px;padding:12px;background:linear-gradient(160deg,#25324a,#0e1524);box-shadow:0 30px 70px rgba(0,0,0,.6)}
.tablet .scr{border-radius:14px;overflow:hidden;position:relative;background:var(--bg)}

.stage .tablet{position:absolute;bottom:-14px;left:-22px;width:34%;max-width:240px;padding:8px;border-radius:18px}
.stage .tablet .scr{border-radius:10px}

/* stats */
.stats{padding:20px 0 10px}
.stats ul{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:0;padding:0;list-style:none}
.stats li{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px 18px 16px}
.stats b{display:block;font-family:var(--mono);font-weight:500;font-size:1.875rem;line-height:1.15}
.stats span{font-size:.875rem;color:var(--fg2)}

section{padding:84px 0}
section.tight{padding-top:20px}
.sh{max-width:720px;margin-bottom:40px}
.sh h2{font-size:clamp(1.875rem,3.6vw,2.75rem);margin:14px 0}
.sh p{color:var(--fg2);font-size:1.125rem}

/* kits */
.kits{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.kit{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:30px;display:flex;flex-direction:column;gap:18px;overflow:hidden}
.kit::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--grad)}
.kit.k2::before{background:linear-gradient(135deg,var(--c2),var(--pink))}
.kit-h{display:flex;align-items:center;gap:14px}
.kit-ic{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;font-family:var(--display);font-size:1.625rem;color:#061018;background:var(--grad);flex:none}
.k2 .kit-ic{background:linear-gradient(135deg,var(--c2),var(--pink));color:#120a1c}
.kit h3{font-size:1.75rem}
.kit .sub{font-size:.9375rem;color:var(--fg2)}
.kit-n{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0;padding:0;list-style:none}
.kit-n li{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.kit-n b{display:block;font-family:var(--mono);font-weight:500;font-size:1.3125rem;line-height:1.25;color:var(--c1)}
.k2 .kit-n b{color:#c3b9ff}
.kit-n span{font-size:.8125rem;color:var(--fg2);line-height:1.4;display:block}
.kit .feat-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px;font-size:1rem}
.kit .feat-list li{display:flex;gap:10px;align-items:baseline}
.kit .feat-list li::before{content:"";flex:none;width:7px;height:7px;border-radius:2px;background:var(--c1);transform:translateY(-2px) rotate(45deg)}
.k2 .feat-list li::before{background:#c3b9ff}
.kit .btn{margin-top:auto;align-self:flex-start}

/* features */
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0;padding:0;list-style:none}
.feat{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:24px}
.fi{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(94,231,255,.1);color:var(--c1);font-size:1.25rem;margin-bottom:14px}
.feat h3{font-size:1.25rem;margin-bottom:8px}
.feat p{color:var(--fg2);font-size:.96875rem}
.feat.hl{border-color:rgba(94,231,255,.5);background:linear-gradient(180deg,rgba(94,231,255,.08),var(--panel) 60%)}
.tag{display:inline-block;font-family:var(--body);font-size:.75rem;font-weight:500;color:var(--hot);border:1px solid rgba(255,191,94,.6);border-radius:999px;padding:1px 10px;margin-inline-start:8px;vertical-align:middle}

/* showcase */
.show{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:center;padding:30px 0}
.show+.show{margin-top:40px}
.show.rev .txt{order:2}
.show h3{font-size:clamp(1.625rem,2.8vw,2.125rem);margin:12px 0 14px}
.show p{color:var(--fg2);font-size:1.09375rem}
.show ol{margin:18px 0 0;padding:0;list-style:none;counter-reset:s;display:flex;flex-direction:column;gap:10px}
.show ol li{counter-increment:s;display:flex;gap:12px;align-items:baseline;font-size:1rem}
.show ol li::before{content:counter(s);flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-family:var(--mono);font-size:.8125rem;background:var(--panel2);border:1px solid var(--line2);color:var(--c1);transform:translateY(4px)}
.pics{display:flex;justify-content:center;gap:18px;margin:0}
.pics .tablet{max-width:300px}
.pics .tablet:nth-child(2){transform:translateY(36px)}
figure{margin:0}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0;padding:0;list-style:none;counter-reset:st}
.step{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:26px 24px 24px;counter-increment:st}
.step::before{content:"0" counter(st);font-family:var(--mono);font-size:.875rem;color:var(--c1);display:block;margin-bottom:12px}
.step h3{font-size:1.3125rem;margin-bottom:8px}
.step p{color:var(--fg2);font-size:.96875rem}

/* custom */
.custom{border-radius:28px;padding:48px;border:1px solid var(--line2);background:radial-gradient(600px 300px at 90% 0%,rgba(94,231,255,.12),transparent 70%),radial-gradient(600px 340px at 0% 100%,rgba(139,123,255,.14),transparent 70%),var(--panel);display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center}
.custom h2{font-size:clamp(1.75rem,3.3vw,2.5rem);margin:14px 0}
.custom p{color:var(--fg2);font-size:1.09375rem}
.mailcard{background:rgba(7,10,18,.7);border:1px solid var(--line2);border-radius:20px;padding:26px;display:flex;flex-direction:column;gap:14px}
.mailcard .lbl{font-size:.875rem;color:var(--fg2)}
.mail{font-family:var(--mono);font-size:clamp(1.0625rem,2vw,1.3125rem);text-decoration:none;color:var(--c1);word-break:break-all;align-self:flex-start}
.mail:hover{text-decoration:underline}
.mailcard .row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.copy{background:transparent;border:1px solid var(--line2);color:var(--fg);border-radius:999px;padding:9px 16px;min-height:44px;font-family:var(--body);font-size:.9375rem;cursor:pointer}
.copy:hover{border-color:var(--c1)}
.status{font-size:.875rem;color:var(--ok);min-height:1.4em}

/* faq */
.faq{max-width:820px;display:flex;flex-direction:column;gap:10px}
.faq details{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:0 22px}
.faq details[open]{border-color:var(--line2)}
.faq summary{list-style:none;cursor:pointer;padding:18px 0;font-size:1.09375rem;font-weight:500;display:flex;justify-content:space-between;gap:16px;align-items:center;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--c1);font-size:1.375rem;line-height:1}
.faq details[open] summary::after{content:"−"}
.faq details p{color:var(--fg2);padding-bottom:18px;font-size:1rem}

/* final */
.final{text-align:center;padding:96px 0 90px}
.final h2{font-size:clamp(2rem,4.2vw,3.25rem);margin:14px auto 16px;max-width:16em}
.final p{color:var(--fg2);font-size:1.125rem;max-width:34em;margin:0 auto 30px}
.final .cta{justify-content:center}

footer{border-top:1px solid var(--line);padding:30px 0 40px;color:var(--fg3);font-size:.875rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:space-between}
footer ul{display:flex;flex-wrap:wrap;gap:6px 20px;margin:0;padding:0;list-style:none}
footer a{color:var(--fg2);text-decoration:underline;text-underline-offset:3px}
footer a:hover{color:var(--c1)}

/* text pages (accessibility / privacy) */
.doc{max-width:820px;padding:56px 0 80px}
.doc h1{font-size:clamp(2rem,4vw,2.75rem);margin:14px 0 18px}
.doc h2{font-size:1.5rem;margin:36px 0 12px}
.doc p,.doc li{color:var(--fg2);font-size:1.0625rem}
.doc p+p{margin-top:12px}
.doc ul{padding-inline-start:22px;margin:10px 0}
.doc li{margin:6px 0}
.doc a:not(.btn){color:var(--c1)}
.doc .card{background:var(--panel);border:1px solid var(--line2);border-radius:16px;padding:20px 22px;margin-top:14px}
.doc .meta{font-size:.9375rem;color:var(--fg3)}

/* reveal (only when JS is on and motion allowed) */
@media (prefers-reduced-motion:no-preference){
  .js .rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
  .js .rv.in{opacity:1;transform:none}
}

/* accessibility menu */
.a11y-fab{position:fixed;left:16px;bottom:16px;z-index:120;width:52px;height:52px;border-radius:50%;border:2px solid #fff;background:#1452d4;color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.a11y-fab svg{width:30px;height:30px}
.a11y-panel{position:fixed;left:16px;bottom:78px;z-index:121;width:min(320px,calc(100vw - 32px));max-height:calc(100vh - 100px);overflow:auto;background:#0d1424;border:1px solid var(--line2);border-radius:18px;padding:18px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.a11y-panel[hidden]{display:none}
.a11y-panel h2{font-family:var(--body);font-size:1.125rem;font-weight:700;margin:0 0 12px}
.a11y-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.a11y-grid button{min-height:52px;background:var(--panel2);border:1px solid var(--line2);color:var(--fg);border-radius:12px;font:inherit;font-size:.875rem;line-height:1.3;padding:8px;cursor:pointer;text-align:center}
.a11y-grid button[aria-pressed="true"]{background:#1452d4;border-color:#9cc0ff;color:#fff}
.a11y-grid .wide{grid-column:1/-1}
.a11y-panel .foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px;font-size:.875rem}
.a11y-panel .foot a{color:var(--c1)}
.a11y-close{position:absolute;top:10px;left:10px;width:36px;height:36px;border-radius:10px;border:1px solid var(--line2);background:transparent;color:var(--fg);cursor:pointer;font-size:1.125rem}

/* user preferences */
html.a11y-fs1{font-size:112.5%}
html.a11y-fs2{font-size:125%}
html.a11y-fs3{font-size:150%}
html.a11y-contrast{--bg:#000;--bg2:#000;--panel:#000;--panel2:#000;--line:#fff;--line2:#fff;--fg:#fff;--fg2:#fff;--fg3:#fff;--c1:#ffff00;--c2:#ffff00;--hot:#ffff00;--ok:#7fff7f}
html.a11y-contrast body{background-image:none}
html.a11y-contrast .grad{background:none;color:#ffff00}
html.a11y-contrast .btn-p,html.a11y-contrast .btn-p2{background:#ffff00;color:#000;box-shadow:none}
html.a11y-contrast .kit-ic,html.a11y-contrast .mark{background:#ffff00}
html.a11y-contrast .nav{background:#000}
html.a11y-contrast .custom{background:#000}
html.a11y-links a{text-decoration:underline!important;text-underline-offset:3px}
html.a11y-links a:not(.btn):not(.brand){background:rgba(255,255,0,.12);outline:1px dashed currentColor}
html.a11y-font{--display:Arial,"Heebo",sans-serif;--body:Arial,"Heebo",sans-serif}
html.a11y-font body{letter-spacing:.02em;word-spacing:.08em;line-height:1.9}
html.a11y-still *,html.a11y-still *::before,html.a11y-still *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html.a11y-still .rv{opacity:1!important;transform:none!important}
html.a11y-cursor,html.a11y-cursor *{cursor:url("cursor.svg") 4 2,auto!important}

@media (forced-colors:active){
  .btn,.copy,.a11y-grid button,.menu-btn{border:2px solid ButtonText}
  .grad{color:CanvasText;background:none}
}

@media (max-width:980px){
  .hero .wrap{grid-template-columns:1fr;gap:40px}
  .stage{max-width:640px;margin:0 auto;width:100%}
  .stats ul{grid-template-columns:repeat(3,1fr)}
  .kits{grid-template-columns:1fr}
  .feats{grid-template-columns:1fr 1fr}
  .show{grid-template-columns:1fr;gap:34px}
  .show.rev .txt{order:0}
  .custom{grid-template-columns:1fr;padding:34px}
  .menu-btn{display:inline-flex}
  .nav .wrap{flex-wrap:wrap}
  .menu{display:none;order:3;flex-basis:100%;flex-direction:column;margin:0 0 12px;gap:2px}
  .menu.open{display:flex}
  .menu a{padding:12px}
  .nav .cta-top{display:none}
}
@media (max-width:640px){
  body{font-size:1rem}
  .wrap{padding-inline:16px}
  .hero{padding:44px 0 20px}
  section{padding:60px 0}
  .stats ul{grid-template-columns:1fr 1fr}
  .stats li:last-child{grid-column:1/-1}
  .stats b{font-size:1.625rem}
  .feats,.steps{grid-template-columns:1fr}
  .kit{padding:22px}
  .kit-n{grid-template-columns:1fr 1fr}
  .stage .tablet{left:-6px;width:38%}
  .pics{gap:12px}
  .pics .tablet{max-width:48%;border-radius:16px;padding:6px}
  .pics .tablet .scr{border-radius:9px}
  .custom{padding:24px;border-radius:22px}
  .hero .cta .btn{flex:1 1 auto}
  .a11y-fab{width:48px;height:48px}
}
@media print{
  .nav,.a11y-fab,.a11y-panel,.skip{display:none!important}
  body{background:#fff;color:#000}
}

/* language switch + J logo */
.mark{background:none!important;box-shadow:none!important;width:40px;height:40px;border-radius:0}
.mark svg{width:40px;height:40px}
.lang-switch{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 14px;border:1px solid var(--line2);border-radius:999px;color:var(--fg);text-decoration:none;font-size:.9375rem;white-space:nowrap}
.lang-switch svg{width:18px;height:18px;flex:none}
.lang-switch:hover{border-color:var(--c1)}
.note-lang{margin-top:14px;font-size:.9375rem;color:var(--fg2)}
.skip{right:auto;inset-inline-start:16px}
@media (max-width:980px){.lang-switch{padding:8px 12px}}
@media (max-width:420px){.lang-switch span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.brand{font-size:1.0625rem}}
