:root {
  --primary-color: #2980B9; /* From palette */
  --secondary-color: #1F618D; /* Darker variation */
  --accent-color: #5DADE2; /* Lighter variation */
  --light-color: #ECF0F1; /* From palette */
  --dark-color: #0F1021; /* From palette */
  --gradient-primary: linear-gradient(135deg, #5DADE2 0%, #2980B9 100%);
  --hover-color: #1B4F72; /* Darker hover */
  --background-color: #F2F2F2; /* From palette */
  --text-color: #4B5563;
  --border-color: rgba(41, 128, 185, 0.2);
  --divider-color: rgba(31, 97, 141, 0.1);
  --shadow-color: rgba(31, 97, 141, 0.1);
  --highlight-color: #F1C40F; /* Complementary color from palette */
  --main-font: 'Roboto Condensed', sans-serif;
  --alt-font: 'Lato', sans-serif;
}

body {
  font-family: var(--alt-font);
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 800" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color: var(--light-color);stop-opacity:0.1" /><stop offset="100%" style="stop-color: var(--accent-color);stop-opacity:0.05" /></linearGradient></defs><rect width="1440" height="800" fill="url(#grad1)" /><circle cx="200" cy="200" r="100" fill="none" stroke="var(--accent-color)" stroke-width="2" opacity="0.3" /><circle cx="1200" cy="600" r="150" fill="none" stroke="var(--primary-color)" stroke-width="2" opacity="0.3" /><path d="M0,800 C300,700 600,750 1440,600" fill="none" stroke="var(--secondary-color)" stroke-width="3" opacity="0.2" /></svg>') no-repeat center center fixed;
  background-size: cover;
  color: var(--text-color);
}

header, footer {
  background-color: var(--dark-color);
  color: var(--light-color);
}

header svg, footer svg {
  fill: var(--accent-color);
}

h1, h2, h3 {
  font-family: var(--main-font);
}

.guarantee-block {
  background-color: var(--light-color);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 2px 4px var(--shadow-color);
}

.testimonial-item {
  background-color: var(--secondary-color);
  color: var(--light-color);
  border: 1px solid var(--border-color);
  border-radius: 8px;
}

.feature-item svg {
  fill: var(--primary-color);
}

@media (max-width: 768px) {
  .desktop-only {
    display: none;
  }
  footer ul {
    text-align: center;
  }
}