/* ============================================================
   Lior de kimhi — Social Marketing  |  Design System  v2
   Built from the official Brand Book (Ariel Mor design)
   Direction: "Liquid Glass" premium + 3-step conversion funnel
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,600;1,800&family=Assistant:wght@400;500;600;700;800&display=swap');

:root{
  /* Brand palette */
  --navy:      #1C264F;
  --navy-2:    #141d3f;
  --blue:      #677CF8;
  --blue-2:    #909FFA;
  --blue-pale: #E0E6FF;
  --lime:      #DFFF00;
  --lime-soft: #D4FF9A;
  --cream:     #F9F7F5;
  --white:     #FFFFFF;

  --ink:       #1C264F;
  --ink-soft:  #4a5378;
  --ink-mute:  #7c84a6;

  --grad-blue: linear-gradient(135deg, #909FFA 0%, #677CF8 100%);
  --grad-blue-deep: linear-gradient(140deg, #6c80fa 0%, #4d5fd6 60%, #3a49bf 100%);
  --grad-lime: linear-gradient(135deg, #EBFF6B 0%, #DFFF00 100%);
  --grad-hero: linear-gradient(165deg, #F4F6FF 0%, #E7ECFF 45%, #dbe1ff 100%);

  /* Layered, colored shadows */
  --shadow-sm: 0 2px 6px rgba(28,38,79,.04), 0 8px 20px rgba(28,38,79,.06);
  --shadow-md: 0 8px 20px rgba(28,38,79,.08), 0 20px 46px rgba(28,38,79,.10);
  --shadow-lg: 0 16px 34px rgba(28,38,79,.12), 0 40px 84px rgba(28,38,79,.16);
  --shadow-blue: 0 12px 24px rgba(103,124,248,.28), 0 24px 50px rgba(103,124,248,.30);
  --shadow-lime: 0 12px 30px rgba(200,232,0,.45);
  --ring-blue: 0 0 0 4px rgba(103,124,248,.18);

  /* Glass */
  --glass-bg: rgba(255,255,255,.62);
  --glass-brd: rgba(255,255,255,.7);
  --glass-bg-dark: rgba(255,255,255,.08);
  --glass-brd-dark: rgba(255,255,255,.16);

  --r-sm: 14px;
  --r-md: 22px;
  --r-lg: 30px;
  --r-xl: 42px;

  --maxw: 1140px;
  --font-h: 'Rubik', 'Assistant', sans-serif;
  --font-b: 'Assistant', 'Rubik', sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font-b);
  color:var(--ink);
  background:var(--cream);
  direction:rtl;
  line-height:1.72;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
::selection{ background:var(--lime); color:var(--navy); }

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:22px; }
section{ position:relative; }
.sec-pad{ padding:clamp(60px,8.5vw,120px) 0; }

/* ---------- Typography ---------- */
h1,h2,h3{ font-family:var(--font-h); line-height:1.1; letter-spacing:-.022em; color:var(--navy); font-weight:800; text-wrap:balance; }
.eyebrow{
  display:inline-flex; align-items:center; gap:9px; font-family:var(--font-h); font-weight:700;
  font-size:clamp(.8rem,2vw,.95rem); letter-spacing:.01em;
  color:var(--blue); background:rgba(103,124,248,.10);
  padding:9px 18px 9px 16px; border-radius:999px; margin-bottom:22px;
  border:1px solid rgba(103,124,248,.16);
}
.eyebrow::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 3px rgba(223,255,0,.3); }
h1{ font-size:clamp(2.1rem,5.6vw,4.05rem); font-weight:900; letter-spacing:-.03em; }
h2{ font-size:clamp(1.75rem,4.2vw,2.95rem); font-weight:900; letter-spacing:-.028em; }
h3{ font-size:clamp(1.15rem,2.4vw,1.5rem); font-weight:800; }
.lead{ font-size:clamp(1.1rem,2.4vw,1.4rem); color:var(--ink-soft); font-weight:600; line-height:1.55; }
.muted{ color:var(--ink-soft); }
.hl{ color:var(--blue); font-weight:800; }
.hl-lime{ background:linear-gradient(transparent 58%, var(--lime) 58%); padding:0 .12em; font-weight:800; color:var(--navy); }
.center{ text-align:center; }

/* ---------- Buttons ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.55em; cursor:pointer; border:0;
  font-family:var(--font-h); font-weight:700; font-size:clamp(1rem,2.1vw,1.16rem);
  padding:18px 36px; border-radius:999px; transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s;
  line-height:1.1; text-align:center; overflow:hidden; isolation:isolate;
}
.btn::after{ /* sheen sweep */
  content:""; position:absolute; inset:0; z-index:-1; transform:translateX(-120%);
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
  transition:transform .6s var(--ease);
}
.btn:hover::after{ transform:translateX(120%); }
.btn .arw{ transition:transform .3s var(--ease); }
.btn:hover .arw{ transform:translateX(-6px); }
.btn:active{ transform:translateY(0) scale(.99); }
.btn:focus-visible{ outline:none; box-shadow:var(--ring-blue), var(--shadow-md); }
.btn-primary{ background:var(--navy); color:var(--white); box-shadow:var(--shadow-md); }
.btn-primary:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); background:var(--navy-2); }
.btn-lime{ background:var(--grad-lime); color:var(--navy); box-shadow:var(--shadow-lime); }
.btn-lime:hover{ transform:translateY(-3px); box-shadow:0 20px 46px rgba(200,232,0,.6); }
.btn-blue{ background:var(--grad-blue-deep); color:var(--white); box-shadow:var(--shadow-blue); }
.btn-blue:hover{ transform:translateY(-3px); box-shadow:0 26px 56px rgba(103,124,248,.5); }
.btn-ghost{ background:rgba(255,255,255,.1); color:#fff; border:1.5px solid rgba(255,255,255,.4); }
.btn-ghost:hover{ background:rgba(255,255,255,.18); transform:translateY(-3px); }
.btn-block{ width:100%; }
.btn-lg{ padding:21px 44px; font-size:clamp(1.05rem,2.3vw,1.28rem); }

/* ---------- Cards / surfaces ---------- */
.card{ background:var(--white); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); border:1px solid rgba(103,124,248,.10); transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); }

