/*
 * Sporkey — one-page site.
 *
 * Shared by index.html (Hebrew, rtl) and en.html (English, ltr). Everything directional is
 * written with logical properties (inline-start/end, margin-inline) so a single stylesheet serves
 * both without a mirrored copy, and the few places that genuinely cannot be mirrored — the pitch
 * lines, the numbered steps — are called out where they appear.
 *
 * Palette is lifted from the app's own tokens (src/ui/design/tokens.ts) rather than re-invented,
 * so the site and the thing it advertises are the same navy and the same gold.
 */

:root {
  --navy-deep: #061024;
  --navy-base: #0a1c3d;
  --navy-panel: #102a56;
  --navy-high: #16356b;
  --navy-border: #1e4488;

  --gold: #f5b301;
  --gold-bright: #ffc531;
  --gold-deep: #c98a00;

  --blue: #1b6be0;
  --blue-bright: #3e86f5;
  --cyan: #38bdf8;
  --green: #2fb552;

  --ink: #ffffff;
  --ink-dim: #9fb6dc;
  --ink-dark: #0c1b33;
  --ink-dark-dim: #5a6b85;

  --paper: #eef4fd;
  --card: #ffffff;

  --radius: 18px;
  --radius-lg: 26px;
  --shell: 1200px;

  --font: 'Rubik', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--navy-deep);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

.shell {
  width: min(100% - 40px, var(--shell));
  margin-inline: auto;
}

/* ---------------------------------------------------------------- wordmark */

/*
 * The real wordmark, lifted off the mockup. It replaces the CSS-typeset version that stood in
 * while there was no logo file — the letterforms, the ball in the "o" and the key in the "k" are
 * not something a font stack was ever going to reproduce.
 */
.logo {
  height: 42px;
  width: auto;
}
.logo-sm {
  height: 30px;
}


.wordmark {
  font-weight: 900;
  font-size: 30px;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
  /* Latin brand name: never mirrored, even on the Hebrew page. */
  direction: ltr;
  unicode-bidi: isolate;
}
.wordmark i {
  font-style: normal;
}
.wordmark .a {
  color: #fff;
}
.wordmark .b {
  color: var(--gold-bright);
}
.wordmark .c {
  color: var(--cyan);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand-tag {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(6, 16, 36, 0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(30, 68, 136, 0.6);
}
.site-header .shell {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 74px;
}

.nav {
  display: flex;
  gap: 26px;
  margin-inline-start: auto;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-dim);
}
.nav a {
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.nav a:hover,
.nav a:focus-visible {
  color: #fff;
  border-bottom-color: var(--gold);
}

.lang {
  margin-inline-start: auto;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-dim);
  border: 1px solid var(--navy-border);
  border-radius: 999px;
  padding: 7px 14px;
  transition: color 0.15s, border-color 0.15s;
}
.nav + .lang {
  margin-inline-start: 0;
}
.lang:hover,
.lang:focus-visible {
  color: #fff;
  border-color: var(--gold);
}

@media (max-width: 900px) {
  .nav {
    display: none;
  }
}

/* ------------------------------------------------------------------ button */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font: inherit;
  font-weight: 700;
  font-size: 16px;
  padding: 14px 26px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.15s;
}
.btn:hover {
  transform: translateY(-1px);
}
.btn:active {
  transform: translateY(0);
}
.btn:focus-visible {
  outline: 3px solid var(--gold-bright);
  outline-offset: 3px;
}

.btn-gold {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: var(--ink-dark);
  box-shadow: 0 8px 22px rgba(245, 179, 1, 0.28);
}
.btn-blue {
  background: linear-gradient(180deg, var(--blue-bright), var(--blue));
  color: #fff;
  box-shadow: 0 8px 22px rgba(27, 107, 224, 0.32);
}
.btn-ghost {
  background: transparent;
  color: #fff;
  border: 1px solid var(--navy-border);
}

/*
 * Download is not a live link and must not look like one. It keeps the gold shape so the page
 * still reads as having a primary action, loses the lift and the pointer, and carries the word
 * that says so — a disabled grey button would read as broken rather than as not-yet.
 */
