:root {
  --bg: #030305;
  --bg-soft: #0a0b0f;
  --card: rgba(14, 16, 22, 0.58);
  --card-strong: rgba(17, 19, 28, 0.8);
  --line: rgba(255, 255, 255, 0.11);
  --line-soft: rgba(255, 255, 255, 0.07);
  --text: #f5f7fb;
  --muted: #b1b6c3;
  --muted-2: #7d8392;
  --white: #ffffff;
  --glow: rgba(189, 203, 255, 0.12);
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.48);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --nav-h: 84px;
  --mx: 0px;
  --my: 0px;
  --mobile-shift: 0px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
}

body.locked {
  overflow: hidden;
}

body::selection {
  background: #fff;
  color: #050505;
}

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

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
}

img {
  max-width: 100%;
}

.background-scene,
.background-scene > div {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.background-scene {
  z-index: -10;
  overflow: hidden;
}

.bg-gradient {
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,0.06), transparent 0 18%),
    radial-gradient(circle at 84% 14%, rgba(155, 173, 255, 0.08), transparent 0 18%),
    radial-gradient(circle at 72% 76%, rgba(131, 139, 168, 0.1), transparent 0 16%),
    linear-gradient(135deg, #010103 0%, #06080d 28%, #090c12 56%, #030305 100%);
}

.bg-ribbon {
  border-radius: 999px;
  filter: blur(56px);
  opacity: 0.6;
  mix-blend-mode: screen;
  transform: translate3d(var(--mx), var(--my), 0);
  will-change: transform, opacity, filter;
  -webkit-transform: translate3d(var(--mx), var(--my), 0);
}

.ribbon-1 {
  inset: auto auto 62% -12%;
  width: 54vw;
  height: 20vw;
  background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(160,172,255,0.22), rgba(255,255,255,0.04));
  animation: ribbonMoveA 18s var(--ease) infinite alternate;
}

.ribbon-2 {
  inset: 54% -8% auto auto;
  width: 48vw;
  height: 24vw;
  background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(125,137,161,0.22), rgba(255,255,255,0.03));
  animation: ribbonMoveB 22s var(--ease) infinite alternate;
}

.ribbon-3 {
  inset: 24% auto auto 24%;
  width: 34vw;
  height: 16vw;
  background: linear-gradient(110deg, rgba(255,255,255,0.015), rgba(204,214,255,0.12), rgba(255,255,255,0.02));
  animation: ribbonMoveC 20s var(--ease) infinite alternate;
}

.bg-beam {
  filter: blur(14px);
  opacity: 0.32;
}

.beam-1 {
  background: linear-gradient(125deg, transparent 40%, rgba(255,255,255,0.08) 50%, transparent 60%);
  animation: beamShift 16s linear infinite;
}

.beam-2 {
  background: linear-gradient(65deg, transparent 44%, rgba(181,190,225,0.08) 50%, transparent 58%);
  animation: beamShift 22s linear infinite reverse;
}

.bg-grid {
  background:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 68px 68px;
  transform: perspective(1100px) rotateX(73deg) translateY(-18%);
  transform-origin: top;
  opacity: 0.28;
  mask-image: linear-gradient(to bottom, transparent, black 18%, black 62%, transparent);
  animation: gridFloat 22s var(--ease) infinite alternate;
}

.bg-noise {
  opacity: 0.18;
  background-image: radial-gradient(rgba(255,255,255,0.16) 0.7px, transparent 0.7px);
  background-size: 4px 4px;
  mix-blend-mode: soft-light;
}

.bg-vignette {
  background: radial-gradient(circle at center, transparent 46%, rgba(0,0,0,0.28) 68%, rgba(0,0,0,0.66) 100%);
}

@keyframes ribbonMoveA {
  from { transform: translate3d(calc(var(--mx) * 0.7), calc(var(--my) * 0.7), 0) rotate(-14deg) scale(1); }
  to { transform: translate3d(calc(var(--mx) * -0.5), calc(var(--my) * -0.4), 0) rotate(-4deg) scale(1.14); }
}

@keyframes ribbonMoveB {
  from { transform: translate3d(calc(var(--mx) * -0.8), calc(var(--my) * 0.5), 0) rotate(12deg) scale(0.96); }
  to { transform: translate3d(calc(var(--mx) * 0.55), calc(var(--my) * -0.5), 0) rotate(3deg) scale(1.12); }
}

@keyframes ribbonMoveC {
  from { transform: translate3d(calc(var(--mx) * 0.35), calc(var(--my) * -0.35), 0) rotate(24deg) scale(1); }
  to { transform: translate3d(calc(var(--mx) * -0.25), calc(var(--my) * 0.22), 0) rotate(10deg) scale(1.18); }
}

