* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #FAF8F5;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  direction: rtl;
  font-family: 'Frank Ruhl Libre', serif;
  position: relative;
}

/* ── Diagonal cross grid background ── */

.grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(45deg, transparent 49%, #e5e7eb 49%, #e5e7eb 51%, transparent 51%),
    linear-gradient(-45deg, transparent 49%, #e5e7eb 49%, #e5e7eb 51%, transparent 51%);
  background-size: 40px 40px;
  opacity: 0.5;
  z-index: 0;
}

/* ── Main content ── */

.content {
  text-align: center;
  z-index: 2;
  position: relative;
}

.brand {
  font-family: 'Frank Ruhl Libre', serif;
  font-weight: 700;
  font-size: clamp(3.5rem, 12vw, 9rem);
  color: #7CB67C;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

.coming-soon {
  font-family: 'Frank Ruhl Libre', serif;
  font-weight: 700;
  font-size: clamp(1.2rem, 3vw, 2rem);
  color: #95A5A6;
  margin-top: 0.5em;
  letter-spacing: 0.15em;
}

.contact {
  display: inline-block;
  margin-top: 1em;
  font-size: clamp(0.85rem, 1.5vw, 1.1rem);
  color: #95A5A6;
  direction: ltr;
  unicode-bidi: isolate;
  cursor: pointer;
  padding-bottom: 2px;
}

.contact:hover {
  color: #7CB67C;
}

/* ── Scattered ARASAAC pictograms ── */

.illustration {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  object-fit: contain;
}

/* בית — house */
.illust-1 {
  width: clamp(60px, 8vw, 110px);
  top: 7%;
  right: 9%;
  opacity: 0.3;
  transform: rotate(-12deg);
}

/* שמש — sun */
.illust-2 {
  width: clamp(55px, 7vw, 100px);
  top: 12%;
  left: 7%;
  opacity: 0.28;
  transform: rotate(15deg);
}

/* לב — heart */
.illust-3 {
  width: clamp(50px, 6vw, 90px);
  bottom: 15%;
  right: 11%;
  opacity: 0.35;
  transform: rotate(8deg);
}

/* פרח — flower */
.illust-4 {
  width: clamp(50px, 6vw, 95px);
  bottom: 10%;
  left: 12%;
  opacity: 0.3;
  transform: rotate(-10deg);
}

/* כלב — dog */
.illust-5 {
  width: clamp(60px, 8vw, 110px);
  top: 5%;
  left: 33%;
  opacity: 0.25;
  transform: rotate(5deg);
}

/* תפוח — apple */
.illust-6 {
  width: clamp(50px, 7vw, 95px);
  bottom: 22%;
  left: 4%;
  opacity: 0.3;
  transform: rotate(-18deg);
}

/* כדור — ball */
.illust-7 {
  width: clamp(55px, 7vw, 100px);
  top: 50%;
  right: 4%;
  opacity: 0.28;
  transform: rotate(20deg);
}

/* שמח — happy */
.illust-8 {
  width: clamp(55px, 7vw, 100px);
  bottom: 5%;
  right: 35%;
  opacity: 0.27;
  transform: rotate(-5deg);
}

/* ספר — book */
.illust-9 {
  width: clamp(50px, 6vw, 90px);
  top: 30%;
  left: 3%;
  opacity: 0.3;
  transform: rotate(12deg);
}

/* פרפר — butterfly */
.illust-10 {
  width: clamp(55px, 7vw, 100px);
  top: 3%;
  right: 35%;
  opacity: 0.27;
  transform: rotate(-8deg);
}

/* חתול — cat */
.illust-11 {
  width: clamp(50px, 6vw, 95px);
  bottom: 30%;
  right: 3%;
  opacity: 0.28;
  transform: rotate(14deg);
}

/* בובה — doll */
.illust-12 {
  width: clamp(50px, 6vw, 90px);
  top: 35%;
  right: 3%;
  opacity: 0.25;
  transform: rotate(-16deg);
}

/* אמא — mom */
.illust-13 {
  width: clamp(55px, 7vw, 100px);
  bottom: 4%;
  left: 5%;
  opacity: 0.27;
  transform: rotate(7deg);
}

/* שלום — hello */
.illust-14 {
  width: clamp(50px, 6vw, 90px);
  top: 18%;
  right: 3%;
  opacity: 0.28;
  transform: rotate(-20deg);
}

/* מים — water */
.illust-15 {
  width: clamp(50px, 6vw, 90px);
  bottom: 4%;
  right: 12%;
  opacity: 0.27;
  transform: rotate(10deg);
}

/* עוגה — cake */
.illust-16 {
  width: clamp(55px, 7vw, 95px);
  top: 8%;
  left: 15%;
  opacity: 0.28;
  transform: rotate(-6deg);
}

/* ילדה — girl */
.illust-17 {
  width: clamp(50px, 6vw, 90px);
  bottom: 35%;
  left: 3%;
  opacity: 0.25;
  transform: rotate(18deg);
}