.btn-soon {
  background: linear-gradient(180deg, rgba(255, 197, 49, 0.22), rgba(245, 179, 1, 0.14));
  color: var(--gold-bright);
  border: 1px solid rgba(245, 179, 1, 0.55);
  cursor: default;
  box-shadow: none;
}
.btn-soon:hover {
  transform: none;
}
.soon-badge {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--ink-dark);
}

/* ------------------------------------------------------------ store badges */

/*
 * Apple's and Google's own badge artwork, fetched from their badge endpoints in the language of
 * the page. They are images, not links: the app is not on either store yet, so there is nowhere
 * to send anybody — the caption above them carries that.
 *
 * Both badges are drawn to different internal padding, so matching their box heights leaves the
 * logos looking mismatched. The Google one is nudged a little taller to make the two read as the
 * same size, which is what the eye is measuring.
 */
.stores {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.stores-note {
  width: 100%;
  margin: 0 0 2px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--gold-bright);
}
.badge {
  height: 48px;
  width: auto;
  border-radius: 8px;
}
.badge-google {
  height: 56px;
  margin-inline-start: -8px;
}

/* -------------------------------------------------------------------- hero */

.hero {
  position: relative;
  padding: 70px 0 0;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(62, 134, 245, 0.25), transparent 60%),
    linear-gradient(180deg, var(--navy-deep), var(--navy-base));
  overflow: hidden;
}

/* Stadium floodlights. Two soft cones rather than an image — cheap, and they scale to any width. */
.hero::before,
.hero::after {
  content: '';
  position: absolute;
  top: -140px;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(160, 200, 255, 0.22), transparent 65%);
  pointer-events: none;
}
.hero::before {
  inset-inline-start: -80px;
}
.hero::after {
  inset-inline-end: -80px;
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.75fr 1.1fr;
  gap: 30px;
  align-items: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gold-bright);
  border: 1px solid rgba(245, 179, 1, 0.4);
  background: rgba(245, 179, 1, 0.08);
  border-radius: 999px;
  padding: 6px 14px;
  margin-bottom: 18px;
}

h1 {
  font-size: clamp(38px, 5.2vw, 62px);
  font-weight: 900;
  line-height: 1.03;
  margin: 0 0 18px;
  text-wrap: balance;
}
h1 .hl {
  color: var(--gold-bright);
  display: block;
}

.lede {
  font-size: 18px;
  line-height: 1.6;
  color: #cfe0fa;
  margin: 0 0 26px;
  max-width: 46ch;
}
.lede b {
  color: var(--gold-bright);
  font-weight: 600;
}

.hero-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.hero-mascot {
  align-self: end;
  justify-self: center;
  position: relative;
}
.hero-mascot img {
  width: min(100%, 320px);
  filter: drop-shadow(0 26px 30px rgba(0, 0, 0, 0.5));
}
.bubble {
  position: absolute;
  top: 6%;
  inset-inline-end: 86%;
  width: 172px;
  background: #fff;
  color: var(--ink-dark);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.45;
  padding: 13px 16px;
  border-radius: 16px;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.35);
}
.bubble::after {
  content: '';
  position: absolute;
  bottom: -9px;
  inset-inline-end: 22px;
  border: 10px solid transparent;
  border-top-color: #fff;
  border-bottom: 0;
}

@media (max-width: 1080px) {
  .hero-grid {
    grid-template-columns: 1fr 1fr;
  }
  .hero-mascot {
    display: none;
  }
}
@media (max-width: 760px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }
  .bubble {
    display: none;
  }
}

/* ------------------------------------------------------------------- video */

/*
 * 4:5, because that is what the footage is — both clips are 1080x1350, shot portrait on a phone.
 * The card was 16:10 with `object-fit: cover`, which showed a horizontal slice through the middle
 * of the frame and cut the top and bottom off everything.
 */
.video-card {
  position: relative;
  width: min(100%, 420px);
  margin-inline: auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 2px solid rgba(62, 134, 245, 0.55);
  box-shadow: 0 0 0 6px rgba(62, 134, 245, 0.1), 0 26px 60px rgba(0, 0, 0, 0.5);
  background: #04101f;
  aspect-ratio: 4 / 5;
}
.video-card video {
  width: 100%;
  height: 100%;
  /* `contain` rather than `cover`: the card matches the footage, but a clip that ever differs
     should letterbox instead of losing its edges. */
  object-fit: contain;
  background: #04101f;
  display: block;
}

