@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800;900&family=Sora:wght@500;600;700;800&display=swap");

:root {
  --brand-primary: #3ecbc1;
  --brand-secondary: #bfefff;
  --brand-accent: #0d8f91;
  --bg: #f7fcff;
  --bg-elevated: rgba(255, 255, 255, .76);
  --text: #10242c;
  --text-soft: #183844;
  --muted: #657b86;
  --border: rgba(13, 72, 82, .12);
  --success: #19b77f;
  --status: #3ecbc1;
  --shadow: 0 28px 90px rgba(18, 104, 124, .15);
  --shadow-soft: 0 16px 44px rgba(18, 104, 124, .09);
  --max: 1180px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --font-display: "Sora", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Manrope", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100%;
  color: var(--text);
  background:
    linear-gradient(120deg, rgba(62, 203, 193, .18), transparent 31%, rgba(191, 239, 255, .38) 57%, transparent 78%),
    radial-gradient(circle at 10% 4%, rgba(191, 239, 255, .92), transparent 27%),
    radial-gradient(circle at 88% 7%, rgba(62, 203, 193, .24), transparent 28%),
    linear-gradient(180deg, #fff 0%, var(--bg) 44%, #fff 100%);
  background-size: 190% 190%, auto, auto, auto;
  font-family: var(--font-body);
  overflow-x: hidden;
  animation: pageGradient 18s ease-in-out infinite;
}

@keyframes pageGradient {
  0%,
  100% {
    background-position: 0% 0%, 0 0, 0 0, 0 0;
  }

  50% {
    background-position: 100% 45%, 0 0, 0 0, 0 0;
  }
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(13, 72, 82, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 72, 82, .045) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: linear-gradient(180deg, #000, transparent 78%);
}

body::after {
  content: "";
  position: fixed;
  inset: auto -10vw 0;
  height: 42vh;
  z-index: -2;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(62, 203, 193, .12), rgba(191, 239, 255, .28), transparent);
  filter: blur(28px);
  opacity: .82;
  transform: translateY(18%);
  animation: horizonFlow 16s ease-in-out infinite;
}

@keyframes horizonFlow {
  50% {
    transform: translateY(8%) translateX(5vw);
  }
}

.ambient-motion {
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  overflow: hidden;
}

.ambient-motion span {
  position: absolute;
  width: min(64vw, 820px);
  height: 210px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(62, 203, 193, .2), rgba(191, 239, 255, .42), rgba(255, 255, 255, .04));
  filter: blur(36px);
  opacity: .72;
  transform: rotate(-18deg);
  animation: driftBand 22s var(--ease) infinite;
}

.ambient-motion span:nth-child(1) {
  left: -18vw;
  top: 11vh;
}

.ambient-motion span:nth-child(2) {
  right: -24vw;
  top: 38vh;
  animation-delay: -7s;
  transform: rotate(24deg);
}

.ambient-motion span:nth-child(3) {
  left: 22vw;
  bottom: 4vh;
  animation-delay: -13s;
  opacity: .45;
}

.ambient-motion span:nth-child(4) {
  right: 10vw;
  top: -8vh;
  animation-delay: -16s;
  opacity: .5;
}

@keyframes driftBand {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-18deg) scale(1);
  }

  50% {
    transform: translate3d(7vw, 5vh, 0) rotate(-9deg) scale(1.08);
  }
}

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

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

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

.nav-links,
.nav-cta,
.secondary-cta,
.project-link,
.project-form label,
.project-form input,
.project-form select,
.project-form textarea,
.form-submit {
  font-family: var(--font-body);
}

.hero-label,
.section-kicker,
.panel-kicker,
.tag-row,
.global-note,
.brand,
.window-top,
.metric-row strong,
.ecosystem-capabilities,
.network-node,
.process-trust {
  font-family: var(--font-display);
}

.hero-label,
.section-kicker,
.panel-kicker,
.tag-row,
.global-note,
.ecosystem-capabilities,
.network-node,
.process-trust {
  font-family: var(--font-body);
}

.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 14px clamp(16px, 4vw, 42px);
  border-bottom: 1px solid rgba(16, 36, 44, .06);
  background: rgba(255, 255, 255, .74);
  backdrop-filter: blur(22px);
}

.nav-inner {
  width: min(var(--max), 100%);
  min-height: 58px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
}

.brand img,
.footer-brand img {
  width: 152px;
  height: auto;
  display: block;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, .7);
  box-shadow: 0 14px 34px rgba(18, 104, 124, .07);
}

.nav-links a {
  padding: 10px 14px;
  border-radius: 999px;
  color: #48636d;
  font-size: .9rem;
  font-weight: 850;
  transition: color .25s ease, background .25s ease;
}

.nav-links a:hover {
  color: var(--brand-accent);
  background: rgba(62, 203, 193, .12);
}

.nav-cta,
.secondary-cta {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 20px;
  border-radius: 999px;
  font-weight: 900;
  transition: transform .25s var(--ease), box-shadow .25s ease, background .25s ease;
}

.nav-cta {
  justify-self: end;
  color: #fff;
  background: linear-gradient(135deg, #12adb0, #58d9cc);
  box-shadow: 0 18px 38px rgba(18, 174, 177, .24);
}

.secondary-cta {
  color: var(--text);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .78);
  box-shadow: var(--shadow-soft);
}

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

.hero-section,
.section,
.footer {
  width: min(var(--max), calc(100% - 32px));
  margin: 0 auto;
}

.hero-section {
  min-height: calc(100vh - 87px);
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: clamp(24px, 4vw, 52px);
  align-items: center;
  padding: clamp(56px, 8vw, 104px) 0 46px;
}

.hero-label,
.section-kicker,
.panel-kicker {
  margin: 0 0 18px;
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #267980;
  font-size: .84rem;
  font-weight: 900;
  letter-spacing: 0;
  padding: 9px 14px;
  border: 1px solid rgba(13, 143, 145, .16);
  border-radius: 999px;
  background: rgba(255, 255, 255, .78);
  box-shadow: var(--shadow-soft);
}

.hero-label::before,
.section-kicker::before,
.panel-kicker::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-primary);
  box-shadow: 0 0 0 7px rgba(62, 203, 193, .16);
}

h1,
h2,
h3,
p {
  overflow-wrap: anywhere;
}

h1,
h2,
h3,
.process-statement strong,
.project-summary,
.agent-goal {
  font-family: var(--font-display);
}

h1 {
  margin: 0;
  max-width: 900px;
  font-size: clamp(3.6rem, 8.5vw, 8.4rem);
  line-height: .86;
  letter-spacing: 0;
}

h1 span {
  display: block;
  animation: textRise .9s var(--ease) both;
}

h1 span:nth-child(2) {
  animation-delay: .1s;
}

@keyframes textRise {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
}

.hero-copy > p:not(.hero-label),
.section-head > p:not(.section-kicker),
.split p,
.agent-card p,
.final-cta p {
  color: var(--muted);
  font-size: clamp(1.03rem, 1.6vw, 1.24rem);
  line-height: 1.72;
}

.hero-copy > p:not(.hero-label) {
  max-width: 690px;
  margin: 28px 0 32px;
}

.hero-copy .global-note {
  width: fit-content;
  margin: 22px 0 0;
  padding: 10px 14px;
  border: 1px solid rgba(13, 143, 145, .14);
  border-radius: 999px;
  color: #267980;
  background: rgba(255, 255, 255, .66);
  font-size: .94rem;
  font-weight: 900;
  box-shadow: var(--shadow-soft);
}

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

.hero-visual {
  position: relative;
  min-height: 680px;
  perspective: 1200px;
  transform-style: preserve-3d;
}

.visual-orbit {
  position: absolute;
  inset: 7% 0 5% 6%;
  border: 1px solid rgba(13, 72, 82, .1);
  border-radius: 38px;
  background:
    linear-gradient(125deg, rgba(62, 203, 193, .24), transparent 38%, rgba(191, 239, 255, .72)),
    radial-gradient(circle at 70% 12%, rgba(191, 239, 255, .86), transparent 32%),
    linear-gradient(140deg, rgba(255, 255, 255, .86), rgba(237, 250, 252, .7));
  background-size: 170% 170%, auto, auto;
  box-shadow: var(--shadow);
  overflow: hidden;
  transform: rotateX(6deg) rotateY(-8deg);
  animation: panelBreathe 8s ease-in-out infinite, gradientSlide 12s ease-in-out infinite;
}

.visual-orbit::before {
  content: "";
  position: absolute;
  width: 700px;
  height: 700px;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 45deg, rgba(13, 143, 145, .13) 0 8deg, transparent 8deg 22deg);
  mask: radial-gradient(circle, transparent 0 38%, #000 39% 40%, transparent 41% 57%, #000 58% 59%, transparent 60%);
  animation: orbit 34s linear infinite;
}

@keyframes orbit {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes panelBreathe {
  50% {
    transform: rotateX(7deg) rotateY(-5deg) translateY(-10px);
  }
}

@keyframes gradientSlide {
  50% {
    background-position: 100% 40%, 0 0, 0 0;
  }
}

.motion-node {
  position: absolute;
  z-index: 6;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(13, 143, 145, .2);
  border-radius: 20px;
  color: #0d7376;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .92), rgba(237, 250, 252, .76)),
    linear-gradient(135deg, rgba(62, 203, 193, .22), rgba(191, 239, 255, .48));
  box-shadow: 0 22px 54px rgba(18, 104, 124, .16);
  backdrop-filter: blur(18px);
  font-size: .86rem;
  font-weight: 950;
  animation: floatNode 7s ease-in-out infinite;
}

.node-one {
  left: 0;
  top: 8%;
}

.node-two {
  right: 8%;
  top: 13%;
  animation-delay: -2.2s;
}

.node-three {
  left: 48%;
  bottom: 1%;
  animation-delay: -4.4s;
}

@keyframes floatNode {
  50% {
    transform: translate3d(0, -18px, 40px) rotate(5deg);
  }
}

.ui-window {
  position: absolute;
  z-index: 3;
  border: 1px solid rgba(13, 72, 82, .1);
  border-radius: 28px;
  background: rgba(255, 255, 255, .84);
  box-shadow: 0 24px 74px rgba(16, 74, 86, .16);
  backdrop-filter: blur(22px);
  transition: transform .35s var(--ease), box-shadow .35s ease;
  animation: floatWindow 9s ease-in-out infinite;
}

.ui-window:hover {
  transform: translateY(-14px) rotate(0deg) scale(1.015) !important;
  box-shadow: 0 30px 90px rgba(16, 74, 86, .22);
}

.website-window {
  width: 62%;
  min-height: 360px;
  left: 6%;
  top: 18%;
  padding: 20px;
  transform: rotate(-3deg);
}

.dashboard-window {
  width: 42%;
  min-height: 285px;
  right: 0;
  top: 31%;
  padding: 18px;
  transform: rotate(5deg);
  animation-delay: -2s;
}

.workflow-window {
  width: 42%;
  min-height: 220px;
  left: 3%;
  bottom: 8%;
  padding: 18px;
  transform: rotate(4deg);
  animation-delay: -4s;
}

.agent-window {
  width: 42%;
  min-height: 240px;
  right: 5%;
  bottom: 3%;
  padding: 18px;
  transform: rotate(-4deg);
  animation-delay: -6s;
}

@keyframes floatWindow {
  50% {
    translate: 0 -12px;
  }
}

.window-top {
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #55727d;
  font-size: .78rem;
  font-weight: 900;
  margin-bottom: 14px;
}

.window-top i {
  width: 36px;
  height: 9px;
  border-radius: 999px;
  background: linear-gradient(90deg, #cfeff6, #e9fbff);
}

.website-preview {
  display: grid;
  gap: 14px;
}

.website-preview div {
  height: 155px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 26% 30%, rgba(255, 255, 255, .86), transparent 18%),
    linear-gradient(135deg, rgba(62, 203, 193, .86), rgba(191, 239, 255, .8));
  position: relative;
  overflow: hidden;
}

.website-preview div::after,
.mock-screen div::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .6), transparent);
  animation: shimmer 3.6s ease-in-out infinite;
}

@keyframes shimmer {
  50%,
  100% {
    transform: translateX(110%);
  }
}

.website-preview span,
.table-lines span,
.activity-list span,
.customer-table span {
  height: 12px;
  display: block;
  border-radius: 999px;
  background: #dceff4;
}

.website-preview span:last-child {
  width: 62%;
}

.metric-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 18px;
}

.metric-row strong {
  font-size: clamp(1.45rem, 2.2vw, 1.95rem);
  letter-spacing: 0;
}

.metric-row small {
  color: var(--success);
  font-weight: 900;
}

.bar-chart,
.service-bars,
.large-chart {
  display: flex;
  align-items: end;
  gap: 9px;
}

.bar-chart {
  height: 122px;
}

.bar-chart span,
.service-bars i,
.large-chart span {
  flex: 1;
  border-radius: 999px 999px 8px 8px;
  background: linear-gradient(180deg, #58d9cc, #bfefff);
  transform-origin: bottom;
  animation: barPulse 3s ease-in-out infinite;
}

.bar-chart span:nth-child(1),
.large-chart span:nth-child(1) { height: 34%; }
.bar-chart span:nth-child(2),
.large-chart span:nth-child(2) { height: 58%; animation-delay: -.4s; }
.bar-chart span:nth-child(3),
.large-chart span:nth-child(3) { height: 74%; animation-delay: -.8s; }
.bar-chart span:nth-child(4),
.large-chart span:nth-child(4) { height: 48%; animation-delay: -1.2s; }
.bar-chart span:nth-child(5),
.large-chart span:nth-child(5) { height: 86%; animation-delay: -1.6s; }

@keyframes barPulse {
  50% {
    transform: scaleY(.68);
    opacity: .65;
  }
}

.flow-mini,
.workflow-visual,
.workflow-map {
  display: grid;
  gap: 10px;
}

.flow-mini span,
.workflow-visual span,
.workflow-map span,
.agent-window li,
.agent-console li {
  position: relative;
  padding: 11px 12px 11px 30px;
  border: 1px solid rgba(13, 72, 82, .08);
  border-radius: 14px;
  background: rgba(255, 255, 255, .72);
  color: #34535d;
  font-size: .84rem;
  font-weight: 850;
}

.flow-mini span::before,
.workflow-visual span::before,
.workflow-map span::before,
.agent-window li::before,
.agent-console li::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: var(--brand-primary);
}

