:root {
  --bg: #05070c;
  --bg-soft: #0b0f17;
  --surface: rgba(255, 255, 255, 0.08);
  --surface-strong: rgba(255, 255, 255, 0.12);
  --line: rgba(255, 255, 255, 0.14);
  --line-strong: rgba(255, 255, 255, 0.22);
  --text: #f5f7fb;
  --muted: rgba(222, 229, 243, 0.72);
  --muted-soft: rgba(222, 229, 243, 0.58);
  --accent: #dfe8ff;
  --shadow: 0 30px 90px rgba(0, 0, 0, 0.28);
  --shadow-strong: 0 40px 120px rgba(0, 0, 0, 0.36);
  --content-width: min(1200px, calc(100% - 32px));
  --cursor-x: 50%;
  --cursor-y: 30%;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--text);
  font-family: "Inter", sans-serif;
  background: linear-gradient(180deg, #03050a 0%, #080c14 44%, #04070d 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(2, 4, 8, 0.10), rgba(2, 4, 8, 0.22)),
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.03), transparent 40%);
}

body.menu-open {
  overflow: hidden;
}

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

button,
input,
select,
textarea {
  font: inherit;
}

button {
  border: 0;
  background: none;
  color: inherit;
}

.liquid-world,
.noise {
  position: fixed;
  pointer-events: none;
  z-index: -1;
}

.liquid-world {
  inset: -10%;
  overflow: hidden;
  filter: saturate(105%);
}

.liquid-base,
.liquid-layer,
.liquid-iridescence,
.liquid-light {
  position: absolute;
  inset: 0;
}

.liquid-base {
  background:
    radial-gradient(circle at 20% 12%, rgba(24, 42, 92, 0.42), transparent 20%),
    radial-gradient(circle at 82% 16%, rgba(38, 26, 86, 0.40), transparent 18%),
    radial-gradient(circle at 52% 78%, rgba(16, 45, 92, 0.24), transparent 22%),
    linear-gradient(180deg, rgba(5, 8, 16, 0.96), rgba(8, 12, 19, 0.98));
}

.liquid-layer {
  mix-blend-mode: screen;
  opacity: 0.9;
  filter: blur(26px);
  will-change: transform;
}

.liquid-layer-one {
  inset: -2% auto auto -18%;
  width: 108vw;
  height: 42vh;
  background:
    linear-gradient(
      94deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(74, 124, 255, 0.00) 18%,
      rgba(74, 124, 255, 0.30) 28%,
      rgba(108, 233, 255, 0.24) 35%,
      rgba(174, 116, 255, 0.28) 42%,
      rgba(255, 165, 214, 0.18) 48%,
      rgba(255, 222, 171, 0.12) 54%,
      rgba(0, 0, 0, 0) 66%
    ),
    repeating-linear-gradient(
      106deg,
      rgba(120, 194, 255, 0.00) 0 16px,
      rgba(120, 194, 255, 0.18) 16px 19px,
      rgba(190, 122, 255, 0.16) 19px 23px,
      rgba(255, 196, 215, 0.12) 23px 27px,
      rgba(0, 0, 0, 0) 27px 40px
    );
  -webkit-mask-image:
    radial-gradient(120% 88% at 20% 46%, rgba(0, 0, 0, 1) 0 30%, transparent 44%),
    radial-gradient(96% 76% at 50% 52%, rgba(0, 0, 0, 1) 0 28%, transparent 43%),
    radial-gradient(88% 74% at 78% 48%, rgba(0, 0, 0, 1) 0 24%, transparent 40%);
  mask-image:
    radial-gradient(120% 88% at 20% 46%, rgba(0, 0, 0, 1) 0 30%, transparent 44%),
    radial-gradient(96% 76% at 50% 52%, rgba(0, 0, 0, 1) 0 28%, transparent 43%),
    radial-gradient(88% 74% at 78% 48%, rgba(0, 0, 0, 1) 0 24%, transparent 40%);
  transform: rotate(-12deg) translate3d(0, 0, 0);
  animation: liquidRibbonOne 26s ease-in-out infinite alternate;
}