@keyframes beamShift {
  from { transform: translate3d(-8%, -4%, 0) scale(1.15); }
  to { transform: translate3d(8%, 4%, 0) scale(1.25); }
}

@keyframes gridFloat {
  from { transform: perspective(1100px) rotateX(73deg) translateY(-18%) translateX(-1%); }
  to { transform: perspective(1100px) rotateX(73deg) translateY(-16%) translateX(1%); }
}

.language-screen,
.cinema-intro {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 50;
  background: rgba(2, 3, 6, 0.94);
  backdrop-filter: blur(20px);
  transition: opacity 0.85s var(--ease), visibility 0.85s var(--ease), transform 0.85s var(--ease);
}

.language-screen.hidden,
.cinema-intro:not(.play) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.language-card {
  width: min(540px, calc(100% - 28px));
  padding: 34px;
  border-radius: 34px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(20,22,30,0.82), rgba(10,12,18,0.72));
  box-shadow: 0 32px 90px rgba(0,0,0,0.46), inset 0 1px 0 rgba(255,255,255,0.07);
  text-align: center;
  transform: translateY(0);
  animation: cardBreath 6s var(--ease) infinite;
}

@keyframes cardBreath {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-5px); }
}

.mini-label,
.eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.language-card h1 {
  margin-top: 18px;
  font-size: clamp(34px, 6vw, 56px);
  line-height: 0.96;
  letter-spacing: -0.06em;
}

.language-card p {
  margin-top: 16px;
  color: var(--muted);
  line-height: 1.7;
}

.language-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 28px;
}

.language-choice,
.btn,
.nav-links a,
.floating-lang,
.nav-toggle,
.logo,
.project-card,
.glass-card,
.stats div,
.contact-card,
.photo-card {
  transition:
    transform 0.72s var(--ease),
    box-shadow 0.72s var(--ease),
    background 0.72s var(--ease),
    border-color 0.72s var(--ease),
    opacity 0.72s var(--ease),
    color 0.72s var(--ease),
    filter 0.72s var(--ease);
}

.language-choice {
  min-height: 58px;
  padding: 0 18px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.04);
  font-weight: 700;
}

.language-choice:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,0.09);
  box-shadow: 0 14px 36px rgba(0,0,0,0.34);
}

.cinema-intro {
  z-index: 48;
  background: rgba(0, 0, 0, 0.96);
}

.cinema-intro h2 {
  font-size: clamp(42px, 9vw, 120px);
  font-weight: 900;
  letter-spacing: -0.08em;
  opacity: 0;
  transform: scale(0.82);
  filter: blur(18px);
}

.cinema-intro.play {
  opacity: 1;
  visibility: visible;
}

.cinema-intro.play h2 {
  animation: introTitle 2.8s var(--ease) forwards;
  will-change: transform, opacity, filter;
}

@keyframes introTitle {
  0% {
    opacity: 0;
    transform: scale(0.82);
    filter: blur(20px);
  }
  25% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0px);
  }
  72% {
    opacity: 1;
    transform: scale(1.02);
    filter: blur(0px);
  }
  100% {
    opacity: 0;
    transform: scale(1.08);
    filter: blur(18px);
  }
}

.floating-lang {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 35;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(10, 12, 18, 0.68);
  backdrop-filter: blur(16px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}

.floating-lang:hover {
  transform: translateY(-4px) scale(1.04);
  background: rgba(255,255,255,0.09);
}

.site-shell {
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px);
  transition: opacity 0.8s var(--ease), visibility 0.8s var(--ease), transform 0.8s var(--ease);
}

.site-shell.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.navbar {
  position: sticky;
  top: 12px;
  z-index: 30;
  width: min(1240px, calc(100% - 24px));
  min-height: var(--nav-h);
  margin: 12px auto 0;
  padding: 14px 18px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: rgba(10, 12, 18, 0.56);
  backdrop-filter: blur(18px);
  box-shadow: 0 16px 46px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.04);
}

.logo {
  justify-self: start;
  padding: 12px 16px;
  border-radius: 18px;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.05em;
}

.logo span {
  color: var(--muted);
}

.logo:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.05);
}

.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
}

.nav-links a {
  padding: 12px 16px;
  border-radius: 16px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.nav-links a:hover {
  transform: translateY(-2px);
  color: var(--white);
  background: rgba(255,255,255,0.06);
}

.nav-toggle {
  display: none;
  justify-self: end;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.04);
  position: relative;
}

