/*
 * Self-hosted font definitions
 *
 * The site previously loaded fonts from Google Fonts via external links. To support offline usage and reduce
 * external requests, the required font files have been downloaded and stored locally in the `fonts/` directory
 * alongside this stylesheet. Each @font-face rule below defines the font family, weight and source file.
 */

@font-face {
  font-display: swap;
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/playfair-display-v40-cyrillic_latin-600.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/playfair-display-v40-cyrillic_latin-700.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/inter-v20-cyrillic_latin-300.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/inter-v20-cyrillic_latin-regular.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/inter-v20-cyrillic_latin-500.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/inter-v20-cyrillic_latin-600.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/inter-v20-cyrillic_latin-700.woff2') format('woff2');
}

:root {
  --bg: #050608;
  --surface: rgba(12, 14, 20, 0.75);
  --surface-strong: rgba(18, 20, 28, 0.92);
  --stroke: rgba(227, 198, 119, 0.25);
  --accent: #e3c677;
  --accent-soft: rgba(227, 198, 119, 0.12);
  --text-main: #f7f5f1;
  --text-muted: #9aa0b0;
  --spacing-section: clamp(4rem, 10vw, 7rem);
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --shadow-soft: 0 18px 40px rgba(0, 0, 0, 0.45);
  --shadow-glow: 0 0 60px rgba(227, 198, 119, 0.28);
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text-main);
  font-size: 16px;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: var(--accent);
}

.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  background: var(--accent);
  color: #0b0c12;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  font-weight: 600;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  z-index: 100;
}

.skip-link:focus {
  clip: auto;
  width: auto;
  height: auto;
  left: 50%;
  transform: translate(-50%, 10px);
  box-shadow: var(--shadow-soft);
}

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

.page-decor {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
}

.page-gradient {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 10% -10%, rgba(227, 198, 119, 0.25), transparent 55%),
    radial-gradient(circle at 85% 0%, rgba(122, 82, 255, 0.22), transparent 55%),
    linear-gradient(140deg, rgba(21, 25, 38, 0.95), rgba(8, 9, 14, 0.9));
  filter: blur(0);
  animation: gradientShift 14s ease-in-out infinite alternate;
}

.page-noise {
  position: absolute;
  inset: 0;
  opacity: 0.14;
  background-image: radial-gradient(rgba(255, 255, 255, 0.08) 0.5px, transparent 0.5px);
  background-size: 6px 6px;
  mix-blend-mode: soft-light;
}

@keyframes gradientShift {
  0% {
    transform: scale(1) translateY(0px);
  }
  100% {
    transform: scale(1.05) translateY(-22px);
  }
}

main {
  padding-top: 110px;
}

.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  transition: background 0.4s ease, backdrop-filter 0.4s ease, box-shadow 0.4s ease;
}

