/* ============================================================
   DESIGN SYSTEM — slavarybalka.com
   Inspired by ElevenLabs. Fonts: DM Sans 200/300/400/500 + Inter 400/500/600
   ============================================================ */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,200;0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,200&family=Inter:wght@400;500;600&display=swap');

/* ── Custom properties ── */
:root {
  /* Colors */
  --bg:          #ffffff;
  --bg-soft:     #f5f5f5;
  --bg-warm:     #f5f2ef;
  --text:        #000000;
  --text-2:      #4e4e4e;
  --text-3:      #777169;
  --border:      rgba(0, 0, 0, 0.06);
  --border-s:    #e5e5e5;

  /* Shadows */
  --shadow-card: rgba(0,0,0,0.06) 0px 0px 0px 1px,
                 rgba(0,0,0,0.04) 0px 2px 4px,
                 rgba(0,0,0,0.04) 0px 4px 8px;
  --shadow-warm: rgba(78,50,23,0.06) 0px 6px 16px,
                 rgba(0,0,0,0.06) 0px 0px 0px 1px;
  --shadow-inset: rgba(0,0,0,0.06) 0px 0px 0px 0.5px inset;

  /* Typography */
  --font-display: 'DM Sans', sans-serif;
  --font-body:    'Inter', sans-serif;

  /* Layout */
  --container:      720px;
  --container-wide: 1000px;
  --pad-x:          32px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  font-family: var(--font-body);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

/* ── Layout containers ── */
.container      { max-width: var(--container);      margin: 0 auto; padding: 0 var(--pad-x); }
.container-wide { max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--pad-x); }

/* ── Typography scale ── */
.display-hero {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(36px, 5vw, 52px);
  line-height: 1.06;
  letter-spacing: -1.2px;
  color: var(--text);
}

.display-section {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(28px, 4vw, 36px);
  line-height: 1.12;
  letter-spacing: -0.6px;
  color: var(--text);
}

.display-card {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.3px;
  color: var(--text);
}

.section-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-3);
  display: block;
  margin-bottom: 24px;
}

.body-lg {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0.14px;
  color: var(--text-2);
}

.body-md {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.72;
  letter-spacing: 0.14px;
  color: var(--text-2);
}

.body-sm {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.14px;
  color: var(--text-2);
}

.tag {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  letter-spacing: 0.7px;
  text-transform: uppercase;
  display: inline-block;
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1px;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: opacity 0.15s, box-shadow 0.15s;
  white-space: nowrap;
}

.btn-primary {
  background: var(--text);
  color: #fff;
  padding: 11px 22px;
  border-radius: 9999px;
}
.btn-primary:hover { opacity: 0.82; }

.btn-secondary {
  background: rgba(245, 242, 239, 0.9);
  color: var(--text);
  padding: 11px 22px;
  border-radius: 30px;
  box-shadow: var(--shadow-warm);
}
.btn-secondary:hover { box-shadow: rgba(78,50,23,0.10) 0px 8px 20px, rgba(0,0,0,0.08) 0px 0px 0px 1px; }

.btn-outline {
  background: var(--bg);
  color: var(--text);
  padding: 10px 22px;
  border-radius: 9999px;
  border: 1px solid var(--border-s);
  box-shadow: rgba(0,0,0,0.04) 0px 2px 4px;
}
.btn-outline:hover { box-shadow: var(--shadow-card); }

.btn-submit {
  background: var(--text);
  color: #fff;
  padding: 12px 28px;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font-body);
  cursor: pointer;
  border: none;
  transition: opacity 0.15s;
}
.btn-submit:hover { opacity: 0.82; }

/* ── Accessibility: focus states ── */
.btn:focus-visible,
.btn-submit:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
}

/* ── Horizontal rule ── */
.section-divider {
  border: none;
  border-top: 1px solid var(--border-s);
  margin: 0;
}

/* ── Sections ── */
.section        { padding: 96px 0; }
.section-soft   { padding: 96px 0; background: var(--bg-soft); }
.hero-section   { padding: 110px 0 72px; text-align: center; }

/* ── Button group ── */
.btn-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.btn-group.center { justify-content: center; }

/* ── Responsive ── */
@media (max-width: 768px) {
  :root { --pad-x: 20px; }
  .display-hero    { letter-spacing: -0.6px; }
  .display-section { font-size: 28px; }
  .section, .section-soft { padding: 64px 0; }
  .hero-section   { padding: 72px 0 48px; }
}