/* Cakeit's "coming soon" site (cakeit.co.il). Design approved by the owner on 19.10.2026. */
  :root {
    --burgundy: #550512;
    --pink: #F7D5E2;
    --lilac: #D0B1EE;
    --light-lilac: #EADCF6;
    --cream: #FDEEE6;
    --text: #2E1A1E;
    --text-soft: #5C4450;
    --drop-in: cubic-bezier(0.55, 0, 1, 0.45);
    --ease-out: cubic-bezier(0, 0, 0.58, 1);
  }
  * { box-sizing: border-box; }
  body { margin: 0; font-family: 'Assistant', system-ui, sans-serif; color: var(--text); background: var(--cream); }

  /* ---------- Hero: lilac → cream ombre, with cherries falling gently (as in the app) ---------- */
  .hero { position: relative; overflow: hidden; padding: 44px 20px 72px; text-align: center; background: linear-gradient(180deg, #D0B1EE 0%, #D0B1EE 40%, #DCC4F0 56%, #EBD8F2 72%, #F7E6EC 87%, #FDEEE6 100%); }
  .rain { position: absolute; inset: 0; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 92%); mask-image: linear-gradient(180deg, #000 45%, transparent 92%); }
  .rain svg { position: absolute; top: -50px; animation: cherryRain linear infinite; }
  @keyframes cherryRain { from { transform: translateY(0) rotate(-14deg); } to { transform: translateY(560px) rotate(22deg); } }
  .hero-inner { position: relative; }

  /* ---------- The cupcake, built like the app's opening ---------- */
  .cupcake-wrap { width: 170px; margin: 0 auto; animation: float 4s ease-in-out 1.6s infinite alternate; }
  @keyframes float { to { transform: translateY(-6px); } }
  .cupcake { position: relative; width: 170px; height: 170px; transform-origin: bottom; animation: fall 350ms both, fadeIn 35ms both; }
  @keyframes fall {
    0% { transform: translateY(-200px); animation-timing-function: var(--drop-in); }
    70% { transform: translateY(0) scale(1, 1); animation-timing-function: var(--ease-out); }
    84% { transform: translateY(0) scale(1.04, 0.95); }
    100% { transform: none; }
  }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
  .cupcake .layer { position: absolute; inset: 0; width: 100%; height: 100%; }
  .sprinkle { position: absolute; border-radius: 50%; overflow: hidden; background: url(assets/sprinkles.png) no-repeat; background-size: 170px 170px; opacity: 0; animation: sprinkleIn 200ms both; }
  @keyframes sprinkleIn {
    0% { opacity: 0; transform: translateY(-20px) scale(1.25) rotate(-25deg); animation-timing-function: cubic-bezier(0.3, 1.5, 0.6, 1); }
    55% { opacity: 1; }
    100% { opacity: 1; transform: none; }
  }
  .nozzle { position: absolute; left: 0; top: 0; width: 30.6px; height: 37.4px; transform-origin: 50% 100%; opacity: 0; pointer-events: none; }
  .cherry { position: absolute; left: 64px; top: 4px; width: 77.4px; height: 60.5px; transform-origin: 50% 90%; opacity: 0; animation: cherryDrop 400ms 880ms both; }
  @keyframes cherryDrop {
    0% { opacity: 0; transform: translateY(-200px); animation-timing-function: var(--drop-in); }
    8% { opacity: 1; }
    35% { transform: translateY(0); animation-timing-function: var(--ease-out); }
    52% { transform: translateY(0) scale(1.08, 0.86); animation-timing-function: var(--ease-out); }
    74% { transform: translateY(-5px) scale(0.98, 1.03); }
    100% { opacity: 1; transform: none; }
  }
  .final { opacity: 0; animation: fadeIn 120ms 1280ms both; }
  .spark { position: absolute; width: 14px; height: 14px; opacity: 0; animation: sparkle 500ms both; }
  @keyframes sparkle {
    0% { opacity: 0; transform: scale(0.2); animation-timing-function: var(--ease-out); }
    40% { opacity: 1; transform: scale(1); animation-timing-function: var(--ease-out); }
    100% { opacity: 0; transform: translateY(-6px) scale(0.6); }
  }
  .shadow { display: block; margin: -8px auto 0; opacity: 0; animation: fadeIn 150ms 220ms both; }

  /* ---------- Text, landing softly one after another ---------- */
  .land { opacity: 0; animation: land 500ms var(--ease-out) both; }
  @keyframes land { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  .wordmark { font-family: 'Caveat', cursive; font-size: 52px; line-height: 1; color: var(--burgundy); margin: 6px 0 16px; animation-delay: 300ms; }
  h1 { font-size: clamp(26px, 5vw, 38px); font-weight: 800; line-height: 1.25; color: var(--burgundy); margin: 0 auto 12px; max-width: 640px; animation-delay: 420ms; }
  .lead { font-size: 18px; line-height: 1.6; margin: 0 auto 6px; max-width: 520px; animation-delay: 540ms; }

  /* ---------- "בקרוב": piped one letter at a time (owner's choice: bubble font, 19.10.2026) ---------- */
  .soon-word { position: relative; display: inline-block; margin: 30px 0 16px; }
  .soon-word .word { margin: 0; font-family: 'Rubik Bubbles', 'Assistant', sans-serif; font-size: 56px; line-height: 1; color: #FFF7F1; -webkit-text-stroke: 2.2px #550512; paint-order: stroke fill; text-shadow: 0 4px 0 rgba(85, 5, 18, 0.16); }
  .soon-word .word span { display: inline-block; opacity: 0; transform-origin: 50% 100%; animation: letterIn 300ms both; }
  @keyframes letterIn {
    0% { opacity: 0; transform: translateY(-14px) scale(0.3); }
    55% { opacity: 1; transform: translateY(0) scale(1.14, 0.88); }
    80% { transform: scale(0.97, 1.04); }
    100% { opacity: 1; transform: none; }
  }
  .bag { position: absolute; top: -32px; left: 0; width: 28px; height: 34px; margin-left: -14px; opacity: 0; transform-origin: 50% 100%; transition: left 120ms ease-in-out, opacity 120ms, transform 220ms ease-in; }
  .bag.on { opacity: 1; animation: bagWobble 140ms ease-in-out infinite alternate; }
  @keyframes bagWobble { from { transform: rotate(-7deg); } to { transform: rotate(7deg) translateY(3px); } }
  .bag.gone { opacity: 0; animation: none; transform: translate(-10px, -18px) rotate(-22deg); }
  .stores { display: flex; justify-content: center; gap: 10px; animation-delay: 1300ms; }
  .store { display: inline-flex; align-items: center; gap: 7px; color: var(--burgundy); font-weight: 700; font-size: 15px; padding: 8px 15px 8px 13px; border-radius: 999px; white-space: nowrap; background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(255, 255, 255, 0.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 6px 18px rgba(85, 5, 18, 0.10); }
  .store svg { width: 22px; height: 22px; flex: none; }
  @media (max-width: 340px) { .store { font-size: 14px; padding: 6px 10px; } .stores { gap: 6px; } }

  /* ---------- Features: each its own colour and a small live picture, revealed while scrolling ---------- */
  main { max-width: 760px; margin: 0 auto; padding: 8px 20px 48px; overflow-x: hidden; overflow-x: clip; } /* the cards slide in from the sides without widening the page */
  .section-title { text-align: center; font-size: 26px; font-weight: 800; color: var(--burgundy); margin: 4px 0 22px; }
  .feature { display: flex; align-items: center; gap: 20px; border: 1px solid; border-radius: 24px; padding: 18px; margin: 0 0 18px; }
  .slot:nth-of-type(even) .feature { flex-direction: row-reverse; }
  .f-cal { background: #F2E8FC; border-color: #E4D2F6; }
  .f-price { background: #FDE7EF; border-color: #F7D0DE; }
  .f-profit { background: #FFEBDD; border-color: #F8D6BF; }
  .f-scan { background: #FFF5DE; border-color: #F2E0B0; }
  .illo { position: relative; flex: none; width: 190px; height: 132px; border-radius: 18px; background: rgba(255, 255, 255, 0.7); overflow: hidden; display: flex; align-items: center; justify-content: center; }
  /* The picture is drawn at one size and scaled down on phones, so it looks the same everywhere. */
  .art { position: relative; flex: none; width: 190px; height: 132px; display: flex; align-items: center; justify-content: center; }
  .feature h3 { font-size: 21px; font-weight: 800; color: var(--burgundy); margin: 0 0 4px; }
  .feature p { font-size: 16px; line-height: 1.55; color: var(--text-soft); margin: 0; }
  @media (max-width: 540px) {
    main { padding-left: 14px; padding-right: 14px; }
    .feature { padding: 14px; gap: 12px; }
    .illo { width: 120px; height: 100px; }
    .art { transform: scale(0.62); }
    .feature h3 { font-size: 18px; }
    .feature p { font-size: 14.5px; }
  }
  @media (max-width: 360px) {
    .illo { width: 96px; height: 84px; }
    .art { transform: scale(0.5); }
    .feature h3 { font-size: 17px; }
    .feature p { font-size: 14px; }
  }
  .reveal { opacity: 0; transform: translateY(28px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
  .reveal.in { opacity: 1; transform: none; }
  /* Cards fly in from outside the screen: the first from the right, the next from the left, and so on. */
  .slot .feature.reveal { transition: opacity 500ms var(--ease-out), transform 850ms cubic-bezier(0.2, 0.9, 0.3, 1.08); }
  .slot:nth-of-type(odd) .feature.reveal { transform: translateX(115%); }
  .slot:nth-of-type(even) .feature.reveal { transform: translateX(-115%); }
  .slot:nth-of-type(n) .feature.reveal.in { opacity: 1; transform: none; }

  /* 1. The calendar: orders appear on the days one after another, then today is marked */
  .cal { position: relative; width: 156px; background: #fff; border-radius: 12px; box-shadow: 0 4px 12px rgba(85, 5, 18, 0.08); overflow: hidden; }
  .cal-head { background: var(--burgundy); color: #fff; font-size: 12px; font-weight: 700; text-align: center; padding: 4px 0; }
  .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; padding: 6px; }
  .cal-grid i { position: relative; height: 15px; border-radius: 4px; background: #F6EEFB; font-style: normal; font-size: 8px; color: #9C8AA8; display: flex; align-items: flex-start; justify-content: flex-end; padding: 1px 2px; outline: 2px solid transparent; }
  .cal-grid i b { position: absolute; left: 3px; bottom: 3px; width: 7px; height: 7px; border-radius: 50%; transform: scale(0); }
  .feature.in .cal-grid i b { animation: dotPop 320ms both; }
  @keyframes dotPop { 0% { transform: scale(0); } 70% { transform: scale(1.35); } 100% { transform: scale(1); } }
  .feature.in .cal-grid i.today { animation: todayRing 500ms 1500ms both; }
  @keyframes todayRing { to { outline-color: #550512; background: #FBD6DF; } }
  /* A little mouse pointer walks between the days and "clicks" on orders */
  .cursor { position: absolute; left: 0; top: 0; width: 14px; height: 18px; opacity: 0; pointer-events: none; z-index: 2; transition: transform 550ms cubic-bezier(0.45, 0, 0.25, 1), opacity 300ms; filter: drop-shadow(0 1px 1px rgba(85, 5, 18, 0.25)); }
  .cursor.on { opacity: 1; }
  .cursor svg { display: block; width: 100%; height: 100%; transform-origin: 0 0; transition: transform 120ms; }
  .cursor.press svg { transform: scale(0.8); }
  .ripple { position: absolute; left: 0; top: 0; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 2px solid #E58BB0; opacity: 0; pointer-events: none; z-index: 1; }
  .ripple.go { animation: ripple 450ms ease-out; }
  @keyframes ripple { from { opacity: 0.9; transform: scale(0.3); } to { opacity: 0; transform: scale(1.4); } }
  .cal-grid i.hit { background: #FBD6DF; transition: background 200ms; }

  /* 2. Recipe pricing: prices float up out of the cupcake, then the cost appears */
  .price-cup { width: 70px; height: 70px; margin-top: 18px; }
  .tag { position: absolute; bottom: 52px; background: #fff; color: var(--burgundy); font-weight: 800; font-size: 13px; padding: 3px 8px; border-radius: 999px; box-shadow: 0 3px 8px rgba(85, 5, 18, 0.12); opacity: 0; white-space: nowrap; }
  .feature.in .tag { animation: priceUp 2400ms ease-out infinite; }
  @keyframes priceUp { 0% { opacity: 0; transform: translateY(10px) scale(0.8); } 18% { opacity: 1; transform: translateY(0) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-58px) scale(0.95); } }
  .total { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); background: var(--burgundy); color: #fff; font-weight: 700; font-size: 12px; padding: 3px 10px; border-radius: 999px; white-space: nowrap; opacity: 0; }
  .feature.in .total { animation: fadeIn 400ms 1200ms both; }

  /* 3. Profit: the line goes up and down, arrows show it, and "+60 ₪" rises at the end */
  .chart { width: 170px; height: 110px; }
  .chart .line { fill: none; stroke: var(--burgundy); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 230; stroke-dashoffset: 230; }
  .feature.in .chart .line { animation: drawLine 1400ms 200ms ease-in-out forwards; }
  @keyframes drawLine { to { stroke-dashoffset: 0; } }
  .chart .arrow { opacity: 0; }
  .feature.in .chart .arrow { animation: arrowIn 400ms both; }
  @keyframes arrowIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  .plus { position: absolute; top: 10px; left: 14px; background: #E6F4EC; color: #1F7A4A; font-weight: 800; font-size: 15px; padding: 3px 10px; border-radius: 999px; opacity: 0; direction: ltr; }
  .feature.in .plus { animation: plusUp 2600ms 1500ms ease-out infinite; }
  @keyframes plusUp { 0% { opacity: 0; transform: translateY(14px); } 20% { opacity: 1; transform: none; } 80% { opacity: 1; transform: translateY(-4px); } 100% { opacity: 0; transform: translateY(-12px); } }

  /* 4. Receipt scanning: like the app — a scan line runs up and down and the lines light up */
  .paper { position: relative; width: 92px; height: 116px; background: #fff; border: 1px solid #EADCF6; border-radius: 5px; padding: 10px 9px; display: flex; flex-direction: column; gap: 7px; overflow: hidden; box-shadow: 0 6px 16px rgba(85, 5, 18, 0.08); }
  .paper i { display: block; height: 7px; border-radius: 4px; background: #EADCF6; }
  .feature.in .paper i { animation: lineLit 2400ms linear infinite; }
  @keyframes lineLit { 0%, 100% { background: #EADCF6; } 6%, 18% { background: #B48BE3; } 30% { background: #EADCF6; } }
  .scanbar { position: absolute; left: 0; right: 0; top: 8%; height: 3px; background: #B48BE3; box-shadow: 0 0 12px 4px rgba(180, 139, 227, 0.55); opacity: 0; }
  .feature.in .scanbar { opacity: 1; animation: scan 1200ms ease-in-out infinite alternate; }
  @keyframes scan { from { top: 6%; } to { top: 92%; } }
  .found { position: absolute; bottom: 10px; right: 10px; background: #fff; color: var(--burgundy); font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; box-shadow: 0 3px 8px rgba(85, 5, 18, 0.12); opacity: 0; }
  .feature.in .found { animation: fadeIn 400ms 1600ms both; }

  .contact { text-align: center; margin: 36px 0 0; font-size: 17px; }
  .contact a { color: var(--burgundy); font-weight: 700; }
  footer { text-align: center; font-size: 13px; color: var(--text-soft); padding: 20px 20px 28px; border-top: 1px solid var(--light-lilac); }
  .legal { font-size: 11px; line-height: 1.5; margin: 8px auto 0; max-width: 560px; }

  /* "Reduce motion": everything shown finished, nothing moves (as in the app) */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .land, .final, .reveal, .soon-word .word span, .total, .found, .chart .arrow { opacity: 1; transform: none; }
    .rain, .layer:not(.final), .sprinkle, .cherry, .nozzle, .spark, .bag, .tag, .plus, .scanbar, .cursor, .ripple { display: none; }
    .shadow { opacity: 1; }
    .cal-grid i b { transform: none; }
    .chart .line { stroke-dashoffset: 0; }
  }