.nav-toggle span {
  position: absolute;
  left: 12px;
  right: 12px;
  height: 2px;
  border-radius: 999px;
  background: #fff;
  transition: transform 0.6s var(--ease), opacity 0.6s var(--ease), top 0.6s var(--ease);
}

.nav-toggle span:first-child { top: 18px; }
.nav-toggle span:last-child { top: 28px; }

.nav-toggle.active span:first-child {
  top: 23px;
  transform: rotate(45deg);
}

.nav-toggle.active span:last-child {
  top: 23px;
  transform: rotate(-45deg);
}

.section {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 108px 0;
}

.hero {
  min-height: calc(100vh - 110px);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  align-items: center;
  gap: 56px;
  padding-top: 56px;
}

.hero h1,
.section-heading h2,
.contact-card h2 {
  margin-top: 20px;
  font-size: clamp(38px, 7vw, 78px);
  line-height: 0.94;
  letter-spacing: -0.075em;
}

.hero p,
.section-heading p,
.contact-card p,
.project-card p,
.glass-card p {
  margin-top: 20px;
  color: var(--muted);
  font-size: clamp(16px, 1.7vw, 18px);
  line-height: 1.78;
}

.hero-actions,
.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 24px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-weight: 800;
  overflow: hidden;
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,0.18) 50%, transparent 80%);
  transform: translateX(-130%);
  transition: transform 0.9s var(--ease);
  z-index: -1;
}

.btn:hover::before {
  transform: translateX(130%);
}

.btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 42px rgba(0,0,0,0.32);
}

.btn.primary {
  color: #030305;
  background: linear-gradient(180deg, #ffffff 0%, #dfe5ef 100%);
  border-color: rgba(255,255,255,0.82);
}

.btn.primary:hover {
  filter: brightness(1.03);
}

.btn.ghost,
.btn.cta-attention {
  background: rgba(255,255,255,0.05);
  color: var(--white);
}

.btn.ghost:hover,
.btn.cta-attention:hover {
  background: rgba(255,255,255,0.11);
  border-color: rgba(255,255,255,0.22);
}

.btn.cta-attention {
  border-color: rgba(255,255,255,0.3);
  box-shadow: 0 0 0 0 rgba(255,255,255,0.12), 0 16px 36px rgba(0,0,0,0.28);
  animation: ctaPulse 2.6s var(--ease) infinite;
  will-change: transform, box-shadow;
}

.btn.cta-attention::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,0.22);
  opacity: 0;
  animation: ctaRing 2.6s var(--ease) infinite;
}

@keyframes ctaPulse {
  0%, 100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 0 0 0 rgba(255,255,255,0.08), 0 16px 36px rgba(0,0,0,0.28);
  }
  35% {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 0 0 10px rgba(255,255,255,0.03), 0 20px 44px rgba(0,0,0,0.34);
  }
  70% {
    transform: translateY(-1px) scale(1.01);
    box-shadow: 0 0 0 16px rgba(255,255,255,0), 0 18px 38px rgba(0,0,0,0.30);
  }
}

@keyframes ctaRing {
  0% { opacity: 0; transform: scale(0.96); }
  25% { opacity: 0.45; }
  100% { opacity: 0; transform: scale(1.14); }
}

.stats {
  margin-top: 42px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.stats div,
.glass-card,
.project-card,
.contact-card {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(17,19,28,0.72), rgba(10,12,18,0.72));
  box-shadow: 0 24px 64px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.04);
}

.stats div::before,
.glass-card::before,
.project-card::before,
.contact-card::before,
.photo-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.12), transparent 24%, transparent 76%, rgba(255,255,255,0.06));
  opacity: 0.55;
  pointer-events: none;
}

.stats div {
  padding: 20px;
}

.stats div:hover,
.glass-card:hover,
.project-card:hover,
.contact-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255,255,255,0.18);
  box-shadow: 0 30px 76px rgba(0,0,0,0.34), 0 0 40px rgba(255,255,255,0.04);
}

.stats strong {
  display: block;
  font-size: clamp(28px, 4.4vw, 40px);
  letter-spacing: -0.07em;
}

.stats span {
  display: block;
  margin-top: 8px;
  color: var(--muted-2);
  font-size: 13px;
  line-height: 1.5;
}

.hero-photo-wrap {
  display: flex;
  justify-content: center;
}

.photo-card {
  position: relative;
  width: min(500px, 100%);
  min-height: 620px;
  padding: 14px;
  border-radius: 36px;
  border: 1px solid rgba(255,255,255,0.14);
  background: linear-gradient(180deg, rgba(19,22,30,0.84), rgba(10,12,18,0.74));
  box-shadow: 0 34px 100px rgba(0,0,0,0.44), 0 0 70px rgba(255,255,255,0.04);
  overflow: hidden;
  animation: photoFloat 7s var(--ease) infinite alternate;
}