.site-nav__inner {
  margin: 0 auto;
  padding: 18px clamp(1.5rem, 6vw, 4rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  backdrop-filter: blur(0px);
}

.site-nav__brand {
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  color: var(--accent);
  letter-spacing: 0.04em;
}

.site-nav__menu {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__menu a {
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: color 0.2s ease;
}

.site-nav__item--roles {
  display: block;
}

.site-nav__lang {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lang-btn {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 999px;
  transition: color 0.2s ease, background 0.3s ease;
}

.lang-btn.is-active {
  color: var(--accent);
  background: rgba(227, 198, 119, 0.08);
}

.site-nav__toggle {
  display: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(227, 198, 119, 0.35);
  background: rgba(12, 14, 20, 0.6);
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-direction: column;
  cursor: pointer;
  transition: background 0.3s ease;
}

.site-nav__toggle span {
  width: 18px;
  height: 2px;
  background: var(--accent);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.site-nav__toggle.is-active span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.site-nav__toggle.is-active span:nth-child(2) {
  opacity: 0;
}

.site-nav__toggle.is-active span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.site-nav.is-scrolled {
  background: rgba(7, 8, 12, 0.86);
  backdrop-filter: blur(18px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.hero {
  position: relative;
  min-height: calc(100vh - 80px);
  padding: clamp(4rem, 8vw, 6rem) clamp(1.5rem, 6vw, 5rem);
  overflow: hidden;
  display: grid;
  align-items: center;
}

.hero__background {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  background:
    linear-gradient(160deg, rgba(5, 6, 8, 0.72), rgba(5, 6, 8, 0.35)),
    url('img/3.webp') center/cover no-repeat;
  background-size: cover;
  background-position: center;
}

.hero__mesh {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 40% 40%, rgba(227, 198, 119, 0.12), transparent 60%),
    radial-gradient(circle at 70% 65%, rgba(146, 92, 255, 0.1), transparent 55%);
  filter: blur(0);
}

.hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(0);
  pointer-events: none;
}

.hero [data-depth] {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero__orb--one {
  width: 420px;
  height: 420px;
  left: -120px;
  top: 80px;
  background: radial-gradient(circle, rgba(227, 198, 119, 0.55), transparent 70%);
  animation: floatOrb 12s ease-in-out infinite;
}

.hero__orb--two {
  width: 300px;
  height: 300px;
  right: -100px;
  top: 20%;
  background: radial-gradient(circle, rgba(111, 91, 255, 0.4), transparent 70%);
  animation: floatOrb 16s ease-in-out infinite alternate;
}

.hero__orb--three {
  width: 280px;
  height: 280px;
  bottom: -60px;
  left: 40%;
  background: radial-gradient(circle, rgba(58, 169, 255, 0.35), transparent 70%);
  animation: floatOrb 18s ease-in-out infinite;
}

@keyframes floatOrb {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(20px, -30px, 0);
  }
  100% {
    transform: translate3d(-15px, 25px, 0);
  }
}

.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
}

.hero__copy {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(227, 198, 119, 0.6);
}

.hero__title {
  font-size: clamp(2.6rem, 6vw, 4rem);
  line-height: 1.1;
  margin: 0;
  text-shadow: 0 6px 30px rgba(0, 0, 0, 0.55);
}

.hero__lead {
  max-width: 520px;
  color: rgba(247, 245, 241, 0.82);
  font-size: 1.05rem;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0.9rem 1.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.btn--primary {
  background: linear-gradient(120deg, rgba(227, 198, 119, 0.95), rgba(237, 211, 147, 0.75));
  color: #1e1a10;
  box-shadow: var(--shadow-glow);
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 25px 45px rgba(227, 198, 119, 0.35);
}

.btn--ghost {
  background: rgba(227, 198, 119, 0.1);
  border-color: rgba(227, 198, 119, 0.35);
  color: var(--accent);
}

.btn--ghost:hover {
  background: rgba(227, 198, 119, 0.18);
}

.hero__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding: 22px;
  border-radius: var(--radius-lg);
  /*
     Adjust transparency of the statistics block. Previously the stats used a 72% opaque
     dark background which largely obscured the underlying background image. The user
     requested that these panels be much more transparent so the background is visible.
     Setting the alpha to 0.2 (20% opacity) yields roughly 80% transparency, allowing
     the backdrop image to shine through while still maintaining legibility of the
     text inside the block.
  */
  background: rgba(15, 18, 26, 0.2);
  border: 1px solid rgba(227, 198, 119, 0.18);
  backdrop-filter: blur(18px);
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat__value {
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  font-weight: 700;
  color: var(--accent);
}

.stat__label {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.hero__scene {
  position: relative;
  display: grid;
  gap: 20px;
  perspective: 1200px;
}

.scene-card {
  padding: 1.8rem;
  border-radius: var(--radius-lg);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(227, 198, 119, 0.22);
  /*
     The scene cards (e.g. “Signature Retreat” and “Live KPI Dashboard”) also had
     relatively opaque backgrounds. To align them with the new transparency level
     requested (around 80%), reduce the opacity on both gradient stops. A 0.2
     alpha allows the background image to remain visible while retaining enough
     contrast for the card contents.
  */
  background: linear-gradient(145deg, rgba(16, 18, 26, 0.2), rgba(24, 28, 40, 0.2));
  box-shadow: var(--shadow-soft);
  transform-style: preserve-3d;
}

.scene-card--primary {
  max-width: 320px;
}

.scene-card--accent {
  max-width: 260px;
  margin-left: auto;
}

.scene-card__title {
  margin: 0 0 0.45rem;
  font-size: 1.2rem;
  color: var(--accent);
}

.scene-card__meta {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.scene-card__desc,
.scene-card__tag {
  margin: 0;
  color: rgba(247, 245, 241, 0.82);
  font-size: 0.95rem;
  line-height: 1.5;
}

.scene-card__tag {
  display: inline-block;
  padding: 0.2rem 0.75rem;
  border-radius: 999px;
  background: rgba(227, 198, 119, 0.15);
  color: var(--accent);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.scene-highlight {
  align-self: flex-end;
  padding: 1rem 1.4rem;
  border-radius: var(--radius-md);
  background: rgba(227, 198, 119, 0.12);
  border: 1px solid rgba(227, 198, 119, 0.24);
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  max-width: 240px;
}

.hero__scroll {
  margin-top: clamp(2rem, 6vw, 3.5rem);
  font-size: 0.85rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(227, 198, 119, 0.6);
  position: relative;
  padding-left: 40px;
}

.hero__scroll::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 28px;
  height: 1px;
  background: rgba(227, 198, 119, 0.4);
}

.dream {
  position: relative;
  overflow: hidden;
}

.dream__glow {
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at 20% 30%, rgba(227, 198, 119, 0.28), transparent 55%),
    radial-gradient(circle at 80% 20%, rgba(118, 82, 255, 0.2), transparent 60%),
    radial-gradient(circle at 40% 80%, rgba(61, 204, 255, 0.18), transparent 65%);
  filter: blur(60px);
  opacity: 0.85;
  pointer-events: none;
}

.dream__grid {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  gap: clamp(2rem, 6vw, 4.5rem);
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: stretch;
}

.dream__content {
  display: grid;
  gap: 1.6rem;
  align-content: start;
  padding: clamp(1.8rem, 4vw, 2.4rem);
  border-radius: var(--radius-xl);
  /*
     Reduce the opacity of the dream content container so that the underlying
     background becomes more visible. Switching from 72% opacity to 20%
     (80% transparency) maintains readability but enhances the sense of depth.
  */
  background: rgba(13, 16, 24, 0.2);
  border: 1px solid rgba(227, 198, 119, 0.22);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(14px);
}

.dream__title {
  margin: 0;
  font-size: clamp(2.2rem, 5vw, 3.3rem);
  line-height: 1.15;
}

.dream__lead {
  margin: 0;
  font-size: 1.05rem;
  color: rgba(247, 245, 241, 0.78);
}

.dream__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

.dream__list li {
  position: relative;
  padding-left: 2.2rem;
  color: rgba(247, 245, 241, 0.76);
  font-size: 0.98rem;
}

.dream__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.35rem;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(227, 198, 119, 0.95), rgba(118, 82, 255, 0.55));
  box-shadow: 0 0 12px rgba(227, 198, 119, 0.45);
}

.dream__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.dream__panels {
  display: grid;
  gap: 1.2rem;
}

.dream-panel {
  position: relative;
  padding: clamp(1.6rem, 3vw, 2rem);
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, rgba(19, 22, 33, 0.8), rgba(8, 9, 14, 0.8));
  border: 1px solid rgba(227, 198, 119, 0.18);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.dream-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(227, 198, 119, 0.25), transparent 65%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.dream-panel:hover,
.dream-panel:focus-within {
  transform: translateY(-6px);
  border-color: rgba(227, 198, 119, 0.35);
  box-shadow: 0 28px 55px rgba(0, 0, 0, 0.45);
}

.dream-panel:hover::after,
.dream-panel:focus-within::after {
  opacity: 1;
}

.dream-panel__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(227, 198, 119, 0.12);
  margin-bottom: 1.1rem;
}

.dream-panel__title {
  margin: 0 0 0.6rem;
  font-size: clamp(1.2rem, 3vw, 1.6rem);
}

.dream-panel__desc {
  margin: 0;
  color: rgba(247, 245, 241, 0.72);
  font-size: 0.98rem;
}

.section {
  padding: var(--spacing-section) clamp(1.5rem, 6vw, 5rem);
}

.section--padded {
  padding-bottom: calc(var(--spacing-section) + 1.5rem);
}

.section--wide {
  padding-bottom: calc(var(--spacing-section) + 2rem);
}

.section__header {
  max-width: 840px;
  margin: 0 auto clamp(3rem, 6vw, 4.5rem);
  text-align: center;
  display: grid;
  gap: 1.2rem;
}

.section__title {
  font-size: clamp(2rem, 5vw, 3rem);
  margin: 0;
}

.section__lead {
  margin: 0;
  color: rgba(247, 245, 241, 0.7);
  font-size: 1.05rem;
}

.js-animate {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.js-animate.is-visible {
  opacity: 1;
  transform: none;
}

.story {
  position: relative;
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  max-width: 1024px;
  margin: 0 auto;
  align-items: start;
}

.story__rail {
  position: relative;
  justify-self: center;
  width: 4px;
  height: 100%;
  background: rgba(227, 198, 119, 0.12);
  border-radius: 999px;
  overflow: hidden;
}

.story__progress {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(227, 198, 119, 0.8), rgba(227, 198, 119, 0.1));
  transform-origin: top;
  transform: scaleY(0);
}

.story__steps {
  display: grid;
  gap: 1.8rem;
}

.story-step {
  padding: 1.8rem 2rem;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(227, 198, 119, 0.18);
  background: rgba(17, 20, 28, 0.65);
  box-shadow: 0 16px 35px rgba(0, 0, 0, 0.25);
  transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.story-step__index {
  font-size: 0.85rem;
  letter-spacing: 0.32em;
  color: rgba(227, 198, 119, 0.6);
  text-transform: uppercase;
}

.story-step h3 {
  margin: 0.6rem 0 0.5rem;
  font-size: 1.25rem;
  color: var(--accent);
}

.story-step p {
  margin: 0;
  color: rgba(247, 245, 241, 0.78);
}

.story-step.is-active {
  transform: translateX(12px) translateY(-6px);
  border-color: rgba(227, 198, 119, 0.45);
  box-shadow: 0 20px 45px rgba(227, 198, 119, 0.25);
}

.carousel {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
}

.carousel__viewport {
  overflow: hidden;
  flex: 1;
}

.carousel__track {
  display: flex;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.experience-card {
  flex: 0 0 clamp(280px, 28vw, 340px);
  padding: 2.2rem 2rem;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(227, 198, 119, 0.16);
  background: linear-gradient(160deg, rgba(15, 18, 26, 0.85), rgba(18, 20, 30, 0.65));
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  transition: transform 0.5s ease, border-color 0.4s ease, box-shadow 0.5s ease;
}

.experience-card.is-active {
  transform: translateY(-12px);
  border-color: rgba(227, 198, 119, 0.4);
  box-shadow: 0 25px 60px rgba(227, 198, 119, 0.2);
}

.experience-card__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  background: rgba(227, 198, 119, 0.12);
  color: var(--accent);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.experience-card__title {
  margin: 1.1rem 0 0.6rem;
  font-size: 1.4rem;
  color: var(--text-main);
}

.experience-card__desc {
  margin: 0;
  color: rgba(247, 245, 241, 0.75);
}

.carousel__control {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(227, 198, 119, 0.4);
  background: rgba(15, 18, 26, 0.7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
}

.carousel__control:hover {
  background: rgba(227, 198, 119, 0.18);
  transform: translateY(-2px);
}

.carousel__control span {
  width: 12px;
  height: 12px;
  border-top: 2px solid var(--accent);
  border-right: 2px solid var(--accent);
  transform: rotate(-45deg);
}

.carousel__control[data-carousel='prev'] span {
  transform: rotate(135deg);
}

.carousel__dots {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.carousel__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: rgba(227, 198, 119, 0.25);
  cursor: pointer;
  transition: transform 0.3s ease, background 0.3s ease;
}

.carousel__dot.is-active {
  background: var(--accent);
  transform: scale(1.2);
}

.service-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.service-card {
  padding: 2.1rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgba(17, 21, 30, 0.78), rgba(13, 15, 24, 0.92));
  border: 1px solid rgba(227, 198, 119, 0.16);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.3);
  transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
  transform-style: preserve-3d;
  will-change: transform;
}

.service-card h3 {
  margin: 0 0 0.75rem;
  color: var(--accent);
  font-size: 1.2rem;
}

.service-card p {
  margin: 0;
  color: rgba(247, 245, 241, 0.76);
}

.culture-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.culture-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  min-height: 320px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  isolation: isolate;
}

.culture-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 6, 10, 0.1), rgba(5, 6, 10, 0.8));
  transition: opacity 0.4s ease;
}

