:root {
  /* Варіант 3: Модерн (Soft Purple) */
  --primary-color: #4C1D95; /* Deep Purple */
  --secondary-color: #8B5CF6; /* Violet */
  --accent-color: #D01257; /* Pinkish Red */
  --light-color: #FDFAFF; /* Very light purple white */
  --dark-color: #0F1021;
  
  --hover-color: #5B21B6;
  --background-color: #F3EBFF;
  --text-color: #4B5563;
  --highlight-color: #577BC1;
  
  --border-color: rgba(76, 29, 149, 0.1);
  
  --font-heading: 'Montserrat', sans-serif;
  --font-body: 'Poppins', sans-serif;
  
  --container-width: 1300px;
  --product-width: 400px;
}

body {
    font-family: var(--font-body);
    color: var(--text-color);
    background-color: var(--background-color);
    overflow-x: hidden;
}

h1, h2, h3 {
    font-family: var(--font-heading);
}

.custom-container {
    max-width: var(--container-width);
}

.color-primary { color: var(--primary-color); }
.color-accent { color: var(--accent-color); }

.gradient-text {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.glass-panel {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    border: 1px solid white;
    box-shadow: 0 20px 40px rgba(76, 29, 149, 0.05);
}

.highlight-stripe {
    background-color: var(--light-color);
    border-left: 4px solid var(--accent-color);
    color: var(--primary-color);
}

.cta-button {
    background: linear-gradient(135deg, #9F7AEA 0%, #7928CA 100%);
}

.cta-button:hover {
    filter: brightness(110%);
}

.feature-pill {
    background-color: white;
    border-color: var(--border-color);
}

.product-img {
    width: var(--product-width);
    max-width: 100%;
}

/* Abstract Background Shapes */
.background-shape-1 {
    position: absolute;
    top: -10%;
    right: -5%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(178, 100, 254, 0.1) 0%, rgba(255,255,255,0) 70%);
    z-index: 0;
    border-radius: 50%;
}

.background-shape-2 {
    position: absolute;
    bottom: -10%;
    left: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(87, 123, 193, 0.1) 0%, rgba(255,255,255,0) 70%);
    z-index: 0;
    border-radius: 50%;
}