:root {
  --navy: #0b5cab;
  --ruby: #0b5cab;
  --gold: #f6c34a;
  --emerald: #28d17c;
  --teal: #0f7bff;
  --paper: #fbfdff;
  --line: #dce8f5;
}
body.variant-gcash-clean {
  background:
    radial-gradient(circle at 12% 8%, color-mix(in srgb, #f6c34a, transparent 72%), transparent 26rem),
    radial-gradient(circle at 86% 18%, color-mix(in srgb, #28d17c, transparent 78%), transparent 28rem),
    linear-gradient(180deg,
      color-mix(in srgb, #0b5cab, white 86%) 0%,
      #fbfdff 34%,
      #eef5ff 72%,
      color-mix(in srgb, #28d17c, white 90%) 100%);
  background-attachment: fixed;
}
.variant-gcash-clean .site-header {
  background: color-mix(in srgb, #fbfdff, #0b5cab 8%);
  border-bottom-color: color-mix(in srgb, #dce8f5, #0b5cab 18%);
}
.hero {
  background: radial-gradient(circle at 78% 18%, rgba(255,255,255,.18), transparent 28%), linear-gradient(135deg, #0b5cab 0%, #28d17c 48%, #f6c34a 100%);
}
.detail-hero {
  background: linear-gradient(135deg, #0b5cab, #28d17c);
}
.section.alt {
  background:
    linear-gradient(180deg, color-mix(in srgb, #eef5ff, white 18%), color-mix(in srgb, #eef5ff, #f6c34a 8%));
}
.variant-gcash-clean .section:not(.alt):not(.hero):not(.detail-hero) {
  background:
    linear-gradient(180deg, color-mix(in srgb, #fbfdff, white 35%), color-mix(in srgb, #fbfdff, #28d17c 5%));
}
.variant-gcash-clean .section {
  padding-top: 44px;
  padding-bottom: 44px;
}
.variant-gcash-clean .promo-strip {
  background: color-mix(in srgb, #0b5cab, #fbfdff 78%);
  border-top: 1px solid color-mix(in srgb, #dce8f5, #0b5cab 22%);
  border-bottom: 1px solid color-mix(in srgb, #dce8f5, #0b5cab 22%);
}
.variant-gcash-clean .promo-grid {
  background: color-mix(in srgb, #dce8f5, #28d17c 18%);
}
.variant-gcash-clean .promo-grid div {
  background: linear-gradient(180deg, color-mix(in srgb, #eef5ff, white 18%), color-mix(in srgb, #fbfdff, #f6c34a 8%));
}
.variant-gcash-clean .button {
  min-height: 42px;
  border-radius: 6px;
}
.button.primary {
  background: var(--gold);
  border-color: color-mix(in srgb, var(--gold), black 12%);
}
.button.secondary {
  background: var(--navy);
  border-color: var(--navy);
}
.reward-board {
  border-color: rgba(255,255,255,.22);
}
.variant-gcash-clean .card,
.variant-gcash-clean .guide-card,
.variant-gcash-clean .style-card,
.variant-gcash-clean .map-panel,
.variant-gcash-clean .trust-badge,
.variant-gcash-clean .faq details,
.variant-gcash-clean .content details {
  background: linear-gradient(180deg, color-mix(in srgb, #fbfdff, white 34%), color-mix(in srgb, #eef5ff, white 26%));
  border-color: color-mix(in srgb, #dce8f5, #0b5cab 14%);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(11,92,171,.08);
}
.variant-gcash-clean .card img {
  aspect-ratio: 21 / 9;
}
.variant-gcash-clean .social-button {
  min-height: calc(42px - 6px);
  border-radius: 6px;
}
.social-button span {
  background: var(--gold);
}
.variant-gcash-clean .map-panel iframe,
.variant-gcash-clean .map-placeholder {
  background: color-mix(in srgb, #eef5ff, #0b5cab 12%);
}
.variant-gcash-clean .site-footer {
  background: linear-gradient(135deg, #0b5cab, color-mix(in srgb, #28d17c, black 42%));
}
.notice {
  border-left-color: var(--gold);
}

.variant-gcash-clean main { display: flex; flex-direction: column; }
.variant-gcash-clean .hero { order: 1; }
.variant-gcash-clean #payments { order: 2; }
.variant-gcash-clean #company { order: 3; }
.variant-gcash-clean .promo-strip { order: 4; }
.variant-gcash-clean #games { order: 5; }
.variant-gcash-clean #bonuses { order: 6; }
.variant-gcash-clean #faq { order: 7; }
.variant-gcash-clean .hero-grid { grid-template-columns: .9fr 1.1fr; gap: 24px; }
.variant-gcash-clean .promo-strip { background: #eef5ff; }
.variant-gcash-clean .section.alt { background: #f4f9ff; }
.variant-gcash-clean .card-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.variant-gcash-clean .company-grid { grid-template-columns: 1fr 1fr; }
.variant-gcash-clean .map-panel { min-height: 300px; }
.variant-gcash-clean .footer-grid { grid-template-columns: minmax(0,.9fr) minmax(0,1.2fr); }
.variant-gcash-clean .footer-utility { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; border-left: 0; border-top: 1px solid rgba(255,255,255,.16); padding: 22px 0 0; }
.variant-gcash-clean .footer-utility section { order: -1; }
.variant-gcash-clean .hero { border-bottom: 5px solid var(--gold); }
.variant-gcash-clean .card { border-left: 5px solid var(--teal); }