.culture-card__content {
  position: absolute;
  inset: auto 0 0;
  padding: 2.4rem 2.1rem;
  display: grid;
  gap: 0.7rem;
  background: linear-gradient(180deg, rgba(5, 6, 9, 0), rgba(5, 6, 9, 0.68));
}

.culture-card h3 {
  margin: 0;
  color: var(--accent);
}

.culture-card p {
  margin: 0;
  color: rgba(247, 245, 241, 0.78);
}

.culture-card:hover .culture-card__overlay {
  opacity: 0.4;
}

.luxury {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(5, 6, 9, 0.85), rgba(5, 6, 9, 0.45)), url('img/1.webp');
  background-size: cover;
  background-position: center;
}

.luxury__aura {
  position: absolute;
  inset: -20% -10%;
  background: radial-gradient(circle at 20% 20%, rgba(227, 198, 119, 0.32), transparent 55%),
    radial-gradient(circle at 80% 15%, rgba(126, 90, 255, 0.24), transparent 60%),
    linear-gradient(140deg, rgba(10, 12, 20, 0.9), rgba(7, 8, 14, 0.6));
  filter: blur(0);
  transform: scale(1.05);
  pointer-events: none;
  z-index: 0;
}

.luxury__container {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 6vw, 4.5rem);
  align-items: center;
}

