/* glame.net — the app's own language: cream, bronze, ink, and one font (Fredoka Light 300, never bold) */
@font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('/fonts/fredoka-hebrew-300.woff2?v=1790664211') format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('/fonts/fredoka-latin-300.woff2?v=1790664211') 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 {
  --cream: #F2E4C9; --cream-2: #E8D3A8; --ink: #221B14; --ink-soft: #6B5D4A;
  --line: #DCC79E; --bronze: #B8935A; --bronze-dark: #8F6C35; --rose: #C99178; --white: #FFFCF5;
}
*, *::before, *::after { box-sizing: border-box; font-synthesis-weight: none; font-weight: 300; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: 'Fredoka', sans-serif; direction: rtl; }
body::before { content: ""; position: fixed; top: -160px; right: -120px; width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,145,120,.35), rgba(201,145,120,0) 70%); pointer-events: none; }
a { color: inherit; }
h1, h2 { margin: 0; }

.wrap { position: relative; max-width: 1040px; margin: 0 auto; padding: 0 20px; }

/* ---- hero */
.hero { padding: 44px 0 8px; max-width: 640px; margin: 0 auto; text-align: center; }
.brand { margin-bottom: 38px; }
.logo { font-size: 34px; letter-spacing: 3px; line-height: 1; direction: ltr; text-align: center; }
.tagline { font-size: 12px; letter-spacing: 3.4px; color: var(--bronze-dark); text-transform: uppercase; margin-top: 8px; direction: ltr; text-align: center; }
.kicker { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; letter-spacing: 1.6px; color: var(--bronze-dark); margin-bottom: 12px; }
.kicker svg { color: var(--bronze); }
.kicker .rule { width: 28px; height: 1px; background: var(--bronze); }
h1 { font-size: clamp(28px, 6.4vw, 48px); line-height: 1.25; text-wrap: balance; }
h1 em { font-style: normal; color: var(--bronze-dark); }
.sub { font-size: 16px; line-height: 1.75; color: var(--ink-soft); margin: 16px auto 0; max-width: 520px; }

.btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 54px; padding: 0 26px; border-radius: 30px;
  font-size: 16px; text-decoration: none; transition: transform .15s ease, box-shadow .25s ease; }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--ink); color: var(--cream); box-shadow: 0 12px 26px rgba(34,27,20,.28), 0 2px 6px rgba(34,27,20,.16); }
.btn-ghost { border: 1.5px solid var(--ink); color: var(--ink); background: rgba(255,252,245,.55); }
.soon { margin-top: 14px; font-size: 14px; color: var(--ink-soft); min-height: 22px; transition: color .25s ease; }
.soon.on { color: var(--bronze-dark); }

/* ---- the three services, as on the app's home screen */
.services { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 34px 0 0; }
.svc { position: relative; height: 210px; border-radius: 20px; overflow: hidden; background: var(--cream-2); color: var(--cream);
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center; text-align: center; padding: 14px 16px; }
.svc.wide { grid-column: 1 / -1; height: 230px; }
.svc::after { content: ""; position: absolute; inset: 0; border-radius: 20px; border: 1px solid rgba(220,199,158,.9); pointer-events: none; }
.svc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.svc .shade { position: absolute; left: 0; right: 0; bottom: 0; height: 60%;
  background: linear-gradient(to top, rgba(34,27,20,.86), rgba(34,27,20,.35) 50%, rgba(34,27,20,0)); }
.svc .idx { position: absolute; top: 12px; right: 14px; font-size: 13px; letter-spacing: 2px; text-shadow: 0 1px 6px rgba(34,27,20,.6); }
.svc .idx::after { content: ""; display: block; width: 16px; height: 1px; background: var(--cream); margin-top: 4px; opacity: .85; }
.svc .t1 { position: relative; font-size: 21px; }
.svc .t2 { position: relative; font-size: 14px; opacity: .9; margin-top: 3px; }

/* ---- who it is for */
.cards { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 22px 0 0; }
.card { background: rgba(255,252,245,.75); border: 1px solid var(--line); border-radius: 20px; padding: 22px 22px 20px; text-align: center; }
.cmark { width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: var(--bronze); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.card h2 { font-size: 20px; }
.card p { font-size: 15px; line-height: 1.7; color: var(--ink-soft); margin: 8px 0 0; }

footer { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; justify-content: center; padding: 34px 0 calc(34px + env(safe-area-inset-bottom));
  margin-top: 30px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--ink-soft); }
footer a { text-decoration: none; color: var(--bronze-dark); }

@media (max-width: 520px) {
  .btns { flex-direction: column; }
  .btn { width: 100%; }
}
@media (min-width: 820px) {
  .hero { padding-top: 70px; }
  .services { grid-template-columns: 1.4fr 1fr 1fr; }
  .svc.wide { grid-column: auto; height: 300px; }
  .svc { height: 300px; }
  .cards { grid-template-columns: repeat(3, 1fr); }
}

/* ---- the opening, shared with the app's splash */
html.intro-on, html.intro-on body { overflow: hidden; }
#intro { position: fixed; inset: 0; z-index: 100; background: var(--ink); color: var(--cream); display: flex; align-items: center; justify-content: center;
  transition: opacity .5s ease; }
#intro.off { opacity: 0; pointer-events: none; }
#intro .stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; }
#intro .glow { position: absolute; top: 50%; left: 50%; width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,145,120,.30), rgba(184,147,90,.12) 42%, transparent 68%); animation: glow 3s ease-in-out both; }
#intro .star { position: relative; width: 30px; height: 30px; color: var(--bronze); filter: drop-shadow(0 0 6px rgba(184,147,90,.55)); animation: starLife 3s both; }
#intro .star svg { display: block; width: 30px; height: 30px; }
#intro .word { font-size: 52px; letter-spacing: 2px; line-height: 1; direction: ltr; clip-path: inset(-14px 100% -14px 0); animation: reveal 3s both; }
#intro .line { height: 1px; width: 56px; background: var(--bronze); transform: scaleX(0); animation: lineDraw 3s both; }
@keyframes starLife {
  0% { transform: scale(0) rotate(-45deg); opacity: 0; animation-timing-function: cubic-bezier(.2,.9,.3,1.25); }
  18% { transform: scale(1.2) rotate(0deg); opacity: 1; }
  28% { transform: scale(1) rotate(0deg); animation-timing-function: ease-in-out; }
  64% { transform: scale(1.06) rotate(45deg); }
  80% { transform: scale(1.3) rotate(90deg); filter: drop-shadow(0 0 16px rgba(232,211,168,.95)); }
  100% { transform: scale(1) rotate(90deg); opacity: 1; }
}
@keyframes reveal { 0%,25% { clip-path: inset(-14px 100% -14px 0); } 65%,100% { clip-path: inset(-14px 0 -14px 0); } }
@keyframes lineDraw { 0%,60% { transform: scaleX(0); } 85%,100% { transform: scaleX(1); } }
@keyframes glow { 0% { transform: scale(.6); opacity: 0; } 30% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.1); opacity: .75; } }
@media (prefers-reduced-motion: reduce) { #intro { display: none; } .btn { transition: none; } }