.agent-window p {
  color: var(--muted);
  margin: 0 0 12px;
  font-size: .88rem;
}

.agent-window ul,
.agent-console ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 9px;
}

.strip {
  overflow: hidden;
  border-block: 1px solid var(--border);
  background: rgba(255, 255, 255, .58);
}

.strip-track {
  display: inline-flex;
  gap: 18px;
  padding: 18px 0;
  white-space: nowrap;
  animation: marquee 26s linear infinite;
}

.strip span {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  color: #38525c;
  font-size: clamp(1rem, 2vw, 1.4rem);
  font-weight: 900;
  letter-spacing: 0;
}

.strip span::after {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--brand-primary);
}

@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

.section {
  padding: clamp(72px, 10vw, 124px) 0;
}

.global-section {
  padding-top: 30px;
}

.global-panel {
  position: relative;
  min-height: 520px;
  display: grid;
  align-content: center;
  padding: clamp(28px, 6vw, 76px);
  border: 1px solid var(--border);
  border-radius: 36px;
  background:
    radial-gradient(circle at 18% 20%, rgba(191, 239, 255, .76), transparent 32%),
    radial-gradient(circle at 84% 28%, rgba(62, 203, 193, .22), transparent 28%),
    linear-gradient(145deg, rgba(255, 255, 255, .9), rgba(237, 250, 252, .72));
  box-shadow: var(--shadow);
  overflow: hidden;
}

.global-panel h2 {
  max-width: 980px;
}

.global-panel > p:not(.section-kicker) {
  max-width: 760px;
  margin: 24px 0 0;
  color: var(--muted);
  font-size: clamp(1.03rem, 1.6vw, 1.24rem);
  line-height: 1.72;
}

.global-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 34px;
}

.global-points span {
  padding: 11px 14px;
  border: 1px solid rgba(13, 72, 82, .08);
  border-radius: 999px;
  color: #31515a;
  background: rgba(255, 255, 255, .72);
  font-weight: 850;
}

.section-head {
  display: grid;
  grid-template-columns: 1fr .7fr;
  gap: 28px;
  align-items: end;
  margin-bottom: 34px;
}

.section-head .section-kicker {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

.featured-section {
  position: relative;
}

.featured-section::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 6%;
  z-index: -1;
  width: min(900px, 84vw);
  height: 300px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(62, 203, 193, .16), rgba(191, 239, 255, .42), transparent);
  filter: blur(34px);
  transform: translateX(-50%) rotate(-6deg);
  animation: featuredGlow 20s var(--ease) infinite;
}

@keyframes featuredGlow {
  50% {
    transform: translateX(-44%) translateY(36px) rotate(2deg) scale(1.08);
  }
}

h2 {
  margin: 0;
  font-size: clamp(2.35rem, 5.8vw, 5.45rem);
  line-height: .9;
  letter-spacing: 0;
}

h3 {
  margin: 0;
  letter-spacing: 0;
}

.service-showcase {
  display: grid;
  gap: 18px;
}

.service-panel {
  min-height: 460px;
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: 28px;
  align-items: stretch;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 34px;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 18px 44px rgba(18, 104, 124, .07);
  transition: transform .28s var(--ease), box-shadow .28s ease, border-color .28s ease;
}

.service-panel:hover,
.project-row:hover,
.why-card:hover,
.process-step:hover {
  transform: translateY(-7px);
  box-shadow: var(--shadow);
  border-color: rgba(13, 143, 145, .24);
}

.panel-copy {
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.panel-number {
  color: var(--brand-accent);
  font-weight: 900;
}

.panel-copy h3 {
  max-width: 620px;
  font-size: clamp(2rem, 4.5vw, 4.2rem);
  line-height: .93;
}

.panel-copy p:not(.panel-kicker) {
  color: var(--muted);
  line-height: 1.72;
  font-size: 1.02rem;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 22px;
}

.tag-row span {
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(13, 72, 82, .08);
  background: rgba(255, 255, 255, .74);
  color: #31515a;
  font-size: .82rem;
  font-weight: 850;
}

.service-visual {
  position: relative;
  min-height: 410px;
  border: 1px solid rgba(13, 72, 82, .09);
  border-radius: 26px;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, .22), transparent 36%, rgba(62, 203, 193, .18) 66%, transparent),
    radial-gradient(circle at 25% 18%, rgba(255, 255, 255, .82), transparent 18%),
    linear-gradient(135deg, rgba(62, 203, 193, .22), rgba(191, 239, 255, .76));
  background-size: 210% 210%, auto, auto;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .62);
  overflow: hidden;
  animation: gradientSlide 14s ease-in-out infinite;
}

.service-visual::after,
.dashboard-showcase::after,
.support-card::after,
.final-cta::after,
.global-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 14%, rgba(255, 255, 255, .38), transparent 38%);
  transform: translateX(-110%);
  animation: surfaceSweep 7s ease-in-out infinite;
}

@keyframes surfaceSweep {
  55%,
  100% {
    transform: translateX(115%);
  }
}

.website-visual {
  display: grid;
  align-content: center;
  gap: 14px;
  padding: clamp(20px, 4vw, 44px);
}

.website-visual .hero-block {
  min-height: 170px;
  border-radius: 24px;
  background: rgba(255, 255, 255, .78);
  box-shadow: var(--shadow-soft);
}

.website-visual > span {
  width: 70%;
  height: 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .78);
}

.website-visual > span:nth-child(3) {
  width: 48%;
}

.mini-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}

.mini-grid i {
  min-height: 88px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .66);
}

.dashboard-visual {
  padding: clamp(20px, 4vw, 42px);
  display: grid;
  align-content: center;
  gap: 22px;
}

.kpi-line {
  display: flex;
  justify-content: space-between;
  border-radius: 20px;
  padding: 20px;
  background: rgba(255, 255, 255, .76);
}

.kpi-line span {
  color: var(--success);
  font-weight: 900;
}

.service-bars {
  height: 160px;
  padding: 18px;
  border-radius: 22px;
  background: rgba(255, 255, 255, .66);
}

.service-bars i:nth-child(1) { height: 38%; }
.service-bars i:nth-child(2) { height: 70%; animation-delay: -.4s; }
.service-bars i:nth-child(3) { height: 52%; animation-delay: -.8s; }
.service-bars i:nth-child(4) { height: 88%; animation-delay: -1.2s; }

.table-lines {
  display: grid;
  gap: 10px;
}

.workflow-visual,
.agent-visual {
  padding: clamp(20px, 4vw, 48px);
  align-content: center;
}

.workflow-visual span,
.workflow-map span {
  min-height: 58px;
  display: flex;
  align-items: center;
}

.agent-visual {
  display: grid;
  gap: 12px;
}

.agent-visual div {
  padding: 18px;
  border-radius: 20px;
  color: var(--text);
  background: rgba(255, 255, 255, .78);
  font-weight: 900;
}

.agent-visual span {
  display: block;
  padding: 15px 16px;
  border-radius: 16px;
  color: #34535d;
  background: rgba(255, 255, 255, .68);
  font-weight: 850;
}

.transform-section {
  position: relative;
}

.transform-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.transform-step,
.why-card,
.process-step {
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  box-shadow: 0 18px 44px rgba(18, 104, 124, .07);
  transition: transform .28s var(--ease), box-shadow .28s ease, border-color .28s ease;
}

.transform-step {
  min-height: 292px;
  padding: 24px;
  border-radius: 28px;
  position: relative;
}

.transform-step:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -12px;
  top: 50%;
  width: 22px;
  height: 2px;
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary));
}

.transform-step span,
.process-step span {
  color: var(--brand-accent);
  font-weight: 900;
}

.transform-step h3 {
  margin: 70px 0 12px;
  font-size: 1.6rem;
}

.transform-step p,
.why-card p,
.process-step p,
.project-meta p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.project-list {
  display: grid;
  gap: 22px;
}

.project-row {
  min-height: 510px;
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  gap: 24px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 34px;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 18px 44px rgba(18, 104, 124, .07);
  transition: transform .28s var(--ease), box-shadow .28s ease;
}

.project-meta {
  padding: clamp(14px, 3vw, 28px);
  display: grid;
  align-content: center;
  gap: 18px;
}

.project-meta > span {
  color: var(--brand-accent);
  font-weight: 900;
}

.project-meta h3 {
  font-size: clamp(2rem, 4vw, 4.2rem);
  line-height: .95;
}

.project-summary {
  font-size: 1.08rem;
  color: var(--text-soft) !important;
  font-weight: 750;
}

.project-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.project-link {
  width: fit-content;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 6px;
  padding: 0 16px;
  border: 1px solid rgba(13, 143, 145, .2);
  border-radius: 999px;
  color: #267980;
  background: rgba(255, 255, 255, .74);
  box-shadow: var(--shadow-soft);
  font-size: .86rem;
  font-weight: 900;
  transition: transform .25s var(--ease), border-color .25s ease;
}

.project-link:hover {
  transform: translateY(-2px);
  border-color: rgba(13, 143, 145, .42);
}

.project-mock {
  position: relative;
  min-height: 460px;
  display: grid;
  place-items: center;
  border-radius: 26px;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, .28), transparent 30%, rgba(62, 203, 193, .18) 58%, transparent),
    radial-gradient(circle at 22% 24%, rgba(255, 255, 255, .82), transparent 20%),
    linear-gradient(135deg, rgba(62, 203, 193, .32), rgba(191, 239, 255, .74));
  background-size: 190% 190%, auto, auto;
  overflow: hidden;
  animation: gradientSlide 13s ease-in-out infinite;
}

.mock-screen {
  width: min(82%, 580px);
  min-height: 320px;
  padding: 24px;
  border: 1px solid rgba(13, 72, 82, .09);
  border-radius: 28px;
  background: rgba(255, 255, 255, .78);
  box-shadow: var(--shadow);
  transform: rotate(-3deg);
  display: grid;
  gap: 14px;
  animation: mockFloat 8s ease-in-out infinite;
}

@keyframes mockFloat {
  50% {
    transform: rotate(-1deg) translateY(-12px);
  }
}

.floating-chip {
  position: absolute;
  z-index: 4;
  min-width: 92px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  border: 1px solid rgba(13, 143, 145, .18);
  border-radius: 999px;
  color: #267980;
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 16px 38px rgba(18, 104, 124, .14);
  backdrop-filter: blur(18px);
  font-size: .8rem;
  font-weight: 950;
  animation: chipDrift 7.5s ease-in-out infinite;
}

.chip-one {
  left: 9%;
  top: 18%;
}

.chip-two {
  right: 10%;
  bottom: 18%;
  animation-delay: -3.2s;
}

@keyframes chipDrift {
  50% {
    transform: translateY(-18px) translateX(8px);
  }
}

.mock-screen span {
  height: 13px;
  border-radius: 999px;
  background: #dceff4;
}

.mock-screen span:nth-child(2) {
  width: 76%;
}

.mock-screen span:nth-child(3) {
  width: 48%;
}

.mock-screen div {
  position: relative;
  min-height: 190px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(62, 203, 193, .72), rgba(191, 239, 255, .82));
  overflow: hidden;
}

.dashboard-section {
  padding-top: 24px;
}

.dashboard-showcase {
  position: relative;
  min-height: 620px;
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: 18px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 34px;
  background: rgba(255, 255, 255, .76);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.dashboard-sidebar {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 16px;
  border-radius: 24px;
  background: #12313a;
}

.dashboard-sidebar span {
  height: 44px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .14);
}

.dashboard-sidebar span:first-child {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
}

.dashboard-main {
  display: grid;
  gap: 18px;
}

.dashboard-top {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.dashboard-top div,
.large-chart,
.dashboard-bottom > div {
  border: 1px solid rgba(13, 72, 82, .08);
  border-radius: 22px;
  background: #f7fcff;
  box-shadow: 0 12px 30px rgba(18, 104, 124, .06);
}

.dashboard-top div {
  padding: 18px;
}

.dashboard-top small {
  display: block;
  color: var(--muted);
  font-weight: 800;
  margin-bottom: 10px;
}

.dashboard-top strong {
  font-size: clamp(1.4rem, 2.8vw, 2.2rem);
  letter-spacing: 0;
}

.large-chart {
  min-height: 280px;
  padding: 24px;
}

.large-chart span:nth-child(6) { height: 62%; animation-delay: -2s; }
.large-chart span:nth-child(7) { height: 92%; animation-delay: -2.4s; }

.dashboard-bottom {
  display: grid;
  grid-template-columns: .86fr 1.14fr;
  gap: 18px;
}

.activity-list,
.customer-table {
  padding: 22px;
  display: grid;
  align-content: center;
  gap: 12px;
}

.split,
.agent-card {
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  gap: 28px;
  align-items: center;
}

.support-card {
  position: relative;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 28px;
  align-items: center;
  padding: clamp(24px, 5vw, 52px);
  border: 1px solid var(--border);
  border-radius: 34px;
  background:
    linear-gradient(120deg, rgba(62, 203, 193, .16), transparent 34%, rgba(191, 239, 255, .34)),
    radial-gradient(circle at 84% 12%, rgba(62, 203, 193, .22), transparent 30%),
    linear-gradient(145deg, rgba(255, 255, 255, .86), rgba(237, 250, 252, .74));
  background-size: 190% 190%, auto, auto;
  box-shadow: var(--shadow);
  overflow: hidden;
  animation: gradientSlide 15s ease-in-out infinite;
}

.support-card h2 {
  font-size: clamp(2.3rem, 5vw, 5rem);
}

.support-card p {
  max-width: 620px;
  margin: 22px 0 26px;
  color: var(--muted);
  font-size: clamp(1.03rem, 1.6vw, 1.24rem);
  line-height: 1.72;
}

.support-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.support-list span {
  min-height: 150px;
  display: flex;
  align-items: end;
  padding: 22px;
  border: 1px solid rgba(13, 72, 82, .08);
  border-radius: 24px;
  color: #31515a;
  background: rgba(255, 255, 255, .72);
  box-shadow: var(--shadow-soft);
  font-weight: 900;
}

.trust-section {
  padding-top: 0;
  padding-bottom: 26px;
}

.trust-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, .68);
  box-shadow: var(--shadow-soft);
}

