/* ============================================================
   MIME — Premium landing
   Two canonical directions reconciled as themes:
     [data-theme="dark"]  = direction C (editorial, ink, bold)
     [data-theme="light"] = clean-SaaS cream (design-system doc)
   Fonts: IBM Plex Sans Hebrew (headings/UI), Lunasima (body),
          Fraunces (equation), Playpen Sans Hebrew (mascot voice)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Hebrew:wght@300;400;500;600;700&family=Lunasima:wght@400;700&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&display=swap');
@font-face { font-family:'Playpen Sans Hebrew'; src:url('fonts/PlaypenSansHebrew-Medium.ttf') format('truetype'); font-weight:500; font-display:swap; }
@font-face { font-family:'Playpen Sans Hebrew'; src:url('fonts/PlaypenSansHebrew-SemiBold.ttf') format('truetype'); font-weight:600; font-display:swap; }

/* Hebrew display + handwriting (AlefAlefAlef). unicode-range pins them to the
   Hebrew block so Latin / other scripts fall through to the next family. */
@font-face { font-family:'Yarden'; src:url('fonts/yarden-regular.woff2') format('woff2'),url('fonts/yarden-regular.woff') format('woff'); font-weight:400; font-display:swap; unicode-range:U+0590-05FF,U+FB1D-FB4F,U+200F,U+20AA; }
@font-face { font-family:'Yarden'; src:url('fonts/yarden-bold.woff2') format('woff2'),url('fonts/yarden-bold.woff') format('woff'); font-weight:600 800; font-display:swap; unicode-range:U+0590-05FF,U+FB1D-FB4F,U+200F,U+20AA; }
@font-face { font-family:'Dana Yad'; src:url('fonts/danayad.woff') format('woff'); font-weight:400 700; font-display:swap; unicode-range:U+0590-05FF,U+FB1D-FB4F,U+200F,U+20AA; }

:root {
  /* raw brand palette (constant across themes) */
  --mint:#AEE7D4; --mint-depth:#6FAFA0; --mint-glow:#D9FFF0; --mint-ink:#2F6B58;
  --lavender:#C8B7FF; --lavender-pop:#9E8BE8;
  --ink:#11151C; --charcoal:#25272E; --cream:#FFF9EF;
  --whatsapp:#1FAF60; --whatsapp-dark:#0B8A4F;

  --font-ui:'Yarden','IBM Plex Sans Hebrew', system-ui, sans-serif;
  --font-body:'Lunasima','IBM Plex Sans Hebrew', system-ui, sans-serif;
  --font-eq:'Fraunces', Georgia, serif;
  --font-hand:'Dana Yad','Playpen Sans Hebrew', var(--font-ui);

  --ease:cubic-bezier(.16,.84,.44,1);
  --ease-soft:cubic-bezier(.22,.61,.36,1);
  --ease-out-rev:cubic-bezier(.16,.74,.3,1);
  --maxw:1240px;
  --r-card:28px; --r-pill:999px;
}

/* ---- DARK theme (editorial C) ---- */
[data-theme="dark"]{
  --bg:#0C0F14; --bg-grad-1:#10151D; --bg-grad-2:#0A0D12;
  --surface:rgba(255,255,255,.045); --surface-2:rgba(255,255,255,.07);
  --surface-solid:#141A22; --card:#12171F;
  --fg:#F4EFE6; --fg-2:#9AA2AE; --fg-3:#5E6672;
  --hair:rgba(255,255,255,.10); --hair-2:rgba(255,255,255,.06);
  --accent:var(--mint); --accent-2:var(--lavender);
  --headline-fill:var(--mint); --stroke:var(--mint);
  --glow-1:rgba(174,231,212,.22); --glow-2:rgba(200,183,255,.20);
  --shadow:0 30px 80px rgba(0,0,0,.5); --shadow-soft:0 18px 50px rgba(0,0,0,.4);
  --grain:.05; --nav-bg:rgba(12,15,20,.6);
  --topline:#2A313B;
  color-scheme:dark;
}
/* ---- LIGHT theme (clean SaaS cream) ---- */
[data-theme="light"]{
  --bg:#FFF9EF; --bg-grad-1:#FFFDF8; --bg-grad-2:#F7F8FA;
  --surface:#FFFFFF; --surface-2:#FBF7EF;
  --surface-solid:#FFFFFF; --card:#FFFFFF;
  --fg:#181B22; --fg-2:#5C636E; --fg-3:#9AA0AB;
  --hair:#ECE3D4; --hair-2:#F0EADD;
  --accent:var(--mint-depth); --accent-2:var(--lavender-pop);
  --headline-fill:var(--mint-depth); --stroke:var(--mint-depth);
  --glow-1:rgba(174,231,212,.55); --glow-2:rgba(200,183,255,.42);
  --shadow:0 24px 70px rgba(17,21,28,.12); --shadow-soft:0 14px 40px rgba(17,21,28,.08);
  --grain:.025; --nav-bg:rgba(255,249,239,.72);
  --topline:#E6DCCB;
  color-scheme:light;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body); background:var(--bg); color:var(--fg);
  line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden; transition:background .5s var(--ease), color .5s var(--ease);
}
h1,h2,h3,h4,nav,button,.ui{font-family:var(--font-ui)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--mint);color:var(--ink)}