.liquid-layer-two {
  inset: 30% -22% auto auto;
  width: 110vw;
  height: 34vh;
  background:
    linear-gradient(
      88deg,
      rgba(0, 0, 0, 0) 4%,
      rgba(74, 138, 255, 0.00) 22%,
      rgba(74, 138, 255, 0.24) 32%,
      rgba(121, 233, 255, 0.20) 39%,
      rgba(159, 110, 255, 0.28) 47%,
      rgba(236, 129, 214, 0.16) 55%,
      rgba(255, 232, 190, 0.08) 60%,
      rgba(0, 0, 0, 0) 72%
    ),
    repeating-linear-gradient(
      96deg,
      rgba(0, 0, 0, 0) 0 14px,
      rgba(93, 161, 255, 0.14) 14px 17px,
      rgba(108, 231, 255, 0.16) 17px 20px,
      rgba(176, 112, 255, 0.14) 20px 24px,
      rgba(255, 188, 207, 0.10) 24px 28px,
      rgba(0, 0, 0, 0) 28px 42px
    );
  -webkit-mask-image:
    radial-gradient(106% 80% at 18% 52%, rgba(0, 0, 0, 1) 0 24%, transparent 39%),
    radial-gradient(106% 80% at 54% 46%, rgba(0, 0, 0, 1) 0 28%, transparent 42%),
    radial-gradient(86% 72% at 82% 56%, rgba(0, 0, 0, 1) 0 22%, transparent 38%);
  mask-image:
    radial-gradient(106% 80% at 18% 52%, rgba(0, 0, 0, 1) 0 24%, transparent 39%),
    radial-gradient(106% 80% at 54% 46%, rgba(0, 0, 0, 1) 0 28%, transparent 42%),
    radial-gradient(86% 72% at 82% 56%, rgba(0, 0, 0, 1) 0 22%, transparent 38%);
  transform: rotate(10deg) translate3d(0, 0, 0);
  animation: liquidRibbonTwo 34s ease-in-out infinite alternate;
}

.liquid-layer-three {
  inset: auto auto -6% 4%;
  width: 98vw;
  height: 28vh;
  background:
    linear-gradient(
      92deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(55, 121, 240, 0.00) 20%,
      rgba(55, 121, 240, 0.20) 29%,
      rgba(92, 220, 255, 0.18) 35%,
      rgba(174, 118, 255, 0.24) 44%,
      rgba(255, 154, 199, 0.16) 52%,
      rgba(223, 255, 255, 0.10) 58%,
      rgba(0, 0, 0, 0) 70%
    ),
    repeating-linear-gradient(
      98deg,
      rgba(0, 0, 0, 0) 0 15px,
      rgba(82, 152, 255, 0.12) 15px 18px,
      rgba(110, 227, 255, 0.12) 18px 21px,
      rgba(178, 116, 255, 0.12) 21px 24px,
      rgba(255, 190, 210, 0.10) 24px 27px,
      rgba(0, 0, 0, 0) 27px 41px
    );
  -webkit-mask-image:
    radial-gradient(104% 74% at 16% 46%, rgba(0, 0, 0, 1) 0 22%, transparent 38%),
    radial-gradient(96% 68% at 50% 50%, rgba(0, 0, 0, 1) 0 22%, transparent 38%),
    radial-gradient(94% 70% at 80% 56%, rgba(0, 0, 0, 1) 0 18%, transparent 34%);
  mask-image:
    radial-gradient(104% 74% at 16% 46%, rgba(0, 0, 0, 1) 0 22%, transparent 38%),
    radial-gradient(96% 68% at 50% 50%, rgba(0, 0, 0, 1) 0 22%, transparent 38%),
    radial-gradient(94% 70% at 80% 56%, rgba(0, 0, 0, 1) 0 18%, transparent 34%);
  transform: rotate(-6deg) translate3d(0, 0, 0);
  animation: liquidRibbonThree 30s ease-in-out infinite alternate;
}

.liquid-iridescence {
  opacity: 0.58;
  mix-blend-mode: screen;
  filter: blur(12px);
  will-change: transform;
}