.trust-bar span {
  padding: 9px 12px;
  border-radius: 999px;
  color: #31515a;
  background: rgba(62, 203, 193, .1);
  font-size: .84rem;
  font-weight: 900;
}

.split h2,
.agent-card h2 {
  font-size: clamp(2.3rem, 5vw, 5rem);
}

.workflow-map {
  position: relative;
  padding: 26px;
  border: 1px solid var(--border);
  border-radius: 34px;
  background: rgba(255, 255, 255, .76);
  box-shadow: var(--shadow);
}

.workflow-map::before {
  content: "";
  position: absolute;
  left: 42px;
  top: 54px;
  bottom: 54px;
  width: 2px;
  background: linear-gradient(180deg, var(--brand-primary), var(--brand-secondary));
}

.workflow-map span {
  z-index: 1;
}

.agent-card {
  padding: 34px;
  border: 1px solid var(--border);
  border-radius: 34px;
  background:
    radial-gradient(circle at 85% 12%, rgba(62, 203, 193, .22), transparent 28%),
    linear-gradient(145deg, rgba(255, 255, 255, .86), rgba(237, 250, 252, .74));
  box-shadow: var(--shadow);
}

.agent-console {
  border: 1px solid rgba(13, 72, 82, .1);
  border-radius: 28px;
  padding: 22px;
  background: rgba(255, 255, 255, .82);
  box-shadow: var(--shadow-soft);
}

.console-top {
  width: fit-content;
  margin-bottom: 18px;
  color: var(--brand-accent);
  font-size: .84rem;
  font-weight: 900;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(62, 203, 193, .13);
}

.agent-goal {
  margin-bottom: 16px;
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: 0;
}

.agent-console li {
  min-height: 54px;
  display: flex;
  align-items: center;
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.why-card {
  min-height: 260px;
  padding: 24px;
  border-radius: 28px;
}

.why-card h3 {
  margin: 72px 0 12px;
  font-size: 1.35rem;
}

.process-line {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.process-step {
  min-height: 250px;
  padding: 22px;
  border-radius: 26px;
}

.process-step h3 {
  margin: 62px 0 10px;
  font-size: 1.18rem;
}

.process-step p {
  font-size: .92rem;
}

.enquiry-grid {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 28px;
  align-items: start;
}

.enquiry-copy {
  position: sticky;
  top: 112px;
  padding: clamp(8px, 2vw, 18px) 0;
}

.enquiry-copy h2 {
  font-size: clamp(2.35rem, 5.2vw, 5rem);
}

.enquiry-copy > p:not(.section-kicker) {
  max-width: 600px;
  margin: 24px 0 26px;
  color: var(--muted);
  font-size: clamp(1.03rem, 1.6vw, 1.18rem);
  line-height: 1.72;
}

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

.project-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: clamp(18px, 4vw, 32px);
  border: 1px solid var(--border);
  border-radius: 34px;
  background: rgba(255, 255, 255, .76);
  box-shadow: var(--shadow);
}

.project-form label {
  display: grid;
  gap: 9px;
  color: #31515a;
  font-size: .86rem;
  font-weight: 900;
}

.project-form input,
.project-form select,
.project-form textarea {
  width: 100%;
  min-height: 54px;
  border: 1px solid rgba(13, 72, 82, .12);
  border-radius: 16px;
  outline: none;
  padding: 0 15px;
  color: var(--text);
  background: rgba(247, 252, 255, .9);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.project-form textarea {
  min-height: 148px;
  padding-top: 14px;
  resize: vertical;
}

.project-form input:focus,
.project-form select:focus,
.project-form textarea:focus {
  border-color: rgba(13, 143, 145, .42);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(62, 203, 193, .13);
}

.project-form input::placeholder,
.project-form textarea::placeholder {
  color: #8aa0a9;
}

.form-wide,
.form-submit,
.form-actions {
  grid-column: 1 / -1;
}

.form-submit {
  width: 100%;
  border: 0;
  cursor: pointer;
}

.form-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.whatsapp-submit {
  min-height: 60px;
  border: 1px solid rgba(13, 72, 82, .1);
  cursor: pointer;
  white-space: nowrap;
}

.final-cta {
  position: relative;
  min-height: 470px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(32px, 7vw, 84px);
  border: 1px solid var(--border);
  border-radius: 36px;
  background:
    linear-gradient(120deg, rgba(62, 203, 193, .16), transparent 36%, rgba(191, 239, 255, .4)),
    radial-gradient(circle at 14% 18%, rgba(191, 239, 255, .82), transparent 30%),
    radial-gradient(circle at 88% 10%, rgba(62, 203, 193, .24), transparent 30%),
    linear-gradient(145deg, #fff, #f3fbfd);
  background-size: 190% 190%, auto, auto, auto;
  box-shadow: var(--shadow);
  overflow: hidden;
  animation: gradientSlide 16s ease-in-out infinite;
}

.final-cta .section-kicker {
  margin-inline: auto;
}

.final-cta h2 {
  max-width: 960px;
  margin: 0 auto 18px;
}

.final-cta p {
  max-width: 620px;
  margin: 0 auto 28px;
}

.cta-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

.cta-large {
  justify-self: center;
}

.footer {
  padding: 38px 0 44px;
  display: grid;
  grid-template-columns: .9fr 1fr auto;
  align-items: end;
  gap: 26px;
  border-top: 1px solid rgba(13, 72, 82, .08);
}

.footer-brand p,
.copyright {
  color: var(--muted);
}

.footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
  color: #425d67;
  font-weight: 800;
}

/* Cinematic premium redesign layer */
.site-nav {
  top: 14px;
  width: min(1040px, calc(100% - 28px));
  margin: 0 auto;
  padding: 8px 10px;
  border: 1px solid rgba(13, 72, 82, .1);
  border-radius: 999px;
  background: rgba(255, 255, 255, .66);
  box-shadow: 0 18px 60px rgba(16, 74, 86, .1);
}

.nav-inner {
  width: 100%;
  min-height: 48px;
  grid-template-columns: auto 1fr auto;
}

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

.nav-links {
  justify-self: center;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.nav-links a {
  padding: 8px 12px;
  font-size: .78rem;
}

.site-nav .nav-cta {
  min-height: 40px;
  padding: 0 16px;
  font-size: .8rem;
}

.hero-section {
  width: min(1320px, calc(100% - 32px));
  min-height: calc(100vh - 76px);
  grid-template-columns: 1fr;
  place-items: center;
  text-align: center;
  padding-top: clamp(86px, 10vw, 132px);
}

.hero-copy {
  position: relative;
  z-index: 8;
  max-width: 1060px;
  margin: 0 auto;
}

.hero-label,
.hero-copy .global-note {
  margin-inline: auto;
}

.hero-copy > p:not(.hero-label) {
  margin-inline: auto;
}

h1 {
  margin-inline: auto;
  max-width: 1100px;
  font-size: clamp(4.4rem, 10vw, 10.8rem);
}

.hero-actions {
  justify-content: center;
}

.hero-visual {
  width: min(980px, 100%);
  min-height: clamp(430px, 52vw, 620px);
  margin-top: clamp(-16px, -2vw, -6px);
}

.visual-orbit {
  inset: 2% 4% 8%;
  border-radius: 48px;
  background:
    linear-gradient(115deg, rgba(7, 30, 38, .96), rgba(8, 48, 56, .88) 48%, rgba(19, 133, 137, .42)),
    linear-gradient(120deg, rgba(62, 203, 193, .24), transparent 40%, rgba(191, 239, 255, .28));
  box-shadow: 0 34px 110px rgba(8, 48, 56, .24);
}

.visual-orbit::after {
  content: "";
  position: absolute;
  inset: 11%;
  border: 1px solid rgba(191, 239, 255, .14);
  border-radius: 38px;
  background-image:
    linear-gradient(rgba(191, 239, 255, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(191, 239, 255, .08) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(180deg, #000, transparent 78%);
}

.ui-window {
  border-color: rgba(191, 239, 255, .16);
  background: rgba(249, 254, 255, .78);
}

.website-window {
  left: 7%;
  top: 8%;
}

.dashboard-window {
  right: 7%;
  top: 26%;
}

.workflow-window {
  left: 9%;
  bottom: 9%;
}

.agent-window {
  right: 10%;
  bottom: 6%;
}

.cinematic-dark {
  position: relative;
  width: min(1320px, calc(100% - 32px));
  margin-block: clamp(26px, 5vw, 68px);
  padding: clamp(72px, 9vw, 118px) clamp(20px, 5vw, 64px);
  border: 1px solid rgba(191, 239, 255, .11);
  border-radius: clamp(28px, 4vw, 54px);
  color: #eefcff;
  background:
    linear-gradient(135deg, rgba(7, 25, 34, .98), rgba(10, 51, 60, .96) 54%, rgba(9, 90, 93, .82)),
    linear-gradient(120deg, rgba(62, 203, 193, .16), transparent 48%, rgba(191, 239, 255, .12));
  box-shadow: 0 34px 100px rgba(8, 48, 56, .18);
  overflow: hidden;
}

.cinematic-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(191, 239, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(191, 239, 255, .055) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: radial-gradient(ellipse at 50% 10%, #000 0 30%, transparent 72%);
}

.cinematic-dark::after {
  content: "";
  position: absolute;
  inset: auto -12% -34%;
  height: 52%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(62, 203, 193, .18), rgba(191, 239, 255, .16), transparent);
  filter: blur(42px);
  animation: horizonFlow 18s ease-in-out infinite;
}

.cinematic-dark > * {
  position: relative;
  z-index: 1;
}

.cinematic-dark .section-kicker,
.cinematic-dark .panel-kicker,
.cinematic-dark .hero-label {
  color: #bff7fb;
  border-color: rgba(191, 239, 255, .18);
  background: rgba(255, 255, 255, .06);
  box-shadow: none;
}

.cinematic-dark .section-head > p:not(.section-kicker),
.cinematic-dark .split p,
.cinematic-dark .support-card p,
.cinematic-dark .project-meta p,
.cinematic-dark .transform-step p,
.cinematic-dark .why-card p,
.cinematic-dark .process-step p {
  color: rgba(238, 252, 255, .68);
}

.cinematic-dark h2,
.cinematic-dark h3,
.cinematic-dark .project-summary {
  color: #fff !important;
}

.cinematic-light {
  position: relative;
}

.statement-head {
  min-height: clamp(240px, 34vw, 390px);
  align-items: center;
}

.statement-head h2 {
  max-width: 900px;
}

.statement-head > p:not(.section-kicker) {
  max-width: 520px;
}

.services-section .service-showcase {
  grid-template-columns: 1.04fr .96fr;
  grid-template-areas:
    "website dashboard"
    "website workflow";
}

.service-panel {
  min-height: 360px;
  grid-template-columns: 1fr;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .035)),
    rgba(255, 255, 255, .04);
  border-color: rgba(191, 239, 255, .12);
  box-shadow: none;
}

.bento-1 {
  grid-area: website;
  min-height: 740px;
}

.bento-2 {
  grid-area: dashboard;
}

.bento-3 {
  grid-area: workflow;
}

.cinematic-dark .service-panel .panel-copy p:not(.panel-kicker) {
  color: rgba(238, 252, 255, .67);
}

.cinematic-dark .tag-row span,
.cinematic-dark .flow-mini span,
.cinematic-dark .workflow-visual span,
.cinematic-dark .workflow-map span,
.cinematic-dark .agent-window li,
.cinematic-dark .global-points span,
.cinematic-dark .support-list span {
  color: #dffbff;
  border-color: rgba(191, 239, 255, .11);
  background: rgba(255, 255, 255, .065);
}

.cinematic-dark .service-visual {
  border-color: rgba(191, 239, 255, .12);
  background:
    linear-gradient(120deg, rgba(62, 203, 193, .2), transparent 34%, rgba(191, 239, 255, .14)),
    rgba(255, 255, 255, .045);
}

.cinematic-dark .website-visual .hero-block,
.cinematic-dark .website-visual > span,
.cinematic-dark .mini-grid i,
.cinematic-dark .kpi-line,
.cinematic-dark .service-bars {
  background: rgba(255, 255, 255, .09);
}

.cinematic-dark .table-lines span,
.cinematic-dark .website-preview span,
.cinematic-dark .activity-list span,
.cinematic-dark .customer-table span {
  background: rgba(191, 239, 255, .18);
}

.transform-grid {
  gap: 1px;
  border: 1px solid rgba(191, 239, 255, .1);
  border-radius: 34px;
  overflow: hidden;
}

.transform-step {
  min-height: 340px;
  border: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, .045);
  box-shadow: none;
}

.transform-step:not(:last-child)::after {
  display: none;
}

.project-row {
  min-height: clamp(600px, 74vh, 780px);
  grid-template-columns: .78fr 1.22fr;
  align-items: stretch;
  border-radius: 48px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .88), rgba(243, 251, 253, .72)),
    linear-gradient(120deg, rgba(62, 203, 193, .1), transparent);
  box-shadow: 0 28px 80px rgba(18, 104, 124, .1);
}

.project-row:nth-child(even) {
  grid-template-columns: 1.22fr .78fr;
}

.project-row:nth-child(even) .project-meta {
  order: 2;
}

.project-row:nth-child(even) .project-mock {
  order: 1;
}

.project-mock {
  min-height: 100%;
  border-radius: 34px;
}

.mock-screen {
  width: min(78%, 660px);
  min-height: 430px;
  border-radius: 34px;
}

.dashboard-showcase {
  min-height: clamp(560px, 70vh, 760px);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .035)),
    rgba(255, 255, 255, .04);
  border-color: rgba(191, 239, 255, .12);
  box-shadow: none;
}

.cinematic-dark .dashboard-top div,
.cinematic-dark .large-chart,
.cinematic-dark .dashboard-bottom > div {
  border-color: rgba(191, 239, 255, .1);
  background: rgba(255, 255, 255, .06);
  box-shadow: none;
}

.support-card {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .035)),
    rgba(255, 255, 255, .04);
  border-color: rgba(191, 239, 255, .12);
  box-shadow: none;
}

.why-grid,
.process-line {
  gap: 18px;
}

.why-card,
.process-step {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .86), rgba(247, 252, 255, .68));
}

