:root {
  --primary: #0b5cff;
  --primary-dark: #063fae;
  --navy: #06152f;
  --navy-2: #081d3e;
  --text: #172033;
  --muted: #6c7890;
  --white: #ffffff;
  --line: rgba(255, 255, 255, 0.13);
  --shadow: 0 18px 55px rgba(4, 19, 45, 0.14);
  --radius: 16px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Inter", sans-serif;
  color: var(--text);
  background: var(--white);
  overflow-x: hidden;
}

a {
  text-decoration: none;
}

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  transition: 0.35s ease;
}

.site-header.scrolled {
  background: rgba(5, 19, 43, 0.88);
  backdrop-filter: blur(18px);
  box-shadow: 0 8px 35px rgba(0, 0, 0, 0.14);
}

.navbar {
  padding: 18px 0;
}

.nav-container {
  min-height: 56px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
}

.brand:hover {
  color: #fff;
}

.brand-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(130, 190, 255, 0.6);
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, rgba(0, 116, 255, .9), rgba(0, 197, 255, .35));
  box-shadow: 0 0 25px rgba(0, 116, 255, .28);
}

.brand-mark i {
  font-size: 22px;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.brand-text strong {
  font-family: "Space Grotesk", sans-serif;
  font-size: 17px;
  letter-spacing: 1.2px;
}

.brand-text small {
  margin-top: 4px;
  font-size: 8px;
  letter-spacing: 4px;
  opacity: .72;
}

.nav-link {
  position: relative;
  color: rgba(255,255,255,.78) !important;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 12px !important;
  transition: .25s ease;
}

.nav-link:hover,
.nav-link.active {
  color: #fff !important;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 4px;
  height: 2px;
  background: #69c9ff;
  transform: scaleX(0);
  transform-origin: center;
  transition: .25s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
  transform: scaleX(1);
}

.btn-nav {
  color: #fff;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 10px;
  padding: 10px 17px;
  font-weight: 600;
  font-size: 13px;
  background: rgba(255,255,255,.07);
  transition: .25s ease;
}

.btn-nav:hover {
  color: #fff;
  background: var(--primary);
  border-color: var(--primary);
  transform: translateY(-2px);
}

.dropdown-menu {
  border: 0;
  padding: 10px;
  border-radius: 14px;
  box-shadow: var(--shadow);
}

.dropdown-item {
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 13px;
  color: var(--text);
}

.dropdown-item i {
  margin-right: 8px;
  color: var(--primary);
}

.dropdown-item:hover {
  background: #edf5ff;
  color: var(--primary-dark);
}

.navbar-toggler {
  border: 1px solid rgba(255,255,255,.35);
}

.navbar-toggler:focus {
  box-shadow: none;
}

.navbar-toggler-icon {
  filter: brightness(0) invert(1);
}


/* HERO */
.hero-section {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 80% 45%, rgba(0, 117, 255, .20), transparent 28%),
    radial-gradient(circle at 15% 70%, rgba(0, 205, 255, .09), transparent 30%),
    linear-gradient(120deg, #041027 0%, #061a3b 48%, #031027 100%);
}

.hero-grid {
  position: absolute;
  inset: 0;
  opacity: .30;
  background-image:
    linear-gradient(rgba(117, 190, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(117, 190, 255, .07) 1px, transparent 1px);
  background-size: 70px 70px;
  mask-image: linear-gradient(to bottom, black, transparent 90%);
}

.hero-glow {
  position: absolute;
  width: 450px;
  height: 450px;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .18;
  pointer-events: none;
}

.hero-glow-one {
  top: 18%;
  right: -180px;
  background: #0088ff;
}

.hero-glow-two {
  bottom: -250px;
  left: 10%;
  background: #00d5ff;
}

.hero-content {
  position: relative;
  z-index: 3;
  max-width: 750px;
  padding-top: 65px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  padding: 8px 13px;
  border: 1px solid rgba(124, 201, 255, .25);
  border-radius: 999px;
  background: rgba(255,255,255,.055);
  color: #a9ddff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.8px;
}

.pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #55d8ff;
  box-shadow: 0 0 0 5px rgba(85,216,255,.10), 0 0 16px #55d8ff;
}

.hero-title {
  margin: 0;
  max-width: 820px;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(54px, 7vw, 91px);
  line-height: .94;
  font-weight: 700;
  letter-spacing: -4px;
}

.hero-title span {
  display: block;
  color: transparent;
  background: linear-gradient(90deg, #ffffff, #74d3ff);
  background-clip: text;
  -webkit-background-clip: text;
}

.hero-subtitle {
  margin: 28px 0 10px;
  color: #bce8ff;
  font-size: clamp(19px, 2vw, 25px);
  font-weight: 600;
}

.hero-description {
  max-width: 630px;
  margin: 0;
  color: rgba(232,242,255,.72);
  font-size: 16px;
  line-height: 1.8;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 31px;
}

.btn-primary-custom,
.btn-outline-custom {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 11px;
  padding: 13px 19px;
  font-size: 13px;
  font-weight: 700;
  transition: .3s ease;
}

.btn-primary-custom {
  color: #fff;
  background: linear-gradient(135deg, #0867ff, #168cff);
  border: 1px solid #168cff;
  box-shadow: 0 10px 30px rgba(0, 113, 255, .25);
}

.btn-primary-custom:hover {
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(0, 113, 255, .38);
}

.btn-outline-custom {
  color: #fff;
  border: 1px solid rgba(255,255,255,.24);
  background: rgba(255,255,255,.045);
}

.btn-outline-custom:hover {
  color: #fff;
  border-color: rgba(113,210,255,.65);
  background: rgba(113,210,255,.10);
  transform: translateY(-3px);
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 38px;
  color: rgba(224,239,255,.66);
  font-size: 11px;
  font-weight: 600;
}

.hero-trust div {
  display: flex;
  align-items: center;
  gap: 7px;
}

.hero-trust i {
  color: #6dd6ff;
  font-size: 15px;
}


/* DIGITAL GLOBE */
.hero-visual {
  position: relative;
  width: 500px;
  height: 500px;
  margin: 55px auto 0;
}

.digital-globe {
  position: absolute;
  width: 290px;
  height: 290px;
  top: 100px;
  left: 105px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(84,203,255,.34), transparent 25%),
    radial-gradient(circle at center, rgba(11,91,202,.40), rgba(2,16,42,.95) 67%);
  border: 1px solid rgba(105,205,255,.55);
  box-shadow:
    0 0 55px rgba(0,126,255,.26),
    inset 0 0 55px rgba(0,150,255,.16);
  animation: floatGlobe 6s ease-in-out infinite;
}

.globe-lines {
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 49%, rgba(130,215,255,.35) 50%, transparent 51%),
    linear-gradient(0deg, transparent 49%, rgba(130,215,255,.30) 50%, transparent 51%);
  opacity: .55;
}

.globe-lines::before,
.globe-lines::after {
  content: "";
  position: absolute;
  inset: 8% 22%;
  border: 1px solid rgba(122,214,255,.25);
  border-radius: 50%;
}

.globe-lines::after {
  inset: 22% 8%;
}

.globe-core {
  position: relative;
  z-index: 2;
  width: 105px;
  height: 105px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(3,29,65,.72);
  border: 1px solid rgba(132,218,255,.35);
  box-shadow: 0 0 40px rgba(0,144,255,.28);
}

.globe-core i {
  font-size: 58px;
  color: #77d9ff;
  filter: drop-shadow(0 0 15px rgba(87,205,255,.55));
}

.orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 440px;
  height: 155px;
  border: 1px solid rgba(103,203,255,.20);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-23deg);
}

.orbit-two {
  width: 410px;
  height: 185px;
  transform: translate(-50%, -50%) rotate(35deg);
}

.orbit-three {
  width: 335px;
  height: 430px;
  transform: translate(-50%, -50%) rotate(20deg);
}