.photo-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 40px 120px rgba(0,0,0,0.52), 0 0 90px rgba(255,255,255,0.06);
}

@keyframes photoFloat {
  from { transform: translateY(0); }
  to { transform: translateY(-10px); }
}

.photo-badge {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 3;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(4, 6, 10, 0.52);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(10px);
  font-size: 13px;
  font-weight: 700;
}

.photo-card img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 592px;
  border-radius: 26px;
  object-fit: cover;
  object-position: center top;
  filter: saturate(0.98) contrast(1.04);
}

.photo-glow {
  position: absolute;
  inset: auto -12% -18% auto;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.16), transparent 70%);
  filter: blur(14px);
  z-index: 1;
}

.section-heading {
  max-width: 920px;
}

.info-grid,
.project-grid {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
}

.glass-card,
.project-card {
  padding: 26px;
}

.glass-card {
  grid-column: span 3;
}

.card-number {
  color: var(--muted-2);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.glass-card h3,
.project-card h3 {
  margin-top: 16px;
  font-size: 24px;
  line-height: 1.06;
  letter-spacing: -0.04em;
}

.project-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  grid-column: span 4;
}

.project-card .btn {
  margin-top: auto;
  width: fit-content;
}

.project-card.disabled .btn {
  pointer-events: none;
  opacity: 0.7;
}

.project-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted-2);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.status {
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.04);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
  margin-bottom: 24px;
}

.tags span {
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  background: rgba(255,255,255,0.04);
  color: var(--muted);
  font-size: 13px;
}

.contact-card {
  padding: 34px;
}

.footer {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 0 0 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted-2);
}

.footer a {
  color: var(--text);
}

.reveal {
  opacity: 0;
  transform: translateY(24px) scale(0.985);
  filter: blur(8px);
}

.reveal.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.18s; }
.delay-3 { transition-delay: 0.26s; }


@keyframes mobileBackgroundBreath {
  0% {
    transform: translate3d(-3%, -2%, 0) scale(1.04) rotate(-2deg);
    opacity: 0.52;
  }
  45% {
    transform: translate3d(4%, 3%, 0) scale(1.14) rotate(4deg);
    opacity: 0.78;
  }
  100% {
    transform: translate3d(-1%, 5%, 0) scale(1.08) rotate(-1deg);
    opacity: 0.62;
  }
}

@keyframes mobileGridPulse {
  0% {
    transform: perspective(820px) rotateX(68deg) translateY(-16%) translateX(-3%);
    opacity: 0.22;
  }
  100% {
    transform: perspective(820px) rotateX(68deg) translateY(-12%) translateX(3%);
    opacity: 0.34;
  }
}

@keyframes mobileButtonAlive {
  0%, 100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 14px 34px rgba(0,0,0,0.28);
  }
  42% {
    transform: translateY(-3px) scale(1.018);
    box-shadow: 0 20px 46px rgba(0,0,0,0.36), 0 0 24px rgba(255,255,255,0.055);
  }
}

@keyframes mobileIntroTitle {
  0% {
    opacity: 0;
    transform: scale(0.72) translateY(14px);
    filter: blur(18px);
    letter-spacing: -0.12em;
  }
  24% {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
    letter-spacing: -0.08em;
  }
  74% {
    opacity: 1;
    transform: scale(1.035) translateY(0);
    filter: blur(0);
    letter-spacing: -0.075em;
  }
  100% {
    opacity: 0;
    transform: scale(1.12) translateY(-10px);
    filter: blur(18px);
    letter-spacing: -0.1em;
  }
}