.liquid-iridescence-one {
  background:
    repeating-linear-gradient(
      104deg,
      rgba(0, 0, 0, 0) 0 24px,
      rgba(88, 182, 255, 0.22) 24px 27px,
      rgba(171, 118, 255, 0.22) 27px 31px,
      rgba(255, 168, 214, 0.16) 31px 35px,
      rgba(255, 229, 193, 0.12) 35px 39px,
      rgba(0, 0, 0, 0) 39px 56px
    );
  -webkit-mask-image:
    radial-gradient(120% 90% at 26% 32%, rgba(0, 0, 0, 1) 0 24%, transparent 42%),
    radial-gradient(120% 90% at 72% 60%, rgba(0, 0, 0, 1) 0 18%, transparent 36%);
  mask-image:
    radial-gradient(120% 90% at 26% 32%, rgba(0, 0, 0, 1) 0 24%, transparent 42%),
    radial-gradient(120% 90% at 72% 60%, rgba(0, 0, 0, 1) 0 18%, transparent 36%);
  transform: rotate(-8deg);
  animation: filmFlowOne 24s ease-in-out infinite alternate;
}

.liquid-iridescence-two {
  background:
    repeating-linear-gradient(
      96deg,
      rgba(0, 0, 0, 0) 0 20px,
      rgba(98, 162, 255, 0.18) 20px 23px,
      rgba(118, 238, 255, 0.16) 23px 27px,
      rgba(178, 116, 255, 0.18) 27px 31px,
      rgba(255, 156, 197, 0.14) 31px 35px,
      rgba(211, 255, 243, 0.10) 35px 39px,
      rgba(0, 0, 0, 0) 39px 52px
    );
  -webkit-mask-image:
    radial-gradient(110% 78% at 62% 56%, rgba(0, 0, 0, 1) 0 22%, transparent 40%),
    radial-gradient(100% 74% at 18% 68%, rgba(0, 0, 0, 1) 0 18%, transparent 34%);
  mask-image:
    radial-gradient(110% 78% at 62% 56%, rgba(0, 0, 0, 1) 0 22%, transparent 40%),
    radial-gradient(100% 74% at 18% 68%, rgba(0, 0, 0, 1) 0 18%, transparent 34%);
  transform: rotate(8deg);
  animation: filmFlowTwo 32s ease-in-out infinite alternate;
}

.liquid-light {
  opacity: 0.22;
  mix-blend-mode: screen;
  filter: blur(34px);
  will-change: transform;
}

.liquid-light-top {
  background:
    radial-gradient(circle at calc(var(--cursor-x) * 0.8) calc(var(--cursor-y) * 0.7), rgba(170, 211, 255, 0.10), transparent 12%),
    radial-gradient(circle at 34% 14%, rgba(255, 255, 255, 0.08), transparent 16%);
  transform: translate3d(0, 0, 0);
}

.liquid-light-mid {
  background:
    radial-gradient(circle at 68% 48%, rgba(124, 140, 255, 0.08), transparent 16%),
    radial-gradient(circle at 50% 56%, rgba(120, 224, 255, 0.06), transparent 14%);
  transform: translate3d(0, 0, 0);
}

.liquid-light-bottom {
  background:
    radial-gradient(circle at 58% 88%, rgba(140, 102, 255, 0.08), transparent 18%),
    radial-gradient(circle at 26% 82%, rgba(255, 219, 198, 0.05), transparent 14%);
  transform: translate3d(0, 0, 0);
}

.noise {
  inset: 0;
  opacity: 0.05;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.9) 0 0.7px, transparent 0.9px),
    radial-gradient(circle at 75% 35%, rgba(255, 255, 255, 0.5) 0 0.8px, transparent 1px),
    radial-gradient(circle at 40% 70%, rgba(255, 255, 255, 0.4) 0 0.8px, transparent 1px);
  background-size: 140px 140px;
}

