/* =========================================================
   WIZZIOSOFT SOLUTIONS — PREMIUM LIGHT AGENCY HOMEPAGE
   ========================================================= */

:root {
  --navy: #121a55;
  --navy-2: #1a236c;
  --blue: #283890;
  --cyan: #12bde8;
  --cyan-2: #25abe1;
  --sky: #dff7ff;
  --ink: #11163c;
  --text: #4d5575;
  --muted: #7b839f;
  --line: rgba(18, 26, 85, 0.12);
  --line-light: rgba(255, 255, 255, 0.16);
  --paper: #f7f9ff;
  --paper-2: #eef3ff;
  --white: #ffffff;
  --lime: #d9ff56;
  --container: 1380px;
  --header-h: 86px;
  --ease: cubic-bezier(.2,.8,.2,1);
  --shadow: 0 30px 80px rgba(25, 42, 118, 0.12);
}

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

html {
  scroll-behavior: auto;
  overflow-x: clip;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "DM Sans", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

body.menu-open { overflow: hidden; }

::selection {
  color: var(--white);
  background: var(--blue);
}

a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { color: inherit; }
img { max-width: 100%; display: block; }
h1, h2, h3, p { margin-top: 0; }
ul { padding: 0; margin: 0; list-style: none; }

.container {
  width: min(calc(100% - 96px), var(--container));
  margin-inline: auto;
}

.section-pad { padding: 150px 0; }

.noise {
  position: fixed;
  inset: 0;
  z-index: 100;
  opacity: .025;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}

.scroll-progress {
  position: fixed;
  z-index: 120;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  pointer-events: none;
}
.scroll-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  transform: scaleX(0);
  transform-origin: left;
}

.page-loader {
  position: fixed;
  z-index: 9999;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--paper);
}
.loader-brand {
  display: grid;
  justify-items: center;
  gap: 22px;
  width: 220px;
}
.loader-brand img {
  width: 88px;
  max-height: 60px;
  object-fit: contain;
}
.loader-brand p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.loader-line {
  width: 100%;
  height: 2px;
  overflow: hidden;
  background: rgba(18, 26, 85, .1);
}
.loader-line span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--cyan);
  transform: translateX(-100%);
}

.cursor-dot,
.cursor-ring {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.cursor-dot {
  width: 7px;
  height: 7px;
  background: var(--blue);
}
.cursor-ring {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(40, 56, 144, .4);
  transition: width .25s var(--ease), height .25s var(--ease), background .25s var(--ease);
}
.cursor-ring.is-active {
  width: 74px;
  height: 74px;
  background: rgba(37, 171, 225, .12);
}
.cursor-ring::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--navy);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity .2s;
}
.cursor-ring.has-text::after { opacity: 1; }

.eyebrow,
.section-kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.section-kicker {
  margin-bottom: 40px;
}
.section-number {
  display: inline-grid;
  place-items: center;
  min-width: 33px;
  height: 24px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0;
}
.section-kicker.light { color: rgba(255,255,255,.72); }

.display-heading,
.section-title {
  margin: 0;
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  letter-spacing: -.055em;
  line-height: .98;
}
.display-heading { font-size: clamp(58px, 7vw, 112px); }
.section-title { font-size: clamp(52px, 6vw, 94px); }
.display-heading em,
.section-title em,
.contact-inner h2 em,
.hero-title em {
  color: var(--cyan-2);
  font-style: normal;
  font-weight: 500;
}
.section-title.light { color: var(--white); }

.title-line,
.split-line {
  display: block;
  overflow: hidden;
  padding-bottom: .16em;
  margin-bottom: -.08em;
}
.title-line > span,
.split-line > span {
  display: block;
}

.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  min-height: 58px;
  padding: 0 25px 0 29px;
  border: 1px solid transparent;
  border-radius: 999px;
  overflow: hidden;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.01em;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), color .3s var(--ease), background .3s var(--ease);
}
.button::before {
  content: "";
  position: absolute;
  left: -20%;
  bottom: -190%;
  width: 140%;
  height: 190%;
  border-radius: 50%;
  background: var(--cyan);
  transition: transform .55s var(--ease);
}
.button:hover::before { transform: translateY(-105%); }
.button span { position: relative; z-index: 1; }
.button-icon {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 17px;
  transition: transform .4s var(--ease), background .4s var(--ease);
}
.button:hover .button-icon { transform: rotate(45deg); }
.button-primary {
  color: var(--white);
  background: var(--navy-2);
  box-shadow: 0 15px 35px rgba(26, 35, 108, .18);
}
.button-primary .button-icon { background: rgba(255,255,255,.14); }
.button-primary:hover { box-shadow: 0 18px 40px rgba(18, 189, 232, .24); }
.button-small { min-height: 48px; padding-left: 22px; gap: 16px; }
.button-small .button-icon { width: 26px; height: 26px; }
.button-white {
  color: var(--navy);
  background: var(--white);
}
.button-white::before { background: var(--lime); }
.button-white .button-icon { background: rgba(18,26,85,.08); }
.button-outline {
  color: var(--navy);
  background: transparent;
  border-color: var(--line);
}
.button-outline::before { background: var(--navy); }
.button-outline:hover { color: var(--white); }
.button-large { min-height: 68px; padding-inline: 34px 27px; font-size: 15px; }

.text-link {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  font-weight: 700;
}
.link-line {
  width: 100%;
  height: 1px;
  background: var(--navy);
  transform-origin: right;
  transition: transform .45s var(--ease);
}
.text-link:hover .link-line { transform: scaleX(0); }