.luxury__content {
  display: grid;
  gap: 1.5rem;
}

.luxury__title {
  margin: 0;
  font-size: clamp(2.2rem, 4.2vw, 3.2rem);
  letter-spacing: 0.01em;
}

.luxury__lead {
  margin: 0;
  font-size: 1.1rem;
  color: rgba(247, 245, 241, 0.76);
}

.luxury__highlights {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.luxury-highlight {
  border: 1px solid rgba(227, 198, 119, 0.2);
  border-radius: var(--radius-lg);
  padding: 1.3rem 1.6rem;
  /*
     Reduce the opacity of the luxury highlight cards to make the background image
     clearly visible. The previous gradient had 80% and 60% opacity, which made
     the cards appear quite dark. Switching to 8% and 5% opacity respectively
     results in roughly 92–95% transparency (5–8% opacity), per the user's request
     for maximal transparency.
  */
  background: linear-gradient(150deg, rgba(15, 18, 26, 0.08), rgba(20, 23, 32, 0.05));
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.28);
  transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.luxury-highlight:hover {
  transform: translateY(-6px);
  border-color: rgba(227, 198, 119, 0.45);
  box-shadow: 0 28px 65px rgba(227, 198, 119, 0.2);
}

.luxury-highlight h3 {
  margin: 0 0 0.4rem;
  font-size: 1.1rem;
  color: var(--accent);
}

.luxury-highlight p {
  margin: 0;
  color: rgba(247, 245, 241, 0.72);
}

.luxury__media {
  position: relative;
}

.luxury-media__frame {
  position: relative;
  border-radius: calc(var(--radius-xl) + 6px);
  padding: clamp(1.8rem, 3.5vw, 2.8rem);
  min-height: 340px;
  display: grid;
  place-items: stretch;
  background: radial-gradient(circle at 35% 20%, rgba(227, 198, 119, 0.25), transparent 65%),
    rgba(7, 9, 14, 0.78);
  border: 1px solid rgba(227, 198, 119, 0.32);
  box-shadow: 0 35px 80px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(227, 198, 119, 0.08) inset;
  overflow: hidden;
}

.luxury-media__frame::before,
.luxury-media__frame::after {
  content: '';
  position: absolute;
  border-radius: inherit;
  inset: 12px;
  border: 1px solid rgba(227, 198, 119, 0.2);
  pointer-events: none;
}

.luxury-media__frame::after {
  inset: 24px;
  border-color: rgba(227, 198, 119, 0.12);
}

.luxury-media__image {
  width: 100%;
  height: 100%;
  border-radius: calc(var(--radius-xl) - 4px);
  object-fit: cover;
  box-shadow: 0 30px 65px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(227, 198, 119, 0.26);
  filter: saturate(1.05);
  position: relative;
  z-index: 1;
}

.luxury-media__label {
  position: absolute;
  left: 50%;
  bottom: clamp(1.4rem, 3vw, 2rem);
  transform: translateX(-50%);
  margin: 0;
  padding: 0.6rem 1.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: rgba(5, 7, 12, 0.82);
  border-radius: 999px;
  border: 1px solid rgba(227, 198, 119, 0.38);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.4);
  color: var(--accent);
  z-index: 2;
}

