:root {
  
  --pomu-blue-deep:   #1373D6;  
  --pomu-blue:        #3DAEEC;  
  --pomu-blue-light:  #7ECEF4;  
  --pomu-blue-pale:   #EAF6FC;  
  --pomu-blue-text:   #1E6FA8;  
  --pomu-cream:       #FBF3E0;  
  --pomu-cream-light: #FFF9EF;  
  --pomu-ink:         #3A3A4A;  
  --pomu-border:      #C3C7C9;  

  --bg-page:            var(--pomu-cream-light);
  --bg-section:         var(--pomu-cream-light);
  --bg-section-alt:     var(--pomu-cream);

  --surface-card:       #FFFFFF;
  --surface-card-hover: var(--pomu-blue-pale);
  
  --surface-inverse:    var(--pomu-blue-deep);
  --surface-overlay:    rgba(255, 249, 239, .92);

  --border-hairline:        var(--pomu-border);
  --border-hairline-strong: #A8ADB0;
  --border-gold:            var(--pomu-blue);

  --text-body:        var(--pomu-ink);
  --text-muted:       #6B7280;
  --text-faint:       #9AA0A6;
  --text-on-inverse:       #FFFFFF;
  --text-on-inverse-muted: rgba(255, 255, 255, .82);

  --accent-gold:        var(--pomu-blue);        
  --accent-gold-bright: var(--pomu-blue-deep);   

  --cta-primary-bg:       var(--pomu-blue-deep);
  --cta-primary-bg-hover: var(--pomu-blue);
  --cta-primary-text:     #FFFFFF;
  --cta-secondary-bg:     #FFFFFF;
  --cta-secondary-text:   var(--pomu-blue-text);
  --cta-secondary-border: var(--pomu-border);

  --focus-ring: var(--pomu-blue-deep);

  --c-gray-800: var(--pomu-blue-pale);

  --tag-bg:   var(--pomu-blue-pale);
  --tag-text: var(--pomu-blue-text);

  --watermark-color: rgba(19, 115, 214, .07);   
  --bloom-tint:      rgba(19, 115, 214, .05);   
  
}

.section-banner {
  background: linear-gradient(180deg, #FFFFFF 0%, var(--pomu-blue-pale) 100%);
}

.section-banner__title {
  color: var(--pomu-blue-text);
}

.hero::after {
  background: linear-gradient(180deg, rgba(255,249,239,0) 0%, rgba(255,249,239,0) 82%, rgba(255,249,239,.35) 92%, rgba(255,249,239,.85) 100%);
}

.site-header {
  background: linear-gradient(to bottom, rgba(255,249,239,.94), rgba(255,249,239,0));
}

@media (max-width: 767px) {
  .site-nav {
    background: var(--pomu-cream-light);
  }
}

.store-banner {
  background: linear-gradient(180deg, #FFFFFF 0%, var(--pomu-blue-pale) 100%);
}

.hero__video { background: var(--pomu-blue-pale); }

.hero__badge { background: var(--pomu-blue-pale); }

.btn--secondary:hover { background: var(--pomu-blue-pale); }

.pv-player { background: var(--pomu-blue-pale); }

.card { border-color: var(--pomu-border); }
@media (hover: hover) and (pointer: fine) {
  .card--hoverable:hover { border-color: var(--pomu-blue); }
}

.section-banner::before,
.store-banner::before {
  border-color: rgba(19, 115, 214, .35);
}

:root {
  --shadow-gold-glow: 0 0 20px rgba(19, 115, 214, .45);
}

@keyframes glow-pulse-mass {
  0%, 100% { box-shadow: 0 0 12px rgba(19, 115, 214, .30); }
  50%      { box-shadow: 0 0 24px rgba(19, 115, 214, .60); }
}
.glow-pulse { animation-name: glow-pulse-mass; }

@media (prefers-reduced-motion: reduce) {
  .glow-pulse { animation: none; }
}

.step-reward__step::before { box-shadow: 0 0 10px rgba(19, 115, 214, .5); }

.collab-banner:hover { box-shadow: 0 0 24px rgba(19, 115, 214, .35); }