/* HEADER */
.site-header {
  position: fixed;
  z-index: 200;
  top: 16px;
  left: 0;
  width: 100%;
  pointer-events: none;
}
.header-shell {
  display: grid;
  grid-template-columns: 250px 1fr 250px;
  align-items: center;
  width: min(calc(100% - 48px), 1480px);
  min-height: 70px;
  margin: 0 auto;
  padding: 0 10px 0 24px;
  border: 1px solid transparent;
  border-radius: 18px;
  transition: background .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease), min-height .4s;
  pointer-events: auto;
}
.site-header.is-scrolled .header-shell {
  min-height: 66px;
  background: rgba(255,255,255,.86);
  border-color: rgba(18,26,85,.09);
  box-shadow: 0 15px 45px rgba(30,45,110,.1);
  backdrop-filter: blur(18px);
}
.brand { width: 194px; }
.brand img { width: 100%; max-height: 50px; object-fit: contain; object-position: left center; }
.desktop-nav {
  display: flex;
  justify-content: center;
  gap: clamp(22px, 3vw, 48px);
}
.desktop-nav a {
  position: relative;
  color: #313a61;
  font-size: 14px;
  font-weight: 600;
}
.desktop-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -7px;
  width: 100%;
  height: 2px;
  background: var(--cyan);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s var(--ease);
}
.desktop-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.header-shell > .button { justify-self: end; }
.menu-toggle {
  display: none;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--navy);
  cursor: pointer;
}
.menu-toggle span {
  display: block;
  width: 18px;
  height: 1px;
  margin: 5px auto;
  background: var(--white);
  transition: transform .3s, opacity .3s;
}
.menu-toggle.active span:first-child { transform: translateY(3px) rotate(45deg); }
.menu-toggle.active span:last-child { transform: translateY(-3px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  z-index: 190;
  inset: 0;
  visibility: hidden;
  color: var(--white);
  background: var(--navy);
  clip-path: circle(0 at calc(100% - 48px) 48px);
  transition: clip-path .8s var(--ease), visibility .8s;
}
.mobile-menu.open {
  visibility: visible;
  clip-path: circle(150% at calc(100% - 48px) 48px);
}
.mobile-menu-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: min(calc(100% - 48px), 700px);
  height: 100%;
  margin: auto;
}
.mobile-menu .eyebrow { color: rgba(255,255,255,.55); margin-bottom: 40px; }
.mobile-menu nav { display: grid; }
.mobile-menu nav a {
  display: flex;
  gap: 20px;
  align-items: baseline;
  padding: 15px 0;
  border-bottom: 1px solid rgba(255,255,255,.12);
  font-family: "Manrope", sans-serif;
  font-size: clamp(38px, 8vw, 70px);
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1;
}
.mobile-menu nav a span { width: 35px; color: var(--cyan); font: 11px "DM Sans", sans-serif; letter-spacing: .1em; }
.mobile-menu-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 45px;
  color: rgba(255,255,255,.65);
  font-size: 13px;
}

/* HERO */
.hero {
  position: relative;
  min-height: 100svh;
  padding-top: 175px;
  padding-bottom: 54px;
  overflow: hidden;
  background:
    radial-gradient(circle at 73% 40%, rgba(49, 201, 242, .11), transparent 33%),
    linear-gradient(180deg, #fbfcff 0%, #f2f6ff 100%);
}
.hero-grid-bg,
.testimonial-grid-bg {
  position: absolute;
  inset: 0;
  opacity: .35;
  background-image:
    linear-gradient(rgba(40,56,144,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(40,56,144,.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, transparent, black 20%, black 75%, transparent);
}
.hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  pointer-events: none;
}
.hero-glow-one {
  top: 12%;
  right: 10%;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(18,189,232,.2), transparent 68%);
}
.hero-glow-two {
  left: -200px;
  bottom: -280px;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(83,77,210,.11), transparent 65%);
}
.hero-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(480px, .92fr);
  align-items: center;
  gap: 52px;
}
.availability {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 30px;
  padding: 8px 13px;
  color: #485072;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(18,26,85,.09);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
}
.availability-pulse {
  position: relative;
  width: 7px;
  height: 7px;
  background: #22c681;
  border-radius: 50%;
}
.availability-pulse::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 1px solid #22c681;
  border-radius: 50%;
  animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100%{transform:scale(.7);opacity:.8} 70%{transform:scale(1.5);opacity:0} }

.hero-title {
  margin: 0;
  max-width: 830px;
  font-family: "Manrope", sans-serif;
  font-size: clamp(64px, 6.75vw, 118px);
  font-weight: 700;
  letter-spacing: -.065em;
  line-height: .92;
}
.hero-title em { position: relative; }
.hero-title em::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 0;
  bottom: 4px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  opacity: .28;
  transform: rotate(-2deg);
}
.hero-description {
  max-width: 640px;
  margin: 38px 0 0;
  color: var(--text);
  font-size: clamp(18px, 1.45vw, 21px);
  line-height: 1.65;
}
.hero-actions { display: flex; align-items: center; gap: 34px; margin-top: 38px; }
.hero-trust {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-top: 68px;
  color: var(--muted);
  font-size: 12px;
}
.hero-trust p { margin: 0; line-height: 1.45; }
.hero-trust > div { display: flex; gap: 18px; }
.hero-trust span {
  position: relative;
  color: var(--navy);
  font-weight: 700;
}
.hero-trust span + span::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 50%;
  width: 3px;
  height: 3px;
  background: var(--cyan);
  border-radius: 50%;
}

