:root {
  /* Color Palette: #344CB7, #577BC1, #FFEB00, #F2F2F2 */
  --primary-color: #344CB7;
  --primary-dark: #000957;
  --secondary-color: #577BC1;
  --bg-color: #F2F2F2;
  --text-color: #333333;
  --accent-color: #FFEB00;
  --accent-dark: #F39C12;
  --border-color: rgba(52, 76, 183, 0.2);
  --highlight-color: #D35400; /* Complementary dark orange */
  
  --font-heading: 'Oswald', sans-serif;
  --font-body: 'Roboto', sans-serif;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-body);
    margin: 0;
}

.font-heading { font-family: var(--font-heading); }
.font-body { font-family: var(--font-body); }

.bg-pattern {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='20' cy='20' r='10' fill='%23344CB7' fill-opacity='1'/%3E%3C/svg%3E");
}

.header-section {
    background-color: #FFFFFF;
    border-bottom: 3px solid var(--accent-color);
}
.logo-icon { color: var(--primary-color); }
.logo-title { color: var(--primary-dark); }
.bg-accent { background-color: var(--accent-color); }
.bg-primary { background-color: var(--primary-color); }

.bg-panel { background-color: #FFFFFF; }
.border-panel { border: 1px solid var(--border-color); }
.text-primary { color: var(--primary-color); }

.trust-badge {
    background-color: var(--bg-color);
    border-left: 4px solid var(--primary-color);
    color: var(--primary-dark);
}

.price-tag { color: var(--primary-dark); }

.btn-buy {
    background-color: var(--accent-color);
    color: var(--primary-dark);
    box-shadow: 0 4px 15px rgba(255, 235, 0, 0.4);
}
.btn-buy:hover { background-color: var(--accent-dark); color: #FFF; }

.info-card, .benefits-card { background-color: #FFFFFF; }

.icon-box {
    background-color: var(--secondary-color);
    color: #FFFFFF;
}

.cta-banner {
    background-color: var(--highlight-color);
    color: #FFFFFF;
    border: 2px dashed #FFFFFF;
}
.banner-text { text-shadow: 2px 2px 4px rgba(0,0,0,0.3); }

.reviews-wrapper {
    background-color: var(--primary-dark);
    color: #FFFFFF;
}
.review-item {
    background-color: var(--primary-color);
    border: 1px solid var(--secondary-color);
}
.avatar {
    background-color: var(--accent-color);
    color: var(--primary-dark);
}

.footer-area {
    background-color: var(--primary-color);
    color: #FFFFFF;
}