@media (hover: none) and (pointer: coarse) {
  .bg-gradient {
    animation: mobileBackgroundBreath 13s var(--ease) infinite alternate;
    will-change: transform, opacity;
  }

  .ribbon-1 {
    width: 92vw;
    height: 42vw;
    inset: 7% auto auto -38%;
    filter: blur(44px);
    animation: ribbonMoveA 12s var(--ease) infinite alternate, mobileBackgroundBreath 14s var(--ease) infinite alternate;
  }

  .ribbon-2 {
    width: 92vw;
    height: 48vw;
    inset: auto -38% 17% auto;
    filter: blur(46px);
    animation: ribbonMoveB 13s var(--ease) infinite alternate;
  }

  .ribbon-3 {
    width: 76vw;
    height: 36vw;
    inset: 42% auto auto 10%;
    filter: blur(42px);
    opacity: 0.5;
    animation: ribbonMoveC 15s var(--ease) infinite alternate;
  }

  .bg-grid {
    background-size: 54px 54px;
    animation: mobileGridPulse 12s var(--ease) infinite alternate;
  }

  .bg-beam {
    opacity: 0.42;
    filter: blur(18px);
  }

  .beam-1 {
    animation: beamShift 8s linear infinite;
  }

  .beam-2 {
    animation: beamShift 10s linear infinite reverse;
  }

  .btn {
    animation: mobileButtonAlive 4.2s var(--ease) infinite;
  }

  .btn.primary {
    animation-delay: 0.2s;
  }

  .project-card .btn,
  .contact-actions .btn {
    animation-duration: 4.6s;
  }

  .btn.cta-attention {
    animation: ctaPulse 2.1s var(--ease) infinite, mobileButtonAlive 3.2s var(--ease) infinite;
  }

  .language-choice {
    animation: mobileButtonAlive 4.4s var(--ease) infinite;
  }

  .language-choice:nth-child(2) {
    animation-delay: 0.16s;
  }

  .language-choice:nth-child(3) {
    animation-delay: 0.32s;
  }

  .cinema-intro.play h2 {
    animation: mobileIntroTitle 2.75s var(--ease) forwards;
  }

  .glass-card,
  .project-card,
  .photo-card,
  .stats div {
    transform: translateZ(0);
    will-change: transform, opacity, filter;
  }
}

@media (max-width: 1080px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 34px;
    min-height: auto;
  }

  .hero-text {
    order: 1;
  }

  .hero-photo-wrap {
    order: 2;
  }

  .glass-card {
    grid-column: span 6;
  }

  .project-card {
    grid-column: span 6;
  }
}

@media (max-width: 820px) {
  :root {
    --nav-h: 72px;
  }

  .navbar {
    grid-template-columns: auto auto;
    justify-content: space-between;
  }

  .nav-toggle {
    display: block;
  }

  .nav-links {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 14px;
    border-radius: 24px;
    border: 1px solid var(--line);
    background: rgba(10, 12, 18, 0.9);
    backdrop-filter: blur(18px);
    box-shadow: 0 20px 54px rgba(0,0,0,0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    pointer-events: none;
  }

  .nav-links.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  .nav-links a {
    text-align: center;
    min-height: 48px;
    display: grid;
    place-items: center;
  }

  .section {
    width: min(100% - 24px, 1180px);
    padding: 86px 0;
  }

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

  .photo-card {
    width: min(460px, 100%);
    min-height: 520px;
  }

  .photo-card img {
    min-height: 492px;
  }

  .glass-card,
  .project-card {
    grid-column: span 12;
  }

  .language-options {
    grid-template-columns: 1fr;
  }

  .contact-card {
    padding: 28px;
  }

  .footer {
    padding-bottom: 92px;
  }
}

@media (max-width: 560px) {
  .navbar {
    width: calc(100% - 14px);
    top: 7px;
    margin-top: 7px;
    padding: 9px 10px;
    min-height: auto;
    border-radius: 22px;
  }

  .bg-noise {
    opacity: 0.22;
    background-size: 3px 3px;
  }

  .bg-vignette {
    background: radial-gradient(circle at center, transparent 34%, rgba(0,0,0,0.22) 62%, rgba(0,0,0,0.72) 100%);
  }

  .logo {
    padding: 10px 12px;
    font-size: 16px;
  }

  .nav-toggle {
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }

  .section {
    width: calc(100% - 18px);
    padding: 76px 0;
  }

  .hero {
    padding-top: 38px;
    gap: 30px;
  }

  .hero h1,
  .section-heading h2,
  .contact-card h2 {
    font-size: clamp(32px, 11vw, 48px);
    line-height: 0.98;
  }

  .hero p,
  .section-heading p,
  .contact-card p,
  .project-card p,
  .glass-card p {
    font-size: 15px;
    line-height: 1.7;
  }

  .hero-actions,
  .contact-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .btn {
    width: 100%;
    min-height: 56px;
    padding-inline: 18px;
  }

  .hero-actions .btn.cta-attention {
    min-height: 60px;
    font-size: 16px;
  }

  .photo-card {
    min-height: 440px;
    border-radius: 30px;
    padding: 12px;
  }

  .photo-card img {
    min-height: 416px;
    border-radius: 22px;
  }

  .photo-badge {
    top: 18px;
    left: 18px;
    font-size: 12px;
  }

  .glass-card,
  .project-card,
  .contact-card {
    padding: 22px;
    border-radius: 24px;
  }

  .project-card .btn {
    width: 100%;
  }

  .tags {
    gap: 8px;
  }

  .tags span {
    font-size: 12px;
    padding: 9px 12px;
  }

  .floating-lang {
    right: 12px;
    bottom: 12px;
    width: 52px;
    height: 52px;
  }

  .language-card {
    width: calc(100% - 16px);
    padding: 24px 18px;
    border-radius: 26px;
  }
}

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

  .reveal,
  .reveal.show {
    filter: none !important;
  }
}






