/* ABERO base styles: tokens, reset, typography, and global layout */
:root {
  --navy: #0e2c5a;
  --navy-2: #175199;
  --navy-3: #0e223d;
  --white: #ffffff;
  --soft-white: #f8fbff;
  --light-bg: #f3f7fb;
  --card-bg: #ffffff;
  --text: #071427;
  --muted: #526070;
  --muted-light: #c7d0dc;
  --border: #dbe5f0;
  --border-dark: rgba(255, 255, 255, 0.14);

  --blue: #1677ff;
  --cyan: #24d5f2;
  --magenta: #e32ee3;
  --purple: #9d55ff;

  --gradient-main: linear-gradient(135deg, #e32ee3 0%, #9d55ff 100%);
  --gradient-blue: linear-gradient(135deg, #24d5f2 0%, #1677ff 100%);

  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;

  --shadow-soft: 0 18px 50px rgba(17, 42, 80, 0.1);
  --shadow-card: 0 16px 40px rgba(9, 24, 46, 0.08);
  --shadow-dark: 0 24px 70px rgba(0, 0, 0, 0.28);

  --container: 1180px;
  --header-height: 72px;

  --font-main:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Arial, sans-serif;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-main);
  color: var(--text);
  background: var(--white);
  line-height: 1.55;
  overflow-x: hidden;
}

img,
video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.container {
  width: min(var(--container), calc(100% - 48px));
  margin: 0 auto;
}

section {
  padding: 88px 0;
}

.dark-section {
  background: var(--navy);
  color: var(--white);
}

.light-section {
  background: var(--light-bg);
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  max-width: 760px;
  margin-bottom: 22px;
  font-size: clamp(3.2rem, 7vw, 6.6rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
}

h2 {
  max-width: 760px;
  margin-bottom: 18px;
  font-size: clamp(2.2rem, 4vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.055em;
}

h3 {
  font-size: 1.15rem;
  line-height: 1.25;
  letter-spacing: -0.025em;
}

p {
  color: var(--muted);
  font-size: 1.05rem;
}

.dark-section p {
  color: rgba(255, 255, 255, 0.78);
}

.section-intro {
  max-width: 720px;
  margin-bottom: 42px;
  font-size: 1.15rem;
}

.two-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}

@media (max-width: 1100px) {
  :root {
    --container: 960px;
  }

  .two-column {
    grid-template-columns: 1fr;
    gap: 46px;
  }
}

@media (max-width: 820px) {
  .container {
    width: min(100% - 32px, var(--container));
  }

  section {
    padding: 68px 0;
  }

  h1 {
    font-size: clamp(3rem, 13vw, 4.8rem);
  }

  h2 {
    font-size: clamp(2rem, 9vw, 3rem);
  }
}