/* Glass surface (use over gradients / decorative bgs) */
.glass{
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
          backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid var(--glass-brd);
  box-shadow:var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.6);
}
.glass-dark{
  background:var(--glass-bg-dark);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
          backdrop-filter:blur(16px) saturate(1.2);
  border:1px solid var(--glass-brd-dark);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}

/* ---------- Decorative graphic language ---------- */
.grid-bg{
  position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.55;
  background-image:linear-gradient(rgba(103,124,248,.10) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(103,124,248,.10) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(ellipse 72% 62% at 50% 38%,#000,transparent 76%);
          mask-image:radial-gradient(ellipse 72% 62% at 50% 38%,#000,transparent 76%);
}
/* Aurora / mesh glow blobs behind hero & dark sections */
.aurora{ position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; }
.aurora span{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.55; }
.aurora .a1{ width:44vw; height:44vw; background:#b3befff0; top:-12%; inset-inline-start:-8%; animation:float1 18s var(--ease) infinite alternate; }
.aurora .a2{ width:38vw; height:38vw; background:#c9d0ff; bottom:-16%; inset-inline-end:-6%; animation:float2 22s var(--ease) infinite alternate; }
.aurora .a3{ width:22vw; height:22vw; background:rgba(223,255,0,.35); top:32%; inset-inline-end:22%; filter:blur(70px); opacity:.4; animation:float1 26s var(--ease) infinite alternate; }
.aurora.on-dark .a1{ background:rgba(144,159,250,.5); opacity:.5; }
.aurora.on-dark .a2{ background:rgba(103,124,248,.45); }
.aurora.on-dark .a3{ background:rgba(223,255,0,.22); }
@keyframes float1{ to{ transform:translate(6%,8%) scale(1.12); } }
@keyframes float2{ to{ transform:translate(-7%,-6%) scale(1.15); } }

.blob{ position:absolute; z-index:0; pointer-events:none; }
.blossom{ width:220px; height:220px; color:var(--blue-pale); opacity:.9; }
/* Morphing blob */
.morph{ animation:morph 14s ease-in-out infinite; }
@keyframes morph{
  0%,100%{ border-radius:42% 58% 63% 37% / 45% 42% 58% 55%; transform:rotate(0deg); }
  50%{ border-radius:58% 42% 38% 62% / 55% 58% 42% 45%; transform:rotate(8deg); }
}
.spark{ display:inline-block; color:var(--blue); }
.float-el{ position:absolute; z-index:1; pointer-events:none; animation:bob 6s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-14px) rotate(6deg); } }

/* Marquee ticker */
.marquee{ overflow:hidden; white-space:nowrap; padding:15px 0; position:relative; }
.marquee.lime{ background:var(--lime); }
.marquee.blue{ background:var(--grad-blue-deep); }
.marquee.navy{ background:var(--navy); }
.marquee__track{ display:inline-flex; gap:0; animation:scroll 30s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__track span{
  font-family:var(--font-h); font-weight:800; font-size:clamp(1rem,2.4vw,1.5rem);
  padding-inline:24px; display:inline-flex; align-items:center; gap:14px;
}
.marquee.lime .marquee__track span{ color:var(--navy); }
.marquee.blue .marquee__track span, .marquee.navy .marquee__track span{ color:var(--white); }
.marquee .em{ color:var(--blue); }
.marquee.lime .em{ color:var(--blue); }
.marquee.blue .em{ color:var(--lime); }
@keyframes scroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* Section divider (soft wave) */
.wave{ display:block; width:100%; height:auto; }

/* Reveal on scroll */
.reveal{ opacity:0; transform:translateY(30px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; } .reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; }

@media (prefers-reduced-motion:reduce){
  .marquee__track, .aurora span, .morph, .float-el, .btn::after{ animation:none !important; }
  .reveal{ opacity:1; transform:none; transition:none; }
  *{ scroll-behavior:auto !important; }
}