/* Magen teaser v2. One page, two languages, no scripts. */

/* Rubik is variable: one file per script covers every weight. */
@font-face { font-family: "Rubik"; font-weight: 300 900; font-display: swap;
  src: url("fonts/rubik-hebrew.woff2") format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Rubik"; font-weight: 300 900; font-display: swap;
  src: url("fonts/rubik-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --mist: #ECECF0;      /* page ground */
  --card: #FFFFFF;
  --page-lit: #C7C7CC;  /* right page of the mark */
  --ink: #1E2230;
  --ink-soft: #4A4F5E;
  --tekhelet: #2E4A7D;
  --foot: #2A3042;
  --foot-ink: #C9CDD8;
  --tile: #0D1424;      /* the drawings' own tile colour */

  --sans: "Rubik", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  color-scheme: light;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--mist);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--sans);
}

a { color: var(--tekhelet); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--tekhelet); outline-offset: 3px; border-radius: 2px; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Info we don't have yet: a blank underline. */
.blank {
  display: inline-block;
  width: 5.5em;
  height: 1em;
  border-bottom: 1px solid currentColor;
  vertical-align: baseline;
  opacity: 0.7;
}
.blank.wide { width: 7em; }

/* --- Top bar --- */
.bar {
  display: flex;
  justify-content: flex-end;
  padding: 1.25rem clamp(1rem, 5vw, 4rem) 0;
}
.lang { font-size: 0.9375rem; }

/* --- Hero: card + devices --- */
main {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 31rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  align-content: center;
  max-width: 78rem;
  width: 100%;
  margin-inline: auto;
  padding: clamp(1rem, 4vh, 3rem) clamp(1rem, 5vw, 4rem) clamp(2.5rem, 8vh, 5rem);
}

.card {
  background: var(--card);
  border-radius: 1.75rem;
  padding: clamp(1.75rem, 4vw, 3rem);
  text-align: center;
  box-shadow: 0 1px 2px rgba(30, 34, 48, 0.04), 0 12px 40px rgba(30, 34, 48, 0.06);
}
.logo {
  display: flex;
  direction: ltr;  /* the mark sits left of "Magen" in both languages */
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin: 0 0 1.75rem;
  font: 700 2.75rem/1 var(--sans);
  letter-spacing: -0.01em;
}
.logo img { height: 3.75rem; width: auto; }
/* Card lockup: mark left of the name; the tagline sits under the name at the
   same width (font size from Rubik's measured widths, justify absorbs the rest);
   the mark is as tall as both lines (x1.2 for the glow padding in its viewBox). */
.lockup {
  --n: 3.25rem;                    /* name size */
  --t: calc(var(--n) * 0.325);     /* "The Digital Guardian" spans "Magen" */
  --gap: 0.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin: 0 0 2rem;
  direction: ltr;
}
:lang(he) .lockup { --t: calc(var(--n) * 0.53); }  /* "המגן הדיגיטלי" */
.lockup img { height: calc((var(--n) + var(--gap) + var(--t) * 1.15) * 1.2); width: auto; }
.lockup > div { display: grid; gap: var(--gap); }
.lockup p { margin: 0; white-space: nowrap; }
.lockup .name { font: 700 var(--n)/1 var(--sans); letter-spacing: -0.01em; }
.tagline {
  width: 0;
  min-width: 100%;                 /* as wide as the name, never wider */
  font: 500 var(--t)/1.15 var(--sans);
  color: var(--ink-soft);
  text-align: justify;
  text-align-last: justify;
}
:lang(he) .tagline { direction: rtl; }