.role-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  gap: clamp(1.7rem, 4vw, 2.8rem);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.role-card {
  border-radius: var(--radius-lg);
  border: 1px solid rgba(227, 198, 119, 0.2);
  background: linear-gradient(170deg, rgba(15, 18, 26, 0.85), rgba(20, 23, 32, 0.75));
  padding: 2.4rem 2.2rem;
  display: grid;
  gap: 1.2rem;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
  transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.role-card:hover {
  transform: translateY(-8px);
  border-color: rgba(227, 198, 119, 0.45);
  box-shadow: 0 28px 55px rgba(227, 198, 119, 0.18);
}

.role-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(227, 198, 119, 0.6);
}

.role-card__tag {
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  background: rgba(227, 198, 119, 0.15);
  color: var(--accent);
}

.role-card__title {
  margin: 0;
  font-size: 1.4rem;
  color: var(--text-main);
}

.role-card__desc {
  margin: 0;
  color: rgba(247, 245, 241, 0.75);
}

.role-card__list {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.5rem;
  color: rgba(247, 245, 241, 0.72);
}

.role-card__list li::marker {
  color: var(--accent);
}

.role-card__cta {
  justify-self: flex-start;
  padding: 0.7rem 1.5rem;
  border-radius: 999px;
  border: 1px solid rgba(227, 198, 119, 0.32);
  color: var(--accent);
  transition: background 0.3s ease, transform 0.3s ease;
}

