/* ללילק · pop-art sticker board on lilac. The logo in double lines (like her watermark), die-cut
   photo stickers, five pop decals that slap on, two tracks (nails / courses), and reviews written
   on coffin press-on nails in a tray. Only transform + opacity move. No gradients between colours. */

:root {
  --bg: #AE94F1;
  --surface: #F4EFFF;
  --ink: #291A23;
  --muted: #3B2A45;
  --primary: #4ED0C3;
  --primary-ink: #291A23;
  --soft: #D6C8FA;
  --accent: #F3B1A5;
  --chrome: #3C52B8;
  --purple: #756BB2;
  --sun: #EFCB5B;
  --pink: #F4A5DE;
  --line: #291A23;
  --brand-text: var(--ink);
  --focus: #291A23;
  --radius: 20px;
  --font-head: "Rubik Lines", "Fredoka Variable", sans-serif;
  --font-body: "Fredoka Variable", system-ui, sans-serif;
  --logo: clamp(5.5rem, 3rem + 11vw, 11rem);
  --h2: clamp(3rem, 2rem + 4.5vw, 5.5rem);
  --dots: radial-gradient(circle, rgb(41 26 35 / .14) 2.2px, transparent 2.6px) 0 0 / 14px 14px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.65;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p, figure, blockquote, h1, h2, h3, ul { margin: 0; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip-link { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 50; padding: .6rem 1rem; border: 3px solid var(--line); border-radius: 999px; background: var(--surface); font-weight: 600; }
.skip-link:focus { top: 12px; }
.wrap { max-width: 1272px; margin-inline: auto; padding-inline: 16px; }

/* ---------- Paint for the decals ---------- */
.p-white { fill: #fff; }
.p-ink { fill: var(--ink); }
.p-chrome { fill: var(--chrome); }
.p-pink { fill: var(--pink); }
.p-turq { fill: var(--primary); }
.p-sun { fill: var(--sun); }
.p-ray1 { stroke: var(--primary); }
.p-ray2 { stroke: var(--sun); }
.p-ray3 { stroke: var(--pink); }
.ink { stroke: var(--line); stroke-width: 3; stroke-linejoin: round; }
.ink-line { fill: none; stroke-width: 5; stroke-linecap: round; }

/* ---------- Building blocks ---------- */
.dots { background: var(--dots); -webkit-mask-image: linear-gradient(135deg, #000 0 35%, transparent 70%); mask-image: linear-gradient(135deg, #000 0 35%, transparent 70%); }
.sticker {
  padding: 8px;
  border: 3px solid var(--line);
  border-radius: 24px;
  background: #fff;
  box-shadow: 5px 6px 0 rgb(41 26 35 / .9);
  rotate: var(--r, 0deg);
}
.sticker img { border-radius: 14px; }
/* The "sticker" button: paper face, plum outline, a hard shadow; turquoise slides in like a brush of polish. */
body .k-btn--sticker {
  --k-outline-ink: var(--ink);
  --k-outline-fill: var(--primary);
  border: 3px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 4px 4px 0 var(--line);
  font-weight: 600;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  body .k-btn--sticker:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--line); }
}
@media (prefers-reduced-motion: no-preference) {
  body .k-btn--sticker { transition: transform 200ms var(--k-ease), box-shadow 200ms var(--k-ease); }
  body .k-btn--sticker:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--line); }
}
.k-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

/* ---------- Banner + floating pill header ---------- */
.demo-banner { padding: .5rem 16px; background: var(--ink); color: var(--bg); font-size: .875rem; line-height: 1.5; }
.pill {
  position: sticky;
  top: 10px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  margin: 10px 10px 0;
  padding: 0 14px 0 6px;
  border: 3px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 3px 3px 0 var(--line);
}
body .pill.is-hidden { transform: translateY(calc(-100% - 14px)); }
.pill__logo { margin-inline-end: auto; font-family: var(--font-head); font-size: 26px; line-height: 1; text-decoration: none; }
.pill__nav { display: none; }
.pill .k-btn--outline { border-width: 2px; }

/* ---------- Hero ---------- */
.hero { position: relative; padding: 28px 16px 64px; }
.hero__dots { position: absolute; top: 0; left: 0; width: 60%; height: 320px; pointer-events: none; }
.hero__grid { position: relative; max-width: 1240px; margin-inline: auto; }
.logo-word { font-family: var(--font-head); font-size: var(--logo); line-height: .95; }
.eyebrow { display: inline-block; margin-top: 14px; padding: 3px 14px; border: 2px solid var(--line); border-radius: 999px; background: var(--primary); font-size: .9375rem; font-weight: 600; }
.hero__title { margin-top: 14px; font-size: clamp(1.875rem, 1.3rem + 2.6vw, 3.25rem); font-weight: 700; line-height: 1.15; }
.hero__lead { margin-top: 12px; }
.hero__actions { display: grid; justify-items: start; gap: 8px; margin-top: 24px; }
.hero__actions .k-btn { justify-self: stretch; }
.board { position: relative; height: 380px; margin-top: 28px; }
.board__photo { --r: -4deg; position: absolute; left: 6px; top: 22px; width: 248px; }
.board__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 52%; }
.decal { position: absolute; width: 74px; height: 74px; rotate: var(--r); pointer-events: none; overflow: visible; filter: drop-shadow(3px 3px 0 rgb(41 26 35 / .85)); }
.decal--eye { --r: -12deg; right: 4px; top: 6px; width: 84px; height: 84px; }
.decal--check { --r: 9deg; right: 22px; top: 140px; }
.decal--drip { --r: -6deg; right: 0; top: 256px; width: 70px; height: 70px; }
.decal--flame { --r: 14deg; left: -6px; top: 300px; width: 70px; height: 70px; }
.decal--bolt { --r: -10deg; left: 196px; top: 318px; width: 64px; height: 64px; }
.badge {
  --r: 8deg;
  position: absolute;
  left: 196px;
  top: 0;
  display: grid;
  place-content: center;
  width: 84px;
  height: 84px;
  border: 3px solid var(--line);
  border-radius: 50%;
  background: var(--primary);
  rotate: var(--r);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1;
  text-align: center;
}
.badge b { font-size: 1.5rem; font-weight: 700; }