.cinematic-dark .process-step {
  border-color: rgba(191, 239, 255, .1);
  background: rgba(255, 255, 255, .05);
  box-shadow: none;
}

.enquiry-grid {
  min-height: clamp(640px, 82vh, 860px);
  align-items: center;
}

.project-form {
  border-radius: 42px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .88), rgba(242, 251, 253, .72));
}

.final-cta {
  min-height: clamp(560px, 72vh, 780px);
  border-radius: clamp(34px, 5vw, 62px);
}

.footer {
  width: min(1320px, calc(100% - 32px));
  margin-top: 40px;
}

.signal-thread {
  --signal-x: 0;
  position: absolute;
  pointer-events: none;
  z-index: 1;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--brand-primary), var(--brand-secondary), transparent);
  opacity: .62;
  transform: translateX(var(--signal-x)) scaleX(.12);
  transform-origin: left center;
  animation: signalThreadDraw 1s linear both;
  animation-timeline: view();
  animation-range: entry 8% cover 48%;
}

@keyframes signalThreadDraw {
  from {
    transform: translateX(var(--signal-x)) scaleX(.12);
    opacity: .18;
  }

  to {
    transform: translateX(var(--signal-x)) scaleX(1);
    opacity: .72;
  }
}

.ecosystem-signal {
  left: 0;
  right: 0;
  top: 27%;
  z-index: 0;
  opacity: .22;
}

.global-thread,
.architecture-thread,
.process-thread,
.contact-thread {
  --signal-x: -50%;
  left: 50%;
  top: 42px;
  width: min(820px, 76vw);
}

/* Fix pass: staged scrolling and cleaner hero composition */
html {
  scroll-snap-type: y proximity;
  scroll-padding-top: 96px;
}

main > .hero-section,
main > .strip,
main > .section,
.footer {
  scroll-snap-align: start;
}

main > .section {
  scroll-snap-stop: always;
}

.hero-section {
  grid-template-columns: minmax(0, .86fr) minmax(480px, 1.14fr);
  gap: clamp(28px, 5vw, 72px);
  place-items: center;
  text-align: left;
  overflow: visible;
}

.hero-copy {
  margin: 0;
  max-width: 650px;
}

.hero-label,
.hero-copy .global-note,
.hero-copy > p:not(.hero-label),
h1 {
  margin-inline: 0;
}

h1 {
  max-width: 720px;
  font-size: clamp(4rem, 6.8vw, 7.4rem);
}

.hero-actions {
  justify-content: flex-start;
}

.hero-visual {
  width: min(720px, 100%);
  min-height: clamp(460px, 47vw, 610px);
  margin-top: 0;
}

.visual-orbit {
  inset: 5% 2% 7%;
  border-radius: 44px;
  transform: none;
  animation: heroPanelPulse 10s ease-in-out infinite, gradientSlide 16s ease-in-out infinite;
}

.visual-orbit::before {
  width: 520px;
  height: 520px;
  opacity: .62;
}

.visual-orbit::after {
  inset: 12%;
  opacity: .7;
}

@keyframes heroPanelPulse {
  50% {
    transform: translateY(-8px) scale(.992);
  }
}

.ui-window {
  border-radius: 22px;
  box-shadow: 0 18px 52px rgba(7, 30, 38, .18);
}

.ui-window:hover {
  transform: translateY(-8px) scale(1.01) !important;
}

.website-window {
  width: 52%;
  min-height: 260px;
  left: 8%;
  top: 12%;
  transform: none;
}

.dashboard-window {
  width: 40%;
  min-height: 220px;
  right: 8%;
  top: 24%;
  transform: none;
}

.workflow-window {
  width: 44%;
  min-height: 190px;
  left: 12%;
  bottom: 12%;
  transform: none;
}

.agent-window {
  width: 40%;
  min-height: 200px;
  right: 10%;
  bottom: 8%;
  transform: none;
}

.website-preview div {
  height: 116px;
}

.bar-chart {
  height: 86px;
}

.flow-mini span,
.agent-window li {
  min-height: 42px;
  padding-block: 9px;
}

.motion-node {
  width: 54px;
  height: 54px;
  border-radius: 18px;
}

.node-one {
  left: 2%;
  top: 13%;
}

.node-two {
  right: 4%;
  top: 12%;
}

.node-three {
  left: auto;
  right: 30%;
  bottom: 2%;
}

.cinematic-dark,
.cinematic-light,
.hero-section {
  view-timeline-name: --section-rise;
  view-timeline-axis: block;
}

.cinematic-dark,
.cinematic-light {
  animation: sectionComeUp 1s var(--ease) both;
  animation-timeline: view();
  animation-range: entry -10% cover 28%;
}

@keyframes sectionComeUp {
  from {
    opacity: .82;
    transform: translateY(70px) scale(.985);
    filter: blur(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* Scroll-driven pinned Wajeha ecosystem scene */
.pinned-ecosystem {
  position: relative;
  width: 100%;
  min-height: 520vh;
  margin: clamp(30px, 7vw, 88px) 0;
  color: #eefcff;
  background:
    linear-gradient(180deg, #f7fcff 0%, #071922 11%, #0a333c 76%, #f7fcff 100%);
  view-timeline-name: --ecosystem-scroll;
  view-timeline-axis: block;
}

html {
  scroll-snap-type: none;
}

main > .hero-section,
main > .strip,
main > .section,
.footer {
  scroll-snap-align: none;
}

.ecosystem-sticky {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(280px, .72fr) minmax(440px, 1.12fr) minmax(280px, .62fr);
  gap: clamp(20px, 4vw, 52px);
  align-items: center;
  padding: clamp(88px, 9vw, 126px) clamp(20px, 5vw, 74px) clamp(36px, 6vw, 74px);
  overflow: hidden;
}

.ecosystem-sticky::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(rgba(191, 239, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(191, 239, 255, .055) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at 52% 45%, #000 0 40%, transparent 76%);
}

.ecosystem-sticky::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(circle at 52% 44%, rgba(62, 203, 193, .22), transparent 28%),
    radial-gradient(circle at 74% 72%, rgba(191, 239, 255, .13), transparent 28%);
  animation: ecosystemGlow 1s linear both;
  animation-timeline: --ecosystem-scroll;
}

@keyframes ecosystemGlow {
  0% {
    opacity: .42;
    transform: scale(.92);
  }

  50% {
    opacity: .85;
    transform: scale(1.06);
  }

  100% {
    opacity: .54;
    transform: scale(1.18);
  }
}

.ecosystem-copy {
  position: relative;
  z-index: 4;
  max-width: 520px;
  animation: ecosystemIntroCopy 1s linear both;
  animation-timeline: --ecosystem-scroll;
}

.ecosystem-copy h2 {
  font-size: clamp(2.8rem, 5.4vw, 6rem);
  color: #fff;
}

.ecosystem-copy > p:not(.section-kicker) {
  color: rgba(238, 252, 255, .68);
  font-size: clamp(1rem, 1.45vw, 1.22rem);
  line-height: 1.75;
}

@keyframes ecosystemIntroCopy {
  0%,
  18% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }

  36%,
  100% {
    opacity: .22;
    transform: translateY(-36px);
    filter: blur(3px);
  }
}

.ecosystem-stage {
  position: relative;
  z-index: 3;
  min-height: min(70vh, 720px);
  perspective: 1300px;
  animation: ecosystemStageMove 1s linear both;
  animation-timeline: --ecosystem-scroll;
}

@keyframes ecosystemStageMove {
  0% {
    transform: translateY(22px) scale(.86) rotateX(8deg);
  }

  25% {
    transform: translateY(0) scale(.96) rotateX(4deg);
  }

  50% {
    transform: translateY(-8px) scale(1) rotateX(0);
  }

  75% {
    transform: translateY(-16px) scale(.96) rotateX(0);
  }

  100% {
    transform: translateY(-28px) scale(.9) rotateX(0);
  }
}

.ecosystem-browser {
  position: absolute;
  inset: 7% 0 9%;
  border: 1px solid rgba(191, 239, 255, .16);
  border-radius: clamp(28px, 4vw, 54px);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04)),
    linear-gradient(135deg, rgba(7, 30, 38, .96), rgba(8, 58, 66, .92) 58%, rgba(13, 143, 145, .58));
  box-shadow: 0 42px 140px rgba(0, 0, 0, .26);
  overflow: hidden;
}

.ecosystem-browser::before {
  content: "";
  position: absolute;
  inset: 16% 10%;
  border-radius: 34px;
  background:
    linear-gradient(120deg, rgba(62, 203, 193, .2), transparent 42%, rgba(191, 239, 255, .18)),
    rgba(255, 255, 255, .045);
  animation: ecosystemSurfaceShift 1s linear both;
  animation-timeline: --ecosystem-scroll;
}

@keyframes ecosystemSurfaceShift {
  0% {
    transform: translateY(26px) scale(.88);
    opacity: .45;
  }

  25% {
    transform: translateY(0) scale(1);
    opacity: .94;
  }

  50%,
  100% {
    transform: translateX(4%) scale(.92);
    opacity: .22;
  }
}

.browser-top {
  position: relative;
  z-index: 2;
  height: 62px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 24px;
  border-bottom: 1px solid rgba(191, 239, 255, .13);
}

.browser-top span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(191, 239, 255, .45);
}

.browser-top i {
  margin-left: auto;
  color: rgba(191, 239, 255, .74);
  font-style: normal;
  font-size: .78rem;
  font-weight: 950;
}

.browser-nav {
  position: absolute;
  z-index: 3;
  left: 10%;
  right: 10%;
  top: 18%;
  display: grid;
  grid-template-columns: 90px 90px 90px 1fr;
  gap: 14px;
  align-items: center;
  animation: websiteNavBuild 1s linear both;
  animation-timeline: --ecosystem-scroll;
}

.browser-nav span,
.browser-nav strong {
  height: 12px;
  border-radius: 999px;
  background: rgba(191, 239, 255, .24);
}

.browser-nav strong {
  justify-self: end;
  width: 110px;
  height: 36px;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
}

@keyframes websiteNavBuild {
  0% {
    opacity: 0;
    transform: translateY(20px);
    clip-path: inset(0 100% 0 0 round 999px);
  }

  25%,
  100% {
    opacity: 1;
    transform: translateY(0);
    clip-path: inset(0 0 0 0 round 999px);
  }
}

.website-build {
  position: absolute;
  z-index: 2;
  left: 10%;
  right: 10%;
  top: 29%;
  display: grid;
  gap: 16px;
  animation: websiteBuildProgress 1s linear both;
  animation-timeline: --ecosystem-scroll;
}

.website-hero-block {
  min-height: 170px;
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(62, 203, 193, .68), rgba(191, 239, 255, .38));
}

.website-build > span {
  height: 14px;
  border-radius: 999px;
  background: rgba(191, 239, 255, .2);
}

.website-build > span:nth-child(3) {
  width: 62%;
}

.website-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.website-card-grid i {
  min-height: 92px;
  border-radius: 22px;
  background: rgba(255, 255, 255, .095);
}

@keyframes websiteBuildProgress {
  0% {
    opacity: .18;
    transform: translateY(34px) scale(.96);
    clip-path: inset(0 0 74% 0 round 28px);
  }

  25% {
    opacity: 1;
    transform: translateY(0) scale(1);
    clip-path: inset(0 0 0 0 round 28px);
  }

  50%,
  100% {
    opacity: .08;
    transform: translateX(-15%) scale(.86);
    filter: blur(7px);
  }
}

.dashboard-build {
  position: absolute;
  z-index: 4;
  inset: 18% 8% 10%;
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 16px;
  animation: dashboardTransform 1s linear both;
  animation-timeline: --ecosystem-scroll;
}

.dashboard-build aside,
.dashboard-build main,
.dash-metrics span,
.dash-chart,
.dash-table {
  border: 1px solid rgba(191, 239, 255, .12);
  border-radius: 24px;
  background: rgba(255, 255, 255, .07);
}

.dashboard-build aside {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 14px;
}

.dashboard-build aside span {
  height: 44px;
  border-radius: 15px;
  background: rgba(191, 239, 255, .13);
}

.dashboard-build aside span:first-child {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
}

.dashboard-build main {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.dash-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.dash-metrics span {
  min-height: 72px;
}

.dash-chart {
  min-height: 170px;
  display: flex;
  align-items: end;
  gap: 11px;
  padding: 18px;
}

.dash-chart i {
  flex: 1;
  border-radius: 999px 999px 8px 8px;
  background: linear-gradient(180deg, var(--brand-primary), rgba(191, 239, 255, .32));
  animation: dashBarsScrub 1s linear both;
  animation-timeline: --ecosystem-scroll;
}

.dash-chart i:nth-child(1) { height: 32%; }
.dash-chart i:nth-child(2) { height: 54%; }
.dash-chart i:nth-child(3) { height: 72%; }
.dash-chart i:nth-child(4) { height: 46%; }
.dash-chart i:nth-child(5) { height: 88%; }

@keyframes dashBarsScrub {
  0%,
  35% {
    transform: scaleY(.22);
  }

  58%,
  100% {
    transform: scaleY(1);
  }
}

.dash-table {
  display: grid;
  gap: 9px;
  padding: 14px;
}

.dash-table span {
  height: 12px;
  border-radius: 999px;
  background: rgba(191, 239, 255, .16);
}

@keyframes dashboardTransform {
  0%,
  30% {
    opacity: 0;
    transform: translateX(14%) scale(.88);
    filter: blur(12px);
  }

  50% {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
  }

  72%,
  100% {
    opacity: .64;
    transform: translateX(-5%) scale(.9);
  }
}

.automation-network {
  position: absolute;
  inset: 0;
  z-index: 5;
  opacity: 0;
  animation: networkReveal 1s linear both;
  animation-timeline: --ecosystem-scroll;
}

@keyframes networkReveal {
  0%,
  54% {
    opacity: 0;
    transform: scale(.92);
  }

  75% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 1;
    transform: scale(1.05);
  }
}

.network-node {
  position: absolute;
  min-width: 96px;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(191, 239, 255, .18);
  border-radius: 999px;
  color: #eaffff;
  background: rgba(255, 255, 255, .085);
  box-shadow: 0 18px 54px rgba(62, 203, 193, .12);
  backdrop-filter: blur(16px);
  font-size: .82rem;
  font-weight: 950;
}