.floating-card {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 215px;
  padding: 13px;
  border: 1px solid rgba(135,211,255,.22);
  border-radius: 13px;
  background: rgba(6,28,61,.70);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px rgba(0,0,0,.24);
}

.floating-card i {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #70d7ff;
  background: rgba(0,129,255,.13);
  font-size: 18px;
}

.floating-card div {
  display: flex;
  flex-direction: column;
}

.floating-card strong {
  font-size: 11px;
  color: #fff;
}

.floating-card small {
  margin-top: 4px;
  color: rgba(214,234,255,.54);
  font-size: 9px;
}

.card-top {
  top: 48px;
  right: 0;
  animation: floatCard 5s ease-in-out infinite;
}

.card-bottom {
  bottom: 62px;
  left: -5px;
  animation: floatCard 5s 1.5s ease-in-out infinite;
}

.particle {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #74d9ff;
  box-shadow: 0 0 15px #4bc8ff;
  animation: particleFloat 4s ease-in-out infinite;
}

.p1 { left: 10%; top: 40%; }
.p2 { right: 5%; top: 62%; animation-delay: .8s; }
.p3 { left: 22%; bottom: 7%; animation-delay: 1.2s; }
.p4 { right: 20%; bottom: 20%; animation-delay: 1.8s; }
.p5 { left: 45%; top: 4%; animation-delay: 2.2s; }

.scroll-indicator {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: rgba(206,230,255,.45);
  font-size: 8px;
  letter-spacing: 2px;
}

.scroll-indicator i {
  color: #70d7ff;
  animation: scrollBounce 1.7s infinite;
}

.placeholder-section {
  padding: 120px 0;
  text-align: center;
  background: #fff;
}

.dark-placeholder {
  color: #fff;
  background: var(--navy);
}

.placeholder-section h2 {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(36px, 5vw, 60px);
  margin: 10px 0;
}

.placeholder-section p {
  color: var(--muted);
}

.dark-placeholder p {
  color: rgba(255,255,255,.62);
}

.section-kicker {
  color: var(--primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
}

.dark-placeholder .section-kicker {
  color: #70d7ff;
}


/* ANIMATIONS */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  animation: reveal .8s forwards;
}

.hero-content .reveal:nth-child(1) { animation-delay: .10s; }
.hero-content .reveal:nth-child(2) { animation-delay: .20s; }
.hero-content .reveal:nth-child(3) { animation-delay: .35s; }
.hero-content .reveal:nth-child(4) { animation-delay: .45s; }
.hero-content .reveal:nth-child(5) { animation-delay: .55s; }

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

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

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

@keyframes particleFloat {
  0%, 100% { opacity: .35; transform: translateY(0) scale(.8); }
  50% { opacity: 1; transform: translateY(-18px) scale(1.25); }
}

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


/* RESPONSIVE */
@media (max-width: 991.98px) {
  .site-header {
    background: rgba(5, 19, 43, .93);
    backdrop-filter: blur(15px);
  }

  .navbar {
    padding: 12px 0;
  }

  .navbar-collapse {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 15px;
    background: rgba(4, 19, 43, .98);
  }

  .nav-link::after {
    display: none;
  }

  .hero-content {
    padding-top: 85px;
  }

  .hero-title {
    letter-spacing: -2.5px;
  }

  .scroll-indicator {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .brand-mark {
    width: 38px;
    height: 38px;
  }

  .brand-text strong {
    font-size: 15px;
  }

  .hero-content {
    padding-top: 55px;
  }

  .eyebrow {
    font-size: 8px;
    letter-spacing: 1.2px;
  }

  .hero-title {
    font-size: clamp(46px, 15vw, 68px);
  }

  .hero-description {
    font-size: 14px;
    line-height: 1.7;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .btn-primary-custom,
  .btn-outline-custom {
    justify-content: center;
  }

  .hero-trust {
    display: grid;
    gap: 11px;
  }
}

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

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* =========================================
   STEP 2 — HOMEPAGE SECTIONS
========================================= */

.section-padding {
  padding: 110px 0;
}

.section-label {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 17px;
  color: var(--primary);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2.3px;
}

.section-label > span {
  width: 25px;
  height: 2px;
  display: inline-block;
  background: currentColor;
}

.section-title {
  margin: 0;
  max-width: 750px;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(39px, 5vw, 65px);
  line-height: 1.04;
  letter-spacing: -2.5px;
  font-weight: 700;
  color: var(--navy);
}

.section-title span {
  display: block;
  color: var(--primary);
}

.section-text {
  max-width: 620px;
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.85;
}

.section-intro {
  max-width: 470px;
  margin: 0 0 4px auto;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.8;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 25px;
  color: var(--navy);
  font-size: 13px;
  font-weight: 800;
  transition: .25s ease;
}

.text-link i {
  transition: .25s ease;
}

.text-link:hover {
  color: var(--primary);
}

.text-link:hover i {
  transform: translateX(4px);
}

.stats-section {
  position: relative;
  z-index: 5;
  margin-top: -1px;
  padding: 30px 0;
  background: #f5f9ff;
  border-top: 1px solid #e7eef8;
  border-bottom: 1px solid #e7eef8;
}

.stats-wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.stat-item {
  position: relative;
  text-align: center;
  padding: 12px 20px;
}

.stat-item + .stat-item::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 0;
  width: 1px;
  background: #dce6f2;
}

.stat-number {
  font-family: "Space Grotesk", sans-serif;
  color: var(--navy);
  font-size: 35px;
  font-weight: 700;
}

.stat-plus {
  color: var(--primary);
  font-family: "Space Grotesk", sans-serif;
  font-size: 28px;
  font-weight: 700;
}

.stat-label {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .7px;
  text-transform: uppercase;
}


/* ABOUT */
.about-section {
  background: #fff;
}

.about-visual {
  position: relative;
  min-height: 480px;
  overflow: hidden;
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 48%, rgba(11,92,255,.19), transparent 27%),
    linear-gradient(135deg, #06152f, #0a2751 70%, #051229);
  box-shadow: 0 25px 65px rgba(6,28,61,.15);
}

.about-grid {
  position: absolute;
  inset: 0;
  opacity: .28;
  background-image:
    linear-gradient(rgba(113,205,255,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(113,205,255,.10) 1px, transparent 1px);
  background-size: 48px 48px;
}

.about-orb {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 245px;
  height: 245px;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(102,205,255,.42);
  border-radius: 50%;
  box-shadow: 0 0 65px rgba(0,117,255,.18), inset 0 0 55px rgba(0,117,255,.12);
}

.about-orb::before,
.about-orb::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(105,207,255,.19);
  border-radius: 50%;
}

.about-orb::before {
  inset: 24px -55px;
  transform: rotate(27deg);
}

.about-orb::after {
  inset: -55px 24px;
  transform: rotate(-27deg);
}

.about-orb-core {
  width: 110px;
  height: 110px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(8,34,72,.9);
  border: 1px solid rgba(114,215,255,.38);
  box-shadow: 0 0 35px rgba(0,130,255,.26);
}

.about-orb-core i {
  color: #72d9ff;
  font-size: 45px;
}

.about-center-label {
  position: absolute;
  left: 50%;
  top: calc(50% + 145px);
  transform: translateX(-50%);
  text-align: center;
}

.about-center-label small {
  display: block;
  color: #6fd7ff;
  font-size: 8px;
  letter-spacing: 3px;
}

.about-center-label strong {
  display: block;
  margin-top: 4px;
  color: #fff;
  font-family: "Space Grotesk", sans-serif;
  font-size: 16px;
  line-height: 1.15;
}

.about-node {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 12px;
  border: 1px solid rgba(126,212,255,.20);
  border-radius: 11px;
  color: #fff;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
  font-size: 10px;
  font-weight: 700;
}

.about-node i {
  color: #6ed6ff;
}

.node-one { top: 85px; left: 55px; }
.node-two { top: 105px; right: 50px; }
.node-three { bottom: 75px; left: 75px; }


/* SERVICES */
.services-section {
  background: #f6f9fd;
}

.section-heading-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
}

