@font-face { font-family: Rubik; src: url('/fonts/rubik-hebrew.woff2') format('woff2'); font-weight: 300 900; font-display: swap; unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: Rubik; src: url('/fonts/rubik-latin.woff2') format('woff2'); font-weight: 300 900; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }

:root {
  --bg: #fbf7fb; --paper: #fff; --ink: #2d1f3d; --muted: #6a5b75; --line: #ece2ee; --primary: #7a4488; --deep: #5f3269; --tint: #f0e4f4;
  --green: #1f7a55; --green-tint: #dff3ea; --blue: #2869b4; --blue-tint: #dfebfb; --rose: #f7d9e0;
  --hero: linear-gradient(125deg, #43204f 0%, #653577 55%, #875092 100%);
  color-scheme: light dark;
  scrollbar-color: color-mix(in srgb, var(--muted) 40%, transparent) transparent;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17131f; --paper: #221c2e; --ink: #f1ecf6; --muted: #b0a7bc; --line: #352d44; --primary: #c9a0d9; --deep: #dcbde8; --tint: #3b2a48;
    --green: #7fd3ad; --green-tint: #1d3a30; --blue: #86b6ee; --blue-tint: #1f3353; --rose: #4a2a36;
    --hero: linear-gradient(125deg, #2a1533 0%, #472755 55%, #643c70 100%);
  }
}

* { box-sizing: border-box; scrollbar-width: thin; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.65 Rubik, system-ui, 'Segoe UI', Arial, sans-serif; overflow-x: hidden; }
h1, h2, h3, p { margin: 0; }
h1, h2 { font-weight: 600; letter-spacing: -.01em; line-height: 1.18; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; border-radius: 6px; }
.hero :focus-visible, .privacy :focus-visible, .finder :focus-visible { outline-color: #fff; }
.sprite { position: absolute; width: 0; height: 0; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.btn { display: inline-block; padding: 14px 30px; border-radius: 16px; font-weight: 600; text-decoration: none; transition: transform .16s ease, box-shadow .16s ease, background .16s ease; }
.btn:hover { transform: translateY(-2px); }
.btn.solid { background: #fff; color: #4f2a5f; box-shadow: 0 10px 28px rgba(30, 10, 40, .28); }
.btn.ghost { color: #fff; border: 1.5px solid rgba(255, 255, 255, .6); }
.btn.ghost:hover { background: rgba(255, 255, 255, .12); }
.btn.primary { background: #6c3a7b; color: #fff; box-shadow: 0 10px 26px rgba(95, 50, 105, .3); }

/* Hero */
.hero { position: relative; overflow: hidden; color: #fff; background: var(--hero); padding-bottom: 96px; }
.glow { position: absolute; border-radius: 50%; opacity: .42; pointer-events: none; will-change: transform; animation: drift 18s ease-in-out infinite alternate; }
.glow.one { width: 640px; height: 640px; background: radial-gradient(closest-side, #e0a3c0, transparent); top: -240px; inset-inline-end: 2%; }
.glow.two { width: 560px; height: 560px; background: radial-gradient(closest-side, #6fa8d6, transparent); bottom: -170px; inset-inline-start: -4%; animation-delay: -7s; }
@keyframes drift { to { transform: translate(40px, 30px) scale(1.14); } }

.bar { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 16px; max-width: 1120px; margin: auto; padding: 20px 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 1.1rem; text-decoration: none; }
.brand img { border-radius: 10px; }
.bar nav { display: flex; gap: 20px; font-size: .95rem; }
.bar nav a { text-decoration: none; }
.bar nav a:hover { text-decoration: underline; text-underline-offset: 4px; }

.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 40px; max-width: 1120px; margin: auto; padding: 44px 24px 40px; }
.hero h1 { font-size: clamp(2.2rem, 5vw, 3.7rem); }
.hero-text > p { margin-top: 18px; max-width: 32em; font-size: 1.16rem; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-text small { display: block; margin-top: 16px; font-size: .9rem; }

/* The phone is an illustration of the app, so its text is hidden from screen readers. */
.stage { position: relative; justify-self: center; }
.phone { width: 268px; padding: 10px; border-radius: 40px; background: #1d1426; box-shadow: 0 34px 70px rgba(20, 5, 30, .5); animation: float 7s ease-in-out infinite alternate; }
@keyframes float { to { transform: translateY(-14px); } }
.screen { display: grid; gap: 10px; padding: 18px 13px 16px; border-radius: 31px; background: #fbf7fb; color: #2d1f3d; font-size: .8rem; line-height: 1.35; }
.s-top { display: flex; justify-content: space-between; align-items: baseline; padding-inline: 3px; }
.s-top b { font-size: 1.06rem; font-weight: 600; }
.s-top span { color: #6a5b75; }
.s-card { display: grid; gap: 6px; padding: 12px; border-radius: 16px; background: #fff; box-shadow: 0 1px 4px rgba(43, 33, 64, .1); }
.s-card.green { background: #dff3ea; box-shadow: none; }
.s-card strong { font-size: .95rem; font-weight: 600; }
.s-card small { color: #6a5b75; font-size: .72rem; }
.row { display: flex; align-items: center; gap: 7px; }
.box { width: 15px; height: 15px; border-radius: 5px; border: 1.5px solid #1f7a55; }
.box.on { background: #1f7a55; }
.pill { justify-self: start; padding: 2px 9px; border-radius: 99px; background: #fdf0d6; color: #955805; font-size: .72rem; font-weight: 600; }
.s-times { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.s-times span { display: grid; justify-items: center; gap: 2px; padding: 8px 0; border-radius: 12px; background: #f0e4f4; color: #5f3269; font-weight: 600; font-size: .78rem; }
.s-times svg { width: 15px; height: 15px; }
.ping { position: absolute; bottom: 72px; inset-inline-end: -66px; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 16px; background: #fff; color: #2d1f3d; font-size: .82rem; line-height: 1.3; white-space: nowrap; box-shadow: 0 16px 36px rgba(20, 5, 30, .36); animation: float 6s ease-in-out -3s infinite alternate; }
.ping svg { width: 19px; height: 19px; color: #7a4488; }
.ping b { display: block; font-weight: 600; }

.waves { position: absolute; inset-inline: 0; bottom: -1px; width: 100%; height: 84px; }
.w { fill: var(--bg); }
.w.back { opacity: .36; animation: tide 16s ease-in-out infinite alternate; }
.w.front { animation: tide 22s ease-in-out -6s infinite alternate-reverse; }
@keyframes tide { to { transform: translateX(-90px); } }

/* Sections */
main { max-width: 1120px; margin: auto; padding: 18px 24px 0; }
.block { padding-block: 42px; }
.block > h2, .closing h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 26px; }
.tile { padding: 24px; border-radius: 24px; background: var(--paper); border: 1px solid var(--line); transition: transform .2s ease, box-shadow .2s ease; }
.tile:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(60, 30, 80, .1); }
.tile.wide { grid-column: span 3; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: 28px; }
.tile h3 { margin-top: 14px; font-size: 1.18rem; font-weight: 600; }
.tile p { margin-top: 6px; color: var(--muted); }
.ico { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; background: var(--tint); color: var(--deep); }
.ico svg { width: 23px; height: 23px; }
.ico.green { background: var(--green-tint); color: var(--green); }
.ico.blue { background: var(--blue-tint); color: var(--blue); }
.ico.light { background: rgba(255, 255, 255, .16); color: #fff; }

.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal i { aspect-ratio: 1; display: grid; place-items: center; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); color: var(--green); font-style: normal; font-size: .76rem; font-weight: 600; }
.cal .n { background: var(--rose); border-color: transparent; }
.cal .c { background: var(--green-tint); border-color: transparent; }
.cal .m { background: var(--blue-tint); border-color: var(--blue); }
.cal .h { box-shadow: inset 0 0 0 2px #c98a1e; }

.finder, .privacy { border-radius: 30px; padding: 40px; color: #fff; }
.finder { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; gap: 30px; background: linear-gradient(130deg, #54306b 0%, #66478f 55%, #3f6f96 100%); }
.finder h2, .privacy h2 { margin-top: 14px; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.finder p, .privacy p { margin-top: 10px; max-width: 34em; }
.finder .btn { margin-top: 22px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.chips li { padding: 9px 18px; border-radius: 99px; background: rgba(255, 255, 255, .15); border: 1px solid rgba(255, 255, 255, .4); font-weight: 500; }

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 26px 0 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { counter-increment: step; padding: 24px; border-radius: 24px; border: 1px solid var(--line); background: var(--paper); }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--tint); color: var(--deep); font-weight: 700; }
.steps h3 { margin-top: 12px; font-size: 1.14rem; font-weight: 600; }
.steps p { margin-top: 4px; color: var(--muted); }
.note { margin-top: 18px; color: var(--muted); }

.privacy { background: linear-gradient(130deg, #3b1d47 0%, #5a3069 100%); text-align: center; }
.privacy .ico { margin-inline: auto; }
.privacy p { margin-inline: auto; }
.privacy a { display: inline-block; margin-top: 14px; font-weight: 600; }

.closing { display: grid; justify-items: center; gap: 22px; padding: 64px 0 30px; text-align: center; }
.closing p { max-width: 40em; color: var(--muted); font-size: .92rem; }

.foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; padding: 18px 20px 26px; color: var(--muted); font-size: .86rem; }

/* Sections rise into place as they scroll in, where the browser can do it without a script. */
@supports (animation-timeline: view()) {
  .reveal { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  @keyframes rise { from { opacity: 0; transform: translateY(26px); } }
}

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 46px; padding-top: 22px; }
  .hero { padding-bottom: 84px; }
  .ping { inset-inline-end: -28px; }
  .bento, .steps { grid-template-columns: minmax(0, 1fr); }
  .tile.wide { grid-column: auto; grid-template-columns: minmax(0, 1fr); }
  .finder { grid-template-columns: minmax(0, 1fr); padding: 30px 24px; }
  .privacy { padding: 32px 24px; }
}
@media (max-width: 420px) {
  .bar { padding-inline: 16px; }
  .bar nav { gap: 14px; font-size: .86rem; }
  .brand span { display: none; }
  .hero-grid { padding-inline: 16px; }
  main { padding-inline: 16px; }
  .actions .btn { flex: 1; text-align: center; padding-inline: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}