.node-website { left: 8%; top: 48%; }
.node-lead { left: 28%; top: 16%; }
.node-system { left: 45%; top: 49%; }
.node-team { right: 14%; top: 20%; }
.node-ai { right: 7%; bottom: 18%; }
.node-customer { left: 26%; bottom: 11%; }

.network-line {
  position: absolute;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-primary), rgba(191, 239, 255, .5));
  transform-origin: left center;
  transform: scaleX(0);
  animation: drawNetworkLine 1s linear both;
  animation-timeline: --ecosystem-scroll;
}

.line-one { left: 19%; top: 51%; width: 28%; rotate: -29deg; }
.line-two { left: 48%; top: 52%; width: 28%; rotate: -25deg; animation-delay: .08s; }
.line-three { left: 51%; top: 55%; width: 34%; rotate: 30deg; animation-delay: .16s; }
.line-four { left: 32%; bottom: 17%; width: 25%; rotate: -21deg; animation-delay: .24s; }

@keyframes drawNetworkLine {
  0%,
  63% {
    transform: scaleX(0);
  }

  84%,
  100% {
    transform: scaleX(1);
  }
}

.data-pulse {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #bfefff;
  box-shadow: 0 0 22px rgba(191, 239, 255, .85);
  opacity: 0;
  animation: dataTravel 1s linear both;
  animation-timeline: --ecosystem-scroll;
}

.pulse-one {
  left: 18%;
  top: 49%;
}

.pulse-two {
  right: 14%;
  bottom: 21%;
  animation-delay: .1s;
}

@keyframes dataTravel {
  0%,
  66% {
    opacity: 0;
    transform: translate(0, 0);
  }

  78% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(250px, -160px);
  }
}

.ecosystem-phases {
  position: relative;
  z-index: 4;
  min-height: 560px;
}

.ecosystem-phase {
  position: absolute;
  inset: 50% 0 auto;
  transform: translateY(-50%);
  display: grid;
  gap: 14px;
  opacity: 0;
  filter: blur(10px);
  animation: phaseCopyScrub 1s linear both;
  animation-timeline: --ecosystem-scroll;
}

.ecosystem-phase > span {
  color: var(--brand-secondary);
  font-weight: 950;
}

.ecosystem-phase h3 {
  max-width: 440px;
  color: #fff;
  font-size: clamp(1.8rem, 2.9vw, 3.8rem);
  line-height: .96;
}

.ecosystem-phase p:not(.panel-kicker) {
  color: rgba(238, 252, 255, .68);
  line-height: 1.7;
}

.ecosystem-phase .panel-kicker {
  color: #bff7fb;
  border-color: rgba(191, 239, 255, .18);
  background: rgba(255, 255, 255, .06);
  box-shadow: none;
}

.ecosystem-phase .tag-row span {
  color: #dffbff;
  border-color: rgba(191, 239, 255, .11);
  background: rgba(255, 255, 255, .065);
}

.phase-1 { --phase-start: 0%; }
.phase-2 { animation-name: phaseTwoScrub; }
.phase-3 { animation-name: phaseThreeScrub; }
.phase-4 { animation-name: phaseFourScrub; }

@keyframes phaseCopyScrub {
  0%,
  28% {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
    filter: blur(0);
  }

  42%,
  100% {
    opacity: 0;
    transform: translateY(-58%) translateX(-24px);
    filter: blur(8px);
  }
}

@keyframes phaseTwoScrub {
  0%,
  28% {
    opacity: 0;
    transform: translateY(-42%) translateX(24px);
    filter: blur(9px);
  }

  42%,
  58% {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
    filter: blur(0);
  }

  70%,
  100% {
    opacity: 0;
    transform: translateY(-58%) translateX(-24px);
    filter: blur(8px);
  }
}

@keyframes phaseThreeScrub {
  0%,
  55% {
    opacity: 0;
    transform: translateY(-42%) translateX(24px);
    filter: blur(9px);
  }

  68%,
  82% {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
    filter: blur(0);
  }

  94%,
  100% {
    opacity: 0;
    transform: translateY(-58%) translateX(-24px);
    filter: blur(8px);
  }
}

@keyframes phaseFourScrub {
  0%,
  78% {
    opacity: 0;
    transform: translateY(-42%) translateX(24px);
    filter: blur(9px);
  }

  92%,
  100% {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
    filter: blur(0);
  }
}

@supports not (animation-timeline: view()) {
  .pinned-ecosystem {
    min-height: auto;
  }

  .ecosystem-sticky {
    position: relative;
  }

  .ecosystem-copy,
  .ecosystem-stage,
  .ecosystem-sticky::after,
  .ecosystem-browser::before,
  .browser-nav,
  .website-build,
  .dashboard-build,
  .dash-chart i,
  .automation-network,
  .network-line,
  .data-pulse,
  .ecosystem-phase {
    animation: none;
  }

  .dashboard-build,
  .automation-network {
    opacity: 1;
  }

  .network-line {
    transform: scaleX(1);
  }

  .ecosystem-phase {
    position: relative;
    inset: auto;
    margin-bottom: 24px;
    opacity: 1;
    transform: none;
    filter: none;
  }
}