.service-card {
  position: relative;
  height: 100%;
  min-height: 295px;
  padding: 28px;
  overflow: hidden;
  border: 1px solid #e5ebf3;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 35px rgba(7,30,65,.045);
  transition: .35s ease;
}

.service-card::after {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -80px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(8,102,255,.06);
  transition: .35s ease;
}

.service-card:hover {
  transform: translateY(-8px);
  border-color: rgba(11,92,255,.25);
  box-shadow: 0 22px 50px rgba(7,30,65,.11);
}

.service-card:hover::after {
  transform: scale(1.35);
}

.service-number {
  position: absolute;
  top: 22px;
  right: 24px;
  color: #d7e0ed;
  font-family: "Space Grotesk", sans-serif;
  font-size: 13px;
  font-weight: 700;
}

.service-icon {
  width: 53px;
  height: 53px;
  display: grid;
  place-items: center;
  margin-bottom: 23px;
  border-radius: 14px;
  color: var(--primary);
  background: #edf5ff;
  font-size: 23px;
  transition: .3s ease;
}

.service-card:hover .service-icon {
  color: #fff;
  background: var(--primary);
  transform: rotate(-5deg) scale(1.05);
}

.service-card h3 {
  position: relative;
  z-index: 2;
  margin: 0 0 11px;
  color: var(--navy);
  font-family: "Space Grotesk", sans-serif;
  font-size: 20px;
}

.service-card p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.75;
}

.service-link {
  position: absolute;
  z-index: 3;
  bottom: 26px;
  left: 28px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--navy);
  font-size: 11px;
  font-weight: 800;
}

.service-link i {
  color: var(--primary);
  transition: .25s ease;
}

.service-link:hover {
  color: var(--primary);
}

.service-link:hover i {
  transform: translate(3px, -3px);
}


/* TECHNOLOGY */
.technology-section,
.process-section {
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 85% 30%, rgba(0,132,255,.17), transparent 25%),
    linear-gradient(120deg, #041027, #071d3e 55%, #031027);
}

.technology-section::before,
.process-section::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .22;
  background-image:
    linear-gradient(rgba(114,210,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(114,210,255,.08) 1px, transparent 1px);
  background-size: 60px 60px;
}

.technology-section .container,
.process-section .container {
  position: relative;
  z-index: 2;
}

.light-label {
  color: #6fd6ff;
}

.light-title {
  color: #fff;
}

.light-title span {
  color: #6fd6ff;
}

.light-intro {
  color: rgba(225,239,255,.62);
}

.tech-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid rgba(255,255,255,.10);
  border-left: 1px solid rgba(255,255,255,.10);
}

.tech-item {
  min-height: 145px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  border-right: 1px solid rgba(255,255,255,.10);
  border-bottom: 1px solid rgba(255,255,255,.10);
  color: rgba(230,243,255,.72);
  transition: .3s ease;
}

.tech-item i {
  color: #71d7ff;
  font-size: 32px;
}

.tech-item span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
}

.tech-item:hover {
  color: #fff;
  background: rgba(255,255,255,.045);
  transform: translateY(-2px);
}


/* WHY */
.why-section {
  background: #fff;
}

.why-card {
  position: relative;
  min-height: 235px;
  padding: 28px;
  border: 1px solid #e5ebf3;
  border-radius: 16px;
  background: #fff;
  transition: .3s ease;
}

.why-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 45px rgba(7,30,65,.08);
  border-color: rgba(11,92,255,.20);
}

.why-card > span {
  position: absolute;
  top: 23px;
  right: 23px;
  color: #dbe4ef;
  font-family: "Space Grotesk", sans-serif;
  font-size: 12px;
  font-weight: 700;
}

.why-card i {
  display: block;
  margin-bottom: 25px;
  color: var(--primary);
  font-size: 25px;
}

.why-card h3 {
  margin: 0 0 9px;
  color: var(--navy);
  font-family: "Space Grotesk", sans-serif;
  font-size: 18px;
}

.why-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}


/* PROCESS */
.process-heading {
  margin-bottom: 65px;
}

.process-timeline {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.process-step {
  width: 150px;
  text-align: center;
}

.process-circle {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  margin: 0 auto 17px;
  border: 1px solid rgba(107,211,255,.42);
  border-radius: 50%;
  color: #72d8ff;
  background: rgba(53,158,255,.07);
  font-family: "Space Grotesk", sans-serif;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 0 28px rgba(0,120,255,.10);
}

.process-step h3 {
  margin: 0 0 8px;
  color: #fff;
  font-family: "Space Grotesk", sans-serif;
  font-size: 16px;
}

.process-step p {
  margin: 0;
  color: rgba(218,234,252,.52);
  font-size: 10px;
  line-height: 1.65;
}

.process-line {
  width: 45px;
  height: 1px;
  margin-top: 31px;
  background: linear-gradient(90deg, rgba(103,210,255,.10), rgba(103,210,255,.45), rgba(103,210,255,.10));
}


/* PORTFOLIO */
.portfolio-section {
  background: #f6f9fd;
}

.portfolio-card {
  height: 100%;
  overflow: hidden;
  border: 1px solid #e2eaf4;
  border-radius: 19px;
  background: #fff;
  box-shadow: 0 12px 35px rgba(7,30,65,.05);
  transition: .3s ease;
}

.portfolio-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 50px rgba(7,30,65,.10);
}

.portfolio-art {
  min-height: 300px;
  display: grid;
  place-items: center;
  padding: 35px;
  background:
    radial-gradient(circle at 75% 25%, rgba(42,148,255,.22), transparent 27%),
    linear-gradient(135deg, #071a38, #0b3467);
}

.mock-browser {
  width: 85%;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px;
  background: rgba(255,255,255,.07);
  box-shadow: 0 25px 50px rgba(0,0,0,.25);
  transform: perspective(800px) rotateX(4deg) rotateY(-6deg);
}

.browser-bar {
  display: flex;
  gap: 5px;
  padding: 9px 12px;
  background: rgba(255,255,255,.08);
}

.browser-bar span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,.45);
}

.browser-content {
  padding: 28px;
}

.mock-line {
  height: 9px;
  margin-bottom: 10px;
  border-radius: 99px;
  background: rgba(255,255,255,.55);
}

.mock-line.long { width: 65%; }
.mock-line.medium { width: 42%; opacity: .45; }

.mock-panels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 28px;
}

.mock-panels span {
  height: 80px;
  border-radius: 8px;
  background: rgba(91,195,255,.18);
  border: 1px solid rgba(112,212,255,.20);
}

.mobile-art {
  min-height: 300px;
}

.phone-mockup {
  width: 125px;
  height: 230px;
  position: relative;
  padding: 9px;
  border: 4px solid #162d50;
  border-radius: 24px;
  background: #06152f;
  box-shadow: 0 25px 45px rgba(0,0,0,.30);
}

.phone-notch {
  position: absolute;
  top: 5px;
  left: 50%;
  width: 42px;
  height: 9px;
  transform: translateX(-50%);
  border-radius: 99px;
  background: #162d50;
}

.phone-screen {
  height: 100%;
  padding: 24px 10px 10px;
  border-radius: 15px;
  background: #f1f7ff;
}

.phone-header {
  height: 14px;
  width: 65%;
  margin-bottom: 17px;
  border-radius: 5px;
  background: #0b5cff;
}

.phone-card {
  height: 55px;
  margin-bottom: 10px;
  border-radius: 8px;
  background: #dcecff;
}

.phone-card.short {
  width: 75%;
}

.portfolio-info {
  padding: 24px 25px 28px;
}

.portfolio-info small {
  color: var(--primary);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1.6px;
}

.portfolio-info h3 {
  margin: 8px 0;
  color: var(--navy);
  font-family: "Space Grotesk", sans-serif;
  font-size: 21px;
}

.portfolio-info p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}


/* CTA */
.cta-section {
  position: relative;
  padding: 75px 0;
  overflow: hidden;
  background: #f6f9fd;
}

