:root {
  --ink: #111116;
  --muted: #6e6e76;
  --line: #dedee8;
  --soft: #f7f7fb;
  --purple: #767ff4;
  --blue: #6ca8ff;
  --white: #fff;
  --max: 1480px;
  --radius: 34px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html.show-intro,
html.show-intro body { overflow: hidden; }
body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: "DM Sans", sans-serif;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
.wrap { width: min(var(--max), 88vw); margin: auto; }

.site-intro {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  place-items: center;
  overflow: hidden;
  color: var(--ink);
  background: #fff;
}
.show-intro .site-intro { display: grid; }
.site-intro:before {
  content: "";
  position: absolute;
  width: min(58vw, 760px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(118,127,244,.13), rgba(118,127,244,0) 68%);
  transform: scale(.45);
  opacity: 0;
  animation: introAura 2.3s .15s cubic-bezier(.2,.75,.2,1) forwards;
}
.intro-brand {
  position: relative;
  display: grid;
  justify-items: center;
  z-index: 2;
}
.intro-word {
  display: flex;
  overflow: hidden;
  font: 600 clamp(56px, 12vw, 190px)/.82 "Manrope", sans-serif;
  letter-spacing: -.095em;
}
.intro-word span {
  display: block;
  opacity: 0;
  transform: translateY(115%) rotate(4deg);
  animation: introLetter .75s cubic-bezier(.16,1,.3,1) forwards;
}
.intro-word span:nth-child(1) { animation-delay: .2s; }
.intro-word span:nth-child(2) { animation-delay: .27s; }
.intro-word span:nth-child(3) { animation-delay: .34s; }
.intro-word span:nth-child(4) { animation-delay: .41s; }
.intro-word span:nth-child(5) { animation-delay: .48s; }
.intro-accent {
  width: 0;
  height: 5px;
  margin-top: 26px;
  background: var(--purple);
  animation: introLine .75s .72s cubic-bezier(.16,1,.3,1) forwards;
}
.intro-brand p {
  margin: 18px 0 0;
  text-transform: uppercase;
  letter-spacing: .72em;
  padding-left: .72em;
  font: 500 clamp(10px, 1.2vw, 17px) "Manrope";
  opacity: 0;
  animation: introFade .55s 1s ease forwards;
}
.intro-signature {
  position: absolute;
  bottom: 8vh;
  display: flex;
  align-items: center;
  gap: 16px;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 9px;
  opacity: 0;
  animation: introFade .55s 1.18s ease forwards;
}
.intro-signature i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--purple);
}
.intro-rule {
  position: absolute;
  left: 0;
  width: 0;
  height: 1px;
  background: rgba(17,17,22,.15);
  animation: introRule 1s .15s cubic-bezier(.16,1,.3,1) forwards;
}
.intro-rule-top { top: 6vh; }
.intro-rule-bottom { bottom: 6vh; animation-delay: .3s; }
.site-intro.is-leaving { animation: introExit .8s cubic-bezier(.76,0,.24,1) forwards; }

.cursor-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .72;
}
body > header,
body > .mobile-nav,
body > main,
body > footer {
  position: relative;
  z-index: 1;
}

.cursor-dot {
  position: fixed;
  z-index: 99;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--purple);
  pointer-events: none;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity .2s;
}