.hero-visual {
  position: relative;
  min-height: 620px;
  display: grid;
  place-items: center;
  perspective: 1200px;
}
.visual-stage {
  position: relative;
  z-index: 2;
  width: min(92%, 620px);
  aspect-ratio: 1.06 / 1;
  overflow: hidden;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(18,26,85,.12);
  border-radius: 30px;
  box-shadow: 0 45px 100px rgba(24,43,118,.18);
  transform: rotateY(-6deg) rotateX(3deg);
  backdrop-filter: blur(15px);
}
.stage-topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 55px;
  padding: 0 19px;
  color: #858da7;
  border-bottom: 1px solid rgba(18,26,85,.08);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
}
.stage-dots { display: flex; gap: 5px; }
.stage-dots i { width: 7px; height: 7px; border-radius: 50%; background: #dce1ef; }
.stage-status { justify-self: end; display: flex; align-items: center; gap: 6px; }
.stage-status i { width: 6px; height: 6px; background: #22c681; border-radius: 50%; }
.stage-content { display: grid; grid-template-columns: 70px 1fr; height: calc(100% - 55px); }
.stage-sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 25px 0 18px;
  border-right: 1px solid rgba(18,26,85,.08);
}
.stage-sidebar img { width: 37px; height: 28px; object-fit: contain; object-position: left; }
.sidebar-lines { display: grid; gap: 19px; margin-top: 55px; }
.sidebar-lines i { display:block; width: 22px; height: 2px; background: #d9dfed; }
.stage-sidebar > span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-top: auto;
  color: var(--white);
  background: var(--navy);
  border-radius: 50%;
  font-size: 11px;
}
.stage-main {
  position: relative;
  padding: 65px 45px 38px;
  overflow: hidden;
  background:
    radial-gradient(circle at 86% 16%, rgba(18,189,232,.18), transparent 29%),
    linear-gradient(145deg, #f8fbff, #eef3ff);
}
.mini-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--blue);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
}
.mini-label::before { content:""; width: 18px; height: 1px; background: var(--cyan); }
.stage-main h2 {
  position: relative;
  z-index: 2;
  margin: 18px 0 28px;
  color: var(--navy);
  font-family: "Manrope", sans-serif;
  font-size: clamp(42px, 4.3vw, 68px);
  letter-spacing: -.06em;
  line-height: .98;
}
.stage-main h2 span { color: var(--cyan); font-weight: 500; }
.stage-cta {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 24px;
  padding: 11px 13px 11px 18px;
  color: var(--white);
  background: var(--navy);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.stage-cta b {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  background: var(--cyan);
  border-radius: 50%;
  font-size: 13px;
}
.stage-wave {
  position: absolute;
  left: 25px;
  right: -40px;
  bottom: 25px;
  height: 180px;
  opacity: .28;
}
.stage-wave svg { width: 100%; height: 100%; overflow: visible; }
.stage-wave path { fill: none; stroke: var(--blue); stroke-width: 2; }
.stage-wave path + path { stroke: var(--cyan); }

.visual-orbit {
  position: absolute;
  border: 1px solid rgba(40,56,144,.14);
  border-radius: 50%;
}
.orbit-one { width: 680px; height: 680px; }
.orbit-two { width: 540px; height: 540px; transform: rotate(28deg); border-style: dashed; }
.orbit-three { width: 760px; height: 360px; transform: rotate(-18deg); border-color: rgba(18,189,232,.18); }
.visual-orbit::after {
  content: "";
  position: absolute;
  top: 8%;
  left: 20%;
  width: 9px;
  height: 9px;
  background: var(--cyan);
  border-radius: 50%;
  box-shadow: 0 0 0 8px rgba(18,189,232,.12);
}
.floating-card {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 17px 20px;
  background: rgba(255,255,255,.91);
  border: 1px solid rgba(18,26,85,.08);
  border-radius: 16px;
  box-shadow: 0 20px 45px rgba(26,35,108,.13);
  backdrop-filter: blur(15px);
}
.floating-card-one { left: -16px; bottom: 92px; }
.floating-card-two { right: -10px; top: 100px; }
.floating-card strong { display: block; color: var(--navy); font: 700 20px "Manrope",sans-serif; letter-spacing: -.04em; }
.floating-card p { margin: 0; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.floating-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: var(--white);
  background: var(--cyan);
  border-radius: 50%;
}
.dot-grid {
  width: 38px;
  height: 38px;
  background-image: radial-gradient(var(--blue) 1.2px, transparent 1.2px);
  background-size: 8px 8px;
}
.floating-badge {
  position: absolute;
  z-index: 4;
  right: 12px;
  bottom: 42px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 13px;
  color: var(--white);
  background: var(--blue);
  border-radius: 999px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .1em;
}
.floating-badge i { width: 3px; height: 3px; background: var(--cyan); border-radius:50%; }

.hero-bottom {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: end;
  margin-top: 20px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.scroll-mouse {
  display: grid;
  justify-items: center;
  width: 25px;
  height: 40px;
  padding-top: 7px;
  border: 1px solid rgba(18,26,85,.25);
  border-radius: 20px;
}
.scroll-mouse i {
  width: 3px;
  height: 7px;
  background: var(--blue);
  border-radius: 3px;
  animation: scrollMouse 1.8s infinite;
}
@keyframes scrollMouse { 0%{transform:translateY(0);opacity:0} 25%{opacity:1} 75%{opacity:1} 100%{transform:translateY(13px);opacity:0} }

/* MARQUEE */
.marquee-section {
  position: relative;
  z-index: 4;
  overflow: hidden;
  color: var(--white);
  background: var(--navy);
}
.marquee-track {
  display: flex;
  width: max-content;
  padding: 20px 0;
  animation: marquee 30s linear infinite;
}
.marquee-content { display: flex; align-items: center; }
.marquee-content span {
  padding: 0 28px;
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.02em;
}
.marquee-content i { width: 8px; height: 8px; background: var(--cyan); border-radius: 50%; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* INTRO */
.intro { background: var(--white); }
.intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(350px, .75fr);
  gap: 80px;
}
.intro-side { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; }
.large-copy {
  max-width: 560px;
  color: var(--text);
  font-size: clamp(20px, 1.7vw, 25px);
  line-height: 1.55;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 110px;
  border-top: 1px solid var(--line);
}
.stat-card {
  position: relative;
  min-height: 245px;
  padding: 38px 40px;
  border-right: 1px solid var(--line);
}
.stat-card:first-child { border-left: 1px solid var(--line); }
.stat-number {
  font-family: "Manrope", sans-serif;
  font-size: clamp(62px, 6vw, 90px);
  font-weight: 600;
  letter-spacing: -.07em;
  line-height: 1;
}
.stat-card sup {
  display: inline-block;
  margin-left: 10px;
  color: var(--cyan);
  font-family: "Manrope", sans-serif;
  font-size: clamp(30px, 2.5vw, 38px);
  font-weight: 600;
  line-height: 1;
}
.stat-card p { max-width: 260px; margin: 50px 0 0; color: var(--text); font-size: 14px; line-height: 1.5; }

/* SERVICES */
.services {
  background:
    radial-gradient(circle at 0 0, rgba(37,171,225,.08), transparent 25%),
    var(--paper);
}
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 60px;
  margin-bottom: 80px;
}
.section-head-side {
  max-width: 390px;
  padding-bottom: 8px;
}
.section-head-side p { margin-bottom: 30px; color: var(--text); }
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.service-card {
  position: relative;
  min-height: 515px;
  padding: 30px;
  overflow: hidden;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(18,26,85,.09);
  border-radius: 24px;
  transition: border-color .35s, box-shadow .35s;
  transform-style: preserve-3d;
}
.service-card:hover {
  border-color: rgba(37,171,225,.45);
  box-shadow: 0 30px 70px rgba(25,42,118,.1);
}
.service-card > a {
  position: absolute;
  z-index: 5;
  inset: 0;
}
.service-top { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; font-weight: 700; }
.service-arrow {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--navy);
  background: var(--paper-2);
  border-radius: 50%;
  font-size: 18px;
  transition: transform .45s var(--ease), color .3s, background .3s;
}
.service-card:hover .service-arrow { transform: rotate(45deg); color:var(--white); background:var(--cyan); }
.service-icon {
  position: relative;
  width: 116px;
  height: 116px;
  margin: 52px 0 45px;
  transform: translateZ(35px);
}
.service-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(40,56,144,.15);
  border-radius: 24px;
  transform: rotate(8deg);
}
.service-icon::after {
  content: "";
  position: absolute;
  inset: 11px;
  background: linear-gradient(135deg, var(--navy), var(--blue));
  border-radius: 19px;
  box-shadow: 0 15px 25px rgba(40,56,144,.2);
}
.service-icon i { position: absolute; z-index:2; display:block; }

.icon-web i:nth-child(1) { inset: 34px 27px 50px; border:2px solid var(--white); border-radius:4px; }
.icon-web i:nth-child(2) { left:35px; bottom:36px; width:47px; height:2px; background:var(--cyan); }
.icon-web i:nth-child(3) { left:43px; top:43px; width:27px; height:2px; background:var(--cyan); box-shadow:0 9px 0 rgba(255,255,255,.65); }