.cta-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 60px;
  overflow: hidden;
  border-radius: 24px;
  background:
    radial-gradient(circle at 80% 20%, rgba(74,190,255,.22), transparent 30%),
    linear-gradient(120deg, #06152f, #0a2b58);
  box-shadow: 0 25px 65px rgba(6,28,61,.15);
}

.cta-box h2 {
  margin: 0;
  color: #fff;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(37px, 5vw, 60px);
  line-height: 1;
  letter-spacing: -2px;
}

.cta-box h2 span {
  color: #6fd7ff;
}

.cta-box p {
  margin: 17px 0 0;
  color: rgba(225,239,255,.58);
  font-size: 13px;
}

.cta-box .btn {
  flex-shrink: 0;
}


/* CONTACT */
.contact-preview {
  background: #fff;
}

.contact-details {
  display: grid;
  gap: 11px;
  margin-top: 30px;
}

.contact-detail {
  display: flex;
  align-items: center;
  gap: 13px;
  width: fit-content;
  color: var(--navy);
}

.contact-detail:hover {
  color: var(--primary);
}

.contact-detail > i {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--primary);
  background: #edf5ff;
}

.contact-detail span {
  display: flex;
  flex-direction: column;
  font-size: 13px;
  font-weight: 700;
}

.contact-detail small {
  margin-bottom: 2px;
  color: #8a96a9;
  font-size: 8px;
  letter-spacing: 1.2px;
}

.contact-card {
  position: relative;
  min-height: 350px;
  padding: 45px;
  overflow: hidden;
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(145deg, #06152f, #0a2b58);
  box-shadow: 0 25px 65px rgba(6,28,61,.15);
}

.contact-card-glow {
  position: absolute;
  width: 280px;
  height: 280px;
  top: -100px;
  right: -100px;
  border-radius: 50%;
  background: rgba(0,151,255,.17);
  filter: blur(25px);
}

.contact-mini {
  position: relative;
  color: #6fd7ff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 2px;
}

.contact-card h3 {
  position: relative;
  margin: 35px 0 14px;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(31px, 4vw, 45px);
  line-height: 1.02;
}

.contact-card p {
  position: relative;
  margin-bottom: 25px;
  color: rgba(225,239,255,.55);
  font-size: 11px;
}


/* FOOTER */
.site-footer {
  padding: 75px 0 25px;
  color: rgba(226,239,255,.65);
  background: #031027;
}

.footer-main {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.2fr 1.25fr;
  gap: 45px;
  padding-bottom: 55px;
}

.footer-brand p {
  max-width: 300px;
  margin: 20px 0 0;
  color: rgba(226,239,255,.48);
  font-size: 12px;
  line-height: 1.8;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col h4 {
  margin: 0 0 8px;
  color: #fff;
  font-family: "Space Grotesk", sans-serif;
  font-size: 13px;
}

.footer-col a {
  width: fit-content;
  color: rgba(226,239,255,.52);
  font-size: 11px;
  transition: .25s ease;
}

.footer-col a:hover {
  color: #70d7ff;
}

.footer-socials {
  display: flex;
  gap: 8px;
  margin-top: 9px;
}

.footer-socials a {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 9px;
  color: rgba(226,239,255,.66);
  background: rgba(255,255,255,.035);
}

.footer-socials a:hover {
  color: #fff;
  border-color: rgba(112,215,255,.35);
  background: rgba(0,120,255,.15);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.09);
  color: rgba(226,239,255,.37);
  font-size: 9px;
}

.footer-bottom div {
  display: flex;
  gap: 18px;
}

.footer-bottom a {
  color: rgba(226,239,255,.42);
}

.footer-bottom a:hover {
  color: #70d7ff;
}


/* SCROLL REVEAL */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(25px);
  transition: opacity .7s ease, transform .7s ease;
}

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


