/* ═══════════════════════════════════════════════════════════════
   BASE — Custom Properties · Reset · Typography · Layout
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Custom Properties ───────────────────────────────────── */
:root {
  --font-heading: "Onest", sans-serif;
  --font-body: "IBM Plex Sans", sans-serif;
  --primary-dark: #1A2238;
  --secondary-dark: #27304A;
  --graphite-text: #2B2F3A;
  --primary: #2F5BFF;
  --secondary: #6B4FD8;
  --deep-indigo: #4A4FA3;
  --background: #F6F8FC;
  --gray-blue: #EAEFF8;
  --tint: #F1EEFB;
  --border: #CDD5E3;
  --muted: #667089;
  --signal: #F26A5A;
  --magenta: #D95C8A;
  --header-height: 122px;
}

@media (max-width: 768px) {
  :root {
    --header-height: 53px;
  }
}

/* ── 2. Reset ───────────────────────────────────────────────── */
html {
  margin-top: 0 !important;
}

*,
*::before,
*::after {
  padding: 0;
  appearance: none;
  margin: 0;
  background: none;
  border: none;
  outline: transparent;
  list-style: none;
  box-sizing: border-box;
  font-family: var(--font-body);
  color: var(--primary-dark);
  text-decoration: none;
}

body {
  background: var(--background);
  overflow-x: hidden;
}

/* ── 3. Layout ──────────────────────────────────────────────── */
.container {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 0 40px;
}

@media (max-width: 1080px) {
  .container { padding: 0 20px; }
}

@media (max-width: 768px) {
  .container { padding: 0 10px; }
}

.main__content {
  display: flex;
  flex-direction: column;
  gap: 140px;
  padding: 140px 0 0;
}

@media (max-width: 1080px) {
  .main__content { gap: 100px; padding: 100px 0 0; }
}

@media (max-width: 768px) {
  .main__content { gap: 60px; padding: 60px 0 0; }
}

/* ── 4. Page background modifiers ──────────────────────────── */
.frontpage {
  background-image: url('../img/bg-frontpage.png');
  background-image: image-set(url('../img/bg-frontpage.webp') type('image/webp'), url('../img/bg-frontpage.png') type('image/png'));
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: top;
}

.other-page {
  background-image: url('../img/bg-other-page.png');
  background-image: image-set(url('../img/bg-other-page.webp') type('image/webp'), url('../img/bg-other-page.png') type('image/png'));
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top;
}

@media (max-width: 768px) {
  .other-page {
    background-position: -20% center;
    background-size: 100% 140%;
    background-image: url('../img/bg-other-page-2.png');
    background-image: image-set(url('../img/bg-other-page-2.webp') type('image/webp'), url('../img/bg-other-page-2.png') type('image/png'));
  }
}

/* ── 5. Typography scale ────────────────────────────────────── */
.title-1 { font-weight: 700; font-size: 48px; line-height: 56px; font-family: var(--font-heading); }
.title-2 { font-weight: 600; font-size: 36px; line-height: 44px; font-family: var(--font-heading); }
.title-3 { font-weight: 600; font-size: 28px; line-height: 36px; font-family: var(--font-heading); }
.title-4 { font-weight: 500; font-size: 22px; line-height: 30px; font-family: var(--font-heading); }
.text-l  { font-weight: 400; font-size: 18px; line-height: 28px; font-family: var(--font-body); }
.text-m  { font-weight: 400; font-size: 16px; line-height: 24px; font-family: var(--font-body); }
.text-s  { font-weight: 400; font-size: 14px; line-height: 22px; font-family: var(--font-body); }
.text-button   { font-weight: 500; font-size: 16px; line-height: 16px; font-family: var(--font-heading); }
.text-caption  { font-weight: 400; font-size: 13px; line-height: 18px; font-family: var(--font-body); }
.text-navigation { font-size: 15px; line-height: 20px; font-weight: 500; font-family: var(--font-heading); }

@media (max-width: 1080px) {
  .title-1     { font-size: 32px; line-height: 40px; }
  .title-2     { font-size: 26px; line-height: 34px; }
  .title-3     { font-size: 22px; line-height: 30px; }
  .title-4     { font-size: 18px; line-height: 26px; }
  .text-l      { font-size: 16px; line-height: 24px; }
  .text-m      { font-size: 15px; line-height: 22px; }
  .text-s      { font-size: 13px; line-height: 20px; }
  .text-button { font-size: 15px; line-height: 18px; }
}

/* ── 6. Section utilities ───────────────────────────────────── */
.section-badge {
  position: relative;
  width: max-content;
  margin-bottom: 60px;
}

.section-badge::after {
  position: absolute;
  display: block;
  content: '';
  width: 100%;
  left: 0;
  top: calc(100% + 10px);
  border-bottom: 1px solid #4A4FA3;
}

.section-group {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (max-width: 1080px) {
  .section-badge { margin-bottom: 40px; }
}

@media (max-width: 768px) {
  .section-badge { margin-bottom: 20px; }
  .section-group { gap: 10px; }
}