/* THEME STYLING CONFIGURATION */
:root {
  /* Dynamic Palette: Light Theme with energetic healthcare touch points */
  --qu-bg: #FAF9F6;              /* Soft warm background */
  --qu-surface: #FFFFFF;         /* Solid white for cards/surfaces */
  --qu-tone-primary: #125C34;     /* Deep rich green */
  --qu-tone-hover: #19462D;       /* Dark forest green for interactions */
  --qu-accent: #E05A47;           /* Energizing soft terracotta/coral */
  --qu-ink: #1B211E;              /* Sophisticated dark green-black text */
  --qu-muted: #5C6761;            /* Warm grays for subtitle hierarchy */
  --qu-border: #E8EDE9;           /* Mild border tint */
  
  /* Fonts */
  --font-display: 'Montserrat', sans-serif;
  --font-body: 'Inter', sans-serif;
  
  /* Layout Specs */
  --qu-max-width: 1180px;
  --qu-radius: 14px;              /* Soft Border Radius style */
  --qu-radius-sm: 6px;
  --qu-shadow: 0 10px 30px -5px rgba(18, 92, 52, 0.05), 0 5px 15px -3px rgba(0, 0, 0, 0.03); /* Soft, raised shadow */
}

/* BASE STYLING */
body {
  font-family: var(--font-body);
  background-color: var(--qu-bg);
  color: var(--qu-ink);
  line-height: 1.6;
}

/* Custom class wrapper instead of standard `.container` */
.qu-main-frame {
  width: 100%;
  max-width: var(--qu-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* HEADER STYLE */
.qu-header-main {
  background-color: var(--qu-surface);
  border-bottom: 1px solid var(--qu-border);
}

.qu-brand-icon {
  width: 2rem;
  height: 2rem;
  color: var(--qu-tone-primary);
}

.qu-logo-txt {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.05em;
  color: var(--qu-tone-primary);
}

/* HEADINGS SETUP */
.qu-main-heading {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.25rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-transform: uppercase; /* uppercase preference */
  color: var(--qu-tone-primary);
  margin-bottom: 1.5rem;
}

.qu-sec-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.85rem;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--qu-tone-primary);
}

@media (min-width: 768px) {
  .qu-main-heading {
    font-size: 3rem;
  }
  .qu-sec-heading {
    font-size: 2.25rem;
  }
}

/* SPLIT WORKFLOW (Preset A - Split Sticky) */
.qu-prod-split-layout {
  position: relative;
}

@media (min-width: 768px) {
  .qu-prod-split-layout {
    display: flex;
    gap: 4rem;
  }
  
  .qu-sticky-figure-wing {
    width: 42%;
    position: sticky;
    top: 2rem;
    align-self: flex-start;
  }
  
  .qu-prod-details-wing {
    width: 58%;
  }
}

/* IMAGE GRAPHIC BOX */
.qu-image-backdrop {
  background-color: var(--qu-surface);
  border: 1px solid var(--qu-border);
  border-radius: var(--qu-radius);
  padding: 3rem;
  box-shadow: var(--qu-shadow);
  display: flex;
  justify-content: center;
  align-items: center;
}

.qu-image-main {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 15px 25px rgba(0,0,0,0.08));
}

/* GENERAL CARDS & MODULES (No standard class names allowed) */
.qu-info-plate {
  background-color: var(--qu-surface);
  border-radius: var(--qu-radius);
  box-shadow: var(--qu-shadow);
  border: 1px solid var(--qu-border);
}

.qu-prose {
  color: var(--qu-muted);
  font-size: 1.05rem;
}

/* Bullet list (Traits) styling */
.qu-trait-deck {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.qu-trait-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 500;
}

.qu-trait-item svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--qu-tone-primary);
  flex-shrink: 0;
}

/* GUARANTEE BADGE - icon-left style */
.qu-security-badge-left {
  display: inline-flex;
  align-items: flex-start;
  gap: 1rem;
  background-color: rgba(18, 92, 52, 0.04);
  padding: 1rem;
  border-radius: var(--qu-radius);
  color: var(--qu-tone-primary);
  font-size: 0.95rem;
  font-weight: 500;
}

.qu-security-badge-left svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* CURRENCY TAG ELEMENT */
.qu-price-tag-element {
  display: inline-flex;
  align-items: center;
  background-color: var(--qu-accent);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.75rem;
  padding: 0.35rem 1.75rem;
  border-radius: var(--qu-radius-sm);
  position: relative;
  /* Tag Shape */
  clip-path: polygon(12px 0%, 100% 0%, 100% 100%, 12px 100%, 0% 50%);
  padding-left: 2rem;
}

.qu-price-tag-element::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background-color: var(--qu-bg);
  border-radius: 50%;
}

/* ACTION TRIGGERS */
.qu-purchase-box {
  background-color: var(--qu-surface);
  border: 1px solid var(--qu-border);
  border-radius: var(--qu-radius);
  box-shadow: var(--qu-shadow);
}

.qu-action-anchor {
  display: inline-block;
  background-color: var(--qu-tone-primary);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1rem 2.5rem;
  border-radius: var(--qu-radius);
  transition: background-color 0.2s ease, transform 0.1s ease;
}

.qu-action-anchor:hover {
  background-color: var(--qu-tone-hover);
}

.qu-action-anchor:active {
  transform: scale(0.98);
}

/* BACKGROUND SVG DECORATION */
.qu-bg-pattern {
  position: absolute;
  top: 5%;
  left: -10%;
  z-index: 0;
  color: var(--qu-tone-primary);
  pointer-events: none;
}

/* HORIZONTAL FEATURES ROWS */
.qu-merit-strip {
  background-color: var(--qu-bg);
  padding: 1.75rem;
  border-radius: var(--qu-radius);
  border: 1px solid var(--qu-border);
  transition: transform 0.25s ease;
}

.qu-merit-strip:hover {
  transform: translateY(-2px);
}

.qu-merit-icon-housing {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background-color: var(--qu-surface);
  color: var(--qu-tone-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--qu-shadow);
}

.qu-merit-icon-housing svg {
  width: 1.75rem;
  height: 1.75rem;
}

/* TESTIMONIALS (3-Column Grid, Custom Classes) */
.qu-reviews-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .qu-reviews-layout {
    grid-template-columns: repeat(3, 1fr);
  }
}

.qu-critique-plate {
  background-color: var(--qu-surface);
  border-radius: var(--qu-radius);
  box-shadow: var(--qu-shadow);
  border: 1px solid var(--qu-border);
  border-top: 4px solid var(--qu-accent); /* Colored border top (4px) */
  transition: transform 0.2s ease;
}

.qu-critique-plate:hover {
  transform: translateY(-4px);
}

.qu-avatar-circle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: var(--qu-tone-primary);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
}

.qu-stars {
  color: #FFC107;
  font-size: 1.1rem;
}

/* FOOTER SETUP */
.qu-footer-main {
  background-color: var(--qu-ink);
  color: var(--qu-surface);
}

.qu-footer-main .qu-logo-txt,
.qu-footer-main .qu-brand-icon {
  color: var(--qu-surface);
}

.qu-footer-main nav a {
  color: rgba(255, 255, 255, 0.75);
}

.qu-footer-main nav a:hover {
  color: var(--qu-surface);
}