.container {
  width: var(--content-width);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.section-tone-hero::before,
.section-tone-mid::before,
.section-tone-work::before,
.section-tone-contact::before {
  content: "";
  position: absolute;
  inset: -4% -6%;
  pointer-events: none;
  z-index: -1;
}

.section-tone-hero::before {
  background: radial-gradient(circle at 70% 28%, rgba(120, 164, 255, 0.10), transparent 26%);
}

.section-tone-mid::before {
  background: linear-gradient(180deg, rgba(4, 7, 12, 0.04), rgba(4, 7, 12, 0.16), rgba(4, 7, 12, 0.04));
}

.section-tone-work::before {
  background:
    radial-gradient(circle at 66% 34%, rgba(120, 146, 255, 0.08), transparent 24%),
    radial-gradient(circle at 28% 68%, rgba(140, 110, 255, 0.06), transparent 22%);
}

.section-tone-contact::before {
  background:
    radial-gradient(circle at 72% 42%, rgba(130, 172, 255, 0.10), transparent 24%),
    radial-gradient(circle at 18% 78%, rgba(255, 218, 192, 0.05), transparent 18%);
}

.glass-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03)),
    linear-gradient(135deg, rgba(147, 171, 255, 0.05), rgba(255, 255, 255, 0.01) 42%, rgba(255, 205, 150, 0.03)),
    rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(255, 255, 255, 0.03),
    var(--shadow);
}

.glass-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 18%, transparent 82%, rgba(255, 255, 255, 0.03)),
    linear-gradient(110deg, rgba(255, 255, 255, 0.11), transparent 28%, transparent 74%, rgba(255, 255, 255, 0.04));
  pointer-events: none;
}

.glass-panel::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.04);
  pointer-events: none;
}

.site-header {
  position: sticky;
  top: 14px;
  z-index: 50;
  width: var(--content-width);
  margin: 18px auto 0;
}

.nav-shell {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
  min-height: 60px;
  padding: 8px 14px;
  border-radius: 999px;
  transition: box-shadow 180ms ease, border-color 180ms ease;
}

.site-header.is-scrolled .nav-shell {
  box-shadow: var(--shadow-strong);
  border-color: var(--line-strong);
}

.brand,
.footer-brand {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
}

.brand img,
.footer-brand img {
  display: block;
  width: clamp(102px, 10vw, 128px);
  height: auto;
  object-fit: contain;
  filter: brightness(1.04) contrast(1.02) drop-shadow(0 0 14px rgba(196, 212, 255, 0.10));
}

.site-nav,
.footer-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.site-nav {
  position: relative;
  padding: 4px;
}

.site-nav a,
.footer-links a {
  color: var(--muted);
  transition: color 180ms ease, transform 180ms ease, background-color 180ms ease;
}

.site-nav a {
  position: relative;
  z-index: 2;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 0.94rem;
}

.site-nav a:hover,
.footer-links a:hover {
  color: var(--text);
  transform: translateY(-1px);
}

.site-nav a:hover,
.site-nav a.is-active {
  color: rgba(250, 252, 255, 0.98);
}

.nav-indicator {
  position: absolute;
  top: 4px;
  left: 4px;
  height: calc(100% - 8px);
  width: 72px;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 0, 0) scaleX(1);
  transition: opacity 180ms ease;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.05)),
    rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 10px 26px rgba(32, 54, 112, 0.16),
    0 0 18px rgba(180, 198, 255, 0.08);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}

.nav-indicator::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 36%),
    radial-gradient(circle at 24% 30%, rgba(255, 255, 255, 0.24), transparent 46%);
  opacity: 0.9;
}

.nav-indicator::after {
  content: "";
  position: absolute;
  inset: auto 18% 7px 18%;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  filter: blur(9px);
}

.nav-indicator-core {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 30% 35%, rgba(255, 255, 255, 0.18), transparent 36%),
    linear-gradient(135deg, rgba(141, 171, 255, 0.10), transparent 50%, rgba(255, 220, 184, 0.08));
  opacity: 0.85;
}

.menu-toggle {
  display: none;
}

.nav-cta,
.glass-button,
.primary-button,
.secondary-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 22px;
  border-radius: 999px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 600;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.nav-cta:hover,
