html {
  scroll-behavior: smooth;
}

body {
  font-family: Inter, Noto Sans SC, system-ui, sans-serif;
  background:
    radial-gradient(circle at top, rgba(200, 164, 107, 0.18), transparent 28%),
    linear-gradient(180deg, #f6f2ea 0%, #ede6da 35%, #e7dfd0 100%);
  color: #1b1f24;
}

html {
  scrollbar-gutter: stable;
}

body.is-loading {
  overflow-y: auto;
}

.site-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: #111418;
  color: #fff;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.site-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 28px 34px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 28px;
  background: rgba(255,255,255,0.08);
  box-shadow: 0 24px 80px rgba(0,0,0,0.32);
  backdrop-filter: blur(16px);
}

.loader-card p {
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.28em;
  color: rgba(255,255,255,0.72);
}

.loader-ring {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 3px solid rgba(255,255,255,0.16);
  border-top-color: #E1C57A;
  animation: loaderSpin 0.85s linear infinite;
}

@keyframes loaderSpin {
  to { transform: rotate(360deg); }
}

.glass {
  background: rgba(255, 255, 255, 0.58);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.45);
}

.noise::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120"%3E%3Cfilter id="n"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="1.2" numOctaves="2" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="120" height="120" filter="url(%23n)" opacity="0.03"/%3E%3C/svg%3E');
}

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

.card-hover {
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.card-hover:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 70px rgba(20, 24, 32, 0.14);
  border-color: rgba(200, 164, 107, 0.5);
}

.hero-bg {
  background:
    radial-gradient(circle at center, rgba(86, 167, 255, 0.14), transparent 34%),
    linear-gradient(180deg, rgba(17, 20, 24, 0.14), rgba(17, 20, 24, 0.72));
}

.hero-slides {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-slide {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.01);
  animation: heroSlide 18s infinite cubic-bezier(0.45, 0, 0.1, 1) both;
}

.hero-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(17,20,24,0.02), rgba(17,20,24,0.24));
}

.hero-slide.one { background-image: url('../img/1.png'); animation-delay: 0s; }
.hero-slide.two { background-image: url('../img/2.png'); animation-delay: 6s; }
.hero-slide.three { background-image: url('../img/3.png'); animation-delay: 12s; }

.hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.35);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.12) inset;
  animation: dotPulse 18s infinite ease-in-out;
}

.hero-dot:nth-child(2) { animation-delay: 6s; }
.hero-dot:nth-child(3) { animation-delay: 12s; }

@keyframes heroSlide {
  0% { opacity: 0; transform: scale(1.02); }
  6% { opacity: 1; transform: scale(1.01); }
  30% { opacity: 1; transform: scale(1.005); }
  36% { opacity: 0; transform: scale(1.02); }
  100% { opacity: 0; }
}

@keyframes dotPulse {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  6%, 30% { opacity: 1; transform: scale(1.15); }
  36% { opacity: 0.35; transform: scale(1); }
}

.hero-slide.one { background-image: url('../img/1.png'); animation-delay: 0s; }
.hero-slide.two { background-image: url('../img/2.png'); animation-delay: 6s; }
.hero-slide.three { background-image: url('../img/3.png'); animation-delay: 12s; }

@keyframes heroSlide {
  0% { opacity: 0; transform: scale(1.06); }
  8% { opacity: 1; }
  28% { opacity: 1; transform: scale(1.01); }
  36% { opacity: 0; transform: scale(1.06); }
  100% { opacity: 0; }
}

.gallery-item img {
  transition: transform 0.5s ease;
}

.gallery-item:hover img {
  transform: scale(1.05);
}

.section-kicker::after {
  content: '';
  display: block;
  width: 72px;
  height: 2px;
  margin-top: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(200, 164, 107, 0.95), rgba(86, 167, 255, 0.65));
}