:root {
  --midnight: #021838;
  --midnight-deep: #010814;
  --midnight-soft: #06254d;
  --ivory: #f6ebd2;
  --ivory-muted: rgba(246, 235, 210, 0.72);
  --gold: #d9b36c;
  --gold-soft: #f4d89a;
  --gold-dim: rgba(191, 149, 80, 0.5);
  --font-sans: "Noto Sans Thai", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Inter", "Noto Sans Thai", system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--midnight);
  color: var(--ivory);
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body {
  position: relative;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 20% 20%, rgba(218, 174, 92, 0.16), transparent 32%),
    radial-gradient(circle at 80% 10%, rgba(255, 224, 157, 0.1), transparent 28%),
    radial-gradient(ellipse at 50% 92%, rgba(217, 179, 108, 0.14), transparent 44%),
    linear-gradient(180deg, #021838 0%, #031226 55%, #010814 100%);
}

body::before,
body::after {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  content: "";
}

body::before {
  background:
    radial-gradient(ellipse at 50% 34%, rgba(3, 35, 74, 0.54), transparent 42rem),
    linear-gradient(115deg, transparent 0 34%, rgba(244, 216, 154, 0.06) 45%, transparent 57%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 42%);
  opacity: 0.86;
}

body::after {
  background:
    repeating-linear-gradient(168deg, transparent 0 22px, rgba(244, 216, 154, 0.035) 23px, transparent 26px),
    radial-gradient(ellipse at 50% 110%, rgba(245, 190, 90, 0.14), transparent 42%);
  mix-blend-mode: screen;
  opacity: 0.48;
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.55) 38%, rgba(0, 0, 0, 0.96) 100%);
}

img {
  display: block;
  max-width: 100%;
}

.site-shell {
  position: relative;
  z-index: 1;
  width: min(1120px, calc(100% - 32px));
  min-height: calc(100vh - 72px);
  margin: 0 auto;
}

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  min-height: calc(100vh - 72px);
  padding: clamp(42px, 9vh, 92px) 0 clamp(54px, 10vh, 104px);
  align-content: center;
  justify-items: center;
  text-align: center;
}

.hero::before {
  position: absolute;
  inset: 4% max(-9vw, -84px) 0;
  z-index: 0;
  pointer-events: none;
  content: "";
  background:
    radial-gradient(ellipse at 50% 48%, rgba(246, 235, 210, 0.08), transparent 26rem),
    radial-gradient(ellipse at 50% 78%, rgba(245, 190, 90, 0.15), transparent 34rem);
  opacity: 0.72;
  filter: blur(0.4px);
}

.hero > :not(.river-shimmer, .golden-flakes) {
  position: relative;
  z-index: 2;
}

.river-shimmer {
  position: absolute;
  inset: 52% max(-12vw, -110px) 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(96deg, transparent 6%, rgba(217, 179, 108, 0.16) 34%, rgba(255, 244, 205, 0.11) 50%, rgba(191, 149, 80, 0.1) 66%, transparent 94%),
    repeating-linear-gradient(174deg, transparent 0 18px, rgba(255, 220, 150, 0.11) 19px, transparent 22px);
  filter: blur(10px);
  mix-blend-mode: screen;
  opacity: 0.42;
  transform: translate3d(0, 0, 0);
  animation: river-light-drift 22s ease-in-out infinite alternate;
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 28%, transparent 100%);
  will-change: transform, opacity;
}