.glass-button:hover,
.primary-button:hover,
.secondary-button:hover {
  transform: translateY(-2px);
}

.glass-button,
.secondary-button {
  border: 1px solid rgba(255, 255, 255, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)),
    rgba(255, 255, 255, 0.03);
}

.nav-cta::before,
.glass-button::before,
.primary-button::before,
.secondary-button::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 15%, rgba(255, 255, 255, 0.20) 40%, transparent 62%);
  transform: translateX(-120%);
  transition: transform 420ms ease;
  pointer-events: none;
}

.nav-cta:hover::before,
.glass-button:hover::before,
.primary-button:hover::before,
.secondary-button:hover::before {
  transform: translateX(120%);
}

.primary-button {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.05)),
    linear-gradient(135deg, rgba(101, 134, 255, 0.74), rgba(126, 96, 255, 0.52));
  box-shadow: 0 18px 40px rgba(72, 98, 208, 0.26);
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1.05fr);
  gap: 48px;
  align-items: center;
  min-height: calc(100vh - 150px);
  padding-top: 7rem;
  padding-bottom: 5rem;
}

.eyebrow,
.mini-label {
  margin: 0;
  color: rgba(220, 229, 245, 0.82);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.75rem;
  font-weight: 600;
}

h1,
h2,
h3,
p,
blockquote {
  margin: 0;
}

h1,
h2,
h3,
.primary-button,
.secondary-button,
.glass-button,
.nav-cta {
  font-family: "Plus Jakarta Sans", sans-serif;
}

h1 {
  max-width: 11ch;
  margin-top: 16px;
  font-size: clamp(3.15rem, 6vw, 5.2rem);
  line-height: 1;
  letter-spacing: -0.05em;
}

h2 {
  max-width: 13ch;
  font-size: clamp(2.2rem, 4.8vw, 4rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
}

h3 {
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

p,
label span,
input,
select,
textarea,
.form-note,
.testimonial-meta span,
.footer-note,
.project-text p,
.service-copy p,
.timeline-step p {
  color: var(--muted);
  line-height: 1.72;
}

.hero-text {
  max-width: 32rem;
  margin-top: 24px;
  font-size: 1.08rem;
  color: var(--muted-soft);
}

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

.hero-actions {
  margin-top: 32px;
}

.hero-visual {
  position: relative;
  isolation: isolate;
}

.hero-mockup {
  position: relative;
  min-height: 580px;
  perspective: 1400px;
}

.hero-mockup::before {
  content: "";
  position: absolute;
  inset: 8% 10% 18% 12%;
  border-radius: 40px;
  background:
    radial-gradient(circle at 36% 32%, rgba(109, 147, 255, 0.18), transparent 28%),
    radial-gradient(circle at 70% 64%, rgba(118, 98, 255, 0.14), transparent 26%);
  filter: blur(30px);
  z-index: 0;
}

.mockup-frame {
  position: absolute;
  inset: 10% 8% 12% 12%;
  padding: 18px;
  border-radius: 34px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.03)),
    rgba(7, 10, 18, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-strong);
  transform: rotate(-6deg) translate3d(var(--tilt-x, 0), var(--tilt-y, 0), 0);
  transition: transform 180ms ease;
  z-index: 1;
}

.mockup-topbar {
  display: flex;
  gap: 8px;
  padding-bottom: 14px;
}

.mockup-topbar span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffffff, rgba(180, 197, 255, 0.68));
}

.mockup-screen {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 16px;
  min-height: 430px;
  padding: 16px;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)),
    rgba(255, 255, 255, 0.02);
}

.mockup-sidebar,
.mockup-main,
.project-screen {
  border-radius: 22px;
}

.mockup-sidebar {
  padding: 14px;
  background: rgba(255, 255, 255, 0.03);
  display: grid;
  align-content: start;
  gap: 12px;
}

.mockup-sidebar i,
.mockup-metrics span,
.mockup-card-stack b,
.fashion-panel,
.property-list span {
  display: block;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05));
}

.mockup-sidebar i {
  height: 44px;
}

