/* ==============================================================
   1. GLOBAL BLUE + YELLOW ACCENT PALETTE
   ============================================================== */
:root {
    --blue-primary: #1565c0;     /* Deep blue */
    --blue-dark: #0d47a1;       /* Darker blue for hover */
    --blue-light: #42a5f5;      /* Lighter blue for gradients */
    --yellow-accent: #ffeb3b;   /* Bright yellow for small accents */
    --blue-bg: #e3f2fd;         /* Very light blue background */
    --gray-light: #fafafa;
    --text-dark: #212121;
    --text-light: #ffffff;
}

/* ==============================================================
   2. TYPOGRAPHY
   ============================================================== */
body {font-family: 'Inter', system-ui, sans-serif; color: var(--text-dark);}
h1, h2, h3 {font-weight: 700; line-height: 1.2;}
.text-blue {color: var(--blue-primary);}

/* ==============================================================
   3. HERO (full-bleed blue overlay)
   ============================================================== */
.hero-blue {
    position: relative;
    min-height: 55vh;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    color: var(--text-light);
}
.hero-blue__inner {max-width: 1200px; margin: auto; padding: 0 1.5rem;}
.hero-blue__title {font-size: clamp(2rem, 5vw, 3.5rem); margin-bottom: .5rem;}
.hero-blue__lead {font-size: 1.25rem; opacity: .95;}

/* ==============================================================
   4. GRID LAYOUT
   ============================================================== */
.grid--product {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr;
}
@media (min-width: 992px) {
    .grid--product {grid-template-columns: 2fr 1fr;}
}

/* ==============================================================
   5. GLASS-MORPHISM CARD (main plan)
   ============================================================== */
.card-glass {
    background: rgba(255,255,255,.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 1.25rem;
    box-shadow: 0 12px 32px rgba(0,0,0,.1);
    overflow: hidden;
    transition: transform .3s ease;
}
.card-glass:hover {transform: translateY(-8px);}
.card-glass__header {padding: 2rem 2rem 0;}
.card-glass__title {font-size: 2rem; color: var(--blue-primary);}
.card-glass__body {padding: 0 2rem 2rem;}
.card-glass__desc {margin-bottom: 1.5rem; line-height: 1.7;}
.rich-content {line-height: 1.8;}

/* ==============================================================
   6. LISTS
   ============================================================== */
.list-check {list-style:none; padding:0; margin:1.5rem 0;}
.list-check li {
    position:relative; padding-left:2rem; margin-bottom:.75rem;
    font-weight:500;
}
.list-check li::before {
    content:"✓";                          /* Real checkmark */
    position:absolute; left:0; 
    color: var(--yellow-accent);          /* Yellow checkmark */
    font-weight:900; font-size: 1.1em;
}
.list-links li {margin-bottom:.6rem;}
.list-links a {
    color: var(--blue-primary); 
    text-decoration:none;
    font-weight:500; 
    transition:color .2s;
}
.list-links a:hover {color: var(--blue-dark);}

/* ==============================================================
   7. BUTTONS
   ============================================================== */
.btn {
    display:inline-block; padding:.85rem 1.8rem;
    border-radius:.75rem; font-weight:600;
    text-align:center; text-decoration:none;
    cursor:pointer; transition:all .25s ease;
}
.btn--primary {
    background: var(--blue-primary);
    color: var(--text-light);
    box-shadow: 0 4px 12px rgba(21, 101, 192, .4); /* Blue shadow */
}
.btn--primary:hover {
    background: var(--blue-dark); 
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(13, 71, 161, .5);
}
.btn--secondary {
    background: var(--gray-light);
    color: var(--text-dark);
    border:1px solid #ddd;
}
.btn--secondary:hover {background:#e0e0e0;}
.btn--lg {padding:1rem 2.2rem; font-size:1.1rem;}
.btn--pulse {
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0% {box-shadow:0 0 0 0 rgba(255, 235, 59, .7);}   /* Yellow pulse */
    70% {box-shadow:0 0 0 12px rgba(255, 235, 59, 0);}
    100% {box-shadow:0 0 0 0 rgba(255, 235, 59, 0);}
}

/* ==============================================================
   8. SIDEBAR
   ============================================================== */
.sidebar-blue {
    background: var(--blue-bg);
    padding: 1.75rem;
    border-radius: 1rem;
    box-shadow: 0 4px 12px rgba(0,0,0,.05);
}
.sidebar-blue__title {
    font-size:1.4rem; margin-bottom:1rem;
    color: var(--blue-primary);
}

/* ==============================================================
   9. CTA SECTION
   ============================================================== */
.cta-blue {
    background: linear-gradient(135deg, var(--blue-primary), var(--blue-light));
    color: var(--text-light);
    padding: 4rem 0;
    text-align:center;
}
.cta-blue__title {font-size:2.2rem; margin-bottom:.5rem;}
.cta-blue__text {font-size:1.15rem; opacity:.95;}

/* ==============================================================
   10. MISC
   ============================================================== */
.section {padding: 3rem 0;}
.container {max-width:1200px; margin:auto; padding:0 1rem;}
.text-center {text-align:center;}
.mt-4 {margin-top:1rem;}

.hero-red {
  background: linear-gradient(135deg, rgba(13, 71, 161, 0.92), rgba(25, 118, 210, 0.85));
  background-size: cover;
  background-position: center;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
  padding: 6rem 1.5rem;
}

.hero-red__title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: #fff;
}

.hero-red__lead {
  font-size: 1.2rem;
  opacity: 0.95;
  color: #f0f0f0;
}