.icon-commerce i:nth-child(1) { left:31px; top:39px; width:54px; height:37px; border:2px solid var(--white); border-top:0; transform:skew(-8deg); }
.icon-commerce i:nth-child(2), .icon-commerce i:nth-child(3) { bottom:28px; width:8px; height:8px; background:var(--cyan); border-radius:50%; }
.icon-commerce i:nth-child(2){left:40px}.icon-commerce i:nth-child(3){right:31px}

.icon-app i:nth-child(1) { left:32px; top:28px; width:52px; height:61px; border:2px solid var(--white); border-radius:7px; }
.icon-app i:nth-child(2) { left:41px; top:41px; width:35px; height:7px; background:var(--cyan); border-radius:4px; }
.icon-app i:nth-child(3) { left:41px; top:59px; width:25px; height:3px; background:rgba(255,255,255,.7); box-shadow:0 9px 0 rgba(255,255,255,.7); }

.icon-brand i:nth-child(1) { left:30px; top:30px; width:57px; height:57px; border:2px solid var(--white); border-radius:50%; }
.icon-brand i:nth-child(2) { left:49px; top:49px; width:19px; height:19px; background:var(--cyan); border-radius:50%; }
.icon-brand i:nth-child(3) { left:58px; top:25px; width:2px; height:67px; background:rgba(255,255,255,.55); transform:rotate(45deg); }

.icon-growth i:nth-child(1) { left:31px; bottom:30px; width:55px; height:2px; background:rgba(255,255,255,.55); }
.icon-growth i:nth-child(2) { left:35px; bottom:35px; width:48px; height:39px; border-left:3px solid var(--cyan); border-top:3px solid var(--cyan); transform:skew(-28deg) rotate(34deg); }
.icon-growth i:nth-child(3) { right:26px; top:27px; width:11px; height:11px; border-top:2px solid var(--white); border-right:2px solid var(--white); transform:rotate(15deg); }

.service-card h3 {
  max-width: 310px;
  margin-bottom: 16px;
  font: 650 clamp(25px,2.15vw,34px)/1.1 "Manrope",sans-serif;
  letter-spacing: -.045em;
}
.service-card > p { max-width: 355px; color: var(--text); font-size: 15px; line-height: 1.6; }
.service-card ul { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 26px; }
.service-card li {
  padding: 6px 10px;
  color: #59617e;
  background: var(--paper-2);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .03em;
}
.service-cta-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--white);
  background: linear-gradient(145deg, var(--navy), #202e91);
}
.service-cta-card img {
  position: absolute;
  top: 55px;
  left: 50%;
  width: 210px;
  height: 120px;
  object-fit: contain;
  transform: translateX(-50%);
  filter: brightness(0) invert(1);
  opacity: .92;
}
.cta-card-orbit {
  position: absolute;
  top: -105px;
  left: 50%;
  width: 360px;
  height: 360px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%;
  transform: translateX(-50%);
}
.cta-card-orbit::before,
.cta-card-orbit::after {
  content:"";
  position:absolute;
  inset:45px;
  border:1px dashed rgba(18,189,232,.5);
  border-radius:50%;
}
.cta-card-orbit::after { inset:100px; border-style:solid; }
.service-cta-card > p { position:relative; z-index:1; color:rgba(255,255,255,.6); }
.service-cta-card h3 { position:relative; z-index:1; max-width:350px; font-size:35px; }
.service-cta-card .button { align-self:flex-start; margin-top:15px; }
.service-cta-card > a:last-child { position:relative; inset:auto; }