h1 {
  font: 500 clamp(2rem, 1.3rem + 2.4vw, 3rem)/1.15 var(--sans);
  color: var(--tekhelet);
  margin: 0 0 1.25rem;
  text-wrap: balance;
}
.get { font: 500 1.375rem/1.3 var(--sans); margin: 0 0 1rem; }
/* One dark panel: d : h : m : s, units under each, seconds in a lighter blue. */
.countdown {
  display: flex;
  width: fit-content;
  margin: 0 auto 1.5rem;
  padding: 0.85rem 1.1rem 0.7rem;
  direction: ltr;  /* timers read left to right in Hebrew too */
  border-radius: 1.25rem;
  background: linear-gradient(135deg, var(--ink), var(--tekhelet));
  box-shadow: 0 10px 30px rgba(46, 74, 125, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.countdown span {
  position: relative;
  display: grid;
  justify-items: center;
  min-width: 4rem;
  padding-inline: 0.5rem;
}
.countdown span + span::before {
  content: ":";
  position: absolute;
  inset-inline-start: -0.2rem;
  top: 0.05rem;
  font: 500 2rem/1.1 var(--sans);
  color: rgba(255, 255, 255, 0.35);
}
.countdown b {
  font: 600 2.375rem/1.1 var(--sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  color: #fff;
}
.countdown span:last-child b { color: #9DB8E8; }
.countdown small {
  margin-top: 0.15rem;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.countdown noscript { color: #fff; font-weight: 500; }

/* Store badges in their native look, inactive until the app is public. */
.stores {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  padding: 0;
  margin: 0;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  height: 3.1rem;
  padding: 0 1rem 0 0.8rem;
  border-radius: 0.6rem;
  border: 1px solid #A6A6A6;
  background: #000;
  color: #fff;
  font: 500 1.25rem/1 -apple-system, "SF Pro Display", "Helvetica Neue", Arial, var(--sans);
  letter-spacing: -0.01em;
  direction: ltr;
  opacity: 0.45;
  cursor: not-allowed;
  user-select: none;
}
.badge svg { width: 1.6rem; height: 1.6rem; flex: none; }
.badge > span { display: grid; gap: 0.1rem; text-align: left; }
.badge small { font-size: 0.6875rem; font-weight: 400; letter-spacing: 0; }
:lang(he) .badge small { direction: rtl; text-align: left; }

/* --- Devices: a generic laptop with a phone in front. Sizes in cqw so the
   whole scene scales as one picture. --- */
.devices {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 100 / 74;
  margin: 0;
}

.laptop { position: absolute; top: 0; inset-inline-start: 0; width: 86%; }
.lid {
  background: #1B1F2B;
  border-radius: 2.2cqw 2.2cqw 0.6cqw 0.6cqw;
  padding: 1.5cqw;
}
.laptop .screen {
  aspect-ratio: 16 / 10;
  background: #fff;
  border-radius: 0.5cqw;
  overflow: hidden;
  font-size: 1.35cqw;
  color: #3C4043;
}
.base {
  height: 2.2cqw;
  margin-inline: -6%;
  background: linear-gradient(#D9DAE0, #B4B6BE);
  border-radius: 0 0 2.5cqw 2.5cqw;
  position: relative;
}
.base::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline: 42%;
  height: 0.8cqw;
  background: #A4A6AE;
  border-radius: 0 0 1cqw 1cqw;
}

.chrome {
  display: flex;
  align-items: center;
  gap: 1.2cqw;
  height: 4cqw;
  padding-inline: 1.2cqw;
  background: #EEF0F3;
}
.dots { display: flex; gap: 0.6cqw; }
.dots i { width: 0.9cqw; height: 0.9cqw; border-radius: 50%; background: #C9CCD3; }
.url {
  flex: 1;
  height: 2.5cqw;
  display: flex;
  align-items: center;
  padding-inline: 1.2cqw;
  border-radius: 1.3cqw;
  background: #fff;
  color: #5F6368;
  direction: ltr;
  justify-content: flex-end;
}
:lang(en) .url, [dir="ltr"] .url { justify-content: flex-start; }
.ext { width: 2cqw; height: auto; }

.search {
  display: flex;
  align-items: center;
  border: 1px solid #DFE1E5;
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(32, 33, 36, 0.12);
}
.tabs { display: flex; color: #5F6368; }
.tabs .on { color: #1A73E8; border-bottom: 2px solid #1A73E8; }

.laptop .search { width: 52%; height: 3.4cqw; margin: 1.6cqw 2cqw 1cqw; padding-inline: 1.6cqw; }
.laptop .tabs { gap: 2.2cqw; margin-inline: 2cqw; padding-bottom: 0.2cqw; border-bottom: 1px solid #EBEBEB; }
.laptop .tabs span { padding-bottom: 0.5cqw; }
.results { display: flex; gap: 1.8cqw; padding: 1.6cqw 2cqw; }
.laptop .grid { grid-template-columns: repeat(3, 9.6cqw); gap: 0.7cqw; }
.preview {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1cqw;
  padding: 1.2cqw;
  border-radius: 1cqw;
  background: #F6F7F9;
}
.preview img { width: 62%; height: auto; border-radius: 22%; }
.preview i { display: block; height: 1cqw; width: 70%; border-radius: 0.5cqw; background: #E3E5EA; }
.preview i + i { width: 45%; }

.phone {
  position: absolute;
  bottom: 0;
  inset-inline-end: 0;
  width: 31%;
  background: #14171F;
  border-radius: 5cqw;
  padding: 1cqw;
  box-shadow: 0 2cqw 5cqw rgba(30, 34, 48, 0.25);
}
.phone .screen {
  position: relative;
  aspect-ratio: 9 / 19.5;
  background: #fff;
  border-radius: 4cqw;
  overflow: hidden;
  font-size: 1.45cqw;
  color: #3C4043;
}
.status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 5cqw;
  padding-inline: 2.6cqw;
  font-weight: 500;
  direction: ltr;
}
.island { width: 8cqw; height: 2.2cqw; border-radius: 1.1cqw; background: #14171F; }
.battery { width: 2.6cqw; height: 1.2cqw; border-radius: 0.35cqw; background: #3C4043; }
.phone .search { height: 3.6cqw; margin: 1cqw 1.6cqw 1.2cqw; padding-inline: 1.6cqw; }
.phone .tabs { gap: 1.8cqw; margin-inline: 1.6cqw; border-bottom: 1px solid #EBEBEB; }
.phone .tabs span { padding-bottom: 0.5cqw; }
.phone .grid { grid-template-columns: repeat(3, 1fr); gap: 0.6cqw; padding: 1.4cqw 1.6cqw; }
.more { display: flex; flex-wrap: wrap; gap: 1cqw; padding: 1cqw 1.6cqw; }
.more i { height: 3cqw; width: 11cqw; border-radius: 1.5cqw; background: #F1F3F4; }
.more i:nth-child(2n) { width: 8cqw; }
.addr {
  position: absolute;
  bottom: 2.4cqw;
  inset-inline: 2.4cqw;
  height: 4.2cqw;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8cqw;
  border-radius: 2.1cqw;
  background: rgba(240, 241, 245, 0.92);
  box-shadow: 0 0.3cqw 1.2cqw rgba(30, 34, 48, 0.12);
  direction: ltr;
}
.addr img { width: 1.9cqw; height: auto; }

/* --- Results: every shot starts blurred and is checked in a scattered order.
   Nature clears; a harmful one only eases to a light blur and gets a ring in
   its group colour: caught. --- */
.grid { display: grid; }
.shot {
  position: relative;
  aspect-ratio: 1;
  border-radius: 22%;
  overflow: hidden;
  background: var(--tile);
}
.shot img {
  display: block;
  width: 100%;
  height: auto;
  filter: blur(6px) saturate(0.3) brightness(0.8);
  transform: scale(1.08);
  animation: 0.9s cubic-bezier(.3,.7,.2,1) forwards;
  animation-delay: calc(var(--d) + var(--i) * 180ms);
}
.safe img   { animation-name: clear-safe; }
.caught img { animation-name: hold-caught; }
@keyframes clear-safe  { to { filter: blur(0) saturate(1) brightness(1); transform: scale(1); } }
@keyframes hold-caught { to { filter: blur(2px) saturate(0) brightness(0.85); transform: scale(1.05); } }

.caught::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 2px var(--c);
  opacity: 0;
  animation: caught 0.5s ease forwards;
  animation-delay: calc(var(--d) + 600ms + var(--i) * 180ms);
}
@keyframes caught {
  0%   { opacity: 0; }
  50%  { opacity: 1; box-shadow: inset 0 0 0 4px var(--c); }
  100% { opacity: 1; }
}

.phone  { --d: 500ms; }
.laptop { --d: 900ms; }

/* Check order, scattered like a page loading (no inline styles: the CSP forbids them). */
.shot:nth-child(1) { --i: 0; }
.shot:nth-child(5) { --i: 1; }
.shot:nth-child(9) { --i: 2; }
.shot:nth-child(3) { --i: 3; }
.shot:nth-child(7) { --i: 4; }
.shot:nth-child(2) { --i: 5; }
.shot:nth-child(6) { --i: 6; }
.shot:nth-child(8) { --i: 7; }
.shot:nth-child(4) { --i: 8; }

.weapons    { --c: #FF7A1A; }
.alcohol    { --c: #FFC23D; }
.drugs      { --c: #5FD38D; }
.swimwear   { --c: #FFC9A8; }
.revealing  { --c: #FF9E8A; }
.obstructed { --c: #FF7AA8; }
.nudity     { --c: #E0337A; }
.sexual     { --c: #B0185E; }

/* --- Footer --- */
footer {
  background: var(--foot);
  color: var(--foot-ink);
  padding: 2.5rem clamp(1rem, 5vw, 4rem) 1.5rem;
  font-size: 0.9375rem;
}
.foot {
  display: grid;
  grid-template-columns: auto repeat(4, minmax(0, 1fr));
  align-items: start;
  gap: 2rem clamp(1.5rem, 3vw, 3rem);
  max-width: 78rem;
  margin-inline: auto;
}
footer .logo { color: #fff; font-size: 2rem; margin: 0; justify-content: flex-start; }
footer .logo img { height: 2.6rem; }
footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.4rem; }
footer a { color: #fff; }
.contact p { margin: 0 0 0.3rem; }
.contact .big { font-size: 1.375rem; color: #fff; }
.contact .big .blank { width: 4.5em; }
.contact .big a { text-decoration: none; }
.copy { max-width: 78rem; margin: 2rem auto 0; font-size: 0.8125rem; opacity: 0.7; }

/* --- Narrow screens --- */
@media (max-width: 56rem) {
  main { grid-template-columns: 1fr; }
  .devices { max-width: 36rem; width: 100%; margin-inline: auto; }
  .foot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  footer .logo { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .shot img { animation: none; transform: none; }
  .safe img { filter: none; }
  .caught img { filter: blur(2px) saturate(0) brightness(0.85); }
  .caught::after { animation: none; opacity: 1; }
}