.mockup-main {
  display: grid;
  gap: 16px;
}

.mockup-hero-block {
  min-height: 160px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 20% 30%, rgba(114, 152, 255, 0.34), transparent 28%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
    rgba(255, 255, 255, 0.02);
}

.mockup-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.mockup-metrics span {
  height: 88px;
}

.mockup-chart-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) 0.9fr;
  gap: 14px;
}

.mockup-chart,
.mockup-card-stack {
  min-height: 170px;
  border-radius: 22px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.03);
}

.mockup-chart {
  display: flex;
  align-items: end;
  gap: 10px;
}

.mockup-chart i {
  flex: 1;
  border-radius: 999px 999px 16px 16px;
  background: linear-gradient(180deg, rgba(137, 170, 255, 0.62), rgba(255, 255, 255, 0.08));
}

.mockup-chart i:nth-child(1) { height: 38%; }
.mockup-chart i:nth-child(2) { height: 72%; }
.mockup-chart i:nth-child(3) { height: 52%; }
.mockup-chart i:nth-child(4) { height: 86%; }

.mockup-card-stack {
  display: grid;
  gap: 12px;
}

.mockup-card-stack b {
  height: 63px;
}

.hero-float {
  position: absolute;
  max-width: 242px;
  padding: 17px 18px;
  border-radius: 24px;
  transform: translate3d(var(--float-x, 0), var(--float-y, 0), 0);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  z-index: 2;
}

.hero-float strong,
.project-overlay strong,
.stat strong,
.testimonial-meta strong {
  display: block;
  font-family: "Plus Jakarta Sans", sans-serif;
}

.hero-float strong {
  margin: 8px 0 8px;
  font-size: 1.02rem;
}

.hero-float-top {
  right: 2%;
  bottom: 10%;
}

.section-heading {
  display: grid;
  gap: 10px;
}

.services,
.work,
.process,
.about,
.testimonial,
.contact,
.site-footer {
  padding-top: 4.5rem;
  padding-bottom: 2rem;
  content-visibility: auto;
  contain-intrinsic-size: 800px;
}

.services-list {
  margin-top: 28px;
}

.service-row {
  position: relative;
  display: grid;
  grid-template-columns: 100px minmax(220px, 0.8fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  padding: 28px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 180ms ease;
}

.service-row::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22) 18%, rgba(167, 191, 255, 0.72) 48%, rgba(255, 255, 255, 0.22) 82%, transparent);
  transform: scaleX(0.6);
  transform-origin: center;
  transition: opacity 220ms ease, transform 320ms ease;
}

.service-row:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.service-row:hover::after {
  opacity: 1;
  transform: scaleX(1);
}

.featured-service {
  padding: 28px 24px;
  border-top: 0;
  border-bottom: 0;
  border-radius: 26px;
}

.service-number {
  color: rgba(218, 227, 244, 0.42);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  font-weight: 700;
  line-height: 1;
}

.work {
  display: grid;
  gap: 34px;
}

.project {
  display: grid;
  align-items: center;
  gap: 30px;
  perspective: 1200px;
}

.project-left {
  grid-template-columns: minmax(0, 1.1fr) 320px;
}

.project-right {
  grid-template-columns: 320px minmax(0, 1.1fr);
}

.project-visual {
  position: relative;
  min-height: 500px;
  border-radius: 34px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 260ms ease, box-shadow 260ms ease;
  transform: translate3d(var(--project-x, 0), var(--project-y, 0), 0);
}

.project:hover .project-visual {
  transform: scale(1.018);
  box-shadow: var(--shadow-strong);
}

.project-visual-finance {
  background:
    radial-gradient(circle at 24% 22%, rgba(97, 136, 255, 0.24), transparent 24%),
    linear-gradient(135deg, #0d1320, #121a2b);
}

.project-visual-fashion {
  background:
    radial-gradient(circle at 62% 26%, rgba(147, 121, 255, 0.20), transparent 22%),
    linear-gradient(135deg, #0f1118, #191723);
}

.project-visual-property {
  background:
    radial-gradient(circle at 75% 24%, rgba(109, 154, 255, 0.18), transparent 22%),
    linear-gradient(135deg, #0c1018, #111827);
}

.project-screen {
  position: absolute;
  inset: 26px;
  padding: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.03)),
    rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  transition: transform 260ms ease;
}

.project:hover .project-screen {
  transform: translate3d(0, -4px, 0);
}

.project-browser {
  width: 42%;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.12));
}

