:root {
  --scloudfy-primary: #146ef5;
  --scloudfy-primary-dark: #0a46a3;
  --scloudfy-secondary: #30c7b5;
  --scloudfy-dark: #10233f;
  --scloudfy-text: #44546a;
  --scloudfy-light: #f4f8fc;
  --scloudfy-white: #ffffff;
}

html {
  scroll-behavior: smooth;
}

body {
  color: var(--scloudfy-text);
}

.scloudfy-hero {
  min-height: 680px;
  display: flex;
  align-items: center;
  background:
    linear-gradient(
      110deg,
      rgba(12, 42, 82, 0.94),
      rgba(20, 110, 245, 0.78)
    ),
    url("/assets/images/slider/slider1.jpg") center / cover no-repeat;
}

.scloudfy-hero h1 {
  color: var(--scloudfy-white);
  font-size: clamp(2.6rem, 5vw, 5.2rem);
  font-weight: 800;
  line-height: 1.08;
}

.scloudfy-hero p {
  max-width: 680px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.8rem;
  line-height: 1.7;
}

.scloudfy-button {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 6px;
  background: var(--scloudfy-primary);
  color: var(--scloudfy-white);
  font-weight: 700;
  text-decoration: none;
}

.scloudfy-button:hover {
  background: var(--scloudfy-primary-dark);
  color: var(--scloudfy-white);
  text-decoration: none;
}

.scloudfy-button--outline {
  margin-left: 12px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  background: transparent;
}

.scloudfy-section {
  padding: 90px 0;
}

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