/* ===== SCROLL FIX + FINAL SAFE ANIMATED BUILD ===== */
:root {
  --safe-blue: #8eb8ff;
  --safe-violet: #b49bff;
  --safe-cyan: #96fbff;
  --vh: 1vh;
}

/* One scrollbar only */
html {
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background: #030305;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background: #030305;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

body.locked {
  overflow: hidden !important;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
}

/* Never let decorative/fixed layers create page width */
.background-scene,
.background-scene > div,
.mobile-liquid-layer,
.mobile-liquid-layer i,
.bg-gradient,
.bg-ribbon,
.bg-beam,
.bg-grid,
.bg-noise,
.bg-vignette {
  max-width: 100vw;
  pointer-events: none !important;
}

/* Hide any accidental nested scrollbar in full-screen layers */
.language-screen,
.cinema-intro {
  overflow: hidden !important;
}

/* Stable site container */
.site-shell {
  width: 100%;
  max-width: 100%;
  overflow: visible !important;
}

.site-shell.visible {
  animation: fixedSiteEnter .8s var(--ease) both;
}

@keyframes fixedSiteEnter {
  from { opacity: 0; transform: translateY(18px); filter: blur(8px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* Compatibility fallback */
@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .navbar,
  .language-card,
  .photo-card,
  .photo-glass,
  .glass-card,
  .project-card,
  .contact-card,
  .floating-lang,
  .nav-links,
  .stats div {
    background: rgba(13, 15, 24, .97) !important;
  }
}

/* Animated but safe background */
.background-scene::before,
.background-scene::after {
  content: "";
  position: fixed;
  inset: -25%;
  z-index: -9;
  pointer-events: none;
  max-width: none;
}

.background-scene::before {
  background:
    radial-gradient(circle at 18% 22%, rgba(142,184,255,.22), transparent 24%),
    radial-gradient(circle at 82% 16%, rgba(180,155,255,.18), transparent 27%),
    radial-gradient(circle at 56% 84%, rgba(150,251,255,.12), transparent 34%);
  filter: blur(34px);
  animation: safeAura 12s var(--ease) infinite alternate;
}

.background-scene::after {
  inset: 0;
  background:
    linear-gradient(115deg, transparent 0 34%, rgba(255,255,255,.04) 49%, transparent 66%),
    radial-gradient(circle at center, transparent 42%, rgba(0,0,0,.42) 100%);
  animation: safeSweep 9s linear infinite;
  opacity: .7;
}

@keyframes safeAura {
  0% { transform: translate3d(-3%, -2%, 0) rotate(-2deg) scale(1); opacity: .58; }
  50% { transform: translate3d(3%, 2%, 0) rotate(4deg) scale(1.08); opacity: .9; }
  100% { transform: translate3d(-1%, 4%, 0) rotate(-1deg) scale(1.04); opacity: .66; }
}

@keyframes safeSweep {
  0% { transform: translateX(-18%) scale(1.08); opacity: .3; }
  50% { opacity: .72; }
  100% { transform: translateX(18%) scale(1.18); opacity: .3; }
}

/* Section anchors */
section,
#hero,
#about,
#bots,
#websites,
#contacts {
  scroll-margin-top: 112px;
}

/* More attractive animations without breaking scroll */
.reveal {
  transition:
    opacity .9s var(--ease),
    transform .9s var(--ease),
    filter .9s var(--ease) !important;
}

.reveal.show {
  animation: safeRevealFloat .9s var(--ease) both;
}

@keyframes safeRevealFloat {
  0% { transform: translateY(22px) scale(.985); }
  68% { transform: translateY(-4px) scale(1.004); }
  100% { transform: translateY(0) scale(1); }
}

/* Hero polish */
.hero {
  position: relative;
  min-height: auto;
}

.hero::before {
  content: "";
  position: absolute;
  right: min(4vw, 70px);
  top: 16%;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 0 60px rgba(142,184,255,.04);
  pointer-events: none;
  opacity: .36;
  animation: safeOrbit 24s linear infinite;
}

.hero::after {
  content: "";
  position: absolute;
  left: -4%;
  bottom: 12%;
  width: min(520px, 62vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(150,251,255,.42), transparent);
  pointer-events: none;
  animation: safeHeroLine 5.2s var(--ease) infinite alternate;
}

@keyframes safeOrbit { to { transform: rotate(360deg); } }
@keyframes safeHeroLine {
  from { transform: translateX(-12%); opacity: .25; }
  to { transform: translateX(14%); opacity: .78; }
}

.hero h1 {
  text-wrap: balance;
  background: linear-gradient(180deg, #fff 0%, #e8eeff 52%, #aab7dc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero p,
.section-heading p,
.contact-card p,
.project-card p,
.glass-card p {
  overflow-wrap: anywhere;
}

/* Cards and buttons */
.btn,
.language-choice,
.nav-links a,
.logo,
.project-card,
.glass-card,
.stats div,
.contact-card,
.photo-card,
.photo-glass,
.floating-lang {
  will-change: transform, opacity, filter;
  transform: translateZ(0);
}

.btn:active,
.language-choice:active,
.nav-links a:active,
.project-card:active {
  transform: translateY(-1px) scale(.985) !important;
}

.btn.cta-attention {
  border-color: rgba(150,251,255,.32);
  background:
    linear-gradient(135deg, rgba(142,184,255,.18), rgba(180,155,255,.10)),
    rgba(255,255,255,.055);
  box-shadow:
    0 16px 42px rgba(0,0,0,.28),
    0 0 30px rgba(142,184,255,.12);
}

.btn.cta-attention::before {
  animation: safeCtaShine 2.5s var(--ease) infinite;
}

@keyframes safeCtaShine {
  0%, 34% { transform: translateX(-130%); opacity: 0; }
  55% { opacity: 1; }
  100% { transform: translateX(130%); opacity: 0; }
}

.project-card,
.glass-card,
.contact-card,
.stats div {
  background: linear-gradient(180deg, rgba(18,22,34,.80), rgba(9,11,18,.80)) !important;
}

.project-card::after,
.glass-card::after,
.contact-card::after,
.stats div::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 16px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(150,251,255,.38), transparent);
  opacity: 0;
  transition: opacity .65s var(--ease), transform .65s var(--ease);
  pointer-events: none;
}

.project-card:hover::after,
.glass-card:hover::after,
.contact-card:hover::after,
.stats div:hover::after {
  opacity: 1;
  transform: translateY(-4px);
}

.project-card:hover {
  transform: translateY(-8px) scale(1.01);
}

.project-card .btn::after {
  content: "↗";
  margin-left: 8px;
  opacity: .72;
  transition: transform .5s var(--ease), opacity .5s var(--ease);
}

.project-card .btn:hover::after {
  opacity: 1;
  transform: translate(3px, -3px);
}

/* Photo fallback */
.photo-missing {
  min-height: 420px;
  display: grid !important;
  place-items: center;
}

.photo-missing::after {
  content: "Добавь файл my-photo.jpg";
  position: relative;
  z-index: 5;
  display: grid;
  place-items: center;
  width: calc(100% - 28px);
  min-height: 360px;
  border-radius: 24px;
  color: var(--muted);
  border: 1px dashed rgba(255,255,255,.18);
  background: rgba(255,255,255,.035);
  font-weight: 800;
  letter-spacing: .04em;
  text-align: center;
}

/* Mobile animation pack */
@keyframes safeMobileButton {
  0%, 100% { transform: translateY(0) scale(1); box-shadow: 0 14px 34px rgba(0,0,0,.28); }
  45% { transform: translateY(-4px) scale(1.018); box-shadow: 0 24px 58px rgba(0,0,0,.36), 0 0 28px rgba(142,184,255,.10); }
}

@keyframes safeMobileCard {
  0%, 100% { transform: translateY(0) scale(1); border-color: rgba(255,255,255,.11); }
  50% { transform: translateY(-4px) scale(1.006); border-color: rgba(150,251,255,.18); }
}

@keyframes safeTitleGlow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(142,184,255,0)); }
  50% { filter: drop-shadow(0 0 26px rgba(142,184,255,.14)); }
}