.project-dashboard {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 14px;
  margin-top: 26px;
}

.project-dashboard-main,
.project-dashboard-side span,
.fashion-panel,
.property-map,
.property-list span {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.05);
}

.project-dashboard-main {
  min-height: 260px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent),
    linear-gradient(145deg, rgba(112, 150, 255, 0.18), rgba(255, 255, 255, 0.04));
}

.project-dashboard-side {
  display: grid;
  gap: 14px;
}

.project-dashboard-side span {
  min-height: 78px;
}

.fashion-scene,
.property-scene {
  display: grid;
  align-items: center;
}

.fashion-figure {
  width: 42%;
  height: 62%;
  margin-left: 12%;
  border-radius: 44% 56% 48% 52% / 40% 40% 60% 60%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.70), rgba(255, 255, 255, 0.08));
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.24);
}

.fashion-panel {
  position: absolute;
  right: 8%;
  bottom: 10%;
  width: 34%;
  min-height: 170px;
}

.property-scene {
  grid-template-columns: 1.2fr 0.8fr;
  gap: 14px;
}

.property-map {
  min-height: 320px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(145deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.03));
  background-size: 34px 34px, 34px 34px, auto;
}

.property-list {
  display: grid;
  gap: 14px;
}

.property-list span {
  min-height: 97px;
}

.project-overlay {
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: 26px;
  padding: 18px 20px;
  border-radius: 24px;
  transition: transform 240ms ease;
}

.project:hover .project-overlay {
  transform: translate3d(0, -6px, 0);
}

.project-overlay strong {
  margin: 8px 0 8px;
  font-size: 1.05rem;
}

.process {
  display: grid;
  gap: 28px;
}

.timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  padding-top: 18px;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04));
}

.timeline-step {
  padding-top: 22px;
  opacity: 0.58;
  transition: opacity 420ms ease, transform 420ms ease;
  transform: translateY(10px);
}

.timeline-step.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.timeline-step span {
  display: inline-block;
  margin-bottom: 16px;
  color: rgba(221, 230, 245, 0.48);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
}

.about {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 40px;
  align-items: start;
}

.about-copy p:last-child {
  max-width: 34rem;
  margin-top: 22px;
}