.role-card__cta:hover {
  background: rgba(227, 198, 119, 0.18);
  transform: translateY(-2px);
}

.faq {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.75rem);
}

.faq-item {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(227, 198, 119, 0.2);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: border 0.3s ease, background 0.3s ease;
}

.faq-item[open] {
  background: var(--surface-strong);
  border-color: rgba(227, 198, 119, 0.45);
}

.faq-item summary {
  cursor: pointer;
  padding: clamp(1.1rem, 2.5vw, 1.6rem) clamp(1.1rem, 3vw, 1.8rem);
  font-weight: 600;
  position: relative;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: '';
  position: absolute;
  right: clamp(1rem, 3vw, 1.6rem);
  top: 50%;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.3s ease;
}

.faq-item[open] summary::after {
  transform: translateY(-30%) rotate(-135deg);
}

.faq-item p {
  margin: 0;
  padding: 0 clamp(1.1rem, 3vw, 1.8rem) clamp(1.2rem, 2.5vw, 1.6rem);
  color: var(--text-muted);
}

.faq-item p span {
  display: block;
}

.faq-item summary:focus {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.apply-form {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 3rem);
  border-radius: var(--radius-xl);
  background: rgba(14, 16, 22, 0.8);
  border: 1px solid rgba(227, 198, 119, 0.2);
  box-shadow: 0 25px 55px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(16px);
  display: grid;
  gap: 1.6rem;
}