@media (max-width: 1080px) {
  .pinned-ecosystem {
    min-height: auto;
    background:
      linear-gradient(180deg, #f7fcff 0%, #071922 9%, #0a333c 88%, #f7fcff 100%);
  }

  .ecosystem-sticky {
    position: relative;
    min-height: auto;
    grid-template-columns: 1fr;
    padding: 72px 18px;
  }

  .ecosystem-copy {
    max-width: 760px;
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }

  .ecosystem-stage {
    min-height: 620px;
    animation: none;
    transform: none;
  }

  .ecosystem-browser {
    inset: 0;
  }

  .ecosystem-phases {
    min-height: auto;
    display: grid;
    gap: 16px;
  }

  .ecosystem-phase {
    position: relative;
    inset: auto;
    padding: 20px;
    border: 1px solid rgba(191, 239, 255, .12);
    border-radius: 24px;
    background: rgba(255, 255, 255, .055);
    opacity: 1;
    transform: none;
    filter: none;
    animation: none;
  }
}

@media (max-width: 720px) {
  .ecosystem-sticky {
    padding: 62px 12px;
  }

  .ecosystem-stage {
    min-height: 520px;
  }

  .browser-top {
    height: 48px;
    padding-inline: 16px;
  }

  .browser-nav {
    left: 8%;
    right: 8%;
    grid-template-columns: 1fr 1fr 1fr;
  }

  .browser-nav strong {
    display: none;
  }

  .website-build {
    left: 8%;
    right: 8%;
  }

  .website-hero-block {
    min-height: 130px;
  }

  .website-card-grid {
    grid-template-columns: 1fr;
  }

  .website-card-grid i {
    min-height: 54px;
  }

  .dashboard-build {
    inset: 22% 7% 9%;
    grid-template-columns: 1fr;
  }

  .dashboard-build aside {
    grid-template-columns: repeat(4, 1fr);
    padding: 10px;
  }

  .dashboard-build aside span {
    height: 30px;
  }

  .dash-metrics {
    grid-template-columns: 1fr;
  }

  .dash-metrics span {
    min-height: 42px;
  }

  .dash-chart {
    min-height: 118px;
  }

  .network-node {
    min-width: 78px;
    min-height: 38px;
    font-size: .72rem;
  }

  .node-website { left: 4%; top: 50%; }
  .node-lead { left: 18%; top: 13%; }
  .node-system { left: 38%; top: 48%; }
  .node-team { right: 6%; top: 20%; }
  .node-ai { right: 5%; bottom: 18%; }
  .node-customer { left: 12%; bottom: 10%; }

  .line-one { left: 17%; top: 52%; width: 28%; }
  .line-two { left: 44%; top: 51%; width: 28%; }
  .line-three { left: 44%; top: 54%; width: 38%; }
  .line-four { left: 24%; bottom: 17%; width: 28%; }
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(10px);
  animation: reveal .85s var(--ease) forwards;
  animation-timeline: view();
  animation-range: entry 0% cover 22%;
}

@keyframes reveal {
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@media (max-width: 1080px) {
  .nav-inner,
  .hero-section,
  .section-head,
  .service-panel,
  .project-row,
  .split,
  .agent-card,
  .support-card,
  .enquiry-grid,
  .footer {
    grid-template-columns: 1fr;
  }

  .enquiry-copy {
    position: static;
  }

  .nav-inner {
    display: flex;
    justify-content: space-between;
  }

  .nav-links {
    display: none;
  }

  .nav-cta {
    justify-self: auto;
  }

  .hero-section {
    min-height: auto;
  }

  .hero-visual {
    min-height: 620px;
  }

  .transform-grid,
  .why-grid {
    grid-template-columns: 1fr 1fr;
  }

  .process-line {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 720px) {
  .site-nav {
    padding: 10px 13px;
  }

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

  .site-nav .nav-cta {
    display: none;
  }

  .hero-section,
  .section,
  .footer {
    width: min(100% - 26px, var(--max));
  }

  .hero-section {
    padding: 44px 0 24px;
  }

  h1 {
    font-size: clamp(3.2rem, 18vw, 5rem);
    line-height: .9;
  }

  h2 {
    font-size: clamp(2.55rem, 14vw, 4rem);
    line-height: .92;
  }

  .hero-actions .nav-cta,
  .hero-actions .secondary-cta {
    width: 100%;
  }

  .hero-visual {
    min-height: 640px;
    margin-top: 8px;
  }

  .visual-orbit {
    inset: 4% 0 8%;
    transform: none;
    border-radius: 28px;
  }

  .website-window {
    width: 92%;
    left: 4%;
    top: 12%;
    min-height: 330px;
    transform: none;
  }

  .dashboard-window {
    width: 78%;
    right: 4%;
    top: 46%;
    min-height: 230px;
  }

  .workflow-window,
  .agent-window,
  .node-three {
    display: none;
  }

  .service-panel,
  .project-row,
  .agent-card,
  .dashboard-showcase {
    border-radius: 26px;
    padding: 16px;
  }

  .panel-copy {
    padding: 10px;
  }

  .service-visual,
  .project-mock {
    min-height: 310px;
  }

  .transform-grid,
  .why-grid,
  .process-line,
  .dashboard-top,
  .dashboard-bottom,
  .support-list,
  .project-form {
    grid-template-columns: 1fr;
  }

  .transform-step:not(:last-child)::after {
    right: 50%;
    top: auto;
    bottom: -12px;
    width: 2px;
    height: 22px;
  }

  .dashboard-showcase {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .dashboard-sidebar {
    grid-template-columns: repeat(4, 1fr);
  }

  .trust-bar {
    border-radius: 26px;
    justify-content: flex-start;
  }

  .project-link,
  .cta-actions .nav-cta,
  .cta-actions .secondary-cta {
    width: 100%;
  }

  .large-chart {
    min-height: 220px;
  }

  .footer {
    align-items: start;
  }
}

@media (max-width: 1080px) {
  .site-nav {
    top: 10px;
    width: min(100% - 22px, 760px);
  }

  .hero-section {
    text-align: left;
    place-items: stretch;
    padding-top: 72px;
  }

  .hero-label,
  .hero-copy .global-note,
  .hero-copy > p:not(.hero-label),
  h1 {
    margin-inline: 0;
  }

  .hero-actions {
    justify-content: flex-start;
  }

  .services-section .service-showcase {
    grid-template-columns: 1fr;
    grid-template-areas:
      "website"
      "dashboard"
      "workflow";
  }

  .bento-1,
  .bento-2,
  .bento-3 {
    min-height: auto;
  }

  .statement-head {
    min-height: auto;
  }

  .project-row,
  .project-row:nth-child(even) {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .project-row:nth-child(even) .project-meta,
  .project-row:nth-child(even) .project-mock {
    order: initial;
  }
}

@media (max-width: 720px) {
  .site-nav {
    border-radius: 22px;
  }

  .cinematic-dark {
    width: min(100% - 18px, 1320px);
    padding: 56px 14px;
    border-radius: 30px;
  }

  .hero-section {
    width: min(100% - 24px, 1320px);
  }

  .hero-label,
  .section-kicker,
  .panel-kicker {
    font-size: .76rem;
  }

  .hero-visual {
    min-height: 560px;
  }

  .motion-node {
    width: 52px;
    height: 52px;
    border-radius: 16px;
  }

  .node-one {
    left: 5%;
    top: 4%;
  }

  .node-two {
    right: 8%;
    top: 8%;
  }

  .service-panel,
  .project-row,
  .support-card,
  .project-form,
  .final-cta {
    border-radius: 28px;
  }

  .project-mock {
    min-height: 360px;
    border-radius: 24px;
  }

  .mock-screen {
    min-height: 260px;
  }

  .floating-chip {
    min-width: 76px;
    min-height: 38px;
  }
}

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

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

/* Final refinement: shorter scrollytelling homepage */
.hero-section {
  position: relative;
  margin-bottom: -9vh;
  padding-bottom: 16vh;
}

.hero-section::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: -1;
  width: min(1180px, 92vw);
  height: 34vh;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(180deg, rgba(62, 203, 193, .18), rgba(7, 25, 34, .92));
  filter: blur(18px);
  transform: translateX(-50%);
}

.pinned-ecosystem {
  margin-top: 0;
  min-height: 480vh;
  background:
    linear-gradient(180deg, rgba(7, 25, 34, .96) 0%, #071922 12%, #0a333c 78%, #eefbfc 100%);
}

.ecosystem-sticky {
  grid-template-columns: minmax(250px, .58fr) minmax(520px, 1.22fr) minmax(260px, .6fr);
  padding-top: clamp(76px, 8vw, 110px);
}

.ecosystem-capabilities {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 28px;
}

.ecosystem-capabilities span {
  padding: 8px 11px;
  border: 1px solid rgba(191, 239, 255, .12);
  border-radius: 999px;
  color: rgba(238, 252, 255, .78);
  background: rgba(255, 255, 255, .06);
  font-size: .76rem;
  font-weight: 900;
}

.phase-proof {
  padding: 14px 16px;
  border: 1px solid rgba(191, 239, 255, .12);
  border-radius: 18px;
  background: rgba(255, 255, 255, .055);
}

.global-moment {
  width: min(1320px, calc(100% - 32px));
  min-height: 86vh;
  margin: 0 auto;
  display: grid;
  place-items: center;
  padding: clamp(70px, 10vw, 130px) 0;
  color: var(--text);
  background:
    radial-gradient(circle at 18% 42%, rgba(191, 239, 255, .72), transparent 24%),
    radial-gradient(circle at 78% 48%, rgba(62, 203, 193, .16), transparent 28%);
}

.global-signal {
  width: min(1080px, 100%);
  display: grid;
  gap: 28px;
  text-align: center;
}

.global-signal .section-kicker {
  margin-inline: auto;
}

.global-signal h2 {
  max-width: 920px;
  margin-inline: auto;
}

.signal-map {
  min-height: 150px;
  display: grid;
  grid-template-columns: 1fr minmax(160px, 420px) 1fr;
  gap: 16px;
  align-items: center;
}

.signal-map span {
  min-height: 62px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(13, 143, 145, .14);
  border-radius: 999px;
  color: #267980;
  background: rgba(255, 255, 255, .72);
  box-shadow: var(--shadow-soft);
  font-weight: 950;
}

.signal-map i {
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary), var(--brand-primary));
  transform-origin: left center;
  animation: signalDraw 1s linear both;
  animation-timeline: view();
  animation-range: entry 20% cover 55%;
}

@keyframes signalDraw {
  from {
    transform: scaleX(.08);
    opacity: .35;
  }

  to {
    transform: scaleX(1);
    opacity: 1;
  }
}

.featured-editorial {
  width: min(1320px, calc(100% - 32px));
  margin: 0 auto;
  padding: clamp(74px, 10vw, 128px) 0;
}

.project-heading {
  min-height: clamp(220px, 30vw, 340px);
}

.editorial-project {
  view-timeline-name: --project-scroll;
  view-timeline-axis: block;
  animation: projectRevealScrub 1s linear both;
  animation-timeline: --project-scroll;
  animation-range: entry 0% cover 58%;
}

.editorial-project .project-mock {
  animation: projectMockEditorial 1s linear both;
  animation-timeline: --project-scroll;
  animation-range: entry 0% cover 76%;
}

.editorial-project .mock-screen {
  animation: projectScreenDepth 1s linear both;
  animation-timeline: --project-scroll;
  animation-range: entry 18% cover 80%;
}

.editorial-project .project-meta > p:nth-of-type(4),
.editorial-project .project-meta > p:nth-of-type(5) {
  animation: projectDetailsIn 1s linear both;
  animation-timeline: --project-scroll;
  animation-range: entry 38% cover 62%;
}

.editorial-project .tag-row,
.editorial-project .project-meta > p:last-of-type {
  animation: projectDetailsIn 1s linear both;
  animation-timeline: --project-scroll;
  animation-range: entry 58% cover 82%;
}

@keyframes projectRevealScrub {
  from {
    opacity: .82;
    transform: translateY(70px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes projectMockEditorial {
  0% {
    transform: perspective(1000px) rotateX(8deg) rotateY(-8deg) scale(.9);
  }

  50% {
    transform: perspective(1000px) rotateX(4deg) rotateY(-3deg) scale(.98);
  }

  100% {
    transform: perspective(1000px) rotateX(0) rotateY(0) scale(1);
  }
}

@keyframes projectScreenDepth {
  from {
    transform: rotate(-4deg) translateY(28px) scale(.92);
  }

  to {
    transform: rotate(0) translateY(-10px) scale(1);
  }
}

@keyframes projectDetailsIn {
  from {
    opacity: .18;
    transform: translateY(22px);
    filter: blur(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

.architecture-sequence {
  min-height: 360vh;
  padding: 0;
  view-timeline-name: --architecture-scroll;
  view-timeline-axis: block;
}

.architecture-sticky {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(280px, .78fr) minmax(500px, 1.22fr);
  gap: clamp(24px, 5vw, 70px);
  align-items: center;
  padding: clamp(86px, 9vw, 124px) clamp(20px, 5vw, 72px);
}

.architecture-copy {
  max-width: 620px;
}

.architecture-copy h2 {
  color: #fff;
}

.architecture-copy p:not(.section-kicker) {
  color: rgba(238, 252, 255, .68);
  line-height: 1.72;
}

.architecture-system {
  position: relative;
  min-height: min(72vh, 720px);
}

.arch-layer {
  position: absolute;
  width: min(300px, 42%);
  min-height: 132px;
  display: grid;
  gap: 8px;
  padding: 18px;
  border: 1px solid rgba(191, 239, 255, .11);
  border-radius: 24px;
  background: rgba(255, 255, 255, .055);
  opacity: .32;
  transform: scale(.96);
  animation: layerActivate 1s linear both;
  animation-timeline: --architecture-scroll;
}

.arch-layer span {
  color: var(--brand-secondary);
  font-weight: 950;
}

.arch-layer h3 {
  color: #fff;
  font-size: 1.4rem;
}

.arch-layer p {
  color: rgba(238, 252, 255, .62);
  font-size: .88rem;
  line-height: 1.55;
}

.arch-1 { left: 4%; top: 4%; }
.arch-2 { right: 4%; top: 27%; animation-name: layerTwoActivate; }
.arch-3 { left: 8%; bottom: 22%; animation-name: layerThreeActivate; }
.arch-4 { right: 0; bottom: 2%; animation-name: layerFourActivate; }

@keyframes layerActivate {
  0%,
  18% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 48px rgba(62, 203, 193, .16);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes layerTwoActivate {
  0%,
  22% {
    opacity: .32;
    transform: scale(.96);
  }

  34%,
  100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 48px rgba(62, 203, 193, .16);
  }
}

@keyframes layerThreeActivate {
  0%,
  48% {
    opacity: .32;
    transform: scale(.96);
  }

  60%,
  100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 48px rgba(62, 203, 193, .16);
  }
}

@keyframes layerFourActivate {
  0%,
  70% {
    opacity: .32;
    transform: scale(.96);
  }

  82%,
  100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 48px rgba(62, 203, 193, .16);
  }
}

.arch-path {
  position: absolute;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-primary), rgba(191, 239, 255, .54));
  transform: scaleX(0);
  transform-origin: left center;
  animation: archPathDraw 1s linear both;
  animation-timeline: --architecture-scroll;
}

.path-one { left: 31%; top: 26%; width: 36%; rotate: 18deg; }
.path-two { left: 30%; top: 54%; width: 36%; rotate: -22deg; animation-name: archPathTwoDraw; }
.path-three { left: 34%; bottom: 23%; width: 36%; rotate: 19deg; animation-name: archPathThreeDraw; }

@keyframes archPathDraw {
  0%,
  20% { transform: scaleX(0); }
  36%,
  100% { transform: scaleX(1); }
}

@keyframes archPathTwoDraw {
  0%,
  46% { transform: scaleX(0); }
  62%,
  100% { transform: scaleX(1); }
}

@keyframes archPathThreeDraw {
  0%,
  68% { transform: scaleX(0); }
  86%,
  100% { transform: scaleX(1); }
}

.arch-visual {
  position: absolute;
  width: 112px;
  height: 112px;
  border: 1px solid rgba(191, 239, 255, .12);
  border-radius: 28px;
  background: rgba(255, 255, 255, .06);
  opacity: .42;
  animation: visualActivate 1s linear both;
  animation-timeline: --architecture-scroll;
}

.visual-presence { left: 42%; top: 7%; }
.visual-conversion { right: 32%; top: 40%; animation-name: visualTwoActivate; }
.visual-systems { left: 43%; bottom: 25%; animation-name: visualThreeActivate; }
.visual-intelligence { right: 36%; bottom: 4%; animation-name: visualFourActivate; }

.arch-visual span,
.arch-visual i {
  position: absolute;
  border-radius: 999px;
  background: rgba(191, 239, 255, .22);
}

.arch-visual span:nth-child(1) { left: 18px; right: 18px; top: 22px; height: 12px; }
.arch-visual span:nth-child(2) { left: 18px; right: 34px; top: 48px; height: 12px; }
.arch-visual span:nth-child(3) { left: 18px; right: 50px; top: 74px; height: 12px; }
.arch-visual i:nth-child(1) { left: 20px; bottom: 18px; width: 16px; height: 54px; }
.arch-visual i:nth-child(2) { left: 48px; bottom: 18px; width: 16px; height: 74px; }
.arch-visual i:nth-child(3) { left: 76px; bottom: 18px; width: 16px; height: 38px; }

@keyframes visualActivate {
  0%,
  20% { opacity: .2; transform: scale(.86); }
  34%,
  100% { opacity: 1; transform: scale(1); }
}

@keyframes visualTwoActivate {
  0%,
  32% { opacity: .2; transform: scale(.86); }
  48%,
  100% { opacity: 1; transform: scale(1); }
}

@keyframes visualThreeActivate {
  0%,
  56% { opacity: .2; transform: scale(.86); }
  70%,
  100% { opacity: 1; transform: scale(1); }
}

@keyframes visualFourActivate {
  0%,
  76% { opacity: .2; transform: scale(.86); }
  92%,
  100% { opacity: 1; transform: scale(1); }
}

.process-journey {
  min-height: 220vh;
  padding: 0;
}

.process-sticky {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(280px, .75fr) minmax(440px, 1fr);
  gap: clamp(24px, 5vw, 70px);
  align-items: center;
  padding: clamp(86px, 9vw, 124px) clamp(20px, 5vw, 72px);
}

.process-statement strong {
  display: block;
  margin: 28px 0 18px;
  color: #fff;
  font-size: clamp(2rem, 4vw, 4.8rem);
  line-height: .94;
}

.process-statement p:not(.section-kicker) {
  color: rgba(238, 252, 255, .68);
  line-height: 1.7;
}

.process-path {
  position: relative;
  display: grid;
  gap: 16px;
}

.process-path > i {
  position: absolute;
  left: 24px;
  top: 20px;
  bottom: 20px;
  width: 2px;
  background: linear-gradient(180deg, var(--brand-primary), var(--brand-secondary));
  transform-origin: top center;
  animation: processLineDraw 1s linear both;
  animation-timeline: view();
  animation-range: entry 5% cover 70%;
}

@keyframes processLineDraw {
  from { transform: scaleY(.05); }
  to { transform: scaleY(1); }
}

.journey-step {
  min-height: auto;
  padding: 18px 18px 18px 58px;
  border-color: rgba(191, 239, 255, .12);
  background: rgba(255, 255, 255, .055);
  box-shadow: none;
}

.journey-step h3 {
  margin: 0 0 10px;
  color: #fff;
}

.journey-step p {
  color: rgba(238, 252, 255, .68);
}

.support-note {
  margin-top: 12px !important;
  color: #fff !important;
  font-weight: 900;
}

.compact-support {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}

.compact-support span {
  min-height: auto;
  padding: 10px 12px;
  border-radius: 14px;
  font-size: .78rem;
}

.why-proof,
.process-trust {
  grid-column: 1 / -1;
}

.why-proof {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: -18px;
}

.why-proof article {
  padding: 18px;
  border: 1px solid rgba(191, 239, 255, .1);
  border-radius: 22px;
  background: rgba(255, 255, 255, .045);
}

.why-proof h3 {
  color: #fff;
  font-size: 1rem;
  margin-bottom: 8px;
}

.why-proof p {
  color: rgba(238, 252, 255, .62);
  font-size: .82rem;
  line-height: 1.55;
}

.process-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  margin-top: 2px;
}

.process-trust span {
  padding: 8px 11px;
  border: 1px solid rgba(191, 239, 255, .11);
  border-radius: 999px;
  color: #dffbff;
  background: rgba(255, 255, 255, .055);
  font-size: .78rem;
  font-weight: 900;
}

@media (max-width: 1080px) {
  .hero-section {
    margin-bottom: 0;
    padding-bottom: 56px;
  }

  .ecosystem-sticky,
  .architecture-sticky,
  .process-sticky {
    position: relative;
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .architecture-sequence,
  .process-journey {
    min-height: auto;
  }

  .architecture-system {
    min-height: 820px;
  }

  .why-proof {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 720px) {
  .global-moment,
  .featured-editorial {
    width: min(100% - 24px, 1320px);
  }

  .signal-map,
  .why-proof,
  .compact-support {
    grid-template-columns: 1fr;
  }

  .signal-map i {
    width: 2px;
    height: 88px;
    justify-self: center;
    transform-origin: top center;
  }

  .architecture-system {
    min-height: 980px;
  }

  .arch-layer {
    position: relative;
    inset: auto !important;
    width: 100%;
    margin-bottom: 14px;
    opacity: 1;
    transform: none;
  }

  .arch-path,
  .arch-visual {
    display: none;
  }

  .process-sticky {
    padding-inline: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pinned-ecosystem,
  .architecture-sequence,
  .process-journey {
    min-height: auto;
  }

  .ecosystem-sticky,
  .architecture-sticky,
  .process-sticky {
    position: relative;
  }

  .ecosystem-copy,
  .ecosystem-stage,
  .ecosystem-sticky::after,
  .ecosystem-browser::before,
  .browser-nav,
  .website-build,
  .dashboard-build,
  .dash-chart i,
  .automation-network,
  .network-line,
  .data-pulse,
  .ecosystem-phase,
  .signal-map i,
  .editorial-project,
  .editorial-project .project-mock,
  .editorial-project .mock-screen,
  .editorial-project .project-meta > p,
  .editorial-project .tag-row,
  .arch-layer,
  .arch-path,
  .arch-visual,
  .process-path > i {
    animation: none !important;
    opacity: 1;
    transform: none;
    filter: none;
  }

  .network-line,
  .arch-path {
    transform: scaleX(1);
  }
}

/* Motion refinement: smoother scrubbed sequences with CSS fallback intact */
.has-gsap-motion .cinematic-dark,
.has-gsap-motion .cinematic-light,
.has-gsap-motion .ecosystem-copy,
.has-gsap-motion .ecosystem-stage,
.has-gsap-motion .ecosystem-sticky::after,
.has-gsap-motion .ecosystem-browser::before,
.has-gsap-motion .browser-nav,
.has-gsap-motion .website-build,
.has-gsap-motion .dashboard-build,
.has-gsap-motion .dash-chart i,
.has-gsap-motion .automation-network,
.has-gsap-motion .network-line,
.has-gsap-motion .data-pulse,
.has-gsap-motion .ecosystem-phase,
.has-gsap-motion .arch-layer,
.has-gsap-motion .arch-path,
.has-gsap-motion .arch-visual,
.has-gsap-motion .process-path > i {
  animation: none;
}

.has-gsap-motion .reveal {
  animation: none;
  opacity: 1;
  transform: none;
  filter: none;
}

.has-gsap-motion .dashboard-build,
.has-gsap-motion .automation-network,
.has-gsap-motion .network-line,
.has-gsap-motion .arch-path {
  transform: none;
}

.is-scrolled .site-nav {
  background: rgba(255, 255, 255, .84);
  box-shadow: 0 16px 48px rgba(18, 104, 124, .1);
  transform: translateY(4px);
}

.hero-section {
  min-height: calc(108vh - 76px);
}

.hero-label {
  display: none;
}

.hero-copy > p:not(.hero-label) {
  max-width: 590px;
}

.hero-visual,
.ecosystem-browser,
.dashboard-build,
.automation-network,
.ecosystem-phase,
.arch-layer,
.arch-visual,
.arch-path {
  will-change: transform, opacity;
}

.pinned-ecosystem {
  min-height: 330vh;
  margin-top: -5vh;
}

.ecosystem-copy h2 {
  max-width: 360px;
  font-size: clamp(2rem, 2.65vw, 3.25rem);
  line-height: 1.02;
  text-wrap: balance;
  overflow-wrap: normal;
}

.ecosystem-sticky {
  grid-template-columns: minmax(230px, .58fr) minmax(520px, 1.14fr) minmax(380px, .8fr);
  gap: clamp(20px, 3vw, 44px);
  padding-inline: clamp(22px, 4vw, 58px);
}

.ecosystem-copy > p:not(.section-kicker) {
  max-width: 440px;
  line-height: 1.55;
}

.ecosystem-capabilities span:nth-child(n+4) {
  display: none;
}

.ecosystem-stage {
  min-height: min(68vh, 700px);
}

.ecosystem-phases {
  min-height: min(62vh, 620px);
  align-self: center;
}

.ecosystem-phase {
  inset: 58% 0 auto;
  max-width: min(460px, 100%);
}

.ecosystem-phase h3 {
  max-width: 100%;
  font-size: clamp(1.65rem, 2.3vw, 2.75rem);
  line-height: 1.04;
  text-wrap: balance;
  overflow-wrap: normal;
}

.ecosystem-phase p:not(.panel-kicker) {
  max-width: 390px;
  line-height: 1.55;
}

.architecture-sequence {
  width: 100vw;
  max-width: none;
  min-height: 100vh;
  margin: 0 calc(50% - 50vw);
  border-inline: 0;
  border-radius: 0;
  animation: none;
  transform: none;
}

.architecture-sticky {
  position: relative;
  top: 0;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
  grid-template-columns: minmax(320px, .72fr) minmax(600px, 1.28fr);
  gap: clamp(32px, 4vw, 72px);
  padding: clamp(128px, 10vw, 156px) max(clamp(20px, 5vw, 72px), calc((100vw - 1320px) / 2 + 56px)) clamp(58px, 6vw, 88px);
}

.architecture-sequence > .architecture-sticky {
  position: relative;
}

.architecture-copy h2 {
  max-width: 720px;
  font-size: clamp(2.4rem, 4.25vw, 4.85rem);
  text-wrap: balance;
  overflow-wrap: normal;
}

.architecture-copy p:not(.section-kicker) {
  display: none;
}

.architecture-system::after {
  content: "WAJEHA ecosystem";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 148px;
  height: 148px;
  display: grid;
  place-items: center;
  padding: 18px;
  border: 1px solid rgba(191, 239, 255, .18);
  border-radius: 50%;
  color: #eaffff;
  background:
    radial-gradient(circle at 35% 25%, rgba(191, 239, 255, .22), transparent 42%),
    rgba(255, 255, 255, .06);
  box-shadow: 0 0 68px rgba(62, 203, 193, .16);
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: 0;
  z-index: 4;
}

.arch-layer {
  width: min(286px, 42%);
  min-height: 126px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .085);
  border-color: rgba(191, 239, 255, .2);
  opacity: .6;
  z-index: 3;
  will-change: opacity, transform, filter;
}

.arch-layer p {
  color: rgba(238, 252, 255, .78);
  line-height: 1.45;
}

.arch-1 { left: 1%; top: 8%; }
.arch-2 { right: 0; top: 20%; }
.arch-3 { left: 5%; bottom: 18%; }
.arch-4 { right: 2%; bottom: 2%; }

.arch-path {
  z-index: 2;
  opacity: .88;
}

.path-one { left: 30%; top: 25%; width: 38%; rotate: 15deg; }
.path-two { left: 30%; top: 54%; width: 38%; rotate: -18deg; }
.path-three { left: 33%; bottom: 27%; width: 38%; rotate: 16deg; }

.arch-visual {
  z-index: 1;
  will-change: opacity, transform, filter;
}

.process-journey {
  min-height: auto;
}

.process-sticky {
  position: relative;
  min-height: auto;
  grid-template-columns: 1fr;
  padding-block: clamp(96px, 10vw, 132px);
}

.process-statement {
  max-width: 820px;
}

.process-statement h2 {
  color: #fff;
  font-size: clamp(2.4rem, 5vw, 5.4rem);
}

.process-path {
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: clamp(30px, 5vw, 72px);
  padding: 30px 0 6px;
  background: transparent;
}

.process-path > i {
  left: 0;
  right: 0;
  top: 42px;
  bottom: auto;
  width: auto;
  height: 2px;
  transform: scaleX(.04);
  transform-origin: left center;
}

.journey-step {
  position: relative;
  min-height: 132px;
  padding: 70px 24px 0 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  transition: none;
}

.journey-step:hover {
  transform: none;
  box-shadow: none;
}

.journey-step::before {
  content: "";
  position: absolute;
  left: 0;
  top: 31px;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(191, 239, 255, .28);
  border-radius: 50%;
  background: #0a333c;
  box-shadow: 0 0 0 8px rgba(62, 203, 193, .08);
}

.journey-step h3 {
  font-size: clamp(1.45rem, 2.1vw, 2.2rem);
}

.enquiry-section {
  min-height: 92vh;
  padding-top: clamp(78px, 10vw, 140px);
  padding-bottom: clamp(78px, 10vw, 140px);
}

.enquiry-grid {
  min-height: auto;
}

.project-form {
  grid-template-columns: 1fr 1fr;
  border-radius: 28px;
}

.project-form .form-wide,
.form-submit {
  grid-column: 1 / -1;
}

@media (max-width: 1080px) {
  .pinned-ecosystem,
  .architecture-sequence {
    min-height: auto;
  }

  .architecture-sequence {
    width: min(100% - 24px, 1320px);
    max-width: 1320px;
    margin: clamp(26px, 5vw, 68px) auto;
    border: 1px solid rgba(191, 239, 255, .11);
    border-radius: clamp(28px, 4vw, 54px);
  }

  .ecosystem-sticky,
  .architecture-sticky {
    position: relative;
    height: auto;
    min-height: auto;
  }

  .architecture-sticky {
    grid-template-columns: 1fr;
    padding: clamp(72px, 9vw, 104px) clamp(18px, 5vw, 52px);
  }

  .architecture-system {
    display: grid;
    gap: 14px;
    min-height: auto;
  }

  .arch-layer {
    position: relative;
    inset: auto !important;
    width: 100%;
    opacity: 1 !important;
    transform: none !important;
  }

  .arch-path,
  .arch-visual,
  .architecture-system::after {
    display: none;
  }

  .process-path {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 0;
  }

  .process-path > i {
    display: none;
  }

  .journey-step {
    min-height: auto;
    padding: 22px;
    border: 1px solid rgba(191, 239, 255, .12);
    border-radius: 18px;
    background: rgba(255, 255, 255, .055);
  }

  .journey-step::before {
    display: none;
  }
}

@media (max-width: 720px) {
  .hero-section {
    min-height: auto;
    margin-bottom: 0;
  }

  .pinned-ecosystem {
    margin-top: 0;
  }

  .ecosystem-copy h2,
  .architecture-copy h2,
  .process-statement h2 {
    max-width: 100%;
    font-size: clamp(2.2rem, 12vw, 3.35rem);
    line-height: .98;
    text-wrap: balance;
  }

  .ecosystem-copy,
  .architecture-copy,
  .process-statement {
    max-width: 100%;
  }

  .ecosystem-capabilities span:nth-child(n+4) {
    display: inline-flex;
  }

  .architecture-system::after {
    display: none;
  }

  .process-path,
  .project-form {
    grid-template-columns: 1fr;
  }

  .enquiry-section {
    min-height: auto;
  }
}

/* Futuristic glass atmosphere pass */
body {
  background:
    radial-gradient(circle at 14% 8%, rgba(191, 239, 255, .36), transparent 26%),
    radial-gradient(circle at 82% 16%, rgba(62, 203, 193, .3), transparent 28%),
    linear-gradient(135deg, #061720 0%, #092833 34%, #0b4850 68%, #3ecbc1 140%);
  background-size: 160% 160%, auto, auto;
}

body::before {
  background-image:
    linear-gradient(rgba(191, 239, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(191, 239, 255, .055) 1px, transparent 1px);
  opacity: .86;
  mask-image: linear-gradient(180deg, #000 0 58%, transparent 94%);
}

body::after {
  height: 48vh;
  background: linear-gradient(90deg, transparent, rgba(62, 203, 193, .2), rgba(191, 239, 255, .34), rgba(13, 143, 145, .18), transparent);
  filter: blur(34px);
  opacity: .9;
}

.ambient-motion {
  z-index: -2;
}

.ambient-motion span {
  height: 180px;
  background: linear-gradient(90deg, rgba(62, 203, 193, .08), rgba(191, 239, 255, .28), rgba(255, 255, 255, .035));
  filter: blur(44px);
  opacity: .5;
  animation-duration: 28s;
}

.glass-shape {
  position: absolute;
  display: block;
  border: 1px solid rgba(191, 239, 255, .22);
  background:
    linear-gradient(140deg, rgba(255, 255, 255, .24), rgba(191, 239, 255, .08) 42%, rgba(62, 203, 193, .14)),
    radial-gradient(circle at 25% 20%, rgba(255, 255, 255, .5), transparent 24%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .32),
    0 28px 90px rgba(0, 20, 28, .22),
    0 0 80px rgba(62, 203, 193, .12);
  filter: blur(.1px);
  opacity: .42;
  transform-style: preserve-3d;
  animation: glassFloat 18s var(--ease) infinite;
}

.glass-shape-one {
  right: 5vw;
  top: 17vh;
  width: clamp(120px, 13vw, 230px);
  height: clamp(120px, 13vw, 230px);
  border-radius: 34% 66% 42% 58%;
  transform: rotateX(58deg) rotateZ(-18deg);
}

.glass-shape-two {
  left: 4vw;
  top: 54vh;
  width: clamp(160px, 19vw, 320px);
  height: clamp(72px, 9vw, 150px);
  border-radius: 999px;
  animation-delay: -7s;
  transform: rotateX(68deg) rotateZ(12deg);
}

.glass-shape-three {
  right: 18vw;
  bottom: 6vh;
  width: clamp(100px, 11vw, 190px);
  height: clamp(150px, 18vw, 310px);
  border-radius: 46% 54% 58% 42%;
  animation-delay: -12s;
  opacity: .3;
  transform: rotateX(52deg) rotateZ(24deg);
}

@keyframes glassFloat {
  0%,
  100% {
    translate: 0 0;
  }

  50% {
    translate: 0 -28px;
  }
}

.hero-section {
  isolation: isolate;
  color: #eefcff;
  background:
    radial-gradient(circle at 70% 22%, rgba(62, 203, 193, .22), transparent 28%),
    linear-gradient(145deg, rgba(6, 23, 32, .94), rgba(9, 45, 57, .82) 56%, rgba(62, 203, 193, .12));
  border-color: rgba(191, 239, 255, .12);
  box-shadow: 0 40px 140px rgba(0, 26, 34, .22);
}

.hero-copy > p:not(.hero-label),
.hero-copy .global-note {
  color: rgba(238, 252, 255, .76);
}

.visual-orbit {
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .26), transparent 22%),
    linear-gradient(145deg, rgba(191, 239, 255, .18), rgba(62, 203, 193, .12) 45%, rgba(4, 20, 30, .18));
  border: 1px solid rgba(191, 239, 255, .24);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .24),
    0 38px 120px rgba(0, 22, 30, .24),
    0 0 90px rgba(62, 203, 193, .16);
  backdrop-filter: blur(18px);
}

.mascot-orbit {
  position: absolute;
  right: clamp(2px, 3vw, 36px);
  bottom: clamp(18px, 5vw, 58px);
  z-index: 6;
  width: clamp(132px, 17vw, 248px);
  aspect-ratio: 1;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(191, 239, 255, .28);
  border-radius: 38px;
  background:
    radial-gradient(circle at 45% 8%, rgba(255, 255, 255, .5), transparent 28%),
    linear-gradient(150deg, rgba(191, 239, 255, .22), rgba(62, 203, 193, .1));
  box-shadow:
    0 30px 80px rgba(0, 18, 28, .34),
    0 0 54px rgba(62, 203, 193, .2);
  transform: rotate(-3deg);
  animation: mascotDrift 9s var(--ease) infinite;
}

.mascot-orbit::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, .28), transparent 36%, rgba(62, 203, 193, .14));
  mix-blend-mode: screen;
  pointer-events: none;
}

.mascot-orbit img {
  width: 118%;
  height: 118%;
  object-fit: cover;
  object-position: 50% 23%;
  transform: translate(-8%, -8%);
}

@keyframes mascotDrift {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-3deg);
  }

  50% {
    transform: translate3d(0, -14px, 0) rotate(1deg);
  }
}

.ui-window,
.ecosystem-browser,
.ecosystem-phase,
.arch-layer,
.project-form,
.enquiry-grid {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .13), rgba(191, 239, 255, .055) 48%, rgba(62, 203, 193, .09));
  border-color: rgba(191, 239, 255, .2);
  backdrop-filter: blur(20px);
}