/*
 * A facade, not a <video poster>. The clips are ~17MB each; loading one before anybody has asked
 * to watch it would be most of the page weight spent on the thing least likely to be needed.
 * Clicking swaps in the real element with autoplay.
 */
.video-facade {
  position: absolute;
  inset: 0;
  /*
   * Flex column rather than a grid, and every button default zeroed. A <button> brings its own
   * padding, its own line-height and a UA appearance; with those left in place the circle sat off
   * centre by a few pixels and no amount of place-items fixed it, because the box being centred
   * in was already inset.
   */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0;
  padding: 0;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  line-height: normal;
  cursor: pointer;
  background:
    radial-gradient(90% 70% at 50% 40%, rgba(27, 107, 224, 0.35), transparent 70%),
    linear-gradient(180deg, #0d2244, #061024);
  color: #fff;
  font: inherit;
}
.video-facade:focus-visible {
  outline: 3px solid var(--gold-bright);
  outline-offset: -6px;
}
.play {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.75);
  transition: transform 0.15s, background 0.15s;
}
.video-facade:hover .play {
  transform: scale(1.06);
  background: rgba(255, 255, 255, 0.18);
}
.play svg {
  width: 30px;
  height: 30px;
  fill: #fff;
  /*
   * A triangle's visual centre sits a third of the way from its base, so a geometrically centred
   * play glyph reads as sitting too far back. The nudge is a physical transform, not a logical
   * margin: `margin-inline-start` pushed it the wrong way on the Hebrew page, which is what made
   * it look worse there than here.
   */
  transform: translateX(2px);
}
.video-label {
  font-weight: 600;
  font-size: 15px;
  color: #dce9fb;
}
/* ------------------------------------------------------------ feature strip */

/*
 * The strip used to hang off the bottom of the hero on a negative margin, the way the mockup
 * draws it. On the real page that read as a stray band belonging to whatever came next, so it is
 * now a section of its own with a heading over it.
 */
.strip {
  position: relative;
  margin: 0;
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.35);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  overflow: hidden;
}
.strip-item {
  padding: 22px 18px;
  border-inline-end: 1px solid #e4ecf7;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.strip-item:last-child {
  border-inline-end: 0;
}
.strip-item h3 {
  margin: 0 0 4px;
  font-size: 15px;
  color: var(--ink-dark);
}
.strip-item p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-dark-dim);
}
.chip {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
}
.chip svg {
  width: 22px;
  height: 22px;
}
.chip-gold {
  background: #fff3d1;
}
.chip-gold svg {
  fill: var(--gold-deep);
}
.chip-blue {
  background: #e0ecff;
}
.chip-blue svg {
  fill: var(--blue);
}
.chip-green {
  background: #ddf6e4;
}
.chip-green svg {
  fill: #1e8a3c;
}
.chip-purple {
  background: #ece2ff;
}
.chip-purple svg {
  fill: #6b28ad;
}

@media (max-width: 1080px) {
  .strip {
    grid-template-columns: repeat(3, 1fr);
  }
  .strip-item:nth-child(3n) {
    border-inline-end: 0;
  }
}
@media (max-width: 700px) {
  .strip {
    grid-template-columns: 1fr 1fr;
  }
  .strip-item:nth-child(2n) {
    border-inline-end: 0;
  }
}

/* ----------------------------------------------------------------- section */

.section {
  padding: 96px 0 76px;
}
.section-light {
  background: var(--paper);
  color: var(--ink-dark);
}
.section-head {
  text-align: center;
  margin-bottom: 46px;
}
.section-head h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 900;
  margin: 0 0 12px;
  text-wrap: balance;
}
.section-head p {
  margin: 0 auto;
  max-width: 62ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-dark-dim);
}
.section-dark .section-head p {
  color: var(--ink-dim);
}

/* ----------------------------------------------------------------- how-to */

.steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  align-items: start;
}
.step {
  text-align: center;
  position: relative;
  padding: 0 6px;
}
.step-num {
  width: 40px;
  height: 40px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 17px;
  color: #fff;
  background: linear-gradient(180deg, var(--blue-bright), var(--blue));
  /* The sequence is 1..5 in reading order; the digit itself stays a Latin numeral. */
  direction: ltr;
}
.step-art {
  width: 74px;
  height: 74px;
  margin: 0 auto 14px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  background: #fff;
  box-shadow: 0 10px 22px rgba(12, 27, 51, 0.12);
}
.step-art svg {
  width: 38px;
  height: 38px;
}
.step h3 {
  margin: 0 0 6px;
  font-size: 16px;
  color: var(--ink-dark);
}
.step p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-dark-dim);
}

@media (max-width: 900px) {
  .steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 14px;
  }
}
@media (max-width: 480px) {
  .steps {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------- collection */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 54px;
  align-items: center;
}
.split h2 {
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 900;
  margin: 0 0 16px;
  text-wrap: balance;
}
.split p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-dim);
  margin: 0 0 16px;
}
.ticks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.ticks li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 16px;
  line-height: 1.5;
  color: #dce9fb;
}
.ticks svg {
  flex: none;
  width: 22px;
  height: 22px;
  fill: var(--green);
  margin-top: 2px;
}

.figures {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
/*
 * The renders arrive as photographs with their own lit backdrop, so the card gets out of the way:
 * the image runs edge to edge and the caption sits on the panel below it. Padding around them
 * would have framed a frame.
 */
.figure {
  border-radius: var(--radius);
  overflow: hidden;
  padding: 0 0 16px;
  text-align: center;
  background: linear-gradient(180deg, var(--navy-panel), var(--navy-deep));
  border: 1px solid var(--navy-border);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.35);
}
.figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 1162 / 1354;
  object-fit: cover;
  margin: 0 0 12px;
}
.figure b {
  display: block;
  font-size: 14px;
}
.figure span {
  font-size: 12px;
  color: var(--ink-dim);
}

@media (max-width: 900px) {
  .split {
    grid-template-columns: 1fr;
    gap: 34px;
  }
}

/* ------------------------------------------------------------------ crests */

.crests {
  margin-top: 44px;
  padding: 22px;
  border-radius: var(--radius);
  border: 1px solid var(--navy-border);
  background: rgba(16, 42, 86, 0.4);
  text-align: center;
}
.crests p {
  margin: 0 0 16px;
  font-size: 14px;
  color: var(--ink-dim);
}
.crest-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}
.crest-row img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.4));
}

/* ---------------------------------------------------------------- audience */

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 26px 24px;
  box-shadow: 0 16px 34px rgba(12, 27, 51, 0.1);
}
.card .chip {
  margin-bottom: 14px;
}
.card h3 {
  margin: 0 0 8px;
  font-size: 19px;
  color: var(--ink-dark);
}
.card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-dark-dim);
}
@media (max-width: 900px) {
  .cards {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------------------------------------------- cta */

.cta {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(90% 120% at 50% 0%, rgba(62, 134, 245, 0.3), transparent 60%),
    linear-gradient(180deg, var(--navy-base), var(--navy-deep));
  padding: 76px 0;
}
.cta-inner {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 34px;
  align-items: center;
}
.cta-mascot {
  width: 100%;
  filter: drop-shadow(0 20px 26px rgba(0, 0, 0, 0.5));
}
.cta h2 {
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 900;
  margin: 0 0 12px;
  text-wrap: balance;
}
.cta p {
  margin: 0 0 22px;
  font-size: 17px;
  line-height: 1.6;
  color: #cfe0fa;
  max-width: 54ch;
}
@media (max-width: 760px) {
  .cta-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .cta-mascot {
    width: 190px;
    margin-inline: auto;
  }
  .cta .stores,
  .cta .hero-cta {
    justify-content: center;
  }
}

/* ----------------------------------------------------------------- values */

.values {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 34px;
}
.value {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--navy-border);
  background: rgba(16, 42, 86, 0.5);
  font-size: 15px;
  font-weight: 500;
}
.value svg {
  width: 18px;
  height: 18px;
  fill: var(--gold-bright);
}

/* ----------------------------------------------------------------- footer */

.site-footer {
  background: var(--navy-deep);
  border-top: 1px solid rgba(30, 68, 136, 0.6);
  padding: 40px 0;
  font-size: 14px;
  color: var(--ink-dim);
}
.footer-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.footer-inner .brand {
  margin-inline-end: auto;
}
.site-footer a:hover {
  color: #fff;
}