.golden-flakes {
  position: absolute;
  inset: 4% max(-4vw, -42px) 8%;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.68;
  transform: translate3d(0, 0, 0);
  animation: dust-field-breathe 18s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

.golden-flakes::before,
.golden-flakes::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  background:
    radial-gradient(circle at 9% 32%, rgba(255, 244, 205, 0.28) 0 1px, transparent 5px),
    radial-gradient(circle at 18% 72%, rgba(245, 190, 90, 0.34) 0 1.5px, transparent 7px),
    radial-gradient(circle at 31% 44%, rgba(255, 220, 150, 0.42) 0 1px, transparent 6px),
    radial-gradient(circle at 49% 21%, rgba(191, 149, 80, 0.36) 0 1.5px, transparent 7px),
    radial-gradient(circle at 63% 64%, rgba(255, 244, 205, 0.3) 0 1px, transparent 6px),
    radial-gradient(circle at 78% 38%, rgba(245, 190, 90, 0.36) 0 1px, transparent 6px),
    radial-gradient(circle at 91% 70%, rgba(255, 220, 150, 0.28) 0 1.5px, transparent 8px);
  filter: blur(0.45px);
  opacity: 0.66;
  animation: gold-specks-rise 24s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

.golden-flakes::after {
  inset: 6% 4% 0;
  background:
    radial-gradient(circle at 14% 58%, rgba(191, 149, 80, 0.34) 0 1px, transparent 6px),
    radial-gradient(circle at 27% 25%, rgba(255, 244, 205, 0.28) 0 1.5px, transparent 8px),
    radial-gradient(circle at 41% 78%, rgba(245, 190, 90, 0.36) 0 1px, transparent 7px),
    radial-gradient(circle at 57% 41%, rgba(255, 220, 150, 0.34) 0 1px, transparent 6px),
    radial-gradient(circle at 72% 18%, rgba(255, 244, 205, 0.24) 0 1px, transparent 7px),
    radial-gradient(circle at 86% 53%, rgba(245, 190, 90, 0.3) 0 1.5px, transparent 8px);
  filter: blur(0.9px);
  opacity: 0.46;
  animation-duration: 30s;
  animation-direction: alternate-reverse;
}

.golden-flakes i {
  position: absolute;
  display: block;
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 220, 150, 0.72);
  filter: blur(0.15px);
  opacity: 0.5;
  transform: translate3d(0, 0, 0);
  animation: flake-float 16s ease-in-out infinite;
  will-change: transform, opacity;
}

.golden-flakes i:nth-child(1) { top: 18%; left: 12%; width: 2px; height: 2px; animation-delay: -2s; }
.golden-flakes i:nth-child(2) { top: 30%; left: 24%; background: rgba(255, 244, 205, 0.5); animation-delay: -8s; }
.golden-flakes i:nth-child(3) { top: 64%; left: 18%; width: 4px; height: 4px; opacity: 0.34; animation-delay: -5s; }
.golden-flakes i:nth-child(4) { top: 22%; left: 68%; width: 2px; height: 2px; animation-delay: -11s; }
.golden-flakes i:nth-child(5) { top: 42%; left: 78%; background: rgba(245, 190, 90, 0.55); animation-delay: -4s; }
.golden-flakes i:nth-child(6) { top: 73%; left: 84%; width: 4px; height: 4px; opacity: 0.28; animation-delay: -13s; }
.golden-flakes i:nth-child(7) { top: 54%; left: 55%; width: 2px; height: 2px; animation-delay: -6s; }
.golden-flakes i:nth-child(8) { top: 15%; left: 45%; background: rgba(191, 149, 80, 0.5); animation-delay: -15s; }
.golden-flakes i:nth-child(9) { top: 80%; left: 36%; width: 4px; height: 4px; opacity: 0.3; animation-delay: -9s; }
.golden-flakes i:nth-child(10) { top: 37%; left: 91%; width: 2px; height: 2px; animation-delay: -1s; }
.golden-flakes i:nth-child(11) { top: 67%; left: 66%; background: rgba(255, 244, 205, 0.45); animation-delay: -12s; }
.golden-flakes i:nth-child(12) { top: 28%; left: 6%; width: 4px; height: 4px; opacity: 0.25; animation-delay: -7s; }

.hero-mark {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-bottom: clamp(26px, 5vh, 42px);
  padding: 0;
}

