/* css/base.css */
/* Used by .logo-doc and .logo-ru in components.css */
@font-face {
  font-family: 'BerlinSansFB';
  src: url('../fonts/BerlinSansFBDemiBold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

:root {
  --primary:    #27AAE1;
  --secondary:  #27E1A7;
  --accent:     #E15427;
  --dark:       #1A7FA7;
  --light:      #B3E7FA;
  --bg:         #F5F7FA;
  --white:      #ffffff;
  --text:       #2B2D42;
  --text-sec:   #8D99AE;
  --border:     #e8eaf0;
  --radius:     8px;
  --radius-lg:  14px;
  --shadow:     0 4px 18px rgba(39,170,225,0.10);
  --shadow-sm:  0 1px 4px rgba(0,0,0,0.07);
  --transition: 0.2s ease;
  --secondary-text: #0d4d38;   /* dark green on secondary/badge backgrounds */
  --footer-muted:   #bdc3cf;   /* muted text in footer */
  --header-h:       66px;       /* header height — synced with mobile-nav top */
}

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

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--white);
  color: var(--text);
  line-height: 1.6;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--dark); }

h1 { font-size: 2.5rem; font-weight: 800; line-height: 1.18; }
h2 { font-size: 1.9rem; font-weight: 800; line-height: 1.25; }
h3 { font-size: 1.15rem; font-weight: 700; line-height: 1.35; }

p { color: var(--text-sec); line-height: 1.7; }

.container { max-width: 1020px; margin: 0 auto; padding: 0 1.5rem; }

.section { padding: 4.5rem 0; }
.section--gray { background: var(--bg); }

.section-label {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--primary);
  display: block; margin-bottom: 0.5rem;
}
.section-title { color: var(--text); margin-bottom: 0.65rem; }
.section-sub { max-width: 560px; margin-bottom: 2.5rem; }

/* Utilitare */
.text-center { text-align: center; }
.text-white { color: white; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }

@media (max-width: 768px) {
  h1 { font-size: 1.85rem; }
  h2 { font-size: 1.5rem; }
  .section { padding: 3rem 0; }
}