/* WORK */
.work { position:relative; overflow:hidden; background:var(--white); }
.work-heading-wrap { margin-bottom: 75px; }
.work-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:50px; }
.work-heading p { max-width:420px; margin:0 0 8px; color:var(--text); }
.work-track-wrap {
  min-height: calc(100svh - 96px);
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-left: max(48px, calc((100vw - var(--container))/2));
}
.work-track {
  display: flex;
  align-items: stretch;
  gap: 42px;
  width: max-content;
  height: min(760px, calc(100svh - 126px));
  padding-right: max(48px, calc((100vw - var(--container))/2));
}
.project-card {
  width: min(calc(100vw - 140px), 1380px);
  height: 100%;
  display: flex;
  flex-direction: column;
  flex: none;
}
.project-visual {
  position:relative;
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  padding: 55px 55px 0;
  overflow:hidden;
  border-radius:30px;
}
.project-one .project-visual { background:linear-gradient(135deg,#2d3c89,#20b9e5); }
.project-two .project-visual { background:linear-gradient(135deg,#f5d9bc,#c4a07e); }
.project-three .project-visual { background:linear-gradient(135deg,#e4e5ff,#b8c4ff); }
.project-four .project-visual { background:linear-gradient(135deg,#cfe3ec,#7798a8); }
.project-browser {
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.25);
  border-radius:20px 20px 0 0;
  box-shadow:0 40px 80px rgba(11,20,70,.25);
}
.browser-industrial { color:white; background:#101a43; }
.browser-bar { display:flex; align-items:center; gap:6px; height:43px; padding:0 17px; border-bottom:1px solid rgba(255,255,255,.1); font-size:9px; letter-spacing:.12em; }
.browser-bar i { width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.35); }
.browser-bar span { margin-left:auto; }
.industrial-screen { position:relative; height:calc(100% - 43px); padding:55px; overflow:hidden; background:
  radial-gradient(circle at 75% 55%,rgba(27,215,255,.3),transparent 25%),
  linear-gradient(120deg,#11193c,#1a2772); }
.industrial-nav { color:rgba(255,255,255,.55); font-size:8px; letter-spacing:.16em; }
.industrial-screen h3 { position:relative;z-index:2;margin:65px 0 0;font:650 clamp(48px,5vw,80px)/.95 "Manrope";letter-spacing:-.06em; }
.industrial-lines { position:absolute;left:0;right:0;bottom:50px;display:grid;gap:15px;transform:rotate(-7deg) scale(1.2); }
.industrial-lines i { height:1px;background:rgba(255,255,255,.15); }
.industrial-circle { position:absolute;right:8%;top:17%;display:grid;place-items:center;width:230px;height:230px;border:1px solid rgba(255,255,255,.2);border-radius:50%; }
.industrial-circle::before { content:"";position:absolute;inset:35px;border:1px dashed #24c4ea;border-radius:50%; }
.industrial-circle span { color:#31ccea;font-size:12px; }

.browser-commerce { background:#f6f0e9; color:#2c241d; }
.shop-top { display:flex;justify-content:space-between;align-items:center;height:60px;padding:0 30px;border-bottom:1px solid rgba(60,40,20,.12);font-size:10px; }
.shop-top span { font:700 16px "Manrope";letter-spacing:.15em; }
.shop-top div { color:#6e5c4e; }
.shop-hero { position:relative;z-index:2;padding:55px 55px; }
.shop-hero p { font-size:8px;letter-spacing:.2em; }
.shop-hero h3 { max-width:540px;margin:40px 0 30px;font:600 clamp(48px,5.3vw,84px)/.95 "Manrope";letter-spacing:-.065em; }
.shop-hero button { padding:12px 18px;border:0;border-radius:999px;color:white;background:#2d2723;font-size:10px; }
.knife-shape { position:absolute;right:-8%;bottom:-10%;width:65%;height:42%;background:linear-gradient(120deg,#aaa,#f9f9f9 45%,#898989);border-radius:100% 0 10% 100%;transform:rotate(-19deg);box-shadow:0 20px 40px rgba(55,35,20,.18); }
.knife-shape::after { content:"";position:absolute;right:-35%;top:10%;width:42%;height:78%;background:#513729;border-radius:0 20px 20px 0; }

.browser-saas { background:#f6f7ff; }
.saas-nav { display:flex;justify-content:space-between;align-items:center;height:58px;padding:0 27px;font-size:12px;font-weight:800; }
.saas-nav button { border:0;border-radius:999px;padding:9px 14px;color:white;background:#121a55;font-size:9px; }
.saas-copy { padding:35px 50px 0; }
.saas-copy > span { color:#5762a8;font-size:8px;letter-spacing:.18em; }
.saas-copy h3 { margin:20px 0;font:650 clamp(45px,5vw,78px)/.95 "Manrope";letter-spacing:-.065em; }
.saas-dashboard { position:absolute;right:5%;bottom:-5%;display:grid;grid-template-columns:60px 1fr;width:62%;height:48%;overflow:hidden;background:white;border:1px solid #dfe4ff;border-radius:15px;box-shadow:0 25px 60px rgba(50,70,160,.18); }
.dash-side { display:grid;align-content:start;gap:18px;padding:22px;border-right:1px solid #e8ebff; }
.dash-side i { width:16px;height:3px;background:#c9d0ef;border-radius:2px; }
.dash-main { padding:23px; }
.dash-stat { display:flex;justify-content:space-between;align-items:end; }
.dash-stat b { font:700 25px "Manrope"; }
.dash-stat span { color:#8790b5;font-size:8px; }
.dash-chart { position:relative;height:85px;margin-top:25px;background:linear-gradient(to top,rgba(69,107,235,.12),transparent);border-bottom:1px solid #dfe4ff;clip-path:polygon(0 80%,12% 62%,26% 71%,39% 30%,52% 47%,67% 18%,81% 36%,100% 0,100% 100%,0 100%); }
.dash-chart i { position:absolute;inset:0;background:#536de8;opacity:.8;clip-path:polygon(0 80%,12% 62%,26% 71%,39% 30%,52% 47%,67% 18%,81% 36%,100% 0,100% 4%,81% 40%,67% 22%,52% 51%,39% 34%,26% 75%,12% 66%,0 84%); }

.browser-property { color:white;background:#7895a3; }
.property-nav { position:absolute;z-index:3;top:0;left:0;right:0;display:flex;justify-content:space-between;padding:25px 30px;font-size:10px;letter-spacing:.13em; }
.property-nav i { font-style:normal; }
.property-image { position:absolute;inset:0;overflow:hidden;background:linear-gradient(#b8d4e1 0 45%,#6f8790 45%); }
.property-sky::before { content:"";position:absolute;top:13%;left:8%;width:130px;height:55px;background:rgba(255,255,255,.35);border-radius:50%;filter:blur(18px); }
.property-building { position:absolute;right:7%;bottom:0;width:66%;height:68%;background:linear-gradient(90deg,#384d55,#82969c);clip-path:polygon(15% 10%,100% 0,100% 100%,0 100%,0 23%); }
.property-building i { position:relative;display:inline-block;width:16%;height:22%;margin:12% 3% 0 4%;background:linear-gradient(#bdd7df,#77929d);border:4px solid #3f555e; }
.property-building i:nth-child(n+4) { margin-top:6%; }
.property-caption { position:absolute;z-index:2;left:50px;bottom:45px; }
.property-caption p { font-size:8px;letter-spacing:.18em; }
.property-caption h3 { margin:8px 0 0;font:600 clamp(42px,4.2vw,66px)/1 "Manrope";letter-spacing:-.05em; }

.project-info { display:grid;grid-template-columns:1.15fr 1fr auto;align-items:center;gap:25px;padding:27px 4px 0; }
.project-info p { margin:0 0 4px;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.1em; }
.project-info h3 { margin:0;font:650 25px "Manrope";letter-spacing:-.04em; }
.project-tags { display:flex;flex-wrap:wrap;gap:7px; }
.project-tags span { padding:6px 10px;background:var(--paper-2);border-radius:999px;color:#606887;font-size:10px; }
.project-info > a { display:grid;place-items:center;width:48px;height:48px;border:1px solid var(--line);border-radius:50%;font-size:20px;transition:.3s; }
.project-info > a:hover { transform:rotate(45deg);color:white;background:var(--cyan);border-color:var(--cyan); }
.work-mobile-cta { margin-top:70px;text-align:center; }

/* DIFFERENCE */
.difference { position:relative;overflow:visible;color:white;background:var(--navy); }
.difference::before { content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:70px 70px;mask-image:linear-gradient(90deg,transparent,black); }
.difference-orb { position:absolute;border-radius:50%;filter:blur(2px); }
.orb-a { width:600px;height:600px;left:-300px;top:20%;background:radial-gradient(circle,rgba(18,189,232,.17),transparent 68%); }
.orb-b { width:500px;height:500px;right:-250px;bottom:-200px;background:radial-gradient(circle,rgba(91,87,238,.25),transparent 65%); }
.difference-grid { position:relative;z-index:2;display:grid;grid-template-columns:.78fr 1fr;align-items:start;gap:120px; }
.difference-sticky {
  position: sticky;
  top: calc(var(--header-h) + 32px);
  align-self: start;
  height: max-content;
}
.difference-sticky > p { max-width:500px;margin:40px 0;color:rgba(255,255,255,.62);font-size:18px; }
.difference-list { border-top:1px solid var(--line-light); }
.difference-item { display:grid;grid-template-columns:80px 1fr;gap:25px;padding:48px 0;border-bottom:1px solid var(--line-light); }
.difference-item > span { color:var(--cyan);font-size:11px;letter-spacing:.12em; }
.difference-item h3 { margin:0 0 13px;font:600 clamp(28px,3vw,45px)/1.05 "Manrope";letter-spacing:-.04em; }
.difference-item p { max-width:540px;margin:0;color:rgba(255,255,255,.58); }

/* PROCESS */
.process { background:var(--paper); }
.process-header { display:flex;justify-content:space-between;align-items:flex-end;gap:60px;margin-bottom:80px; }
.process-header > p { max-width:430px;color:var(--text); }
.process-shell { position:relative;border-top:1px solid var(--line); }
.process-line { position:absolute;left:0;top:-1px;width:100%;height:2px;overflow:hidden;pointer-events:none; }
.process-line span { display:block;width:20%;height:100%;background:var(--cyan);transition:width .6s var(--ease); }
.process-step { border-bottom:1px solid var(--line); }
.process-step > button {
  display:grid;
  grid-template-columns:90px 1fr auto;
  align-items:center;
  width:100%;
  padding:30px 0;
  border:0;
  background:transparent;
  text-align:left;
  cursor:pointer;
}
.process-number { color:var(--cyan);font-size:12px;font-weight:700;letter-spacing:.1em; }
.process-name { font:600 clamp(32px,4.2vw,60px)/1 "Manrope";letter-spacing:-.05em; }
.process-plus { font-size:30px;font-weight:300;transition:transform .4s var(--ease); }
.process-step.active .process-plus { transform:rotate(45deg); }
.process-content {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:70px;
  height:0;
  overflow:hidden;
}
.process-step.active .process-content { height:auto; }
.process-copy { padding:5px 0 50px 90px; }
.process-copy p { max-width:540px;color:var(--text);font-size:18px; }
.process-copy ul { display:flex;flex-wrap:wrap;gap:8px;margin-top:25px; }
.process-copy li { padding:7px 11px;background:white;border:1px solid var(--line);border-radius:999px;color:#5d6582;font-size:10px;font-weight:700; }
.process-art { position:relative;height:290px;margin-bottom:40px;overflow:hidden;background:white;border:1px solid var(--line);border-radius:22px; }
.process-art-discover { display:grid;place-items:center;background:linear-gradient(145deg,#fff,#edf8ff); }
.radar-circle { position:absolute;border:1px solid rgba(40,56,144,.2);border-radius:50%; }
.r1{width:230px;height:230px}.r2{width:160px;height:160px}.r3{width:85px;height:85px}
.radar-line { position:absolute;width:1px;height:115px;top:50%;left:50%;background:linear-gradient(var(--cyan),transparent);transform-origin:top;animation:radar 4s linear infinite; }
@keyframes radar{to{transform:rotate(360deg)}}
.process-art-discover b { z-index:2;display:grid;place-items:center;width:60px;height:60px;color:white;background:var(--navy);border-radius:50%;font-size:8px;letter-spacing:.1em; }
.process-art-strategy .node { position:absolute;display:grid;place-items:center;width:55px;height:55px;color:white;background:var(--navy);border-radius:14px;font-size:10px; }
.process-art-strategy .n1{left:12%;top:43%}.process-art-strategy .n2{left:39%;top:17%;background:var(--cyan)}.process-art-strategy .n3{right:24%;top:58%}.process-art-strategy .n4{right:8%;top:21%;background:var(--blue)}
.process-art-strategy i { position:absolute;height:1px;background:#aab4d7;transform-origin:left; }
.process-art-strategy i:nth-of-type(1){width:31%;left:18%;top:50%;transform:rotate(-23deg)}
.process-art-strategy i:nth-of-type(2){width:28%;left:46%;top:29%;transform:rotate(36deg)}
.process-art-strategy i:nth-of-type(3){width:20%;left:70%;top:62%;transform:rotate(-36deg)}
.process-art-design { display:grid;place-items:center;background:linear-gradient(145deg,#e7faff,#f2edff); }
.design-frame { position:relative;width:65%;height:65%;padding:30px;background:white;border-radius:14px;box-shadow:0 20px 50px rgba(35,55,130,.14); }
.design-frame span { display:block;height:10px;margin-bottom:15px;background:#e5e9f8;border-radius:4px; }
.design-frame span:nth-child(1){width:35%;background:var(--cyan)}.design-frame span:nth-child(2){width:80%;height:45px}.design-frame span:nth-child(3){width:55%}
.design-cursor { position:absolute;right:16%;bottom:17%;font-size:38px;color:var(--blue);filter:drop-shadow(5px 6px 0 white); }
.process-art-build { display:grid;place-items:center;background:#121a55; }
.code-window { display:grid;gap:12px;width:72%;padding:28px;color:#b7c1e8;background:#0b123b;border:1px solid rgba(255,255,255,.1);border-radius:12px;font:12px monospace; }
.code-window i { font-style:normal; }.code-window i:nth-child(2){color:#26caec}.code-window i:nth-child(3){color:#d9ff56}
.process-art-launch { display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:35px;background:linear-gradient(145deg,#fff,#edf4ff); }
.launch-ring { position:relative;display:grid;place-items:center;width:140px;height:140px;margin:auto;border:1px solid #b9c4e4;border-radius:50%; }
.launch-ring i { position:absolute;inset:18px;border:5px solid #d9def0;border-top-color:var(--cyan);border-radius:50%;animation:spin 4s linear infinite; }
@keyframes spin{to{transform:rotate(360deg)}}.launch-ring b{font-size:11px;letter-spacing:.15em}
.launch-bars { display:flex;align-items:flex-end;gap:10px;height:130px; }
.launch-bars i { flex:1;height:30%;background:var(--blue);border-radius:5px 5px 0 0; }
.launch-bars i:nth-child(2){height:45%;background:#4a60c8}.launch-bars i:nth-child(3){height:64%;background:#5c81db}.launch-bars i:nth-child(4){height:80%;background:#34a7e0}.launch-bars i:nth-child(5){height:100%;background:var(--cyan)}

/* TECH */
.tech { background:var(--white); }
.tech-grid { display:grid;grid-template-columns:1.25fr .75fr;align-items:end;gap:80px; }
.tech-copy { padding-bottom:8px; }
.tech-copy p { color:var(--text);font-size:18px;margin-bottom:28px; }
.tech-showcase {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-top: 80px;
}
.tech-card {
  position: relative;
  min-height: 270px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 22px;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(241,245,255,.92));
  border: 1px solid var(--line);
  border-radius: 22px;
  transition: transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease), color .45s var(--ease);
  isolation: isolate;
}
.tech-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -70px;
  bottom: -95px;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37,171,225,.22), rgba(40,56,144,.06) 48%, transparent 70%);
  transition: transform .55s var(--ease), opacity .55s var(--ease);
}
.tech-card::after {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background: linear-gradient(145deg, var(--navy), #273a9d 65%, #159fc9);
  opacity: 0;
  transition: opacity .45s var(--ease);
}
.tech-card:hover {
  color: var(--white);
  border-color: transparent;
  box-shadow: 0 28px 60px rgba(24, 42, 118, .18);
  transform: translateY(-9px);
}
.tech-card:hover::before { transform: scale(1.3); opacity: .5; }
.tech-card:hover::after { opacity: 1; }
.tech-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
  transition: color .4s var(--ease);
}
.tech-card-top b { font-weight: 700; }
.tech-card:hover .tech-card-top { color: rgba(255,255,255,.58); }
.tech-logo {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  margin: 26px 0 32px;
  background: var(--white);
  border: 1px solid rgba(18,26,85,.08);
  border-radius: 20px;
  box-shadow: 0 14px 34px rgba(25,42,118,.1);
  transition: transform .45s var(--ease), background .45s var(--ease);
}
.tech-logo img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  transition: transform .45s var(--ease);
}
.tech-card:hover .tech-logo { transform: rotate(-6deg) scale(1.05); background: rgba(255,255,255,.96); }
.tech-card:hover .tech-logo img { transform: scale(1.08); }

.tech-card-copy h3 {
  margin: 0 0 7px;
  font: 650 22px/1.1 "Manrope", sans-serif;
  letter-spacing: -.04em;
}
.tech-card-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  transition: color .4s var(--ease);
}
.tech-card:hover .tech-card-copy p { color: rgba(255,255,255,.62); }

/* TESTIMONIAL */
.testimonial { position:relative;overflow:hidden;color:white;background:linear-gradient(135deg,#232d7d,#151c55); }
.testimonial::after { content:"";position:absolute;right:-180px;bottom:-260px;width:600px;height:600px;background:radial-gradient(circle,rgba(18,189,232,.35),transparent 66%);border-radius:50%; }
.quote-mark { position:relative;z-index:2;color:var(--cyan);font:400 130px/1 Georgia,serif;height:92px; }
.testimonial blockquote { position:relative;z-index:2;max-width:1200px;margin:35px 0 55px;font:500 clamp(38px,5vw,72px)/1.12 "Manrope";letter-spacing:-.05em; }
.testimonial-person { position:relative;z-index:2;display:flex;align-items:center;gap:15px; }
.person-avatar { display:grid;place-items:center;width:50px;height:50px;color:var(--navy);background:var(--lime);border-radius:50%;font-weight:800;font-size:12px; }
.testimonial-person strong,.testimonial-person span{display:block}.testimonial-person strong{font-size:14px}.testimonial-person span{color:rgba(255,255,255,.55);font-size:11px}

/* INSIGHTS */
.insights { background:var(--paper); }
.insights-head { align-items:flex-end; }
.insights-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:24px; }
.insight-card > a { display:block; }
.insight-image {
  position: relative;
  height: 390px;
  overflow: hidden;
  background: var(--navy);
  border-radius: 22px;
}
.insight-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8,15,55,.28), transparent 42%, rgba(8,15,55,.14));
  pointer-events: none;
}
.insight-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
.insight-card:hover .insight-image img { transform: scale(1.06); }
.insight-image > span {
  position: absolute;
  z-index: 2;
  left: 22px;
  top: 20px;
  padding: 7px 10px;
  color: white;
  background: rgba(12,22,72,.78);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
}
.insight-meta { display:flex;justify-content:space-between;margin:23px 0 14px;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.1em; }
.insight-card h3 { margin:0 0 25px;font:600 clamp(23px,2vw,31px)/1.22 "Manrope";letter-spacing:-.04em; }
.read-link { display:inline-block;font-size:12px;font-weight:700;border-bottom:1px solid var(--navy); }

/* CONTACT CTA */
.contact-cta { position:relative;overflow:hidden;padding:165px 0;color:white;background:var(--navy); }
.contact-cta::before { content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 120%,rgba(18,189,232,.25),transparent 42%); }
.contact-orbit { position:absolute;left:50%;top:50%;border:1px solid rgba(255,255,255,.1);border-radius:50%;transform:translate(-50%,-50%); }
.contact-orbit.orbit-a { width:620px;height:620px; }
.contact-orbit.orbit-b { width:920px;height:920px;border-style:dashed; }
.contact-orbit.orbit-c { width:1250px;height:500px;transform:translate(-50%,-50%) rotate(-13deg);border-color:rgba(18,189,232,.2); }
.contact-inner { position:relative;z-index:2;text-align:center; }
.contact-inner .eyebrow { justify-content:center;color:rgba(255,255,255,.6); }
.contact-inner h2 { margin:30px 0 35px;font:650 clamp(65px,8.5vw,130px)/.9 "Manrope";letter-spacing:-.07em; }
.contact-lead { max-width:600px;margin:0 auto;color:rgba(255,255,255,.63);font-size:19px; }
.contact-actions { display:flex;flex-direction:column;align-items:center;gap:24px;margin-top:48px; }
.contact-email { color:rgba(255,255,255,.72);font-size:14px;border-bottom:1px solid rgba(255,255,255,.3); }

/* FOOTER */
.site-footer { padding:100px 0 30px;background:#f8faff; }
.footer-top { display:grid;grid-template-columns:1.8fr repeat(3,1fr);gap:70px;padding-bottom:80px; }
.footer-brand img { width:215px; }
.footer-brand p { max-width:330px;margin-top:25px;color:var(--text);font-size:15px; }
.footer-label { margin-bottom:22px;color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; }
.footer-col a { display:block;width:max-content;margin:9px 0;color:#323a5f;font-size:14px;transition:color .2s,transform .2s; }
.footer-col a:hover { color:var(--cyan);transform:translateX(4px); }
.footer-marquee { overflow:hidden;padding:44px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line); }
.footer-marquee > div { display:flex;align-items:center;width:max-content;animation:footerMove 26s linear infinite; }
.footer-marquee span { padding:0 30px;font:650 clamp(45px,6vw,90px)/1 "Manrope";letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px rgba(18,26,85,.27); }
.footer-marquee i { width:16px;height:16px;background:var(--cyan);border-radius:50%; }
@keyframes footerMove{to{transform:translateX(-50%)}}
.footer-bottom { display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding-top:28px;color:var(--muted);font-size:11px; }
.home-footer .footer-bottom { border-top:1px solid var(--line); }
.footer-bottom p{margin:0}.footer-bottom>div{display:flex;gap:20px}.back-top{justify-self:end;color:var(--navy);font-weight:700}

/* REVEAL FALLBACK */
.js .reveal-up { opacity:0; transform:translateY(50px); }

/* RESPONSIVE */
@media (max-width: 1180px) {
  .header-shell { grid-template-columns:220px 1fr 220px; }
  .desktop-nav { gap:20px; }
  .hero-layout { grid-template-columns:1fr .9fr; gap:25px; }
  .hero-title { font-size:clamp(62px,7.3vw,90px); }
  .hero-visual { min-height:560px; }
  .floating-card-one { left:-5px; }
  .floating-card-two { right:-8px; }
  .services-grid { grid-template-columns:repeat(2,1fr); }
  .difference-grid { gap:70px; }
}

@media (max-width: 960px) {
  :root { --header-h:74px; }
  .container { width:min(calc(100% - 48px),var(--container)); }
  .section-pad { padding:110px 0; }
  body { font-size:16px; }
  .cursor-dot,.cursor-ring { display:none; }
  .header-shell { grid-template-columns:1fr auto; width:calc(100% - 24px); min-height:64px; padding-left:18px; }
  .desktop-nav,.header-shell>.button { display:none; }
  .menu-toggle { display:block; }
  .brand { width:174px; }
  .hero { min-height:auto;padding-top:145px; }
  .hero-layout { grid-template-columns:1fr; }
  .hero-copy { max-width:790px; }
  .hero-visual { min-height:650px;margin-top:35px; }
  .visual-stage { width:min(85%,650px); }
  .hero-bottom { margin-top:30px; }
  .intro-grid { grid-template-columns:1fr;gap:55px; }
  .intro-side { flex-direction:row;align-items:end;gap:40px; }
  .stats-grid { margin-top:80px; }
  .section-head,.work-heading,.process-header { align-items:start;flex-direction:column; }
  .project-card { width:calc(100vw - 72px); }
  .work-track-wrap { min-height:calc(100svh - 84px); }
  .work-track { height:min(700px, calc(100svh - 108px)); }
  .difference-grid { grid-template-columns:1fr; }
  .difference-sticky { position:relative;top:auto; }
  .difference-list { margin-top:30px; }
  .process-content { grid-template-columns:1fr;gap:0; }
  .process-copy { padding-left:90px; }
  .process-art { margin-left:90px; }
  .tech-grid { grid-template-columns:1fr;gap:50px; }
  .tech-showcase { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .insights-grid { grid-template-columns:1fr 1fr; }
  .insight-card:last-child { grid-column:1/-1;width:calc(50% - 12px); }
  .footer-top { grid-template-columns:1.6fr 1fr 1fr; }
  .footer-col:last-child { grid-column:2; }
}

@media (max-width: 680px) {
  .container { width:calc(100% - 36px); }
  .section-pad { padding:88px 0; }
  .section-kicker { margin-bottom:28px; }
  .display-heading { font-size:clamp(48px,14vw,68px); }
  .section-title { font-size:clamp(45px,13vw,65px); }
  .hero { padding-top:126px;padding-bottom:36px; }
  .hero-title { font-size:clamp(52px,15vw,72px); }
  .hero-description { margin-top:26px;font-size:17px; }
  .hero-actions { align-items:flex-start;flex-direction:column;gap:24px;margin-top:30px; }
  .hero-trust { align-items:flex-start;flex-direction:column;gap:13px;margin-top:45px; }
  .hero-trust > div { flex-wrap:wrap; }
  .hero-visual { min-height:460px;margin-top:45px; }
  .visual-stage { width:100%;border-radius:20px;transform:none; }
  .stage-content { grid-template-columns:48px 1fr; }
  .stage-main { padding:45px 25px 25px; }
  .stage-main h2 { font-size:42px; }
  .stage-sidebar img { width:28px; }
  .sidebar-lines { margin-top:35px; }
  .floating-card { padding:11px 13px; }
  .floating-card-one { left:-8px;bottom:22px; }
  .floating-card-two { right:-7px;top:48px; }
  .floating-card strong { font-size:15px; }
  .floating-card p { font-size:7px; }
  .floating-icon,.dot-grid { width:28px;height:28px; }
  .floating-badge { display:none; }
  .visual-orbit { display:none; }
  .marquee-content span { padding:0 18px;font-size:14px; }
  .intro-side { flex-direction:column;align-items:flex-start; }
  .stats-grid { grid-template-columns:1fr; }
  .stat-card { min-height:auto;padding:30px 10px;border-right:0;border-bottom:1px solid var(--line); }
  .stat-card:first-child { border-left:0; }
  .stat-card p { margin-top:25px; }
  .services-grid { grid-template-columns:1fr; }
  .service-card { min-height:480px; }
  .section-head { margin-bottom:55px; }
  .work-track-wrap { min-height:0;display:block;padding-left:18px;overflow:visible; }
  .work-track { display:grid;width:auto;height:auto;padding-right:18px; }
  .project-card { width:100%;height:auto;display:block; }
  .project-visual { height:470px;padding:25px 25px 0; }
  .project-info { grid-template-columns:1fr auto; }
  .project-tags { display:none; }
  .industrial-screen { padding:35px 25px; }
  .industrial-circle { width:160px;height:160px; }
  .shop-hero { padding:45px 25px; }
  .saas-copy { padding:35px 25px 0; }
  .saas-dashboard { width:85%; }
  .property-caption { left:25px;bottom:30px; }
  .difference-item { grid-template-columns:45px 1fr;padding:36px 0; }
  .process-step>button { grid-template-columns:55px 1fr auto;padding:25px 0; }
  .process-copy { padding:0 0 35px 55px; }
  .process-art { height:230px;margin-left:55px; }
  .process-content { gap:0; }
  .tech-showcase { grid-template-columns:1fr 1fr;margin-top:55px; }
  .tech-card { min-height:235px;padding:18px; }
  .tech-logo { width:64px;height:64px;margin:22px 0 28px; }
  .tech-logo img { width:32px;height:32px; }
  .testimonial blockquote { font-size:38px; }
  .insights-grid { grid-template-columns:1fr; }
  .insight-card:last-child { grid-column:auto;width:auto; }
  .insight-image { height:330px; }
  .contact-cta { padding:110px 0; }
  .contact-inner h2 { font-size:clamp(58px,17vw,85px); }
  .contact-orbit.orbit-a { width:420px;height:420px; }
  .footer-top { grid-template-columns:1fr 1fr;gap:50px 30px; }
  .footer-brand { grid-column:1/-1; }
  .footer-col:last-child { grid-column:auto; }
  .footer-bottom { grid-template-columns:1fr auto;gap:20px; }
  .footer-bottom>div { display:none; }
}

/* Keep animated hero artwork clear of the section that follows it. */
main > section:first-child[class*="hero"],
main > section.hero:first-child {
  padding-bottom: clamp(100px, 8vw, 130px);
}

@media (max-width:680px) {
  main > section:first-child[class*="hero"],
  main > section.hero:first-child {
    padding-bottom: clamp(78px, 18vw, 100px);
  }
}

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