.nav-shell {
  height: 82px;
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 4vw;
  background: rgba(255,255,255,.76);
  backdrop-filter: blur(22px);
  border-bottom: 1px solid rgba(17,17,22,.08);
}
.brand-logo {
  width: max-content;
  display: flex;
  align-items: center;
  gap: 12px;
  font: 700 13px "Manrope", sans-serif;
  letter-spacing: -.02em;
}
.brand-logo img {
  width: 47px;
  height: 37px;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(17,17,22,.55));
}
.nav-shell nav { display: flex; gap: 34px; font-size: 12px; }
.nav-shell nav a { position: relative; }
.nav-shell nav a:after {
  content: "";
  position: absolute;
  height: 1px;
  width: 0;
  bottom: -6px;
  left: 0;
  background: var(--purple);
  transition: .25s;
}
.nav-shell nav a:hover:after { width: 100%; }
.nav-cta {
  justify-self: end;
  color: var(--ink);
  padding: 13px 18px;
  font-size: 12px;
  border: 1px solid rgba(17,17,22,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 14px 50px rgba(30,30,60,.06);
}
.nav-cta span, .text-link span { color: var(--purple); margin-left: 8px; }
.menu, .mobile-nav { display: none; }

.hero {
  min-height: 920px;
  height: 100svh;
  position: relative;
  margin-top: 82px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  width: min(var(--max), 88vw);
  margin-left: auto;
  margin-right: auto;
  gap: 6vw;
}
.hero-copy { position: relative; z-index: 2; }
.kicker, .section-tag {
  text-transform: uppercase;
  letter-spacing: .17em;
  font-size: 10px;
  font-weight: 600;
}
.kicker { display: flex; align-items: center; gap: 10px; }
.kicker span {
  display: block;
  width: 7px;
  height: 7px;
  background: var(--purple);
  border-radius: 50%;
}
.hero h1, .intro h2, .services-heading h2, .feature h2, .process h2, .why h2, .contact h2, .clients h2, .team h2, .faq h2 {
  font-family: "Manrope", sans-serif;
  font-weight: 500;
  letter-spacing: -.06em;
  margin: 0;
}
.hero h1 {
  font-size: clamp(64px, 8vw, 134px);
  line-height: .89;
  margin: 9vh 0 6vh;
}
.hero em, .intro em, .services-heading em, .feature em, .process em, .why em, .contact em, .team em {
  font-family: Georgia, serif;
  color: var(--purple);
  font-weight: 400;
}
.hero-foot { display: flex; align-items: flex-end; gap: 7vw; }
.hero-foot > p { max-width: 510px; font-size: 18px; line-height: 1.65; margin: 0; color: #4e4e58; }
.round-link {
  width: 94px;
  height: 94px;
  border-radius: 50%;
  border: 1px solid var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  transition: .3s;
}
.round-link b { color: var(--purple); font-size: 18px; }
.round-link:hover { background: var(--ink); color: #fff; transform: rotate(-8deg); }

.gravity-stage {
  position: relative;
  z-index: 2;
  min-height: 620px;
  perspective: 1200px;
}
.orbital {
  position: absolute;
  border: 1px solid rgba(118,127,244,.35);
  border-radius: 50%;
  animation: spinOrbit 26s linear infinite;
}
.orbital-one { inset: 6% 0 10% 6%; }
.orbital-two { inset: 18% 13% 20% 17%; animation-duration: 18s; animation-direction: reverse; }
.agent-panel {
  position: absolute;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(118,127,244,.20);
  border-radius: 28px;
  box-shadow: 0 30px 100px rgba(55,56,90,.14);
  backdrop-filter: blur(22px);
}
.panel-main {
  width: min(500px, 88vw);
  min-height: 430px;
  left: 8%;
  top: 12%;
  padding: 22px;
  transform: rotateY(-10deg) rotateX(4deg);
  animation: floatPanel 7s ease-in-out infinite;
}
.panel-top { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; }
.panel-top span { width: 9px; height: 9px; border-radius: 50%; background: #e9e9f2; }
.panel-top span:nth-child(2) { background: #d8dcff; }
.panel-top span:nth-child(3) { background: var(--purple); }
.panel-top b { margin-left: auto; font-weight: 600; color: var(--ink); }
.panel-hero-line {
  height: 145px;
  border-radius: 24px;
  margin: 28px 0;
  background:
    radial-gradient(circle at 28% 35%, rgba(118,127,244,.75), transparent 18%),
    radial-gradient(circle at 66% 55%, rgba(108,168,255,.58), transparent 20%),
    linear-gradient(135deg, #fbfbff, #eef0ff);
  position: relative;
  overflow: hidden;
}
.panel-hero-line:after {
  content: "";
  position: absolute;
  inset: -60%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.82), transparent);
  transform: rotate(18deg);
  animation: shimmer 4s linear infinite;
}
.panel-row {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px 12px;
  border-top: 1px solid rgba(17,17,22,.08);
}
.panel-row i { width: 9px; height: 9px; border-radius: 50%; background: var(--purple); }
.panel-row strong { font: 600 14px "Manrope"; }
.panel-row em { font-style: normal; color: var(--muted); font-size: 12px; }
.panel-float {
  padding: 20px;
  width: 210px;
  animation: floatPanel 6s ease-in-out infinite;
}
.panel-float small { color: var(--purple); text-transform: uppercase; letter-spacing: .14em; font-size: 9px; }
.panel-float strong { display: block; margin: 12px 0 6px; font: 600 22px "Manrope"; letter-spacing: -.04em; }
.panel-float span { color: var(--muted); font-size: 12px; }
.panel-float-one { right: 1%; top: 7%; animation-delay: -2s; }
.panel-float-two { right: 5%; bottom: 22%; animation-delay: -4s; }
.panel-float-three { left: 0; bottom: 8%; animation-delay: -1s; }

.intro, .capabilities, .clients, .team, .faq { padding: 145px 0; }
.intro {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 5vw;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.intro h2, .services-heading h2, .feature h2, .process h2, .why h2, .contact h2, .clients h2, .team h2, .faq h2 {
  font-size: clamp(46px, 5.8vw, 86px);
  line-height: 1;
}
.intro-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5vw;
  margin-top: 70px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.8;
}
.intro-columns p { margin: 0; }

.section-title-row { display: flex; justify-content: space-between; gap: 40px; }
.side-note { text-align: right; color: var(--muted); font-size: 12px; line-height: 1.6; margin: 0; }
.services-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin: 85px 0 70px;
}
.services-heading > span { font-size: 11px; text-transform: uppercase; letter-spacing: .15em; color: var(--muted); }
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); border-left: 1px solid var(--line); }
.service {
  min-height: 520px;
  padding: 35px;
  position: relative;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  transition: background .3s, color .3s, transform .3s, box-shadow .3s;
  background: rgba(255,255,255,.55);
  overflow: hidden;
  transform-style: preserve-3d;
}
.service:before { content: attr(data-number); font-size: 10px; color: var(--purple); margin-bottom: 32px; position: relative; z-index: 2; }
.service h3 { font: 500 clamp(25px, 2.4vw, 38px)/1.07 "Manrope", sans-serif; letter-spacing: -.04em; margin: 0 0 25px; }
.service p { color: var(--muted); line-height: 1.65; font-size: 13px; max-width: 370px; }
.service ul { list-style: none; padding: 0; margin: auto 0 0; font-size: 11px; line-height: 2; color: var(--muted); }
.service-mark { position: absolute; right: 25px; bottom: 20px; font: 700 52px "Manrope"; color: #eeeef1; transition: .3s; }
.service:hover { background: var(--ink); color: #fff; transform: translateY(-5px); box-shadow: 0 25px 70px rgba(17,17,22,.12); }
.service:hover p, .service:hover ul { color: #aaaab3; }
.service:hover .service-mark { color: var(--purple); }
.service h3, .service p, .service ul { position: relative; z-index: 2; }
.service-visual {
  height: 220px;
  border-radius: 26px;
  margin-bottom: 32px;
  position: relative;
  z-index: 1;
  overflow: hidden;
  background: linear-gradient(135deg, #fff, #f0f2ff);
  border: 1px solid rgba(118,127,244,.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.74);
  transition: transform .8s ease;
}
.service:hover .service-visual { transform: translateY(-6px) scale(1.02); }
.service-visual:after {
  content: "";
  position: absolute;
  inset: -60%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.84), transparent);
  transform: rotate(18deg);
  animation: shimmer 6s linear infinite;
  opacity: .12;
}
.media-visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1.005);
  filter: saturate(1.02) contrast(1.015);
  animation: mediaDrift 16s ease-in-out infinite alternate;
}
.service:hover .media-visual img { animation-duration: 6s; }
.media-visual > span {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 2;
  display: inline-flex;
  border-radius: 999px;
  padding: 10px 13px;
  color: #111116;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(255,255,255,.68);
  backdrop-filter: blur(14px);
  font: 700 10px "Manrope";
  letter-spacing: .08em;
  text-transform: uppercase;
}
.media-visual:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, transparent 38%, rgba(17,17,22,.45));
}
.media-tools {
  position: absolute;
  z-index: 3;
  right: 14px;
  top: 14px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  width: 190px;
}
.media-tools b {
  display: inline-flex;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(17,17,22,.78);
  color: #fff;
  font: 700 10px "Manrope";
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(14px);
  animation: toolPulse 4s ease-in-out infinite;
}
.media-tools b:nth-child(2) { animation-delay: -.8s; }
.media-tools b:nth-child(3) { animation-delay: -1.6s; }
.media-tools b:nth-child(4) { animation-delay: -2.4s; }
.service-featured .service-visual { height: 240px; }
.service-featured {
  grid-column: span 2;
  background:
    linear-gradient(135deg, rgba(17,17,22,.98), rgba(31,32,50,.96)),
    radial-gradient(circle at 20% 20%, rgba(118,127,244,.44), transparent 30rem);
  color: #fff;
}
.service-featured p, .service-featured ul { color: #c7c7d2; }
.service-featured .service-mark { color: rgba(118,127,244,.55); }
.service-featured:hover { background: #111116; }

.growth-lab {
  margin-top: 70px;
  border-radius: 46px;
  min-height: 560px;
  padding: 38px;
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: 5vw;
  align-items: center;
  background:
    radial-gradient(circle at 68% 34%, rgba(118,127,244,.22), transparent 24rem),
    linear-gradient(135deg, #fff, #f7f8ff);
  border: 1px solid rgba(118,127,244,.18);
  box-shadow: 0 30px 100px rgba(35,35,70,.08);
  overflow: hidden;
  position: relative;
}
.growth-lab:before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(118,127,244,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(118,127,244,.08) 1px, transparent 1px);
  background-size: 56px 56px;
  animation: gridSlide 18s linear infinite;
}
.growth-copy, .growth-orbit { position: relative; z-index: 1; }
.growth-copy h3 {
  font: 500 clamp(42px, 4.5vw, 76px)/.94 "Manrope";
  letter-spacing: -.06em;
  margin: 34px 0 28px;
}
.growth-copy p { color: var(--muted); line-height: 1.75; max-width: 460px; }
.growth-orbit {
  min-height: 480px;
  border-radius: 38px;
  background: rgba(255,255,255,.58);
  border: 1px solid rgba(118,127,244,.14);
  backdrop-filter: blur(18px);
  overflow: hidden;
}
.orbit-ring {
  position: absolute;
  width: 360px;
  height: 360px;
  border: 1px solid rgba(118,127,244,.32);
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  animation: spinOrbit 22s linear infinite;
}
.orbit-ring:before, .orbit-ring:after {
  content: "";
  position: absolute;
  inset: 56px;
  border: 1px solid rgba(118,127,244,.22);
  border-radius: 50%;
}
.orbit-ring:after { inset: 112px; }
.tool-node {
  position: absolute;
  padding: 16px 20px;
  border-radius: 999px;
  background: #111116;
  color: #fff;
  font: 700 13px "Manrope";
  box-shadow: 0 18px 60px rgba(17,17,22,.18);
  animation: nodeFloat 6s ease-in-out infinite;
}
.tool-node.meta { left: 10%; top: 20%; background: #1877f2; }
.tool-node.tiktok { right: 11%; top: 24%; background: #111116; animation-delay: -1s; }
.tool-node.seo { left: 15%; bottom: 23%; background: #18a058; animation-delay: -2s; }
.tool-node.funnel { right: 12%; bottom: 20%; background: var(--purple); animation-delay: -3s; }
.tool-node.content { left: 50%; top: 8%; transform: translateX(-50%); background: #ff6b6b; animation-delay: -4s; }
.metric-panel {
  position: absolute;
  width: min(360px, 82%);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 32px;
  padding: 28px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(118,127,244,.18);
  box-shadow: 0 24px 80px rgba(35,35,70,.11);
}
.metric-panel small { color: var(--purple); text-transform: uppercase; letter-spacing: .13em; font-size: 9px; }
.metric-panel strong { display: block; font: 700 28px "Manrope"; letter-spacing: -.05em; margin: 14px 0 22px; }
.metric-panel span {
  display: block;
  height: 12px;
  border-radius: 999px;
  background: rgba(118,127,244,.18);
  margin: 12px 0;
  overflow: hidden;
}
.metric-panel span:before {
  content: "";
  display: block;
  height: 100%;
  width: 72%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--purple), var(--blue));
  animation: metricGrow 3.6s ease-in-out infinite;
}
.metric-panel span:nth-child(4):before { width: 58%; animation-delay: -.8s; }
.metric-panel span:nth-child(5):before { width: 84%; animation-delay: -1.6s; }

.feature {
  padding: 120px 0 160px;
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 8vw;
  align-items: center;
}
.feature-copy .section-tag { margin-bottom: 55px; }
.feature-copy p { font-size: 15px; line-height: 1.8; color: var(--muted); margin: 38px 0; max-width: 470px; }
.text-link { font-size: 13px; border-bottom: 1px solid var(--ink); padding-bottom: 8px; }
.artifact-board {
  min-height: 520px;
  border-radius: 42px;
  border: 1px solid rgba(118,127,244,.18);
  background:
    linear-gradient(135deg, rgba(255,255,255,.84), rgba(246,247,255,.72)),
    radial-gradient(circle at 75% 20%, rgba(118,127,244,.28), transparent 22rem);
  box-shadow: 0 32px 110px rgba(35,35,70,.10);
  position: relative;
  overflow: hidden;
  padding: 30px;
}
.artifact-board:before { display: none; }
.artifact-card {
  position: relative;
  z-index: 1;
  width: 58%;
  padding: 24px;
  border-radius: 28px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(118,127,244,.16);
  box-shadow: 0 20px 70px rgba(30,30,60,.08);
  margin-left: auto;
  animation: floatPanel 7s ease-in-out infinite;
}
.artifact-card + .artifact-card { margin-top: 20px; margin-left: 0; animation-delay: -2s; }
.artifact-card.large { width: 74%; margin: 20px 0 26px; animation-delay: -4s; }
.artifact-card span { color: var(--purple); font-size: 11px; }
.artifact-card strong { display: block; font: 600 24px "Manrope"; letter-spacing: -.04em; margin: 12px 0; }
.artifact-card p { margin: 0; color: var(--muted); line-height: 1.65; font-size: 13px; }

.clients { border-top: 1px solid var(--line); }
.clients-head, .team-head {
  margin: 85px 0 60px;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 8vw;
  align-items: end;
}
.clients-head p { color: var(--muted); line-height: 1.75; margin: 0; max-width: 520px; }
.client-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.client-card {
  min-height: 470px;
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(118,127,244,.17);
  border-radius: 34px;
  padding: 14px 14px 28px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: .3s;
  box-shadow: 0 20px 70px rgba(35,35,70,.06);
}
.client-card:before {
  content: "";
  position: absolute;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  right: -90px;
  top: -90px;
  background: rgba(118,127,244,.13);
}
.client-logo-media {
  height: 210px;
  border-radius: 26px;
  overflow: hidden;
  background: #f8f9ff;
  border: 1px solid rgba(118,127,244,.16);
  box-shadow: 0 18px 50px rgba(35,35,70,.07);
  position: relative;
  z-index: 1;
}
.client-logo-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .8s ease;
}
.client-card:hover .client-logo-media img { transform: scale(1.04); }
.client-card h3 { font: 500 27px/1.05 "Manrope"; letter-spacing: -.04em; margin: 28px 14px 16px; position: relative; z-index: 1; }
.client-card p { color: var(--muted); font-size: 13px; line-height: 1.65; margin: 0 14px 30px; position: relative; z-index: 1; }
.client-card small { font-size: 11px; color: var(--purple); letter-spacing: .08em; text-transform: uppercase; margin: auto 14px 0; position: relative; z-index: 1; }
.client-card:hover { transform: translateY(-6px); border-color: rgba(118,127,244,.55); box-shadow: 0 25px 90px rgba(35,35,70,.11); }

.process { background: #111116; color: #fff; padding: 145px 0; }
.process-inner { display: grid; grid-template-columns: .85fr 1.15fr; gap: 10vw; }
.process-head .section-tag { color: #8e8e98; margin-bottom: 70px; }
.process-list { border-top: 1px solid #3a3a41; }
.process-list article { display: grid; grid-template-columns: 55px 1fr 1.4fr; gap: 20px; border-bottom: 1px solid #3a3a41; padding: 35px 0; }
.process-list span { color: var(--purple); font-size: 10px; }
.process-list h3 { margin: 0; font: 500 28px "Manrope"; }
.process-list p { margin: 0; color: #aaaab3; font-size: 13px; line-height: 1.65; }

.team { border-top: 1px solid var(--line); }
.team-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; align-items: stretch; }
.team-card {
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(118,127,244,.17);
  border-radius: 30px;
  padding: 14px 14px 24px;
  min-height: 610px;
  display: flex;
  flex-direction: column;
  transition: .3s;
  overflow: hidden;
}
.team-card:hover { transform: translateY(-6px); box-shadow: 0 22px 70px rgba(30,30,50,.09); }
.team-photo {
  height: 330px;
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(118,127,244,.16);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.8);
}
.team-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center bottom;
  transition: transform .8s ease;
}
.team-card:hover .team-photo img {
  transform: scale(1.045);
}
.team-card p { text-transform: uppercase; letter-spacing: .12em; color: var(--purple); font-size: 9px; margin: 24px 10px 14px; }
.team-card h3 { font: 500 24px/1.05 "Manrope"; letter-spacing: -.04em; margin: 0 10px 18px; }
.team-card span { color: var(--muted); font-size: 13px; line-height: 1.65; margin: 0 10px; }
.team-card a { margin: auto 10px 0; padding-top: 28px; font-size: 12px; color: var(--ink); text-decoration: underline; text-decoration-color: var(--purple); text-underline-offset: 6px; }
.team-card:nth-child(2) .team-photo img { object-position: center 68%; }

.why { padding: 145px 0; }
.why > h2 { margin: 75px 0 90px; }
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); }
.why-grid article { padding: 40px 5vw 0 0; }
.why-grid article + article { border-left: 1px solid var(--line); padding-left: 4vw; }
.why-grid strong { display: block; font: 500 56px "Manrope"; color: var(--purple); margin-bottom: 55px; }
.why-grid h3 { font: 500 22px "Manrope"; margin: 0 0 16px; }
.why-grid p { color: var(--muted); font-size: 13px; line-height: 1.7; max-width: 370px; }

.faq { border-top: 1px solid var(--line); }
.faq-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 8vw; margin-top: 80px; }
.faq-list { border-top: 1px solid var(--ink); }
.faq-list details { border-bottom: 1px solid var(--line); padding: 28px 0; }
.faq-list summary { cursor: pointer; font: 500 24px "Manrope"; letter-spacing: -.03em; list-style: none; display: flex; justify-content: space-between; gap: 30px; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:after { content: "+"; color: var(--purple); }
.faq-list details[open] summary:after { content: "−"; }
.faq-list p { color: var(--muted); font-size: 14px; line-height: 1.75; max-width: 690px; margin: 18px 0 0; }

.contact { background: var(--soft); position: relative; overflow: hidden; padding: 140px 0; }
.contact-orb { position: absolute; width: 600px; height: 600px; right: -150px; top: -220px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #fff 10%, rgba(118,127,244,.6), transparent 70%); filter: blur(4px); opacity: .55; }
.contact-inner { position: relative; display: grid; grid-template-columns: 1fr .8fr; gap: 10vw; }
.contact-copy .section-tag { margin-bottom: 65px; }
.contact-copy p { max-width: 500px; color: var(--muted); line-height: 1.7; margin: 35px 0; }
.contact-copy > a { display: inline-block; font-size: 22px; border-bottom: 1px solid var(--ink); padding-bottom: 8px; }
.contact-copy > a span { color: var(--purple); }
.contact-copy .social-link { display: block; width: max-content; margin-top: 18px; font-size: 17px; border-bottom: 1px solid var(--ink); padding-bottom: 8px; }
.contact-form { background: #fff; padding: 42px; box-shadow: 0 20px 70px rgba(40,40,60,.08); border-radius: 30px; }
.contact-form label { display: block; text-transform: uppercase; letter-spacing: .12em; font-size: 9px; margin-bottom: 25px; }
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; border: 0; border-bottom: 1px solid var(--line); padding: 13px 0; background: transparent; color: var(--ink); font: 14px "DM Sans"; outline: 0; border-radius: 0; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: var(--purple); }
.contact-form textarea { height: 80px; resize: vertical; }
.contact-form button { border: 0; background: var(--ink); color: #fff; padding: 15px 20px; font: 600 11px "DM Sans"; cursor: pointer; border-radius: 999px; }
.contact-form button span { color: var(--purple); margin-left: 20px; }
.contact-form button:disabled { opacity: .5; }
.form-status { font-size: 12px; margin: 18px 0 0; }

footer { padding: 80px 0 35px; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: start; gap: 30px; }
.footer-wordmark {
  grid-column: 1 / -1;
  font: 700 clamp(88px, 20vw, 310px)/.78 "Manrope", sans-serif;
  letter-spacing: -.12em;
  color: #111116;
  margin-bottom: 30px;
}
footer > p { color: var(--muted); font-size: 12px; }
footer > div:nth-child(3) { display: flex; gap: 25px; justify-content: flex-end; font-size: 12px; flex-wrap: wrap; }
footer small { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 25px; margin-top: 30px; color: var(--muted); }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .75s, transform .75s; }
.reveal.visible { opacity: 1; transform: none; }
.text-write .write-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(.35em);
  filter: blur(4px);
  transition:
    opacity .42s ease,
    transform .7s cubic-bezier(.16,1,.3,1),
    filter .55s ease;
  transition-delay: calc(var(--word-index) * 42ms);
}
.text-write.write-visible .write-word {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.delay-one { transition-delay: .12s; }
.delay-two { transition-delay: .22s; }

@keyframes introAura { 45%, 100% { opacity: 1; transform: scale(1); } }
@keyframes introLetter { to { opacity: 1; transform: translateY(0) rotate(0); } }
@keyframes introLine { to { width: min(32vw, 460px); } }
@keyframes introFade { to { opacity: 1; } }
@keyframes introRule { to { width: 100%; } }
@keyframes introExit { to { opacity: 0; transform: translateY(-100%); visibility: hidden; } }
@keyframes driftGlow { to { transform: translate3d(5vw, -3vh, 0) scale(1.12); } }
@keyframes gridSlide { to { background-position: 74px 74px; } }
@keyframes spinOrbit { to { transform: rotate(360deg); } }
@keyframes floatPanel { 50% { transform: translateY(-16px) rotateY(-4deg); } }
@keyframes shimmer { to { transform: translateX(150%) rotate(18deg); } }
@keyframes softBob { 50% { transform: translate3d(12px, -8px, 0) scale(1.04); } }
@keyframes toolPulse { 50% { transform: translateY(-5px); background: rgba(255,255,255,.20); } }
@keyframes nodeFloat { 50% { translate: 0 -14px; } }
@keyframes metricGrow { 50% { transform: translateX(12%); opacity: .82; } }
@keyframes mediaDrift { to { transform: scale(1.035) translate3d(.5%, -.5%, 0); } }
@media (max-width: 1100px) {
  .hero { grid-template-columns: 1fr; height: auto; padding: 90px 0 120px; }
  .gravity-stage { min-height: 540px; }
  .client-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .growth-lab { grid-template-columns: 1fr; }
  .service-featured { grid-column: span 2; }
}

@media (max-width: 900px) {
  .wrap { width: calc(100% - 40px); }
  .nav-shell { height: 72px; padding: 0 20px; grid-template-columns: 1fr auto; }
  .brand-logo img { width: 42px; height: 34px; }
  .brand-logo span { display: none; }
  .nav-shell nav, .nav-cta { display: none; }
  .menu { display: flex; border: 0; background: none; flex-direction: column; gap: 6px; padding: 10px; }
  .menu i { width: 23px; height: 1px; background: #111; transition: .25s; }
  .menu.active i:first-child { transform: translateY(3.5px) rotate(45deg); }
  .menu.active i:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .mobile-nav { position: fixed; z-index: 49; top: 72px; left: 0; right: 0; background: #fff; padding: 28px 20px 40px; flex-direction: column; gap: 20px; font: 500 25px "Manrope"; border-bottom: 1px solid var(--line); }
  .mobile-nav.open { display: flex; }
  .hero { margin-top: 72px; padding-top: 60px; min-height: auto; }
  .hero h1 { font-size: clamp(55px, 15vw, 86px); }
  .hero-foot { display: block; }
  .hero-foot > p { font-size: 16px; max-width: 390px; }
  .round-link { margin-top: 30px; width: 80px; height: 80px; }
  .intro, .feature, .process-inner, .contact-inner, .faq-layout, .clients-head, .team-head { grid-template-columns: 1fr; }
  .intro, .capabilities, .clients, .team, .faq { padding: 100px 0; }
  .intro-columns { grid-template-columns: 1fr; margin-top: 50px; gap: 20px; }
  .services-heading { display: block; margin: 60px 0 45px; }
  .services-heading > span { display: block; margin-top: 25px; }
  .service-grid { grid-template-columns: 1fr 1fr; }
  .service { min-height: 460px; }
  .growth-lab { padding: 24px; border-radius: 34px; }
  .growth-orbit { min-height: 420px; }
  .feature { padding: 70px 0 110px; gap: 60px; }
  .artifact-card, .artifact-card.large { width: 100%; }
  .process { padding: 100px 0; }
  .process-list article { grid-template-columns: 40px 1fr; }
  .process-list p { grid-column: 2; }
  .why { padding: 100px 0; }
  .why > h2 { margin: 60px 0; }
  .why-grid { grid-template-columns: 1fr; }
  .why-grid article, .why-grid article + article { border-left: 0; border-bottom: 1px solid var(--line); padding: 35px 0; }
  .why-grid strong { margin-bottom: 25px; }
  .contact { padding: 100px 0; }
  footer { grid-template-columns: 1fr 1fr; }
  footer > div:nth-child(3) { grid-column: 2; grid-row: 1; }
  .footer-wordmark { font-size: clamp(78px, 24vw, 170px); }
}

@media (max-width: 560px) {
  .intro-word { font-size: clamp(54px, 21vw, 92px); }
  .intro-accent { height: 4px; margin-top: 18px; }
  .intro-signature { gap: 10px; bottom: 9vh; letter-spacing: .12em; font-size: 8px; }
  .cursor-field { opacity: .25; }
  .service-grid, .client-grid, .team-grid { grid-template-columns: 1fr; }
  .service { min-height: 420px; }
  .service-visual { height: 210px; }
  .service-featured { grid-column: span 1; }
  .growth-visual { min-height: 128px; }
  .growth-lab { min-height: auto; }
  .tool-node { padding: 12px 14px; font-size: 11px; }
  .tool-node.meta { left: 5%; }
  .tool-node.tiktok { right: 5%; }
  .tool-node.seo { left: 7%; }
  .tool-node.funnel { right: 5%; }
  .metric-panel strong { font-size: 23px; }
  .section-title-row { display: block; }
  .side-note { text-align: left; margin-top: 24px; }
  .gravity-stage { min-height: 460px; }
  .panel-main { left: 0; width: 100%; }
  .panel-float { width: 180px; }
  .panel-float-one { right: -10px; }
  .panel-float-two { right: 0; bottom: 16%; }
  .panel-float-three { left: 0; bottom: 3%; }
  .contact-form { padding: 28px 22px; }
  .contact-copy > a { font-size: 16px; }
  footer { grid-template-columns: 1fr; }
  footer > div:nth-child(3) { grid-column: 1; grid-row: auto; justify-content: flex-start; }
  .footer-wordmark { font-size: clamp(68px, 25vw, 120px); letter-spacing: -.1em; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *:before, *:after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .cursor-dot { display: none; }
  .cursor-field { display: none; }
  .site-intro { display: none !important; }
  .text-write .write-word { opacity: 1; transform: none; filter: none; clip-path: none; }
}
.form-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Vorne launch transition */
.intro-logo-transition {
  position: relative;
  width: min(90vw, 980px);
  height: clamp(150px, 26vw, 300px);
  display: grid;
  place-items: center;
}
.intro-r {
  position: absolute;
  width: clamp(150px, 24vw, 330px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(.55) rotate(-8deg);
  animation:
    introRIn .8s .12s cubic-bezier(.16,1,.3,1) forwards,
    introRCompress .5s 1.18s cubic-bezier(.7,0,.2,1) forwards;
}
.intro-r img { width: 100%; height: 100%; object-fit: contain; }
.intro-morph {
  position: absolute;
  width: clamp(150px, 24vw, 330px);
  aspect-ratio: 1;
  opacity: 0;
  animation: morphVisibility 1.12s 1.12s linear forwards;
}
.intro-morph span {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform-origin: center;
}
.intro-morph img { width: 100%; height: 100%; object-fit: contain; }
.intro-morph span:nth-child(1) { clip-path: inset(8% 0 74% 0); animation: morphSliceOne .9s 1.18s cubic-bezier(.7,0,.2,1) forwards; }
.intro-morph span:nth-child(2) { clip-path: inset(26% 0 55% 0); animation: morphSliceTwo .95s 1.2s cubic-bezier(.7,0,.2,1) forwards; }
.intro-morph span:nth-child(3) { clip-path: inset(44% 0 36% 0); animation: morphSliceThree 1s 1.22s cubic-bezier(.7,0,.2,1) forwards; }
.intro-morph span:nth-child(4) { clip-path: inset(62% 0 18% 0); animation: morphSliceFour .95s 1.24s cubic-bezier(.7,0,.2,1) forwards; }
.intro-morph span:nth-child(5) { clip-path: inset(80% 0 0 0); animation: morphSliceFive .9s 1.26s cubic-bezier(.7,0,.2,1) forwards; }
.intro-beam {
  position: absolute;
  width: min(72vw, 720px);
  height: 2px;
  border-radius: 99px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, var(--purple) 18%, #aab0ff 52%, var(--purple) 82%, transparent);
  box-shadow: 0 0 16px rgba(118,127,244,.8), 0 0 48px rgba(118,127,244,.45);
  transform: scaleX(0);
  animation: introBeam 1.15s 1.24s cubic-bezier(.16,1,.3,1) forwards;
}
.intro-particles { position: absolute; width: min(74vw, 740px); height: 180px; pointer-events: none; }
.intro-particles i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  opacity: 0;
  background: var(--purple);
  box-shadow: 0 0 14px rgba(118,127,244,.7);
  animation: introParticle .9s cubic-bezier(.16,1,.3,1) forwards;
}
.intro-particles i:nth-child(1) { --px: -280px; --py: -68px; animation-delay: 1.38s; }
.intro-particles i:nth-child(2) { --px: -175px; --py: 76px; animation-delay: 1.46s; }
.intro-particles i:nth-child(3) { --px: -55px; --py: -42px; animation-delay: 1.5s; }
.intro-particles i:nth-child(4) { --px: 82px; --py: 64px; animation-delay: 1.43s; }
.intro-particles i:nth-child(5) { --px: 205px; --py: -72px; animation-delay: 1.52s; }
.intro-particles i:nth-child(6) { --px: 300px; --py: 35px; animation-delay: 1.47s; }
.intro-name {
  display: grid;
  justify-items: center;
  opacity: 0;
  transform: scaleX(.08);
  transform-origin: center;
  filter: blur(10px);
  animation: introNameIn .9s 1.68s cubic-bezier(.16,1,.3,1) forwards;
}
.intro-name strong {
  display: flex;
  font: 600 clamp(58px, 12vw, 185px)/.8 "Manrope", sans-serif;
  letter-spacing: -.105em;
}
.intro-name strong i {
  display: block;
  font-style: normal;
  opacity: 0;
  transform: translateX(var(--letter-entry, 0)) scaleX(.15);
  filter: blur(8px);
  animation: introNameLetter .72s cubic-bezier(.16,1,.3,1) forwards;
}
.intro-name strong i:nth-child(1) { --letter-entry: 150px; animation-delay: 1.7s; }
.intro-name strong i:nth-child(2) { --letter-entry: 72px; animation-delay: 1.76s; }
.intro-name strong i:nth-child(3) { --letter-entry: 0px; animation-delay: 1.82s; }
.intro-name strong i:nth-child(4) { --letter-entry: -72px; animation-delay: 1.88s; }
.intro-name strong i:nth-child(5) { --letter-entry: -150px; animation-delay: 1.94s; }
.intro-name small {
  margin-top: 30px;
  padding-left: .75em;
  text-transform: uppercase;
  letter-spacing: .75em;
  font: 500 clamp(10px, 1.2vw, 17px) "Manrope";
  opacity: 0;
  animation: introMediaIn .6s 2.28s ease forwards;
}
.intro-signature { animation-delay: 2.48s; }

/* SaaS motion showcase */
.saas-stage {
  position: relative;
  z-index: 2;
  min-height: 650px;
  perspective: 1300px;
}
.saas-aura {
  position: absolute;
  width: 520px;
  height: 520px;
  left: 50%;
  top: 48%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(118,127,244,.22), rgba(118,127,244,0) 67%);
  transform: translate(-50%, -50%);
  animation: saasAura 5s ease-in-out infinite;
}
.saas-dashboard {
  position: absolute;
  z-index: 2;
  width: min(610px, 92%);
  left: 4%;
  top: 9%;
  padding: 21px;
  border: 1px solid rgba(17,17,22,.12);
  border-radius: 30px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 38px 120px rgba(31,32,60,.16);
  backdrop-filter: blur(22px);
  transform: rotateY(-7deg) rotateX(3deg);
  animation: saasDashboard 7s ease-in-out infinite;
}
.saas-topbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 13px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(17,17,22,.08);
}
.saas-symbol {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  background: var(--ink);
  font: 700 15px "Manrope";
}
.saas-topbar small,
.saas-topbar strong { display: block; }
.saas-topbar small { color: var(--muted); font-size: 9px; }
.saas-topbar strong { margin-top: 3px; font: 600 13px "Manrope"; }
.saas-topbar > span {
  padding: 7px 10px;
  color: #168a53;
  background: #eaf9f1;
  border-radius: 99px;
  font-size: 9px;
}
.saas-topbar > span:before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 6px;
  border-radius: 50%;
  background: #1db66c;
  animation: livePulse 1.6s ease-in-out infinite;
}
.saas-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 17px 0;
}
.saas-metrics article {
  padding: 14px;
  border-radius: 17px;
  background: #f8f8fc;
  border: 1px solid rgba(17,17,22,.06);
}
.saas-metrics small { display: block; color: var(--muted); font-size: 9px; }
.saas-metrics strong { display: inline-block; margin-top: 8px; font: 650 22px "Manrope"; letter-spacing: -.05em; }
.saas-metrics em { margin-left: 6px; color: #168a53; font: 500 8px "DM Sans"; }
.saas-chart {
  padding: 16px 16px 8px;
  border-radius: 20px;
  background: linear-gradient(180deg, #fcfcff, #f5f6ff);
  border: 1px solid rgba(118,127,244,.12);
}
.chart-label { display: flex; justify-content: space-between; font-size: 9px; }
.chart-label span { font-weight: 600; }
.chart-label b { color: var(--muted); font-weight: 400; }
.saas-chart svg { display: block; width: 100%; height: 160px; overflow: visible; }
.chart-area { fill: url(#chartFill); }
.chart-line {
  fill: none;
  stroke: var(--purple);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 820;
  stroke-dashoffset: 820;
  animation: chartDraw 2.8s .4s ease-in-out infinite alternate;
}
.chart-point {
  fill: #fff;
  stroke: var(--purple);
  stroke-width: 4;
  animation: chartPoint 1.8s ease-in-out infinite;
}
.saas-flow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 16px;
  font-size: 9px;
  color: var(--muted);
}
.saas-flow span {
  padding: 7px 9px;
  border: 1px solid rgba(118,127,244,.18);
  border-radius: 99px;
  background: #fff;
}
.saas-flow i {
  flex: 1;
  height: 1px;
  overflow: hidden;
  background: rgba(118,127,244,.18);
}
.saas-flow i:after {
  content: "";
  display: block;
  width: 40%;
  height: 100%;
  background: var(--purple);
  animation: flowSignal 2.2s linear infinite;
}
.saas-float {
  position: absolute;
  z-index: 3;
  padding: 16px 18px;
  border: 1px solid rgba(17,17,22,.1);
  border-radius: 19px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 22px 70px rgba(31,32,60,.13);
  backdrop-filter: blur(18px);
  animation: saasFloat 5s ease-in-out infinite;
}
.saas-float small { color: var(--muted); font-size: 8px; }
.saas-float strong { display: block; margin-top: 5px; font: 600 14px "Manrope"; }
.saas-float-one {
  top: 5%;
  right: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  animation-delay: -.8s;
}
.pulse-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #20b970;
  box-shadow: 0 0 0 7px rgba(32,185,112,.13);
  animation: livePulse 1.6s ease-in-out infinite;
}
.saas-float-two { right: -1%; bottom: 13%; width: 180px; animation-delay: -2s; }
.mini-bars { height: 35px; display: flex; align-items: flex-end; gap: 5px; margin-top: 12px; }
.mini-bars i { flex: 1; border-radius: 4px 4px 1px 1px; background: rgba(118,127,244,.34); animation: barGrow 2s ease-in-out infinite alternate; }
.mini-bars i:nth-child(1) { height: 35%; }
.mini-bars i:nth-child(2) { height: 66%; animation-delay: -.4s; }
.mini-bars i:nth-child(3) { height: 48%; animation-delay: -.8s; }
.mini-bars i:nth-child(4) { height: 90%; background: var(--purple); animation-delay: -1.2s; }
.saas-float-three { left: -2%; bottom: 4%; animation-delay: -3.2s; }
.saas-float-three strong { color: var(--purple); font-size: 24px; }
.saas-float-three > span { color: var(--muted); font-size: 8px; }

@keyframes introRIn { to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes introRCompress { to { opacity: 0; transform: scaleX(2.2) scaleY(.08); filter: blur(5px); } }
@keyframes morphVisibility { 0%, 82% { opacity: 1; } 100% { opacity: 0; } }
@keyframes morphSliceOne { to { transform: translate(-220px,-34px) scaleX(2.6); opacity: 0; filter: blur(6px); } }
@keyframes morphSliceTwo { to { transform: translate(-112px,-16px) scaleX(3.2); opacity: 0; filter: blur(7px); } }
@keyframes morphSliceThree { to { transform: scaleX(4.3); opacity: 0; filter: blur(8px); } }
@keyframes morphSliceFour { to { transform: translate(112px,18px) scaleX(3.2); opacity: 0; filter: blur(7px); } }
@keyframes morphSliceFive { to { transform: translate(220px,38px) scaleX(2.6); opacity: 0; filter: blur(6px); } }
@keyframes introBeam {
  0% { opacity: 0; transform: scaleX(0); }
  25%, 74% { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1.18); }
}
@keyframes introParticle {
  0% { opacity: 0; transform: translate(0,0) scale(.4); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--px),var(--py)) scale(1.4); }
}
@keyframes introNameIn { to { opacity: 1; transform: scaleX(1); filter: blur(0); } }
@keyframes introNameLetter { to { opacity: 1; transform: translateX(0) scaleX(1); filter: blur(0); } }
@keyframes introMediaIn { to { opacity: 1; } }
@keyframes saasAura { 50% { transform: translate(-50%, -50%) scale(1.12); opacity: .65; } }
@keyframes saasDashboard { 50% { transform: rotateY(-3deg) rotateX(1deg) translateY(-9px); } }
@keyframes livePulse { 50% { opacity: .45; transform: scale(.72); } }
@keyframes chartDraw { to { stroke-dashoffset: 0; } }
@keyframes chartPoint { 50% { r: 9; opacity: .55; } }
@keyframes flowSignal { to { transform: translateX(250%); } }
@keyframes saasFloat { 50% { transform: translateY(-12px) rotate(1deg); } }
@keyframes barGrow { to { transform: scaleY(.65); transform-origin: bottom; } }

@media (max-width: 900px) {
  .saas-stage { min-height: 580px; }
  .saas-dashboard { left: 2%; width: 94%; }
}

@media (max-width: 560px) {
  .intro-logo-transition { height: 180px; }
  .intro-name strong { font-size: clamp(55px, 20vw, 88px); }
  .intro-name small { margin-top: 20px; }
  .saas-stage { min-height: 505px; }
  .saas-dashboard { top: 8%; padding: 14px; border-radius: 23px; transform: none; }
  .saas-metrics article { padding: 10px; }
  .saas-metrics strong { font-size: 17px; }
  .saas-chart svg { height: 120px; }
  .saas-flow span { padding: 5px 6px; font-size: 7px; }
  .saas-float-one { right: -6px; top: 1%; }
  .saas-float-two { right: -5px; bottom: 3%; width: 150px; }
  .saas-float-three { left: -5px; bottom: 1%; }
}

/* AI-first animated services */
.service-showcase {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.service-panel {
  position: relative;
  overflow: hidden;
  min-height: 520px;
  border: 1px solid rgba(17,17,22,.1);
  border-radius: 38px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 24px 80px rgba(30,31,60,.07);
  transform-style: preserve-3d;
}
.service-copy { position: relative; z-index: 3; padding: 44px; }
.service-index {
  color: var(--purple);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 9px;
  font-weight: 600;
}
.service-panel h3 {
  margin: 24px 0 20px;
  font: 500 clamp(36px, 4vw, 64px)/.95 "Manrope";
  letter-spacing: -.06em;
}
.service-panel p { color: var(--muted); max-width: 530px; line-height: 1.7; font-size: 14px; }
.service-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.service-tags span {
  padding: 9px 12px;
  border: 1px solid rgba(17,17,22,.1);
  border-radius: 99px;
  background: rgba(255,255,255,.65);
  font-size: 9px;
}
.service-ai {
  grid-column: 1 / -1;
  min-height: 620px;
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  align-items: center;
  color: #fff;
  background:
    radial-gradient(circle at 74% 45%, rgba(118,127,244,.38), transparent 25rem),
    linear-gradient(135deg, #111116, #202139);
}
.service-ai .service-copy { padding: 60px; }
.service-ai p { color: #c7c8d5; }
.service-ai .service-tags span {
  color: #fff;
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.07);
}
.automation-motion { position: relative; min-height: 560px; }
.automation-core {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  width: 145px;
  height: 145px;
  display: grid;
  place-content: center;
  text-align: center;
  border-radius: 50%;
  color: #111116;
  background: #fff;
  box-shadow: 0 0 0 18px rgba(118,127,244,.13), 0 30px 90px rgba(0,0,0,.28);
  transform: translate(-50%, -50%);
  animation: automationCore 3s ease-in-out infinite;
}
.automation-core span { font: 700 43px "Manrope"; letter-spacing: -.08em; }
.automation-core small { color: var(--purple); font-size: 8px; text-transform: uppercase; letter-spacing: .12em; }
.automation-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.ring-one { width: 310px; height: 310px; animation: serviceSpin 22s linear infinite; }
.ring-two { width: 450px; height: 450px; border-style: dashed; animation: serviceSpin 34s linear infinite reverse; }
.automation-node {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 99px;
  background: rgba(255,255,255,.09);
  backdrop-filter: blur(14px);
  font: 600 11px "Manrope";
  animation: automationNode 5s ease-in-out infinite;
}
.automation-node i { width: 7px; height: 7px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 18px var(--purple); }
.node-brief { left: 7%; top: 12%; }
.node-content { right: 7%; top: 10%; animation-delay: -1.2s; }
.node-leads { left: 4%; bottom: 12%; animation-delay: -2.4s; }
.node-report { right: 4%; bottom: 13%; animation-delay: -3.6s; }
.automation-motion svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.automation-motion svg path {
  fill: none;
  stroke: rgba(118,127,244,.65);
  stroke-width: 1.5;
  stroke-dasharray: 5 8;
  animation: automationPath 9s linear infinite;
}
.service-performance {
  min-height: 570px;
  display: grid;
  grid-template-columns: .86fr 1.14fr;
  align-items: center;
  background: linear-gradient(145deg, #f9f9ff, #fff);
}
.performance-motion {
  margin: 35px;
  padding: 26px;
  border-radius: 28px;
  background: #111116;
  color: #fff;
  box-shadow: 0 30px 90px rgba(17,17,22,.2);
}
.performance-top, .performance-foot { display: flex; justify-content: space-between; gap: 15px; }
.performance-top { color: #aaaab5; font-size: 9px; }
.performance-top b { color: #63dfa3; }
.performance-number { margin: 38px 0 25px; }
.performance-number strong { display: block; font: 600 70px/.8 "Manrope"; letter-spacing: -.08em; }
.performance-number small { display: block; margin-top: 14px; color: #aaaab5; }
.performance-bars { height: 145px; display: flex; align-items: flex-end; gap: 8px; }
.performance-bars i { flex: 1; border-radius: 6px 6px 2px 2px; background: linear-gradient(#9298ff, #626cf2); animation: performanceBars 2.8s ease-in-out infinite alternate; }
.performance-bars i:nth-child(1) { height: 22%; }
.performance-bars i:nth-child(2) { height: 40%; animation-delay: -.3s; }
.performance-bars i:nth-child(3) { height: 33%; animation-delay: -.6s; }
.performance-bars i:nth-child(4) { height: 58%; animation-delay: -.9s; }
.performance-bars i:nth-child(5) { height: 48%; animation-delay: -1.2s; }
.performance-bars i:nth-child(6) { height: 72%; animation-delay: -1.5s; }
.performance-bars i:nth-child(7) { height: 94%; animation-delay: -1.8s; }
.performance-foot { margin-top: 20px; color: #c7c7d0; font-size: 9px; }
.service-compact { min-height: 500px; padding: 16px 30px 34px; transition: transform .35s, box-shadow .35s; }
.service-compact:hover { transform: translateY(-8px); box-shadow: 0 34px 100px rgba(30,31,60,.13); }
.compact-media { position: relative; height: 240px; margin: 0 -14px 28px; border-radius: 28px; overflow: hidden; }
.compact-media:after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(17,17,22,.25)); }
.compact-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.16,1,.3,1); }
.service-compact:hover .compact-media img { transform: scale(1.08); }
.service-compact h3 { font-size: clamp(30px, 3vw, 46px); margin: 18px 0; }
.compact-orbit, .compact-browser, .compact-search, .compact-play { position: absolute; z-index: 2; }
.compact-orbit {
  right: 20px; top: 20px; width: 58px; height: 58px; border: 1px solid #fff; border-radius: 50%;
  box-shadow: inset 0 0 0 12px rgba(255,255,255,.2); animation: compactSpin 6s linear infinite;
}
.compact-browser { left: 18px; top: 18px; display: flex; gap: 5px; padding: 10px; border-radius: 99px; background: rgba(255,255,255,.82); }
.compact-browser i { width: 6px; height: 6px; border-radius: 50%; background: var(--purple); animation: livePulse 1.5s ease infinite; }
.compact-browser i:nth-child(2) { animation-delay: -.5s; }.compact-browser i:nth-child(3) { animation-delay: -1s; }
.compact-search, .compact-play { right: 18px; bottom: 18px; width: 47px; height: 47px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--purple); font-size: 18px; box-shadow: 0 12px 35px rgba(17,17,22,.12); animation: compactPulse 3s ease-in-out infinite; }

@keyframes automationCore { 50% { transform: translate(-50%, -50%) scale(1.06); } }
@keyframes serviceSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes compactSpin { to { transform: rotate(360deg); } }
@keyframes compactPulse { 50% { transform: scale(1.1); } }
@keyframes automationNode { 50% { transform: translateY(-10px); background: rgba(255,255,255,.15); } }
@keyframes automationPath { to { stroke-dashoffset: -130; } }
@keyframes performanceBars { to { transform: scaleY(.68); transform-origin: bottom; opacity: .7; } }

@media (max-width: 1050px) {
  .service-ai, .service-performance { grid-template-columns: 1fr; }
  .automation-motion { min-height: 500px; }
  .service-performance .service-copy { padding-bottom: 0; }
}
@media (max-width: 720px) {
  .service-showcase { grid-template-columns: 1fr; }
  .service-ai { grid-column: auto; }
  .service-copy, .service-ai .service-copy { padding: 32px 26px; }
  .service-panel { border-radius: 28px; }
  .automation-motion { min-height: 430px; }
  .ring-one { width: 230px; height: 230px; }
  .ring-two { width: 330px; height: 330px; }
  .automation-core { width: 115px; height: 115px; }
  .automation-core span { font-size: 34px; }
  .automation-node { padding: 10px 12px; font-size: 9px; }
  .performance-motion { margin: 20px; }
  .compact-media { height: 220px; }
}

/* Refined intact-logo transformation */
.intro-logo-transition:before,
.intro-logo-transition:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(118,127,244,.2);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.45);
  pointer-events: none;
}
.intro-logo-transition:before {
  width: clamp(210px, 29vw, 390px);
  height: clamp(210px, 29vw, 390px);
  animation: identityRipple 1.35s .35s cubic-bezier(.16,1,.3,1) forwards;
}
.intro-logo-transition:after {
  width: clamp(270px, 37vw, 500px);
  height: clamp(270px, 37vw, 500px);
  animation: identityRipple 1.5s .5s cubic-bezier(.16,1,.3,1) forwards;
}
.intro-r {
  z-index: 4;
  width: clamp(190px, 29vw, 390px);
  aspect-ratio: 418 / 336;
  margin-top: clamp(-56px, -4vw, -44px);
  opacity: 0;
  filter: drop-shadow(0 18px 35px rgba(35,35,70,.12));
  transform: scale(.58) rotate(-7deg);
  animation:
    identityMarkIn .86s .12s cubic-bezier(.16,1,.3,1) forwards,
    identityMarkSettle .9s 1.22s cubic-bezier(.16,1,.3,1) forwards;
}
.intro-name {
  z-index: 3;
  display: grid;
  justify-items: center;
  opacity: 1;
  transform: none;
  filter: none;
  animation: none;
}
.intro-name strong {
  display: grid;
  grid-template-columns: auto clamp(142px, 15vw, 205px) auto;
  align-items: center;
  font: 600 clamp(58px, 12vw, 185px)/.8 "Manrope", sans-serif;
  letter-spacing: -.105em;
}
.intro-left,
.intro-right {
  display: flex;
  opacity: 0;
  filter: blur(10px);
  will-change: transform, opacity, filter;
}
.intro-left {
  justify-self: end;
  transform: translateX(78px) scaleX(.55);
  transform-origin: right center;
  animation: identityLeftOpen .9s 1.35s cubic-bezier(.16,1,.3,1) forwards;
}
.intro-right {
  justify-self: start;
  transform: translateX(-78px) scaleX(.55);
  transform-origin: left center;
  animation: identityRightOpen .9s 1.35s cubic-bezier(.16,1,.3,1) forwards;
}
.intro-logo-space { width: 100%; height: 1px; }
.intro-name strong i,
.intro-name strong i:nth-child(1),
.intro-name strong i:nth-child(2),
.intro-name strong i:nth-child(3),
.intro-name strong i:nth-child(4),
.intro-name strong i:nth-child(5) {
  display: block;
  opacity: 1;
  font-style: normal;
  filter: none;
  transform: none;
  animation: none;
}
.intro-name small {
  display: block;
  position: relative;
  z-index: 6;
  margin-top: 38px;
  padding-left: .62em;
  color: var(--ink);
  letter-spacing: .62em;
  font-weight: 600;
  opacity: 0;
  transform: translateY(10px);
  animation: identityMediaIn .65s 2.05s cubic-bezier(.16,1,.3,1) forwards;
}
.intro-signature { animation-delay: 2.3s; }

@keyframes identityMarkIn {
  to { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes identityMarkSettle {
  from { opacity: 1; transform: scale(1) rotate(0); }
  to { opacity: 1; transform: scale(.49) rotate(0); filter: drop-shadow(0 8px 18px rgba(35,35,70,.1)); }
}
@keyframes identityLeftOpen {
  to { opacity: 1; transform: translateX(0) scaleX(1); filter: blur(0); }
}
@keyframes identityRightOpen {
  to { opacity: 1; transform: translateX(0) scaleX(1); filter: blur(0); }
}
@keyframes identityMediaIn {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes identityRipple {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.45); }
  30% { opacity: .7; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.2); }
}

@media (max-width: 560px) {
  .intro-name strong {
    grid-template-columns: auto clamp(92px, 25vw, 118px) auto;
    font-size: clamp(55px, 20vw, 88px);
  }
  .intro-r { width: clamp(175px, 49vw, 235px); margin-top: -40px; }
  .intro-name small { margin-top: 27px; letter-spacing: .48em; padding-left: .48em; }
}