/* Recetat e Irisit — bimbli.al */
:root {
  --oat: #F7F1E8;
  --card: #FFFFFF;
  --terracotta: #DE6B48;
  --clay: #B84A32;
  --leaf: #6F9A4E;
  --fig: #3B2E2A;
  --mushroom: #8A7A72;
  --roast: #1C1917;
  --blueberry: #5B6C9E;
  --radius: 20px;
  --max: 1060px;
}

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

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

body {
  font-family: "Nunito Sans", -apple-system, system-ui, sans-serif;
  background: var(--oat);
  color: var(--fig);
  line-height: 1.65;
  font-size: 17px;
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

a { color: var(--blueberry); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--terracotta);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- header ---------- */
header.site {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 0;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--fig); }
.brand img { width: 44px; height: 44px; border-radius: 11px; }
.brand b { font-size: 1.05rem; font-weight: 800; letter-spacing: .01em; }
.brand span { display: block; font-size: .78rem; color: var(--mushroom); font-weight: 600; }
nav.site a {
  color: var(--fig); text-decoration: none; font-weight: 700; font-size: .95rem;
  margin-left: 26px;
}
nav.site a:hover { color: var(--clay); }
nav.site a[aria-current="page"] { color: var(--clay); border-bottom: 3px solid var(--terracotta); padding-bottom: 2px; }
nav.site a.lang { border: 2px solid rgba(138,122,114,.4); border-radius: 999px; padding: 5px 14px; font-size: .85rem; }
nav.site a.lang:hover { border-color: var(--clay); }

/* ---------- type ---------- */
h1, h2, h3 { font-family: "Fraunces", Georgia, serif; font-weight: 600; line-height: 1.15; }
h1 { font-size: clamp(2.3rem, 5.2vw, 3.4rem); letter-spacing: -0.015em; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: .5em; }
h3 { font-size: 1.15rem; margin-bottom: .35em; }
.eyebrow {
  font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--clay); margin-bottom: 14px;
}
.muted { color: var(--mushroom); }

/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; padding: 56px 0 72px; }
.hero p.lead { font-size: 1.18rem; margin: 20px 0 30px; max-width: 46ch; }
.hero .actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.pill {
  display: inline-block; padding: 13px 24px; border-radius: 999px; text-decoration: none;
  font-weight: 800; font-size: .98rem;
}
.pill.primary { background: var(--terracotta); color: #fff; }
.pill.primary:hover { background: var(--clay); }
.pill.ghost { border: 2px solid rgba(138,122,114,.45); color: var(--fig); }
.pill.ghost:hover { border-color: var(--clay); color: var(--clay); }
.hero-note { font-size: .88rem; color: var(--mushroom); margin-top: 14px; }

/* signature: the app's availability ring, as a live dial in the badge */
.ringstage { position: relative; width: min(340px, 80vw); margin: 0 auto; }
.ringstage img { width: 100%; border-radius: 34px; display: block; box-shadow: 0 24px 60px rgba(43,30,24,.18); }
.ring-badge {
  margin: 18px auto 0; width: fit-content; background: var(--card); color: var(--fig);
  font-weight: 800; font-size: .9rem; padding: 9px 16px 9px 10px; border-radius: 999px;
  box-shadow: 0 8px 22px rgba(43,30,24,.12);
  display: flex; align-items: center; gap: 9px; white-space: nowrap;
}
.ring-badge b { color: var(--leaf); }
.mini-ring { width: 22px; height: 22px; flex-shrink: 0; }
.mini-ring .track { fill: none; stroke: rgba(138,122,114,.28); stroke-width: 4.5; }
.mini-ring .arc {
  fill: none; stroke: var(--leaf); stroke-width: 4.5; stroke-linecap: round;
  stroke-dasharray: 100;
  transform: rotate(-90deg); transform-origin: 50% 50%;
  animation: draw 1.2s .4s cubic-bezier(.2,.7,.2,1) backwards;
}
@keyframes draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .mini-ring .arc { stroke-dashoffset: 0; } }

/* ---------- sections ---------- */
section { padding: 64px 0; }
section.alt { background: #FDFAF4; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 36px; }
.step .num {
  font-family: "Fraunces", Georgia, serif; font-size: 2rem; color: var(--terracotta);
  font-weight: 600;
}
.step p { font-size: .98rem; color: var(--mushroom); }
.step h3 { margin-top: 6px; }

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 36px; }
.card {
  background: var(--card); border-radius: var(--radius); padding: 26px;
  box-shadow: 0 4px 14px rgba(43,30,24,.06);
}
.card p { font-size: .95rem; color: var(--mushroom); }
.dot { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 14px; font-size: 1.2rem; }
.dot.t { background: rgba(222,107,72,.14); }
.dot.l { background: rgba(111,154,78,.16); }
.dot.b { background: rgba(91,108,158,.14); }

.shots { display: flex; gap: 28px; justify-content: center; margin-top: 40px; flex-wrap: wrap; }
.shots img { width: 250px; border-radius: 26px; box-shadow: 0 14px 36px rgba(43,30,24,.14); }

.privacy-strip { text-align: center; }
.privacy-strip h2 { margin-bottom: .3em; }
.privacy-strip p { max-width: 56ch; margin: 0 auto 24px; }

/* ---------- prose pages (support / privacy) ---------- */
.prose { max-width: 760px; padding: 40px 0 80px; }
.prose header.page { margin-bottom: 36px; }
.prose header.page p { color: var(--mushroom); font-size: 1.05rem; max-width: 58ch; }
.prose h2 { margin-top: 2em; }
.prose h3 { margin-top: 1.6em; }
.prose p, .prose li { margin-top: .7em; }
.prose ul { padding-left: 1.3em; }
.notice {
  background: var(--card); border-left: 5px solid var(--leaf);
  border-radius: 12px; padding: 18px 22px; margin: 24px 0;
}
.contact-card {
  background: var(--card); border-radius: var(--radius); padding: 26px;
  display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
  box-shadow: 0 4px 14px rgba(43,30,24,.06); margin: 26px 0 10px;
}
.contact-card .dot { margin: 0; flex-shrink: 0; }
.contact-card a { font-weight: 800; font-size: 1.05rem; }
.contact-card small { display: block; color: var(--mushroom); }

details {
  background: var(--card); border-radius: 14px; padding: 18px 22px; margin-top: 12px;
  box-shadow: 0 3px 10px rgba(43,30,24,.05);
}
details summary { font-weight: 800; cursor: pointer; }
details summary::marker { color: var(--terracotta); }
details p { margin-top: .8em; color: #5d4f49; font-size: .97rem; }

/* ---------- footer ---------- */
footer.site { background: var(--roast); color: #CFC5BC; padding: 44px 0; margin-top: 40px; }
footer.site .wrap { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
footer.site a { color: #F3EDE7; }
footer.site small { display: block; margin-top: 8px; color: #8f857d; }

@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; gap: 44px; padding-top: 28px; text-align: center; }
  .hero p.lead { margin-inline: auto; }
  .hero .actions { justify-content: center; }
  .steps, .grid { grid-template-columns: 1fr; }
  nav.site a { margin-left: 16px; font-size: .9rem; }
}