:root {
  --color-bg: #effbfb;
  --color-bg-alt: #ffffff;
  --color-text: #10242a;
  --color-text-2: #334b50;
  --color-text-3: #52696d;
  --color-text-secondary: #60777b;
  --color-text-muted: #829699;
  --color-border: #d9eeee;
  --color-border-2: #cce8e8;
  --color-border-3: #c0e1e2;
  --color-brand: #12bfc1;
  --color-brand-deep: #11383d;
  --color-coral: #c8fb45;
  --color-hot-pink: #63e7d8;
  --grad-warm: linear-gradient(120deg, #16c8c6 0%, #64e6d8 58%, #c8fb45 100%);
  --grad-warm-soft: linear-gradient(120deg, rgba(22, 200, 198, .14), rgba(200, 251, 69, .2));
  --font-display: 'OPPO Sans 4.0', -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif;
  --font-body: 'OPPO Sans 4.0', -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif;
}

html, body { background: #effbfb; color: #10242a; }
body { background-image: linear-gradient(135deg, #e2fbf5 0%, #f4f8ff 52%, #f7f2ff 100%); }
::selection { background: #bff64b; color: #10242a; }
:focus-visible { outline-color: #16c8c6 !important; }
a { color: #119fa3; }
button, [role="button"] { -webkit-tap-highlight-color: rgba(22, 200, 198, .18); }

.text-brand, [class~="text-brand"] { color: #12bfc1 !important; }
.text-grad-warm { background-image: linear-gradient(110deg, #70eee0 0%, #d1ff4a 100%) !important; }
.bg-grad-warm, .btn-grad-warm, .tag-chip-enhanced { background-image: linear-gradient(120deg, #13c6c5 0%, #65e6d8 58%, #c9fb4c 100%) !important; }
.tag-chip, .tag-chip-enhanced { border-color: rgba(20, 190, 190, .45) !important; }
.app-download-btn { border-color: rgba(195, 255, 244, .72) !important; }
.feature-card-glass:hover { border-color: rgba(90, 230, 216, .8) !important; box-shadow: 0 16px 48px rgba(9, 37, 45, .28), 0 0 34px rgba(43, 220, 204, .18) !important; }
.shadow-nav { box-shadow: 0 8px 24px rgba(22, 150, 157, .09) !important; }

/* Preserve the original cinematic media while shifting its identity to cyan. */
main > section:first-child:not([aria-labelledby]) { background-color: #12383d !important; }
.pupu-footer, .pupu-footer-story { border-color: #d5eaea !important; }
.pupu-nav-pill { background: rgba(255, 255, 255, .88) !important; border-color: #d9eeee !important; box-shadow: 0 8px 24px rgba(20, 140, 150, .1) !important; }

/* Shared static-page surfaces */
body > main, body > #root > main { color: #10242a; }
body > header, body > nav, .site-header, .page-header { background-color: rgba(239, 251, 251, .92); }
article, .card, .faq-item, .news-card, .contact-card, .partner-card, .city-card {
  border-color: #d7ebeb;
}
input, textarea, select { border-color: #cce4e5; }
input:focus, textarea:focus, select:focus { border-color: #16c8c6; box-shadow: 0 0 0 3px rgba(22, 200, 198, .14); }