@media (hover: none), (pointer: coarse), (max-width: 980px) {
  .background-scene::before { animation-duration: 8s; opacity: .82; }
  .background-scene::after { animation-duration: 6s; }

  .mobile-liquid-layer i { opacity: .45; filter: blur(34px); }

  .btn,
  .language-choice,
  .project-card .btn,
  .contact-actions .btn,
  .nav-toggle,
  .floating-lang {
    animation: safeMobileButton 3.4s var(--ease) infinite !important;
  }

  .btn.cta-attention {
    animation:
      ctaPulse 1.95s var(--ease) infinite,
      safeMobileButton 3s var(--ease) infinite !important;
  }

  .project-card,
  .glass-card,
  .stats div {
    animation: safeMobileCard 5s var(--ease) infinite;
  }

  .hero h1 { animation: safeTitleGlow 4.4s var(--ease) infinite; }

  .photo-card,
  .photo-glass {
    animation:
      photoFloat 4.2s var(--ease) infinite alternate,
      safeMobileCard 5.4s var(--ease) infinite !important;
  }

  .cinema-intro.play h2 {
    animation: mobileIntroTitle 2.7s var(--ease) forwards !important;
  }

  .hero::before {
    width: 260px;
    height: 260px;
    right: -94px;
    top: 15%;
    opacity: .34;
    animation-duration: 14s;
  }

  .hero::after { width: 70vw; }
}