/* ---------- Sections ---------- */
.section { padding-block: 64px; }
.h2 { font-family: var(--font-head); font-size: var(--h2); font-weight: 400; line-height: 1; }
.h3 { font-size: 1.625rem; font-weight: 700; line-height: 1.2; }
.sub { margin-top: 10px; font-size: 1.125rem; }

/* עבודות */
.collage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 28px;
  padding: 0 0 28px;
  list-style: none;
}
.work { position: relative; }
.work:nth-child(even) { margin-top: 28px; margin-bottom: -28px; }
.work a { display: block; border-radius: 14px; }
.work img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.work--chrome { --r: -3deg; }
.work--chrome img, .work--brows img { aspect-ratio: 4 / 5; object-position: 50% 45%; }
.work--flames { --r: 2deg; }
.work--brows { --r: -1.5deg; }
.work--lashes { --r: 3deg; }
.work--before { --r: -2deg; }
.tag {
  position: absolute;
  top: -12px;
  inset-inline-start: 10px;
  padding: 2px 10px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: var(--primary);
  rotate: -6deg;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.2;
  pointer-events: none;
}
.tag--peach { background: var(--accent); }

/* שני מסלולים */
.paths { display: grid; gap: 24px; max-width: 1240px; margin: 28px auto 0; padding-inline: 16px; }
.path {
  --r: -1.5deg;
  padding: 26px 22px;
  border: 3px solid var(--line);
  border-radius: 24px;
  background: var(--primary);
  box-shadow: 5px 6px 0 var(--line);
  rotate: var(--r);
}
.path--learn { --r: 1.5deg; background: var(--purple); color: #fff; }
.path__list { margin-top: 12px; padding: 0; list-style: none; }
.path__list li { display: flex; align-items: center; gap: 10px; }
.path__list li::before { content: ""; flex: none; width: 10px; height: 10px; border: 2px solid var(--line); border-radius: 50%; background: var(--surface); }
.path p { margin-top: 12px; }
.path .k-btn { margin-top: 22px; }
.path--learn .k-btn--sticker { color: var(--ink); }
.path--learn :focus-visible { outline-color: #fff; }

/* מה אומרות: coffin press-ons in a tray */
.score { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-weight: 600; }
.score__stars { display: inline-flex; gap: 2px; }
.score__stars svg { width: 16px; height: 16px; }
.tray { margin-top: 24px; padding: 16px; border: 3px solid var(--line); border-radius: 28px; background: var(--surface); }
.nails { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 0; list-style: none; }
.nail {
  min-height: 210px;
  padding: 3px;
  background: var(--line);
  clip-path: polygon(16% 0, 84% 0, 100% 100%, 0 100%);
  display: grid;
}
.nail--wide { grid-column: 1 / -1; min-height: 190px; }
.nail__in {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin: 0;
  padding: 34px 9% 16px;
  clip-path: polygon(16% 0, 84% 0, 100% 100%, 0 100%);
  background: var(--c);
  text-align: center;
}
.nail--wide .nail__in { padding-inline: 10%; }
.nail__in::before { content: ""; position: absolute; top: 0; left: 18%; width: 40%; height: 40%; background: var(--dots); -webkit-mask-image: linear-gradient(160deg, #000, transparent 75%); mask-image: linear-gradient(160deg, #000, transparent 75%); }
.nail__in p { position: relative; font-size: 1rem; font-weight: 500; line-height: 1.45; }
.nail__in footer { position: relative; margin-top: 10px; font-size: .8125rem; font-weight: 700; }
.nail--turq { --c: var(--primary); }
.nail--pink { --c: var(--pink); }
.nail--sun { --c: var(--sun); }
.nail--peach { --c: var(--accent); }
.more { margin-top: 18px; }

/* באינסטגרם */
.insta { --focus: var(--primary); padding-block: 64px; background: var(--ink); color: var(--bg); }
.insta__grid { position: relative; display: grid; gap: 12px; }
.insta__big { font-family: var(--font-head); font-size: 120px; line-height: .9; }
.insta__title { color: var(--primary); font-size: 1.25rem; font-weight: 600; }
.insta__text .k-btn { margin-top: 20px; }
.insta__decals { position: absolute; inset: 0; pointer-events: none; }
.insta .decal { width: 60px; height: 60px; filter: none; }
.decal--a { --r: 12deg; left: 8px; top: 0; }
.decal--b { --r: -8deg; left: 90px; top: 48px; }
.decal--c { --r: 6deg; left: 20px; bottom: 6px; }

/* איפה */
.where { --r: -1deg; max-width: 560px; padding: 26px 22px; border: 3px solid var(--line); border-radius: 24px; background: var(--surface); box-shadow: 5px 6px 0 var(--line); rotate: var(--r); }
.where__addr { margin: 12px 0 6px; font-size: 1.375rem; font-weight: 600; }
.where__nav { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }

/* ---------- Footer + dock ---------- */
.site-footer { padding: 28px 0 36px; border-top: 3px solid var(--line); background: var(--surface); font-size: .9375rem; }
.site-footer p + p { margin-top: 6px; }
.site-footer a { display: inline-block; min-height: 24px; }
.dock {
  position: fixed;
  inset-inline: 12px;
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 35;
  display: flex;
  gap: 8px;
  padding: 8px 10px 10px;
  border: 3px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 3px 3px 0 var(--line);
}
.dock > * { flex: 1 1 0; }
.dock .k-btn--sticker { box-shadow: none; }
.dock.is-hidden { visibility: hidden; opacity: 0; transform: translateY(calc(100% + 24px)); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .dock { transition: transform 420ms cubic-bezier(.16, 1, .3, 1), opacity 300ms ease, visibility 0s; }
  .dock.is-hidden { transition: transform 420ms cubic-bezier(.16, 1, .3, 1), opacity 300ms ease, visibility 0s 420ms; }
}
@media (prefers-reduced-motion: reduce) { .dock.is-hidden { transform: none; } }
@media (max-width: 899px) { body { padding-bottom: 92px; } }
@media (min-width: 900px) { .dock { display: none; } }

/* ---------- Tablet ---------- */
@media (min-width: 768px) {
  .nails { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .nail--wide { grid-column: span 2; }
}

/* ---------- Desktop ---------- */
@media (min-width: 1024px) {
  .pill { width: 760px; height: 60px; margin-inline: 16px auto; padding-inline: 20px 10px; }
  .pill__nav { display: flex; gap: 22px; margin-inline-end: 12px; }
  .pill__nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 1rem; font-weight: 600; text-decoration: none; }
  .pill__nav a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
  .pill__logo { margin-inline-end: 24px; }
  .pill__btn { margin-inline-start: auto; }

  .hero { padding-block: 40px 96px; }
  .hero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; align-items: center; }
  .hero__text { grid-column: 1 / 8; }
  .hero__title { max-width: 18ch; }
  .hero__lead { max-width: 52ch; }
  .hero__actions { display: flex; align-items: center; gap: 24px; }
  .hero__actions .k-btn--block { width: auto; }
  .board { grid-column: 8 / 13; height: 640px; margin-top: 0; }
  .board__photo { left: 44px; top: 60px; width: 400px; }
  .badge { left: 370px; top: 20px; width: 96px; height: 96px; }
  .decal { width: 92px; height: 92px; }
  .decal--eye { right: auto; left: -6px; top: 0; width: 100px; height: 100px; }
  .decal--check { right: auto; left: 420px; top: 300px; }
  .decal--drip { right: auto; left: -8px; top: 400px; }
  .decal--flame { left: 30px; top: 560px; }
  .decal--bolt { left: 380px; top: 560px; }

  .section { padding-block: 104px; }
  .collage { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px 20px; padding-bottom: 60px; }
  .work:nth-child(even) { margin: 0; }
  .work--chrome { grid-column: 1 / 6; grid-row: 1; }
  .work--flames { grid-column: 6 / 10; grid-row: 1; margin: 60px -16px 0 0; z-index: 1; }
  .work--brows { grid-column: 10 / 13; grid-row: 1; margin-inline-start: -16px; }
  .work--lashes { grid-column: 7 / 12; grid-row: 2; margin-top: -40px; }
  .work--before { grid-column: 2 / 7; grid-row: 2; }

  .paths { grid-template-columns: 1fr 1fr; gap: 0; max-width: none; padding: 0; }
  .path { display: grid; place-items: center; min-height: 520px; border-width: 3px 0; border-radius: 0; box-shadow: none; rotate: none; }
  .path--learn { border-inline-start: 3px solid var(--line); }
  .path__in { max-width: 440px; }
  .h3 { font-size: 2.125rem; }
  @media (hover: hover) {
    .paths .path { transition: opacity 300ms var(--k-ease); }
    .paths:has(.path:hover, .path:focus-within) .path:not(:hover, :focus-within) { opacity: .82; }
  }
  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .path__in { transition: transform 300ms var(--k-ease); }
    .path:hover .path__in, .path:focus-within .path__in { transform: scale(1.03); }
  }

  .tray { margin-inline: 8.33%; padding: 28px; }
  .nails { grid-template-columns: repeat(8, minmax(0, 1fr)); align-items: end; }
  .nail { grid-column: span 2; }
  .nail--wide { grid-column: span 4; min-height: 230px; }
  .nail:nth-child(3) { min-height: 240px; }
  .nail:nth-child(4) { min-height: 215px; }
  .nail:nth-child(5) { min-height: 200px; }
  .nail:nth-child(6) { min-height: 225px; }
  .nail__in p { font-size: 1.125rem; }

  .insta { padding-block: 104px; }
  .insta__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; align-items: center; }
  .insta__big { grid-column: 1 / 7; font-size: 200px; }
  .insta__text { grid-column: 8 / 13; }
  .insta__title { font-size: 1.5rem; }
  .insta .decal { width: 84px; height: 84px; }
  .decal--a { left: 30px; top: -10px; }
  .decal--b { left: 180px; top: 60px; }
  .decal--c { left: 60px; bottom: -20px; }
}

/* =====================================================================
   Motion. Hero decals: pure CSS from the first paint ("slap": big and
   twisted, then stuck). Below the fold: start states only under
   html.k-motion. Reduced motion: every sticker already in place.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .hero .decal, .badge { animation: slap 380ms var(--k-spring) both; }
  .decal--eye { animation-delay: 150ms; }
  .decal--check { animation-delay: 230ms; }
  .decal--drip { animation-delay: 310ms; }
  .decal--flame { animation-delay: 390ms; }
  .decal--bolt { animation-delay: 470ms; }
  .badge { animation: slap-badge 400ms var(--k-spring) 600ms both; }

  .k-motion .insta__decals:not(.is-in) .decal { opacity: 0; transform: scale(1.3) rotate(8deg); }
  .k-motion .insta__decals.is-in .decal { animation: slap 380ms var(--k-spring) both; }
  .k-motion .insta__decals.is-in .decal--b { animation-delay: 80ms; }
  .k-motion .insta__decals.is-in .decal--c { animation-delay: 160ms; }
}
@keyframes slap { from { opacity: 0; transform: scale(1.3) rotate(8deg); } }
@keyframes slap-badge { from { opacity: 0; transform: scale(.5); } }

/* ---------- Accessibility statement + 404 ---------- */
.page-body .page { max-width: 720px; margin: 32px auto; padding: 28px 22px; border: 3px solid var(--line); border-radius: 24px; background: var(--surface); box-shadow: 5px 6px 0 var(--line); }
.page h1 { font-family: var(--font-head); font-size: 3rem; font-weight: 400; line-height: 1; }
.page h2 { margin-top: 24px; font-size: 1.25rem; font-weight: 700; }
.page ul { padding-inline-start: 1.2em; }
.page p { margin-top: 10px; }
.page a { display: inline-block; min-height: 24px; font-weight: 600; }
@media (max-width: 760px) { .page-body .page { margin: 16px; } }