html { scroll-behavior: smooth; }

:root {
  --bg-1: #050d22;
  --bg-2: #0a214f;
  --bg-3: #0f4aa2;
  --bright-blue: #53c7ff;
  --bright-blue-strong: #3bb7ff;
}

body,
.font-body,
.font-display {
  font-family: 'Mitr', 'Kanit', sans-serif !important;
}

body {
  background:
    radial-gradient(circle at 8% 14%, rgba(83, 199, 255, 0.2), transparent 26%),
    radial-gradient(circle at 88% 8%, rgba(56, 189, 248, 0.22), transparent 30%),
    linear-gradient(160deg, var(--bg-1) 0%, var(--bg-2) 48%, var(--bg-3) 100%);
  min-height: 100vh;
  color: #eaf2ff;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle at center, black 38%, transparent 100%);
  z-index: -1;
}

.glass {
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.06));
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 20px 50px rgba(1, 8, 20, 0.4);
}

.glass-soft {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.06));
  border: 1px solid rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(12px);
  box-shadow: 0 16px 36px rgba(4, 12, 30, 0.28);
}

.glass-light {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.7));
  border: 1px solid rgba(209, 222, 245, 0.9);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 32px rgba(14, 32, 66, 0.14);
}

.glass-dark {
  background: linear-gradient(160deg, rgba(4, 17, 44, 0.8), rgba(7, 27, 62, 0.48));
  border: 1px solid rgba(185, 210, 255, 0.28);
  backdrop-filter: blur(16px);
  box-shadow: 0 18px 48px rgba(2, 8, 22, 0.5);
}

.section-light {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(244, 249, 255, 0.97));
}

.hero-overlay {
  background:
    linear-gradient(130deg, rgba(6, 27, 62, 0.9) 20%, rgba(6, 27, 62, 0.56) 60%, rgba(15, 59, 130, 0.42) 100%),
    url('https://images.unsplash.com/photo-1470225620780-dba8ba36b745?auto=format&fit=crop&w=1800&q=80') center/cover no-repeat;
}

.section-image-a {
  background:
    linear-gradient(160deg, rgba(6, 27, 62, 0.82), rgba(6, 27, 62, 0.34)),
    url('https://images.unsplash.com/photo-1524601500432-1e1a4c71d692?auto=format&fit=crop&w=1400&q=80') center/cover no-repeat;
}

.section-image-b {
  background:
    linear-gradient(160deg, rgba(6, 27, 62, 0.85), rgba(6, 27, 62, 0.35)),
    url('https://images.unsplash.com/photo-1511379938547-c1f69419868d?auto=format&fit=crop&w=1400&q=80') center/cover no-repeat;
}

.album-cover {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

[data-lang-btn] {
  background: rgba(255, 255, 255, 0.08);
  transition: all 0.22s ease;
}

[data-lang-btn]:hover {
  border-color: rgba(142, 214, 255, 0.9);
  background: rgba(83, 199, 255, 0.2);
}

.lang-active {
  background: linear-gradient(135deg, var(--bright-blue), var(--bright-blue-strong));
  color: #02122f !important;
  border-color: transparent !important;
  box-shadow: 0 8px 20px rgba(56, 189, 248, 0.45);
  font-weight: 700;
}

.brand-asia {
  color: var(--bright-blue);
  text-shadow: 0 0 14px rgba(83, 199, 255, 0.42);
}

.btn-cta-light,
.btn-cta-light:visited {
  color: #041b45 !important;
  text-shadow: none;
}

.btn-cta-light:hover,
.btn-cta-light:focus-visible,
.btn-cta-light:active {
  color: #03163a !important;
}

.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.85rem;
  height: 2.85rem;
  border-radius: 9999px;
  border: 1px solid rgba(199, 230, 255, 0.48);
  background: rgba(255, 255, 255, 0.08);
  color: #d9eeff;
  transition: all 0.22s ease;
}

.social-icon svg {
  width: 1.12rem;
  height: 1.12rem;
}

.social-icon:hover,
.social-icon:focus-visible {
  background: linear-gradient(135deg, var(--bright-blue), var(--bright-blue-strong));
  border-color: transparent;
  color: #03163a;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(59, 183, 255, 0.38);
}

.btn-modal-alert {
  background: linear-gradient(135deg, #ffd56a, #ffbf3c);
  color: #1f2937;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 10px 24px rgba(255, 193, 77, 0.45);
}

.btn-modal-alert:hover {
  filter: brightness(1.05);
}