.hero-mark img {
  width: min(220px, 60vw);
  height: auto;
  max-width: 220px;
  object-fit: contain;
  opacity: 0.9;
  filter: sepia(0.18) saturate(0.86) brightness(1.06) contrast(0.92);
}

.eyebrow {
  margin: 0 0 14px;
  color: var(--gold-soft);
  font-family: var(--font-display);
  font-size: clamp(0.78rem, 2vw, 0.86rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.hero h1 {
  margin: 0;
  color: var(--ivory);
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 14vw, 8rem);
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: 0;
  text-shadow: 0 16px 54px rgba(0, 0, 0, 0.32);
}

.hero-subtitle {
  margin: clamp(20px, 3.4vh, 28px) 0 0;
  color: rgba(246, 235, 210, 0.82);
  font-size: clamp(1.05rem, 3.6vw, 1.35rem);
  font-weight: 500;
  line-height: 1.55;
}

.hero-copy {
  width: min(560px, 100%);
  margin: 12px auto 0;
  color: var(--ivory-muted);
  font-size: clamp(1rem, 3.4vw, 1.18rem);
  line-height: 1.85;
}

.site-footer {
  position: relative;
  z-index: 1;
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  padding: 0 0 34px;
  color: rgba(244, 216, 154, 0.62);
  text-align: center;
}

.site-footer p {
  margin: 0;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
}

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 700ms ease, transform 700ms ease;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes river-light-drift {
  0% {
    opacity: 0.32;
    transform: translate3d(-1.6%, 1%, 0) scaleX(0.98);
  }

  100% {
    opacity: 0.48;
    transform: translate3d(1.8%, -0.8%, 0) scaleX(1.03);
  }
}

@keyframes dust-field-breathe {
  0% {
    opacity: 0.52;
    transform: translate3d(0, 1.2%, 0);
  }

  100% {
    opacity: 0.72;
    transform: translate3d(0.8%, -1%, 0);
  }
}

@keyframes gold-specks-rise {
  0% {
    opacity: 0.42;
    transform: translate3d(-0.6%, 1.8%, 0);
  }

  50% {
    opacity: 0.72;
    transform: translate3d(0.9%, -1.4%, 0);
  }

  100% {
    opacity: 0.52;
    transform: translate3d(1.4%, -3%, 0);
  }
}

@keyframes flake-float {
  0%,
  100% {
    opacity: 0.2;
    transform: translate3d(0, 10px, 0) scale(0.92);
  }

  45% {
    opacity: 0.68;
    transform: translate3d(8px, -12px, 0) scale(1.08);
  }

  72% {
    opacity: 0.42;
    transform: translate3d(-5px, -24px, 0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .river-shimmer,
  .golden-flakes,
  .golden-flakes::before,
  .golden-flakes::after,
  .golden-flakes i {
    animation: none !important;
  }
}

@media (max-width: 520px) {
  body {
    background:
      radial-gradient(circle at 24% 18%, rgba(218, 174, 92, 0.12), transparent 34%),
      radial-gradient(ellipse at 50% 95%, rgba(217, 179, 108, 0.1), transparent 42%),
      linear-gradient(180deg, #021838 0%, #031226 58%, #010814 100%);
  }

  .site-shell {
    width: min(100% - 26px, 1120px);
    min-height: calc(100vh - 64px);
  }

  .hero {
    min-height: calc(100vh - 64px);
    padding-top: 34px;
    padding-bottom: 48px;
  }

  .river-shimmer {
    inset: 58% -32px 0;
    opacity: 0.3;
    filter: blur(12px);
  }

  .golden-flakes {
    inset: 7% -18px 13%;
    opacity: 0.44;
  }

  .golden-flakes i:nth-child(n+8) {
    display: none;
  }

  .hero-mark {
    margin-bottom: 24px;
  }

  .hero-mark img {
    width: min(178px, 58vw);
  }

  .eyebrow {
    letter-spacing: 0.14em;
  }

  .site-footer {
    width: min(100% - 26px, 1120px);
    padding-bottom: 24px;
  }
}