:root {
  --primary-color: #8E44AD;
  --secondary-color: #16A085;
  --accent-color: #D35400;
  --light-color: #FFFFFF;
  --dark-color: #2C3D4F;
  --gradient-primary: linear-gradient(90deg, #8E44AD 0%, #5E1675 100%);
  --hover-color: #5E1675;
  --background-color: #F2F2F2;
  --text-color: #333333;
  --border-color: rgba(142, 68, 173, 0.2);
  --divider-color: rgba(44, 61, 79, 0.1);
  --shadow-color: rgba(0, 0, 0, 0.1);
  --highlight-color: #ECE852;
  --main-font: 'Oswald', sans-serif;
  --alt-font: 'Poppins', sans-serif;
  --container-width: 1400px;
  --product-image-width: 400px;
}

html, body { margin: 0; padding: 0; min-height: 100vh; display: flex; flex-direction: column; }

body {
  background-color: var(--background-color);
  color: var(--text-color);
  font-family: var(--alt-font);
  background-image: url("data:image/svg+xml,%3Csvg width='52' height='26' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%238e44ad' fill-opacity='0.04'%3E%3Cpath d='M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

h1, h2, h3, h4 { font-family: var(--main-font); text-transform: uppercase; }

.content-box { background-color: var(--light-color); border: 2px solid var(--border-color); border-radius: 4px; box-shadow: 2px 2px 0px var(--border-color); }
.highlight-box { background-color: var(--highlight-color); color: var(--dark-color); border-bottom: 4px solid var(--accent-color); }

.btn-primary { background: var(--gradient-primary); color: #FFFFFF; font-family: var(--main-font); font-size: 1.2rem; }
.btn-primary:hover { background: var(--hover-color); opacity: 0.9; }

.icon-circle { background-color: var(--dark-color); color: var(--highlight-color); }
.testimonial-bg { background-color: var(--dark-color); color: var(--light-color); }

header { background-color: var(--dark-color); color: var(--highlight-color); border-bottom: 3px solid var(--primary-color); }
footer { background-color: var(--dark-color); color: var(--light-color); border-top: 3px solid var(--primary-color); }