/* Finjan — shared site styles. Cream, espresso and caramel with soft pastel accents. */
:root {
  --cream: #fff7ee;
  --latte: #f3e3d3;
  --espresso: #3b2418;
  --mocha: #7a4a33;
  --caramel: #e8893c;
  --caramel-deep: #c96a22;
  --rose: #f6a6b2;
  --mint: #9ed9c2;
  --sky: #9ccbf0;
  --saffron: #f7c548;
  --radius: 28px;
  --shadow: 0 18px 50px rgba(59, 36, 24, 0.14);
  --font-display: "Baloo Bhaijaan 2", "Nunito", system-ui, sans-serif;
  --font-text: "Nunito", "Baloo Bhaijaan 2", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  background: var(--cream);
  color: var(--espresso);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

[dir="rtl"] body, body[dir="rtl"] { font-family: var(--font-display); }

h1, h2, h3 { font-family: var(--font-display); line-height: 1.15; margin: 0; }

a { color: inherit; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 24px;
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn:active { transform: scale(0.97); }
.btn.primary { background: var(--espresso); color: var(--cream); box-shadow: 0 10px 24px rgba(59, 36, 24, 0.25); }
.btn.ghost { background: rgba(255, 255, 255, 0.7); color: var(--espresso); }

.lang-switch {
  position: fixed;
  top: max(16px, env(safe-area-inset-top));
  inset-inline-end: 16px;
  z-index: 10;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-decoration: none;
  font-weight: 800;
  font-size: 15px;
}

/* ---------- Landing page ---------- */
.landing { min-height: 100vh; }

.hero {
  position: relative;
  padding: 96px 20px 64px;
  text-align: center;
  background:
    radial-gradient(circle at 15% 20%, rgba(246, 166, 178, 0.45), transparent 40%),
    radial-gradient(circle at 85% 10%, rgba(158, 217, 194, 0.5), transparent 40%),
    radial-gradient(circle at 50% 100%, rgba(247, 197, 72, 0.35), transparent 50%),
    var(--cream);
  overflow: hidden;
}

.hero .finji { width: 168px; height: 168px; animation: bob 3.2s ease-in-out infinite; filter: drop-shadow(0 18px 24px rgba(59, 36, 24, 0.18)); }

.hero h1 { font-size: clamp(38px, 8vw, 64px); margin-top: 18px; }
.hero h1 span { color: var(--caramel); }
.hero p.lead { max-width: 560px; margin: 14px auto 28px; font-size: 19px; color: var(--mocha); }

.store-badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px; border-radius: 18px;
  background: var(--espresso); color: var(--cream);
  font-weight: 800; text-decoration: none;
}
.store-badge small { display: block; font-weight: 600; opacity: 0.7; font-size: 12px; }

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 20px 64px;
}

.feature {
  background: #fff;
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
  transform: translateY(0);
  transition: transform 0.25s ease;
}
.feature:hover { transform: translateY(-4px); }
.feature .icon { font-size: 34px; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 20px; margin-bottom: 14px; }
.feature h3 { font-size: 22px; margin-bottom: 6px; }
.feature p { margin: 0; color: var(--mocha); }

.footer { text-align: center; padding: 32px 20px 48px; color: var(--mocha); font-size: 15px; }

@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-10px) rotate(2deg); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}