.cinematic-dark,
.pinned-ecosystem,
.architecture-sequence,
.process-journey {
  background:
    radial-gradient(circle at 18% 18%, rgba(191, 239, 255, .15), transparent 25%),
    radial-gradient(circle at 78% 40%, rgba(62, 203, 193, .16), transparent 30%),
    linear-gradient(135deg, #061720 0%, #0a333c 58%, #0d6067 100%);
}

.architecture-sequence {
  overflow: hidden;
}

@media (max-width: 1080px) {
  .mascot-orbit {
    right: 4%;
    bottom: 6%;
    width: clamp(116px, 24vw, 190px);
    border-radius: 30px;
  }

  .glass-shape {
    opacity: .24;
  }
}

@media (max-width: 720px) {
  .hero-section {
    color: #eefcff;
    overflow: hidden;
  }

  .mascot-orbit {
    position: relative;
    right: auto;
    bottom: auto;
    justify-self: end;
    width: min(42vw, 160px);
    margin: -18px 8px 0 auto;
  }

  .glass-shape-two,
  .glass-shape-three {
    display: none;
  }
}

/* Professional atmosphere cleanup */
body {
  background:
    radial-gradient(circle at 12% 8%, rgba(191, 239, 255, .16), transparent 26%),
    radial-gradient(circle at 82% 18%, rgba(62, 203, 193, .18), transparent 30%),
    linear-gradient(180deg, #061720 0%, #08262f 32%, #0a333c 62%, #f4fbfd 100%);
}

body::before {
  opacity: .48;
  mask-image: linear-gradient(180deg, #000 0 62%, transparent 95%);
}

body::after {
  opacity: .32;
  filter: blur(52px);
}

.ambient-motion span {
  opacity: .28;
}

.glass-shape {
  opacity: .13;
  border-color: rgba(191, 239, 255, .14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .2),
    0 24px 80px rgba(0, 20, 28, .12);
}

.glass-shape-one {
  right: 8vw;
  top: 18vh;
}

.glass-shape-two {
  left: 0;
  top: 56vh;
}

.glass-shape-three {
  right: 14vw;
  bottom: 10vh;
  opacity: .1;
}

.hero-section {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  overflow: visible;
}

.hero-section::after {
  opacity: .38;
}

.hero-visual {
  filter: drop-shadow(0 34px 90px rgba(0, 18, 28, .2));
}

.visual-orbit {
  opacity: .82;
}

.ui-window,
.ecosystem-browser,
.ecosystem-phase,
.arch-layer,
.project-form {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .11), rgba(191, 239, 255, .045) 48%, rgba(62, 203, 193, .075));
  border-color: rgba(191, 239, 255, .16);
}

.pinned-ecosystem,
.architecture-sequence,
.process-journey {
  background:
    radial-gradient(circle at 22% 18%, rgba(191, 239, 255, .08), transparent 28%),
    radial-gradient(circle at 78% 42%, rgba(62, 203, 193, .1), transparent 34%),
    linear-gradient(135deg, #061720 0%, #082b35 58%, #0a333c 100%);
}

.enquiry-section {
  background:
    radial-gradient(circle at 16% 18%, rgba(255, 255, 255, .5), transparent 28%),
    radial-gradient(circle at 82% 8%, rgba(191, 239, 255, .36), transparent 26%),
    linear-gradient(135deg, #ecfbfc 0%, #d8f5f7 34%, #1aa5a1 100%);
  color: #061720;
}

.enquiry-grid {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.enquiry-copy h2 {
  color: #061720;
}

.enquiry-copy > p:not(.section-kicker) {
  color: rgba(6, 23, 32, .66);
}

.contact-mascot {
  position: relative;
  width: clamp(92px, 12vw, 150px);
  aspect-ratio: 1;
  margin: clamp(26px, 4vw, 46px) 0 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .48);
  border-radius: 28px;
  background:
    radial-gradient(circle at 42% 8%, rgba(255, 255, 255, .7), transparent 30%),
    linear-gradient(145deg, rgba(255, 255, 255, .42), rgba(62, 203, 193, .14));
  box-shadow:
    0 22px 54px rgba(6, 23, 32, .16),
    inset 0 1px 0 rgba(255, 255, 255, .42);
  animation: mascotDrift 9s var(--ease) infinite;
}

.contact-mascot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, .34), transparent 42%, rgba(62, 203, 193, .16));
  pointer-events: none;
}

