/* ============================================================
   СЕМЬЯ ДЕТЯМ — Design tokens
   Refined green system (brand green kept, lime tamed),
   orange reserved for donation/money only.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700;800&family=Golos+Text:wght@400;500;600;700&display=swap');

:root {
  /* — Green: brand anchor (original #1db318 refined into a scale) — */
  --green-50:  #f1f8ec;
  --green-100: #e3f1d8;
  --green-200: #c6e3ac;
  --green-300: #9fd07a;
  --green-400: #6fbb45;
  --green-500: #34a51f;   /* brand green — kin of original #1db318, less neon */
  --green-600: #2a8a1c;
  --green-700: #226e1a;
  --green-800: #1c5418;   /* deep — section backgrounds, headings on light */
  --green-900: #143a13;
  --green-950: #0d260e;   /* near-black forest green */

  /* — Orange: MONEY / DONATION ONLY — */
  --orange-50:  #fff4e2;
  --orange-100: #fde3bc;
  --orange-400: #f9a93a;
  --orange-500: #f38d04;  /* original donate orange */
  --orange-600: #d97a00;
  --orange-700: #b46300;

  /* — Warm-tinted neutrals — */
  --ink:        #16221a;  /* primary text — warm near-black green */
  --body:       #3f4c44;  /* body copy */
  --muted:      #6c7a71;  /* secondary text */
  --faint:      #97a39b;  /* captions, meta */
  --line:       #e4eae3;  /* hairline borders */
  --line-2:     #eef2ec;
  --paper:      #ffffff;
  --paper-soft: #f6f9f4;  /* soft off-white, green-tinted */
  --paper-warm: #faf8f3;

  /* — Semantic — */
  --bg:         var(--paper);
  --surface:    var(--paper);
  --brand:      var(--green-500);
  --brand-deep: var(--green-800);
  --donate:     var(--orange-500);

  /* — Type — */
  --font-display: 'Onest', system-ui, sans-serif;
  --font-body:    'Golos Text', system-ui, sans-serif;

  /* — Radius — */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* — Shadow (soft, low) — */
  --shadow-sm: 0 1px 2px rgba(20,42,19,.05), 0 2px 8px rgba(20,42,19,.04);
  --shadow-md: 0 4px 14px rgba(20,42,19,.07), 0 1px 3px rgba(20,42,19,.05);
  --shadow-lg: 0 18px 48px rgba(20,42,19,.13), 0 4px 12px rgba(20,42,19,.06);

  /* — Layout — */
  --maxw: 1200px;
  --gutter: 40px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--body);
  background: var(--bg);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* — Reusable type scale utilities — */
.display { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; line-height: 1.02; }
.eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
}

/* — Container — */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

/* ============================================================
   COMPONENTS — shared across pages
   ============================================================ */

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 600; font-size: 16px;
  padding: 14px 26px; border-radius: var(--r-pill);
  border: 1.5px solid transparent; cursor: pointer;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease, border-color .15s ease;
  white-space: nowrap; line-height: 1;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--green  { background: var(--brand); color: #fff; box-shadow: var(--shadow-sm); }
.btn--green:hover  { background: var(--green-600); box-shadow: var(--shadow-md); }

.btn--donate { background: var(--donate); color: #fff; box-shadow: 0 6px 18px rgba(243,141,4,.28); }
.btn--donate:hover { background: var(--orange-600); }

.btn--outline { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--outline:hover { border-color: var(--brand); color: var(--brand); }

.btn--ghost { background: var(--green-50); color: var(--green-700); }
.btn--ghost:hover { background: var(--green-100); }

.btn--lg { font-size: 18px; padding: 17px 32px; }
.btn--sm { font-size: 14px; padding: 10px 18px; }

/* Arrow link */
.arrow-link {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-family: var(--font-display); font-weight: 600; color: var(--brand);
  font-size: 16px;
}
.arrow-link svg { transition: transform .2s ease; }
.arrow-link:hover svg { transform: translateX(4px); }

/* Tag / badge */
.tag {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-family: var(--font-display); font-weight: 600; font-size: 13px;
  padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--green-50); color: var(--green-700);
}
.tag--solid { background: var(--brand); color: #fff; }
.tag--orange { background: var(--orange-50); color: var(--orange-700); }

/* Card */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

/* The logo mark: two overlapping circles = взрослый + ребёнок */
.brandmark { display: inline-flex; align-items: center; gap: 11px; }
/* Family of three: two adults + a child, overlapping at one intersection */
.brandmark__icon { position: relative; width: 40px; height: 32px; flex: none; }
.brandmark__icon span, .brandmark__icon::after {
  position: absolute; border-radius: 50%; content: "";
}
.brandmark__icon span:nth-child(1) { left: 2px;  top: 2px;  width: 22px; height: 22px; background: var(--green-600); }  /* adult */
.brandmark__icon span:nth-child(2) { left: 16px; top: 2px;  width: 22px; height: 22px; background: var(--green-500); }  /* adult */
.brandmark__icon::after            { left: 12px; top: 16px; width: 16px; height: 16px; background: var(--green-300); }  /* child — on top */
.brandmark__word {
  font-family: var(--font-display); font-weight: 800; font-size: 19px;
  color: var(--ink); letter-spacing: -0.02em; line-height: 1; white-space: nowrap;
}
.brandmark__word b { color: var(--brand); font-weight: 800; }

/* Abstract illustrative block — on-brand geometric composition */
.illus {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  background: linear-gradient(140deg, var(--green-100), var(--green-50));
}
.illus::before, .illus::after { content: ""; position: absolute; border-radius: 50%; }
.illus__cap {
  position: absolute; left: 14px; bottom: 12px; z-index: 3;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px; letter-spacing: .02em; color: var(--green-800);
  background: rgba(255,255,255,.7); padding: 4px 9px; border-radius: 6px;
  backdrop-filter: blur(2px);
}