/* drifting ambient glows */
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ambient span{position:absolute;border-radius:50%;filter:blur(90px);opacity:.9;will-change:transform}
.ambient .a{width:46vmax;height:46vmax;background:var(--glow-1);top:-16vmax;inset-inline-start:-12vmax;animation:drift1 26s var(--ease-soft) infinite}
.ambient .b{width:40vmax;height:40vmax;background:var(--glow-2);bottom:-18vmax;inset-inline-end:-12vmax;animation:drift2 32s var(--ease-soft) infinite}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(8vmax,6vmax) scale(1.12)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-7vmax,-5vmax) scale(1.1)}}

/* film grain */
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:var(--grain);mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* scroll progress */
.progress{position:fixed;top:0;inset-inline-start:0;height:2px;width:0;z-index:120;background:linear-gradient(90deg,var(--mint),var(--lavender));transition:width .1s linear}

/* custom cursor (desktop fine pointer only) */
.cursor,.cursor-dot{position:fixed;top:0;left:0;z-index:200;pointer-events:none;border-radius:50%;mix-blend-mode:difference}
.cursor{width:34px;height:34px;border:1.5px solid #fff;transform:translate(-50%,-50%);transition:width .25s,height .25s,background .25s;opacity:0}
.cursor-dot{width:5px;height:5px;background:#fff;transform:translate(-50%,-50%);opacity:0}
.cursor.grow{width:56px;height:56px;background:rgba(255,255,255,.12)}
@media (pointer:fine){.cursor,.cursor-dot{opacity:1}}

main{position:relative;z-index:2}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 28px}
section{position:relative}

/* reveal-on-scroll (transform-only: stays visible even if a backgrounded
   tab freezes the transition; opacity gating is intentionally avoided) */
/* reveal-on-scroll — fade + rise, eased ease-out, fires once.
   A JS failsafe force-adds .in after load, so a frozen tab never stays hidden. */
.reveal{transform:translateY(26px);transition:transform .62s var(--ease-out-rev)}
.reveal.in{transform:none}
.reveal.d1{transition-delay:.07s}.reveal.d2{transition-delay:.15s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.33s}
@media (prefers-reduced-motion:reduce){.reveal{transform:none;transition:none}.ambient span{animation:none}.float{animation:none!important}}

/* ---------- buttons ---------- */
.btn{font-family:var(--font-ui);font-weight:600;cursor:pointer;border:0;border-radius:var(--r-pill);
  display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s}
.btn:active{transform:scale(.97)}
.btn-wa{background:var(--fg);color:var(--bg);box-shadow:var(--shadow-soft);letter-spacing:-.01em}
.btn-wa:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.btn-wa svg{color:var(--accent)}
.btn-lg{font-size:clamp(15px,2vw,17px);padding:15px 26px}
.btn-sm{font-size:14px;padding:10px 18px}
.btn-ghost{background:var(--surface);color:var(--fg);border:1px solid var(--hair)}
.btn-ghost:hover{background:var(--surface-2)}
.btn svg{width:20px;height:20px;flex:none}
.ghost-link{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-ui);font-weight:600;font-size:16px;color:var(--fg-2);background:none;border:0;cursor:pointer;transition:color .2s}
.ghost-link:hover{color:var(--accent)}
.ghost-link .arr{transition:transform .2s}
.ghost-link:hover .arr{transform:translateX(4px)}
[dir=rtl] .ghost-link:hover .arr{transform:translateX(-4px)}

/* magnetic wrapper */
.mag{display:inline-block;will-change:transform}

/* eyebrow tag */
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-ui);font-size:13px;font-weight:600;
  color:var(--accent);background:var(--surface);border:1px solid var(--hair);padding:7px 14px;border-radius:var(--r-pill)}
.dotlive{width:7px;height:7px;border-radius:50%;background:var(--whatsapp);box-shadow:0 0 0 0 rgba(31,175,96,.5);animation:ping 2.4s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(31,175,96,.5)}70%{box-shadow:0 0 0 9px rgba(31,175,96,0)}100%{box-shadow:0 0 0 0 rgba(31,175,96,0)}}

.float{animation:floaty 6s var(--ease-soft) infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}