/* Tablet */
@media (min-width: 681px) and (max-width: 1080px) {
  .section { width: min(100% - 32px, 980px); }
  .hero { gap: 42px; padding-top: 58px; min-height: auto; }
  .hero-text { max-width: 860px; }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .project-grid, .info-grid { gap: 16px; }
  .project-card { min-height: 360px; }
  .photo-card, .photo-glass { width: min(470px, 100%); }
}

/* Phones - Instagram safe */
@media (max-width: 680px) {
  html { scroll-padding-top: 92px; }
  section,#hero,#about,#bots,#websites,#contacts { scroll-margin-top: 96px; }

  .navbar {
    width: calc(100% - 12px);
    top: max(6px, env(safe-area-inset-top));
    margin-top: 6px;
    padding: 8px 9px;
    border-radius: 20px;
  }

  .logo { font-size: 15px; padding: 9px 10px; }
  .nav-toggle { width: 42px; height: 42px; }

  .nav-links {
    border-radius: 20px;
    gap: 8px;
    padding: 11px;
  }

  .nav-links a {
    min-height: 45px;
    padding: 9px;
    font-size: 13px;
  }

  .section {
    width: calc(100% - 14px);
    padding: 66px 0;
  }

  .hero {
    padding-top: 32px;
    gap: 24px;
    min-height: auto;
  }

  .hero h1 {
    font-size: clamp(34px, 11.2vw, 50px);
    letter-spacing: -0.075em;
    line-height: .98;
  }

  .hero p,
  .section-heading p,
  .contact-card p,
  .project-card p,
  .glass-card p {
    font-size: 14.8px;
    line-height: 1.68;
  }

  .eyebrow {
    font-size: 10.5px;
    padding: 9px 12px;
    letter-spacing: .07em;
  }

  .stats { gap: 10px; margin-top: 30px; }
  .stats div { padding: 16px; border-radius: 21px; }
  .stats strong { font-size: 30px; }

  .hero-actions,
  .contact-actions {
    gap: 10px;
    margin-top: 26px;
  }

  .btn { min-height: 56px; padding-inline: 17px; }

  .photo-card,
  .photo-glass {
    min-height: 430px;
    border-radius: 28px;
    padding: 12px;
  }

  .photo-card img,
  .photo-glass img {
    min-height: 406px;
    border-radius: 22px;
  }

  .section-heading h2,
  .contact-card h2 {
    font-size: clamp(32px, 10.4vw, 46px);
    line-height: 1;
  }

  .project-grid,
  .info-grid { gap: 13px; }

  .project-card,
  .glass-card,
  .contact-card {
    padding: 20px;
    border-radius: 23px;
  }

  .project-card h3,
  .glass-card h3 { font-size: 22px; }

  .project-meta { font-size: 10.5px; }
  .status { padding: 7px 9px; }

  .tags {
    gap: 7px;
    margin-top: 18px;
    margin-bottom: 21px;
  }

  .tags span {
    padding: 8px 10px;
    font-size: 11.5px;
  }

  .floating-lang {
    width: 50px;
    height: 50px;
    right: max(10px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
  }

  .language-card {
    padding: 22px 16px;
    width: calc(100% - 16px);
  }

  .language-card h1 { font-size: clamp(32px, 11vw, 48px); }
  .language-choice { min-height: 55px; }

  .footer {
    width: calc(100% - 18px);
    padding-bottom: 84px;
  }
}

/* Small phones */
@media (max-width: 380px) {
  .hero h1 { font-size: 32px; }

  .photo-card,
  .photo-glass { min-height: 380px; }

  .photo-card img,
  .photo-glass img { min-height: 356px; }

  .project-card,
  .glass-card,
  .contact-card { padding: 18px; }

  .btn { font-size: 14px; }
}