.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.stat {
  min-height: 150px;
  padding: 8px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.glass-accent {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
    rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.stat strong {
  font-size: clamp(2.3rem, 5vw, 3.8rem);
}

.testimonial-panel {
  max-width: 860px;
}

.testimonial-panel blockquote {
  max-width: 15ch;
  margin: 16px 0 24px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: clamp(2.1rem, 5vw, 4.2rem);
  line-height: 0.96;
  letter-spacing: -0.05em;
}

.testimonial-meta strong {
  margin-bottom: 6px;
}

.contact {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 36px;
  align-items: start;
}

.contact-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding: 28px;
  border-radius: 30px;
}

.contact-panel label {
  display: grid;
  gap: 10px;
}

.full-width {
  grid-column: 1 / -1;
}

input,
select,
textarea {
  width: 100%;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  outline: none;
  transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

input::placeholder,
textarea::placeholder {
  color: rgba(221, 230, 245, 0.42);
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(180, 199, 255, 0.26);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 4px rgba(110, 142, 255, 0.08);
}

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

.site-footer {
  padding-bottom: 3rem;
}

.footer-top {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: center;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-socials {
  justify-content: end;
}

.footer-note {
  margin-top: 16px;
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 760ms cubic-bezier(0.22, 1, 0.36, 1), transform 760ms cubic-bezier(0.22, 1, 0.36, 1);
}

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

@keyframes liquidRibbonOne {
  from {
    transform: rotate(-12deg) translate3d(-3%, -3%, 0) scale(1);
  }
  to {
    transform: rotate(-8deg) translate3d(5%, 4%, 0) scale(1.08);
  }
}

@keyframes liquidRibbonTwo {
  from {
    transform: rotate(10deg) translate3d(3%, -4%, 0) scale(1);
  }
  to {
    transform: rotate(14deg) translate3d(-5%, 5%, 0) scale(1.1);
  }
}

@keyframes liquidRibbonThree {
  from {
    transform: rotate(-6deg) translate3d(-3%, 2%, 0) scale(0.98);
  }
  to {
    transform: rotate(-2deg) translate3d(4%, -5%, 0) scale(1.08);
  }
}

@keyframes filmFlowOne {
  from {
    transform: rotate(-8deg) translate3d(-2%, 0, 0) scale(1);
  }
  to {
    transform: rotate(-3deg) translate3d(3%, -3%, 0) scale(1.04);
  }
}

@keyframes filmFlowTwo {
  from {
    transform: rotate(8deg) translate3d(2%, 0, 0) scale(1);
  }
  to {
    transform: rotate(12deg) translate3d(-4%, 3%, 0) scale(1.05);
  }
}

@media (max-width: 1080px) {
  .hero,
  .about,
  .contact,
  .project-left,
  .project-right {
    grid-template-columns: 1fr;
  }

  .service-row {
    grid-template-columns: 80px 1fr;
  }

  .service-copy {
    grid-column: 2 / 3;
  }

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

@media (max-width: 820px) {
  .site-header {
    top: 10px;
  }

  .nav-shell {
    grid-template-columns: auto auto;
  }

  .brand img,
  .footer-brand img {
    width: 110px;
  }

  .menu-toggle {
    display: inline-flex;
    flex-direction: column;
    gap: 6px;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.04);
  }

  .menu-toggle span {
    width: 18px;
    height: 1.5px;
    border-radius: 999px;
    background: var(--text);
    transition: transform 180ms ease;
  }

  .menu-toggle[aria-expanded="true"] span:first-child {
    transform: translateY(4px) rotate(45deg);
  }

  .menu-toggle[aria-expanded="true"] span:last-child {
    transform: translateY(-4px) rotate(-45deg);
  }

  .nav-cta {
    display: none;
  }

  .site-nav {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    right: 0;
    display: grid;
    gap: 8px;
    padding: 16px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04)),
      rgba(9, 13, 20, 0.86);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
  }

  .nav-indicator {
    display: none;
  }

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

  .site-nav a {
    justify-content: center;
  }

  .site-nav a.is-active {
    background: rgba(255, 255, 255, 0.06);
  }

  .hero {
    min-height: auto;
    gap: 28px;
    padding-top: 6rem;
  }

  .hero-mockup {
    min-height: 500px;
  }

  .mockup-frame {
    inset: 6% 4% 14% 8%;
  }

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

  .contact-panel,
  .stats,
  .footer-top {
    grid-template-columns: 1fr;
  }

  .footer-links,
  .footer-socials {
    justify-content: start;
  }
}

@media (max-width: 560px) {
  :root {
    --content-width: min(100% - 20px, 100%);
  }

  .liquid-layer {
    filter: blur(24px);
    opacity: 0.72;
  }

  .liquid-iridescence {
    filter: blur(10px);
    opacity: 0.34;
  }

  .liquid-layer-three,
  .liquid-iridescence-two,
  .liquid-light-bottom {
    display: none;
  }

  h1 {
    font-size: clamp(2.8rem, 14vw, 4rem);
  }

  .service-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .service-copy {
    grid-column: auto;
  }

  .hero-mockup {
    min-height: 440px;
  }

  .hero-float {
    max-width: 180px;
    padding: 14px 16px;
  }

  .mockup-screen,
  .mockup-chart-row,
  .project-dashboard,
  .property-scene {
    grid-template-columns: 1fr;
  }

  .project-visual {
    min-height: 360px;
  }

  .project-screen {
    inset: 18px;
  }

  .contact-panel {
    padding: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}