/* STEP 2 RESPONSIVE */
@media (max-width: 991.98px) {
  .section-padding {
    padding: 80px 0;
  }

  .section-heading-row {
    display: block;
  }

  .section-intro {
    margin: 22px 0 0;
  }

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

  .stat-item:nth-child(3)::before {
    display: none;
  }

  .stat-item:nth-child(n+3) {
    margin-top: 10px;
  }

  .about-visual {
    min-height: 430px;
  }

  .tech-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .process-timeline {
    flex-wrap: wrap;
    gap: 35px 5px;
  }

  .process-line {
    display: none;
  }

  .process-step {
    width: calc(33.333% - 5px);
  }

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

@media (max-width: 767.98px) {
  .section-title {
    letter-spacing: -1.5px;
  }

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

  .stat-item {
    padding: 8px;
  }

  .stat-item + .stat-item::before {
    display: none;
  }

  .about-visual {
    min-height: 390px;
  }

  .about-orb {
    width: 205px;
    height: 205px;
  }

  .node-one { left: 20px; }
  .node-two { right: 20px; }
  .node-three { left: 30px; }

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

  .process-step {
    width: calc(50% - 5px);
  }

  .cta-box {
    display: block;
    padding: 40px 30px;
  }

  .cta-box .btn {
    margin-top: 25px;
  }

  .footer-main {
    grid-template-columns: 1fr 1fr;
    gap: 35px 25px;
  }

  .footer-bottom {
    display: block;
    line-height: 1.7;
  }

  .footer-bottom div {
    margin-top: 12px;
  }
}

@media (max-width: 575.98px) {
  .stats-wrap {
    grid-template-columns: 1fr 1fr;
  }

  .stat-number {
    font-size: 28px;
  }

  .stat-plus {
    font-size: 22px;
  }

  .stat-label {
    font-size: 8px;
  }

  .about-visual {
    min-height: 350px;
  }

  .about-orb {
    width: 170px;
    height: 170px;
  }

  .about-orb-core {
    width: 78px;
    height: 78px;
  }

  .about-orb-core i {
    font-size: 30px;
  }

  .about-center-label {
    top: calc(50% + 112px);
  }

  .about-center-label strong {
    font-size: 12px;
  }

  .about-node {
    padding: 8px 9px;
    font-size: 8px;
  }

  .node-one { top: 55px; }
  .node-two { top: 70px; }
  .node-three { bottom: 50px; }

  .service-card {
    min-height: 275px;
  }

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

  .tech-item {
    min-height: 120px;
  }

  .process-step {
    width: 100%;
  }

  .portfolio-art {
    min-height: 240px;
  }

  .cta-section {
    padding: 45px 0;
  }

  .footer-main {
    grid-template-columns: 1fr;
  }

  .contact-card {
    min-height: 310px;
    padding: 35px 28px;
  }
}

/* STEP 3 — MULTI-PAGE SYSTEM */
.inner-hero{position:relative;min-height:58vh;display:flex;align-items:end;padding:150px 0 85px;background:linear-gradient(135deg,var(--navy),#0a2c5d 60%,#06152f);overflow:hidden;color:#fff}.inner-hero-grid{position:absolute;inset:0;opacity:.28;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:55px 55px;mask-image:linear-gradient(to bottom,black,transparent)}.inner-hero-content{max-width:850px;position:relative;z-index:2}.inner-hero h1{font-family:"Space Grotesk",sans-serif;font-size:clamp(3rem,7vw,6rem);line-height:.98;margin:20px 0}.inner-hero h1 span{color:#62b6ff}.inner-hero p{font-size:1.12rem;line-height:1.8;color:#c8d7ea;max-width:720px}
.content-section{padding:100px 0}.section-heading{max-width:760px;margin-bottom:55px}.section-heading.light{color:#fff}.section-title{font-family:"Space Grotesk",sans-serif;font-size:clamp(2.2rem,4vw,4rem);line-height:1.05;margin:10px 0 22px}.content-section p{color:var(--muted);line-height:1.85}.about-panel{padding:45px;border:1px solid #dbe6f3;border-radius:24px;background:linear-gradient(145deg,#f8fbff,#eef5fc);box-shadow:var(--shadow)}.about-panel-icon,.service-icon{width:70px;height:70px;display:grid;place-items:center;border-radius:18px;background:linear-gradient(135deg,var(--primary),#27b8ff);color:#fff;font-size:28px;margin-bottom:25px}.about-panel h3{font-family:"Space Grotesk",sans-serif;font-size:2rem}.mini-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:35px}.mini-metrics div{padding:18px;border-radius:14px;background:#fff}.mini-metrics strong{display:block;font-family:"Space Grotesk",sans-serif;font-size:1.5rem}.mini-metrics span{font-size:.85rem;color:var(--muted)}
.dark-section{padding:100px 0;background:var(--navy);color:#fff}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.feature-card{padding:35px;border:1px solid rgba(255,255,255,.12);border-radius:22px;background:rgba(255,255,255,.04)}.feature-card i{font-size:30px;color:#69bcff}.feature-card h3{font-family:"Space Grotesk",sans-serif;margin:22px 0 10px}.feature-card p{color:#aebfd6}
.service-page-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.service-page-card{padding:35px;border:1px solid #e0e8f2;border-radius:22px;color:var(--text);background:#fff;box-shadow:0 10px 35px rgba(5,25,55,.06);transition:.3s}.service-page-card:hover{transform:translateY(-7px);box-shadow:var(--shadow);border-color:#b9d6f6}.service-page-card i:first-child{font-size:32px;color:var(--primary)}.service-page-card h3{font-family:"Space Grotesk",sans-serif;margin:22px 0 10px}.service-page-card span{display:inline-flex;gap:8px;align-items:center;margin-top:20px;color:var(--primary);font-weight:700;font-size:.9rem}
.portfolio-page-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}.portfolio-large{border:1px solid #e0e8f2;border-radius:24px;overflow:hidden;background:#fff;box-shadow:0 10px 35px rgba(5,25,55,.06)}.portfolio-art{height:270px;background:linear-gradient(135deg,#071a38,#0d5cff);display:grid;place-items:center;color:#fff;position:relative}.portfolio-art i{font-size:75px;opacity:.9}.portfolio-art span{position:absolute;top:20px;right:20px;padding:7px 10px;border:1px solid rgba(255,255,255,.3);border-radius:30px;font-size:.7rem;font-weight:800;letter-spacing:.12em}.portfolio-copy{padding:30px}.portfolio-copy>span{font-size:.75rem;font-weight:800;letter-spacing:.12em;color:var(--primary)}.portfolio-copy h3{font-family:"Space Grotesk",sans-serif;font-size:1.8rem;margin:10px 0}
.career-note{display:flex;gap:25px;padding:35px;border:1px solid #dbe6f3;border-radius:24px;background:#f8fbff}.career-note>i{font-size:35px;color:var(--primary)}.career-note h3{font-family:"Space Grotesk",sans-serif}.career-note p{margin-bottom:25px}.contact-list{display:grid;gap:15px;margin-top:35px}.contact-list a{display:flex;gap:16px;align-items:center;padding:20px;border:1px solid #e2eaf3;border-radius:16px;color:var(--text)}.contact-list i{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:#edf5ff;color:var(--primary)}.contact-list small{display:block;color:var(--muted);margin-bottom:4px}.contact-form{padding:35px;border-radius:24px;background:#f8fbff;border:1px solid #dbe6f3}.contact-form label{display:block;font-size:.85rem;font-weight:700;margin-bottom:7px}.contact-form input,.contact-form select,.contact-form textarea{width:100%;border:1px solid #d8e2ee;border-radius:12px;padding:13px 15px;background:#fff;outline:none}.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(11,92,255,.08)}
.solution-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.solution-grid article{position:relative;padding:40px;border:1px solid #dfe8f2;border-radius:24px;min-height:250px}.solution-grid article>span{position:absolute;right:25px;top:20px;font-family:"Space Grotesk",sans-serif;color:#b5c6da}.solution-grid article i{font-size:35px;color:var(--primary)}.solution-grid h3{font-family:"Space Grotesk",sans-serif;font-size:2rem;margin:25px 0 10px}
.service-benefits{margin-top:35px;padding:28px;border-radius:20px;background:#f7faff;border:1px solid #dfe9f4}.service-benefits h3{font-family:"Space Grotesk",sans-serif}.service-benefits ul{list-style:none;padding:0;margin:20px 0 0;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.service-benefits li{color:var(--text)}.service-benefits li i{color:var(--primary);margin-right:8px}.service-highlight{padding:35px;border-radius:24px;background:linear-gradient(145deg,var(--navy),#0a3772);color:#fff;box-shadow:var(--shadow)}.service-highlight .service-icon{margin-bottom:35px}.service-highlight>span:not(:first-child){display:block;padding:16px 0;border-top:1px solid rgba(255,255,255,.12);font-size:.78rem;letter-spacing:.12em;color:#bfd2e8}
.site-footer{padding:70px 0 25px;background:#041126;color:#b8c8dc}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1.5fr 1.5fr;gap:45px}.footer-brand{margin-bottom:20px}.footer-copy{max-width:360px;line-height:1.8}.site-footer h5{color:#fff;font-family:"Space Grotesk",sans-serif;margin-bottom:18px}.site-footer a{display:block;color:#b8c8dc;margin:9px 0}.site-footer a:hover{color:#fff}.footer-bottom{margin-top:55px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;gap:20px;font-size:.82rem}
@media(max-width:991.98px){.service-page-grid,.feature-grid{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:767.98px){.inner-hero{min-height:62vh;padding:125px 0 65px}.inner-hero h1{font-size:clamp(2.8rem,13vw,4.2rem)}.content-section,.dark-section{padding:70px 0}.service-page-grid,.feature-grid,.portfolio-page-grid,.solution-grid{grid-template-columns:1fr}.service-benefits ul{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}.footer-bottom{flex-direction:column}}
@media(max-width:575.98px){.footer-grid{grid-template-columns:1fr}.about-panel,.contact-form,.career-note{padding:25px}.mini-metrics{grid-template-columns:1fr}.contact-list a{padding:16px}}

/* STEP 4 — detailed service pages + SVG */
.service-detail-hero{padding:145px 0 90px;background:linear-gradient(135deg,#06152f,#0b2c5c);color:#fff}.service-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}.back-link{display:inline-flex;gap:8px;color:#bcd0e8;margin-bottom:40px}.service-detail-hero h1{font-family:"Space Grotesk",sans-serif;font-size:clamp(3rem,6vw,5.5rem);line-height:1;margin:12px 0 22px}.service-detail-hero h1 span{color:#62b6ff}.service-detail-hero p{font-size:1.15rem;line-height:1.8;color:#c6d5e8;margin-bottom:30px}.service-svg-wrap{padding:12px;border-radius:28px;background:#ffffff0a;border:1px solid #ffffff22}.service-svg-wrap img{width:100%;display:block;border-radius:20px}.benefit-panel{padding:35px;border-radius:24px;background:#f7faff;border:1px solid #dce7f3}.benefit-panel h3{font-family:"Space Grotesk",sans-serif}.benefit-panel ul{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:14px}.benefit-panel li{font-weight:600}.benefit-panel i{color:var(--primary);margin-right:10px}.process-detail-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}.process-detail-grid article{padding:25px 20px;border:1px solid #ffffff20;border-radius:20px;background:#ffffff08}.process-detail-grid b{color:#62b6ff;font-family:"Space Grotesk",sans-serif;font-size:1.4rem}.process-detail-grid h3{font-family:"Space Grotesk",sans-serif;font-size:1.2rem;margin:20px 0 10px}.process-detail-grid p{color:#afc2da;font-size:.9rem;line-height:1.6}.tech-pill-grid{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}.tech-pill-grid span{padding:15px 22px;border-radius:50px;background:#eef5fc;border:1px solid #d7e5f3;font-weight:700;color:#17385f}.faq-section{padding:100px 0;background:#f7faff}.faq-section .accordion{max-width:900px;margin-top:35px}.faq-section .accordion-item{border:1px solid #dbe5f0;margin-bottom:12px;border-radius:14px;overflow:hidden}.faq-section .accordion-button{font-weight:700;padding:20px}.faq-section .accordion-button:not(.collapsed){background:#edf5ff;color:var(--primary);box-shadow:none}.faq-section .accordion-body{line-height:1.8;color:var(--muted)}
@media(max-width:991px){.service-detail-grid{grid-template-columns:1fr}.process-detail-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:575px){.service-detail-hero{padding:125px 0 65px}.process-detail-grid{grid-template-columns:1fr}.benefit-panel{padding:25px}.faq-section{padding:70px 0}}

/* =========================================================
   STEP 5 — PREMIUM MOTION / SVG / MICRO-INTERACTIONS
========================================================= */
:root{--electric:#35d7ff;--glow:rgba(53,215,255,.28)}
body{cursor:default}
.site-header.scrolled{border-bottom:1px solid rgba(115,194,255,.12)}
.navbar-toggler{width:46px;height:42px;border:1px solid rgba(130,190,255,.28)!important;border-radius:12px!important;padding:0!important;position:relative;box-shadow:0 8px 24px rgba(0,0,0,.14)}
.navbar-toggler:focus{box-shadow:0 0 0 4px rgba(53,215,255,.12)!important}
.navbar-toggler-icon{background-image:none!important;width:22px;height:16px;position:relative;display:inline-block;border-top:2px solid #fff;border-bottom:2px solid #fff}
.navbar-toggler-icon:after{content:"";position:absolute;left:0;right:0;top:5px;border-top:2px solid #fff}
.nav-link{position:relative;transition:color .25s ease,transform .25s ease}
.nav-link:after{content:"";position:absolute;left:10px;right:10px;bottom:2px;height:2px;border-radius:99px;background:linear-gradient(90deg,var(--electric),var(--primary));transform:scaleX(0);transform-origin:center;transition:.25s ease}
.nav-link:hover:after,.nav-link.active:after{transform:scaleX(1)}
.dropdown-menu{border:1px solid #dce9f7!important;box-shadow:0 20px 60px rgba(4,19,45,.18)!important;border-radius:16px!important;overflow:hidden}
.dropdown-item{padding:12px 16px;transition:.2s ease}.dropdown-item:hover{background:#f0f7ff;color:var(--primary);transform:translateX(3px)}
.btn{position:relative;overflow:hidden;isolation:isolate}.btn:before{content:"";position:absolute;inset:-2px auto -2px -35%;width:25%;transform:skewX(-18deg);background:rgba(255,255,255,.22);filter:blur(2px);transition:left .55s ease;z-index:-1}.btn:hover:before{left:115%}
.premium-hero-visual{min-height:590px;position:relative;display:grid;place-items:center}.network-svg{width:min(100%,700px);position:relative;z-index:2;filter:drop-shadow(0 0 24px rgba(22,139,255,.2));animation:networkFloat 7s ease-in-out infinite}.visual-halo{position:absolute;width:410px;height:410px;border-radius:50%;background:radial-gradient(circle,rgba(53,215,255,.18),rgba(11,92,255,.06) 45%,transparent 70%);filter:blur(3px);animation:haloPulse 4s ease-in-out infinite}
.glass-float{background:rgba(6,21,47,.72)!important;border-color:rgba(125,226,255,.24)!important;backdrop-filter:blur(16px);box-shadow:0 18px 50px rgba(0,0,0,.28),0 0 30px rgba(53,215,255,.08)}
.card-top{animation:floatA 5s ease-in-out infinite}.card-bottom{animation:floatB 6s ease-in-out infinite}
@keyframes networkFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-10px) scale(1.015)}}
@keyframes haloPulse{0%,100%{opacity:.55;transform:scale(.95)}50%{opacity:1;transform:scale(1.08)}}
@keyframes floatA{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes floatB{0%,100%{transform:translateY(0)}50%{transform:translateY(10px)}}
.tech-visual-panel{margin-top:55px;padding:18px;border:1px solid rgba(117,189,255,.2);border-radius:28px;background:linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.018));display:grid;grid-template-columns:.85fr 1.15fr;align-items:center;gap:20px;overflow:hidden;box-shadow:0 25px 80px rgba(0,0,0,.2)}
.tech-visual-panel img{width:100%;display:block;border-radius:20px}.tech-visual-copy{padding:30px}.tech-visual-copy h3{font-family:"Space Grotesk",sans-serif;font-size:clamp(1.8rem,3vw,3rem);line-height:1.05;color:#fff;margin:12px 0}.tech-visual-copy p{color:#aebfd6;line-height:1.8;max-width:460px}
.tech-item{transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s ease,box-shadow .35s ease}.tech-item:hover{transform:translateY(-8px) scale(1.025);border-color:rgba(82,190,255,.55);box-shadow:0 15px 45px rgba(0,0,0,.2),0 0 24px rgba(53,215,255,.08)}
.service-page-card,.portfolio-large,.why-card,.feature-card,.solution-grid article,.about-panel,.career-note,.contact-form{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,border-color .35s ease}.service-page-card:hover,.portfolio-large:hover,.why-card:hover,.feature-card:hover,.solution-grid article:hover{transform:translateY(-8px);box-shadow:0 25px 65px rgba(4,19,45,.13)}
.reveal-on-scroll{transition-delay:var(--reveal-delay,0ms)}
.portfolio-toolbar{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:42px}.portfolio-filters{display:flex;flex-wrap:wrap;gap:8px}.portfolio-filter{border:1px solid #d9e6f3;background:#fff;color:#53647b;padding:10px 16px;border-radius:999px;font-weight:700;font-size:.85rem;transition:.25s ease}.portfolio-filter:hover,.portfolio-filter.active{background:#071a38;color:#fff;border-color:#071a38;box-shadow:0 8px 24px rgba(7,26,56,.16)}.portfolio-item.is-hidden{display:none}.portfolio-art-dashboard{overflow:hidden}.portfolio-scan{position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#6be5ff,transparent);box-shadow:0 0 16px #6be5ff;animation:scan 3s linear infinite}.portfolio-art-dashboard i{z-index:1}@keyframes scan{from{top:-5%}to{top:105%}}
/* soft animated section grid */
.hero-grid,.inner-hero-grid,.cta-pattern{background-position:0 0;animation:gridDrift 18s linear infinite}@keyframes gridDrift{to{background-position:55px 55px}}
@media(max-width:991.98px){.tech-visual-panel{grid-template-columns:1fr}.tech-visual-copy{padding:24px}.premium-hero-visual{min-height:500px}.portfolio-toolbar{align-items:start;flex-direction:column}}
@media(max-width:767.98px){.navbar-collapse{margin-top:14px;padding:14px;border:1px solid rgba(126,194,255,.18);border-radius:18px;background:rgba(4,17,38,.96);backdrop-filter:blur(18px);box-shadow:0 25px 60px rgba(0,0,0,.28)}.navbar-nav{gap:4px!important}.nav-link{padding:11px 12px!important;border-radius:10px}.nav-link:hover{background:rgba(255,255,255,.06);transform:none}.nav-link:after{display:none}.dropdown-menu{background:#0b2348!important;border-color:rgba(126,194,255,.16)!important}.dropdown-item{color:#dbeaff}.dropdown-item:hover{background:rgba(255,255,255,.08);color:#fff}.btn-nav{display:block;text-align:center}.premium-hero-visual{min-height:420px}.network-svg{width:108%}.visual-halo{width:270px;height:270px}.glass-float{transform:scale(.82)}.card-top{top:35px}.card-bottom{bottom:35px}.tech-visual-panel{margin-top:35px}.portfolio-filters{width:100%}.portfolio-filter{flex:1 1 auto}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.network-svg,.visual-halo,.card-top,.card-bottom,.hero-grid,.inner-hero-grid,.cta-pattern,.portfolio-scan{animation:none!important}.btn:before{display:none}.service-page-card,.portfolio-large,.why-card,.feature-card,.solution-grid article{transition:none}}

/* =========================================================
   STEP 6 — SEO / ACCESSIBILITY / LEGAL / FORM FINISHING
========================================================= */
.skip-link{position:fixed;left:16px;top:-60px;z-index:9999;padding:12px 18px;border-radius:10px;background:#fff;color:#071a38;font-weight:800;box-shadow:0 10px 30px rgba(0,0,0,.2);transition:top .2s ease}.skip-link:focus{top:16px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(53,215,255,.75);outline-offset:3px}.form-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden}.contact-form label{display:block;font-weight:700;margin-bottom:7px}.contact-form input,.contact-form select,.contact-form textarea{width:100%;border:1px solid #d6e3ef;border-radius:12px;padding:13px 15px;background:#fff;color:#102c4f;transition:border-color .2s,box-shadow .2s}.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-color:#35bdf2;box-shadow:0 0 0 4px rgba(53,215,255,.1);outline:0}.contact-form input:invalid:not(:placeholder-shown),.contact-form textarea:invalid:not(:placeholder-shown){border-color:#d88}.form-status{min-height:24px;font-weight:700;font-size:.9rem}.form-status.success{color:#087f5b}.form-status.error{color:#b42318}.form-note{color:#70839a}.footer-bottom a,.footer-legal-links a{color:inherit;text-decoration:none}.footer-bottom a:hover,.footer-legal-links a:hover{text-decoration:underline}.footer-legal-links{padding-top:18px;color:#9eb2cc}.narrow-content{max-width:900px}.legal-content h2{font-family:"Space Grotesk",sans-serif;color:#071a38;margin-top:42px;margin-bottom:12px}.legal-content p{line-height:1.85;color:#566a82}.legal-content a{color:#126ce5;font-weight:700}.error-page{min-height:100vh;display:grid;place-items:center;text-align:center;padding:40px;background:radial-gradient(circle at 50% 35%,rgba(53,215,255,.16),transparent 32%),#06152f;color:#fff}.error-page main{max-width:720px}.error-page h1{font-family:"Space Grotesk",sans-serif;font-size:clamp(3.5rem,10vw,7rem);line-height:.95;margin:20px 0}.error-page h1 span{color:#35d7ff}.error-page p:not(.eyebrow){color:#b9cbe0;line-height:1.8;margin-bottom:28px}.error-orbit{width:180px;height:180px;border:1px solid rgba(53,215,255,.4);border-radius:50%;display:grid;place-items:center;margin:0 auto 25px;box-shadow:0 0 80px rgba(53,215,255,.13);position:relative}.error-orbit:before,.error-orbit:after{content:"";position:absolute;border-radius:50%;background:#35d7ff;box-shadow:0 0 20px #35d7ff}.error-orbit:before{width:8px;height:8px;top:12px}.error-orbit:after{width:5px;height:5px;right:24px;bottom:28px}.error-orbit span{font-family:"Space Grotesk",sans-serif;font-size:3rem;font-weight:800;color:#fff}
@media(max-width:575px){.error-orbit{width:145px;height:145px}.error-orbit span{font-size:2.4rem}}


/* =========================================================
   NEXTRISE BRAND THEME — FINAL MONOCHROME / SILVER SYSTEM
   Inspired by the supplied original black-and-white logo.
========================================================= */
:root{
  --primary:#111111;
  --primary-dark:#000000;
  --navy:#0b0b0b;
  --navy-2:#171717;
  --text:#171717;
  --muted:#6c6c6c;
  --white:#ffffff;
  --silver:#e9e9e9;
  --silver-2:#f5f5f5;
  --line:rgba(17,17,17,.12);
  --shadow:0 18px 55px rgba(0,0,0,.10);
  --brand-accent:#252525;
  --brand-soft:#d8d8d8;
  --electric:#9a9a9a;
  --glow:rgba(0,0,0,.12);
}
body{background:#fff;color:#171717}
::selection{background:#111;color:#fff}

/* Header / original logo */
.site-header{background:rgba(255,255,255,.94);border-bottom:1px solid rgba(0,0,0,.06);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.site-header.scrolled{background:rgba(255,255,255,.97);border-bottom:1px solid rgba(0,0,0,.10);box-shadow:0 10px 35px rgba(0,0,0,.08)}
.navbar{padding:8px 0}
.nav-container{min-height:82px}
.brand{display:inline-flex;align-items:center;line-height:0}
.brand-logo{display:block;width:148px;height:auto;max-height:92px;object-fit:contain;object-position:center;transition:transform .3s ease,filter .3s ease}
.brand:hover .brand-logo{transform:translateY(-1px) scale(1.015)}
.nav-link{color:#303030!important;font-weight:600}
.nav-link:hover,.nav-link.active{color:#000!important}
.nav-link::after{background:#111}
.btn-nav{color:#fff!important;background:#111;border-color:#111;border-radius:999px;padding:11px 19px;box-shadow:0 8px 22px rgba(0,0,0,.12)}
.btn-nav:hover{background:#333;border-color:#333;color:#fff!important}
.navbar-toggler{border-color:#222!important;background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.06)}
.navbar-toggler-icon{border-color:#111!important}
.navbar-toggler-icon:after{border-color:#111!important}
.dropdown-menu{background:#fff!important;border:1px solid #dedede!important;box-shadow:0 20px 60px rgba(0,0,0,.14)!important}
.dropdown-item{color:#222!important}
.dropdown-item i{color:#111!important}
.dropdown-item:hover{background:#f2f2f2!important;color:#000!important}

/* Light premium hero — white/silver/black like the supplied identity */
.hero-section{min-height:100svh;color:#111;background:
  radial-gradient(circle at 78% 42%,rgba(0,0,0,.065),transparent 25%),
  radial-gradient(circle at 18% 76%,rgba(0,0,0,.035),transparent 27%),
  linear-gradient(135deg,#fff 0%,#f7f7f7 55%,#ececec 100%)}
.hero-section:before,.hero-section:after{content:"";position:absolute;pointer-events:none;z-index:0;border:1px solid rgba(0,0,0,.08);border-radius:50%;transform:rotate(-16deg)}
.hero-section:before{width:780px;height:300px;left:-250px;top:100px;box-shadow:0 0 0 14px rgba(0,0,0,.018),0 0 0 28px rgba(0,0,0,.012)}
.hero-section:after{width:760px;height:280px;right:-280px;bottom:70px;box-shadow:0 0 0 16px rgba(0,0,0,.018),0 0 0 32px rgba(0,0,0,.012)}
.hero-grid{opacity:.20;background-image:linear-gradient(rgba(0,0,0,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.055) 1px,transparent 1px);mask-image:linear-gradient(to bottom,#000,transparent 92%)}
.hero-glow{filter:blur(95px);opacity:.07;background:#000!important}
.hero-glow-one{background:#000!important}.hero-glow-two{background:#777!important}
.hero-content{padding-top:72px}
.eyebrow{border-color:rgba(0,0,0,.13);background:rgba(255,255,255,.72);color:#222;box-shadow:0 8px 24px rgba(0,0,0,.04)}
.pulse-dot{background:#111;box-shadow:0 0 0 5px rgba(0,0,0,.08),0 0 14px rgba(0,0,0,.22)}
.hero-title{color:#101010}
.hero-title span{background:linear-gradient(90deg,#111,#666);background-clip:text;-webkit-background-clip:text}
.hero-subtitle{color:#333}
.hero-description{color:#5b5b5b}
.hero-actions .btn-primary-custom{background:#111;border-color:#111;color:#fff;box-shadow:0 12px 28px rgba(0,0,0,.16)}
.hero-actions .btn-primary-custom:hover{background:#333;border-color:#333}
.btn-outline-custom{border-color:#222!important;color:#111!important;background:#fff!important}
.btn-outline-custom:hover{background:#111!important;color:#fff!important}
.hero-trust{color:#555}
.hero-visual{color:#111}
.premium-hero-visual{filter:grayscale(1) contrast(1.03)}
.network-svg{filter:grayscale(1) contrast(1.12) drop-shadow(0 18px 30px rgba(0,0,0,.12));}
.visual-halo{background:radial-gradient(circle,rgba(0,0,0,.10),rgba(0,0,0,.025) 48%,transparent 72%);filter:blur(4px)}
.glass-float{background:rgba(255,255,255,.86)!important;color:#111!important;border-color:rgba(0,0,0,.12)!important;box-shadow:0 18px 50px rgba(0,0,0,.12)!important;backdrop-filter:blur(18px)}
.glass-float *{color:inherit!important}

/* Common sections */
.section-label{color:#555}.section-label>span{background:#111}
.section-title{color:#111}.section-title span{color:#555}
.section-text,.section-intro{color:#666}
.about-section{background:#fff}
.about-visual{filter:grayscale(1)}
.about-orb{box-shadow:0 25px 70px rgba(0,0,0,.08)}
.about-orb-core{background:#111;box-shadow:0 0 0 12px rgba(0,0,0,.04),0 0 60px rgba(0,0,0,.12)}
.about-node{background:rgba(255,255,255,.96);border-color:#ddd;box-shadow:0 12px 35px rgba(0,0,0,.08)}
.about-node i{color:#111}
.services-section{background:#f6f6f6}
.service-card,.service-page-card,.feature-card,.why-card,.portfolio-large,.about-panel,.career-note,.contact-form{background:#fff!important;border-color:#dedede!important;box-shadow:0 12px 35px rgba(0,0,0,.06)!important}
.service-card:hover,.service-page-card:hover,.feature-card:hover,.why-card:hover,.portfolio-large:hover,.solution-grid article:hover{border-color:#aaa!important;box-shadow:0 25px 65px rgba(0,0,0,.12)!important}
.service-icon{background:#111!important;color:#fff!important;box-shadow:none!important}
.service-number{color:#999}
.service-link{color:#111!important}
.service-link:hover{color:#555!important}

/* Dark sections become graphite, not blue */
.technology-section,.process-section{background:#101010!important;color:#fff}
.technology-section:before,.process-section:before{opacity:.15}
.technology-section .section-title,.process-section .section-title,.technology-section .section-label,.process-section .section-label{color:#fff}
.technology-section .section-title span,.process-section .section-title span{color:#bdbdbd}
.technology-section .section-intro,.process-section .section-intro{color:#b5b5b5}
.tech-item{background:#171717!important;border-color:#303030!important;color:#fff}
.tech-item i{color:#fff!important}.tech-item span{color:#ddd}
.tech-item:hover{border-color:#777!important;box-shadow:0 18px 45px rgba(0,0,0,.35)!important}
.tech-visual-panel{background:linear-gradient(135deg,#181818,#0e0e0e)!important;border-color:#333!important;box-shadow:0 25px 80px rgba(0,0,0,.28)!important}
.tech-visual-panel img{filter:grayscale(1) contrast(1.08)}
.tech-visual-copy h3{color:#fff}.tech-visual-copy p{color:#bdbdbd}
.why-section{background:#fff}
.why-card>span{background:#111!important;color:#fff!important}.why-card i{color:#111}
.process-circle{background:#111!important;border-color:#777!important;color:#fff!important}
.process-line{background:#555!important}
.process-step h3{color:#fff}.process-step p{color:#aaa}

/* Portfolio */
.portfolio-section{background:#f7f7f7}
.portfolio-card{background:#fff!important;border-color:#ddd!important;box-shadow:0 12px 35px rgba(0,0,0,.06)!important}
.portfolio-art,.portfolio-art-dashboard{background:linear-gradient(135deg,#0b0b0b,#3b3b3b)!important;color:#fff!important}
.portfolio-art span{border-color:rgba(255,255,255,.32)}
.portfolio-copy>span{color:#222!important}
.portfolio-filter{border-color:#d7d7d7;background:#fff;color:#444}
.portfolio-filter:hover,.portfolio-filter.active{background:#111;color:#fff;border-color:#111;box-shadow:0 8px 24px rgba(0,0,0,.14)}
.portfolio-scan{background:linear-gradient(90deg,transparent,#fff,transparent);box-shadow:0 0 16px rgba(255,255,255,.7)}

/* CTA / footer */
.cta-section{background:#fff!important}
.cta-box{background:linear-gradient(135deg,#111,#2a2a2a)!important;color:#fff;border:1px solid #333!important;box-shadow:0 25px 70px rgba(0,0,0,.16)!important}
.cta-box h2,.cta-box p,.cta-box .section-label{color:#fff}.cta-box h2 span{color:#cfcfcf}
.cta-box .btn-primary-custom{background:#fff!important;color:#111!important;border-color:#fff!important;box-shadow:none}
.cta-box .btn-primary-custom:hover{background:#e8e8e8!important}
.contact-preview{background:#f6f6f6}
.contact-detail{background:#fff;border-color:#ddd}.contact-detail>i{color:#111}
.site-footer{background:#0b0b0b!important;color:#bdbdbd!important}
.site-footer h5{color:#fff}.site-footer a{color:#bdbdbd}.site-footer a:hover{color:#fff}
.footer-brand .brand-logo{filter:invert(1) grayscale(1);width:148px}
.footer-copy{color:#aaa}
.footer-bottom{border-top-color:rgba(255,255,255,.12)}

/* Inner pages and service pages */
.inner-hero,.service-detail-hero{background:linear-gradient(135deg,#fff 0%,#f4f4f4 58%,#e6e6e6 100%)!important;color:#111!important}
.inner-hero-grid{opacity:.20;background-image:linear-gradient(rgba(0,0,0,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.055) 1px,transparent 1px)}
.inner-hero h1,.service-detail-hero h1{color:#111!important}.inner-hero h1 span,.service-detail-hero h1 span{color:#555!important}
.inner-hero p,.service-detail-hero p{color:#626262!important}
.back-link{color:#222!important}.service-svg-wrap{background:#fff!important;border-color:#ddd!important;box-shadow:0 18px 50px rgba(0,0,0,.08)}
.service-svg-wrap img{filter:grayscale(1) contrast(1.06)}
.benefit-panel{background:#f7f7f7;border-color:#ddd}.benefit-panel i{color:#111}
.process-detail-grid article{background:#171717;border-color:#333}.process-detail-grid b{color:#fff}.process-detail-grid p{color:#b8b8b8}
.tech-pill-grid span{background:#f3f3f3;border-color:#d8d8d8;color:#222}
.faq-section{background:#f7f7f7}.faq-section .accordion-item{border-color:#ddd}.faq-section .accordion-button:not(.collapsed){background:#ececec;color:#111}
.content-section{background:#fff}.legal-content h2{color:#111}.legal-content p{color:#606060}.legal-content a{color:#111}

/* Mobile */
@media(max-width:991.98px){
  .nav-container{min-height:74px}
  .brand-logo{width:132px;max-height:80px}
  .navbar-collapse{margin-top:10px;padding:14px;border:1px solid #ddd;border-radius:16px;background:rgba(255,255,255,.98);box-shadow:0 20px 50px rgba(0,0,0,.10);backdrop-filter:blur(18px)}
  .nav-link{color:#222!important}.nav-link:hover{background:#f2f2f2}
  .dropdown-menu{background:#fff!important}
  .dropdown-item{color:#222!important}
  .btn-nav{color:#fff!important}
  .premium-hero-visual{min-height:500px}
}
@media(max-width:767.98px){
  .hero-section{min-height:auto;padding-bottom:55px}
  .hero-content{padding-top:42px}
  .hero-title{letter-spacing:-2.5px}
  .brand-logo{width:116px;max-height:72px}
  .footer-brand .brand-logo{width:125px}
  .hero-section:before{width:560px;height:220px;left:-250px;top:120px}.hero-section:after{width:520px;height:210px;right:-260px;bottom:120px}
}
@media(prefers-reduced-motion:reduce){.brand-logo{transition:none}.hero-section:before,.hero-section:after{box-shadow:none}}