.contact-mascot img {
  width: 124%;
  height: 124%;
  object-fit: cover;
  object-position: 50% 22%;
  transform: translate(-10%, -9%);
}

.project-form {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .68), rgba(239, 252, 255, .44));
  border-color: rgba(255, 255, 255, .64);
  box-shadow: 0 30px 90px rgba(6, 23, 32, .14);
}

.footer {
  margin-top: 0;
  padding: 42px clamp(20px, 5vw, 68px) 48px;
  color: #eaffff;
  background:
    radial-gradient(circle at 12% 0%, rgba(62, 203, 193, .18), transparent 28%),
    linear-gradient(135deg, #061720 0%, #082b35 58%, #0d6067 100%);
  border-top: 1px solid rgba(191, 239, 255, .16);
}

.footer-brand p,
.footer nav a,
.copyright {
  color: rgba(234, 255, 255, .76);
}

.footer nav a {
  font-weight: 800;
}

.footer nav a:hover {
  color: #ffffff;
}

@media (max-width: 1080px) {
  .hero-section {
    overflow: hidden;
  }

  .contact-mascot {
    width: clamp(88px, 16vw, 132px);
  }
}

@media (max-width: 720px) {
  body {
    background:
      radial-gradient(circle at 18% 7%, rgba(191, 239, 255, .18), transparent 28%),
      linear-gradient(180deg, #061720 0%, #08262f 42%, #0a333c 70%, #f4fbfd 100%);
  }

  .hero-section {
    overflow: hidden;
  }

  .glass-shape {
    opacity: .08;
  }

  .enquiry-grid {
    gap: 22px;
  }

  .contact-mascot {
    margin-top: 20px;
    width: 108px;
    border-radius: 24px;
  }

  .footer {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 22px;
  }

  .form-actions {
    grid-template-columns: 1fr;
  }

  .whatsapp-submit {
    width: 100%;
  }
}

/* Hero visual readability fix */
.hero-visual {
  isolation: isolate;
  min-height: clamp(520px, 52vw, 690px);
}

.visual-orbit {
  opacity: .55;
  filter: blur(.2px);
}

.hero-visual .ui-window {
  background:
    linear-gradient(145deg, rgba(238, 252, 255, .84), rgba(191, 239, 255, .42) 48%, rgba(16, 86, 94, .54));
  border-color: rgba(191, 239, 255, .38);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .36),
    0 28px 76px rgba(0, 18, 28, .28);
  backdrop-filter: blur(18px) saturate(1.15);
}

.hero-visual .website-window {
  z-index: 2;
  opacity: .9;
}

.hero-visual .dashboard-window {
  z-index: 5;
  right: 3%;
  top: 30%;
  width: 41%;
  background:
    linear-gradient(145deg, rgba(7, 31, 40, .88), rgba(16, 83, 91, .78) 58%, rgba(62, 203, 193, .22));
}

.hero-visual .workflow-window {
  z-index: 6;
  left: 8%;
  bottom: 6%;
  width: 43%;
  background:
    linear-gradient(145deg, rgba(8, 35, 44, .9), rgba(19, 92, 98, .74) 54%, rgba(191, 239, 255, .2));
}

.hero-visual .agent-window {
  z-index: 7;
  right: 5%;
  bottom: 0;
  width: 38%;
  min-height: 220px;
  background:
    linear-gradient(145deg, rgba(7, 29, 38, .93), rgba(17, 78, 86, .82) 58%, rgba(62, 203, 193, .2));
}

.hero-visual .window-top {
  color: rgba(234, 255, 255, .8);
  text-shadow: 0 1px 18px rgba(0, 18, 28, .24);
}

.hero-visual .website-window .window-top {
  color: rgba(6, 23, 32, .56);
}

.hero-visual .metric-row strong,
.hero-visual .agent-window p,
.hero-visual .agent-window h3 {
  color: #f4feff;
}

.hero-visual .metric-row small {
  color: #58d9cc;
}

.hero-visual .agent-window p {
  margin-bottom: 12px;
  color: rgba(234, 255, 255, .72);
}

.hero-visual .flow-mini span,
.hero-visual .agent-window li {
  min-height: 42px;
  display: flex;
  align-items: center;
  background: rgba(239, 252, 255, .9);
  border-color: rgba(255, 255, 255, .56);
  color: #173842;
  box-shadow: 0 10px 28px rgba(0, 18, 28, .12);
}

.hero-visual .bar-chart span {
  opacity: .9;
}

.hero-visual .motion-node {
  z-index: 9;
  color: #067a7c;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(225, 249, 252, .86));
  border-color: rgba(191, 239, 255, .62);
}

.hero-visual .node-three {
  left: 54%;
  bottom: -1%;
}

@media (max-width: 1080px) {
  .hero-visual {
    min-height: clamp(460px, 60vw, 610px);
  }

  .hero-visual .workflow-window {
    left: 4%;
    width: 46%;
  }

  .hero-visual .agent-window {
    right: 3%;
    width: 42%;
  }
}

@media (max-width: 720px) {
  .hero-visual {
    min-height: 560px;
  }

  .hero-visual .ui-window {
    transform: none !important;
    animation: none;
  }

  .hero-visual .website-window {
    left: 4%;
    top: 5%;
    width: 72%;
    min-height: 250px;
  }

  .hero-visual .dashboard-window {
    right: 2%;
    top: 30%;
    width: 58%;
    min-height: 220px;
  }

  .hero-visual .workflow-window {
    left: 3%;
    bottom: 8%;
    width: 56%;
    min-height: 210px;
  }

  .hero-visual .agent-window {
    right: 2%;
    bottom: 0;
    width: 54%;
    min-height: 190px;
  }

  .hero-visual .flow-mini span,
  .hero-visual .agent-window li {
    min-height: 36px;
    padding: 9px 10px 9px 28px;
    font-size: .76rem;
  }

  .hero-visual .metric-row strong {
    font-size: 1.24rem;
  }
}

/* Remove boxed service text panel */
.ecosystem-phases .ecosystem-phase {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.ecosystem-phases .ecosystem-phase > span {
  color: rgba(191, 239, 255, .9);
}

.ecosystem-phases .ecosystem-phase h3 {
  text-shadow: 0 18px 52px rgba(0, 18, 28, .34);
}

.ecosystem-phases .ecosystem-phase > p:not(.panel-kicker):not(.phase-proof) {
  max-width: 470px;
  color: rgba(234, 255, 255, .72);
}

.ecosystem-phases .ecosystem-phase .tag-row span,
.ecosystem-phases .ecosystem-phase .phase-proof {
  background: rgba(191, 239, 255, .1);
  border-color: rgba(191, 239, 255, .2);
}

/* Laravel form feedback */
.form-status,
.form-error {
  display: block;
  border-radius: 14px;
  font-family: var(--font-body);
  font-weight: 800;
}

.form-status {
  max-width: 520px;
  margin: 0 0 22px;
  padding: 14px 16px;
  color: #064d50;
  background: rgba(255, 255, 255, .62);
  border: 1px solid rgba(13, 143, 145, .16);
}

.form-error {
  margin-top: -2px;
  color: #8f1d1d;
  font-size: .78rem;
}

/* Contact-to-footer gradient blend */
.enquiry-section {
  width: 100vw;
  max-width: none;
  margin-inline: calc(50% - 50vw);
  padding: clamp(120px, 12vw, 180px) clamp(20px, 5vw, 68px) clamp(96px, 10vw, 150px);
  background:
    radial-gradient(circle at 18% 30%, rgba(255, 255, 255, .76), transparent 28%),
    radial-gradient(circle at 82% 18%, rgba(191, 239, 255, .48), transparent 24%),
    linear-gradient(180deg, #061720 0%, #0a333c 16%, #eafbfd 36%, #a9eceb 68%, #0a333c 100%);
  overflow: hidden;
}

.enquiry-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(6, 23, 32, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6, 23, 32, .055) 1px, transparent 1px);
  background-size: 84px 84px;
  opacity: .32;
  mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 74%, transparent 100%);
}

.enquiry-grid {
  position: relative;
  z-index: 1;
  width: min(1320px, 100%);
  margin-inline: auto;
  align-items: center;
}

.enquiry-copy {
  top: 126px;
}

.enquiry-copy h2 {
  max-width: 620px;
  color: #061720;
}

.enquiry-copy > p:not(.section-kicker) {
  max-width: 520px;
  color: rgba(6, 23, 32, .62);
}

.contact-mascot {
  background:
    radial-gradient(circle at 42% 8%, rgba(255, 255, 255, .82), transparent 30%),
    linear-gradient(145deg, rgba(255, 255, 255, .64), rgba(191, 239, 255, .24));
}

.project-form {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .82), rgba(239, 252, 255, .58));
  border-color: rgba(255, 255, 255, .72);
}

.footer {
  width: 100vw;
  max-width: none;
  margin-inline: calc(50% - 50vw);
  padding-inline: clamp(68px, 8vw, 142px);
  background:
    radial-gradient(circle at 12% 0%, rgba(62, 203, 193, .16), transparent 26%),
    linear-gradient(135deg, #061720 0%, #082b35 58%, #0a333c 100%);
}

@media (max-width: 900px) {
  .enquiry-section {
    padding-top: 108px;
    padding-bottom: 88px;
    background:
      radial-gradient(circle at 20% 28%, rgba(255, 255, 255, .72), transparent 34%),
      linear-gradient(180deg, #061720 0%, #0a333c 14%, #eafbfd 34%, #a9eceb 70%, #0a333c 100%);
  }

  .enquiry-grid {
    align-items: start;
  }

  .enquiry-copy {
    position: relative;
    top: auto;
  }

  .footer {
    padding-inline: clamp(22px, 7vw, 48px);
  }
}

@media (max-width: 720px) {
  .enquiry-section {
    padding-top: 96px;
  }

  .enquiry-copy h2 {
    font-size: clamp(2.7rem, 15vw, 4.8rem);
  }
}