.form-grid {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

input,
textarea {
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid rgba(227, 198, 119, 0.18);
  background: rgba(9, 11, 18, 0.75);
  color: var(--text-main);
  padding: 0.95rem 1.15rem;
  font: inherit;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

input:focus,
textarea:focus {
  outline: none;
  border-color: rgba(227, 198, 119, 0.45);
  box-shadow: 0 0 0 4px rgba(227, 198, 119, 0.15);
}

textarea {
  min-height: 140px;
  resize: vertical;
}

.site-footer {
  padding: clamp(3rem, 6vw, 4rem) clamp(1.5rem, 6vw, 4rem);
  border-top: 1px solid rgba(227, 198, 119, 0.15);
  background: rgba(5, 6, 9, 0.75);
  text-align: center;
  display: grid;
  gap: 0.8rem;
}

.site-footer__brand {
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem;
  color: var(--accent);
  margin: 0;
}

.site-footer__contact {
  margin: 0.75rem 0;
  color: rgba(247, 245, 241, 0.7);
  font-size: 0.95rem;
}

.site-footer__contact a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(227, 198, 119, 0.4);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.site-footer__contact a:hover,
.site-footer__contact a:focus {
  text-decoration-color: currentColor;
}

.site-footer__text,
.site-footer__note {
  margin: 0;
  color: rgba(247, 245, 241, 0.62);
  font-size: 0.9rem;
}

.site-footer__top {
  justify-self: center;
  margin-top: 0.8rem;
  padding: 0.6rem 1.6rem;
  border-radius: 999px;
  border: 1px solid rgba(227, 198, 119, 0.3);
  background: transparent;
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
}

.site-footer__top:hover {
  background: rgba(227, 198, 119, 0.18);
  transform: translateY(-2px);
}

@media (max-width: 1024px) {
  .site-nav__menu {
    position: absolute;
    inset: 76px 20px auto 20px;
    background: rgba(7, 8, 12, 0.95);
    border: 1px solid rgba(227, 198, 119, 0.18);
    border-radius: var(--radius-lg);
    padding: 1.2rem 1.4rem;
    display: none;
    flex-direction: column;
    gap: 1rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
  }

  .site-nav__menu.is-open {
    display: flex;
  }

  .site-nav__item--roles {
    display: none;
  }

  .site-nav__toggle {
    display: inline-flex;
  }

  .hero__grid {
    grid-template-columns: 1fr;
  }

  .dream__grid {
    grid-template-columns: 1fr;
  }

  .dream__panels {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }

  .hero__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .scene-card--accent {
    margin-left: 0;
  }

  .story {
    grid-template-columns: 1fr;
  }

  .story__rail {
    display: none;
  }

  .story-step.is-active {
    transform: translateY(-6px);
  }

  .luxury__container {
    grid-template-columns: 1fr;
  }

  .luxury__media {
    order: -1;
  }
}

@media (max-width: 768px) {
  main {
    padding-top: 96px;
  }

  .hero {
    padding: clamp(3.5rem, 10vw, 5rem) clamp(1.2rem, 7vw, 2.5rem);
  }

  .dream__content {
    padding: clamp(1.5rem, 6vw, 2rem);
  }

  .dream__panels {
    grid-template-columns: 1fr;
  }

  .hero__stats {
    grid-template-columns: 1fr 1fr;
  }

  .experience-card {
    flex-basis: min(86vw, 320px);
  }

  /*
   * On mobile screens, show the carousel navigation buttons instead of hiding
   * them. Position them absolutely within the carousel container and size
   * them down slightly to better fit smaller viewports. They will sit
   * vertically centred on either side of the slider. A z-index is added
   * so the arrows appear above the slides on mobile devices.
   */
  .carousel__control {
    display: inline-flex;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    z-index: 2;
  }

  /* Enlarge the arrow icon inside the control for better visibility on small screens */
  .carousel__control span {
    width: 14px;
    height: 14px;
  }

  /* Position the previous button on the left side */
  .carousel__control[data-carousel='prev'] {
    left: 8px;
  }
  /* Position the next button on the right side */
  .carousel__control[data-carousel='next'] {
    right: 8px;
  }

  .section__header {
    text-align: left;
  }

  .story-step {
    padding: 1.5rem 1.6rem;
  }

  .culture-card {
    min-height: 260px;
  }

  .luxury__lead {
    font-size: 1rem;
  }

  .luxury__highlights {
    gap: 1rem;
  }

  .luxury-highlight {
    padding: 1.1rem 1.3rem;
  }

  .luxury-media__frame {
    padding: 1.8rem;
    min-height: 240px;
  }

  .apply-form {
    padding: 2rem;
  }
}

@media (max-width: 520px) {
  .hero__stats {
    grid-template-columns: 1fr;
  }

  .btn {
    width: 100%;
  }

  .hero__scroll {
    padding-left: 0;
    text-align: center;
  }

  .hero__scroll::before {
    display: none;
  }

  .dream__content {
    padding: 1.4rem;
  }

  .dream__list li {
    padding-left: 1.9rem;
  }

  .dream__cta {
    flex-direction: column;
  }

  .section {
    padding: clamp(3rem, 12vw, 4rem) clamp(1.1rem, 6vw, 1.8rem);
  }

  .carousel__track {
    gap: 1rem;
  }

  .luxury__highlights {
    gap: 0.9rem;
  }

  .luxury-media__frame {
    padding: 1.6rem;
  }

  .apply-form {
    padding: 1.8rem;
  }
}

/* Floating Contact Buttons */
.floating-contact{
  position: fixed;
  right: 18px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 9999;
}

.floating-btn{
  width: 54px;
  height: 54px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.12);
  transition: transform .2s ease, opacity .2s ease;
}

.floating-btn:hover{
  transform: translateY(-3px) scale(1.03);
}

.floating-btn svg{
  width: 26px;
  height: 26px;
  fill: #fff;
}

/* WhatsApp */
.floating-btn.whatsapp{
  background: rgba(37, 211, 102, .9);
}

/* Telegram */
.floating-btn.telegram{
  background: rgba(34, 158, 217, .9);
}